@dhis2-ui/pagination 9.10.3 → 9.11.1-beta.1

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

@@ -4,28 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageSizeSelect = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _select = require("@dhis2-ui/select");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _select = require("@dhis2-ui/select");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // TODO: i18n translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const PageSizeSelect = _ref => {
   let {
     dataTest,
@@ -36,7 +27,7 @@ const PageSizeSelect = _ref => {
     onChange
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": "".concat(dataTest, "-pagesize"),
+    "data-test": `${dataTest}-pagesize`,
     className: _style.default.dynamic([["3539890457", [_uiConstants.spacers.dp12]]])
   }, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, {
     dense: true,
@@ -49,7 +40,7 @@ const PageSizeSelect = _ref => {
       return onChange(parseInt(selected, 10));
     },
     className: "select",
-    dataTest: "".concat(dataTest, "-pagesize-select"),
+    dataTest: `${dataTest}-pagesize-select`,
     prefix: translate(pageSizeSelectText)
   }, pageSizes.map(length => /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
     key: length,
@@ -58,9 +49,8 @@ const PageSizeSelect = _ref => {
   }))), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3539890457",
     dynamic: [_uiConstants.spacers.dp12]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-inline-end:".concat(_uiConstants.spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
+  }, [`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-inline-end:${_uiConstants.spacers.dp12};-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}`]));
 };
-
 exports.PageSizeSelect = PageSizeSelect;
 PageSizeSelect.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/page-summary.js

