@itwin/itwinui-react 3.0.3 → 3.0.5

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 (498) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/cjs/core/Alert/Alert.js +46 -106
  3. package/cjs/core/Avatar/Avatar.js +21 -58
  4. package/cjs/core/AvatarGroup/AvatarGroup.js +26 -64
  5. package/cjs/core/Backdrop/Backdrop.js +8 -16
  6. package/cjs/core/Badge/Badge.js +22 -39
  7. package/cjs/core/Breadcrumbs/Breadcrumbs.js +61 -138
  8. package/cjs/core/ButtonGroup/ButtonGroup.js +32 -68
  9. package/cjs/core/Buttons/Button.js +11 -57
  10. package/cjs/core/Buttons/DropdownButton.js +15 -49
  11. package/cjs/core/Buttons/IconButton.js +13 -53
  12. package/cjs/core/Buttons/IdeasButton.js +8 -20
  13. package/cjs/core/Buttons/SplitButton.js +43 -103
  14. package/cjs/core/Carousel/Carousel.js +54 -78
  15. package/cjs/core/Carousel/CarouselContext.js +4 -4
  16. package/cjs/core/Carousel/CarouselDot.js +12 -23
  17. package/cjs/core/Carousel/CarouselDotsList.js +92 -153
  18. package/cjs/core/Carousel/CarouselNavigation.js +41 -84
  19. package/cjs/core/Carousel/CarouselSlide.js +26 -49
  20. package/cjs/core/Carousel/CarouselSlider.js +47 -66
  21. package/cjs/core/Checkbox/Checkbox.js +32 -88
  22. package/cjs/core/ColorPicker/ColorBuilder.js +174 -292
  23. package/cjs/core/ColorPicker/ColorInputPanel.js +246 -411
  24. package/cjs/core/ColorPicker/ColorPalette.js +23 -47
  25. package/cjs/core/ColorPicker/ColorPicker.js +53 -87
  26. package/cjs/core/ColorPicker/ColorPickerContext.js +9 -11
  27. package/cjs/core/ColorPicker/ColorSwatch.js +15 -40
  28. package/cjs/core/ComboBox/ComboBox.js +280 -402
  29. package/cjs/core/ComboBox/ComboBoxEndIcon.js +12 -28
  30. package/cjs/core/ComboBox/ComboBoxInput.js +131 -207
  31. package/cjs/core/ComboBox/ComboBoxInputContainer.js +12 -35
  32. package/cjs/core/ComboBox/ComboBoxMenu.js +43 -87
  33. package/cjs/core/ComboBox/ComboBoxMenuItem.js +21 -73
  34. package/cjs/core/ComboBox/ComboBoxMultipleContainer.js +7 -13
  35. package/cjs/core/ComboBox/helpers.js +43 -47
  36. package/cjs/core/DatePicker/DatePicker.js +333 -569
  37. package/cjs/core/Dialog/Dialog.js +36 -65
  38. package/cjs/core/Dialog/DialogBackdrop.js +27 -47
  39. package/cjs/core/Dialog/DialogButtonBar.js +3 -3
  40. package/cjs/core/Dialog/DialogContent.js +18 -26
  41. package/cjs/core/Dialog/DialogContext.js +5 -5
  42. package/cjs/core/Dialog/DialogDragContext.js +8 -8
  43. package/cjs/core/Dialog/DialogMain.js +116 -183
  44. package/cjs/core/Dialog/DialogTitleBar.js +20 -67
  45. package/cjs/core/Dialog/DialogTitleBarTitle.js +3 -3
  46. package/cjs/core/Divider/Divider.js +8 -14
  47. package/cjs/core/DropdownMenu/DropdownMenu.js +46 -80
  48. package/cjs/core/ExpandableBlock/ExpandableBlock.js +101 -206
  49. package/cjs/core/Fieldset/Fieldset.js +14 -25
  50. package/cjs/core/FileUpload/FileEmptyCard.js +17 -43
  51. package/cjs/core/FileUpload/FileUpload.js +42 -88
  52. package/cjs/core/FileUpload/FileUploadCard.js +84 -169
  53. package/cjs/core/FileUpload/FileUploadTemplate.js +16 -51
  54. package/cjs/core/Flex/Flex.js +77 -93
  55. package/cjs/core/Footer/Footer.js +64 -103
  56. package/cjs/core/Footer/FooterItem.js +3 -3
  57. package/cjs/core/Footer/FooterList.js +3 -3
  58. package/cjs/core/Footer/FooterSeparator.js +5 -8
  59. package/cjs/core/Header/Header.js +22 -67
  60. package/cjs/core/Header/HeaderBasicButton.js +13 -24
  61. package/cjs/core/Header/HeaderBreadcrumbs.js +14 -38
  62. package/cjs/core/Header/HeaderButton.js +22 -76
  63. package/cjs/core/Header/HeaderDropdownButton.js +20 -48
  64. package/cjs/core/Header/HeaderLogo.js +11 -42
  65. package/cjs/core/Header/HeaderSplitButton.js +21 -66
  66. package/cjs/core/Icon/Icon.js +18 -32
  67. package/cjs/core/InformationPanel/InformationPanel.js +42 -77
  68. package/cjs/core/InformationPanel/InformationPanelBody.js +4 -6
  69. package/cjs/core/InformationPanel/InformationPanelContent.js +8 -20
  70. package/cjs/core/InformationPanel/InformationPanelHeader.js +14 -34
  71. package/cjs/core/InformationPanel/InformationPanelWrapper.js +4 -6
  72. package/cjs/core/Input/Input.js +10 -18
  73. package/cjs/core/InputGrid/InputGrid.js +8 -17
  74. package/cjs/core/InputGroup/InputGroup.js +25 -72
  75. package/cjs/core/InputWithDecorations/InputWithDecorations.js +23 -51
  76. package/cjs/core/Label/Label.js +11 -32
  77. package/cjs/core/LabeledInput/LabeledInput.js +20 -70
  78. package/cjs/core/LabeledSelect/LabeledSelect.js +28 -77
  79. package/cjs/core/LabeledTextarea/LabeledTextarea.js +7 -13
  80. package/cjs/core/LinkAction/LinkAction.js +3 -3
  81. package/cjs/core/List/List.js +3 -3
  82. package/cjs/core/List/ListItem.js +35 -55
  83. package/cjs/core/Menu/Menu.js +53 -66
  84. package/cjs/core/Menu/MenuDivider.js +4 -4
  85. package/cjs/core/Menu/MenuExtraContent.js +4 -4
  86. package/cjs/core/Menu/MenuItem.js +92 -168
  87. package/cjs/core/Menu/MenuItemSkeleton.js +19 -54
  88. package/cjs/core/Modal/Modal.js +11 -38
  89. package/cjs/core/Modal/ModalButtonBar.js +4 -7
  90. package/cjs/core/Modal/ModalContent.js +3 -3
  91. package/cjs/core/NonIdealState/ErrorPage.js +131 -187
  92. package/cjs/core/NonIdealState/NonIdealState.js +12 -77
  93. package/cjs/core/NotificationMarker/NotificationMarker.js +8 -29
  94. package/cjs/core/Overlay/Overlay.d.ts +20 -24
  95. package/cjs/core/Overlay/Overlay.js +50 -64
  96. package/cjs/core/Popover/Popover.js +87 -157
  97. package/cjs/core/ProgressIndicators/ProgressLinear.js +11 -49
  98. package/cjs/core/ProgressIndicators/ProgressRadial.js +19 -51
  99. package/cjs/core/Radio/Radio.js +12 -54
  100. package/cjs/core/RadioTiles/RadioTile.js +14 -80
  101. package/cjs/core/RadioTiles/RadioTileGroup.js +9 -16
  102. package/cjs/core/SearchBox/SearchBox.js +104 -221
  103. package/cjs/core/Select/Select.js +141 -282
  104. package/cjs/core/Select/SelectTag.js +9 -21
  105. package/cjs/core/Select/SelectTagContainer.js +14 -30
  106. package/cjs/core/SideNavigation/SideNavigation.js +29 -138
  107. package/cjs/core/SideNavigation/SidenavButton.js +8 -30
  108. package/cjs/core/SideNavigation/SidenavSubmenu.js +9 -23
  109. package/cjs/core/SideNavigation/SidenavSubmenuHeader.js +10 -29
  110. package/cjs/core/SkipToContentLink/SkipToContentLink.js +8 -20
  111. package/cjs/core/Slider/Slider.js +195 -376
  112. package/cjs/core/Slider/Thumb.js +57 -108
  113. package/cjs/core/Slider/Track.js +55 -83
  114. package/cjs/core/StatusMessage/StatusMessage.js +12 -34
  115. package/cjs/core/Stepper/Stepper.js +21 -80
  116. package/cjs/core/Stepper/StepperStep.js +36 -109
  117. package/cjs/core/Stepper/WorkflowDiagram.js +15 -38
  118. package/cjs/core/Stepper/WorkflowDiagramStep.js +11 -39
  119. package/cjs/core/Surface/Surface.js +54 -94
  120. package/cjs/core/Table/SubRowExpander.js +15 -37
  121. package/cjs/core/Table/Table.js +419 -763
  122. package/cjs/core/Table/TableCell.js +63 -113
  123. package/cjs/core/Table/TablePaginator.js +136 -312
  124. package/cjs/core/Table/TableRowMemoized.js +64 -137
  125. package/cjs/core/Table/actionHandlers/expandHandler.js +12 -12
  126. package/cjs/core/Table/actionHandlers/filterHandler.js +17 -25
  127. package/cjs/core/Table/actionHandlers/index.js +14 -56
  128. package/cjs/core/Table/actionHandlers/resizeHandler.js +13 -13
  129. package/cjs/core/Table/actionHandlers/selectHandler.js +98 -128
  130. package/cjs/core/Table/cells/DefaultCell.js +13 -48
  131. package/cjs/core/Table/cells/EditableCell.js +46 -75
  132. package/cjs/core/Table/cells/index.js +6 -16
  133. package/cjs/core/Table/columns/actionColumn.js +67 -97
  134. package/cjs/core/Table/columns/expanderColumn.js +32 -46
  135. package/cjs/core/Table/columns/index.js +11 -41
  136. package/cjs/core/Table/columns/selectionColumn.js +29 -57
  137. package/cjs/core/Table/filters/BaseFilter.js +13 -24
  138. package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js +52 -120
  139. package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js +60 -120
  140. package/cjs/core/Table/filters/FilterButtonBar.js +16 -39
  141. package/cjs/core/Table/filters/FilterToggle.js +26 -62
  142. package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +36 -58
  143. package/cjs/core/Table/filters/TextFilter/TextFilter.js +28 -40
  144. package/cjs/core/Table/filters/customFilterFunctions.js +14 -16
  145. package/cjs/core/Table/filters/defaultFilterFunctions.js +81 -86
  146. package/cjs/core/Table/filters/index.js +11 -35
  147. package/cjs/core/Table/filters/tableFilters.js +32 -44
  148. package/cjs/core/Table/filters/types.js +2 -2
  149. package/cjs/core/Table/hooks/index.js +19 -67
  150. package/cjs/core/Table/hooks/useColumnDragAndDrop.js +86 -101
  151. package/cjs/core/Table/hooks/useExpanderCell.js +25 -33
  152. package/cjs/core/Table/hooks/useResizeColumns.js +290 -362
  153. package/cjs/core/Table/hooks/useScrollToRow.js +38 -46
  154. package/cjs/core/Table/hooks/useSelectionCell.js +10 -17
  155. package/cjs/core/Table/hooks/useStickyColumns.js +62 -64
  156. package/cjs/core/Table/hooks/useSubRowFiltering.js +88 -95
  157. package/cjs/core/Table/hooks/useSubRowSelection.js +31 -32
  158. package/cjs/core/Table/index.js +18 -78
  159. package/cjs/core/Table/utils.js +40 -42
  160. package/cjs/core/Tabs/Tabs.d.ts +3 -5
  161. package/cjs/core/Tabs/Tabs.js +235 -422
  162. package/cjs/core/Tag/Tag.js +15 -42
  163. package/cjs/core/Tag/TagContainer.js +11 -23
  164. package/cjs/core/Textarea/Textarea.js +6 -11
  165. package/cjs/core/ThemeProvider/ThemeContext.js +4 -4
  166. package/cjs/core/ThemeProvider/ThemeProvider.js +52 -105
  167. package/cjs/core/Tile/Tile.js +230 -410
  168. package/cjs/core/TimePicker/TimePicker.js +234 -458
  169. package/cjs/core/Toast/Toast.js +107 -204
  170. package/cjs/core/Toast/Toaster.js +77 -103
  171. package/cjs/core/ToggleSwitch/ToggleSwitch.js +23 -66
  172. package/cjs/core/Tooltip/Tooltip.js +91 -137
  173. package/cjs/core/TransferList/TransferList.js +103 -177
  174. package/cjs/core/Tree/Tree.js +129 -204
  175. package/cjs/core/Tree/TreeContext.js +9 -9
  176. package/cjs/core/Tree/TreeNode.js +104 -207
  177. package/cjs/core/Tree/TreeNodeExpander.js +12 -26
  178. package/cjs/core/Typography/Anchor.js +3 -3
  179. package/cjs/core/Typography/Blockquote.js +10 -18
  180. package/cjs/core/Typography/Code.js +3 -3
  181. package/cjs/core/Typography/Kbd.js +21 -30
  182. package/cjs/core/Typography/Text.js +13 -26
  183. package/cjs/core/VisuallyHidden/VisuallyHidden.js +8 -14
  184. package/cjs/core/utils/color/ColorValue.js +453 -535
  185. package/cjs/core/utils/color/index.js +4 -4
  186. package/cjs/core/utils/components/AutoclearingHiddenLiveRegion.js +13 -20
  187. package/cjs/core/utils/components/Box.js +3 -3
  188. package/cjs/core/utils/components/ButtonBase.js +20 -38
  189. package/cjs/core/utils/components/FocusTrap.js +38 -47
  190. package/cjs/core/utils/components/InputContainer.js +19 -58
  191. package/cjs/core/utils/components/InputFlexContainer.js +8 -24
  192. package/cjs/core/utils/components/MiddleTextTruncation.js +22 -32
  193. package/cjs/core/utils/components/Portal.js +20 -22
  194. package/cjs/core/utils/components/Resizer.js +196 -253
  195. package/cjs/core/utils/components/VirtualScroll.js +223 -304
  196. package/cjs/core/utils/components/WithCSSTransition.js +32 -49
  197. package/cjs/core/utils/components/index.js +14 -14
  198. package/cjs/core/utils/functions/colors.js +22 -25
  199. package/cjs/core/utils/functions/date.js +10 -10
  200. package/cjs/core/utils/functions/dev.js +14 -13
  201. package/cjs/core/utils/functions/dom.js +17 -24
  202. package/cjs/core/utils/functions/focusable.js +17 -26
  203. package/cjs/core/utils/functions/import.js +23 -46
  204. package/cjs/core/utils/functions/index.js +13 -13
  205. package/cjs/core/utils/functions/numbers.js +9 -9
  206. package/cjs/core/utils/functions/polymorphic.js +30 -43
  207. package/cjs/core/utils/functions/react.js +24 -26
  208. package/cjs/core/utils/functions/supports.js +4 -5
  209. package/cjs/core/utils/hooks/index.js +17 -17
  210. package/cjs/core/utils/hooks/useContainerWidth.js +19 -26
  211. package/cjs/core/utils/hooks/useControlledState.js +12 -21
  212. package/cjs/core/utils/hooks/useDragAndDrop.js +87 -110
  213. package/cjs/core/utils/hooks/useEventListener.js +22 -22
  214. package/cjs/core/utils/hooks/useGlobals.js +27 -33
  215. package/cjs/core/utils/hooks/useId.js +8 -9
  216. package/cjs/core/utils/hooks/useIntersection.js +24 -30
  217. package/cjs/core/utils/hooks/useIsClient.js +9 -9
  218. package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +5 -6
  219. package/cjs/core/utils/hooks/useLatestRef.js +9 -9
  220. package/cjs/core/utils/hooks/useMediaQuery.js +31 -31
  221. package/cjs/core/utils/hooks/useMergedRefs.js +16 -15
  222. package/cjs/core/utils/hooks/useOverflow.js +57 -70
  223. package/cjs/core/utils/hooks/useResizeObserver.js +17 -22
  224. package/cjs/core/utils/hooks/useSafeContext.js +9 -9
  225. package/cjs/core/utils/icons/StatusIconMap.js +12 -28
  226. package/cjs/core/utils/icons/Svg.js +3 -3
  227. package/cjs/core/utils/icons/SvgCalendar.js +7 -12
  228. package/cjs/core/utils/icons/SvgCaretDownSmall.js +7 -12
  229. package/cjs/core/utils/icons/SvgCaretRightSmall.js +7 -12
  230. package/cjs/core/utils/icons/SvgCaretUpSmall.js +7 -12
  231. package/cjs/core/utils/icons/SvgCheckmark.js +7 -10
  232. package/cjs/core/utils/icons/SvgCheckmarkSmall.js +7 -12
  233. package/cjs/core/utils/icons/SvgChevronLeft.js +7 -12
  234. package/cjs/core/utils/icons/SvgChevronLeftDouble.js +7 -12
  235. package/cjs/core/utils/icons/SvgChevronRight.js +7 -12
  236. package/cjs/core/utils/icons/SvgChevronRightDouble.js +7 -12
  237. package/cjs/core/utils/icons/SvgClose.js +7 -12
  238. package/cjs/core/utils/icons/SvgCloseSmall.js +7 -12
  239. package/cjs/core/utils/icons/SvgColumnManager.js +7 -12
  240. package/cjs/core/utils/icons/SvgDocument.js +7 -10
  241. package/cjs/core/utils/icons/SvgFilter.js +7 -10
  242. package/cjs/core/utils/icons/SvgFilterHollow.js +7 -12
  243. package/cjs/core/utils/icons/SvgImportantSmall.js +7 -12
  244. package/cjs/core/utils/icons/SvgInfoCircular.js +7 -12
  245. package/cjs/core/utils/icons/SvgMore.js +7 -12
  246. package/cjs/core/utils/icons/SvgMoreVertical.js +7 -12
  247. package/cjs/core/utils/icons/SvgNew.js +7 -12
  248. package/cjs/core/utils/icons/SvgSearch.js +7 -12
  249. package/cjs/core/utils/icons/SvgSmileyHappy.js +7 -12
  250. package/cjs/core/utils/icons/SvgSortDown.js +7 -12
  251. package/cjs/core/utils/icons/SvgSortUp.js +7 -12
  252. package/cjs/core/utils/icons/SvgStatusError.js +7 -12
  253. package/cjs/core/utils/icons/SvgStatusSuccess.js +7 -12
  254. package/cjs/core/utils/icons/SvgStatusWarning.js +7 -12
  255. package/cjs/core/utils/icons/SvgSwap.js +7 -12
  256. package/cjs/core/utils/icons/SvgUpload.js +7 -12
  257. package/cjs/core/utils/icons/index.js +34 -34
  258. package/cjs/core/utils/index.js +10 -10
  259. package/cjs/core/utils/props.js +2 -2
  260. package/cjs/core/utils/types.js +2 -2
  261. package/cjs/index.js +229 -949
  262. package/cjs/react-table/react-table.js +2 -2
  263. package/cjs/styles.js +412 -425
  264. package/esm/core/Alert/Alert.js +39 -106
  265. package/esm/core/Avatar/Avatar.js +14 -42
  266. package/esm/core/AvatarGroup/AvatarGroup.js +20 -58
  267. package/esm/core/Backdrop/Backdrop.js +2 -10
  268. package/esm/core/Badge/Badge.js +16 -31
  269. package/esm/core/Breadcrumbs/Breadcrumbs.js +55 -135
  270. package/esm/core/ButtonGroup/ButtonGroup.js +25 -61
  271. package/esm/core/Buttons/Button.js +5 -45
  272. package/esm/core/Buttons/DropdownButton.js +7 -37
  273. package/esm/core/Buttons/IconButton.js +5 -40
  274. package/esm/core/Buttons/IdeasButton.js +2 -12
  275. package/esm/core/Buttons/SplitButton.js +34 -101
  276. package/esm/core/Carousel/Carousel.js +43 -72
  277. package/esm/core/Carousel/CarouselDot.js +6 -17
  278. package/esm/core/Carousel/CarouselDotsList.js +85 -147
  279. package/esm/core/Carousel/CarouselNavigation.js +32 -68
  280. package/esm/core/Carousel/CarouselSlide.js +19 -41
  281. package/esm/core/Carousel/CarouselSlider.js +41 -65
  282. package/esm/core/Checkbox/Checkbox.js +25 -78
  283. package/esm/core/ColorPicker/ColorBuilder.js +167 -280
  284. package/esm/core/ColorPicker/ColorInputPanel.js +237 -395
  285. package/esm/core/ColorPicker/ColorPalette.js +14 -35
  286. package/esm/core/ColorPicker/ColorPicker.js +46 -79
  287. package/esm/core/ColorPicker/ColorPickerContext.js +5 -7
  288. package/esm/core/ColorPicker/ColorSwatch.js +7 -24
  289. package/esm/core/ComboBox/ComboBox.js +267 -396
  290. package/esm/core/ComboBox/ComboBoxEndIcon.js +5 -18
  291. package/esm/core/ComboBox/ComboBoxInput.js +125 -197
  292. package/esm/core/ComboBox/ComboBoxInputContainer.js +5 -20
  293. package/esm/core/ComboBox/ComboBoxMenu.js +37 -77
  294. package/esm/core/ComboBox/ComboBoxMenuItem.js +14 -61
  295. package/esm/core/ComboBox/ComboBoxMultipleContainer.js +2 -6
  296. package/esm/core/ComboBox/helpers.js +38 -38
  297. package/esm/core/DatePicker/DatePicker.js +326 -555
  298. package/esm/core/Dialog/Dialog.js +24 -53
  299. package/esm/core/Dialog/DialogBackdrop.js +19 -39
  300. package/esm/core/Dialog/DialogContent.js +12 -20
  301. package/esm/core/Dialog/DialogContext.js +1 -1
  302. package/esm/core/Dialog/DialogDragContext.js +4 -4
  303. package/esm/core/Dialog/DialogMain.js +107 -177
  304. package/esm/core/Dialog/DialogTitleBar.js +10 -45
  305. package/esm/core/Divider/Divider.js +2 -8
  306. package/esm/core/DropdownMenu/DropdownMenu.js +40 -75
  307. package/esm/core/ExpandableBlock/ExpandableBlock.js +92 -193
  308. package/esm/core/Fieldset/Fieldset.js +8 -19
  309. package/esm/core/FileUpload/FileEmptyCard.js +8 -19
  310. package/esm/core/FileUpload/FileUpload.js +36 -72
  311. package/esm/core/FileUpload/FileUploadCard.js +76 -153
  312. package/esm/core/FileUpload/FileUploadTemplate.js +9 -37
  313. package/esm/core/Flex/Flex.js +71 -87
  314. package/esm/core/Footer/Footer.js +55 -86
  315. package/esm/core/Footer/FooterSeparator.js +1 -1
  316. package/esm/core/Header/Header.js +14 -55
  317. package/esm/core/Header/HeaderBasicButton.js +7 -15
  318. package/esm/core/Header/HeaderBreadcrumbs.js +8 -32
  319. package/esm/core/Header/HeaderButton.js +14 -62
  320. package/esm/core/Header/HeaderDropdownButton.js +13 -42
  321. package/esm/core/Header/HeaderLogo.js +5 -36
  322. package/esm/core/Header/HeaderSplitButton.js +14 -61
  323. package/esm/core/Icon/Icon.js +12 -26
  324. package/esm/core/InformationPanel/InformationPanel.js +36 -71
  325. package/esm/core/InformationPanel/InformationPanelContent.js +3 -17
  326. package/esm/core/InformationPanel/InformationPanelHeader.js +8 -32
  327. package/esm/core/InformationPanel/InformationPanelWrapper.js +1 -3
  328. package/esm/core/Input/Input.js +4 -12
  329. package/esm/core/InputGrid/InputGrid.js +2 -11
  330. package/esm/core/InputGroup/InputGroup.js +16 -57
  331. package/esm/core/InputWithDecorations/InputWithDecorations.js +11 -42
  332. package/esm/core/Label/Label.js +5 -26
  333. package/esm/core/LabeledInput/LabeledInput.js +10 -63
  334. package/esm/core/LabeledSelect/LabeledSelect.js +18 -67
  335. package/esm/core/LabeledTextarea/LabeledTextarea.js +2 -8
  336. package/esm/core/List/ListItem.js +28 -46
  337. package/esm/core/Menu/Menu.js +48 -64
  338. package/esm/core/Menu/MenuDivider.js +1 -1
  339. package/esm/core/Menu/MenuExtraContent.js +1 -1
  340. package/esm/core/Menu/MenuItem.js +84 -164
  341. package/esm/core/Menu/MenuItemSkeleton.js +12 -43
  342. package/esm/core/Modal/Modal.js +6 -33
  343. package/esm/core/NonIdealState/ErrorPage.js +123 -173
  344. package/esm/core/NonIdealState/NonIdealState.js +6 -65
  345. package/esm/core/NotificationMarker/NotificationMarker.js +2 -20
  346. package/esm/core/Overlay/Overlay.d.ts +20 -24
  347. package/esm/core/Overlay/Overlay.js +45 -55
  348. package/esm/core/Popover/Popover.js +80 -172
  349. package/esm/core/ProgressIndicators/ProgressLinear.js +5 -40
  350. package/esm/core/ProgressIndicators/ProgressRadial.js +14 -40
  351. package/esm/core/Radio/Radio.js +6 -45
  352. package/esm/core/RadioTiles/RadioTile.js +8 -62
  353. package/esm/core/RadioTiles/RadioTileGroup.js +3 -10
  354. package/esm/core/SearchBox/SearchBox.js +97 -214
  355. package/esm/core/Select/Select.js +130 -271
  356. package/esm/core/Select/SelectTag.js +3 -15
  357. package/esm/core/Select/SelectTagContainer.js +7 -20
  358. package/esm/core/SideNavigation/SideNavigation.js +21 -118
  359. package/esm/core/SideNavigation/SidenavButton.js +2 -24
  360. package/esm/core/SideNavigation/SidenavSubmenu.js +3 -14
  361. package/esm/core/SideNavigation/SidenavSubmenuHeader.js +4 -20
  362. package/esm/core/SkipToContentLink/SkipToContentLink.js +2 -11
  363. package/esm/core/Slider/Slider.js +187 -340
  364. package/esm/core/Slider/Thumb.js +50 -97
  365. package/esm/core/Slider/Track.js +49 -74
  366. package/esm/core/StatusMessage/StatusMessage.js +5 -23
  367. package/esm/core/Stepper/Stepper.js +14 -70
  368. package/esm/core/Stepper/StepperStep.js +29 -92
  369. package/esm/core/Stepper/WorkflowDiagram.js +8 -21
  370. package/esm/core/Stepper/WorkflowDiagramStep.js +4 -22
  371. package/esm/core/Surface/Surface.js +48 -84
  372. package/esm/core/Table/SubRowExpander.js +9 -31
  373. package/esm/core/Table/Table.js +408 -763
  374. package/esm/core/Table/TableCell.js +53 -87
  375. package/esm/core/Table/TablePaginator.js +125 -306
  376. package/esm/core/Table/TableRowMemoized.js +58 -129
  377. package/esm/core/Table/actionHandlers/expandHandler.js +10 -10
  378. package/esm/core/Table/actionHandlers/filterHandler.js +15 -23
  379. package/esm/core/Table/actionHandlers/index.js +1 -5
  380. package/esm/core/Table/actionHandlers/resizeHandler.js +11 -11
  381. package/esm/core/Table/actionHandlers/selectHandler.js +95 -122
  382. package/esm/core/Table/cells/DefaultCell.js +7 -42
  383. package/esm/core/Table/cells/EditableCell.js +41 -70
  384. package/esm/core/Table/columns/actionColumn.js +55 -85
  385. package/esm/core/Table/columns/expanderColumn.js +25 -39
  386. package/esm/core/Table/columns/selectionColumn.js +23 -51
  387. package/esm/core/Table/filters/BaseFilter.js +7 -15
  388. package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +42 -107
  389. package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +52 -110
  390. package/esm/core/Table/filters/FilterButtonBar.js +9 -28
  391. package/esm/core/Table/filters/FilterToggle.js +18 -51
  392. package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +28 -50
  393. package/esm/core/Table/filters/TextFilter/TextFilter.js +20 -32
  394. package/esm/core/Table/filters/customFilterFunctions.js +12 -14
  395. package/esm/core/Table/filters/defaultFilterFunctions.js +79 -84
  396. package/esm/core/Table/filters/tableFilters.js +25 -34
  397. package/esm/core/Table/hooks/useColumnDragAndDrop.js +81 -88
  398. package/esm/core/Table/hooks/useExpanderCell.js +20 -26
  399. package/esm/core/Table/hooks/useResizeColumns.js +287 -353
  400. package/esm/core/Table/hooks/useScrollToRow.js +34 -42
  401. package/esm/core/Table/hooks/useSelectionCell.js +6 -10
  402. package/esm/core/Table/hooks/useStickyColumns.js +59 -61
  403. package/esm/core/Table/hooks/useSubRowFiltering.js +83 -90
  404. package/esm/core/Table/hooks/useSubRowSelection.js +27 -28
  405. package/esm/core/Table/index.js +1 -5
  406. package/esm/core/Table/utils.js +38 -40
  407. package/esm/core/Tabs/Tabs.d.ts +3 -5
  408. package/esm/core/Tabs/Tabs.js +229 -406
  409. package/esm/core/Tag/Tag.js +8 -35
  410. package/esm/core/Tag/TagContainer.js +5 -17
  411. package/esm/core/Textarea/Textarea.js +1 -6
  412. package/esm/core/ThemeProvider/ThemeProvider.js +44 -101
  413. package/esm/core/Tile/Tile.js +218 -386
  414. package/esm/core/TimePicker/TimePicker.js +228 -448
  415. package/esm/core/Toast/Toast.js +99 -193
  416. package/esm/core/Toast/Toaster.js +69 -83
  417. package/esm/core/ToggleSwitch/ToggleSwitch.js +17 -60
  418. package/esm/core/Tooltip/Tooltip.js +86 -151
  419. package/esm/core/TransferList/TransferList.js +93 -157
  420. package/esm/core/Tree/Tree.js +122 -196
  421. package/esm/core/Tree/TreeContext.js +5 -5
  422. package/esm/core/Tree/TreeNode.js +96 -195
  423. package/esm/core/Tree/TreeNodeExpander.js +5 -16
  424. package/esm/core/Typography/Blockquote.js +4 -12
  425. package/esm/core/Typography/Kbd.js +15 -24
  426. package/esm/core/Typography/Text.js +7 -20
  427. package/esm/core/VisuallyHidden/VisuallyHidden.js +2 -8
  428. package/esm/core/utils/color/ColorValue.js +449 -524
  429. package/esm/core/utils/components/AutoclearingHiddenLiveRegion.js +7 -11
  430. package/esm/core/utils/components/ButtonBase.js +13 -31
  431. package/esm/core/utils/components/FocusTrap.js +32 -41
  432. package/esm/core/utils/components/InputContainer.js +11 -50
  433. package/esm/core/utils/components/InputFlexContainer.js +2 -15
  434. package/esm/core/utils/components/MiddleTextTruncation.js +17 -27
  435. package/esm/core/utils/components/Portal.js +12 -12
  436. package/esm/core/utils/components/Resizer.js +191 -249
  437. package/esm/core/utils/components/VirtualScroll.js +218 -297
  438. package/esm/core/utils/components/WithCSSTransition.js +26 -43
  439. package/esm/core/utils/functions/colors.js +19 -19
  440. package/esm/core/utils/functions/date.js +8 -8
  441. package/esm/core/utils/functions/dev.js +12 -11
  442. package/esm/core/utils/functions/dom.js +14 -17
  443. package/esm/core/utils/functions/focusable.js +15 -24
  444. package/esm/core/utils/functions/import.js +2 -4
  445. package/esm/core/utils/functions/numbers.js +7 -7
  446. package/esm/core/utils/functions/polymorphic.js +23 -32
  447. package/esm/core/utils/functions/react.js +19 -21
  448. package/esm/core/utils/functions/supports.js +1 -2
  449. package/esm/core/utils/hooks/useContainerWidth.js +13 -16
  450. package/esm/core/utils/hooks/useControlledState.js +8 -17
  451. package/esm/core/utils/hooks/useDragAndDrop.js +80 -99
  452. package/esm/core/utils/hooks/useEventListener.js +18 -18
  453. package/esm/core/utils/hooks/useGlobals.js +21 -27
  454. package/esm/core/utils/hooks/useId.js +3 -3
  455. package/esm/core/utils/hooks/useIntersection.js +19 -25
  456. package/esm/core/utils/hooks/useIsClient.js +5 -5
  457. package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +1 -2
  458. package/esm/core/utils/hooks/useLatestRef.js +5 -5
  459. package/esm/core/utils/hooks/useMediaQuery.js +25 -23
  460. package/esm/core/utils/hooks/useMergedRefs.js +12 -11
  461. package/esm/core/utils/hooks/useOverflow.js +51 -63
  462. package/esm/core/utils/hooks/useResizeObserver.js +12 -17
  463. package/esm/core/utils/hooks/useSafeContext.js +5 -5
  464. package/esm/core/utils/icons/StatusIconMap.js +4 -8
  465. package/esm/core/utils/icons/SvgCalendar.js +2 -7
  466. package/esm/core/utils/icons/SvgCaretDownSmall.js +2 -7
  467. package/esm/core/utils/icons/SvgCaretRightSmall.js +2 -7
  468. package/esm/core/utils/icons/SvgCaretUpSmall.js +2 -7
  469. package/esm/core/utils/icons/SvgCheckmark.js +2 -5
  470. package/esm/core/utils/icons/SvgCheckmarkSmall.js +2 -7
  471. package/esm/core/utils/icons/SvgChevronLeft.js +2 -7
  472. package/esm/core/utils/icons/SvgChevronLeftDouble.js +2 -7
  473. package/esm/core/utils/icons/SvgChevronRight.js +2 -7
  474. package/esm/core/utils/icons/SvgChevronRightDouble.js +2 -7
  475. package/esm/core/utils/icons/SvgClose.js +2 -7
  476. package/esm/core/utils/icons/SvgCloseSmall.js +2 -7
  477. package/esm/core/utils/icons/SvgColumnManager.js +2 -7
  478. package/esm/core/utils/icons/SvgDocument.js +2 -5
  479. package/esm/core/utils/icons/SvgFilter.js +2 -5
  480. package/esm/core/utils/icons/SvgFilterHollow.js +2 -7
  481. package/esm/core/utils/icons/SvgImportantSmall.js +2 -7
  482. package/esm/core/utils/icons/SvgInfoCircular.js +2 -7
  483. package/esm/core/utils/icons/SvgMore.js +2 -7
  484. package/esm/core/utils/icons/SvgMoreVertical.js +2 -7
  485. package/esm/core/utils/icons/SvgNew.js +2 -7
  486. package/esm/core/utils/icons/SvgSearch.js +2 -7
  487. package/esm/core/utils/icons/SvgSmileyHappy.js +2 -7
  488. package/esm/core/utils/icons/SvgSortDown.js +2 -7
  489. package/esm/core/utils/icons/SvgSortUp.js +2 -7
  490. package/esm/core/utils/icons/SvgStatusError.js +2 -7
  491. package/esm/core/utils/icons/SvgStatusSuccess.js +2 -7
  492. package/esm/core/utils/icons/SvgStatusWarning.js +2 -7
  493. package/esm/core/utils/icons/SvgSwap.js +2 -7
  494. package/esm/core/utils/icons/SvgUpload.js +2 -7
  495. package/esm/index.js +3 -21
  496. package/esm/styles.js +414 -425
  497. package/package.json +2 -2
  498. package/styles.css +6 -6
