@commercetools-uikit/pagination 0.0.0-canary-2021830134526

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 (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +59 -0
  3. package/dist/commercetools-uikit-pagination.cjs.dev.js +377 -0
  4. package/dist/commercetools-uikit-pagination.cjs.js +7 -0
  5. package/dist/commercetools-uikit-pagination.cjs.prod.js +314 -0
  6. package/dist/commercetools-uikit-pagination.esm.js +346 -0
  7. package/package.json +59 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 commercetools GmbH
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,59 @@
1
+ <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
2
+ <!-- This file is created by the `yarn generate-readme` script. -->
3
+
4
+ # Pagination
5
+
6
+ ## Description
7
+
8
+ Components for navigating through pages of items
9
+
10
+ ## Installation
11
+
12
+ ```
13
+ yarn add @commercetools-uikit/pagination
14
+ ```
15
+
16
+ ```
17
+ npm --save install @commercetools-uikit/pagination
18
+ ```
19
+
20
+ Additionally install the peer dependencies (if not present)
21
+
22
+ ```
23
+ yarn add react react-intl
24
+ ```
25
+
26
+ ```
27
+ npm --save install react react-intl
28
+ ```
29
+
30
+ ## Usage
31
+
32
+ ```jsx
33
+ import { Pagination } from '@commercetools-uikit/pagination';
34
+
35
+ const Example = () => {
36
+ const items = [{ id: '1' }, { id: '2' }];
37
+ return (
38
+ <Pagination
39
+ totalItems={items.length}
40
+ page={1}
41
+ onPageChange={() => {}}
42
+ onPerPageChange={() => {}}
43
+ />
44
+ );
45
+ };
46
+
47
+ export default Example;
48
+ ```
49
+
50
+ ## Properties
51
+
52
+ | Props | Type | Required | Default | Description |
53
+ | ----------------- | ----------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
54
+ | `totalItems` | `number` | ✅ | | Total number of items across all pages |
55
+ | `page` | `number` | ✅ | | The current page |
56
+ | `onPageChange` | `func` | ✅ | | A callback function, called when the page is changed.&#xA;<br/>&#xA;Signature: `(page: number) => void`&#xA;<br/>&#xA;Signature: `(page: number) => void` |
57
+ | `perPage` | `number` | | `20` | Number of items per page, according to the pre-defined range values. |
58
+ | `perPageRange` | `enum`<br/>Possible values:<br/>`'s', 'm', 'l'` | | `'s'` | Range of items per page.&#xA;<br/>&#xA;`s: 20,50`&#xA;<br/>&#xA;`m: 20,50,100`&#xA;<br/>&#xA;`l: 200,500` |
59
+ | `onPerPageChange` | `func` | ✅ | | A callback function, called when `perPage` is changed.&#xA;<br/>&#xA;Signature: `(nextPerPage: number) => void` |
package/dist/commercetools-uikit-pagination.cjs.dev.js ADDED
@@ -0,0 +1,377 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var PropTypes = require('prop-types');
6
+ require('@emotion/react');
7
+ var Spacings = require('@commercetools-uikit/spacings');
8
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
9
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
10
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
11
+ var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
12
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
13
+ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
14
+ var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
15
+ var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
16
+ var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
17
+ var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
18
+ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
19
+ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
20
+ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
21
+ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
22
+ var react = require('react');
23
+ var uniqueId = require('lodash/uniqueId');
24
+ var SelectInput = require('@commercetools-uikit/select-input');
25
+ var Constraints = require('@commercetools-uikit/constraints');
26
+ var utils = require('@commercetools-uikit/utils');
27
+ var Label = require('@commercetools-uikit/label');
28
+ var reactIntl = require('react-intl');
29
+ var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
30
+ var formik = require('formik');
31
+ var icons = require('@commercetools-uikit/icons');
32
+ var NumberInput = require('@commercetools-uikit/number-input');
33
+ var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
34
+ var Text = require('@commercetools-uikit/text');
35
+
36
+ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
37
+
38
+ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
39
+ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
40
+ var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
41
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
42
+ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
43
+ var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
44
+ var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
45
+ var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
46
+ var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
47
+ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
48
+ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
49
+ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
50
+ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
51
+ var uniqueId__default = /*#__PURE__*/_interopDefault(uniqueId);
52
+ var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
53
+ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
54
+ var Label__default = /*#__PURE__*/_interopDefault(Label);
55
+ var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
56
+ var NumberInput__default = /*#__PURE__*/_interopDefault(NumberInput);
57
+ var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
58
+ var Text__default = /*#__PURE__*/_interopDefault(Text);
59
+
60
+ var isValid = function isValid(page, totalPages) {
61
+ if (page > totalPages) return false;
62
+ if (page <= 0) return false;
63
+ return true;
64
+ };
65
+ var normalizePageValue = function normalizePageValue(value, totalPages) {
66
+ if (value < 1) {
67
+ return 1;
68
+ }
69
+
70
+ if (value > totalPages) {
71
+ return totalPages;
72
+ }
73
+
74
+ return value;
75
+ };
76
+
77
+ var messages$2 = reactIntl.defineMessages({
78
+ page: {
79
+ id: 'UIKit.Pagination.PageNavigator.page',
80
+ description: 'Label for page',
81
+ defaultMessage: 'Page'
82
+ },
83
+ pageCount: {
84
+ id: 'UIKit.Pagination.PageNavigator.pageCount',
85
+ description: 'Label for total pages',
86
+ defaultMessage: 'of {count}'
87
+ },
88
+ previousPageLabel: {
89
+ id: 'UIKit.Pagination.PageNavigator.previousPageLabel',
90
+ description: 'Label for previous page button',
91
+ defaultMessage: 'Previous page'
92
+ },
93
+ nextPageLabel: {
94
+ id: 'UIKit.Pagination.PageNavigator.nextPageLabel',
95
+ description: 'Label for next page button',
96
+ defaultMessage: 'Next page'
97
+ }
98
+ });
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; }
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; }
103
+
104
+ var PageNavigator = function PageNavigator(props) {
105
+ var intl = reactIntl.useIntl();
106
+
107
+ var _useState = react.useState(uniqueId__default['default']('page-number-')),
108
+ _useState2 = _slicedToArray(_useState, 1),
109
+ pageNumberInputId = _useState2[0];
110
+
111
+ var paginationForm = formik.useFormik({
112
+ initialValues: {
113
+ page: props.page
114
+ },
115
+ enableReinitialize: true,
116
+ validateOnBlur: true,
117
+ validateOnChange: true,
118
+ validateOnMount: true,
119
+ onSubmit: function onSubmit(values
120
+ /**, helpers */
121
+ ) {
122
+ var nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
123
+ props.onPageChange(nextNormalizedValue);
124
+ },
125
+ validate: function validate(values) {
126
+ if (!isValid(values.page, props.totalPages)) {
127
+ return {
128
+ page: true
129
+ };
130
+ }
131
+
132
+ return {};
133
+ }
134
+ });
135
+ var page = props.page,
136
+ totalPages = props.totalPages;
137
+ var isDisabled = totalPages === 0;
138
+ var isPreviousDisabled = page <= 1;
139
+ var isNextDisabled = page >= totalPages;
140
+ var handlePrevPageChange = react.useCallback(function () {
141
+ var previousPage = _valuesInstanceProperty__default['default'](paginationForm).page - 1;
142
+ if (previousPage < 1) return;
143
+ paginationForm.setFieldValue('page', previousPage, true);
144
+ paginationForm.submitForm();
145
+ }, [paginationForm]);
146
+ var handleNextPageChange = react.useCallback(function () {
147
+ var nextPage = _valuesInstanceProperty__default['default'](paginationForm).page + 1;
148
+ if (nextPage > totalPages) return null;
149
+ paginationForm.setFieldValue('page', nextPage, true);
150
+ paginationForm.submitForm();
151
+ }, [paginationForm, totalPages]);
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
+ })]
191
+ })
192
+ });
193
+ };
194
+
195
+ PageNavigator.displayName = 'PageNavigator';
196
+ PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
197
+ totalPages: PropTypes__default['default'].number.isRequired,
198
+ page: PropTypes__default['default'].number.isRequired,
199
+ onPageChange: PropTypes__default['default'].func.isRequired
200
+ } : {};
201
+ var PageNavigator$1 = PageNavigator;
202
+
203
+ var messages = reactIntl.defineMessages({
204
+ pageSize: {
205
+ id: 'UIKit.Pagination.PageSizeSelector.pageSize',
206
+ description: 'How many items are per page',
207
+ defaultMessage: 'Items per page ({count} items)'
208
+ }
209
+ });
210
+ var messages$1 = messages;
211
+
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; }
213
+
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; }
215
+
216
+ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
217
+ switch (perPageRange) {
218
+ case 's':
219
+ return [20, 50];
220
+
221
+ case 'm':
222
+ return [20, 50, 100];
223
+
224
+ case 'l':
225
+ return [200, 500];
226
+
227
+ default:
228
+ throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
229
+ }
230
+ };
231
+
232
+ var PageSizeSelector = function PageSizeSelector(props) {
233
+ var _context;
234
+
235
+ var _useState = react.useState(uniqueId__default['default']('per-page-selector-')),
236
+ _useState2 = _slicedToArray(_useState, 1),
237
+ perPageSelectorId = _useState2[0];
238
+
239
+ var options = mapRangeToListOfOptions(props.perPageRange);
240
+
241
+ var hasValidPerPageOption = _includesInstanceProperty__default['default'](options).call(options, props.perPage);
242
+
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;
244
+ var onPerPageChange = props.onPerPageChange;
245
+ var handleSelectPerPage = react.useCallback(function (event) {
246
+ onPerPageChange(Number(event.target.value));
247
+ }, [onPerPageChange]);
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
+ });
273
+ };
274
+
275
+ PageSizeSelector.displayName = 'PageSizeSelector';
276
+ PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
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
281
+ } : {};
282
+ PageSizeSelector.defaultProps = {
283
+ perPage: 20,
284
+ perPageRange: 's'
285
+ };
286
+ var PageSizeSelector$1 = PageSizeSelector;
287
+
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)."; }
289
+
290
+ var _ref = process.env.NODE_ENV === "production" ? {
291
+ name: "15sp3y3",
292
+ styles: "flex-grow:2"
293
+ } : {
294
+ name: "mvvfm1-Pagination",
295
+ styles: "flex-grow:2;label:Pagination;",
296
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJnQiIsImZpbGUiOiJwYWdpbmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQgUGFnZU5hdmlnYXRvciBmcm9tICcuL3BhZ2UtbmF2aWdhdG9yJztcbmltcG9ydCBQYWdlU2l6ZVNlbGVjdG9yIGZyb20gJy4vcGFnZS1zaXplLXNlbGVjdG9yJztcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblBhZ2luYXRpb24uZGlzcGxheU5hbWUgPSAnUGFnaW5hdGlvbic7XG5QYWdpbmF0aW9uLnByb3BUeXBlcyA9IHtcbiAgLyoqXG4gICAqIFRvdGFsIG51bWJlciBvZiBpdGVtcyBhY3Jvc3MgYWxsIHBhZ2VzXG4gICAqL1xuICB0b3RhbEl0ZW1zOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHBlciBwYWdlLCBhY2NvcmRpbmcgdG8gdGhlIHByZS1kZWZpbmVkIHJhbmdlIHZhbHVlcy5cbiAgICovXG4gIHBlclBhZ2U6IFByb3BUeXBlcy5udW1iZXIsXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogUHJvcFR5cGVzLm9uZU9mKFsncycsICdtJywgJ2wnXSksXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiBgcGVyUGFnZWAgaXMgY2hhbmdlZC5cbiAgICogPGJyLz5cbiAgICogU2lnbmF0dXJlOiBgKG5leHRQZXJQYWdlOiBudW1iZXIpID0+IHZvaWRgXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSB7XG4gIHBlclBhZ2U6IDIwLFxuICBwZXJQYWdlUmFuZ2U6ICdzJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
297
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
298
+ };
299
+
300
+ var Pagination = function Pagination(props) {
301
+ var totalPages = Math.ceil(props.totalItems / props.perPage);
302
+ var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
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
+ });
319
+ };
320
+
321
+ Pagination.displayName = 'Pagination';
322
+ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
323
+ /**
324
+ * Total number of items across all pages
325
+ */
326
+ totalItems: PropTypes__default['default'].number.isRequired,
327
+
328
+ /**
329
+ * The current page
330
+ */
331
+ page: PropTypes__default['default'].number.isRequired,
332
+
333
+ /**
334
+ * A callback function, called when the page is changed.
335
+ * <br/>
336
+ * Signature: `(page: number) => void`
337
+ * <br/>
338
+ * Signature: `(page: number) => void`
339
+ */
340
+ onPageChange: PropTypes__default['default'].func.isRequired,
341
+
342
+ /**
343
+ * Number of items per page, according to the pre-defined range values.
344
+ */
345
+ perPage: PropTypes__default['default'].number,
346
+
347
+ /**
348
+ * Range of items per page.
349
+ * <br/>
350
+ * `s: 20,50`
351
+ * <br/>
352
+ * `m: 20,50,100`
353
+ * <br/>
354
+ * `l: 200,500`
355
+ */
356
+ perPageRange: PropTypes__default['default'].oneOf(['s', 'm', 'l']),
357
+
358
+ /**
359
+ * A callback function, called when `perPage` is changed.
360
+ * <br/>
361
+ * Signature: `(nextPerPage: number) => void`
362
+ */
363
+ onPerPageChange: PropTypes__default['default'].func.isRequired
364
+ } : {};
365
+ Pagination.defaultProps = {
366
+ perPage: 20,
367
+ perPageRange: 's'
368
+ };
369
+ var Pagination$1 = Pagination;
370
+
371
+ // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
372
+ var version = '0.0.0-canary-2021830134526';
373
+
374
+ exports.PageNavigator = PageNavigator$1;
375
+ exports.PageSizeSelector = PageSizeSelector$1;
376
+ exports.Pagination = Pagination$1;
377
+ exports.version = version;
package/dist/commercetools-uikit-pagination.cjs.js ADDED
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ if (process.env.NODE_ENV === "production") {
4
+ module.exports = require("./commercetools-uikit-pagination.cjs.prod.js");
5
+ } else {
6
+ module.exports = require("./commercetools-uikit-pagination.cjs.dev.js");
7
+ }
package/dist/commercetools-uikit-pagination.cjs.prod.js ADDED
@@ -0,0 +1,314 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('prop-types');
6
+ require('@emotion/react');
7
+ var Spacings = require('@commercetools-uikit/spacings');
8
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
9
+ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
10
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
11
+ var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
12
+ require('@babel/runtime-corejs3/core-js-stable/instance/concat');
13
+ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
14
+ var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
15
+ var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
16
+ var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
17
+ var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
18
+ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
19
+ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
20
+ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
21
+ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
22
+ var react = require('react');
23
+ var uniqueId = require('lodash/uniqueId');
24
+ var SelectInput = require('@commercetools-uikit/select-input');
25
+ var Constraints = require('@commercetools-uikit/constraints');
26
+ require('@commercetools-uikit/utils');
27
+ var Label = require('@commercetools-uikit/label');
28
+ var reactIntl = require('react-intl');
29
+ var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
30
+ var formik = require('formik');
31
+ var icons = require('@commercetools-uikit/icons');
32
+ var NumberInput = require('@commercetools-uikit/number-input');
33
+ var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
34
+ var Text = require('@commercetools-uikit/text');
35
+
36
+ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
37
+
38
+ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
39
+ var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
40
+ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
41
+ var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
42
+ var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
43
+ var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
44
+ var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
45
+ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
46
+ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
47
+ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
48
+ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
49
+ var uniqueId__default = /*#__PURE__*/_interopDefault(uniqueId);
50
+ var SelectInput__default = /*#__PURE__*/_interopDefault(SelectInput);
51
+ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
52
+ var Label__default = /*#__PURE__*/_interopDefault(Label);
53
+ var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
54
+ var NumberInput__default = /*#__PURE__*/_interopDefault(NumberInput);
55
+ var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
56
+ var Text__default = /*#__PURE__*/_interopDefault(Text);
57
+
58
+ var isValid = function isValid(page, totalPages) {
59
+ if (page > totalPages) return false;
60
+ if (page <= 0) return false;
61
+ return true;
62
+ };
63
+ var normalizePageValue = function normalizePageValue(value, totalPages) {
64
+ if (value < 1) {
65
+ return 1;
66
+ }
67
+
68
+ if (value > totalPages) {
69
+ return totalPages;
70
+ }
71
+
72
+ return value;
73
+ };
74
+
75
+ var messages$2 = reactIntl.defineMessages({
76
+ page: {
77
+ id: 'UIKit.Pagination.PageNavigator.page',
78
+ description: 'Label for page',
79
+ defaultMessage: 'Page'
80
+ },
81
+ pageCount: {
82
+ id: 'UIKit.Pagination.PageNavigator.pageCount',
83
+ description: 'Label for total pages',
84
+ defaultMessage: 'of {count}'
85
+ },
86
+ previousPageLabel: {
87
+ id: 'UIKit.Pagination.PageNavigator.previousPageLabel',
88
+ description: 'Label for previous page button',
89
+ defaultMessage: 'Previous page'
90
+ },
91
+ nextPageLabel: {
92
+ id: 'UIKit.Pagination.PageNavigator.nextPageLabel',
93
+ description: 'Label for next page button',
94
+ defaultMessage: 'Next page'
95
+ }
96
+ });
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; }
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; }
101
+
102
+ var PageNavigator = function PageNavigator(props) {
103
+ var intl = reactIntl.useIntl();
104
+
105
+ var _useState = react.useState(uniqueId__default['default']('page-number-')),
106
+ _useState2 = _slicedToArray(_useState, 1),
107
+ pageNumberInputId = _useState2[0];
108
+
109
+ var paginationForm = formik.useFormik({
110
+ initialValues: {
111
+ page: props.page
112
+ },
113
+ enableReinitialize: true,
114
+ validateOnBlur: true,
115
+ validateOnChange: true,
116
+ validateOnMount: true,
117
+ onSubmit: function onSubmit(values
118
+ /**, helpers */
119
+ ) {
120
+ var nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
121
+ props.onPageChange(nextNormalizedValue);
122
+ },
123
+ validate: function validate(values) {
124
+ if (!isValid(values.page, props.totalPages)) {
125
+ return {
126
+ page: true
127
+ };
128
+ }
129
+
130
+ return {};
131
+ }
132
+ });
133
+ var page = props.page,
134
+ totalPages = props.totalPages;
135
+ var isDisabled = totalPages === 0;
136
+ var isPreviousDisabled = page <= 1;
137
+ var isNextDisabled = page >= totalPages;
138
+ var handlePrevPageChange = react.useCallback(function () {
139
+ var previousPage = _valuesInstanceProperty__default['default'](paginationForm).page - 1;
140
+ if (previousPage < 1) return;
141
+ paginationForm.setFieldValue('page', previousPage, true);
142
+ paginationForm.submitForm();
143
+ }, [paginationForm]);
144
+ var handleNextPageChange = react.useCallback(function () {
145
+ var nextPage = _valuesInstanceProperty__default['default'](paginationForm).page + 1;
146
+ if (nextPage > totalPages) return null;
147
+ paginationForm.setFieldValue('page', nextPage, true);
148
+ paginationForm.submitForm();
149
+ }, [paginationForm, totalPages]);
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
+ })]
189
+ })
190
+ });
191
+ };
192
+
193
+ PageNavigator.displayName = 'PageNavigator';
194
+ PageNavigator.propTypes = {};
195
+ var PageNavigator$1 = PageNavigator;
196
+
197
+ var messages = reactIntl.defineMessages({
198
+ pageSize: {
199
+ id: 'UIKit.Pagination.PageSizeSelector.pageSize',
200
+ description: 'How many items are per page',
201
+ defaultMessage: 'Items per page ({count} items)'
202
+ }
203
+ });
204
+ var messages$1 = messages;
205
+
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; }
207
+
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; }
209
+
210
+ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
211
+ switch (perPageRange) {
212
+ case 's':
213
+ return [20, 50];
214
+
215
+ case 'm':
216
+ return [20, 50, 100];
217
+
218
+ case 'l':
219
+ return [200, 500];
220
+
221
+ default:
222
+ throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
223
+ }
224
+ };
225
+
226
+ var PageSizeSelector = function PageSizeSelector(props) {
227
+
228
+ var _useState = react.useState(uniqueId__default['default']('per-page-selector-')),
229
+ _useState2 = _slicedToArray(_useState, 1),
230
+ perPageSelectorId = _useState2[0];
231
+
232
+ var options = mapRangeToListOfOptions(props.perPageRange);
233
+
234
+ _includesInstanceProperty__default['default'](options).call(options, props.perPage);
235
+ var onPerPageChange = props.onPerPageChange;
236
+ var handleSelectPerPage = react.useCallback(function (event) {
237
+ onPerPageChange(Number(event.target.value));
238
+ }, [onPerPageChange]);
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
+ });
264
+ };
265
+
266
+ PageSizeSelector.displayName = 'PageSizeSelector';
267
+ PageSizeSelector.propTypes = {};
268
+ PageSizeSelector.defaultProps = {
269
+ perPage: 20,
270
+ perPageRange: 's'
271
+ };
272
+ var PageSizeSelector$1 = PageSizeSelector;
273
+
274
+ var _ref = {
275
+ name: "15sp3y3",
276
+ styles: "flex-grow:2"
277
+ } ;
278
+
279
+ var Pagination = function Pagination(props) {
280
+ var totalPages = Math.ceil(props.totalItems / props.perPage);
281
+ var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
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
+ });
298
+ };
299
+
300
+ Pagination.displayName = 'Pagination';
301
+ Pagination.propTypes = {};
302
+ Pagination.defaultProps = {
303
+ perPage: 20,
304
+ perPageRange: 's'
305
+ };
306
+ var Pagination$1 = Pagination;
307
+
308
+ // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
309
+ var version = '0.0.0-canary-2021830134526';
310
+
311
+ exports.PageNavigator = PageNavigator$1;
312
+ exports.PageSizeSelector = PageSizeSelector$1;
313
+ exports.Pagination = Pagination$1;
314
+ exports.version = version;
package/dist/commercetools-uikit-pagination.esm.js ADDED
@@ -0,0 +1,346 @@
1
+ import PropTypes from 'prop-types';
2
+ import '@emotion/react';
3
+ import Spacings from '@commercetools-uikit/spacings';
4
+ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
5
+ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
6
+ import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
7
+ import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
8
+ import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
9
+ import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
10
+ import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
11
+ import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
12
+ import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
13
+ import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
14
+ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
15
+ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
16
+ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
17
+ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
18
+ import { useState, useCallback } from 'react';
19
+ import uniqueId from 'lodash/uniqueId';
20
+ import SelectInput from '@commercetools-uikit/select-input';
21
+ import Constraints from '@commercetools-uikit/constraints';
22
+ import { warning } from '@commercetools-uikit/utils';
23
+ import Label from '@commercetools-uikit/label';
24
+ import { defineMessages, useIntl } from 'react-intl';
25
+ import _valuesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/values';
26
+ import { useFormik } from 'formik';
27
+ import { AngleLeftIcon, AngleRightIcon } from '@commercetools-uikit/icons';
28
+ import NumberInput from '@commercetools-uikit/number-input';
29
+ import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
30
+ import Text from '@commercetools-uikit/text';
31
+
32
+ var isValid = function isValid(page, totalPages) {
33
+ if (page > totalPages) return false;
34
+ if (page <= 0) return false;
35
+ return true;
36
+ };
37
+ var normalizePageValue = function normalizePageValue(value, totalPages) {
38
+ if (value < 1) {
39
+ return 1;
40
+ }
41
+
42
+ if (value > totalPages) {
43
+ return totalPages;
44
+ }
45
+
46
+ return value;
47
+ };
48
+
49
+ var messages$2 = defineMessages({
50
+ page: {
51
+ id: 'UIKit.Pagination.PageNavigator.page',
52
+ description: 'Label for page',
53
+ defaultMessage: 'Page'
54
+ },
55
+ pageCount: {
56
+ id: 'UIKit.Pagination.PageNavigator.pageCount',
57
+ description: 'Label for total pages',
58
+ defaultMessage: 'of {count}'
59
+ },
60
+ previousPageLabel: {
61
+ id: 'UIKit.Pagination.PageNavigator.previousPageLabel',
62
+ description: 'Label for previous page button',
63
+ defaultMessage: 'Previous page'
64
+ },
65
+ nextPageLabel: {
66
+ id: 'UIKit.Pagination.PageNavigator.nextPageLabel',
67
+ description: 'Label for next page button',
68
+ defaultMessage: 'Next page'
69
+ }
70
+ });
71
+
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; }
73
+
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; }
75
+
76
+ var PageNavigator = function PageNavigator(props) {
77
+ var intl = useIntl();
78
+
79
+ var _useState = useState(uniqueId('page-number-')),
80
+ _useState2 = _slicedToArray(_useState, 1),
81
+ pageNumberInputId = _useState2[0];
82
+
83
+ var paginationForm = useFormik({
84
+ initialValues: {
85
+ page: props.page
86
+ },
87
+ enableReinitialize: true,
88
+ validateOnBlur: true,
89
+ validateOnChange: true,
90
+ validateOnMount: true,
91
+ onSubmit: function onSubmit(values
92
+ /**, helpers */
93
+ ) {
94
+ var nextNormalizedValue = Number(normalizePageValue(values.page, props.totalPages));
95
+ props.onPageChange(nextNormalizedValue);
96
+ },
97
+ validate: function validate(values) {
98
+ if (!isValid(values.page, props.totalPages)) {
99
+ return {
100
+ page: true
101
+ };
102
+ }
103
+
104
+ return {};
105
+ }
106
+ });
107
+ var page = props.page,
108
+ totalPages = props.totalPages;
109
+ var isDisabled = totalPages === 0;
110
+ var isPreviousDisabled = page <= 1;
111
+ var isNextDisabled = page >= totalPages;
112
+ var handlePrevPageChange = useCallback(function () {
113
+ var previousPage = _valuesInstanceProperty(paginationForm).page - 1;
114
+ if (previousPage < 1) return;
115
+ paginationForm.setFieldValue('page', previousPage, true);
116
+ paginationForm.submitForm();
117
+ }, [paginationForm]);
118
+ var handleNextPageChange = useCallback(function () {
119
+ var nextPage = _valuesInstanceProperty(paginationForm).page + 1;
120
+ if (nextPage > totalPages) return null;
121
+ paginationForm.setFieldValue('page', nextPage, true);
122
+ paginationForm.submitForm();
123
+ }, [paginationForm, totalPages]);
124
+ return jsx("form", {
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
+ })]
163
+ })
164
+ });
165
+ };
166
+
167
+ PageNavigator.displayName = 'PageNavigator';
168
+ PageNavigator.propTypes = process.env.NODE_ENV !== "production" ? {
169
+ totalPages: PropTypes.number.isRequired,
170
+ page: PropTypes.number.isRequired,
171
+ onPageChange: PropTypes.func.isRequired
172
+ } : {};
173
+ var PageNavigator$1 = PageNavigator;
174
+
175
+ var messages = defineMessages({
176
+ pageSize: {
177
+ id: 'UIKit.Pagination.PageSizeSelector.pageSize',
178
+ description: 'How many items are per page',
179
+ defaultMessage: 'Items per page ({count} items)'
180
+ }
181
+ });
182
+ var messages$1 = messages;
183
+
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; }
185
+
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; }
187
+
188
+ var mapRangeToListOfOptions = function mapRangeToListOfOptions(perPageRange) {
189
+ switch (perPageRange) {
190
+ case 's':
191
+ return [20, 50];
192
+
193
+ case 'm':
194
+ return [20, 50, 100];
195
+
196
+ case 'l':
197
+ return [200, 500];
198
+
199
+ default:
200
+ throw new Error("Invalid page range \"".concat(perPageRange, "\", expected one of \"s,m,l\"."));
201
+ }
202
+ };
203
+
204
+ var PageSizeSelector = function PageSizeSelector(props) {
205
+ var _context;
206
+
207
+ var _useState = useState(uniqueId('per-page-selector-')),
208
+ _useState2 = _slicedToArray(_useState, 1),
209
+ perPageSelectorId = _useState2[0];
210
+
211
+ var options = mapRangeToListOfOptions(props.perPageRange);
212
+
213
+ var hasValidPerPageOption = _includesInstanceProperty(options).call(options, props.perPage);
214
+
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;
216
+ var onPerPageChange = props.onPerPageChange;
217
+ var handleSelectPerPage = useCallback(function (event) {
218
+ onPerPageChange(Number(event.target.value));
219
+ }, [onPerPageChange]);
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
+ });
245
+ };
246
+
247
+ PageSizeSelector.displayName = 'PageSizeSelector';
248
+ PageSizeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
249
+ perPage: PropTypes.number,
250
+ perPageRange: PropTypes.oneOf(['s', 'm', 'l']),
251
+ onPerPageChange: PropTypes.func.isRequired,
252
+ pageItems: PropTypes.number.isRequired
253
+ } : {};
254
+ PageSizeSelector.defaultProps = {
255
+ perPage: 20,
256
+ perPageRange: 's'
257
+ };
258
+ var PageSizeSelector$1 = PageSizeSelector;
259
+
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)."; }
261
+
262
+ var _ref = process.env.NODE_ENV === "production" ? {
263
+ name: "15sp3y3",
264
+ styles: "flex-grow:2"
265
+ } : {
266
+ name: "mvvfm1-Pagination",
267
+ styles: "flex-grow:2;label:Pagination;",
268
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2luYXRpb24uanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJnQiIsImZpbGUiOiJwYWdpbmF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBTcGFjaW5ncyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncyc7XG5pbXBvcnQgUGFnZU5hdmlnYXRvciBmcm9tICcuL3BhZ2UtbmF2aWdhdG9yJztcbmltcG9ydCBQYWdlU2l6ZVNlbGVjdG9yIGZyb20gJy4vcGFnZS1zaXplLXNlbGVjdG9yJztcblxuY29uc3QgUGFnaW5hdGlvbiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB0b3RhbFBhZ2VzID0gTWF0aC5jZWlsKHByb3BzLnRvdGFsSXRlbXMgLyBwcm9wcy5wZXJQYWdlKTtcblxuICBjb25zdCBwYWdlSXRlbXMgPVxuICAgIHByb3BzLnBhZ2UgPT09IHRvdGFsUGFnZXNcbiAgICAgID8gcHJvcHMudG90YWxJdGVtcyAtIHByb3BzLnBlclBhZ2UgKiAocHJvcHMucGFnZSAtIDEpXG4gICAgICA6IHByb3BzLnBlclBhZ2U7XG5cbiAgcmV0dXJuIChcbiAgICA8U3BhY2luZ3MuSW5saW5lIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiPlxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBmbGV4LWdyb3c6IDI7XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIDxQYWdlU2l6ZVNlbGVjdG9yXG4gICAgICAgICAgcGFnZUl0ZW1zPXtwYWdlSXRlbXN9XG4gICAgICAgICAgcGVyUGFnZT17cHJvcHMucGVyUGFnZX1cbiAgICAgICAgICBwZXJQYWdlUmFuZ2U9e3Byb3BzLnBlclBhZ2VSYW5nZX1cbiAgICAgICAgICBvblBlclBhZ2VDaGFuZ2U9e3Byb3BzLm9uUGVyUGFnZUNoYW5nZX1cbiAgICAgICAgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPFBhZ2VOYXZpZ2F0b3JcbiAgICAgICAgdG90YWxQYWdlcz17dG90YWxQYWdlc31cbiAgICAgICAgcGFnZT17cHJvcHMucGFnZX1cbiAgICAgICAgb25QYWdlQ2hhbmdlPXtwcm9wcy5vblBhZ2VDaGFuZ2V9XG4gICAgICAvPlxuICAgIDwvU3BhY2luZ3MuSW5saW5lPlxuICApO1xufTtcblBhZ2luYXRpb24uZGlzcGxheU5hbWUgPSAnUGFnaW5hdGlvbic7XG5QYWdpbmF0aW9uLnByb3BUeXBlcyA9IHtcbiAgLyoqXG4gICAqIFRvdGFsIG51bWJlciBvZiBpdGVtcyBhY3Jvc3MgYWxsIHBhZ2VzXG4gICAqL1xuICB0b3RhbEl0ZW1zOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBUaGUgY3VycmVudCBwYWdlXG4gICAqL1xuICBwYWdlOiBQcm9wVHlwZXMubnVtYmVyLmlzUmVxdWlyZWQsXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiB0aGUgcGFnZSBpcyBjaGFuZ2VkLlxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKiA8YnIvPlxuICAgKiBTaWduYXR1cmU6IGAocGFnZTogbnVtYmVyKSA9PiB2b2lkYFxuICAgKi9cbiAgb25QYWdlQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICAvKipcbiAgICogTnVtYmVyIG9mIGl0ZW1zIHBlciBwYWdlLCBhY2NvcmRpbmcgdG8gdGhlIHByZS1kZWZpbmVkIHJhbmdlIHZhbHVlcy5cbiAgICovXG4gIHBlclBhZ2U6IFByb3BUeXBlcy5udW1iZXIsXG4gIC8qKlxuICAgKiBSYW5nZSBvZiBpdGVtcyBwZXIgcGFnZS5cbiAgICogPGJyLz5cbiAgICogYHM6IDIwLDUwYFxuICAgKiA8YnIvPlxuICAgKiBgbTogMjAsNTAsMTAwYFxuICAgKiA8YnIvPlxuICAgKiBgbDogMjAwLDUwMGBcbiAgICovXG4gIHBlclBhZ2VSYW5nZTogUHJvcFR5cGVzLm9uZU9mKFsncycsICdtJywgJ2wnXSksXG4gIC8qKlxuICAgKiBBIGNhbGxiYWNrIGZ1bmN0aW9uLCBjYWxsZWQgd2hlbiBgcGVyUGFnZWAgaXMgY2hhbmdlZC5cbiAgICogPGJyLz5cbiAgICogU2lnbmF0dXJlOiBgKG5leHRQZXJQYWdlOiBudW1iZXIpID0+IHZvaWRgXG4gICAqL1xuICBvblBlclBhZ2VDaGFuZ2U6IFByb3BUeXBlcy5mdW5jLmlzUmVxdWlyZWQsXG59O1xuUGFnaW5hdGlvbi5kZWZhdWx0UHJvcHMgPSB7XG4gIHBlclBhZ2U6IDIwLFxuICBwZXJQYWdlUmFuZ2U6ICdzJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFBhZ2luYXRpb247XG4iXX0= */",
269
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
270
+ };
271
+
272
+ var Pagination = function Pagination(props) {
273
+ var totalPages = Math.ceil(props.totalItems / props.perPage);
274
+ var pageItems = props.page === totalPages ? props.totalItems - props.perPage * (props.page - 1) : props.perPage;
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
+ });
291
+ };
292
+
293
+ Pagination.displayName = 'Pagination';
294
+ Pagination.propTypes = process.env.NODE_ENV !== "production" ? {
295
+ /**
296
+ * Total number of items across all pages
297
+ */
298
+ totalItems: PropTypes.number.isRequired,
299
+
300
+ /**
301
+ * The current page
302
+ */
303
+ page: PropTypes.number.isRequired,
304
+
305
+ /**
306
+ * A callback function, called when the page is changed.
307
+ * <br/>
308
+ * Signature: `(page: number) => void`
309
+ * <br/>
310
+ * Signature: `(page: number) => void`
311
+ */
312
+ onPageChange: PropTypes.func.isRequired,
313
+
314
+ /**
315
+ * Number of items per page, according to the pre-defined range values.
316
+ */
317
+ perPage: PropTypes.number,
318
+
319
+ /**
320
+ * Range of items per page.
321
+ * <br/>
322
+ * `s: 20,50`
323
+ * <br/>
324
+ * `m: 20,50,100`
325
+ * <br/>
326
+ * `l: 200,500`
327
+ */
328
+ perPageRange: PropTypes.oneOf(['s', 'm', 'l']),
329
+
330
+ /**
331
+ * A callback function, called when `perPage` is changed.
332
+ * <br/>
333
+ * Signature: `(nextPerPage: number) => void`
334
+ */
335
+ onPerPageChange: PropTypes.func.isRequired
336
+ } : {};
337
+ Pagination.defaultProps = {
338
+ perPage: 20,
339
+ perPageRange: 's'
340
+ };
341
+ var Pagination$1 = Pagination;
342
+
343
+ // NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
344
+ var version = '0.0.0-canary-2021830134526';
345
+
346
+ export { PageNavigator$1 as PageNavigator, PageSizeSelector$1 as PageSizeSelector, Pagination$1 as Pagination, version };
package/package.json ADDED
@@ -0,0 +1,59 @@
1
+ {
2
+ "name": "@commercetools-uikit/pagination",
3
+ "description": "Components for navigating through pages of items",
4
+ "version": "0.0.0-canary-2021830134526",
5
+ "bugs": "https://github.com/commercetools/ui-kit/issues",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/commercetools/ui-kit.git",
9
+ "directory": "packages/components/pagination"
10
+ },
11
+ "homepage": "https://uikit.commercetools.com",
12
+ "keywords": [
13
+ "javascript",
14
+ "design system",
15
+ "react",
16
+ "uikit"
17
+ ],
18
+ "license": "MIT",
19
+ "private": false,
20
+ "publishConfig": {
21
+ "access": "public"
22
+ },
23
+ "sideEffects": false,
24
+ "main": "dist/commercetools-uikit-pagination.cjs.js",
25
+ "module": "dist/commercetools-uikit-pagination.esm.js",
26
+ "files": [
27
+ "dist"
28
+ ],
29
+ "scripts": {
30
+ "prepare": "../../../scripts/version.js replace"
31
+ },
32
+ "dependencies": {
33
+ "@babel/runtime": "7.14.8",
34
+ "@babel/runtime-corejs3": "7.14.9",
35
+ "@commercetools-uikit/constraints": "0.0.0-canary-2021830134526",
36
+ "@commercetools-uikit/design-system": "0.0.0-canary-2021830134526",
37
+ "@commercetools-uikit/icons": "0.0.0-canary-2021830134526",
38
+ "@commercetools-uikit/label": "0.0.0-canary-2021830134526",
39
+ "@commercetools-uikit/number-input": "0.0.0-canary-2021830134526",
40
+ "@commercetools-uikit/secondary-icon-button": "0.0.0-canary-2021830134526",
41
+ "@commercetools-uikit/select-input": "0.0.0-canary-2021830134526",
42
+ "@commercetools-uikit/spacings": "0.0.0-canary-2021830134526",
43
+ "@commercetools-uikit/text": "0.0.0-canary-2021830134526",
44
+ "@commercetools-uikit/utils": "12.2.0",
45
+ "@emotion/react": "^11.4.0",
46
+ "@emotion/styled": "^11.3.0",
47
+ "formik": "^2.2.9",
48
+ "lodash": "4.17.21",
49
+ "prop-types": "15.7.2"
50
+ },
51
+ "devDependencies": {
52
+ "react": "17.0.2",
53
+ "react-intl": "5.20.7"
54
+ },
55
+ "peerDependencies": {
56
+ "react": "17.x",
57
+ "react-intl": "5.x"
58
+ }
59
+ }