@@ -4,27 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PageSummary = void 0;
-
 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"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const PageSummary = _ref => {
   let {
     dataTest,
@@ -44,7 +35,7 @@ const PageSummary = _ref => {
     total
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": "".concat(dataTest, "-summary"),
+    "data-test": `${dataTest}-summary`,
     className: _style.default.dynamic([["3973865131", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]])
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.dynamic([["3973865131", [_uiConstants.spacers.dp12, _uiConstants.colors.grey700, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)({
@@ -53,9 +44,8 @@ const PageSummary = _ref => {
   }, summary), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3973865131",
     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-inline-end:".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, ";}")]));
+  }, [`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-inline-end:${_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;
 PageSummary.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/pagination.js

@@ -4,37 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Pagination = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 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");
-
 var _pageSelect = require("./page-select.js");
-
 var _pageSizeSelect = require("./page-size-select.js");
-
 var _pageSummary = require("./page-summary.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MAX_PAGE_COUNT = 2000;
-
 const Pagination = _ref => {
   let {
     className,
@@ -110,9 +94,8 @@ const Pagination = _ref => {
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3796520840",
     dynamic: [_uiConstants.spacers.dp4]
-  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:".concat(_uiConstants.spacers.dp4, ";}"), ".spacer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.__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;}"]));
+  }, [`.container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:${_uiConstants.spacers.dp4};}`, ".spacer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.__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;}"]));
 };
-
 exports.Pagination = Pagination;
 Pagination.defaultProps = {
   dataTest: 'dhis2-uiwidgets-pagination',

package/build/cjs/pagination.prod.stories.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutPageSummary = exports.WithoutPageSizeSelect = exports.WithoutGoToPageSelect = exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.RTL = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.NarrowWidth = exports.MediumWidth = exports.Disabled = exports.Default = void 0;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _react = _interopRequireDefault(require("react"));
+var pagers = _interopRequireWildcard(require("./__fixtures__/index.js"));
+var _pagination = require("./pagination.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 logOnPageChange = page => {
+  console.log(`Now navigate to page ${page}...`);
+};
+const logOnPageSizeChange = pageSize => {
+  console.log(`Now change page size to ${pageSize}...`);
+};
+var _default = exports.default = {
+  title: 'Pagination',
+  component: _pagination.Pagination,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  // Default args for stories
+  args: {
+    onPageChange: logOnPageChange,
+    onPageSizeChange: logOnPageSizeChange
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args);
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  ...pagers.atTenthPage
+};
+const Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  ...pagers.atTenthPage,
+  disabled: true
+};
+const PagerAtFirstPage = exports.PagerAtFirstPage = Template.bind({});
+PagerAtFirstPage.args = {
+  ...pagers.atFirstPage
+};
+const PagerAtLastPage = exports.PagerAtLastPage = Template.bind({});
+PagerAtLastPage.args = {
+  ...pagers.atLastPage
+};
+const NoTotal = exports.NoTotal = Template.bind({});
+NoTotal.args = {
+  ...pagers.noTotal
+};
+const NoTotalAtLastPage = exports.NoTotalAtLastPage = Template.bind({});
+NoTotalAtLastPage.args = {
+  ...pagers.noTotalAtLastPage,
+  pageLength: 26
+};
+const NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPageWithoutPageLength = Template.bind({});
+NoTotalAtLastPageWithoutPageLength.args = {
+  ...pagers.noTotalAtLastPage
+};
+const WithoutPageSizeSelect = exports.WithoutPageSizeSelect = Template.bind({});
+WithoutPageSizeSelect.args = {
+  ...pagers.atTenthPage,
+  hidePageSizeSelect: true
+};
+const WithoutGoToPageSelect = exports.WithoutGoToPageSelect = Template.bind({});
+WithoutGoToPageSelect.args = {
+  ...pagers.atTenthPage,
+  hidePageSelect: true
+};
+const WithoutPageSummary = exports.WithoutPageSummary = Template.bind({});
+WithoutPageSummary.args = {
+  ...pagers.atTenthPage,
+  hidePageSummary: true
+};
+const WithCustomPageSummary = exports.WithCustomPageSummary = Template.bind({});
+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 = exports.WithoutAnySelect = Template.bind({});
+WithoutAnySelect.args = {
+  ...pagers.atTenthPage,
+  ...WithoutGoToPageSelect.args,
+  ...WithoutPageSizeSelect.args
+};
+const InBox = _ref => {
+  let {
+    boxWidth,
+    ...args
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: boxWidth
+    }
+  }, /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args));
+};
+const MediumWidth = exports.MediumWidth = InBox.bind({});
+MediumWidth.args = {
+  ...pagers.atTenthPage,
+  boxWidth: 500
+};
+const NarrowWidth = exports.NarrowWidth = InBox.bind({});
+NarrowWidth.args = {
+  ...pagers.atTenthPage,
+  boxWidth: 100
+};
+const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args));
+exports.RTL = RTL;
+RTL.args = {
+  ...pagers.atTenthPage
+};

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

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { shallow } from 'enzyme';
 import React from 'react';
 import { PageControls } from '../page-controls.js';

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

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { shallow } from 'enzyme';
 import React from 'react';
 import { PageSummary } from '../page-summary.js';

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

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import '@testing-library/dom';
 import { render } from '@testing-library/react';
 import React from 'react';
@@ -7,7 +6,8 @@ import * as mockPagers from '../__fixtures__/index.js';
 import { Pagination } from '../pagination.js';
 describe('<Pagination />', () => {
   describe('Pagination with total and totalPages', () => {
-    const props = { ...mockPagers.atTenthPage,
+    const props = {
+      ...mockPagers.atTenthPage,
       onPageChange: () => {},
       onPageSizeChange: () => {}
     };
@@ -143,7 +143,8 @@ describe('<Pagination />', () => {
     });
   });
   describe('Pagination without total and totalPages', () => {
-    const props = { ...mockPagers.noTotal,
+    const props = {
+      ...mockPagers.noTotal,
       pageLength: mockPagers.noTotal.pageSize,
       onPageChange: () => {},
       onPageSizeChange: () => {}

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

@@ -1,7 +1,5 @@
 import i18n from './locales/index.js';
-
 const isValidNumber = input => typeof input === 'number' && !isNaN(input);
-
 export const getDefaultPageSummaryText = _ref => {
   let {
     firstItem,
@@ -10,7 +8,6 @@ export const getDefaultPageSummaryText = _ref => {
     pageCount,
     total
   } = _ref;
-
   if (isValidNumber(total) && isValidNumber(lastItem)) {
     return i18n.t('Page {{page}} of {{pageCount}}, items {{firstItem}}-{{lastItem}} of {{total}}', {
       page,
@@ -20,7 +17,6 @@ export const getDefaultPageSummaryText = _ref => {
       total
     });
   }
-
   if (isValidNumber(lastItem)) {
     return i18n.t('Page {{page}}, items {{firstItem}}-{{lastItem}}', {
       page,
@@ -28,7 +24,6 @@ export const getDefaultPageSummaryText = _ref => {
       lastItem
     });
   }
-
   return i18n.t('Page {{page}}', {
     page
   });

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

@@ -9,7 +9,6 @@ export const getItemRange = _ref => {
   // page is 1-based
   let firstItem = (page - 1) * pageSize + 1;
   let lastItem = firstItem + pageSize - 1;
-
   if (typeof total === 'number') {
     if (total === 0) {
       /*
@@ -22,16 +21,13 @@ export const getItemRange = _ref => {
       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/page-controls.js

@@ -1,18 +1,15 @@
 import _JSXStyle from "styled-jsx/style";
-import { Button } from '@dhis2-ui/button';
 import { spacers } from '@dhis2/ui-constants';
 import { IconChevronLeft16, IconChevronRight16 } from '@dhis2/ui-icons';
+import { Button } from '@dhis2-ui/button';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const PageControls = _ref => {
   let {
     dataTest,
@@ -24,7 +21,7 @@ const PageControls = _ref => {
     onClick
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-pagecontrols"),
+    "data-test": `${dataTest}-pagecontrols`,
     className: _JSXStyle.dynamic([["3252926163", [spacers.dp4]]])
   }, /*#__PURE__*/React.createElement(Button, {
     secondary: true,
@@ -32,7 +29,7 @@ const PageControls = _ref => {
     small: true,
     disabled: isPreviousDisabled,
     onClick: () => onClick(page - 1),
-    dataTest: "".concat(dataTest, "-page-previous")
+    dataTest: `${dataTest}-page-previous`
   }, /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["3252926163", [spacers.dp4]]]) + " " + "navigator-icon"
   }, /*#__PURE__*/React.createElement(IconChevronLeft16, null)), translate(previousPageText)), /*#__PURE__*/React.createElement(Button, {
@@ -41,15 +38,14 @@ const PageControls = _ref => {
     small: true,
     disabled: isNextDisabled,
     onClick: () => onClick(page + 1),
-    dataTest: "".concat(dataTest, "-page-next")
+    dataTest: `${dataTest}-page-next`
   }, translate(nextPageText), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["3252926163", [spacers.dp4]]]) + " " + "navigator-icon"
   }, /*#__PURE__*/React.createElement(IconChevronRight16, null))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3252926163",
     dynamic: [spacers.dp4]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-inline-start:0;}", "div.__jsx-style-dynamic-selector .button-next{height:32px;padding-inline-end:0;margin-inline-start:".concat(spacers.dp4, ";}"), "div.__jsx-style-dynamic-selector .navigator-icon.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}"]));
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.__jsx-style-dynamic-selector .button-previous{height:32px;padding-inline-start:0;}", `div.__jsx-style-dynamic-selector .button-next{height:32px;padding-inline-end:0;margin-inline-start:${spacers.dp4};}`, "div.__jsx-style-dynamic-selector .navigator-icon.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}"]));
 };
-
 PageControls.propTypes = {
   dataTest: PropTypes.string.isRequired,
   nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,

package/build/es/page-select.js

@@ -1,21 +1,19 @@
 import _JSXStyle from "styled-jsx/style";
-import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select';
 import { spacers } from '@dhis2/ui-constants';
+import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select';
 import PropTypes from 'prop-types';
-import React from 'react'; // TODO: i18n translate
+import React from 'react';
 
+// TODO: i18n translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const createAvailablePages = length => Array.from({
   length
 }, (_x, i) => (i + 1).toString());
-
 const PageSelect = _ref => {
   let {
     dataTest,
@@ -26,7 +24,7 @@ const PageSelect = _ref => {
     pageCount
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-gotopage"),
+    "data-test": `${dataTest}-gotopage`,
     className: _JSXStyle.dynamic([["599400768", [spacers.dp12]]])
   }, /*#__PURE__*/React.createElement(SingleSelect, {
     dense: true,
@@ -39,7 +37,7 @@ const PageSelect = _ref => {
       return onChange(parseInt(selected, 10));
     },
     className: "select",
-    dataTest: "".concat(dataTest, "-page-select"),
+    dataTest: `${dataTest}-page-select`,
     prefix: translate(pageSelectText)
   }, createAvailablePages(pageCount).map(availablePage => /*#__PURE__*/React.createElement(SingleSelectOption, {
     key: availablePage,
@@ -48,9 +46,8 @@ const PageSelect = _ref => {
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "599400768",
     dynamic: [spacers.dp12]
-  }, ["div.__jsx-style-dynamic-selector{margin-inline-end:".concat(spacers.dp12, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{margin-inline-end:${spacers.dp12};}`]));
 };
