@carbon/react 1.83.0-rc.0 → 1.83.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 (361) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +1008 -938
  2. package/es/components/AILabel/index.js +13 -13
  3. package/es/components/AISkeleton/AISkeletonIcon.js +2 -2
  4. package/es/components/AISkeleton/AISkeletonPlaceholder.js +2 -2
  5. package/es/components/AISkeleton/AISkeletonText.js +2 -2
  6. package/es/components/Accordion/Accordion.Skeleton.js +15 -15
  7. package/es/components/Accordion/Accordion.js +3 -3
  8. package/es/components/Accordion/AccordionItem.js +9 -9
  9. package/es/components/Accordion/AccordionProvider.js +2 -2
  10. package/es/components/AspectRatio/AspectRatio.js +2 -2
  11. package/es/components/BadgeIndicator/index.js +3 -3
  12. package/es/components/Breadcrumb/Breadcrumb.Skeleton.js +5 -5
  13. package/es/components/Breadcrumb/Breadcrumb.js +3 -3
  14. package/es/components/Breadcrumb/BreadcrumbItem.js +9 -9
  15. package/es/components/Button/Button.Skeleton.js +3 -3
  16. package/es/components/Button/Button.js +5 -5
  17. package/es/components/Button/ButtonBase.js +5 -5
  18. package/es/components/ButtonSet/ButtonSet.js +2 -2
  19. package/es/components/ChatButton/ChatButton.Skeleton.js +2 -2
  20. package/es/components/ChatButton/ChatButton.js +3 -3
  21. package/es/components/Checkbox/Checkbox.Skeleton.js +4 -4
  22. package/es/components/Checkbox/Checkbox.js +15 -15
  23. package/es/components/CheckboxGroup/CheckboxGroup.js +12 -12
  24. package/es/components/ClassPrefix/index.js +2 -2
  25. package/es/components/CodeSnippet/CodeSnippet.Skeleton.js +7 -7
  26. package/es/components/CodeSnippet/CodeSnippet.js +16 -16
  27. package/es/components/ComboBox/ComboBox.js +18 -18
  28. package/es/components/ComboButton/index.js +7 -7
  29. package/es/components/ComposedModal/ComposedModal.js +20 -20
  30. package/es/components/ComposedModal/ModalFooter.js +8 -8
  31. package/es/components/ComposedModal/ModalHeader.js +8 -8
  32. package/es/components/ContainedList/ContainedList.js +7 -7
  33. package/es/components/ContainedList/ContainedListItem/ContainedListItem.js +7 -7
  34. package/es/components/ContentSwitcher/ContentSwitcher.d.ts +8 -0
  35. package/es/components/ContentSwitcher/ContentSwitcher.js +13 -7
  36. package/es/components/Copy/Copy.js +2 -2
  37. package/es/components/CopyButton/CopyButton.js +4 -4
  38. package/es/components/DangerButton/DangerButton.js +2 -2
  39. package/es/components/DataTable/DataTable.d.ts +81 -283
  40. package/es/components/DataTable/DataTable.js +83 -123
  41. package/es/components/DataTable/Table.d.ts +2 -2
  42. package/es/components/DataTable/Table.js +4 -4
  43. package/es/components/DataTable/TableActionList.d.ts +1 -1
  44. package/es/components/DataTable/TableBatchAction.js +2 -2
  45. package/es/components/DataTable/TableBatchActions.js +9 -9
  46. package/es/components/DataTable/TableBody.d.ts +3 -3
  47. package/es/components/DataTable/TableBody.js +2 -2
  48. package/es/components/DataTable/TableCell.d.ts +3 -4
  49. package/es/components/DataTable/TableCell.js +2 -2
  50. package/es/components/DataTable/TableContainer.d.ts +2 -3
  51. package/es/components/DataTable/TableContainer.js +6 -6
  52. package/es/components/DataTable/TableDecoratorRow.js +4 -4
  53. package/es/components/DataTable/TableExpandHeader.d.ts +2 -3
  54. package/es/components/DataTable/TableExpandHeader.js +4 -4
  55. package/es/components/DataTable/TableExpandRow.js +8 -8
  56. package/es/components/DataTable/TableExpandedRow.d.ts +3 -3
  57. package/es/components/DataTable/TableExpandedRow.js +4 -4
  58. package/es/components/DataTable/TableHead.d.ts +1 -1
  59. package/es/components/DataTable/TableHeader.d.ts +4 -4
  60. package/es/components/DataTable/TableHeader.js +15 -15
  61. package/es/components/DataTable/TableRow.d.ts +3 -4
  62. package/es/components/DataTable/TableRow.js +4 -4
  63. package/es/components/DataTable/TableSelectAll.js +3 -3
  64. package/es/components/DataTable/TableSelectRow.js +4 -4
  65. package/es/components/DataTable/TableSlugRow.js +3 -3
  66. package/es/components/DataTable/TableToolbar.js +2 -2
  67. package/es/components/DataTable/TableToolbarAction.js +2 -2
  68. package/es/components/DataTable/TableToolbarContent.d.ts +1 -1
  69. package/es/components/DataTable/TableToolbarMenu.js +2 -2
  70. package/es/components/DataTable/TableToolbarSearch.js +2 -2
  71. package/es/components/DataTable/index.d.ts +1 -1
  72. package/es/components/DataTableSkeleton/DataTableSkeleton.js +15 -15
  73. package/es/components/DatePicker/DatePicker.Skeleton.js +8 -8
  74. package/es/components/DatePicker/DatePicker.js +17 -17
  75. package/es/components/DatePickerInput/DatePickerInput.d.ts +3 -4
  76. package/es/components/DatePickerInput/DatePickerInput.js +19 -19
  77. package/es/components/Dialog/index.d.ts +5 -6
  78. package/es/components/Dialog/index.js +10 -10
  79. package/es/components/Dropdown/Dropdown.Skeleton.d.ts +2 -3
  80. package/es/components/Dropdown/Dropdown.Skeleton.js +4 -4
  81. package/es/components/Dropdown/Dropdown.d.ts +3 -3
  82. package/es/components/Dropdown/Dropdown.js +18 -18
  83. package/es/components/ErrorBoundary/ErrorBoundary.js +2 -2
  84. package/es/components/ExpandableSearch/ExpandableSearch.js +3 -3
  85. package/es/components/FeatureFlags/index.js +2 -2
  86. package/es/components/FileUploader/FileUploader.Skeleton.d.ts +3 -3
  87. package/es/components/FileUploader/FileUploader.Skeleton.js +5 -5
  88. package/es/components/FileUploader/FileUploader.d.ts +2 -3
  89. package/es/components/FileUploader/FileUploader.js +12 -12
  90. package/es/components/FileUploader/FileUploaderButton.d.ts +2 -3
  91. package/es/components/FileUploader/FileUploaderButton.js +4 -4
  92. package/es/components/FileUploader/FileUploaderDropContainer.d.ts +2 -3
  93. package/es/components/FileUploader/FileUploaderDropContainer.js +5 -5
  94. package/es/components/FileUploader/FileUploaderItem.d.ts +2 -3
  95. package/es/components/FileUploader/FileUploaderItem.js +13 -13
  96. package/es/components/FileUploader/Filename.d.ts +3 -4
  97. package/es/components/FileUploader/Filename.js +7 -7
  98. package/es/components/FluidComboBox/FluidComboBox.Skeleton.js +5 -5
  99. package/es/components/FluidComboBox/FluidComboBox.js +4 -4
  100. package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js +11 -11
  101. package/es/components/FluidDatePicker/FluidDatePicker.js +4 -4
  102. package/es/components/FluidDatePickerInput/FluidDatePickerInput.js +3 -3
  103. package/es/components/FluidDropdown/FluidDropdown.Skeleton.js +5 -5
  104. package/es/components/FluidDropdown/FluidDropdown.js +4 -4
  105. package/es/components/FluidForm/FluidForm.d.ts +3 -4
  106. package/es/components/FluidForm/FluidForm.js +3 -3
  107. package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js +5 -5
  108. package/es/components/FluidMultiSelect/FluidMultiSelect.js +5 -5
  109. package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js +5 -5
  110. package/es/components/FluidNumberInput/FluidNumberInput.js +4 -4
  111. package/es/components/FluidSearch/FluidSearch.Skeleton.js +5 -5
  112. package/es/components/FluidSearch/FluidSearch.js +4 -4
  113. package/es/components/FluidSelect/FluidSelect.Skeleton.js +5 -5
  114. package/es/components/FluidSelect/FluidSelect.js +4 -4
  115. package/es/components/FluidTextArea/FluidTextArea.Skeleton.js +5 -5
  116. package/es/components/FluidTextArea/FluidTextArea.js +3 -3
  117. package/es/components/FluidTextInput/FluidTextInput.Skeleton.js +5 -5
  118. package/es/components/FluidTextInput/FluidTextInput.js +5 -5
  119. package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js +3 -3
  120. package/es/components/FluidTimePicker/FluidTimePicker.js +13 -13
  121. package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +3 -3
  122. package/es/components/Form/Form.js +2 -2
  123. package/es/components/FormGroup/FormGroup.d.ts +3 -4
  124. package/es/components/FormGroup/FormGroup.js +4 -4
  125. package/es/components/FormItem/FormItem.js +2 -2
  126. package/es/components/FormLabel/FormLabel.js +2 -2
  127. package/es/components/Grid/CSSGrid.js +8 -8
  128. package/es/components/Grid/Column.js +5 -5
  129. package/es/components/Grid/ColumnHang.js +2 -2
  130. package/es/components/Grid/FlexGrid.js +4 -4
  131. package/es/components/Grid/Grid.js +3 -3
  132. package/es/components/Grid/GridContext.d.ts +2 -2
  133. package/es/components/Grid/GridContext.js +1 -1
  134. package/es/components/Grid/Row.js +2 -2
  135. package/es/components/Heading/index.js +9 -9
  136. package/es/components/Icon/Icon.Skeleton.js +2 -2
  137. package/es/components/IconButton/index.js +11 -6
  138. package/es/components/IconIndicator/index.js +4 -4
  139. package/es/components/IdPrefix/index.js +2 -2
  140. package/es/components/InlineCheckbox/InlineCheckbox.js +6 -6
  141. package/es/components/InlineLoading/InlineLoading.js +10 -10
  142. package/es/components/Layer/LayerContext.js +2 -2
  143. package/es/components/Layer/index.d.ts +4 -0
  144. package/es/components/Layer/index.js +15 -8
  145. package/es/components/Layout/index.js +5 -5
  146. package/es/components/LayoutDirection/LayoutDirection.js +4 -4
  147. package/es/components/LayoutDirection/LayoutDirectionContext.js +2 -2
  148. package/es/components/Link/Link.js +6 -6
  149. package/es/components/ListBox/ListBox.d.ts +2 -3
  150. package/es/components/ListBox/ListBox.js +5 -5
  151. package/es/components/ListBox/ListBoxField.d.ts +3 -4
  152. package/es/components/ListBox/ListBoxField.js +2 -2
  153. package/es/components/ListBox/ListBoxMenu.d.ts +2 -3
  154. package/es/components/ListBox/ListBoxMenu.js +2 -2
  155. package/es/components/ListBox/ListBoxMenuIcon.js +4 -4
  156. package/es/components/ListBox/ListBoxMenuItem.d.ts +2 -3
  157. package/es/components/ListBox/ListBoxMenuItem.js +3 -3
  158. package/es/components/ListBox/ListBoxSelection.js +6 -6
  159. package/es/components/ListBox/next/ListBoxSelection.js +7 -7
  160. package/es/components/ListBox/next/ListBoxTrigger.js +4 -4
  161. package/es/components/ListItem/ListItem.js +2 -2
  162. package/es/components/Loading/Loading.d.ts +3 -3
  163. package/es/components/Loading/Loading.js +6 -6
  164. package/es/components/Menu/Menu.js +3 -3
  165. package/es/components/Menu/MenuItem.js +16 -16
  166. package/es/components/MenuButton/index.js +4 -4
  167. package/es/components/Modal/Modal.d.ts +2 -3
  168. package/es/components/Modal/Modal.js +35 -35
  169. package/es/components/ModalWrapper/ModalWrapper.js +7 -7
  170. package/es/components/MultiSelect/FilterableMultiSelect.js +22 -26
  171. package/es/components/MultiSelect/MultiSelect.js +23 -23
  172. package/es/components/Notification/Notification.js +41 -41
  173. package/es/components/NumberInput/NumberInput.Skeleton.js +4 -4
  174. package/es/components/NumberInput/NumberInput.js +22 -22
  175. package/es/components/OrderedList/OrderedList.js +2 -2
  176. package/es/components/OverflowMenu/OverflowMenu.js +7 -7
  177. package/es/components/OverflowMenu/index.js +3 -3
  178. package/es/components/OverflowMenu/next/index.js +6 -6
  179. package/es/components/OverflowMenuItem/OverflowMenuItem.js +4 -4
  180. package/es/components/OverflowMenuV2/index.js +3 -3
  181. package/es/components/PageHeader/PageHeader.js +29 -29
  182. package/es/components/Pagination/Pagination.Skeleton.js +8 -8
  183. package/es/components/Pagination/Pagination.js +17 -17
  184. package/es/components/Pagination/experimental/PageSelector.js +3 -3
  185. package/es/components/Pagination/experimental/Pagination.js +14 -14
  186. package/es/components/PaginationNav/PaginationNav.js +31 -31
  187. package/es/components/Popover/index.js +15 -15
  188. package/es/components/PrimaryButton/PrimaryButton.js +2 -2
  189. package/es/components/ProgressBar/ProgressBar.js +13 -13
  190. package/es/components/ProgressIndicator/ProgressIndicator.Skeleton.js +7 -7
  191. package/es/components/ProgressIndicator/ProgressIndicator.js +20 -20
  192. package/es/components/RadioButton/RadioButton.Skeleton.js +4 -4
  193. package/es/components/RadioButton/RadioButton.js +10 -10
  194. package/es/components/RadioButtonGroup/RadioButtonGroup.js +16 -16
  195. package/es/components/RadioTile/RadioTile.js +12 -12
  196. package/es/components/Search/Search.Skeleton.js +4 -4
  197. package/es/components/Search/Search.js +11 -11
  198. package/es/components/SecondaryButton/SecondaryButton.js +2 -2
  199. package/es/components/Select/Select.Skeleton.js +5 -5
  200. package/es/components/Select/Select.js +19 -19
  201. package/es/components/SelectItem/SelectItem.js +2 -2
  202. package/es/components/SelectItemGroup/SelectItemGroup.js +2 -2
  203. package/es/components/ShapeIndicator/index.js +7 -7
  204. package/es/components/SkeletonIcon/SkeletonIcon.d.ts +0 -4
  205. package/es/components/SkeletonIcon/SkeletonIcon.js +3 -7
  206. package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js +2 -2
  207. package/es/components/SkeletonText/SkeletonText.js +4 -4
  208. package/es/components/Slider/Slider.Skeleton.js +17 -17
  209. package/es/components/Slider/Slider.js +38 -38
  210. package/es/components/Slider/SliderHandles.js +19 -19
  211. package/es/components/Stack/HStack.js +2 -2
  212. package/es/components/Stack/Stack.js +2 -2
  213. package/es/components/Stack/VStack.js +2 -2
  214. package/es/components/StructuredList/StructuredList.Skeleton.js +12 -12
  215. package/es/components/StructuredList/StructuredList.js +24 -24
  216. package/es/components/Switch/IconSwitch.js +3 -3
  217. package/es/components/Switch/Switch.js +4 -4
  218. package/es/components/TabContent/TabContent.js +2 -2
  219. package/es/components/Tabs/Tabs.Skeleton.js +7 -7
  220. package/es/components/Tabs/Tabs.js +60 -60
  221. package/es/components/Tag/DismissibleTag.js +10 -10
  222. package/es/components/Tag/OperationalTag.js +6 -6
  223. package/es/components/Tag/SelectableTag.js +6 -6
  224. package/es/components/Tag/Tag.Skeleton.js +2 -2
  225. package/es/components/Tag/Tag.js +15 -15
  226. package/es/components/Text/Text.js +4 -4
  227. package/es/components/Text/TextDirection.js +2 -2
  228. package/es/components/Text/createTextComponent.js +2 -2
  229. package/es/components/TextArea/TextArea.Skeleton.js +4 -4
  230. package/es/components/TextArea/TextArea.js +19 -19
  231. package/es/components/TextInput/ControlledPasswordInput.d.ts +2 -3
  232. package/es/components/TextInput/ControlledPasswordInput.js +13 -13
  233. package/es/components/TextInput/PasswordInput.js +15 -15
  234. package/es/components/TextInput/TextInput.Skeleton.js +4 -4
  235. package/es/components/TextInput/TextInput.js +17 -17
  236. package/es/components/Theme/index.js +10 -10
  237. package/es/components/Tile/Tile.js +36 -36
  238. package/es/components/TileGroup/TileGroup.d.ts +3 -4
  239. package/es/components/TileGroup/TileGroup.js +8 -8
  240. package/es/components/TimePicker/TimePicker.d.ts +2 -3
  241. package/es/components/TimePicker/TimePicker.js +14 -14
  242. package/es/components/TimePickerSelect/TimePickerSelect.js +4 -4
  243. package/es/components/Toggle/Toggle.Skeleton.js +4 -4
  244. package/es/components/Toggle/Toggle.js +10 -10
  245. package/es/components/ToggleSmall/ToggleSmall.Skeleton.js +8 -8
  246. package/es/components/Toggletip/index.js +12 -12
  247. package/es/components/Tooltip/DefinitionTooltip.js +4 -4
  248. package/es/components/Tooltip/Tooltip.d.ts +3 -0
  249. package/es/components/Tooltip/Tooltip.js +25 -13
  250. package/es/components/TreeView/TreeNode.js +45 -36
  251. package/es/components/TreeView/TreeView.js +30 -21
  252. package/es/components/UIShell/Content.js +2 -2
  253. package/es/components/UIShell/Header.js +2 -2
  254. package/es/components/UIShell/HeaderContainer.js +2 -2
  255. package/es/components/UIShell/HeaderGlobalAction.js +3 -3
  256. package/es/components/UIShell/HeaderGlobalBar.d.ts +1 -1
  257. package/es/components/UIShell/HeaderMenu.js +14 -14
  258. package/es/components/UIShell/HeaderMenuButton.js +4 -4
  259. package/es/components/UIShell/HeaderMenuItem.js +11 -9
  260. package/es/components/UIShell/HeaderName.js +3 -3
  261. package/es/components/UIShell/HeaderNavigation.js +3 -3
  262. package/es/components/UIShell/HeaderPanel.js +3 -3
  263. package/es/components/UIShell/HeaderSideNavItems.js +2 -2
  264. package/es/components/UIShell/Link.js +3 -3
  265. package/es/components/UIShell/SideNav.js +7 -7
  266. package/es/components/UIShell/SideNavDetails.js +3 -3
  267. package/es/components/UIShell/SideNavDivider.js +3 -3
  268. package/es/components/UIShell/SideNavFooter.js +7 -7
  269. package/es/components/UIShell/SideNavHeader.js +3 -3
  270. package/es/components/UIShell/SideNavIcon.js +2 -2
  271. package/es/components/UIShell/SideNavItem.js +2 -2
  272. package/es/components/UIShell/SideNavItems.js +5 -5
  273. package/es/components/UIShell/SideNavLink.js +5 -5
  274. package/es/components/UIShell/SideNavLinkText.js +2 -2
  275. package/es/components/UIShell/SideNavMenu.js +10 -10
  276. package/es/components/UIShell/SideNavMenuItem.js +5 -5
  277. package/es/components/UIShell/SideNavSwitcher.js +8 -8
  278. package/es/components/UIShell/SkipToContent.js +2 -2
  279. package/es/components/UIShell/Switcher.js +8 -8
  280. package/es/components/UIShell/SwitcherDivider.js +2 -2
  281. package/es/components/UIShell/SwitcherItem.js +3 -3
  282. package/es/components/UnorderedList/UnorderedList.js +2 -2
  283. package/es/index.js +23 -24
  284. package/es/internal/FloatingMenu.js +4 -4
  285. package/es/internal/__mocks__/mockHTMLElement.d.ts +9 -0
  286. package/es/internal/createClassWrapper.js +2 -2
  287. package/es/internal/useId.js +2 -2
  288. package/es/internal/useIdPrefix.js +3 -3
  289. package/es/internal/useNormalizedInputProps.js +3 -3
  290. package/es/internal/usePrefix.js +3 -3
  291. package/es/internal/useResizeObserver.d.ts +14 -0
  292. package/es/internal/useResizeObserver.js +74 -0
  293. package/es/internal/wrapFocus.js +3 -6
  294. package/es/tools/wrapComponent.d.ts +3 -4
  295. package/es/tools/wrapComponent.js +2 -2
  296. package/es/types/common.d.ts +0 -2
  297. package/lib/components/CodeSnippet/CodeSnippet.js +2 -3
  298. package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +8 -0
  299. package/lib/components/ContentSwitcher/ContentSwitcher.js +7 -1
  300. package/lib/components/DataTable/DataTable.d.ts +81 -283
  301. package/lib/components/DataTable/DataTable.js +82 -123
  302. package/lib/components/DataTable/Table.d.ts +2 -2
  303. package/lib/components/DataTable/TableActionList.d.ts +1 -1
  304. package/lib/components/DataTable/TableBody.d.ts +3 -3
  305. package/lib/components/DataTable/TableCell.d.ts +3 -4
  306. package/lib/components/DataTable/TableContainer.d.ts +2 -3
  307. package/lib/components/DataTable/TableExpandHeader.d.ts +2 -3
  308. package/lib/components/DataTable/TableExpandedRow.d.ts +3 -3
  309. package/lib/components/DataTable/TableHead.d.ts +1 -1
  310. package/lib/components/DataTable/TableHeader.d.ts +4 -4
  311. package/lib/components/DataTable/TableRow.d.ts +3 -4
  312. package/lib/components/DataTable/TableToolbarContent.d.ts +1 -1
  313. package/lib/components/DataTable/index.d.ts +1 -1
  314. package/lib/components/DatePickerInput/DatePickerInput.d.ts +3 -4
  315. package/lib/components/Dialog/index.d.ts +5 -6
  316. package/lib/components/Dropdown/Dropdown.Skeleton.d.ts +2 -3
  317. package/lib/components/Dropdown/Dropdown.d.ts +3 -3
  318. package/lib/components/FileUploader/FileUploader.Skeleton.d.ts +3 -3
  319. package/lib/components/FileUploader/FileUploader.d.ts +2 -3
  320. package/lib/components/FileUploader/FileUploaderButton.d.ts +2 -3
  321. package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +2 -3
  322. package/lib/components/FileUploader/FileUploaderItem.d.ts +2 -3
  323. package/lib/components/FileUploader/Filename.d.ts +3 -4
  324. package/lib/components/FluidForm/FluidForm.d.ts +3 -4
  325. package/lib/components/FormGroup/FormGroup.d.ts +3 -4
  326. package/lib/components/Grid/GridContext.d.ts +2 -2
  327. package/lib/components/Grid/GridContext.js +5 -23
  328. package/lib/components/IconButton/index.js +6 -1
  329. package/lib/components/Layer/index.d.ts +4 -0
  330. package/lib/components/Layer/index.js +9 -2
  331. package/lib/components/Link/Link.js +1 -1
  332. package/lib/components/ListBox/ListBox.d.ts +2 -3
  333. package/lib/components/ListBox/ListBoxField.d.ts +3 -4
  334. package/lib/components/ListBox/ListBoxMenu.d.ts +2 -3
  335. package/lib/components/ListBox/ListBoxMenuItem.d.ts +2 -3
  336. package/lib/components/Loading/Loading.d.ts +3 -3
  337. package/lib/components/Modal/Modal.d.ts +2 -3
  338. package/lib/components/MultiSelect/FilterableMultiSelect.js +1 -5
  339. package/lib/components/SkeletonIcon/SkeletonIcon.d.ts +0 -4
  340. package/lib/components/SkeletonIcon/SkeletonIcon.js +1 -5
  341. package/lib/components/TextInput/ControlledPasswordInput.d.ts +2 -3
  342. package/lib/components/TileGroup/TileGroup.d.ts +3 -4
  343. package/lib/components/TimePicker/TimePicker.d.ts +2 -3
  344. package/lib/components/Tooltip/Tooltip.d.ts +3 -0
  345. package/lib/components/Tooltip/Tooltip.js +18 -6
  346. package/lib/components/TreeView/TreeNode.js +20 -11
  347. package/lib/components/TreeView/TreeView.js +27 -18
  348. package/lib/components/UIShell/HeaderGlobalBar.d.ts +1 -1
  349. package/lib/components/UIShell/HeaderMenuItem.js +7 -5
  350. package/lib/index.js +46 -47
  351. package/lib/internal/__mocks__/mockHTMLElement.d.ts +9 -0
  352. package/lib/internal/useResizeObserver.d.ts +14 -0
  353. package/lib/internal/useResizeObserver.js +78 -0
  354. package/lib/internal/wrapFocus.js +3 -6
  355. package/lib/tools/wrapComponent.d.ts +3 -4
  356. package/lib/types/common.d.ts +0 -2
  357. package/package.json +5 -6
  358. package/scss/components/content-switcher/_tokens.scss +9 -0
  359. package/telemetry.yml +4 -1
  360. package/es/components/DataTable/index.js +0 -76
  361. package/lib/components/DataTable/index.js +0 -82
