feat(pagination): add onChange for pagination component

packages/pagination/src/elements/Pagination.example.md

@@ -5,7 +5,11 @@ initialState = {
   currentPage: 1
 };
 
-<Pagination totalPages={25} currentPage={state.currentPage} onStateChange={setState} />;
+<Pagination
+  totalPages={25}
+  currentPage={state.currentPage}
+  onChange={currentPage => setState({ currentPage })}
+/>;
 ```
 
 ### Custom Page Padding

packages/pagination/src/elements/Pagination.js

@@ -32,6 +32,10 @@ export default class Pagination extends ControlledComponent {
      * The currently selected page
      */
     currentPage: PropTypes.number.isRequired,
+    /**
+     * The currently focused key
+     */
+    focusedKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * The total number of pages available
      */
@@ -43,9 +47,14 @@ export default class Pagination extends ControlledComponent {
     pagePadding: PropTypes.number,
     /**
      * @param {Object} newState
+     * @param {Any} newState.focusedKey - The newly focused page key
      * @param {Any} newState.currentPage - The newly selected page
      */
     onStateChange: PropTypes.func,
+    /**
+     * @param {Any} currentPage - The newly selected page
+     */
+    onChange: PropTypes.func,
     /**
      * The root ID to use for descendants. A unique ID is created if none is provided.
      **/
@@ -212,7 +221,7 @@ export default class Pagination extends ControlledComponent {
    * we must mutate the data to compute currentPage
    */
   onPaginationStateChange = newProps => {
-    const { totalPages } = this.props;
+    const { totalPages, onChange } = this.props;
     const { currentPage } = this.getControlledState();
 
     if (newProps.selectedKey === PREVIOUS_KEY && currentPage > 1) {
@@ -233,6 +242,10 @@ export default class Pagination extends ControlledComponent {
       newProps.currentPage = newProps.selectedKey;
     }
 
+    if (newProps.currentPage !== undefined) {
+      onChange && onChange(newProps.currentPage);
+    }
+
     this.setControlledState(newProps);
   };
 

packages/pagination/src/elements/Pagination.spec.js

@@ -17,18 +17,21 @@ import Page from '../views/Page';
 
 describe('Pagination', () => {
   let onStateChange;
+  let onChange;
 
   const BasicExample = ({ currentPage = 1, totalPages = 5, ...other } = {}) => (
     <Pagination
       totalPages={totalPages}
       currentPage={currentPage}
       onStateChange={onStateChange}
+      onChange={onChange}
       {...other}
     />
   );
 
   beforeEach(() => {
     onStateChange = jest.fn();
+    onChange = jest.fn();
   });
 
   describe('transformPageProps', () => {
@@ -146,7 +149,7 @@ describe('Pagination', () => {
   });
 
   describe('Pages', () => {
-    it('updates currentPage when selected', () => {
+    it('updates onStateChange with currentPage when selected', () => {
       const wrapper = mountWithTheme(<BasicExample currentPage={1} totalPages={5} />);
 
       wrapper
@@ -156,6 +159,16 @@ describe('Pagination', () => {
       expect(onStateChange).toHaveBeenCalledWith({ currentPage: 2 });
     });
 
+    it('updates onChange with currentPage when selected', () => {
+      const wrapper = mountWithTheme(<BasicExample currentPage={1} totalPages={5} />);
+
+      wrapper
+        .find(Page)
+        .at(2)
+        .simulate('click');
+      expect(onChange).toHaveBeenCalledWith(2);
+    });
+
     it('hides front gap when currentPage is within padding range', () => {
       const wrapper = mountWithTheme(<BasicExample currentPage={1} totalPages={25} />);
       const children = wrapper