@dhis2-ui/pagination 8.1.11 → 8.2.2

package/build/cjs/__fixtures__/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.noTotalAtLastPage = exports.noTotal = exports.atLastPage = exports.atTenthPage = exports.atFirstPage = void 0;
+exports.noTotalAtLastPage = exports.noTotal = exports.atTenthPage = exports.atSecondPage = exports.atPageBeforeLast = exports.atLastPage = exports.atFirstPage = void 0;
 const atFirstPage = {
   page: 1,
   pageCount: 21,
@@ -11,6 +11,13 @@ const atFirstPage = {
   pageSize: 50
 };
 exports.atFirstPage = atFirstPage;
+const atSecondPage = {
+  page: 2,
+  pageCount: 21,
+  total: 1035,
+  pageSize: 50
+};
+exports.atSecondPage = atSecondPage;
 const atTenthPage = {
   page: 10,
   pageCount: 21,
@@ -25,8 +32,15 @@ const atLastPage = {
   pageSize: 50
 };
 exports.atLastPage = atLastPage;
+const atPageBeforeLast = {
+  page: 20,
+  pageCount: 21,
+  total: 1035,
+  pageSize: 50
+};
+exports.atPageBeforeLast = atPageBeforeLast;
 const noTotal = {
-  page: 2,
+  page: 3,
   pageSize: 50,
   isLastPage: false
 };

package/build/cjs/__tests__/get-item-range.test.js

@@ -23,8 +23,8 @@ describe('getItemRange', () => {
       pageSize,
       total
     });
-    expect(firstItem).toEqual(451);
-    expect(lastItem).toEqual(500);
+    expect(firstItem).toBe(451);
+    expect(lastItem).toBe(500);
   });
   it('returns 0 for firstItem and lastItem if the total is 0', () => {
     const {
@@ -35,8 +35,8 @@ describe('getItemRange', () => {
       pageSize: 50,
       total: 0
     });
-    expect(firstItem).toEqual(0);
-    expect(lastItem).toEqual(0);
+    expect(firstItem).toBe(0);
+    expect(lastItem).toBe(0);
   });
   it('uses the total count as lastItem when the last page is reached', () => {
     const {
@@ -51,7 +51,7 @@ describe('getItemRange', () => {
       pageSize,
       total
     });
-    expect(lastItem).toEqual(total);
+    expect(lastItem).toBe(total);
   });
   it('handles pagers without totals', () => {
     const {
@@ -61,8 +61,8 @@ describe('getItemRange', () => {
       page: 3,
       pageSize: 50
     });
-    expect(firstItem).toEqual(101);
-    expect(lastItem).toEqual(150);
+    expect(firstItem).toBe(101);
+    expect(lastItem).toBe(150);
   });
   it('bases the lastItem on the pageLength for pagers without total when the last page is reached', () => {
     const {
@@ -73,7 +73,7 @@ describe('getItemRange', () => {
       pageLength: 21,
       isLastPage: true
     });
-    expect(lastItem).toEqual(121);
+    expect(lastItem).toBe(121);
   });
   it('sets lastItem to NaN when on the last page and there is no total or pageLength', () => {
     const {
@@ -83,6 +83,6 @@ describe('getItemRange', () => {
       pageSize: 50,
       isLastPage: true
     });
-    expect(lastItem).toEqual(NaN);
+    expect(lastItem).toBe(NaN);
   });
 });

package/build/cjs/__tests__/page-controls.test.js

@@ -25,24 +25,24 @@ describe('<PageControls />', () => {
   it('renders without errors', () => {
     (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pageControls.PageControls, props));
   });
-  it('disables no buttons on a page between first and last', () => {
+  it('enables all buttons on by default', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pageControls.PageControls, props));
-    expect(wrapper.find('.button-previous').getElement().props.disabled).toEqual(false);
-    expect(wrapper.find('.button-next').getElement().props.disabled).toEqual(false);
+    expect(wrapper.find('.button-previous').getElement().props.disabled).toBeFalsy();
+    expect(wrapper.find('.button-next').getElement().props.disabled).toBeFalsy();
   });
-  it('disables the previous page button on the first page', () => {
+  it('disables the previous page button when isPreviousDisabled is true', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pageControls.PageControls, _extends({}, props, {
-      page: 1
+      isPreviousDisabled: true
     })));
-    expect(wrapper.find('.button-previous').getElement().props.disabled).toEqual(true);
-    expect(wrapper.find('.button-next').getElement().props.disabled).toEqual(false);
+    expect(wrapper.find('.button-previous').getElement().props.disabled).toBe(true);
+    expect(wrapper.find('.button-next').getElement().props.disabled).toBeFalsy();
   });
-  it('disables the next page button on the last page', () => {
+  it('disables the next page button when isNextDisabled is true', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pageControls.PageControls, _extends({}, props, {
-      isLastPage: true
+      isNextDisabled: true
     })));
-    expect(wrapper.find('.button-previous').getElement().props.disabled).toEqual(false);
-    expect(wrapper.find('.button-next').getElement().props.disabled).toEqual(true);
+    expect(wrapper.find('.button-previous').getElement().props.disabled).toBeFalsy();
+    expect(wrapper.find('.button-next').getElement().props.disabled).toBe(true);
   });
   it('calls the onClick handler with the value for the next page when next is clicked', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pageControls.PageControls, props));

