@carbon/react 1.102.0 → 1.103.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 (153) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +1011 -1011
  2. package/es/components/Breadcrumb/BreadcrumbItem.js +1 -1
  3. package/es/components/Button/Button.Skeleton.js +2 -1
  4. package/es/components/Button/Button.d.ts +4 -4
  5. package/es/components/Button/Button.js +4 -4
  6. package/es/components/Button/index.js +1 -1
  7. package/es/components/ButtonSet/ButtonSet.js +1 -1
  8. package/es/components/Checkbox/index.js +1 -1
  9. package/es/components/ComboBox/ComboBox.js +2 -2
  10. package/es/components/ComposedModal/ComposedModal.js +0 -3
  11. package/es/components/ComposedModal/ComposedModalPresence.d.ts +9 -1
  12. package/es/components/ComposedModal/ComposedModalPresence.js +14 -1
  13. package/es/components/ComposedModal/index.d.ts +1 -1
  14. package/es/components/ContainedList/index.js +1 -1
  15. package/es/components/DataTable/TableHeader.js +1 -1
  16. package/es/components/DataTable/TableRow.js +1 -1
  17. package/es/components/DataTable/TableToolbarMenu.js +1 -1
  18. package/es/components/DatePicker/DatePicker.Skeleton.d.ts +8 -5
  19. package/es/components/DatePicker/DatePicker.Skeleton.js +2 -2
  20. package/es/components/DatePicker/DatePicker.d.ts +4 -2
  21. package/es/components/DatePicker/DatePicker.js +9 -6
  22. package/es/components/DatePicker/index.js +1 -1
  23. package/es/components/DatePicker/plugins/rangePlugin.d.ts +1 -1
  24. package/es/components/DatePicker/plugins/rangePlugin.js +2 -1
  25. package/es/components/{UIShell/_utils.d.ts → DatePicker/utils.d.ts} +2 -2
  26. package/es/components/{UIShell/_utils.js → DatePicker/utils.js} +2 -2
  27. package/es/components/DatePickerInput/DatePickerInput.js +1 -1
  28. package/es/components/Dialog/Dialog.js +1 -1
  29. package/es/components/Dropdown/index.js +1 -1
  30. package/es/components/ExpandableSearch/ExpandableSearch.js +1 -1
  31. package/es/components/FeatureFlags/index.d.ts +8 -18
  32. package/es/components/FeatureFlags/index.js +23 -103
  33. package/es/components/FileUploader/FileUploader.Skeleton.js +1 -1
  34. package/es/components/FileUploader/FileUploaderButton.d.ts +1 -1
  35. package/es/components/FileUploader/FileUploaderButton.js +3 -7
  36. package/es/components/Icon/Icon.Skeleton.js +1 -1
  37. package/es/components/IconIndicator/index.js +1 -1
  38. package/es/components/Menu/MenuItem.js +1 -1
  39. package/es/components/Modal/ModalPresence.d.ts +9 -1
  40. package/es/components/Modal/ModalPresence.js +14 -1
  41. package/es/components/Modal/index.d.ts +2 -2
  42. package/es/components/MultiSelect/MultiSelect.js +9 -10
  43. package/es/components/Notification/Notification.js +1 -1
  44. package/es/components/NumberInput/NumberInput.js +15 -13
  45. package/es/components/OverflowMenu/OverflowMenu.d.ts +1 -1
  46. package/es/components/OverflowMenu/OverflowMenu.js +3 -5
  47. package/es/components/OverflowMenuV2/index.js +1 -1
  48. package/es/components/PageHeader/PageHeader.js +2 -23
  49. package/es/components/Pagination/Pagination.Skeleton.js +1 -1
  50. package/es/components/Pagination/Pagination.d.ts +4 -0
  51. package/es/components/Pagination/Pagination.js +6 -1
  52. package/es/components/Pagination/experimental/Pagination.js +12 -1
  53. package/es/components/Popover/index.js +1 -1
  54. package/es/components/RadioButton/RadioButton.Skeleton.js +1 -1
  55. package/es/components/Search/index.js +1 -1
  56. package/es/components/Select/index.js +1 -1
  57. package/es/components/ShapeIndicator/index.js +1 -1
  58. package/es/components/Slider/Slider.js +230 -249
  59. package/es/components/Slider/SliderHandles.js +65 -53
  60. package/es/components/Switch/IconSwitch.js +1 -1
  61. package/es/components/Tabs/Tabs.js +10 -12
  62. package/es/components/Tag/Tag.Skeleton.js +1 -1
  63. package/es/components/TextArea/TextArea.js +1 -1
  64. package/es/components/TextArea/index.js +1 -1
  65. package/es/components/TextInput/index.js +1 -1
  66. package/es/components/Tile/Tile.d.ts +2 -2
  67. package/es/components/Tile/Tile.js +7 -2
  68. package/es/components/Toggle/Toggle.Skeleton.js +1 -1
  69. package/es/components/Toggletip/index.js +1 -1
  70. package/es/components/UIShell/HeaderMenu.js +1 -1
  71. package/es/components/UIShell/SideNav.d.ts +1 -4
  72. package/es/components/UIShell/SideNav.js +10 -25
  73. package/es/components/UIShell/SideNavContext.d.ts +17 -0
  74. package/es/components/UIShell/SideNavContext.js +24 -0
  75. package/es/components/UIShell/SideNavItems.d.ts +1 -1
  76. package/es/components/UIShell/SideNavItems.js +12 -16
  77. package/es/components/UIShell/SideNavLink.js +8 -4
  78. package/es/components/UIShell/SideNavMenu.js +7 -5
  79. package/es/index.js +30 -30
  80. package/es/internal/useNoInteractiveChildren.js +25 -30
  81. package/es/internal/usePresence.d.ts +1 -1
  82. package/es/internal/usePresence.js +14 -17
  83. package/lib/components/Button/Button.Skeleton.js +2 -1
  84. package/lib/components/Button/Button.d.ts +4 -4
  85. package/lib/components/Button/Button.js +4 -4
  86. package/lib/components/Button/index.js +1 -1
  87. package/lib/components/ButtonSet/ButtonSet.js +1 -1
  88. package/lib/components/Checkbox/index.js +1 -1
  89. package/lib/components/ComboBox/ComboBox.js +2 -2
  90. package/lib/components/ComposedModal/ComposedModal.js +0 -3
  91. package/lib/components/ComposedModal/ComposedModalPresence.d.ts +9 -1
  92. package/lib/components/ComposedModal/ComposedModalPresence.js +14 -0
  93. package/lib/components/ComposedModal/index.d.ts +1 -1
  94. package/lib/components/ContainedList/index.js +0 -3
  95. package/lib/components/DataTable/TableToolbarMenu.js +1 -1
  96. package/lib/components/DatePicker/DatePicker.Skeleton.d.ts +8 -5
  97. package/lib/components/DatePicker/DatePicker.Skeleton.js +2 -2
  98. package/lib/components/DatePicker/DatePicker.d.ts +4 -2
  99. package/lib/components/DatePicker/DatePicker.js +9 -6
  100. package/lib/components/DatePicker/index.js +1 -1
  101. package/lib/components/DatePicker/plugins/rangePlugin.d.ts +1 -1
  102. package/lib/components/DatePicker/plugins/rangePlugin.js +2 -1
  103. package/lib/components/{UIShell/_utils.d.ts → DatePicker/utils.d.ts} +2 -2
  104. package/lib/components/{UIShell/_utils.js → DatePicker/utils.js} +2 -2
  105. package/lib/components/Dropdown/index.js +1 -1
  106. package/lib/components/FeatureFlags/index.d.ts +8 -18
  107. package/lib/components/FeatureFlags/index.js +21 -102
  108. package/lib/components/FileUploader/FileUploader.Skeleton.js +1 -1
  109. package/lib/components/FileUploader/FileUploaderButton.d.ts +1 -1
  110. package/lib/components/FileUploader/FileUploaderButton.js +2 -6
  111. package/lib/components/Icon/Icon.Skeleton.js +0 -3
  112. package/lib/components/IconIndicator/index.js +0 -3
  113. package/lib/components/Modal/ModalPresence.d.ts +9 -1
  114. package/lib/components/Modal/ModalPresence.js +14 -0
  115. package/lib/components/Modal/index.d.ts +2 -2
  116. package/lib/components/MultiSelect/MultiSelect.js +8 -9
  117. package/lib/components/NumberInput/NumberInput.js +14 -12
  118. package/lib/components/OverflowMenu/OverflowMenu.d.ts +1 -1
  119. package/lib/components/OverflowMenu/OverflowMenu.js +2 -7
  120. package/lib/components/OverflowMenuV2/index.js +1 -1
  121. package/lib/components/PageHeader/PageHeader.js +2 -23
  122. package/lib/components/Pagination/Pagination.Skeleton.js +0 -3
  123. package/lib/components/Pagination/Pagination.d.ts +4 -0
  124. package/lib/components/Pagination/Pagination.js +6 -1
  125. package/lib/components/Pagination/experimental/Pagination.js +12 -1
  126. package/lib/components/RadioButton/RadioButton.Skeleton.js +0 -3
  127. package/lib/components/Search/index.js +1 -1
  128. package/lib/components/Select/index.js +1 -1
  129. package/lib/components/ShapeIndicator/index.js +0 -3
  130. package/lib/components/Slider/Slider.js +229 -248
  131. package/lib/components/Slider/SliderHandles.js +64 -52
  132. package/lib/components/Tabs/Tabs.js +9 -11
  133. package/lib/components/Tag/Tag.Skeleton.js +0 -3
  134. package/lib/components/TextArea/index.js +1 -1
  135. package/lib/components/TextInput/index.js +1 -1
  136. package/lib/components/Tile/Tile.d.ts +2 -2
  137. package/lib/components/Tile/Tile.js +6 -1
  138. package/lib/components/Toggle/Toggle.Skeleton.js +0 -3
  139. package/lib/components/Toggletip/index.js +0 -3
  140. package/lib/components/UIShell/SideNav.d.ts +1 -4
  141. package/lib/components/UIShell/SideNav.js +8 -24
  142. package/lib/components/UIShell/SideNavContext.d.ts +17 -0
  143. package/lib/components/UIShell/SideNavContext.js +27 -0
  144. package/lib/components/UIShell/SideNavItems.d.ts +1 -1
  145. package/lib/components/UIShell/SideNavItems.js +11 -15
  146. package/lib/components/UIShell/SideNavLink.js +7 -3
  147. package/lib/components/UIShell/SideNavMenu.js +8 -6
  148. package/lib/index.js +102 -100
  149. package/lib/internal/useNoInteractiveChildren.js +25 -30
  150. package/lib/internal/usePresence.d.ts +1 -1
  151. package/lib/internal/usePresence.js +13 -16
  152. package/package.json +5 -5
  153. package/telemetry.yml +2 -1
