What does this PR do?

This PR fixes handling on step to ensure that in a controlled scenario, the internal state value is updated. It also ensures that step + stepOptions works.

Previously, #7188 caused the internal management of stepOptions to break when caller passed a value to Pagination step.

For context, we had explored introducing a useControlled hook to reduce 1 extra re-render caused by the useEffect pattern. That said, this assumes that the prop being controlled (in this case step) has an equivalent change handler (which doesn't currently exist). Therefore, by passing onChange to the useControlled hook, we were incorrectly calling a change event more frequently than previously as well as not allowing stepOptions to update the internal step in cases where step was also used.

Given we follow the useEffect pattern elsewhere in Grommet, we will still with that for the time being as opposed to extending Pagination's API surface to include a step handler like onStep.

Where should the reviewer start?

src/js/components/Pagination/Pagination.js

What testing has been done on this PR?

Locally in storybook.

import React from 'react';

import { Box, Pagination, Text, Select } from 'grommet';

export const Simple = () => {
  const [page, setPage] = React.useState(1);
  const [step, setStep] = React.useState(10);

  return (
    // Uncomment <Grommet> lines when using outside of storybook
    // <Grommet theme={...}>
    <Box align="start" pad="small" gap="medium">
      <Box>
        <Select
          options={[10, 25, 50, 100]}
          onChange={({ option }) => setStep(option)}
          value={step}
        />
        <Text>Default</Text>
        <Pagination
          numberItems={237}
          page={page}
          onChange={({ page: nextPage }) => {
            console.log(nextPage);
            setPage(nextPage);
          }}
          step={step}
          stepOptions
        />
      </Box>
    </Box>
    // </Grommet>
  );
};

export default {
  title: 'Controls/Pagination/Simple',
};

Added jest tests.

How should this be manually tested?

In storybook locally as mentioned above.

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Closes #7201

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No.

Should this PR be mentioned in the release notes?

Yes.

Is this change backwards compatible or is it a breaking change?

Backwards compatible.