@commercetools-uikit/pagination 16.0.0 → 16.1.1

package/dist/commercetools-uikit-pagination.cjs.dev.js

@@ -21,7 +21,6 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var react = require('react');
 var uniqueId = require('lodash/uniqueId');
-var designSystem = require('@commercetools-uikit/design-system');
 var SelectInput = require('@commercetools-uikit/select-input');
 var Constraints = require('@commercetools-uikit/constraints');
 var utils = require('@commercetools-uikit/utils');
@@ -32,7 +31,6 @@ var formik = require('formik');
 var icons = require('@commercetools-uikit/icons');
 var NumberInput = require('@commercetools-uikit/number-input');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
-var Text = require('@commercetools-uikit/text');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -56,7 +54,6 @@ var Label__default = /*#__PURE__*/_interopDefault(Label);
 var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
 var NumberInput__default = /*#__PURE__*/_interopDefault(NumberInput);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
-var Text__default = /*#__PURE__*/_interopDefault(Text);
 
 const isValid = (page, totalPages) => {
   if (page > totalPages) return false;
@@ -67,11 +64,9 @@ const normalizePageValue = (value, totalPages) => {
   if (value < 1) {
     return 1;
   }
-
   if (value > totalPages) {
     return totalPages;
   }
-
   return value;
 };
 
@@ -99,20 +94,12 @@ var messages$2 = reactIntl.defineMessages({
 });
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const PageNavigator = props => {
   const intl = reactIntl.useIntl();
-
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   const _useState = react.useState(uniqueId__default["default"]('page-number-')),
-        _useState2 = _slicedToArray(_useState, 1),
-        pageNumberInputId = _useState2[0];
-
-  const TotalPagesCountComponent = themedValue(Text__default["default"].Body, Label__default["default"]);
+    _useState2 = _slicedToArray(_useState, 1),
+    pageNumberInputId = _useState2[0];
   const paginationForm = formik.useFormik({
     initialValues: {
       page: props.page
@@ -121,9 +108,7 @@ const PageNavigator = props => {
     validateOnBlur: true,
     validateOnChange: true,
     validateOnMount: true,
-    onSubmit: (values
-    /**, helpers */
-    ) => {
+    onSubmit: (values /**, helpers */) => {
       const nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
       props.onPageChange(nextNormalizedValue);
     },
@@ -133,18 +118,16 @@ const PageNavigator = props => {
           page: true
         };
       }
-
       return {};
     }
   });
   const page = props.page,
-        totalPages = props.totalPages;
+    totalPages = props.totalPages;
   const isDisabled = totalPages === 0;
   const isPreviousDisabled = page <= 1;
   const isNextDisabled = page >= totalPages;
   const handlePrevPageChange = react.useCallback(() => {
     const previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
-
     if (previousPage >= 1) {
       paginationForm.setFieldValue('page', previousPage, true);
       paginationForm.submitForm();
@@ -152,7 +135,6 @@ const PageNavigator = props => {
   }, [paginationForm]);
   const handleNextPageChange = react.useCallback(() => {
     const nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
-
     if (nextPage <= totalPages) {
       paginationForm.setFieldValue('page', nextPage, true);
       paginationForm.submitForm();
@@ -184,7 +166,7 @@ const PageNavigator = props => {
           hasWarning: Boolean(paginationForm.errors.page),
           horizontalConstraint: 2
         })
-      }), jsxRuntime.jsx(TotalPagesCountComponent, {
+      }), jsxRuntime.jsx(Label__default["default"], {
         intlMessage: _objectSpread$1(_objectSpread$1({}, messages$2.pageCount), {}, {
           values: {
             count: props.totalPages
@@ -199,7 +181,6 @@ const PageNavigator = props => {
     })
   });
 };
-
 PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
   totalPages: _pt__default["default"].number.isRequired,
   page: _pt__default["default"].number.isRequired,
@@ -218,39 +199,26 @@ const messages = reactIntl.defineMessages({
 var messages$1 = messages;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const mapRangeToListOfOptions = perPageRange => {
   switch (perPageRange) {
     case 's':
       return [20, 50];
-
     case 'm':
       return [20, 50, 100];
-
     case 'l':
       return [200, 500];
-
     default:
       throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
   }
 };
-
 const PageSizeSelector = props => {
   var _context;
-
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   const _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
-        _useState2 = _slicedToArray(_useState, 1),
-        perPageSelectorId = _useState2[0];
-
+    _useState2 = _slicedToArray(_useState, 1),
+    perPageSelectorId = _useState2[0];
   const options = mapRangeToListOfOptions(props.perPageRange);
-
   const hasValidPerPageOption = _includesInstanceProperty__default["default"](options).call(options, props.perPage);
-
   process.env.NODE_ENV !== "production" ? utils.warning(hasValidPerPageOption, _concatInstanceProperty__default["default"](_context = "@commercetools-uikit/pagination: invalid page size ".concat(props.perPage, ". It must be one of the values of the selected range in \"")).call(_context, options.toString(), "\".")) : void 0;
   const onPerPageChange = props.onPerPageChange;
   const handleSelectPerPage = react.useCallback(event => {
@@ -259,7 +227,7 @@ const PageSizeSelector = props => {
   return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
     alignItems: "center",
     children: [jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
-      max: themedValue(2, 'auto'),
+      max: "auto",
       children: jsxRuntime.jsx(SelectInput__default["default"], {
         id: perPageSelectorId,
         name: "per-page-selector",
@@ -280,7 +248,6 @@ const PageSizeSelector = props => {
     })]
   });
 };
-
 PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   perPage: _pt__default["default"].number.isRequired,
   perPageRange: _pt__default["default"].oneOf(['s', 'm', 'l']).isRequired,
@@ -296,7 +263,6 @@ PageSizeSelector.defaultProps = defaultProps$1;
 var PageSizeSelector$1 = PageSizeSelector;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "15sp3y3",
   styles: "flex-grow:2"
@@ -306,7 +272,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEZ0IiLCJmaWxlIjoicGFnaW5hdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFBhZ2VOYXZpZ2F0b3IgZnJvbSAnLi9wYWdlLW5hdmlnYXRvcic7XG5pbXBvcnQgUGFnZVNpemVTZWxlY3RvciwgeyB0eXBlIFRQYWdlUmFuZ2VTaXplIH0gZnJvbSAnLi9wYWdlLXNpemUtc2VsZWN0b3InO1xuXG5leHBvcnQgdHlwZSBUUGFnaW5hdGlvblByb3BzID0ge1xuICAvKipcbiAgICogVG90YWwgbnVtYmVyIG9mIGl0ZW1zIGFjcm9zcyBhbGwgcGFnZXNcbiAgICovXG4gIHRvdGFsSXRlbXM6IG51bWJlcjtcblxuICAvKipcbiAgICogVGhlIGN1cnJlbnQgcGFnZVxuICAgKi9cbiAgcGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiAobmV3UGFnZTogbnVtYmVyKSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBOdW1iZXIgb2YgaXRlbXMgcGVyIHBhZ2UsIGFjY29yZGluZyB0byB0aGUgcHJlLWRlZmluZWQgcmFuZ2UgdmFsdWVzLlxuICAgKi9cbiAgcGVyUGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogVFBhZ2VSYW5nZVNpemU7XG5cbiAgLyoqXG4gICAqIEEgY2FsbGJhY2sgZnVuY3Rpb24sIGNhbGxlZCB3aGVuIGBwZXJQYWdlYCBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QZXJQYWdlQ2hhbmdlOiAobmV3UGVyUGFnZTogbnVtYmVyKSA9PiB2b2lkO1xufTtcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wczogVFBhZ2luYXRpb25Qcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblxuUGFnaW5hdGlvbi5kaXNwbGF5TmFtZSA9ICdQYWdpbmF0aW9uJztcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRQYWdpbmF0aW9uUHJvcHMsICdwZXJQYWdlJyB8ICdwZXJQYWdlUmFuZ2UnPiA9IHtcbiAgcGVyUGFnZTogMjAsXG4gIHBlclBhZ2VSYW5nZTogJ3MnLFxufTtcblBhZ2luYXRpb24uZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgdHlwZSB7IFRQYWdlUmFuZ2VTaXplIH07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-
 const Pagination = props => {
   const totalPages = Math.ceil(props.totalItems / props.perPage);
   const pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
@@ -327,7 +292,6 @@ const Pagination = props => {
     })]
   });
 };
-
 Pagination.displayName = 'Pagination';
 const defaultProps = {
   perPage: 20,
@@ -337,7 +301,7 @@ Pagination.defaultProps = defaultProps;
 var Pagination$1 = Pagination;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 exports.PageNavigator = PageNavigator$1;
 exports.PageSizeSelector = PageSizeSelector$1;

package/dist/commercetools-uikit-pagination.cjs.prod.js

@@ -21,7 +21,6 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var react = require('react');
 var uniqueId = require('lodash/uniqueId');
-var designSystem = require('@commercetools-uikit/design-system');
 var SelectInput = require('@commercetools-uikit/select-input');
 var Constraints = require('@commercetools-uikit/constraints');
 require('@commercetools-uikit/utils');
@@ -32,7 +31,6 @@ var formik = require('formik');
 var icons = require('@commercetools-uikit/icons');
 var NumberInput = require('@commercetools-uikit/number-input');
 var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
-var Text = require('@commercetools-uikit/text');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -54,7 +52,6 @@ var Label__default = /*#__PURE__*/_interopDefault(Label);
 var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
 var NumberInput__default = /*#__PURE__*/_interopDefault(NumberInput);
 var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
-var Text__default = /*#__PURE__*/_interopDefault(Text);
 
 const isValid = (page, totalPages) => {
   if (page > totalPages) return false;
@@ -65,11 +62,9 @@ const normalizePageValue = (value, totalPages) => {
   if (value < 1) {
     return 1;
   }
-
   if (value > totalPages) {
     return totalPages;
   }
-
   return value;
 };
 
@@ -97,20 +92,12 @@ var messages$2 = reactIntl.defineMessages({
 });
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const PageNavigator = props => {
   const intl = reactIntl.useIntl();
-
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   const _useState = react.useState(uniqueId__default["default"]('page-number-')),
-        _useState2 = _slicedToArray(_useState, 1),
-        pageNumberInputId = _useState2[0];
-
-  const TotalPagesCountComponent = themedValue(Text__default["default"].Body, Label__default["default"]);
+    _useState2 = _slicedToArray(_useState, 1),
+    pageNumberInputId = _useState2[0];
   const paginationForm = formik.useFormik({
     initialValues: {
       page: props.page
@@ -119,9 +106,7 @@ const PageNavigator = props => {
     validateOnBlur: true,
     validateOnChange: true,
     validateOnMount: true,
-    onSubmit: (values
-    /**, helpers */
-    ) => {
+    onSubmit: (values /**, helpers */) => {
       const nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
       props.onPageChange(nextNormalizedValue);
     },
@@ -131,18 +116,16 @@ const PageNavigator = props => {
           page: true
         };
       }
-
       return {};
     }
   });
   const page = props.page,
-        totalPages = props.totalPages;
+    totalPages = props.totalPages;
   const isDisabled = totalPages === 0;
   const isPreviousDisabled = page <= 1;
   const isNextDisabled = page >= totalPages;
   const handlePrevPageChange = react.useCallback(() => {
     const previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
-
     if (previousPage >= 1) {
       paginationForm.setFieldValue('page', previousPage, true);
       paginationForm.submitForm();
@@ -150,7 +133,6 @@ const PageNavigator = props => {
   }, [paginationForm]);
   const handleNextPageChange = react.useCallback(() => {
     const nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
-
     if (nextPage <= totalPages) {
       paginationForm.setFieldValue('page', nextPage, true);
       paginationForm.submitForm();
@@ -182,7 +164,7 @@ const PageNavigator = props => {
           hasWarning: Boolean(paginationForm.errors.page),
           horizontalConstraint: 2
         })
-      }), jsxRuntime.jsx(TotalPagesCountComponent, {
+      }), jsxRuntime.jsx(Label__default["default"], {
         intlMessage: _objectSpread$1(_objectSpread$1({}, messages$2.pageCount), {}, {
           values: {
             count: props.totalPages
@@ -197,7 +179,6 @@ const PageNavigator = props => {
     })
   });
 };
-
 PageNavigator.propTypes = {};
 PageNavigator.displayName = 'PageNavigator';
 var PageNavigator$1 = PageNavigator;
@@ -212,36 +193,24 @@ const messages = reactIntl.defineMessages({
 var messages$1 = messages;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-
 const mapRangeToListOfOptions = perPageRange => {
   switch (perPageRange) {
     case 's':
       return [20, 50];
-
     case 'm':
       return [20, 50, 100];
-
     case 'l':
       return [200, 500];
-
     default:
       throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
   }
 };
-
 const PageSizeSelector = props => {
-
-  const _useTheme = designSystem.useTheme(),
-        themedValue = _useTheme.themedValue;
-
   const _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
-        _useState2 = _slicedToArray(_useState, 1),
-        perPageSelectorId = _useState2[0];
-
+    _useState2 = _slicedToArray(_useState, 1),
+    perPageSelectorId = _useState2[0];
   const options = mapRangeToListOfOptions(props.perPageRange);
-
   _includesInstanceProperty__default["default"](options).call(options, props.perPage);
   const onPerPageChange = props.onPerPageChange;
   const handleSelectPerPage = react.useCallback(event => {
@@ -250,7 +219,7 @@ const PageSizeSelector = props => {
   return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
     alignItems: "center",
     children: [jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
-      max: themedValue(2, 'auto'),
+      max: "auto",
       children: jsxRuntime.jsx(SelectInput__default["default"], {
         id: perPageSelectorId,
         name: "per-page-selector",
@@ -271,7 +240,6 @@ const PageSizeSelector = props => {
     })]
   });
 };
-
 PageSizeSelector.propTypes = {};
 PageSizeSelector.displayName = 'PageSizeSelector';
 const defaultProps$1 = {
@@ -285,7 +253,6 @@ var _ref = {
   name: "15sp3y3",
   styles: "flex-grow:2"
 } ;
-
 const Pagination = props => {
   const totalPages = Math.ceil(props.totalItems / props.perPage);
   const pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
@@ -306,7 +273,6 @@ const Pagination = props => {
     })]
   });
 };
-
 Pagination.displayName = 'Pagination';
 const defaultProps = {
   perPage: 20,
@@ -316,7 +282,7 @@ Pagination.defaultProps = defaultProps;
 var Pagination$1 = Pagination;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 exports.PageNavigator = PageNavigator$1;
 exports.PageSizeSelector = PageSizeSelector$1;

package/dist/commercetools-uikit-pagination.esm.js

@@ -17,7 +17,6 @@ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import { useState, useCallback } from 'react';
 import uniqueId from 'lodash/uniqueId';
-import { useTheme } from '@commercetools-uikit/design-system';
 import SelectInput from '@commercetools-uikit/select-input';
 import Constraints from '@commercetools-uikit/constraints';
 import { warning } from '@commercetools-uikit/utils';
@@ -28,7 +27,6 @@ import { useFormik } from 'formik';
 import { AngleLeftIcon, AngleRightIcon } from '@commercetools-uikit/icons';
 import NumberInput from '@commercetools-uikit/number-input';
 import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
-import Text from '@commercetools-uikit/text';
 
 const isValid = (page, totalPages) => {
   if (page > totalPages) return false;
@@ -39,11 +37,9 @@ const normalizePageValue = (value, totalPages) => {
   if (value < 1) {
     return 1;
   }
-
   if (value > totalPages) {
     return totalPages;
   }
-
   return value;
 };
 
@@ -71,20 +67,12 @@ var messages$2 = defineMessages({
 });
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const PageNavigator = props => {
   const intl = useIntl();
-
-  const _useTheme = useTheme(),
-        themedValue = _useTheme.themedValue;
-
   const _useState = useState(uniqueId('page-number-')),
-        _useState2 = _slicedToArray(_useState, 1),
-        pageNumberInputId = _useState2[0];
-
-  const TotalPagesCountComponent = themedValue(Text.Body, Label);
+    _useState2 = _slicedToArray(_useState, 1),
+    pageNumberInputId = _useState2[0];
   const paginationForm = useFormik({
     initialValues: {
       page: props.page
@@ -93,9 +81,7 @@ const PageNavigator = props => {
     validateOnBlur: true,
     validateOnChange: true,
     validateOnMount: true,
-    onSubmit: (values
-    /**, helpers */
-    ) => {
+    onSubmit: (values /**, helpers */) => {
       const nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
       props.onPageChange(nextNormalizedValue);
     },
@@ -105,18 +91,16 @@ const PageNavigator = props => {
           page: true
         };
       }
-
       return {};
     }
   });
   const page = props.page,
-        totalPages = props.totalPages;
+    totalPages = props.totalPages;
   const isDisabled = totalPages === 0;
   const isPreviousDisabled = page <= 1;
   const isNextDisabled = page >= totalPages;
   const handlePrevPageChange = useCallback(() => {
     const previousPage = _valuesInstanceProperty(paginationForm).page - 1;
-
     if (previousPage >= 1) {
       paginationForm.setFieldValue('page', previousPage, true);
       paginationForm.submitForm();
@@ -124,7 +108,6 @@ const PageNavigator = props => {
   }, [paginationForm]);
   const handleNextPageChange = useCallback(() => {
     const nextPage = _valuesInstanceProperty(paginationForm).page + 1;
-
     if (nextPage <= totalPages) {
       paginationForm.setFieldValue('page', nextPage, true);
       paginationForm.submitForm();
@@ -156,7 +139,7 @@ const PageNavigator = props => {
           hasWarning: Boolean(paginationForm.errors.page),
           horizontalConstraint: 2
         })
-      }), jsx(TotalPagesCountComponent, {
+      }), jsx(Label, {
         intlMessage: _objectSpread$1(_objectSpread$1({}, messages$2.pageCount), {}, {
           values: {
             count: props.totalPages
@@ -171,7 +154,6 @@ const PageNavigator = props => {
     })
   });
 };
-
 PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
   totalPages: _pt.number.isRequired,
   page: _pt.number.isRequired,
@@ -190,39 +172,26 @@ const messages = defineMessages({
 var messages$1 = messages;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 const mapRangeToListOfOptions = perPageRange => {
   switch (perPageRange) {
     case 's':
       return [20, 50];
-
     case 'm':
       return [20, 50, 100];
-
     case 'l':
       return [200, 500];
-
     default:
       throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
   }
 };
-
 const PageSizeSelector = props => {
   var _context;
-
-  const _useTheme = useTheme(),
-        themedValue = _useTheme.themedValue;
-
   const _useState = useState(uniqueId('per-page-selector-')),
-        _useState2 = _slicedToArray(_useState, 1),
-        perPageSelectorId = _useState2[0];
-
+    _useState2 = _slicedToArray(_useState, 1),
+    perPageSelectorId = _useState2[0];
   const options = mapRangeToListOfOptions(props.perPageRange);
-
   const hasValidPerPageOption = _includesInstanceProperty(options).call(options, props.perPage);
-
   process.env.NODE_ENV !== "production" ? warning(hasValidPerPageOption, _concatInstanceProperty(_context = "@commercetools-uikit/pagination: invalid page size ".concat(props.perPage, ". It must be one of the values of the selected range in \"")).call(_context, options.toString(), "\".")) : void 0;
   const onPerPageChange = props.onPerPageChange;
   const handleSelectPerPage = useCallback(event => {
@@ -231,7 +200,7 @@ const PageSizeSelector = props => {
   return jsxs(Spacings.Inline, {
     alignItems: "center",
     children: [jsx(Constraints.Horizontal, {
-      max: themedValue(2, 'auto'),
+      max: "auto",
       children: jsx(SelectInput, {
         id: perPageSelectorId,
         name: "per-page-selector",
@@ -252,7 +221,6 @@ const PageSizeSelector = props => {
     })]
   });
 };
-
 PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   perPage: _pt.number.isRequired,
   perPageRange: _pt.oneOf(['s', 'm', 'l']).isRequired,
@@ -268,7 +236,6 @@ PageSizeSelector.defaultProps = defaultProps$1;
 var PageSizeSelector$1 = PageSizeSelector;
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "15sp3y3",
   styles: "flex-grow:2"
@@ -278,7 +245,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEZ0IiLCJmaWxlIjoicGFnaW5hdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgU3BhY2luZ3MgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3MnO1xuaW1wb3J0IFBhZ2VOYXZpZ2F0b3IgZnJvbSAnLi9wYWdlLW5hdmlnYXRvcic7XG5pbXBvcnQgUGFnZVNpemVTZWxlY3RvciwgeyB0eXBlIFRQYWdlUmFuZ2VTaXplIH0gZnJvbSAnLi9wYWdlLXNpemUtc2VsZWN0b3InO1xuXG5leHBvcnQgdHlwZSBUUGFnaW5hdGlvblByb3BzID0ge1xuICAvKipcbiAgICogVG90YWwgbnVtYmVyIG9mIGl0ZW1zIGFjcm9zcyBhbGwgcGFnZXNcbiAgICovXG4gIHRvdGFsSXRlbXM6IG51bWJlcjtcblxuICAvKipcbiAgICogVGhlIGN1cnJlbnQgcGFnZVxuICAgKi9cbiAgcGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiAobmV3UGFnZTogbnVtYmVyKSA9PiB2b2lkO1xuXG4gIC8qKlxuICAgKiBOdW1iZXIgb2YgaXRlbXMgcGVyIHBhZ2UsIGFjY29yZGluZyB0byB0aGUgcHJlLWRlZmluZWQgcmFuZ2UgdmFsdWVzLlxuICAgKi9cbiAgcGVyUGFnZTogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogVFBhZ2VSYW5nZVNpemU7XG5cbiAgLyoqXG4gICAqIEEgY2FsbGJhY2sgZnVuY3Rpb24sIGNhbGxlZCB3aGVuIGBwZXJQYWdlYCBpcyBjaGFuZ2VkLlxuICAgKi9cbiAgb25QZXJQYWdlQ2hhbmdlOiAobmV3UGVyUGFnZTogbnVtYmVyKSA9PiB2b2lkO1xufTtcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wczogVFBhZ2luYXRpb25Qcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblxuUGFnaW5hdGlvbi5kaXNwbGF5TmFtZSA9ICdQYWdpbmF0aW9uJztcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFRQYWdpbmF0aW9uUHJvcHMsICdwZXJQYWdlJyB8ICdwZXJQYWdlUmFuZ2UnPiA9IHtcbiAgcGVyUGFnZTogMjAsXG4gIHBlclBhZ2VSYW5nZTogJ3MnLFxufTtcblBhZ2luYXRpb24uZGVmYXVsdFByb3BzID0gZGVmYXVsdFByb3BzO1xuXG5leHBvcnQgdHlwZSB7IFRQYWdlUmFuZ2VTaXplIH07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-
 const Pagination = props => {
   const totalPages = Math.ceil(props.totalItems / props.perPage);
   const pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
@@ -299,7 +265,6 @@ const Pagination = props => {
     })]
   });
 };
-
 Pagination.displayName = 'Pagination';
 const defaultProps = {
   perPage: 20,
@@ -309,6 +274,6 @@ Pagination.defaultProps = defaultProps;
 var Pagination$1 = Pagination;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.1";
 
 export { PageNavigator$1 as PageNavigator, PageSizeSelector$1 as PageSizeSelector, Pagination$1 as Pagination, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/pagination",
   "description": "Components for navigating through pages of items",
-  "version": "16.0.0",
+  "version": "16.1.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,16 +21,16 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "16.0.0",
-    "@commercetools-uikit/design-system": "16.0.0",
-    "@commercetools-uikit/icons": "16.0.0",
-    "@commercetools-uikit/label": "16.0.0",
-    "@commercetools-uikit/number-input": "16.0.0",
-    "@commercetools-uikit/secondary-icon-button": "16.0.0",
-    "@commercetools-uikit/select-input": "16.0.0",
-    "@commercetools-uikit/spacings": "16.0.0",
-    "@commercetools-uikit/text": "16.0.0",
-    "@commercetools-uikit/utils": "16.0.0",
+    "@commercetools-uikit/constraints": "16.1.1",
+    "@commercetools-uikit/design-system": "16.1.1",
+    "@commercetools-uikit/icons": "16.1.1",
+    "@commercetools-uikit/label": "16.1.1",
+    "@commercetools-uikit/number-input": "16.1.1",
+    "@commercetools-uikit/secondary-icon-button": "16.1.1",
+    "@commercetools-uikit/select-input": "16.1.1",
+    "@commercetools-uikit/spacings": "16.1.1",
+    "@commercetools-uikit/text": "16.1.1",
+    "@commercetools-uikit/utils": "16.1.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "formik": "^2.2.9",