@carbon/react 1.99.0 → 1.100.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 (277) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +978 -978
  2. package/es/components/BadgeIndicator/index.d.ts +1 -1
  3. package/es/components/BadgeIndicator/index.js +8 -6
  4. package/es/components/Breadcrumb/BreadcrumbItem.d.ts +1 -1
  5. package/es/components/Breadcrumb/BreadcrumbItem.js +6 -7
  6. package/es/components/Button/Button.Skeleton.d.ts +28 -2
  7. package/es/components/Button/Button.js +3 -2
  8. package/es/components/ChatButton/ChatButton.d.ts +3 -2
  9. package/es/components/CheckboxGroup/CheckboxGroup.d.ts +60 -2
  10. package/es/components/ComboBox/ComboBox.d.ts +6 -7
  11. package/es/components/ComboBox/ComboBox.js +22 -10
  12. package/es/components/ComposedModal/ComposedModal.d.ts +2 -2
  13. package/es/components/ContainedList/ContainedList.d.ts +35 -6
  14. package/es/components/ContainedList/ContainedList.js +3 -1
  15. package/es/components/ContainedList/ContainedListItem/ContainedListItem.d.ts +32 -3
  16. package/es/components/ContainedList/index.d.ts +1 -1
  17. package/es/components/ContainedList/index.js +4 -1
  18. package/es/components/DangerButton/DangerButton.d.ts +1 -1
  19. package/es/components/DataTable/DataTable.d.ts +22 -5
  20. package/es/components/DataTable/DataTable.js +1 -1
  21. package/es/components/DataTable/TableExpandRow.d.ts +1 -1
  22. package/es/components/DataTable/TableExpandRow.js +2 -2
  23. package/es/components/DataTable/TableHeader.d.ts +1 -1
  24. package/es/components/DataTable/TableHeader.js +18 -16
  25. package/es/components/DataTable/TableToolbar.d.ts +25 -1
  26. package/es/components/DataTable/TableToolbarMenu.d.ts +25 -5
  27. package/es/components/DataTable/TableToolbarMenu.js +0 -3
  28. package/es/components/DataTableSkeleton/DataTableSkeleton.d.ts +51 -2
  29. package/es/components/DataTableSkeleton/DataTableSkeleton.js +6 -0
  30. package/es/components/DatePicker/DatePicker.d.ts +2 -2
  31. package/es/components/DatePicker/DatePicker.js +38 -53
  32. package/es/components/DatePicker/plugins/fixEventsPlugin.js +28 -2
  33. package/es/components/DatePickerInput/DatePickerInput.d.ts +1 -1
  34. package/es/components/DatePickerInput/DatePickerInput.js +3 -2
  35. package/es/components/Dialog/Dialog.d.ts +1 -1
  36. package/es/components/Dropdown/Dropdown.Skeleton.d.ts +19 -2
  37. package/es/components/Dropdown/Dropdown.d.ts +3 -4
  38. package/es/components/Dropdown/Dropdown.js +16 -13
  39. package/es/components/ExpandableSearch/ExpandableSearch.d.ts +1 -1
  40. package/es/components/ExpandableSearch/ExpandableSearch.js +14 -12
  41. package/es/components/FileUploader/FileUploader.d.ts +1 -1
  42. package/es/components/FileUploader/FileUploader.js +2 -2
  43. package/es/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
  44. package/es/components/FileUploader/FileUploaderDropContainer.js +28 -10
  45. package/es/components/FluidComboBox/FluidComboBox.Skeleton.d.ts +11 -3
  46. package/es/components/FluidComboBox/FluidComboBox.d.ts +2 -7
  47. package/es/components/FluidComboBox/FluidComboBox.js +1 -2
  48. package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.d.ts +15 -3
  49. package/es/components/FluidDatePicker/FluidDatePicker.d.ts +2 -2
  50. package/es/components/FluidDropdown/FluidDropdown.Skeleton.d.ts +11 -3
  51. package/es/components/FluidDropdown/FluidDropdown.d.ts +1 -6
  52. package/es/components/FluidDropdown/FluidDropdown.js +1 -2
  53. package/es/components/FluidForm/FluidForm.d.ts +15 -2
  54. package/es/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts +2 -2
  55. package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.d.ts +11 -3
  56. package/es/components/FluidMultiSelect/FluidMultiSelect.d.ts +1 -6
  57. package/es/components/FluidMultiSelect/FluidMultiSelect.js +1 -2
  58. package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +11 -3
  59. package/es/components/FluidNumberInput/FluidNumberInput.d.ts +1 -1
  60. package/es/components/FluidSearch/FluidSearch.Skeleton.d.ts +11 -3
  61. package/es/components/FluidSearch/FluidSearch.d.ts +1 -1
  62. package/es/components/FluidSearch/FluidSearch.js +3 -3
  63. package/es/components/FluidSelect/FluidSelect.Skeleton.d.ts +11 -3
  64. package/es/components/FluidTextArea/FluidTextArea.Skeleton.d.ts +11 -3
  65. package/es/components/FluidTextArea/FluidTextArea.d.ts +95 -1
  66. package/es/components/FluidTextInput/FluidPasswordInput.d.ts +83 -2
  67. package/es/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +11 -3
  68. package/es/components/Grid/GridContext.d.ts +19 -1
  69. package/es/components/IconButton/index.d.ts +1 -1
  70. package/es/components/IconButton/index.js +2 -2
  71. package/es/components/InlineLoading/InlineLoading.js +5 -11
  72. package/es/components/Link/Link.js +3 -0
  73. package/es/components/ListBox/ListBoxField.d.ts +35 -2
  74. package/es/components/ListBox/ListBoxMenuIcon.d.ts +16 -3
  75. package/es/components/ListBox/ListBoxMenuItem.d.ts +1 -1
  76. package/es/components/ListBox/ListBoxSelection.d.ts +34 -3
  77. package/es/components/Menu/MenuItem.d.ts +2 -2
  78. package/es/components/MultiSelect/FilterableMultiSelect.d.ts +2 -2
  79. package/es/components/MultiSelect/FilterableMultiSelect.js +22 -13
  80. package/es/components/MultiSelect/MultiSelect.d.ts +3 -4
  81. package/es/components/MultiSelect/MultiSelect.js +24 -22
  82. package/es/components/Notification/Notification.d.ts +8 -7
  83. package/es/components/Notification/Notification.js +4 -4
  84. package/es/components/OverflowMenu/OverflowMenu.d.ts +1 -1
  85. package/es/components/OverflowMenu/OverflowMenu.js +0 -1
  86. package/es/components/OverflowMenu/index.d.ts +1 -1
  87. package/es/components/PageHeader/PageHeader.d.ts +3 -3
  88. package/es/components/Popover/index.js +21 -12
  89. package/es/components/Search/Search.d.ts +2 -2
  90. package/es/components/Select/Select.d.ts +1 -1
  91. package/es/components/Select/Select.js +2 -2
  92. package/es/components/SkeletonIcon/SkeletonIcon.d.ts +16 -2
  93. package/es/components/SkeletonText/SkeletonText.d.ts +1 -1
  94. package/es/components/Tag/Tag.d.ts +1 -1
  95. package/es/components/Tag/Tag.js +2 -0
  96. package/es/components/Text/Text.d.ts +1 -1
  97. package/es/components/Text/Text.js +4 -3
  98. package/es/components/Text/TextDirection.d.ts +1 -1
  99. package/es/components/Text/TextDirection.js +1 -3
  100. package/es/components/Text/TextDirectionContext.d.ts +3 -3
  101. package/es/components/TextArea/TextArea.js +1 -3
  102. package/es/components/TextInput/ControlledPasswordInput.d.ts +1 -1
  103. package/es/components/TextInput/ControlledPasswordInput.js +2 -2
  104. package/es/components/TextInput/PasswordInput.d.ts +1 -1
  105. package/es/components/TextInput/PasswordInput.js +2 -2
  106. package/es/components/TextInput/TextInput.d.ts +1 -1
  107. package/es/components/TextInput/TextInput.js +2 -2
  108. package/es/components/Tile/Tile.d.ts +1 -1
  109. package/es/components/Tile/Tile.js +37 -69
  110. package/es/components/Toggle/Toggle.Skeleton.d.ts +9 -3
  111. package/es/components/Toggletip/index.d.ts +1 -1
  112. package/es/components/Toggletip/index.js +9 -7
  113. package/es/components/Tooltip/DefinitionTooltip.d.ts +52 -1
  114. package/es/components/Tooltip/Tooltip.js +2 -0
  115. package/es/components/TreeView/TreeNode.d.ts +4 -4
  116. package/es/components/UIShell/Header.d.ts +20 -3
  117. package/es/components/UIShell/HeaderGlobalAction.d.ts +2 -2
  118. package/es/components/UIShell/HeaderName.js +1 -1
  119. package/es/components/UIShell/Link.d.ts +1 -1
  120. package/es/components/UIShell/Link.js +14 -14
  121. package/es/components/UIShell/SideNav.d.ts +3 -4
  122. package/es/components/UIShell/SideNav.js +37 -27
  123. package/es/components/UIShell/SideNavDivider.d.ts +11 -3
  124. package/es/components/UIShell/SideNavHeader.d.ts +24 -1
  125. package/es/components/UIShell/SideNavIcon.d.ts +20 -2
  126. package/es/components/UIShell/SideNavItem.d.ts +20 -2
  127. package/es/components/UIShell/SideNavItems.d.ts +22 -2
  128. package/es/components/UIShell/SideNavLink.d.ts +1 -1
  129. package/es/components/UIShell/SideNavLink.js +14 -14
  130. package/es/components/UIShell/SideNavMenu.d.ts +1 -1
  131. package/es/components/UIShell/SideNavMenu.js +2 -2
  132. package/es/components/UIShell/SideNavMenuItem.d.ts +2 -2
  133. package/es/components/UIShell/SideNavMenuItem.js +2 -2
  134. package/es/components/UIShell/SwitcherDivider.d.ts +10 -2
  135. package/es/internal/FloatingMenu.d.ts +1 -1
  136. package/es/internal/FloatingMenu.js +0 -2
  137. package/es/internal/PolymorphicProps.d.ts +3 -3
  138. package/es/internal/useNoInteractiveChildren.d.ts +1 -1
  139. package/es/internal/useNoInteractiveChildren.js +8 -10
  140. package/es/internal/useOutsideClick.d.ts +1 -1
  141. package/es/internal/useOutsideClick.js +0 -4
  142. package/lib/components/BadgeIndicator/index.d.ts +1 -1
  143. package/lib/components/BadgeIndicator/index.js +7 -5
  144. package/lib/components/Breadcrumb/BreadcrumbItem.d.ts +1 -1
  145. package/lib/components/Breadcrumb/BreadcrumbItem.js +5 -6
  146. package/lib/components/Button/Button.Skeleton.d.ts +28 -2
  147. package/lib/components/Button/Button.js +3 -2
  148. package/lib/components/ChatButton/ChatButton.d.ts +3 -2
  149. package/lib/components/CheckboxGroup/CheckboxGroup.d.ts +60 -2
  150. package/lib/components/ComboBox/ComboBox.d.ts +6 -7
  151. package/lib/components/ComboBox/ComboBox.js +22 -10
  152. package/lib/components/ComposedModal/ComposedModal.d.ts +2 -2
  153. package/lib/components/ContainedList/ContainedList.d.ts +35 -6
  154. package/lib/components/ContainedList/ContainedList.js +3 -1
  155. package/lib/components/ContainedList/ContainedListItem/ContainedListItem.d.ts +32 -3
  156. package/lib/components/ContainedList/index.d.ts +1 -1
  157. package/lib/components/ContainedList/index.js +4 -1
  158. package/lib/components/DangerButton/DangerButton.d.ts +1 -1
  159. package/lib/components/DataTable/DataTable.d.ts +22 -5
  160. package/lib/components/DataTable/DataTable.js +1 -1
  161. package/lib/components/DataTable/TableExpandRow.d.ts +1 -1
  162. package/lib/components/DataTable/TableHeader.d.ts +1 -1
  163. package/lib/components/DataTable/TableHeader.js +17 -15
  164. package/lib/components/DataTable/TableToolbar.d.ts +25 -1
  165. package/lib/components/DataTable/TableToolbarMenu.d.ts +25 -5
  166. package/lib/components/DataTable/TableToolbarMenu.js +0 -3
  167. package/lib/components/DataTableSkeleton/DataTableSkeleton.d.ts +51 -2
  168. package/lib/components/DataTableSkeleton/DataTableSkeleton.js +6 -0
  169. package/lib/components/DatePicker/DatePicker.d.ts +2 -2
  170. package/lib/components/DatePicker/DatePicker.js +37 -52
  171. package/lib/components/DatePicker/plugins/fixEventsPlugin.js +28 -2
  172. package/lib/components/DatePickerInput/DatePickerInput.d.ts +1 -1
  173. package/lib/components/DatePickerInput/DatePickerInput.js +2 -1
  174. package/lib/components/Dialog/Dialog.d.ts +1 -1
  175. package/lib/components/Dropdown/Dropdown.Skeleton.d.ts +19 -2
  176. package/lib/components/Dropdown/Dropdown.d.ts +3 -4
  177. package/lib/components/Dropdown/Dropdown.js +16 -13
  178. package/lib/components/ExpandableSearch/ExpandableSearch.d.ts +1 -1
  179. package/lib/components/ExpandableSearch/ExpandableSearch.js +13 -11
  180. package/lib/components/FileUploader/FileUploader.d.ts +1 -1
  181. package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +1 -1
  182. package/lib/components/FileUploader/FileUploaderDropContainer.js +28 -10
  183. package/lib/components/FluidComboBox/FluidComboBox.Skeleton.d.ts +11 -3
  184. package/lib/components/FluidComboBox/FluidComboBox.d.ts +2 -7
  185. package/lib/components/FluidComboBox/FluidComboBox.js +1 -2
  186. package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.d.ts +15 -3
  187. package/lib/components/FluidDatePicker/FluidDatePicker.d.ts +2 -2
  188. package/lib/components/FluidDropdown/FluidDropdown.Skeleton.d.ts +11 -3
  189. package/lib/components/FluidDropdown/FluidDropdown.d.ts +1 -6
  190. package/lib/components/FluidDropdown/FluidDropdown.js +1 -2
  191. package/lib/components/FluidForm/FluidForm.d.ts +15 -2
  192. package/lib/components/FluidMultiSelect/FluidFilterableMultiSelect.d.ts +2 -2
  193. package/lib/components/FluidMultiSelect/FluidMultiSelect.Skeleton.d.ts +11 -3
  194. package/lib/components/FluidMultiSelect/FluidMultiSelect.d.ts +1 -6
  195. package/lib/components/FluidMultiSelect/FluidMultiSelect.js +1 -2
  196. package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +11 -3
  197. package/lib/components/FluidNumberInput/FluidNumberInput.d.ts +1 -1
  198. package/lib/components/FluidSearch/FluidSearch.Skeleton.d.ts +11 -3
  199. package/lib/components/FluidSearch/FluidSearch.d.ts +1 -1
  200. package/lib/components/FluidSearch/FluidSearch.js +2 -2
  201. package/lib/components/FluidSelect/FluidSelect.Skeleton.d.ts +11 -3
  202. package/lib/components/FluidTextArea/FluidTextArea.Skeleton.d.ts +11 -3
  203. package/lib/components/FluidTextArea/FluidTextArea.d.ts +95 -1
  204. package/lib/components/FluidTextInput/FluidPasswordInput.d.ts +83 -2
  205. package/lib/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +11 -3
  206. package/lib/components/Grid/GridContext.d.ts +19 -1
  207. package/lib/components/IconButton/index.d.ts +1 -1
  208. package/lib/components/InlineLoading/InlineLoading.js +5 -11
  209. package/lib/components/Link/Link.js +3 -0
  210. package/lib/components/ListBox/ListBoxField.d.ts +35 -2
  211. package/lib/components/ListBox/ListBoxMenuIcon.d.ts +16 -3
  212. package/lib/components/ListBox/ListBoxMenuItem.d.ts +1 -1
  213. package/lib/components/ListBox/ListBoxSelection.d.ts +34 -3
  214. package/lib/components/Menu/MenuItem.d.ts +2 -2
  215. package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +2 -2
  216. package/lib/components/MultiSelect/FilterableMultiSelect.js +22 -13
  217. package/lib/components/MultiSelect/MultiSelect.d.ts +3 -4
  218. package/lib/components/MultiSelect/MultiSelect.js +24 -22
  219. package/lib/components/Notification/Notification.d.ts +8 -7
  220. package/lib/components/Notification/Notification.js +4 -4
  221. package/lib/components/OverflowMenu/OverflowMenu.d.ts +1 -1
  222. package/lib/components/OverflowMenu/OverflowMenu.js +0 -1
  223. package/lib/components/OverflowMenu/index.d.ts +1 -1
  224. package/lib/components/PageHeader/PageHeader.d.ts +3 -3
  225. package/lib/components/Popover/index.js +19 -10
  226. package/lib/components/Search/Search.d.ts +2 -2
  227. package/lib/components/Select/Select.d.ts +1 -1
  228. package/lib/components/SkeletonIcon/SkeletonIcon.d.ts +16 -2
  229. package/lib/components/SkeletonText/SkeletonText.d.ts +1 -1
  230. package/lib/components/Tag/Tag.d.ts +1 -1
  231. package/lib/components/Tag/Tag.js +2 -0
  232. package/lib/components/Text/Text.d.ts +1 -1
  233. package/lib/components/Text/Text.js +3 -2
  234. package/lib/components/Text/TextDirection.d.ts +1 -1
  235. package/lib/components/Text/TextDirection.js +1 -3
  236. package/lib/components/Text/TextDirectionContext.d.ts +3 -3
  237. package/lib/components/TextArea/TextArea.js +1 -3
  238. package/lib/components/TextInput/ControlledPasswordInput.d.ts +1 -1
  239. package/lib/components/TextInput/PasswordInput.d.ts +1 -1
  240. package/lib/components/TextInput/TextInput.d.ts +1 -1
  241. package/lib/components/Tile/Tile.d.ts +1 -1
  242. package/lib/components/Tile/Tile.js +35 -67
  243. package/lib/components/Toggle/Toggle.Skeleton.d.ts +9 -3
  244. package/lib/components/Toggletip/index.d.ts +1 -1
  245. package/lib/components/Toggletip/index.js +7 -5
  246. package/lib/components/Tooltip/DefinitionTooltip.d.ts +52 -1
  247. package/lib/components/Tooltip/Tooltip.js +2 -0
  248. package/lib/components/TreeView/TreeNode.d.ts +4 -4
  249. package/lib/components/UIShell/Header.d.ts +20 -3
  250. package/lib/components/UIShell/HeaderGlobalAction.d.ts +2 -2
  251. package/lib/components/UIShell/HeaderName.js +1 -1
  252. package/lib/components/UIShell/Link.d.ts +1 -1
  253. package/lib/components/UIShell/Link.js +13 -13
  254. package/lib/components/UIShell/SideNav.d.ts +3 -4
  255. package/lib/components/UIShell/SideNav.js +36 -26
  256. package/lib/components/UIShell/SideNavDivider.d.ts +11 -3
  257. package/lib/components/UIShell/SideNavHeader.d.ts +24 -1
  258. package/lib/components/UIShell/SideNavIcon.d.ts +20 -2
  259. package/lib/components/UIShell/SideNavItem.d.ts +20 -2
  260. package/lib/components/UIShell/SideNavItems.d.ts +22 -2
  261. package/lib/components/UIShell/SideNavLink.d.ts +1 -1
  262. package/lib/components/UIShell/SideNavLink.js +14 -14
  263. package/lib/components/UIShell/SideNavMenu.d.ts +1 -1
  264. package/lib/components/UIShell/SideNavMenuItem.d.ts +2 -2
  265. package/lib/components/UIShell/SwitcherDivider.d.ts +10 -2
  266. package/lib/internal/FloatingMenu.d.ts +1 -1
  267. package/lib/internal/FloatingMenu.js +0 -2
  268. package/lib/internal/PolymorphicProps.d.ts +3 -3
  269. package/lib/internal/useNoInteractiveChildren.d.ts +1 -1
  270. package/lib/internal/useNoInteractiveChildren.js +8 -10
  271. package/lib/internal/useOutsideClick.d.ts +1 -1
  272. package/lib/internal/useOutsideClick.js +0 -4
  273. package/package.json +7 -7
  274. package/scss/_carbon-utilities.scss +9 -0
  275. package/telemetry.yml +0 -1
  276. package/es/internal/createClassWrapper.d.ts +0 -12
  277. package/lib/internal/createClassWrapper.d.ts +0 -12
