@commercetools-uikit/pagination 12.2.2 → 12.2.6

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 +117 -108
  3. package/dist/commercetools-uikit-pagination.cjs.prod.js +102 -94
  4. package/dist/commercetools-uikit-pagination.esm.js +95 -85
  5. package/package.json +14 -18
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);
@@ -97,16 +97,16 @@ var messages$2 = reactIntl.defineMessages({
97
97
  }
98
98
  });
99
99
 
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; }
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$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; }
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,62 +137,66 @@ 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$2.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$2.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$1(_objectSpread$1({}, messages$2.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$2.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
  } : {};
197
201
  var PageNavigator$1 = PageNavigator;
198
202
 
@@ -205,9 +209,9 @@ var messages = reactIntl.defineMessages({
205
209
  });
206
210
  var messages$1 = messages;
207
211
 
208
- 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; }
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; }
209
213
 
210
- 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; }
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; }
211
215
 
212
216
  var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
213
217
  switch (perPageRange) {
@@ -228,50 +232,52 @@ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
228
232
  var PageSizeSelector = function PageSizeSelector(props) {
229
233
  var _context;
230
234
 
231
- var _React$useState = React__default['default'].useState(uniqueId__default['default']('per-page-selector-')),
232
- _React$useState2 = _slicedToArray(_React$useState, 1),
233
- perPageSelectorId = _React$useState2[0];
235
+ var _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
236
+ _useState2 = _slicedToArray(_useState, 1),
237
+ perPageSelectorId = _useState2[0];
234
238
 
235
239
  var options = mapRangeToListOfOptions(props.perPageRange);
236
240
 
237
- var hasValidPerPageOption = _includesInstanceProperty__default['default'](options).call(options, props.perPage);
241
+ var hasValidPerPageOption = _includesInstanceProperty__default["default"](options).call(options, props.perPage);
238
242
 
239
- 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;
240
244
  var onPerPageChange = props.onPerPageChange;
241
- var handleSelectPerPage = React__default['default'].useCallback(function (event) {
245
+ var handleSelectPerPage = react.useCallback(function (event) {
242
246
  onPerPageChange(Number(event.target.value));
243
247
  }, [onPerPageChange]);
244
- return react.jsx(Spacings__default['default'].Inline, {
245
- alignItems: "center"
246
- }, react.jsx(Constraints__default['default'].Horizontal, {
247
- max: 2
248
- }, react.jsx(SelectInput__default['default'], {
249
- id: perPageSelectorId,
250
- name: "per-page-selector",
251
- value: props.perPage.toString(),
252
- options: _mapInstanceProperty__default['default'](options).call(options, function (option) {
253
- return {
254
- value: option.toString(),
255
- label: option.toString()
256
- };
257
- }),
258
- onChange: handleSelectPerPage
259
- })), react.jsx(Label__default['default'], {
260
- htmlFor: perPageSelectorId,
261
- intlMessage: _objectSpread(_objectSpread({}, messages$1.pageSize), {}, {
262
- values: {
263
- count: props.pageItems
264
- }
265
- })
266
- }));
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
+ });
267
273
  };
268
274
 
269
275
  PageSizeSelector.displayName = 'PageSizeSelector';
270
276
  PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
271
- perPage: PropTypes__default['default'].number,
272
- perPageRange: PropTypes__default['default'].oneOf(['s', 'm', 'l']),
273
- onPerPageChange: PropTypes__default['default'].func.isRequired,
274
- 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
275
281
  } : {};
