@itwin/itwinui-react 3.0.4 → 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 (496) hide show
  1. package/CHANGELOG.md +7 -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 -276
  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.js +232 -417
  161. package/cjs/core/Tag/Tag.js +15 -42
  162. package/cjs/core/Tag/TagContainer.js +11 -23
  163. package/cjs/core/Textarea/Textarea.js +6 -11
  164. package/cjs/core/ThemeProvider/ThemeContext.js +4 -4
  165. package/cjs/core/ThemeProvider/ThemeProvider.js +52 -105
  166. package/cjs/core/Tile/Tile.js +230 -410
  167. package/cjs/core/TimePicker/TimePicker.js +234 -458
  168. package/cjs/core/Toast/Toast.js +107 -204
  169. package/cjs/core/Toast/Toaster.js +77 -102
  170. package/cjs/core/ToggleSwitch/ToggleSwitch.js +23 -66
  171. package/cjs/core/Tooltip/Tooltip.js +91 -137
  172. package/cjs/core/TransferList/TransferList.js +103 -177
  173. package/cjs/core/Tree/Tree.js +129 -204
  174. package/cjs/core/Tree/TreeContext.js +9 -9
  175. package/cjs/core/Tree/TreeNode.js +104 -207
  176. package/cjs/core/Tree/TreeNodeExpander.js +12 -26
  177. package/cjs/core/Typography/Anchor.js +3 -3
  178. package/cjs/core/Typography/Blockquote.js +10 -18
  179. package/cjs/core/Typography/Code.js +3 -3
  180. package/cjs/core/Typography/Kbd.js +21 -30
  181. package/cjs/core/Typography/Text.js +13 -26
  182. package/cjs/core/VisuallyHidden/VisuallyHidden.js +8 -14
  183. package/cjs/core/utils/color/ColorValue.js +453 -535
  184. package/cjs/core/utils/color/index.js +4 -4
  185. package/cjs/core/utils/components/AutoclearingHiddenLiveRegion.js +13 -20
  186. package/cjs/core/utils/components/Box.js +3 -3
  187. package/cjs/core/utils/components/ButtonBase.js +20 -38
  188. package/cjs/core/utils/components/FocusTrap.js +38 -47
  189. package/cjs/core/utils/components/InputContainer.js +19 -58
  190. package/cjs/core/utils/components/InputFlexContainer.js +8 -24
  191. package/cjs/core/utils/components/MiddleTextTruncation.js +22 -32
  192. package/cjs/core/utils/components/Portal.js +20 -22
  193. package/cjs/core/utils/components/Resizer.js +196 -253
  194. package/cjs/core/utils/components/VirtualScroll.js +223 -304
  195. package/cjs/core/utils/components/WithCSSTransition.js +32 -49
  196. package/cjs/core/utils/components/index.js +14 -14
  197. package/cjs/core/utils/functions/colors.js +22 -25
  198. package/cjs/core/utils/functions/date.js +10 -10
  199. package/cjs/core/utils/functions/dev.js +14 -13
  200. package/cjs/core/utils/functions/dom.js +17 -24
  201. package/cjs/core/utils/functions/focusable.js +17 -26
  202. package/cjs/core/utils/functions/import.js +23 -46
  203. package/cjs/core/utils/functions/index.js +13 -13
  204. package/cjs/core/utils/functions/numbers.js +9 -9
  205. package/cjs/core/utils/functions/polymorphic.js +30 -43
  206. package/cjs/core/utils/functions/react.js +24 -26
  207. package/cjs/core/utils/functions/supports.js +4 -5
  208. package/cjs/core/utils/hooks/index.js +17 -17
  209. package/cjs/core/utils/hooks/useContainerWidth.js +19 -26
  210. package/cjs/core/utils/hooks/useControlledState.js +12 -21
  211. package/cjs/core/utils/hooks/useDragAndDrop.js +87 -110
  212. package/cjs/core/utils/hooks/useEventListener.js +22 -22
  213. package/cjs/core/utils/hooks/useGlobals.js +27 -33
  214. package/cjs/core/utils/hooks/useId.js +8 -10
  215. package/cjs/core/utils/hooks/useIntersection.js +24 -30
  216. package/cjs/core/utils/hooks/useIsClient.js +9 -9
  217. package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +5 -6
  218. package/cjs/core/utils/hooks/useLatestRef.js +9 -9
  219. package/cjs/core/utils/hooks/useMediaQuery.js +31 -31
  220. package/cjs/core/utils/hooks/useMergedRefs.js +16 -15
  221. package/cjs/core/utils/hooks/useOverflow.js +57 -70
  222. package/cjs/core/utils/hooks/useResizeObserver.js +17 -22
  223. package/cjs/core/utils/hooks/useSafeContext.js +9 -9
  224. package/cjs/core/utils/icons/StatusIconMap.js +12 -28
  225. package/cjs/core/utils/icons/Svg.js +3 -3
  226. package/cjs/core/utils/icons/SvgCalendar.js +7 -12
  227. package/cjs/core/utils/icons/SvgCaretDownSmall.js +7 -12
  228. package/cjs/core/utils/icons/SvgCaretRightSmall.js +7 -12
  229. package/cjs/core/utils/icons/SvgCaretUpSmall.js +7 -12
  230. package/cjs/core/utils/icons/SvgCheckmark.js +7 -10
  231. package/cjs/core/utils/icons/SvgCheckmarkSmall.js +7 -12
  232. package/cjs/core/utils/icons/SvgChevronLeft.js +7 -12
  233. package/cjs/core/utils/icons/SvgChevronLeftDouble.js +7 -12
  234. package/cjs/core/utils/icons/SvgChevronRight.js +7 -12
  235. package/cjs/core/utils/icons/SvgChevronRightDouble.js +7 -12
  236. package/cjs/core/utils/icons/SvgClose.js +7 -12
  237. package/cjs/core/utils/icons/SvgCloseSmall.js +7 -12
  238. package/cjs/core/utils/icons/SvgColumnManager.js +7 -12
  239. package/cjs/core/utils/icons/SvgDocument.js +7 -10
  240. package/cjs/core/utils/icons/SvgFilter.js +7 -10
  241. package/cjs/core/utils/icons/SvgFilterHollow.js +7 -12
  242. package/cjs/core/utils/icons/SvgImportantSmall.js +7 -12
  243. package/cjs/core/utils/icons/SvgInfoCircular.js +7 -12
  244. package/cjs/core/utils/icons/SvgMore.js +7 -12
  245. package/cjs/core/utils/icons/SvgMoreVertical.js +7 -12
  246. package/cjs/core/utils/icons/SvgNew.js +7 -12
  247. package/cjs/core/utils/icons/SvgSearch.js +7 -12
  248. package/cjs/core/utils/icons/SvgSmileyHappy.js +7 -12
  249. package/cjs/core/utils/icons/SvgSortDown.js +7 -12
  250. package/cjs/core/utils/icons/SvgSortUp.js +7 -12
  251. package/cjs/core/utils/icons/SvgStatusError.js +7 -12
  252. package/cjs/core/utils/icons/SvgStatusSuccess.js +7 -12
  253. package/cjs/core/utils/icons/SvgStatusWarning.js +7 -12
  254. package/cjs/core/utils/icons/SvgSwap.js +7 -12
  255. package/cjs/core/utils/icons/SvgUpload.js +7 -12
  256. package/cjs/core/utils/icons/index.js +34 -34
  257. package/cjs/core/utils/index.js +10 -10
  258. package/cjs/core/utils/props.js +2 -2
  259. package/cjs/core/utils/types.js +2 -2
  260. package/cjs/index.js +229 -949
  261. package/cjs/react-table/react-table.js +2 -2
  262. package/cjs/styles.js +412 -425
  263. package/esm/core/Alert/Alert.js +39 -106
  264. package/esm/core/Avatar/Avatar.js +14 -42
  265. package/esm/core/AvatarGroup/AvatarGroup.js +20 -58
  266. package/esm/core/Backdrop/Backdrop.js +2 -10
  267. package/esm/core/Badge/Badge.js +16 -31
  268. package/esm/core/Breadcrumbs/Breadcrumbs.js +55 -135
  269. package/esm/core/ButtonGroup/ButtonGroup.js +25 -61
  270. package/esm/core/Buttons/Button.js +5 -45
  271. package/esm/core/Buttons/DropdownButton.js +7 -37
  272. package/esm/core/Buttons/IconButton.js +5 -40
  273. package/esm/core/Buttons/IdeasButton.js +2 -12
  274. package/esm/core/Buttons/SplitButton.js +34 -101
  275. package/esm/core/Carousel/Carousel.js +43 -72
  276. package/esm/core/Carousel/CarouselDot.js +6 -17
  277. package/esm/core/Carousel/CarouselDotsList.js +85 -147
  278. package/esm/core/Carousel/CarouselNavigation.js +32 -68
  279. package/esm/core/Carousel/CarouselSlide.js +19 -41
  280. package/esm/core/Carousel/CarouselSlider.js +41 -65
  281. package/esm/core/Checkbox/Checkbox.js +25 -78
  282. package/esm/core/ColorPicker/ColorBuilder.js +167 -280
  283. package/esm/core/ColorPicker/ColorInputPanel.js +237 -395
  284. package/esm/core/ColorPicker/ColorPalette.js +14 -35
  285. package/esm/core/ColorPicker/ColorPicker.js +46 -79
  286. package/esm/core/ColorPicker/ColorPickerContext.js +5 -7
  287. package/esm/core/ColorPicker/ColorSwatch.js +7 -24
  288. package/esm/core/ComboBox/ComboBox.js +267 -396
  289. package/esm/core/ComboBox/ComboBoxEndIcon.js +5 -18
  290. package/esm/core/ComboBox/ComboBoxInput.js +125 -197
  291. package/esm/core/ComboBox/ComboBoxInputContainer.js +5 -20
  292. package/esm/core/ComboBox/ComboBoxMenu.js +37 -77
  293. package/esm/core/ComboBox/ComboBoxMenuItem.js +14 -61
  294. package/esm/core/ComboBox/ComboBoxMultipleContainer.js +2 -6
  295. package/esm/core/ComboBox/helpers.js +38 -38
  296. package/esm/core/DatePicker/DatePicker.js +326 -555
  297. package/esm/core/Dialog/Dialog.js +24 -53
  298. package/esm/core/Dialog/DialogBackdrop.js +19 -39
  299. package/esm/core/Dialog/DialogContent.js +12 -20
  300. package/esm/core/Dialog/DialogContext.js +1 -1
  301. package/esm/core/Dialog/DialogDragContext.js +4 -4
  302. package/esm/core/Dialog/DialogMain.js +107 -177
  303. package/esm/core/Dialog/DialogTitleBar.js +10 -45
  304. package/esm/core/Divider/Divider.js +2 -8
  305. package/esm/core/DropdownMenu/DropdownMenu.js +40 -75
  306. package/esm/core/ExpandableBlock/ExpandableBlock.js +92 -193
  307. package/esm/core/Fieldset/Fieldset.js +8 -19
  308. package/esm/core/FileUpload/FileEmptyCard.js +8 -19
  309. package/esm/core/FileUpload/FileUpload.js +36 -72
  310. package/esm/core/FileUpload/FileUploadCard.js +76 -153
  311. package/esm/core/FileUpload/FileUploadTemplate.js +9 -37
  312. package/esm/core/Flex/Flex.js +71 -87
  313. package/esm/core/Footer/Footer.js +55 -86
  314. package/esm/core/Footer/FooterSeparator.js +1 -1
  315. package/esm/core/Header/Header.js +14 -55
  316. package/esm/core/Header/HeaderBasicButton.js +7 -15
  317. package/esm/core/Header/HeaderBreadcrumbs.js +8 -32
  318. package/esm/core/Header/HeaderButton.js +14 -62
  319. package/esm/core/Header/HeaderDropdownButton.js +13 -42
  320. package/esm/core/Header/HeaderLogo.js +5 -36
  321. package/esm/core/Header/HeaderSplitButton.js +14 -61
  322. package/esm/core/Icon/Icon.js +12 -26
  323. package/esm/core/InformationPanel/InformationPanel.js +36 -71
  324. package/esm/core/InformationPanel/InformationPanelContent.js +3 -17
  325. package/esm/core/InformationPanel/InformationPanelHeader.js +8 -32
  326. package/esm/core/InformationPanel/InformationPanelWrapper.js +1 -3
  327. package/esm/core/Input/Input.js +4 -12
  328. package/esm/core/InputGrid/InputGrid.js +2 -11
  329. package/esm/core/InputGroup/InputGroup.js +16 -57
  330. package/esm/core/InputWithDecorations/InputWithDecorations.js +11 -42
  331. package/esm/core/Label/Label.js +5 -26
  332. package/esm/core/LabeledInput/LabeledInput.js +10 -63
  333. package/esm/core/LabeledSelect/LabeledSelect.js +18 -67
  334. package/esm/core/LabeledTextarea/LabeledTextarea.js +2 -8
  335. package/esm/core/List/ListItem.js +28 -46
  336. package/esm/core/Menu/Menu.js +48 -64
  337. package/esm/core/Menu/MenuDivider.js +1 -1
  338. package/esm/core/Menu/MenuExtraContent.js +1 -1
  339. package/esm/core/Menu/MenuItem.js +84 -164
  340. package/esm/core/Menu/MenuItemSkeleton.js +12 -43
  341. package/esm/core/Modal/Modal.js +6 -33
  342. package/esm/core/NonIdealState/ErrorPage.js +123 -173
  343. package/esm/core/NonIdealState/NonIdealState.js +6 -65
  344. package/esm/core/NotificationMarker/NotificationMarker.js +2 -20
  345. package/esm/core/Overlay/Overlay.d.ts +20 -24
  346. package/esm/core/Overlay/Overlay.js +45 -55
  347. package/esm/core/Popover/Popover.js +80 -172
  348. package/esm/core/ProgressIndicators/ProgressLinear.js +5 -40
  349. package/esm/core/ProgressIndicators/ProgressRadial.js +14 -40
  350. package/esm/core/Radio/Radio.js +6 -45
  351. package/esm/core/RadioTiles/RadioTile.js +8 -62
  352. package/esm/core/RadioTiles/RadioTileGroup.js +3 -10
  353. package/esm/core/SearchBox/SearchBox.js +97 -214
  354. package/esm/core/Select/Select.js +130 -265
  355. package/esm/core/Select/SelectTag.js +3 -15
  356. package/esm/core/Select/SelectTagContainer.js +7 -20
  357. package/esm/core/SideNavigation/SideNavigation.js +21 -118
  358. package/esm/core/SideNavigation/SidenavButton.js +2 -24
  359. package/esm/core/SideNavigation/SidenavSubmenu.js +3 -14
  360. package/esm/core/SideNavigation/SidenavSubmenuHeader.js +4 -20
  361. package/esm/core/SkipToContentLink/SkipToContentLink.js +2 -11
  362. package/esm/core/Slider/Slider.js +187 -340
  363. package/esm/core/Slider/Thumb.js +50 -97
  364. package/esm/core/Slider/Track.js +49 -74
  365. package/esm/core/StatusMessage/StatusMessage.js +5 -23
  366. package/esm/core/Stepper/Stepper.js +14 -70
  367. package/esm/core/Stepper/StepperStep.js +29 -92
  368. package/esm/core/Stepper/WorkflowDiagram.js +8 -21
  369. package/esm/core/Stepper/WorkflowDiagramStep.js +4 -22
  370. package/esm/core/Surface/Surface.js +48 -84
  371. package/esm/core/Table/SubRowExpander.js +9 -31
  372. package/esm/core/Table/Table.js +408 -763
  373. package/esm/core/Table/TableCell.js +53 -87
  374. package/esm/core/Table/TablePaginator.js +125 -306
  375. package/esm/core/Table/TableRowMemoized.js +58 -129
  376. package/esm/core/Table/actionHandlers/expandHandler.js +10 -10
  377. package/esm/core/Table/actionHandlers/filterHandler.js +15 -23
  378. package/esm/core/Table/actionHandlers/index.js +1 -5
  379. package/esm/core/Table/actionHandlers/resizeHandler.js +11 -11
  380. package/esm/core/Table/actionHandlers/selectHandler.js +95 -122
  381. package/esm/core/Table/cells/DefaultCell.js +7 -42
  382. package/esm/core/Table/cells/EditableCell.js +41 -70
  383. package/esm/core/Table/columns/actionColumn.js +55 -85
  384. package/esm/core/Table/columns/expanderColumn.js +25 -39
  385. package/esm/core/Table/columns/selectionColumn.js +23 -51
  386. package/esm/core/Table/filters/BaseFilter.js +7 -15
  387. package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +42 -107
  388. package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +52 -110
  389. package/esm/core/Table/filters/FilterButtonBar.js +9 -28
  390. package/esm/core/Table/filters/FilterToggle.js +18 -51
  391. package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +28 -50
  392. package/esm/core/Table/filters/TextFilter/TextFilter.js +20 -32
  393. package/esm/core/Table/filters/customFilterFunctions.js +12 -14
  394. package/esm/core/Table/filters/defaultFilterFunctions.js +79 -84
  395. package/esm/core/Table/filters/tableFilters.js +25 -34
  396. package/esm/core/Table/hooks/useColumnDragAndDrop.js +81 -88
  397. package/esm/core/Table/hooks/useExpanderCell.js +20 -26
  398. package/esm/core/Table/hooks/useResizeColumns.js +287 -353
  399. package/esm/core/Table/hooks/useScrollToRow.js +34 -42
  400. package/esm/core/Table/hooks/useSelectionCell.js +6 -10
  401. package/esm/core/Table/hooks/useStickyColumns.js +59 -61
  402. package/esm/core/Table/hooks/useSubRowFiltering.js +83 -90
  403. package/esm/core/Table/hooks/useSubRowSelection.js +27 -28
  404. package/esm/core/Table/index.js +1 -5
  405. package/esm/core/Table/utils.js +38 -40
  406. package/esm/core/Tabs/Tabs.js +226 -401
  407. package/esm/core/Tag/Tag.js +8 -35
  408. package/esm/core/Tag/TagContainer.js +5 -17
  409. package/esm/core/Textarea/Textarea.js +1 -6
  410. package/esm/core/ThemeProvider/ThemeProvider.js +44 -101
  411. package/esm/core/Tile/Tile.js +218 -386
  412. package/esm/core/TimePicker/TimePicker.js +228 -448
  413. package/esm/core/Toast/Toast.js +99 -193
  414. package/esm/core/Toast/Toaster.js +69 -82
  415. package/esm/core/ToggleSwitch/ToggleSwitch.js +17 -60
  416. package/esm/core/Tooltip/Tooltip.js +86 -151
  417. package/esm/core/TransferList/TransferList.js +93 -157
  418. package/esm/core/Tree/Tree.js +122 -196
  419. package/esm/core/Tree/TreeContext.js +5 -5
  420. package/esm/core/Tree/TreeNode.js +96 -195
  421. package/esm/core/Tree/TreeNodeExpander.js +5 -16
  422. package/esm/core/Typography/Blockquote.js +4 -12
  423. package/esm/core/Typography/Kbd.js +15 -24
  424. package/esm/core/Typography/Text.js +7 -20
  425. package/esm/core/VisuallyHidden/VisuallyHidden.js +2 -8
  426. package/esm/core/utils/color/ColorValue.js +449 -524
  427. package/esm/core/utils/components/AutoclearingHiddenLiveRegion.js +7 -11
  428. package/esm/core/utils/components/ButtonBase.js +13 -31
  429. package/esm/core/utils/components/FocusTrap.js +32 -41
  430. package/esm/core/utils/components/InputContainer.js +11 -50
  431. package/esm/core/utils/components/InputFlexContainer.js +2 -15
  432. package/esm/core/utils/components/MiddleTextTruncation.js +17 -27
  433. package/esm/core/utils/components/Portal.js +12 -12
  434. package/esm/core/utils/components/Resizer.js +191 -249
  435. package/esm/core/utils/components/VirtualScroll.js +218 -297
  436. package/esm/core/utils/components/WithCSSTransition.js +26 -43
  437. package/esm/core/utils/functions/colors.js +19 -19
  438. package/esm/core/utils/functions/date.js +8 -8
  439. package/esm/core/utils/functions/dev.js +12 -11
  440. package/esm/core/utils/functions/dom.js +14 -17
  441. package/esm/core/utils/functions/focusable.js +15 -24
  442. package/esm/core/utils/functions/import.js +2 -4
  443. package/esm/core/utils/functions/numbers.js +7 -7
  444. package/esm/core/utils/functions/polymorphic.js +23 -32
  445. package/esm/core/utils/functions/react.js +19 -21
  446. package/esm/core/utils/functions/supports.js +1 -2
  447. package/esm/core/utils/hooks/useContainerWidth.js +13 -16
  448. package/esm/core/utils/hooks/useControlledState.js +8 -17
  449. package/esm/core/utils/hooks/useDragAndDrop.js +80 -99
  450. package/esm/core/utils/hooks/useEventListener.js +18 -18
  451. package/esm/core/utils/hooks/useGlobals.js +21 -27
  452. package/esm/core/utils/hooks/useId.js +3 -4
  453. package/esm/core/utils/hooks/useIntersection.js +19 -25
  454. package/esm/core/utils/hooks/useIsClient.js +5 -5
  455. package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +1 -2
  456. package/esm/core/utils/hooks/useLatestRef.js +5 -5
  457. package/esm/core/utils/hooks/useMediaQuery.js +25 -23
  458. package/esm/core/utils/hooks/useMergedRefs.js +12 -11
  459. package/esm/core/utils/hooks/useOverflow.js +51 -63
  460. package/esm/core/utils/hooks/useResizeObserver.js +12 -17
  461. package/esm/core/utils/hooks/useSafeContext.js +5 -5
  462. package/esm/core/utils/icons/StatusIconMap.js +4 -8
  463. package/esm/core/utils/icons/SvgCalendar.js +2 -7
  464. package/esm/core/utils/icons/SvgCaretDownSmall.js +2 -7
  465. package/esm/core/utils/icons/SvgCaretRightSmall.js +2 -7
  466. package/esm/core/utils/icons/SvgCaretUpSmall.js +2 -7
  467. package/esm/core/utils/icons/SvgCheckmark.js +2 -5
  468. package/esm/core/utils/icons/SvgCheckmarkSmall.js +2 -7
  469. package/esm/core/utils/icons/SvgChevronLeft.js +2 -7
  470. package/esm/core/utils/icons/SvgChevronLeftDouble.js +2 -7
  471. package/esm/core/utils/icons/SvgChevronRight.js +2 -7
  472. package/esm/core/utils/icons/SvgChevronRightDouble.js +2 -7
  473. package/esm/core/utils/icons/SvgClose.js +2 -7
  474. package/esm/core/utils/icons/SvgCloseSmall.js +2 -7
  475. package/esm/core/utils/icons/SvgColumnManager.js +2 -7
  476. package/esm/core/utils/icons/SvgDocument.js +2 -5
  477. package/esm/core/utils/icons/SvgFilter.js +2 -5
  478. package/esm/core/utils/icons/SvgFilterHollow.js +2 -7
  479. package/esm/core/utils/icons/SvgImportantSmall.js +2 -7
  480. package/esm/core/utils/icons/SvgInfoCircular.js +2 -7
  481. package/esm/core/utils/icons/SvgMore.js +2 -7
  482. package/esm/core/utils/icons/SvgMoreVertical.js +2 -7
  483. package/esm/core/utils/icons/SvgNew.js +2 -7
  484. package/esm/core/utils/icons/SvgSearch.js +2 -7
  485. package/esm/core/utils/icons/SvgSmileyHappy.js +2 -7
  486. package/esm/core/utils/icons/SvgSortDown.js +2 -7
  487. package/esm/core/utils/icons/SvgSortUp.js +2 -7
  488. package/esm/core/utils/icons/SvgStatusError.js +2 -7
  489. package/esm/core/utils/icons/SvgStatusSuccess.js +2 -7
  490. package/esm/core/utils/icons/SvgStatusWarning.js +2 -7
  491. package/esm/core/utils/icons/SvgSwap.js +2 -7
  492. package/esm/core/utils/icons/SvgUpload.js +2 -7
  493. package/esm/index.js +3 -21
  494. package/esm/styles.js +414 -425
  495. package/package.json +2 -2
  496. package/styles.css +6 -6