@@ -197,6 +197,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
197
197
  // eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
198
198
  }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
199
199
  const isManualClearingRef = React.useRef(false);
200
+ const committedCustomValueRef = React.useRef('');
200
201
  const [isClearing, setIsClearing] = React.useState(false);
201
202
  const prefix = usePrefix.usePrefix();
202
203
  const {
@@ -286,11 +287,13 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
286
287
  return changes;
287
288
  }
288
289
  const nextSelectedItem = items.find(item => itemToString(item) === inputValue) ?? inputValue;
290
+ const isCustomSelection = typeof nextSelectedItem === 'string' && !items.some(item => isEqual(item, nextSelectedItem));
289
291
  if (!isEqual(currentSelectedItem, nextSelectedItem) && onChange) {
290
292
  onChange({
291
293
  selectedItem: nextSelectedItem,
292
294
  inputValue
293
295
  });
296
+ committedCustomValueRef.current = isCustomSelection ? inputValue : '';
294
297
  }
295
298
  return {
296
299
  ...changes,
@@ -451,9 +454,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
451
454
  [`${prefix}--combo-box--input--focus`]: isFocused
452
455
  });
453
456
 
454
- // needs to be Capitalized for react to render it correctly
455
- const ItemToElement = itemToElement;
456
-
457
457
  // AILabel always size `mini`