276
282
  PageSizeSelector.defaultProps = {
277
283
  perPage: 20,
@@ -287,26 +293,29 @@ var _ref = process.env.NODE_ENV === "production" ? {
287
293
  } : {
288
294
  name: "mvvfm1-Pagination",
289
295
  styles: "flex-grow:2;label:Pagination;",
296
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJnQiIsImZpbGUiOiJwYWdpbmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQgUGFnZU5hdmlnYXRvciBmcm9tICcuL3BhZ2UtbmF2aWdhdG9yJztcbmltcG9ydCBQYWdlU2l6ZVNlbGVjdG9yIGZyb20gJy4vcGFnZS1zaXplLXNlbGVjdG9yJztcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblBhZ2luYXRpb24uZGlzcGxheU5hbWUgPSAnUGFnaW5hdGlvbic7XG5QYWdpbmF0aW9uLnByb3BUeXBlcyA9IHtcbiAgLyoqXG4gICAqIFRvdGFsIG51bWJlciBvZiBpdGVtcyBhY3Jvc3MgYWxsIHBhZ2VzXG4gICAqL1xuICB0b3RhbEl0ZW1zOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHBlciBwYWdlLCBhY2NvcmRpbmcgdG8gdGhlIHByZS1kZWZpbmVkIHJhbmdlIHZhbHVlcy5cbiAgICovXG4gIHBlclBhZ2U6IFByb3BUeXBlcy5udW1iZXIsXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogUHJvcFR5cGVzLm9uZU9mKFsncycsICdtJywgJ2wnXSksXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiBgcGVyUGFnZWAgaXMgY2hhbmdlZC5cbiAgICogPGJyLz5cbiAgICogU2lnbmF0dXJlOiBgKG5leHRQZXJQYWdlOiBudW1iZXIpID0+IHZvaWRgXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSB7XG4gIHBlclBhZ2U6IDIwLFxuICBwZXJQYWdlUmFuZ2U6ICdzJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
290
297
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
291
298
  };
292
299
 
293
300
  var Pagination = function Pagination(props) {
294
301
  var totalPages = Math.ceil(props.totalItems / props.perPage);
295
302
  var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
296
- return react.jsx(Spacings__default['default'].Inline, {
297
- justifyContent: "space-between"
298
- }, react.jsx("div", {
299
- css: _ref
300
- }, react.jsx(PageSizeSelector$1, {
301
- pageItems: pageItems,
302
- perPage: props.perPage,
303
- perPageRange: props.perPageRange,
304
- onPerPageChange: props.onPerPageChange
305
- })), react.jsx(PageNavigator$1, {
306
- totalPages: totalPages,
307
- page: props.page,
308
- onPageChange: props.onPageChange
309
- }));
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
+ });
310
319
  };
311
320
 
312
321
  Pagination.displayName = 'Pagination';
@@ -314,12 +323,12 @@ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
314
323
  /**
315
324
  * Total number of items across all pages
316
325
  */
317
- totalItems: PropTypes__default['default'].number.isRequired,
326
+ totalItems: PropTypes__default["default"].number.isRequired,
318
327
 
319
328
  /**
320
329
  * The current page
321
330
  */
322
- page: PropTypes__default['default'].number.isRequired,
331
+ page: PropTypes__default["default"].number.isRequired,
323
332
 
324
333
  /**
325
334
  * A callback function, called when the page is changed.
@@ -328,12 +337,12 @@ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
328
337
  * <br/>
329
338
  * Signature: `(page: number) => void`
330
339
  */
331
- onPageChange: PropTypes__default['default'].func.isRequired,
340
+ onPageChange: PropTypes__default["default"].func.isRequired,
332
341
 
333
342
  /**
334
343
  * Number of items per page, according to the pre-defined range values.
335
344
  */
336
- perPage: PropTypes__default['default'].number,
345
+ perPage: PropTypes__default["default"].number,
337
346
 
338
347
  /**
339
348
  * Range of items per page.
@@ -344,14 +353,14 @@ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
344
353
  * <br/>
345
354
  * `l: 200,500`
346
355
  */
347
- perPageRange: PropTypes__default['default'].oneOf(['s', 'm', 'l']),
356
+ perPageRange: PropTypes__default["default"].oneOf(['s', 'm', 'l']),
348
357
 
349
358
  /**
350
359
  * A callback function, called when `perPage` is changed.
351
360
  * <br/>
352
361
  * Signature: `(nextPerPage: number) => void`
353
362
  */
354
- onPerPageChange: PropTypes__default['default'].func.isRequired
363
+ onPerPageChange: PropTypes__default["default"].func.isRequired
355
364
  } : {};
356
365
  Pagination.defaultProps = {
357
366
  perPage: 20,
@@ -359,8 +368,8 @@ Pagination.defaultProps = {
359
368
  };
360
369
  var Pagination$1 = Pagination;
361
370
 
362
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
363
- var version = '12.2.2';
371
+ // NOTE: This string will be replaced on build time with the package version.
372
+ var version = "12.2.6";
364
373
 
365
374
  exports.PageNavigator = PageNavigator$1;
366
375
  exports.PageSizeSelector = PageSizeSelector$1;
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);
@@ -95,16 +95,16 @@ var messages$2 = reactIntl.defineMessages({
95
95
  }
96
96
  });