-
 PageSelect.propTypes = {
   dataTest: PropTypes.string.isRequired,
   page: PropTypes.number.isRequired,

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

@@ -1,17 +1,16 @@
 import _JSXStyle from "styled-jsx/style";
-import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select';
 import { spacers } from '@dhis2/ui-constants';
+import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select';
 import PropTypes from 'prop-types';
-import React from 'react'; // TODO: i18n translate
+import React from 'react';
 
+// TODO: i18n translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const PageSizeSelect = _ref => {
   let {
     dataTest,
@@ -22,7 +21,7 @@ const PageSizeSelect = _ref => {
     onChange
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-pagesize"),
+    "data-test": `${dataTest}-pagesize`,
     className: _JSXStyle.dynamic([["3539890457", [spacers.dp12]]])
   }, /*#__PURE__*/React.createElement(SingleSelect, {
     dense: true,
@@ -35,7 +34,7 @@ const PageSizeSelect = _ref => {
       return onChange(parseInt(selected, 10));
     },
     className: "select",
-    dataTest: "".concat(dataTest, "-pagesize-select"),
+    dataTest: `${dataTest}-pagesize-select`,
     prefix: translate(pageSizeSelectText)
   }, pageSizes.map(length => /*#__PURE__*/React.createElement(SingleSelectOption, {
     key: length,
@@ -44,9 +43,8 @@ const PageSizeSelect = _ref => {
   }))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3539890457",
     dynamic: [spacers.dp12]
-  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-height:32px;margin-inline-end:".concat(spacers.dp12, ";-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}")]));
+  }, [`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-inline-end:${spacers.dp12};-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}`]));
 };