458
458
  const candidate = slug ?? decorator;
459
459
  const candidateIsAILabel = utils.isComponentElement(candidate, index$1.AILabel);
@@ -529,6 +529,9 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
529
529
  return;
530
530
  }
531
531
  if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter) && typeof newSelectedItem !== 'undefined' && !isEqual(selectedItemProp, newSelectedItem)) {
532
+ if (items.some(item => isEqual(item, newSelectedItem))) {
533
+ committedCustomValueRef.current = '';
534
+ }
532
535
  onChange({
533
536
  selectedItem: newSelectedItem
534
537
  });
@@ -538,7 +541,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
538
541
 
539
542
  // Keep the dropdown highlight in sync with either the controlled value or
540
543
  // Downshift's own selection when uncontrolled.
541
- const menuSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
544
+ const currentSelectedItem = typeof selectedItemProp !== 'undefined' ? selectedItemProp : selectedItem;
542
545
  React.useEffect(() => {
543
546
  // Used to expose the downshift actions to consumers for use with downshiftProps
544
547
  // An odd pattern, here we mutate the value stored in the ref provided from the consumer.
@@ -653,8 +656,18 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
653
656
  ...inputProps,
654
657
  onChange: e => {
655
658
  const newValue = e.target.value;
659
+ const shouldClearSelection = allowCustomValue && committedCustomValueRef.current && inputValue === committedCustomValueRef.current && newValue === '';
656
660
  setInputValue(newValue);
657
661
  downshiftSetInputValue(newValue);
662
+ if (shouldClearSelection) {
663
+ setIsClearing(true);
664
+ onChange({
665
+ selectedItem: null,
666
+ inputValue: ''
667
+ });
668
+ selectItem(null);
669
+ committedCustomValueRef.current = '';
670
+ }
658
671
  },
659
672
  ref: mergeRefs.mergeRefs(textInput, ref, inputRef),
660
673
  onKeyDown: event => {
@@ -671,6 +684,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
671
684
  // manually fire it when `allowCustomValue` is provided, the menu is closing,
672
685
  // and there is a value.
673
686
  if (allowCustomValue && isOpen && inputValue && highlightedIndex === -1) {
687
+ committedCustomValueRef.current = inputValue;
674
688
  onChange({
675
689
  selectedItem: null,
676
690
  inputValue
@@ -735,6 +749,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
735
749
  selectedItem: null
736
750
  });
737
751
  selectItem(null);
752
+ committedCustomValueRef.current = '';
738
753
  handleSelectionClear();
739
754
  },
740
755
  translateWithId: translateWithId,
@@ -766,13 +781,11 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
766
781
  } = itemProps;
767
782
  return /*#__PURE__*/React.createElement(index$2.default.MenuItem, _rollupPluginBabelHelpers.extends({
768
783
  key: itemProps.id,
769
- isActive: isEqual(menuSelectedItem, item),
784
+ isActive: isEqual(currentSelectedItem, item),
770
785
  isHighlighted: highlightedIndex === index,
771
786
  title: title,
772
787
  disabled: disabled
773
- }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
774
- key: itemProps.id
775
- }, item)) : itemToString(item), isEqual(menuSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
788
+ }, modifiedItemProps), itemToElement ? itemToElement(item) : itemToString(item), isEqual(currentSelectedItem, item) && /*#__PURE__*/React.createElement(iconsReact.Checkmark, {
776
789
  className: `${prefix}--list-box__menu-item__selected-icon`
777
790
  }));