@@ -13,22 +13,22 @@ import * as React from 'react';
13
13
  * );
14
14
  */
15
15
  export const useEventListener = (eventName, handler, element) => {
16
- // Based on published hook https://usehooks.com/useEventListener/.
17
- const savedHandler = React.useRef();
18
- // Update reference if handler changes. This allows our effect below to
19
- // always use latest handler without us needing to pass it in effect deps array
20
- // and potentially cause effect to re-run every render.
21
- React.useEffect(() => {
22
- savedHandler.current = handler;
23
- }, [handler]);
24
- React.useEffect(() => {
25
- if (!element) {
26
- return;
27
- }
28
- const eventListener = (event) => savedHandler.current?.(event);
29
- element.addEventListener(eventName, eventListener);
30
- return () => {
31
- element.removeEventListener(eventName, eventListener);
32
- };
33
- }, [eventName, element]);
16
+ // Based on published hook https://usehooks.com/useEventListener/.
17
+ const savedHandler = React.useRef();
18
+ // Update reference if handler changes. This allows our effect below to
19
+ // always use latest handler without us needing to pass it in effect deps array
20
+ // and potentially cause effect to re-run every render.
21
+ React.useEffect(() => {
22
+ savedHandler.current = handler;
23
+ }, [handler]);
24
+ React.useEffect(() => {
25
+ if (!element) {
26
+ return;
27
+ }
28
+ const eventListener = (event) => savedHandler.current?.(event);
29
+ element.addEventListener(eventName, eventListener);
30
+ return () => {
31
+ element.removeEventListener(eventName, eventListener);
32
+ };
33
+ }, [eventName, element]);
34
34
  };
