@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
@@ -1,9 +1,6 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
3
- exports.onShiftSelectHandler =
4
- exports.onSingleSelectHandler =
5
- exports.onToggleHandler =
6
- void 0;
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onToggleHandler = void 0;
7
4
  /**
8
5
  * Handles subrow selection and validation.
9
6
  * - Calls onSelect() with selected data
@@ -11,145 +8,118 @@ exports.onShiftSelectHandler =
11
8
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
12
9
  */
13
10
  const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
14
- if (!instance?.rows.length) {
15
- onSelect?.([], newState);
16
- return;
17
- }
18
- const newSelectedRowIds = {};
19
- const handleRow = (row) => {
20
- if (isRowDisabled?.(row.original)) {
21
- return false;
11
+ if (!instance?.rows.length) {
12
+ onSelect?.([], newState);
13
+ return;
22
14
  }
23
- let isAllSubSelected = true;
24
- row.initialSubRows.forEach((subRow) => {
25
- const result = handleRow(subRow);
26
- if (!result) {
27
- isAllSubSelected = false;
28
- }
29
- });
30
- // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
31
- // If a row doesn't have sub-rows then check its selection state.
32
- // If it has sub-rows then check whether all of them are selected.
33
- if (
34
- (!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
35
- (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
36
- (row.initialSubRows.length && isAllSubSelected)
37
- ) {
38
- newSelectedRowIds[row.id] = true;
39
- }
40
- return !!newSelectedRowIds[row.id];
41
- };
42
- instance.initialRows.forEach((row) => handleRow(row));
43
- const selectedData = getSelectedData(newSelectedRowIds, instance);
44
- newState.selectedRowIds = newSelectedRowIds;
45
- onSelect?.(selectedData, newState);
15
+ const newSelectedRowIds = {};
16
+ const handleRow = (row) => {
17
+ if (isRowDisabled?.(row.original)) {
18
+ return false;
19
+ }
20
+ let isAllSubSelected = true;
21
+ row.initialSubRows.forEach((subRow) => {
22
+ const result = handleRow(subRow);
23
+ if (!result) {
24
+ isAllSubSelected = false;
25
+ }
26
+ });
27
+ // If `selectSubRows` is false, then no need to select sub-rows and just check current selection state.
28
+ // If a row doesn't have sub-rows then check its selection state.
29
+ // If it has sub-rows then check whether all of them are selected.
30
+ if ((!instance.selectSubRows && newState.selectedRowIds[row.id]) ||
31
+ (!row.initialSubRows.length && newState.selectedRowIds[row.id]) ||
32
+ (row.initialSubRows.length && isAllSubSelected)) {
33
+ newSelectedRowIds[row.id] = true;
34
+ }
35
+ return !!newSelectedRowIds[row.id];
36
+ };
37
+ instance.initialRows.forEach((row) => handleRow(row));
38
+ const selectedData = getSelectedData(newSelectedRowIds, instance);
39
+ newState.selectedRowIds = newSelectedRowIds;
40
+ onSelect?.(selectedData, newState);
46
41
  };
47
42
  /**
48
43
  * Handles selection when toggling a row (Ctrl click or checkbox click)
49
44
  */
50
- const onToggleHandler = (
51
- newState,
52
- action,
53
- instance,
54
- onSelect,
55
- isRowDisabled,
56
- ) => {
57
- onSelectHandler(newState, instance, onSelect, isRowDisabled);
58
- // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
59
- newState.lastSelectedRowId = action.id;
45
+ const onToggleHandler = (newState, action, instance, onSelect, isRowDisabled) => {
46
+ onSelectHandler(newState, instance, onSelect, isRowDisabled);
47
+ // Toggling a row (ctrl click or checkbox click) updates the lastSelectedRowId
48
+ newState.lastSelectedRowId = action.id;
60
49
  };
61
50
  exports.onToggleHandler = onToggleHandler;
62
51
  /**
63
52
  * Handles selection when clicked on a row.
64
53
  */
65
- const onSingleSelectHandler = (
66
- state,
67
- action,
68
- instance,
69
- onSelect,
70
- isRowDisabled,
71
- ) => {
72
- const selectedRowIds = { [action.id]: true };
73
- if (instance?.selectSubRows) {
74
- const handleRow = (row) => {
75
- selectedRowIds[row.id] = true;
76
- row.subRows.forEach((r) => handleRow(r));
54
+ const onSingleSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
55
+ const selectedRowIds = { [action.id]: true };
56
+ if (instance?.selectSubRows) {
57
+ const handleRow = (row) => {
58
+ selectedRowIds[row.id] = true;
59
+ row.subRows.forEach((r) => handleRow(r));
60
+ };
61
+ handleRow(instance.rowsById[action.id]);
62
+ }
63
+ const newState = {
64
+ ...state,
65
+ lastSelectedRowId: action.id,
66
+ selectedRowIds,
77
67
  };
78
- handleRow(instance.rowsById[action.id]);
79
- }
80
- const newState = {
81
- ...state,
82
- lastSelectedRowId: action.id,
83
- selectedRowIds,
84
- };
85
- // Passing to `onSelectHandler` to handle filtered sub-rows
86
- onSelectHandler(newState, instance, onSelect, isRowDisabled);
87
- return newState;
68
+ // Passing to `onSelectHandler` to handle filtered sub-rows
69
+ onSelectHandler(newState, instance, onSelect, isRowDisabled);
70
+ return newState;
88
71
  };
89
72
  exports.onSingleSelectHandler = onSingleSelectHandler;
90
73
  /**
91
74
  * Handles selection when clicked on a row while shift key is pressed.
92
75
  */
93
- const onShiftSelectHandler = (
94
- state,
95
- action,
96
- instance,
97
- onSelect,
98
- isRowDisabled,
99
- ) => {
100
- if (instance == null) {
101
- return state;
102
- }
103
- let startIndex = Math.max(
104
- 0,
105
- instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId),
106
- );
107
- let endIndex = Math.max(
108
- 0,
109
- instance.flatRows.findIndex((row) => row.id === action.id),
110
- );
111
- if (startIndex > endIndex) {
112
- const temp = startIndex;
113
- startIndex = endIndex;
114
- endIndex = temp;
115
- }
116
- const isLastSelectedRowIdSelected =
117
- state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
118
- !!state.selectedRowIds[state.lastSelectedRowId];
119
- // If ctrl + shift click, do not lose previous selection
120
- // If shift click, start new selection
121
- const selectedRowIds = !!action.ctrlPressed
122
- ? { ...state.selectedRowIds }
123
- : {};
124
- // 1. All rows between start and end are assigned the state of the last selected row
125
- instance.flatRows
126
- .slice(startIndex, endIndex + 1)
127
- .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
128
- // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
129
- // Since lastRow's children come after endIndex + 1 (not selected in step 1)
130
- const handleRow = (row) => {
131
- selectedRowIds[row.id] = isLastSelectedRowIdSelected;
132
- row.subRows.forEach((r) => handleRow(r));
133
- };
134
- handleRow(instance.flatRows[endIndex]);
135
- const newState = {
136
- ...state,
137
- selectedRowIds,
138
- };
139
- // 3.1 Deselect all selected disabled rows and their children
140
- // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
141
- onSelectHandler(newState, instance, onSelect, isRowDisabled);
142
- return newState;
76
+ const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled) => {
77
+ if (instance == null) {
78
+ return state;
79
+ }
80
+ let startIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === state.lastSelectedRowId));
81
+ let endIndex = Math.max(0, instance.flatRows.findIndex((row) => row.id === action.id));
82
+ if (startIndex > endIndex) {
83
+ const temp = startIndex;
84
+ startIndex = endIndex;
85
+ endIndex = temp;
86
+ }
87
+ const isLastSelectedRowIdSelected = state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
88
+ !!state.selectedRowIds[state.lastSelectedRowId];
89
+ // If ctrl + shift click, do not lose previous selection
90
+ // If shift click, start new selection
91
+ const selectedRowIds = !!action.ctrlPressed
92
+ ? { ...state.selectedRowIds }
93
+ : {};
94
+ // 1. All rows between start and end are assigned the state of the last selected row
95
+ instance.flatRows
96
+ .slice(startIndex, endIndex + 1)
97
+ .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
98
+ // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
99
+ // Since lastRow's children come after endIndex + 1 (not selected in step 1)
100
+ const handleRow = (row) => {
101
+ selectedRowIds[row.id] = isLastSelectedRowIdSelected;
102
+ row.subRows.forEach((r) => handleRow(r));
103
+ };
104
+ handleRow(instance.flatRows[endIndex]);
105
+ const newState = {
106
+ ...state,
107
+ selectedRowIds,
108
+ };
109
+ // 3.1 Deselect all selected disabled rows and their children
110
+ // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
111
+ onSelectHandler(newState, instance, onSelect, isRowDisabled);
112
+ return newState;
143
113
  };
144
114
  exports.onShiftSelectHandler = onShiftSelectHandler;
145
115
  const getSelectedData = (selectedRowIds, instance) => {
146
- const selectedData = [];
147
- const setSelectedData = (row) => {
148
- if (selectedRowIds[row.id]) {
149
- selectedData.push(row.original);
150
- }
151
- row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
152
- };
153
- instance?.initialRows.forEach((row) => setSelectedData(row));
154
- return selectedData;
116
+ const selectedData = [];
117
+ const setSelectedData = (row) => {
118
+ if (selectedRowIds[row.id]) {
119
+ selectedData.push(row.original);
120
+ }
121
+ row.initialSubRows.forEach((subRow) => setSelectedData(subRow));
122
+ };
123
+ instance?.initialRows.forEach((row) => setSelectedData(row));
124
+ return selectedData;
155
125
  };
@@ -1,14 +1,14 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.DefaultCell = 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 classnames_1 = tslib_1.__importDefault(require('classnames'));
11
- const index_js_1 = require('../../utils/index.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const classnames_1 = tslib_1.__importDefault(require("classnames"));
11
+ const index_js_1 = require("../../utils/index.js");
12
12
  /**
13
13
  * Default cell.
14
14
  * It should be passed to `cellRenderer`.
@@ -21,48 +21,13 @@ const index_js_1 = require('../../utils/index.js');
21
21
  * }
22
22
  */
23
23
  const DefaultCell = (props) => {
24
- // Omitting `cellProps`
25
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
26
- const {
27
- cellElementProps: {
28
- className: cellElementClassName,
29
- style: cellElementStyle,
30
- ...cellElementProps
31
- },
32
- children,
33
- startIcon,
34
- endIcon,
35
- cellProps,
36
- isDisabled,
37
- className,
38
- style,
39
- status,
40
- ...rest
41
- } = props;
42
- return React.createElement(
43
- index_js_1.Box,
44
- {
45
- ...cellElementProps,
46
- ...rest,
47
- className: (0, classnames_1.default)(cellElementClassName, className),
48
- 'aria-disabled': isDisabled?.(cellProps.row.original) || undefined,
49
- 'data-iui-status': status,
50
- style: { ...cellElementStyle, ...style },
51
- },
52
- startIcon &&
53
- React.createElement(
54
- index_js_1.Box,
55
- { className: 'iui-table-cell-start-icon' },
56
- startIcon,
57
- ),
58
- children,
59
- endIcon &&
60
- React.createElement(
61
- index_js_1.Box,
62
- { className: 'iui-table-cell-end-icon' },
63
- endIcon,
64
- ),
65
- );
24
+ // Omitting `cellProps`
25
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
26
+ const { cellElementProps: { className: cellElementClassName, style: cellElementStyle, ...cellElementProps }, children, startIcon, endIcon, cellProps, isDisabled, className, style, status, ...rest } = props;
27
+ return (React.createElement(index_js_1.Box, { ...cellElementProps, ...rest, className: (0, classnames_1.default)(cellElementClassName, className), "aria-disabled": isDisabled?.(cellProps.row.original) || undefined, "data-iui-status": status, style: { ...cellElementStyle, ...style } },
28
+ startIcon && (React.createElement(index_js_1.Box, { className: 'iui-table-cell-start-icon' }, startIcon)),
29
+ children,
30
+ endIcon && React.createElement(index_js_1.Box, { className: 'iui-table-cell-end-icon' }, endIcon)));
66
31
  };
67
32
  exports.DefaultCell = DefaultCell;
68
33
  exports.default = exports.DefaultCell;
@@ -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.EditableCell = 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('../../utils/index.js');
9
+ const React = tslib_1.__importStar(require("react"));
10
+ const index_js_1 = require("../../utils/index.js");
11
11
  /**
12
12
  * Editable cell.
13
13
  * It should be passed to `cellRenderer`.
@@ -19,76 +19,47 @@ const index_js_1 = require('../../utils/index.js');
19
19
  * }
20
20
  */
21
21
  const EditableCell = (props) => {
22
- const {
23
- cellElementProps,
24
- cellProps,
25
- onCellEdit,
26
- children,
27
- isDisabled,
28
- ...rest
29
- } = props;
30
- isDisabled; // To omit and prevent eslint error.
31
- const sanitizeString = (text) => {
32
- return text.replace(/(\r\n|\n|\r)+/gm, ' ');
33
- };
34
- const [value, setValue] = React.useState(() =>
35
- sanitizeString(cellProps.value),
36
- );
37
- React.useEffect(() => {
38
- setValue(sanitizeString(cellProps.value));
39
- }, [cellProps.value]);
40
- const [key, setKey] = React.useState((0, index_js_1.getRandomValue)(10));
41
- const [isDirty, setIsDirty] = React.useState(false);
42
- return React.createElement(
43
- index_js_1.Box,
44
- {
45
- ...cellElementProps,
46
- contentEditable: true,
47
- suppressContentEditableWarning: true,
48
- key: key,
49
- ...rest,
50
- onInput: (e) => {
51
- setValue(sanitizeString(e.target.innerText));
52
- setIsDirty(true);
53
- props.onInput?.(e);
54
- },
55
- onBlur: (e) => {
56
- if (isDirty) {
57
- onCellEdit(cellProps.column.id, value, cellProps.row.original);
58
- }
59
- props.onBlur?.(e);
60
- // Prevents error when text is cleared.
61
- // New key makes React to reattach with the DOM so it won't complain about deleted text node.
62
- setKey((0, index_js_1.getRandomValue)(10));
63
- },
64
- onKeyDown: (e) => {
65
- // Prevents from adding HTML elements (div, br) inside a cell on Enter press
66
- if (e.key === 'Enter') {
67
- e.preventDefault();
68
- }
69
- props.onKeyDown?.(e);
70
- },
71
- onPaste: (e) => {
72
- e.preventDefault();
73
- document.execCommand(
74
- 'inserttext',
75
- false,
76
- sanitizeString(e.clipboardData.getData('text/plain')),
77
- );
78
- props.onPaste?.(e);
79
- },
80
- onDrop: (e) => {
81
- // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
82
- e.preventDefault();
83
- props.onDrop?.(e);
84
- },
85
- onClick: (e) => {
86
- e.stopPropagation();
87
- props.onClick?.(e);
88
- },
89
- },
90
- children,
91
- );
22
+ const { cellElementProps, cellProps, onCellEdit, children, isDisabled, ...rest } = props;
23
+ isDisabled; // To omit and prevent eslint error.
24
+ const sanitizeString = (text) => {
25
+ return text.replace(/(\r\n|\n|\r)+/gm, ' ');
26
+ };
27
+ const [value, setValue] = React.useState(() => sanitizeString(cellProps.value));
28
+ React.useEffect(() => {
29
+ setValue(sanitizeString(cellProps.value));
30
+ }, [cellProps.value]);
31
+ const [key, setKey] = React.useState((0, index_js_1.getRandomValue)(10));
32
+ const [isDirty, setIsDirty] = React.useState(false);
33
+ return (React.createElement(index_js_1.Box, { ...cellElementProps, contentEditable: true, suppressContentEditableWarning: true, key: key, ...rest, onInput: (e) => {
34
+ setValue(sanitizeString(e.target.innerText));
35
+ setIsDirty(true);
36
+ props.onInput?.(e);
37
+ }, onBlur: (e) => {
38
+ if (isDirty) {
39
+ onCellEdit(cellProps.column.id, value, cellProps.row.original);
40
+ }
41
+ props.onBlur?.(e);
42
+ // Prevents error when text is cleared.
43
+ // New key makes React to reattach with the DOM so it won't complain about deleted text node.
44
+ setKey((0, index_js_1.getRandomValue)(10));
45
+ }, onKeyDown: (e) => {
46
+ // Prevents from adding HTML elements (div, br) inside a cell on Enter press
47
+ if (e.key === 'Enter') {
48
+ e.preventDefault();
49
+ }
50
+ props.onKeyDown?.(e);
51
+ }, onPaste: (e) => {
52
+ e.preventDefault();
53
+ document.execCommand('inserttext', false, sanitizeString(e.clipboardData.getData('text/plain')));
54
+ props.onPaste?.(e);
55
+ }, onDrop: (e) => {
56
+ // Prevents from drag'n'dropping into a cell because it will add unwanted HTML elements
57
+ e.preventDefault();
58
+ props.onDrop?.(e);
59
+ }, onClick: (e) => {
60
+ e.stopPropagation();
61
+ props.onClick?.(e);
62
+ } }, children));
92
63
  };
93
64
  exports.EditableCell = EditableCell;
94
65
  exports.default = exports.EditableCell;
@@ -1,21 +1,11 @@
1
- 'use strict';
2
- Object.defineProperty(exports, '__esModule', { value: true });
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.EditableCell = exports.DefaultCell = 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
- var DefaultCell_js_1 = require('./DefaultCell.js');
9
- Object.defineProperty(exports, 'DefaultCell', {
10
- enumerable: true,
11
- get: function () {
12
- return DefaultCell_js_1.DefaultCell;
13
- },
14
- });
15
- var EditableCell_js_1 = require('./EditableCell.js');
16
- Object.defineProperty(exports, 'EditableCell', {
17
- enumerable: true,
18
- get: function () {
19
- return EditableCell_js_1.EditableCell;
20
- },
21
- });
8
+ var DefaultCell_js_1 = require("./DefaultCell.js");
9
+ Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function () { return DefaultCell_js_1.DefaultCell; } });
10
+ var EditableCell_js_1 = require("./EditableCell.js");
11
+ Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return EditableCell_js_1.EditableCell; } });