@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.
- package/CHANGELOG.md +13 -0
- package/cjs/core/Alert/Alert.js +46 -106
- package/cjs/core/Avatar/Avatar.js +21 -58
- package/cjs/core/AvatarGroup/AvatarGroup.js +26 -64
- package/cjs/core/Backdrop/Backdrop.js +8 -16
- package/cjs/core/Badge/Badge.js +22 -39
- package/cjs/core/Breadcrumbs/Breadcrumbs.js +61 -138
- package/cjs/core/ButtonGroup/ButtonGroup.js +32 -68
- package/cjs/core/Buttons/Button.js +11 -57
- package/cjs/core/Buttons/DropdownButton.js +15 -49
- package/cjs/core/Buttons/IconButton.js +13 -53
- package/cjs/core/Buttons/IdeasButton.js +8 -20
- package/cjs/core/Buttons/SplitButton.js +43 -103
- package/cjs/core/Carousel/Carousel.js +54 -78
- package/cjs/core/Carousel/CarouselContext.js +4 -4
- package/cjs/core/Carousel/CarouselDot.js +12 -23
- package/cjs/core/Carousel/CarouselDotsList.js +92 -153
- package/cjs/core/Carousel/CarouselNavigation.js +41 -84
- package/cjs/core/Carousel/CarouselSlide.js +26 -49
- package/cjs/core/Carousel/CarouselSlider.js +47 -66
- package/cjs/core/Checkbox/Checkbox.js +32 -88
- package/cjs/core/ColorPicker/ColorBuilder.js +174 -292
- package/cjs/core/ColorPicker/ColorInputPanel.js +246 -411
- package/cjs/core/ColorPicker/ColorPalette.js +23 -47
- package/cjs/core/ColorPicker/ColorPicker.js +53 -87
- package/cjs/core/ColorPicker/ColorPickerContext.js +9 -11
- package/cjs/core/ColorPicker/ColorSwatch.js +15 -40
- package/cjs/core/ComboBox/ComboBox.js +280 -402
- package/cjs/core/ComboBox/ComboBoxEndIcon.js +12 -28
- package/cjs/core/ComboBox/ComboBoxInput.js +131 -207
- package/cjs/core/ComboBox/ComboBoxInputContainer.js +12 -35
- package/cjs/core/ComboBox/ComboBoxMenu.js +43 -87
- package/cjs/core/ComboBox/ComboBoxMenuItem.js +21 -73
- package/cjs/core/ComboBox/ComboBoxMultipleContainer.js +7 -13
- package/cjs/core/ComboBox/helpers.js +43 -47
- package/cjs/core/DatePicker/DatePicker.js +333 -569
- package/cjs/core/Dialog/Dialog.js +36 -65
- package/cjs/core/Dialog/DialogBackdrop.js +27 -47
- package/cjs/core/Dialog/DialogButtonBar.js +3 -3
- package/cjs/core/Dialog/DialogContent.js +18 -26
- package/cjs/core/Dialog/DialogContext.js +5 -5
- package/cjs/core/Dialog/DialogDragContext.js +8 -8
- package/cjs/core/Dialog/DialogMain.js +137 -183
- package/cjs/core/Dialog/DialogTitleBar.js +20 -67
- package/cjs/core/Dialog/DialogTitleBarTitle.js +3 -3
- package/cjs/core/Divider/Divider.js +8 -14
- package/cjs/core/DropdownMenu/DropdownMenu.js +46 -80
- package/cjs/core/ExpandableBlock/ExpandableBlock.js +101 -206
- package/cjs/core/Fieldset/Fieldset.js +14 -25
- package/cjs/core/FileUpload/FileEmptyCard.js +17 -43
- package/cjs/core/FileUpload/FileUpload.js +42 -88
- package/cjs/core/FileUpload/FileUploadCard.js +84 -169
- package/cjs/core/FileUpload/FileUploadTemplate.js +16 -51
- package/cjs/core/Flex/Flex.js +77 -93
- package/cjs/core/Footer/Footer.js +64 -103
- package/cjs/core/Footer/FooterItem.js +3 -3
- package/cjs/core/Footer/FooterList.js +3 -3
- package/cjs/core/Footer/FooterSeparator.js +5 -8
- package/cjs/core/Header/Header.js +22 -67
- package/cjs/core/Header/HeaderBasicButton.js +13 -24
- package/cjs/core/Header/HeaderBreadcrumbs.js +14 -38
- package/cjs/core/Header/HeaderButton.js +22 -76
- package/cjs/core/Header/HeaderDropdownButton.js +20 -48
- package/cjs/core/Header/HeaderLogo.js +11 -42
- package/cjs/core/Header/HeaderSplitButton.js +21 -66
- package/cjs/core/Icon/Icon.js +18 -32
- package/cjs/core/InformationPanel/InformationPanel.js +42 -77
- package/cjs/core/InformationPanel/InformationPanelBody.js +4 -6
- package/cjs/core/InformationPanel/InformationPanelContent.js +8 -20
- package/cjs/core/InformationPanel/InformationPanelHeader.js +14 -34
- package/cjs/core/InformationPanel/InformationPanelWrapper.js +4 -6
- package/cjs/core/Input/Input.js +10 -18
- package/cjs/core/InputGrid/InputGrid.js +8 -17
- package/cjs/core/InputGroup/InputGroup.js +25 -72
- package/cjs/core/InputWithDecorations/InputWithDecorations.js +23 -51
- package/cjs/core/Label/Label.js +11 -32
- package/cjs/core/LabeledInput/LabeledInput.js +20 -70
- package/cjs/core/LabeledSelect/LabeledSelect.js +28 -77
- package/cjs/core/LabeledTextarea/LabeledTextarea.js +7 -13
- package/cjs/core/LinkAction/LinkAction.js +3 -3
- package/cjs/core/List/List.js +3 -3
- package/cjs/core/List/ListItem.js +35 -55
- package/cjs/core/Menu/Menu.js +53 -66
- package/cjs/core/Menu/MenuDivider.js +4 -4
- package/cjs/core/Menu/MenuExtraContent.js +4 -4
- package/cjs/core/Menu/MenuItem.js +92 -168
- package/cjs/core/Menu/MenuItemSkeleton.js +19 -54
- package/cjs/core/Modal/Modal.js +11 -38
- package/cjs/core/Modal/ModalButtonBar.js +4 -7
- package/cjs/core/Modal/ModalContent.js +3 -3
- package/cjs/core/NonIdealState/ErrorPage.js +131 -187
- package/cjs/core/NonIdealState/NonIdealState.js +12 -77
- package/cjs/core/NotificationMarker/NotificationMarker.js +8 -29
- package/cjs/core/Overlay/Overlay.d.ts +20 -24
- package/cjs/core/Overlay/Overlay.js +50 -64
- package/cjs/core/Popover/Popover.js +87 -157
- package/cjs/core/ProgressIndicators/ProgressLinear.js +11 -49
- package/cjs/core/ProgressIndicators/ProgressRadial.js +19 -51
- package/cjs/core/Radio/Radio.js +12 -54
- package/cjs/core/RadioTiles/RadioTile.js +14 -80
- package/cjs/core/RadioTiles/RadioTileGroup.js +9 -16
- package/cjs/core/SearchBox/SearchBox.js +104 -221
- package/cjs/core/Select/Select.js +141 -276
- package/cjs/core/Select/SelectTag.js +9 -21
- package/cjs/core/Select/SelectTagContainer.js +14 -30
- package/cjs/core/SideNavigation/SideNavigation.js +29 -138
- package/cjs/core/SideNavigation/SidenavButton.js +8 -30
- package/cjs/core/SideNavigation/SidenavSubmenu.js +9 -23
- package/cjs/core/SideNavigation/SidenavSubmenuHeader.js +10 -29
- package/cjs/core/SkipToContentLink/SkipToContentLink.js +8 -20
- package/cjs/core/Slider/Slider.js +195 -376
- package/cjs/core/Slider/Thumb.js +57 -108
- package/cjs/core/Slider/Track.js +55 -83
- package/cjs/core/StatusMessage/StatusMessage.js +12 -34
- package/cjs/core/Stepper/Stepper.js +21 -80
- package/cjs/core/Stepper/StepperStep.js +36 -109
- package/cjs/core/Stepper/WorkflowDiagram.js +15 -38
- package/cjs/core/Stepper/WorkflowDiagramStep.js +11 -39
- package/cjs/core/Surface/Surface.js +54 -94
- package/cjs/core/Table/SubRowExpander.js +15 -37
- package/cjs/core/Table/Table.js +419 -763
- package/cjs/core/Table/TableCell.js +63 -113
- package/cjs/core/Table/TablePaginator.js +136 -312
- package/cjs/core/Table/TableRowMemoized.js +64 -137
- package/cjs/core/Table/actionHandlers/expandHandler.js +12 -12
- package/cjs/core/Table/actionHandlers/filterHandler.js +17 -25
- package/cjs/core/Table/actionHandlers/index.js +14 -56
- package/cjs/core/Table/actionHandlers/resizeHandler.js +13 -13
- package/cjs/core/Table/actionHandlers/selectHandler.js +98 -128
- package/cjs/core/Table/cells/DefaultCell.js +13 -48
- package/cjs/core/Table/cells/EditableCell.js +46 -75
- package/cjs/core/Table/cells/index.js +6 -16
- package/cjs/core/Table/columns/actionColumn.js +67 -97
- package/cjs/core/Table/columns/expanderColumn.js +32 -46
- package/cjs/core/Table/columns/index.js +11 -41
- package/cjs/core/Table/columns/selectionColumn.js +29 -57
- package/cjs/core/Table/filters/BaseFilter.js +13 -24
- package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js +52 -120
- package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js +60 -120
- package/cjs/core/Table/filters/FilterButtonBar.js +16 -39
- package/cjs/core/Table/filters/FilterToggle.js +26 -62
- package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +36 -58
- package/cjs/core/Table/filters/TextFilter/TextFilter.js +28 -40
- package/cjs/core/Table/filters/customFilterFunctions.js +14 -16
- package/cjs/core/Table/filters/defaultFilterFunctions.js +81 -86
- package/cjs/core/Table/filters/index.js +11 -35
- package/cjs/core/Table/filters/tableFilters.js +32 -44
- package/cjs/core/Table/filters/types.js +2 -2
- package/cjs/core/Table/hooks/index.js +19 -67
- package/cjs/core/Table/hooks/useColumnDragAndDrop.js +86 -101
- package/cjs/core/Table/hooks/useExpanderCell.js +25 -33
- package/cjs/core/Table/hooks/useResizeColumns.js +290 -362
- package/cjs/core/Table/hooks/useScrollToRow.js +38 -46
- package/cjs/core/Table/hooks/useSelectionCell.js +10 -17
- package/cjs/core/Table/hooks/useStickyColumns.js +62 -64
- package/cjs/core/Table/hooks/useSubRowFiltering.js +88 -95
- package/cjs/core/Table/hooks/useSubRowSelection.js +31 -32
- package/cjs/core/Table/index.js +18 -78
- package/cjs/core/Table/utils.js +40 -42
- package/cjs/core/Tabs/Tabs.js +232 -417
- package/cjs/core/Tag/Tag.js +15 -42
- package/cjs/core/Tag/TagContainer.js +11 -23
- package/cjs/core/Textarea/Textarea.js +6 -11
- package/cjs/core/ThemeProvider/ThemeContext.js +4 -4
- package/cjs/core/ThemeProvider/ThemeProvider.js +52 -105
- package/cjs/core/Tile/Tile.js +230 -410
- package/cjs/core/TimePicker/TimePicker.js +234 -458
- package/cjs/core/Toast/Toast.js +107 -204
- package/cjs/core/Toast/Toaster.js +77 -102
- package/cjs/core/ToggleSwitch/ToggleSwitch.js +23 -66
- package/cjs/core/Tooltip/Tooltip.js +91 -137
- package/cjs/core/TransferList/TransferList.js +103 -177
- package/cjs/core/Tree/Tree.js +129 -204
- package/cjs/core/Tree/TreeContext.js +9 -9
- package/cjs/core/Tree/TreeNode.js +104 -207
- package/cjs/core/Tree/TreeNodeExpander.js +12 -26
- package/cjs/core/Typography/Anchor.js +3 -3
- package/cjs/core/Typography/Blockquote.js +10 -18
- package/cjs/core/Typography/Code.js +3 -3
- package/cjs/core/Typography/Kbd.js +21 -30
- package/cjs/core/Typography/Text.js +13 -26
- package/cjs/core/VisuallyHidden/VisuallyHidden.js +8 -14
- package/cjs/core/utils/color/ColorValue.js +453 -535
- package/cjs/core/utils/color/index.js +4 -4
- package/cjs/core/utils/components/AutoclearingHiddenLiveRegion.js +13 -20
- package/cjs/core/utils/components/Box.js +3 -3
- package/cjs/core/utils/components/ButtonBase.js +20 -38
- package/cjs/core/utils/components/FocusTrap.js +38 -47
- package/cjs/core/utils/components/InputContainer.js +19 -58
- package/cjs/core/utils/components/InputFlexContainer.js +8 -24
- package/cjs/core/utils/components/MiddleTextTruncation.js +22 -32
- package/cjs/core/utils/components/Portal.js +20 -22
- package/cjs/core/utils/components/Resizer.js +196 -253
- package/cjs/core/utils/components/VirtualScroll.js +223 -304
- package/cjs/core/utils/components/WithCSSTransition.js +32 -49
- package/cjs/core/utils/components/index.js +14 -14
- package/cjs/core/utils/functions/colors.js +22 -25
- package/cjs/core/utils/functions/date.js +10 -10
- package/cjs/core/utils/functions/dev.js +14 -13
- package/cjs/core/utils/functions/dom.d.ts +2 -1
- package/cjs/core/utils/functions/dom.js +22 -25
- package/cjs/core/utils/functions/focusable.js +17 -26
- package/cjs/core/utils/functions/import.js +23 -46
- package/cjs/core/utils/functions/index.js +13 -13
- package/cjs/core/utils/functions/numbers.d.ts +7 -0
- package/cjs/core/utils/functions/numbers.js +21 -10
- package/cjs/core/utils/functions/polymorphic.js +30 -43
- package/cjs/core/utils/functions/react.js +24 -26
- package/cjs/core/utils/functions/supports.js +4 -5
- package/cjs/core/utils/hooks/index.js +17 -17
- package/cjs/core/utils/hooks/useContainerWidth.js +19 -26
- package/cjs/core/utils/hooks/useControlledState.js +12 -21
- package/cjs/core/utils/hooks/useDragAndDrop.js +87 -110
- package/cjs/core/utils/hooks/useEventListener.js +22 -22
- package/cjs/core/utils/hooks/useGlobals.js +27 -33
- package/cjs/core/utils/hooks/useId.js +8 -10
- package/cjs/core/utils/hooks/useIntersection.js +24 -30
- package/cjs/core/utils/hooks/useIsClient.js +9 -9
- package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +5 -6
- package/cjs/core/utils/hooks/useLatestRef.js +9 -9
- package/cjs/core/utils/hooks/useMediaQuery.js +31 -31
- package/cjs/core/utils/hooks/useMergedRefs.js +16 -15
- package/cjs/core/utils/hooks/useOverflow.js +57 -70
- package/cjs/core/utils/hooks/useResizeObserver.js +17 -22
- package/cjs/core/utils/hooks/useSafeContext.js +9 -9
- package/cjs/core/utils/icons/StatusIconMap.js +12 -28
- package/cjs/core/utils/icons/Svg.js +3 -3
- package/cjs/core/utils/icons/SvgCalendar.js +7 -12
- package/cjs/core/utils/icons/SvgCaretDownSmall.js +7 -12
- package/cjs/core/utils/icons/SvgCaretRightSmall.js +7 -12
- package/cjs/core/utils/icons/SvgCaretUpSmall.js +7 -12
- package/cjs/core/utils/icons/SvgCheckmark.js +7 -10
- package/cjs/core/utils/icons/SvgCheckmarkSmall.js +7 -12
- package/cjs/core/utils/icons/SvgChevronLeft.js +7 -12
- package/cjs/core/utils/icons/SvgChevronLeftDouble.js +7 -12
- package/cjs/core/utils/icons/SvgChevronRight.js +7 -12
- package/cjs/core/utils/icons/SvgChevronRightDouble.js +7 -12
- package/cjs/core/utils/icons/SvgClose.js +7 -12
- package/cjs/core/utils/icons/SvgCloseSmall.js +7 -12
- package/cjs/core/utils/icons/SvgColumnManager.js +7 -12
- package/cjs/core/utils/icons/SvgDocument.js +7 -10
- package/cjs/core/utils/icons/SvgFilter.js +7 -10
- package/cjs/core/utils/icons/SvgFilterHollow.js +7 -12
- package/cjs/core/utils/icons/SvgImportantSmall.js +7 -12
- package/cjs/core/utils/icons/SvgInfoCircular.js +7 -12
- package/cjs/core/utils/icons/SvgMore.js +7 -12
- package/cjs/core/utils/icons/SvgMoreVertical.js +7 -12
- package/cjs/core/utils/icons/SvgNew.js +7 -12
- package/cjs/core/utils/icons/SvgSearch.js +7 -12
- package/cjs/core/utils/icons/SvgSmileyHappy.js +7 -12
- package/cjs/core/utils/icons/SvgSortDown.js +7 -12
- package/cjs/core/utils/icons/SvgSortUp.js +7 -12
- package/cjs/core/utils/icons/SvgStatusError.js +7 -12
- package/cjs/core/utils/icons/SvgStatusSuccess.js +7 -12
- package/cjs/core/utils/icons/SvgStatusWarning.js +7 -12
- package/cjs/core/utils/icons/SvgSwap.js +7 -12
- package/cjs/core/utils/icons/SvgUpload.js +7 -12
- package/cjs/core/utils/icons/index.js +34 -34
- package/cjs/core/utils/index.js +10 -10
- package/cjs/core/utils/props.js +2 -2
- package/cjs/core/utils/types.js +2 -2
- package/cjs/index.js +229 -949
- package/cjs/react-table/react-table.js +2 -2
- package/cjs/styles.js +412 -425
- package/esm/core/Alert/Alert.js +39 -106
- package/esm/core/Avatar/Avatar.js +14 -42
- package/esm/core/AvatarGroup/AvatarGroup.js +20 -58
- package/esm/core/Backdrop/Backdrop.js +2 -10
- package/esm/core/Badge/Badge.js +16 -31
- package/esm/core/Breadcrumbs/Breadcrumbs.js +55 -135
- package/esm/core/ButtonGroup/ButtonGroup.js +25 -61
- package/esm/core/Buttons/Button.js +5 -45
- package/esm/core/Buttons/DropdownButton.js +7 -37
- package/esm/core/Buttons/IconButton.js +5 -40
- package/esm/core/Buttons/IdeasButton.js +2 -12
- package/esm/core/Buttons/SplitButton.js +34 -101
- package/esm/core/Carousel/Carousel.js +43 -72
- package/esm/core/Carousel/CarouselDot.js +6 -17
- package/esm/core/Carousel/CarouselDotsList.js +85 -147
- package/esm/core/Carousel/CarouselNavigation.js +32 -68
- package/esm/core/Carousel/CarouselSlide.js +19 -41
- package/esm/core/Carousel/CarouselSlider.js +41 -65
- package/esm/core/Checkbox/Checkbox.js +25 -78
- package/esm/core/ColorPicker/ColorBuilder.js +167 -280
- package/esm/core/ColorPicker/ColorInputPanel.js +237 -395
- package/esm/core/ColorPicker/ColorPalette.js +14 -35
- package/esm/core/ColorPicker/ColorPicker.js +46 -79
- package/esm/core/ColorPicker/ColorPickerContext.js +5 -7
- package/esm/core/ColorPicker/ColorSwatch.js +7 -24
- package/esm/core/ComboBox/ComboBox.js +267 -396
- package/esm/core/ComboBox/ComboBoxEndIcon.js +5 -18
- package/esm/core/ComboBox/ComboBoxInput.js +125 -197
- package/esm/core/ComboBox/ComboBoxInputContainer.js +5 -20
- package/esm/core/ComboBox/ComboBoxMenu.js +37 -77
- package/esm/core/ComboBox/ComboBoxMenuItem.js +14 -61
- package/esm/core/ComboBox/ComboBoxMultipleContainer.js +2 -6
- package/esm/core/ComboBox/helpers.js +38 -38
- package/esm/core/DatePicker/DatePicker.js +326 -555
- package/esm/core/Dialog/Dialog.js +24 -53
- package/esm/core/Dialog/DialogBackdrop.js +19 -39
- package/esm/core/Dialog/DialogContent.js +12 -20
- package/esm/core/Dialog/DialogContext.js +1 -1
- package/esm/core/Dialog/DialogDragContext.js +4 -4
- package/esm/core/Dialog/DialogMain.js +128 -177
- package/esm/core/Dialog/DialogTitleBar.js +10 -45
- package/esm/core/Divider/Divider.js +2 -8
- package/esm/core/DropdownMenu/DropdownMenu.js +40 -75
- package/esm/core/ExpandableBlock/ExpandableBlock.js +92 -193
- package/esm/core/Fieldset/Fieldset.js +8 -19
- package/esm/core/FileUpload/FileEmptyCard.js +8 -19
- package/esm/core/FileUpload/FileUpload.js +36 -72
- package/esm/core/FileUpload/FileUploadCard.js +76 -153
- package/esm/core/FileUpload/FileUploadTemplate.js +9 -37
- package/esm/core/Flex/Flex.js +71 -87
- package/esm/core/Footer/Footer.js +55 -86
- package/esm/core/Footer/FooterSeparator.js +1 -1
- package/esm/core/Header/Header.js +14 -55
- package/esm/core/Header/HeaderBasicButton.js +7 -15
- package/esm/core/Header/HeaderBreadcrumbs.js +8 -32
- package/esm/core/Header/HeaderButton.js +14 -62
- package/esm/core/Header/HeaderDropdownButton.js +13 -42
- package/esm/core/Header/HeaderLogo.js +5 -36
- package/esm/core/Header/HeaderSplitButton.js +14 -61
- package/esm/core/Icon/Icon.js +12 -26
- package/esm/core/InformationPanel/InformationPanel.js +36 -71
- package/esm/core/InformationPanel/InformationPanelContent.js +3 -17
- package/esm/core/InformationPanel/InformationPanelHeader.js +8 -32
- package/esm/core/InformationPanel/InformationPanelWrapper.js +1 -3
- package/esm/core/Input/Input.js +4 -12
- package/esm/core/InputGrid/InputGrid.js +2 -11
- package/esm/core/InputGroup/InputGroup.js +16 -57
- package/esm/core/InputWithDecorations/InputWithDecorations.js +11 -42
- package/esm/core/Label/Label.js +5 -26
- package/esm/core/LabeledInput/LabeledInput.js +10 -63
- package/esm/core/LabeledSelect/LabeledSelect.js +18 -67
- package/esm/core/LabeledTextarea/LabeledTextarea.js +2 -8
- package/esm/core/List/ListItem.js +28 -46
- package/esm/core/Menu/Menu.js +48 -64
- package/esm/core/Menu/MenuDivider.js +1 -1
- package/esm/core/Menu/MenuExtraContent.js +1 -1
- package/esm/core/Menu/MenuItem.js +84 -164
- package/esm/core/Menu/MenuItemSkeleton.js +12 -43
- package/esm/core/Modal/Modal.js +6 -33
- package/esm/core/NonIdealState/ErrorPage.js +123 -173
- package/esm/core/NonIdealState/NonIdealState.js +6 -65
- package/esm/core/NotificationMarker/NotificationMarker.js +2 -20
- package/esm/core/Overlay/Overlay.d.ts +20 -24
- package/esm/core/Overlay/Overlay.js +45 -55
- package/esm/core/Popover/Popover.js +80 -172
- package/esm/core/ProgressIndicators/ProgressLinear.js +5 -40
- package/esm/core/ProgressIndicators/ProgressRadial.js +14 -40
- package/esm/core/Radio/Radio.js +6 -45
- package/esm/core/RadioTiles/RadioTile.js +8 -62
- package/esm/core/RadioTiles/RadioTileGroup.js +3 -10
- package/esm/core/SearchBox/SearchBox.js +97 -214
- package/esm/core/Select/Select.js +130 -265
- package/esm/core/Select/SelectTag.js +3 -15
- package/esm/core/Select/SelectTagContainer.js +7 -20
- package/esm/core/SideNavigation/SideNavigation.js +21 -118
- package/esm/core/SideNavigation/SidenavButton.js +2 -24
- package/esm/core/SideNavigation/SidenavSubmenu.js +3 -14
- package/esm/core/SideNavigation/SidenavSubmenuHeader.js +4 -20
- package/esm/core/SkipToContentLink/SkipToContentLink.js +2 -11
- package/esm/core/Slider/Slider.js +187 -340
- package/esm/core/Slider/Thumb.js +50 -97
- package/esm/core/Slider/Track.js +49 -74
- package/esm/core/StatusMessage/StatusMessage.js +5 -23
- package/esm/core/Stepper/Stepper.js +14 -70
- package/esm/core/Stepper/StepperStep.js +29 -92
- package/esm/core/Stepper/WorkflowDiagram.js +8 -21
- package/esm/core/Stepper/WorkflowDiagramStep.js +4 -22
- package/esm/core/Surface/Surface.js +48 -84
- package/esm/core/Table/SubRowExpander.js +9 -31
- package/esm/core/Table/Table.js +408 -763
- package/esm/core/Table/TableCell.js +53 -87
- package/esm/core/Table/TablePaginator.js +125 -306
- package/esm/core/Table/TableRowMemoized.js +58 -129
- package/esm/core/Table/actionHandlers/expandHandler.js +10 -10
- package/esm/core/Table/actionHandlers/filterHandler.js +15 -23
- package/esm/core/Table/actionHandlers/index.js +1 -5
- package/esm/core/Table/actionHandlers/resizeHandler.js +11 -11
- package/esm/core/Table/actionHandlers/selectHandler.js +95 -122
- package/esm/core/Table/cells/DefaultCell.js +7 -42
- package/esm/core/Table/cells/EditableCell.js +41 -70
- package/esm/core/Table/columns/actionColumn.js +55 -85
- package/esm/core/Table/columns/expanderColumn.js +25 -39
- package/esm/core/Table/columns/selectionColumn.js +23 -51
- package/esm/core/Table/filters/BaseFilter.js +7 -15
- package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +42 -107
- package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +52 -110
- package/esm/core/Table/filters/FilterButtonBar.js +9 -28
- package/esm/core/Table/filters/FilterToggle.js +18 -51
- package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +28 -50
- package/esm/core/Table/filters/TextFilter/TextFilter.js +20 -32
- package/esm/core/Table/filters/customFilterFunctions.js +12 -14
- package/esm/core/Table/filters/defaultFilterFunctions.js +79 -84
- package/esm/core/Table/filters/tableFilters.js +25 -34
- package/esm/core/Table/hooks/useColumnDragAndDrop.js +81 -88
- package/esm/core/Table/hooks/useExpanderCell.js +20 -26
- package/esm/core/Table/hooks/useResizeColumns.js +287 -353
- package/esm/core/Table/hooks/useScrollToRow.js +34 -42
- package/esm/core/Table/hooks/useSelectionCell.js +6 -10
- package/esm/core/Table/hooks/useStickyColumns.js +59 -61
- package/esm/core/Table/hooks/useSubRowFiltering.js +83 -90
- package/esm/core/Table/hooks/useSubRowSelection.js +27 -28
- package/esm/core/Table/index.js +1 -5
- package/esm/core/Table/utils.js +38 -40
- package/esm/core/Tabs/Tabs.js +226 -401
- package/esm/core/Tag/Tag.js +8 -35
- package/esm/core/Tag/TagContainer.js +5 -17
- package/esm/core/Textarea/Textarea.js +1 -6
- package/esm/core/ThemeProvider/ThemeProvider.js +44 -101
- package/esm/core/Tile/Tile.js +218 -386
- package/esm/core/TimePicker/TimePicker.js +228 -448
- package/esm/core/Toast/Toast.js +99 -193
- package/esm/core/Toast/Toaster.js +69 -82
- package/esm/core/ToggleSwitch/ToggleSwitch.js +17 -60
- package/esm/core/Tooltip/Tooltip.js +86 -151
- package/esm/core/TransferList/TransferList.js +93 -157
- package/esm/core/Tree/Tree.js +122 -196
- package/esm/core/Tree/TreeContext.js +5 -5
- package/esm/core/Tree/TreeNode.js +96 -195
- package/esm/core/Tree/TreeNodeExpander.js +5 -16
- package/esm/core/Typography/Blockquote.js +4 -12
- package/esm/core/Typography/Kbd.js +15 -24
- package/esm/core/Typography/Text.js +7 -20
- package/esm/core/VisuallyHidden/VisuallyHidden.js +2 -8
- package/esm/core/utils/color/ColorValue.js +449 -524
- package/esm/core/utils/components/AutoclearingHiddenLiveRegion.js +7 -11
- package/esm/core/utils/components/ButtonBase.js +13 -31
- package/esm/core/utils/components/FocusTrap.js +32 -41
- package/esm/core/utils/components/InputContainer.js +11 -50
- package/esm/core/utils/components/InputFlexContainer.js +2 -15
- package/esm/core/utils/components/MiddleTextTruncation.js +17 -27
- package/esm/core/utils/components/Portal.js +12 -12
- package/esm/core/utils/components/Resizer.js +192 -250
- package/esm/core/utils/components/VirtualScroll.js +218 -297
- package/esm/core/utils/components/WithCSSTransition.js +26 -43
- package/esm/core/utils/functions/colors.js +19 -19
- package/esm/core/utils/functions/date.js +8 -8
- package/esm/core/utils/functions/dev.js +12 -11
- package/esm/core/utils/functions/dom.d.ts +2 -1
- package/esm/core/utils/functions/dom.js +18 -18
- package/esm/core/utils/functions/focusable.js +15 -24
- package/esm/core/utils/functions/import.js +2 -4
- package/esm/core/utils/functions/numbers.d.ts +7 -0
- package/esm/core/utils/functions/numbers.js +17 -7
- package/esm/core/utils/functions/polymorphic.js +23 -32
- package/esm/core/utils/functions/react.js +19 -21
- package/esm/core/utils/functions/supports.js +1 -2
- package/esm/core/utils/hooks/useContainerWidth.js +13 -16
- package/esm/core/utils/hooks/useControlledState.js +8 -17
- package/esm/core/utils/hooks/useDragAndDrop.js +81 -100
- package/esm/core/utils/hooks/useEventListener.js +18 -18
- package/esm/core/utils/hooks/useGlobals.js +21 -27
- package/esm/core/utils/hooks/useId.js +3 -4
- package/esm/core/utils/hooks/useIntersection.js +19 -25
- package/esm/core/utils/hooks/useIsClient.js +5 -5
- package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +1 -2
- package/esm/core/utils/hooks/useLatestRef.js +5 -5
- package/esm/core/utils/hooks/useMediaQuery.js +25 -23
- package/esm/core/utils/hooks/useMergedRefs.js +12 -11
- package/esm/core/utils/hooks/useOverflow.js +51 -63
- package/esm/core/utils/hooks/useResizeObserver.js +12 -17
- package/esm/core/utils/hooks/useSafeContext.js +5 -5
- package/esm/core/utils/icons/StatusIconMap.js +4 -8
- package/esm/core/utils/icons/SvgCalendar.js +2 -7
- package/esm/core/utils/icons/SvgCaretDownSmall.js +2 -7
- package/esm/core/utils/icons/SvgCaretRightSmall.js +2 -7
- package/esm/core/utils/icons/SvgCaretUpSmall.js +2 -7
- package/esm/core/utils/icons/SvgCheckmark.js +2 -5
- package/esm/core/utils/icons/SvgCheckmarkSmall.js +2 -7
- package/esm/core/utils/icons/SvgChevronLeft.js +2 -7
- package/esm/core/utils/icons/SvgChevronLeftDouble.js +2 -7
- package/esm/core/utils/icons/SvgChevronRight.js +2 -7
- package/esm/core/utils/icons/SvgChevronRightDouble.js +2 -7
- package/esm/core/utils/icons/SvgClose.js +2 -7
- package/esm/core/utils/icons/SvgCloseSmall.js +2 -7
- package/esm/core/utils/icons/SvgColumnManager.js +2 -7
- package/esm/core/utils/icons/SvgDocument.js +2 -5
- package/esm/core/utils/icons/SvgFilter.js +2 -5
- package/esm/core/utils/icons/SvgFilterHollow.js +2 -7
- package/esm/core/utils/icons/SvgImportantSmall.js +2 -7
- package/esm/core/utils/icons/SvgInfoCircular.js +2 -7
- package/esm/core/utils/icons/SvgMore.js +2 -7
- package/esm/core/utils/icons/SvgMoreVertical.js +2 -7
- package/esm/core/utils/icons/SvgNew.js +2 -7
- package/esm/core/utils/icons/SvgSearch.js +2 -7
- package/esm/core/utils/icons/SvgSmileyHappy.js +2 -7
- package/esm/core/utils/icons/SvgSortDown.js +2 -7
- package/esm/core/utils/icons/SvgSortUp.js +2 -7
- package/esm/core/utils/icons/SvgStatusError.js +2 -7
- package/esm/core/utils/icons/SvgStatusSuccess.js +2 -7
- package/esm/core/utils/icons/SvgStatusWarning.js +2 -7
- package/esm/core/utils/icons/SvgSwap.js +2 -7
- package/esm/core/utils/icons/SvgUpload.js +2 -7
- package/esm/index.js +3 -21
- package/esm/styles.js +414 -425
- package/package.json +2 -2
- package/styles.css +6 -6
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useIntersection = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
10
|
-
const dom_js_1 = require(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
|
+
const dom_js_1 = require("../functions/dom.js");
|
|
11
11
|
/**
|
|
12
12
|
* Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
|
|
13
13
|
* Callback is called only once by default (can be changed using the `once` parameter).
|
|
@@ -21,31 +21,25 @@ const dom_js_1 = require('../functions/dom.js');
|
|
|
21
21
|
* return (<div ref={ref}>One of many elements</div>);
|
|
22
22
|
*/
|
|
23
23
|
const useIntersection = (onIntersect, options = {}, once = true) => {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
24
|
+
const { root, rootMargin, threshold } = options;
|
|
25
|
+
const cleanupRef = React.useRef(() => { });
|
|
26
|
+
const setRef = React.useCallback((node) => {
|
|
27
|
+
cleanupRef.current?.();
|
|
28
|
+
cleanupRef.current = () => { }; // ensure it doesn't try to clean up again
|
|
29
|
+
if (!node || !(0, dom_js_1.getWindow)()?.IntersectionObserver) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
const observer = new IntersectionObserver(([entry], obs) => {
|
|
33
|
+
if (entry.isIntersecting) {
|
|
34
|
+
if (once) {
|
|
35
|
+
obs.disconnect();
|
|
36
|
+
}
|
|
37
|
+
onIntersect();
|
|
38
38
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
observer.observe(node);
|
|
45
|
-
cleanupRef.current = () => observer.disconnect();
|
|
46
|
-
},
|
|
47
|
-
[onIntersect, once, root, rootMargin, threshold],
|
|
48
|
-
);
|
|
49
|
-
return setRef;
|
|
39
|
+
}, { root, rootMargin, threshold });
|
|
40
|
+
observer.observe(node);
|
|
41
|
+
cleanupRef.current = () => observer.disconnect();
|
|
42
|
+
}, [onIntersect, once, root, rootMargin, threshold]);
|
|
43
|
+
return setRef;
|
|
50
44
|
};
|
|
51
45
|
exports.useIntersection = useIntersection;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useIsClient = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
10
|
const useIsClient = () => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
const [isClient, setIsClient] = React.useState(false);
|
|
12
|
+
React.useEffect(() => {
|
|
13
|
+
setIsClient(true);
|
|
14
|
+
}, []);
|
|
15
|
+
return isClient;
|
|
16
16
|
};
|
|
17
17
|
exports.useIsClient = useIsClient;
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useIsomorphicLayoutEffect = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
10
|
/**
|
|
11
11
|
* SSR-safe version of `useLayoutEffect` that replaces it with `useEffect` on the server.
|
|
12
12
|
*
|
|
13
13
|
* @see https://fb.me/react-uselayouteffect-ssr
|
|
14
14
|
*/
|
|
15
|
-
exports.useIsomorphicLayoutEffect =
|
|
16
|
-
typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
15
|
+
exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useLatestRef = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
10
|
/**
|
|
11
11
|
* Hook that keeps track of the latest value in a ref.
|
|
12
12
|
* @private
|
|
@@ -15,10 +15,10 @@ const React = tslib_1.__importStar(require('react'));
|
|
|
15
15
|
* const valueRef = useLatestRef(value);
|
|
16
16
|
*/
|
|
17
17
|
const useLatestRef = (value) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
const valueRef = React.useRef(value);
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
valueRef.current = value;
|
|
21
|
+
}, [value]);
|
|
22
|
+
return valueRef;
|
|
23
23
|
};
|
|
24
24
|
exports.useLatestRef = useLatestRef;
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useMediaQuery = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
10
|
-
const index_js_1 = require(
|
|
11
|
-
const useIsomorphicLayoutEffect_js_1 = require(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
|
+
const index_js_1 = require("../functions/index.js");
|
|
11
|
+
const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
|
|
12
12
|
const useMediaQuery = (queryString) => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
13
|
+
const [matches, setMatches] = React.useState();
|
|
14
|
+
(0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
|
|
15
|
+
const mediaQueryList = (0, index_js_1.getWindow)()?.matchMedia?.(queryString);
|
|
16
|
+
const handleChange = ({ matches }) => setMatches(matches);
|
|
17
|
+
if (mediaQueryList != undefined) {
|
|
18
|
+
setMatches(mediaQueryList.matches);
|
|
19
|
+
try {
|
|
20
|
+
mediaQueryList.addEventListener('change', handleChange);
|
|
21
|
+
}
|
|
22
|
+
catch {
|
|
23
|
+
// Safari 13 fallback
|
|
24
|
+
mediaQueryList.addListener?.(handleChange);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return () => {
|
|
28
|
+
try {
|
|
29
|
+
mediaQueryList?.removeEventListener('change', handleChange);
|
|
30
|
+
}
|
|
31
|
+
catch {
|
|
32
|
+
// Safari 13 fallback
|
|
33
|
+
mediaQueryList?.removeListener?.(handleChange);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}, [queryString]);
|
|
37
|
+
return !!matches;
|
|
38
38
|
};
|
|
39
39
|
exports.useMediaQuery = useMediaQuery;
|
|
40
40
|
exports.default = exports.useMediaQuery;
|
|
@@ -1,32 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useMergedRefs = exports.mergeRefs = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
10
|
/**
|
|
11
11
|
* Function that merges the provided refs into one.
|
|
12
12
|
*/
|
|
13
13
|
const mergeRefs = (...refs) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
return (instance) => {
|
|
15
|
+
refs.forEach((ref) => {
|
|
16
|
+
if (typeof ref === 'function') {
|
|
17
|
+
ref(instance);
|
|
18
|
+
}
|
|
19
|
+
else if (ref) {
|
|
20
|
+
ref.current = instance;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
};
|
|
23
24
|
};
|
|
24
25
|
exports.mergeRefs = mergeRefs;
|
|
25
26
|
/**
|
|
26
27
|
* Returns a ref callback that merges the provided refs using `mergeRefs`.
|
|
27
28
|
*/
|
|
28
29
|
const useMergedRefs = (...refs) => {
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
31
|
+
return React.useCallback((0, exports.mergeRefs)(...refs), [...refs]);
|
|
31
32
|
};
|
|
32
33
|
exports.useMergedRefs = useMergedRefs;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useOverflow = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
10
|
-
const useMergedRefs_js_1 = require(
|
|
11
|
-
const useResizeObserver_js_1 = require(
|
|
12
|
-
const useIsomorphicLayoutEffect_js_1 = require(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
|
+
const useMergedRefs_js_1 = require("./useMergedRefs.js");
|
|
11
|
+
const useResizeObserver_js_1 = require("./useResizeObserver.js");
|
|
12
|
+
const useIsomorphicLayoutEffect_js_1 = require("./useIsomorphicLayoutEffect.js");
|
|
13
13
|
const STARTING_MAX_ITEMS_COUNT = 20;
|
|
14
14
|
/**
|
|
15
15
|
* Hook that observes the size of an element and returns the number of items
|
|
@@ -34,69 +34,56 @@ const STARTING_MAX_ITEMS_COUNT = 20;
|
|
|
34
34
|
* );
|
|
35
35
|
*/
|
|
36
36
|
const useOverflow = (items, disabled = false, orientation = 'horizontal') => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
resizeObserverRef.current?.disconnect();
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
|
|
71
|
-
const availableSize = containerRef.current[`offset${dimension}`];
|
|
72
|
-
const requiredSize = containerRef.current[`scroll${dimension}`];
|
|
73
|
-
if (availableSize < requiredSize) {
|
|
74
|
-
const avgItemSize = requiredSize / visibleCount;
|
|
75
|
-
const visibleItems = Math.floor(availableSize / avgItemSize);
|
|
76
|
-
/* When first item is larger than the container - visibleItems count is 0,
|
|
37
|
+
const containerRef = React.useRef(null);
|
|
38
|
+
const [visibleCount, setVisibleCount] = React.useState(() => disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
|
|
39
|
+
const needsFullRerender = React.useRef(true);
|
|
40
|
+
const [containerSize, setContainerSize] = React.useState(0);
|
|
41
|
+
const previousContainerSize = React.useRef(0);
|
|
42
|
+
const updateContainerSize = React.useCallback(({ width, height }) => setContainerSize(orientation === 'horizontal' ? width : height), [orientation]);
|
|
43
|
+
const [resizeRef, observer] = (0, useResizeObserver_js_1.useResizeObserver)(updateContainerSize);
|
|
44
|
+
const resizeObserverRef = React.useRef(observer);
|
|
45
|
+
(0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
|
|
46
|
+
if (disabled) {
|
|
47
|
+
setVisibleCount(items.length);
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
|
|
51
|
+
needsFullRerender.current = true;
|
|
52
|
+
}
|
|
53
|
+
}, [containerSize, disabled, items]);
|
|
54
|
+
const mergedRefs = (0, useMergedRefs_js_1.useMergedRefs)(containerRef, resizeRef);
|
|
55
|
+
(0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
|
|
56
|
+
if (!containerRef.current || disabled) {
|
|
57
|
+
resizeObserverRef.current?.disconnect();
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const dimension = orientation === 'horizontal' ? 'Width' : 'Height';
|
|
61
|
+
const availableSize = containerRef.current[`offset${dimension}`];
|
|
62
|
+
const requiredSize = containerRef.current[`scroll${dimension}`];
|
|
63
|
+
if (availableSize < requiredSize) {
|
|
64
|
+
const avgItemSize = requiredSize / visibleCount;
|
|
65
|
+
const visibleItems = Math.floor(availableSize / avgItemSize);
|
|
66
|
+
/* When first item is larger than the container - visibleItems count is 0,
|
|
77
67
|
We can assume that at least some part of the first item is visible and return 1. */
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
previousContainerSize.current = containerSize;
|
|
99
|
-
}, [containerSize]);
|
|
100
|
-
return [mergedRefs, visibleCount];
|
|
68
|
+
setVisibleCount(visibleItems > 0 ? visibleItems : 1);
|
|
69
|
+
}
|
|
70
|
+
else if (needsFullRerender.current) {
|
|
71
|
+
const childrenSize = Array.from(containerRef.current.children).reduce((sum, child) => sum + child[`offset${dimension}`], 0);
|
|
72
|
+
// Previous `useEffect` might have updated visible count, but we still have old one
|
|
73
|
+
// If it is 0, lets try to update it with items length.
|
|
74
|
+
const currentVisibleCount = visibleCount || Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
|
|
75
|
+
const avgItemSize = childrenSize / currentVisibleCount;
|
|
76
|
+
const visibleItems = Math.floor(availableSize / avgItemSize);
|
|
77
|
+
if (!isNaN(visibleItems)) {
|
|
78
|
+
// Doubling the visible items to overflow the container. Just to be safe.
|
|
79
|
+
setVisibleCount(Math.min(items.length, visibleItems * 2));
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
needsFullRerender.current = false;
|
|
83
|
+
}, [containerSize, visibleCount, disabled, items.length, orientation]);
|
|
84
|
+
(0, useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect)(() => {
|
|
85
|
+
previousContainerSize.current = containerSize;
|
|
86
|
+
}, [containerSize]);
|
|
87
|
+
return [mergedRefs, visibleCount];
|
|
101
88
|
};
|
|
102
89
|
exports.useOverflow = useOverflow;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useResizeObserver = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
10
|
-
const dom_js_1 = require(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
|
+
const dom_js_1 = require("../functions/dom.js");
|
|
11
11
|
/**
|
|
12
12
|
* Hook that uses `ResizeObserver` to access an element's size every time it updates.
|
|
13
13
|
* @private
|
|
@@ -21,22 +21,17 @@ const dom_js_1 = require('../functions/dom.js');
|
|
|
21
21
|
* return <div ref={ref}>...</div>;
|
|
22
22
|
*/
|
|
23
23
|
const useResizeObserver = (onResize) => {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
[onResize],
|
|
39
|
-
);
|
|
40
|
-
return [elementRef, resizeObserver.current];
|
|
24
|
+
const resizeObserver = React.useRef();
|
|
25
|
+
const elementRef = React.useCallback((element) => {
|
|
26
|
+
if (!(0, dom_js_1.getWindow)()?.ResizeObserver) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
resizeObserver.current?.disconnect?.();
|
|
30
|
+
if (element) {
|
|
31
|
+
resizeObserver.current = new ResizeObserver(([{ contentRect }]) => onResize(contentRect));
|
|
32
|
+
resizeObserver.current?.observe?.(element);
|
|
33
|
+
}
|
|
34
|
+
}, [onResize]);
|
|
35
|
+
return [elementRef, resizeObserver.current];
|
|
41
36
|
};
|
|
42
37
|
exports.useResizeObserver = useResizeObserver;
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.useSafeContext = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
10
|
/**
|
|
11
11
|
* Wrapper hook around `useContext` that throws an error if the context is not provided.
|
|
12
12
|
* @param context Context to use. Must have a `displayName` for useful errors.
|
|
13
13
|
*/
|
|
14
14
|
const useSafeContext = (context) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
const value = React.useContext(context);
|
|
16
|
+
if (!value) {
|
|
17
|
+
throw new Error(`${context.displayName} is undefined`);
|
|
18
|
+
}
|
|
19
|
+
return value; // eslint-disable-line @typescript-eslint/no-non-null-assertion -- we already checked for undefined
|
|
20
20
|
};
|
|
21
21
|
exports.useSafeContext = useSafeContext;
|
|
@@ -1,35 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.StatusIconMap = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
10
|
-
const SvgInfoCircular_js_1 = require(
|
|
11
|
-
const SvgStatusError_js_1 = require(
|
|
12
|
-
const SvgStatusSuccess_js_1 = require(
|
|
13
|
-
const SvgStatusWarning_js_1 = require(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
|
+
const SvgInfoCircular_js_1 = require("./SvgInfoCircular.js");
|
|
11
|
+
const SvgStatusError_js_1 = require("./SvgStatusError.js");
|
|
12
|
+
const SvgStatusSuccess_js_1 = require("./SvgStatusSuccess.js");
|
|
13
|
+
const SvgStatusWarning_js_1 = require("./SvgStatusWarning.js");
|
|
14
14
|
exports.StatusIconMap = {
|
|
15
|
-
|
|
16
|
-
React.createElement(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}),
|
|
20
|
-
positive: (args) =>
|
|
21
|
-
React.createElement(SvgStatusSuccess_js_1.SvgStatusSuccess, {
|
|
22
|
-
'aria-hidden': true,
|
|
23
|
-
...args,
|
|
24
|
-
}),
|
|
25
|
-
warning: (args) =>
|
|
26
|
-
React.createElement(SvgStatusWarning_js_1.SvgStatusWarning, {
|
|
27
|
-
'aria-hidden': true,
|
|
28
|
-
...args,
|
|
29
|
-
}),
|
|
30
|
-
informational: (args) =>
|
|
31
|
-
React.createElement(SvgInfoCircular_js_1.SvgInfoCircular, {
|
|
32
|
-
'aria-hidden': true,
|
|
33
|
-
...args,
|
|
34
|
-
}),
|
|
15
|
+
negative: (args) => React.createElement(SvgStatusError_js_1.SvgStatusError, { "aria-hidden": true, ...args }),
|
|
16
|
+
positive: (args) => React.createElement(SvgStatusSuccess_js_1.SvgStatusSuccess, { "aria-hidden": true, ...args }),
|
|
17
|
+
warning: (args) => React.createElement(SvgStatusWarning_js_1.SvgStatusWarning, { "aria-hidden": true, ...args }),
|
|
18
|
+
informational: (args) => (React.createElement(SvgInfoCircular_js_1.SvgInfoCircular, { "aria-hidden": true, ...args })),
|
|
35
19
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Svg = void 0;
|
|
4
4
|
/*---------------------------------------------------------------------------------------------
|
|
5
5
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
6
6
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
7
7
|
*--------------------------------------------------------------------------------------------*/
|
|
8
|
-
const polymorphic_js_1 = require(
|
|
8
|
+
const polymorphic_js_1 = require("../functions/polymorphic.js");
|
|
9
9
|
exports.Svg = polymorphic_js_1.polymorphic.svg('', { viewBox: '0 0 16 16' });
|
|
@@ -1,20 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.SvgCalendar = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
10
|
-
const Svg_js_1 = require(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
|
+
const Svg_js_1 = require("./Svg.js");
|
|
11
11
|
const SvgCalendar = (props) => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{ ...props },
|
|
15
|
-
React.createElement('path', {
|
|
16
|
-
d: 'M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z',
|
|
17
|
-
}),
|
|
18
|
-
);
|
|
12
|
+
return (React.createElement(Svg_js_1.Svg, { ...props },
|
|
13
|
+
React.createElement("path", { d: 'M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z' })));
|
|
19
14
|
};
|
|
20
15
|
exports.SvgCalendar = SvgCalendar;
|
|
@@ -1,20 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.SvgCaretDownSmall = void 0;
|
|
4
|
-
const tslib_1 = require(
|
|
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(
|
|
10
|
-
const Svg_js_1 = require(
|
|
9
|
+
const React = tslib_1.__importStar(require("react"));
|
|
10
|
+
const Svg_js_1 = require("./Svg.js");
|
|
11
11
|
const SvgCaretDownSmall = (props) => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{ ...props },
|
|
15
|
-
React.createElement('path', {
|
|
16
|
-
d: 'M4.807 6h6.395a.28.28 0 0 1 .24.443L8.27 9.9a.34.34 0 0 1-.481 0L4.566 6.443A.27.27 0 0 1 4.806 6z',
|
|
17
|
-
}),
|
|
18
|
-
);
|
|
12
|
+
return (React.createElement(Svg_js_1.Svg, { ...props },
|
|
13
|
+
React.createElement("path", { d: 'M4.807 6h6.395a.28.28 0 0 1 .24.443L8.27 9.9a.34.34 0 0 1-.481 0L4.566 6.443A.27.27 0 0 1 4.806 6z' })));
|
|
19
14
|
};
|
|
20
15
|
exports.SvgCaretDownSmall = SvgCaretDownSmall;
|