@itwin/itwinui-react 3.13.3 → 3.14.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 (614) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/DEV-cjs/core/Alert/Alert.js +125 -72
  3. package/DEV-cjs/core/Avatar/Avatar.js +70 -44
  4. package/DEV-cjs/core/AvatarGroup/AvatarGroup.js +71 -34
  5. package/DEV-cjs/core/Backdrop/Backdrop.js +26 -22
  6. package/DEV-cjs/core/Badge/Badge.js +49 -42
  7. package/DEV-cjs/core/Breadcrumbs/Breadcrumbs.js +164 -85
  8. package/DEV-cjs/core/ButtonGroup/ButtonGroup.js +141 -79
  9. package/DEV-cjs/core/Buttons/Button.js +95 -49
  10. package/DEV-cjs/core/Buttons/DropdownButton.js +53 -35
  11. package/DEV-cjs/core/Buttons/IconButton.js +77 -41
  12. package/DEV-cjs/core/Buttons/IdeasButton.js +30 -26
  13. package/DEV-cjs/core/Buttons/SplitButton.js +90 -56
  14. package/DEV-cjs/core/Carousel/Carousel.js +77 -67
  15. package/DEV-cjs/core/Carousel/CarouselContext.js +10 -10
  16. package/DEV-cjs/core/Carousel/CarouselDot.js +31 -27
  17. package/DEV-cjs/core/Carousel/CarouselDotsList.js +148 -113
  18. package/DEV-cjs/core/Carousel/CarouselNavigation.js +98 -69
  19. package/DEV-cjs/core/Carousel/CarouselSlide.js +51 -42
  20. package/DEV-cjs/core/Carousel/CarouselSlider.js +68 -61
  21. package/DEV-cjs/core/Checkbox/Checkbox.js +96 -54
  22. package/DEV-cjs/core/ColorPicker/ColorBuilder.js +274 -228
  23. package/DEV-cjs/core/ColorPicker/ColorInputPanel.js +398 -366
  24. package/DEV-cjs/core/ColorPicker/ColorPalette.js +56 -36
  25. package/DEV-cjs/core/ColorPicker/ColorPicker.js +88 -69
  26. package/DEV-cjs/core/ColorPicker/ColorPickerContext.js +22 -18
  27. package/DEV-cjs/core/ColorPicker/ColorSwatch.js +50 -33
  28. package/DEV-cjs/core/ComboBox/ComboBox.js +395 -294
  29. package/DEV-cjs/core/ComboBox/ComboBox.types-test.js +87 -80
  30. package/DEV-cjs/core/ComboBox/ComboBoxEndIcon.js +36 -27
  31. package/DEV-cjs/core/ComboBox/ComboBoxInput.js +190 -128
  32. package/DEV-cjs/core/ComboBox/ComboBoxInputContainer.js +40 -28
  33. package/DEV-cjs/core/ComboBox/ComboBoxMenu.js +132 -93
  34. package/DEV-cjs/core/ComboBox/ComboBoxMenuItem.js +75 -34
  35. package/DEV-cjs/core/ComboBox/ComboBoxMultipleContainer.js +18 -18
  36. package/DEV-cjs/core/ComboBox/helpers.js +15 -14
  37. package/DEV-cjs/core/DatePicker/DatePicker.js +556 -353
  38. package/DEV-cjs/core/Dialog/Dialog.js +86 -58
  39. package/DEV-cjs/core/Dialog/DialogBackdrop.js +52 -39
  40. package/DEV-cjs/core/Dialog/DialogButtonBar.js +9 -9
  41. package/DEV-cjs/core/Dialog/DialogContent.js +9 -9
  42. package/DEV-cjs/core/Dialog/DialogContext.js +16 -15
  43. package/DEV-cjs/core/Dialog/DialogDragContext.js +20 -19
  44. package/DEV-cjs/core/Dialog/DialogMain.js +174 -122
  45. package/DEV-cjs/core/Dialog/DialogTitleBar.js +68 -33
  46. package/DEV-cjs/core/Dialog/DialogTitleBarTitle.js +9 -9
  47. package/DEV-cjs/core/Divider/Divider.js +22 -22
  48. package/DEV-cjs/core/DropdownMenu/DropdownMenu.js +63 -37
  49. package/DEV-cjs/core/ExpandableBlock/ExpandableBlock.js +195 -125
  50. package/DEV-cjs/core/Fieldset/Fieldset.js +34 -23
  51. package/DEV-cjs/core/FileUpload/FileEmptyCard.js +43 -24
  52. package/DEV-cjs/core/FileUpload/FileUpload.js +94 -57
  53. package/DEV-cjs/core/FileUpload/FileUploadCard.js +181 -124
  54. package/DEV-cjs/core/FileUpload/FileUploadTemplate.js +63 -35
  55. package/DEV-cjs/core/Flex/Flex.js +78 -77
  56. package/DEV-cjs/core/Footer/Footer.js +119 -85
  57. package/DEV-cjs/core/Footer/FooterItem.js +9 -9
  58. package/DEV-cjs/core/Footer/FooterList.js +9 -9
  59. package/DEV-cjs/core/Footer/FooterSeparator.js +10 -10
  60. package/DEV-cjs/core/Header/Header.js +86 -44
  61. package/DEV-cjs/core/Header/HeaderBasicButton.js +30 -20
  62. package/DEV-cjs/core/Header/HeaderBreadcrumbs.js +59 -36
  63. package/DEV-cjs/core/Header/HeaderButton.js +90 -46
  64. package/DEV-cjs/core/Header/HeaderDropdownButton.js +55 -44
  65. package/DEV-cjs/core/Header/HeaderLogo.js +53 -30
  66. package/DEV-cjs/core/Header/HeaderSplitButton.js +72 -44
  67. package/DEV-cjs/core/Icon/Icon.js +41 -35
  68. package/DEV-cjs/core/InformationPanel/InformationPanel.js +97 -62
  69. package/DEV-cjs/core/InformationPanel/InformationPanelBody.js +9 -9
  70. package/DEV-cjs/core/InformationPanel/InformationPanelContent.js +30 -22
  71. package/DEV-cjs/core/InformationPanel/InformationPanelHeader.js +51 -32
  72. package/DEV-cjs/core/InformationPanel/InformationPanelWrapper.js +12 -10
  73. package/DEV-cjs/core/Input/Input.js +26 -26
  74. package/DEV-cjs/core/InputGrid/InputGrid.js +151 -117
  75. package/DEV-cjs/core/InputGroup/InputGroup.js +85 -48
  76. package/DEV-cjs/core/InputWithDecorations/InputWithDecorations.js +60 -44
  77. package/DEV-cjs/core/Label/Label.js +40 -25
  78. package/DEV-cjs/core/LabeledInput/LabeledInput.js +86 -42
  79. package/DEV-cjs/core/LabeledSelect/LabeledSelect.js +71 -39
  80. package/DEV-cjs/core/LabeledSelect/LabeledSelect.types-test.js +100 -81
  81. package/DEV-cjs/core/LabeledTextarea/LabeledTextarea.js +19 -17
  82. package/DEV-cjs/core/LinkAction/LinkAction.js +27 -26
  83. package/DEV-cjs/core/List/List.js +11 -11
  84. package/DEV-cjs/core/List/ListItem.js +42 -34
  85. package/DEV-cjs/core/Menu/Menu.js +213 -127
  86. package/DEV-cjs/core/Menu/MenuDivider.js +11 -11
  87. package/DEV-cjs/core/Menu/MenuExtraContent.js +10 -10
  88. package/DEV-cjs/core/Menu/MenuItem.js +139 -76
  89. package/DEV-cjs/core/Menu/MenuItemSkeleton.js +65 -40
  90. package/DEV-cjs/core/Modal/Modal.js +54 -31
  91. package/DEV-cjs/core/Modal/ModalButtonBar.js +9 -9
  92. package/DEV-cjs/core/Modal/ModalContent.js +9 -9
  93. package/DEV-cjs/core/NonIdealState/ErrorPage.js +208 -127
  94. package/DEV-cjs/core/NonIdealState/NonIdealState.js +84 -35
  95. package/DEV-cjs/core/NotificationMarker/NotificationMarker.js +39 -25
  96. package/DEV-cjs/core/Overlay/Overlay.js +55 -41
  97. package/DEV-cjs/core/Popover/Popover.js +302 -193
  98. package/DEV-cjs/core/ProgressIndicators/ProgressLinear.js +70 -33
  99. package/DEV-cjs/core/ProgressIndicators/ProgressRadial.js +67 -40
  100. package/DEV-cjs/core/Radio/Radio.js +66 -38
  101. package/DEV-cjs/core/RadioTiles/RadioTile.js +88 -43
  102. package/DEV-cjs/core/RadioTiles/RadioTileGroup.js +29 -21
  103. package/DEV-cjs/core/SearchBox/SearchBox.js +203 -130
  104. package/DEV-cjs/core/Select/Select.js +457 -274
  105. package/DEV-cjs/core/Select/Select.types-test.js +112 -87
  106. package/DEV-cjs/core/Select/SelectTag.js +32 -24
  107. package/DEV-cjs/core/Select/SelectTagContainer.js +38 -25
  108. package/DEV-cjs/core/SideNavigation/SideNavigation.js +132 -64
  109. package/DEV-cjs/core/SideNavigation/SidenavButton.js +55 -33
  110. package/DEV-cjs/core/SideNavigation/SidenavSubmenu.js +33 -22
  111. package/DEV-cjs/core/SideNavigation/SidenavSubmenuHeader.js +41 -24
  112. package/DEV-cjs/core/SkipToContentLink/SkipToContentLink.js +28 -21
  113. package/DEV-cjs/core/Slider/Slider.js +352 -259
  114. package/DEV-cjs/core/Slider/Thumb.js +111 -98
  115. package/DEV-cjs/core/Slider/Track.js +93 -61
  116. package/DEV-cjs/core/StatusMessage/StatusMessage.js +46 -27
  117. package/DEV-cjs/core/Stepper/Stepper.js +86 -44
  118. package/DEV-cjs/core/Stepper/StepperStep.js +113 -59
  119. package/DEV-cjs/core/Stepper/WorkflowDiagram.js +37 -29
  120. package/DEV-cjs/core/Stepper/WorkflowDiagramStep.js +48 -28
  121. package/DEV-cjs/core/Surface/Surface.js +98 -76
  122. package/DEV-cjs/core/Table/ColumnHeader.js +194 -0
  123. package/DEV-cjs/core/Table/SubRowExpander.js +45 -34
  124. package/DEV-cjs/core/Table/Table.js +687 -506
  125. package/DEV-cjs/core/Table/TableCell.js +104 -61
  126. package/DEV-cjs/core/Table/TablePaginator.js +314 -178
  127. package/DEV-cjs/core/Table/TableRowMemoized.js +183 -90
  128. package/DEV-cjs/core/Table/actionHandlers/expandHandler.js +18 -18
  129. package/DEV-cjs/core/Table/actionHandlers/filterHandler.js +31 -23
  130. package/DEV-cjs/core/Table/actionHandlers/index.js +32 -31
  131. package/DEV-cjs/core/Table/actionHandlers/resizeHandler.js +26 -25
  132. package/DEV-cjs/core/Table/actionHandlers/selectHandler.js +124 -88
  133. package/DEV-cjs/core/Table/cells/DefaultCell.js +93 -44
  134. package/DEV-cjs/core/Table/cells/EditableCell.js +85 -63
  135. package/DEV-cjs/core/Table/cells/index.js +15 -14
  136. package/DEV-cjs/core/Table/columns/actionColumn.js +100 -78
  137. package/DEV-cjs/core/Table/columns/expanderColumn.js +56 -49
  138. package/DEV-cjs/core/Table/columns/index.js +25 -24
  139. package/DEV-cjs/core/Table/columns/selectionColumn.js +79 -58
  140. package/DEV-cjs/core/Table/filters/BaseFilter.js +31 -25
  141. package/DEV-cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js +108 -72
  142. package/DEV-cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js +115 -91
  143. package/DEV-cjs/core/Table/filters/FilterButtonBar.js +56 -33
  144. package/DEV-cjs/core/Table/filters/FilterToggle.js +71 -54
  145. package/DEV-cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +56 -60
  146. package/DEV-cjs/core/Table/filters/TextFilter/TextFilter.js +38 -36
  147. package/DEV-cjs/core/Table/filters/customFilterFunctions.js +26 -20
  148. package/DEV-cjs/core/Table/filters/defaultFilterFunctions.js +119 -77
  149. package/DEV-cjs/core/Table/filters/index.js +23 -22
  150. package/DEV-cjs/core/Table/filters/tableFilters.js +28 -25
  151. package/DEV-cjs/core/Table/filters/types.js +3 -3
  152. package/DEV-cjs/core/Table/hooks/index.js +39 -38
  153. package/DEV-cjs/core/Table/hooks/useColumnDragAndDrop.js +118 -101
  154. package/DEV-cjs/core/Table/hooks/useExpanderCell.js +39 -29
  155. package/DEV-cjs/core/Table/hooks/useResizeColumns.js +346 -248
  156. package/DEV-cjs/core/Table/hooks/useScrollToRow.js +42 -38
  157. package/DEV-cjs/core/Table/hooks/useSelectionCell.js +26 -19
  158. package/DEV-cjs/core/Table/hooks/useStickyColumns.js +55 -47
  159. package/DEV-cjs/core/Table/hooks/useSubRowFiltering.js +89 -86
  160. package/DEV-cjs/core/Table/hooks/useSubRowSelection.js +39 -39
  161. package/DEV-cjs/core/Table/index.js +42 -41
  162. package/DEV-cjs/core/Table/utils.js +66 -64
  163. package/DEV-cjs/core/Tabs/Tabs.js +388 -260
  164. package/DEV-cjs/core/Tag/Tag.js +80 -42
  165. package/DEV-cjs/core/Tag/TagContainer.js +31 -23
  166. package/DEV-cjs/core/Textarea/Textarea.js +19 -17
  167. package/DEV-cjs/core/ThemeProvider/ThemeContext.js +10 -10
  168. package/DEV-cjs/core/ThemeProvider/ThemeProvider.js +276 -172
  169. package/DEV-cjs/core/Tile/Tile.js +310 -173
  170. package/DEV-cjs/core/TimePicker/TimePicker.js +451 -263
  171. package/DEV-cjs/core/Toast/Toast.js +226 -157
  172. package/DEV-cjs/core/Toast/Toaster.js +142 -118
  173. package/DEV-cjs/core/ToggleSwitch/ToggleSwitch.js +76 -42
  174. package/DEV-cjs/core/Tooltip/Tooltip.js +221 -170
  175. package/DEV-cjs/core/TransferList/TransferList.js +171 -132
  176. package/DEV-cjs/core/Tree/Tree.js +226 -179
  177. package/DEV-cjs/core/Tree/TreeContext.js +20 -18
  178. package/DEV-cjs/core/Tree/TreeNode.js +254 -143
  179. package/DEV-cjs/core/Tree/TreeNodeExpander.js +40 -31
  180. package/DEV-cjs/core/Typography/Anchor.js +41 -27
  181. package/DEV-cjs/core/Typography/Blockquote.js +26 -21
  182. package/DEV-cjs/core/Typography/Code.js +9 -9
  183. package/DEV-cjs/core/Typography/Kbd.js +43 -38
  184. package/DEV-cjs/core/Typography/Text.js +45 -31
  185. package/DEV-cjs/core/VisuallyHidden/VisuallyHidden.js +47 -30
  186. package/DEV-cjs/index.js +475 -474
  187. package/DEV-cjs/package.json +1 -0
  188. package/DEV-cjs/react-table/react-table.js +3 -3
  189. package/DEV-cjs/react-table/react-table.types-test.js +628 -476
  190. package/DEV-cjs/styles.js +17 -1
  191. package/DEV-cjs/utils/color/ColorValue.js +429 -323
  192. package/DEV-cjs/utils/color/index.js +5 -5
  193. package/DEV-cjs/utils/components/AutoclearingHiddenLiveRegion.js +31 -26
  194. package/DEV-cjs/utils/components/Box.js +9 -9
  195. package/DEV-cjs/utils/components/ButtonBase.js +41 -35
  196. package/DEV-cjs/utils/components/FieldsetBase.js +9 -9
  197. package/DEV-cjs/utils/components/FocusTrap.js +48 -45
  198. package/DEV-cjs/utils/components/InputContainer.js +67 -34
  199. package/DEV-cjs/utils/components/InputFlexContainer.js +63 -49
  200. package/DEV-cjs/utils/components/InputWithIcon.js +9 -9
  201. package/DEV-cjs/utils/components/LineClamp.js +33 -24
  202. package/DEV-cjs/utils/components/MiddleTextTruncation.js +37 -33
  203. package/DEV-cjs/utils/components/Portal.js +35 -32
  204. package/DEV-cjs/utils/components/Resizer.js +221 -185
  205. package/DEV-cjs/utils/components/ShadowRoot.js +85 -69
  206. package/DEV-cjs/utils/components/WithCSSTransition.js +57 -50
  207. package/DEV-cjs/utils/components/index.js +18 -18
  208. package/DEV-cjs/utils/functions/colors.js +37 -35
  209. package/DEV-cjs/utils/functions/date.js +15 -15
  210. package/DEV-cjs/utils/functions/dev.js +25 -19
  211. package/DEV-cjs/utils/functions/dom.js +39 -39
  212. package/DEV-cjs/utils/functions/focusable.js +81 -63
  213. package/DEV-cjs/utils/functions/import.js +28 -22
  214. package/DEV-cjs/utils/functions/index.js +14 -14
  215. package/DEV-cjs/utils/functions/numbers.js +26 -24
  216. package/DEV-cjs/utils/functions/polymorphic.js +56 -43
  217. package/DEV-cjs/utils/functions/react.js +25 -23
  218. package/DEV-cjs/utils/functions/supports.js +11 -10
  219. package/DEV-cjs/utils/hooks/index.js +20 -20
  220. package/DEV-cjs/utils/hooks/useContainerWidth.js +31 -26
  221. package/DEV-cjs/utils/hooks/useControlledState.js +28 -27
  222. package/DEV-cjs/utils/hooks/useDragAndDrop.js +112 -88
  223. package/DEV-cjs/utils/hooks/useEventListener.js +23 -28
  224. package/DEV-cjs/utils/hooks/useGlobals.js +46 -40
  225. package/DEV-cjs/utils/hooks/useId.js +17 -17
  226. package/DEV-cjs/utils/hooks/useIntersection.js +38 -38
  227. package/DEV-cjs/utils/hooks/useIsClient.js +16 -16
  228. package/DEV-cjs/utils/hooks/useIsomorphicLayoutEffect.js +12 -11
  229. package/DEV-cjs/utils/hooks/useLatestRef.js +16 -18
  230. package/DEV-cjs/utils/hooks/useMediaQuery.js +32 -23
  231. package/DEV-cjs/utils/hooks/useMergedRefs.js +25 -23
  232. package/DEV-cjs/utils/hooks/useOverflow.js +68 -72
  233. package/DEV-cjs/utils/hooks/useResizeObserver.js +31 -33
  234. package/DEV-cjs/utils/hooks/useSafeContext.js +15 -14
  235. package/DEV-cjs/utils/hooks/useSyncExternalStore.js +37 -40
  236. package/DEV-cjs/utils/hooks/useVirtualScroll.js +42 -40
  237. package/DEV-cjs/utils/icons/StatusIconMap.js +34 -30
  238. package/DEV-cjs/utils/icons/Svg.js +12 -12
  239. package/DEV-cjs/utils/icons/SvgCalendar.js +19 -14
  240. package/DEV-cjs/utils/icons/SvgCaretDownSmall.js +19 -14
  241. package/DEV-cjs/utils/icons/SvgCaretRightSmall.js +19 -14
  242. package/DEV-cjs/utils/icons/SvgCaretUpSmall.js +19 -14
  243. package/DEV-cjs/utils/icons/SvgCheckmark.js +19 -14
  244. package/DEV-cjs/utils/icons/SvgCheckmarkSmall.js +19 -14
  245. package/DEV-cjs/utils/icons/SvgChevronLeft.js +19 -14
  246. package/DEV-cjs/utils/icons/SvgChevronLeftDouble.js +19 -14
  247. package/DEV-cjs/utils/icons/SvgChevronRight.js +19 -14
  248. package/DEV-cjs/utils/icons/SvgChevronRightDouble.js +19 -14
  249. package/DEV-cjs/utils/icons/SvgChevronRightSmall.js +19 -14
  250. package/DEV-cjs/utils/icons/SvgClose.js +19 -14
  251. package/DEV-cjs/utils/icons/SvgCloseSmall.js +19 -14
  252. package/DEV-cjs/utils/icons/SvgColumnManager.js +19 -14
  253. package/DEV-cjs/utils/icons/SvgDocument.js +19 -14
  254. package/DEV-cjs/utils/icons/SvgFilter.js +19 -14
  255. package/DEV-cjs/utils/icons/SvgFilterHollow.js +19 -14
  256. package/DEV-cjs/utils/icons/SvgImportantSmall.js +19 -14
  257. package/DEV-cjs/utils/icons/SvgInfoCircular.js +19 -14
  258. package/DEV-cjs/utils/icons/SvgMore.js +19 -14
  259. package/DEV-cjs/utils/icons/SvgMoreVertical.js +19 -14
  260. package/DEV-cjs/utils/icons/SvgNew.js +19 -14
  261. package/DEV-cjs/utils/icons/SvgSearch.js +19 -14
  262. package/DEV-cjs/utils/icons/SvgSmileyHappy.js +19 -14
  263. package/DEV-cjs/utils/icons/SvgSortDown.js +19 -14
  264. package/DEV-cjs/utils/icons/SvgSortUp.js +19 -14
  265. package/DEV-cjs/utils/icons/SvgStatusError.js +19 -14
  266. package/DEV-cjs/utils/icons/SvgStatusSuccess.js +19 -14
  267. package/DEV-cjs/utils/icons/SvgStatusWarning.js +19 -14
  268. package/DEV-cjs/utils/icons/SvgSwap.js +19 -14
  269. package/DEV-cjs/utils/icons/SvgUpload.js +19 -14
  270. package/DEV-cjs/utils/icons/index.js +36 -36
  271. package/DEV-cjs/utils/index.js +12 -12
  272. package/DEV-cjs/utils/meta.js +11 -11
  273. package/DEV-cjs/utils/props.js +3 -3
  274. package/DEV-cjs/utils/providers/HydrationProvider.js +47 -35
  275. package/DEV-cjs/utils/providers/ScopeProvider.js +55 -53
  276. package/DEV-cjs/utils/providers/index.js +6 -6
  277. package/DEV-cjs/utils/types.js +3 -3
  278. package/DEV-esm/core/Alert/Alert.js +112 -57
  279. package/DEV-esm/core/Avatar/Avatar.js +45 -26
  280. package/DEV-esm/core/AvatarGroup/AvatarGroup.js +58 -21
  281. package/DEV-esm/core/Backdrop/Backdrop.js +13 -9
  282. package/DEV-esm/core/Badge/Badge.js +34 -29
  283. package/DEV-esm/core/Breadcrumbs/Breadcrumbs.js +150 -71
  284. package/DEV-esm/core/ButtonGroup/ButtonGroup.js +127 -62
  285. package/DEV-esm/core/Buttons/Button.js +71 -34
  286. package/DEV-esm/core/Buttons/DropdownButton.js +38 -20
  287. package/DEV-esm/core/Buttons/IconButton.js +54 -25
  288. package/DEV-esm/core/Buttons/IdeasButton.js +16 -12
  289. package/DEV-esm/core/Buttons/SplitButton.js +80 -41
  290. package/DEV-esm/core/Carousel/Carousel.js +58 -48
  291. package/DEV-esm/core/Carousel/CarouselDot.js +18 -14
  292. package/DEV-esm/core/Carousel/CarouselDotsList.js +134 -98
  293. package/DEV-esm/core/Carousel/CarouselNavigation.js +82 -53
  294. package/DEV-esm/core/Carousel/CarouselSlide.js +40 -29
  295. package/DEV-esm/core/Carousel/CarouselSlider.js +59 -48
  296. package/DEV-esm/core/Checkbox/Checkbox.js +79 -40
  297. package/DEV-esm/core/ColorPicker/ColorBuilder.js +263 -214
  298. package/DEV-esm/core/ColorPicker/ColorInputPanel.js +382 -350
  299. package/DEV-esm/core/ColorPicker/ColorPalette.js +37 -20
  300. package/DEV-esm/core/ColorPicker/ColorPicker.js +69 -51
  301. package/DEV-esm/core/ColorPicker/ColorPickerContext.js +7 -4
  302. package/DEV-esm/core/ColorPicker/ColorSwatch.js +29 -18
  303. package/DEV-esm/core/ComboBox/ComboBox.js +382 -274
  304. package/DEV-esm/core/ComboBox/ComboBox.types-test.js +82 -75
  305. package/DEV-esm/core/ComboBox/ComboBoxEndIcon.js +22 -13
  306. package/DEV-esm/core/ComboBox/ComboBoxInput.js +170 -114
  307. package/DEV-esm/core/ComboBox/ComboBoxInputContainer.js +29 -11
  308. package/DEV-esm/core/ComboBox/ComboBoxMenu.js +121 -79
  309. package/DEV-esm/core/ComboBox/ComboBoxMenuItem.js +65 -22
  310. package/DEV-esm/core/ComboBox/ComboBoxMultipleContainer.js +7 -7
  311. package/DEV-esm/core/DatePicker/DatePicker.js +527 -335
  312. package/DEV-esm/core/Dialog/Dialog.js +66 -38
  313. package/DEV-esm/core/Dialog/DialogBackdrop.js +37 -24
  314. package/DEV-esm/core/Dialog/DialogContext.js +1 -1
  315. package/DEV-esm/core/Dialog/DialogDragContext.js +5 -5
  316. package/DEV-esm/core/Dialog/DialogMain.js +166 -106
  317. package/DEV-esm/core/Dialog/DialogTitleBar.js +43 -15
  318. package/DEV-esm/core/Divider/Divider.js +9 -9
  319. package/DEV-esm/core/DropdownMenu/DropdownMenu.js +50 -24
  320. package/DEV-esm/core/ExpandableBlock/ExpandableBlock.js +177 -110
  321. package/DEV-esm/core/Fieldset/Fieldset.js +21 -10
  322. package/DEV-esm/core/FileUpload/FileEmptyCard.js +25 -10
  323. package/DEV-esm/core/FileUpload/FileUpload.js +66 -44
  324. package/DEV-esm/core/FileUpload/FileUploadCard.js +163 -105
  325. package/DEV-esm/core/FileUpload/FileUploadTemplate.js +46 -21
  326. package/DEV-esm/core/Flex/Flex.js +65 -64
  327. package/DEV-esm/core/Footer/Footer.js +96 -64
  328. package/DEV-esm/core/Footer/FooterSeparator.js +1 -1
  329. package/DEV-esm/core/Header/Header.js +71 -29
  330. package/DEV-esm/core/Header/HeaderBasicButton.js +14 -7
  331. package/DEV-esm/core/Header/HeaderBreadcrumbs.js +39 -23
  332. package/DEV-esm/core/Header/HeaderButton.js +70 -32
  333. package/DEV-esm/core/Header/HeaderDropdownButton.js +41 -29
  334. package/DEV-esm/core/Header/HeaderLogo.js +40 -17
  335. package/DEV-esm/core/Header/HeaderSplitButton.js +60 -30
  336. package/DEV-esm/core/Icon/Icon.js +28 -22
  337. package/DEV-esm/core/InformationPanel/InformationPanel.js +84 -49
  338. package/DEV-esm/core/InformationPanel/InformationPanelContent.js +18 -8
  339. package/DEV-esm/core/InformationPanel/InformationPanelHeader.js +37 -16
  340. package/DEV-esm/core/InformationPanel/InformationPanelWrapper.js +3 -1
  341. package/DEV-esm/core/Input/Input.js +13 -13
  342. package/DEV-esm/core/InputGrid/InputGrid.js +128 -98
  343. package/DEV-esm/core/InputGroup/InputGroup.js +66 -32
  344. package/DEV-esm/core/InputWithDecorations/InputWithDecorations.js +59 -34
  345. package/DEV-esm/core/Label/Label.js +27 -12
  346. package/DEV-esm/core/LabeledInput/LabeledInput.js +65 -24
  347. package/DEV-esm/core/LabeledSelect/LabeledSelect.js +57 -25
  348. package/DEV-esm/core/LabeledSelect/LabeledSelect.types-test.js +95 -76
  349. package/DEV-esm/core/LabeledTextarea/LabeledTextarea.js +8 -6
  350. package/DEV-esm/core/LinkAction/LinkAction.js +8 -8
  351. package/DEV-esm/core/List/List.js +2 -2
  352. package/DEV-esm/core/List/ListItem.js +28 -20
  353. package/DEV-esm/core/Menu/Menu.js +207 -111
  354. package/DEV-esm/core/Menu/MenuDivider.js +2 -2
  355. package/DEV-esm/core/Menu/MenuExtraContent.js +1 -1
  356. package/DEV-esm/core/Menu/MenuItem.js +129 -62
  357. package/DEV-esm/core/Menu/MenuItemSkeleton.js +47 -26
  358. package/DEV-esm/core/Modal/Modal.js +43 -20
  359. package/DEV-esm/core/NonIdealState/ErrorPage.js +159 -114
  360. package/DEV-esm/core/NonIdealState/NonIdealState.js +65 -22
  361. package/DEV-esm/core/NotificationMarker/NotificationMarker.js +26 -12
  362. package/DEV-esm/core/Overlay/Overlay.js +44 -30
  363. package/DEV-esm/core/Popover/Popover.js +306 -172
  364. package/DEV-esm/core/ProgressIndicators/ProgressLinear.js +52 -19
  365. package/DEV-esm/core/ProgressIndicators/ProgressRadial.js +52 -27
  366. package/DEV-esm/core/Radio/Radio.js +50 -25
  367. package/DEV-esm/core/RadioTiles/RadioTile.js +63 -30
  368. package/DEV-esm/core/RadioTiles/RadioTileGroup.js +17 -9
  369. package/DEV-esm/core/SearchBox/SearchBox.js +200 -118
  370. package/DEV-esm/core/Select/Select.js +434 -256
  371. package/DEV-esm/core/Select/Select.types-test.js +107 -82
  372. package/DEV-esm/core/Select/SelectTag.js +19 -11
  373. package/DEV-esm/core/Select/SelectTagContainer.js +21 -11
  374. package/DEV-esm/core/SideNavigation/SideNavigation.js +103 -46
  375. package/DEV-esm/core/SideNavigation/SidenavButton.js +39 -18
  376. package/DEV-esm/core/SideNavigation/SidenavSubmenu.js +17 -9
  377. package/DEV-esm/core/SideNavigation/SidenavSubmenuHeader.js +25 -11
  378. package/DEV-esm/core/SkipToContentLink/SkipToContentLink.js +12 -8
  379. package/DEV-esm/core/Slider/Slider.js +317 -244
  380. package/DEV-esm/core/Slider/Thumb.js +97 -84
  381. package/DEV-esm/core/Slider/Track.js +77 -48
  382. package/DEV-esm/core/StatusMessage/StatusMessage.js +32 -13
  383. package/DEV-esm/core/Stepper/Stepper.js +69 -30
  384. package/DEV-esm/core/Stepper/StepperStep.js +93 -45
  385. package/DEV-esm/core/Stepper/WorkflowDiagram.js +23 -15
  386. package/DEV-esm/core/Stepper/WorkflowDiagramStep.js +28 -14
  387. package/DEV-esm/core/Surface/Surface.js +85 -63
  388. package/DEV-esm/core/Table/ColumnHeader.js +188 -0
  389. package/DEV-esm/core/Table/SubRowExpander.js +33 -22
  390. package/DEV-esm/core/Table/Table.js +694 -486
  391. package/DEV-esm/core/Table/TableCell.js +80 -44
  392. package/DEV-esm/core/Table/TablePaginator.js +305 -161
  393. package/DEV-esm/core/Table/TableRowMemoized.js +167 -73
  394. package/DEV-esm/core/Table/actionHandlers/expandHandler.js +10 -10
  395. package/DEV-esm/core/Table/actionHandlers/filterHandler.js +23 -15
  396. package/DEV-esm/core/Table/actionHandlers/index.js +5 -1
  397. package/DEV-esm/core/Table/actionHandlers/resizeHandler.js +14 -14
  398. package/DEV-esm/core/Table/actionHandlers/selectHandler.js +108 -73
  399. package/DEV-esm/core/Table/cells/DefaultCell.js +79 -30
  400. package/DEV-esm/core/Table/cells/EditableCell.js +70 -50
  401. package/DEV-esm/core/Table/columns/actionColumn.js +81 -59
  402. package/DEV-esm/core/Table/columns/expanderColumn.js +38 -32
  403. package/DEV-esm/core/Table/columns/selectionColumn.js +62 -42
  404. package/DEV-esm/core/Table/filters/BaseFilter.js +16 -13
  405. package/DEV-esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +92 -56
  406. package/DEV-esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +101 -77
  407. package/DEV-esm/core/Table/filters/FilterButtonBar.js +42 -19
  408. package/DEV-esm/core/Table/filters/FilterToggle.js +58 -40
  409. package/DEV-esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +42 -46
  410. package/DEV-esm/core/Table/filters/TextFilter/TextFilter.js +24 -22
  411. package/DEV-esm/core/Table/filters/customFilterFunctions.js +18 -12
  412. package/DEV-esm/core/Table/filters/defaultFilterFunctions.js +111 -69
  413. package/DEV-esm/core/Table/filters/tableFilters.js +15 -12
  414. package/DEV-esm/core/Table/filters/types.js +1 -1
  415. package/DEV-esm/core/Table/hooks/useColumnDragAndDrop.js +100 -91
  416. package/DEV-esm/core/Table/hooks/useExpanderCell.js +26 -18
  417. package/DEV-esm/core/Table/hooks/useResizeColumns.js +333 -238
  418. package/DEV-esm/core/Table/hooks/useScrollToRow.js +32 -28
  419. package/DEV-esm/core/Table/hooks/useSelectionCell.js +17 -10
  420. package/DEV-esm/core/Table/hooks/useStickyColumns.js +46 -38
  421. package/DEV-esm/core/Table/hooks/useSubRowFiltering.js +78 -75
  422. package/DEV-esm/core/Table/hooks/useSubRowSelection.js +29 -29
  423. package/DEV-esm/core/Table/index.js +5 -1
  424. package/DEV-esm/core/Table/utils.js +45 -44
  425. package/DEV-esm/core/Tabs/Tabs.js +372 -243
  426. package/DEV-esm/core/Tag/Tag.js +55 -27
  427. package/DEV-esm/core/Tag/TagContainer.js +18 -10
  428. package/DEV-esm/core/Textarea/Textarea.js +8 -6
  429. package/DEV-esm/core/ThemeProvider/ThemeProvider.js +258 -155
  430. package/DEV-esm/core/Tile/Tile.js +286 -157
  431. package/DEV-esm/core/TimePicker/TimePicker.js +438 -250
  432. package/DEV-esm/core/Toast/Toast.js +199 -138
  433. package/DEV-esm/core/Toast/Toaster.js +114 -94
  434. package/DEV-esm/core/ToggleSwitch/ToggleSwitch.js +60 -29
  435. package/DEV-esm/core/Tooltip/Tooltip.js +229 -159
  436. package/DEV-esm/core/TransferList/TransferList.js +146 -112
  437. package/DEV-esm/core/Tree/Tree.js +226 -174
  438. package/DEV-esm/core/Tree/TreeContext.js +5 -4
  439. package/DEV-esm/core/Tree/TreeNode.js +226 -129
  440. package/DEV-esm/core/Tree/TreeNodeExpander.js +24 -16
  441. package/DEV-esm/core/Typography/Anchor.js +22 -12
  442. package/DEV-esm/core/Typography/Blockquote.js +13 -8
  443. package/DEV-esm/core/Typography/Kbd.js +25 -21
  444. package/DEV-esm/core/Typography/Text.js +27 -14
  445. package/DEV-esm/core/VisuallyHidden/VisuallyHidden.js +34 -17
  446. package/DEV-esm/index.js +21 -3
  447. package/DEV-esm/react-table/react-table.js +1 -1
  448. package/DEV-esm/react-table/react-table.types-test.js +635 -471
  449. package/DEV-esm/styles.js +7 -10
  450. package/DEV-esm/utils/color/ColorValue.js +406 -304
  451. package/DEV-esm/utils/components/AutoclearingHiddenLiveRegion.js +16 -14
  452. package/DEV-esm/utils/components/ButtonBase.js +27 -21
  453. package/DEV-esm/utils/components/FocusTrap.js +36 -33
  454. package/DEV-esm/utils/components/InputContainer.js +52 -19
  455. package/DEV-esm/utils/components/InputFlexContainer.js +31 -27
  456. package/DEV-esm/utils/components/LineClamp.js +21 -12
  457. package/DEV-esm/utils/components/MiddleTextTruncation.js +26 -22
  458. package/DEV-esm/utils/components/Portal.js +11 -11
  459. package/DEV-esm/utils/components/Resizer.js +215 -175
  460. package/DEV-esm/utils/components/ShadowRoot.js +72 -56
  461. package/DEV-esm/utils/components/WithCSSTransition.js +45 -38
  462. package/DEV-esm/utils/functions/colors.js +21 -20
  463. package/DEV-esm/utils/functions/date.js +7 -7
  464. package/DEV-esm/utils/functions/dev.js +12 -7
  465. package/DEV-esm/utils/functions/dom.js +18 -18
  466. package/DEV-esm/utils/functions/focusable.js +62 -45
  467. package/DEV-esm/utils/functions/import.js +20 -14
  468. package/DEV-esm/utils/functions/numbers.js +11 -9
  469. package/DEV-esm/utils/functions/polymorphic.js +42 -29
  470. package/DEV-esm/utils/functions/react.js +14 -12
  471. package/DEV-esm/utils/functions/supports.js +2 -1
  472. package/DEV-esm/utils/hooks/useContainerWidth.js +14 -14
  473. package/DEV-esm/utils/hooks/useControlledState.js +18 -17
  474. package/DEV-esm/utils/hooks/useDragAndDrop.js +100 -76
  475. package/DEV-esm/utils/hooks/useEventListener.js +13 -18
  476. package/DEV-esm/utils/hooks/useGlobals.js +29 -24
  477. package/DEV-esm/utils/hooks/useId.js +5 -6
  478. package/DEV-esm/utils/hooks/useIntersection.js +27 -27
  479. package/DEV-esm/utils/hooks/useIsClient.js +6 -6
  480. package/DEV-esm/utils/hooks/useIsomorphicLayoutEffect.js +2 -1
  481. package/DEV-esm/utils/hooks/useLatestRef.js +6 -8
  482. package/DEV-esm/utils/hooks/useMediaQuery.js +17 -12
  483. package/DEV-esm/utils/hooks/useMergedRefs.js +10 -9
  484. package/DEV-esm/utils/hooks/useOverflow.js +57 -59
  485. package/DEV-esm/utils/hooks/useResizeObserver.js +20 -22
  486. package/DEV-esm/utils/hooks/useSafeContext.js +5 -4
  487. package/DEV-esm/utils/hooks/useSyncExternalStore.js +27 -30
  488. package/DEV-esm/utils/hooks/useVirtualScroll.js +31 -29
  489. package/DEV-esm/utils/icons/StatusIconMap.js +20 -16
  490. package/DEV-esm/utils/icons/Svg.js +3 -3
  491. package/DEV-esm/utils/icons/SvgCalendar.js +8 -3
  492. package/DEV-esm/utils/icons/SvgCaretDownSmall.js +8 -3
  493. package/DEV-esm/utils/icons/SvgCaretRightSmall.js +8 -3
  494. package/DEV-esm/utils/icons/SvgCaretUpSmall.js +8 -3
  495. package/DEV-esm/utils/icons/SvgCheckmark.js +8 -3
  496. package/DEV-esm/utils/icons/SvgCheckmarkSmall.js +8 -3
  497. package/DEV-esm/utils/icons/SvgChevronLeft.js +8 -3
  498. package/DEV-esm/utils/icons/SvgChevronLeftDouble.js +8 -3
  499. package/DEV-esm/utils/icons/SvgChevronRight.js +8 -3
  500. package/DEV-esm/utils/icons/SvgChevronRightDouble.js +8 -3
  501. package/DEV-esm/utils/icons/SvgChevronRightSmall.js +8 -3
  502. package/DEV-esm/utils/icons/SvgClose.js +8 -3
  503. package/DEV-esm/utils/icons/SvgCloseSmall.js +8 -3
  504. package/DEV-esm/utils/icons/SvgColumnManager.js +8 -3
  505. package/DEV-esm/utils/icons/SvgDocument.js +8 -3
  506. package/DEV-esm/utils/icons/SvgFilter.js +8 -3
  507. package/DEV-esm/utils/icons/SvgFilterHollow.js +8 -3
  508. package/DEV-esm/utils/icons/SvgImportantSmall.js +8 -3
  509. package/DEV-esm/utils/icons/SvgInfoCircular.js +8 -3
  510. package/DEV-esm/utils/icons/SvgMore.js +8 -3
  511. package/DEV-esm/utils/icons/SvgMoreVertical.js +8 -3
  512. package/DEV-esm/utils/icons/SvgNew.js +8 -3
  513. package/DEV-esm/utils/icons/SvgSearch.js +8 -3
  514. package/DEV-esm/utils/icons/SvgSmileyHappy.js +8 -3
  515. package/DEV-esm/utils/icons/SvgSortDown.js +8 -3
  516. package/DEV-esm/utils/icons/SvgSortUp.js +8 -3
  517. package/DEV-esm/utils/icons/SvgStatusError.js +8 -3
  518. package/DEV-esm/utils/icons/SvgStatusSuccess.js +8 -3
  519. package/DEV-esm/utils/icons/SvgStatusWarning.js +8 -3
  520. package/DEV-esm/utils/icons/SvgSwap.js +8 -3
  521. package/DEV-esm/utils/icons/SvgUpload.js +8 -3
  522. package/DEV-esm/utils/meta.js +2 -2
  523. package/DEV-esm/utils/props.js +1 -1
  524. package/DEV-esm/utils/providers/HydrationProvider.js +31 -20
  525. package/DEV-esm/utils/providers/ScopeProvider.js +36 -35
  526. package/DEV-esm/utils/types.js +1 -1
  527. package/cjs/core/Buttons/IconButton.d.ts +4 -0
  528. package/cjs/core/Buttons/IconButton.js +3 -1
  529. package/cjs/core/Carousel/Carousel.d.ts +4 -2
  530. package/cjs/core/Carousel/CarouselNavigation.d.ts +4 -2
  531. package/cjs/core/ComboBox/ComboBox.js +5 -0
  532. package/cjs/core/InputWithDecorations/InputWithDecorations.d.ts +1 -1
  533. package/cjs/core/List/List.d.ts +1 -1
  534. package/cjs/core/List/List.js +1 -1
  535. package/cjs/core/List/ListItem.d.ts +4 -4
  536. package/cjs/core/List/ListItem.js +4 -6
  537. package/cjs/core/Menu/Menu.js +6 -0
  538. package/cjs/core/Menu/MenuDivider.d.ts +1 -1
  539. package/cjs/core/Menu/MenuDivider.js +1 -1
  540. package/cjs/core/Overlay/Overlay.d.ts +2 -2
  541. package/cjs/core/Overlay/Overlay.js +2 -2
  542. package/cjs/core/Popover/Popover.d.ts +8 -1
  543. package/cjs/core/Popover/Popover.js +40 -9
  544. package/cjs/core/Select/Select.js +5 -0
  545. package/cjs/core/Table/ColumnHeader.d.ts +19 -0
  546. package/cjs/core/Table/ColumnHeader.js +194 -0
  547. package/cjs/core/Table/Table.js +38 -184
  548. package/cjs/core/Table/filters/BaseFilter.d.ts +2 -9
  549. package/cjs/core/Table/filters/BaseFilter.js +17 -15
  550. package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js +3 -8
  551. package/cjs/core/Table/filters/FilterButtonBar.d.ts +4 -2
  552. package/cjs/core/Table/filters/FilterButtonBar.js +1 -0
  553. package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +3 -9
  554. package/cjs/core/Table/filters/TextFilter/TextFilter.js +4 -7
  555. package/cjs/core/Table/filters/index.d.ts +0 -1
  556. package/cjs/core/Table/index.d.ts +1 -1
  557. package/cjs/core/ThemeProvider/ThemeProvider.d.ts +0 -4
  558. package/cjs/core/ThemeProvider/ThemeProvider.js +66 -49
  559. package/cjs/core/Tile/Tile.d.ts +10 -9
  560. package/cjs/core/Tile/Tile.js +8 -8
  561. package/cjs/core/Toast/Toaster.d.ts +3 -2
  562. package/cjs/core/Toast/Toaster.js +2 -1
  563. package/cjs/core/Tooltip/Tooltip.js +22 -7
  564. package/cjs/core/TransferList/TransferList.d.ts +5 -5
  565. package/cjs/core/TransferList/TransferList.js +2 -2
  566. package/cjs/core/Tree/Tree.js +2 -1
  567. package/cjs/styles.js +1 -1
  568. package/cjs/utils/functions/polymorphic.d.ts +3 -7
  569. package/cjs/utils/functions/polymorphic.js +8 -5
  570. package/esm/core/Buttons/IconButton.d.ts +4 -0
  571. package/esm/core/Buttons/IconButton.js +4 -2
  572. package/esm/core/Carousel/Carousel.d.ts +4 -2
  573. package/esm/core/Carousel/CarouselNavigation.d.ts +4 -2
  574. package/esm/core/ComboBox/ComboBox.js +5 -0
  575. package/esm/core/InputWithDecorations/InputWithDecorations.d.ts +1 -1
  576. package/esm/core/List/List.d.ts +1 -1
  577. package/esm/core/List/List.js +1 -1
  578. package/esm/core/List/ListItem.d.ts +4 -4
  579. package/esm/core/List/ListItem.js +4 -4
  580. package/esm/core/Menu/Menu.js +6 -0
  581. package/esm/core/Menu/MenuDivider.d.ts +1 -1
  582. package/esm/core/Menu/MenuDivider.js +1 -1
  583. package/esm/core/Overlay/Overlay.d.ts +2 -2
  584. package/esm/core/Overlay/Overlay.js +2 -2
  585. package/esm/core/Popover/Popover.d.ts +8 -1
  586. package/esm/core/Popover/Popover.js +40 -9
  587. package/esm/core/Select/Select.js +5 -0
  588. package/esm/core/Table/ColumnHeader.d.ts +19 -0
  589. package/esm/core/Table/ColumnHeader.js +188 -0
  590. package/esm/core/Table/Table.js +20 -171
  591. package/esm/core/Table/filters/BaseFilter.d.ts +2 -9
  592. package/esm/core/Table/filters/BaseFilter.js +15 -16
  593. package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +3 -8
  594. package/esm/core/Table/filters/FilterButtonBar.d.ts +4 -2
  595. package/esm/core/Table/filters/FilterButtonBar.js +1 -0
  596. package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +3 -9
  597. package/esm/core/Table/filters/TextFilter/TextFilter.js +4 -7
  598. package/esm/core/Table/filters/index.d.ts +0 -1
  599. package/esm/core/Table/index.d.ts +1 -1
  600. package/esm/core/ThemeProvider/ThemeProvider.d.ts +0 -4
  601. package/esm/core/ThemeProvider/ThemeProvider.js +65 -44
  602. package/esm/core/Tile/Tile.d.ts +10 -9
  603. package/esm/core/Tile/Tile.js +8 -8
  604. package/esm/core/Toast/Toaster.d.ts +3 -2
  605. package/esm/core/Toast/Toaster.js +2 -1
  606. package/esm/core/Tooltip/Tooltip.js +22 -8
  607. package/esm/core/TransferList/TransferList.d.ts +5 -5
  608. package/esm/core/TransferList/TransferList.js +2 -2
  609. package/esm/core/Tree/Tree.js +2 -1
  610. package/esm/styles.js +1 -1
  611. package/esm/utils/functions/polymorphic.d.ts +3 -7
  612. package/esm/utils/functions/polymorphic.js +8 -5
  613. package/package.json +3 -3
  614. package/styles.css +22 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,59 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#2040](https://github.com/iTwin/iTwinUI/pull/2040): The colors of disabled controls have been adjusted make them easier to distinguish from regular controls.
