@carbon/react 1.84.0 → 1.85.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 (181) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +899 -829
  2. package/es/components/AILabel/index.js +6 -1
  3. package/es/components/Checkbox/Checkbox.d.ts +2 -2
  4. package/es/components/Checkbox/Checkbox.js +8 -8
  5. package/es/components/CheckboxGroup/CheckboxGroup.d.ts +2 -2
  6. package/es/components/CheckboxGroup/CheckboxGroup.js +9 -8
  7. package/es/components/CodeSnippet/CodeSnippet.js +2 -4
  8. package/es/components/ComboBox/ComboBox.d.ts +1 -1
  9. package/es/components/ComboBox/ComboBox.js +8 -7
  10. package/es/components/ComposedModal/ComposedModal.d.ts +1 -1
  11. package/es/components/ComposedModal/ComposedModal.js +15 -10
  12. package/es/components/ContainedList/ContainedList.d.ts +1 -1
  13. package/es/components/ContainedList/ContainedList.js +4 -2
  14. package/es/components/ContentSwitcher/ContentSwitcher.js +6 -5
  15. package/es/components/DataTable/DataTable.js +3 -0
  16. package/es/components/DataTable/TableDecoratorRow.d.ts +2 -2
  17. package/es/components/DataTable/TableDecoratorRow.js +8 -8
  18. package/es/components/DataTable/TableExpandRow.d.ts +1 -1
  19. package/es/components/DataTable/TableExpandRow.js +15 -6
  20. package/es/components/DataTable/TableHeader.js +10 -10
  21. package/es/components/DataTable/TableRow.js +12 -4
  22. package/es/components/DataTable/tools/normalize.js +2 -1
  23. package/es/components/DatePicker/DatePicker.d.ts +1 -1
  24. package/es/components/DatePicker/DatePicker.js +2 -2
  25. package/es/components/DatePicker/plugins/appendToPlugin.d.ts +12 -0
  26. package/es/components/DatePicker/plugins/appendToPlugin.js +9 -12
  27. package/es/components/DatePickerInput/DatePickerInput.js +8 -7
  28. package/es/components/Dialog/index.d.ts +5 -1
  29. package/es/components/Dialog/index.js +20 -0
  30. package/es/components/Dropdown/Dropdown.d.ts +1 -1
  31. package/es/components/Dropdown/Dropdown.js +8 -10
  32. package/es/components/FileUploader/FileUploaderButton.js +2 -2
  33. package/es/components/FileUploader/FileUploaderDropContainer.js +2 -2
  34. package/es/components/FileUploader/FileUploaderItem.js +2 -2
  35. package/es/components/Layer/index.d.ts +1 -3
  36. package/es/components/Layer/index.js +9 -8
  37. package/es/components/Menu/Menu.js +7 -8
  38. package/es/components/Menu/MenuItem.js +13 -2
  39. package/es/components/Modal/Modal.d.ts +2 -2
  40. package/es/components/Modal/Modal.js +20 -9
  41. package/es/components/MultiSelect/FilterableMultiSelect.d.ts +1 -1
  42. package/es/components/MultiSelect/FilterableMultiSelect.js +9 -8
  43. package/es/components/MultiSelect/MultiSelect.d.ts +1 -1
  44. package/es/components/MultiSelect/MultiSelect.js +8 -7
  45. package/es/components/MultiSelect/filter.d.ts +10 -0
  46. package/es/components/MultiSelect/filter.js +21 -0
  47. package/es/components/NumberInput/NumberInput.d.ts +1 -1
  48. package/es/components/NumberInput/NumberInput.js +9 -8
  49. package/es/components/PageHeader/PageHeader.js +2 -2
  50. package/es/components/Popover/index.js +2 -1
  51. package/es/components/RadioButton/RadioButton.d.ts +2 -2
  52. package/es/components/RadioButton/RadioButton.js +8 -8
  53. package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts +2 -2
  54. package/es/components/RadioButtonGroup/RadioButtonGroup.js +9 -8
  55. package/es/components/RadioTile/RadioTile.d.ts +1 -1
  56. package/es/components/RadioTile/RadioTile.js +8 -7
  57. package/es/components/Select/Select.d.ts +2 -2
  58. package/es/components/Select/Select.js +8 -7
  59. package/es/components/Slider/Slider.d.ts +59 -198
  60. package/es/components/Slider/Slider.js +68 -120
  61. package/es/components/Tabs/usePressable.d.ts +19 -0
  62. package/es/components/Tabs/usePressable.js +19 -33
  63. package/es/components/Tag/DismissibleTag.d.ts +1 -1
  64. package/es/components/Tag/DismissibleTag.js +9 -8
  65. package/es/components/Tag/Tag.d.ts +1 -1
  66. package/es/components/Tag/Tag.js +9 -8
  67. package/es/components/TextArea/TextArea.js +8 -7
  68. package/es/components/TextInput/TextInput.d.ts +1 -1
  69. package/es/components/TextInput/TextInput.js +20 -9
  70. package/es/components/Tile/Tile.d.ts +2 -2
  71. package/es/components/Tile/Tile.js +30 -36
  72. package/es/components/Toggletip/index.js +2 -2
  73. package/es/components/Tooltip/DefinitionTooltip.js +1 -0
  74. package/es/components/Tooltip/Tooltip.d.ts +2 -2
  75. package/es/components/Tooltip/Tooltip.js +2 -2
  76. package/es/components/TreeView/TreeNode.d.ts +22 -0
  77. package/es/components/TreeView/TreeNode.js +119 -12
  78. package/es/components/TreeView/TreeView.js +3 -3
  79. package/es/components/UIShell/Content.d.ts +5 -3
  80. package/es/components/UIShell/HeaderPanel.d.ts +2 -2
  81. package/es/components/UIShell/HeaderPanel.js +9 -5
  82. package/es/internal/Selection.js +8 -3
  83. package/es/internal/environment.js +1 -12
  84. package/{lib/internal/__mocks__/mockHTMLElement.d.ts → es/internal/index.d.ts} +2 -4
  85. package/es/internal/useResizeObserver.d.ts +1 -1
  86. package/es/internal/utils.d.ts +14 -0
  87. package/es/internal/utils.js +18 -0
  88. package/es/tools/uniqueId.d.ts +1 -6
  89. package/lib/components/AILabel/index.js +6 -1
  90. package/lib/components/Checkbox/Checkbox.d.ts +2 -2
  91. package/lib/components/Checkbox/Checkbox.js +7 -7
  92. package/lib/components/CheckboxGroup/CheckboxGroup.d.ts +2 -2
  93. package/lib/components/CheckboxGroup/CheckboxGroup.js +8 -7
  94. package/lib/components/CodeSnippet/CodeSnippet.js +2 -4
  95. package/lib/components/ComboBox/ComboBox.d.ts +1 -1
  96. package/lib/components/ComboBox/ComboBox.js +11 -10
  97. package/lib/components/ComposedModal/ComposedModal.d.ts +1 -1
  98. package/lib/components/ComposedModal/ComposedModal.js +16 -11
  99. package/lib/components/ContainedList/ContainedList.d.ts +1 -1
  100. package/lib/components/ContainedList/ContainedList.js +4 -2
  101. package/lib/components/ContentSwitcher/ContentSwitcher.js +5 -4
  102. package/lib/components/DataTable/DataTable.js +3 -0
  103. package/lib/components/DataTable/TableDecoratorRow.d.ts +2 -2
  104. package/lib/components/DataTable/TableDecoratorRow.js +8 -8
  105. package/lib/components/DataTable/TableExpandRow.d.ts +1 -1
  106. package/lib/components/DataTable/TableExpandRow.js +14 -5
  107. package/lib/components/DataTable/TableHeader.js +9 -9
  108. package/lib/components/DataTable/TableRow.js +11 -3
  109. package/lib/components/DataTable/tools/normalize.js +2 -1
  110. package/lib/components/DatePicker/DatePicker.d.ts +1 -1
  111. package/lib/components/DatePicker/DatePicker.js +1 -1
  112. package/lib/components/DatePicker/plugins/appendToPlugin.d.ts +12 -0
  113. package/lib/components/DatePicker/plugins/appendToPlugin.js +9 -12
  114. package/lib/components/DatePickerInput/DatePickerInput.js +7 -6
  115. package/lib/components/Dialog/index.d.ts +5 -1
  116. package/lib/components/Dialog/index.js +20 -0
  117. package/lib/components/Dropdown/Dropdown.d.ts +1 -1
  118. package/lib/components/Dropdown/Dropdown.js +12 -14
  119. package/lib/components/FileUploader/FileUploaderButton.js +2 -2
  120. package/lib/components/FileUploader/FileUploaderDropContainer.js +2 -2
  121. package/lib/components/FileUploader/FileUploaderItem.js +2 -2
  122. package/lib/components/Layer/index.d.ts +1 -3
  123. package/lib/components/Layer/index.js +9 -8
  124. package/lib/components/Menu/Menu.js +7 -8
  125. package/lib/components/Menu/MenuItem.js +13 -2
  126. package/lib/components/Modal/Modal.d.ts +2 -2
  127. package/lib/components/Modal/Modal.js +28 -17
  128. package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +1 -1
  129. package/lib/components/MultiSelect/FilterableMultiSelect.js +13 -12
  130. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  131. package/lib/components/MultiSelect/MultiSelect.js +13 -12
  132. package/lib/components/MultiSelect/filter.d.ts +10 -0
  133. package/lib/components/MultiSelect/filter.js +25 -0
  134. package/lib/components/NumberInput/NumberInput.d.ts +1 -1
  135. package/lib/components/NumberInput/NumberInput.js +8 -7
  136. package/lib/components/PageHeader/PageHeader.js +2 -2
  137. package/lib/components/Popover/index.js +2 -1
  138. package/lib/components/RadioButton/RadioButton.d.ts +2 -2
  139. package/lib/components/RadioButton/RadioButton.js +7 -7
  140. package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts +2 -2
  141. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +10 -9
  142. package/lib/components/RadioTile/RadioTile.d.ts +1 -1
  143. package/lib/components/RadioTile/RadioTile.js +7 -6
  144. package/lib/components/Select/Select.d.ts +2 -2
  145. package/lib/components/Select/Select.js +7 -6
  146. package/lib/components/Slider/Slider.d.ts +59 -198
  147. package/lib/components/Slider/Slider.js +67 -119
  148. package/lib/components/Tabs/usePressable.d.ts +19 -0
  149. package/lib/components/Tabs/usePressable.js +19 -33
  150. package/lib/components/Tag/DismissibleTag.d.ts +1 -1
  151. package/lib/components/Tag/DismissibleTag.js +8 -7
  152. package/lib/components/Tag/Tag.d.ts +1 -1
  153. package/lib/components/Tag/Tag.js +8 -7
  154. package/lib/components/TextArea/TextArea.js +7 -6
  155. package/lib/components/TextInput/TextInput.d.ts +1 -1
  156. package/lib/components/TextInput/TextInput.js +19 -8
  157. package/lib/components/Tile/Tile.d.ts +2 -2
  158. package/lib/components/Tile/Tile.js +29 -35
  159. package/lib/components/Toggletip/index.js +2 -2
  160. package/lib/components/Tooltip/DefinitionTooltip.js +1 -0
  161. package/lib/components/Tooltip/Tooltip.d.ts +2 -2
  162. package/lib/components/Tooltip/Tooltip.js +2 -2
  163. package/lib/components/TreeView/TreeNode.d.ts +22 -0
  164. package/lib/components/TreeView/TreeNode.js +118 -11
  165. package/lib/components/TreeView/TreeView.js +3 -3
  166. package/lib/components/UIShell/Content.d.ts +5 -3
  167. package/lib/components/UIShell/HeaderPanel.d.ts +2 -2
  168. package/lib/components/UIShell/HeaderPanel.js +8 -4
  169. package/lib/internal/Selection.js +8 -3
  170. package/lib/internal/environment.js +1 -12
  171. package/{es/internal/__mocks__/mockHTMLElement.d.ts → lib/internal/index.d.ts} +2 -4
  172. package/lib/internal/useResizeObserver.d.ts +1 -1
  173. package/lib/internal/utils.d.ts +14 -0
  174. package/lib/internal/utils.js +22 -0
  175. package/lib/tools/uniqueId.d.ts +1 -6
  176. package/package.json +11 -20
  177. package/telemetry.yml +1 -0
  178. package/es/components/ComboBox/tools/filter.js +0 -18
  179. package/es/tools/uniqueId.js +0 -14
  180. package/lib/components/ComboBox/tools/filter.js +0 -22
  181. package/lib/tools/uniqueId.js +0 -18