package/build/cjs/__tests__/page-summary.test.js

@@ -35,7 +35,7 @@ describe('<PageSummary />', () => {
       total: 224
     })));
     const expectedString = 'Page 2 of 5, items 51-100 of 224';
-    expect(wrapper.find('span').text()).toEqual(expectedString);
+    expect(wrapper.find('span').text()).toBe(expectedString);
   });
   it('renders the correct message when only lastItem is provided', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pageSummary.PageSummary, _extends({}, props, {
@@ -45,7 +45,7 @@ describe('<PageSummary />', () => {
       pageCount: 5
     })));
     const expectedString = 'Page 2, items 51-100';
-    expect(wrapper.find('span').text()).toEqual(expectedString);
+    expect(wrapper.find('span').text()).toBe(expectedString);
   });
   it('renders the correct message when total is missing and lastItem is not a number', () => {
     const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pageSummary.PageSummary, _extends({}, props, {
@@ -55,6 +55,6 @@ describe('<PageSummary />', () => {
       pageCount: 5
     })));
     const expectedString = 'Page 2';
-    expect(wrapper.find('span').text()).toEqual(expectedString);
+    expect(wrapper.find('span').text()).toBe(expectedString);
   });
 });

package/build/cjs/__tests__/pagination.test.js

@@ -1,14 +1,12 @@
 "use strict";
 
-var _enzyme = require("enzyme");
+require("@testing-library/dom");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
 
-var mockPagers = _interopRequireWildcard(require("../__fixtures__/index.js"));
-
-var _pageSelect = require("../page-select.js");
+var _react2 = _interopRequireDefault(require("react"));
 
-var _pageSizeSelect = require("../page-size-select.js");
+var mockPagers = _interopRequireWildcard(require("../__fixtures__/index.js"));
 
 var _pagination = require("../pagination.js");
 
