@carbon/react 1.15.0 → 1.16.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 (71) hide show
  1. package/es/components/CodeSnippet/CodeSnippet.js +2 -2
  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/NumberInput/NumberInput.js +45 -1
  18. package/es/components/OverflowMenu/OverflowMenu.js +2 -2
  19. package/es/components/Pagination/Pagination.js +271 -270
  20. package/es/components/Pagination/index.js +1 -6
  21. package/es/components/ProgressIndicator/ProgressIndicator.Skeleton.js +10 -4
  22. package/es/components/Select/Select.js +23 -5
  23. package/es/components/TextArea/TextArea.js +2 -2
  24. package/es/components/TextInput/ControlledPasswordInput.js +2 -3
  25. package/es/components/TextInput/PasswordInput.js +3 -3
  26. package/es/components/TextInput/TextInput.js +7 -8
  27. package/es/components/Tile/next/Tile.js +18 -22
  28. package/es/components/Tooltip/next/DefinitionTooltip.js +11 -2
  29. package/es/components/UIShell/HeaderMenu.js +15 -4
  30. package/es/components/UIShell/SideNavMenu.js +2 -1
  31. package/es/index.js +14 -8
  32. package/es/internal/useNormalizedInputProps.js +15 -18
  33. package/lib/components/CodeSnippet/CodeSnippet.js +2 -2
  34. package/lib/components/ComboBox/ComboBox.js +44 -23
  35. package/lib/components/DataTable/TableHeader.js +1 -1
  36. package/lib/components/DatePicker/DatePicker.js +10 -8
  37. package/lib/components/Dropdown/Dropdown.js +2 -2
  38. package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js +51 -0
  39. package/lib/components/FluidComboBox/FluidComboBox.js +150 -0
  40. package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js +51 -0
  41. package/lib/components/FluidMultiSelect/FluidMultiSelect.js +161 -0
  42. package/lib/components/FluidSelect/FluidSelect.Skeleton.js +51 -0
  43. package/lib/components/FluidSelect/FluidSelect.js +103 -0
  44. package/lib/components/FluidTextArea/FluidTextArea.js +2 -1
  45. package/lib/components/InlineLoading/InlineLoading.js +2 -4
  46. package/lib/components/ListBox/ListBox.js +2 -1
  47. package/lib/components/MultiSelect/FilterableMultiSelect.js +40 -20
  48. package/lib/components/MultiSelect/MultiSelect.js +27 -11
  49. package/lib/components/NumberInput/NumberInput.js +45 -1
  50. package/lib/components/OverflowMenu/OverflowMenu.js +2 -2
  51. package/lib/components/Pagination/Pagination.js +269 -268
  52. package/lib/components/Pagination/index.js +2 -24
  53. package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js +9 -3
  54. package/lib/components/Select/Select.js +21 -3
  55. package/lib/components/TextArea/TextArea.js +2 -2
  56. package/lib/components/TextInput/ControlledPasswordInput.js +2 -3
  57. package/lib/components/TextInput/PasswordInput.js +3 -3
  58. package/lib/components/TextInput/TextInput.js +7 -8
  59. package/lib/components/Tile/next/Tile.js +18 -22
  60. package/lib/components/Tooltip/next/DefinitionTooltip.js +11 -2
  61. package/lib/components/UIShell/HeaderMenu.js +15 -4
  62. package/lib/components/UIShell/SideNavMenu.js +2 -1
  63. package/lib/index.js +98 -86
  64. package/lib/internal/useNormalizedInputProps.js +14 -17
  65. package/package.json +4 -4
  66. package/scss/components/fluid-select/_fluid-select.scss +9 -0
  67. package/scss/components/fluid-select/_index.scss +9 -0
  68. package/es/components/FileUploader/index.js +0 -15
  69. package/es/components/Pagination/next/Pagination.js +0 -421
  70. package/lib/components/FileUploader/index.js +0 -39
  71. package/lib/components/Pagination/next/Pagination.js +0 -431
