@semcore/pagination 4.52.2-prerelease.0 → 4.53.0-prerelease.0

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 (21) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/Pagination.js +152 -159
  3. package/lib/cjs/Pagination.js.map +1 -1
  4. package/lib/cjs/index.d.js.map +1 -1
  5. package/lib/cjs/index.js +1 -1
  6. package/lib/cjs/index.js.map +1 -1
  7. package/lib/cjs/style/pagination.shadow.css +4 -4
  8. package/lib/cjs/translations/__intergalactic-dynamic-locales.js +4 -5
  9. package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
  10. package/lib/es6/Pagination.js +147 -153
  11. package/lib/es6/Pagination.js.map +1 -1
  12. package/lib/es6/index.d.js.map +1 -1
  13. package/lib/es6/index.js.map +1 -1
  14. package/lib/es6/style/pagination.shadow.css +4 -4
  15. package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
  16. package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
  17. package/lib/esm/Pagination.mjs +142 -150
  18. package/lib/esm/style/pagination.shadow.css +4 -4
  19. package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
  20. package/lib/types/index.d.ts +10 -17
  21. package/package.json +11 -11
package/lib/esm/Pagination.mjs CHANGED
@@ -2,21 +2,18 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
2
2
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
3
3
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
4
4
  import _createClass from "@babel/runtime/helpers/esm/createClass";
5
- import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
5
+ import _callSuper from "@babel/runtime/helpers/esm/callSuper";
6
6
  import _inherits from "@babel/runtime/helpers/esm/inherits";
7
- import _createSuper from "@babel/runtime/helpers/esm/createSuper";
8
7
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
9
- import { sstyled } from "@semcore/utils/lib/core/index";
10
- import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
11
- import React from "react";
12
- import { Flex, ScreenReaderOnly } from "@semcore/flex-box";
13
- import InputNumber from "@semcore/input-number";
14
- import { Text } from "@semcore/typography";
8
+ import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
9
+ import { Flex, ScreenReaderOnly, Hint } from "@semcore/base-components";
15
10
  import Button, { ButtonLink } from "@semcore/button";
16
- import { Hint } from "@semcore/tooltip";
11
+ import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
12
+ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
17
13
  import ChevronDoubleLeft from "@semcore/icon/ChevronDoubleLeft/m";
18
- import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
19
- import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
14
+ import InputNumber from "@semcore/input-number";
15
+ import { Text } from "@semcore/typography";
16
+ import React from "react";
20
17
  import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
21
18
  var _excluded = ["styles", "getI18nText", "totalPages", "isLastOrSingle", "children"];
22
19
  /*!__reshadow-styles__:"./style/pagination.shadow.css"*/