@@ -6,8 +6,8 @@ import * as React from 'react';
6
6
  import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
7
7
  import { isDev } from '../functions/dev.js';
8
8
  const didLogWarning = {
9
- fontSize: false,
10
- themeProvider: false,
9
+ fontSize: false,
10
+ themeProvider: false,
11
11
  };
12
12
  /**
13
13
  * Hook used in every component for any shared setup and side effects.
@@ -16,37 +16,31 @@ const didLogWarning = {
16
16
  * @private
17
17
  */
18
18
  export const useGlobals = () => {
19
- const themeContext = React.useContext(ThemeContext);
20
- useThemeProviderWarning(themeContext);
21
- useRootFontSizeWarning();
22
- return themeContext;
19
+ const themeContext = React.useContext(ThemeContext);
20
+ useThemeProviderWarning(themeContext);
21
+ useRootFontSizeWarning();
22
+ return themeContext;
23
23
  };
24
24
  // ----------------------------------------------------------------------------
25
25
  /** Shows console error if ThemeProvider is not used */
26
26
  export const useThemeProviderWarning = (themeContext) => {
27
- React.useEffect(() => {
28
- if (isDev && !didLogWarning.themeProvider && !themeContext) {
29
- console.error(
30
- 'iTwinUI components must be used within a tree wrapped in a ThemeProvider.',
31
- );
32
- didLogWarning.themeProvider = true;
33
- }
34
- }, [themeContext]);
27
+ React.useEffect(() => {
28
+ if (isDev && !didLogWarning.themeProvider && !themeContext) {
29
+ console.error('iTwinUI components must be used within a tree wrapped in a ThemeProvider.');
30
+ didLogWarning.themeProvider = true;
31
+ }
32
+ }, [themeContext]);
35
33
  };