@@ -1,17 +1,17 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useIsClient = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
9
+ const React = tslib_1.__importStar(require("react"));
10
10
  const useIsClient = () => {
11
- const [isClient, setIsClient] = React.useState(false);
12
- React.useEffect(() => {
13
- setIsClient(true);
14
- }, []);
15
- return isClient;
11
+ const [isClient, setIsClient] = React.useState(false);
12
+ React.useEffect(() => {
13
+ setIsClient(true);
14
+ }, []);
15
+ return isClient;
16
16
  };
17
17
  exports.useIsClient = useIsClient;
@@ -1,16 +1,15 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useIsomorphicLayoutEffect = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
9
+ const React = tslib_1.__importStar(require("react"));
10
10
  /**
11
11
  * SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
12
12
  *
13
13
  * @see https://fb.me/react-uselayouteffect-ssr
14
14
  */
15
- exports.useIsomorphicLayoutEffect =
16
- typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
15
+ exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -1,12 +1,12 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useLatestRef = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
9
+ const React = tslib_1.__importStar(require("react"));
10
10
  /**
11
11
  * Hook that keeps track of the latest value in a ref.
12
12
  * @private
@@ -15,10 +15,10 @@ const React = tslib_1.__importStar(require('react'));
15
15
  * const valueRef = useLatestRef(value);
16
16
  */