package/lib/components/DataTable/TableRow.js CHANGED
@@ -14,6 +14,10 @@ var React = require('react');
14
14
  var PropTypes = require('prop-types');
15
15
  var cx = require('classnames');
16
16
  var usePrefix = require('../../internal/usePrefix.js');
17
+ var TableSlugRow = require('./TableSlugRow.js');
18
+ var TableDecoratorRow = require('./TableDecoratorRow.js');
19
+ var index = require('../AILabel/index.js');
20
+ var utils = require('../../internal/utils.js');
17
21
 
18
22
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
23
 
@@ -25,11 +29,15 @@ const TableRow = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
25
29
  const prefix = usePrefix.usePrefix();
26
30
  let rowHasAILabel;
27
31
  if (props?.children) {
28
- React__default["default"].Children.toArray(props.children).map(child => {
29
- if (child.type?.displayName === 'TableSlugRow' || child.type?.displayName === 'TableDecoratorRow') {
30
- if (child.props.slug || child.props.decorator?.type.displayName === 'AILabel') {
32
+ // TODO: Why is this loop a `map`? It's not returning anything. Ideally,
33
+ // it seems that it should be a `some`. Maybe I'm missing something?
34
+ React.Children.toArray(props.children).map(child => {
35
+ if (utils.isComponentElement(child, TableSlugRow["default"])) {
36
+ if (child.props.slug) {
31
37
  rowHasAILabel = true;
32
38
  }
39
+ } else if (utils.isComponentElement(child, TableDecoratorRow["default"]) && utils.isComponentElement(child.props.decorator, index.AILabel)) {
40
+ rowHasAILabel = true;
33
41
  }
34
42
  });
35
43
  }
package/lib/components/DataTable/tools/normalize.js CHANGED
@@ -9,6 +9,7 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
+ var index = require('../../AILabel/index.js');
12
13
  var cells = require('./cells.js');
13
14
 
14
15
  /**
@@ -63,7 +64,7 @@ const normalize = (rows, headers, prevState = {}) => {
63
64
  isEditing: false,
64
65
  isValid: true,
65
66
  errors: null,
66
- hasAILabelHeader: !!(slug || decorator?.type?.displayName === 'AILabel'),
67
+ hasAILabelHeader: !!(slug || decorator?.type === index.AILabel),
67
68
  info: {
68
69
  header: key
69
70
  }
package/lib/components/DatePicker/DatePicker.d.ts CHANGED
@@ -29,7 +29,7 @@ export interface DatePickerProps {
29
29
  /**
30
30
  * The DOM element the flatpickr should be inserted into `<body>` by default.
31
31
  */
32
- appendTo?: object;
32
+ appendTo?: HTMLElement;
33
33
  /**
34
34
  * The child nodes.
35
35
  */
package/lib/components/DatePicker/DatePicker.js CHANGED
@@ -352,7 +352,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
352
352
  parseDate: parseDate,
353
353
  plugins: [datePickerType === 'range' ? rangePlugin["default"]({
354
354
  input: endInputField.current
355
- }) : () => {}, appendTo ? appendToPlugin["default"]({
355
+ }) : () => {}, appendTo ? appendToPlugin.appendToPlugin({
356
356
  appendTo
357
357
  }) : () => {}, carbonFlatpickrMonthSelectPlugin({
358
358
  selectorFlatpickrMonthYearContainer: '.flatpickr-current-month',
package/lib/components/DatePicker/plugins/appendToPlugin.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright IBM Corp. 2019, 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 { Plugin } from 'flatpickr/dist/types/options';
8
+ interface AppendToPluginConfig {
9
+ appendTo: HTMLElement;
10
+ }
11
+ export declare const appendToPlugin: (config: AppendToPluginConfig) => Plugin;
12
+ export {};
package/lib/components/DatePicker/plugins/appendToPlugin.js CHANGED
@@ -9,13 +9,9 @@
9
9
 
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
- /**
13
- * @param {object} config Plugin configuration.
14
- * @returns {Plugin} A Flatpickr plugin to put adjust the position of calendar dropdown.
15
- */
16
- var carbonFlatpickrAppendToPlugin = config => fp => {
12
+ const appendToPlugin = config => fp => {
17
13
  /**
18
- * Adjusts the floating menu position after Flatpicker sets it.
14
+ * Adjusts the floating menu position after Flatpickr sets it.
19
15
  */
20
16
  const handlePreCalendarPosition = () => {
21
17
  Promise.resolve().then(() => {
@@ -24,9 +20,10 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
24
20
  config: fpConfig,
25
21
  _positionElement: positionElement
26
22
  } = fp;
27
- const {
28
- appendTo
29
- } = fpConfig;
23
+ const appendTo = fpConfig.appendTo;
24
+ if (!appendTo) {
25
+ throw new Error('[appendToPlugin] Missing `appendTo` element.');
26
+ }
30
27
  const {
31
28
  left: containerLeft,
32
29
  top: containerTop
@@ -35,8 +32,8 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
35
32
  left: refLeft,
36
33
  bottom: refBottom
37
34
  } = positionElement.getBoundingClientRect();
38
- if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
39
- throw new Error('Floating menu container must not have `position:static`.');
35
+ if ((appendTo !== appendTo.ownerDocument.body || containerLeft !== 0 || containerTop !== 0) && appendTo.ownerDocument.defaultView?.getComputedStyle(appendTo).getPropertyValue('position') === 'static') {
36
+ throw new Error('Floating menu container must not have `position: static`.');
40
37
  }
41
38
  // `2` for negative margin on calendar dropdown
42
39
  calendarContainer.style.top = `${refBottom - containerTop + 2}px`;
@@ -57,4 +54,4 @@ var carbonFlatpickrAppendToPlugin = config => fp => {
57
54
  };
58
55
  };
59
56
 
60
- exports["default"] = carbonFlatpickrAppendToPlugin;
57
+ exports.appendToPlugin = appendToPlugin;
package/lib/components/DatePickerInput/DatePickerInput.js CHANGED
@@ -19,6 +19,8 @@ var FormContext = require('../FluidForm/FormContext.js');
19
19
  var useId = require('../../internal/useId.js');
20
20
  require('../Text/index.js');
21
21
  var deprecate = require('../../prop-types/deprecate.js');
22
+ var index = require('../AILabel/index.js');
23
+ var utils = require('../../internal/utils.js');
22
24
  var Text = require('../Text/Text.js');
23
25
 
24
26
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -109,12 +111,11 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
109
111
  const input = /*#__PURE__*/React__default["default"].createElement("input", inputProps);
110
112
 
111
113
  // AILabel always size `mini`
112
- let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
113
- if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
114
- normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
115
- size: 'mini'
116
- });
117
- }
114
+ const candidate = slug ?? decorator;
115
+ const candidateIsAILabel = utils.isComponentElement(candidate, index.AILabel);
116
+ const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
117
+ size: 'mini'
118
+ }) : null;
118
119
  return /*#__PURE__*/React__default["default"].createElement("div", {
119
120
  className: containerClasses
120
121
  }, labelText && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
package/lib/components/Dialog/index.d.ts CHANGED
@@ -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, { type HTMLAttributes } from 'react';
7
+ import React, { type HTMLAttributes, type RefObject } from 'react';
8
8
  import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
9
9
  /**
10
10
  * ----------
@@ -20,6 +20,10 @@ interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
20
20
  * Specify an optional className to be applied to the modal root node
21
21
  */
22
22
  className?: string;
23
+ /**
24
+ * Provide a ref to return focus to once the dialog is closed.
25
+ */
26
+ focusAfterCloseRef?: RefObject<HTMLElement | null>;
23
27
  /**
24
28
  * Specifies whether the dialog is modal or non-modal. This cannot be changed
25
29
  * while open=true
package/lib/components/Dialog/index.js CHANGED
@@ -45,6 +45,7 @@ const DialogContext = /*#__PURE__*/React.createContext({});
45
45
  const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef(({
46
46
  children,
47
47
  className,
48
+ focusAfterCloseRef,
48
49
  modal,
49
50
  onCancel = noopFn.noopFn,
50
51
  onClick = noopFn.noopFn,
@@ -103,6 +104,19 @@ const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef(({
103
104
  }
104
105
  }
105
106
  }, [modal, open]);
107
+ React.useEffect(() => {
108
+ if (!open && focusAfterCloseRef) {
109
+ // use setTimeout to ensure focus is set after all other default focus behavior
110
+ const moveFocus = setTimeout(() => {
111
+ focusAfterCloseRef.current?.focus();
112
+ });
113
+
114
+ //component did unmount equivalent
115
+ return () => {
116
+ clearTimeout(moveFocus);
117
+ };
118
+ }
119
+ }, [open, focusAfterCloseRef]);
106
120
  const containerClasses = cx__default["default"](`${prefix}--dialog-container`);
107
121
  const contextValue = {
108
122
  dialogId,
@@ -148,6 +162,12 @@ unstable__Dialog.propTypes = {
148
162
  * Specify an optional className to be applied to the modal root node
149
163
  */
150
164
  className: PropTypes__default["default"].string,
165
+ /**
166
+ * Provide a ref to return focus to once the dialog is closed.
167
+ */
168
+ focusAfterCloseRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
169
+ current: PropTypes__default["default"].any
170
+ })]),
151
171
  /**
152
172
  * Modal specifies whether the Dialog is modal or non-modal. This cannot be
153
173
  * changed while open=true
package/lib/components/Dropdown/Dropdown.d.ts CHANGED
@@ -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, { Ref, type HTMLAttributes, type ReactNode } from 'react';
7
+ import React, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
8
8
  import { UseSelectProps } from 'downshift';
9
9
  import { type ListBoxMenuIconTranslationKey, type ListBoxSize, type ListBoxType } from '../ListBox';
10
10
  import { TranslateWithId } from '../../types/common';
package/lib/components/Dropdown/Dropdown.js CHANGED
@@ -15,7 +15,7 @@ var Downshift = require('downshift');
15
15
  var cx = require('classnames');
16
16
  var PropTypes = require('prop-types');
17
17
  var iconsReact = require('@carbon/icons-react');
18
- var index$1 = require('../ListBox/index.js');
18
+ var index$2 = require('../ListBox/index.js');
19
19
  var mergeRefs = require('../../tools/mergeRefs.js');
20
20
  var deprecate = require('../../prop-types/deprecate.js');
21
21
  var usePrefix = require('../../internal/usePrefix.js');
@@ -24,6 +24,8 @@ var FormContext = require('../FluidForm/FormContext.js');
24
24
  var useId = require('../../internal/useId.js');
25
25
  var react = require('@floating-ui/react');
26
26
  var index = require('../FeatureFlags/index.js');
27
+ var index$1 = require('../AILabel/index.js');
28
+ var utils = require('../../internal/utils.js');
27
29
  var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
28
30
 
29
31
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -318,15 +320,11 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
318
320
  }), [autoAlign, getMenuProps, refs.setFloating, enableFloatingStyles]);
319
321
 
320
322
  // AILabel is always size `mini`
321
- const normalizedDecorator = React.useMemo(() => {
322
- let element = slug ?? decorator;
323
- if (element && element['type']?.displayName === 'AILabel') {
324
- return /*#__PURE__*/React__default["default"].cloneElement(element, {
325
- size: 'mini'
326
- });
327
- }
328
- return /*#__PURE__*/React__default["default"].isValidElement(element) ? element : null;
329
- }, [slug, decorator]);
323
+ const candidate = slug ?? decorator;
324
+ const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
325
+ const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
326
+ size: 'mini'
327
+ }) : null;
330
328
  const allLabelProps = getLabelProps();
331
329
  const labelProps = /*#__PURE__*/React.isValidElement(titleText) ? {
332
330
  id: allLabelProps.id
@@ -335,7 +333,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
335
333
  className: wrapperClasses
336
334
  }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
337
335
  className: titleClasses
338
- }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
336
+ }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$2["default"], {
339
337
  onFocus: handleFocus,
340
338
  onBlur: handleFocus,
341
339
  size: size,
@@ -366,19 +364,19 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(({
366
364
  ref: mergedRef
367
365
  }), /*#__PURE__*/React__default["default"].createElement("span", {
368
366
  className: `${prefix}--list-box__label`
369
- }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
367
+ }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuIcon, {
370
368
  isOpen: isOpen,
371
369
  translateWithId: translateWithId
372
370
  })), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