36
34
  // ----------------------------------------------------------------------------
37
35
  /** Shows console error if the page changes the root font size */
38
36
  const useRootFontSizeWarning = () => {
39
- React.useEffect(() => {
40
- if (isDev && !didLogWarning.fontSize) {
41
- const rootFontSize = parseInt(
42
- getComputedStyle(document.documentElement).fontSize,
43
- );
44
- if (rootFontSize < 16) {
45
- console.error(
46
- 'Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size',
47
- );
48
- }
49
- didLogWarning.fontSize = true;
50
- }
51
- }, []);
37
+ React.useEffect(() => {
38
+ if (isDev && !didLogWarning.fontSize) {
39
+ const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
40
+ if (rootFontSize < 16) {
41
+ console.error('Root font size must not be overridden. \nSee https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#relative-font-size');
42
+ }
43
+ didLogWarning.fontSize = true;
44
+ }
45
+ }, []);
52
46
  };
@@ -9,10 +9,10 @@ import { getRandomValue } from '../functions/numbers.js';
9
9
  * a random value as fallback for older React versions which don't include `useId`.
10
10
  */
11
11
  export const useId = () => {
12
- const uniqueValue = useUniqueValue();
13
- return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
12
+ const uniqueValue = useUniqueValue();
13
+ return React.useMemo(() => `iui-${uniqueValue}`, [uniqueValue]);
14
14
  };
