@carbon/react 1.15.0 → 1.16.0-rc.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 (67) hide show
  1. package/es/components/CodeSnippet/CodeSnippet.js +2 -1
  2. package/es/components/ComboBox/ComboBox.js +45 -24
  3. package/es/components/DataTable/TableHeader.js +1 -1
  4. package/es/components/DatePicker/DatePicker.js +10 -8
  5. package/es/components/Dropdown/Dropdown.js +2 -2
  6. package/es/components/FluidComboBox/FluidComboBox.Skeleton.js +41 -0
  7. package/es/components/FluidComboBox/FluidComboBox.js +140 -0
  8. package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js +41 -0
  9. package/es/components/FluidMultiSelect/FluidMultiSelect.js +151 -0
  10. package/es/components/FluidSelect/FluidSelect.Skeleton.js +41 -0
  11. package/es/components/FluidSelect/FluidSelect.js +93 -0
  12. package/es/components/FluidTextArea/FluidTextArea.js +2 -1
  13. package/es/components/InlineLoading/InlineLoading.js +2 -4
  14. package/es/components/ListBox/ListBox.js +2 -1
  15. package/es/components/MultiSelect/FilterableMultiSelect.js +41 -21
  16. package/es/components/MultiSelect/MultiSelect.js +28 -12
  17. package/es/components/OverflowMenu/OverflowMenu.js +2 -2
  18. package/es/components/Pagination/Pagination.js +271 -270
  19. package/es/components/Pagination/index.js +1 -6
  20. package/es/components/Select/Select.js +23 -5
  21. package/es/components/TextArea/TextArea.js +2 -2
  22. package/es/components/TextInput/ControlledPasswordInput.js +2 -3
  23. package/es/components/TextInput/PasswordInput.js +3 -3
  24. package/es/components/TextInput/TextInput.js +6 -7
  25. package/es/components/Tile/next/Tile.js +18 -22
  26. package/es/components/Tooltip/next/DefinitionTooltip.js +11 -2
  27. package/es/components/UIShell/HeaderMenu.js +15 -4
  28. package/es/components/UIShell/SideNavMenu.js +2 -1
  29. package/es/index.js +14 -8
  30. package/es/internal/useNormalizedInputProps.js +2 -1
  31. package/lib/components/CodeSnippet/CodeSnippet.js +2 -1
  32. package/lib/components/ComboBox/ComboBox.js +44 -23
  33. package/lib/components/DataTable/TableHeader.js +1 -1
  34. package/lib/components/DatePicker/DatePicker.js +10 -8
  35. package/lib/components/Dropdown/Dropdown.js +2 -2
  36. package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js +51 -0
  37. package/lib/components/FluidComboBox/FluidComboBox.js +150 -0
  38. package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js +51 -0
  39. package/lib/components/FluidMultiSelect/FluidMultiSelect.js +161 -0
  40. package/lib/components/FluidSelect/FluidSelect.Skeleton.js +51 -0
  41. package/lib/components/FluidSelect/FluidSelect.js +103 -0
  42. package/lib/components/FluidTextArea/FluidTextArea.js +2 -1
  43. package/lib/components/InlineLoading/InlineLoading.js +2 -4
  44. package/lib/components/ListBox/ListBox.js +2 -1
  45. package/lib/components/MultiSelect/FilterableMultiSelect.js +40 -20
  46. package/lib/components/MultiSelect/MultiSelect.js +27 -11
  47. package/lib/components/OverflowMenu/OverflowMenu.js +2 -2
  48. package/lib/components/Pagination/Pagination.js +269 -268
  49. package/lib/components/Pagination/index.js +2 -24
  50. package/lib/components/Select/Select.js +21 -3
  51. package/lib/components/TextArea/TextArea.js +2 -2
  52. package/lib/components/TextInput/ControlledPasswordInput.js +2 -3
  53. package/lib/components/TextInput/PasswordInput.js +3 -3
  54. package/lib/components/TextInput/TextInput.js +6 -7
  55. package/lib/components/Tile/next/Tile.js +18 -22
  56. package/lib/components/Tooltip/next/DefinitionTooltip.js +11 -2
  57. package/lib/components/UIShell/HeaderMenu.js +15 -4
  58. package/lib/components/UIShell/SideNavMenu.js +2 -1
  59. package/lib/index.js +98 -86
  60. package/lib/internal/useNormalizedInputProps.js +2 -1
  61. package/package.json +4 -4
  62. package/scss/components/fluid-select/_fluid-select.scss +9 -0
  63. package/scss/components/fluid-select/_index.scss +9 -0
  64. package/es/components/FileUploader/index.js +0 -15
  65. package/es/components/Pagination/next/Pagination.js +0 -421
  66. package/lib/components/FileUploader/index.js +0 -39
  67. package/lib/components/Pagination/next/Pagination.js +0 -431
