diff --git a/packages/pagination/src/elements/Pagination.example.md b/packages/pagination/src/elements/Pagination.example.md
index 96b3f36e256..557eda7f352 100644
--- a/packages/pagination/src/elements/Pagination.example.md
+++ b/packages/pagination/src/elements/Pagination.example.md
@@ -5,7 +5,11 @@ initialState = {
currentPage: 1
};
-;
+ setState({ currentPage })}
+/>;
```
### Custom Page Padding
diff --git a/packages/pagination/src/elements/Pagination.js b/packages/pagination/src/elements/Pagination.js
index 4b8137bb7a5..d200545f50d 100644
--- a/packages/pagination/src/elements/Pagination.js
+++ b/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);
};
diff --git a/packages/pagination/src/elements/Pagination.spec.js b/packages/pagination/src/elements/Pagination.spec.js
index 1ca40214efd..bb19be52252 100644
--- a/packages/pagination/src/elements/Pagination.spec.js
+++ b/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 } = {}) => (
);
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();
wrapper
@@ -156,6 +159,16 @@ describe('Pagination', () => {
expect(onStateChange).toHaveBeenCalledWith({ currentPage: 2 });
});
+ it('updates onChange with currentPage when selected', () => {
+ const wrapper = mountWithTheme();
+
+ wrapper
+ .find(Page)
+ .at(2)
+ .simulate('click');
+ expect(onChange).toHaveBeenCalledWith(2);
+ });
+
it('hides front gap when currentPage is within padding range', () => {
const wrapper = mountWithTheme();
const children = wrapper