@@ -24,54 +21,46 @@ var style = (
24
21
  /*__reshadow_css_start__*/
25
22
  (sstyled.insert(
26
23
  /*__inner_css_start__*/
27
- ".___SPagination_xontb_gg_{justify-content:flex-start;align-items:center}.___SPagination_xontb_gg_.__withGap_xontb_gg_{gap:var(--intergalactic-spacing-4x, 16px)}.___SPagination_xontb_gg_.__withGap_xontb_gg_._size_l_xontb_gg_{gap:var(--intergalactic-spacing-5x, 20px)}.___SNextPage_xontb_gg_,.___SPrevPage_xontb_gg_{align-self:center;margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNextPage_xontb_gg_._size_l_xontb_gg_,.___SPrevPage_xontb_gg_._size_l_xontb_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SLabel_xontb_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SLabel_xontb_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-4x, 16px)}.___SLabel_xontb_gg_._size_l_xontb_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-5x, 20px)}.___STotalPages_xontb_gg_{align-self:center;line-height:normal;color:var(--intergalactic-text-link, #006dca)}.___STotalPagesLabel_xontb_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-1x, 4px);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_xontb_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, #191b23)}.___STotalLastPages_xontb_gg_._size_l_xontb_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SPageInput_xontb_gg_{max-width:68px;margin-left:var(--intergalactic-spacing-1x, 4px)}.___SPageInput_xontb_gg_._size_l_xontb_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPageInput_xontb_gg_:focus-within .___SPageInputAddon_xontb_gg_{opacity:1;clip:initial;position:static}.___SPageInputAddon_xontb_gg_{opacity:0;clip:rect(1px,1px,1px,1px);position:absolute}.___SLabel_xontb_gg_,.___STotalPagesLabel_xontb_gg_,.___STotalPages_xontb_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SLabel_xontb_gg_._size_l_xontb_gg_,.___STotalPagesLabel_xontb_gg_._size_l_xontb_gg_,.___STotalPages_xontb_gg_._size_l_xontb_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}",
24
+ ".___SPagination_q6ly9_gg_{justify-content:flex-start;align-items:center}.___SPagination_q6ly9_gg_.__withGap_q6ly9_gg_{gap:var(--intergalactic-spacing-4x, 16px)}.___SPagination_q6ly9_gg_.__withGap_q6ly9_gg_._size_l_q6ly9_gg_{gap:var(--intergalactic-spacing-5x, 20px)}.___SNextPage_q6ly9_gg_,.___SPrevPage_q6ly9_gg_{align-self:center;margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNextPage_q6ly9_gg_._size_l_q6ly9_gg_,.___SPrevPage_q6ly9_gg_._size_l_q6ly9_gg_{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SLabel_q6ly9_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___SLabel_q6ly9_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-4x, 16px)}.___SLabel_q6ly9_gg_._size_l_q6ly9_gg_:not(:first-child){margin-left:var(--intergalactic-spacing-5x, 20px)}.___STotalPages_q6ly9_gg_{align-self:center;line-height:normal;color:var(--intergalactic-text-link, rgb(36, 93, 229))}.___STotalPagesLabel_q6ly9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-1x, 4px);color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___STotalLastPages_q6ly9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___STotalLastPages_q6ly9_gg_._size_l_q6ly9_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SPageInput_q6ly9_gg_{max-width:68px;margin-left:var(--intergalactic-spacing-1x, 4px)}.___SPageInput_q6ly9_gg_._size_l_q6ly9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPageInput_q6ly9_gg_:focus-within .___SPageInputAddon_q6ly9_gg_{opacity:1;clip:initial;position:static}.___SPageInputAddon_q6ly9_gg_{opacity:0;clip:rect(1px,1px,1px,1px);position:absolute}.___SLabel_q6ly9_gg_,.___STotalPagesLabel_q6ly9_gg_,.___STotalPages_q6ly9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SLabel_q6ly9_gg_._size_l_q6ly9_gg_,.___STotalPagesLabel_q6ly9_gg_._size_l_q6ly9_gg_,.___STotalPages_q6ly9_gg_._size_l_q6ly9_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}",
28
25
  /*__inner_css_end__*/
29
- "xontb_gg_"
26
+ "q6ly9_gg_"
30
27
  ), /*__reshadow_css_end__*/
31
28
  {
32
- "__SPagination": "___SPagination_xontb_gg_",
33
- "__SLabel": "___SLabel_xontb_gg_",
34
- "_size_l": "_size_l_xontb_gg_",
35
- "__STotalPages": "___STotalPages_xontb_gg_",
36
- "__STotalPagesLabel": "___STotalPagesLabel_xontb_gg_",
37
- "__SPageInput": "___SPageInput_xontb_gg_",
38
- "__SPageInputAddon": "___SPageInputAddon_xontb_gg_",
39
- "_withGap": "__withGap_xontb_gg_",
40
- "__SNextPage": "___SNextPage_xontb_gg_",
41
- "__SPrevPage": "___SPrevPage_xontb_gg_",
42
- "__STotalLastPages": "___STotalLastPages_xontb_gg_"
29
+ "__SPagination": "___SPagination_q6ly9_gg_",
30
+ "__SLabel": "___SLabel_q6ly9_gg_",
31
+ "_size_l": "_size_l_q6ly9_gg_",
32
+ "__STotalPages": "___STotalPages_q6ly9_gg_",
33
+ "__STotalPagesLabel": "___STotalPagesLabel_q6ly9_gg_",
34
+ "__SPageInput": "___SPageInput_q6ly9_gg_",
35
+ "__SPageInputAddon": "___SPageInputAddon_q6ly9_gg_",
36
+ "_withGap": "__withGap_q6ly9_gg_",
37
+ "__SNextPage": "___SNextPage_q6ly9_gg_",
38
+ "__SPrevPage": "___SPrevPage_q6ly9_gg_",
39
+ "__STotalLastPages": "___STotalLastPages_q6ly9_gg_"
43
40
  })
44
41
  );