8
+ - Also added hover state to disabled button, select, input, textarea, and actionable list item to help with accessibility.
9
+ - [#2153](https://github.com/iTwin/iTwinUI/pull/2153): Nested `ThemeProvider`s will now reuse the same toaster instead of creating new ones.
10
+ - [#2201](https://github.com/iTwin/iTwinUI/pull/2201): `List` and `ListItem` will now be rendered as `<div>`s instead of `<ul>`/`<li>`. This change makes these components less restrictive and less error-prone to use.
11
+ - [#2187](https://github.com/iTwin/iTwinUI/pull/2187): Floating elements will now use `position: fixed` instead of `position: absolute`.
12
+ - This fixes some issues when a floating element is placed near the edge of the viewport.
13
+ - Some components affected: `Tooltip`, `Popover`, `Select`, `DropdownMenu`, `ComboBox`, etc.
14
+ - [#2190](https://github.com/iTwin/iTwinUI/pull/2190): `Popover` now enables the [`size` middleware](https://floating-ui.com/docs/size) to prevent it from overflowing the viewport.
15
+ - This also affects other popover-like components (e.g. `Select`, `ComboBox`, `DropdownMenu`).
16
+ - `Popover` now also sets a default max-height of `400px` to prevent it from becoming too large. This can be customized using the `middleware.size.maxHeight` prop.
17
+ - [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `tableFilters.TextFilter` now prevents the user from applying the filter when the text input is empty.
18
+ - [#2205](https://github.com/iTwin/iTwinUI/pull/2205): `BaseFilter` now renders as a `<form>` and `FilterButtonBar` now renders a `<button type="submit">`. Together, this enables the use of browser's built-in validation before applying filters.
19
+ - The `setFilter` prop in `FilterButtonBar` has been deprecated, as `onSubmit` should be used instead.
20
+ <details>
21
+ <summary>Diff</summary>
22
+
23
+ ```diff
24
+ <BaseFilter
25
+ + onSubmit={() => setFilter(text)}
26
+ >
27
+ …
28
+ <FilterButtonBar
29
+ - setFilter={() => setFilter(text)}
30
+ />
31
+ </BaseFilter>
32
+ ```
33
+ </details>
34
+
35
+ ### Patch Changes
36
+
37
+ - [#2194](https://github.com/iTwin/iTwinUI/pull/2194): Fixed an issue where CommonJS files in the development build output (`DEV-cjs/` directory) were being treated as ESM, inadvertently causing runtime errors during development.
38
+ - [#2185](https://github.com/iTwin/iTwinUI/pull/2185): Portal containers will now default to a `<div>` rendered at the end of `<body>` instead of a `<div>` rendered inside the `<ThemeProvider>`.
39
+ - [#2202](https://github.com/iTwin/iTwinUI/pull/2202): `IconButton` will now reroute the HTML `title` prop to its own `label` prop for better accessibility. The `title` prop has also been marked deprecated to encourage the use of `label`.
40
+ - [#2168](https://github.com/iTwin/iTwinUI/pull/2168): Adjusted focus management in `Popover` so that it allows interactive elements inside the popover to be more easily focused. This more closely matches the behavior of the HTML `<dialog>` element, which focuses the first interactive element inside it.
41
+ - [#2207](https://github.com/iTwin/iTwinUI/pull/2207): Fixed a bug where `pointer-events: none` was sometimes applied to the main `<body>` when a `MenuItem` was hovered in a popout window.
42
+ - [#2189](https://github.com/iTwin/iTwinUI/pull/2189): Floating elements will now have a few pixels of padding from the edge of the viewport.
43
+ - [#2202](https://github.com/iTwin/iTwinUI/pull/2202): `IconButton` will now display warnings during development when it's missing a label.
44
+ - [#2178](https://github.com/iTwin/iTwinUI/pull/2178): Reduced layout thrashing on `Table` component by memoizing an expensive `ref` function.
45
+ - [#2194](https://github.com/iTwin/iTwinUI/pull/2194): The development build output is now also formatted using `prettier` for easier debugging.
46
+
47
+
48
+ ## 3.13.4
49
+
50
+ ### Patch Changes
51
+
52
+ - [#2138](https://github.com/iTwin/iTwinUI/pull/2138): Fixed an issue in `Table` column resizing where passing in a `width` value that was less than the column's default `minWidth` would cause an undesirable shift when the column was resized.
53
+ - [#2170](https://github.com/iTwin/iTwinUI/pull/2170): Fixed an issue in virtualized `Tree` where the `style` prop passed to `TreeNode` was not respected.
54
+ - [#2170](https://github.com/iTwin/iTwinUI/pull/2170): Fixed an issue in virtualized `Tree` where horizontal scroll was impossible to achieve.
55
+ - [#2174](https://github.com/iTwin/iTwinUI/pull/2174): Fixed an issue in `Table` where the virtualizer was being initialized when the `enableVirtualization` prop wasn't set to `true`.
56
+
3
57
  ## 3.13.3
4
58
 
5
59
  ### Patch Changes
package/DEV-cjs/core/Alert/Alert.js CHANGED
@@ -1,90 +1,143 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
1
+ 'use strict';
2
+ Object.defineProperty(exports, '__esModule', {
3
+ value: true,
4
4
  });
5
- Object.defineProperty(exports, "Alert", {
6
- enumerable: true,
7
- get: function() {
8
- return Alert;
9
- }
5
+ Object.defineProperty(exports, 'Alert', {
6
+ enumerable: true,
7
+ get: function () {
8
+ return Alert;
9
+ },
10
10
  });
11
- const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
- const _classnames = _interop_require_default._(require("classnames"));
14
- const _react = _interop_require_wildcard._(require("react"));
15
- const _index = require("../../utils/index.js");
16
- const _IconButton = require("../Buttons/IconButton.js");
17
- const _Icon = require("../Icon/Icon.js");
18
- const _Anchor = require("../Typography/Anchor.js");
11
+ const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
12
+ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
13
+ const _classnames = _interop_require_default._(require('classnames'));
14
+ const _react = _interop_require_wildcard._(require('react'));
15
+ const _index = require('../../utils/index.js');
16
+ const _IconButton = require('../Buttons/IconButton.js');
17
+ const _Icon = require('../Icon/Icon.js');
18
+ const _Anchor = require('../Typography/Anchor.js');
19
19
  const AlertContext = _react.createContext(void 0);
20
- const AlertComponent = _react.forwardRef((props, forwardedRef)=>{
21
- let { children, type = 'informational', isSticky = false, clickableText, clickableTextProps, onClose, ...rest } = props;
22
- return _react.createElement(Alert.Wrapper, {
23
- type: type,
24
- isSticky: isSticky,
25
- ref: forwardedRef,
26
- ...rest
27
- }, _react.createElement(Alert.Icon, null), _react.createElement(Alert.Message, null, children, clickableText ? _react.createElement(Alert.Action, clickableTextProps, clickableText) : null), onClose ? _react.createElement(Alert.CloseButton, {
28
- onClick: onClose
29
- }) : null);
20
+ const AlertComponent = _react.forwardRef((props, forwardedRef) => {
21
+ let {
22
+ children,
23
+ type = 'informational',
24
+ isSticky = false,
25
+ clickableText,
26
+ clickableTextProps,
27
+ onClose,
28
+ ...rest
29
+ } = props;
30
+ return _react.createElement(
31
+ Alert.Wrapper,
32
+ {
33
+ type: type,
34
+ isSticky: isSticky,
35
+ ref: forwardedRef,
36
+ ...rest,
37
+ },
38
+ _react.createElement(Alert.Icon, null),
39
+ _react.createElement(
40
+ Alert.Message,
41
+ null,
42
+ children,
43
+ clickableText
44
+ ? _react.createElement(Alert.Action, clickableTextProps, clickableText)
45
+ : null,
46
+ ),
47
+ onClose
48
+ ? _react.createElement(Alert.CloseButton, {
49
+ onClick: onClose,
50
+ })
51
+ : null,
52
+ );
30
53
  });
31
54
  AlertComponent.displayName = 'Alert';
32
- const AlertWrapper = _react.forwardRef((props, ref)=>{
33
- let { children, className, type = 'informational', isSticky = false, ...rest } = props;
34
- return _react.createElement(_index.Box, {
35
- className: (0, _classnames.default)('iui-alert', className),
36
- "data-iui-status": type,
37
- "data-iui-variant": isSticky ? 'sticky' : void 0,
38
- ref: ref,
39
- ...rest
40
- }, _react.createElement(AlertContext.Provider, {
55
+ const AlertWrapper = _react.forwardRef((props, ref) => {
56
+ let {
57
+ children,
58
+ className,
59
+ type = 'informational',
60
+ isSticky = false,
61
+ ...rest
62
+ } = props;
63
+ return _react.createElement(
64
+ _index.Box,
65
+ {
66
+ className: (0, _classnames.default)('iui-alert', className),
67
+ 'data-iui-status': type,
68
+ 'data-iui-variant': isSticky ? 'sticky' : void 0,
69
+ ref: ref,
70
+ ...rest,
71
+ },
72
+ _react.createElement(
73
+ AlertContext.Provider,
74
+ {
41
75
  value: {
42
- type
43
- }
44
- }, children));
76
+ type,
77
+ },
78
+ },
79
+ children,
80
+ ),
81
+ );
45
82
  });
46
83
  AlertWrapper.displayName = 'Alert.Wrapper';
47
- const AlertIcon = _react.forwardRef((props, ref)=>{
48
- let { children, ...rest } = props;
49
- let { type } = (0, _index.useSafeContext)(AlertContext);
50
- let StatusIcon = _index.StatusIconMap[type];
51
- return _react.createElement(_Icon.Icon, {
52
- fill: type,
53
- ref: ref,
54
- ...rest
55
- }, children ?? _react.createElement(StatusIcon, null));
84
+ const AlertIcon = _react.forwardRef((props, ref) => {
85
+ let { children, ...rest } = props;
86
+ let { type } = (0, _index.useSafeContext)(AlertContext);
87
+ let StatusIcon = _index.StatusIconMap[type];
88
+ return _react.createElement(
89
+ _Icon.Icon,
90
+ {
91
+ fill: type,
92
+ ref: ref,
93
+ ...rest,
94
+ },
95
+ children ?? _react.createElement(StatusIcon, null),
96
+ );
56
97
  });
57
98
  AlertIcon.displayName = 'Alert.Icon';
58
99
  const AlertMessage = _index.polymorphic.span('iui-alert-message');
59
100
  AlertMessage.displayName = 'Alert.Message';
60
- const AlertAction = _react.forwardRef((props, ref)=>{
61
- let { children, className, ...rest } = props;
62
- let { type } = (0, _index.useSafeContext)(AlertContext);
63
- return _react.createElement(_Anchor.Anchor, {
64
- as: props.href ? 'a' : 'button',
65
- className: (0, _classnames.default)('iui-button-base', 'iui-alert-link', className),
66
- underline: true,
67
- "data-iui-status": type,
68
- ref: ref,
69
- ...rest
70
- }, children);
101
+ const AlertAction = _react.forwardRef((props, ref) => {
102
+ let { children, className, ...rest } = props;
103
+ let { type } = (0, _index.useSafeContext)(AlertContext);
104
+ return _react.createElement(
105
+ _Anchor.Anchor,
106
+ {
107
+ as: props.href ? 'a' : 'button',
108
+ className: (0, _classnames.default)(
109
+ 'iui-button-base',
110
+ 'iui-alert-link',
111
+ className,
112
+ ),
113
+ underline: true,
114
+ 'data-iui-status': type,
115
+ ref: ref,
116
+ ...rest,
117
+ },
118
+ children,
119
+ );
71
120
  });
72
121
  AlertAction.displayName = 'Alert.Action';
73
- const AlertCloseButton = _react.forwardRef((props, ref)=>{
74
- let { children, ...rest } = props;
75
- return _react.createElement(_IconButton.IconButton, {
76
- styleType: "borderless",
77
- size: "small",
78
- "aria-label": "Close",
79
- ref: ref,
80
- ...rest
81
- }, children ?? _react.createElement(_index.SvgCloseSmall, null));
122
+ const AlertCloseButton = _react.forwardRef((props, ref) => {
123
+ let { children, ...rest } = props;
124
+ return _react.createElement(
125
+ _IconButton.IconButton,
126
+ {
127
+ styleType: 'borderless',
128
+ size: 'small',
129
+ 'aria-label': 'Close',
130
+ ref: ref,
131
+ ...rest,
132
+ },
133
+ children ?? _react.createElement(_index.SvgCloseSmall, null),
134
+ );
82
135
  });
83
136
  AlertCloseButton.displayName = 'Alert.CloseButton';
84
137
  const Alert = Object.assign(AlertComponent, {
85
- Wrapper: AlertWrapper,
86
- Icon: AlertIcon,
87
- Message: AlertMessage,
88
- Action: AlertAction,
89
- CloseButton: AlertCloseButton
138
+ Wrapper: AlertWrapper,
139
+ Icon: AlertIcon,
140
+ Message: AlertMessage,
141
+ Action: AlertAction,
142
+ CloseButton: AlertCloseButton,
90
143
  });
package/DEV-cjs/core/Avatar/Avatar.js CHANGED
@@ -1,55 +1,81 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
1
+ 'use strict';
2
+ Object.defineProperty(exports, '__esModule', {
3
+ value: true,
4
4
  });
5
5
  function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
6
+ for (var name in all)
7
+ Object.defineProperty(target, name, {
8
+ enumerable: true,
9
+ get: all[name],
9
10
  });
10
11
  }
11
12
  _export(exports, {
12
- Avatar: function() {
13
- return Avatar;
14
- },
15
- defaultStatusTitles: function() {
16
- return defaultStatusTitles;
17
- }
13
+ Avatar: function () {
14
+ return Avatar;
15
+ },
16
+ defaultStatusTitles: function () {
17
+ return defaultStatusTitles;
18
+ },
18
19
  });
19
- const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
20
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
21
- const _classnames = _interop_require_default._(require("classnames"));
22
- const _react = _interop_require_wildcard._(require("react"));
23
- const _index = require("../../utils/index.js");
24
- const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden.js");
25
- const getBackground = (color)=>{
26
- if (!color) return '';
27
- return (0, _index.isSoftBackground)(color) ? _index.SoftBackgrounds[color] : color;
20
+ const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
21
+ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
22
+ const _classnames = _interop_require_default._(require('classnames'));
23
+ const _react = _interop_require_wildcard._(require('react'));
24
+ const _index = require('../../utils/index.js');
25
+ const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
26
+ const getBackground = (color) => {
27
+ if (!color) return '';
28
+ return (0, _index.isSoftBackground)(color)
29
+ ? _index.SoftBackgrounds[color]
30
+ : color;
28
31
  };
29
32
  const defaultStatusTitles = {
30
- away: 'Away',
31
- busy: 'Busy',
32
- offline: 'Offline',
33
- online: 'Online'
33
+ away: 'Away',
34
+ busy: 'Busy',
35
+ offline: 'Offline',
36
+ online: 'Online',
34
37
  };
35
- const Avatar = _react.forwardRef((props, ref)=>{
36
- let { size = 'small', status, abbreviation, image, backgroundColor, title, translatedStatusTitles, className, style, ...rest } = props;
37
- let statusTitles = {
38
- ...defaultStatusTitles,
39
- ...translatedStatusTitles
40
- };
41
- return _react.createElement(_index.Box, {
42
- as: "span",
43
- className: (0, _classnames.default)('iui-avatar', className),
44
- "data-iui-size": 'medium' !== size ? size : void 0,
45
- "data-iui-status": status,
46
- title: title,
47
- style: {
48
- backgroundColor: getBackground(backgroundColor),
49
- ...style
50
- },
51
- ref: ref,
52
- ...rest
53
- }, image ? null : abbreviation?.substring(0, 2), image, status ? _react.createElement(_VisuallyHidden.VisuallyHidden, null, statusTitles[status]) : null);
38
+ const Avatar = _react.forwardRef((props, ref) => {
39
+ let {
40
+ size = 'small',
41
+ status,
42
+ abbreviation,
43
+ image,
44
+ backgroundColor,
45
+ title,
46
+ translatedStatusTitles,
47
+ className,
48
+ style,
49
+ ...rest
50
+ } = props;
51
+ let statusTitles = {
52
+ ...defaultStatusTitles,
53
+ ...translatedStatusTitles,
54
+ };
55
+ return _react.createElement(
56
+ _index.Box,
57
+ {
58
+ as: 'span',
59
+ className: (0, _classnames.default)('iui-avatar', className),
60
+ 'data-iui-size': 'medium' !== size ? size : void 0,
61
+ 'data-iui-status': status,
62
+ title: title,
63
+ style: {
64
+ backgroundColor: getBackground(backgroundColor),
65
+ ...style,
66
+ },
67
+ ref: ref,
68
+ ...rest,
69
+ },
70
+ image ? null : abbreviation?.substring(0, 2),
71
+ image,
72
+ status
73
+ ? _react.createElement(
74
+ _VisuallyHidden.VisuallyHidden,
75
+ null,
76
+ statusTitles[status],
77
+ )
78
+ : null,
79
+ );
54
80
  });
55
81
  Avatar.displayName = 'Avatar';
package/DEV-cjs/core/AvatarGroup/AvatarGroup.js CHANGED
@@ -1,38 +1,75 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
1
+ 'use strict';
2
+ Object.defineProperty(exports, '__esModule', {
3
+ value: true,
4
4
  });
5
- Object.defineProperty(exports, "AvatarGroup", {
6
- enumerable: true,
7
- get: function() {
8
- return AvatarGroup;
9
- }
5
+ Object.defineProperty(exports, 'AvatarGroup', {
6
+ enumerable: true,
7
+ get: function () {
8
+ return AvatarGroup;
9
+ },
10
10
  });
11
- const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
- const _react = _interop_require_wildcard._(require("react"));
14
- const _classnames = _interop_require_default._(require("classnames"));
15
- const _index = require("../../utils/index.js");
16
- const AvatarGroup = _react.forwardRef((props, ref)=>{
17
- let maxLength = 99;
18
- let { children, animated = false, stacked = true, maxIcons = 5, iconSize = 'small', countIconProps, className, ...rest } = props;
19
- let childrenArray = _react.Children.toArray(children);
20
- let childrenLength = childrenArray.length;
21
- let getAvatarList = (count)=>childrenArray.slice(0, count).map((child)=>_react.cloneElement(child, {
22
- status: void 0,
23
- size: iconSize
24
- }));
25
- return _react.createElement(_index.Box, {
26
- className: (0, _classnames.default)('iui-avatar-list', {
27
- 'iui-animated': animated,
28
- 'iui-stacked': stacked
29
- }, className),
30
- ref: ref,
31
- ...rest
32
- }, childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1), childrenArray.length > maxIcons + 1 && _react.createElement(_react.Fragment, null, getAvatarList(maxIcons), _react.createElement(_index.Box, {
33
- ...countIconProps,
34
- className: (0, _classnames.default)('iui-avatar', 'iui-avatar-count', countIconProps?.className),
35
- "data-iui-size": 'medium' !== iconSize ? iconSize : void 0
36
- }, childrenLength <= maxLength ? `${childrenLength - maxIcons}` : `${maxLength}+`)));
11
+ const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
12
+ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
13
+ const _react = _interop_require_wildcard._(require('react'));
14
+ const _classnames = _interop_require_default._(require('classnames'));
15
+ const _index = require('../../utils/index.js');
16
+ const AvatarGroup = _react.forwardRef((props, ref) => {
17
+ let maxLength = 99;
18
+ let {
19
+ children,
20
+ animated = false,
21
+ stacked = true,
22
+ maxIcons = 5,
23
+ iconSize = 'small',
24
+ countIconProps,
25
+ className,
26
+ ...rest
27
+ } = props;
28
+ let childrenArray = _react.Children.toArray(children);
29
+ let childrenLength = childrenArray.length;
30
+ let getAvatarList = (count) =>
31
+ childrenArray.slice(0, count).map((child) =>
32
+ _react.cloneElement(child, {
33
+ status: void 0,
34
+ size: iconSize,
35
+ }),
36
+ );
37
+ return _react.createElement(
38
+ _index.Box,
39
+ {
40
+ className: (0, _classnames.default)(
41
+ 'iui-avatar-list',
42
+ {
43
+ 'iui-animated': animated,
44
+ 'iui-stacked': stacked,
45
+ },
46
+ className,
47
+ ),
48
+ ref: ref,
49
+ ...rest,
50
+ },
51
+ childrenArray.length <= maxIcons + 1 && getAvatarList(maxIcons + 1),
52
+ childrenArray.length > maxIcons + 1 &&
53
+ _react.createElement(
54
+ _react.Fragment,
55
+ null,
56
+ getAvatarList(maxIcons),
57
+ _react.createElement(
58
+ _index.Box,
59
+ {
60
+ ...countIconProps,
61
+ className: (0, _classnames.default)(
62
+ 'iui-avatar',
63
+ 'iui-avatar-count',
64
+ countIconProps?.className,
65
+ ),
66
+ 'data-iui-size': 'medium' !== iconSize ? iconSize : void 0,
67
+ },
68
+ childrenLength <= maxLength
69
+ ? `${childrenLength - maxIcons}`
70
+ : `${maxLength}+`,
71
+ ),
72
+ ),
73
+ );
37
74
  });
38
75
  AvatarGroup.displayName = 'AvatarGroup';
package/DEV-cjs/core/Backdrop/Backdrop.js CHANGED
@@ -1,26 +1,30 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
1
+ 'use strict';
2
+ Object.defineProperty(exports, '__esModule', {
3
+ value: true,
4
4
  });
5
- Object.defineProperty(exports, "Backdrop", {
6
- enumerable: true,
7
- get: function() {
8
- return Backdrop;
9
- }
5
+ Object.defineProperty(exports, 'Backdrop', {
6
+ enumerable: true,
7
+ get: function () {
8
+ return Backdrop;
9
+ },
10
10
  });
11
- const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
- const _react = _interop_require_wildcard._(require("react"));
14
- const _classnames = _interop_require_default._(require("classnames"));
15
- const _index = require("../../utils/index.js");
16
- const Backdrop = _react.forwardRef((props, ref)=>{
17
- let { isVisible = true, className, ...rest } = props;
18
- return _react.createElement(_index.Box, {
19
- className: (0, _classnames.default)('iui-backdrop', {
20
- 'iui-backdrop-visible': isVisible
21
- }, className),
22
- ref: ref,
23
- ...rest
24
- });
11
+ const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
12
+ const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
13
+ const _react = _interop_require_wildcard._(require('react'));
14
+ const _classnames = _interop_require_default._(require('classnames'));
15
+ const _index = require('../../utils/index.js');
16
+ const Backdrop = _react.forwardRef((props, ref) => {
17
+ let { isVisible = true, className, ...rest } = props;
18
+ return _react.createElement(_index.Box, {
19
+ className: (0, _classnames.default)(
20
+ 'iui-backdrop',
21
+ {
22
+ 'iui-backdrop-visible': isVisible,
23
+ },
24
+ className,
25
+ ),
26
+ ref: ref,
27
+ ...rest,
28
+ });
25
29
  });
26
30
  Backdrop.displayName = 'Backdrop';