17
17
  const useLatestRef = (value) => {
18
- const valueRef = React.useRef(value);
19
- React.useEffect(() => {
20
- valueRef.current = value;
21
- }, [value]);
22
- return valueRef;
18
+ const valueRef = React.useRef(value);
19
+ React.useEffect(() => {
20
+ valueRef.current = value;
21
+ }, [value]);
22
+ return valueRef;
23
23
  };
24
24
  exports.useLatestRef = useLatestRef;
@@ -1,40 +1,40 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useMediaQuery = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const index_js_1 = require('../functions/index.js');
11
- const useIsomorphicLayoutEffect_js_1 = require('./useIsomorphicLayoutEffect.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const index_js_1 = require("../functions/index.js");
11
+ const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
12
12
  const useMediaQuery = (queryString) => {
13
- const [matches, setMatches] = React.useState();
14
- (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
15
- const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(
16
- queryString,
17
- );
18
- const handleChange = ({ matches }) => setMatches(matches);
19
- if (mediaQueryList != undefined) {
20
- setMatches(mediaQueryList.matches);
21
- try {
22
- mediaQueryList.addEventListener('change', handleChange);
23
- } catch {
24
- // Safari 13 fallback
25
- mediaQueryList.addListener?.(handleChange);
26
- }
27
- }
28
- return () => {
29
- try {
30
- mediaQueryList?.removeEventListener('change', handleChange);
31
- } catch {
32
- // Safari 13 fallback
33
- mediaQueryList?.removeListener?.(handleChange);
34
- }
35
- };
36
- }, [queryString]);
37
- return !!matches;
13
+ const [matches, setMatches] = React.useState();
14
+ (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
15
+ const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(queryString);
16
+ const handleChange = ({ matches }) => setMatches(matches);
17
+ if (mediaQueryList != undefined) {
18
+ setMatches(mediaQueryList.matches);
19
+ try {
20
+ mediaQueryList.addEventListener('change', handleChange);
21
+ }
22
+ catch {
23
+ // Safari 13 fallback
24
+ mediaQueryList.addListener?.(handleChange);
25
+ }
26
+ }
27
+ return () => {
28
+ try {
29
+ mediaQueryList?.removeEventListener('change', handleChange);
30
+ }
31
+ catch {
32
+ // Safari 13 fallback
33
+ mediaQueryList?.removeListener?.(handleChange);
34
+ }
35
+ };
36
+ }, [queryString]);
37
+ return !!matches;
38
38
  };