@@ -5,288 +5,311 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, typeof as _typeof, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import PropTypes from 'prop-types';
10
- import React__default, { Component } from 'react';
11
- import cx from 'classnames';
8
+ import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
12
9
  import { CaretLeft, CaretRight } from '@carbon/icons-react';
10
+ import cx from 'classnames';
11
+ import PropTypes from 'prop-types';
12
+ import React__default, { useRef, useState } from 'react';
13
13
  import Select from '../Select/Select.js';
14
14
  import SelectItem from '../SelectItem/SelectItem.js';
15
15
  import { equals } from '../../tools/array.js';
16
- import Button from '../Button/Button.js';
17
- import { PrefixContext } from '../../internal/usePrefix.js';
16
+ import { useFallbackId } from '../../internal/useId.js';
17
+ import { usePrefix } from '../../internal/usePrefix.js';
18
+ import { IconButton } from '../IconButton/index.js';
19
+
20
+ var _CaretLeft, _CaretRight;
18
21
 
19
- var _excluded = ["backwardText", "className", "forwardText", "id", "itemsPerPageText", "itemRangeText", "pageRangeText", "pageSize", "pageSizes", "itemText", "pageText", "pageNumberText", "pagesUnknown", "isLastPage", "disabled", "pageInputDisabled", "pageSizeInputDisabled", "totalItems", "onChange", "page", "size", "forwardedRef"];
20
- var instanceId = 0;
22
+ var _excluded = ["backwardText", "className", "disabled", "forwardText", "id", "isLastPage", "itemText", "itemRangeText", "itemsPerPageText", "onChange", "pageNumberText", "pageRangeText", "page", "pageInputDisabled", "pageSize", "pageSizeInputDisabled", "pageSizes", "pageText", "pagesUnknown", "size", "totalItems"];
21
23
 
