@dhis2-ui/pagination 8.0.1 → 8.1.1

package/build/cjs/pagination.js

@@ -7,12 +7,18 @@ exports.Pagination = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
+var _propTypes = require("@dhis2/prop-types");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _getDefaultPageSummaryText = require("./get-default-page-summary-text.js");
+
+var _getItemRange = require("./get-item-range.js");
+
 var _index = _interopRequireDefault(require("./locales/index.js"));
 
 var _pageControls = require("./page-controls.js");
@@ -28,22 +34,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Pagination = ({
   className,
   dataTest,
-  hidePageSizeSelect,
   hidePageSelect,
+  hidePageSizeSelect,
   hidePageSummary,
+  isLastPage,
+  nextPageText,
+  onPageChange,
+  onPageSizeChange,
   page,
   pageCount,
+  pageLength,
+  pageSelectText,
   pageSize,
-  total,
   pageSizes,
-  onPageChange,
-  onPageSizeChange,
-  nextPageText,
-  pageSelectText,
   pageSizeSelectText,
   pageSummaryText,
-  previousPageText
+  previousPageText,
+  total
 }) => {
+  const {
+    firstItem,
+    lastItem
+  } = (0, _getItemRange.getItemRange)({
+    isLastPage,
+    page,
+    pageLength,
+    pageSize,
+    total
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     className: "jsx-3647884394" + " " + ((0, _classnames.default)('container', className) || "")
@@ -57,14 +75,15 @@ const Pagination = ({
     pageSizeSelectText: pageSizeSelectText
   }), !hidePageSummary && /*#__PURE__*/_react.default.createElement(_pageSummary.PageSummary, {
     dataTest: dataTest,
+    firstItem: firstItem,
+    lastItem: lastItem,
     page: page,
     pageCount: pageCount,
-    pageSize: pageSize,
-    total: total,
-    pageSummaryText: pageSummaryText
+    pageSummaryText: pageSummaryText,
+    total: total
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-3647884394" + " " + "page-navigation"
-  }, !hidePageSelect && /*#__PURE__*/_react.default.createElement(_pageSelect.PageSelect, {
+  }, !hidePageSelect && total && /*#__PURE__*/_react.default.createElement(_pageSelect.PageSelect, {
     dataTest: dataTest,
     pageSelectText: pageSelectText,
     page: page,
@@ -72,9 +91,9 @@ const Pagination = ({
     onChange: onPageChange
   }), /*#__PURE__*/_react.default.createElement(_pageControls.PageControls, {
     dataTest: dataTest,
+    isLastPage: isLastPage || page === pageCount,
     nextPageText: nextPageText,
     page: page,
-    pageCount: pageCount,
     previousPageText: previousPageText,
     onClick: onPageChange
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
@@ -89,25 +108,27 @@ Pagination.defaultProps = {
   nextPageText: () => _index.default.t('Next'),
   pageSelectText: () => _index.default.t('Page'),
   pageSizeSelectText: () => _index.default.t('Items per page'),
-  pageSummaryText: interpolationObject => _index.default.t('Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}', interpolationObject),
+  pageSummaryText: _getDefaultPageSummaryText.getDefaultPageSummaryText,
   previousPageText: () => _index.default.t('Previous')
 };
 Pagination.propTypes = {
-  page: _propTypes.default.number.isRequired,
-  pageCount: _propTypes.default.number.isRequired,
-  pageSize: _propTypes.default.number.isRequired,
-  total: _propTypes.default.number.isRequired,
-  className: _propTypes.default.string,
-  dataTest: _propTypes.default.string,
-  hidePageSelect: _propTypes.default.bool,
-  hidePageSizeSelect: _propTypes.default.bool,
-  hidePageSummary: _propTypes.default.bool,
-  nextPageText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  pageSelectText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  pageSizeSelectText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  pageSizes: _propTypes.default.arrayOf(_propTypes.default.string),
-  pageSummaryText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  previousPageText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  onPageChange: _propTypes.default.func,
-  onPageSizeChange: _propTypes.default.func
+  page: _propTypes2.default.number.isRequired,
+  pageSize: _propTypes2.default.number.isRequired,
+  className: _propTypes2.default.string,
+  dataTest: _propTypes2.default.string,
+  hidePageSelect: _propTypes2.default.bool,
+  hidePageSizeSelect: _propTypes2.default.bool,
+  hidePageSummary: _propTypes2.default.bool,
+  isLastPage: _propTypes2.default.bool,
+  nextPageText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  pageCount: _propTypes2.default.number,
+  pageLength: (0, _propTypes.requiredIf)(props => props.isLastPage, _propTypes2.default.number),
+  pageSelectText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  pageSizeSelectText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  pageSizes: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  pageSummaryText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  previousPageText: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  total: _propTypes2.default.number,
+  onPageChange: _propTypes2.default.func,
+  onPageSizeChange: _propTypes2.default.func
 };

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.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.Default = exports.default = void 0;
 
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 
@@ -52,11 +52,9 @@ var _default = {
     }
   },
   // Default args for stories
-  args: { // Fixes 'defaultProps' errors for storybook
-    ..._pagination.Pagination.defaultProps,
+  args: {
     onPageChange: logOnPageChange,
-    onPageSizeChange: logOnPageSizeChange,
-    ...pagers.atTenthPage
+    onPageSizeChange: logOnPageSizeChange
   }
 };
 exports.default = _default;
@@ -65,6 +63,8 @@ const Template = args => /*#__PURE__*/_react.default.createElement(_pagination.P
 
 const Default = Template.bind({});
 exports.Default = Default;
+Default.args = { ...pagers.atTenthPage
+};
 const PagerAtFirstPage = Template.bind({});
 exports.PagerAtFirstPage = PagerAtFirstPage;
 PagerAtFirstPage.args = { ...pagers.atFirstPage
@@ -73,28 +73,42 @@ const PagerAtLastPage = Template.bind({});
 exports.PagerAtLastPage = PagerAtLastPage;
 PagerAtLastPage.args = { ...pagers.atLastPage
 };
+const NoTotal = Template.bind({});
+exports.NoTotal = NoTotal;
+NoTotal.args = { ...pagers.noTotal
+};
+const NoTotalAtLastPage = Template.bind({});
+exports.NoTotalAtLastPage = NoTotalAtLastPage;
+NoTotalAtLastPage.args = { ...pagers.noTotalAtLastPage,
+  pageLength: 26
+};
+const NoTotalAtLastPageWithoutPageLength = Template.bind({});
+exports.NoTotalAtLastPageWithoutPageLength = NoTotalAtLastPageWithoutPageLength;
+NoTotalAtLastPageWithoutPageLength.args = { ...pagers.noTotalAtLastPage
+};
 const WithoutPageSizeSelect = Template.bind({});
 exports.WithoutPageSizeSelect = WithoutPageSizeSelect;
-WithoutPageSizeSelect.args = {
+WithoutPageSizeSelect.args = { ...pagers.atTenthPage,
   hidePageSizeSelect: true
 };
 const WithoutGoToPageSelect = Template.bind({});
 exports.WithoutGoToPageSelect = WithoutGoToPageSelect;
-WithoutGoToPageSelect.args = {
+WithoutGoToPageSelect.args = { ...pagers.atTenthPage,
   hidePageSelect: true
 };
 const WithoutPageSummary = Template.bind({});
 exports.WithoutPageSummary = WithoutPageSummary;
-WithoutPageSummary.args = {
+WithoutPageSummary.args = { ...pagers.atTenthPage,
   hidePageSummary: true
 };
 const WithCustomPageSummary = Template.bind({});
 exports.WithCustomPageSummary = WithCustomPageSummary;
-WithCustomPageSummary.args = {
-  pageSummaryText: interpolationObject => _d2I18n.default.t('Page nr {{page}} of {{pageCount}} pages, items {{firstItem}}-{{lastItem}}, NO TOTAL', interpolationObject)
+WithCustomPageSummary.args = { ...pagers.atTenthPage,
+  pageSummaryText: interpolationObject => _d2I18n.default.t('You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items', interpolationObject)
 };
 const WithoutAnySelect = Template.bind({});
 exports.WithoutAnySelect = WithoutAnySelect;
-WithoutAnySelect.args = { ...WithoutGoToPageSelect.args,
+WithoutAnySelect.args = { ...pagers.atTenthPage,
+  ...WithoutGoToPageSelect.args,
   ...WithoutPageSizeSelect.args
 };

package/build/es/__fixtures__/index.js

@@ -15,4 +15,14 @@ export const atLastPage = {
   pageCount: 21,
   total: 1035,
   pageSize: 50
+};
+export const noTotal = {
+  page: 2,
+  pageSize: 50,
+  isLastPage: false
+};
+export const noTotalAtLastPage = {
+  page: 4,
+  pageSize: 50,
+  isLastPage: true
 };

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

@@ -0,0 +1,80 @@
+import * as mockPagers from '../__fixtures__/index.js';
+import { getItemRange } from '../get-item-range.js';
+describe('getItemRange', () => {
+  it('calculates the firstItem and lastItem correctly', () => {
+    const {
+      page,
+      pageSize,
+      total
+    } = mockPagers.atTenthPage;
+    const {
+      firstItem,
+      lastItem
+    } = getItemRange({
+      page,
+      pageSize,
+      total
+    });
+    expect(firstItem).toEqual(451);
+    expect(lastItem).toEqual(500);
+  });
+  it('returns 0 for firstItem and lastItem if the total is 0', () => {
+    const {
+      firstItem,
+      lastItem
+    } = getItemRange({
+      page: 1,
+      pageSize: 50,
+      total: 0
+    });
+    expect(firstItem).toEqual(0);
+    expect(lastItem).toEqual(0);
+  });
+  it('uses the total count as lastItem when the last page is reached', () => {
+    const {
+      page,
+      pageSize,
+      total
+    } = mockPagers.atLastPage;
+    const {
+      lastItem
+    } = getItemRange({
+      page,
+      pageSize,
+      total
+    });
+    expect(lastItem).toEqual(total);
+  });
+  it('handles pagers without totals', () => {
+    const {
+      firstItem,
+      lastItem
+    } = getItemRange({
+      page: 3,
+      pageSize: 50
+    });
+    expect(firstItem).toEqual(101);
+    expect(lastItem).toEqual(150);
+  });
+  it('bases the lastItem on the pageLength for pagers without total when the last page is reached', () => {
+    const {
+      lastItem
+    } = getItemRange({
+      page: 3,
+      pageSize: 50,
+      pageLength: 21,
+      isLastPage: true
+    });
+    expect(lastItem).toEqual(121);
+  });
+  it('sets lastItem to NaN when on the last page and there is no total or pageLength', () => {
+    const {
+      lastItem
+    } = getItemRange({
+      page: 3,
+      pageSize: 50,
+      isLastPage: true
+    });
+    expect(lastItem).toEqual(NaN);
+  });
+});

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

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import * as mockPagers from '../__fixtures__/index.js';
 import { PageControls } from '../page-controls.js';
 describe('<PageControls />', () => {
   const mockOnClick = jest.fn();
@@ -11,7 +10,7 @@ describe('<PageControls />', () => {
     onClick: mockOnClick,
     nextPageText: 'Next',
     previousPageText: 'Previous',
-    ...mockPagers.atTenthPage
+    page: 10
   };
   beforeEach(() => {
     mockOnClick.mockClear();
@@ -25,12 +24,16 @@ describe('<PageControls />', () => {
     expect(wrapper.find('.button-next').getElement().props.disabled).toEqual(false);
   });
   it('disables the previous page button on the first page', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(PageControls, _extends({}, props, mockPagers.atFirstPage)));
+    const wrapper = shallow( /*#__PURE__*/React.createElement(PageControls, _extends({}, props, {
+      page: 1
+    })));
     expect(wrapper.find('.button-previous').getElement().props.disabled).toEqual(true);
     expect(wrapper.find('.button-next').getElement().props.disabled).toEqual(false);
   });
   it('disables the next page button on the last page', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(PageControls, _extends({}, props, mockPagers.atLastPage)));
+    const wrapper = shallow( /*#__PURE__*/React.createElement(PageControls, _extends({}, props, {
+      isLastPage: true
+    })));
     expect(wrapper.find('.button-previous').getElement().props.disabled).toEqual(false);
     expect(wrapper.find('.button-next').getElement().props.disabled).toEqual(true);
   });

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

@@ -2,8 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import * as mockPagers from '../__fixtures__/index.js';
-import { PageSummary, getItemRange } from '../page-summary.js';
+import { PageSummary } from '../page-summary.js';
 import { Pagination } from '../pagination.js';
 describe('<PageSummary />', () => {
   const props = {
@@ -11,55 +10,43 @@ describe('<PageSummary />', () => {
     pageSummaryText: Pagination.defaultProps.pageSummaryText
   };
   it('renders without errors', () => {
-    shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, mockPagers.atTenthPage)));
+    shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, {
+      firstItem: 51,
+      lastItem: 100,
+      page: 2,
+      pageCount: 5,
+      total: 224
+    })));
   });
-  it('displays the correct information for a first page', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, mockPagers.atFirstPage)));
-    const expectedString = 'Page 1 of 21, items 1-50 of 1035';
+  it('renders the correct message when both total and lastItem are provided', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, {
+      firstItem: 51,
+      lastItem: 100,
+      page: 2,
+      pageCount: 5,
+      total: 224
+    })));
+    const expectedString = 'Page 2 of 5, items 51-100 of 224';
     expect(wrapper.find('span').text()).toEqual(expectedString);
   });
-  it('displays the correct information for a last page', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, mockPagers.atLastPage)));
-    const expectedString = 'Page 21 of 21, items 1001-1035 of 1035';
+  it('renders the correct message when only lastItem is provided', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, {
+      firstItem: 51,
+      lastItem: 100,
+      page: 2,
+      pageCount: 5
+    })));
+    const expectedString = 'Page 2, items 51-100';
     expect(wrapper.find('span').text()).toEqual(expectedString);
   });
-  it('displays the correct information for a page between first and last', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, mockPagers.atTenthPage)));
-    const expectedString = 'Page 10 of 21, items 451-500 of 1035';
+  it('renders the correct message when total is missing and lastItem is not a number', () => {
+    const wrapper = shallow( /*#__PURE__*/React.createElement(PageSummary, _extends({}, props, {
+      firstItem: 51,
+      lastItem: NaN,
+      page: 2,
+      pageCount: 5
+    })));
+    const expectedString = 'Page 2';
     expect(wrapper.find('span').text()).toEqual(expectedString);
   });