@@ -27,69 +25,163 @@ describe('<Pagination />', () => {
       onPageSizeChange: () => {}
     };
     it('renders without errors', () => {
-      (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, props));
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, props));
     });
     it('renders a PageSelect and PageSizeSelect by default', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, props));
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(1);
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(1);
+      const {
+        getByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, props));
+      expect(getByTestId('dhis2-uiwidgets-pagination-page-select')).toBeInTheDocument();
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize')).toBeInTheDocument();
     });
     it('renders without a PageSelect when hidePageSelect is true', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, {
         hidePageSelect: true
       })));
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(0);
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(1);
+      expect(queryByTestId('dhis2-uiwidgets-pagination-page-select')).not.toBeInTheDocument();
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize')).toBeInTheDocument();
     });
     it('renders without a PageSelect when pageCount is not provided', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, {
         pageCount: undefined
       })));
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(0);
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(1);
+      expect(queryByTestId('dhis2-uiwidgets-pagination-page-select')).not.toBeInTheDocument();
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize')).toBeInTheDocument();
     });
     it('renders without a PageSelect when pageCount is 1', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, {
         pageCount: 1
       })));
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(0);
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(1);
+      expect(queryByTestId('dhis2-uiwidgets-pagination-page-select')).not.toBeInTheDocument();
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize')).toBeInTheDocument();
     });
     it('renders without a PageSelect when pageCount is over 2000', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, {
         pageCount: 2001
       })));
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(0);
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(1);
+      expect(queryByTestId('dhis2-uiwidgets-pagination-page-select')).not.toBeInTheDocument();
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize')).toBeInTheDocument();
     });
     it('renders without a PageSizeSelect when hidePageSizeSelect is true', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, {
         hidePageSizeSelect: true
       })));
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(1);
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(0);
+      expect(queryByTestId('dhis2-uiwidgets-pagination-pagesize')).not.toBeInTheDocument();
+      expect(getByTestId('dhis2-uiwidgets-pagination-page-select')).toBeInTheDocument();
     });
     it('renders without PageSelect and PageSizeSelect when both are true', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, _extends({}, props, {
+      const {
+        queryByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, {
         hidePageSelect: true,
         hidePageSizeSelect: true
       })));
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(0);
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(0);
+      expect(queryByTestId('dhis2-uiwidgets-pagination-pagesize')).not.toBeInTheDocument();
+      expect(queryByTestId('dhis2-uiwidgets-pagination-page-select')).not.toBeInTheDocument();
+    });
+    it('enables all elements when disabled is falsy', () => {
+      const {
+        getByTestId,
+        getByRole
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, props));
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize').querySelector('.select .root')).not.toHaveClass('disabled');
+      expect(getByTestId('dhis2-uiwidgets-pagination-summary').querySelector('span')).not.toHaveClass('inactive');
+      expect(getByTestId('dhis2-uiwidgets-pagination-page-select').querySelector('.select .root')).not.toHaveClass('disabled');
+      expect(getByRole('button', {
+        name: 'Previous'
+      })).not.toBeDisabled();
+      expect(getByRole('button', {
+        name: 'Next'
+      })).not.toBeDisabled();
+    });
+    it('disables all elements when disabled is true', () => {
+      const {
+        getByTestId,
+        getByRole
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, {
+        disabled: true
+      })));
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize').querySelector('.select .root')).toHaveClass('disabled');
+      expect(getByTestId('dhis2-uiwidgets-pagination-summary').querySelector('span')).toHaveClass('inactive');
+      expect(getByTestId('dhis2-uiwidgets-pagination-page-select').querySelector('.select .root')).toHaveClass('disabled');
+      expect(getByRole('button', {
+        name: 'Previous'
+      })).toBeDisabled();
+      expect(getByRole('button', {
+        name: 'Next'
+      })).toBeDisabled();
+    });
+    it('disables previous button when on the first page', () => {
+      const {
+        getByRole
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, mockPagers.atFirstPage, {
+        onPageChange: () => {},
+        onPageSizeChange: () => {}
+      })));
+      expect(getByRole('button', {
+        name: 'Previous'
+      })).toBeDisabled();
+      expect(getByRole('button', {
+        name: 'Next'
+      })).not.toBeDisabled();
+    });
+    it('disables next button when on the last page', () => {
+      const {
+        getByRole
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, mockPagers.atLastPage, {
+        onPageChange: () => {},
+        onPageSizeChange: () => {}
+      })));
+      expect(getByRole('button', {
+        name: 'Previous'
+      })).not.toBeDisabled();
+      expect(getByRole('button', {
+        name: 'Next'
+      })).toBeDisabled();
     });
   });
   describe('Pagination without total and totalPages', () => {
     const props = { ...mockPagers.noTotal,
+      pageLength: mockPagers.noTotal.pageSize,
       onPageChange: () => {},
       onPageSizeChange: () => {}
     };
     it('renders without errors', () => {
-      (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, props));
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, props));
     });
     it('renders with a PageSizeSelect but without a PageSelect', () => {
-      const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_pagination.Pagination, props));
-      expect(wrapper.find(_pageSizeSelect.PageSizeSelect).length).toEqual(1);
-      expect(wrapper.find(_pageSelect.PageSelect).length).toEqual(0);
+      const {
+        queryByTestId,
+        getByTestId
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, props));
+      expect(getByTestId('dhis2-uiwidgets-pagination-pagesize')).toBeInTheDocument();
+      expect(queryByTestId('dhis2-uiwidgets-pagination-page-select')).not.toBeInTheDocument();
+    });
+    it('prevents forward navigation when on the last page', () => {
+      const {
+        getByRole
+      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_pagination.Pagination, _extends({}, props, mockPagers.noTotalAtLastPage)));
+      expect(getByRole('button', {
+        name: 'Previous'
+      })).not.toBeDisabled();
+      expect(getByRole('button', {
+        name: 'Next'
+      })).toBeDisabled();
     });
   });
 });

