@itwin/itwinui-react 2.0.0-dev.2 → 2.0.0-dev.3
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/README.md +10 -1
- package/cjs/core/Alert/Alert.js +8 -30
- package/cjs/core/Avatar/Avatar.js +10 -33
- package/cjs/core/AvatarGroup/AvatarGroup.js +18 -43
- package/cjs/core/Backdrop/Backdrop.js +6 -28
- package/cjs/core/Badge/Badge.js +13 -31
- package/cjs/core/Breadcrumbs/Breadcrumbs.js +14 -40
- package/cjs/core/ButtonGroup/ButtonGroup.js +10 -32
- package/cjs/core/Buttons/Button/Button.js +6 -28
- package/cjs/core/Buttons/DropdownButton/DropdownButton.js +14 -36
- package/cjs/core/Buttons/IconButton/IconButton.js +6 -28
- package/cjs/core/Buttons/IdeasButton/IdeasButton.js +6 -28
- package/cjs/core/Buttons/SplitButton/SplitButton.js +14 -36
- package/cjs/core/Carousel/Carousel.js +38 -63
- package/cjs/core/Carousel/CarouselContext.js +1 -1
- package/cjs/core/Carousel/CarouselDot.js +6 -28
- package/cjs/core/Carousel/CarouselDotsList.js +33 -60
- package/cjs/core/Carousel/CarouselNavigation.js +22 -44
- package/cjs/core/Carousel/CarouselSlide.js +12 -34
- package/cjs/core/Carousel/CarouselSlider.js +26 -51
- package/cjs/core/Checkbox/Checkbox.js +18 -42
- package/cjs/core/ColorPicker/ColorBuilder.js +51 -73
- package/cjs/core/ColorPicker/ColorInputPanel.js +64 -88
- package/cjs/core/ColorPicker/ColorPalette.js +26 -50
- package/cjs/core/ColorPicker/ColorPicker.js +25 -49
- package/cjs/core/ColorPicker/ColorPickerContext.js +3 -3
- package/cjs/core/ColorPicker/ColorSwatch.js +13 -34
- package/cjs/core/ComboBox/ComboBox.js +67 -93
- package/cjs/core/ComboBox/ComboBoxDropdown.d.ts +1 -1
- package/cjs/core/ComboBox/ComboBoxDropdown.js +13 -36
- package/cjs/core/ComboBox/ComboBoxEndIcon.js +12 -34
- package/cjs/core/ComboBox/ComboBoxInput.js +28 -50
- package/cjs/core/ComboBox/ComboBoxInputContainer.js +9 -31
- package/cjs/core/ComboBox/ComboBoxMenu.js +35 -60
- package/cjs/core/ComboBox/ComboBoxMenuItem.js +11 -33
- package/cjs/core/ComboBox/helpers.js +11 -19
- package/cjs/core/DatePicker/DatePicker.js +87 -111
- package/cjs/core/Dialog/Dialog.js +28 -48
- package/cjs/core/Dialog/DialogBackdrop.js +16 -35
- package/cjs/core/Dialog/DialogButtonBar.js +6 -28
- package/cjs/core/Dialog/DialogContent.js +6 -28
- package/cjs/core/Dialog/DialogContext.js +2 -2
- package/cjs/core/Dialog/DialogDragContext.js +6 -15
- package/cjs/core/Dialog/DialogMain.js +52 -59
- package/cjs/core/Dialog/DialogTitleBar.js +14 -36
- package/cjs/core/Dialog/DialogTitleBarTitle.js +6 -28
- package/cjs/core/DropdownMenu/DropdownMenu.js +14 -36
- package/cjs/core/ExpandableBlock/ExpandableBlock.js +12 -34
- package/cjs/core/Fieldset/Fieldset.js +9 -33
- package/cjs/core/FileUpload/FileUpload.js +13 -35
- package/cjs/core/FileUpload/FileUploadTemplate.js +4 -4
- package/cjs/core/Footer/Footer.js +21 -49
- package/cjs/core/Footer/FooterItem.js +6 -28
- package/cjs/core/Footer/FooterList.js +6 -28
- package/cjs/core/Footer/FooterSeparator.js +6 -28
- package/cjs/core/Header/Header.js +10 -32
- package/cjs/core/Header/HeaderBasicButton.js +6 -28
- package/cjs/core/Header/HeaderBreadcrumbs.js +9 -39
- package/cjs/core/Header/HeaderButton.js +22 -36
- package/cjs/core/Header/HeaderDropdownButton.js +14 -36
- package/cjs/core/Header/HeaderLogo.js +7 -29
- package/cjs/core/Header/HeaderSplitButton.js +13 -35
- package/cjs/core/InformationPanel/InformationPanel.js +15 -37
- package/cjs/core/InformationPanel/InformationPanelBody.js +6 -28
- package/cjs/core/InformationPanel/InformationPanelContent.js +6 -28
- package/cjs/core/InformationPanel/InformationPanelHeader.js +7 -29
- package/cjs/core/InformationPanel/InformationPanelWrapper.js +6 -28
- package/cjs/core/Input/Input.js +9 -31
- package/cjs/core/InputGroup/InputGroup.js +6 -28
- package/cjs/core/Label/Label.js +7 -29
- package/cjs/core/LabeledInput/LabeledInput.js +7 -29
- package/cjs/core/LabeledSelect/LabeledSelect.js +7 -29
- package/cjs/core/LabeledTextarea/LabeledTextarea.js +7 -29
- package/cjs/core/Menu/Menu.js +18 -40
- package/cjs/core/Menu/MenuDivider.js +6 -28
- package/cjs/core/Menu/MenuExtraContent.js +6 -28
- package/cjs/core/Menu/MenuItem.js +17 -39
- package/cjs/core/Menu/MenuItemSkeleton.js +11 -30
- package/cjs/core/Modal/Modal.js +12 -30
- package/cjs/core/Modal/ModalButtonBar.js +1 -1
- package/cjs/core/Modal/ModalContent.js +1 -1
- package/cjs/core/{ErrorPage → NonIdealState}/ErrorPage.d.ts +5 -1
- package/cjs/core/NonIdealState/ErrorPage.js +144 -0
- package/cjs/core/NonIdealState/NonIdealState.d.ts +46 -0
- package/cjs/core/NonIdealState/NonIdealState.js +32 -0
- package/{esm/core/ErrorPage → cjs/core/NonIdealState}/index.d.ts +3 -1
- package/cjs/core/{ErrorPage → NonIdealState}/index.js +4 -2
- package/cjs/core/ProgressIndicators/ProgressLinear/ProgressLinear.js +11 -34
- package/cjs/core/ProgressIndicators/ProgressRadial/ProgressRadial.js +13 -37
- package/cjs/core/Radio/Radio.js +10 -33
- package/cjs/core/RadioTiles/RadioTile.js +9 -31
- package/cjs/core/RadioTiles/RadioTileGroup.js +6 -28
- package/cjs/core/Select/Select.js +59 -72
- package/cjs/core/Select/SelectTag.js +6 -28
- package/cjs/core/SideNavigation/SideNavigation.js +14 -40
- package/cjs/core/SideNavigation/SidenavButton.js +8 -30
- package/cjs/core/SideNavigation/SidenavSubmenu.js +6 -28
- package/cjs/core/SideNavigation/SidenavSubmenuHeader.js +6 -28
- package/cjs/core/SkipToContentLink/SkipToContentLink.js +6 -28
- package/cjs/core/Slider/Slider.js +68 -96
- package/cjs/core/Slider/Thumb.js +20 -39
- package/cjs/core/Slider/Track.js +24 -44
- package/cjs/core/StatusMessage/StatusMessage.js +6 -7
- package/cjs/core/Stepper/Stepper.js +10 -34
- package/cjs/core/Stepper/StepperStep.js +15 -34
- package/cjs/core/Stepper/Wizard.js +6 -28
- package/cjs/core/Stepper/WorkflowDiagram.js +6 -28
- package/cjs/core/Stepper/WorkflowDiagramStep.js +6 -28
- package/cjs/core/Surface/Surface.js +11 -30
- package/cjs/core/Table/SubRowExpander.js +6 -6
- package/cjs/core/Table/Table.d.ts +19 -24
- package/cjs/core/Table/Table.js +189 -195
- package/cjs/core/Table/TableCell.js +29 -30
- package/cjs/core/Table/TablePaginator.js +52 -83
- package/cjs/core/Table/TableRowMemoized.d.ts +6 -10
- package/cjs/core/Table/TableRowMemoized.js +36 -60
- package/cjs/core/Table/actionHandlers/expandHandler.js +3 -3
- package/cjs/core/Table/actionHandlers/filterHandler.js +4 -4
- package/cjs/core/Table/actionHandlers/resizeHandler.js +13 -15
- package/cjs/core/Table/actionHandlers/selectHandler.js +35 -40
- package/cjs/core/Table/cells/DefaultCell.js +5 -27
- package/cjs/core/Table/cells/EditableCell.js +16 -40
- package/cjs/core/Table/columns/actionColumn.js +44 -62
- package/cjs/core/Table/columns/expanderColumn.d.ts +2 -5
- package/cjs/core/Table/columns/expanderColumn.js +12 -27
- package/cjs/core/Table/columns/selectionColumn.d.ts +2 -5
- package/cjs/core/Table/columns/selectionColumn.js +16 -37
- package/cjs/core/Table/filters/BaseFilter.js +6 -6
- package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js +19 -41
- package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js +20 -31
- package/cjs/core/Table/filters/FilterButtonBar.js +8 -19
- package/cjs/core/Table/filters/FilterToggle.js +15 -37
- package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +16 -29
- package/cjs/core/Table/filters/TextFilter/TextFilter.js +11 -11
- package/cjs/core/Table/filters/customFilterFunctions.js +11 -13
- package/cjs/core/Table/filters/defaultFilterFunctions.js +62 -64
- package/cjs/core/Table/filters/tableFilters.js +7 -18
- package/cjs/core/Table/hooks/useColumnDragAndDrop.js +41 -53
- package/cjs/core/Table/hooks/useExpanderCell.js +17 -33
- package/cjs/core/Table/hooks/useResizeColumns.js +197 -205
- package/cjs/core/Table/hooks/useScrollToRow.js +11 -12
- package/cjs/core/Table/hooks/useSelectionCell.js +7 -18
- package/cjs/core/Table/hooks/useStickyColumns.js +28 -33
- package/cjs/core/Table/hooks/useSubRowFiltering.js +37 -57
- package/cjs/core/Table/hooks/useSubRowSelection.js +10 -12
- package/cjs/core/Table/utils.js +15 -26
- package/cjs/core/Tabs/Tab.js +6 -28
- package/cjs/core/Tabs/Tabs.js +45 -67
- package/cjs/core/Tag/Tag.js +8 -30
- package/cjs/core/Tag/TagContainer.js +9 -32
- package/cjs/core/Textarea/Textarea.js +9 -31
- package/cjs/core/ThemeProvider/ThemeProvider.d.ts +1 -0
- package/cjs/core/ThemeProvider/ThemeProvider.js +16 -37
- package/cjs/core/Tile/Tile.js +29 -58
- package/cjs/core/TimePicker/TimePicker.js +59 -97
- package/cjs/core/Toast/Toast.js +45 -65
- package/cjs/core/Toast/ToastWrapper.js +13 -24
- package/cjs/core/Toast/Toaster.js +87 -137
- package/cjs/core/Toast/index.js +2 -2
- package/cjs/core/ToggleSwitch/ToggleSwitch.js +10 -32
- package/cjs/core/Tooltip/Tooltip.js +6 -28
- package/cjs/core/Tree/Tree.js +58 -80
- package/cjs/core/Tree/TreeContext.js +3 -3
- package/cjs/core/Tree/TreeNode.js +21 -43
- package/cjs/core/Tree/TreeNodeExpander.js +7 -29
- package/cjs/core/Typography/Anchor/Anchor.js +5 -28
- package/cjs/core/Typography/Blockquote/Blockquote.js +6 -28
- package/cjs/core/Typography/Body/Body.js +7 -29
- package/cjs/core/Typography/Code/Code.js +6 -28
- package/cjs/core/Typography/Headline/Headline.js +6 -28
- package/cjs/core/Typography/Kbd/Kbd.js +6 -28
- package/cjs/core/Typography/Leading/Leading.js +6 -28
- package/cjs/core/Typography/Small/Small.js +6 -28
- package/cjs/core/Typography/Subheading/Subheading.js +6 -28
- package/cjs/core/Typography/Text/Text.js +11 -34
- package/cjs/core/Typography/Title/Title.js +6 -28
- package/cjs/core/index.d.ts +2 -2
- package/cjs/core/index.js +6 -5
- package/cjs/core/utils/color/ColorValue.js +146 -156
- package/cjs/core/utils/components/FocusTrap.js +14 -14
- package/cjs/core/utils/components/InputContainer.js +12 -36
- package/cjs/core/utils/components/MiddleTextTruncation.js +15 -31
- package/cjs/core/utils/components/Popover.d.ts +1 -1
- package/cjs/core/utils/components/Popover.js +57 -60
- package/cjs/core/utils/components/Resizer.js +51 -51
- package/cjs/core/utils/components/VirtualScroll.js +72 -89
- package/cjs/core/utils/components/VisuallyHidden.js +6 -28
- package/cjs/core/utils/components/WithCSSTransition.d.ts +2 -2
- package/cjs/core/utils/components/WithCSSTransition.js +18 -40
- package/cjs/core/utils/functions/colors.js +7 -7
- package/cjs/core/utils/functions/dom.js +7 -8
- package/cjs/core/utils/functions/focusable.js +11 -15
- package/cjs/core/utils/functions/numbers.js +5 -6
- package/cjs/core/utils/functions/styles.js +3 -3
- package/cjs/core/utils/hooks/useContainerWidth.js +9 -13
- package/cjs/core/utils/hooks/useDragAndDrop.js +32 -33
- package/cjs/core/utils/hooks/useEventListener.js +7 -7
- package/cjs/core/utils/hooks/useIntersection.js +9 -12
- package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/cjs/core/utils/hooks/useLatestRef.js +4 -4
- package/cjs/core/utils/hooks/useMediaQuery.js +9 -12
- package/cjs/core/utils/hooks/useMergedRefs.js +6 -23
- package/cjs/core/utils/hooks/useOverflow.js +26 -33
- package/cjs/core/utils/hooks/useResizeObserver.js +6 -9
- package/cjs/core/utils/hooks/useSafeContext.js +4 -4
- package/cjs/core/utils/hooks/useTheme.js +18 -20
- package/cjs/core/utils/icons/StatusIconMap.js +9 -20
- package/cjs/core/utils/icons/SvgCalendar.js +3 -14
- package/cjs/core/utils/icons/SvgCaretDownSmall.js +3 -14
- package/cjs/core/utils/icons/SvgCaretRightSmall.js +3 -14
- package/cjs/core/utils/icons/SvgCaretUpSmall.js +3 -14
- package/cjs/core/utils/icons/SvgCheckmark.js +3 -14
- package/cjs/core/utils/icons/SvgCheckmarkSmall.js +3 -14
- package/cjs/core/utils/icons/SvgChevronLeft.js +3 -14
- package/cjs/core/utils/icons/SvgChevronLeftDouble.js +3 -14
- package/cjs/core/utils/icons/SvgChevronRight.js +3 -14
- package/cjs/core/utils/icons/SvgChevronRightDouble.js +3 -14
- package/cjs/core/utils/icons/SvgClose.js +3 -14
- package/cjs/core/utils/icons/SvgCloseSmall.js +3 -14
- package/cjs/core/utils/icons/SvgColumnManager.js +3 -14
- package/cjs/core/utils/icons/SvgFilter.js +3 -14
- package/cjs/core/utils/icons/SvgFilterHollow.js +3 -14
- package/cjs/core/utils/icons/SvgImportantSmall.js +3 -14
- package/cjs/core/utils/icons/SvgInfoCircular.js +3 -14
- package/cjs/core/utils/icons/SvgMore.js +3 -14
- package/cjs/core/utils/icons/SvgMoreVertical.js +3 -14
- package/cjs/core/utils/icons/SvgNew.js +3 -14
- package/cjs/core/utils/icons/SvgSmileyHappy.js +3 -14
- package/cjs/core/utils/icons/SvgSortDown.js +3 -14
- package/cjs/core/utils/icons/SvgSortUp.js +3 -14
- package/cjs/core/utils/icons/SvgStatusError.js +3 -14
- package/cjs/core/utils/icons/SvgStatusSuccess.js +3 -14
- package/cjs/core/utils/icons/SvgStatusWarning.js +3 -14
- package/cjs/core/utils/icons/SvgSwap.js +3 -14
- package/cjs/core/utils/icons/SvgUpload.js +3 -14
- package/cjs/types/react-table-config.d.ts +1 -1
- package/esm/core/Alert/Alert.js +5 -27
- package/esm/core/Avatar/Avatar.js +9 -32
- package/esm/core/AvatarGroup/AvatarGroup.js +16 -41
- package/esm/core/Backdrop/Backdrop.js +3 -25
- package/esm/core/Badge/Badge.js +10 -28
- package/esm/core/Breadcrumbs/Breadcrumbs.js +11 -37
- package/esm/core/ButtonGroup/ButtonGroup.js +7 -29
- package/esm/core/Buttons/Button/Button.js +3 -25
- package/esm/core/Buttons/DropdownButton/DropdownButton.js +9 -31
- package/esm/core/Buttons/IconButton/IconButton.js +3 -25
- package/esm/core/Buttons/IdeasButton/IdeasButton.js +3 -25
- package/esm/core/Buttons/SplitButton/SplitButton.js +8 -30
- package/esm/core/Carousel/Carousel.js +29 -54
- package/esm/core/Carousel/CarouselContext.js +1 -1
- package/esm/core/Carousel/CarouselDot.js +4 -26
- package/esm/core/Carousel/CarouselDotsList.js +28 -55
- package/esm/core/Carousel/CarouselNavigation.js +16 -38
- package/esm/core/Carousel/CarouselSlide.js +8 -30
- package/esm/core/Carousel/CarouselSlider.js +22 -47
- package/esm/core/Checkbox/Checkbox.js +14 -38
- package/esm/core/ColorPicker/ColorBuilder.js +46 -68
- package/esm/core/ColorPicker/ColorInputPanel.js +58 -82
- package/esm/core/ColorPicker/ColorPalette.js +20 -44
- package/esm/core/ColorPicker/ColorPicker.js +21 -45
- package/esm/core/ColorPicker/ColorPickerContext.js +3 -3
- package/esm/core/ColorPicker/ColorSwatch.js +9 -30
- package/esm/core/ComboBox/ComboBox.js +55 -81
- package/esm/core/ComboBox/ComboBoxDropdown.d.ts +1 -1
- package/esm/core/ComboBox/ComboBoxDropdown.js +10 -33
- package/esm/core/ComboBox/ComboBoxEndIcon.js +8 -30
- package/esm/core/ComboBox/ComboBoxInput.js +24 -46
- package/esm/core/ComboBox/ComboBoxInputContainer.js +5 -27
- package/esm/core/ComboBox/ComboBoxMenu.js +29 -54
- package/esm/core/ComboBox/ComboBoxMenuItem.js +7 -29
- package/esm/core/ComboBox/helpers.js +13 -21
- package/esm/core/DatePicker/DatePicker.js +82 -106
- package/esm/core/Dialog/Dialog.js +19 -39
- package/esm/core/Dialog/DialogBackdrop.js +11 -30
- package/esm/core/Dialog/DialogButtonBar.js +3 -25
- package/esm/core/Dialog/DialogContent.js +3 -25
- package/esm/core/Dialog/DialogContext.js +2 -2
- package/esm/core/Dialog/DialogDragContext.js +6 -15
- package/esm/core/Dialog/DialogMain.js +45 -52
- package/esm/core/Dialog/DialogTitleBar.js +7 -29
- package/esm/core/Dialog/DialogTitleBarTitle.js +3 -25
- package/esm/core/DropdownMenu/DropdownMenu.js +11 -33
- package/esm/core/ExpandableBlock/ExpandableBlock.js +9 -31
- package/esm/core/Fieldset/Fieldset.js +6 -30
- package/esm/core/FileUpload/FileUpload.js +10 -32
- package/esm/core/FileUpload/FileUploadTemplate.js +2 -2
- package/esm/core/Footer/Footer.js +16 -44
- package/esm/core/Footer/FooterItem.js +3 -25
- package/esm/core/Footer/FooterList.js +3 -25
- package/esm/core/Footer/FooterSeparator.js +3 -25
- package/esm/core/Header/Header.js +5 -27
- package/esm/core/Header/HeaderBasicButton.js +3 -25
- package/esm/core/Header/HeaderBreadcrumbs.js +7 -37
- package/esm/core/Header/HeaderButton.js +16 -30
- package/esm/core/Header/HeaderDropdownButton.js +9 -31
- package/esm/core/Header/HeaderLogo.js +4 -26
- package/esm/core/Header/HeaderSplitButton.js +8 -30
- package/esm/core/InformationPanel/InformationPanel.js +12 -34
- package/esm/core/InformationPanel/InformationPanelBody.js +3 -25
- package/esm/core/InformationPanel/InformationPanelContent.js +3 -25
- package/esm/core/InformationPanel/InformationPanelHeader.js +3 -25
- package/esm/core/InformationPanel/InformationPanelWrapper.js +3 -25
- package/esm/core/Input/Input.js +6 -28
- package/esm/core/InputGroup/InputGroup.js +4 -26
- package/esm/core/Label/Label.js +4 -26
- package/esm/core/LabeledInput/LabeledInput.js +4 -26
- package/esm/core/LabeledSelect/LabeledSelect.js +4 -26
- package/esm/core/LabeledTextarea/LabeledTextarea.js +4 -26
- package/esm/core/Menu/Menu.js +15 -37
- package/esm/core/Menu/MenuDivider.js +3 -25
- package/esm/core/Menu/MenuExtraContent.js +3 -25
- package/esm/core/Menu/MenuItem.js +13 -35
- package/esm/core/Menu/MenuItemSkeleton.js +8 -27
- package/esm/core/Modal/Modal.js +8 -26
- package/esm/core/Modal/ModalButtonBar.js +1 -1
- package/esm/core/Modal/ModalContent.js +1 -1
- package/esm/core/{ErrorPage → NonIdealState}/ErrorPage.d.ts +5 -1
- package/esm/core/NonIdealState/ErrorPage.js +137 -0
- package/esm/core/NonIdealState/NonIdealState.d.ts +46 -0
- package/esm/core/NonIdealState/NonIdealState.js +25 -0
- package/{cjs/core/ErrorPage → esm/core/NonIdealState}/index.d.ts +3 -1
- package/esm/core/{ErrorPage → NonIdealState}/index.js +2 -1
- package/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.js +8 -31
- package/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.js +10 -34
- package/esm/core/Radio/Radio.js +7 -30
- package/esm/core/RadioTiles/RadioTile.js +6 -28
- package/esm/core/RadioTiles/RadioTileGroup.js +3 -25
- package/esm/core/Select/Select.js +53 -66
- package/esm/core/Select/SelectTag.js +3 -25
- package/esm/core/SideNavigation/SideNavigation.js +9 -35
- package/esm/core/SideNavigation/SidenavButton.js +4 -26
- package/esm/core/SideNavigation/SidenavSubmenu.js +3 -25
- package/esm/core/SideNavigation/SidenavSubmenuHeader.js +3 -25
- package/esm/core/SkipToContentLink/SkipToContentLink.js +3 -25
- package/esm/core/Slider/Slider.js +63 -91
- package/esm/core/Slider/Thumb.js +17 -36
- package/esm/core/Slider/Track.js +23 -43
- package/esm/core/StatusMessage/StatusMessage.js +3 -4
- package/esm/core/Stepper/Stepper.js +7 -31
- package/esm/core/Stepper/StepperStep.js +12 -31
- package/esm/core/Stepper/Wizard.js +3 -25
- package/esm/core/Stepper/WorkflowDiagram.js +3 -25
- package/esm/core/Stepper/WorkflowDiagramStep.js +3 -25
- package/esm/core/Surface/Surface.js +8 -27
- package/esm/core/Table/SubRowExpander.js +3 -3
- package/esm/core/Table/Table.d.ts +19 -24
- package/esm/core/Table/Table.js +177 -183
- package/esm/core/Table/TableCell.js +23 -24
- package/esm/core/Table/TablePaginator.js +46 -77
- package/esm/core/Table/TableRowMemoized.d.ts +6 -10
- package/esm/core/Table/TableRowMemoized.js +32 -56
- package/esm/core/Table/actionHandlers/expandHandler.js +3 -3
- package/esm/core/Table/actionHandlers/filterHandler.js +4 -4
- package/esm/core/Table/actionHandlers/resizeHandler.js +13 -15
- package/esm/core/Table/actionHandlers/selectHandler.js +35 -40
- package/esm/core/Table/cells/DefaultCell.js +3 -25
- package/esm/core/Table/cells/EditableCell.js +14 -38
- package/esm/core/Table/columns/actionColumn.js +34 -52
- package/esm/core/Table/columns/expanderColumn.d.ts +2 -5
- package/esm/core/Table/columns/expanderColumn.js +9 -24
- package/esm/core/Table/columns/selectionColumn.d.ts +2 -5
- package/esm/core/Table/columns/selectionColumn.js +14 -35
- package/esm/core/Table/filters/BaseFilter.js +3 -3
- package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +14 -36
- package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +15 -26
- package/esm/core/Table/filters/FilterButtonBar.js +4 -15
- package/esm/core/Table/filters/FilterToggle.js +11 -33
- package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +11 -24
- package/esm/core/Table/filters/TextFilter/TextFilter.js +6 -6
- package/esm/core/Table/filters/customFilterFunctions.js +12 -14
- package/esm/core/Table/filters/defaultFilterFunctions.js +63 -65
- package/esm/core/Table/filters/tableFilters.js +4 -15
- package/esm/core/Table/hooks/useColumnDragAndDrop.js +40 -52
- package/esm/core/Table/hooks/useExpanderCell.js +15 -31
- package/esm/core/Table/hooks/useResizeColumns.js +196 -204
- package/esm/core/Table/hooks/useScrollToRow.js +10 -11
- package/esm/core/Table/hooks/useSelectionCell.js +6 -17
- package/esm/core/Table/hooks/useStickyColumns.js +27 -32
- package/esm/core/Table/hooks/useSubRowFiltering.js +35 -55
- package/esm/core/Table/hooks/useSubRowSelection.js +9 -11
- package/esm/core/Table/utils.js +15 -26
- package/esm/core/Tabs/Tab.js +3 -25
- package/esm/core/Tabs/Tabs.js +41 -63
- package/esm/core/Tag/Tag.js +4 -26
- package/esm/core/Tag/TagContainer.js +6 -29
- package/esm/core/Textarea/Textarea.js +6 -28
- package/esm/core/ThemeProvider/ThemeProvider.d.ts +1 -0
- package/esm/core/ThemeProvider/ThemeProvider.js +15 -36
- package/esm/core/Tile/Tile.js +23 -52
- package/esm/core/TimePicker/TimePicker.js +56 -94
- package/esm/core/Toast/Toast.js +41 -61
- package/esm/core/Toast/ToastWrapper.js +10 -21
- package/esm/core/Toast/Toaster.js +83 -134
- package/esm/core/Toast/index.js +1 -1
- package/esm/core/ToggleSwitch/ToggleSwitch.js +7 -29
- package/esm/core/Tooltip/Tooltip.js +3 -25
- package/esm/core/Tree/Tree.js +54 -76
- package/esm/core/Tree/TreeContext.js +3 -3
- package/esm/core/Tree/TreeNode.js +16 -38
- package/esm/core/Tree/TreeNodeExpander.js +3 -25
- package/esm/core/Typography/Anchor/Anchor.js +2 -25
- package/esm/core/Typography/Blockquote/Blockquote.js +3 -25
- package/esm/core/Typography/Body/Body.js +4 -26
- package/esm/core/Typography/Code/Code.js +3 -25
- package/esm/core/Typography/Headline/Headline.js +3 -25
- package/esm/core/Typography/Kbd/Kbd.js +4 -26
- package/esm/core/Typography/Leading/Leading.js +3 -25
- package/esm/core/Typography/Small/Small.js +3 -25
- package/esm/core/Typography/Subheading/Subheading.js +3 -25
- package/esm/core/Typography/Text/Text.js +8 -31
- package/esm/core/Typography/Title/Title.js +3 -25
- package/esm/core/index.d.ts +2 -2
- package/esm/core/index.js +1 -1
- package/esm/core/utils/color/ColorValue.js +145 -156
- package/esm/core/utils/components/FocusTrap.js +11 -11
- package/esm/core/utils/components/InputContainer.js +10 -34
- package/esm/core/utils/components/MiddleTextTruncation.js +13 -29
- package/esm/core/utils/components/Popover.d.ts +1 -1
- package/esm/core/utils/components/Popover.js +54 -57
- package/esm/core/utils/components/Resizer.js +49 -49
- package/esm/core/utils/components/VirtualScroll.js +69 -86
- package/esm/core/utils/components/VisuallyHidden.js +3 -25
- package/esm/core/utils/components/WithCSSTransition.d.ts +2 -2
- package/esm/core/utils/components/WithCSSTransition.js +16 -38
- package/esm/core/utils/functions/colors.js +8 -8
- package/esm/core/utils/functions/dom.js +7 -8
- package/esm/core/utils/functions/focusable.js +11 -15
- package/esm/core/utils/functions/numbers.js +5 -6
- package/esm/core/utils/functions/styles.js +3 -3
- package/esm/core/utils/hooks/useContainerWidth.js +6 -10
- package/esm/core/utils/hooks/useDragAndDrop.js +28 -29
- package/esm/core/utils/hooks/useEventListener.js +6 -6
- package/esm/core/utils/hooks/useIntersection.js +7 -10
- package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/esm/core/utils/hooks/useLatestRef.js +3 -3
- package/esm/core/utils/hooks/useMediaQuery.js +6 -9
- package/esm/core/utils/hooks/useMergedRefs.js +5 -22
- package/esm/core/utils/hooks/useOverflow.js +23 -30
- package/esm/core/utils/hooks/useResizeObserver.js +4 -7
- package/esm/core/utils/hooks/useSafeContext.js +3 -3
- package/esm/core/utils/hooks/useTheme.js +14 -16
- package/esm/core/utils/icons/StatusIconMap.js +5 -16
- package/esm/core/utils/icons/SvgCalendar.js +2 -13
- package/esm/core/utils/icons/SvgCaretDownSmall.js +2 -13
- package/esm/core/utils/icons/SvgCaretRightSmall.js +2 -13
- package/esm/core/utils/icons/SvgCaretUpSmall.js +2 -13
- package/esm/core/utils/icons/SvgCheckmark.js +2 -13
- package/esm/core/utils/icons/SvgCheckmarkSmall.js +2 -13
- package/esm/core/utils/icons/SvgChevronLeft.js +2 -13
- package/esm/core/utils/icons/SvgChevronLeftDouble.js +2 -13
- package/esm/core/utils/icons/SvgChevronRight.js +2 -13
- package/esm/core/utils/icons/SvgChevronRightDouble.js +2 -13
- package/esm/core/utils/icons/SvgClose.js +2 -13
- package/esm/core/utils/icons/SvgCloseSmall.js +2 -13
- package/esm/core/utils/icons/SvgColumnManager.js +2 -13
- package/esm/core/utils/icons/SvgFilter.js +2 -13
- package/esm/core/utils/icons/SvgFilterHollow.js +2 -13
- package/esm/core/utils/icons/SvgImportantSmall.js +2 -13
- package/esm/core/utils/icons/SvgInfoCircular.js +2 -13
- package/esm/core/utils/icons/SvgMore.js +2 -13
- package/esm/core/utils/icons/SvgMoreVertical.js +2 -13
- package/esm/core/utils/icons/SvgNew.js +2 -13
- package/esm/core/utils/icons/SvgSmileyHappy.js +2 -13
- package/esm/core/utils/icons/SvgSortDown.js +2 -13
- package/esm/core/utils/icons/SvgSortUp.js +2 -13
- package/esm/core/utils/icons/SvgStatusError.js +2 -13
- package/esm/core/utils/icons/SvgStatusSuccess.js +2 -13
- package/esm/core/utils/icons/SvgStatusWarning.js +2 -13
- package/esm/core/utils/icons/SvgSwap.js +2 -13
- package/esm/core/utils/icons/SvgUpload.js +2 -13
- package/esm/types/react-table-config.d.ts +1 -1
- package/package.json +3 -3
- package/cjs/core/ErrorPage/ErrorPage.js +0 -168
- package/esm/core/ErrorPage/ErrorPage.js +0 -161
|
@@ -1,43 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.ColorValue = exports.isHsvColor = exports.isHslColor = exports.isRgbColor = void 0;
|
|
15
4
|
/*---------------------------------------------------------------------------------------------
|
|
16
5
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
17
6
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
18
7
|
*--------------------------------------------------------------------------------------------*/
|
|
19
|
-
|
|
8
|
+
const numbers_1 = require("../functions/numbers");
|
|
20
9
|
// portions adapted from Three.js Copyright © 2010-2017 three.js authors
|
|
21
|
-
|
|
22
|
-
|
|
10
|
+
const scratchBytes = new Uint8Array(4);
|
|
11
|
+
const scratchUInt32 = new Uint32Array(scratchBytes.buffer);
|
|
23
12
|
/**
|
|
24
13
|
* isRgbValue type guard.
|
|
25
14
|
*/
|
|
26
|
-
|
|
15
|
+
const isRgbColor = (value) => {
|
|
27
16
|
return (typeof value !== 'string' && 'r' in value && 'g' in value && 'b' in value);
|
|
28
17
|
};
|
|
29
18
|
exports.isRgbColor = isRgbColor;
|
|
30
19
|
/**
|
|
31
20
|
* isHslValue type guard.
|
|
32
21
|
*/
|
|
33
|
-
|
|
22
|
+
const isHslColor = (value) => {
|
|
34
23
|
return (typeof value !== 'string' && 'h' in value && 's' in value && 'l' in value);
|
|
35
24
|
};
|
|
36
25
|
exports.isHslColor = isHslColor;
|
|
37
26
|
/**
|
|
38
27
|
* isHsvValue type guard.
|
|
39
28
|
*/
|
|
40
|
-
|
|
29
|
+
const isHsvColor = (value) => {
|
|
41
30
|
return (typeof value !== 'string' && 'h' in value && 's' in value && 'v' in value);
|
|
42
31
|
};
|
|
43
32
|
exports.isHsvColor = isHsvColor;
|
|
@@ -52,8 +41,8 @@ exports.isHsvColor = isHsvColor;
|
|
|
52
41
|
*
|
|
53
42
|
* @public
|
|
54
43
|
*/
|
|
55
|
-
|
|
56
|
-
|
|
44
|
+
class ColorValue {
|
|
45
|
+
constructor(tbgr, hue) {
|
|
57
46
|
scratchUInt32[0] = tbgr; // Force to be a 32-bit unsigned integer
|
|
58
47
|
this._tbgr = scratchUInt32[0];
|
|
59
48
|
this._hue = hue;
|
|
@@ -69,7 +58,7 @@ var ColorValue = /** @class */ (function () {
|
|
|
69
58
|
* *"hsl(120,50%,50%)"*
|
|
70
59
|
* *"#rrggbb"*
|
|
71
60
|
*/
|
|
72
|
-
|
|
61
|
+
static create(val) {
|
|
73
62
|
if (!val) {
|
|
74
63
|
return ColorValue.fromTbgr(0);
|
|
75
64
|
}
|
|
@@ -86,36 +75,36 @@ var ColorValue = /** @class */ (function () {
|
|
|
86
75
|
return ColorValue.fromString(val, ColorValue.fromTbgr(0));
|
|
87
76
|
}
|
|
88
77
|
return ColorValue.fromTbgr(0);
|
|
89
|
-
}
|
|
78
|
+
}
|
|
90
79
|
/**
|
|
91
80
|
* Convert this ColorValue to an unsigned 32 bit integer representing the 0xTTBBGGRR value
|
|
92
81
|
*/
|
|
93
|
-
|
|
82
|
+
toTbgr() {
|
|
94
83
|
return this._tbgr;
|
|
95
|
-
}
|
|
84
|
+
}
|
|
96
85
|
/**
|
|
97
86
|
* Create a ColorValue from its 0xTTBBGGRR representation.
|
|
98
87
|
*/
|
|
99
|
-
|
|
88
|
+
static fromTbgr(tbgr) {
|
|
100
89
|
return new ColorValue(tbgr);
|
|
101
|
-
}
|
|
90
|
+
}
|
|
102
91
|
/**
|
|
103
92
|
* Create a ColorValue from Red, Green, Blue, Transparency values. All inputs should be integers between 0-255.
|
|
104
93
|
*/
|
|
105
|
-
|
|
94
|
+
static fromRgbt(red, green, blue, transparency) {
|
|
106
95
|
return this.fromTbgr(this.computeTbgrFromComponents(red, green, blue, transparency));
|
|
107
|
-
}
|
|
96
|
+
}
|
|
108
97
|
/**
|
|
109
98
|
* Compute the 0xTTBBGGRR value corresponding to the specified Red, Green, Blue, Transparency components.
|
|
110
99
|
* All inputs should be integers between 0-255.
|
|
111
100
|
*/
|
|
112
|
-
|
|
101
|
+
static computeTbgrFromComponents(red, green, blue, transparency) {
|
|
113
102
|
scratchBytes[0] = red;
|
|
114
103
|
scratchBytes[1] = green;
|
|
115
104
|
scratchBytes[2] = blue;
|
|
116
105
|
scratchBytes[3] = transparency || 0;
|
|
117
106
|
return scratchUInt32[0];
|
|
118
|
-
}
|
|
107
|
+
}
|
|
119
108
|
/**
|
|
120
109
|
* Create a ColorValue from a string representation. The following representations are supported:
|
|
121
110
|
* *"rgb(255,0,0)"*
|
|
@@ -126,51 +115,51 @@ var ColorValue = /** @class */ (function () {
|
|
|
126
115
|
* NOTE: If defaultColorIfNotParsed is not defined and string is invalid then error is thrown.
|
|
127
116
|
* This allows component builders to know if they received bad input from user.
|
|
128
117
|
*/
|
|
129
|
-
|
|
130
|
-
|
|
118
|
+
static fromString(val, defaultColorIfNotParsed) {
|
|
119
|
+
const [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed === null || defaultColorIfNotParsed === void 0 ? void 0 : defaultColorIfNotParsed.toTbgr());
|
|
131
120
|
return new ColorValue(tbgr, hue);
|
|
132
|
-
}
|
|
121
|
+
}
|
|
133
122
|
/** Create a ColorValue from hue, saturation, lightness values. */
|
|
134
|
-
|
|
123
|
+
static fromHSL(hsl) {
|
|
135
124
|
var _a;
|
|
136
|
-
|
|
125
|
+
const alpha = (_a = hsl.a) !== null && _a !== void 0 ? _a : 1;
|
|
137
126
|
return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, Math.round((1 - alpha) * 255)), hsl.h);
|
|
138
|
-
}
|
|
127
|
+
}
|
|
139
128
|
/** Create a ColorValue from an RgbColor */
|
|
140
|
-
|
|
129
|
+
static fromRGB(rgb) {
|
|
141
130
|
var _a;
|
|
142
|
-
|
|
131
|
+
const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
|
|
143
132
|
return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, Math.round((1 - alpha) * 255));
|
|
144
|
-
}
|
|
133
|
+
}
|
|
145
134
|
/**
|
|
146
135
|
* Create a ColorValue from an HsvColor
|
|
147
136
|
*/
|
|
148
|
-
|
|
137
|
+
static fromHSV(hsv) {
|
|
149
138
|
var _a;
|
|
150
|
-
|
|
151
|
-
|
|
139
|
+
const alpha = (_a = hsv.a) !== null && _a !== void 0 ? _a : 1;
|
|
140
|
+
const transparency = Math.round((1 - alpha) * 255);
|
|
152
141
|
// Check for simple case first.
|
|
153
142
|
if (!hsv.s || hsv.h === -1) {
|
|
154
143
|
// hue must be undefined, have no color only white
|
|
155
|
-
|
|
144
|
+
const white = 0xff & Math.floor((255.0 * hsv.v) / 100.0 + 0.5 + 3.0e-14);
|
|
156
145
|
return ColorValue.fromRgbt(white, white, white, 0);
|
|
157
146
|
}
|
|
158
|
-
|
|
147
|
+
let dhue = hsv.h, dsaturation = hsv.s, dvalue = hsv.v;
|
|
159
148
|
if (dhue === 360) {
|
|
160
149
|
dhue = 0.0;
|
|
161
150
|
}
|
|
162
151
|
dhue /= 60; // hue is now [0..6]
|
|
163
|
-
|
|
164
|
-
|
|
152
|
+
const hueIntpart = Math.floor(dhue); // convert double -> int
|
|
153
|
+
const hueFractpart = dhue - hueIntpart;
|
|
165
154
|
dvalue /= 100;
|
|
166
155
|
dsaturation /= 100;
|
|
167
|
-
|
|
168
|
-
|
|
156
|
+
const p = 0xff & Math.floor(dvalue * (1.0 - dsaturation) * 255.0 + 0.5);
|
|
157
|
+
const q = 0xff &
|
|
169
158
|
Math.floor(dvalue * (1.0 - dsaturation * hueFractpart) * 255.0 + 0.5);
|
|
170
|
-
|
|
159
|
+
const t = 0xff &
|
|
171
160
|
Math.floor(dvalue * (1.0 - dsaturation * (1.0 - hueFractpart)) * 255.0 + 0.5);
|
|
172
|
-
|
|
173
|
-
|
|
161
|
+
const v = 0xff & Math.floor(dvalue * 255 + 0.5);
|
|
162
|
+
let r = 0, b = 0, g = 0;
|
|
174
163
|
switch (hueIntpart) {
|
|
175
164
|
case 0:
|
|
176
165
|
r = v;
|
|
@@ -199,7 +188,7 @@ var ColorValue = /** @class */ (function () {
|
|
|
199
188
|
break; // magenta-ish
|
|
200
189
|
}
|
|
201
190
|
return new ColorValue(ColorValue.computeTbgrFromComponents(r, g, b, transparency), hsv.h);
|
|
202
|
-
}
|
|
191
|
+
}
|
|
203
192
|
/**
|
|
204
193
|
* Compute the 0xTTBBGGRR value corresponding to a string representation of a color. The following representations are supported:
|
|
205
194
|
* *"rgb(255,0,0)"*
|
|
@@ -208,26 +197,26 @@ var ColorValue = /** @class */ (function () {
|
|
|
208
197
|
* *"hsl(120,50%,50%)"*
|
|
209
198
|
* *"#rrggbb"*
|
|
210
199
|
*/
|
|
211
|
-
|
|
200
|
+
static computeTbgrFromString(val, defaultColorIfNotParsed) {
|
|
212
201
|
val = val.toLowerCase();
|
|
213
|
-
|
|
202
|
+
let m = /^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(val);
|
|
214
203
|
if (m) {
|
|
215
204
|
// rgb / hsl
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
return 255 * (0, numbers_1.getBoundedValue)(
|
|
205
|
+
let color;
|
|
206
|
+
const name = m[1];
|
|
207
|
+
const components = m[2];
|
|
208
|
+
const hasPercent = (str) => str[str.length - 1] === '%';
|
|
209
|
+
const floatOrPercent = (str) => {
|
|
210
|
+
const v = parseFloat(str);
|
|
211
|
+
return 255 * (0, numbers_1.getBoundedValue)(hasPercent(str) ? v / 100 : v, 0, 1);
|
|
223
212
|
};
|
|
224
|
-
|
|
225
|
-
|
|
213
|
+
const intOrPercent = (str) => {
|
|
214
|
+
const v = hasPercent(str)
|
|
226
215
|
? (parseFloat(str) / 100) * 255
|
|
227
216
|
: parseInt(str, 10);
|
|
228
217
|
return (0, numbers_1.getBoundedValue)(v, 0, 255);
|
|
229
218
|
};
|
|
230
|
-
switch (
|
|
219
|
+
switch (name) {
|
|
231
220
|
case 'rgb':
|
|
232
221
|
case 'rgba':
|
|
233
222
|
color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
|
|
@@ -246,10 +235,10 @@ var ColorValue = /** @class */ (function () {
|
|
|
246
235
|
color = /^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
|
|
247
236
|
if (color) {
|
|
248
237
|
// hsl(120,50%,50%) hsla(120,50%,50%,0.5)
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
238
|
+
const h = parseFloat(color[1]);
|
|
239
|
+
const s = parseInt(color[2], 10) / 100;
|
|
240
|
+
const l = parseInt(color[3], 10) / 100;
|
|
241
|
+
const t = typeof color[4] === 'string' ? 255 - floatOrPercent(color[4]) : 0;
|
|
253
242
|
return [this.computeTbgrFromHSL(h / 360, s, l, t), h];
|
|
254
243
|
}
|
|
255
244
|
break;
|
|
@@ -258,8 +247,8 @@ var ColorValue = /** @class */ (function () {
|
|
|
258
247
|
}
|
|
259
248
|
else if ((m = /^\#([A-Fa-f\d]+)$/.exec(val))) {
|
|
260
249
|
// hex color
|
|
261
|
-
|
|
262
|
-
|
|
250
|
+
const hex = m[1];
|
|
251
|
+
const size = hex.length;
|
|
263
252
|
if (size === 3) {
|
|
264
253
|
// #ff0
|
|
265
254
|
return [
|
|
@@ -286,11 +275,11 @@ var ColorValue = /** @class */ (function () {
|
|
|
286
275
|
return [defaultColorIfNotParsed, undefined];
|
|
287
276
|
}
|
|
288
277
|
throw new Error('unable to parse string into ColorValue');
|
|
289
|
-
}
|
|
278
|
+
}
|
|
290
279
|
/**
|
|
291
280
|
* Get the r,g,b,t values encoded in an 0xTTBBGGRR value. Values will be integers between 0-255.
|
|
292
281
|
*/
|
|
293
|
-
|
|
282
|
+
static getColors(tbgr) {
|
|
294
283
|
scratchUInt32[0] = tbgr;
|
|
295
284
|
return {
|
|
296
285
|
b: scratchBytes[2],
|
|
@@ -298,11 +287,11 @@ var ColorValue = /** @class */ (function () {
|
|
|
298
287
|
r: scratchBytes[0],
|
|
299
288
|
t: scratchBytes[3],
|
|
300
289
|
};
|
|
301
|
-
}
|
|
290
|
+
}
|
|
302
291
|
/**
|
|
303
292
|
* Get the RGB value of the 0xTTBBGGRR color as a number in 0xRRGGBB or 0xRRGGBBAA format
|
|
304
293
|
*/
|
|
305
|
-
|
|
294
|
+
getRgb(includeAlpha) {
|
|
306
295
|
scratchUInt32[0] = this._tbgr;
|
|
307
296
|
if (includeAlpha) {
|
|
308
297
|
return ((scratchBytes[0] << 24) +
|
|
@@ -311,45 +300,44 @@ var ColorValue = /** @class */ (function () {
|
|
|
311
300
|
(255 - scratchBytes[3]));
|
|
312
301
|
}
|
|
313
302
|
return (scratchBytes[0] << 16) + (scratchBytes[1] << 8) + scratchBytes[2];
|
|
314
|
-
}
|
|
303
|
+
}
|
|
315
304
|
/**
|
|
316
305
|
* Get the alpha value for this ColorDef. Will be between 0-255
|
|
317
306
|
*/
|
|
318
|
-
|
|
307
|
+
getAlpha() {
|
|
319
308
|
return ColorValue.getAlpha(this._tbgr);
|
|
320
|
-
}
|
|
309
|
+
}
|
|
321
310
|
/**
|
|
322
311
|
* Extract the alpha value from a 0xTTBBGGRR color.
|
|
323
312
|
*/
|
|
324
|
-
|
|
313
|
+
static getAlpha(tbgr) {
|
|
325
314
|
scratchUInt32[0] = tbgr;
|
|
326
315
|
return 255 - scratchBytes[3];
|
|
327
|
-
}
|
|
316
|
+
}
|
|
328
317
|
/**
|
|
329
318
|
* Convert this ColorValue to a string in the form "#rrggbb" or "#rrggbbaa" where values are hex digits of the respective colors
|
|
330
319
|
*/
|
|
331
|
-
|
|
320
|
+
toHexString(includeAlpha) {
|
|
332
321
|
if (includeAlpha) {
|
|
333
|
-
|
|
322
|
+
let value = this.getRgb(includeAlpha);
|
|
334
323
|
if (value < 0) {
|
|
335
324
|
value = 0xffffffff + value + 1;
|
|
336
325
|
}
|
|
337
|
-
return
|
|
326
|
+
return `#${`00000000${value.toString(16)}`.slice(-8)}`;
|
|
338
327
|
}
|
|
339
|
-
return
|
|
340
|
-
}
|
|
328
|
+
return `#${`000000${this.getRgb().toString(16)}`.slice(-6)}`;
|
|
329
|
+
}
|
|
341
330
|
/**
|
|
342
331
|
* Compute the 0xTTBBGGRR color corresponding to the specified hue, saturation, lightness values.
|
|
343
332
|
*/
|
|
344
|
-
|
|
333
|
+
static computeTbgrFromHSL(
|
|
345
334
|
/** 0-1 */
|
|
346
335
|
h,
|
|
347
336
|
/** 0-1 */
|
|
348
337
|
s,
|
|
349
338
|
/** 0-1 */
|
|
350
|
-
l, transparency) {
|
|
351
|
-
|
|
352
|
-
var torgb = function (p1, q1, t) {
|
|
339
|
+
l, transparency = 0) {
|
|
340
|
+
const torgb = (p1, q1, t) => {
|
|
353
341
|
if (t < 0) {
|
|
354
342
|
t += 1;
|
|
355
343
|
}
|
|
@@ -367,10 +355,8 @@ var ColorValue = /** @class */ (function () {
|
|
|
367
355
|
}
|
|
368
356
|
return p1;
|
|
369
357
|
};
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
};
|
|
373
|
-
var modulo = function (n, m) { return ((n % m) + m) % m; };
|
|
358
|
+
const hue2rgb = (p1, q1, t) => Math.round(torgb(p1, q1, t) * 255);
|
|
359
|
+
const modulo = (n, m) => ((n % m) + m) % m;
|
|
374
360
|
// h,s,l ranges are in 0.0 - 1.0
|
|
375
361
|
h = modulo(h, 1);
|
|
376
362
|
s = (0, numbers_1.getBoundedValue)(s, 0, 1);
|
|
@@ -379,27 +365,30 @@ var ColorValue = /** @class */ (function () {
|
|
|
379
365
|
l *= 255;
|
|
380
366
|
return this.computeTbgrFromComponents(l, l, l, transparency);
|
|
381
367
|
}
|
|
382
|
-
|
|
383
|
-
|
|
368
|
+
const p = l <= 0.5 ? l * (1 + s) : l + s - l * s;
|
|
369
|
+
const q = 2 * l - p;
|
|
384
370
|
return this.computeTbgrFromComponents(hue2rgb(q, p, h + 1 / 3), hue2rgb(q, p, h), hue2rgb(q, p, h - 1 / 3), transparency);
|
|
385
|
-
}
|
|
371
|
+
}
|
|
386
372
|
/**
|
|
387
373
|
* Return HslColor from this ColorValue
|
|
388
374
|
*/
|
|
389
|
-
|
|
390
|
-
return
|
|
391
|
-
|
|
375
|
+
toHslColor() {
|
|
376
|
+
return {
|
|
377
|
+
...ColorValue.toHsl(this._tbgr),
|
|
378
|
+
...(this._hue != undefined && { h: this._hue }),
|
|
379
|
+
};
|
|
380
|
+
}
|
|
392
381
|
/** Create an HslColor from this ColorValue */
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
382
|
+
static toHsl(tbgr) {
|
|
383
|
+
const { r, g, b } = ColorValue.getColors(tbgr);
|
|
384
|
+
const red = r / 255;
|
|
385
|
+
const green = g / 255;
|
|
386
|
+
const blue = b / 255;
|
|
387
|
+
const cMin = Math.min(red, green, blue);
|
|
388
|
+
const cMax = Math.max(red, green, blue);
|
|
389
|
+
const delta = cMax - cMin;
|
|
390
|
+
let hue = 0;
|
|
391
|
+
let saturation = 0;
|
|
403
392
|
if (0 === delta) {
|
|
404
393
|
hue = 0;
|
|
405
394
|
}
|
|
@@ -416,7 +405,7 @@ var ColorValue = /** @class */ (function () {
|
|
|
416
405
|
if (hue < 0) {
|
|
417
406
|
hue += 360;
|
|
418
407
|
}
|
|
419
|
-
|
|
408
|
+
let lightness = (cMax + cMin) / 2;
|
|
420
409
|
saturation = 0 === delta ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
|
|
421
410
|
// round values to 1 decimal place
|
|
422
411
|
saturation = Number((saturation * 100).toFixed(1));
|
|
@@ -427,32 +416,35 @@ var ColorValue = /** @class */ (function () {
|
|
|
427
416
|
l: lightness,
|
|
428
417
|
a: this.getAlpha(tbgr) / 255,
|
|
429
418
|
};
|
|
430
|
-
}
|
|
419
|
+
}
|
|
431
420
|
/**
|
|
432
421
|
* Create an RgbColor from this ColorValue
|
|
433
422
|
*/
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
return { r
|
|
437
|
-
}
|
|
423
|
+
toRgbColor() {
|
|
424
|
+
const { r, g, b } = ColorValue.getColors(this._tbgr);
|
|
425
|
+
return { r, g, b, a: this.getAlpha() / 255 };
|
|
426
|
+
}
|
|
438
427
|
/**
|
|
439
428
|
* Return HsvColor from this ColorValue
|
|
440
429
|
*/
|
|
441
|
-
|
|
442
|
-
return
|
|
443
|
-
|
|
430
|
+
toHsvColor() {
|
|
431
|
+
return {
|
|
432
|
+
...ColorValue.toHsv(this._tbgr),
|
|
433
|
+
...(this._hue != undefined && { h: this._hue }),
|
|
434
|
+
};
|
|
435
|
+
}
|
|
444
436
|
/**
|
|
445
437
|
* Create an HsvColor from this ColorValue
|
|
446
438
|
*/
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
439
|
+
static toHsv(tbgr) {
|
|
440
|
+
const { r, g, b } = ColorValue.getColors(tbgr);
|
|
441
|
+
const red = r / 255;
|
|
442
|
+
const green = g / 255;
|
|
443
|
+
const blue = b / 255;
|
|
444
|
+
const cMin = Math.min(red, green, blue);
|
|
445
|
+
const cMax = Math.max(red, green, blue);
|
|
446
|
+
const delta = cMax - cMin;
|
|
447
|
+
let hue = 0;
|
|
456
448
|
if (0 === delta) {
|
|
457
449
|
hue = 0;
|
|
458
450
|
}
|
|
@@ -469,8 +461,8 @@ var ColorValue = /** @class */ (function () {
|
|
|
469
461
|
if (hue < 0) {
|
|
470
462
|
hue += 360;
|
|
471
463
|
}
|
|
472
|
-
|
|
473
|
-
|
|
464
|
+
let brightness = cMax;
|
|
465
|
+
let saturation = cMax === 0 ? 0 : delta / cMax;
|
|
474
466
|
// round values to 1 decimal place
|
|
475
467
|
saturation = Number((saturation * 100).toFixed(1));
|
|
476
468
|
brightness = Number((brightness * 100).toFixed(1));
|
|
@@ -480,51 +472,49 @@ var ColorValue = /** @class */ (function () {
|
|
|
480
472
|
v: brightness,
|
|
481
473
|
a: this.getAlpha(tbgr) / 255,
|
|
482
474
|
};
|
|
483
|
-
}
|
|
475
|
+
}
|
|
484
476
|
/** True if the value of this ColorValue is the same as another ColorValue. */
|
|
485
|
-
|
|
477
|
+
equals(other) {
|
|
486
478
|
return this._tbgr === other._tbgr;
|
|
487
|
-
}
|
|
488
|
-
|
|
489
|
-
if (precision === void 0) { precision = 1; }
|
|
479
|
+
}
|
|
480
|
+
static getFormattedColorNumber(value, precision = 1) {
|
|
490
481
|
if (0 === precision) {
|
|
491
482
|
Math.round(value).toString();
|
|
492
483
|
}
|
|
493
484
|
return Number(value.toFixed(precision)).toString();
|
|
494
|
-
}
|
|
485
|
+
}
|
|
495
486
|
/** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
|
|
496
|
-
|
|
487
|
+
toRgbString(includeAlpha) {
|
|
497
488
|
var _a;
|
|
498
|
-
|
|
499
|
-
|
|
489
|
+
const rgb = this.toRgbColor();
|
|
490
|
+
const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
|
500
491
|
if (includeAlpha) {
|
|
501
|
-
|
|
502
|
-
return
|
|
492
|
+
const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
|
|
493
|
+
return `rgba(${rgbString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
503
494
|
}
|
|
504
|
-
return
|
|
505
|
-
}
|
|
495
|
+
return `rgb(${rgbString})`;
|
|
496
|
+
}
|
|
506
497
|
/** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */
|
|
507
|
-
|
|
498
|
+
toHslString(includeAlpha) {
|
|
508
499
|
var _a, _b;
|
|
509
|
-
|
|
510
|
-
|
|
500
|
+
const hsl = this.toHslColor();
|
|
501
|
+
const hslString = `${ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
|
|
511
502
|
if (includeAlpha) {
|
|
512
|
-
|
|
513
|
-
return
|
|
503
|
+
const alpha = (_b = hsl.a) !== null && _b !== void 0 ? _b : 1;
|
|
504
|
+
return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
514
505
|
}
|
|
515
|
-
return
|
|
516
|
-
}
|
|
506
|
+
return `hsl(${hslString})`;
|
|
507
|
+
}
|
|
517
508
|
/** Convert this ColorValue to a string in the form "hsv(h,s,v) or hsva(h,s,v,a)" - i.e hsv(120,50%,50%). */
|
|
518
|
-
|
|
509
|
+
toHsvString(includeAlpha) {
|
|
519
510
|
var _a, _b;
|
|
520
|
-
|
|
521
|
-
|
|
511
|
+
const hsv = this.toHsvColor();
|
|
512
|
+
const hsvString = `${(_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h}, ${hsv.s}%, ${hsv.v}%`;
|
|
522
513
|
if (includeAlpha) {
|
|
523
|
-
|
|
524
|
-
return
|
|
514
|
+
const alpha = (_b = hsv.a) !== null && _b !== void 0 ? _b : 1;
|
|
515
|
+
return `hsva(${hsvString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
525
516
|
}
|
|
526
|
-
return
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
}());
|
|
517
|
+
return `hsv(${hsvString})`;
|
|
518
|
+
}
|
|
519
|
+
}
|
|
530
520
|
exports.ColorValue = ColorValue;
|
|
@@ -8,24 +8,24 @@ exports.FocusTrap = void 0;
|
|
|
8
8
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
9
9
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
10
10
|
*--------------------------------------------------------------------------------------------*/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
const react_1 = __importDefault(require("react"));
|
|
12
|
+
const focusable_1 = require("../functions/focusable");
|
|
13
|
+
const useMergedRefs_1 = require("../hooks/useMergedRefs");
|
|
14
14
|
/**
|
|
15
15
|
* Trap focus within child container.
|
|
16
16
|
* Used for modals and dialogs.
|
|
17
17
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
const FocusTrap = (props) => {
|
|
19
|
+
const { children } = props;
|
|
20
|
+
const childRef = react_1.default.useRef();
|
|
21
|
+
const getFirstLastFocusables = () => {
|
|
22
|
+
const elements = (0, focusable_1.getTabbableElements)(childRef.current);
|
|
23
|
+
const firstElement = elements[0];
|
|
24
|
+
const lastElement = elements[(elements.length || 1) - 1];
|
|
25
25
|
return [firstElement, lastElement];
|
|
26
26
|
};
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
const onFirstFocus = (event) => {
|
|
28
|
+
const [firstElement, lastElement] = getFirstLastFocusables();
|
|
29
29
|
if (event.relatedTarget === firstElement) {
|
|
30
30
|
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
31
31
|
}
|
|
@@ -33,8 +33,8 @@ var FocusTrap = function (props) {
|
|
|
33
33
|
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
const onLastFocus = (event) => {
|
|
37
|
+
const [firstElement, lastElement] = getFirstLastFocusables();
|
|
38
38
|
if (event.relatedTarget === lastElement) {
|
|
39
39
|
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
40
40
|
}
|