@@ -9,11 +9,11 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
9
9
  import * as FeatureFlags from '@carbon/feature-flags';
10
10
  import cx from 'classnames';
11
11
  import PropTypes from 'prop-types';
12
- import React__default from 'react';
12
+ import React from 'react';
13
13
  import { usePrefix } from '../../internal/usePrefix.js';
14
14
  import { useGridSettings } from './GridContext.js';
15
15
 
16
- const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
16
+ const Column = /*#__PURE__*/React.forwardRef((_ref, ref) => {
17
17
  let {
18
18
  as,
19
19
  children,
@@ -31,7 +31,7 @@ const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
31
31
  const prefix = usePrefix();
32
32
  const BaseComponent = as || 'div';
33
33
  if (mode === 'css-grid') {
34
- return /*#__PURE__*/React__default.createElement(CSSGridColumn, _extends({
34
+ return /*#__PURE__*/React.createElement(CSSGridColumn, _extends({
35
35
  as: BaseComponent,
36
36
  className: customClassName,
37
37
  sm: sm,
@@ -45,7 +45,7 @@ const Column = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
45
45
  const className = cx(customClassName, columnClassName, {
46
46
  [`${prefix}--col`]: columnClassName.length === 0
47
47
  });
48
- return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
48
+ return /*#__PURE__*/React.createElement(BaseComponent, _extends({
49
49
  className: className,
50
50
  ref: ref
51
51
  }, rest), children);
@@ -133,7 +133,7 @@ function CSSGridColumn(_ref2) {
133
133
  const className = cx(containerClassName, breakpointClassName, spanClassName, {
134
134
  [`${prefix}--css-grid-column`]: true
135
135
  });
136
- return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
136
+ return /*#__PURE__*/React.createElement(BaseComponent, _extends({
137
137
  className: className
138
138
  }, rest), children);
139
139
  }
@@ -8,7 +8,7 @@
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React__default from 'react';
11
+ import React from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
14
  /**
@@ -26,7 +26,7 @@ function ColumnHang(_ref) {
26
26
  const className = cx(customClassName, `${prefix}--grid-column-hang`);
27
27
  // cast as any to let TypeScript allow passing in attributes to base component
28
28
  const BaseComponentAsAny = BaseComponent;
29
- return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
29
+ return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({}, rest, {
30
30
  className: className
31
31
  }), children);
32
32
  }
@@ -8,11 +8,11 @@
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React__default from 'react';
11
+ import React from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
  import { GridSettings } from './GridContext.js';
14
14
 
15
- const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
15
+ const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
16
16
  let {
17
17
  as,
18
18
  condensed = false,
@@ -31,10 +31,10 @@ const FlexGrid = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
31
31
  });
32
32
  // cast as any to let TypeScript allow passing in attributes to base component
33
33
  const BaseComponent = as || 'div';
34
- return /*#__PURE__*/React__default.createElement(GridSettings, {
34
+ return /*#__PURE__*/React.createElement(GridSettings, {
35
35
  mode: "flexbox",
36
36
  subgrid: false
37
- }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
37
+ }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
38
38
  className: className,
39
39
  ref: ref
40
40
  }, rest), children));
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import PropTypes from 'prop-types';
9
- import React__default from 'react';
9
+ import React from 'react';
10
10
  import { useFeatureFlag } from '../FeatureFlags/index.js';
11
11
  import { CSSGrid as CSSGridComponent } from './CSSGrid.js';
12
12
  import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
@@ -14,9 +14,9 @@ import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
14
14
  function Grid(props) {
15
15
  const enableCSSGrid = useFeatureFlag('enable-css-grid');
16
16
  if (enableCSSGrid) {
17
- return /*#__PURE__*/React__default.createElement(CSSGridComponent, props);
17
+ return /*#__PURE__*/React.createElement(CSSGridComponent, props);
18
18
  }
19
- return /*#__PURE__*/React__default.createElement(FlexGridComponent, props);
19
+ return /*#__PURE__*/React.createElement(FlexGridComponent, props);
20
20
  }
21
21
  Grid.propTypes = {
22
22
  /**
@@ -1,10 +1,10 @@
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.
6
6
  */
7
- import * as React from 'react';
7
+ import React from 'react';
8
8
  export type GridMode = 'flexbox' | 'css-grid';
9
9
  export interface GridSettingContext {
10
10
  /**
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import PropTypes from 'prop-types';
9
- import * as React from 'react';
9
+ import React from 'react';
10
10
 
11
11
  /**
12
12
  * Provides a grid context for communication the grid "mode" (flexbox or
@@ -8,7 +8,7 @@
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React__default from 'react';
11
+ import React from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
14
  function Row(_ref) {
@@ -28,7 +28,7 @@ function Row(_ref) {
28
28
  });
29
29
  // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
30
30
  const BaseComponentAsAny = BaseComponent;
31
- return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
31
+ return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
32
32
  className: className
33
33
  }, rest), children);
34
34
  }
@@ -7,21 +7,21 @@
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
- import React__default from 'react';
10
+ import React from 'react';
11
11
 
12
- const HeadingContext = /*#__PURE__*/React__default.createContext(1);
13
- const Section = /*#__PURE__*/React__default.forwardRef(function Section(_ref, ref) {
12
+ const HeadingContext = /*#__PURE__*/React.createContext(1);
13
+ const Section = /*#__PURE__*/React.forwardRef(function Section(_ref, ref) {
14
14
  let {
15
15
  as: BaseComponent = 'section',
16
16
  level: levelOverride,
17
17
  ...rest
18
18
  } = _ref;
19
- const parentLevel = React__default.useContext(HeadingContext);
19
+ const parentLevel = React.useContext(HeadingContext);
20
20
  const level = levelOverride ?? parentLevel + 1;
21
21
  const BaseComponentAsAny = BaseComponent;
22
- return /*#__PURE__*/React__default.createElement(HeadingContext.Provider, {
22
+ return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
23
23
  value: Math.min(level, 6)
24
- }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
24
+ }, /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
25
25
  ref: ref
26
26
  }, rest)));
27
27
  });
@@ -44,9 +44,9 @@ Section.propTypes = {
44
44
  */
45
45
  level: PropTypes.number
46
46
  };
47
- const Heading = /*#__PURE__*/React__default.forwardRef(function Heading(props, ref) {
48
- const HeadingIntrinsic = `h${React__default.useContext(HeadingContext)}`;
49
- return /*#__PURE__*/React__default.createElement(HeadingIntrinsic, _extends({
47
+ const Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
48
+ const HeadingIntrinsic = `h${React.useContext(HeadingContext)}`;
49
+ return /*#__PURE__*/React.createElement(HeadingIntrinsic, _extends({
50
50
  ref: ref
51
51
  }, props));
52
52
  });
@@ -7,7 +7,7 @@
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
- import React__default from 'react';
10
+ import React from 'react';
11
11
  import cx from 'classnames';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
@@ -17,7 +17,7 @@ const IconSkeleton = _ref => {
17
17
  ...rest
18
18
  } = _ref;
19
19
  const prefix = usePrefix();
20
- return /*#__PURE__*/React__default.createElement("div", _extends({
20
+ return /*#__PURE__*/React.createElement("div", _extends({
21
21
  className: cx(`${prefix}--icon--skeleton`, className)
22
22
  }, rest));
23
23
  };
@@ -7,7 +7,7 @@
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
- import React__default from 'react';
10
+ import React from 'react';
11
11
  import cx from 'classnames';
12
12
  import '../Tooltip/DefinitionTooltip.js';
13
13
  import { Tooltip } from '../Tooltip/Tooltip.js';
@@ -19,7 +19,7 @@ import { BadgeIndicator } from '../BadgeIndicator/index.js';
19
19
  import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
20
20
 
21
21
  const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
22
- const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_ref, ref) {
22
+ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref, ref) {
23
23
  let {
24
24
  align,
25
25
  autoAlign = false,
@@ -48,7 +48,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
48
48
  console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
49
49
  }
50
50
  const badgeId = useId('badge-indicator');
51
- return /*#__PURE__*/React__default.createElement(Tooltip, {
51
+ return /*#__PURE__*/React.createElement(Tooltip, {
52
52
  align: align,
53
53
  autoAlign: autoAlign,
54
54
  closeOnActivation: closeOnActivation,
@@ -59,7 +59,7 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
59
59
  highContrast: highContrast,
60
60
  label: label,
61
61
  leaveDelayMs: leaveDelayMs
62
- }, /*#__PURE__*/React__default.createElement(ButtonBase, _extends({}, rest, {
62
+ }, /*#__PURE__*/React.createElement(ButtonBase, _extends({}, rest, {
63
63
  disabled: disabled,
64
64
  kind: kind,
65
65
  ref: ref,
@@ -67,8 +67,8 @@ const IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(_r
67
67
  isSelected: isSelected,
68
68
  hasIconOnly: true,
69
69
  className: className,
70
- "aria-describedby": badgeCount && badgeId
71
- }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default.createElement(BadgeIndicator, {
70
+ "aria-describedby": rest['aria-describedby'] || badgeCount && badgeId
71
+ }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React.createElement(BadgeIndicator, {
72
72
  id: badgeId,
73
73
  count: badgeCount > 0 ? badgeCount : undefined
74
74
  })));
@@ -155,8 +155,13 @@ IconButton.propTypes = {
155
155
  /**
156
156
  * Provide the label to be rendered inside of the Tooltip. The label will use
157
157
  * `aria-labelledby` and will fully describe the child node that is provided.
158
+ * If the child node already has an `aria-label`, the tooltip will not apply
159
+ * `aria-labelledby`. If the child node has `aria-labelledby`, that value will
160
+ * be used instead. Otherwise, the tooltip will use its own ID as the label.
158
161
  * This means that if you have text in the child node it will not be
159
162
  * announced to the screen reader.
163
+ * If using `badgeCount={0}`, make sure the label explains that there is a
164
+ * new notification.
160
165
  */
161
166
  label: PropTypes.node.isRequired,
162
167
  /**
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import PropTypes from 'prop-types';
9
- import React__default from 'react';
9
+ import React from 'react';
10
10
  import cx from 'classnames';
11
11
  import { usePrefix } from '../../internal/usePrefix.js';
12
12
  import { ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, CheckmarkFilled, CheckmarkOutline, InProgress, Incomplete, CircleDash, PendingFilled, UnknownFilled, WarningSquareFilled } from '@carbon/icons-react';
@@ -26,7 +26,7 @@ const iconTypes = {
26
26
  unknown: UnknownFilled,
27
27
  informative: WarningSquareFilled
28
28
  };
29
- const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndicatorContent(_ref, ref) {
29
+ const IconIndicator = /*#__PURE__*/React.forwardRef(function IconIndicatorContent(_ref, ref) {
30
30
  let {
31
31
  className: customClassName,
32
32
  kind,
@@ -42,10 +42,10 @@ const IconIndicator = /*#__PURE__*/React__default.forwardRef(function IconIndica
42
42
  if (!IconForKind) {
43
43
  return null;
44
44
  }
45
- return /*#__PURE__*/React__default.createElement("div", {
45
+ return /*#__PURE__*/React.createElement("div", {
46
46
  className: classNames,
47
47
  ref: ref
48
- }, /*#__PURE__*/React__default.createElement(IconForKind, {
48
+ }, /*#__PURE__*/React.createElement(IconForKind, {
49
49
  size: size,
50
50
  className: `${prefix}--icon-indicator--${kind}`
51
51
  }), label);
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import PropTypes from 'prop-types';
9
- import React__default from 'react';
9
+ import React from 'react';
10
10
  import { IdPrefixContext } from '../../internal/useIdPrefix.js';
11
11
 
12
12
  function IdPrefix(_ref) {
@@ -14,7 +14,7 @@ function IdPrefix(_ref) {
14
14
  children,
15
15
  prefix
16
16
  } = _ref;
17
- return /*#__PURE__*/React__default.createElement(IdPrefixContext.Provider, {
17
+ return /*#__PURE__*/React.createElement(IdPrefixContext.Provider, {
18
18
  value: prefix
19
19
  }, children);
20
20
  }
@@ -6,12 +6,12 @@
6
6
  */
7
7
 
8
8
  import PropTypes from 'prop-types';
9
- import React__default, { useRef, useEffect } from 'react';
9
+ import React, { useRef, useEffect } from 'react';
10
10
  import deprecate from '../../prop-types/deprecate.js';
11
11
  import { usePrefix } from '../../internal/usePrefix.js';
12
12
  import { useMergedRefs } from '../../internal/useMergedRefs.js';
13
13
 
14
- const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheckbox(props, forwardRef) {
14
+ const InlineCheckbox = /*#__PURE__*/React.forwardRef(function InlineCheckbox(props, forwardRef) {
15
15
  const {
16
16
  ['aria-label']: ariaLabel,
17
17
  ariaLabel: deprecatedAriaLabel,
@@ -56,19 +56,19 @@ const InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineChe
56
56
  }
57
57
  onClick?.(evt);
58
58
  }
59
- return /*#__PURE__*/React__default.createElement("div", {
59
+ return /*#__PURE__*/React.createElement("div", {
60
60
  className: `${prefix}--checkbox--inline`
61
- }, /*#__PURE__*/React__default.createElement("input", inputProps),
61
+ }, /*#__PURE__*/React.createElement("input", inputProps),
62
62
  /*#__PURE__*/
63
63
  /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
64
- React__default.createElement("label", {
64
+ React.createElement("label", {
65
65
  htmlFor: id,
66
66
  className: `${prefix}--checkbox-label`,
67
67
  title: title,
68
68
  onClick: evt => {
69
69
  evt.stopPropagation();
70
70
  }
71
- }, /*#__PURE__*/React__default.createElement("span", {
71
+ }, /*#__PURE__*/React.createElement("span", {
72
72
  className: `${prefix}--visually-hidden`
73
73
  }, deprecatedAriaLabel || ariaLabel)));
74
74
  });
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import React__default, { useRef, useEffect } from 'react';
9
+ import React, { useRef, useEffect } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import cx from 'classnames';
12
12
  import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
@@ -44,20 +44,20 @@ const InlineLoading = _ref => {
44
44
  const getLoading = () => {
45
45
  let iconLabel = iconDescription ? iconDescription : status;
46
46
  if (status === 'error') {
47
- return /*#__PURE__*/React__default.createElement(ErrorFilled, {
47
+ return /*#__PURE__*/React.createElement(ErrorFilled, {
48
48
  className: `${prefix}--inline-loading--error`
49
- }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
49
+ }, /*#__PURE__*/React.createElement("title", null, iconLabel));
50
50
  }
51
51
  if (status === 'finished') {
52
- return /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
52
+ return /*#__PURE__*/React.createElement(CheckmarkFilled, {
53
53
  className: `${prefix}--inline-loading__checkmark-container`
54
- }, /*#__PURE__*/React__default.createElement("title", null, iconLabel));
54
+ }, /*#__PURE__*/React.createElement("title", null, iconLabel));
55
55
  }
56
56
  if (status === 'active') {
57
57
  if (!iconDescription) {
58
58
  iconLabel = 'loading';
59
59
  }
60
- return /*#__PURE__*/React__default.createElement(Loading, {
60
+ return /*#__PURE__*/React.createElement(Loading, {
61
61
  small: true,
62
62
  description: iconLabel,
63
63
  withOverlay: false,
@@ -68,20 +68,20 @@ const InlineLoading = _ref => {
68
68
  if (!iconDescription) {
69
69
  iconLabel = 'not loading';
70
70
  }
71
- return /*#__PURE__*/React__default.createElement("title", {
71
+ return /*#__PURE__*/React.createElement("title", {
72
72
  className: `${prefix}--inline-loading__inactive-status`
73
73
  }, iconLabel);
74
74
  }
75
75
  return undefined;
76
76
  };
77
- const loadingText = description && /*#__PURE__*/React__default.createElement("div", {
77
+ const loadingText = description && /*#__PURE__*/React.createElement("div", {
78
78
  className: `${prefix}--inline-loading__text`
79
79
  }, description);
80
80
  const loading = getLoading();
81
- const loadingAnimation = loading && /*#__PURE__*/React__default.createElement("div", {
81
+ const loadingAnimation = loading && /*#__PURE__*/React.createElement("div", {
82
82
  className: `${prefix}--inline-loading__animation`
83
83
  }, loading);
84
- return /*#__PURE__*/React__default.createElement("div", _extends({
84
+ return /*#__PURE__*/React.createElement("div", _extends({
85
85
  className: loadingClasses
86
86
  }, rest, {
87
87
  "aria-live": rest['aria-live'] ?? 'assertive'
@@ -5,8 +5,8 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import React__default from 'react';
8
+ import React from 'react';
9
9
 
10
- const LayerContext = /*#__PURE__*/React__default.createContext(1);
10
+ const LayerContext = /*#__PURE__*/React.createContext(1);
11
11
 
12
12
  export { LayerContext };
@@ -29,6 +29,10 @@ export interface LayerBaseProps {
29
29
  * Specify the layer level and override any existing levels based on hierarchy
30
30
  */
31
31
  level?: LayerLevel;
32
+ /**
33
+ * Applies a css background-color set to $layer-background
34
+ */
35
+ withBackground?: boolean;
32
36
  }
33
37
  export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
34
38
  declare const Layer: React.ForwardRefExoticComponent<LayerBaseProps & {
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import React__default from 'react';
9
+ import React from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import cx from 'classnames';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,29 +20,32 @@ import { clamp } from '../../internal/clamp.js';
20
20
  * calls this hook is currently in
21
21
  */
22
22
  function useLayer() {
23
- const level = React__default.useContext(LayerContext);
23
+ const level = React.useContext(LayerContext);
24
24
  return {
25
25
  level
26
26
  };
27
27
  }
28
- const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
28
+ const Layer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
29
29
  let {
30
30
  as,
31
31
  className: customClassName,
32
32
  children,
33
33
  level: overrideLevel,
34
+ withBackground = false,
34
35
  ...rest
35
36
  } = _ref;
36
- const contextLevel = React__default.useContext(LayerContext);
37
+ const contextLevel = React.useContext(LayerContext);
37
38
  const level = overrideLevel ?? contextLevel;
38
39
  const prefix = usePrefix();
39
- const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
40
+ const className = cx(`${prefix}--layer-${levels[level]}`, {
41
+ [`${prefix}--layer__with-background`]: withBackground
42
+ }, customClassName);
40
43
  // The level should be between MIN_LEVEL and MAX_LEVEL
41
44
  const value = clamp(level + 1, MIN_LEVEL, MAX_LEVEL);
42
45
  const BaseComponent = as || 'div';
43
- return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
46
+ return /*#__PURE__*/React.createElement(LayerContext.Provider, {
44
47
  value: value
45
- }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
48
+ }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
46
49
  ref: ref
47
50
  }, rest, {
48
51
  className: className
@@ -67,7 +70,11 @@ Layer.propTypes = {
67
70
  /**
68
71
  * Specify the layer level and override any existing levels based on hierarchy
69
72
  */
70
- level: PropTypes.oneOf([0, 1, 2])
73
+ level: PropTypes.oneOf([0, 1, 2]),
74
+ /**
75
+ * Applies a css background-color set to $layer-background
76
+ */
77
+ withBackground: PropTypes.bool
71
78
  };
72
79
 
73
80
  export { Layer, useLayer };
@@ -8,7 +8,7 @@
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React__default from 'react';
11
+ import React from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
14
  const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
@@ -22,7 +22,7 @@ const densities = ['condensed', 'normal'];
22
22
  * Size of components within this layout
23
23
  */
24
24
 
25
- const Layout = /*#__PURE__*/React__default.forwardRef(function Layout(_ref, forwardRef) {
25
+ const Layout = /*#__PURE__*/React.forwardRef(function Layout(_ref, forwardRef) {
26
26
  let {
27
27
  as: BaseComponent = 'div',
28
28
  children,
@@ -36,7 +36,7 @@ const Layout = /*#__PURE__*/React__default.forwardRef(function Layout(_ref, forw
36
36
  [`${prefix}--layout--size-${size}`]: size && sizes.includes(size),
37
37
  [`${prefix}--layout--density-${density}`]: density && densities.includes(density)
38
38
  });
39
- return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
39
+ return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
40
40
  ref: forwardRef,
41
41
  className: classes
42
42
  }), children);
@@ -65,7 +65,7 @@ Layout.propTypes = {
65
65
  */
66
66
  size: PropTypes.oneOf(sizes)
67
67
  };
68
- const LayoutConstraint = /*#__PURE__*/React__default.forwardRef(function Layout(_ref2, forwardRef) {
68
+ const LayoutConstraint = /*#__PURE__*/React.forwardRef(function Layout(_ref2, forwardRef) {
69
69
  let {
70
70
  as: BaseComponent = 'div',
71
71
  children,
@@ -86,7 +86,7 @@ const LayoutConstraint = /*#__PURE__*/React__default.forwardRef(function Layout(
86
86
  [`${prefix}--layout-constraint--${group}__max-${constraints?.max}`]: constraints?.max
87
87
  };
88
88
  }));
89
- return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
89
+ return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
90
90
  ref: forwardRef,
91
91
  className: classes
92
92
  }), children);
@@ -7,7 +7,7 @@
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import PropTypes from 'prop-types';
10
- import React__default from 'react';
10
+ import React from 'react';
11
11
  import { LayoutDirectionContext } from './LayoutDirectionContext.js';
12
12
  export { LayoutDirectionContext } from './LayoutDirectionContext.js';
13
13
 
@@ -18,14 +18,14 @@ function LayoutDirection(_ref) {
18
18
  dir,
19
19
  ...rest
20
20
  } = _ref;
21
- const value = React__default.useMemo(() => {
21
+ const value = React.useMemo(() => {
22
22
  return {
23
23
  direction: dir
24
24
  };
25
25
  }, [dir]);
26
- return /*#__PURE__*/React__default.createElement(LayoutDirectionContext.Provider, {
26
+ return /*#__PURE__*/React.createElement(LayoutDirectionContext.Provider, {
27
27
  value: value
28
- }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
28
+ }, /*#__PURE__*/React.createElement(BaseComponent, _extends({
29
29
  dir: dir
30
30
  }, rest), children));
31
31
  }
@@ -5,9 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import React__default from 'react';
8
+ import React from 'react';
9
9
 
10
- const LayoutDirectionContext = /*#__PURE__*/React__default.createContext({
10
+ const LayoutDirectionContext = /*#__PURE__*/React.createContext({
11
11
  direction: 'ltr'
12
12
  });
13
13
 
@@ -8,11 +8,11 @@
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
- import React__default from 'react';
11
+ import React from 'react';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
14
  // First create the component with basic types
15
- const LinkBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
15
+ const LinkBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
16
16
  let {
17
17
  as: BaseComponent,
18
18
  children,
@@ -35,7 +35,7 @@ const LinkBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
35
35
  });
36
36
  const rel = target === '_blank' ? 'noopener' : undefined;
37
37
  const linkProps = {
38
- className: BaseComponent ? undefined : className,
38
+ className,
39
39
  rel,
40
40
  target
41
41
  };
@@ -49,11 +49,11 @@ const LinkBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
49
49
  linkProps['aria-disabled'] = true;
50
50
  }
51
51
  const BaseComponentAsAny = BaseComponent ?? 'a';
52
- return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
52
+ return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
53
53
  ref: ref
54
- }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default.createElement("div", {
54
+ }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React.createElement("div", {
55
55
  className: `${prefix}--link__icon`
56
- }, /*#__PURE__*/React__default.createElement(Icon, null)));
56
+ }, /*#__PURE__*/React.createElement(Icon, null)));
57
57
  });
58
58
  const Link = LinkBase;
59
59
  Link.displayName = 'Link';
@@ -4,11 +4,10 @@
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 React, { type HTMLAttributes } from 'react';
8
8
  import { type ListBoxSize, type ListBoxType } from '.';
9
- import { ReactAttr } from '../../types/common';
10
9
  type ExcludedAttributes = 'onKeyDown' | 'onKeyPress' | 'ref';
11
- export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
10
+ export interface ListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, ExcludedAttributes> {
12
11
  /**
13
12
  * Specify whether the ListBox is currently disabled
14
13
  */