15
15
  // This is needed to avoid bundlers trying to import non-existing export.
16
16
  // Read more: https://github.com/webpack/webpack/issues/14814
17
17
  const _React = React;
18
- const useUniqueValue = _React.useId ?? (() => getRandomValue(10));
18
+ const useUniqueValue = _React.useId ?? (() => React.useMemo(() => getRandomValue(10), []));
@@ -17,30 +17,24 @@ import { getWindow } from '../functions/dom.js';
17
17
  * return (<div ref={ref}>One of many elements</div>);
18
18
  */
19
19
  export const useIntersection = (onIntersect, options = {}, once = true) => {
20
- const { root, rootMargin, threshold } = options;
21
- const cleanupRef = React.useRef(() => {});
22
- const setRef = React.useCallback(
23
- (node) => {
24
- cleanupRef.current?.();
25
- cleanupRef.current = () => {}; // ensure it doesn't try to clean up again
26
- if (!node || !getWindow()?.IntersectionObserver) {
27
- return;
28
- }
29
- const observer = new IntersectionObserver(
30
- ([entry], obs) => {
31
- if (entry.isIntersecting) {
32
- if (once) {
33
- obs.disconnect();
20
+ const { root, rootMargin, threshold } = options;
21
+ const cleanupRef = React.useRef(() => { });
22
+ const setRef = React.useCallback((node) => {
23
+ cleanupRef.current?.();
24
+ cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
25
+ if (!node || !getWindow()?.IntersectionObserver) {
26
+ return;
27
+ }
28
+ const observer = new IntersectionObserver(([entry], obs) => {
29
+ if (entry.isIntersecting) {
30
+ if (once) {
31
+ obs.disconnect();
32
+ }
33
+ onIntersect();
34
34
  }
35
- onIntersect();
36
- }
37
- },
38
- { root, rootMargin, threshold },
39
- );
40
- observer.observe(node);
41
- cleanupRef.current = () => observer.disconnect();
42
- },
43
- [onIntersect, once, root, rootMargin, threshold],
44
- );
45
- return setRef;
35
+ }, { root, rootMargin, threshold });
36
+ observer.observe(node);
37
+ cleanupRef.current = () => observer.disconnect();
38
+ }, [onIntersect, once, root, rootMargin, threshold]);
39
+ return setRef;
46
40
  };
@@ -4,9 +4,9 @@
4
4
  *--------------------------------------------------------------------------------------------*/
5
5
  import * as React from 'react';
6
6
  export const useIsClient = () => {
7
- const [isClient, setIsClient] = React.useState(false);
8
- React.useEffect(() => {
9
- setIsClient(true);
10
- }, []);
11
- return isClient;
7
+ const [isClient, setIsClient] = React.useState(false);
8
+ React.useEffect(() => {
9
+ setIsClient(true);
10
+ }, []);
11
+ return isClient;
12
12
  };
@@ -8,5 +8,4 @@ import * as React from 'react';
8
8
  *
9
9
  * @see https://fb.me/react-uselayouteffect-ssr
10
10
  */
11
- export const useIsomorphicLayoutEffect =
12
- typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
11
+ export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -11,9 +11,9 @@ import * as React from 'react';
11
11
  * const valueRef = useLatestRef(value);
12
12
  */
13
13
  export const useLatestRef = (value) => {
14
- const valueRef = React.useRef(value);
15
- React.useEffect(() => {
16
- valueRef.current = value;
17
- }, [value]);
18
- return valueRef;
14
+ const valueRef = React.useRef(value);
15
+ React.useEffect(() => {
16
+ valueRef.current = value;
17
+ }, [value]);
18
+ return valueRef;
19
19
  };
@@ -6,28 +6,30 @@ import * as React from 'react';
6
6
  import { getWindow } from '../functions/index.js';
7
7
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
8
8
  export const useMediaQuery = (queryString) => {
9
- const [matches, setMatches] = React.useState();
10
- useIsomorphicLayoutEffect(() => {
11
- const mediaQueryList = getWindow()?.matchMedia?.(queryString);
12
- const handleChange = ({ matches }) => setMatches(matches);
13
- if (mediaQueryList != undefined) {
14
- setMatches(mediaQueryList.matches);
15
- try {
16
- mediaQueryList.addEventListener('change', handleChange);
17
- } catch {
18
- // Safari 13 fallback
19
- mediaQueryList.addListener?.(handleChange);
20
- }
21
- }
22
- return () => {
23
- try {
24
- mediaQueryList?.removeEventListener('change', handleChange);
25
- } catch {
26
- // Safari 13 fallback
27
- mediaQueryList?.removeListener?.(handleChange);
28
- }
29
- };
30
- }, [queryString]);
31
- return !!matches;
9
+ const [matches, setMatches] = React.useState();
10
+ useIsomorphicLayoutEffect(() => {
11
+ const mediaQueryList = getWindow()?.matchMedia?.(queryString);
12
+ const handleChange = ({ matches }) => setMatches(matches);
13
+ if (mediaQueryList != undefined) {
14
+ setMatches(mediaQueryList.matches);
15
+ try {
16
+ mediaQueryList.addEventListener('change', handleChange);
17
+ }
18
+ catch {
19
+ // Safari 13 fallback
20
+ mediaQueryList.addListener?.(handleChange);
21
+ }
22
+ }
23
+ return () => {
24
+ try {
25
+ mediaQueryList?.removeEventListener('change', handleChange);
26
+ }
27
+ catch {
28
+ // Safari 13 fallback
29
+ mediaQueryList?.removeListener?.(handleChange);
30
+ }
31
+ };
32
+ }, [queryString]);
33
+ return !!matches;
32
34
  };
33
35
  export default useMediaQuery;
@@ -7,20 +7,21 @@ import * as React from 'react';
7
7
  * Function that merges the provided refs into one.
8
8
  */
9
9
  export const mergeRefs = (...refs) => {
10
- return (instance) => {
11
- refs.forEach((ref) => {
12
- if (typeof ref === 'function') {
13
- ref(instance);
14
- } else if (ref) {
15
- ref.current = instance;
16
- }
17
- });
18
- };
10
+ return (instance) => {
11
+ refs.forEach((ref) => {
12
+ if (typeof ref === 'function') {
13
+ ref(instance);
14
+ }
15
+ else if (ref) {
16
+ ref.current = instance;
17
+ }
18
+ });
19
+ };
19
20
  };
20
21
  /**
21
22
  * Returns a ref callback that merges the provided refs using `mergeRefs`.
22
23
  */
23
24
  export const useMergedRefs = (...refs) => {
24
- // eslint-disable-next-line react-hooks/exhaustive-deps
25
- return React.useCallback(mergeRefs(...refs), [...refs]);
25
+ // eslint-disable-next-line react-hooks/exhaustive-deps
26
+ return React.useCallback(mergeRefs(...refs), [...refs]);
26
27
  };
@@ -29,68 +29,56 @@ const STARTING_MAX_ITEMS_COUNT = 20;
29
29
  * </div>
30
30
  * );
