@dhis2-ui/pagination 8.1.10 → 8.2.1

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"));
@@ -23,15 +25,17 @@ const translate = (prop, interpolationObject) => {
   return prop;
 };
 
-const PageSummary = ({
-  dataTest,
-  firstItem,
-  lastItem,
-  page,
-  pageCount,
-  pageSummaryText,
-  total
-}) => {
+const PageSummary = _ref => {
+  let {
+    dataTest,
+    firstItem,
+    inactive,
+    lastItem,
+    page,
+    pageCount,
+    pageSummaryText,
+    total
+  } = _ref;
   const summary = translate(pageSummaryText, {
     firstItem,
     lastItem,
@@ -40,14 +44,16 @@ const PageSummary = ({
     total
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": `${dataTest}-summary`,
-    className: _style.default.dynamic([["3931741314", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700]]])
+    "data-test": "".concat(dataTest, "-summary"),
+    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:".concat(_uiConstants.spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";}")]));
 };
 
 exports.PageSummary = PageSummary;
@@ -56,6 +62,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

@@ -33,27 +33,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const MAX_PAGE_COUNT = 2000;
 
-const Pagination = ({
-  className,
-  dataTest,
-  hidePageSelect,
-  hidePageSizeSelect,
-  hidePageSummary,
-  isLastPage,
-  nextPageText,
-  onPageChange,
-  onPageSizeChange,
-  page,
-  pageCount,
-  pageLength,
-  pageSelectText,
-  pageSize,
-  pageSizes,
-  pageSizeSelectText,
-  pageSummaryText,
-  previousPageText,
-  total
-}) => {
+const Pagination = _ref => {
+  let {
+    className,
+    dataTest,
+    disabled,
+    hidePageSelect,
+    hidePageSizeSelect,
+    hidePageSummary,
+    isLastPage,
+    nextPageText,
+    onPageChange,
+    onPageSizeChange,
+    page,
+    pageCount,
+    pageLength,
+    pageSelectText,
+    pageSize,
+    pageSizes,
+    pageSizeSelectText,
+    pageSummaryText,
+    previousPageText,
+    total
+  } = _ref;
   const {
     firstItem,
     lastItem
@@ -72,12 +74,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 +92,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 +125,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.default = exports.WithoutPageSummary = exports.WithoutPageSizeSelect = exports.WithoutGoToPageSelect = exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.Disabled = exports.Default = void 0;
 
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 
@@ -20,28 +20,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const subtitle = 'Allows navigation through data displayed over several pages';
-const description = `
-Pagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.
-
-**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**
-
-\`\`\`js
-import { Pagination } from '@dhis2/ui'
-\`\`\`
-
-_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._
-`;
+const description = "\nPagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.\n\n**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**\n\n```js\nimport { Pagination } from '@dhis2/ui'\n```\n\n_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._\n";
 
 const logOnPageChange = page => {
-  console.log(`Now navigate to page ${page}...`);
+  console.log("Now navigate to page ".concat(page, "..."));
 };
 
 const logOnPageSizeChange = pageSize => {
-  console.log(`Now change page size to ${pageSize}...`);
+  console.log("Now change page size to ".concat(pageSize, "..."));
 };
 
 var _default = {
-  title: 'Navigation/Pagination',
+  title: 'Pagination',
   component: _pagination.Pagination,
   parameters: {
     componentSubtitle: subtitle,
@@ -65,6 +55,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/get-default-page-summary-text.js

@@ -2,13 +2,15 @@ import i18n from './locales/index.js';
 
 const isValidNumber = input => typeof input === 'number' && !isNaN(input);
 
-export const getDefaultPageSummaryText = ({
-  firstItem,
-  lastItem,
-  page,
-  pageCount,
-  total
-}) => {
+export const getDefaultPageSummaryText = _ref => {
+  let {
+    firstItem,
+    lastItem,
+    page,
+    pageCount,
+    total
+  } = _ref;
+
   if (isValidNumber(total) && isValidNumber(lastItem)) {
     return i18n.t('Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}', {
       page,

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

@@ -1,10 +1,11 @@
-export const getItemRange = ({
-  isLastPage,
-  page,
-  pageLength,
-  pageSize,
-  total
-}) => {
+export 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;