45
- var PaginationRoot = /* @__PURE__ */ function(_Component) {
46
- _inherits(PaginationRoot2, _Component);
47
- var _super = _createSuper(PaginationRoot2);
42
+ var PaginationRoot = /* @__PURE__ */ (function(_Component) {
48
43
  function PaginationRoot2() {
49
44
  var _this;
50
45
  _classCallCheck(this, PaginationRoot2);
51
46
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
52
47
  args[_key] = arguments[_key];
53
48
  }
54
- _this = _super.call.apply(_super, [this].concat(args));
55
- _defineProperty(_assertThisInitialized(_this), "nextPageButtonRef", /* @__PURE__ */ React.createRef());
56
- _defineProperty(_assertThisInitialized(_this), "prevPageButtonRef", /* @__PURE__ */ React.createRef());
57
- _defineProperty(_assertThisInitialized(_this), "state", {
49
+ _this = _callSuper(this, PaginationRoot2, [].concat(args));
50
+ _defineProperty(_this, "nextPageButtonRef", /* @__PURE__ */ React.createRef());
51
+ _defineProperty(_this, "prevPageButtonRef", /* @__PURE__ */ React.createRef());
52
+ _defineProperty(_this, "state", {
58
53
  // Crutch, so as not to take out `dirtyCurrentPage` in props
59
54
  dirtyCurrentPage: void 0
60
55
  });
61
- _defineProperty(_assertThisInitialized(_this), "pageInputAddonRef", /* @__PURE__ */ React.createRef());
62
- _defineProperty(_assertThisInitialized(_this), "returnLostFocus", function() {
63
- setTimeout(function() {
64
- if (document.activeElement !== document.body) return;
65
- var prevPageButton = _this.prevPageButtonRef.current;
66
- var nextPageButton = _this.nextPageButtonRef.current;
67
- if (prevPageButton && !prevPageButton.disabled) {
68
- prevPageButton.focus();
69
- } else if (nextPageButton && !nextPageButton.disabled) {
70
- nextPageButton.focus();
71
- }
72
- }, 0);
56
+ _defineProperty(_this, "pageInputAddonRef", /* @__PURE__ */ React.createRef());
57
+ _defineProperty(_this, "returnLostFocusTo", function(ref) {
58
+ requestAnimationFrame(function() {
59
+ var _ref$current;
60
+ (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
61
+ });
73
62
  });
74
- _defineProperty(_assertThisInitialized(_this), "handlePageChange", function(currentPage) {
63
+ _defineProperty(_this, "handlePageChange", function(currentPage) {
75
64
  currentPage = Number(currentPage);
76
65
  if (Number.isNaN(currentPage)) {
77
66
  return;
@@ -80,9 +69,8 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
80
69
  _this.setState({
81
70
  dirtyCurrentPage: void 0
82
71
  });
83
- _this.returnLostFocus();
84
72
  });
85
- _defineProperty(_assertThisInitialized(_this), "handlePageValueChange", function(value) {
73
+ _defineProperty(_this, "handlePageValueChange", function(value) {
86
74
  var dirtyCurrentPage = _this.state.dirtyCurrentPage;
87
75
  if (Number.isNaN(Number(value))) {
88
76
  value = dirtyCurrentPage;
@@ -91,7 +79,7 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
91
79
  dirtyCurrentPage: value
92
80
  });
93
81
  });
94
- _defineProperty(_assertThisInitialized(_this), "handlePageValueBlur", function() {
82
+ _defineProperty(_this, "handlePageValueBlur", function() {
95
83
  setTimeout(function() {
96
84
  if (_this.pageInputAddonRef.current !== document.activeElement) {
97
85
  var currentPage = _this.asProps.currentPage;
@@ -101,77 +89,82 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
101
89
  }
102
90
  }, 0);
103
91
  });
104
- _defineProperty(_assertThisInitialized(_this), "getDirtyCurrentPage", function() {
92
+ _defineProperty(_this, "getDirtyCurrentPage", function() {
105
93
  var dirtyCurrentPage = _this.state.dirtyCurrentPage;
106
94
  var totalPages = _this.asProps.totalPages;
107
95
  var finalValue = dirtyCurrentPage > totalPages ? totalPages : dirtyCurrentPage;
108
96
  return finalValue <= 0 ? 1 : finalValue;
109
97
  });
110
- _defineProperty(_assertThisInitialized(_this), "handlePageInputIconClick", function() {
111
- var dirtyCurrentPage = _this.getDirtyCurrentPage();
112
- _this.handlePageChange(dirtyCurrentPage);
113
- });
114
- _defineProperty(_assertThisInitialized(_this), "handlePageInputKeyDown", function(event) {
98
+ _defineProperty(_this, "handlePageInputKeyDown", function(event) {
115
99
  if (event.key !== "Enter") return;
116
100
  var dirtyCurrentPage = _this.getDirtyCurrentPage();
117
101
  _this.handlePageChange(dirtyCurrentPage);
118
102
  });
119
- _defineProperty(_assertThisInitialized(_this), "getFirstPageProps", function() {
103
+ _defineProperty(_this, "getFirstPageProps", function() {
120
104
  var _this$asProps = _this.asProps, currentPage = _this$asProps.currentPage, getI18nText = _this$asProps.getI18nText, size = _this$asProps.size;
121
105
  var disabled = currentPage <= 1;
122
106
  return {
123
107
  disabled,
124
108
  onClick: function onClick() {
125
- return _this.handlePageChange(1);
109
+ _this.handlePageChange(1);
110
+ _this.returnLostFocusTo(_this.nextPageButtonRef);
126
111
  },
127
112
  getI18nText,
128
113
  size
129
114
  };
130
115
  });
131
- _defineProperty(_assertThisInitialized(_this), "getPrevPageProps", function() {
116
+ _defineProperty(_this, "getPrevPageProps", function() {
132
117
  var _this$asProps2 = _this.asProps, currentPage = _this$asProps2.currentPage, getI18nText = _this$asProps2.getI18nText, size = _this$asProps2.size;
133
118
  var disabled = currentPage <= 1;
134
119
  return {
135
120
  currentPage,
136
121
  disabled,
137
122
  onClick: function onClick() {
138
- return _this.handlePageChange(currentPage - 1);
123
+ var followingPage = currentPage - 1;
124
+ _this.handlePageChange(followingPage);
125
+ if (followingPage <= 1) {
126
+ _this.returnLostFocusTo(_this.nextPageButtonRef);
127
+ }
139
128
  },
140
129
  getI18nText,
141
- ref: _this.nextPageButtonRef,
130
+ ref: _this.prevPageButtonRef,
142
131
  size
143
132
  };
144
133
  });
145
- _defineProperty(_assertThisInitialized(_this), "getNextPageProps", function() {
134
+ _defineProperty(_this, "getNextPageProps", function() {
146
135
  var _this$asProps3 = _this.asProps, currentPage = _this$asProps3.currentPage, totalPages = _this$asProps3.totalPages, getI18nText = _this$asProps3.getI18nText, size = _this$asProps3.size;
147
- var disabled = !(currentPage < totalPages);
136
+ var disabled = currentPage >= totalPages;
148
137
  return {
149
138
  currentPage,
150
139
  disabled,
151
140
  onClick: function onClick() {
152
- return _this.handlePageChange(currentPage + 1);
141
+ var followingPage = currentPage + 1;
142
+ _this.handlePageChange(followingPage);
143
+ if (followingPage >= totalPages) {
144
+ _this.returnLostFocusTo(_this.prevPageButtonRef);
145
+ }
153
146
  },
154
147
  getI18nText,
155
- ref: _this.prevPageButtonRef,
148
+ ref: _this.nextPageButtonRef,
156
149
  size
157
150
  };
158
151
  });
159
- _defineProperty(_assertThisInitialized(_this), "getPageInputProps", function() {
152
+ _defineProperty(_this, "getPageInputProps", function() {
160
153
  var _this$asProps4 = _this.asProps, getI18nText = _this$asProps4.getI18nText, locale = _this$asProps4.locale, size = _this$asProps4.size;
161
154
  return {
162
155
  getI18nText,
163
156
  locale,
164
- size
157
+ size,
158
+ paginationInputId: _this.paginationInputId
165
159
  };
166
160
  });
167
- _defineProperty(_assertThisInitialized(_this), "getPageInputAddonProps", function() {
161
+ _defineProperty(_this, "getPageInputAddonProps", function() {
168
162
  return {
169
- onClick: _this.handlePageInputIconClick,
170
163
  ref: _this.pageInputAddonRef,
171
164
  onBlur: _this.handlePageValueBlur
172
165
  };
173
166
  });
174
- _defineProperty(_assertThisInitialized(_this), "getPageInputValueProps", function() {
167
+ _defineProperty(_this, "getPageInputValueProps", function() {
175
168
  var dirtyCurrentPage = _this.state.dirtyCurrentPage;
176
169
  var _this$asProps5 = _this.asProps, currentPage = _this$asProps5.currentPage, totalPages = _this$asProps5.totalPages, getI18nText = _this$asProps5.getI18nText, size = _this$asProps5.size;
177
170
  return {
@@ -183,10 +176,11 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
183
176
  onChange: _this.handlePageValueChange,
184
177
  onKeyDown: _this.handlePageInputKeyDown,
185
178
  getI18nText,
186
- size
179
+ size,
180
+ id: _this.paginationInputId
187
181
  };
188
182
  });
189
- _defineProperty(_assertThisInitialized(_this), "getTotalPagesProps", function() {
183
+ _defineProperty(_this, "getTotalPagesProps", function() {
190
184
  var _this$asProps6 = _this.asProps, currentPage = _this$asProps6.currentPage, totalPages = _this$asProps6.totalPages, getI18nText = _this$asProps6.getI18nText, locale = _this$asProps6.locale, size = _this$asProps6.size;
191
185
  var formatter = new Intl.NumberFormat(locale, {
192
186
  style: "decimal"
@@ -196,7 +190,8 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
196
190
  children: formatter.format(totalPages),
197
191
  isLastOrSingle: currentPage === totalPages,
198
192
  onClick: function onClick() {
199
- return _this.handlePageChange(totalPages);
193
+ _this.handlePageChange(totalPages);
194
+ _this.returnLostFocusTo(_this.prevPageButtonRef);
200
195
  },
201
196
  getI18nText,
202
197
  size
@@ -204,7 +199,8 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
204
199
  });
205
200
  return _this;
206
201
  }
207
- _createClass(PaginationRoot2, [{
202
+ _inherits(PaginationRoot2, _Component);
203
+ return _createClass(PaginationRoot2, [{
208
204
  key: "uncontrolledProps",
209
205
  value: function uncontrolledProps() {
210
206
  return {
@@ -221,13 +217,19 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
221
217
  });
222
218
  }
223
219
  }
220
+ }, {
221
+ key: "paginationInputId",
222
+ get: function get() {
223
+ var uid = this.asProps.uid;
224
+ return "pagination-input-".concat(uid);
225
+ }
224
226
  }, {
225
227
  key: "render",
226
228
  value: function render() {
227
229
  var _ref = this.asProps, _ref9;
228
230
  var SPagination = Flex;
229
231
  var _this$asProps7 = this.asProps, Children = _this$asProps7.Children, hasChildren = _this$asProps7.children, getI18nText = _this$asProps7.getI18nText, currentPage = _this$asProps7.currentPage, _this$asProps7$totalP = _this$asProps7.totalPages, totalPages = _this$asProps7$totalP === void 0 ? 1 : _this$asProps7$totalP;
230
- return _ref9 = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(SPagination, _ref9.cn("SPagination", _objectSpread({}, assignProps({
232
+ return _ref9 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SPagination, _ref9.cn("SPagination", _objectSpread({}, assignProps({
231
233
  "flexWrap": "wrap",
232
234
  "withGap": !hasChildren,
233
235
  "tag": "nav",
@@ -240,8 +242,7 @@ var PaginationRoot = /* @__PURE__ */ function(_Component) {
240
242
  }), getI18nText("pageInputLabel"), " ", currentPage));
241
243
  }
242
244
  }]);
243
- return PaginationRoot2;
244
- }(Component);
245
+ })(Component);
245
246
  _defineProperty(PaginationRoot, "displayName", "Pagination");
246
247
  _defineProperty(PaginationRoot, "defaultProps", function() {
247
248
  return {
@@ -253,158 +254,149 @@ _defineProperty(PaginationRoot, "defaultProps", function() {
253
254
  };
254
255
  });
255
256
  _defineProperty(PaginationRoot, "style", style);
256
- _defineProperty(PaginationRoot, "enhance", [i18nEnhance(localizedMessages)]);
257
- var FirstPage = /* @__PURE__ */ function(_Component2) {
258
- _inherits(FirstPage2, _Component2);
259
- var _super2 = _createSuper(FirstPage2);
257
+ _defineProperty(PaginationRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
258
+ var FirstPage = /* @__PURE__ */ (function(_Component2) {
260
259
  function FirstPage2() {
260
+ var _this2;
261
261
  _classCallCheck(this, FirstPage2);
262
- return _super2.apply(this, arguments);
262
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
263
+ args[_key2] = arguments[_key2];
264
+ }
265
+ _this2 = _callSuper(this, FirstPage2, [].concat(args));
266
+ _defineProperty(_this2, "buttonRef", /* @__PURE__ */ React.createRef());
267
+ return _this2;
263
268
  }
264
- _createClass(FirstPage2, [{
269
+ _inherits(FirstPage2, _Component2);
270
+ return _createClass(FirstPage2, [{
265
271
  key: "render",
266
272
  value: function render() {
267
273
  var _ref2 = this.asProps;
268
- var getI18nText = this.asProps.getI18nText;
269
- return /* @__PURE__ */ React.createElement(Button, assignProps({
270
- "aria-label": getI18nText("firstPage")
271
- }, _ref2));
274
+ var _this$asProps8 = this.asProps, getI18nText = _this$asProps8.getI18nText, Children = _this$asProps8.Children, children = _this$asProps8.children, disabled = _this$asProps8.disabled;
275
+ var hintContent = getI18nText("firstPage");
276
+ var isAdvanced = children !== void 0;
277
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, assignProps({
278
+ "aria-label": getI18nText("firstPage"),
279
+ "ref": this.buttonRef
280
+ }, _ref2), isAdvanced ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(Button.Addon, {
281
+ tag: ChevronDoubleLeft
282
+ })), !isAdvanced && /* @__PURE__ */ React.createElement(Hint, {
283
+ triggerRef: this.buttonRef,
284
+ timeout: [250, 50]
285
+ }, hintContent));
272
286
  }
273
287
  }]);
274
- return FirstPage2;
275
- }(Component);
276
- _defineProperty(FirstPage, "defaultProps", function(props) {
277
- var hintContent = props.getI18nText("firstPage");
278
- return {
279
- children: /* @__PURE__ */ React.createElement(Button.Addon, {
280
- tag: Hint,
281
- title: hintContent,
282
- timeout: [250, 50],
283
- __excludeProps: ["aria-label"]
284
- }, /* @__PURE__ */ React.createElement(ChevronDoubleLeft, null))
285
- };
286
- });
287
- var PrevPage = /* @__PURE__ */ function(_Component3) {
288
- _inherits(PrevPage2, _Component3);
289
- var _super3 = _createSuper(PrevPage2);
288
+ })(Component);
289
+ var PrevPage = /* @__PURE__ */ (function(_Component3) {
290
290
  function PrevPage2() {
291
291
  _classCallCheck(this, PrevPage2);
292
- return _super3.apply(this, arguments);
292
+ return _callSuper(this, PrevPage2, arguments);
293
293
  }
294
- _createClass(PrevPage2, [{
294
+ _inherits(PrevPage2, _Component3);
295
+ return _createClass(PrevPage2, [{
295
296
  key: "render",
296
297
  value: function render() {
297
- var _ref3 = this.asProps, _ref10;
298
+ var _ref3 = this.asProps, _ref0;
298
299
  var SPrevPage = Button;
299
- return _ref10 = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(SPrevPage, _ref10.cn("SPrevPage", _objectSpread({}, assignProps({}, _ref3))));
300
+ return _ref0 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SPrevPage, _ref0.cn("SPrevPage", _objectSpread({}, assignProps({}, _ref3))));
300
301
  }
301
302
  }]);
302
- return PrevPage2;
303
- }(Component);
303
+ })(Component);
304
304
  _defineProperty(PrevPage, "defaultProps", function(props) {
305
305
  return {
306
306
  children: props.getI18nText("prevPageLabel")
307
307
  };
308
308
  });
309
- var NextPage = /* @__PURE__ */ function(_Component4) {
310
- _inherits(NextPage2, _Component4);
311
- var _super4 = _createSuper(NextPage2);
309
+ var NextPage = /* @__PURE__ */ (function(_Component4) {
312
310
  function NextPage2() {
313
311
  _classCallCheck(this, NextPage2);
314
- return _super4.apply(this, arguments);
312
+ return _callSuper(this, NextPage2, arguments);
315
313
  }
316
- _createClass(NextPage2, [{
314
+ _inherits(NextPage2, _Component4);
315
+ return _createClass(NextPage2, [{
317
316
  key: "render",
318
317
  value: function render() {
319
- var _ref4 = this.asProps, _ref11;
318
+ var _ref4 = this.asProps, _ref1;
320
319
  var SNextPage = Button;
321
- return _ref11 = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(SNextPage, _ref11.cn("SNextPage", _objectSpread({}, assignProps({
320
+ return _ref1 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SNextPage, _ref1.cn("SNextPage", _objectSpread({}, assignProps({
322
321
  "use": "primary",
323
322
  "theme": "info"
324
323
  }, _ref4))));
325
324
  }
326
325
  }]);
327
- return NextPage2;
328
- }(Component);
326
+ })(Component);
329
327
  _defineProperty(NextPage, "defaultProps", function(props) {
330
328
  return {
331
329
  children: props.getI18nText("nextPageLabel")
332
330
  };
333
331
  });
334
- var TotalPages = /* @__PURE__ */ function(_Component5) {
335
- _inherits(TotalPages2, _Component5);
336
- var _super5 = _createSuper(TotalPages2);
332
+ var TotalPages = /* @__PURE__ */ (function(_Component5) {
337
333
  function TotalPages2() {
338
334
  _classCallCheck(this, TotalPages2);
339
- return _super5.apply(this, arguments);
335
+ return _callSuper(this, TotalPages2, arguments);
340
336
  }
341
- _createClass(TotalPages2, [{
337
+ _inherits(TotalPages2, _Component5);
338
+ return _createClass(TotalPages2, [{
342
339
  key: "render",
343
340
  value: function render() {
344
- var _ref5 = this.asProps, _ref12;
341
+ var _ref5 = this.asProps, _ref10;
345
342
  var STotalPages = ButtonLink;
346
343
  var STotalPagesLabel = Text;
347
344
  var STotalLastPages = Text;
348
- var _this$asProps8 = this.asProps, styles = _this$asProps8.styles, getI18nText = _this$asProps8.getI18nText, totalPages = _this$asProps8.totalPages, isLastOrSingle = _this$asProps8.isLastOrSingle, children = _this$asProps8.children, other = _objectWithoutProperties(_this$asProps8, _excluded);
345
+ var _this$asProps9 = this.asProps, styles = _this$asProps9.styles, getI18nText = _this$asProps9.getI18nText, totalPages = _this$asProps9.totalPages, isLastOrSingle = _this$asProps9.isLastOrSingle, children = _this$asProps9.children, other = _objectWithoutProperties(_this$asProps9, _excluded);
349
346
  var textSize = other.size === "l" ? "300" : "200";
350
- return _ref12 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STotalPagesLabel, _ref12.cn("STotalPagesLabel", {
347
+ return _ref10 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STotalPagesLabel, _ref10.cn("STotalPagesLabel", {
351
348
  "size": textSize
352
- }), getI18nText("totalPagesLabel")), isLastOrSingle ? /* @__PURE__ */ React.createElement(STotalLastPages, _ref12.cn("STotalLastPages", _objectSpread({
349
+ }), getI18nText("totalPagesLabel")), isLastOrSingle ? /* @__PURE__ */ React.createElement(STotalLastPages, _ref10.cn("STotalLastPages", _objectSpread({
353
350
  "size": textSize,
354
351
  "aria-label": getI18nText("lastPage", {
355
352
  lastPageNumber: totalPages
356
353
  })
357
- }, other)), children) : /* @__PURE__ */ React.createElement(STotalPages, _ref12.cn("STotalPages", _objectSpread({}, assignProps({
354
+ }, other)), children) : /* @__PURE__ */ React.createElement(STotalPages, _ref10.cn("STotalPages", _objectSpread({}, assignProps({
358
355
  "aria-label": getI18nText("lastPage", {
359
356
  lastPageNumber: totalPages
360
357
  })
361
358
  }, _ref5)))));
362
359
  }
363
360
  }]);
364
- return TotalPages2;
365
- }(Component);
366
- var PageInputValue = function PageInputValue2(props) {
367
- var _ref6 = arguments[0], _ref13;
361
+ })(Component);
362
+ function PageInputValue(props) {
363
+ var _ref6 = arguments[0], _ref11;
368
364
  var SPageInputValue = InputNumber.Value;
369
- return _ref13 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SPageInputValue, _ref13.cn("SPageInputValue", _objectSpread({}, assignProps({
365
+ return _ref11 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SPageInputValue, _ref11.cn("SPageInputValue", _objectSpread({}, assignProps({
370
366
  "onBlur": function onBlur() {
371
367
  return false;
372
368
  }
373
369
  }, _ref6))));
374
- };
375
- var PageInputAddon = function PageInputAddon2(props) {
376
- var _ref7 = arguments[0], _ref14;
370
+ }
371
+ function PageInputAddon(props) {
372
+ var _ref7 = arguments[0], _ref12;
377
373
  var SPageInputAddon = InputNumber.Addon;
378
- return _ref14 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SPageInputAddon, _ref14.cn("SPageInputAddon", _objectSpread({}, assignProps({}, _ref7))));
379
- };
380
- var PageInput = /* @__PURE__ */ function(_Component6) {
381
- _inherits(PageInput2, _Component6);
382
- var _super6 = _createSuper(PageInput2);
374
+ return _ref12 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SPageInputAddon, _ref12.cn("SPageInputAddon", _objectSpread({}, assignProps({}, _ref7))));
375
+ }
376
+ var PageInput = /* @__PURE__ */ (function(_Component6) {
383
377
  function PageInput2() {
384
378
  _classCallCheck(this, PageInput2);
385
- return _super6.apply(this, arguments);
379
+ return _callSuper(this, PageInput2, arguments);
386
380
  }
387
- _createClass(PageInput2, [{
381
+ _inherits(PageInput2, _Component6);
382
+ return _createClass(PageInput2, [{
388
383
  key: "render",
389
384
  value: function render() {
390
- var _ref8 = this.asProps, _ref15;
385
+ var _ref8 = this.asProps, _ref13;
391
386
  var SPageInput = InputNumber;
392
387
  var SLabel = Text;
393
- var _this$asProps9 = this.asProps, Children = _this$asProps9.Children, getI18nText = _this$asProps9.getI18nText, styles = _this$asProps9.styles, uid = _this$asProps9.uid, locale = _this$asProps9.locale, size = _this$asProps9.size;
394
- return _ref15 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SLabel, _ref15.cn("SLabel", {
388
+ var _this$asProps0 = this.asProps, Children = _this$asProps0.Children, getI18nText = _this$asProps0.getI18nText, styles = _this$asProps0.styles, locale = _this$asProps0.locale, size = _this$asProps0.size, paginationInputId = _this$asProps0.paginationInputId;
389
+ return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SLabel, _ref13.cn("SLabel", {
395
390
  "tag": "label",
396
- "htmlFor": "pagination-input-".concat(uid),
391
+ "htmlFor": paginationInputId,
397
392
  "size": size
398
- }), getI18nText("pageInputLabel")), /* @__PURE__ */ React.createElement(SPageInput, _ref15.cn("SPageInput", _objectSpread({}, assignProps({
393
+ }), getI18nText("pageInputLabel")), /* @__PURE__ */ React.createElement(SPageInput, _ref13.cn("SPageInput", _objectSpread({}, assignProps({
399
394
  "controlsLength": Children.origin ? void 0 : 2,
400
395
  "locale": locale
401
- }, _ref8))), Children.origin ? /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})) : /* @__PURE__ */ React.createElement(Pagination.PageInput.Value, {
402
- id: "pagination-input-".concat(uid)
403
- })));
396
+ }, _ref8))), Children.origin ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : /* @__PURE__ */ React.createElement(Pagination.PageInput.Value, null)));
404
397
  }
405
398
  }]);
406
- return PageInput2;
407
- }(Component);
399
+ })(Component);
408
400
  _defineProperty(PageInput, "enhance", [uniqueIDEnhancement()]);
409
401
  var Pagination = createComponent(PaginationRoot, {
410
402
  PrevPage,
package/lib/esm/style/pagination.shadow.css CHANGED
@@ -22,7 +22,7 @@ SPrevPage {
22
22
  }
23
23
 
24
24
  SLabel {
25
- color: var(--intergalactic-text-primary, #191b23);
25
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
26
26
  }
27
27
 
28
28
  SLabel:not(:first-child) {
@@ -36,19 +36,19 @@ SLabel[size='l']:not(:first-child) {
36
36
  STotalPages {
37
37
  align-self: center;
38
38
  line-height: normal;
39
- color: var(--intergalactic-text-link, #006dca);
39
+ color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
40
40
  }
41
41
 
42
42
  STotalPagesLabel {
43
43
  margin-left: var(--intergalactic-spacing-2x, 8px);
44
44
  margin-right: var(--intergalactic-spacing-1x, 4px);
45
- color: var(--intergalactic-text-primary, #191b23);
45
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
46
46
  }
47
47
 
48
48
  STotalLastPages {
49
49
  font-size: var(--intergalactic-fs-200, 14px);
50
50
  line-height: var(--intergalactic-lh-200, 142%);
51
- color: var(--intergalactic-text-primary, #191b23);
51
+ color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
52
52
 
53
53
  &[size='l'] {
54
54
  font-size: var(--intergalactic-fs-300, 16px);
package/lib/esm/translations/__intergalactic-dynamic-locales.mjs CHANGED
@@ -6,13 +6,13 @@ import it from "./it.json.mjs";
6
6
  import ja from "./ja.json.mjs";
7
7
  import ko from "./ko.json.mjs";
8
8
  import nl from "./nl.json.mjs";
9
+ import pl from "./pl.json.mjs";
9
10
  import pt from "./pt.json.mjs";
10
11
  import ru from "./ru.json.mjs";
12
+ import sv from "./sv.json.mjs";
11
13
  import tr from "./tr.json.mjs";
12
14
  import vi from "./vi.json.mjs";
13
15
  import zh from "./zh.json.mjs";
14
- import pl from "./pl.json.mjs";
15
- import sv from "./sv.json.mjs";
16
16
  var localizedMessages = {
17
17
  de,
18
18
  en,
package/lib/types/index.d.ts CHANGED
@@ -1,12 +1,11 @@
1
- import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
2
- import { BoxProps } from '@semcore/flex-box';
3
- import Input, { InputProps } from '@semcore/input';
4
- import { TextProps } from '@semcore/typography';
5
- import Button from '@semcore/button';
6
- import { WithI18nEnhanceProps } from '@semcore/utils/lib/enhances/i18nEnhance';
1
+ import type { BoxProps } from '@semcore/base-components';
2
+ import type Button from '@semcore/button';
3
+ import type { PropGetterFn, Intergalactic } from '@semcore/core';
4
+ import type { WithI18nEnhanceProps } from '@semcore/core/lib/utils/enhances/i18nEnhance';
5
+ import type { InputProps } from '@semcore/input';
6
+ import type Input from '@semcore/input';
7
+ import type { NSText } from '@semcore/typography';
7
8
 
8
- /** @deprecated */
9
- export interface IPaginationProps extends PaginationProps, UnknownProperties {}
10
9
  export type PaginationProps = BoxProps &
11
10
  WithI18nEnhanceProps & {
12
11
  /**
@@ -24,6 +23,7 @@ export type PaginationProps = BoxProps &
24
23
  * @param pageNumber
25
24
  */
26
25
  onCurrentPageChange?: (pageNumber: number) => void;
26
+ /** Specifies the locale for i18n support */
27
27
  locale?: string;
28
28
  /**
29
29
  * Sizes for pagination panel
@@ -32,16 +32,10 @@ export type PaginationProps = BoxProps &
32
32
  size?: 'm' | 'l';
33
33
  };
34
34
 
35
- /** @deprecated */
36
- export interface ITotalPagesProps extends TotalPagesProps, UnknownProperties {}
37
- export type TotalPagesProps = TextProps & WithI18nEnhanceProps & {};
35
+ export type TotalPagesProps = NSText.Props & WithI18nEnhanceProps & {};
38
36
 
39
- /** @deprecated */
40
- export interface IPageInputProps extends PageInputProps, UnknownProperties {}
41
37
  export type PageInputProps = InputProps & WithI18nEnhanceProps & {};
42
38
 
43
- /** @deprecated */
44
- export interface IPaginationContext extends PaginationContext, UnknownProperties {}
45
39
  export type PaginationContext = {
46
40
  getFirstPageProps: PropGetterFn;
47
41
  getPrevPageProps: PropGetterFn;
@@ -50,8 +44,6 @@ export type PaginationContext = {
50
44
  getTotalPagesProps: PropGetterFn;
51
45
  };
52
46
 
53
- /** @deprecated */
54
- export interface IPaginationHandlers extends PaginationHandlers, UnknownProperties {}
55
47
  export type PaginationHandlers = {
56
48
  totalPages: (value: number) => void;
57
49
  currentPage: (value: number) => void;
@@ -74,6 +66,7 @@ declare const Pagination: Intergalactic.Component<
74
66
  >;
75
67
  PageInput: Intergalactic.Component<'div', PageInputProps, {}, [handlers: PaginationHandlers]> & {
76
68
  Value: typeof Input.Value;
69
+ Addon: typeof Input.Addon;
77
70
  };
78
71
  };
79
72