@@ -1,421 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2016, 2022
3
- *
4
- * This source code is licensed under the Apache-2.0 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
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
- import Select from '../../Select/Select.js';
14
- import SelectItem from '../../SelectItem/SelectItem.js';
15
- import { equals } from '../../../tools/array.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;
21
-
22
- var _excluded = ["backwardText", "className", "disabled", "forwardText", "id", "isLastPage", "itemText", "itemRangeText", "itemsPerPageText", "onChange", "pageNumberText", "pageRangeText", "page", "pageInputDisabled", "pageSize", "pageSizeInputDisabled", "pageSizes", "pageText", "pagesUnknown", "size", "totalItems"];
23
-
24
- function mapPageSizesToObject(sizes) {
25
- return _typeof(sizes[0]) === 'object' && sizes[0] !== null ? sizes : sizes.map(function (size) {
26
- return {
27
- text: size,
28
- value: size
29
- };
30
- });
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
- }
45
-
46
- return itemArr;
47
- }
48
-
49
- function getPageSize(pageSizes, pageSize) {
50
- if (pageSize) {
51
- var hasSize = pageSizes.find(function (size) {
52
- return pageSize === size.value;
53
- });
54
-
55
- if (hasSize) {
56
- return pageSize;
57
- }
58
- }
59
-
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
- }
160
-
161
- if (controlledPageSize !== prevControlledPageSize) {
162
- setPageSize(getPageSize(pageSizes, controlledPageSize));
163
- setPrevControlledPageSize(controlledPageSize);
164
- }
165
-
166
- if (!equals(controlledPageSizes, prevPageSizes)) {
167
- var _pageSizes = mapPageSizesToObject(controlledPageSizes);
168
-
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
173
-
174
-
175
- if (!hasPageSize) {
176
- setPage(1);
177
- }
178
-
179
- setPageSizes(_pageSizes);
180
- setPrevPageSizes(controlledPageSizes);
181
- }
182
-
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);
191
-
192
- if (onChange) {
193
- onChange(changes);
194
- }
195
- }
196
-
197
- function handlePageInputChange(event) {
198
- var page = Number(event.target.value);
199
-
200
- if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
201
- setPage(page);
202
-
203
- if (onChange) {
204
- onChange({
205
- page: page,
206
- pageSize: pageSize
207
- });
208
- }
209
- }
210
- }
211
-
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
218
-
219
- if (nextPage === totalPages) {
220
- backBtnRef.current.focus();
221
- }
222
-
223
- if (onChange) {
224
- onChange({
225
- page: nextPage,
226
- pageSize: pageSize,
227
- backBtnRef: backBtnRef
228
- });
229
- }
230
- }
231
-
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
238
-
239
- if (nextPage === 1) {
240
- forwardBtnRef.current.focus();
241
- }
242
-
243
- if (onChange) {
244
- onChange({
245
- page: nextPage,
246
- pageSize: pageSize,
247
- forwardBtnRef: forwardBtnRef
248
- });
249
- }
250
- }
251
-
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 = {
313
- /**
314
- * The description for the backward icon.
315
- */
316
- backwardText: PropTypes.string,
317
-
318
- /**
319
- * The CSS class names.
320
- */
321
- className: PropTypes.string,
322
-
323
- /**
324
- * `true` if the backward/forward buttons, as well as the page select elements, should be disabled.
325
- */
326
- disabled: PropTypes.bool,
327
-
328
- /**
329
- * The description for the forward icon.
330
- */
331
- forwardText: PropTypes.string,
332
-
333
- /**
334
- * The unique ID of this component instance.
335
- */
336
- id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
337
- // TODO: remove when v9 is deprecated
338
-
339
- /**
340
- * `true` if the current page should be the last page.
341
- */
342
- isLastPage: PropTypes.bool,
343
-
344
- /**
345
- * The function returning a translatable text showing where the current page is,
346
- * in a manner of the range of items.
347
- */
348
- itemRangeText: PropTypes.func,
349
-
350
- /**
351
- * A variant of `itemRangeText`, used if the total number of items is unknown.
352
- */
353
- itemText: PropTypes.func,
354
-
355
- /**
356
- * The translatable text indicating the number of items per page.
357
- */
358
- itemsPerPageText: PropTypes.string,
359
-
360
- /**
361
- * The callback function called when the current page changes.
362
- */
363
- onChange: PropTypes.func,
364
-
365
- /**
366
- * The current page.
367
- */
368
- page: PropTypes.number,
369
-
370
- /**
371
- * `true` if the select box to change the page should be disabled.
372
- */
373
- pageInputDisabled: PropTypes.bool,
374
- pageNumberText: PropTypes.string,
375
-
376
- /**
377
- * A function returning PII showing where the current page is.
378
- */
379
- pageRangeText: PropTypes.func,
380
-
381
- /**
382
- * The number dictating how many items a page contains.
383
- */
384
- pageSize: PropTypes.number,
385
-
386
- /**
387
- * `true` if the select box to change the items per page should be disabled.
388
- */
389
- pageSizeInputDisabled: PropTypes.bool,
390
-
391
- /**
392
- * The choices for `pageSize`.
393
- */
394
- pageSizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.shape({
395
- text: PropTypes.text,
396
- value: PropTypes.number
397
- }))]).isRequired,
398
-
399
- /**
400
- * The translatable text showing the current page.
401
- */
402
- pageText: PropTypes.func,
403
-
404
- /**
405
- * `true` if the total number of items is unknown.
406
- */
407
- pagesUnknown: PropTypes.bool,
408
-
409
- /**
410
- * Specify the size of the Pagination.
411
- */
412
- size: PropTypes.oneOf(['sm', 'md', 'lg']),
413
-
414
- /**
415
- * The total number of items.
416
- */
417
- totalItems: PropTypes.number
418
- };
419
- var PaginationNext = Pagination;
420
-
421
- export { PaginationNext as default };
@@ -1,39 +0,0 @@
1
- /**
2
- * Copyright IBM Corp. 2016, 2022
3
- *
4
- * This source code is licensed under the Apache-2.0 license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-
8
- 'use strict';
9
-
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
- var FeatureFlags = require('@carbon/feature-flags');
13
- var FileUploader = require('./FileUploader.js');
14
- var createClassWrapper = require('../../internal/createClassWrapper.js');
15
-
16
- function _interopNamespace(e) {
17
- if (e && e.__esModule) return e;
18
- var n = Object.create(null);
19
- if (e) {
20
- Object.keys(e).forEach(function (k) {
21
- if (k !== 'default') {
22
- var d = Object.getOwnPropertyDescriptor(e, k);
23
- Object.defineProperty(n, k, d.get ? d : {
24
- enumerable: true,
25
- get: function () { return e[k]; }
26
- });
27
- }
28
- });
29
- }
30
- n["default"] = e;
31
- return Object.freeze(n);
32
- }
33
-
34
- var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
35
-
36
- var index = FeatureFlags__namespace.enabled('enable-v11-release') ? createClassWrapper.createClassWrapper(FileUploader["default"]) : FileUploader["default"];
37
-
38
- exports.FileUploader = FileUploader["default"];
39
- exports["default"] = index;