@itwin/itwinui-react 3.0.4 → 3.0.6

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 (500) hide show
  1. package/CHANGELOG.md +13 -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 +137 -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.d.ts +2 -1
  201. package/cjs/core/utils/functions/dom.js +22 -25
  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.d.ts +7 -0
  206. package/cjs/core/utils/functions/numbers.js +21 -10
  207. package/cjs/core/utils/functions/polymorphic.js +30 -43
  208. package/cjs/core/utils/functions/react.js +24 -26
  209. package/cjs/core/utils/functions/supports.js +4 -5
  210. package/cjs/core/utils/hooks/index.js +17 -17
  211. package/cjs/core/utils/hooks/useContainerWidth.js +19 -26
  212. package/cjs/core/utils/hooks/useControlledState.js +12 -21
  213. package/cjs/core/utils/hooks/useDragAndDrop.js +87 -110
  214. package/cjs/core/utils/hooks/useEventListener.js +22 -22
  215. package/cjs/core/utils/hooks/useGlobals.js +27 -33
  216. package/cjs/core/utils/hooks/useId.js +8 -10
  217. package/cjs/core/utils/hooks/useIntersection.js +24 -30
  218. package/cjs/core/utils/hooks/useIsClient.js +9 -9
  219. package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +5 -6
  220. package/cjs/core/utils/hooks/useLatestRef.js +9 -9
  221. package/cjs/core/utils/hooks/useMediaQuery.js +31 -31
  222. package/cjs/core/utils/hooks/useMergedRefs.js +16 -15
  223. package/cjs/core/utils/hooks/useOverflow.js +57 -70
  224. package/cjs/core/utils/hooks/useResizeObserver.js +17 -22
  225. package/cjs/core/utils/hooks/useSafeContext.js +9 -9
  226. package/cjs/core/utils/icons/StatusIconMap.js +12 -28
  227. package/cjs/core/utils/icons/Svg.js +3 -3
  228. package/cjs/core/utils/icons/SvgCalendar.js +7 -12
  229. package/cjs/core/utils/icons/SvgCaretDownSmall.js +7 -12
  230. package/cjs/core/utils/icons/SvgCaretRightSmall.js +7 -12
  231. package/cjs/core/utils/icons/SvgCaretUpSmall.js +7 -12
  232. package/cjs/core/utils/icons/SvgCheckmark.js +7 -10
  233. package/cjs/core/utils/icons/SvgCheckmarkSmall.js +7 -12
  234. package/cjs/core/utils/icons/SvgChevronLeft.js +7 -12
  235. package/cjs/core/utils/icons/SvgChevronLeftDouble.js +7 -12
  236. package/cjs/core/utils/icons/SvgChevronRight.js +7 -12
  237. package/cjs/core/utils/icons/SvgChevronRightDouble.js +7 -12
  238. package/cjs/core/utils/icons/SvgClose.js +7 -12
  239. package/cjs/core/utils/icons/SvgCloseSmall.js +7 -12
  240. package/cjs/core/utils/icons/SvgColumnManager.js +7 -12
  241. package/cjs/core/utils/icons/SvgDocument.js +7 -10
  242. package/cjs/core/utils/icons/SvgFilter.js +7 -10
  243. package/cjs/core/utils/icons/SvgFilterHollow.js +7 -12
  244. package/cjs/core/utils/icons/SvgImportantSmall.js +7 -12
  245. package/cjs/core/utils/icons/SvgInfoCircular.js +7 -12
  246. package/cjs/core/utils/icons/SvgMore.js +7 -12
  247. package/cjs/core/utils/icons/SvgMoreVertical.js +7 -12
  248. package/cjs/core/utils/icons/SvgNew.js +7 -12
  249. package/cjs/core/utils/icons/SvgSearch.js +7 -12
  250. package/cjs/core/utils/icons/SvgSmileyHappy.js +7 -12
  251. package/cjs/core/utils/icons/SvgSortDown.js +7 -12
  252. package/cjs/core/utils/icons/SvgSortUp.js +7 -12
  253. package/cjs/core/utils/icons/SvgStatusError.js +7 -12
  254. package/cjs/core/utils/icons/SvgStatusSuccess.js +7 -12
  255. package/cjs/core/utils/icons/SvgStatusWarning.js +7 -12
  256. package/cjs/core/utils/icons/SvgSwap.js +7 -12
  257. package/cjs/core/utils/icons/SvgUpload.js +7 -12
  258. package/cjs/core/utils/icons/index.js +34 -34
  259. package/cjs/core/utils/index.js +10 -10
  260. package/cjs/core/utils/props.js +2 -2
  261. package/cjs/core/utils/types.js +2 -2
  262. package/cjs/index.js +229 -949
  263. package/cjs/react-table/react-table.js +2 -2
  264. package/cjs/styles.js +412 -425
  265. package/esm/core/Alert/Alert.js +39 -106
  266. package/esm/core/Avatar/Avatar.js +14 -42
  267. package/esm/core/AvatarGroup/AvatarGroup.js +20 -58
  268. package/esm/core/Backdrop/Backdrop.js +2 -10
  269. package/esm/core/Badge/Badge.js +16 -31
  270. package/esm/core/Breadcrumbs/Breadcrumbs.js +55 -135
  271. package/esm/core/ButtonGroup/ButtonGroup.js +25 -61
  272. package/esm/core/Buttons/Button.js +5 -45
  273. package/esm/core/Buttons/DropdownButton.js +7 -37
  274. package/esm/core/Buttons/IconButton.js +5 -40
  275. package/esm/core/Buttons/IdeasButton.js +2 -12
  276. package/esm/core/Buttons/SplitButton.js +34 -101
  277. package/esm/core/Carousel/Carousel.js +43 -72
  278. package/esm/core/Carousel/CarouselDot.js +6 -17
  279. package/esm/core/Carousel/CarouselDotsList.js +85 -147
  280. package/esm/core/Carousel/CarouselNavigation.js +32 -68
  281. package/esm/core/Carousel/CarouselSlide.js +19 -41
  282. package/esm/core/Carousel/CarouselSlider.js +41 -65
  283. package/esm/core/Checkbox/Checkbox.js +25 -78
  284. package/esm/core/ColorPicker/ColorBuilder.js +167 -280
  285. package/esm/core/ColorPicker/ColorInputPanel.js +237 -395
  286. package/esm/core/ColorPicker/ColorPalette.js +14 -35
  287. package/esm/core/ColorPicker/ColorPicker.js +46 -79
  288. package/esm/core/ColorPicker/ColorPickerContext.js +5 -7
  289. package/esm/core/ColorPicker/ColorSwatch.js +7 -24
  290. package/esm/core/ComboBox/ComboBox.js +267 -396
  291. package/esm/core/ComboBox/ComboBoxEndIcon.js +5 -18
  292. package/esm/core/ComboBox/ComboBoxInput.js +125 -197
  293. package/esm/core/ComboBox/ComboBoxInputContainer.js +5 -20
  294. package/esm/core/ComboBox/ComboBoxMenu.js +37 -77
  295. package/esm/core/ComboBox/ComboBoxMenuItem.js +14 -61
  296. package/esm/core/ComboBox/ComboBoxMultipleContainer.js +2 -6
  297. package/esm/core/ComboBox/helpers.js +38 -38
  298. package/esm/core/DatePicker/DatePicker.js +326 -555
  299. package/esm/core/Dialog/Dialog.js +24 -53
  300. package/esm/core/Dialog/DialogBackdrop.js +19 -39
  301. package/esm/core/Dialog/DialogContent.js +12 -20
  302. package/esm/core/Dialog/DialogContext.js +1 -1
  303. package/esm/core/Dialog/DialogDragContext.js +4 -4
  304. package/esm/core/Dialog/DialogMain.js +128 -177
  305. package/esm/core/Dialog/DialogTitleBar.js +10 -45
  306. package/esm/core/Divider/Divider.js +2 -8
  307. package/esm/core/DropdownMenu/DropdownMenu.js +40 -75
  308. package/esm/core/ExpandableBlock/ExpandableBlock.js +92 -193
  309. package/esm/core/Fieldset/Fieldset.js +8 -19
  310. package/esm/core/FileUpload/FileEmptyCard.js +8 -19
  311. package/esm/core/FileUpload/FileUpload.js +36 -72
  312. package/esm/core/FileUpload/FileUploadCard.js +76 -153
  313. package/esm/core/FileUpload/FileUploadTemplate.js +9 -37
  314. package/esm/core/Flex/Flex.js +71 -87
  315. package/esm/core/Footer/Footer.js +55 -86
  316. package/esm/core/Footer/FooterSeparator.js +1 -1
  317. package/esm/core/Header/Header.js +14 -55
  318. package/esm/core/Header/HeaderBasicButton.js +7 -15
  319. package/esm/core/Header/HeaderBreadcrumbs.js +8 -32
  320. package/esm/core/Header/HeaderButton.js +14 -62
  321. package/esm/core/Header/HeaderDropdownButton.js +13 -42
  322. package/esm/core/Header/HeaderLogo.js +5 -36
  323. package/esm/core/Header/HeaderSplitButton.js +14 -61
  324. package/esm/core/Icon/Icon.js +12 -26
  325. package/esm/core/InformationPanel/InformationPanel.js +36 -71
  326. package/esm/core/InformationPanel/InformationPanelContent.js +3 -17
  327. package/esm/core/InformationPanel/InformationPanelHeader.js +8 -32
  328. package/esm/core/InformationPanel/InformationPanelWrapper.js +1 -3
  329. package/esm/core/Input/Input.js +4 -12
  330. package/esm/core/InputGrid/InputGrid.js +2 -11
  331. package/esm/core/InputGroup/InputGroup.js +16 -57
  332. package/esm/core/InputWithDecorations/InputWithDecorations.js +11 -42
  333. package/esm/core/Label/Label.js +5 -26
  334. package/esm/core/LabeledInput/LabeledInput.js +10 -63
  335. package/esm/core/LabeledSelect/LabeledSelect.js +18 -67
  336. package/esm/core/LabeledTextarea/LabeledTextarea.js +2 -8
  337. package/esm/core/List/ListItem.js +28 -46
  338. package/esm/core/Menu/Menu.js +48 -64
  339. package/esm/core/Menu/MenuDivider.js +1 -1
  340. package/esm/core/Menu/MenuExtraContent.js +1 -1
  341. package/esm/core/Menu/MenuItem.js +84 -164
  342. package/esm/core/Menu/MenuItemSkeleton.js +12 -43
  343. package/esm/core/Modal/Modal.js +6 -33
  344. package/esm/core/NonIdealState/ErrorPage.js +123 -173
  345. package/esm/core/NonIdealState/NonIdealState.js +6 -65
  346. package/esm/core/NotificationMarker/NotificationMarker.js +2 -20
  347. package/esm/core/Overlay/Overlay.d.ts +20 -24
  348. package/esm/core/Overlay/Overlay.js +45 -55
  349. package/esm/core/Popover/Popover.js +80 -172
  350. package/esm/core/ProgressIndicators/ProgressLinear.js +5 -40
  351. package/esm/core/ProgressIndicators/ProgressRadial.js +14 -40
  352. package/esm/core/Radio/Radio.js +6 -45
  353. package/esm/core/RadioTiles/RadioTile.js +8 -62
  354. package/esm/core/RadioTiles/RadioTileGroup.js +3 -10
  355. package/esm/core/SearchBox/SearchBox.js +97 -214
  356. package/esm/core/Select/Select.js +130 -265
  357. package/esm/core/Select/SelectTag.js +3 -15
  358. package/esm/core/Select/SelectTagContainer.js +7 -20
  359. package/esm/core/SideNavigation/SideNavigation.js +21 -118
  360. package/esm/core/SideNavigation/SidenavButton.js +2 -24
  361. package/esm/core/SideNavigation/SidenavSubmenu.js +3 -14
  362. package/esm/core/SideNavigation/SidenavSubmenuHeader.js +4 -20
  363. package/esm/core/SkipToContentLink/SkipToContentLink.js +2 -11
  364. package/esm/core/Slider/Slider.js +187 -340
  365. package/esm/core/Slider/Thumb.js +50 -97
  366. package/esm/core/Slider/Track.js +49 -74
  367. package/esm/core/StatusMessage/StatusMessage.js +5 -23
  368. package/esm/core/Stepper/Stepper.js +14 -70
  369. package/esm/core/Stepper/StepperStep.js +29 -92
  370. package/esm/core/Stepper/WorkflowDiagram.js +8 -21
  371. package/esm/core/Stepper/WorkflowDiagramStep.js +4 -22
  372. package/esm/core/Surface/Surface.js +48 -84
  373. package/esm/core/Table/SubRowExpander.js +9 -31
  374. package/esm/core/Table/Table.js +408 -763
  375. package/esm/core/Table/TableCell.js +53 -87
  376. package/esm/core/Table/TablePaginator.js +125 -306
  377. package/esm/core/Table/TableRowMemoized.js +58 -129
  378. package/esm/core/Table/actionHandlers/expandHandler.js +10 -10
  379. package/esm/core/Table/actionHandlers/filterHandler.js +15 -23
  380. package/esm/core/Table/actionHandlers/index.js +1 -5
  381. package/esm/core/Table/actionHandlers/resizeHandler.js +11 -11
  382. package/esm/core/Table/actionHandlers/selectHandler.js +95 -122
  383. package/esm/core/Table/cells/DefaultCell.js +7 -42
  384. package/esm/core/Table/cells/EditableCell.js +41 -70
  385. package/esm/core/Table/columns/actionColumn.js +55 -85
  386. package/esm/core/Table/columns/expanderColumn.js +25 -39
  387. package/esm/core/Table/columns/selectionColumn.js +23 -51
  388. package/esm/core/Table/filters/BaseFilter.js +7 -15
  389. package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +42 -107
  390. package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +52 -110
  391. package/esm/core/Table/filters/FilterButtonBar.js +9 -28
  392. package/esm/core/Table/filters/FilterToggle.js +18 -51
  393. package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +28 -50
  394. package/esm/core/Table/filters/TextFilter/TextFilter.js +20 -32
  395. package/esm/core/Table/filters/customFilterFunctions.js +12 -14
  396. package/esm/core/Table/filters/defaultFilterFunctions.js +79 -84
  397. package/esm/core/Table/filters/tableFilters.js +25 -34
  398. package/esm/core/Table/hooks/useColumnDragAndDrop.js +81 -88
  399. package/esm/core/Table/hooks/useExpanderCell.js +20 -26
  400. package/esm/core/Table/hooks/useResizeColumns.js +287 -353
  401. package/esm/core/Table/hooks/useScrollToRow.js +34 -42
  402. package/esm/core/Table/hooks/useSelectionCell.js +6 -10
  403. package/esm/core/Table/hooks/useStickyColumns.js +59 -61
  404. package/esm/core/Table/hooks/useSubRowFiltering.js +83 -90
  405. package/esm/core/Table/hooks/useSubRowSelection.js +27 -28
  406. package/esm/core/Table/index.js +1 -5
  407. package/esm/core/Table/utils.js +38 -40
  408. package/esm/core/Tabs/Tabs.js +226 -401
  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 -82
  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 +192 -250
  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.d.ts +2 -1
  443. package/esm/core/utils/functions/dom.js +18 -18
  444. package/esm/core/utils/functions/focusable.js +15 -24
  445. package/esm/core/utils/functions/import.js +2 -4
  446. package/esm/core/utils/functions/numbers.d.ts +7 -0
  447. package/esm/core/utils/functions/numbers.js +17 -7
  448. package/esm/core/utils/functions/polymorphic.js +23 -32
  449. package/esm/core/utils/functions/react.js +19 -21
  450. package/esm/core/utils/functions/supports.js +1 -2
  451. package/esm/core/utils/hooks/useContainerWidth.js +13 -16
  452. package/esm/core/utils/hooks/useControlledState.js +8 -17
  453. package/esm/core/utils/hooks/useDragAndDrop.js +81 -100
  454. package/esm/core/utils/hooks/useEventListener.js +18 -18
  455. package/esm/core/utils/hooks/useGlobals.js +21 -27
  456. package/esm/core/utils/hooks/useId.js +3 -4
  457. package/esm/core/utils/hooks/useIntersection.js +19 -25
  458. package/esm/core/utils/hooks/useIsClient.js +5 -5
  459. package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +1 -2
  460. package/esm/core/utils/hooks/useLatestRef.js +5 -5
  461. package/esm/core/utils/hooks/useMediaQuery.js +25 -23
  462. package/esm/core/utils/hooks/useMergedRefs.js +12 -11
  463. package/esm/core/utils/hooks/useOverflow.js +51 -63
  464. package/esm/core/utils/hooks/useResizeObserver.js +12 -17
  465. package/esm/core/utils/hooks/useSafeContext.js +5 -5
  466. package/esm/core/utils/icons/StatusIconMap.js +4 -8
  467. package/esm/core/utils/icons/SvgCalendar.js +2 -7
  468. package/esm/core/utils/icons/SvgCaretDownSmall.js +2 -7
  469. package/esm/core/utils/icons/SvgCaretRightSmall.js +2 -7
  470. package/esm/core/utils/icons/SvgCaretUpSmall.js +2 -7
  471. package/esm/core/utils/icons/SvgCheckmark.js +2 -5
  472. package/esm/core/utils/icons/SvgCheckmarkSmall.js +2 -7
  473. package/esm/core/utils/icons/SvgChevronLeft.js +2 -7
  474. package/esm/core/utils/icons/SvgChevronLeftDouble.js +2 -7
  475. package/esm/core/utils/icons/SvgChevronRight.js +2 -7
  476. package/esm/core/utils/icons/SvgChevronRightDouble.js +2 -7
  477. package/esm/core/utils/icons/SvgClose.js +2 -7
  478. package/esm/core/utils/icons/SvgCloseSmall.js +2 -7
  479. package/esm/core/utils/icons/SvgColumnManager.js +2 -7
  480. package/esm/core/utils/icons/SvgDocument.js +2 -5
  481. package/esm/core/utils/icons/SvgFilter.js +2 -5
  482. package/esm/core/utils/icons/SvgFilterHollow.js +2 -7
  483. package/esm/core/utils/icons/SvgImportantSmall.js +2 -7
  484. package/esm/core/utils/icons/SvgInfoCircular.js +2 -7
  485. package/esm/core/utils/icons/SvgMore.js +2 -7
  486. package/esm/core/utils/icons/SvgMoreVertical.js +2 -7
  487. package/esm/core/utils/icons/SvgNew.js +2 -7
  488. package/esm/core/utils/icons/SvgSearch.js +2 -7
  489. package/esm/core/utils/icons/SvgSmileyHappy.js +2 -7
  490. package/esm/core/utils/icons/SvgSortDown.js +2 -7
  491. package/esm/core/utils/icons/SvgSortUp.js +2 -7
  492. package/esm/core/utils/icons/SvgStatusError.js +2 -7
  493. package/esm/core/utils/icons/SvgStatusSuccess.js +2 -7
  494. package/esm/core/utils/icons/SvgStatusWarning.js +2 -7
  495. package/esm/core/utils/icons/SvgSwap.js +2 -7
  496. package/esm/core/utils/icons/SvgUpload.js +2 -7
  497. package/esm/index.js +3 -21
  498. package/esm/styles.js +414 -425
  499. package/package.json +2 -2
  500. 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; } });