778
791
  }) : null)), helperText && !invalid && !warn && !isFluid && /*#__PURE__*/React.createElement(Text.Text, {
@@ -868,8 +881,7 @@ ComboBox.propTypes = {
868
881
  */
869
882
  invalidText: PropTypes.node,
870
883
  /**
871
- * Optional function to render items as custom components instead of strings.
872
- * Defaults to null and is overridden by a getter
884
+ * Renders an item as a custom React node instead of a string.
873
885
  */
874
886
  itemToElement: PropTypes.func,
875
887
  /**
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2023, 2025
2
+ * Copyright IBM Corp. 2023, 2026
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.
@@ -61,7 +61,7 @@ export interface ComposedModalProps extends HTMLAttributes<HTMLDivElement> {
61
61
  * Specify an optional handler for closing modal.
62
62
  * Returning `false` here prevents closing modal.
63
63
  */
64
- onClose?(event: MouseEvent): void | boolean;
64
+ onClose?: ((event: MouseEvent) => boolean) | ((event: MouseEvent) => void);
65
65
  /**
66
66
  * Called for all `onKeyDown` events that do not close the modal
67
67
  */
@@ -4,12 +4,9 @@
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';
8
- import ContainedListItem from './ContainedListItem';
7
+ import { ReactNode } from 'react';
8
+ import PropTypes from 'prop-types';
9
9
  declare const variants: readonly ["on-page", "disclosed"];
10
- export type ContainedListType = React.FC<ContainedListProps> & {
11
- ContainedListItem: typeof ContainedListItem;
12
- };
13
10
  export type Variants = (typeof variants)[number];
14
11
  export interface ContainedListProps {
15
12
  /**
@@ -41,5 +38,37 @@ export interface ContainedListProps {
41
38
  */
42
39
  size?: 'sm' | 'md' | 'lg' | 'xl';
43
40
  }
44
- declare const ContainedList: ContainedListType;
41
+ declare const ContainedList: {
42
+ ({ action, children, className, isInset, kind, label, size, ...rest }: ContainedListProps): import("react/jsx-runtime").JSX.Element;
43
+ propTypes: {
44
+ /**
45
+ * A slot for a possible interactive element to render.
46
+ */
47
+ action: PropTypes.Requireable<PropTypes.ReactNodeLike>;
48
+ /**
49
+ * A collection of ContainedListItems to be rendered in the ContainedList
50
+ */
51
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
52
+ /**
53
+ * Additional CSS class names.
54
+ */
55
+ className: PropTypes.Requireable<string>;
56
+ /**
57
+ * Specify whether the dividing lines in between list items should be inset.
58
+ */
59
+ isInset: PropTypes.Requireable<boolean>;
60
+ /**
61
+ * The kind of ContainedList you want to display
62
+ */
63
+ kind: PropTypes.Requireable<"on-page" | "disclosed">;
64
+ /**
65
+ * A label describing the contained list.
66
+ */
67
+ label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
68
+ /**
69
+ * Specify the size of the contained list.
70
+ */
71
+ size: PropTypes.Requireable<string>;
72
+ };
73
+ };
45
74
  export default ContainedList;
@@ -136,6 +136,8 @@ ContainedList.propTypes = {
136
136
  */
137
137
  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
138
138
  };
139
- ContainedList.ContainedListItem = ContainedListItem.default;
139
+ Object.assign(ContainedList, {
140
+ ContainedListItem: ContainedListItem.default
141
+ });
140
142
 
141
143
  exports.default = ContainedList;
@@ -4,7 +4,8 @@
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 ComponentType, type FunctionComponent, ReactNode } from 'react';
7
+ import { type ElementType, type ReactNode } from 'react';
8
+ import PropTypes from 'prop-types';
8
9
  interface ContainedListItemProps {
9
10
  /**
10
11
  * A slot for a possible interactive element to render within the item.
@@ -29,7 +30,35 @@ interface ContainedListItemProps {
29
30
  /**
30
31
  * A component used to render an icon.
31
32
  */
32
- renderIcon?: ComponentType | FunctionComponent;
33
+ renderIcon?: ElementType;
33
34
  }
34
- declare const ContainedListItem: React.FC<ContainedListItemProps>;
35
+ declare const ContainedListItem: {
36
+ ({ action, children, className, disabled, onClick, renderIcon: IconElement, ...rest }: ContainedListItemProps): import("react/jsx-runtime").JSX.Element;
37
+ propTypes: {
38
+ /**
39
+ * A slot for a possible interactive element to render within the item.
40
+ */
41
+ action: PropTypes.Requireable<PropTypes.ReactNodeLike>;
42
+ /**
43
+ * The content of this item. Must not contain any interactive elements. Use props.action to include those.
44
+ */
45
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
46
+ /**
47
+ * Additional CSS class names.
48
+ */
49
+ className: PropTypes.Requireable<string>;
50
+ /**
51
+ * Whether this item is disabled.
52
+ */
53
+ disabled: PropTypes.Requireable<boolean>;
54
+ /**
55
+ * Provide an optional function to be called when the item is clicked.
56
+ */
57
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
58
+ /**
59
+ * A component used to render an icon.
60
+ */
61
+ renderIcon: PropTypes.Requireable<object>;
62
+ };
63
+ };
35
64
  export default ContainedListItem;
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2022
2
+ * Copyright IBM Corp. 2022, 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.
@@ -13,8 +13,11 @@ var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js')
13
13
  var ContainedList = require('./ContainedList.js');
14
14
  var ContainedListItem = require('./ContainedListItem/ContainedListItem.js');
15
15
 
16
- ContainedList.default.ContainedListItem = ContainedListItem.default;
17
16
  if (process.env.NODE_ENV !== 'production') {
17
+ // @ts-expect-error - This component did not have a `displayName` before it
18
+ // was properly typed. After adding proper typing, a type error appears here.
19
+ // The warning logged to the console includes `undefined` because no
20
+ // `displayName` is set.
18
21
  deprecateFieldOnObject.deprecateFieldOnObject(ContainedList.default, 'ContainedListItem', ContainedListItem.default);
19
22
  }
20
23
 
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2023
2
+ * Copyright IBM Corp. 2016, 2026
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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2025
2
+ * Copyright IBM Corp. 2016, 2026
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.
@@ -140,7 +140,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
140
140
  [key: string]: unknown;
141
141
  }) => {
142
142
  onCancel: () => void;
143
- onSelectAll?: () => void | undefined;
143
+ onSelectAll?: () => void;
144
144
  shouldShowBatchActions: boolean;
145
145
  totalCount: number;
146
146
  totalSelected: number;
@@ -367,7 +367,15 @@ export declare const DataTable: {
367
367
  slug: PropTypes.Requireable<PropTypes.ReactNodeLike>;
368
368
  };
369
369
  };