@@ -374,37 +374,19 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
374
374
  const classNames = cx({
375
375
  [`${prefix}--page-header__tab-bar`]: true
376
376
  }, className);
377
- // Early return if no tags are provided
378
- if (!tags.length) {
379
- return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
380
- className: classNames,
381
- ref: ref
382
- }, other), /*#__PURE__*/React.createElement(Grid.Grid, null, /*#__PURE__*/React.createElement(Column.default, {
383
- lg: 16,
384
- md: 8,
385
- sm: 4
386
- }, children)));
387
- }
388
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
389
377
  const [openPopover, setOpenPopover] = React.useState(false);
390
378
  const tagSize = tags[0]?.size || 'md';
391
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
392
379
  const instanceId = useId.useId('PageHeaderTabBar');
393
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
394
380
  const tagsWithIds = React.useMemo(() => {
395
381
  return tags.map((tag, index) => ({
396
382
  ...tag,
397
383
  id: tag.id || `tag-${index}-${instanceId}`
398
384
  }));
399
- // eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
400
- }, [tags]);
401
-
402
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
385
+ }, [instanceId, tags]);
403
386
  const tagsContainerRef = React.useRef(null);
404
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
405
387
  const offsetRef = React.useRef(null);
388
+
406
389
  // To close popover when window resizes