-
 PageSizeSelect.propTypes = {
   dataTest: PropTypes.string.isRequired,
   pageSize: PropTypes.number.isRequired,

package/build/es/page-summary.js

@@ -3,15 +3,12 @@ import { colors, spacers } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const PageSummary = _ref => {
   let {
     dataTest,
@@ -31,7 +28,7 @@ const PageSummary = _ref => {
     total
   });
   return /*#__PURE__*/React.createElement("div", {
-    "data-test": "".concat(dataTest, "-summary"),
+    "data-test": `${dataTest}-summary`,
     className: _JSXStyle.dynamic([["3973865131", [spacers.dp12, colors.grey700, colors.grey500]]])
   }, /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["3973865131", [spacers.dp12, colors.grey700, colors.grey500]]]) + " " + (cx({
@@ -40,9 +37,8 @@ const PageSummary = _ref => {
   }, summary), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3973865131",
     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-inline-end:".concat(spacers.dp12, ";}"), "span.__jsx-style-dynamic-selector{color:".concat(colors.grey700, ";font-size:14px;}"), "span.inactive.__jsx-style-dynamic-selector{color:".concat(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-inline-end:${spacers.dp12};}`, `span.__jsx-style-dynamic-selector{color:${colors.grey700};font-size:14px;}`, `span.inactive.__jsx-style-dynamic-selector{color:${colors.grey500};}`]));
 };
-
 PageSummary.propTypes = {
   dataTest: PropTypes.string.isRequired,
   page: PropTypes.number.isRequired,

package/build/es/pagination.js

@@ -12,7 +12,6 @@ import { PageSelect } from './page-select.js';
 import { PageSizeSelect } from './page-size-select.js';
 import { PageSummary } from './page-summary.js';
 const MAX_PAGE_COUNT = 2000;
-
 const Pagination = _ref => {
   let {
     className,
@@ -88,9 +87,8 @@ const Pagination = _ref => {
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3796520840",
     dynamic: [spacers.dp4]
-  }, [".container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:".concat(spacers.dp4, ";}"), ".spacer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.__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;}"]));
+  }, [`.container.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;row-gap:${spacers.dp4};}`, ".spacer.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".page-navigation.__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;}"]));
 };
-
 Pagination.defaultProps = {
   dataTest: 'dhis2-uiwidgets-pagination',
   pageSizes: ['5', '10', '20', '30', '40', '50', '75', '100'],