31
31
  */
32
- export const useOverflow = (
33
- items,
34
- disabled = false,
35
- orientation = 'horizontal',
36
- ) => {
37
- const containerRef = React.useRef(null);
38
- const [visibleCount, setVisibleCount] = React.useState(() =>
39
- disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT),
40
- );
41
- const needsFullRerender = React.useRef(true);
42
- const [containerSize, setContainerSize] = React.useState(0);
43
- const previousContainerSize = React.useRef(0);
44
- const updateContainerSize = React.useCallback(
45
- ({ width, height }) =>
46
- setContainerSize(orientation === 'horizontal' ? width : height),
47
- [orientation],
48
- );
49
- const [resizeRef, observer] = useResizeObserver(updateContainerSize);
50
- const resizeObserverRef = React.useRef(observer);
51
- useIsomorphicLayoutEffect(() => {
52
- if (disabled) {
53
- setVisibleCount(items.length);
54
- } else {
55
- setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
56
- needsFullRerender.current = true;
57
- }
58
- }, [containerSize, disabled, items]);
59
- const mergedRefs = useMergedRefs(containerRef, resizeRef);
60
- useIsomorphicLayoutEffect(() => {
61
- if (!containerRef.current || disabled) {
62
- resizeObserverRef.current?.disconnect();
63
- return;
64
- }
65
- const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
66
- const availableSize = containerRef.current[`offset${dimension}`];
67
- const requiredSize = containerRef.current[`scroll${dimension}`];
68
- if (availableSize < requiredSize) {
69
- const avgItemSize = requiredSize / visibleCount;
70
- const visibleItems = Math.floor(availableSize / avgItemSize);
71
- /* When first item is larger than the container - visibleItems count is 0,
32
+ export const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
33
+ const containerRef = React.useRef(null);
34
+ const [visibleCount, setVisibleCount] = React.useState(() => disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
35
+ const needsFullRerender = React.useRef(true);
36
+ const [containerSize, setContainerSize] = React.useState(0);
37
+ const previousContainerSize = React.useRef(0);
38
+ const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
39
+ const [resizeRef, observer] = useResizeObserver(updateContainerSize);
40
+ const resizeObserverRef = React.useRef(observer);
41
+ useIsomorphicLayoutEffect(() => {
42
+ if (disabled) {
43
+ setVisibleCount(items.length);
44
+ }
45
+ else {
46
+ setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
47
+ needsFullRerender.current = true;
48
+ }
49
+ }, [containerSize, disabled, items]);
50
+ const mergedRefs = useMergedRefs(containerRef, resizeRef);
51
+ useIsomorphicLayoutEffect(() => {
52
+ if (!containerRef.current || disabled) {
53
+ resizeObserverRef.current?.disconnect();
54
+ return;
55
+ }
56
+ const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
57
+ const availableSize = containerRef.current[`offset${dimension}`];
58
+ const requiredSize = containerRef.current[`scroll${dimension}`];
59
+ if (availableSize < requiredSize) {
60
+ const avgItemSize = requiredSize / visibleCount;
61
+ const visibleItems = Math.floor(availableSize / avgItemSize);
62
+ /* When first item is larger than the container - visibleItems count is 0,
72
63
  We can assume that at least some part of the first item is visible and return 1. */
73
- setVisibleCount(visibleItems > 0 ? visibleItems : 1);
74
- } else if (needsFullRerender.current) {
75
- const childrenSize = Array.from(containerRef.current.children).reduce(
76
- (sum, child) => sum + child[`offset${dimension}`],
77
- 0,
78
- );
79
- // Previous `useEffect` might have updated visible count, but we still have old one
80
- // If it is 0, lets try to update it with items length.
81
- const currentVisibleCount =
82
- visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
83
- const avgItemSize = childrenSize / currentVisibleCount;
84
- const visibleItems = Math.floor(availableSize / avgItemSize);
85
- if (!isNaN(visibleItems)) {
86
- // Doubling the visible items to overflow the container. Just to be safe.
87
- setVisibleCount(Math.min(items.length, visibleItems * 2));
88
- }
89
- }
90
- needsFullRerender.current = false;
91
- }, [containerSize, visibleCount, disabled, items.length, orientation]);
92
- useIsomorphicLayoutEffect(() => {
93
- previousContainerSize.current = containerSize;
94
- }, [containerSize]);
95
- return [mergedRefs, visibleCount];
64
+ setVisibleCount(visibleItems > 0 ? visibleItems : 1);
65
+ }
66
+ else if (needsFullRerender.current) {
67
+ const childrenSize = Array.from(containerRef.current.children).reduce((sum, child) => sum + child[`offset${dimension}`], 0);
68
+ // Previous `useEffect` might have updated visible count, but we still have old one
69
+ // If it is 0, lets try to update it with items length.
70
+ const currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
71
+ const avgItemSize = childrenSize / currentVisibleCount;
72
+ const visibleItems = Math.floor(availableSize / avgItemSize);
73
+ if (!isNaN(visibleItems)) {
74
+ // Doubling the visible items to overflow the container. Just to be safe.
75
+ setVisibleCount(Math.min(items.length, visibleItems * 2));
76
+ }
77
+ }
78
+ needsFullRerender.current = false;
79
+ }, [containerSize, visibleCount, disabled, items.length, orientation]);
80
+ useIsomorphicLayoutEffect(() => {
81
+ previousContainerSize.current = containerSize;
82
+ }, [containerSize]);
83
+ return [mergedRefs, visibleCount];
96
84
  };