97
97
 
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; }
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$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; }
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,55 +135,59 @@ 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$2.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$2.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$1(_objectSpread$1({}, messages$2.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$2.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';
@@ -199,9 +203,9 @@ var messages = reactIntl.defineMessages({
199
203
  });
200
204
  var messages$1 = messages;
201
205
 
202
- 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; }
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; }
203
207
 
204
- 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; }
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; }
205
209
 
206
210
  var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
207
211
  switch (perPageRange) {
@@ -221,40 +225,42 @@ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
221
225
 
222
226
  var PageSizeSelector = function PageSizeSelector(props) {
223
227
 
224
- var _React$useState = React__default['default'].useState(uniqueId__default['default']('per-page-selector-')),
225
- _React$useState2 = _slicedToArray(_React$useState, 1),
226
- perPageSelectorId = _React$useState2[0];
228
+ var _useState = react.useState(uniqueId__default["default"]('per-page-selector-')),
229
+ _useState2 = _slicedToArray(_useState, 1),
230
+ perPageSelectorId = _useState2[0];
227
231
 
228
232
  var options = mapRangeToListOfOptions(props.perPageRange);
229
233
 
230
- _includesInstanceProperty__default['default'](options).call(options, props.perPage);
234
+ _includesInstanceProperty__default["default"](options).call(options, props.perPage);
231
235
  var onPerPageChange = props.onPerPageChange;
232
- var handleSelectPerPage = React__default['default'].useCallback(function (event) {
236
+ var handleSelectPerPage = react.useCallback(function (event) {
233
237
  onPerPageChange(Number(event.target.value));
234
238
  }, [onPerPageChange]);
235
- return react.jsx(Spacings__default['default'].Inline, {
236
- alignItems: "center"
237
- }, react.jsx(Constraints__default['default'].Horizontal, {
238
- max: 2
239
- }, react.jsx(SelectInput__default['default'], {
240
- id: perPageSelectorId,
241
- name: "per-page-selector",
242
- value: props.perPage.toString(),
243
- options: _mapInstanceProperty__default['default'](options).call(options, function (option) {
244
- return {
245
- value: option.toString(),
246
- label: option.toString()
247
- };
248
- }),
249
- onChange: handleSelectPerPage
250
- })), react.jsx(Label__default['default'], {
251
- htmlFor: perPageSelectorId,
252
- intlMessage: _objectSpread(_objectSpread({}, messages$1.pageSize), {}, {
253
- values: {
254
- count: props.pageItems
255
- }
256
- })
257
- }));
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
+ });
258
264
  };
259
265
 
260
266
  PageSizeSelector.displayName = 'PageSizeSelector';
@@ -273,20 +279,22 @@ var _ref = {
273
279
  var Pagination = function Pagination(props) {
274
280
  var totalPages = Math.ceil(props.totalItems / props.perPage);
275
281
  var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
276
- return react.jsx(Spacings__default['default'].Inline, {
277
- justifyContent: "space-between"
278
- }, react.jsx("div", {
279
- css: _ref
280
- }, react.jsx(PageSizeSelector$1, {
281
- pageItems: pageItems,
282
- perPage: props.perPage,
283
- perPageRange: props.perPageRange,
284
- onPerPageChange: props.onPerPageChange
285
- })), react.jsx(PageNavigator$1, {
286
- totalPages: totalPages,
287
- page: props.page,
288
- onPageChange: props.onPageChange
289
- }));
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
+ });
290
298
  };
291
299
 
292
300
  Pagination.displayName = 'Pagination';
@@ -297,8 +305,8 @@ Pagination.defaultProps = {
297
305
  };
298
306
  var Pagination$1 = Pagination;
299
307
 
300
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
301
- var version = '12.2.2';
308
+ // NOTE: This string will be replaced on build time with the package version.
309
+ var version = "12.2.6";
302
310
 
303
311
  exports.PageNavigator = PageNavigator$1;