373
371
  className: `${prefix}--list-box__inner-wrapper--decorator`
374
- }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen && items.map((item, index) => {
372
+ }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement(index$2["default"].Menu, menuProps, isOpen && items.map((item, index) => {
375
373
  const isObject = item !== null && typeof item === 'object';
376
374
  const itemProps = getItemProps({
377
375
  item,
378
376
  index
379
377
  });
380
378
  const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
381
- return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
379
+ return /*#__PURE__*/React__default["default"].createElement(index$2["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
382
380
  key: itemProps.id,
383
381
  isActive: selectedItem === item,
384
382
  isHighlighted: highlightedIndex === index,
package/lib/components/FileUploader/FileUploaderButton.js CHANGED
@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
15
15
  var React = require('react');
16
16
  var keys = require('../../internal/keyboard/keys.js');
17
17
  var match = require('../../internal/keyboard/match.js');
18
- var uniqueId = require('../../tools/uniqueId.js');
18
+ var useId = require('../../internal/useId.js');
19
19
  var usePrefix = require('../../internal/usePrefix.js');
20
20
  var deprecate = require('../../prop-types/deprecate.js');
21
21
  var noopFn = require('../../internal/noopFn.js');
@@ -49,7 +49,7 @@ function FileUploaderButton({
49
49
  const [prevOwnerLabelText, setPrevOwnerLabelText] = React.useState(ownerLabelText);
50
50
  const {
51
51
  current: inputId
52
- } = React.useRef(id || uniqueId.uniqueId());
52
+ } = React.useRef(id || useId.useId());
53
53
  const inputNode = React.useRef(null);
54
54
  const classes = cx__default["default"](`${prefix}--btn`, className, {
55
55
  [`${prefix}--btn--${buttonKind}`]: buttonKind,
package/lib/components/FileUploader/FileUploaderDropContainer.js CHANGED
@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
15
15
  var cx = require('classnames');
16
16
  var keys = require('../../internal/keyboard/keys.js');
17
17
  var match = require('../../internal/keyboard/match.js');
18
- var uniqueId = require('../../tools/uniqueId.js');
18
+ var useId = require('../../internal/useId.js');
19
19
  var usePrefix = require('../../internal/usePrefix.js');
20
20
  var events = require('../../tools/events.js');
21
21
  var deprecate = require('../../prop-types/deprecate.js');
@@ -46,7 +46,7 @@ function FileUploaderDropContainer({
46
46
  const inputRef = React.useRef(null);
47
47
  const {
48
48
  current: uid
49
- } = React.useRef(id || uniqueId.uniqueId());
49
+ } = React.useRef(id || useId.useId());
50
50
  const [isActive, setActive] = React.useState(false);
51
51
  const dropareaClasses = cx__default["default"](`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
52
52
  [`${prefix}--file__drop-container--drag-over`]: isActive,
package/lib/components/FileUploader/FileUploaderItem.js CHANGED
@@ -16,7 +16,7 @@ var React = require('react');
16
16
  var Filename = require('./Filename.js');
17
17
  var keys = require('../../internal/keyboard/keys.js');
18
18
  var match = require('../../internal/keyboard/match.js');
19
- var uniqueId = require('../../tools/uniqueId.js');
19
+ var useId = require('../../internal/useId.js');
20
20
  var usePrefix = require('../../internal/usePrefix.js');
21
21
  var noopFn = require('../../internal/noopFn.js');
22
22
  require('../Text/index.js');
@@ -48,7 +48,7 @@ function FileUploaderItem({
48
48
  const prefix = usePrefix.usePrefix();
49
49
  const {
50
50
  current: id
51
- } = React.useRef(uuid || uniqueId.uniqueId());
51
+ } = React.useRef(uuid || useId.useId());
52
52
  const classes = cx__default["default"](`${prefix}--file__selected-file`, className, {
53
53
  [`${prefix}--file__selected-file--invalid`]: invalid,
54
54
  [`${prefix}--file__selected-file--md`]: size === 'md',
package/lib/components/Layer/index.d.ts CHANGED
@@ -35,7 +35,5 @@ export interface LayerBaseProps {
35
35
  withBackground?: boolean;
36
36
  }
37
37
  export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
38
- declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {
39
- as?: React.ElementType;
40
- } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
38
+ declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
41
39
  export { Layer };
package/lib/components/Layer/index.js CHANGED
@@ -35,14 +35,15 @@ function useLayer() {
35
35
  level
36
36
  };
37
37
  }
38
- const Layer = /*#__PURE__*/React__default["default"].forwardRef(({
39
- as,
40
- className: customClassName,
41
- children,
42
- level: overrideLevel,
43
- withBackground = false,
44
- ...rest
45
- }, ref) => {
38
+ const Layer = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
39
+ const {
40
+ as,
41
+ className: customClassName,
42
+ children,
43
+ level: overrideLevel,
44
+ withBackground = false,
45
+ ...rest
46
+ } = props;
46
47
  const contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
47
48
  const level = overrideLevel ?? contextLevel;
48
49
  const prefix = usePrefix.usePrefix();
package/lib/components/Menu/Menu.js CHANGED
@@ -44,12 +44,6 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
44
44
  open,
45
45
  size = 'sm',
46
46
  legacyAutoalign = 'true',
47
- // TODO: `ssr-friendly` doesn't support ESLint v9.
48
- // https://github.com/kopiro/eslint-plugin-ssr-friendly/issues/30
49
- // https://github.com/carbon-design-system/carbon/issues/18991
50
- /*
51
- // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
52
- */
53
47
  target = environment.canUseDOM && document.body,
54
48
  x = 0,
55
49
  y = 0,
@@ -260,8 +254,13 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu({
260
254
  return [fitValue(ranges.x, 'x') ?? -1, fitValue(ranges.y, 'y') ?? -1];
261
255
  }
262
256
  React.useEffect(() => {
263
- if (open && focusableItems.length > 0) {
264
- focusItem();
257
+ if (open) {
258
+ const raf = requestAnimationFrame(() => {
259
+ if (focusableItems.length > 0) {
260
+ focusItem();
261
+ }
262
+ });
263
+ return () => cancelAnimationFrame(raf);
265
264
  }
266
265
  // eslint-disable-next-line react-hooks/exhaustive-deps
267
266
  }, [open, focusableItems]);
package/lib/components/Menu/MenuItem.js CHANGED
@@ -117,7 +117,11 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
117
117
  function handleKeyDown(e) {
118
118
  if (hasChildren && match.match(e, keys.ArrowRight)) {
119
119
  openSubmenu();
120
+ requestAnimationFrame(() => {
121
+ refs.floating.current?.focus();
122
+ });
120
123
  e.stopPropagation();
124
+ e.preventDefault();
121
125
  }
122
126
  pendingKeyboardClick.current = keyboardClickEvent(e);
123
127
  if (rest.onKeyDown) {
@@ -134,11 +138,18 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
134
138
  [`${prefix}--menu-item--disabled`]: isDisabled,
135
139
  [`${prefix}--menu-item--danger`]: isDanger
136
140
  });
137
-
141
+ const [isFocusable, setIsFocusable] = React.useState(false);
138
142
  // on first render, register this menuitem in the context's state
139
143
  // (used for keyboard navigation)
140
144
  React.useEffect(() => {
141
145
  registerItem();
146
+
147
+ // Detects if this is the first focusable item
148
+ const currentItems = context.state.items;
149
+ if (!disabled && menuItem.current && currentItems.length === 0) {
150
+ setIsFocusable(true);
151
+ }
152
+
142
153
  // eslint-disable-next-line react-hooks/exhaustive-deps
143
154
  }, []);
144
155
 
@@ -177,7 +188,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem({
177
188
  }, rest, {
178
189
  ref: ref,
179
190
  className: classNames,
180
- tabIndex: -1,
191
+ tabIndex: isFocusable ? 0 : -1,
181
192
  "aria-disabled": isDisabled ?? undefined,
182
193
  "aria-haspopup": hasChildren ?? undefined,
183
194
  "aria-expanded": hasChildren ? submenuOpen : undefined,
package/lib/components/Modal/Modal.d.ts CHANGED
@@ -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, { type HTMLAttributes, type ReactNode, type Ref } from 'react';
7
+ import React, { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
8
8
  import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
9
9
  export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
10
10
  export type ModalSize = (typeof ModalSizes)[number];
@@ -57,7 +57,7 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
57
57
  /**
58
58
  * Provide a ref to return focus to once the modal is closed.
59
59
  */
60
- launcherButtonRef?: Ref<HTMLButtonElement>;
60
+ launcherButtonRef?: RefObject<HTMLButtonElement | null>;
61
61
  /**
62
62
  * Specify the description for the loading text
63
63
  */
package/lib/components/Modal/Modal.js CHANGED
@@ -19,7 +19,7 @@ var Button = require('../Button/Button.js');
19
19
  require('../Button/Button.Skeleton.js');
20
20
  var ButtonSet = require('../ButtonSet/ButtonSet.js');
21
21
  var InlineLoading = require('../InlineLoading/InlineLoading.js');
22
- var index$3 = require('../Layer/index.js');
22
+ var index$4 = require('../Layer/index.js');
23
23
  var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
24
24
  var wrapFocus = require('../../internal/wrapFocus.js');
25
25
  var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
@@ -28,13 +28,15 @@ var usePrefix = require('../../internal/usePrefix.js');
28
28
  var usePreviousValue = require('../../internal/usePreviousValue.js');
29
29
  var keys = require('../../internal/keyboard/keys.js');
30
30
  var match = require('../../internal/keyboard/match.js');
31
- var index$2 = require('../IconButton/index.js');
31
+ var index$3 = require('../IconButton/index.js');
32
32
  var noopFn = require('../../internal/noopFn.js');
33
33
  require('../Text/index.js');
34
34
  var index = require('../FeatureFlags/index.js');
35
35
  var events = require('../../tools/events.js');
36
36
  var deprecate = require('../../prop-types/deprecate.js');
37
- var index$1 = require('../Dialog/index.js');
37
+ var index$2 = require('../Dialog/index.js');
38
+ var index$1 = require('../AILabel/index.js');
39
+ var utils = require('../../internal/utils.js');
38
40
  var warning = require('../../internal/warning.js');
39
41
  var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js');
40
42
  var Text = require('../Text/Text.js');
@@ -46,6 +48,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
46
48
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
47
49
 
48
50
  const ModalSizes = ['xs', 'sm', 'md', 'lg'];
51
+ const invalidOutsideClickMessage = '`Modal`: `preventCloseOnClickOutside` should not be `false` when `passiveModal` is `false`. Non-passive `Modal`s should not be dismissible by clicking outside.';
49
52
  const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
50
53
  'aria-label': ariaLabelProp,
51
54
  children,
@@ -71,7 +74,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
71
74
  size,
72
75
  hasScrollingContent = false,
73
76
  closeButtonLabel = 'Close',
74
- preventCloseOnClickOutside = false,
77
+ preventCloseOnClickOutside = !passiveModal,
75
78
  isFullWidth,
76
79
  launcherButtonRef,
77
80
  loadingStatus = 'inactive',
@@ -102,6 +105,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
102
105
  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
103
106
  const enableDialogElement = index.useFeatureFlag('enable-dialog-element');
104
107
  process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
108
+ if (!passiveModal && preventCloseOnClickOutside === false) {
109
+ console.error(invalidOutsideClickMessage);
110
+ }
105
111
  function isCloseButton(element) {
106
112
  return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
107
113
  }
@@ -275,15 +281,14 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
275
281
  }, []);
276
282
 
277
283
  // AILabel always size `sm`
278
- let normalizedDecorator = /*#__PURE__*/React__default["default"].isValidElement(slug ?? decorator) ? slug ?? decorator : null;
279
- if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
280
- normalizedDecorator = /*#__PURE__*/React__default["default"].cloneElement(normalizedDecorator, {
281
- size: 'sm'
282
- });
283
- }
284
+ const candidate = slug ?? decorator;
285
+ const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
286
+ const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
287
+ size: 'sm'
288
+ }) : null;
284
289
  const modalButton = /*#__PURE__*/React__default["default"].createElement("div", {
285
290
  className: `${prefix}--modal-close-button`
286
- }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
291
+ }, /*#__PURE__*/React__default["default"].createElement(index$3.IconButton, {
287
292
  className: modalCloseButtonClass,
288
293
  label: closeButtonLabel,
289
294
  onClick: onRequestClose,
@@ -300,8 +305,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
300
305
  // alertdialog is the only permitted aria role for a native dialog element
301
306
  // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
302
307
  const isAlertDialog = alert && !passiveModal;
303
- const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$1.unstable__Dialog, {
308
+ const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$2.unstable__Dialog, {
304
309
  open: open,
310
+ focusAfterCloseRef: launcherButtonRef,
305
311
  modal: true,
306
312
  ref: innerModal,
307
313
  role: isAlertDialog ? 'alertdialog' : '',
@@ -322,7 +328,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
322
328
  className: `${prefix}--modal--inner__decorator`
323
329
  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("div", {
324
330
  className: `${prefix}--modal-close-button`
325
- }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
331
+ }, /*#__PURE__*/React__default["default"].createElement(index$3.IconButton, {
326
332
  className: modalCloseButtonClass,
327
333
  label: closeButtonLabel,
328
334
  onClick: onRequestClose,
@@ -334,7 +340,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
334
340
  "aria-hidden": "true",
335
341
  tabIndex: "-1",
336
342
  className: `${modalCloseButtonClass}__icon`
337
- })))), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
343
+ })))), /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({
338
344
  ref: contentRef,
339
345
  id: modalBodyId,
340
346
  className: contentClasses
@@ -390,7 +396,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
390
396
  className: `${prefix}--modal-header__heading`
391
397
  }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
392
398
  className: `${prefix}--modal--inner__decorator`
393
- }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
399
+ }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({
394
400
  ref: contentRef,
395
401
  id: modalBodyId,
396
402
  className: contentClasses
@@ -427,7 +433,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal({
427
433
  role: "link",
428
434
  className: `${prefix}--visually-hidden`
429
435
  }, "Focus sentinel"));
430
- return /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
436
+ return /*#__PURE__*/React__default["default"].createElement(index$4.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
431
437
  level: 0,
432
438
  onKeyDown: handleKeyDown,
433
439
  onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
@@ -548,7 +554,12 @@ Modal.propTypes = {
548
554
  /**
549
555
  * Prevent closing on click outside of modal
550
556
  */
551
- preventCloseOnClickOutside: PropTypes__default["default"].bool,
557
+ preventCloseOnClickOutside: (props, propName) => {
558
+ if (!props.passiveModal && props[propName] === false) {
559
+ return new Error(invalidOutsideClickMessage);
560
+ }
561
+ return null;
562
+ },
552
563
  /**
553
564
  * Specify whether the Button should be disabled, or not
554
565
  */
package/lib/components/MultiSelect/FilterableMultiSelect.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
8
- import React, { ReactNode, FunctionComponent, ReactElement } from 'react';
8
+ import React, { type FunctionComponent, type ReactElement, type ReactNode } from 'react';
9
9
  import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
10
10
  import { type ListBoxSize, type ListBoxType } from '../ListBox';
11
11
  import { TranslateWithId } from '../../types/common';