-  describe('getItemRange', () => {
-    it('calculates the firstItem and lastItem correctly', () => {
-      const {
-        page,
-        pageSize,
-        total
-      } = mockPagers.atTenthPage;
-      const {
-        firstItem,
-        lastItem
-      } = getItemRange(page, pageSize, total);
-      expect(firstItem).toEqual(451);
-      expect(lastItem).toEqual(500);
-    });
-    it('returns 0 for firstItem and lastItem if the total is 0', () => {
-      const {
-        firstItem,
-        lastItem
-      } = getItemRange(1, 50, 0);
-      expect(firstItem).toEqual(0);
-      expect(lastItem).toEqual(0);
-    });
-    it('uses the total count as lastItem when the last page is reached', () => {
-      const {
-        page,
-        pageSize,
-        total
-      } = mockPagers.atLastPage;
-      const {
-        lastItem
-      } = getItemRange(page, pageSize, total);
-      expect(lastItem).toEqual(total);
-    });
-  });
 });

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

@@ -7,38 +7,54 @@ import { PageSelect } from '../page-select.js';
 import { PageSizeSelect } from '../page-size-select.js';
 import { Pagination } from '../pagination.js';
 describe('<Pagination />', () => {
-  const props = { ...mockPagers.atTenthPage,
-    onPageChange: () => {},
-    onPageSizeChange: () => {}
-  };
-  it('renders without errors', () => {
-    shallow( /*#__PURE__*/React.createElement(Pagination, props));
+  describe('Pagination with total and totalPages', () => {
+    const props = { ...mockPagers.atTenthPage,
+      onPageChange: () => {},
+      onPageSizeChange: () => {}
+    };
+    it('renders without errors', () => {
+      shallow( /*#__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);
+    });
+    it('renders without a PageSelect when hidePageSelect is true', () => {
+      const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+        hidePageSelect: true
+      })));
+      expect(wrapper.find(PageSelect).length).toEqual(0);
+      expect(wrapper.find(PageSizeSelect).length).toEqual(1);
+    });
+    it('renders without a PageSizeSelect when hidePageSizeSelect is true', () => {
+      const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+        hidePageSizeSelect: true
+      })));
+      expect(wrapper.find(PageSelect).length).toEqual(1);
+      expect(wrapper.find(PageSizeSelect).length).toEqual(0);
+    });
+    it('renders without PageSelect and PageSizeSelect when both are true', () => {
+      const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+        hidePageSelect: true,
+        hidePageSizeSelect: true
+      })));
+      expect(wrapper.find(PageSelect).length).toEqual(0);
+      expect(wrapper.find(PageSizeSelect).length).toEqual(0);
+    });
   });
-  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);
-  });
-  it('renders without a PageSelect when hidePageSelect is true', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
-      hidePageSelect: true
-    })));
-    expect(wrapper.find(PageSelect).length).toEqual(0);
-    expect(wrapper.find(PageSizeSelect).length).toEqual(1);
-  });
-  it('renders without a PageSizeSelect when hidePageSizeSelect is true', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
-      hidePageSizeSelect: true
-    })));
-    expect(wrapper.find(PageSelect).length).toEqual(1);
-    expect(wrapper.find(PageSizeSelect).length).toEqual(0);
-  });
-  it('renders without PageSelect and PageSizeSelect when both are true', () => {
-    const wrapper = shallow( /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
-      hidePageSelect: true,
-      hidePageSizeSelect: true
-    })));
-    expect(wrapper.find(PageSelect).length).toEqual(0);
-    expect(wrapper.find(PageSizeSelect).length).toEqual(0);
+  describe('Pagination without total and totalPages', () => {
+    const props = { ...mockPagers.noTotal,
+      onPageChange: () => {},
+      onPageSizeChange: () => {}
+    };
+    it('renders without errors', () => {
+      shallow( /*#__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);
+    });
   });
 });

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

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

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

@@ -0,0 +1,38 @@
+export const getItemRange = ({
+  isLastPage,
+  page,
+  pageLength,
+  pageSize,
+  total
+}) => {
+  // page is 1-based
+  let firstItem = (page - 1) * pageSize + 1;
+  let lastItem = firstItem + pageSize - 1;
+
+  if (typeof total === 'number') {
+    if (total === 0) {
+      /*
+       * if no items are found, the pager total is 0
+       * and the first and last item should be be 0 too
+       */
+      firstItem = 0;
+      lastItem = 0;
+    } else if (lastItem > total) {
+      lastItem = total;
+    }
+  }
+
+  if (typeof pageLength === 'number') {
+    lastItem = firstItem + pageLength - 1;
+  }
+
+  if (isLastPage && isNaN(total) && isNaN(pageLength)) {
+    // impossible to accurately determine the last item
+    lastItem = NaN;
+  }
+
+  return {
+    firstItem,
+    lastItem
+  };
+};

package/build/es/locales/en/translations.json

@@ -1,8 +1,10 @@
 {
+    "Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}": "Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}",
+    "Page {{page}}, items {{firstItem}}-{{lastItem}}": "Page {{page}}, items {{firstItem}}-{{lastItem}}",
+    "Page {{page}}": "Page {{page}}",
     "Next": "Next",
     "Page": "Page",
     "Items per page": "Items per page",
-    "Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}": "Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}",
     "Previous": "Previous",
-    "Page nr {{page}} of {{pageCount}} pages, items {{firstItem}}-{{lastItem}}, NO TOTAL": "Page nr {{page}} of {{pageCount}} pages, items {{firstItem}}-{{lastItem}}, NO TOTAL"
+    "You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items": "You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items"
 }

package/build/es/page-controls.js

@@ -15,10 +15,10 @@ const translate = (prop, interpolationObject) => {
 
 const PageControls = ({
   dataTest,
+  isLastPage,
   onClick,
   nextPageText,
   page,
-  pageCount,
   previousPageText
 }) => /*#__PURE__*/React.createElement("div", {
   "data-test": `${dataTest}-pagecontrols`,
@@ -34,7 +34,7 @@ const PageControls = ({
   secondary: true,
   className: "button-next",
   small: true,
-  disabled: page === pageCount,
+  disabled: !!isLastPage,
   onClick: () => onClick(page + 1),
   dataTest: `${dataTest}-page-next`
 }, translate(nextPageText), /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -46,8 +46,8 @@ PageControls.propTypes = {
   dataTest: PropTypes.string.isRequired,
   nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   page: PropTypes.number.isRequired,
-  pageCount: PropTypes.number.isRequired,
   previousPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  isLastPage: PropTypes.bool
 };
 export { PageControls };