39
39
  exports.useMediaQuery = useMediaQuery;
40
40
  exports.default = exports.useMediaQuery;
@@ -1,32 +1,33 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useMergedRefs = exports.mergeRefs = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
9
+ const React = tslib_1.__importStar(require("react"));
10
10
  /**
11
11
  * Function that merges the provided refs into one.
12
12
  */
13
13
  const mergeRefs = (...refs) => {
14
- return (instance) => {
15
- refs.forEach((ref) => {
16
- if (typeof ref === 'function') {
17
- ref(instance);
18
- } else if (ref) {
19
- ref.current = instance;
20
- }
21
- });
22
- };
14
+ return (instance) => {
15
+ refs.forEach((ref) => {
16
+ if (typeof ref === 'function') {
17
+ ref(instance);
18
+ }
19
+ else if (ref) {
20
+ ref.current = instance;
21
+ }
22
+ });
23
+ };
23
24
  };
24
25
  exports.mergeRefs = mergeRefs;
25
26
  /**
26
27
  * Returns a ref callback that merges the provided refs using `mergeRefs`.
27
28
  */
28
29
  const useMergedRefs = (...refs) => {
29
- // eslint-disable-next-line react-hooks/exhaustive-deps
30
- return React.useCallback((0, exports.mergeRefs)(...refs), [...refs]);
30
+ // eslint-disable-next-line react-hooks/exhaustive-deps
31
+ return React.useCallback((0, exports.mergeRefs)(...refs), [...refs]);
31
32
  };
