@dhis2-ui/pagination 8.1.9 → 8.2.0

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.atPageBeforeLast = exports.atLastPage = exports.atTenthPage = exports.atSecondPage = 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/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);
@@ -30,11 +29,12 @@ const translate = (prop, interpolationObject) => {
 
 const PageControls = ({
   dataTest,
-  isLastPage,
-  onClick,
+  isNextDisabled,
+  isPreviousDisabled,
   nextPageText,
   page,
-  previousPageText
+  previousPageText,
+  onClick
 }) => /*#__PURE__*/_react.default.createElement("div", {
   "data-test": `${dataTest}-pagecontrols`,
   className: _style.default.dynamic([["2407365506", [_uiConstants.spacers.dp4]]])
@@ -42,14 +42,14 @@ const PageControls = ({
   secondary: true,
   className: "button-previous",
   small: true,
-  disabled: page === 1,
+  disabled: isPreviousDisabled,
   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,
+  disabled: isNextDisabled,
   onClick: () => onClick(page + 1),
   dataTest: `${dataTest}-page-next`
 }, translate(nextPageText), /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
@@ -64,5 +64,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

@@ -34,6 +34,7 @@ exports.createAvailablePages = createAvailablePages;
 
 const PageSelect = ({
   dataTest,
+  disabled,
   pageSelectText,
   onChange,
   page,
@@ -43,6 +44,7 @@ const PageSelect = ({
   className: _style.default.dynamic([["485717002", [_uiConstants.spacers.dp12]]])
 }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
   dense: true,
+  disabled: disabled,
   selected: page.toString(),
   onChange: ({
     selected
@@ -65,5 +67,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

@@ -28,6 +28,7 @@ const translate = (prop, interpolationObject) => {
 
 const PageSizeSelect = ({
   dataTest,
+  disabled,
   pageSizeSelectText,
   pageSize,
   pageSizes,
@@ -37,6 +38,7 @@ const PageSizeSelect = ({
   className: _style.default.dynamic([["1934482915", [_uiConstants.spacers.dp12]]])
 }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
   dense: true,
+  disabled: disabled,
   selected: pageSize.toString(),
   onChange: ({
     selected
@@ -59,5 +61,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
 };

package/build/cjs/page-summary.js

@@ -9,6 +9,8 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 
 var _uiConstants = require("@dhis2/ui-constants");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -26,6 +28,7 @@ const translate = (prop, interpolationObject) => {
 const PageSummary = ({
   dataTest,
   firstItem,
+  inactive,
   lastItem,
   page,
   pageCount,
@@ -41,13 +44,15 @@ const PageSummary = ({
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": `${dataTest}-summary`,
-    className: _style.default.dynamic([["3931741314", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700]]])
+    className: _style.default.dynamic([["1022808428", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]])
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.dynamic([["3931741314", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700]]])
+    className: _style.default.dynamic([["1022808428", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)({
+      inactive
+    }) || "")
   }, summary), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3931741314",
-    dynamic: [_uiConstants.spacers.dp12, _uiConstants.colors.grey700]
-  }, [`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};}`, `span.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey700};font-size:14px;}`]));
+    id: "1022808428",
+    dynamic: [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]
+  }, [`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};}`, `span.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey700};font-size:14px;}`, `span.inactive.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey500};}`]));
 };
 
 exports.PageSummary = PageSummary;
@@ -56,6 +61,7 @@ PageSummary.propTypes = {
   page: _propTypes.default.number.isRequired,
   pageSummaryText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
   firstItem: _propTypes.default.number,
+  inactive: _propTypes.default.bool,
   lastItem: _propTypes.default.number,
   pageCount: _propTypes.default.number,
   total: _propTypes.default.number

package/build/cjs/pagination.js

@@ -36,6 +36,7 @@ const MAX_PAGE_COUNT = 2000;
 const Pagination = ({
   className,
   dataTest,
+  disabled,
   hidePageSelect,
   hidePageSizeSelect,
   hidePageSummary,
@@ -72,12 +73,14 @@ const Pagination = ({
     className: "jsx-3647884394" + " " + "spacer"
   }) : /*#__PURE__*/_react.default.createElement(_pageSizeSelect.PageSizeSelect, {
     dataTest: dataTest,
+    disabled: disabled,
     pageSize: pageSize,
     pageSizes: pageSizes,
     onChange: onPageSizeChange,
     pageSizeSelectText: pageSizeSelectText
   }), !hidePageSummary && /*#__PURE__*/_react.default.createElement(_pageSummary.PageSummary, {
     dataTest: dataTest,
+    inactive: disabled,
     firstItem: firstItem,
     lastItem: lastItem,
     page: page,
@@ -88,17 +91,19 @@ const Pagination = ({
     className: "jsx-3647884394" + " " + "page-navigation"
   }, showPageSelect && /*#__PURE__*/_react.default.createElement(_pageSelect.PageSelect, {
     dataTest: dataTest,
+    disabled: disabled,
     pageSelectText: pageSelectText,
     page: page,
     pageCount: pageCount,
     onChange: onPageChange
   }), /*#__PURE__*/_react.default.createElement(_pageControls.PageControls, {
     dataTest: dataTest,
-    isLastPage: isLastPage || page === pageCount,
     nextPageText: nextPageText,
     page: page,
     previousPageText: previousPageText,
-    onClick: onPageChange
+    onClick: onPageChange,
+    isNextDisabled: disabled || isLastPage || page === pageCount,
+    isPreviousDisabled: disabled || page === 1
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3647884394"
   }, [".container.jsx-3647884394{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}", ".spacer.jsx-3647884394{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.jsx-3647884394{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;}"]));
@@ -119,6 +124,7 @@ Pagination.propTypes = {
   pageSize: _propTypes2.default.number.isRequired,
   className: _propTypes2.default.string,
   dataTest: _propTypes2.default.string,
+  disabled: _propTypes2.default.bool,
   hidePageSelect: _propTypes2.default.bool,
   hidePageSizeSelect: _propTypes2.default.bool,
   hidePageSummary: _propTypes2.default.bool,

package/build/cjs/pagination.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.WithoutPageSummary = exports.WithoutGoToPageSelect = exports.WithoutPageSizeSelect = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.Default = exports.default = void 0;
+exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.WithoutPageSummary = exports.WithoutGoToPageSelect = exports.WithoutPageSizeSelect = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.Disabled = exports.Default = exports.default = void 0;
 
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 
@@ -65,6 +65,11 @@ const Default = Template.bind({});
 exports.Default = Default;
 Default.args = { ...pagers.atTenthPage
 };
+const Disabled = Template.bind({});
+exports.Disabled = Disabled;
+Disabled.args = { ...pagers.atTenthPage,
+  disabled: true
+};
 const PagerAtFirstPage = Template.bind({});
 exports.PagerAtFirstPage = PagerAtFirstPage;
 PagerAtFirstPage.args = { ...pagers.atFirstPage

package/build/es/__fixtures__/index.js

@@ -4,6 +4,12 @@ export const atFirstPage = {
   total: 1035,
   pageSize: 50
 };
+export const atSecondPage = {
+  page: 2,
+  pageCount: 21,
+  total: 1035,
+  pageSize: 50
+};
 export const atTenthPage = {
   page: 10,
   pageCount: 21,
@@ -16,8 +22,14 @@ export const atLastPage = {
   total: 1035,
   pageSize: 50
 };
+export const atPageBeforeLast = {
+  page: 20,
+  pageCount: 21,
+  total: 1035,
+  pageSize: 50
+};
 export const noTotal = {
-  page: 2,
+  page: 3,
   pageSize: 50,
   isLastPage: false
 };

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

@@ -15,8 +15,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 {
@@ -27,8 +27,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 {
@@ -43,7 +43,7 @@ describe('getItemRange', () => {
       pageSize,
       total
     });
-    expect(lastItem).toEqual(total);
+    expect(lastItem).toBe(total);
   });
   it('handles pagers without totals', () => {
     const {
@@ -53,8 +53,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 {
@@ -65,7 +65,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 {
@@ -75,6 +75,6 @@ describe('getItemRange', () => {
       pageSize: 50,
       isLastPage: true
     });
-    expect(lastItem).toEqual(NaN);
+    expect(lastItem).toBe(NaN);
   });
 });

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

@@ -18,24 +18,24 @@ describe('<PageControls />', () => {
   it('renders without errors', () => {
     shallow( /*#__PURE__*/React.createElement(PageControls, props));
   });
-  it('disables no buttons on a page between first and last', () => {
+  it('enables all buttons on by default', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(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 = shallow( /*#__PURE__*/React.createElement(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 = shallow( /*#__PURE__*/React.createElement(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 = shallow( /*#__PURE__*/React.createElement(PageControls, props));

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

@@ -27,7 +27,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 = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, {
@@ -37,7 +37,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 = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, {
@@ -47,6 +47,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/es/__tests__/pagination.test.js

@@ -1,10 +1,9 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { shallow } from 'enzyme';
+import '@testing-library/dom';
+import { render } from '@testing-library/react';
 import React from 'react';
 import * as mockPagers from '../__fixtures__/index.js';
-import { PageSelect } from '../page-select.js';
-import { PageSizeSelect } from '../page-size-select.js';
 import { Pagination } from '../pagination.js';
 describe('<Pagination />', () => {
   describe('Pagination with total and totalPages', () => {
@@ -13,69 +12,163 @@ describe('<Pagination />', () => {
       onPageSizeChange: () => {}
     };
     it('renders without errors', () => {
-      shallow( /*#__PURE__*/React.createElement(Pagination, props));
+      render( /*#__PURE__*/React.createElement(Pagination, props));
     });
     it('renders a PageSelect and PageSizeSelect by default', () => {
-      const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, props));
-      expect(wrapper.find(PageSelect).length).toEqual(1);
-      expect(wrapper.find(PageSizeSelect).length).toEqual(1);
+      const {
+        getByTestId
+      } = render( /*#__PURE__*/React.createElement(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 = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = render( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
         hidePageSelect: true
       })));
-      expect(wrapper.find(PageSelect).length).toEqual(0);
-      expect(wrapper.find(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 = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = render( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
         pageCount: undefined
       })));
-      expect(wrapper.find(PageSelect).length).toEqual(0);
-      expect(wrapper.find(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 = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = render( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
         pageCount: 1
       })));
-      expect(wrapper.find(PageSelect).length).toEqual(0);
-      expect(wrapper.find(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 = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = render( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
         pageCount: 2001
       })));
-      expect(wrapper.find(PageSelect).length).toEqual(0);
-      expect(wrapper.find(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 = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+      const {
+        getByTestId,
+        queryByTestId
+      } = render( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
         hidePageSizeSelect: true
       })));
-      expect(wrapper.find(PageSelect).length).toEqual(1);
-      expect(wrapper.find(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 = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+      const {
+        queryByTestId
+      } = render( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
         hidePageSelect: true,
         hidePageSizeSelect: true
       })));
-      expect(wrapper.find(PageSelect).length).toEqual(0);
-      expect(wrapper.find(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
+      } = render( /*#__PURE__*/React.createElement(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
+      } = render( /*#__PURE__*/React.createElement(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
+      } = render( /*#__PURE__*/React.createElement(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
+      } = render( /*#__PURE__*/React.createElement(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', () => {
-      shallow( /*#__PURE__*/React.createElement(Pagination, props));
+      render( /*#__PURE__*/React.createElement(Pagination, props));
     });
     it('renders with a PageSizeSelect but without a PageSelect', () => {
-      const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, props));
-      expect(wrapper.find(PageSizeSelect).length).toEqual(1);
-      expect(wrapper.find(PageSelect).length).toEqual(0);
+      const {
+        queryByTestId,
+        getByTestId
+      } = render( /*#__PURE__*/React.createElement(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
+      } = render( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, mockPagers.noTotalAtLastPage)));
+      expect(getByRole('button', {
+        name: 'Previous'
+      })).not.toBeDisabled();
+      expect(getByRole('button', {
+        name: 'Next'
+      })).toBeDisabled();
     });
   });
 });

package/build/es/page-controls.js

@@ -3,7 +3,7 @@ import { Button } from '@dhis2-ui/button';
 import { spacers } from '@dhis2/ui-constants';
 import { IconChevronLeft16, IconChevronRight16 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
-import React from 'react'; // TODO: i18n translate
+import React from 'react';
 
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
@@ -15,11 +15,12 @@ const translate = (prop, interpolationObject) => {
 
 const PageControls = ({
   dataTest,
-  isLastPage,
-  onClick,
+  isNextDisabled,
+  isPreviousDisabled,
   nextPageText,
   page,
-  previousPageText
+  previousPageText,
+  onClick
 }) => /*#__PURE__*/React.createElement("div", {
   "data-test": `${dataTest}-pagecontrols`,
   className: _JSXStyle.dynamic([["2407365506", [spacers.dp4]]])
@@ -27,14 +28,14 @@ const PageControls = ({
   secondary: true,
   className: "button-previous",
   small: true,
-  disabled: page === 1,
+  disabled: isPreviousDisabled,
   onClick: () => onClick(page - 1),
   dataTest: `${dataTest}-page-previous`
 }, /*#__PURE__*/React.createElement(IconChevronLeft16, null), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
   secondary: true,
   className: "button-next",
   small: true,
-  disabled: !!isLastPage,
+  disabled: isNextDisabled,
   onClick: () => onClick(page + 1),
   dataTest: `${dataTest}-page-next`
 }, translate(nextPageText), /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -48,6 +49,7 @@ PageControls.propTypes = {
   page: PropTypes.number.isRequired,
   previousPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   onClick: PropTypes.func.isRequired,
-  isLastPage: PropTypes.bool
+  isNextDisabled: PropTypes.bool,
+  isPreviousDisabled: PropTypes.bool
 };
 export { PageControls };

package/build/es/page-select.js

@@ -18,6 +18,7 @@ const createAvailablePages = length => Array.from({
 
 const PageSelect = ({
   dataTest,
+  disabled,
   pageSelectText,
   onChange,
   page,
@@ -27,6 +28,7 @@ const PageSelect = ({
   className: _JSXStyle.dynamic([["485717002", [spacers.dp12]]])
 }, /*#__PURE__*/React.createElement(SingleSelect, {
   dense: true,
+  disabled: disabled,
   selected: page.toString(),
   onChange: ({
     selected
@@ -48,6 +50,7 @@ PageSelect.propTypes = {
   page: PropTypes.number.isRequired,
   pageCount: PropTypes.number.isRequired,
   pageSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
 };
 export { PageSelect, createAvailablePages };

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

@@ -14,6 +14,7 @@ const translate = (prop, interpolationObject) => {
 
 const PageSizeSelect = ({
   dataTest,
+  disabled,
   pageSizeSelectText,
   pageSize,
   pageSizes,
@@ -23,6 +24,7 @@ const PageSizeSelect = ({
   className: _JSXStyle.dynamic([["1934482915", [spacers.dp12]]])
 }, /*#__PURE__*/React.createElement(SingleSelect, {
   dense: true,
+  disabled: disabled,
   selected: pageSize.toString(),
   onChange: ({
     selected
@@ -44,6 +46,7 @@ PageSizeSelect.propTypes = {
   pageSize: PropTypes.number.isRequired,
   pageSizeSelectText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   pageSizes: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool
 };
 export { PageSizeSelect };

package/build/es/page-summary.js

@@ -1,5 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -14,6 +15,7 @@ const translate = (prop, interpolationObject) => {
 const PageSummary = ({
   dataTest,
   firstItem,
+  inactive,
   lastItem,
   page,
   pageCount,
@@ -29,13 +31,15 @@ const PageSummary = ({
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-test": `${dataTest}-summary`,
-    className: _JSXStyle.dynamic([["3931741314", [spacers.dp12, colors.grey700]]])
+    className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]])
   }, /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["3931741314", [spacers.dp12, colors.grey700]]])
+    className: _JSXStyle.dynamic([["1022808428", [spacers.dp12, colors.grey700, colors.grey500]]]) + " " + (cx({
+      inactive
+    }) || "")
   }, summary), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3931741314",
-    dynamic: [spacers.dp12, colors.grey700]
-  }, [`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:${spacers.dp12};}`, `span.__jsx-style-dynamic-selector{color:${colors.grey700};font-size:14px;}`]));
+    id: "1022808428",
+    dynamic: [spacers.dp12, colors.grey700, colors.grey500]
+  }, [`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:${spacers.dp12};}`, `span.__jsx-style-dynamic-selector{color:${colors.grey700};font-size:14px;}`, `span.inactive.__jsx-style-dynamic-selector{color:${colors.grey500};}`]));
 };
 
 PageSummary.propTypes = {
@@ -43,6 +47,7 @@ PageSummary.propTypes = {
   page: PropTypes.number.isRequired,
   pageSummaryText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   firstItem: PropTypes.number,
+  inactive: PropTypes.bool,
   lastItem: PropTypes.number,
   pageCount: PropTypes.number,
   total: PropTypes.number

package/build/es/pagination.js

@@ -15,6 +15,7 @@ const MAX_PAGE_COUNT = 2000;
 const Pagination = ({
   className,
   dataTest,
+  disabled,
   hidePageSelect,
   hidePageSizeSelect,
   hidePageSummary,
@@ -51,12 +52,14 @@ const Pagination = ({
     className: "jsx-3647884394" + " " + "spacer"
   }) : /*#__PURE__*/React.createElement(PageSizeSelect, {
     dataTest: dataTest,
+    disabled: disabled,
     pageSize: pageSize,
     pageSizes: pageSizes,
     onChange: onPageSizeChange,
     pageSizeSelectText: pageSizeSelectText
   }), !hidePageSummary && /*#__PURE__*/React.createElement(PageSummary, {
     dataTest: dataTest,
+    inactive: disabled,
     firstItem: firstItem,
     lastItem: lastItem,
     page: page,
@@ -67,17 +70,19 @@ const Pagination = ({
     className: "jsx-3647884394" + " " + "page-navigation"
   }, showPageSelect && /*#__PURE__*/React.createElement(PageSelect, {
     dataTest: dataTest,
+    disabled: disabled,
     pageSelectText: pageSelectText,
     page: page,
     pageCount: pageCount,
     onChange: onPageChange
   }), /*#__PURE__*/React.createElement(PageControls, {
     dataTest: dataTest,
-    isLastPage: isLastPage || page === pageCount,
     nextPageText: nextPageText,
     page: page,
     previousPageText: previousPageText,
-    onClick: onPageChange
+    onClick: onPageChange,
+    isNextDisabled: disabled || isLastPage || page === pageCount,
+    isPreviousDisabled: disabled || page === 1
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3647884394"
   }, [".container.jsx-3647884394{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}", ".spacer.jsx-3647884394{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.jsx-3647884394{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;}"]));
@@ -97,6 +102,7 @@ Pagination.propTypes = {
   pageSize: PropTypes.number.isRequired,
   className: PropTypes.string,
   dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
   hidePageSelect: PropTypes.bool,
   hidePageSizeSelect: PropTypes.bool,
   hidePageSummary: PropTypes.bool,

package/build/es/pagination.stories.js

@@ -46,6 +46,10 @@ const Template = args => /*#__PURE__*/React.createElement(Pagination, args);
 export const Default = Template.bind({});
 Default.args = { ...pagers.atTenthPage
 };
+export const Disabled = Template.bind({});
+Disabled.args = { ...pagers.atTenthPage,
+  disabled: true
+};
 export const PagerAtFirstPage = Template.bind({});
 PagerAtFirstPage.args = { ...pagers.atFirstPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/pagination",
-    "version": "8.1.9",
+    "version": "8.2.0",
     "description": "UI Pagination",
     "repository": {
         "type": "git",
@@ -33,10 +33,10 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/button": "8.1.9",
-        "@dhis2-ui/select": "8.1.9",
-        "@dhis2/ui-constants": "8.1.9",
-        "@dhis2/ui-icons": "8.1.9",
+        "@dhis2-ui/button": "8.2.0",
+        "@dhis2-ui/select": "8.2.0",
+        "@dhis2/ui-constants": "8.2.0",
+        "@dhis2/ui-icons": "8.2.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },