@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,38 +1,27 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
1
|
/*---------------------------------------------------------------------------------------------
|
|
13
2
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
14
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
15
4
|
*--------------------------------------------------------------------------------------------*/
|
|
16
5
|
import { getBoundedValue } from '../functions/numbers';
|
|
17
6
|
// portions adapted from Three.js Copyright © 2010-2017 three.js authors
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
const scratchBytes = new Uint8Array(4);
|
|
8
|
+
const scratchUInt32 = new Uint32Array(scratchBytes.buffer);
|
|
20
9
|
/**
|
|
21
10
|
* isRgbValue type guard.
|
|
22
11
|
*/
|
|
23
|
-
export
|
|
12
|
+
export const isRgbColor = (value) => {
|
|
24
13
|
return (typeof value !== 'string' && 'r' in value && 'g' in value && 'b' in value);
|
|
25
14
|
};
|
|
26
15
|
/**
|
|
27
16
|
* isHslValue type guard.
|
|
28
17
|
*/
|
|
29
|
-
export
|
|
18
|
+
export const isHslColor = (value) => {
|
|
30
19
|
return (typeof value !== 'string' && 'h' in value && 's' in value && 'l' in value);
|
|
31
20
|
};
|
|
32
21
|
/**
|
|
33
22
|
* isHsvValue type guard.
|
|
34
23
|
*/
|
|
35
|
-
export
|
|
24
|
+
export const isHsvColor = (value) => {
|
|
36
25
|
return (typeof value !== 'string' && 'h' in value && 's' in value && 'v' in value);
|
|
37
26
|
};
|
|
38
27
|
/**
|
|
@@ -46,8 +35,8 @@ export var isHsvColor = function (value) {
|
|
|
46
35
|
*
|
|
47
36
|
* @public
|
|
48
37
|
*/
|
|
49
|
-
|
|
50
|
-
|
|
38
|
+
export class ColorValue {
|
|
39
|
+
constructor(tbgr, hue) {
|
|
51
40
|
scratchUInt32[0] = tbgr; // Force to be a 32-bit unsigned integer
|
|
52
41
|
this._tbgr = scratchUInt32[0];
|
|
53
42
|
this._hue = hue;
|
|
@@ -63,7 +52,7 @@ var ColorValue = /** @class */ (function () {
|
|
|
63
52
|
* *"hsl(120,50%,50%)"*
|
|
64
53
|
* *"#rrggbb"*
|
|
65
54
|
*/
|
|
66
|
-
|
|
55
|
+
static create(val) {
|
|
67
56
|
if (!val) {
|
|
68
57
|
return ColorValue.fromTbgr(0);
|
|
69
58
|
}
|
|
@@ -80,36 +69,36 @@ var ColorValue = /** @class */ (function () {
|
|
|
80
69
|
return ColorValue.fromString(val, ColorValue.fromTbgr(0));
|
|
81
70
|
}
|
|
82
71
|
return ColorValue.fromTbgr(0);
|
|
83
|
-
}
|
|
72
|
+
}
|
|
84
73
|
/**
|
|
85
74
|
* Convert this ColorValue to an unsigned 32 bit integer representing the 0xTTBBGGRR value
|
|
86
75
|
*/
|
|
87
|
-
|
|
76
|
+
toTbgr() {
|
|
88
77
|
return this._tbgr;
|
|
89
|
-
}
|
|
78
|
+
}
|
|
90
79
|
/**
|
|
91
80
|
* Create a ColorValue from its 0xTTBBGGRR representation.
|
|
92
81
|
*/
|
|
93
|
-
|
|
82
|
+
static fromTbgr(tbgr) {
|
|
94
83
|
return new ColorValue(tbgr);
|
|
95
|
-
}
|
|
84
|
+
}
|
|
96
85
|
/**
|
|
97
86
|
* Create a ColorValue from Red, Green, Blue, Transparency values. All inputs should be integers between 0-255.
|
|
98
87
|
*/
|
|
99
|
-
|
|
88
|
+
static fromRgbt(red, green, blue, transparency) {
|
|
100
89
|
return this.fromTbgr(this.computeTbgrFromComponents(red, green, blue, transparency));
|
|
101
|
-
}
|
|
90
|
+
}
|
|
102
91
|
/**
|
|
103
92
|
* Compute the 0xTTBBGGRR value corresponding to the specified Red, Green, Blue, Transparency components.
|
|
104
93
|
* All inputs should be integers between 0-255.
|
|
105
94
|
*/
|
|
106
|
-
|
|
95
|
+
static computeTbgrFromComponents(red, green, blue, transparency) {
|
|
107
96
|
scratchBytes[0] = red;
|
|
108
97
|
scratchBytes[1] = green;
|
|
109
98
|
scratchBytes[2] = blue;
|
|
110
99
|
scratchBytes[3] = transparency || 0;
|
|
111
100
|
return scratchUInt32[0];
|
|
112
|
-
}
|
|
101
|
+
}
|
|
113
102
|
/**
|
|
114
103
|
* Create a ColorValue from a string representation. The following representations are supported:
|
|
115
104
|
* *"rgb(255,0,0)"*
|
|
@@ -120,51 +109,51 @@ var ColorValue = /** @class */ (function () {
|
|
|
120
109
|
* NOTE: If defaultColorIfNotParsed is not defined and string is invalid then error is thrown.
|
|
121
110
|
* This allows component builders to know if they received bad input from user.
|
|
122
111
|
*/
|
|
123
|
-
|
|
124
|
-
|
|
112
|
+
static fromString(val, defaultColorIfNotParsed) {
|
|
113
|
+
const [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed === null || defaultColorIfNotParsed === void 0 ? void 0 : defaultColorIfNotParsed.toTbgr());
|
|
125
114
|
return new ColorValue(tbgr, hue);
|
|
126
|
-
}
|
|
115
|
+
}
|
|
127
116
|
/** Create a ColorValue from hue, saturation, lightness values. */
|
|
128
|
-
|
|
117
|
+
static fromHSL(hsl) {
|
|
129
118
|
var _a;
|
|
130
|
-
|
|
119
|
+
const alpha = (_a = hsl.a) !== null && _a !== void 0 ? _a : 1;
|
|
131
120
|
return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, Math.round((1 - alpha) * 255)), hsl.h);
|
|
132
|
-
}
|
|
121
|
+
}
|
|
133
122
|
/** Create a ColorValue from an RgbColor */
|
|
134
|
-
|
|
123
|
+
static fromRGB(rgb) {
|
|
135
124
|
var _a;
|
|
136
|
-
|
|
125
|
+
const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
|
|
137
126
|
return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, Math.round((1 - alpha) * 255));
|
|
138
|
-
}
|
|
127
|
+
}
|
|
139
128
|
/**
|
|
140
129
|
* Create a ColorValue from an HsvColor
|
|
141
130
|
*/
|
|
142
|
-
|
|
131
|
+
static fromHSV(hsv) {
|
|
143
132
|
var _a;
|
|
144
|
-
|
|
145
|
-
|
|
133
|
+
const alpha = (_a = hsv.a) !== null && _a !== void 0 ? _a : 1;
|
|
134
|
+
const transparency = Math.round((1 - alpha) * 255);
|
|
146
135
|
// Check for simple case first.
|
|
147
136
|
if (!hsv.s || hsv.h === -1) {
|
|
148
137
|
// hue must be undefined, have no color only white
|
|
149
|
-
|
|
138
|
+
const white = 0xff & Math.floor((255.0 * hsv.v) / 100.0 + 0.5 + 3.0e-14);
|
|
150
139
|
return ColorValue.fromRgbt(white, white, white, 0);
|
|
151
140
|
}
|
|
152
|
-
|
|
141
|
+
let dhue = hsv.h, dsaturation = hsv.s, dvalue = hsv.v;
|
|
153
142
|
if (dhue === 360) {
|
|
154
143
|
dhue = 0.0;
|
|
155
144
|
}
|
|
156
145
|
dhue /= 60; // hue is now [0..6]
|
|
157
|
-
|
|
158
|
-
|
|
146
|
+
const hueIntpart = Math.floor(dhue); // convert double -> int
|
|
147
|
+
const hueFractpart = dhue - hueIntpart;
|
|
159
148
|
dvalue /= 100;
|
|
160
149
|
dsaturation /= 100;
|
|
161
|
-
|
|
162
|
-
|
|
150
|
+
const p = 0xff & Math.floor(dvalue * (1.0 - dsaturation) * 255.0 + 0.5);
|
|
151
|
+
const q = 0xff &
|
|
163
152
|
Math.floor(dvalue * (1.0 - dsaturation * hueFractpart) * 255.0 + 0.5);
|
|
164
|
-
|
|
153
|
+
const t = 0xff &
|
|
165
154
|
Math.floor(dvalue * (1.0 - dsaturation * (1.0 - hueFractpart)) * 255.0 + 0.5);
|
|
166
|
-
|
|
167
|
-
|
|
155
|
+
const v = 0xff & Math.floor(dvalue * 255 + 0.5);
|
|
156
|
+
let r = 0, b = 0, g = 0;
|
|
168
157
|
switch (hueIntpart) {
|
|
169
158
|
case 0:
|
|
170
159
|
r = v;
|
|
@@ -193,7 +182,7 @@ var ColorValue = /** @class */ (function () {
|
|
|
193
182
|
break; // magenta-ish
|
|
194
183
|
}
|
|
195
184
|
return new ColorValue(ColorValue.computeTbgrFromComponents(r, g, b, transparency), hsv.h);
|
|
196
|
-
}
|
|
185
|
+
}
|
|
197
186
|
/**
|
|
198
187
|
* Compute the 0xTTBBGGRR value corresponding to a string representation of a color. The following representations are supported:
|
|
199
188
|
* *"rgb(255,0,0)"*
|
|
@@ -202,26 +191,26 @@ var ColorValue = /** @class */ (function () {
|
|
|
202
191
|
* *"hsl(120,50%,50%)"*
|
|
203
192
|
* *"#rrggbb"*
|
|
204
193
|
*/
|
|
205
|
-
|
|
194
|
+
static computeTbgrFromString(val, defaultColorIfNotParsed) {
|
|
206
195
|
val = val.toLowerCase();
|
|
207
|
-
|
|
196
|
+
let m = /^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(val);
|
|
208
197
|
if (m) {
|
|
209
198
|
// rgb / hsl
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
return 255 * getBoundedValue(
|
|
199
|
+
let color;
|
|
200
|
+
const name = m[1];
|
|
201
|
+
const components = m[2];
|
|
202
|
+
const hasPercent = (str) => str[str.length - 1] === '%';
|
|
203
|
+
const floatOrPercent = (str) => {
|
|
204
|
+
const v = parseFloat(str);
|
|
205
|
+
return 255 * getBoundedValue(hasPercent(str) ? v / 100 : v, 0, 1);
|
|
217
206
|
};
|
|
218
|
-
|
|
219
|
-
|
|
207
|
+
const intOrPercent = (str) => {
|
|
208
|
+
const v = hasPercent(str)
|
|
220
209
|
? (parseFloat(str) / 100) * 255
|
|
221
210
|
: parseInt(str, 10);
|
|
222
211
|
return getBoundedValue(v, 0, 255);
|
|
223
212
|
};
|
|
224
|
-
switch (
|
|
213
|
+
switch (name) {
|
|
225
214
|
case 'rgb':
|
|
226
215
|
case 'rgba':
|
|
227
216
|
color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
|
|
@@ -240,10 +229,10 @@ var ColorValue = /** @class */ (function () {
|
|
|
240
229
|
color = /^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
|
|
241
230
|
if (color) {
|
|
242
231
|
// hsl(120,50%,50%) hsla(120,50%,50%,0.5)
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
232
|
+
const h = parseFloat(color[1]);
|
|
233
|
+
const s = parseInt(color[2], 10) / 100;
|
|
234
|
+
const l = parseInt(color[3], 10) / 100;
|
|
235
|
+
const t = typeof color[4] === 'string' ? 255 - floatOrPercent(color[4]) : 0;
|
|
247
236
|
return [this.computeTbgrFromHSL(h / 360, s, l, t), h];
|
|
248
237
|
}
|
|
249
238
|
break;
|
|
@@ -252,8 +241,8 @@ var ColorValue = /** @class */ (function () {
|
|
|
252
241
|
}
|
|
253
242
|
else if ((m = /^\#([A-Fa-f\d]+)$/.exec(val))) {
|
|
254
243
|
// hex color
|
|
255
|
-
|
|
256
|
-
|
|
244
|
+
const hex = m[1];
|
|
245
|
+
const size = hex.length;
|
|
257
246
|
if (size === 3) {
|
|
258
247
|
// #ff0
|
|
259
248
|
return [
|
|
@@ -280,11 +269,11 @@ var ColorValue = /** @class */ (function () {
|
|
|
280
269
|
return [defaultColorIfNotParsed, undefined];
|
|
281
270
|
}
|
|
282
271
|
throw new Error('unable to parse string into ColorValue');
|
|
283
|
-
}
|
|
272
|
+
}
|
|
284
273
|
/**
|
|
285
274
|
* Get the r,g,b,t values encoded in an 0xTTBBGGRR value. Values will be integers between 0-255.
|
|
286
275
|
*/
|
|
287
|
-
|
|
276
|
+
static getColors(tbgr) {
|
|
288
277
|
scratchUInt32[0] = tbgr;
|
|
289
278
|
return {
|
|
290
279
|
b: scratchBytes[2],
|
|
@@ -292,11 +281,11 @@ var ColorValue = /** @class */ (function () {
|
|
|
292
281
|
r: scratchBytes[0],
|
|
293
282
|
t: scratchBytes[3],
|
|
294
283
|
};
|
|
295
|
-
}
|
|
284
|
+
}
|
|
296
285
|
/**
|
|
297
286
|
* Get the RGB value of the 0xTTBBGGRR color as a number in 0xRRGGBB or 0xRRGGBBAA format
|
|
298
287
|
*/
|
|
299
|
-
|
|
288
|
+
getRgb(includeAlpha) {
|
|
300
289
|
scratchUInt32[0] = this._tbgr;
|
|
301
290
|
if (includeAlpha) {
|
|
302
291
|
return ((scratchBytes[0] << 24) +
|
|
@@ -305,45 +294,44 @@ var ColorValue = /** @class */ (function () {
|
|
|
305
294
|
(255 - scratchBytes[3]));
|
|
306
295
|
}
|
|
307
296
|
return (scratchBytes[0] << 16) + (scratchBytes[1] << 8) + scratchBytes[2];
|
|
308
|
-
}
|
|
297
|
+
}
|
|
309
298
|
/**
|
|
310
299
|
* Get the alpha value for this ColorDef. Will be between 0-255
|
|
311
300
|
*/
|
|
312
|
-
|
|
301
|
+
getAlpha() {
|
|
313
302
|
return ColorValue.getAlpha(this._tbgr);
|
|
314
|
-
}
|
|
303
|
+
}
|
|
315
304
|
/**
|
|
316
305
|
* Extract the alpha value from a 0xTTBBGGRR color.
|
|
317
306
|
*/
|
|
318
|
-
|
|
307
|
+
static getAlpha(tbgr) {
|
|
319
308
|
scratchUInt32[0] = tbgr;
|
|
320
309
|
return 255 - scratchBytes[3];
|
|
321
|
-
}
|
|
310
|
+
}
|
|
322
311
|
/**
|
|
323
312
|
* Convert this ColorValue to a string in the form "#rrggbb" or "#rrggbbaa" where values are hex digits of the respective colors
|
|
324
313
|
*/
|
|
325
|
-
|
|
314
|
+
toHexString(includeAlpha) {
|
|
326
315
|
if (includeAlpha) {
|
|
327
|
-
|
|
316
|
+
let value = this.getRgb(includeAlpha);
|
|
328
317
|
if (value < 0) {
|
|
329
318
|
value = 0xffffffff + value + 1;
|
|
330
319
|
}
|
|
331
|
-
return
|
|
320
|
+
return `#${`00000000${value.toString(16)}`.slice(-8)}`;
|
|
332
321
|
}
|
|
333
|
-
return
|
|
334
|
-
}
|
|
322
|
+
return `#${`000000${this.getRgb().toString(16)}`.slice(-6)}`;
|
|
323
|
+
}
|
|
335
324
|
/**
|
|
336
325
|
* Compute the 0xTTBBGGRR color corresponding to the specified hue, saturation, lightness values.
|
|
337
326
|
*/
|
|
338
|
-
|
|
327
|
+
static computeTbgrFromHSL(
|
|
339
328
|
/** 0-1 */
|
|
340
329
|
h,
|
|
341
330
|
/** 0-1 */
|
|
342
331
|
s,
|
|
343
332
|
/** 0-1 */
|
|
344
|
-
l, transparency) {
|
|
345
|
-
|
|
346
|
-
var torgb = function (p1, q1, t) {
|
|
333
|
+
l, transparency = 0) {
|
|
334
|
+
const torgb = (p1, q1, t) => {
|
|
347
335
|
if (t < 0) {
|
|
348
336
|
t += 1;
|
|
349
337
|
}
|
|
@@ -361,10 +349,8 @@ var ColorValue = /** @class */ (function () {
|
|
|
361
349
|
}
|
|
362
350
|
return p1;
|
|
363
351
|
};
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
};
|
|
367
|
-
var modulo = function (n, m) { return ((n % m) + m) % m; };
|
|
352
|
+
const hue2rgb = (p1, q1, t) => Math.round(torgb(p1, q1, t) * 255);
|
|
353
|
+
const modulo = (n, m) => ((n % m) + m) % m;
|
|
368
354
|
// h,s,l ranges are in 0.0 - 1.0
|
|
369
355
|
h = modulo(h, 1);
|
|
370
356
|
s = getBoundedValue(s, 0, 1);
|
|
@@ -373,27 +359,30 @@ var ColorValue = /** @class */ (function () {
|
|
|
373
359
|
l *= 255;
|
|
374
360
|
return this.computeTbgrFromComponents(l, l, l, transparency);
|
|
375
361
|
}
|
|
376
|
-
|
|
377
|
-
|
|
362
|
+
const p = l <= 0.5 ? l * (1 + s) : l + s - l * s;
|
|
363
|
+
const q = 2 * l - p;
|
|
378
364
|
return this.computeTbgrFromComponents(hue2rgb(q, p, h + 1 / 3), hue2rgb(q, p, h), hue2rgb(q, p, h - 1 / 3), transparency);
|
|
379
|
-
}
|
|
365
|
+
}
|
|
380
366
|
/**
|
|
381
367
|
* Return HslColor from this ColorValue
|
|
382
368
|
*/
|
|
383
|
-
|
|
384
|
-
return
|
|
385
|
-
|
|
369
|
+
toHslColor() {
|
|
370
|
+
return {
|
|
371
|
+
...ColorValue.toHsl(this._tbgr),
|
|
372
|
+
...(this._hue != undefined && { h: this._hue }),
|
|
373
|
+
};
|
|
374
|
+
}
|
|
386
375
|
/** Create an HslColor from this ColorValue */
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
376
|
+
static toHsl(tbgr) {
|
|
377
|
+
const { r, g, b } = ColorValue.getColors(tbgr);
|
|
378
|
+
const red = r / 255;
|
|
379
|
+
const green = g / 255;
|
|
380
|
+
const blue = b / 255;
|
|
381
|
+
const cMin = Math.min(red, green, blue);
|
|
382
|
+
const cMax = Math.max(red, green, blue);
|
|
383
|
+
const delta = cMax - cMin;
|
|
384
|
+
let hue = 0;
|
|
385
|
+
let saturation = 0;
|
|
397
386
|
if (0 === delta) {
|
|
398
387
|
hue = 0;
|
|
399
388
|
}
|
|
@@ -410,7 +399,7 @@ var ColorValue = /** @class */ (function () {
|
|
|
410
399
|
if (hue < 0) {
|
|
411
400
|
hue += 360;
|
|
412
401
|
}
|
|
413
|
-
|
|
402
|
+
let lightness = (cMax + cMin) / 2;
|
|
414
403
|
saturation = 0 === delta ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
|
|
415
404
|
// round values to 1 decimal place
|
|
416
405
|
saturation = Number((saturation * 100).toFixed(1));
|
|
@@ -421,32 +410,35 @@ var ColorValue = /** @class */ (function () {
|
|
|
421
410
|
l: lightness,
|
|
422
411
|
a: this.getAlpha(tbgr) / 255,
|
|
423
412
|
};
|
|
424
|
-
}
|
|
413
|
+
}
|
|
425
414
|
/**
|
|
426
415
|
* Create an RgbColor from this ColorValue
|
|
427
416
|
*/
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
return { r
|
|
431
|
-
}
|
|
417
|
+
toRgbColor() {
|
|
418
|
+
const { r, g, b } = ColorValue.getColors(this._tbgr);
|
|
419
|
+
return { r, g, b, a: this.getAlpha() / 255 };
|
|
420
|
+
}
|
|
432
421
|
/**
|
|
433
422
|
* Return HsvColor from this ColorValue
|
|
434
423
|
*/
|
|
435
|
-
|
|
436
|
-
return
|
|
437
|
-
|
|
424
|
+
toHsvColor() {
|
|
425
|
+
return {
|
|
426
|
+
...ColorValue.toHsv(this._tbgr),
|
|
427
|
+
...(this._hue != undefined && { h: this._hue }),
|
|
428
|
+
};
|
|
429
|
+
}
|
|
438
430
|
/**
|
|
439
431
|
* Create an HsvColor from this ColorValue
|
|
440
432
|
*/
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
433
|
+
static toHsv(tbgr) {
|
|
434
|
+
const { r, g, b } = ColorValue.getColors(tbgr);
|
|
435
|
+
const red = r / 255;
|
|
436
|
+
const green = g / 255;
|
|
437
|
+
const blue = b / 255;
|
|
438
|
+
const cMin = Math.min(red, green, blue);
|
|
439
|
+
const cMax = Math.max(red, green, blue);
|
|
440
|
+
const delta = cMax - cMin;
|
|
441
|
+
let hue = 0;
|
|
450
442
|
if (0 === delta) {
|
|
451
443
|
hue = 0;
|
|
452
444
|
}
|
|
@@ -463,8 +455,8 @@ var ColorValue = /** @class */ (function () {
|
|
|
463
455
|
if (hue < 0) {
|
|
464
456
|
hue += 360;
|
|
465
457
|
}
|
|
466
|
-
|
|
467
|
-
|
|
458
|
+
let brightness = cMax;
|
|
459
|
+
let saturation = cMax === 0 ? 0 : delta / cMax;
|
|
468
460
|
// round values to 1 decimal place
|
|
469
461
|
saturation = Number((saturation * 100).toFixed(1));
|
|
470
462
|
brightness = Number((brightness * 100).toFixed(1));
|
|
@@ -474,51 +466,48 @@ var ColorValue = /** @class */ (function () {
|
|
|
474
466
|
v: brightness,
|
|
475
467
|
a: this.getAlpha(tbgr) / 255,
|
|
476
468
|
};
|
|
477
|
-
}
|
|
469
|
+
}
|
|
478
470
|
/** True if the value of this ColorValue is the same as another ColorValue. */
|
|
479
|
-
|
|
471
|
+
equals(other) {
|
|
480
472
|
return this._tbgr === other._tbgr;
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
if (precision === void 0) { precision = 1; }
|
|
473
|
+
}
|
|
474
|
+
static getFormattedColorNumber(value, precision = 1) {
|
|
484
475
|
if (0 === precision) {
|
|
485
476
|
Math.round(value).toString();
|
|
486
477
|
}
|
|
487
478
|
return Number(value.toFixed(precision)).toString();
|
|
488
|
-
}
|
|
479
|
+
}
|
|
489
480
|
/** 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. */
|
|
490
|
-
|
|
481
|
+
toRgbString(includeAlpha) {
|
|
491
482
|
var _a;
|
|
492
|
-
|
|
493
|
-
|
|
483
|
+
const rgb = this.toRgbColor();
|
|
484
|
+
const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
|
494
485
|
if (includeAlpha) {
|
|
495
|
-
|
|
496
|
-
return
|
|
486
|
+
const alpha = (_a = rgb.a) !== null && _a !== void 0 ? _a : 1;
|
|
487
|
+
return `rgba(${rgbString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
497
488
|
}
|
|
498
|
-
return
|
|
499
|
-
}
|
|
489
|
+
return `rgb(${rgbString})`;
|
|
490
|
+
}
|
|
500
491
|
/** 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%). */
|
|
501
|
-
|
|
492
|
+
toHslString(includeAlpha) {
|
|
502
493
|
var _a, _b;
|
|
503
|
-
|
|
504
|
-
|
|
494
|
+
const hsl = this.toHslColor();
|
|
495
|
+
const hslString = `${ColorValue.getFormattedColorNumber((_a = this._hue) !== null && _a !== void 0 ? _a : hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
|
|
505
496
|
if (includeAlpha) {
|
|
506
|
-
|
|
507
|
-
return
|
|
497
|
+
const alpha = (_b = hsl.a) !== null && _b !== void 0 ? _b : 1;
|
|
498
|
+
return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
508
499
|
}
|
|
509
|
-
return
|
|
510
|
-
}
|
|
500
|
+
return `hsl(${hslString})`;
|
|
501
|
+
}
|
|
511
502
|
/** 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%). */
|
|
512
|
-
|
|
503
|
+
toHsvString(includeAlpha) {
|
|
513
504
|
var _a, _b;
|
|
514
|
-
|
|
515
|
-
|
|
505
|
+
const hsv = this.toHsvColor();
|
|
506
|
+
const hsvString = `${(_a = this._hue) !== null && _a !== void 0 ? _a : hsv.h}, ${hsv.s}%, ${hsv.v}%`;
|
|
516
507
|
if (includeAlpha) {
|
|
517
|
-
|
|
518
|
-
return
|
|
508
|
+
const alpha = (_b = hsv.a) !== null && _b !== void 0 ? _b : 1;
|
|
509
|
+
return `hsva(${hsvString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
519
510
|
}
|
|
520
|
-
return
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
}());
|
|
524
|
-
export { ColorValue };
|
|
511
|
+
return `hsv(${hsvString})`;
|
|
512
|
+
}
|
|
513
|
+
}
|
|
@@ -9,17 +9,17 @@ import { mergeRefs } from '../hooks/useMergedRefs';
|
|
|
9
9
|
* Trap focus within child container.
|
|
10
10
|
* Used for modals and dialogs.
|
|
11
11
|
*/
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
export const FocusTrap = (props) => {
|
|
13
|
+
const { children } = props;
|
|
14
|
+
const childRef = React.useRef();
|
|
15
|
+
const getFirstLastFocusables = () => {
|
|
16
|
+
const elements = getTabbableElements(childRef.current);
|
|
17
|
+
const firstElement = elements[0];
|
|
18
|
+
const lastElement = elements[(elements.length || 1) - 1];
|
|
19
19
|
return [firstElement, lastElement];
|
|
20
20
|
};
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
const onFirstFocus = (event) => {
|
|
22
|
+
const [firstElement, lastElement] = getFirstLastFocusables();
|
|
23
23
|
if (event.relatedTarget === firstElement) {
|
|
24
24
|
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
25
25
|
}
|
|
@@ -27,8 +27,8 @@ export var FocusTrap = function (props) {
|
|
|
27
27
|
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
const onLastFocus = (event) => {
|
|
31
|
+
const [firstElement, lastElement] = getFirstLastFocusables();
|
|
32
32
|
if (event.relatedTarget === lastElement) {
|
|
33
33
|
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
34
34
|
}
|
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
1
|
/*---------------------------------------------------------------------------------------------
|
|
24
2
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
25
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
@@ -30,18 +8,16 @@ import cx from 'classnames';
|
|
|
30
8
|
* Input container to wrap inputs with label, and add optional message and icon.
|
|
31
9
|
* @private
|
|
32
10
|
*/
|
|
33
|
-
export
|
|
11
|
+
export const InputContainer = (props) => {
|
|
34
12
|
var _a;
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
_a['iui-with-message'] = (!!message || !!icon || !!statusMessage) && !isLabelInline,
|
|
44
|
-
_a), className), style: style }, rest),
|
|
13
|
+
const { as: Element = 'div', label, disabled, required, status, message, icon, isLabelInline, isIconInline, children, className, style, statusMessage, ...rest } = props;
|
|
14
|
+
return (React.createElement(Element, { className: cx('iui-input-container', {
|
|
15
|
+
'iui-disabled': disabled,
|
|
16
|
+
[`iui-${status}`]: !!status,
|
|
17
|
+
'iui-inline-label': isLabelInline,
|
|
18
|
+
'iui-inline-icon': isIconInline,
|
|
19
|
+
'iui-with-message': (!!message || !!icon || !!statusMessage) && !isLabelInline,
|
|
20
|
+
}, className), style: style, ...rest },
|
|
45
21
|
label && (React.createElement("div", { className: cx('iui-label', {
|
|
46
22
|
'iui-required': required,
|
|
47
23
|
}) }, label)),
|
|
@@ -49,7 +25,7 @@ export var InputContainer = function (props) {
|
|
|
49
25
|
statusMessage ? (statusMessage) : (React.createElement(React.Fragment, null,
|
|
50
26
|
icon &&
|
|
51
27
|
React.cloneElement(icon, {
|
|
52
|
-
className: cx('iui-input-icon', (
|
|
28
|
+
className: cx('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
|
|
53
29
|
}),
|
|
54
30
|
message && !isLabelInline && (React.createElement("div", { className: 'iui-message' }, message))))));
|
|
55
31
|
};
|