@carbon/react 1.85.1 → 1.86.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 (189) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +816 -816
  2. package/es/components/AILabel/index.js +1 -1
  3. package/es/components/Accordion/AccordionItem.d.ts +1 -1
  4. package/es/components/Accordion/AccordionItem.js +1 -1
  5. package/es/components/Checkbox/Checkbox.js +1 -1
  6. package/es/components/CheckboxGroup/CheckboxGroup.js +1 -1
  7. package/es/components/CodeSnippet/CodeSnippet.d.ts +2 -2
  8. package/es/components/CodeSnippet/CodeSnippet.js +1 -1
  9. package/es/components/ComboBox/ComboBox.js +1 -1
  10. package/es/components/ComposedModal/ComposedModal.js +1 -1
  11. package/es/components/ContentSwitcher/ContentSwitcher.d.ts +1 -1
  12. package/es/components/ContentSwitcher/ContentSwitcher.js +1 -1
  13. package/es/components/DataTable/DataTable.d.ts +230 -170
  14. package/es/components/DataTable/DataTable.js +508 -519
  15. package/es/components/DataTable/TableContainer.d.ts +9 -1
  16. package/es/components/DataTable/TableContainer.js +7 -1
  17. package/es/components/DataTable/TableExpandHeader.d.ts +1 -1
  18. package/es/components/DataTable/TableExpandHeader.js +1 -1
  19. package/es/components/DataTable/TableSelectAll.d.ts +2 -2
  20. package/es/components/DataTable/TableSelectAll.js +1 -1
  21. package/es/components/DataTable/TableSelectRow.d.ts +2 -2
  22. package/es/components/DataTable/TableSelectRow.js +1 -1
  23. package/es/components/DataTable/TableToolbar.d.ts +1 -1
  24. package/es/components/DataTable/TableToolbar.js +1 -1
  25. package/es/components/DataTable/TableToolbarMenu.d.ts +2 -18
  26. package/es/components/DataTable/TableToolbarMenu.js +0 -1
  27. package/es/components/DataTable/index.d.ts +1 -1
  28. package/es/components/DataTable/state/getDerivedStateFromProps.js +5 -1
  29. package/es/components/DatePicker/DatePicker.js +1 -1
  30. package/es/components/DatePickerInput/DatePickerInput.js +1 -1
  31. package/es/components/Dropdown/Dropdown.js +1 -1
  32. package/es/components/FeatureFlags/index.d.ts +2 -2
  33. package/es/components/FeatureFlags/index.js +1 -1
  34. package/es/components/FileUploader/FileUploaderButton.d.ts +1 -1
  35. package/es/components/FileUploader/FileUploaderButton.js +1 -1
  36. package/es/components/FileUploader/FileUploaderDropContainer.d.ts +2 -2
  37. package/es/components/FileUploader/FileUploaderDropContainer.js +1 -1
  38. package/es/components/FluidTextArea/FluidTextArea.d.ts +1 -1
  39. package/es/components/FluidTextArea/FluidTextArea.js +1 -1
  40. package/es/components/InlineCheckbox/InlineCheckbox.js +1 -1
  41. package/es/components/ListBox/ListBox.js +1 -1
  42. package/es/components/Loading/Loading.d.ts +1 -1
  43. package/es/components/Loading/Loading.js +1 -1
  44. package/es/components/Menu/Menu.js +1 -1
  45. package/es/components/Modal/Modal.js +1 -1
  46. package/es/components/MultiSelect/FilterableMultiSelect.js +1 -1
  47. package/es/components/MultiSelect/MultiSelect.js +1 -1
  48. package/es/components/Notification/Notification.d.ts +4 -4
  49. package/es/components/Notification/Notification.js +1 -1
  50. package/es/components/NumberInput/NumberInput.d.ts +7 -0
  51. package/es/components/NumberInput/NumberInput.js +80 -25
  52. package/es/components/OverflowMenu/OverflowMenu.d.ts +2 -6
  53. package/es/components/OverflowMenu/OverflowMenu.js +1 -1
  54. package/es/components/Pagination/Pagination.js +22 -5
  55. package/es/components/RadioButton/RadioButton.js +1 -1
  56. package/es/components/RadioButtonGroup/RadioButtonGroup.js +1 -1
  57. package/es/components/RadioTile/RadioTile.js +1 -1
  58. package/es/components/Search/Search.js +1 -1
  59. package/es/components/Select/Select.js +1 -1
  60. package/es/components/Slider/Slider.js +1 -1
  61. package/es/components/StructuredList/StructuredList.d.ts +5 -5
  62. package/es/components/StructuredList/StructuredList.js +1 -1
  63. package/es/components/Tabs/Tabs.d.ts +1 -1
  64. package/es/components/Tabs/Tabs.js +1 -1
  65. package/es/components/Tag/DismissibleTag.js +1 -1
  66. package/es/components/Tag/Tag.js +1 -1
  67. package/es/components/TextArea/TextArea.js +1 -1
  68. package/es/components/TextInput/ControlledPasswordInput.js +1 -1
  69. package/es/components/TextInput/PasswordInput.js +1 -1
  70. package/es/components/TextInput/TextInput.js +1 -1
  71. package/es/components/Tile/Tile.js +1 -1
  72. package/es/components/TileGroup/TileGroup.d.ts +5 -5
  73. package/es/components/TimePicker/TimePicker.d.ts +8 -0
  74. package/es/components/TimePicker/TimePicker.js +6 -4
  75. package/es/components/Tooltip/DefinitionTooltip.d.ts +1 -1
  76. package/es/components/Tooltip/DefinitionTooltip.js +1 -1
  77. package/es/components/TreeView/TreeContext.d.ts +19 -0
  78. package/es/components/TreeView/TreeContext.js +13 -0
  79. package/es/components/TreeView/TreeNode.d.ts +4 -4
  80. package/es/components/TreeView/TreeNode.js +56 -108
  81. package/es/components/TreeView/TreeView.js +42 -79
  82. package/es/components/UIShell/HeaderMenu.js +1 -1
  83. package/es/components/UIShell/HeaderMenuItem.d.ts +1 -1
  84. package/es/components/UIShell/HeaderMenuItem.js +1 -1
  85. package/es/components/UIShell/HeaderName.d.ts +1 -1
  86. package/es/components/UIShell/Link.d.ts +2 -2
  87. package/es/components/UIShell/Link.js +1 -1
  88. package/es/components/UIShell/Switcher.d.ts +1 -1
  89. package/es/components/UIShell/Switcher.js +39 -12
  90. package/es/index.js +1 -1
  91. package/es/internal/useNoInteractiveChildren.d.ts +25 -0
  92. package/es/internal/useNoInteractiveChildren.js +39 -32
  93. package/es/prop-types/deprecate.d.ts +17 -0
  94. package/es/prop-types/deprecate.js +22 -12
  95. package/lib/components/AILabel/index.js +2 -2
  96. package/lib/components/Accordion/AccordionItem.d.ts +1 -1
  97. package/lib/components/Accordion/AccordionItem.js +1 -1
  98. package/lib/components/Checkbox/Checkbox.js +1 -1
  99. package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -1
  100. package/lib/components/CodeSnippet/CodeSnippet.d.ts +2 -2
  101. package/lib/components/CodeSnippet/CodeSnippet.js +2 -2
  102. package/lib/components/ComboBox/ComboBox.js +3 -3
  103. package/lib/components/ComposedModal/ComposedModal.js +1 -1
  104. package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +1 -1
  105. package/lib/components/ContentSwitcher/ContentSwitcher.js +1 -1
  106. package/lib/components/DataTable/DataTable.d.ts +230 -170
  107. package/lib/components/DataTable/DataTable.js +507 -518
  108. package/lib/components/DataTable/TableContainer.d.ts +9 -1
  109. package/lib/components/DataTable/TableContainer.js +7 -1
  110. package/lib/components/DataTable/TableExpandHeader.d.ts +1 -1
  111. package/lib/components/DataTable/TableExpandHeader.js +1 -1
  112. package/lib/components/DataTable/TableSelectAll.d.ts +2 -2
  113. package/lib/components/DataTable/TableSelectAll.js +1 -1
  114. package/lib/components/DataTable/TableSelectRow.d.ts +2 -2
  115. package/lib/components/DataTable/TableSelectRow.js +1 -1
  116. package/lib/components/DataTable/TableToolbar.d.ts +1 -1
  117. package/lib/components/DataTable/TableToolbar.js +1 -1
  118. package/lib/components/DataTable/TableToolbarMenu.d.ts +2 -18
  119. package/lib/components/DataTable/TableToolbarMenu.js +0 -1
  120. package/lib/components/DataTable/index.d.ts +1 -1
  121. package/lib/components/DataTable/state/getDerivedStateFromProps.js +5 -1
  122. package/lib/components/DatePicker/DatePicker.js +1 -1
  123. package/lib/components/DatePickerInput/DatePickerInput.js +1 -1
  124. package/lib/components/Dropdown/Dropdown.js +3 -3
  125. package/lib/components/FeatureFlags/index.d.ts +2 -2
  126. package/lib/components/FeatureFlags/index.js +1 -1
  127. package/lib/components/FileUploader/FileUploaderButton.d.ts +1 -1
  128. package/lib/components/FileUploader/FileUploaderButton.js +1 -1
  129. package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +2 -2
  130. package/lib/components/FileUploader/FileUploaderDropContainer.js +2 -2
  131. package/lib/components/FluidTextArea/FluidTextArea.d.ts +1 -1
  132. package/lib/components/FluidTextArea/FluidTextArea.js +1 -1
  133. package/lib/components/InlineCheckbox/InlineCheckbox.js +1 -1
  134. package/lib/components/ListBox/ListBox.js +1 -1
  135. package/lib/components/Loading/Loading.d.ts +1 -1
  136. package/lib/components/Loading/Loading.js +1 -1
  137. package/lib/components/Menu/Menu.js +1 -1
  138. package/lib/components/Modal/Modal.js +1 -1
  139. package/lib/components/MultiSelect/FilterableMultiSelect.js +4 -4
  140. package/lib/components/MultiSelect/MultiSelect.js +2 -2
  141. package/lib/components/Notification/Notification.d.ts +4 -4
  142. package/lib/components/Notification/Notification.js +4 -4
  143. package/lib/components/NumberInput/NumberInput.d.ts +7 -0
  144. package/lib/components/NumberInput/NumberInput.js +81 -26
  145. package/lib/components/OverflowMenu/OverflowMenu.d.ts +2 -6
  146. package/lib/components/OverflowMenu/OverflowMenu.js +2 -2
  147. package/lib/components/Pagination/Pagination.js +21 -4
  148. package/lib/components/RadioButton/RadioButton.js +1 -1
  149. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +1 -1
  150. package/lib/components/RadioTile/RadioTile.js +2 -2
  151. package/lib/components/Search/Search.js +1 -1
  152. package/lib/components/Select/Select.js +2 -2
  153. package/lib/components/Slider/Slider.js +1 -1
  154. package/lib/components/StructuredList/StructuredList.d.ts +5 -5
  155. package/lib/components/StructuredList/StructuredList.js +4 -4
  156. package/lib/components/Tabs/Tabs.d.ts +1 -1
  157. package/lib/components/Tabs/Tabs.js +1 -1
  158. package/lib/components/Tag/DismissibleTag.js +1 -1
  159. package/lib/components/Tag/Tag.js +4 -4
  160. package/lib/components/TextArea/TextArea.js +2 -2
  161. package/lib/components/TextInput/ControlledPasswordInput.js +1 -1
  162. package/lib/components/TextInput/PasswordInput.js +1 -1
  163. package/lib/components/TextInput/TextInput.js +2 -2
  164. package/lib/components/Tile/Tile.js +9 -9
  165. package/lib/components/TileGroup/TileGroup.d.ts +5 -5
  166. package/lib/components/TimePicker/TimePicker.d.ts +8 -0
  167. package/lib/components/TimePicker/TimePicker.js +6 -4
  168. package/lib/components/Tooltip/DefinitionTooltip.d.ts +1 -1
  169. package/lib/components/Tooltip/DefinitionTooltip.js +1 -1
  170. package/lib/components/TreeView/TreeContext.d.ts +19 -0
  171. package/lib/components/TreeView/TreeContext.js +18 -0
  172. package/lib/components/TreeView/TreeNode.d.ts +4 -4
  173. package/lib/components/TreeView/TreeNode.js +55 -107
  174. package/lib/components/TreeView/TreeView.js +41 -78
  175. package/lib/components/UIShell/HeaderMenu.js +1 -1
  176. package/lib/components/UIShell/HeaderMenuItem.d.ts +1 -1
  177. package/lib/components/UIShell/HeaderMenuItem.js +1 -1
  178. package/lib/components/UIShell/HeaderName.d.ts +1 -1
  179. package/lib/components/UIShell/Link.d.ts +2 -2
  180. package/lib/components/UIShell/Link.js +1 -1
  181. package/lib/components/UIShell/Switcher.d.ts +1 -1
  182. package/lib/components/UIShell/Switcher.js +38 -11
  183. package/lib/index.js +1 -1
  184. package/lib/internal/useNoInteractiveChildren.d.ts +25 -0
  185. package/lib/internal/useNoInteractiveChildren.js +39 -32
  186. package/lib/prop-types/deprecate.d.ts +17 -0
  187. package/lib/prop-types/deprecate.js +22 -12
  188. package/package.json +3 -3
  189. package/telemetry.yml +15 -14
@@ -20,6 +20,7 @@ var usePrefix = require('../../internal/usePrefix.js');
20
20
  var useId = require('../../internal/useId.js');
21
21
  var index = require('../FeatureFlags/index.js');
22
22
  var TreeNode = require('./TreeNode.js');
23
+ var TreeContext = require('./TreeContext.js');
23
24
 
24
25
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
26
 
@@ -47,10 +48,11 @@ const TreeView = ({
47
48
  const prefix = usePrefix.usePrefix();
48
49
  const treeClasses = cx__default["default"](className, `${prefix}--tree`, {
49
50
  // @ts-ignore - will always be false according to prop types
51
+
50
52
  [`${prefix}--tree--${size}`]: size !== 'default'
51
53
  });
52
54
  const treeRootRef = React.useRef(null);
53
- const treeWalker = React.useRef(treeRootRef?.current);
55
+ const treeWalker = React.useRef(null);
54
56
  const controllableSelectionState = useControllableState.useControllableState({
55
57
  value: preselected,
56
58
  onChange: newSelected => {
@@ -96,56 +98,14 @@ const TreeView = ({
96
98
  }
97
99
  }
98
100
  }
99
- function handleFocusEvent(event) {
100
- if (event.type === 'blur') {
101
- const {
102
- relatedTarget: currentFocusedNode,
103
- target: prevFocusedNode
104
- } = event;
105
- if (treeRootRef?.current?.contains(currentFocusedNode)) {
106
- prevFocusedNode.tabIndex = -1;
107
- }
108
- }
109
- if (event.type === 'focus') {
110
- resetNodeTabIndices();
111
- const {
112
- relatedTarget: prevFocusedNode,
113
- target: currentFocusedNode
114
- } = event;
115
- if (treeRootRef?.current?.contains(prevFocusedNode)) {
116
- prevFocusedNode.tabIndex = -1;
117
- }
118
- currentFocusedNode.tabIndex = 0;
101
+
102
+ // Set the first non-disabled node to be tabbable
103
+ React.useEffect(() => {
104
+ const firstNode = treeRootRef.current?.querySelector(`.${prefix}--tree-node:not(.${prefix}--tree-node--disabled)`);
105
+ if (firstNode instanceof HTMLElement) {
106
+ firstNode.tabIndex = 0;
119
107
  }
120
- }
121
- let focusTarget = false;
122
- function enhanceTreeNodes(children) {
123
- return React__default["default"].Children.map(children, child => {
124
- if (! /*#__PURE__*/React__default["default"].isValidElement(child)) return child;
125
- const isTreeNode = child.type === TreeNode["default"];
126
- if (isTreeNode) {
127
- const node = child;
128
- const sharedNodeProps = {
129
- active,
130
- depth: 0,
131
- onNodeFocusEvent: handleFocusEvent,
132
- onTreeSelect: handleTreeSelect,
133
- selected,
134
- tabIndex: node.props.disabled ? undefined : -1
135
- };
136
- if (!focusTarget && !node.props.disabled) {
137
- sharedNodeProps.tabIndex = 0;
138
- focusTarget = true;
139
- }
140
- return /*#__PURE__*/React__default["default"].cloneElement(child, sharedNodeProps);
141
- }
142
- const newChildren = enhanceTreeNodes(child.props.children);
143
- return /*#__PURE__*/React__default["default"].cloneElement(child, {
144
- children: newChildren
145
- });
146
- });
147
- }
148
- const nodesWithProps = enhanceTreeNodes(children);
108
+ }, [children, prefix]);
149
109
  function handleKeyDown(event) {
150
110
  event.stopPropagation();
151
111
  if (match.matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End])) {
@@ -169,12 +129,12 @@ const TreeView = ({
169
129
  const nodeIds = [];
170
130
  if (match.matches(event, [keys.Home, keys.End])) {
171
131
  if (multiselect && event.shiftKey && event.ctrlKey && treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
172
- nodeIds.push(treeWalker.current.currentNode?.id);
132
+ nodeIds.push(treeWalker.current.currentNode.id);
173
133
  }
174
134
  while (match.match(event, keys.Home) ? treeWalker.current.previousNode() : treeWalker.current.nextNode()) {
175
135
  nextFocusNode = treeWalker.current.currentNode;
176
136
  if (multiselect && event.shiftKey && event.ctrlKey && nextFocusNode instanceof Element && !nextFocusNode.getAttribute('aria-disabled') && !nextFocusNode.classList.contains(`${prefix}--tree-node--hidden`)) {
177
- nodeIds.push(nextFocusNode?.id);
137
+ nodeIds.push(nextFocusNode.id);
178
138
  }
179
139
  }
180
140
  }
@@ -185,7 +145,7 @@ const TreeView = ({
185
145
  treeWalker.current.currentNode = treeWalker.current.root;
186
146
  while (treeWalker.current.nextNode()) {
187
147
  if (treeWalker.current.currentNode instanceof Element && !treeWalker.current.currentNode.getAttribute('aria-disabled') && !treeWalker.current.currentNode.classList.contains(`${prefix}--tree-node--hidden`)) {
188
- nodeIds.push(treeWalker.current.currentNode?.id);
148
+ nodeIds.push(treeWalker.current.currentNode.id);
189
149
  }
190
150
  }
191
151
  }
@@ -201,38 +161,41 @@ const TreeView = ({
201
161
  rest?.onKeyDown?.(event);
202
162
  }
203
163
  React.useEffect(() => {
204
- treeWalker.current = treeWalker.current ?? document.createTreeWalker(treeRootRef?.current, NodeFilter.SHOW_ELEMENT, {
205
- acceptNode: function (node) {
206
- if (!(node instanceof Element)) {
164
+ if (treeRootRef.current && !treeWalker.current) {
165
+ treeWalker.current = document.createTreeWalker(treeRootRef.current, NodeFilter.SHOW_ELEMENT, {
166
+ acceptNode: function (node) {
167
+ if (!(node instanceof Element)) {
168
+ return NodeFilter.FILTER_SKIP;
169
+ }
170
+ if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
171
+ return NodeFilter.FILTER_REJECT;
172
+ }
173
+ if (node.matches(`.${prefix}--tree-node`)) {
174
+ return NodeFilter.FILTER_ACCEPT;
175
+ }
207
176
  return NodeFilter.FILTER_SKIP;
208
177
  }
209
- if (node.classList.contains(`${prefix}--tree-node--disabled`) || node.classList.contains(`${prefix}--tree-node--hidden`)) {
210
- return NodeFilter.FILTER_REJECT;
211
- }
212
- if (node.matches(`.${prefix}--tree-node`)) {
213
- return NodeFilter.FILTER_ACCEPT;
214
- }
215
- return NodeFilter.FILTER_SKIP;
216
- }
217
- });
218
- }, [prefix]);
219
- const useActiveAndSelectedOnMount = () => React.useEffect(() => {
220
- if (!enableTreeviewControllable) {
221
- if (preselected?.length) {
222
- setSelected(preselected);
223
- }
224
- if (prespecifiedActive) {
225
- setActive(prespecifiedActive);
226
- }
178
+ });
227
179
  }
228
- }, []);
229
- useActiveAndSelectedOnMount();
180
+ }, [prefix]);
230
181
  const labelId = `${treeId}__label`;
231
182
  const TreeLabel = () => !hideLabel ? /*#__PURE__*/React__default["default"].createElement("label", {
232
183
  id: labelId,
233
184
  className: `${prefix}--label`
234
185
  }, label) : null;
235
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TreeLabel, null), /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
186
+ const treeContextValue = React.useMemo(() => ({
187
+ active,
188
+ multiselect,
189
+ onActivate: setActive,
190
+ onTreeSelect: handleTreeSelect,
191
+ selected,
192
+ size
193
+ }), [active, multiselect, setActive, handleTreeSelect, selected, size]);
194
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TreeLabel, null), /*#__PURE__*/React__default["default"].createElement(TreeContext.TreeContext.Provider, {
195
+ value: treeContextValue
196
+ }, /*#__PURE__*/React__default["default"].createElement(TreeContext.DepthContext.Provider, {
197
+ value: 0
198
+ }, /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({}, rest, {
236
199
  "aria-label": hideLabel ? label : undefined,
237
200
  "aria-labelledby": !hideLabel ? labelId : undefined,
238
201
  "aria-multiselectable": multiselect || undefined,
@@ -240,7 +203,7 @@ const TreeView = ({
240
203
  onKeyDown: handleKeyDown,
241
204
  ref: treeRootRef,
242
205
  role: "tree"
243
- }), nodesWithProps));
206
+ }), children))));
244
207
  };
245
208
  TreeView.propTypes = {
246
209
  /**
@@ -205,7 +205,7 @@ HeaderMenu.propTypes = {
205
205
  * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
206
206
  * @deprecated Please use `isActive` instead. This will be removed in the next major release.
207
207
  */
208
- isCurrentPage: deprecate["default"](PropTypes__default["default"].bool, 'The `isCurrentPage` prop for `HeaderMenu` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
208
+ isCurrentPage: deprecate.deprecate(PropTypes__default["default"].bool, 'The `isCurrentPage` prop for `HeaderMenu` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
209
209
  /**
210
210
  * Provide a label for the link text
211
211
  */
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -82,7 +82,7 @@ HeaderMenuItem.propTypes = {
82
82
  * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
83
83
  * @deprecated Please use `isActive` instead. This will be removed in the next major release.
84
84
  */
85
- isCurrentPage: deprecate["default"](PropTypes__default["default"].bool, 'The `isCurrentPage` prop for `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
85
+ isCurrentPage: deprecate.deprecate(PropTypes__default["default"].bool, 'The `isCurrentPage` prop for `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
86
86
  /**
87
87
  * Optionally supply a role for the underlying `<li>` node. Useful for resetting
88
88
  * `<ul>` semantics for menus.
@@ -32,7 +32,7 @@ declare namespace HeaderName {
32
32
  */
33
33
  prefix: PropTypes.Requireable<string>;
34
34
  as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
35
- element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
35
+ element: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
36
36
  isSideNavExpanded: PropTypes.Requireable<boolean>;
37
37
  };
38
38
  }
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2025
3
3
  *
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
@@ -40,7 +40,7 @@ declare const LinkPropTypes: {
40
40
  * @deprecated Use `as` instead
41
41
  *
42
42
  */
43
- element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
43
+ element: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
44
44
  /**
45
45
  * Property to indicate if the side nav container is open (or not). Use to
46
46
  * keep local state and styling in step with the SideNav expansion state.
@@ -57,7 +57,7 @@ const LinkPropTypes = {
57
57
  * @deprecated Use `as` instead
58
58
  *
59
59
  */
60
- element: deprecate["default"](PropTypes__default["default"].elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
60
+ element: deprecate.deprecate(PropTypes__default["default"].elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
61
61
  /**
62
62
  * Property to indicate if the side nav container is open (or not). Use to
63
63
  * keep local state and styling in step with the SideNav expansion state.
@@ -4,7 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import React, { ReactNode } from 'react';
7
+ import React, { type ReactNode } from 'react';
8
8
  export interface BaseSwitcherProps {
9
9
  /**
10
10
  * expects to receive <SwitcherItem />
@@ -16,7 +16,34 @@ var usePrefix = require('../../internal/usePrefix.js');
16
16
  var useMergedRefs = require('../../internal/useMergedRefs.js');
17
17
  var PropTypes = require('prop-types');
18
18
  var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
19
+ require('./Content.js');
20
+ require('./Header.js');
21
+ require('./HeaderContainer.js');
22
+ require('./HeaderGlobalAction.js');
23
+ require('./HeaderGlobalBar.js');
24
+ require('./HeaderMenu.js');
25
+ require('./HeaderMenuButton.js');
26
+ require('./HeaderMenuItem.js');
27
+ require('./HeaderName.js');
28
+ require('./HeaderNavigation.js');
29
+ require('./HeaderPanel.js');
30
+ require('./HeaderSideNavItems.js');
19
31
  var SwitcherItem = require('./SwitcherItem.js');
32
+ var SwitcherDivider = require('./SwitcherDivider.js');
33
+ require('./SkipToContent.js');
34
+ require('./SideNav.js');
35
+ require('./SideNavDetails.js');
36
+ require('./SideNavDivider.js');
37
+ require('./SideNavFooter.js');
38
+ require('./SideNavHeader.js');
39
+ require('./SideNavIcon.js');
40
+ require('./SideNavItem.js');
41
+ require('./SideNavItems.js');
42
+ require('./SideNavLink.js');
43
+ require('./SideNavLinkText.js');
44
+ require('./SideNavMenu.js');
45
+ require('./SideNavMenuItem.js');
46
+ require('./SideNavSwitcher.js');
20
47
 
21
48
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
49
 
@@ -46,8 +73,8 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
46
73
  currentIndex,
47
74
  direction
48
75
  }) => {
49
- const enabledIndices = React__default["default"].Children.toArray(children).reduce((acc, curr, i) => {
50
- if (/*#__PURE__*/React__default["default"].isValidElement(curr) && Object.keys(curr.props).length !== 0 && curr.type === SwitcherItem["default"]) {
76
+ const enabledIndices = React.Children.toArray(children).reduce((acc, child, i) => {
77
+ if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherItem["default"] && Object.keys(child.props).length) {
51
78
  acc.push(i);
52
79
  }
53
80
  return acc;
@@ -73,21 +100,21 @@ const Switcher = /*#__PURE__*/React.forwardRef(function Switcher(props, forwardR
73
100
  switcherItem.focus();
74
101
  }
75
102
  };
76
- const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
77
- // only setup click handlers if onChange event is passed
78
- if (/*#__PURE__*/React__default["default"].isValidElement(child) && child.type === SwitcherItem["default"]) {
79
- return /*#__PURE__*/React__default["default"].cloneElement(child, {
103
+ const childrenWithProps = React.Children.toArray(children).map((child, index) => {
104
+ if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherItem["default"]) {
105
+ return /*#__PURE__*/React.cloneElement(child, {
80
106
  handleSwitcherItemFocus,
81
107
  index,
82
108
  key: index,
83
109
  expanded
84
110
  });
85
111
  }
86
- return /*#__PURE__*/React__default["default"].cloneElement(child, {
87
- index,
88
- key: index,
89
- expanded
90
- });
112
+ if (/*#__PURE__*/React.isValidElement(child) && child.type === SwitcherDivider["default"]) {
113
+ return /*#__PURE__*/React.cloneElement(child, {
114
+ key: index
115
+ });
116
+ }
117
+ return child;
91
118
  });
92
119
  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
93
120
  ref: ref,
package/lib/index.js CHANGED
@@ -277,7 +277,7 @@ exports.useContextMenu = useContextMenu["default"];
277
277
  exports.Copy = Copy["default"];
278
278
  exports.CopyButton = CopyButton["default"];
279
279
  exports.DangerButton = DangerButton["default"];
280
- exports.DataTable = DataTable["default"];
280
+ exports.DataTable = DataTable.DataTable;
281
281
  exports.Table = Table.Table;
282
282
  exports.TableActionList = TableActionList["default"];
283
283
  exports.TableBatchAction = TableBatchAction["default"];
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
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
+ import { type RefObject } from 'react';
8
+ export declare const useNoInteractiveChildren: (ref: RefObject<HTMLElement | null>, message?: string) => void;
9
+ export declare const useInteractiveChildrenNeedDescription: (ref: RefObject<HTMLElement | null>, message?: string) => void;
10
+ /**
11
+ * Determines if a given DOM node has interactive content, or is itself
12
+ * interactive. It returns the interactive node if one is found.
13
+ *
14
+ * @param node - The node to check.
15
+ * @returns The interactive node, or `null` if none is found.
16
+ */
17
+ export declare const getInteractiveContent: (node: HTMLElement) => HTMLElement | null;
18
+ /**
19
+ * Determines if a given DOM node has a `role`, or has itself a `role`.
20
+ * It returns the node with a `role` if one is found.
21
+ *
22
+ * @param node - The node to check.
23
+ * @returns The node with a `role`, or `null` if none is found.
24
+ */
25
+ export declare const getRoleContent: (node: HTMLElement) => HTMLElement | null;
@@ -11,7 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var React = require('react');
13
13
 
14
- function useNoInteractiveChildren(ref, message = 'component should have no interactive child nodes') {
14
+ const useNoInteractiveChildren = (ref, message = 'component should have no interactive child nodes') => {
15
+ // TODO: Why can't the condition go inside the hook?
15
16
  if (process.env.NODE_ENV !== 'production') {
16
17
  // TODO: https://github.com/carbon-design-system/carbon/issues/19005
17
18
  /*
@@ -21,14 +22,14 @@ function useNoInteractiveChildren(ref, message = 'component should have no inter
21
22
  const node = ref.current ? getInteractiveContent(ref.current) : false;
22
23
  if (node) {
23
24
  const errorMessage = `Error: ${message}.\n\nInstead found: ${node.outerHTML}`;
24
- // eslint-disable-next-line no-console
25
25
  console.error(errorMessage);
26
26
  throw new Error(errorMessage);
27
27
  }
28
28
  }, []);
29
29
  }
30
- }
31
- function useInteractiveChildrenNeedDescription(ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) {
30
+ };
31
+ const useInteractiveChildrenNeedDescription = (ref, message = `interactive child node(s) should have an \`aria-describedby\` property`) => {
32
+ // TODO: Why can't the condition go inside the hook?
32
33
  if (process.env.NODE_ENV !== 'production') {
33
34
  // TODO: https://github.com/carbon-design-system/carbon/issues/19005
34
35
  /*
@@ -41,16 +42,16 @@ function useInteractiveChildrenNeedDescription(ref, message = `interactive child
41
42
  }
42
43
  });
43
44
  }
44
- }
45
+ };
45
46
 
46
47
  /**
47
48
  * Determines if a given DOM node has interactive content, or is itself
48
- * interactive. It returns the interactive node if one is found
49
+ * interactive. It returns the interactive node if one is found.
49
50
  *
50
- * @param {HTMLElement} node
51
- * @returns {HTMLElement}
51
+ * @param node - The node to check.
52
+ * @returns The interactive node, or `null` if none is found.
52
53
  */
53
- function getInteractiveContent(node) {
54
+ const getInteractiveContent = node => {
54
55
  if (!node || !node.childNodes) {
55
56
  return null;
56
57
  }
@@ -58,60 +59,66 @@ function getInteractiveContent(node) {
58
59
  return node;
59
60
  }
60
61
  for (const childNode of node.childNodes) {
61
- const interactiveNode = getInteractiveContent(childNode);
62
- if (interactiveNode) {
63
- return interactiveNode;
62
+ if (childNode instanceof HTMLElement) {
63
+ const interactiveNode = getInteractiveContent(childNode);
64
+ if (interactiveNode) {
65
+ return interactiveNode;
66
+ }
64
67
  }
65
68
  }
66
69
  return null;
67
- }
70
+ };
68
71
 
69
72
  /**
70
- * Determines if a given DOM node has a role, or has itself a role.
71
- * It returns the node with a role if one is found
73
+ * Determines if a given DOM node has a `role`, or has itself a `role`.
74
+ * It returns the node with a `role` if one is found.
72
75
  *
73
- * @param {HTMLElement} node
74
- * @returns {HTMLElement}
76
+ * @param node - The node to check.
77
+ * @returns The node with a `role`, or `null` if none is found.
75
78
  */
76
- function getRoleContent(node) {
79
+ const getRoleContent = node => {
77
80
  if (!node || !node.childNodes) {
78
81
  return null;
79
82
  }
80
- if (node?.getAttribute?.('role') && node.getAttribute('role') !== '') {
83
+ if (node.getAttribute('role') && node.getAttribute('role') !== '') {
81
84
  return node;
82
85
  }
83
86
  for (const childNode of node.childNodes) {
84
- const roleNode = getRoleContent(childNode);
85
- if (roleNode) {
86
- return roleNode;
87
+ if (childNode instanceof HTMLElement) {
88
+ const roleNode = getRoleContent(childNode);
89
+ if (roleNode) {
90
+ return roleNode;
91
+ }
87
92
  }
88
93
  }
89
94
  return null;
90
- }
95
+ };
91
96
 
92
97
  /**
93
- * Determines if the given element is focusable, or not
98
+ * Determines if the given element is focusable.
94
99
  *
95
- * @param {HTMLElement} element
96
- * @returns {boolean}
100
+ * @param element - The element to check.
101
+ * @returns Whether the element is focusable.
97
102
  * @see https://github.com/w3c/aria-practices/blob/0553bb51588ffa517506e2a1b2ca1422ed438c5f/examples/js/utils.js#L68
98
103
  */
99
- function isFocusable(element) {
104
+ const isFocusable = element => {
100
105
  if (element.tabIndex === undefined || element.tabIndex < 0) {
101
106
  return false;
102
107
  }
103
- if (element.disabled) {
104
- return false;
108
+ if (element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
109
+ if (element.disabled) {
110
+ return false;
111
+ }
105
112
  }
106
113
  switch (element.nodeName) {
107
114
  case 'A':
108
- return !!element.href && element.rel !== 'ignore';
115
+ return element instanceof HTMLAnchorElement && !!element.href && element.rel !== 'ignore';
109
116
  case 'INPUT':
110
- return element.type !== 'hidden';
117
+ return element instanceof HTMLInputElement && element.type !== 'hidden';
111
118
  default:
112
119
  return true;
113
120
  }
114
- }
121
+ };
115
122
 
116
123
  exports.getInteractiveContent = getInteractiveContent;
117
124
  exports.getRoleContent = getRoleContent;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2025
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
+ type PropValidator = (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
8
+ /**
9
+ * Wraps a prop-type validator with a deprecation warning.
10
+ *
11
+ * @param propType - The original prop validator function.
12
+ * @param message - Deprecation message.
13
+ * @returns A new validator function that emits a warning the first time a
14
+ * deprecated prop is used.
15
+ */
16
+ export declare const deprecate: (propType: PropValidator, message?: string) => PropValidator;
17
+ export {};
@@ -11,22 +11,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var warning = require('../internal/warning.js');
13
13
 
14
- const didWarnAboutDeprecation = {};
15
- function deprecate(propType, message) {
16
- function checker(props, propName, componentName, ...rest) {
17
- if (props[propName] === undefined) {
14
+ const warningCache = new Map();
15
+
16
+ /**
17
+ * Wraps a prop-type validator with a deprecation warning.
18
+ *
19
+ * @param propType - The original prop validator function.
20
+ * @param message - Deprecation message.
21
+ * @returns A new validator function that emits a warning the first time a
22
+ * deprecated prop is used.
23
+ */
24
+ const deprecate = (propType, message) => {
25
+ const checker = (props, propName, componentName, ...rest) => {
26
+ if (typeof props[propName] === 'undefined') {
18
27
  return;
19
28
  }
20
- if (!didWarnAboutDeprecation[componentName] || !didWarnAboutDeprecation[componentName][propName]) {
21
- didWarnAboutDeprecation[componentName] = {
22
- ...didWarnAboutDeprecation[componentName],
23
- [propName]: true
24
- };
29
+ if (!warningCache.has(componentName)) {
30
+ warningCache.set(componentName, new Set());
31
+ }
32
+ const warnedProps = warningCache.get(componentName);
33
+ if (warnedProps && !warnedProps.has(propName)) {
34
+ warnedProps.add(propName);
25
35
  process.env.NODE_ENV !== "production" ? warning.warning(false, message || `The prop \`${propName}\` has been deprecated for the ` + `${componentName} component. It will be removed in the next major ` + `release`) : void 0;
26
36
  }
27
37
  return propType(props, propName, componentName, ...rest);
28
- }
38
+ };
29
39
  return checker;
30
- }
40
+ };
31
41
 
32
- exports["default"] = deprecate;
42
+ exports.deprecate = deprecate;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.85.1",
4
+ "version": "1.86.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "types": "lib/index.d.ts",
@@ -55,7 +55,7 @@
55
55
  "@carbon/feature-flags": "^0.27.0",
56
56
  "@carbon/icons-react": "^11.62.0",
57
57
  "@carbon/layout": "^11.36.0",
58
- "@carbon/styles": "^1.84.0",
58
+ "@carbon/styles": "^1.85.0-rc.0",
59
59
  "@carbon/utilities": "^0.7.0",
60
60
  "@floating-ui/react": "^0.27.4",
61
61
  "@ibm/telemetry-js": "^1.5.0",
@@ -139,5 +139,5 @@
139
139
  "**/*.scss",
140
140
  "**/*.css"
141
141
  ],
142
- "gitHead": "467c96c1d82d6b1261cf8f17ee1c8b27d0bc572f"
142
+ "gitHead": "8d60133ddf9a05676c96a5763aedfe7280bb37a6"
143
143
  }