@commercetools-uikit/pagination 12.2.1 → 12.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +0 -1
  2. package/dist/commercetools-uikit-pagination.cjs.dev.js +126 -113
  3. package/dist/commercetools-uikit-pagination.cjs.prod.js +111 -99
  4. package/dist/commercetools-uikit-pagination.esm.js +106 -92
  5. package/package.json +23 -20
package/README.md CHANGED
@@ -30,7 +30,6 @@ npm --save install react react-intl
30
30
  ## Usage
31
31
 
32
32
  ```jsx
33
- import React from 'react';
34
33
  import { Pagination } from '@commercetools-uikit/pagination';
35
34
 
36
35
  const Example = () => {
package/dist/commercetools-uikit-pagination.cjs.dev.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
5
  var PropTypes = require('prop-types');
7
- var react = require('@emotion/react');
6
+ require('@emotion/react');
8
7
  var Spacings = require('@commercetools-uikit/spacings');
8
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
9
9
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
10
10
  var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
11
11
  var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
@@ -19,6 +19,7 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
19
19
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
20
20
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
21
21
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
22
+ var react = require('react');
22
23
  var uniqueId = require('lodash/uniqueId');
23
24
  var SelectInput = require('@commercetools-uikit/select-input');
24
25
  var Constraints = require('@commercetools-uikit/constraints');
@@ -34,7 +35,6 @@ var Text = require('@commercetools-uikit/text');
34
35
 
35
36
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
36
37
 
37
- var React__default = /*#__PURE__*/_interopDefault(React);
38
38
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
39
39
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
40
40
  var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
@@ -74,7 +74,7 @@ var normalizePageValue = function normalizePageValue(value, totalPages) {
74
74
  return value;
75
75
  };
76
76
 
77
- var messages = reactIntl.defineMessages({
77
+ var messages$2 = reactIntl.defineMessages({
78
78
  page: {
79
79
  id: 'UIKit.Pagination.PageNavigator.page',
80
80
  description: 'Label for page',
@@ -97,16 +97,16 @@ var messages = reactIntl.defineMessages({
97
97
  }
98
98
  });
99
99
 
100
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
100
+ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
101
101
 
102
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
102
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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; }
103
103
 
104
104
  var PageNavigator = function PageNavigator(props) {
105
105
  var intl = reactIntl.useIntl();
106
106
 
107
- var _React$useState = React__default['default'].useState(uniqueId__default['default']('page-number-')),
108
- _React$useState2 = _slicedToArray(_React$useState, 1),
109
- pageNumberInputId = _React$useState2[0];
107
+ var _useState = react.useState(uniqueId__default["default"]('page-number-')),
108
+ _useState2 = _slicedToArray(_useState, 1),
109
+ pageNumberInputId = _useState2[0];
110
110
 
111
111
  var paginationForm = formik.useFormik({
112
112
  initialValues: {
@@ -137,75 +137,81 @@ var PageNavigator = function PageNavigator(props) {
137
137
  var isDisabled = totalPages === 0;
138
138
  var isPreviousDisabled = page <= 1;
139
139
  var isNextDisabled = page >= totalPages;
140
- var handlePrevPageChange = React__default['default'].useCallback(function () {
141
- var previousPage = _valuesInstanceProperty__default['default'](paginationForm).page - 1;
140
+ var handlePrevPageChange = react.useCallback(function () {
141
+ var previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
142
142
  if (previousPage < 1) return;
143
143
  paginationForm.setFieldValue('page', previousPage, true);
144
144
  paginationForm.submitForm();
145
145
  }, [paginationForm]);
146
- var handleNextPageChange = React__default['default'].useCallback(function () {
147
- var nextPage = _valuesInstanceProperty__default['default'](paginationForm).page + 1;
146
+ var handleNextPageChange = react.useCallback(function () {
147
+ var nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
148
148
  if (nextPage > totalPages) return null;
149
149
  paginationForm.setFieldValue('page', nextPage, true);
150
150
  paginationForm.submitForm();
151
151
  }, [paginationForm, totalPages]);
152
- return react.jsx("form", {
153
- onSubmit: paginationForm.handleSubmit
154
- }, react.jsx(Spacings__default['default'].Inline, {
155
- alignItems: "center",
156
- scale: "s"
157
- }, react.jsx(SecondaryIconButton__default['default'], {
158
- label: intl.formatMessage(messages.previousPageLabel),
159
- onClick: handlePrevPageChange,
160
- isDisabled: isPreviousDisabled || isDisabled,
161
- icon: react.jsx(icons.AngleLeftIcon, null)
162
- }), react.jsx(Label__default['default'], {
163
- htmlFor: pageNumberInputId,
164
- intlMessage: messages.page
165
- }), react.jsx("div", null, react.jsx(NumberInput__default['default'], {
166
- name: "page",
167
- id: pageNumberInputId,
168
- value: _valuesInstanceProperty__default['default'](paginationForm).page,
169
- min: 1,
170
- max: totalPages,
171
- onBlur: paginationForm.handleBlur,
172
- onFocus: paginationForm.handleFocus,
173
- onChange: paginationForm.handleChange,
174
- isDisabled: isDisabled,
175
- hasWarning: paginationForm.errors.page,
176
- horizontalConstraint: 2
177
- })), react.jsx(Text__default['default'].Body, {
178
- intlMessage: _objectSpread(_objectSpread({}, messages.pageCount), {}, {
179
- values: {
180
- count: props.totalPages
181
- }
152
+ return jsxRuntime.jsx("form", {
153
+ onSubmit: paginationForm.handleSubmit,
154
+ children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
155
+ alignItems: "center",
156
+ scale: "s",
157
+ children: [jsxRuntime.jsx(SecondaryIconButton__default["default"], {
158
+ label: intl.formatMessage(messages$2.previousPageLabel),
159
+ onClick: handlePrevPageChange,
160
+ isDisabled: isPreviousDisabled || isDisabled,
161
+ icon: jsxRuntime.jsx(icons.AngleLeftIcon, {})
162
+ }), jsxRuntime.jsx(Label__default["default"], {
163
+ htmlFor: pageNumberInputId,
164
+ intlMessage: messages$2.page
165
+ }), jsxRuntime.jsx("div", {
166
+ children: jsxRuntime.jsx(NumberInput__default["default"], {
167
+ name: "page",
168
+ id: pageNumberInputId,
169
+ value: _valuesInstanceProperty__default["default"](paginationForm).page,
170
+ min: 1,
171
+ max: totalPages,
172
+ onBlur: paginationForm.handleBlur,
173
+ onFocus: paginationForm.handleFocus,
174
+ onChange: paginationForm.handleChange,
175
+ isDisabled: isDisabled,
176
+ hasWarning: paginationForm.errors.page,
177
+ horizontalConstraint: 2
178
+ })
179
+ }), jsxRuntime.jsx(Text__default["default"].Body, {
180
+ intlMessage: _objectSpread$1(_objectSpread$1({}, messages$2.pageCount), {}, {
181
+ values: {
182
+ count: props.totalPages
183
+ }
184
+ })
185
+ }), jsxRuntime.jsx(SecondaryIconButton__default["default"], {
186
+ label: intl.formatMessage(messages$2.nextPageLabel),
187
+ onClick: handleNextPageChange,
188
+ isDisabled: isNextDisabled || isDisabled,
189
+ icon: jsxRuntime.jsx(icons.AngleRightIcon, {})
190
+ })]
182
191
  })
183
- }), react.jsx(SecondaryIconButton__default['default'], {
184
- label: intl.formatMessage(messages.nextPageLabel),
185
- onClick: handleNextPageChange,
186
- isDisabled: isNextDisabled || isDisabled,
187
- icon: react.jsx(icons.AngleRightIcon, null)
188
- })));
192
+ });
189
193
  };
190
194
 
191
195
  PageNavigator.displayName = 'PageNavigator';
192
196
  PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
193
- totalPages: PropTypes__default['default'].number.isRequired,
194
- page: PropTypes__default['default'].number.isRequired,
195
- onPageChange: PropTypes__default['default'].func.isRequired
197
+ totalPages: PropTypes__default["default"].number.isRequired,
198
+ page: PropTypes__default["default"].number.isRequired,
199
+ onPageChange: PropTypes__default["default"].func.isRequired
196
200
  } : {};
201
+ var PageNavigator$1 = PageNavigator;
197
202
 
198
- var messages$1 = reactIntl.defineMessages({
203
+ var messages = reactIntl.defineMessages({
199
204
  pageSize: {
200
205
  id: 'UIKit.Pagination.PageSizeSelector.pageSize',
201
206
  description: 'How many items are per page',
202
207
  defaultMessage: 'Items per page ({count} items)'
203
208
  }
204
209
  });
210
+ var messages$1 = messages;
205
211
 
206
- function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
212
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
207
213
 
208
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
214
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _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; }
209
215
 
210
216
  var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
211
217
  switch (perPageRange) {
@@ -226,55 +232,58 @@ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
226
232
  var PageSizeSelector = function PageSizeSelector(props) {
227
233
  var _context;
228
234
 
229
- var _React$useState = React__default['default'].useState(uniqueId__default['default']('per-page-selector-')),
230
- _React$useState2 = _slicedToArray(_React$useState, 1),
231
- perPageSelectorId = _React$useState2[0];
235
+ var _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
236
+ _useState2 = _slicedToArray(_useState, 1),
237
+ perPageSelectorId = _useState2[0];
232
238
 
233
239
  var options = mapRangeToListOfOptions(props.perPageRange);
234
240
 
235
- var hasValidPerPageOption = _includesInstanceProperty__default['default'](options).call(options, props.perPage);
241
+ var hasValidPerPageOption = _includesInstanceProperty__default["default"](options).call(options, props.perPage);
236
242
 
237
- 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;
243
+ 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;
238
244
  var onPerPageChange = props.onPerPageChange;
239
- var handleSelectPerPage = React__default['default'].useCallback(function (event) {
245
+ var handleSelectPerPage = react.useCallback(function (event) {
240
246
  onPerPageChange(Number(event.target.value));
241
247
  }, [onPerPageChange]);
242
- return react.jsx(Spacings__default['default'].Inline, {
243
- alignItems: "center"
244
- }, react.jsx(Constraints__default['default'].Horizontal, {
245
- max: 2
246
- }, react.jsx(SelectInput__default['default'], {
247
- id: perPageSelectorId,
248
- name: "per-page-selector",
249
- value: props.perPage.toString(),
250
- options: _mapInstanceProperty__default['default'](options).call(options, function (option) {
251
- return {
252
- value: option.toString(),
253
- label: option.toString()
254
- };
255
- }),
256
- onChange: handleSelectPerPage
257
- })), react.jsx(Label__default['default'], {
258
- htmlFor: perPageSelectorId,
259
- intlMessage: _objectSpread$1(_objectSpread$1({}, messages$1.pageSize), {}, {
260
- values: {
261
- count: props.pageItems
262
- }
263
- })
264
- }));
248
+ return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
249
+ alignItems: "center",
250
+ children: [jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
251
+ max: 2,
252
+ children: jsxRuntime.jsx(SelectInput__default["default"], {
253
+ id: perPageSelectorId,
254
+ name: "per-page-selector",
255
+ value: props.perPage.toString(),
256
+ options: _mapInstanceProperty__default["default"](options).call(options, function (option) {
257
+ return {
258
+ value: option.toString(),
259
+ label: option.toString()
260
+ };
261
+ }),
262
+ onChange: handleSelectPerPage
263
+ })
264
+ }), jsxRuntime.jsx(Label__default["default"], {
265
+ htmlFor: perPageSelectorId,
266
+ intlMessage: _objectSpread(_objectSpread({}, messages$1.pageSize), {}, {
267
+ values: {
268
+ count: props.pageItems
269
+ }
270
+ })
271
+ })]
272
+ });
265
273
  };
266
274
 
267
275
  PageSizeSelector.displayName = 'PageSizeSelector';
268
276
  PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
269
- perPage: PropTypes__default['default'].number,
270
- perPageRange: PropTypes__default['default'].oneOf(['s', 'm', 'l']),
271
- onPerPageChange: PropTypes__default['default'].func.isRequired,
272
- pageItems: PropTypes__default['default'].number.isRequired
277
+ perPage: PropTypes__default["default"].number,
278
+ perPageRange: PropTypes__default["default"].oneOf(['s', 'm', 'l']),
279
+ onPerPageChange: PropTypes__default["default"].func.isRequired,
280
+ pageItems: PropTypes__default["default"].number.isRequired
273
281
  } : {};
274
282
  PageSizeSelector.defaultProps = {
275
283
  perPage: 20,
276
284
  perPageRange: 's'
277
285
  };
286
+ var PageSizeSelector$1 = PageSizeSelector;
278
287
 
279
288
  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)."; }
280
289
 
@@ -284,26 +293,29 @@ var _ref = process.env.NODE_ENV === "production" ? {
284
293
  } : {
285
294
  name: "mvvfm1-Pagination",
286
295
  styles: "flex-grow:2;label:Pagination;",
296
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJnQiIsImZpbGUiOiJwYWdpbmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQgUGFnZU5hdmlnYXRvciBmcm9tICcuL3BhZ2UtbmF2aWdhdG9yJztcbmltcG9ydCBQYWdlU2l6ZVNlbGVjdG9yIGZyb20gJy4vcGFnZS1zaXplLXNlbGVjdG9yJztcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblBhZ2luYXRpb24uZGlzcGxheU5hbWUgPSAnUGFnaW5hdGlvbic7XG5QYWdpbmF0aW9uLnByb3BUeXBlcyA9IHtcbiAgLyoqXG4gICAqIFRvdGFsIG51bWJlciBvZiBpdGVtcyBhY3Jvc3MgYWxsIHBhZ2VzXG4gICAqL1xuICB0b3RhbEl0ZW1zOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHBlciBwYWdlLCBhY2NvcmRpbmcgdG8gdGhlIHByZS1kZWZpbmVkIHJhbmdlIHZhbHVlcy5cbiAgICovXG4gIHBlclBhZ2U6IFByb3BUeXBlcy5udW1iZXIsXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogUHJvcFR5cGVzLm9uZU9mKFsncycsICdtJywgJ2wnXSksXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiBgcGVyUGFnZWAgaXMgY2hhbmdlZC5cbiAgICogPGJyLz5cbiAgICogU2lnbmF0dXJlOiBgKG5leHRQZXJQYWdlOiBudW1iZXIpID0+IHZvaWRgXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSB7XG4gIHBlclBhZ2U6IDIwLFxuICBwZXJQYWdlUmFuZ2U6ICdzJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
287
297
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
288
298
  };
289
299
 
290
300
  var Pagination = function Pagination(props) {
291
301
  var totalPages = Math.ceil(props.totalItems / props.perPage);
292
302
  var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
293
- return react.jsx(Spacings__default['default'].Inline, {
294
- justifyContent: "space-between"
295
- }, react.jsx("div", {
296
- css: _ref
297
- }, react.jsx(PageSizeSelector, {
298
- pageItems: pageItems,
299
- perPage: props.perPage,
300
- perPageRange: props.perPageRange,
301
- onPerPageChange: props.onPerPageChange
302
- })), react.jsx(PageNavigator, {
303
- totalPages: totalPages,
304
- page: props.page,
305
- onPageChange: props.onPageChange
306
- }));
303
+ return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
304
+ justifyContent: "space-between",
305
+ children: [jsxRuntime.jsx("div", {
306
+ css: _ref,
307
+ children: jsxRuntime.jsx(PageSizeSelector$1, {
308
+ pageItems: pageItems,
309
+ perPage: props.perPage,
310
+ perPageRange: props.perPageRange,
311
+ onPerPageChange: props.onPerPageChange
312
+ })
313
+ }), jsxRuntime.jsx(PageNavigator$1, {
314
+ totalPages: totalPages,
315
+ page: props.page,
316
+ onPageChange: props.onPageChange
317
+ })]
318
+ });
307
319
  };
308
320
 
309
321
  Pagination.displayName = 'Pagination';
@@ -311,12 +323,12 @@ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
311
323
  /**
312
324
  * Total number of items across all pages
313
325
  */
314
- totalItems: PropTypes__default['default'].number.isRequired,
326
+ totalItems: PropTypes__default["default"].number.isRequired,
315
327
 
316
328
  /**
317
329
  * The current page
318
330
  */
319
- page: PropTypes__default['default'].number.isRequired,
331
+ page: PropTypes__default["default"].number.isRequired,
320
332
 
321
333
  /**
322
334
  * A callback function, called when the page is changed.
@@ -325,12 +337,12 @@ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
325
337
  * <br/>
326
338
  * Signature: `(page: number) => void`
327
339
  */
328
- onPageChange: PropTypes__default['default'].func.isRequired,
340
+ onPageChange: PropTypes__default["default"].func.isRequired,
329
341
 
330
342
  /**
331
343
  * Number of items per page, according to the pre-defined range values.
332
344
  */
333
- perPage: PropTypes__default['default'].number,
345
+ perPage: PropTypes__default["default"].number,
334
346
 
335
347
  /**
336
348
  * Range of items per page.
@@ -341,24 +353,25 @@ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
341
353
  * <br/>
342
354
  * `l: 200,500`
343
355
  */
344
- perPageRange: PropTypes__default['default'].oneOf(['s', 'm', 'l']),
356
+ perPageRange: PropTypes__default["default"].oneOf(['s', 'm', 'l']),
345
357
 
346
358
  /**
347
359
  * A callback function, called when `perPage` is changed.
348
360
  * <br/>
349
361
  * Signature: `(nextPerPage: number) => void`
350
362
  */
351
- onPerPageChange: PropTypes__default['default'].func.isRequired
363
+ onPerPageChange: PropTypes__default["default"].func.isRequired
352
364
  } : {};
353
365
  Pagination.defaultProps = {
354
366
  perPage: 20,
355
367
  perPageRange: 's'
356
368
  };
369
+ var Pagination$1 = Pagination;
357
370
 
358
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
359
- var version = '12.2.1';
371
+ // NOTE: This string will be replaced on build time with the package version.
372
+ var version = "12.2.5";
360
373
 
361
- exports.PageNavigator = PageNavigator;
362
- exports.PageSizeSelector = PageSizeSelector;
363
- exports.Pagination = Pagination;
374
+ exports.PageNavigator = PageNavigator$1;
375
+ exports.PageSizeSelector = PageSizeSelector$1;
376
+ exports.Pagination = Pagination$1;
364
377
  exports.version = version;
package/dist/commercetools-uikit-pagination.cjs.prod.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
5
  require('prop-types');
7
- var react = require('@emotion/react');
6
+ require('@emotion/react');
8
7
  var Spacings = require('@commercetools-uikit/spacings');
8
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
9
9
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
10
10
  var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
11
11
  var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
@@ -19,6 +19,7 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
19
19
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
20
20
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
21
21
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
22
+ var react = require('react');
22
23
  var uniqueId = require('lodash/uniqueId');
23
24
  var SelectInput = require('@commercetools-uikit/select-input');
24
25
  var Constraints = require('@commercetools-uikit/constraints');
@@ -34,7 +35,6 @@ var Text = require('@commercetools-uikit/text');
34
35
 
35
36
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
36
37
 
37
- var React__default = /*#__PURE__*/_interopDefault(React);
38
38
  var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
39
39
  var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
40
40
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
@@ -72,7 +72,7 @@ var normalizePageValue = function normalizePageValue(value, totalPages) {
72
72
  return value;
73
73
  };
74
74
 
75
- var messages = reactIntl.defineMessages({
75
+ var messages$2 = reactIntl.defineMessages({
76
76
  page: {
77
77
  id: 'UIKit.Pagination.PageNavigator.page',
78
78
  description: 'Label for page',
@@ -95,16 +95,16 @@ var messages = reactIntl.defineMessages({
95
95
  }
96
96
  });
97
97
 
98
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
98
+ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
99
99
 
100
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
100
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _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; }
101
101
 
102
102
  var PageNavigator = function PageNavigator(props) {
103
103
  var intl = reactIntl.useIntl();
104
104
 
105
- var _React$useState = React__default['default'].useState(uniqueId__default['default']('page-number-')),
106
- _React$useState2 = _slicedToArray(_React$useState, 1),
107
- pageNumberInputId = _React$useState2[0];
105
+ var _useState = react.useState(uniqueId__default["default"]('page-number-')),
106
+ _useState2 = _slicedToArray(_useState, 1),
107
+ pageNumberInputId = _useState2[0];
108
108
 
109
109
  var paginationForm = formik.useFormik({
110
110
  initialValues: {
@@ -135,71 +135,77 @@ var PageNavigator = function PageNavigator(props) {
135
135
  var isDisabled = totalPages === 0;
136
136
  var isPreviousDisabled = page <= 1;
137
137
  var isNextDisabled = page >= totalPages;
138
- var handlePrevPageChange = React__default['default'].useCallback(function () {
139
- var previousPage = _valuesInstanceProperty__default['default'](paginationForm).page - 1;
138
+ var handlePrevPageChange = react.useCallback(function () {
139
+ var previousPage = _valuesInstanceProperty__default["default"](paginationForm).page - 1;
140
140
  if (previousPage < 1) return;
141
141
  paginationForm.setFieldValue('page', previousPage, true);
142
142
  paginationForm.submitForm();
143
143
  }, [paginationForm]);
144
- var handleNextPageChange = React__default['default'].useCallback(function () {
145
- var nextPage = _valuesInstanceProperty__default['default'](paginationForm).page + 1;
144
+ var handleNextPageChange = react.useCallback(function () {
145
+ var nextPage = _valuesInstanceProperty__default["default"](paginationForm).page + 1;
146
146
  if (nextPage > totalPages) return null;
147
147
  paginationForm.setFieldValue('page', nextPage, true);
148
148
  paginationForm.submitForm();
149
149
  }, [paginationForm, totalPages]);
150
- return react.jsx("form", {
151
- onSubmit: paginationForm.handleSubmit
152
- }, react.jsx(Spacings__default['default'].Inline, {
153
- alignItems: "center",
154
- scale: "s"
155
- }, react.jsx(SecondaryIconButton__default['default'], {
156
- label: intl.formatMessage(messages.previousPageLabel),
157
- onClick: handlePrevPageChange,
158
- isDisabled: isPreviousDisabled || isDisabled,
159
- icon: react.jsx(icons.AngleLeftIcon, null)
160
- }), react.jsx(Label__default['default'], {
161
- htmlFor: pageNumberInputId,
162
- intlMessage: messages.page
163
- }), react.jsx("div", null, react.jsx(NumberInput__default['default'], {
164
- name: "page",
165
- id: pageNumberInputId,
166
- value: _valuesInstanceProperty__default['default'](paginationForm).page,
167
- min: 1,
168
- max: totalPages,
169
- onBlur: paginationForm.handleBlur,
170
- onFocus: paginationForm.handleFocus,
171
- onChange: paginationForm.handleChange,
172
- isDisabled: isDisabled,
173
- hasWarning: paginationForm.errors.page,
174
- horizontalConstraint: 2
175
- })), react.jsx(Text__default['default'].Body, {
176
- intlMessage: _objectSpread(_objectSpread({}, messages.pageCount), {}, {
177
- values: {
178
- count: props.totalPages
179
- }
150
+ return jsxRuntime.jsx("form", {
151
+ onSubmit: paginationForm.handleSubmit,
152
+ children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
153
+ alignItems: "center",
154
+ scale: "s",
155
+ children: [jsxRuntime.jsx(SecondaryIconButton__default["default"], {
156
+ label: intl.formatMessage(messages$2.previousPageLabel),
157
+ onClick: handlePrevPageChange,
158
+ isDisabled: isPreviousDisabled || isDisabled,
159
+ icon: jsxRuntime.jsx(icons.AngleLeftIcon, {})
160
+ }), jsxRuntime.jsx(Label__default["default"], {
161
+ htmlFor: pageNumberInputId,
162
+ intlMessage: messages$2.page
163
+ }), jsxRuntime.jsx("div", {
164
+ children: jsxRuntime.jsx(NumberInput__default["default"], {
165
+ name: "page",
166
+ id: pageNumberInputId,
167
+ value: _valuesInstanceProperty__default["default"](paginationForm).page,
168
+ min: 1,
169
+ max: totalPages,
170
+ onBlur: paginationForm.handleBlur,
171
+ onFocus: paginationForm.handleFocus,
172
+ onChange: paginationForm.handleChange,
173
+ isDisabled: isDisabled,
174
+ hasWarning: paginationForm.errors.page,
175
+ horizontalConstraint: 2
176
+ })
177
+ }), jsxRuntime.jsx(Text__default["default"].Body, {
178
+ intlMessage: _objectSpread$1(_objectSpread$1({}, messages$2.pageCount), {}, {
179
+ values: {
180
+ count: props.totalPages
181
+ }
182
+ })
183
+ }), jsxRuntime.jsx(SecondaryIconButton__default["default"], {
184
+ label: intl.formatMessage(messages$2.nextPageLabel),
185
+ onClick: handleNextPageChange,
186
+ isDisabled: isNextDisabled || isDisabled,
187
+ icon: jsxRuntime.jsx(icons.AngleRightIcon, {})
188
+ })]
180
189
  })
181
- }), react.jsx(SecondaryIconButton__default['default'], {
182
- label: intl.formatMessage(messages.nextPageLabel),
183
- onClick: handleNextPageChange,
184
- isDisabled: isNextDisabled || isDisabled,
185
- icon: react.jsx(icons.AngleRightIcon, null)
186
- })));
190
+ });
187
191
  };
188
192
 
189
193
  PageNavigator.displayName = 'PageNavigator';
190
194
  PageNavigator.propTypes = {};
195
+ var PageNavigator$1 = PageNavigator;
191
196
 
192
- var messages$1 = reactIntl.defineMessages({
197
+ var messages = reactIntl.defineMessages({
193
198
  pageSize: {
194
199
  id: 'UIKit.Pagination.PageSizeSelector.pageSize',
195
200
  description: 'How many items are per page',
196
201
  defaultMessage: 'Items per page ({count} items)'
197
202
  }
198
203
  });
204
+ var messages$1 = messages;
199
205
 
200
- function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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; }
206
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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; }
201
207
 
202
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
208
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _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; }
203
209
 
204
210
  var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
205
211
  switch (perPageRange) {
@@ -219,40 +225,42 @@ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
219
225
 
220
226
  var PageSizeSelector = function PageSizeSelector(props) {
221
227
 
222
- var _React$useState = React__default['default'].useState(uniqueId__default['default']('per-page-selector-')),
223
- _React$useState2 = _slicedToArray(_React$useState, 1),
224
- perPageSelectorId = _React$useState2[0];
228
+ var _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
229
+ _useState2 = _slicedToArray(_useState, 1),
230
+ perPageSelectorId = _useState2[0];
225
231
 
226
232
  var options = mapRangeToListOfOptions(props.perPageRange);
227
233
 
228
- _includesInstanceProperty__default['default'](options).call(options, props.perPage);
234
+ _includesInstanceProperty__default["default"](options).call(options, props.perPage);
229
235
  var onPerPageChange = props.onPerPageChange;
230
- var handleSelectPerPage = React__default['default'].useCallback(function (event) {
236
+ var handleSelectPerPage = react.useCallback(function (event) {
231
237
  onPerPageChange(Number(event.target.value));
232
238
  }, [onPerPageChange]);
233
- return react.jsx(Spacings__default['default'].Inline, {
234
- alignItems: "center"
235
- }, react.jsx(Constraints__default['default'].Horizontal, {
236
- max: 2
237
- }, react.jsx(SelectInput__default['default'], {
238
- id: perPageSelectorId,
239
- name: "per-page-selector",
240
- value: props.perPage.toString(),
241
- options: _mapInstanceProperty__default['default'](options).call(options, function (option) {
242
- return {
243
- value: option.toString(),
244
- label: option.toString()
245
- };
246
- }),
247
- onChange: handleSelectPerPage
248
- })), react.jsx(Label__default['default'], {
249
- htmlFor: perPageSelectorId,
250
- intlMessage: _objectSpread$1(_objectSpread$1({}, messages$1.pageSize), {}, {
251
- values: {
252
- count: props.pageItems
253
- }
254
- })
255
- }));
239
+ return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
240
+ alignItems: "center",
241
+ children: [jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
242
+ max: 2,
243
+ children: jsxRuntime.jsx(SelectInput__default["default"], {
244
+ id: perPageSelectorId,
245
+ name: "per-page-selector",
246
+ value: props.perPage.toString(),
247
+ options: _mapInstanceProperty__default["default"](options).call(options, function (option) {
248
+ return {
249
+ value: option.toString(),
250
+ label: option.toString()
251
+ };
252
+ }),
253
+ onChange: handleSelectPerPage
254
+ })
255
+ }), jsxRuntime.jsx(Label__default["default"], {
256
+ htmlFor: perPageSelectorId,
257
+ intlMessage: _objectSpread(_objectSpread({}, messages$1.pageSize), {}, {
258
+ values: {
259
+ count: props.pageItems
260
+ }
261
+ })
262
+ })]
263
+ });
256
264
  };
257
265
 
258
266
  PageSizeSelector.displayName = 'PageSizeSelector';
@@ -261,6 +269,7 @@ PageSizeSelector.defaultProps = {
261
269
  perPage: 20,
262
270
  perPageRange: 's'
263
271
  };
272
+ var PageSizeSelector$1 = PageSizeSelector;
264
273
 
265
274
  var _ref = {
266
275
  name: "15sp3y3",
@@ -270,20 +279,22 @@ var _ref = {
270
279
  var Pagination = function Pagination(props) {
271
280
  var totalPages = Math.ceil(props.totalItems / props.perPage);
272
281
  var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
273
- return react.jsx(Spacings__default['default'].Inline, {
274
- justifyContent: "space-between"
275
- }, react.jsx("div", {
276
- css: _ref
277
- }, react.jsx(PageSizeSelector, {
278
- pageItems: pageItems,
279
- perPage: props.perPage,
280
- perPageRange: props.perPageRange,
281
- onPerPageChange: props.onPerPageChange
282
- })), react.jsx(PageNavigator, {
283
- totalPages: totalPages,
284
- page: props.page,
285
- onPageChange: props.onPageChange
286
- }));
282
+ return jsxRuntime.jsxs(Spacings__default["default"].Inline, {
283
+ justifyContent: "space-between",
284
+ children: [jsxRuntime.jsx("div", {
285
+ css: _ref,
286
+ children: jsxRuntime.jsx(PageSizeSelector$1, {
287
+ pageItems: pageItems,
288
+ perPage: props.perPage,
289
+ perPageRange: props.perPageRange,
290
+ onPerPageChange: props.onPerPageChange
291
+ })
292
+ }), jsxRuntime.jsx(PageNavigator$1, {
293
+ totalPages: totalPages,
294
+ page: props.page,
295
+ onPageChange: props.onPageChange
296
+ })]
297
+ });
287
298
  };
288
299
 
289
300
  Pagination.displayName = 'Pagination';
@@ -292,11 +303,12 @@ Pagination.defaultProps = {
292
303
  perPage: 20,
293
304
  perPageRange: 's'
294
305
  };
306
+ var Pagination$1 = Pagination;
295
307
 
296
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
297
- var version = '12.2.1';
308
+ // NOTE: This string will be replaced on build time with the package version.
309
+ var version = "12.2.5";
298
310
 
299
- exports.PageNavigator = PageNavigator;
300
- exports.PageSizeSelector = PageSizeSelector;
301
- exports.Pagination = Pagination;
311
+ exports.PageNavigator = PageNavigator$1;
312
+ exports.PageSizeSelector = PageSizeSelector$1;
313
+ exports.Pagination = Pagination$1;
302
314
  exports.version = version;
package/dist/commercetools-uikit-pagination.esm.js CHANGED
@@ -1,7 +1,7 @@
1
- import React from 'react';
2
1
  import PropTypes from 'prop-types';
3
- import { jsx } from '@emotion/react';
2
+ import '@emotion/react';
4
3
  import Spacings from '@commercetools-uikit/spacings';
4
+ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
5
5
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
6
6
  import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
7
7
  import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
@@ -15,6 +15,7 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
15
15
  import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
16
16
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
17
17
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
18
+ import { useState, useCallback } from 'react';
18
19
  import uniqueId from 'lodash/uniqueId';
19
20
  import SelectInput from '@commercetools-uikit/select-input';
20
21
  import Constraints from '@commercetools-uikit/constraints';
@@ -45,7 +46,7 @@ var normalizePageValue = function normalizePageValue(value, totalPages) {
45
46
  return value;
46
47
  };
47
48
 
48
- var messages = defineMessages({
49
+ var messages$2 = defineMessages({
49
50
  page: {
50
51
  id: 'UIKit.Pagination.PageNavigator.page',
51
52
  description: 'Label for page',
@@ -68,16 +69,16 @@ var messages = defineMessages({
68
69
  }
69
70
  });
70
71
 
71
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
72
+ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
72
73
 
73
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
74
+ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
74
75
 
75
76
  var PageNavigator = function PageNavigator(props) {
76
77
  var intl = useIntl();
77
78
 
78
- var _React$useState = React.useState(uniqueId('page-number-')),
79
- _React$useState2 = _slicedToArray(_React$useState, 1),
80
- pageNumberInputId = _React$useState2[0];
79
+ var _useState = useState(uniqueId('page-number-')),
80
+ _useState2 = _slicedToArray(_useState, 1),
81
+ pageNumberInputId = _useState2[0];
81
82
 
82
83
  var paginationForm = useFormik({
83
84
  initialValues: {
@@ -108,55 +109,59 @@ var PageNavigator = function PageNavigator(props) {
108
109
  var isDisabled = totalPages === 0;
109
110
  var isPreviousDisabled = page <= 1;
110
111
  var isNextDisabled = page >= totalPages;
111
- var handlePrevPageChange = React.useCallback(function () {
112
+ var handlePrevPageChange = useCallback(function () {
112
113
  var previousPage = _valuesInstanceProperty(paginationForm).page - 1;
113
114
  if (previousPage < 1) return;
114
115
  paginationForm.setFieldValue('page', previousPage, true);
115
116
  paginationForm.submitForm();
116
117
  }, [paginationForm]);
117
- var handleNextPageChange = React.useCallback(function () {
118
+ var handleNextPageChange = useCallback(function () {
118
119
  var nextPage = _valuesInstanceProperty(paginationForm).page + 1;
119
120
  if (nextPage > totalPages) return null;
120
121
  paginationForm.setFieldValue('page', nextPage, true);
121
122
  paginationForm.submitForm();
122
123
  }, [paginationForm, totalPages]);
123
124
  return jsx("form", {
124
- onSubmit: paginationForm.handleSubmit
125
- }, jsx(Spacings.Inline, {
126
- alignItems: "center",
127
- scale: "s"
128
- }, jsx(SecondaryIconButton, {
129
- label: intl.formatMessage(messages.previousPageLabel),
130
- onClick: handlePrevPageChange,
131
- isDisabled: isPreviousDisabled || isDisabled,
132
- icon: jsx(AngleLeftIcon, null)
133
- }), jsx(Label, {
134
- htmlFor: pageNumberInputId,
135
- intlMessage: messages.page
136
- }), jsx("div", null, jsx(NumberInput, {
137
- name: "page",
138
- id: pageNumberInputId,
139
- value: _valuesInstanceProperty(paginationForm).page,
140
- min: 1,
141
- max: totalPages,
142
- onBlur: paginationForm.handleBlur,
143
- onFocus: paginationForm.handleFocus,
144
- onChange: paginationForm.handleChange,
145
- isDisabled: isDisabled,
146
- hasWarning: paginationForm.errors.page,
147
- horizontalConstraint: 2
148
- })), jsx(Text.Body, {
149
- intlMessage: _objectSpread(_objectSpread({}, messages.pageCount), {}, {
150
- values: {
151
- count: props.totalPages
152
- }
125
+ onSubmit: paginationForm.handleSubmit,
126
+ children: jsxs(Spacings.Inline, {
127
+ alignItems: "center",
128
+ scale: "s",
129
+ children: [jsx(SecondaryIconButton, {
130
+ label: intl.formatMessage(messages$2.previousPageLabel),
131
+ onClick: handlePrevPageChange,
132
+ isDisabled: isPreviousDisabled || isDisabled,
133
+ icon: jsx(AngleLeftIcon, {})
134
+ }), jsx(Label, {
135
+ htmlFor: pageNumberInputId,
136
+ intlMessage: messages$2.page
137
+ }), jsx("div", {
138
+ children: jsx(NumberInput, {
139
+ name: "page",
140
+ id: pageNumberInputId,
141
+ value: _valuesInstanceProperty(paginationForm).page,
142
+ min: 1,
143
+ max: totalPages,
144
+ onBlur: paginationForm.handleBlur,
145
+ onFocus: paginationForm.handleFocus,
146
+ onChange: paginationForm.handleChange,
147
+ isDisabled: isDisabled,
148
+ hasWarning: paginationForm.errors.page,
149
+ horizontalConstraint: 2
150
+ })
151
+ }), jsx(Text.Body, {
152
+ intlMessage: _objectSpread$1(_objectSpread$1({}, messages$2.pageCount), {}, {
153
+ values: {
154
+ count: props.totalPages
155
+ }
156
+ })
157
+ }), jsx(SecondaryIconButton, {
158
+ label: intl.formatMessage(messages$2.nextPageLabel),
159
+ onClick: handleNextPageChange,
160
+ isDisabled: isNextDisabled || isDisabled,
161
+ icon: jsx(AngleRightIcon, {})
162
+ })]
153
163
  })
154
- }), jsx(SecondaryIconButton, {
155
- label: intl.formatMessage(messages.nextPageLabel),
156
- onClick: handleNextPageChange,
157
- isDisabled: isNextDisabled || isDisabled,
158
- icon: jsx(AngleRightIcon, null)
159
- })));
164
+ });
160
165
  };
161
166
 
162
167
  PageNavigator.displayName = 'PageNavigator';
@@ -165,18 +170,20 @@ PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
165
170
  page: PropTypes.number.isRequired,
166
171
  onPageChange: PropTypes.func.isRequired
167
172
  } : {};
173
+ var PageNavigator$1 = PageNavigator;
168
174
 
169
- var messages$1 = defineMessages({
175
+ var messages = defineMessages({
170
176
  pageSize: {
171
177
  id: 'UIKit.Pagination.PageSizeSelector.pageSize',
172
178
  description: 'How many items are per page',
173
179
  defaultMessage: 'Items per page ({count} items)'
174
180
  }
175
181
  });
182
+ var messages$1 = messages;
176
183
 
177
- function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
184
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
178
185
 
179
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
186
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
180
187
 
181
188
  var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
182
189
  switch (perPageRange) {
@@ -197,9 +204,9 @@ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
197
204
  var PageSizeSelector = function PageSizeSelector(props) {
198
205
  var _context;
199
206
 
200
- var _React$useState = React.useState(uniqueId('per-page-selector-')),
201
- _React$useState2 = _slicedToArray(_React$useState, 1),
202
- perPageSelectorId = _React$useState2[0];
207
+ var _useState = useState(uniqueId('per-page-selector-')),
208
+ _useState2 = _slicedToArray(_useState, 1),
209
+ perPageSelectorId = _useState2[0];
203
210
 
204
211
  var options = mapRangeToListOfOptions(props.perPageRange);
205
212
 
@@ -207,32 +214,34 @@ var PageSizeSelector = function PageSizeSelector(props) {
207
214
 
208
215
  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;
209
216
  var onPerPageChange = props.onPerPageChange;
210
- var handleSelectPerPage = React.useCallback(function (event) {
217
+ var handleSelectPerPage = useCallback(function (event) {
211
218
  onPerPageChange(Number(event.target.value));
212
219
  }, [onPerPageChange]);
213
- return jsx(Spacings.Inline, {
214
- alignItems: "center"
215
- }, jsx(Constraints.Horizontal, {
216
- max: 2
217
- }, jsx(SelectInput, {
218
- id: perPageSelectorId,
219
- name: "per-page-selector",
220
- value: props.perPage.toString(),
221
- options: _mapInstanceProperty(options).call(options, function (option) {
222
- return {
223
- value: option.toString(),
224
- label: option.toString()
225
- };
226
- }),
227
- onChange: handleSelectPerPage
228
- })), jsx(Label, {
229
- htmlFor: perPageSelectorId,
230
- intlMessage: _objectSpread$1(_objectSpread$1({}, messages$1.pageSize), {}, {
231
- values: {
232
- count: props.pageItems
233
- }
234
- })
235
- }));
220
+ return jsxs(Spacings.Inline, {
221
+ alignItems: "center",
222
+ children: [jsx(Constraints.Horizontal, {
223
+ max: 2,
224
+ children: jsx(SelectInput, {
225
+ id: perPageSelectorId,
226
+ name: "per-page-selector",
227
+ value: props.perPage.toString(),
228
+ options: _mapInstanceProperty(options).call(options, function (option) {
229
+ return {
230
+ value: option.toString(),
231
+ label: option.toString()
232
+ };
233
+ }),
234
+ onChange: handleSelectPerPage
235
+ })
236
+ }), jsx(Label, {
237
+ htmlFor: perPageSelectorId,
238
+ intlMessage: _objectSpread(_objectSpread({}, messages$1.pageSize), {}, {
239
+ values: {
240
+ count: props.pageItems
241
+ }
242
+ })
243
+ })]
244
+ });
236
245
  };
237
246
 
238
247
  PageSizeSelector.displayName = 'PageSizeSelector';
@@ -246,6 +255,7 @@ PageSizeSelector.defaultProps = {
246
255
  perPage: 20,
247
256
  perPageRange: 's'
248
257
  };
258
+ var PageSizeSelector$1 = PageSizeSelector;
249
259
 
250
260
  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)."; }
251
261
 
@@ -255,26 +265,29 @@ var _ref = process.env.NODE_ENV === "production" ? {
255
265
  } : {
256
266
  name: "mvvfm1-Pagination",
257
267
  styles: "flex-grow:2;label:Pagination;",
268
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJnQiIsImZpbGUiOiJwYWdpbmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQgUGFnZU5hdmlnYXRvciBmcm9tICcuL3BhZ2UtbmF2aWdhdG9yJztcbmltcG9ydCBQYWdlU2l6ZVNlbGVjdG9yIGZyb20gJy4vcGFnZS1zaXplLXNlbGVjdG9yJztcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblBhZ2luYXRpb24uZGlzcGxheU5hbWUgPSAnUGFnaW5hdGlvbic7XG5QYWdpbmF0aW9uLnByb3BUeXBlcyA9IHtcbiAgLyoqXG4gICAqIFRvdGFsIG51bWJlciBvZiBpdGVtcyBhY3Jvc3MgYWxsIHBhZ2VzXG4gICAqL1xuICB0b3RhbEl0ZW1zOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHBlciBwYWdlLCBhY2NvcmRpbmcgdG8gdGhlIHByZS1kZWZpbmVkIHJhbmdlIHZhbHVlcy5cbiAgICovXG4gIHBlclBhZ2U6IFByb3BUeXBlcy5udW1iZXIsXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogUHJvcFR5cGVzLm9uZU9mKFsncycsICdtJywgJ2wnXSksXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiBgcGVyUGFnZWAgaXMgY2hhbmdlZC5cbiAgICogPGJyLz5cbiAgICogU2lnbmF0dXJlOiBgKG5leHRQZXJQYWdlOiBudW1iZXIpID0+IHZvaWRgXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSB7XG4gIHBlclBhZ2U6IDIwLFxuICBwZXJQYWdlUmFuZ2U6ICdzJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
258
269
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
259
270
  };
260
271
 
261
272
  var Pagination = function Pagination(props) {
262
273
  var totalPages = Math.ceil(props.totalItems / props.perPage);
263
274
  var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
264
- return jsx(Spacings.Inline, {
265
- justifyContent: "space-between"
266
- }, jsx("div", {
267
- css: _ref
268
- }, jsx(PageSizeSelector, {
269
- pageItems: pageItems,
270
- perPage: props.perPage,
271
- perPageRange: props.perPageRange,
272
- onPerPageChange: props.onPerPageChange
273
- })), jsx(PageNavigator, {
274
- totalPages: totalPages,
275
- page: props.page,
276
- onPageChange: props.onPageChange
277
- }));
275
+ return jsxs(Spacings.Inline, {
276
+ justifyContent: "space-between",
277
+ children: [jsx("div", {
278
+ css: _ref,
279
+ children: jsx(PageSizeSelector$1, {
280
+ pageItems: pageItems,
281
+ perPage: props.perPage,
282
+ perPageRange: props.perPageRange,
283
+ onPerPageChange: props.onPerPageChange
284
+ })
285
+ }), jsx(PageNavigator$1, {
286
+ totalPages: totalPages,
287
+ page: props.page,
288
+ onPageChange: props.onPageChange
289
+ })]
290
+ });
278
291
  };
279
292
 
280
293
  Pagination.displayName = 'Pagination';
@@ -325,8 +338,9 @@ Pagination.defaultProps = {
325
338
  perPage: 20,
326
339
  perPageRange: 's'
327
340
  };
341
+ var Pagination$1 = Pagination;
328
342
 
329
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
330
- var version = '12.2.1';
343
+ // NOTE: This string will be replaced on build time with the package version.
344
+ var version = "12.2.5";
331
345
 
332
- export { PageNavigator, PageSizeSelector, Pagination, version };
346
+ export { PageNavigator$1 as PageNavigator, PageSizeSelector$1 as PageSizeSelector, Pagination$1 as Pagination, version };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/pagination",
3
3
  "description": "Components for navigating through pages of items",
4
- "version": "12.2.1",
4
+ "version": "12.2.5",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -9,32 +9,35 @@
9
9
  "directory": "packages/components/pagination"
10
10
  },
11
11
  "homepage": "https://uikit.commercetools.com",
12
- "keywords": ["javascript", "design system", "react", "uikit"],
12
+ "keywords": [
13
+ "javascript",
14
+ "design system",
15
+ "react",
16
+ "uikit"
17
+ ],
13
18
  "license": "MIT",
14
- "private": false,
15
19
  "publishConfig": {
16
20
  "access": "public"
17
21
  },
18
22
  "sideEffects": false,
19
23
  "main": "dist/commercetools-uikit-pagination.cjs.js",
20
24
  "module": "dist/commercetools-uikit-pagination.esm.js",
21
- "files": ["dist"],
22
- "scripts": {
23
- "prepare": "../../../scripts/version.js replace"
24
- },
25
+ "files": [
26
+ "dist"
27
+ ],
25
28
  "dependencies": {
26
- "@babel/runtime": "7.14.6",
27
- "@babel/runtime-corejs3": "7.14.7",
28
- "@commercetools-uikit/constraints": "12.2.0",
29
- "@commercetools-uikit/design-system": "12.1.0",
30
- "@commercetools-uikit/icons": "12.2.1",
31
- "@commercetools-uikit/label": "12.2.0",
32
- "@commercetools-uikit/number-input": "12.2.1",
33
- "@commercetools-uikit/secondary-icon-button": "12.2.1",
34
- "@commercetools-uikit/select-input": "12.2.1",
35
- "@commercetools-uikit/spacings": "12.2.0",
36
- "@commercetools-uikit/text": "12.2.0",
37
- "@commercetools-uikit/utils": "12.2.0",
29
+ "@babel/runtime": "7.16.3",
30
+ "@babel/runtime-corejs3": "7.16.3",
31
+ "@commercetools-uikit/constraints": "12.2.5",
32
+ "@commercetools-uikit/design-system": "12.2.5",
33
+ "@commercetools-uikit/icons": "12.2.5",
34
+ "@commercetools-uikit/label": "12.2.5",
35
+ "@commercetools-uikit/number-input": "12.2.5",
36
+ "@commercetools-uikit/secondary-icon-button": "12.2.5",
37
+ "@commercetools-uikit/select-input": "12.2.5",
38
+ "@commercetools-uikit/spacings": "12.2.5",
39
+ "@commercetools-uikit/text": "12.2.5",
40
+ "@commercetools-uikit/utils": "12.2.5",
38
41
  "@emotion/react": "^11.4.0",
39
42
  "@emotion/styled": "^11.3.0",
40
43
  "formik": "^2.2.9",
@@ -43,7 +46,7 @@
43
46
  },
44
47
  "devDependencies": {
45
48
  "react": "17.0.2",
46
- "react-intl": "5.20.4"
49
+ "react-intl": "5.21.2"
47
50
  },
48
51
  "peerDependencies": {
49
52
  "react": "17.x",