304
312
  exports.PageSizeSelector = PageSizeSelector$1;
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';
@@ -75,9 +76,9 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
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$2.previousPageLabel),
130
- onClick: handlePrevPageChange,
131
- isDisabled: isPreviousDisabled || isDisabled,
132
- icon: jsx(AngleLeftIcon, null)
133
- }), jsx(Label, {
134
- htmlFor: pageNumberInputId,
135
- intlMessage: messages$2.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$1(_objectSpread$1({}, messages$2.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$2.nextPageLabel),
156
- onClick: handleNextPageChange,
157
- isDisabled: isNextDisabled || isDisabled,
158
- icon: jsx(AngleRightIcon, null)
159
- })));
164
+ });
160
165
  };
161
166
 
162
167
  PageNavigator.displayName = 'PageNavigator';
@@ -199,9 +204,9 @@ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
199
204
  var PageSizeSelector = function PageSizeSelector(props) {
200
205
  var _context;
201
206
 
202
- var _React$useState = React.useState(uniqueId('per-page-selector-')),
203
- _React$useState2 = _slicedToArray(_React$useState, 1),
204
- perPageSelectorId = _React$useState2[0];
207
+ var _useState = useState(uniqueId('per-page-selector-')),
208
+ _useState2 = _slicedToArray(_useState, 1),
209
+ perPageSelectorId = _useState2[0];
205
210
 
206
211
  var options = mapRangeToListOfOptions(props.perPageRange);
207
212
 
@@ -209,32 +214,34 @@ var PageSizeSelector = function PageSizeSelector(props) {
209
214
 
210
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;
211
216
  var onPerPageChange = props.onPerPageChange;
212
- var handleSelectPerPage = React.useCallback(function (event) {
217
+ var handleSelectPerPage = useCallback(function (event) {
213
218
  onPerPageChange(Number(event.target.value));
214
219
  }, [onPerPageChange]);
215
- return jsx(Spacings.Inline, {
216
- alignItems: "center"
217
- }, jsx(Constraints.Horizontal, {
218
- max: 2
219
- }, jsx(SelectInput, {
220
- id: perPageSelectorId,
221
- name: "per-page-selector",
222
- value: props.perPage.toString(),
223
- options: _mapInstanceProperty(options).call(options, function (option) {
224
- return {
225
- value: option.toString(),
226
- label: option.toString()
227
- };
228
- }),
229
- onChange: handleSelectPerPage
230
- })), jsx(Label, {
231
- htmlFor: perPageSelectorId,
232
- intlMessage: _objectSpread(_objectSpread({}, messages$1.pageSize), {}, {
233
- values: {
234
- count: props.pageItems
235
- }
236
- })
237
- }));
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
+ });
238
245
  };
239
246
 
240
247
  PageSizeSelector.displayName = 'PageSizeSelector';
@@ -258,26 +265,29 @@ var _ref = process.env.NODE_ENV === "production" ? {
258
265
  } : {
259
266
  name: "mvvfm1-Pagination",
260
267
  styles: "flex-grow:2;label:Pagination;",
268
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJnQiIsImZpbGUiOiJwYWdpbmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQgUGFnZU5hdmlnYXRvciBmcm9tICcuL3BhZ2UtbmF2aWdhdG9yJztcbmltcG9ydCBQYWdlU2l6ZVNlbGVjdG9yIGZyb20gJy4vcGFnZS1zaXplLXNlbGVjdG9yJztcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblBhZ2luYXRpb24uZGlzcGxheU5hbWUgPSAnUGFnaW5hdGlvbic7XG5QYWdpbmF0aW9uLnByb3BUeXBlcyA9IHtcbiAgLyoqXG4gICAqIFRvdGFsIG51bWJlciBvZiBpdGVtcyBhY3Jvc3MgYWxsIHBhZ2VzXG4gICAqL1xuICB0b3RhbEl0ZW1zOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHBlciBwYWdlLCBhY2NvcmRpbmcgdG8gdGhlIHByZS1kZWZpbmVkIHJhbmdlIHZhbHVlcy5cbiAgICovXG4gIHBlclBhZ2U6IFByb3BUeXBlcy5udW1iZXIsXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogUHJvcFR5cGVzLm9uZU9mKFsncycsICdtJywgJ2wnXSksXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiBgcGVyUGFnZWAgaXMgY2hhbmdlZC5cbiAgICogPGJyLz5cbiAgICogU2lnbmF0dXJlOiBgKG5leHRQZXJQYWdlOiBudW1iZXIpID0+IHZvaWRgXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSB7XG4gIHBlclBhZ2U6IDIwLFxuICBwZXJQYWdlUmFuZ2U6ICdzJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
261
269
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
262
270
  };
263
271
 
264
272
  var Pagination = function Pagination(props) {
265
273
  var totalPages = Math.ceil(props.totalItems / props.perPage);
266
274
  var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
267
- return jsx(Spacings.Inline, {
268
- justifyContent: "space-between"
269
- }, jsx("div", {
270
- css: _ref
271
- }, jsx(PageSizeSelector$1, {
272
- pageItems: pageItems,
273
- perPage: props.perPage,
274
- perPageRange: props.perPageRange,
275
- onPerPageChange: props.onPerPageChange
276
- })), jsx(PageNavigator$1, {
277
- totalPages: totalPages,
278
- page: props.page,
279
- onPageChange: props.onPageChange
280
- }));
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
+ });
281
291
  };
