@salt-ds/lab 1.0.0-alpha.13 → 1.0.0-alpha.14
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/dist-cjs/app-header/AppHeader.js +0 -1
- package/dist-cjs/app-header/AppHeader.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.js +0 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/useSelection.js +0 -1
- package/dist-cjs/calendar/useSelection.js.map +1 -1
- package/dist-cjs/carousel/Carousel.js +0 -1
- package/dist-cjs/carousel/Carousel.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenu.js +0 -1
- package/dist-cjs/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.js +0 -1
- package/dist-cjs/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-cjs/cascading-menu/CascadingMenuList.js +0 -1
- package/dist-cjs/cascading-menu/CascadingMenuList.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useClickAway.js +0 -1
- package/dist-cjs/cascading-menu/internal/useClickAway.js.map +1 -1
- package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js +0 -1
- package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +0 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useCombobox.js +0 -1
- package/dist-cjs/combo-box/useCombobox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/filterHelpers.js +0 -1
- package/dist-cjs/combo-box-deprecated/filterHelpers.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js +0 -1
- package/dist-cjs/combo-box-deprecated/internal/DefaultComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js +0 -1
- package/dist-cjs/combo-box-deprecated/internal/MultiSelectComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useComboBox.js +0 -1
- package/dist-cjs/combo-box-deprecated/internal/useComboBox.js.map +1 -1
- package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js +0 -1
- package/dist-cjs/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-cjs/common-hooks/useViewportTracking.js +0 -1
- package/dist-cjs/common-hooks/useViewportTracking.js.map +1 -1
- package/dist-cjs/common-hooks/utils/filter-utils.js +0 -1
- package/dist-cjs/common-hooks/utils/filter-utils.js.map +1 -1
- package/dist-cjs/contact-details/MailLinkComponent.js +0 -1
- package/dist-cjs/contact-details/MailLinkComponent.js.map +1 -1
- package/dist-cjs/content-status/internal/StatusIndicator.js +0 -1
- package/dist-cjs/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-cjs/deck-layout/DeckLayout.js +0 -1
- package/dist-cjs/deck-layout/DeckLayout.js.map +1 -1
- package/dist-cjs/drawer/Drawer.css.js +6 -0
- package/dist-cjs/drawer/Drawer.css.js.map +1 -0
- package/dist-cjs/drawer/Drawer.js +83 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -0
- package/dist-cjs/dropdown/Dropdown.js +0 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/dropdown/DropdownBase.js +0 -1
- package/dist-cjs/dropdown/DropdownBase.js.map +1 -1
- package/dist-cjs/dropdown/useDropdown.js +0 -1
- package/dist-cjs/dropdown/useDropdown.js.map +1 -1
- package/dist-cjs/dropdown/useDropdownBase.js +0 -1
- package/dist-cjs/dropdown/useDropdownBase.js.map +1 -1
- package/dist-cjs/index.js +13 -8
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/layer-layout/LayerLayout.js +0 -1
- package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
- package/dist-cjs/list/Highlighter.js +0 -1
- package/dist-cjs/list/Highlighter.js.map +1 -1
- package/dist-cjs/list/List.js +0 -1
- package/dist-cjs/list/List.js.map +1 -1
- package/dist-cjs/list/VirtualizedList.js +0 -1
- package/dist-cjs/list/VirtualizedList.js.map +1 -1
- package/dist-cjs/list/useList.js +0 -1
- package/dist-cjs/list/useList.js.map +1 -1
- package/dist-cjs/list/useListHeight.js +0 -1
- package/dist-cjs/list/useListHeight.js.map +1 -1
- package/dist-cjs/list-deprecated/ListItemBase.js +0 -1
- package/dist-cjs/list-deprecated/ListItemBase.js.map +1 -1
- package/dist-cjs/list-deprecated/internal/Highlighter.js +0 -1
- package/dist-cjs/list-deprecated/internal/Highlighter.js.map +1 -1
- package/dist-cjs/list-deprecated/useTypeSelect.js +0 -1
- package/dist-cjs/list-deprecated/useTypeSelect.js.map +1 -1
- package/dist-cjs/list-next/ListItemNext.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +25 -13
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +0 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/pill-next/PillNext.css.js +6 -0
- package/dist-cjs/pill-next/PillNext.css.js.map +1 -0
- package/dist-cjs/pill-next/PillNext.js +58 -0
- package/dist-cjs/pill-next/PillNext.js.map +1 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +36 -75
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +16 -24
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/query-input/internal/CategoryList.js +0 -1
- package/dist-cjs/query-input/internal/CategoryList.js.map +1 -1
- package/dist-cjs/query-input/internal/CategoryListItem.js +0 -1
- package/dist-cjs/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-cjs/query-input/internal/QueryInputBody.js +0 -1
- package/dist-cjs/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-cjs/query-input/internal/SearchList.js +0 -1
- package/dist-cjs/query-input/internal/SearchList.js.map +1 -1
- package/dist-cjs/query-input/internal/ValueList.js +0 -1
- package/dist-cjs/query-input/internal/ValueList.js.map +1 -1
- package/dist-cjs/query-input/useQueryInput.js +0 -1
- package/dist-cjs/query-input/useQueryInput.js.map +1 -1
- package/dist-cjs/responsive/useOverflow.js +0 -1
- package/dist-cjs/responsive/useOverflow.js.map +1 -1
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js +6 -0
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js +42 -0
- package/dist-cjs/stepped-tracker/StepLabel/StepLabel.js.map +1 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.css.js +6 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.js +64 -0
- package/dist-cjs/stepped-tracker/SteppedTracker.js.map +1 -0
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js +57 -0
- package/dist-cjs/stepped-tracker/SteppedTrackerContext.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js +6 -0
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.js +26 -0
- package/dist-cjs/stepped-tracker/TrackerConnector/TrackerConnector.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js +6 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js +111 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js +21 -0
- package/dist-cjs/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js.map +1 -0
- package/dist-cjs/stepped-tracker/useDetectTruncatedText.js +71 -0
- package/dist-cjs/stepped-tracker/useDetectTruncatedText.js.map +1 -0
- package/dist-cjs/tabs/Tabstrip.js +0 -1
- package/dist-cjs/tabs/Tabstrip.js.map +1 -1
- package/dist-cjs/tabs/useActivationIndicator.js +0 -1
- package/dist-cjs/tabs/useActivationIndicator.js.map +1 -1
- package/dist-cjs/tabs/useKeyboardNavigation.js +0 -1
- package/dist-cjs/tabs/useKeyboardNavigation.js.map +1 -1
- package/dist-cjs/tabs-next/OverflowMenu.js +0 -1
- package/dist-cjs/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-cjs/tokenized-input/useTokenizedInput.js +0 -1
- package/dist-cjs/tokenized-input/useTokenizedInput.js.map +1 -1
- package/dist-cjs/toolbar/Toolbar.js +0 -1
- package/dist-cjs/toolbar/Toolbar.js.map +1 -1
- package/dist-cjs/toolbar/internal/renderToolbarItems.js +0 -1
- package/dist-cjs/toolbar/internal/renderToolbarItems.js.map +1 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +0 -1
- package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-cjs/tree/Tree.js +0 -1
- package/dist-cjs/tree/Tree.js.map +1 -1
- package/dist-cjs/tree/useTree.js +0 -1
- package/dist-cjs/tree/useTree.js.map +1 -1
- package/dist-es/app-header/AppHeader.js +0 -1
- package/dist-es/app-header/AppHeader.js.map +1 -1
- package/dist-es/calendar/internal/CalendarNavigation.js +0 -1
- package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/useSelection.js +0 -1
- package/dist-es/calendar/useSelection.js.map +1 -1
- package/dist-es/carousel/Carousel.js +0 -1
- package/dist-es/carousel/Carousel.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenu.js +0 -1
- package/dist-es/cascading-menu/CascadingMenu.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuItem.js +0 -1
- package/dist-es/cascading-menu/CascadingMenuItem.js.map +1 -1
- package/dist-es/cascading-menu/CascadingMenuList.js +0 -1
- package/dist-es/cascading-menu/CascadingMenuList.js.map +1 -1
- package/dist-es/cascading-menu/internal/useClickAway.js +0 -1
- package/dist-es/cascading-menu/internal/useClickAway.js.map +1 -1
- package/dist-es/cascading-menu/internal/useMenuTriggerHandlers.js +0 -1
- package/dist-es/cascading-menu/internal/useMenuTriggerHandlers.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +0 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useCombobox.js +0 -1
- package/dist-es/combo-box/useCombobox.js.map +1 -1
- package/dist-es/combo-box-deprecated/filterHelpers.js +0 -1
- package/dist-es/combo-box-deprecated/filterHelpers.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js +0 -1
- package/dist-es/combo-box-deprecated/internal/DefaultComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js +0 -1
- package/dist-es/combo-box-deprecated/internal/MultiSelectComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/useComboBox.js +0 -1
- package/dist-es/combo-box-deprecated/internal/useComboBox.js.map +1 -1
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js +0 -1
- package/dist-es/combo-box-deprecated/internal/useMultiSelectComboBox.js.map +1 -1
- package/dist-es/common-hooks/useViewportTracking.js +0 -1
- package/dist-es/common-hooks/useViewportTracking.js.map +1 -1
- package/dist-es/common-hooks/utils/filter-utils.js +0 -1
- package/dist-es/common-hooks/utils/filter-utils.js.map +1 -1
- package/dist-es/contact-details/MailLinkComponent.js +0 -1
- package/dist-es/contact-details/MailLinkComponent.js.map +1 -1
- package/dist-es/content-status/internal/StatusIndicator.js +0 -1
- package/dist-es/content-status/internal/StatusIndicator.js.map +1 -1
- package/dist-es/deck-layout/DeckLayout.js +0 -1
- package/dist-es/deck-layout/DeckLayout.js.map +1 -1
- package/dist-es/drawer/Drawer.css.js +4 -0
- package/dist-es/drawer/Drawer.css.js.map +1 -0
- package/dist-es/drawer/Drawer.js +78 -0
- package/dist-es/drawer/Drawer.js.map +1 -0
- package/dist-es/dropdown/Dropdown.js +0 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/dropdown/DropdownBase.js +0 -1
- package/dist-es/dropdown/DropdownBase.js.map +1 -1
- package/dist-es/dropdown/useDropdown.js +0 -1
- package/dist-es/dropdown/useDropdown.js.map +1 -1
- package/dist-es/dropdown/useDropdownBase.js +0 -1
- package/dist-es/dropdown/useDropdownBase.js.map +1 -1
- package/dist-es/index.js +7 -4
- package/dist-es/index.js.map +1 -1
- package/dist-es/layer-layout/LayerLayout.js +0 -1
- package/dist-es/layer-layout/LayerLayout.js.map +1 -1
- package/dist-es/list/Highlighter.js +0 -1
- package/dist-es/list/Highlighter.js.map +1 -1
- package/dist-es/list/List.js +0 -1
- package/dist-es/list/List.js.map +1 -1
- package/dist-es/list/VirtualizedList.js +0 -1
- package/dist-es/list/VirtualizedList.js.map +1 -1
- package/dist-es/list/useList.js +0 -1
- package/dist-es/list/useList.js.map +1 -1
- package/dist-es/list/useListHeight.js +0 -1
- package/dist-es/list/useListHeight.js.map +1 -1
- package/dist-es/list-deprecated/ListItemBase.js +0 -1
- package/dist-es/list-deprecated/ListItemBase.js.map +1 -1
- package/dist-es/list-deprecated/internal/Highlighter.js +0 -1
- package/dist-es/list-deprecated/internal/Highlighter.js.map +1 -1
- package/dist-es/list-deprecated/useTypeSelect.js +0 -1
- package/dist-es/list-deprecated/useTypeSelect.js.map +1 -1
- package/dist-es/list-next/ListItemNext.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.js +25 -13
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +0 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/pill-next/PillNext.css.js +4 -0
- package/dist-es/pill-next/PillNext.css.js.map +1 -0
- package/dist-es/pill-next/PillNext.js +50 -0
- package/dist-es/pill-next/PillNext.js.map +1 -0
- package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +37 -75
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +16 -24
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/query-input/internal/CategoryList.js +0 -1
- package/dist-es/query-input/internal/CategoryList.js.map +1 -1
- package/dist-es/query-input/internal/CategoryListItem.js +0 -1
- package/dist-es/query-input/internal/CategoryListItem.js.map +1 -1
- package/dist-es/query-input/internal/QueryInputBody.js +0 -1
- package/dist-es/query-input/internal/QueryInputBody.js.map +1 -1
- package/dist-es/query-input/internal/SearchList.js +0 -1
- package/dist-es/query-input/internal/SearchList.js.map +1 -1
- package/dist-es/query-input/internal/ValueList.js +0 -1
- package/dist-es/query-input/internal/ValueList.js.map +1 -1
- package/dist-es/query-input/useQueryInput.js +0 -1
- package/dist-es/query-input/useQueryInput.js.map +1 -1
- package/dist-es/responsive/useOverflow.js +0 -1
- package/dist-es/responsive/useOverflow.js.map +1 -1
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js +4 -0
- package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js.map +1 -0
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js +38 -0
- package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map +1 -0
- package/dist-es/stepped-tracker/SteppedTracker.css.js +4 -0
- package/dist-es/stepped-tracker/SteppedTracker.css.js.map +1 -0
- package/dist-es/stepped-tracker/SteppedTracker.js +60 -0
- package/dist-es/stepped-tracker/SteppedTracker.js.map +1 -0
- package/dist-es/stepped-tracker/SteppedTrackerContext.js +50 -0
- package/dist-es/stepped-tracker/SteppedTrackerContext.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js +4 -0
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.js +22 -0
- package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js +4 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js +107 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map +1 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js +16 -0
- package/dist-es/stepped-tracker/TrackerStep/TrackerStepTooltipContext.js.map +1 -0
- package/dist-es/stepped-tracker/useDetectTruncatedText.js +69 -0
- package/dist-es/stepped-tracker/useDetectTruncatedText.js.map +1 -0
- package/dist-es/tabs/Tabstrip.js +0 -1
- package/dist-es/tabs/Tabstrip.js.map +1 -1
- package/dist-es/tabs/useActivationIndicator.js +0 -1
- package/dist-es/tabs/useActivationIndicator.js.map +1 -1
- package/dist-es/tabs/useKeyboardNavigation.js +0 -1
- package/dist-es/tabs/useKeyboardNavigation.js.map +1 -1
- package/dist-es/tabs-next/OverflowMenu.js +0 -1
- package/dist-es/tabs-next/OverflowMenu.js.map +1 -1
- package/dist-es/tokenized-input/useTokenizedInput.js +0 -1
- package/dist-es/tokenized-input/useTokenizedInput.js.map +1 -1
- package/dist-es/toolbar/Toolbar.js +0 -1
- package/dist-es/toolbar/Toolbar.js.map +1 -1
- package/dist-es/toolbar/internal/renderToolbarItems.js +0 -1
- package/dist-es/toolbar/internal/renderToolbarItems.js.map +1 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js +0 -1
- package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
- package/dist-es/tree/Tree.js +0 -1
- package/dist-es/tree/Tree.js.map +1 -1
- package/dist-es/tree/useTree.js +0 -1
- package/dist-es/tree/useTree.js.map +1 -1
- package/dist-types/drawer/Drawer.d.ts +31 -0
- package/dist-types/drawer/index.d.ts +1 -0
- package/dist-types/index.d.ts +3 -1
- package/dist-types/multiline-input/MultilineInput.d.ts +14 -14
- package/dist-types/pill-next/PillNext.d.ts +7 -0
- package/dist-types/pill-next/index.d.ts +1 -0
- package/dist-types/progress/CircularProgress/CircularProgress.d.ts +7 -24
- package/dist-types/progress/LinearProgress/LinearProgress.d.ts +7 -11
- package/dist-types/stepped-tracker/StepLabel/StepLabel.d.ts +5 -0
- package/dist-types/stepped-tracker/StepLabel/index.d.ts +1 -0
- package/dist-types/stepped-tracker/SteppedTracker.d.ts +12 -0
- package/dist-types/stepped-tracker/SteppedTrackerContext.d.ts +21 -0
- package/dist-types/stepped-tracker/TrackerConnector/TrackerConnector.d.ts +10 -0
- package/dist-types/stepped-tracker/TrackerConnector/index.d.ts +1 -0
- package/dist-types/stepped-tracker/TrackerStep/TrackerStep.d.ts +10 -0
- package/dist-types/stepped-tracker/TrackerStep/TrackerStepTooltipContext.d.ts +7 -0
- package/dist-types/stepped-tracker/TrackerStep/index.d.ts +3 -0
- package/dist-types/stepped-tracker/index.d.ts +3 -0
- package/dist-types/stepped-tracker/useDetectTruncatedText.d.ts +11 -0
- package/dist-types/utils/index.d.ts +0 -1
- package/package.json +8 -8
- package/dist-cjs/progress/CircularProgress/CircularProgressParts.js +0 -72
- package/dist-cjs/progress/CircularProgress/CircularProgressParts.js.map +0 -1
- package/dist-cjs/toast/Toast.css.js +0 -6
- package/dist-cjs/toast/Toast.css.js.map +0 -1
- package/dist-cjs/toast/Toast.js +0 -38
- package/dist-cjs/toast/Toast.js.map +0 -1
- package/dist-cjs/toast/ToastContent.css.js +0 -6
- package/dist-cjs/toast/ToastContent.css.js.map +0 -1
- package/dist-cjs/toast/ToastContent.js +0 -30
- package/dist-cjs/toast/ToastContent.js.map +0 -1
- package/dist-cjs/utils/useFloatingUI.js +0 -38
- package/dist-cjs/utils/useFloatingUI.js.map +0 -1
- package/dist-es/progress/CircularProgress/CircularProgressParts.js +0 -64
- package/dist-es/progress/CircularProgress/CircularProgressParts.js.map +0 -1
- package/dist-es/toast/Toast.css.js +0 -4
- package/dist-es/toast/Toast.css.js.map +0 -1
- package/dist-es/toast/Toast.js +0 -34
- package/dist-es/toast/Toast.js.map +0 -1
- package/dist-es/toast/ToastContent.css.js +0 -4
- package/dist-es/toast/ToastContent.css.js.map +0 -1
- package/dist-es/toast/ToastContent.js +0 -26
- package/dist-es/toast/ToastContent.js.map +0 -1
- package/dist-es/utils/useFloatingUI.js +0 -33
- package/dist-es/utils/useFloatingUI.js.map +0 -1
- package/dist-types/progress/CircularProgress/CircularProgressParts.d.ts +0 -13
- package/dist-types/toast/Toast.d.ts +0 -9
- package/dist-types/toast/ToastContent.d.ts +0 -2
- package/dist-types/toast/index.d.ts +0 -2
- package/dist-types/utils/useFloatingUI.d.ts +0 -34
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchList.js","sources":["../src/query-input/internal/SearchList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { List, ListItem, ListItemGroup } from \"../../list\";\n\nimport { SelectionChangeHandler } from \"../../common-hooks\";\n\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport queryInputCss from \"../QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputSearchList\");\n\nexport interface SearchListProps {\n inputValue?: string;\n selectedItems?: QueryInputItem[];\n onChange: (items: QueryInputItem[]) => void;\n rootWidth: number;\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n}\n\nfunction itemToString(item: QueryInputItem) {\n return [item.category, item.value].join(\": \");\n}\n\nexport function SearchList(props: SearchListProps) {\n const {\n inputValue,\n selectedItems,\n onChange: onChangeProp,\n rootWidth,\n highlightedIndex,\n setHighlightedIndex,\n visibleCategories,\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-query-input\",\n css: queryInputCss,\n window: targetWindow,\n });\n\n const onChange: SelectionChangeHandler<QueryInputItem, \"multiple\"> =\n useCallback(\n (event, items) => {\n onChangeProp(items || []);\n },\n [onChangeProp]\n );\n\n return (\n <List\n checkable={false}\n data-testid=\"search-list\"\n highlightedIndex={highlightedIndex}\n itemTextHighlightPattern={inputValue}\n itemToString={itemToString}\n onHighlight={setHighlightedIndex}\n onSelectionChange={onChange}\n selectionStrategy=\"multiple\"\n selected={selectedItems}\n width={rootWidth}\n >\n {visibleCategories.map((inputCategory: QueryInputCategory) => {\n return (\n <ListItemGroup key={inputCategory.name} label={inputCategory.name}>\n {inputCategory.values.map((label) => (\n <ListItem key={label} label={label} />\n ))}\n </ListItemGroup>\n );\n })}\n <ListItem className={withBaseName(\"addKeyword\")}>\n {`Add keyword: \"${inputValue}\"`}\n </ListItem>\n </List>\n );\n}\n"],"names":["queryInputCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchList.js","sources":["../src/query-input/internal/SearchList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { List, ListItem, ListItemGroup } from \"../../list\";\n\nimport { SelectionChangeHandler } from \"../../common-hooks\";\n\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport queryInputCss from \"../QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputSearchList\");\n\nexport interface SearchListProps {\n inputValue?: string;\n selectedItems?: QueryInputItem[];\n onChange: (items: QueryInputItem[]) => void;\n rootWidth: number;\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n}\n\nfunction itemToString(item: QueryInputItem) {\n return [item.category, item.value].join(\": \");\n}\n\nexport function SearchList(props: SearchListProps) {\n const {\n inputValue,\n selectedItems,\n onChange: onChangeProp,\n rootWidth,\n highlightedIndex,\n setHighlightedIndex,\n visibleCategories,\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-query-input\",\n css: queryInputCss,\n window: targetWindow,\n });\n\n const onChange: SelectionChangeHandler<QueryInputItem, \"multiple\"> =\n useCallback(\n (event, items) => {\n onChangeProp(items || []);\n },\n [onChangeProp]\n );\n\n return (\n <List\n checkable={false}\n data-testid=\"search-list\"\n highlightedIndex={highlightedIndex}\n itemTextHighlightPattern={inputValue}\n itemToString={itemToString}\n onHighlight={setHighlightedIndex}\n onSelectionChange={onChange}\n selectionStrategy=\"multiple\"\n selected={selectedItems}\n width={rootWidth}\n >\n {visibleCategories.map((inputCategory: QueryInputCategory) => {\n return (\n <ListItemGroup key={inputCategory.name} label={inputCategory.name}>\n {inputCategory.values.map((label) => (\n <ListItem key={label} label={label} />\n ))}\n </ListItemGroup>\n );\n })}\n <ListItem className={withBaseName(\"addKeyword\")}>\n {`Add keyword: \"${inputValue}\"`}\n </ListItem>\n </List>\n );\n}\n"],"names":["queryInputCss"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAY5D,SAAS,aAAa,IAAsB,EAAA;AAC1C,EAAA,OAAO,CAAC,IAAK,CAAA,QAAA,EAAU,KAAK,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAC9C,CAAA;AAEO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,iBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,QACJ,GAAA,WAAA;AAAA,IACE,CAAC,OAAO,KAAU,KAAA;AAChB,MAAa,YAAA,CAAA,KAAA,IAAS,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEF,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,aAAA;AAAA,IACZ,gBAAA;AAAA,IACA,wBAA0B,EAAA,UAAA;AAAA,IAC1B,YAAA;AAAA,IACA,WAAa,EAAA,mBAAA;AAAA,IACb,iBAAmB,EAAA,QAAA;AAAA,IACnB,iBAAkB,EAAA,UAAA;AAAA,IAClB,QAAU,EAAA,aAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IAEN,QAAA,EAAA;AAAA,MAAkB,iBAAA,CAAA,GAAA,CAAI,CAAC,aAAsC,KAAA;AAC5D,QAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,UAAuC,OAAO,aAAc,CAAA,IAAA;AAAA,UAC1D,QAAc,EAAA,aAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,0BACxB,GAAA,CAAA,QAAA,EAAA;AAAA,YAAqB,KAAA;AAAA,WAAA,EAAP,KAAqB,CACrC,CAAA;AAAA,SAAA,EAHiB,cAAc,IAIlC,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,sBACA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAS,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,QAC3C,QAAiB,EAAA,CAAA,cAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -7,7 +7,6 @@ import { List } from '../../list/List.js';
|
|
|
7
7
|
import 'react';
|
|
8
8
|
import '../../common-hooks/collectionProvider.js';
|
|
9
9
|
import '../../common-hooks/keyUtils.js';
|
|
10
|
-
import '../../utils/useFloatingUI.js';
|
|
11
10
|
import '../../responsive/useResizeObserver.js';
|
|
12
11
|
import '../../list/VirtualizedList.js';
|
|
13
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { QueryInputCategory } from \"../queryInputTypes\";\nimport { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon } from \"@salt-ds/icons\";\nimport { List, ListItem } from \"../../list\";\nimport { SelectHandler } from \"../../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n category: QueryInputCategory | null;\n rootWidth: number;\n onBack: () => void;\n selectedValues: string[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n highlightedValueIndex?: number;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n const {\n category,\n rootWidth,\n onBack,\n selectedValues,\n onValueToggle,\n highlightedValueIndex,\n setHighlightedValueIndex,\n } = props;\n\n const handleSelect: SelectHandler = (_, value: string) => {\n onValueToggle(category!, value);\n };\n\n const items: ReactElement[] = category\n ? category.values.map((value) => (\n <ListItem key={value} item={value}>\n {value}\n </ListItem>\n ))\n : [];\n\n return (\n <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n <List\n borderless={true}\n checkable={false}\n highlightedIndex={highlightedValueIndex}\n onHighlight={setHighlightedValueIndex}\n onSelect={handleSelect}\n selectionStrategy=\"multiple\"\n selected={selectedValues}\n width={rootWidth}\n >\n <ListItem\n className={withBaseName(\"back\")}\n onClick={onBack}\n selectable={false}\n >\n <ChevronLeftIcon />\n <div className={withBaseName(\"category\")}>\n {category ? category.name : \"\"}\n </div>\n </ListItem>\n {items}\n </List>\n </div>\n );\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { QueryInputCategory } from \"../queryInputTypes\";\nimport { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon } from \"@salt-ds/icons\";\nimport { List, ListItem } from \"../../list\";\nimport { SelectHandler } from \"../../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n category: QueryInputCategory | null;\n rootWidth: number;\n onBack: () => void;\n selectedValues: string[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n highlightedValueIndex?: number;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n const {\n category,\n rootWidth,\n onBack,\n selectedValues,\n onValueToggle,\n highlightedValueIndex,\n setHighlightedValueIndex,\n } = props;\n\n const handleSelect: SelectHandler = (_, value: string) => {\n onValueToggle(category!, value);\n };\n\n const items: ReactElement[] = category\n ? category.values.map((value) => (\n <ListItem key={value} item={value}>\n {value}\n </ListItem>\n ))\n : [];\n\n return (\n <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n <List\n borderless={true}\n checkable={false}\n highlightedIndex={highlightedValueIndex}\n onHighlight={setHighlightedValueIndex}\n onSelect={handleSelect}\n selectionStrategy=\"multiple\"\n selected={selectedValues}\n width={rootWidth}\n >\n <ListItem\n className={withBaseName(\"back\")}\n onClick={onBack}\n selectable={false}\n >\n <ChevronLeftIcon />\n <div className={withBaseName(\"category\")}>\n {category ? category.name : \"\"}\n </div>\n </ListItem>\n {items}\n </List>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAYpD,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,wBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAkB,KAAA;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,QAAwB,QAC1B,GAAA,QAAA,CAAS,OAAO,GAAI,CAAA,CAAC,0BAClB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAqB,IAAM,EAAA,KAAA;AAAA,IACzB,QAAA,EAAA,KAAA;AAAA,GADY,EAAA,KAEf,CACD,CAAA,GACD,EAAC,CAAA;AAEL,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,QAAU,EAAA,CAAA;AAAA,IAAG,aAAY,EAAA,YAAA;AAAA,IACvD,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA;AAAA,MACC,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,KAAA;AAAA,MACX,gBAAkB,EAAA,qBAAA;AAAA,MAClB,WAAa,EAAA,wBAAA;AAAA,MACb,QAAU,EAAA,YAAA;AAAA,MACV,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,QAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,CAAA;AAAA,4BAChB,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cACpC,QAAA,EAAA,QAAA,GAAW,SAAS,IAAO,GAAA,EAAA;AAAA,aAC9B,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -3,7 +3,6 @@ import { useRef, useState, useMemo } from 'react';
|
|
|
3
3
|
import { usePopperStatus } from './internal/usePopperStatus.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import '../responsive/useResizeObserver.js';
|
|
6
|
-
import '../utils/useFloatingUI.js';
|
|
7
6
|
import { useWidth } from '../responsive/useWidth.js';
|
|
8
7
|
|
|
9
8
|
function useQueryInput(props, forwardedRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useQueryInput.js","sources":["../src/query-input/useQueryInput.ts"],"sourcesContent":["import { useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n Ref,\n RefObject,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { QueryInputBodyProps } from \"./internal/QueryInputBody\";\nimport { usePopperStatus } from \"./internal/usePopperStatus\";\nimport { ValueSelectorProps } from \"./internal/ValueSelector\";\nimport { QueryInputProps } from \"./QueryInput\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { useWidth } from \"../responsive\";\n\nexport type BooleanOperator = \"or\" | \"and\";\n\nexport interface UseQueryInputResult {\n queryInputProps: {\n onFocus: FocusEventHandler<HTMLDivElement>;\n onBlur: FocusEventHandler<HTMLDivElement>;\n };\n queryInputBodyRef: Ref<HTMLDivElement>;\n queryInputBodyProps: QueryInputBodyProps;\n valueSelectorProps: ValueSelectorProps;\n}\n\nexport function useQueryInput(\n props: QueryInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): UseQueryInputResult {\n const bodyRef = useRef<HTMLDivElement>(null);\n const popperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [widthBodyRef, bodyWidth] = useWidth<HTMLDivElement>(true);\n\n const forkedRef1 = useForkRef<HTMLDivElement>(\n forwardedRef,\n bodyRef\n ) as RefObject<HTMLDivElement>;\n const queryInputBodyRef = useForkRef<HTMLDivElement>(\n forkedRef1,\n widthBodyRef\n );\n\n const [selectedItems, setSelectedItems] = useControlled({\n controlled: props.selectedItems,\n default: props.defaultSelectedItems || [],\n name: \"QueryInput\",\n state: \"selectedItems\",\n });\n\n const [booleanOperator, setBooleanOperator] = useControlled({\n controlled: props.booleanOperator,\n default: props.defaultBooleanOperator || \"and\",\n name: \"QueryInput\",\n state: \"booleanOperator\",\n });\n\n const popperStatus = usePopperStatus({\n initialOpen: false,\n autoClose: props.autoClose,\n });\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const [highlightedCategoryIndex, setHighlightedCategoryIndex] = useState(0);\n const [highlightedValueIndex, setHighlightedValueIndex] = useState(0);\n const [selectedCategory, setSelectedCategory] =\n useState<QueryInputCategory | null>(null);\n const searchListIndexPositions = useRef<Array<QueryInputCategory | string>>(\n []\n );\n\n const onInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onFocus(event);\n setIsFocused(true);\n };\n\n const onInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n if (!inputRef.current) {\n return;\n }\n const relatedTarget = event.relatedTarget as Node | null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n inputRef.current.focus();\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n inputRef.current.focus();\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setIsFocused(true);\n popperStatus.onFocus(event);\n };\n\n const onBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n let relatedTarget = event.relatedTarget as Node | null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onSelectedItemsChange = (newItems: QueryInputItem[] | undefined) => {\n const newItem =\n newItems &&\n newItems.find(\n (item) => item.category == null && item.value === inputValue\n );\n if (newItem) {\n setInputValue(\"\");\n }\n setSelectedItems(newItems || []);\n if (props.onChange) {\n props.onChange(newItems || []);\n }\n popperStatus.onChange();\n };\n\n const onBooleanOperatorChange = (operator: BooleanOperator) => {\n setBooleanOperator(operator);\n if (props.onBooleanOperatorChange) {\n props.onBooleanOperatorChange(operator);\n }\n };\n\n const onSelectedCategoryChange = (category: QueryInputCategory | null) => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n setSelectedCategory(category);\n };\n\n const [inputValue, setInputValue] = useState<string>(\"\");\n\n const searchListItems = useMemo(() => {\n const [searchListItems, indexPositions] = filterCategories(\n props.categories,\n inputValue\n );\n searchListIndexPositions.current = indexPositions;\n return searchListItems;\n }, [props.categories, inputValue]);\n\n const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newInputValue = event.target.value;\n setInputValue(newInputValue);\n // If we have search results, the first index position will be a header\n setHighlightedIndex(searchListIndexPositions.current.length === 0 ? 0 : 1);\n };\n\n const searchListItemCount = useMemo(() => {\n return searchListItems.reduce(\n (acc, category) => acc + category.values.length,\n 0\n );\n }, [searchListItems]);\n\n const onInputClear = () => {\n onSelectedItemsChange([]);\n };\n\n const onInputClick = () => {\n popperStatus.onClick();\n };\n\n const newItemFromSelected = (): QueryInputItem | undefined => {\n const i = highlightedIndex;\n for (const category of searchListItems) {\n if (i < category.values.length) {\n const value = category.values[i];\n return {\n category: category.name,\n value,\n };\n }\n }\n };\n\n const { displayedItemCount = 10 } = props;\n\n const onSearchListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedIndex(0);\n return;\n case \"End\":\n setHighlightedIndex(searchListItemCount);\n return;\n case \"ArrowUp\":\n setHighlightedIndex((i) =>\n prevSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"ArrowDown\":\n // setHighlightedIndex((i) => Math.min(searchListItemCount, i + 1));\n setHighlightedIndex((i) =>\n nextSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"PageDown\":\n setHighlightedIndex((i) =>\n Math.min(searchListItemCount, i + displayedItemCount)\n );\n return;\n case \"PageUp\":\n setHighlightedIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"Enter\":\n if (highlightedIndex === searchListItemCount) {\n const newItems = [\n ...selectedItems,\n { category: null, value: inputValue },\n ];\n onSelectedItemsChange(newItems);\n } else {\n if (highlightedIndex >= 0 && highlightedIndex < searchListItemCount) {\n const newItem = newItemFromSelected();\n if (newItem) {\n const newItems = [...selectedItems, newItem];\n onSelectedItemsChange(newItems);\n }\n }\n setInputValue(\"\");\n }\n return;\n default:\n return;\n }\n };\n\n const onCategoryListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedCategoryIndex(0);\n return;\n case \"End\":\n setHighlightedCategoryIndex(props.categories.length - 1);\n return;\n case \"ArrowUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n case \"ArrowRight\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n default:\n return;\n }\n };\n\n const onValueListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedValueIndex(0);\n return;\n case \"End\":\n setHighlightedValueIndex(selectedCategory!.values.length);\n return;\n case \"ArrowUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (highlightedValueIndex === 0) {\n setSelectedCategory(null);\n } else {\n const value = selectedCategory!.values[highlightedValueIndex - 1];\n const newItems = selectedItems.filter(\n (item) =>\n !(\n item.category === selectedCategory!.name && item.value === value\n )\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: selectedCategory!.name, value });\n }\n onSelectedItemsChange(newItems);\n }\n return;\n case \"ArrowLeft\":\n setSelectedCategory(null);\n return;\n default:\n return;\n }\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onKeyDown(event);\n let key = event.key;\n if (event.key === \" \" && event.ctrlKey) {\n key = \"Enter\";\n }\n const isSearchListActive = inputValue !== \"\";\n const isCategoryListActive = !isSearchListActive && !selectedCategory;\n const isValueListActive = !isSearchListActive && !isCategoryListActive;\n if (isSearchListActive) {\n onSearchListKeyDown(key);\n } else if (isCategoryListActive) {\n onCategoryListKeyDown(key);\n } else {\n onValueListKeyDown(key);\n }\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n case \"Enter\":\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (isValueListActive) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (isCategoryListActive) {\n event.preventDefault();\n }\n break;\n case \"Escape\":\n setInputValue(\"\");\n }\n };\n\n const onValueToggle = (category: QueryInputCategory, value: string) => {\n const newItems = selectedItems.filter(\n (item) => !(item.category === category.name && item.value === value)\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: category.name, value });\n }\n onSelectedItemsChange(newItems);\n };\n\n return {\n queryInputBodyRef,\n queryInputProps: {\n onFocus,\n onBlur,\n },\n queryInputBodyProps: {\n inputRef: inputRef,\n disabled: props.disabled,\n selectedItems,\n onFocus,\n onBlur,\n onInputClick,\n onInputFocus,\n onInputBlur,\n onInputClear,\n inputValue,\n onInputChange,\n onSelectedItemsChange,\n onKeyDown,\n isFocused,\n booleanOperator,\n onBooleanOperatorChange,\n },\n valueSelectorProps: {\n isOpen: popperStatus.isOpen,\n categories: props.categories,\n selectedCategory,\n selectedItems,\n onValueToggle,\n onSearchListChange: onSelectedItemsChange,\n anchorElement: bodyRef.current,\n width: bodyWidth,\n onSelectedCategoryChange,\n popperRef,\n inputValue,\n highlightedIndex,\n visibleCategories: searchListItems,\n highlightedCategoryIndex,\n highlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedValueIndex,\n setHighlightedIndex,\n },\n };\n}\n\nfunction filterCategories(\n categories: QueryInputCategory[],\n inputValue?: string\n): [QueryInputCategory[], Array<QueryInputCategory | string>] {\n // Note: if there is no input value, this List would not be display\n if (!inputValue) {\n return [categories, []];\n }\n const query = inputValue.toUpperCase();\n const visibleCategories: QueryInputCategory[] = [];\n const indexPositions: Array<QueryInputCategory | string> = [];\n for (const c of categories) {\n const values = c.values.filter((v) => v.toUpperCase().includes(query));\n if (values.length > 0) {\n const queryInputCategory = {\n name: c.name,\n values,\n };\n visibleCategories.push(queryInputCategory);\n indexPositions.push(queryInputCategory, ...values);\n }\n }\n return [visibleCategories, indexPositions];\n}\n\nfunction nextSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory | string>\n) {\n const nextIndex = index + 1;\n // Note: allow 1 for the extra ListItem we append to end of List\n if (nextIndex === indexPositions.length + 1) {\n return index;\n } else if (nextIndex === indexPositions.length) {\n return nextIndex;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex + 1;\n }\n}\n\nfunction prevSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory | string>\n) {\n const nextIndex = index - 1;\n if (nextIndex === 0) {\n return index;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex - 1;\n }\n}\n"],"names":["searchListItems"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useQueryInput.js","sources":["../src/query-input/useQueryInput.ts"],"sourcesContent":["import { useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n Ref,\n RefObject,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { QueryInputBodyProps } from \"./internal/QueryInputBody\";\nimport { usePopperStatus } from \"./internal/usePopperStatus\";\nimport { ValueSelectorProps } from \"./internal/ValueSelector\";\nimport { QueryInputProps } from \"./QueryInput\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { useWidth } from \"../responsive\";\n\nexport type BooleanOperator = \"or\" | \"and\";\n\nexport interface UseQueryInputResult {\n queryInputProps: {\n onFocus: FocusEventHandler<HTMLDivElement>;\n onBlur: FocusEventHandler<HTMLDivElement>;\n };\n queryInputBodyRef: Ref<HTMLDivElement>;\n queryInputBodyProps: QueryInputBodyProps;\n valueSelectorProps: ValueSelectorProps;\n}\n\nexport function useQueryInput(\n props: QueryInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): UseQueryInputResult {\n const bodyRef = useRef<HTMLDivElement>(null);\n const popperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [widthBodyRef, bodyWidth] = useWidth<HTMLDivElement>(true);\n\n const forkedRef1 = useForkRef<HTMLDivElement>(\n forwardedRef,\n bodyRef\n ) as RefObject<HTMLDivElement>;\n const queryInputBodyRef = useForkRef<HTMLDivElement>(\n forkedRef1,\n widthBodyRef\n );\n\n const [selectedItems, setSelectedItems] = useControlled({\n controlled: props.selectedItems,\n default: props.defaultSelectedItems || [],\n name: \"QueryInput\",\n state: \"selectedItems\",\n });\n\n const [booleanOperator, setBooleanOperator] = useControlled({\n controlled: props.booleanOperator,\n default: props.defaultBooleanOperator || \"and\",\n name: \"QueryInput\",\n state: \"booleanOperator\",\n });\n\n const popperStatus = usePopperStatus({\n initialOpen: false,\n autoClose: props.autoClose,\n });\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const [highlightedCategoryIndex, setHighlightedCategoryIndex] = useState(0);\n const [highlightedValueIndex, setHighlightedValueIndex] = useState(0);\n const [selectedCategory, setSelectedCategory] =\n useState<QueryInputCategory | null>(null);\n const searchListIndexPositions = useRef<Array<QueryInputCategory | string>>(\n []\n );\n\n const onInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onFocus(event);\n setIsFocused(true);\n };\n\n const onInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n if (!inputRef.current) {\n return;\n }\n const relatedTarget = event.relatedTarget as Node | null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n inputRef.current.focus();\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n inputRef.current.focus();\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setIsFocused(true);\n popperStatus.onFocus(event);\n };\n\n const onBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n let relatedTarget = event.relatedTarget as Node | null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onSelectedItemsChange = (newItems: QueryInputItem[] | undefined) => {\n const newItem =\n newItems &&\n newItems.find(\n (item) => item.category == null && item.value === inputValue\n );\n if (newItem) {\n setInputValue(\"\");\n }\n setSelectedItems(newItems || []);\n if (props.onChange) {\n props.onChange(newItems || []);\n }\n popperStatus.onChange();\n };\n\n const onBooleanOperatorChange = (operator: BooleanOperator) => {\n setBooleanOperator(operator);\n if (props.onBooleanOperatorChange) {\n props.onBooleanOperatorChange(operator);\n }\n };\n\n const onSelectedCategoryChange = (category: QueryInputCategory | null) => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n setSelectedCategory(category);\n };\n\n const [inputValue, setInputValue] = useState<string>(\"\");\n\n const searchListItems = useMemo(() => {\n const [searchListItems, indexPositions] = filterCategories(\n props.categories,\n inputValue\n );\n searchListIndexPositions.current = indexPositions;\n return searchListItems;\n }, [props.categories, inputValue]);\n\n const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newInputValue = event.target.value;\n setInputValue(newInputValue);\n // If we have search results, the first index position will be a header\n setHighlightedIndex(searchListIndexPositions.current.length === 0 ? 0 : 1);\n };\n\n const searchListItemCount = useMemo(() => {\n return searchListItems.reduce(\n (acc, category) => acc + category.values.length,\n 0\n );\n }, [searchListItems]);\n\n const onInputClear = () => {\n onSelectedItemsChange([]);\n };\n\n const onInputClick = () => {\n popperStatus.onClick();\n };\n\n const newItemFromSelected = (): QueryInputItem | undefined => {\n const i = highlightedIndex;\n for (const category of searchListItems) {\n if (i < category.values.length) {\n const value = category.values[i];\n return {\n category: category.name,\n value,\n };\n }\n }\n };\n\n const { displayedItemCount = 10 } = props;\n\n const onSearchListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedIndex(0);\n return;\n case \"End\":\n setHighlightedIndex(searchListItemCount);\n return;\n case \"ArrowUp\":\n setHighlightedIndex((i) =>\n prevSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"ArrowDown\":\n // setHighlightedIndex((i) => Math.min(searchListItemCount, i + 1));\n setHighlightedIndex((i) =>\n nextSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"PageDown\":\n setHighlightedIndex((i) =>\n Math.min(searchListItemCount, i + displayedItemCount)\n );\n return;\n case \"PageUp\":\n setHighlightedIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"Enter\":\n if (highlightedIndex === searchListItemCount) {\n const newItems = [\n ...selectedItems,\n { category: null, value: inputValue },\n ];\n onSelectedItemsChange(newItems);\n } else {\n if (highlightedIndex >= 0 && highlightedIndex < searchListItemCount) {\n const newItem = newItemFromSelected();\n if (newItem) {\n const newItems = [...selectedItems, newItem];\n onSelectedItemsChange(newItems);\n }\n }\n setInputValue(\"\");\n }\n return;\n default:\n return;\n }\n };\n\n const onCategoryListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedCategoryIndex(0);\n return;\n case \"End\":\n setHighlightedCategoryIndex(props.categories.length - 1);\n return;\n case \"ArrowUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n case \"ArrowRight\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n default:\n return;\n }\n };\n\n const onValueListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedValueIndex(0);\n return;\n case \"End\":\n setHighlightedValueIndex(selectedCategory!.values.length);\n return;\n case \"ArrowUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (highlightedValueIndex === 0) {\n setSelectedCategory(null);\n } else {\n const value = selectedCategory!.values[highlightedValueIndex - 1];\n const newItems = selectedItems.filter(\n (item) =>\n !(\n item.category === selectedCategory!.name && item.value === value\n )\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: selectedCategory!.name, value });\n }\n onSelectedItemsChange(newItems);\n }\n return;\n case \"ArrowLeft\":\n setSelectedCategory(null);\n return;\n default:\n return;\n }\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onKeyDown(event);\n let key = event.key;\n if (event.key === \" \" && event.ctrlKey) {\n key = \"Enter\";\n }\n const isSearchListActive = inputValue !== \"\";\n const isCategoryListActive = !isSearchListActive && !selectedCategory;\n const isValueListActive = !isSearchListActive && !isCategoryListActive;\n if (isSearchListActive) {\n onSearchListKeyDown(key);\n } else if (isCategoryListActive) {\n onCategoryListKeyDown(key);\n } else {\n onValueListKeyDown(key);\n }\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n case \"Enter\":\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (isValueListActive) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (isCategoryListActive) {\n event.preventDefault();\n }\n break;\n case \"Escape\":\n setInputValue(\"\");\n }\n };\n\n const onValueToggle = (category: QueryInputCategory, value: string) => {\n const newItems = selectedItems.filter(\n (item) => !(item.category === category.name && item.value === value)\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: category.name, value });\n }\n onSelectedItemsChange(newItems);\n };\n\n return {\n queryInputBodyRef,\n queryInputProps: {\n onFocus,\n onBlur,\n },\n queryInputBodyProps: {\n inputRef: inputRef,\n disabled: props.disabled,\n selectedItems,\n onFocus,\n onBlur,\n onInputClick,\n onInputFocus,\n onInputBlur,\n onInputClear,\n inputValue,\n onInputChange,\n onSelectedItemsChange,\n onKeyDown,\n isFocused,\n booleanOperator,\n onBooleanOperatorChange,\n },\n valueSelectorProps: {\n isOpen: popperStatus.isOpen,\n categories: props.categories,\n selectedCategory,\n selectedItems,\n onValueToggle,\n onSearchListChange: onSelectedItemsChange,\n anchorElement: bodyRef.current,\n width: bodyWidth,\n onSelectedCategoryChange,\n popperRef,\n inputValue,\n highlightedIndex,\n visibleCategories: searchListItems,\n highlightedCategoryIndex,\n highlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedValueIndex,\n setHighlightedIndex,\n },\n };\n}\n\nfunction filterCategories(\n categories: QueryInputCategory[],\n inputValue?: string\n): [QueryInputCategory[], Array<QueryInputCategory | string>] {\n // Note: if there is no input value, this List would not be display\n if (!inputValue) {\n return [categories, []];\n }\n const query = inputValue.toUpperCase();\n const visibleCategories: QueryInputCategory[] = [];\n const indexPositions: Array<QueryInputCategory | string> = [];\n for (const c of categories) {\n const values = c.values.filter((v) => v.toUpperCase().includes(query));\n if (values.length > 0) {\n const queryInputCategory = {\n name: c.name,\n values,\n };\n visibleCategories.push(queryInputCategory);\n indexPositions.push(queryInputCategory, ...values);\n }\n }\n return [visibleCategories, indexPositions];\n}\n\nfunction nextSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory | string>\n) {\n const nextIndex = index + 1;\n // Note: allow 1 for the extra ListItem we append to end of List\n if (nextIndex === indexPositions.length + 1) {\n return index;\n } else if (nextIndex === indexPositions.length) {\n return nextIndex;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex + 1;\n }\n}\n\nfunction prevSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory | string>\n) {\n const nextIndex = index - 1;\n if (nextIndex === 0) {\n return index;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex - 1;\n }\n}\n"],"names":["searchListItems"],"mappings":"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"}
|
|
@@ -2,7 +2,6 @@ import { useRef, useCallback } from 'react';
|
|
|
2
2
|
import { popNextItemByPriority, notOverflowed, isOverflowed, allExceptOverflowIndicator, getOverflowIndicator, measureContainerOverflow, addAll } from './overflowUtils.js';
|
|
3
3
|
import { partition } from '../utils/partition.js';
|
|
4
4
|
import { useIdMemo } from '@salt-ds/core';
|
|
5
|
-
import '../utils/useFloatingUI.js';
|
|
6
5
|
|
|
7
6
|
const NO_OVERFLOW_INDICATOR = { size: 0 };
|
|
8
7
|
const getPriority = (item) => item.priority;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverflow.js","sources":["../src/responsive/useOverflow.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport {\n addAll,\n allExceptOverflowIndicator,\n getOverflowIndicator,\n isOverflowed,\n measureContainerOverflow,\n notOverflowed,\n popNextItemByPriority,\n} from \"./overflowUtils\";\nimport {\n OverflowItem,\n OverflowHookProps,\n OverflowHookResult,\n} from \"./overflowTypes\";\nimport { partition } from \"../utils\";\nimport { useIdMemo } from \"@salt-ds/core\";\n\nconst NO_OVERFLOW_INDICATOR = { size: 0 };\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst popNextOverflowedItem = (items: OverflowItem[]) => {\n const minPriority = Math.min(...items.map(getPriority));\n for (let i = 0; i < items.length; i++) {\n if (!items[i].isOverflowIndicator && items[i].priority === minPriority) {\n return items.splice(i, 1)[0];\n }\n }\n return null;\n};\n\nexport const useOverflow = ({\n collectionHook: { dispatch },\n id: idProp,\n label = \"Toolbar\",\n overflowItemsRef,\n overflowContainerRef,\n orientation,\n}: OverflowHookProps): OverflowHookResult => {\n // We need to detect when we enter/exit the overflowed state\n const innerContainerSizeRef = useRef(0);\n const overflowIndicatorSize = useRef(0);\n const id = useIdMemo(idProp);\n\n const setContainerMinSize = useCallback(\n (size?: number) => {\n if (overflowContainerRef.current) {\n const isHorizontal = orientation === \"horizontal\";\n if (size === undefined) {\n const dimension = isHorizontal ? \"width\" : \"height\";\n ({ [dimension]: size } =\n overflowContainerRef.current.getBoundingClientRect());\n }\n if (typeof size === \"number\") {\n const styleDimension = isHorizontal ? \"minWidth\" : \"minHeight\";\n overflowContainerRef.current.style[styleDimension] = `${size}px`;\n }\n }\n },\n [orientation, overflowContainerRef]\n );\n\n const getAllOverflowedItems = useCallback(\n (renderedSize: number, availableSpace: number) => {\n const { current: allItems } = overflowItemsRef;\n const overflowedItems: OverflowItem[] = [];\n const items = allItems.slice();\n while (renderedSize > availableSpace) {\n const overflowedItem = popNextItemByPriority(items);\n if (overflowedItem === null) {\n break;\n }\n // eslint-disable-next-line no-param-reassign\n renderedSize -= overflowedItem.size;\n overflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return overflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getOverflowedItems = useCallback(\n (visibleContentSize: number, containerSize: number) => {\n const newlyOverflowedItems = [];\n const { current: managedItems } = overflowItemsRef;\n const visibleItems = managedItems.filter(notOverflowed);\n while (visibleContentSize > containerSize) {\n const overflowedItem = popNextItemByPriority(visibleItems);\n if (overflowedItem === null) {\n // unable to overflow, all items are collapsed, this is our minimum width,\n // enforce it ...\n // TODO what if density changes\n // TODO probably not right, now we overflow even collapsed items, min width should be\n // overflow indicator width plus width of any non-overflowable items\n // setContainerMinSize(visibleContentSize);\n break;\n }\n visibleContentSize -= overflowedItem.size;\n newlyOverflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return newlyOverflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getReinstatedItems = useCallback(\n (containerSize: number): [number, OverflowItem[]] => {\n const reinstatedItems: OverflowItem[] = [];\n const { current: managedItems } = overflowItemsRef;\n\n const [overflowedItems, visibleItems] = partition(\n managedItems,\n isOverflowed\n );\n const overflowCount = overflowedItems.length;\n // TODO calculate this without using fullWidth if we have OVERFLOW\n // Need a loop here where we first remove OVERFLOW, then potentially remove\n // COLLAPSE too\n // We want to re-introduce overflowed items before we start to restore collapsed items\n // When we are dealing with overflowed items, we just use the current width of collapsed items.\n let visibleContentSize = visibleItems.reduce(\n allExceptOverflowIndicator,\n 0\n );\n let diff = containerSize - visibleContentSize;\n const { size: overflowSize = 0 } =\n getOverflowIndicator(managedItems) || NO_OVERFLOW_INDICATOR;\n const totalOverflowedSize = overflowedItems.reduce(\n (sum, item) => sum + item.size,\n 0\n );\n // It is important to make this check first, because the overflow indicator may have larger size than\n // individual overflowed item(s).\n if (totalOverflowedSize <= diff) {\n reinstatedItems.push(\n ...overflowedItems.map((item) => ({ ...item, overflowed: false }))\n );\n } else {\n while (overflowedItems.length > 0) {\n const nextItem = popNextOverflowedItem(overflowedItems);\n if (nextItem && diff >= nextItem.size) {\n // we have enough free space to reinstate this overflowed item\n // we can only ignore the width of overflow Indicator if either there is only one remaining\n // overflow item (so overflowIndicator will be removed) or diff is big enough to accommodate\n // the overflow Ind.\n if (\n overflowedItems.length === 0 ||\n diff >= nextItem.size + overflowSize\n ) {\n visibleContentSize += nextItem.size;\n diff = diff - nextItem.size;\n reinstatedItems.push({\n ...nextItem,\n overflowed: false,\n });\n } else {\n break;\n }\n } else {\n break;\n }\n }\n }\n return [overflowCount, reinstatedItems];\n },\n []\n );\n\n const resetMeasurements = useCallback(\n (isOverflowing: boolean, innerContainerSize: number) => {\n if (isOverflowing) {\n const { current: managedItems } = overflowItemsRef;\n const renderedSize = managedItems.reduce(allExceptOverflowIndicator, 0);\n const overflowIndicator = managedItems.find(\n (i) => i.isOverflowIndicator\n );\n if (\n overflowIndicator &&\n overflowIndicator.size !== overflowIndicatorSize.current\n ) {\n overflowIndicatorSize.current = overflowIndicator.size;\n setContainerMinSize(overflowIndicator.size);\n }\n const existingOverflow = managedItems.filter(isOverflowed);\n const updates = getAllOverflowedItems(\n renderedSize,\n innerContainerSize - overflowIndicatorSize.current\n );\n\n existingOverflow.forEach((item) => {\n if (!updates.some((i) => i.index === item.index)) {\n updates.push({\n ...item,\n overflowed: false,\n });\n }\n });\n\n const overflowAdded = !existingOverflow.length && updates.length;\n\n if (updates.length > 0) {\n if (overflowAdded) {\n dispatch({\n type: \"update-items-add-overflow-indicator\",\n overflowItems: updates,\n overflowItem: {\n fullSize: null,\n id: `${id}-overflow-indicator`,\n index: managedItems.length,\n isOverflowIndicator: true,\n label: \"Overflow Menu\",\n priority: 1,\n source: {},\n } as OverflowItem<\"source\">,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: updates,\n });\n }\n return true;\n } else {\n return false;\n }\n }\n },\n [dispatch, getAllOverflowedItems, id, overflowItemsRef, setContainerMinSize]\n );\n\n const updateOverflow = useCallback(\n (containerSize: number, renderedSize: number) => {\n if (containerSize < renderedSize) {\n const overflowItems = getOverflowedItems(renderedSize, containerSize);\n if (overflowItems.length) {\n dispatch({\n type: \"update-items\",\n overflowItems,\n });\n }\n }\n },\n [dispatch, getOverflowedItems]\n );\n\n const removeOverflow = useCallback(\n (containerSize: number) => {\n const [overflowCount, reinstated] = getReinstatedItems(containerSize);\n if (reinstated.length) {\n if (overflowCount === reinstated.length) {\n dispatch({\n type: \"update-items-remove-overflow-indicator\",\n overflowItems: reinstated,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: reinstated,\n });\n }\n }\n },\n [dispatch, getReinstatedItems]\n );\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { current: managedItems } = overflowItemsRef;\n const wasOverflowing = managedItems.some(\n (item) => item.isOverflowIndicator\n );\n const { isOverflowing } = measureContainerOverflow(\n overflowContainerRef,\n orientation\n );\n\n innerContainerSizeRef.current = size;\n\n if (!wasOverflowing && isOverflowing) {\n // entering overflow\n // TODO if client is not using an overflow indicator, there is nothing to do here,\n // just let nature take its course. How do we know this ?\n // This is when we need to add width to measurements we are tracking\n resetMeasurements(true, size);\n } else if (wasOverflowing && containerHasGrown) {\n // check to see if we can reinstate one or more items, possibly all\n removeOverflow(size);\n } else if (wasOverflowing && isOverflowing) {\n // Note: container must have shrunk\n // still overflowing, possibly more overflowing than before\n const renderedSize = managedItems\n .filter(notOverflowed)\n .reduce(addAll, 0);\n updateOverflow(size, renderedSize);\n }\n },\n [\n orientation,\n overflowContainerRef,\n overflowItemsRef,\n removeOverflow,\n resetMeasurements,\n updateOverflow,\n ]\n );\n\n return {\n onResize: handleResize,\n resetMeasurements,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useOverflow.js","sources":["../src/responsive/useOverflow.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport {\n addAll,\n allExceptOverflowIndicator,\n getOverflowIndicator,\n isOverflowed,\n measureContainerOverflow,\n notOverflowed,\n popNextItemByPriority,\n} from \"./overflowUtils\";\nimport {\n OverflowItem,\n OverflowHookProps,\n OverflowHookResult,\n} from \"./overflowTypes\";\nimport { partition } from \"../utils\";\nimport { useIdMemo } from \"@salt-ds/core\";\n\nconst NO_OVERFLOW_INDICATOR = { size: 0 };\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst popNextOverflowedItem = (items: OverflowItem[]) => {\n const minPriority = Math.min(...items.map(getPriority));\n for (let i = 0; i < items.length; i++) {\n if (!items[i].isOverflowIndicator && items[i].priority === minPriority) {\n return items.splice(i, 1)[0];\n }\n }\n return null;\n};\n\nexport const useOverflow = ({\n collectionHook: { dispatch },\n id: idProp,\n label = \"Toolbar\",\n overflowItemsRef,\n overflowContainerRef,\n orientation,\n}: OverflowHookProps): OverflowHookResult => {\n // We need to detect when we enter/exit the overflowed state\n const innerContainerSizeRef = useRef(0);\n const overflowIndicatorSize = useRef(0);\n const id = useIdMemo(idProp);\n\n const setContainerMinSize = useCallback(\n (size?: number) => {\n if (overflowContainerRef.current) {\n const isHorizontal = orientation === \"horizontal\";\n if (size === undefined) {\n const dimension = isHorizontal ? \"width\" : \"height\";\n ({ [dimension]: size } =\n overflowContainerRef.current.getBoundingClientRect());\n }\n if (typeof size === \"number\") {\n const styleDimension = isHorizontal ? \"minWidth\" : \"minHeight\";\n overflowContainerRef.current.style[styleDimension] = `${size}px`;\n }\n }\n },\n [orientation, overflowContainerRef]\n );\n\n const getAllOverflowedItems = useCallback(\n (renderedSize: number, availableSpace: number) => {\n const { current: allItems } = overflowItemsRef;\n const overflowedItems: OverflowItem[] = [];\n const items = allItems.slice();\n while (renderedSize > availableSpace) {\n const overflowedItem = popNextItemByPriority(items);\n if (overflowedItem === null) {\n break;\n }\n // eslint-disable-next-line no-param-reassign\n renderedSize -= overflowedItem.size;\n overflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return overflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getOverflowedItems = useCallback(\n (visibleContentSize: number, containerSize: number) => {\n const newlyOverflowedItems = [];\n const { current: managedItems } = overflowItemsRef;\n const visibleItems = managedItems.filter(notOverflowed);\n while (visibleContentSize > containerSize) {\n const overflowedItem = popNextItemByPriority(visibleItems);\n if (overflowedItem === null) {\n // unable to overflow, all items are collapsed, this is our minimum width,\n // enforce it ...\n // TODO what if density changes\n // TODO probably not right, now we overflow even collapsed items, min width should be\n // overflow indicator width plus width of any non-overflowable items\n // setContainerMinSize(visibleContentSize);\n break;\n }\n visibleContentSize -= overflowedItem.size;\n newlyOverflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return newlyOverflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getReinstatedItems = useCallback(\n (containerSize: number): [number, OverflowItem[]] => {\n const reinstatedItems: OverflowItem[] = [];\n const { current: managedItems } = overflowItemsRef;\n\n const [overflowedItems, visibleItems] = partition(\n managedItems,\n isOverflowed\n );\n const overflowCount = overflowedItems.length;\n // TODO calculate this without using fullWidth if we have OVERFLOW\n // Need a loop here where we first remove OVERFLOW, then potentially remove\n // COLLAPSE too\n // We want to re-introduce overflowed items before we start to restore collapsed items\n // When we are dealing with overflowed items, we just use the current width of collapsed items.\n let visibleContentSize = visibleItems.reduce(\n allExceptOverflowIndicator,\n 0\n );\n let diff = containerSize - visibleContentSize;\n const { size: overflowSize = 0 } =\n getOverflowIndicator(managedItems) || NO_OVERFLOW_INDICATOR;\n const totalOverflowedSize = overflowedItems.reduce(\n (sum, item) => sum + item.size,\n 0\n );\n // It is important to make this check first, because the overflow indicator may have larger size than\n // individual overflowed item(s).\n if (totalOverflowedSize <= diff) {\n reinstatedItems.push(\n ...overflowedItems.map((item) => ({ ...item, overflowed: false }))\n );\n } else {\n while (overflowedItems.length > 0) {\n const nextItem = popNextOverflowedItem(overflowedItems);\n if (nextItem && diff >= nextItem.size) {\n // we have enough free space to reinstate this overflowed item\n // we can only ignore the width of overflow Indicator if either there is only one remaining\n // overflow item (so overflowIndicator will be removed) or diff is big enough to accommodate\n // the overflow Ind.\n if (\n overflowedItems.length === 0 ||\n diff >= nextItem.size + overflowSize\n ) {\n visibleContentSize += nextItem.size;\n diff = diff - nextItem.size;\n reinstatedItems.push({\n ...nextItem,\n overflowed: false,\n });\n } else {\n break;\n }\n } else {\n break;\n }\n }\n }\n return [overflowCount, reinstatedItems];\n },\n []\n );\n\n const resetMeasurements = useCallback(\n (isOverflowing: boolean, innerContainerSize: number) => {\n if (isOverflowing) {\n const { current: managedItems } = overflowItemsRef;\n const renderedSize = managedItems.reduce(allExceptOverflowIndicator, 0);\n const overflowIndicator = managedItems.find(\n (i) => i.isOverflowIndicator\n );\n if (\n overflowIndicator &&\n overflowIndicator.size !== overflowIndicatorSize.current\n ) {\n overflowIndicatorSize.current = overflowIndicator.size;\n setContainerMinSize(overflowIndicator.size);\n }\n const existingOverflow = managedItems.filter(isOverflowed);\n const updates = getAllOverflowedItems(\n renderedSize,\n innerContainerSize - overflowIndicatorSize.current\n );\n\n existingOverflow.forEach((item) => {\n if (!updates.some((i) => i.index === item.index)) {\n updates.push({\n ...item,\n overflowed: false,\n });\n }\n });\n\n const overflowAdded = !existingOverflow.length && updates.length;\n\n if (updates.length > 0) {\n if (overflowAdded) {\n dispatch({\n type: \"update-items-add-overflow-indicator\",\n overflowItems: updates,\n overflowItem: {\n fullSize: null,\n id: `${id}-overflow-indicator`,\n index: managedItems.length,\n isOverflowIndicator: true,\n label: \"Overflow Menu\",\n priority: 1,\n source: {},\n } as OverflowItem<\"source\">,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: updates,\n });\n }\n return true;\n } else {\n return false;\n }\n }\n },\n [dispatch, getAllOverflowedItems, id, overflowItemsRef, setContainerMinSize]\n );\n\n const updateOverflow = useCallback(\n (containerSize: number, renderedSize: number) => {\n if (containerSize < renderedSize) {\n const overflowItems = getOverflowedItems(renderedSize, containerSize);\n if (overflowItems.length) {\n dispatch({\n type: \"update-items\",\n overflowItems,\n });\n }\n }\n },\n [dispatch, getOverflowedItems]\n );\n\n const removeOverflow = useCallback(\n (containerSize: number) => {\n const [overflowCount, reinstated] = getReinstatedItems(containerSize);\n if (reinstated.length) {\n if (overflowCount === reinstated.length) {\n dispatch({\n type: \"update-items-remove-overflow-indicator\",\n overflowItems: reinstated,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: reinstated,\n });\n }\n }\n },\n [dispatch, getReinstatedItems]\n );\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { current: managedItems } = overflowItemsRef;\n const wasOverflowing = managedItems.some(\n (item) => item.isOverflowIndicator\n );\n const { isOverflowing } = measureContainerOverflow(\n overflowContainerRef,\n orientation\n );\n\n innerContainerSizeRef.current = size;\n\n if (!wasOverflowing && isOverflowing) {\n // entering overflow\n // TODO if client is not using an overflow indicator, there is nothing to do here,\n // just let nature take its course. How do we know this ?\n // This is when we need to add width to measurements we are tracking\n resetMeasurements(true, size);\n } else if (wasOverflowing && containerHasGrown) {\n // check to see if we can reinstate one or more items, possibly all\n removeOverflow(size);\n } else if (wasOverflowing && isOverflowing) {\n // Note: container must have shrunk\n // still overflowing, possibly more overflowing than before\n const renderedSize = managedItems\n .filter(notOverflowed)\n .reduce(addAll, 0);\n updateOverflow(size, renderedSize);\n }\n },\n [\n orientation,\n overflowContainerRef,\n overflowItemsRef,\n removeOverflow,\n resetMeasurements,\n updateOverflow,\n ]\n );\n\n return {\n onResize: handleResize,\n resetMeasurements,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useMemo } from 'react';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { makePrefixer, useIdMemo, useForkRef, Label } from '@salt-ds/core';
|
|
5
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
+
import { useWindow } from '@salt-ds/window';
|
|
7
|
+
import css_248z from './StepLabel.css.js';
|
|
8
|
+
import { useSteppedTrackerContext } from '../SteppedTrackerContext.js';
|
|
9
|
+
import '../TrackerStep/TrackerStep.js';
|
|
10
|
+
import { useTrackerStepTooltipContext } from '../TrackerStep/TrackerStepTooltipContext.js';
|
|
11
|
+
|
|
12
|
+
const withBaseName = makePrefixer("saltStepLabel");
|
|
13
|
+
const StepLabel = forwardRef(
|
|
14
|
+
function StepLabel2({ children, className, ...rest }, ref) {
|
|
15
|
+
const id = useIdMemo();
|
|
16
|
+
const targetWindow = useWindow();
|
|
17
|
+
useComponentCssInjection({
|
|
18
|
+
testId: "salt-step-label",
|
|
19
|
+
css: css_248z,
|
|
20
|
+
window: targetWindow
|
|
21
|
+
});
|
|
22
|
+
const { getOverflowRef } = useSteppedTrackerContext();
|
|
23
|
+
const overflowRef = useMemo(() => getOverflowRef(id), [id, getOverflowRef]);
|
|
24
|
+
const isInTooltip = useTrackerStepTooltipContext();
|
|
25
|
+
const combinedRef = useForkRef(overflowRef, ref);
|
|
26
|
+
return isInTooltip ? /* @__PURE__ */ jsx("span", {
|
|
27
|
+
children
|
|
28
|
+
}) : /* @__PURE__ */ jsx(Label, {
|
|
29
|
+
className: clsx(withBaseName(), className),
|
|
30
|
+
ref: combinedRef,
|
|
31
|
+
...rest,
|
|
32
|
+
children
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
export { StepLabel };
|
|
38
|
+
//# sourceMappingURL=StepLabel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import {\n forwardRef,\n ReactNode,\n useMemo,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useForkRef, makePrefixer, useIdMemo, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nimport { useSteppedTrackerContext } from \"../SteppedTrackerContext\";\nimport { useTrackerStepTooltipContext } from \"../TrackerStep\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n children: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n function StepLabel({ children, className, ...rest }, ref?) {\n const id = useIdMemo();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-step-label\",\n css: stepLabelCss,\n window: targetWindow,\n });\n\n const { getOverflowRef } = useSteppedTrackerContext();\n const overflowRef = useMemo(() => getOverflowRef(id), [id, getOverflowRef]);\n\n const isInTooltip = useTrackerStepTooltipContext();\n\n const combinedRef = useForkRef<HTMLLabelElement>(overflowRef, ref);\n\n return isInTooltip ? (\n <span>{children}</span>\n ) : (\n <Label\n className={clsx(withBaseName(), className)}\n ref={combinedRef}\n {...rest}\n >\n {children}\n </Label>\n );\n }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAM1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAM,EAAA;AACzD,IAAA,MAAM,KAAK,SAAU,EAAA,CAAA;AAErB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,cAAe,EAAA,GAAI,wBAAyB,EAAA,CAAA;AACpD,IAAM,MAAA,WAAA,GAAc,QAAQ,MAAM,cAAA,CAAe,EAAE,CAAG,EAAA,CAAC,EAAI,EAAA,cAAc,CAAC,CAAA,CAAA;AAE1E,IAAA,MAAM,cAAc,4BAA6B,EAAA,CAAA;AAEjD,IAAM,MAAA,WAAA,GAAc,UAA6B,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAEjE,IAAA,OAAO,8BACJ,GAAA,CAAA,MAAA,EAAA;AAAA,MAAM,QAAA;AAAA,KAAS,oBAEf,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,WAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltSteppedTracker {\n margin: 0;\n padding: 0;\n text-indent: 0;\n list-style-type: none;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-50);\n width: 100%;\n position: relative;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=SteppedTracker.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SteppedTracker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useState, Children, useEffect, isValidElement } from 'react';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
|
+
import { useWindow } from '@salt-ds/window';
|
|
6
|
+
import { makePrefixer } from '@salt-ds/core';
|
|
7
|
+
import useDetectTruncatedText from './useDetectTruncatedText.js';
|
|
8
|
+
import { SteppedTrackerProvider, TrackerStepProvider } from './SteppedTrackerContext.js';
|
|
9
|
+
import css_248z from './SteppedTracker.css.js';
|
|
10
|
+
|
|
11
|
+
const withBaseName = makePrefixer("saltSteppedTracker");
|
|
12
|
+
const useCheckInvalidChildren = (children) => {
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (process.env.NODE_ENV !== "production") {
|
|
15
|
+
let hasInvalidChild = false;
|
|
16
|
+
Children.forEach(children, (child) => {
|
|
17
|
+
if (!isValidElement(child)) {
|
|
18
|
+
hasInvalidChild = true;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
if (hasInvalidChild) {
|
|
22
|
+
console.error(
|
|
23
|
+
"Invalid child: children of SteppedTracker must be a TrackerStep component"
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}, [children]);
|
|
28
|
+
};
|
|
29
|
+
const SteppedTracker = forwardRef(
|
|
30
|
+
function SteppedTracker2({ children, className, activeStep, ...restProps }, ref) {
|
|
31
|
+
const targetWindow = useWindow();
|
|
32
|
+
useComponentCssInjection({
|
|
33
|
+
testId: "salt-stepped-tracker",
|
|
34
|
+
css: css_248z,
|
|
35
|
+
window: targetWindow
|
|
36
|
+
});
|
|
37
|
+
useCheckInvalidChildren(children);
|
|
38
|
+
const [hasTooltips, setHasTooltips] = useState(false);
|
|
39
|
+
const getOverflowRef = useDetectTruncatedText(setHasTooltips);
|
|
40
|
+
const totalSteps = Children.count(children);
|
|
41
|
+
return /* @__PURE__ */ jsx(SteppedTrackerProvider, {
|
|
42
|
+
hasTooltips,
|
|
43
|
+
getOverflowRef,
|
|
44
|
+
totalSteps,
|
|
45
|
+
activeStep,
|
|
46
|
+
children: /* @__PURE__ */ jsx("ul", {
|
|
47
|
+
className: clsx(withBaseName(), className),
|
|
48
|
+
ref,
|
|
49
|
+
...restProps,
|
|
50
|
+
children: Children.map(children, (child, i) => /* @__PURE__ */ jsx(TrackerStepProvider, {
|
|
51
|
+
stepNumber: i,
|
|
52
|
+
children: child
|
|
53
|
+
}))
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
export { SteppedTracker };
|
|
60
|
+
//# sourceMappingURL=SteppedTracker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactElement,\n ReactNode,\n Children,\n useState,\n isValidElement,\n useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport useDetectTruncatedText from \"./useDetectTruncatedText\";\nimport {\n SteppedTrackerProvider,\n TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n /**\n * The index of the current activeStep\n */\n activeStep: number;\n /**\n * Should be one or more TrackerStep components\n */\n children: ReactNode;\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n let hasInvalidChild = false;\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) {\n hasInvalidChild = true;\n }\n });\n\n if (hasInvalidChild) {\n console.error(\n \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n );\n }\n }\n }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n function SteppedTracker(\n { children, className, activeStep, ...restProps },\n ref?\n ): ReactElement<SteppedTrackerProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stepped-tracker\",\n css: steppedTrackerCss,\n window: targetWindow,\n });\n\n useCheckInvalidChildren(children);\n const [hasTooltips, setHasTooltips] = useState(false);\n // A factory function used to get a callback ref for checking truncation.\n const getOverflowRef = useDetectTruncatedText(setHasTooltips);\n const totalSteps = Children.count(children);\n\n return (\n <SteppedTrackerProvider\n hasTooltips={hasTooltips}\n getOverflowRef={getOverflowRef}\n totalSteps={totalSteps}\n activeStep={activeStep}\n >\n <ul\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {Children.map(children, (child, i) => (\n <TrackerStepProvider stepNumber={i}>{child}</TrackerStepProvider>\n ))}\n </ul>\n </SteppedTrackerProvider>\n );\n }\n);\n"],"names":["SteppedTracker","steppedTrackerCss"],"mappings":";;;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAatD,MAAM,uBAAA,GAA0B,CAAC,QAAwB,KAAA;AACvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,eAAkB,GAAA,KAAA,CAAA;AACtB,MAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AACpC,QAAI,IAAA,CAAC,cAAe,CAAA,KAAK,CAAG,EAAA;AAC1B,UAAkB,eAAA,GAAA,IAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,2EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACf,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,gBACP,EAAE,QAAA,EAAU,WAAW,UAAe,EAAA,GAAA,SAAA,IACtC,GACmC,EAAA;AACnC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBAAA,CAAwB,QAAQ,CAAA,CAAA;AAChC,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEpD,IAAM,MAAA,cAAA,GAAiB,uBAAuB,cAAc,CAAA,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1C,IAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,MACC,WAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,mBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,sBAC7B,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,UAAY,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAC5C,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { createContext, useMemo, useContext } from 'react';
|
|
3
|
+
|
|
4
|
+
const defaultSteppedTrackerContext = {
|
|
5
|
+
activeStep: 0,
|
|
6
|
+
hasTooltips: false,
|
|
7
|
+
totalSteps: 1,
|
|
8
|
+
getOverflowRef: () => void 0,
|
|
9
|
+
isWithinSteppedTracker: false
|
|
10
|
+
};
|
|
11
|
+
const SteppedTrackerContext = createContext(
|
|
12
|
+
defaultSteppedTrackerContext
|
|
13
|
+
);
|
|
14
|
+
const SteppedTrackerProvider = ({
|
|
15
|
+
activeStep,
|
|
16
|
+
getOverflowRef,
|
|
17
|
+
hasTooltips,
|
|
18
|
+
totalSteps,
|
|
19
|
+
children
|
|
20
|
+
}) => {
|
|
21
|
+
const steppedTrackerContextValue = useMemo(
|
|
22
|
+
() => ({
|
|
23
|
+
activeStep,
|
|
24
|
+
getOverflowRef,
|
|
25
|
+
hasTooltips,
|
|
26
|
+
totalSteps,
|
|
27
|
+
isWithinSteppedTracker: true
|
|
28
|
+
}),
|
|
29
|
+
[activeStep, getOverflowRef, hasTooltips, totalSteps]
|
|
30
|
+
);
|
|
31
|
+
return /* @__PURE__ */ jsx(SteppedTrackerContext.Provider, {
|
|
32
|
+
value: steppedTrackerContextValue,
|
|
33
|
+
children
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);
|
|
37
|
+
const TrackerStepContext = createContext(0);
|
|
38
|
+
const useTrackerStepContext = () => useContext(TrackerStepContext);
|
|
39
|
+
const TrackerStepProvider = ({
|
|
40
|
+
children,
|
|
41
|
+
stepNumber
|
|
42
|
+
}) => {
|
|
43
|
+
return /* @__PURE__ */ jsx(TrackerStepContext.Provider, {
|
|
44
|
+
value: stepNumber,
|
|
45
|
+
children
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { SteppedTrackerProvider, TrackerStepProvider, useSteppedTrackerContext, useTrackerStepContext };
|
|
50
|
+
//# sourceMappingURL=SteppedTrackerContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from \"react\";\n\nimport { GetOverflowRef } from \"./useDetectTruncatedText\";\n\nexport type SteppedTrackerContextType = {\n activeStep: number;\n getOverflowRef: GetOverflowRef;\n hasTooltips: boolean;\n totalSteps: number;\n isWithinSteppedTracker: boolean;\n};\n\nconst defaultSteppedTrackerContext = {\n activeStep: 0,\n hasTooltips: false,\n totalSteps: 1,\n getOverflowRef: () => undefined,\n isWithinSteppedTracker: false,\n};\n\nconst SteppedTrackerContext = createContext(\n defaultSteppedTrackerContext as unknown as SteppedTrackerContextType\n);\n\ntype SteppedTrackerProviderProps = Omit<\n SteppedTrackerContextType,\n \"isWithinSteppedTracker\"\n> & {\n children: ReactNode;\n};\n\nexport const SteppedTrackerProvider = ({\n activeStep,\n getOverflowRef,\n hasTooltips,\n totalSteps,\n children,\n}: SteppedTrackerProviderProps) => {\n const steppedTrackerContextValue: SteppedTrackerContextType = useMemo(\n () => ({\n activeStep,\n getOverflowRef,\n hasTooltips,\n totalSteps,\n isWithinSteppedTracker: true,\n }),\n [activeStep, getOverflowRef, hasTooltips, totalSteps]\n );\n\n return (\n <SteppedTrackerContext.Provider value={steppedTrackerContextValue}>\n {children}\n </SteppedTrackerContext.Provider>\n );\n};\n\nexport const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);\n\ntype TrackerStepNumberContextType = number;\n\nconst TrackerStepContext = createContext<TrackerStepNumberContextType>(0);\n\nexport const useTrackerStepContext = () => useContext(TrackerStepContext);\n\ntype TrackerStepProivderProps = {\n stepNumber: number;\n children: ReactNode;\n};\n\nexport const TrackerStepProvider = ({\n children,\n stepNumber,\n}: TrackerStepProivderProps) => {\n return (\n <TrackerStepContext.Provider value={stepNumber}>\n {children}\n </TrackerStepContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;AAYA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,WAAa,EAAA,KAAA;AAAA,EACb,UAAY,EAAA,CAAA;AAAA,EACZ,gBAAgB,MAAM,KAAA,CAAA;AAAA,EACtB,sBAAwB,EAAA,KAAA;AAC1B,CAAA,CAAA;AAEA,MAAM,qBAAwB,GAAA,aAAA;AAAA,EAC5B,4BAAA;AACF,CAAA,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAA,OAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA,IAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,UAAA,EAAY,cAAgB,EAAA,WAAA,EAAa,UAAU,CAAA;AAAA,GACtD,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAO,EAAA,0BAAA;AAAA,IACpC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,wBAAA,GAA2B,MAAM,UAAA,CAAW,qBAAqB,EAAA;AAI9E,MAAM,kBAAA,GAAqB,cAA4C,CAAC,CAAA,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAM,UAAA,CAAW,kBAAkB,EAAA;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,UAAA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,UAAA;AAAA,IACjC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltTrackerConnector {\n --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-track-borderWidth));\n --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n}\n\n.saltTrackerConnector {\n height: 0;\n border-top-width: var(--trackerConnector-thickness);\n border-top-style: var(--trackerConnector-style-default);\n border-top-color: var(--trackerConnector-color);\n position: absolute;\n width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n top: calc(var(--saltIcon-size) / 2);\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n border-top-style: var(--trackerConnector-style-active);\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=TrackerConnector.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrackerConnector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
4
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
|
+
import { useWindow } from '@salt-ds/window';
|
|
6
|
+
import css_248z from './TrackerConnector.css.js';
|
|
7
|
+
|
|
8
|
+
const withBaseName = makePrefixer("saltTrackerConnector");
|
|
9
|
+
const TrackerConnector = ({ state }) => {
|
|
10
|
+
const targetWindow = useWindow();
|
|
11
|
+
useComponentCssInjection({
|
|
12
|
+
testId: "salt-tracker-connector",
|
|
13
|
+
css: css_248z,
|
|
14
|
+
window: targetWindow
|
|
15
|
+
});
|
|
16
|
+
return /* @__PURE__ */ jsx("span", {
|
|
17
|
+
className: clsx(withBaseName(), withBaseName(state))
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { TrackerConnector };
|
|
22
|
+
//# sourceMappingURL=TrackerConnector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrackerConnector.js","sources":["../src/stepped-tracker/TrackerConnector/TrackerConnector.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport trackerConnectorCss from \"./TrackerConnector.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerConnector\");\n\ntype ConnectorState = \"default\" | \"active\";\n\ntype TrackerConnectorProps = {\n /**\n * The state of the connector, which acts as an indicator of whether the active step is ahead/behind\n */\n state: ConnectorState;\n};\n\nexport const TrackerConnector = ({ state }: TrackerConnectorProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tracker-connector\",\n css: trackerConnectorCss,\n window: targetWindow,\n });\n\n return <span className={clsx(withBaseName(), withBaseName(state))} />;\n};\n"],"names":["trackerConnectorCss"],"mappings":";;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAWjD,MAAM,gBAAmB,GAAA,CAAC,EAAE,KAAA,EAAmC,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,IAAK,CAAA,YAAA,EAAgB,EAAA,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,GAAG,CAAA,CAAA;AACrE;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltTrackerStep {\n --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n --saltIcon-color: var(--trackerStep-icon-color);\n /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px));\n}\n\n.saltTrackerStep {\n margin: 0;\n padding: 0;\n text-indent: 0;\n list-style-type: none;\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n flex-direction: column;\n width: var(--saltTrackerStep-width, 100%);\n gap: var(--salt-spacing-50);\n color: var(--salt-text-primary-foreground);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=TrackerStep.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TrackerStep.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|