@@ -17,21 +17,16 @@ import { getWindow } from '../functions/dom.js';
17
17
  * return <div ref={ref}>...</div>;
18
18
  */
19
19
  export const useResizeObserver = (onResize) => {
20
- const resizeObserver = React.useRef();
21
- const elementRef = React.useCallback(
22
- (element) => {
23
- if (!getWindow()?.ResizeObserver) {
24
- return;
25
- }
26
- resizeObserver.current?.disconnect?.();
27
- if (element) {
28
- resizeObserver.current = new ResizeObserver(([{ contentRect }]) =>
29
- onResize(contentRect),
30
- );
31
- resizeObserver.current?.observe?.(element);
32
- }
33
- },
34
- [onResize],
35
- );
36
- return [elementRef, resizeObserver.current];
20
+ const resizeObserver = React.useRef();
21
+ const elementRef = React.useCallback((element) => {
22
+ if (!getWindow()?.ResizeObserver) {
23
+ return;
24
+ }
25
+ resizeObserver.current?.disconnect?.();
26
+ if (element) {
27
+ resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
28
+ resizeObserver.current?.observe?.(element);
29
+ }
30
+ }, [onResize]);
31
+ return [elementRef, resizeObserver.current];
37
32
  };
@@ -8,9 +8,9 @@ import * as React from 'react';
8
8
  * @param context Context to use. Must have a `displayName` for useful errors.