407
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
408
390
  React.useEffect(() => {
409
391
  const handleResize = () => {
410
392
  // Close the popover when window resizes to prevent unwanted opens
@@ -421,14 +403,11 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(({
421
403
  visibleItems = [],
422
404
  hiddenItems = [],
423
405
  itemRefHandler = () => {}
424
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
425
406
  } = useOverflowItems.default(tagsWithIds, tagsContainerRef, offsetRef) || {
426
407
  visibleItems: [],
427
408
  hiddenItems: [],
428
409
  itemRefHandler: () => {}
429
410
  };
430
-
431
- // eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
432
411
  const handleOverflowClick = React.useCallback(event => {
433
412
  event.stopPropagation();
434
413
  setOpenPopover(prev => !prev);
@@ -7,8 +7,6 @@
7
7
 
8
8
  'use strict';
9
9
 
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
10
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
11
  var PropTypes = require('prop-types');
14
12
  var React = require('react');
@@ -46,4 +44,3 @@ PaginationSkeleton.propTypes = {
46
44
  };
47
45
 
48
46
  exports.PaginationSkeleton = PaginationSkeleton;
49
- exports.default = PaginationSkeleton;
@@ -69,6 +69,10 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElemen
69
69
  * A function returning PII showing where the current page is.
70
70
  */
71
71
  pageRangeText?: (current: number, total: number) => string;
72
+ /**
73
+ * A function returning the label for the page select.
74
+ */
75
+ pageSelectLabelText?: (total: number) => string;
72
76
  /**
73
77
  * The number dictating how many items a page contains.
74
78
  */
@@ -69,6 +69,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
69
69
  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
70
70
  pageNumberText: _pageNumberText = 'Page Number',
71
71
  pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
72
+ pageSelectLabelText = total => `Page of ${total} ${total === 1 ? 'page' : 'pages'}`,
72
73
  page: controlledPage = 1,
73
74
  pageInputDisabled,
74
75
  pageSize: controlledPageSize,
@@ -249,7 +250,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(({
249
250
  }, pageText(page)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select.default, {
250
251
  id: `${prefix}-pagination-select-${inputId}-right`,
251
252
  className: `${prefix}--select__page-number`,
252
- labelText: `Page of ${totalPages} pages`,
253
+ labelText: pageSelectLabelText(totalPages),
253
254
  inline: true,
254
255
  hideLabel: true,
255
256
  onChange: handlePageInputChange,
@@ -336,6 +337,10 @@ Pagination.propTypes = {
336
337
  * A function returning PII showing where the current page is.
337
338
  */
338
339
  pageRangeText: PropTypes.func,
340
+ /**
341
+ * A function returning the label for the page select.
342
+ */
343
+ pageSelectLabelText: PropTypes.func,
339
344
  /**
340
345
  * The number dictating how many items a page contains.
341
346
  */
@@ -82,7 +82,18 @@ function Pagination({
82
82
  hideLabel: true,
83
83
  noLabel: true,
84
84
  inline: true,
85
- onChange: event => setCurrentPageSize(Number(event.target.value)),
85
+ onChange: event => {
86
+ const pageSize = Number(event.target.value);
87
+ const page = 1;
88
+ setCurrentPage(page);
89
+ setCurrentPageSize(pageSize);
90
+ if (onChange) {
91
+ onChange({
92
+ page,
93
+ pageSize
94
+ });
95
+ }
96
+ },
86
97
  value: currentPageSize
87
98
  }, pageSizes.map(size => /*#__PURE__*/React.createElement(SelectItem.default, {
88
99
  key: size,
@@ -7,8 +7,6 @@
7
7
 
8
8
  'use strict';
9
9
 
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
10
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
11
  var PropTypes = require('prop-types');
14
12
  var React = require('react');
@@ -37,4 +35,3 @@ RadioButtonSkeleton.propTypes = {
37
35
  };
38
36
 
39
37
  exports.RadioButtonSkeleton = RadioButtonSkeleton;
40
- exports.default = RadioButtonSkeleton;
@@ -16,4 +16,4 @@ var Search_Skeleton = require('./Search.Skeleton.js');
16
16
 
17
17
  exports.Search = Search.default;
18
18
  exports.default = Search.default;
19
- exports.SearchSkeleton = Search_Skeleton.default;
19
+ exports.SearchSkeleton = Search_Skeleton.SearchSkeleton;
@@ -16,4 +16,4 @@ var Select_Skeleton = require('./Select.Skeleton.js');
16
16
 
17
17
  exports.Select = Select.default;
18
18
  exports.default = Select.default;
19
- exports.SelectSkeleton = Select_Skeleton.default;
19
+ exports.SelectSkeleton = Select_Skeleton.SelectSkeleton;
@@ -7,8 +7,6 @@
7
7
 
8
8
  'use strict';
9
9
 
10
- Object.defineProperty(exports, '__esModule', { value: true });
11
-
12
10
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
11
  var PropTypes = require('prop-types');
14
12
  var React = require('react');
@@ -96,4 +94,3 @@ ShapeIndicator.propTypes = {
96
94
 
97
95
  exports.ShapeIndicator = ShapeIndicator;
98
96
  exports.ShapeIndicatorKinds = ShapeIndicatorKinds;
99
- exports.default = ShapeIndicator;