32
33
  exports.useMergedRefs = useMergedRefs;
@@ -1,15 +1,15 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useOverflow = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const useMergedRefs_js_1 = require('./useMergedRefs.js');
11
- const useResizeObserver_js_1 = require('./useResizeObserver.js');
12
- const useIsomorphicLayoutEffect_js_1 = require('./useIsomorphicLayoutEffect.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const useMergedRefs_js_1 = require("./useMergedRefs.js");
11
+ const useResizeObserver_js_1 = require("./useResizeObserver.js");
12
+ const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
13
13
  const STARTING_MAX_ITEMS_COUNT = 20;
14
14
  /**
15
15
  * Hook that observes the size of an element and returns the number of items
@@ -34,69 +34,56 @@ const STARTING_MAX_ITEMS_COUNT = 20;
34
34
  * );
35
35
  */
36
36
  const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
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] = (0, useResizeObserver_js_1.useResizeObserver)(
50
- updateContainerSize,
51
- );
52
- const resizeObserverRef = React.useRef(observer);
53
- (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
54
- if (disabled) {
55
- setVisibleCount(items.length);
56
- } else {
57
- setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
58
- needsFullRerender.current = true;
59
- }
60
- }, [containerSize, disabled, items]);
61
- const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(
62
- containerRef,
63
- resizeRef,
64
- );
65
- (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
66
- if (!containerRef.current || disabled) {
67
- resizeObserverRef.current?.disconnect();
68
- return;
69
- }
70
- const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
71
- const availableSize = containerRef.current[`offset${dimension}`];
72
- const requiredSize = containerRef.current[`scroll${dimension}`];
73
- if (availableSize < requiredSize) {
74
- const avgItemSize = requiredSize / visibleCount;
75
- const visibleItems = Math.floor(availableSize / avgItemSize);
76
- /* When first item is larger than the container - visibleItems count is 0,
37
+ const containerRef = React.useRef(null);
38
+ const [visibleCount, setVisibleCount] = React.useState(() => disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
39
+ const needsFullRerender = React.useRef(true);
40
+ const [containerSize, setContainerSize] = React.useState(0);
41
+ const previousContainerSize = React.useRef(0);
42
+ const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
43
+ const [resizeRef, observer] = (0, useResizeObserver_js_1.useResizeObserver)(updateContainerSize);
44
+ const resizeObserverRef = React.useRef(observer);
45
+ (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
46
+ if (disabled) {
47
+ setVisibleCount(items.length);
48
+ }
49
+ else {
50
+ setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
51
+ needsFullRerender.current = true;
52
+ }
53
+ }, [containerSize, disabled, items]);
54
+ const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(containerRef, resizeRef);
55
+ (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
56
+ if (!containerRef.current || disabled) {
57
+ resizeObserverRef.current?.disconnect();
58
+ return;
59
+ }
60
+ const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
61
+ const availableSize = containerRef.current[`offset${dimension}`];
62
+ const requiredSize = containerRef.current[`scroll${dimension}`];
63
+ if (availableSize < requiredSize) {
64
+ const avgItemSize = requiredSize / visibleCount;
65
+ const visibleItems = Math.floor(availableSize / avgItemSize);
66
+ /* When first item is larger than the container - visibleItems count is 0,
77
67
  We can assume that at least some part of the first item is visible and return 1. */
78
- setVisibleCount(visibleItems > 0 ? visibleItems : 1);
79
- } else if (needsFullRerender.current) {
80
- const childrenSize = Array.from(containerRef.current.children).reduce(
81
- (sum, child) => sum + child[`offset${dimension}`],
82
- 0,
83
- );
84
- // Previous `useEffect` might have updated visible count, but we still have old one
85
- // If it is 0, lets try to update it with items length.
86
- const currentVisibleCount =
87
- visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
88
- const avgItemSize = childrenSize / currentVisibleCount;
89
- const visibleItems = Math.floor(availableSize / avgItemSize);
90
- if (!isNaN(visibleItems)) {
91
- // Doubling the visible items to overflow the container. Just to be safe.
92
- setVisibleCount(Math.min(items.length, visibleItems * 2));
93
- }
94
- }
95
- needsFullRerender.current = false;
96
- }, [containerSize, visibleCount, disabled, items.length, orientation]);
97
- (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
98
- previousContainerSize.current = containerSize;
99
- }, [containerSize]);
100
- return [mergedRefs, visibleCount];
68
+ setVisibleCount(visibleItems > 0 ? visibleItems : 1);
69
+ }
70
+ else if (needsFullRerender.current) {
71
+ const childrenSize = Array.from(containerRef.current.children).reduce((sum, child) => sum + child[`offset${dimension}`], 0);
72
+ // Previous `useEffect` might have updated visible count, but we still have old one
73
+ // If it is 0, lets try to update it with items length.
74
+ const currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
75
+ const avgItemSize = childrenSize / currentVisibleCount;
76
+ const visibleItems = Math.floor(availableSize / avgItemSize);
77
+ if (!isNaN(visibleItems)) {
78
+ // Doubling the visible items to overflow the container. Just to be safe.
79
+ setVisibleCount(Math.min(items.length, visibleItems * 2));
80
+ }
81
+ }
82
+ needsFullRerender.current = false;
83
+ }, [containerSize, visibleCount, disabled, items.length, orientation]);
84
+ (0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
85
+ previousContainerSize.current = containerSize;
86
+ }, [containerSize]);
87
+ return [mergedRefs, visibleCount];
101
88
  };