package/build/cjs/get-default-page-summary-text.js

@@ -11,13 +11,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const isValidNumber = input => typeof input === 'number' && !isNaN(input);
 
-const getDefaultPageSummaryText = ({
-  firstItem,
-  lastItem,
-  page,
-  pageCount,
-  total
-}) => {
+const getDefaultPageSummaryText = _ref => {
+  let {
+    firstItem,
+    lastItem,
+    page,
+    pageCount,
+    total
+  } = _ref;
+
   if (isValidNumber(total) && isValidNumber(lastItem)) {
     return _index.default.t('Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}', {
       page,

package/build/cjs/get-item-range.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getItemRange = void 0;
 
-const getItemRange = ({
-  isLastPage,
-  page,
-  pageLength,
-  pageSize,
-  total
-}) => {
+const getItemRange = _ref => {
+  let {
+    isLastPage,
+    page,
+    pageLength,
+    pageSize,
+    total
+  } = _ref;
   // page is 1-based
   let firstItem = (page - 1) * pageSize + 1;
   let lastItem = firstItem + pageSize - 1;

package/build/cjs/page-controls.js

@@ -19,7 +19,6 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// TODO: i18n translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
@@ -28,34 +27,38 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const PageControls = ({
-  dataTest,
-  isLastPage,
-  onClick,
-  nextPageText,
-  page,
-  previousPageText
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": `${dataTest}-pagecontrols`,
-  className: _style.default.dynamic([["2407365506", [_uiConstants.spacers.dp4]]])
-}, /*#__PURE__*/_react.default.createElement(_button.Button, {
-  secondary: true,
-  className: "button-previous",
-  small: true,
-  disabled: page === 1,
-  onClick: () => onClick(page - 1),
-  dataTest: `${dataTest}-page-previous`
-}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/_react.default.createElement(_button.Button, {
-  secondary: true,
-  className: "button-next",
-  small: true,
-  disabled: !!isLastPage,
-  onClick: () => onClick(page + 1),
-  dataTest: `${dataTest}-page-next`
-}, translate(nextPageText), /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2407365506",
-  dynamic: [_uiConstants.spacers.dp4]
-}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-left:0;}", `div.__jsx-style-dynamic-selector .button-next{height:32px;padding-right:0;margin-left:${_uiConstants.spacers.dp4};}`]));
+const PageControls = _ref => {
+  let {
+    dataTest,
+    isNextDisabled,
+    isPreviousDisabled,
+    nextPageText,
+    page,
+    previousPageText,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "".concat(dataTest, "-pagecontrols"),
+    className: _style.default.dynamic([["2407365506", [_uiConstants.spacers.dp4]]])
+  }, /*#__PURE__*/_react.default.createElement(_button.Button, {
+    secondary: true,
+    className: "button-previous",
+    small: true,
+    disabled: isPreviousDisabled,
+    onClick: () => onClick(page - 1),
+    dataTest: "".concat(dataTest, "-page-previous")
+  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    secondary: true,
+    className: "button-next",
+    small: true,
+    disabled: isNextDisabled,
+    onClick: () => onClick(page + 1),
+    dataTest: "".concat(dataTest, "-page-next")
+  }, translate(nextPageText), /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2407365506",
+    dynamic: [_uiConstants.spacers.dp4]
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-left:0;}", "div.__jsx-style-dynamic-selector .button-next{height:32px;padding-right:0;margin-left:".concat(_uiConstants.spacers.dp4, ";}")]));
+};
 
 exports.PageControls = PageControls;
 PageControls.propTypes = {
@@ -64,5 +67,6 @@ PageControls.propTypes = {
   page: _propTypes.default.number.isRequired,
   previousPageText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
   onClick: _propTypes.default.func.isRequired,
-  isLastPage: _propTypes.default.bool
+  isNextDisabled: _propTypes.default.bool,
+  isPreviousDisabled: _propTypes.default.bool
 };

package/build/cjs/page-select.js

@@ -32,32 +32,40 @@ const createAvailablePages = length => Array.from({
 
 exports.createAvailablePages = createAvailablePages;
 
-const PageSelect = ({
-  dataTest,
-  pageSelectText,
-  onChange,
-  page,
-  pageCount
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": `${dataTest}-gotopage`,
-  className: _style.default.dynamic([["485717002", [_uiConstants.spacers.dp12]]])
-}, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
-  dense: true,
-  selected: page.toString(),
-  onChange: ({
-    selected
-  }) => onChange(parseInt(selected, 10)),
-  className: "select",
-  dataTest: `${dataTest}-page-select`,
-  prefix: translate(pageSelectText)
-}, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
-  key: availablePage,
-  value: availablePage,
-  label: availablePage
-}))), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "485717002",
-  dynamic: [_uiConstants.spacers.dp12]
-}, [`div.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp12};}`]));
+const PageSelect = _ref => {
+  let {
+    dataTest,
+    disabled,
+    pageSelectText,
+    onChange,
+    page,
+    pageCount
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "".concat(dataTest, "-gotopage"),
+    className: _style.default.dynamic([["485717002", [_uiConstants.spacers.dp12]]])
+  }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
+    dense: true,
+    disabled: disabled,
+    selected: page.toString(),
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      return onChange(parseInt(selected, 10));
+    },
+    className: "select",
+    dataTest: "".concat(dataTest, "-page-select"),
+    prefix: translate(pageSelectText)
+  }, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
+    key: availablePage,
+    value: availablePage,
+    label: availablePage
+  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "485717002",
+    dynamic: [_uiConstants.spacers.dp12]
+  }, ["div.__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp12, ";}")]));
+};
 
 exports.PageSelect = PageSelect;
 PageSelect.propTypes = {
@@ -65,5 +73,6 @@ PageSelect.propTypes = {
   page: _propTypes.default.number.isRequired,
   pageCount: _propTypes.default.number.isRequired,
   pageSelectText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
-  onChange: _propTypes.default.func.isRequired
+  onChange: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool
 };

package/build/cjs/page-size-select.js

@@ -26,32 +26,40 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const PageSizeSelect = ({
-  dataTest,
-  pageSizeSelectText,
-  pageSize,
-  pageSizes,
-  onChange
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": `${dataTest}-pagesize`,
-  className: _style.default.dynamic([["1934482915", [_uiConstants.spacers.dp12]]])
-}, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
-  dense: true,
-  selected: pageSize.toString(),
-  onChange: ({
-    selected
-  }) => onChange(parseInt(selected, 10)),
-  className: "select",
-  dataTest: `${dataTest}-pagesize-select`,
-  prefix: translate(pageSizeSelectText)
-}, pageSizes.map(length => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
-  key: length,
-  value: length,
-  label: length
-}))), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1934482915",
-  dynamic: [_uiConstants.spacers.dp12]
-}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:${_uiConstants.spacers.dp12};-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}`]));
+const PageSizeSelect = _ref => {
+  let {
+    dataTest,
+    disabled,
+    pageSizeSelectText,
+    pageSize,
+    pageSizes,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "".concat(dataTest, "-pagesize"),
+    className: _style.default.dynamic([["1934482915", [_uiConstants.spacers.dp12]]])
+  }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
+    dense: true,
+    disabled: disabled,
+    selected: pageSize.toString(),
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      return onChange(parseInt(selected, 10));
+    },
+    className: "select",
+    dataTest: "".concat(dataTest, "-pagesize-select"),
+    prefix: translate(pageSizeSelectText)
+  }, pageSizes.map(length => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
+    key: length,
+    value: length,
+    label: length
+  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1934482915",
+    dynamic: [_uiConstants.spacers.dp12]
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-right:".concat(_uiConstants.spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
+};
 
 exports.PageSizeSelect = PageSizeSelect;
 PageSizeSelect.propTypes = {
@@ -59,5 +67,6 @@ PageSizeSelect.propTypes = {
   pageSize: _propTypes.default.number.isRequired,
   pageSizeSelectText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
   pageSizes: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  onChange: _propTypes.default.func.isRequired
+  onChange: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool
 };