282
292
 
283
293
  Pagination.displayName = 'Pagination';
@@ -330,7 +340,7 @@ Pagination.defaultProps = {
330
340
  };
331
341
  var Pagination$1 = Pagination;
332
342
 
333
- // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
334
- var version = '12.2.2';
343
+ // NOTE: This string will be replaced on build time with the package version.
344
+ var version = "12.2.6";
335
345
 
336
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.2",
4
+ "version": "12.2.6",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -11,7 +11,6 @@
11
11
  "homepage": "https://uikit.commercetools.com",
12
12
  "keywords": ["javascript", "design system", "react", "uikit"],
13
13
  "license": "MIT",
14
- "private": false,
15
14
  "publishConfig": {
16
15
  "access": "public"
17
16
  },
@@ -19,22 +18,19 @@
19
18
  "main": "dist/commercetools-uikit-pagination.cjs.js",
20
19
  "module": "dist/commercetools-uikit-pagination.esm.js",
21
20
  "files": ["dist"],
22
- "scripts": {
23
- "prepare": "../../../scripts/version.js replace"
24
- },
25
21
  "dependencies": {
26
- "@babel/runtime": "7.14.8",
27
- "@babel/runtime-corejs3": "7.14.8",
28
- "@commercetools-uikit/constraints": "12.2.2",
29
- "@commercetools-uikit/design-system": "12.2.2",
30
- "@commercetools-uikit/icons": "12.2.2",
31
- "@commercetools-uikit/label": "12.2.2",
32
- "@commercetools-uikit/number-input": "12.2.2",
33
- "@commercetools-uikit/secondary-icon-button": "12.2.2",
34
- "@commercetools-uikit/select-input": "12.2.2",
35
- "@commercetools-uikit/spacings": "12.2.2",
36
- "@commercetools-uikit/text": "12.2.2",
37
- "@commercetools-uikit/utils": "12.2.0",
22
+ "@babel/runtime": "7.16.3",
23
+ "@babel/runtime-corejs3": "7.16.3",
24
+ "@commercetools-uikit/constraints": "12.2.5",
25
+ "@commercetools-uikit/design-system": "12.2.5",
26
+ "@commercetools-uikit/icons": "12.2.6",
27
+ "@commercetools-uikit/label": "12.2.5",
28
+ "@commercetools-uikit/number-input": "12.2.6",
29
+ "@commercetools-uikit/secondary-icon-button": "12.2.5",
30
+ "@commercetools-uikit/select-input": "12.2.6",
31
+ "@commercetools-uikit/spacings": "12.2.5",
32
+ "@commercetools-uikit/text": "12.2.5",
33
+ "@commercetools-uikit/utils": "12.2.5",
38
34
  "@emotion/react": "^11.4.0",
39
35
  "@emotion/styled": "^11.3.0",
40
36
  "formik": "^2.2.9",
@@ -43,7 +39,7 @@
43
39
  },
44
40
  "devDependencies": {
45
41
  "react": "17.0.2",
46
- "react-intl": "5.20.6"
42
+ "react-intl": "5.21.2"
47
43
  },
48
44
  "peerDependencies": {
49
45
  "react": "17.x",