9
9
  */
10
10
  export const useSafeContext = (context) => {
11
- const value = React.useContext(context);
12
- if (!value) {
13
- throw new Error(`${context.displayName} is undefined`);
14
- }
15
- return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
11
+ const value = React.useContext(context);
12
+ if (!value) {
13
+ throw new Error(`${context.displayName} is undefined`);
14
+ }
15
+ return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
16
16
  };
@@ -8,12 +8,8 @@ import { SvgStatusError } from './SvgStatusError.js';
8
8
  import { SvgStatusSuccess } from './SvgStatusSuccess.js';
9
9
  import { SvgStatusWarning } from './SvgStatusWarning.js';
10
10
  export const StatusIconMap = {
11
- negative: (args) =>
12
- React.createElement(SvgStatusError, { 'aria-hidden': true, ...args }),
13
- positive: (args) =>
14
- React.createElement(SvgStatusSuccess, { 'aria-hidden': true, ...args }),
15
- warning: (args) =>
16
- React.createElement(SvgStatusWarning, { 'aria-hidden': true, ...args }),
17
- informational: (args) =>
18
- React.createElement(SvgInfoCircular, { 'aria-hidden': true, ...args }),
11
+ negative: (args) => React.createElement(SvgStatusError, { "aria-hidden": true, ...args }),
12
+ positive: (args) => React.createElement(SvgStatusSuccess, { "aria-hidden": true, ...args }),
13
+ warning: (args) => React.createElement(SvgStatusWarning, { "aria-hidden": true, ...args }),
14
+ informational: (args) => (React.createElement(SvgInfoCircular, { "aria-hidden": true, ...args })),
19
15
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgCalendar = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z' })));
15
10
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgCaretDownSmall = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'M4.807 6h6.395a.28.28 0 0 1 .24.443L8.27 9.9a.34.34 0 0 1-.481 0L4.566 6.443A.27.27 0 0 1 4.806 6z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'M4.807 6h6.395a.28.28 0 0 1 .24.443L8.27 9.9a.34.34 0 0 1-.481 0L4.566 6.443A.27.27 0 0 1 4.806 6z' })));
15
10
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgCaretRightSmall = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'M6.003 4.807v6.4a.28.28 0 0 0 .443.24L9.9 8.27a.34.34 0 0 0 0-.48L6.446 4.566a.269.269 0 0 0-.443.24z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'M6.003 4.807v6.4a.28.28 0 0 0 .443.24L9.9 8.27a.34.34 0 0 0 0-.48L6.446 4.566a.269.269 0 0 0-.443.24z' })));
15
10
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgCaretUpSmall = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'M4.807 9.997h6.395a.28.28 0 0 0 .24-.443L8.27 6.097a.34.34 0 0 0-.48 0h-.001L4.566 9.554a.27.27 0 0 0 .24.443z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'M4.807 9.997h6.395a.28.28 0 0 0 .24-.443L8.27 6.097a.34.34 0 0 0-.48 0h-.001L4.566 9.554a.27.27 0 0 0 .24.443z' })));
15
10
  };
@@ -5,9 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgCheckmark = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', { d: 'M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' }),
12
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' })));
13
10
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgCheckmarkSmall = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'm6 13.4-4.7-4.7 1.4-1.4 3.3 3.3 7.3-7.3 1.4 1.4z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'm6 13.4-4.7-4.7 1.4-1.4 3.3 3.3 7.3-7.3 1.4 1.4z' })));
15
10
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgChevronLeft = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'm11.3 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'm11.3 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z' })));
15
10
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgChevronLeftDouble = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'm14.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8zm-6.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'm14.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8zm-6.6 0 1.4 1.4-6.6 6.6 6.6 6.6-1.4 1.4-8-8z' })));
15
10
  };
@@ -5,11 +5,6 @@
5
5
  import * as React from 'react';
6
6
  import { Svg } from './Svg.js';
7
7
  export const SvgChevronRight = (props) => {
8
- return React.createElement(
9
- Svg,
10
- { ...props },
11
- React.createElement('path', {
12
- d: 'm4.7 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8z',
13
- }),
14
- );
8
+ return (React.createElement(Svg, { ...props },
9
+ React.createElement("path", { d: 'm4.7 0-1.4 1.4 6.6 6.6-6.6 6.6 1.4 1.4 8-8z' })));
15
10
  };