22
- var mapPageSizesToObject = function mapPageSizesToObject(sizes) {
24
+ function mapPageSizesToObject(sizes) {
23
25
  return _typeof(sizes[0]) === 'object' && sizes[0] !== null ? sizes : sizes.map(function (size) {
24
26
  return {
25
27
  text: size,
26
28
  value: size
27
29
  };
28
30
  });
29
- };
30
-
31
- var Pagination = /*#__PURE__*/function (_Component) {
32
- _inherits(Pagination, _Component);
33
-
34
- var _super = _createSuper(Pagination);
35
-
36
- function Pagination(props) {
37
- var _this;
38
-
39
- _classCallCheck(this, Pagination);
31
+ }
32
+
33
+ function renderSelectItems(total) {
34
+ var counter = 1;
35
+ var itemArr = [];
36
+
37
+ while (counter <= total) {
38
+ itemArr.push( /*#__PURE__*/React__default.createElement(SelectItem, {
39
+ key: counter,
40
+ value: counter,
41
+ text: String(counter)
42
+ }));
43
+ counter++;
44
+ }
40
45
 
41
- _this = _super.call(this, props);
46
+ return itemArr;
47
+ }
42
48
 
43
- _defineProperty(_assertThisInitialized(_this), "handleSizeChange", function (evt) {
44
- var pageSize = Number(evt.target.value);
49
+ function getPageSize(pageSizes, pageSize) {
50
+ if (pageSize) {
51
+ var hasSize = pageSizes.find(function (size) {
52
+ return pageSize === size.value;
53
+ });
45
54
 
46
- _this.setState({
47
- pageSize: pageSize,
48
- page: 1
49
- });
55
+ if (hasSize) {
56
+ return pageSize;
57
+ }
58
+ }
50
59
 
51
- _this.props.onChange({
52
- page: 1,
53
- pageSize: pageSize
54
- });
55
- });
60
+ return pageSizes[0].value;
61
+ }
62
+
63
+ var Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref, ref) {
64
+ var _cx, _cx2, _cx3;
65
+
66
+ var _ref$backwardText = _ref.backwardText,
67
+ backwardText = _ref$backwardText === void 0 ? 'Previous page' : _ref$backwardText,
68
+ customClassName = _ref.className,
69
+ _ref$disabled = _ref.disabled,
70
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
71
+ _ref$forwardText = _ref.forwardText,
72
+ forwardText = _ref$forwardText === void 0 ? 'Next page' : _ref$forwardText,
73
+ id = _ref.id,
74
+ _ref$isLastPage = _ref.isLastPage,
75
+ isLastPage = _ref$isLastPage === void 0 ? false : _ref$isLastPage,
76
+ _ref$itemText = _ref.itemText,
77
+ itemText = _ref$itemText === void 0 ? function (min, max) {
78
+ return "".concat(min, "\u2013").concat(max, " items");
79
+ } : _ref$itemText,
80
+ _ref$itemRangeText = _ref.itemRangeText,
81
+ itemRangeText = _ref$itemRangeText === void 0 ? function (min, max, total) {
82
+ return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
83
+ } : _ref$itemRangeText,
84
+ _ref$itemsPerPageText = _ref.itemsPerPageText,
85
+ itemsPerPageText = _ref$itemsPerPageText === void 0 ? 'Items per page:' : _ref$itemsPerPageText,
86
+ onChange = _ref.onChange;
87
+ _ref.pageNumberText;
88
+ var _ref$pageRangeText = _ref.pageRangeText,
89
+ pageRangeText = _ref$pageRangeText === void 0 ? function (_current, total) {
90
+ return "of ".concat(total, " ").concat(total === 1 ? 'page' : 'pages');
91
+ } : _ref$pageRangeText,
92
+ _ref$page = _ref.page,
93
+ controlledPage = _ref$page === void 0 ? 1 : _ref$page,
94
+ pageInputDisabled = _ref.pageInputDisabled,
95
+ controlledPageSize = _ref.pageSize,
96
+ pageSizeInputDisabled = _ref.pageSizeInputDisabled,
97
+ controlledPageSizes = _ref.pageSizes,
98
+ _ref$pageText = _ref.pageText,
99
+ pageText = _ref$pageText === void 0 ? function (page) {
100
+ return "page ".concat(page);
101
+ } : _ref$pageText,
102
+ _ref$pagesUnknown = _ref.pagesUnknown,
103
+ pagesUnknown = _ref$pagesUnknown === void 0 ? false : _ref$pagesUnknown,
104
+ _ref$size = _ref.size,
105
+ size = _ref$size === void 0 ? 'md' : _ref$size,
106
+ totalItems = _ref.totalItems,
107
+ rest = _objectWithoutProperties(_ref, _excluded);
108
+
109
+ var prefix = usePrefix();
110
+ var inputId = useFallbackId(id);
111
+ var backBtnRef = useRef(null);
112
+ var forwardBtnRef = useRef(null);
113
+
114
+ var _useState = useState(function () {
115
+ return mapPageSizesToObject(controlledPageSizes);
116
+ }),
117
+ _useState2 = _slicedToArray(_useState, 2),
118
+ pageSizes = _useState2[0],
119
+ setPageSizes = _useState2[1];
120
+
121
+ var _useState3 = useState(controlledPageSizes),
122
+ _useState4 = _slicedToArray(_useState3, 2),
123
+ prevPageSizes = _useState4[0],
124
+ setPrevPageSizes = _useState4[1];
125
+
126
+ var _useState5 = useState(controlledPage),
127
+ _useState6 = _slicedToArray(_useState5, 2),
128
+ page = _useState6[0],
129
+ setPage = _useState6[1];
130
+
131
+ var _useState7 = useState(controlledPage),
132
+ _useState8 = _slicedToArray(_useState7, 2),
133
+ prevControlledPage = _useState8[0],
134
+ setPrevControlledPage = _useState8[1];
135
+
136
+ var _useState9 = useState(function () {
137
+ return getPageSize(pageSizes, controlledPageSize);
138
+ }),
139
+ _useState10 = _slicedToArray(_useState9, 2),
140
+ pageSize = _useState10[0],
141
+ setPageSize = _useState10[1];
142
+
143
+ var _useState11 = useState(controlledPageSize),
144
+ _useState12 = _slicedToArray(_useState11, 2),
145
+ prevControlledPageSize = _useState12[0],
146
+ setPrevControlledPageSize = _useState12[1];
147
+
148
+ var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--pagination"), true), _defineProperty(_cx, "".concat(prefix, "--pagination--").concat(size), size), _defineProperty(_cx, customClassName, !!customClassName), _cx));
149
+ var totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
150
+ var backButtonDisabled = disabled || page === 1;
151
+ var backButtonClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--pagination__button"), true), _defineProperty(_cx2, "".concat(prefix, "--pagination__button--backward"), true), _defineProperty(_cx2, "".concat(prefix, "--pagination__button--no-index"), backButtonDisabled), _cx2));
152
+ var forwardButtonDisabled = disabled || page === totalPages;
153
+ var forwardButtonClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--pagination__button"), true), _defineProperty(_cx3, "".concat(prefix, "--pagination__button--forward"), true), _defineProperty(_cx3, "".concat(prefix, "--pagination__button--no-index"), forwardButtonDisabled), _cx3));
154
+ var selectItems = renderSelectItems(totalPages); // Sync state with props
155
+
156
+ if (controlledPage !== prevControlledPage) {
157
+ setPage(controlledPage);
158
+ setPrevControlledPage(controlledPage);
159
+ }
56
160
 
57
- _defineProperty(_assertThisInitialized(_this), "handlePageChange", function (evt) {
58
- _this.setState({
59
- page: evt.target.value
60
- });
61
- });
161
+ if (controlledPageSize !== prevControlledPageSize) {
162
+ setPageSize(getPageSize(pageSizes, controlledPageSize));
163
+ setPrevControlledPageSize(controlledPageSize);
164
+ }
62
165
 
63
- _defineProperty(_assertThisInitialized(_this), "handlePageInputChange", function (evt) {
64
- var page = Number(evt.target.value);
166
+ if (!equals(controlledPageSizes, prevPageSizes)) {
167
+ var _pageSizes = mapPageSizesToObject(controlledPageSizes);
65
168
 
66
- if (page > 0 && page <= Math.max(Math.ceil(_this.props.totalItems / _this.state.pageSize), 1)) {
67
- _this.setState({
68
- page: page
69
- });
169
+ var hasPageSize = _pageSizes.find(function (size) {
170
+ return size.value === pageSize;
171
+ }); // Reset page to 1 if the current pageSize is not included in the new page
172
+ // sizes
70
173
 
71
- _this.props.onChange({
72
- page: page,
73
- pageSize: _this.state.pageSize
74
- });
75
- }
76
- });
77
174
 
78
- _defineProperty(_assertThisInitialized(_this), "incrementPage", function () {
79
- var page = _this.state.page + 1;
175
+ if (!hasPageSize) {
176
+ setPage(1);
177
+ }
80
178
 
81
- _this.setState({
82
- page: page
83
- });
179
+ setPageSizes(_pageSizes);
180
+ setPrevPageSizes(controlledPageSizes);
181
+ }
84
182
 
85
- _this.props.onChange({
86
- page: page,
87
- pageSize: _this.state.pageSize
88
- });
89
- });
183
+ function handleSizeChange(event) {
184
+ var pageSize = Number(event.target.value);
185
+ var changes = {
186
+ pageSize: pageSize,
187
+ page: 1
188
+ };
189
+ setPage(changes.page);
190
+ setPageSize(changes.pageSize);
90
191
 
91
- _defineProperty(_assertThisInitialized(_this), "decrementPage", function () {
92
- var page = _this.state.page - 1;
192
+ if (onChange) {
193
+ onChange(changes);
194
+ }
195
+ }
93
196
 
94
- _this.setState({
95
- page: page
96
- });
197
+ function handlePageInputChange(event) {
198
+ var page = Number(event.target.value);
97
199
 
98
- _this.props.onChange({
99
- page: page,
100
- pageSize: _this.state.pageSize
101
- });
102
- });
200
+ if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
201
+ setPage(page);
103
202
 
104
- _defineProperty(_assertThisInitialized(_this), "renderSelectItems", function (total) {
105
- var counter = 1;
106
- var itemArr = [];
107
-
108
- while (counter <= total) {
109
- itemArr.push( /*#__PURE__*/React__default.createElement(SelectItem, {
110
- key: counter,
111
- value: counter,
112
- text: String(counter)
113
- }));
114
- counter++;
203
+ if (onChange) {
204
+ onChange({
205
+ page: page,
206
+ pageSize: pageSize
207
+ });
115
208
  }
209
+ }
210
+ }
116
211
 
117
- return itemArr;
118
- });
212
+ function incrementPage() {
213
+ var nextPage = page + 1;
214
+ setPage(nextPage); // when the increment button reaches the last page,
215
+ // the icon button becomes disabled and the focus shifts to `main`
216
+ // this presents an a11y problem for keyboard & screen reader users
217
+ // instead, we want the focus to shift to the other pagination btn
119
218
 
120
- var _this$props = _this.props,
121
- _pageSizes = _this$props.pageSizes,
122
- _page = _this$props.page,
123
- _pageSize = _this$props.pageSize;
124
- var pageSizes = mapPageSizesToObject(_pageSizes);
125
- _this.state = {
126
- page: _page,
127
- pageSize: _pageSize && pageSizes.some(function (sizeObj) {
128
- return _pageSize === sizeObj.value;
129
- }) ? _pageSize : pageSizes[0].value,
130
- prevPageSizes: pageSizes,
131
- prevPage: _page,
132
- prevPageSize: _pageSize
133
- };
134
- _this.uniqueId = ++instanceId;
135
- return _this;
136
- }
219
+ if (nextPage === totalPages) {
220
+ backBtnRef.current.focus();
221
+ }
137
222
 
138
- _createClass(Pagination, [{
139
- key: "render",
140
- value: function render() {
141
- var _this2 = this;
142
-
143
- var _this$props2 = this.props,
144
- backwardText = _this$props2.backwardText,
145
- className = _this$props2.className,
146
- forwardText = _this$props2.forwardText,
147
- id = _this$props2.id,
148
- itemsPerPageText = _this$props2.itemsPerPageText,
149
- itemRangeText = _this$props2.itemRangeText,
150
- pageRangeText = _this$props2.pageRangeText;
151
- _this$props2.pageSize;
152
- var _pageSizes = _this$props2.pageSizes,
153
- itemText = _this$props2.itemText,
154
- pageText = _this$props2.pageText;
155
- _this$props2.pageNumberText;
156
- var pagesUnknown = _this$props2.pagesUnknown,
157
- isLastPage = _this$props2.isLastPage,
158
- disabled = _this$props2.disabled,
159
- pageInputDisabled = _this$props2.pageInputDisabled,
160
- pageSizeInputDisabled = _this$props2.pageSizeInputDisabled,
161
- totalItems = _this$props2.totalItems;
162
- _this$props2.onChange;
163
- _this$props2.page;
164
- var size = _this$props2.size,
165
- forwardedRef = _this$props2.forwardedRef,
166
- other = _objectWithoutProperties(_this$props2, _excluded);
167
-
168
- return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
169
- var classNames = cx("".concat(prefix, "--pagination"), className, _defineProperty({}, "".concat(prefix, "--pagination--").concat(size), size));
170
- var inputId = id || _this2.uniqueId;
171
- var _this2$state = _this2.state,
172
- statePage = _this2$state.page,
173
- statePageSize = _this2$state.pageSize;
174
- var totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
175
- var backButtonDisabled = disabled || statePage === 1;
176
- var backButtonClasses = cx("".concat(prefix, "--pagination__button"), "".concat(prefix, "--pagination__button--backward"), _defineProperty({}, "".concat(prefix, "--pagination__button--no-index"), backButtonDisabled));
177
- var forwardButtonDisabled = disabled || statePage === totalPages;
178
- var forwardButtonClasses = cx("".concat(prefix, "--pagination__button"), "".concat(prefix, "--pagination__button--forward"), _defineProperty({}, "".concat(prefix, "--pagination__button--no-index"), forwardButtonDisabled));
179
-
180
- var selectItems = _this2.renderSelectItems(totalPages);
181
-
182
- var pageSizes = mapPageSizesToObject(_pageSizes);
183
- return /*#__PURE__*/React__default.createElement("div", _extends({
184
- className: classNames,
185
- ref: forwardedRef
186
- }, other), /*#__PURE__*/React__default.createElement("div", {
187
- className: "".concat(prefix, "--pagination__left")
188
- }, /*#__PURE__*/React__default.createElement("label", {
189
- id: "".concat(prefix, "-pagination-select-").concat(inputId, "-count-label"),
190
- className: "".concat(prefix, "--pagination__text"),
191
- htmlFor: "".concat(prefix, "-pagination-select-").concat(inputId)
192
- }, itemsPerPageText), /*#__PURE__*/React__default.createElement(Select, {
193
- id: "".concat(prefix, "-pagination-select-").concat(inputId),
194
- className: "".concat(prefix, "--select__item-count"),
195
- labelText: "",
196
- hideLabel: true,
197
- noLabel: true,
198
- inline: true,
199
- onChange: _this2.handleSizeChange,
200
- disabled: pageSizeInputDisabled || disabled,
201
- value: statePageSize
202
- }, pageSizes.map(function (sizeObj) {
203
- return /*#__PURE__*/React__default.createElement(SelectItem, {
204
- key: sizeObj.value,
205
- value: sizeObj.value,
206
- text: String(sizeObj.text)
207
- });
208
- })), /*#__PURE__*/React__default.createElement("span", {
209
- className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
210
- }, pagesUnknown ? itemText(statePageSize * (statePage - 1) + 1, statePage * statePageSize) : itemRangeText(Math.min(statePageSize * (statePage - 1) + 1, totalItems), Math.min(statePage * statePageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
211
- className: "".concat(prefix, "--pagination__right")
212
- }, /*#__PURE__*/React__default.createElement(Select, {
213
- id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
214
- className: "".concat(prefix, "--select__page-number"),
215
- labelText: "Page number, of ".concat(totalPages, " pages"),
216
- inline: true,
217
- hideLabel: true,
218
- onChange: _this2.handlePageInputChange,
219
- value: statePage,
220
- disabled: pageInputDisabled || disabled
221
- }, selectItems), /*#__PURE__*/React__default.createElement("span", {
222
- className: "".concat(prefix, "--pagination__text")
223
- }, pagesUnknown ? pageText(statePage) : pageRangeText(statePage, totalPages)), /*#__PURE__*/React__default.createElement("div", {
224
- className: "".concat(prefix, "--pagination__control-buttons")
225
- }, /*#__PURE__*/React__default.createElement(Button, {
226
- kind: "ghost",
227
- className: backButtonClasses,
228
- hasIconOnly: true,
229
- renderIcon: CaretLeft,
230
- iconDescription: backwardText,
231
- tooltipAlignment: "center",
232
- tooltipPosition: "top",
233
- onClick: _this2.decrementPage,
234
- disabled: backButtonDisabled
235
- }), /*#__PURE__*/React__default.createElement(Button, {
236
- kind: "ghost",
237
- className: forwardButtonClasses,
238
- hasIconOnly: true,
239
- renderIcon: CaretRight,
240
- iconDescription: forwardText,
241
- tooltipAlignment: "end",
242
- tooltipPosition: "top",
243
- onClick: _this2.incrementPage,
244
- disabled: forwardButtonDisabled || isLastPage
245
- }))));
223
+ if (onChange) {
224
+ onChange({
225
+ page: nextPage,
226
+ pageSize: pageSize,
227
+ backBtnRef: backBtnRef
246
228
  });
247
229
  }
248
- }], [{
249
- key: "getDerivedStateFromProps",
250
- value: function getDerivedStateFromProps(_ref, state) {
251
- var _pageSizes = _ref.pageSizes,
252
- page = _ref.page,
253
- pageSize = _ref.pageSize;
254
- var prevPageSizes = state.prevPageSizes,
255
- prevPage = state.prevPage,
256
- prevPageSize = state.prevPageSize,
257
- currentPage = state.page,
258
- currentPageSize = state.pageSize;
259
- var pageSizes = mapPageSizesToObject(_pageSizes);
260
- var pageSizesValues = pageSizes.map(function (sizeObj) {
261
- return sizeObj.value;
262
- });
263
- var prevPageSizesValues = prevPageSizes.map(function (sizeObj) {
264
- return sizeObj.value;
265
- });
266
- var pageSizesChanged = !equals(pageSizesValues, prevPageSizesValues);
230
+ }
267
231
 
268
- if (pageSizesChanged && !pageSizes.some(function (sizeObj) {
269
- return pageSize === sizeObj.value;
270
- })) {
271
- pageSize = pageSizes[0].value;
272
- }
232
+ function decrementPage() {
233
+ var nextPage = page - 1;
234
+ setPage(nextPage); // when the decrement button reaches the first page,
235
+ // the icon button becomes disabled and the focus shifts to `main`
236
+ // this presents an a11y problem for keyboard & screen reader users
237
+ // instead, we want the focus to shift to the other pagination btn
273
238
 
274
- var pageChanged = page !== prevPage;
275
- var pageSizeChanged = pageSize !== prevPageSize;
276
- return !pageSizesChanged && !pageChanged && !pageSizeChanged ? null : {
277
- page: pageSizeChanged && 1 || pageChanged && page || currentPage,
278
- pageSize: pageSizeChanged ? pageSize : currentPageSize,
279
- prevPageSizes: pageSizes,
280
- prevPage: page,
281
- prevPageSize: pageSize
282
- };
239
+ if (nextPage === 1) {
240
+ forwardBtnRef.current.focus();
283
241
  }
284
- }]);
285
242
 
286
- return Pagination;
287
- }(Component);
243
+ if (onChange) {
244
+ onChange({
245
+ page: nextPage,
246
+ pageSize: pageSize,
247
+ forwardBtnRef: forwardBtnRef
248
+ });
249
+ }
250
+ }
288
251
 
289
- _defineProperty(Pagination, "propTypes", {
252
+ return /*#__PURE__*/React__default.createElement("div", _extends({
253
+ className: className,
254
+ ref: ref
255
+ }, rest), /*#__PURE__*/React__default.createElement("div", {
256
+ className: "".concat(prefix, "--pagination__left")
257
+ }, /*#__PURE__*/React__default.createElement("label", {
258
+ id: "".concat(prefix, "-pagination-select-").concat(inputId, "-count-label"),
259
+ className: "".concat(prefix, "--pagination__text"),
260
+ htmlFor: "".concat(prefix, "-pagination-select-").concat(inputId)
261
+ }, itemsPerPageText), /*#__PURE__*/React__default.createElement(Select, {
262
+ id: "".concat(prefix, "-pagination-select-").concat(inputId),
263
+ className: "".concat(prefix, "--select__item-count"),
264
+ labelText: "",
265
+ hideLabel: true,
266
+ noLabel: true,
267
+ inline: true,
268
+ onChange: handleSizeChange,
269
+ disabled: pageSizeInputDisabled || disabled,
270
+ value: pageSize
271
+ }, pageSizes.map(function (sizeObj) {
272
+ return /*#__PURE__*/React__default.createElement(SelectItem, {
273
+ key: sizeObj.value,
274
+ value: sizeObj.value,
275
+ text: String(sizeObj.text)
276
+ });
277
+ })), /*#__PURE__*/React__default.createElement("span", {
278
+ className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
279
+ }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
280
+ className: "".concat(prefix, "--pagination__right")
281
+ }, /*#__PURE__*/React__default.createElement(Select, {
282
+ id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
283
+ className: "".concat(prefix, "--select__page-number"),
284
+ labelText: "Page number, of ".concat(totalPages, " pages"),
285
+ inline: true,
286
+ hideLabel: true,
287
+ onChange: handlePageInputChange,
288
+ value: page,
289
+ disabled: pageInputDisabled || disabled
290
+ }, selectItems), /*#__PURE__*/React__default.createElement("span", {
291
+ className: "".concat(prefix, "--pagination__text")
292
+ }, pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default.createElement("div", {
293
+ className: "".concat(prefix, "--pagination__control-buttons")
294
+ }, /*#__PURE__*/React__default.createElement(IconButton, {
295
+ align: "top",
296
+ disabled: backButtonDisabled,
297
+ kind: "ghost",
298
+ className: backButtonClasses,
299
+ label: backwardText,
300
+ onClick: decrementPage,
301
+ ref: backBtnRef
302
+ }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))), /*#__PURE__*/React__default.createElement(IconButton, {
303
+ align: "top-right",
304
+ disabled: forwardButtonDisabled || isLastPage,
305
+ kind: "ghost",
306
+ className: forwardButtonClasses,
307
+ label: forwardText,
308
+ onClick: incrementPage,
309
+ ref: forwardBtnRef
310
+ }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))))));
311
+ });
312
+ Pagination.propTypes = {
290
313
  /**
291
314
  * The description for the backward icon.
292
315
  */
@@ -384,7 +407,7 @@ _defineProperty(Pagination, "propTypes", {
384
407
  pagesUnknown: PropTypes.bool,
385
408
 
386
409
  /**
387
- * Specify the size of the Pagination. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
410
+ * Specify the size of the Pagination.
388
411
  */
389
412
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
390
413
 
@@ -392,29 +415,7 @@ _defineProperty(Pagination, "propTypes", {
392
415
  * The total number of items.
393
416
  */
394
417
  totalItems: PropTypes.number
395
- });
396
-
397
- _defineProperty(Pagination, "defaultProps", {
398
- backwardText: 'Previous page',
399
- itemRangeText: function itemRangeText(min, max, total) {
400
- return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
401
- },
402
- forwardText: 'Next page',
403
- itemsPerPageText: 'Items per page:',
404
- pageNumberText: 'Page Number',
405
- pageRangeText: function pageRangeText(current, total) {
406
- return "of ".concat(total, " ").concat(total === 1 ? 'page' : 'pages');
407
- },
408
- disabled: false,
409
- page: 1,
410
- pagesUnknown: false,
411
- isLastPage: false,
412
- itemText: function itemText(min, max) {
413
- return "".concat(min, "\u2013").concat(max, " items");
414
- },
415
- pageText: function pageText(page) {
416
- return "page ".concat(page);
417
- }
418
- });
418
+ };
419
+ var Pagination$1 = Pagination;
419
420
 
420
- export { Pagination as default };
421
+ export { Pagination$1 as default };
@@ -5,10 +5,5 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import * as FeatureFlags from '@carbon/feature-flags';
9
8
  import Pagination from './Pagination.js';
10
- import PaginationNext from './next/Pagination.js';
11
-
12
- var index = FeatureFlags.enabled('enable-v11-release') ? PaginationNext : Pagination;
13
-
14
- export { index as default };
9
+ export { default } from './Pagination.js';