102
89
  exports.useOverflow = useOverflow;
@@ -1,13 +1,13 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useResizeObserver = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const dom_js_1 = require('../functions/dom.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const dom_js_1 = require("../functions/dom.js");
11
11
  /**
12
12
  * Hook that uses `ResizeObserver` to access an element's size every time it updates.
13
13
  * @private
@@ -21,22 +21,17 @@ const dom_js_1 = require('../functions/dom.js');
21
21
  * return <div ref={ref}>...</div>;
22
22
  */
23
23
  const useResizeObserver = (onResize) => {
24
- const resizeObserver = React.useRef();
25
- const elementRef = React.useCallback(
26
- (element) => {
27
- if (!(0, dom_js_1.getWindow)()?.ResizeObserver) {
28
- return;
29
- }
30
- resizeObserver.current?.disconnect?.();
31
- if (element) {
32
- resizeObserver.current = new ResizeObserver(([{ contentRect }]) =>
33
- onResize(contentRect),
34
- );
35
- resizeObserver.current?.observe?.(element);
36
- }
37
- },
38
- [onResize],
39
- );
40
- return [elementRef, resizeObserver.current];
24
+ const resizeObserver = React.useRef();
25
+ const elementRef = React.useCallback((element) => {
26
+ if (!(0, dom_js_1.getWindow)()?.ResizeObserver) {
27
+ return;
28
+ }
29
+ resizeObserver.current?.disconnect?.();
30
+ if (element) {
31
+ resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
32
+ resizeObserver.current?.observe?.(element);
33
+ }
34
+ }, [onResize]);
35
+ return [elementRef, resizeObserver.current];
41
36
  };
42
37
  exports.useResizeObserver = useResizeObserver;
@@ -1,21 +1,21 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useSafeContext = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
9
+ const React = tslib_1.__importStar(require("react"));
10
10
  /**
11
11
  * Wrapper hook around `useContext` that throws an error if the context is not provided.
12
12
  * @param context Context to use. Must have a `displayName` for useful errors.
13
13
  */
14
14
  const useSafeContext = (context) => {
15
- const value = React.useContext(context);
16
- if (!value) {
17
- throw new Error(`${context.displayName} is undefined`);
18
- }
19
- return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
15
+ const value = React.useContext(context);
16
+ if (!value) {
17
+ throw new Error(`${context.displayName} is undefined`);
18
+ }
19
+ return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
20
20
  };
21
21
  exports.useSafeContext = useSafeContext;
@@ -1,35 +1,19 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.StatusIconMap = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const SvgInfoCircular_js_1 = require('./SvgInfoCircular.js');
11
- const SvgStatusError_js_1 = require('./SvgStatusError.js');
12
- const SvgStatusSuccess_js_1 = require('./SvgStatusSuccess.js');
13
- const SvgStatusWarning_js_1 = require('./SvgStatusWarning.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const SvgInfoCircular_js_1 = require("./SvgInfoCircular.js");
11
+ const SvgStatusError_js_1 = require("./SvgStatusError.js");
12
+ const SvgStatusSuccess_js_1 = require("./SvgStatusSuccess.js");
13
+ const SvgStatusWarning_js_1 = require("./SvgStatusWarning.js");
14
14
  exports.StatusIconMap = {
15
- negative: (args) =>
16
- React.createElement(SvgStatusError_js_1.SvgStatusError, {
17
- 'aria-hidden': true,
18
- ...args,
19
- }),
20
- positive: (args) =>
21
- React.createElement(SvgStatusSuccess_js_1.SvgStatusSuccess, {
22
- 'aria-hidden': true,
23
- ...args,
24
- }),
25
- warning: (args) =>
26
- React.createElement(SvgStatusWarning_js_1.SvgStatusWarning, {
27
- 'aria-hidden': true,
28
- ...args,
29
- }),
30
- informational: (args) =>
31
- React.createElement(SvgInfoCircular_js_1.SvgInfoCircular, {
32
- 'aria-hidden': true,
33
- ...args,
34
- }),
15
+ negative: (args) => React.createElement(SvgStatusError_js_1.SvgStatusError, { "aria-hidden": true, ...args }),
16
+ positive: (args) => React.createElement(SvgStatusSuccess_js_1.SvgStatusSuccess, { "aria-hidden": true, ...args }),
17
+ warning: (args) => React.createElement(SvgStatusWarning_js_1.SvgStatusWarning, { "aria-hidden": true, ...args }),
18
+ informational: (args) => (React.createElement(SvgInfoCircular_js_1.SvgInfoCircular, { "aria-hidden": true, ...args })),
35
19
  };
@@ -1,9 +1,9 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Svg = void 0;
4
4
  /*---------------------------------------------------------------------------------------------
5
5
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
6
6
  * See LICENSE.md in the project root for license terms and full copyright notice.
7
7
  *--------------------------------------------------------------------------------------------*/
8
- const polymorphic_js_1 = require('../functions/polymorphic.js');
8
+ const polymorphic_js_1 = require("../functions/polymorphic.js");
9
9
  exports.Svg = polymorphic_js_1.polymorphic.svg('', { viewBox: '0 0 16 16' });
@@ -1,20 +1,15 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SvgCalendar = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const Svg_js_1 = require('./Svg.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const Svg_js_1 = require("./Svg.js");
11
11
  const SvgCalendar = (props) => {
12
- return React.createElement(
13
- Svg_js_1.Svg,
14
- { ...props },
15
- React.createElement('path', {
16
- 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',
17
- }),
18
- );
12
+ return (React.createElement(Svg_js_1.Svg, { ...props },
13
+ 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' })));
19
14
  };
20
15
  exports.SvgCalendar = SvgCalendar;
@@ -1,20 +1,15 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SvgCaretDownSmall = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const Svg_js_1 = require('./Svg.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const Svg_js_1 = require("./Svg.js");
11
11
  const SvgCaretDownSmall = (props) => {
12
- return React.createElement(
13
- Svg_js_1.Svg,
14
- { ...props },
15
- React.createElement('path', {
16
- 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',
17
- }),
18
- );
12
+ return (React.createElement(Svg_js_1.Svg, { ...props },
13
+ 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' })));
19
14
  };
20
15
  exports.SvgCaretDownSmall = SvgCaretDownSmall;
@@ -1,20 +1,15 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SvgCaretRightSmall = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const Svg_js_1 = require('./Svg.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const Svg_js_1 = require("./Svg.js");
11
11
  const SvgCaretRightSmall = (props) => {
12
- return React.createElement(
13
- Svg_js_1.Svg,
14
- { ...props },
15
- React.createElement('path', {
16
- 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',
17
- }),
18
- );
12
+ return (React.createElement(Svg_js_1.Svg, { ...props },
13
+ 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' })));
19
14
  };
20
15
  exports.SvgCaretRightSmall = SvgCaretRightSmall;
@@ -1,20 +1,15 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.SvgCaretUpSmall = void 0;
4
- const tslib_1 = require('tslib');
4
+ const tslib_1 = require("tslib");
5
5
  /*---------------------------------------------------------------------------------------------
6
6
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
7
7
  * See LICENSE.md in the project root for license terms and full copyright notice.
8
8
  *--------------------------------------------------------------------------------------------*/
9
- const React = tslib_1.__importStar(require('react'));
10
- const Svg_js_1 = require('./Svg.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const Svg_js_1 = require("./Svg.js");
11
11
  const SvgCaretUpSmall = (props) => {
12
- return React.createElement(
13
- Svg_js_1.Svg,
14
- { ...props },
15
- React.createElement('path', {
16
- 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',
17
- }),
18
- );
12
+ return (React.createElement(Svg_js_1.Svg, { ...props },
13
+ 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' })));
19
14
  };
20
15
  exports.SvgCaretUpSmall = SvgCaretUpSmall;