370
- TableToolbar: React.FC<import("./TableToolbar").TableToolbarProps>;
370
+ TableToolbar: {
371
+ ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: import("./TableToolbar").TableToolbarProps): import("react/jsx-runtime").JSX.Element;
372
+ propTypes: {
373
+ "aria-label": PropTypes.Requireable<string>;
374
+ ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
375
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
376
+ size: PropTypes.Requireable<string>;
377
+ };
378
+ };
371
379
  TableToolbarAction: React.ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & React.RefAttributes<HTMLDivElement>>;
372
380
  TableToolbarContent: (props: React.HTMLAttributes<"div">) => React.ReactElement<any>;
373
381
  TableToolbarSearch: {
@@ -394,12 +402,21 @@ export declare const DataTable: {
394
402
  translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
395
403
  };
396
404
  };
397
- TableToolbarMenu: React.FC<import("./TableToolbarMenu").TableToolbarMenuProps>;
405
+ TableToolbarMenu: {
406
+ ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
407
+ propTypes: {
408
+ children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
409
+ className: PropTypes.Requireable<string>;
410
+ iconDescription: PropTypes.Requireable<string>;
411
+ menuOptionsClass: PropTypes.Requireable<string>;
412
+ renderIcon: PropTypes.Requireable<object>;
413
+ };
414
+ };
398
415
  propTypes: {
399
416
  /**
400
417
  * Pass in the children that will be rendered within the Table
401
418
  */
402
- children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
419
+ children: PropTypes.Requireable<(...args: any[]) => any>;
403
420
  /**
404
421
  * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
405
422
  */
@@ -584,7 +584,7 @@ DataTable.propTypes = {
584
584
  /**
585
585
  * Pass in the children that will be rendered within the Table
586
586
  */
587
- children: PropTypes.node,
587
+ children: PropTypes.func,
588
588
  /**
589
589
  * Experimental property. Allows table to align cell contents to the top if there is text wrapping in the content. Might have performance issues, intended for smaller tables
590
590
  */
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2025
2
+ * Copyright IBM Corp. 2016, 2026
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.
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2025
2
+ * Copyright IBM Corp. 2016, 2026
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.
@@ -49,21 +49,23 @@ const sortDirections = {
49
49
  [sortStates.sortStates.ASC]: 'ascending',
50
50
  [sortStates.sortStates.DESC]: 'descending'
51
51
  };
52
- const TableHeader = /*#__PURE__*/React.forwardRef(function TableHeader({
53
- className: headerClassName,
54
- children,
55
- colSpan,
56
- decorator,
57
- isSortable = false,
58
- isSortHeader,
59
- onClick,
60
- scope = defaultScope,
61
- sortDirection,
62
- translateWithId: t = defaultTranslateWithId,
63
- slug,
64
- id,
65
- ...rest
66
- }, ref) {
52
+ const frFn = React.forwardRef;
53
+ const TableHeader = frFn((props, ref) => {
54
+ const {
55
+ className: headerClassName,
56
+ children,
57
+ colSpan,
58
+ decorator,
59
+ isSortable = false,
60
+ isSortHeader,
61
+ onClick,
62
+ scope = defaultScope,
63
+ sortDirection,
64
+ translateWithId: t = defaultTranslateWithId,
65
+ slug,
66
+ id,
67
+ ...rest
68
+ } = props;
67
69
  const prefix = usePrefix.usePrefix();
68
70
  const uniqueId = useId.useId('table-sort');
69
71
 
@@ -4,6 +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 PropTypes from 'prop-types';
7
8
  import React from 'react';
8
9
  export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
9
10
  /**
@@ -25,5 +26,28 @@ export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement>
25
26
  */
26
27
  size?: 'sm' | 'lg';
27
28
  }
28
- declare const TableToolbar: React.FC<TableToolbarProps>;
29
+ declare const TableToolbar: {
30
+ ({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
31
+ propTypes: {
32
+ /**
33
+ * 'aria-label' of the TableToolbar component.
34
+ * Specify a label to be read by screen readers on the container node
35
+ */
36
+ "aria-label": PropTypes.Requireable<string>;
37
+ /**
38
+ * Deprecated, please use `aria-label` instead.
39
+ * Specify a label to be read by screen readers on the container node.
40
+ * 'aria-label' of the TableToolbar component.
41
+ */
42
+ ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
43
+ /**
44
+ * Pass in the children that will be rendered inside the TableToolbar
45
+ */
46
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
47
+ /**
48
+ * `lg` Change the row height of table
49
+ */
50
+ size: PropTypes.Requireable<string>;
51
+ };
52
+ };
29
53
  export default TableToolbar;
@@ -1,12 +1,32 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2025
2
+ * Copyright IBM Corp. 2016, 2026
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.
6
6
  */
7
- import React from 'react';
7
+ import PropTypes from 'prop-types';
8
8
  import { OverflowMenuProps } from '../OverflowMenu';
9
- export interface TableToolbarMenuProps extends OverflowMenuProps {
10
- }
11
- declare const TableToolbarMenu: React.FC<TableToolbarMenuProps>;
9
+ export type TableToolbarMenuProps = OverflowMenuProps;
10
+ declare const TableToolbarMenu: {
11
+ ({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
12
+ propTypes: {
13
+ children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
14
+ /**
15
+ * Provide an optional class name for the toolbar menu
16
+ */
17
+ className: PropTypes.Requireable<string>;
18
+ /**
19
+ * The description of the menu icon.
20
+ */
21
+ iconDescription: PropTypes.Requireable<string>;
22
+ /**
23
+ * Provide an optional class name for the toolbar menu
24
+ */
25
+ menuOptionsClass: PropTypes.Requireable<string>;
26
+ /**
27
+ * A component used to render an icon.
28
+ */
29
+ renderIcon: PropTypes.Requireable<object>;
30
+ };
31
+ };
12
32
  export default TableToolbarMenu;
@@ -18,9 +18,6 @@ var usePrefix = require('../../internal/usePrefix.js');
18
18
  var index = require('../OverflowMenu/index.js');
19
19
 
20
20
  const defaultIconDescription = 'Settings';
21
-
22
- // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- https://github.com/carbon-design-system/carbon/issues/20452
23
-
24
21
  const TableToolbarMenu = ({
25
22
  className,
26
23
  renderIcon = iconsReact.Settings,
@@ -4,7 +4,9 @@
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 FunctionComponent, TableHTMLAttributes } from 'react';
7
+ import PropTypes from 'prop-types';
8
+ import React, { type TableHTMLAttributes } from 'react';
9
+ import { DataTableSize } from '../DataTable/DataTable';
8
10
  export interface DataTableSkeletonHeader {
9
11
  /**
10
12
  * Specify header label
@@ -41,6 +43,10 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
41
43
  * Specify if the table toolbar should be rendered as part of the skeleton.
42
44
  */
43
45
  showToolbar?: boolean;
46
+ /**
47
+ * Changes the row height of table.
48
+ */
49
+ size?: DataTableSize;
44
50
  /**
45
51
  * Optionally specify whether you want the DataTable to be zebra striped
46
52
  */
@@ -50,5 +56,48 @@ export interface DataTableSkeletonProps extends TableHTMLAttributes<HTMLTableEle
50
56
  */
51
57
  className?: string;
52
58
  }
53
- declare const DataTableSkeleton: FunctionComponent<DataTableSkeletonProps>;
59
+ declare const DataTableSkeleton: {
60
+ ({ headers, rowCount, columnCount, zebra, compact, className, showHeader, showToolbar, size, ...rest }: DataTableSkeletonProps): import("react/jsx-runtime").JSX.Element;
61
+ propTypes: {
62
+ /**
63
+ * Specify an optional className to add.
64
+ */
65
+ className: PropTypes.Requireable<string>;
66
+ /**
67
+ * Specify the number of columns that you want to render in the skeleton state
68
+ */
69
+ columnCount: PropTypes.Requireable<number>;
70
+ /**
71
+ * Optionally specify whether you want the Skeleton to be rendered as a
72
+ * compact DataTable
73
+ */
74
+ compact: PropTypes.Requireable<boolean>;
75
+ /**
76
+ * Optionally specify the displayed headers
77
+ */
78
+ headers: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
79
+ header: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
80
+ }>>[]>;
81
+ /**
82
+ * Specify the number of rows that you want to render in the skeleton state
83
+ */
84
+ rowCount: PropTypes.Requireable<number>;
85
+ /**
86
+ * Specify if the table header should be rendered as part of the skeleton.
87
+ */
88
+ showHeader: PropTypes.Requireable<boolean>;
89
+ /**
90
+ * Specify if the table toolbar should be rendered as part of the skeleton.
91
+ */
92
+ showToolbar: PropTypes.Requireable<boolean>;
93
+ /**
94
+ * Changes the row height of table.
95
+ */
96
+ size: PropTypes.Requireable<string>;
97
+ /**
98
+ * Optionally specify whether you want the DataTable to be zebra striped
99
+ */
100
+ zebra: PropTypes.Requireable<boolean>;
101
+ };
102
+ };
54
103
  export default DataTableSkeleton;
@@ -25,12 +25,14 @@ const DataTableSkeleton = ({
25
25
  className,
26
26
  showHeader = true,
27
27
  showToolbar = true,
28
+ size = 'lg',
28
29
  ...rest
29
30
  }) => {
30
31
  const prefix = usePrefix.usePrefix();
31
32
  const dataTableSkeletonClasses = cx(className, {
32
33
  [`${prefix}--skeleton`]: true,
33
34
  [`${prefix}--data-table`]: true,
35
+ [`${prefix}--data-table--${size}`]: size,
34
36
  [`${prefix}--data-table--zebra`]: zebra,
35
37
  [`${prefix}--data-table--compact`]: compact
36
38
  });
@@ -101,6 +103,10 @@ DataTableSkeleton.propTypes = {
101
103
  * Specify if the table toolbar should be rendered as part of the skeleton.
102
104
  */
103
105
  showToolbar: PropTypes.bool,
106
+ /**
107
+ * Changes the row height of table.
108
+ */
109
+ size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
104
110
  /**
105
111
  * Optionally specify whether you want the DataTable to be zebra striped
106
112
  */
@@ -1,10 +1,10 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2025
2
+ * Copyright IBM Corp. 2016, 2026
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.
6
6
  */
7
- import React, { ReactNode } from 'react';
7
+ import React, { type ReactNode } from 'react';
8
8
  import flatpickr from 'flatpickr';
9
9
  import { DateLimit, DateOption } from 'flatpickr/dist/types/options';
10
10
  import { type SupportedLocale } from './DatePickerLocales';