@salt-ds/core 1.71.0 → 1.73.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +204 -0
- package/css/salt-core.css +432 -175
- package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/avatar/Avatar.css.js +1 -1
- package/dist-cjs/badge/Badge.css.js +1 -1
- package/dist-cjs/banner/Banner.css.js +1 -1
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumb.css.js +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumb.js +5 -6
- package/dist-cjs/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-cjs/breadcrumbs/Breadcrumbs.css.js +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/card/CardContent.css.js +1 -1
- package/dist-cjs/card/hasCardSection.js +11 -3
- package/dist-cjs/card/hasCardSection.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/collapsible/CollapsiblePanel.css.js +1 -1
- package/dist-cjs/collapsible/CollapsiblePanel.js +15 -15
- package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +18 -36
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +21 -21
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +2 -0
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/DrawerHeader.js +2 -0
- package/dist-cjs/drawer/DrawerHeader.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.js +30 -31
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/form-field/FormField.css.js +1 -1
- package/dist-cjs/form-field/FormField.js +2 -2
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.css.js +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +2 -0
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +3 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/index.js +13 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +18 -7
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +71 -39
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/interactable-card/useInteractableCard.js +2 -3
- package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-cjs/kbd/Kbd.css.js +1 -1
- package/dist-cjs/link/Link.css.js +1 -1
- package/dist-cjs/link/Link.js +2 -0
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link/LinkAction.js +3 -2
- package/dist-cjs/link/LinkAction.js.map +1 -1
- package/dist-cjs/link-button/LinkButton.js +3 -2
- package/dist-cjs/link-button/LinkButton.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js +20 -27
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlNavigationKeys.js +74 -0
- package/dist-cjs/list-control/ListControlNavigationKeys.js.map +1 -0
- package/dist-cjs/list-control/ListControlOptionContext.js +47 -0
- package/dist-cjs/list-control/ListControlOptionContext.js.map +1 -0
- package/dist-cjs/list-control/ListControlOptionStore.js +159 -0
- package/dist-cjs/list-control/ListControlOptionStore.js.map +1 -0
- package/dist-cjs/list-control/ListControlProvider.js +39 -0
- package/dist-cjs/list-control/ListControlProvider.js.map +1 -0
- package/dist-cjs/list-control/ListControlRegistry.js +161 -0
- package/dist-cjs/list-control/ListControlRegistry.js.map +1 -0
- package/dist-cjs/list-control/ListControlState.js +137 -109
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +1 -1
- package/dist-cjs/mega-menu/MegaMenuListItem.css.js +1 -1
- package/dist-cjs/menu/MenuGroup.css.js +1 -1
- package/dist-cjs/menu/MenuItem.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
- package/dist-cjs/number-input/NumberInput.css.js +1 -1
- package/dist-cjs/number-input/NumberInput.js +2 -2
- package/dist-cjs/number-input/NumberInput.js.map +1 -1
- package/dist-cjs/on-solid-button/OnSolidButton.css.js +6 -0
- package/dist-cjs/on-solid-button/OnSolidButton.css.js.map +1 -0
- package/dist-cjs/on-solid-button/OnSolidButton.js +68 -0
- package/dist-cjs/on-solid-button/OnSolidButton.js.map +1 -0
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/Option.js +64 -39
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.css.js +1 -1
- package/dist-cjs/overlay/Overlay.js +12 -2
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +6 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayFooter.css.js +6 -0
- package/dist-cjs/overlay/OverlayFooter.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayFooter.js +30 -0
- package/dist-cjs/overlay/OverlayFooter.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.css.js +1 -1
- package/dist-cjs/overlay/OverlayHeader.js +53 -11
- package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +20 -7
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +11 -13
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/hasOverlaySection.js +24 -0
- package/dist-cjs/overlay/hasOverlaySection.js.map +1 -0
- package/dist-cjs/pagination/CompactPaginator.js +2 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +2 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pill/PillCheckIcon.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.js +2 -2
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +2 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +2 -0
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.css.js +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-cjs/rating/Rating.css.js +1 -1
- package/dist-cjs/salt-provider/ThemeApplicator.js +10 -6
- package/dist-cjs/salt-provider/ThemeApplicator.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelTitle.js +2 -0
- package/dist-cjs/side-panel/SidePanelTitle.js.map +1 -1
- package/dist-cjs/side-panel/SidePanelTrigger.js.map +1 -1
- package/dist-cjs/side-panel/internal/useIsScrollable.js.map +1 -1
- package/dist-cjs/side-panel/useSidePanel.js +4 -9
- package/dist-cjs/side-panel/useSidePanel.js.map +1 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +2 -2
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTooltip.js +2 -0
- package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTrack.css.js +1 -1
- package/dist-cjs/slider/internal/SliderTrack.js +2 -0
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/utils.js.map +1 -1
- package/dist-cjs/stepper/Stepper.js +1 -1
- package/dist-cjs/stepper/Stepper.js.map +1 -1
- package/dist-cjs/stepper/internal/StepText.css.js +1 -1
- package/dist-cjs/stepper/internal/StepText.js +2 -0
- package/dist-cjs/stepper/internal/StepText.js.map +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/table/Table.css.js +1 -1
- package/dist-cjs/tabs/Tabs.js +1 -1
- package/dist-cjs/tabs/Tabs.js.map +1 -1
- package/dist-cjs/tabs/internal/overflow/useOverflow.js.map +1 -1
- package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
- package/dist-cjs/tag/Tag.css.js +1 -1
- package/dist-cjs/text/Code.js +1 -1
- package/dist-cjs/text/Code.js.map +1 -1
- package/dist-cjs/text/Editorial.js +32 -0
- package/dist-cjs/text/Editorial.js.map +1 -0
- package/dist-cjs/text/Eyebrow.js +12 -0
- package/dist-cjs/text/Eyebrow.js.map +1 -0
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +6 -2
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +8 -2
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +71 -8
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/toggletip/ToggletipPanel.css.js +1 -1
- package/dist-cjs/toolbar/ToolbarOverflow.js +8 -4
- package/dist-cjs/toolbar/ToolbarOverflow.js.map +1 -1
- package/dist-cjs/toolbar/toolbarUtils.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +4 -2
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/tree/TreeContext.js.map +1 -1
- package/dist-cjs/utils/forkRef.js +34 -0
- package/dist-cjs/utils/forkRef.js.map +1 -0
- package/dist-cjs/utils/getRefFromChildren.js.map +1 -1
- package/dist-cjs/utils/marginMiddleware.js.map +1 -1
- package/dist-cjs/utils/setRef.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useForkRef.js +3 -6
- package/dist-cjs/utils/useForkRef.js.map +1 -1
- package/dist-cjs/utils/useResizeObserver.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/avatar/Avatar.css.js +1 -1
- package/dist-es/badge/Badge.css.js +1 -1
- package/dist-es/banner/Banner.css.js +1 -1
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breadcrumbs/Breadcrumb.css.js +1 -1
- package/dist-es/breadcrumbs/Breadcrumb.js +5 -6
- package/dist-es/breadcrumbs/Breadcrumb.js.map +1 -1
- package/dist-es/breadcrumbs/Breadcrumbs.css.js +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/card/CardContent.css.js +1 -1
- package/dist-es/card/hasCardSection.js +11 -3
- package/dist-es/card/hasCardSection.js.map +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/collapsible/CollapsiblePanel.css.js +1 -1
- package/dist-es/collapsible/CollapsiblePanel.js +16 -16
- package/dist-es/collapsible/CollapsiblePanel.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +18 -36
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +21 -21
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +2 -0
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/DrawerHeader.js +2 -0
- package/dist-es/drawer/DrawerHeader.js.map +1 -1
- package/dist-es/dropdown/Dropdown.css.js +1 -1
- package/dist-es/dropdown/Dropdown.js +30 -31
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/form-field/FormField.css.js +1 -1
- package/dist-es/form-field/FormField.js +2 -2
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.css.js +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +2 -0
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.css.js +1 -1
- package/dist-es/form-field/FormFieldLabel.js +3 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/index.js +4 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.js +18 -7
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +72 -40
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/interactable-card/useInteractableCard.js +2 -3
- package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-es/kbd/Kbd.css.js +1 -1
- package/dist-es/link/Link.css.js +1 -1
- package/dist-es/link/Link.js +2 -0
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link/LinkAction.js +3 -2
- package/dist-es/link/LinkAction.js.map +1 -1
- package/dist-es/link-button/LinkButton.js +3 -2
- package/dist-es/link-button/LinkButton.js.map +1 -1
- package/dist-es/list-box/ListBox.js +20 -27
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlNavigationKeys.js +69 -0
- package/dist-es/list-control/ListControlNavigationKeys.js.map +1 -0
- package/dist-es/list-control/ListControlOptionContext.js +44 -0
- package/dist-es/list-control/ListControlOptionContext.js.map +1 -0
- package/dist-es/list-control/ListControlOptionStore.js +153 -0
- package/dist-es/list-control/ListControlOptionStore.js.map +1 -0
- package/dist-es/list-control/ListControlProvider.js +37 -0
- package/dist-es/list-control/ListControlProvider.js.map +1 -0
- package/dist-es/list-control/ListControlRegistry.js +158 -0
- package/dist-es/list-control/ListControlRegistry.js.map +1 -0
- package/dist-es/list-control/ListControlState.js +137 -110
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +1 -1
- package/dist-es/mega-menu/MegaMenuListItem.css.js +1 -1
- package/dist-es/menu/MenuGroup.css.js +1 -1
- package/dist-es/menu/MenuItem.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/navigation-item/NavigationItem.css.js +1 -1
- package/dist-es/number-input/NumberInput.css.js +1 -1
- package/dist-es/number-input/NumberInput.js +2 -2
- package/dist-es/number-input/NumberInput.js.map +1 -1
- package/dist-es/on-solid-button/OnSolidButton.css.js +4 -0
- package/dist-es/on-solid-button/OnSolidButton.css.js.map +1 -0
- package/dist-es/on-solid-button/OnSolidButton.js +66 -0
- package/dist-es/on-solid-button/OnSolidButton.js.map +1 -0
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/Option.js +65 -40
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.css.js +1 -1
- package/dist-es/overlay/Overlay.js +13 -3
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +6 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayFooter.css.js +4 -0
- package/dist-es/overlay/OverlayFooter.css.js.map +1 -0
- package/dist-es/overlay/OverlayFooter.js +28 -0
- package/dist-es/overlay/OverlayFooter.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.css.js +1 -1
- package/dist-es/overlay/OverlayHeader.js +53 -11
- package/dist-es/overlay/OverlayHeader.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.css.js +1 -1
- package/dist-es/overlay/OverlayPanel.js +20 -7
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.css.js +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +11 -13
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/hasOverlaySection.js +22 -0
- package/dist-es/overlay/hasOverlaySection.js.map +1 -0
- package/dist-es/pagination/CompactPaginator.js +2 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +2 -0
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pill/PillCheckIcon.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/pill-input/PillInput.js +2 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +2 -0
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +2 -0
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.css.js +1 -1
- package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-es/rating/Rating.css.js +1 -1
- package/dist-es/salt-provider/ThemeApplicator.js +10 -6
- package/dist-es/salt-provider/ThemeApplicator.js.map +1 -1
- package/dist-es/side-panel/SidePanelTitle.js +2 -0
- package/dist-es/side-panel/SidePanelTitle.js.map +1 -1
- package/dist-es/side-panel/SidePanelTrigger.js.map +1 -1
- package/dist-es/side-panel/internal/useIsScrollable.js.map +1 -1
- package/dist-es/side-panel/useSidePanel.js +4 -9
- package/dist-es/side-panel/useSidePanel.js.map +1 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js +2 -2
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-es/slider/internal/SliderThumb.js.map +1 -1
- package/dist-es/slider/internal/SliderTooltip.js +2 -0
- package/dist-es/slider/internal/SliderTooltip.js.map +1 -1
- package/dist-es/slider/internal/SliderTrack.css.js +1 -1
- package/dist-es/slider/internal/SliderTrack.js +2 -0
- package/dist-es/slider/internal/SliderTrack.js.map +1 -1
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-es/slider/internal/utils.js.map +1 -1
- package/dist-es/stepper/Stepper.js +1 -1
- package/dist-es/stepper/Stepper.js.map +1 -1
- package/dist-es/stepper/internal/StepText.css.js +1 -1
- package/dist-es/stepper/internal/StepText.js +2 -0
- package/dist-es/stepper/internal/StepText.js.map +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/table/Table.css.js +1 -1
- package/dist-es/tabs/Tabs.js +1 -1
- package/dist-es/tabs/Tabs.js.map +1 -1
- package/dist-es/tabs/internal/overflow/useOverflow.js.map +1 -1
- package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
- package/dist-es/tag/Tag.css.js +1 -1
- package/dist-es/text/Code.js +1 -1
- package/dist-es/text/Code.js.map +1 -1
- package/dist-es/text/Editorial.js +25 -0
- package/dist-es/text/Editorial.js.map +1 -0
- package/dist-es/text/Eyebrow.js +10 -0
- package/dist-es/text/Eyebrow.js.map +1 -0
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +6 -2
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.js +8 -2
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +71 -8
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/toggletip/ToggletipPanel.css.js +1 -1
- package/dist-es/toolbar/ToolbarOverflow.js +8 -4
- package/dist-es/toolbar/ToolbarOverflow.js.map +1 -1
- package/dist-es/toolbar/toolbarUtils.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +4 -2
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/tree/TreeContext.js.map +1 -1
- package/dist-es/utils/forkRef.js +32 -0
- package/dist-es/utils/forkRef.js.map +1 -0
- package/dist-es/utils/getRefFromChildren.js.map +1 -1
- package/dist-es/utils/marginMiddleware.js.map +1 -1
- package/dist-es/utils/setRef.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useForkRef.js +3 -6
- package/dist-es/utils/useForkRef.js.map +1 -1
- package/dist-es/utils/useResizeObserver.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
- package/dist-types/checkbox/CheckboxIcon.d.ts +2 -1
- package/dist-types/collapsible/CollapsiblePanel.d.ts +8 -1
- package/dist-types/combo-box/ComboBox.d.ts +2 -2
- package/dist-types/combo-box/useComboBox.d.ts +3 -6
- package/dist-types/dropdown/Dropdown.d.ts +2 -2
- package/dist-types/form-field/FormFieldHelperText.d.ts +1 -1
- package/dist-types/form-field/FormFieldLabel.d.ts +1 -1
- package/dist-types/form-field-context/FormFieldContext.d.ts +1 -1
- package/dist-types/index.d.ts +1 -0
- package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +2 -0
- package/dist-types/interactable-card/useInteractableCard.d.ts +1 -2
- package/dist-types/list-box/ListBox.d.ts +2 -2
- package/dist-types/list-control/ListControlContext.d.ts +1 -1
- package/dist-types/list-control/ListControlNavigationKeys.d.ts +30 -0
- package/dist-types/list-control/ListControlOptionContext.d.ts +18 -0
- package/dist-types/list-control/ListControlOptionStore.d.ts +17 -0
- package/dist-types/list-control/ListControlProvider.d.ts +11 -0
- package/dist-types/list-control/ListControlRegistry.d.ts +22 -0
- package/dist-types/list-control/ListControlState.d.ts +6 -6
- package/dist-types/on-solid-button/OnSolidButton.d.ts +12 -0
- package/dist-types/on-solid-button/index.d.ts +1 -0
- package/dist-types/option/Option.d.ts +3 -1
- package/dist-types/overlay/Overlay.d.ts +2 -1
- package/dist-types/overlay/OverlayContext.d.ts +4 -0
- package/dist-types/overlay/OverlayFooter.d.ts +4 -0
- package/dist-types/overlay/hasOverlaySection.d.ts +2 -0
- package/dist-types/overlay/index.d.ts +1 -0
- package/dist-types/pill/PillCheckIcon.d.ts +2 -1
- package/dist-types/registerClassNameInjection.d.ts +0 -2
- package/dist-types/salt-provider/SaltProvider.d.ts +1 -1
- package/dist-types/side-panel/internal/useIsScrollable.d.ts +1 -1
- package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +1 -1
- package/dist-types/slider/internal/SliderThumb.d.ts +2 -2
- package/dist-types/slider/internal/SliderTrack.d.ts +2 -2
- package/dist-types/slider/internal/useRangeSliderThumb.d.ts +1 -1
- package/dist-types/slider/internal/useSliderThumb.d.ts +1 -1
- package/dist-types/slider/internal/utils.d.ts +1 -1
- package/dist-types/tabs/internal/overflow/useOverflow.d.ts +2 -2
- package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts +1 -1
- package/dist-types/text/Editorial.d.ts +7 -0
- package/dist-types/text/Eyebrow.d.ts +2 -0
- package/dist-types/text/Text.d.ts +9 -2
- package/dist-types/text/index.d.ts +2 -0
- package/dist-types/toggle-button/ToggleButton.d.ts +1 -1
- package/dist-types/toggle-button-group/ToggleButtonGroupContext.d.ts +2 -1
- package/dist-types/tooltip/useTooltip.d.ts +12 -26
- package/dist-types/tree/TreeContext.d.ts +1 -1
- package/dist-types/utils/forkRef.d.ts +11 -0
- package/dist-types/utils/inferElementType.d.ts +1 -2
- package/dist-types/utils/marginMiddleware.d.ts +1 -1
- package/dist-types/utils/setRef.d.ts +4 -0
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -5
- package/dist-types/utils/useResizeObserver.d.ts +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type
|
|
1
|
+
{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type Ref,\n useCallback,\n useEffect,\n useState,\n} from \"react\";\nimport { makePrefixer, useId } from \"../../utils\";\nimport sliderThumbCss from \"./SliderThumb.css\";\nimport { SliderTooltip } from \"./SliderTooltip\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\ninterface SliderThumbProps\n extends Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"onChange\" | \"defaultValue\" | \"min\" | \"max\"\n > {\n accessibleMaxText?: string;\n accessibleMinText?: string;\n disabled: boolean;\n format?: (value: number) => number | string;\n handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n handleKeydownOnThumb: (event: React.KeyboardEvent) => void;\n handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n index?: number;\n inputRef?: Ref<HTMLInputElement>;\n isFocusVisible: boolean;\n max: number;\n maxLabel?: string;\n min: number;\n minLabel?: string;\n offsetPercentage?: string;\n restrictToMarks?: boolean;\n showTooltip?: boolean;\n sliderValue: [number, number] | number;\n step: number;\n stepMultiplier: number;\n trackDragging: boolean;\n}\n\nexport const SliderThumb = ({\n \"aria-label\": ariaLabel,\n \"aria-valuetext\": ariaValueText,\n \"aria-labelledby\": ariaLabelledBy,\n accessibleMaxText,\n accessibleMinText,\n disabled,\n format,\n handleInputChange,\n handleKeydownOnThumb,\n handlePointerDown,\n index = 0,\n inputRef,\n isFocusVisible,\n max,\n maxLabel,\n min,\n minLabel,\n offsetPercentage,\n restrictToMarks,\n showTooltip,\n sliderValue,\n step,\n stepMultiplier,\n trackDragging,\n ...rest\n}: SliderThumbProps) => {\n {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-thumb\",\n css: sliderThumbCss,\n window: targetWindow,\n });\n\n const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n const id = useId();\n const accessibleTextId = `saltSlider-${id}-${index}`;\n const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;\n const formattedValue = format ? format(value) : value;\n\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n setIsTooltipVisible(false);\n }\n }, []);\n\n useEffect(() => {\n if (showTooltip && isTooltipVisible) {\n targetWindow?.addEventListener(\"keydown\", handleKeyDown);\n }\n return () => targetWindow?.removeEventListener(\"keydown\", handleKeyDown);\n }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);\n\n const handlePointerEnter = () => setIsTooltipVisible(true);\n\n const handlePointerLeave = () => {\n // Delay hiding the tooltip to enable tooltip\n // visibility on hover\n setTimeout(() => {\n setIsTooltipVisible(false);\n }, 300);\n };\n\n return (\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"focusVisible\")]: isFocusVisible,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"dragging\")]: trackDragging,\n [withBaseName(\"secondThumb\")]: index === 1,\n })}\n data-testid=\"sliderThumb\"\n onPointerDown={handlePointerDown}\n style={{ left: offsetPercentage }}\n {...(showTooltip && {\n onPointerEnter: handlePointerEnter,\n onPointerLeave: handlePointerLeave,\n })}\n >\n {showTooltip && (\n <SliderTooltip\n value={formattedValue}\n open={\n (isTooltipVisible || trackDragging || isFocusVisible) && !disabled\n }\n />\n )}\n <input\n disabled={disabled}\n type=\"range\"\n ref={inputRef}\n className={withBaseName(\"input\")}\n value={value}\n onChange={handleInputChange}\n onKeyDown={handleKeydownOnThumb}\n aria-labelledby={ariaLabelledBy}\n aria-valuenow={value}\n aria-valuetext={ariaValueText || format?.(value).toString()}\n aria-label={ariaLabel}\n aria-describedby={accessibleTextId}\n min={min}\n max={max}\n step={step}\n {...rest}\n />\n {/* Accessible text */}\n <span\n aria-hidden=\"true\"\n id={accessibleTextId}\n className={withBaseName(\"accessibleText\")}\n >\n {Array.isArray(sliderValue) &&\n `${index === 0 ? \"leading\" : \"trailing\"}, ${format?.(sliderValue[0]) || sliderValue[0]} to ${format?.(sliderValue[1]) || sliderValue[1]}, `}\n range{\" \"}\n {accessibleMinText\n ? `${accessibleMinText} ${min}, `\n : `minimum ${format?.(min) || min}, `}\n {accessibleMaxText\n ? `${accessibleMaxText} ${max} `\n : `maximum ${format?.(max) || max}`}\n {restrictToMarks\n ? \", custom increments\"\n : step !== 1 && `, increments of ${step}`}\n </span>\n </div>\n );\n }\n};\n"],"names":["sliderThumbCss"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AA8B5C,MAAM,cAAc,CAAC;AAAA,EAC1B,YAAA,EAAc,SAAA;AAAA,EACd,gBAAA,EAAkB,aAAA;AAAA,EAClB,iBAAA,EAAmB,cAAA;AAAA,EACnB,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,QAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA;AACE,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,mBAAA;AAAA,MACR,GAAA,EAAKA,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9D,IAAA,MAAM,KAAK,KAAA,EAAM;AACjB,IAAA,MAAM,gBAAA,GAAmB,CAAA,WAAA,EAAc,EAAE,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAClD,IAAA,MAAM,QAAQ,KAAA,CAAM,OAAA,CAAQ,WAAW,CAAA,GAAI,WAAA,CAAY,KAAK,CAAA,GAAI,WAAA;AAChE,IAAA,MAAM,cAAA,GAAiB,MAAA,GAAS,MAAA,CAAO,KAAK,CAAA,GAAI,KAAA;AAEhD,IAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,KAAA,KAAyB;AAC1D,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,MAC3B;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,eAAe,gBAAA,EAAkB;AACnC,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,SAAA,EAAW,aAAA,CAAA;AAAA,MAC5C;AACA,MAAA,OAAO,MAAM,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,mBAAA,CAAoB,SAAA,EAAW,aAAA,CAAA;AAAA,IAC5D,GAAG,CAAC,aAAA,EAAe,gBAAA,EAAkB,WAAA,EAAa,YAAY,CAAC,CAAA;AAE/D,IAAA,MAAM,kBAAA,GAAqB,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAEzD,IAAA,MAAM,qBAAqB,MAAM;AAG/B,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,MAC3B,GAAG,GAAG,CAAA;AAAA,IACR,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG;AAAA,UAC9B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,cAAA;AAAA,UAChC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,KAAA,KAAU;AAAA,SAC1C,CAAA;AAAA,QACD,aAAA,EAAY,aAAA;AAAA,QACZ,aAAA,EAAe,iBAAA;AAAA,QACf,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAA,EAAiB;AAAA,QAC/B,GAAI,WAAA,IAAe;AAAA,UAClB,cAAA,EAAgB,kBAAA;AAAA,UAChB,cAAA,EAAgB;AAAA,SAClB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,WAAA,oBACC,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,cAAA;AAAA,cACP,IAAA,EAAA,CACG,gBAAA,IAAoB,aAAA,IAAiB,cAAA,KAAmB,CAAC;AAAA;AAAA,WAE9D;AAAA,0BAEF,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,IAAA,EAAK,OAAA;AAAA,cACL,GAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,KAAA;AAAA,cACA,QAAA,EAAU,iBAAA;AAAA,cACV,SAAA,EAAW,oBAAA;AAAA,cACX,iBAAA,EAAiB,cAAA;AAAA,cACjB,eAAA,EAAe,KAAA;AAAA,cACf,gBAAA,EAAgB,aAAA,KAAiB,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA,CAAO,QAAA,EAAA,CAAA;AAAA,cACjD,YAAA,EAAY,SAAA;AAAA,cACZ,kBAAA,EAAkB,gBAAA;AAAA,cAClB,GAAA;AAAA,cACA,GAAA;AAAA,cACA,IAAA;AAAA,cACC,GAAG;AAAA;AAAA,WACN;AAAA,0BAEA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAY,MAAA;AAAA,cACZ,EAAA,EAAI,gBAAA;AAAA,cACJ,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,cAEvC,QAAA,EAAA;AAAA,gBAAA,KAAA,CAAM,OAAA,CAAQ,WAAW,CAAA,IACxB,CAAA,EAAG,UAAU,CAAA,GAAI,SAAA,GAAY,UAAU,CAAA,EAAA,EAAA,CAAK,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,WAAA,CAAY,CAAC,CAAA,CAAA,KAAM,WAAA,CAAY,CAAC,CAAC,CAAA,IAAA,EAAA,CAAO,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,YAAY,CAAC,CAAA,CAAA,KAAM,WAAA,CAAY,CAAC,CAAC,CAAA,EAAA,CAAA;AAAA,gBAAK,OAAA;AAAA,gBACxI,GAAA;AAAA,gBACL,iBAAA,GACG,GAAG,iBAAiB,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAA,GAC3B,CAAA,QAAA,EAAA,CAAW,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,GAAA,CAAA,KAAQ,GAAG,CAAA,EAAA,CAAA;AAAA,gBAClC,iBAAA,GACG,GAAG,iBAAiB,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,CAAA,GAC3B,CAAA,QAAA,EAAA,CAAW,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,GAAA,CAAA,KAAQ,GAAG,CAAA,CAAA;AAAA,gBAClC,eAAA,GACG,qBAAA,GACA,IAAA,KAAS,CAAA,IAAK,mBAAmB,IAAI,CAAA;AAAA;AAAA;AAAA;AAC3C;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -4,6 +4,8 @@ import { useWindow } from '@salt-ds/window';
|
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
5
|
import '../../text/Code.js';
|
|
6
6
|
import '../../text/Display.js';
|
|
7
|
+
import '../../text/Editorial.js';
|
|
8
|
+
import '../../text/Eyebrow.js';
|
|
7
9
|
import '../../text/Headings.js';
|
|
8
10
|
import '../../text/Label.js';
|
|
9
11
|
import { Text } from '../../text/Text.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n value: number | string;\n open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-tooltip\",\n css: sliderTooltipCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden\n className={clsx(withBaseName(), {\n [withBaseName(\"visible\")]: open,\n })}\n data-testid=\"sliderTooltip\"\n >\n <svg\n className={withBaseName(\"arrow\")}\n aria-hidden=\"true\"\n viewBox=\"0 1 14 14\"\n >\n <path\n d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n stroke=\" var(--salt-container-primary-background)\"\n />\n <path\n d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n stroke=\"var(--salt-container-bold-borderColor)\"\n />\n </svg>\n <Text className={withBaseName(\"text\")}>{value}</Text>\n </div>\n );\n};\n"],"names":["sliderTooltipCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n value: number | string;\n open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-tooltip\",\n css: sliderTooltipCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden\n className={clsx(withBaseName(), {\n [withBaseName(\"visible\")]: open,\n })}\n data-testid=\"sliderTooltip\"\n >\n <svg\n className={withBaseName(\"arrow\")}\n aria-hidden=\"true\"\n viewBox=\"0 1 14 14\"\n >\n <path\n d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n stroke=\" var(--salt-container-primary-background)\"\n />\n <path\n d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n stroke=\"var(--salt-container-bold-borderColor)\"\n />\n </svg>\n <Text className={withBaseName(\"text\")}>{value}</Text>\n </div>\n );\n};\n"],"names":["sliderTooltipCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,4BACC,IAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltSliderTrack {\n --slider-track-background: var(--salt-sentiment-neutral-track);\n --slider-track-fill: var(--salt-sentiment-accent-borderColor);\n --slider-progressPercentage: 0%;\n --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);\n /* For range */\n --slider-progressPercentageStart: 0%;\n --slider-progressPercentageEnd: 0%;\n\n display: flex;\n touch-action: none;\n width: 100%;\n}\n\n.saltSliderTrack.saltSliderTrack-withMarks {\n /* To wrap the marks within the boundary box */\n margin-bottom: calc(var(--salt-size-base) / 2);\n}\n\n.saltSliderTrack-disabled {\n opacity: 0.4;\n}\n\n.saltSliderTrack-container {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n align-items: center;\n cursor: var(--salt-cursor-hover);\n display: flex;\n flex: 1;\n height: var(--salt-size-selectable);\n position: relative;\n width: 100%;\n}\n\n.saltSliderTrack-disabled,\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n pointer-events: none;\n}\n\n.saltSliderTrack-rail {\n display: flex;\n flex: 100%;\n height: var(--salt-size-bar);\n justify-content: space-between;\n position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n content: \"\";\n display: block;\n height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n background: var(--slider-track-fill);\n border-top-left-radius: var(--salt-palette-corner-weaker);\n border-bottom-left-radius: var(--salt-palette-corner-weaker);\n width: calc(var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n background: var(--slider-track-background);\n border-top-right-radius: var(--salt-palette-corner-weaker);\n border-bottom-right-radius: var(--salt-palette-corner-weaker);\n width: calc(100% - var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n background: var(--slider-track-background);\n width: calc(var(--slider-progressPercentageStart) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n background: var(--slider-track-background);\n width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n background: var(--slider-track-fill);\n height: 100%;\n left: calc(var(--slider-progressPercentageStart) + var(--salt-spacing-fixed-300));\n position: absolute;\n width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-wrapper {\n cursor: var(--salt-cursor-grab-active);\n}\n\n.saltSliderTrack-ticks {\n top: calc(var(--salt-size-bar) + var(--slider-tick-height));\n position: absolute;\n width: 100%;\n}\n\n.saltSliderTrack-tick {\n background: var(--slider-track-background);\n height: var(--slider-tick-height);\n position: absolute;\n transform: translate(-50%);\n width: var(--salt-size-fixed-200);\n}\n\n.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {\n visibility: hidden;\n}\n\n.saltSliderTrack-tickSelected {\n background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-tick:first-of-type {\n transform: unset;\n}\n\n.saltSliderTrack-tick:last-of-type {\n transform: translateX(-100%);\n}\n\n.saltSliderTrack-marks {\n position: absolute;\n user-select: none;\n width: 100%;\n}\n\n.saltSliderTrack-markLabel {\n color: var(--salt-content-secondary-foreground);\n font-family: var(--salt-text-
|
|
1
|
+
var css_248z = ".saltSliderTrack {\n --slider-track-background: var(--salt-sentiment-neutral-track);\n --slider-track-fill: var(--salt-sentiment-accent-borderColor);\n --slider-progressPercentage: 0%;\n --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);\n /* For range */\n --slider-progressPercentageStart: 0%;\n --slider-progressPercentageEnd: 0%;\n\n display: flex;\n touch-action: none;\n width: 100%;\n}\n\n.saltSliderTrack.saltSliderTrack-withMarks {\n /* To wrap the marks within the boundary box */\n margin-bottom: calc(var(--salt-size-base) / 2);\n}\n\n.saltSliderTrack-disabled {\n opacity: 0.4;\n}\n\n.saltSliderTrack-container {\n align-items: center;\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n align-items: center;\n cursor: var(--salt-cursor-hover);\n display: flex;\n flex: 1;\n height: var(--salt-size-selectable);\n position: relative;\n width: 100%;\n}\n\n.saltSliderTrack-disabled,\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n pointer-events: none;\n}\n\n.saltSliderTrack-rail {\n display: flex;\n flex: 100%;\n height: var(--salt-size-bar);\n justify-content: space-between;\n position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n content: \"\";\n display: block;\n height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n background: var(--slider-track-fill);\n border-top-left-radius: var(--salt-palette-corner-weaker);\n border-bottom-left-radius: var(--salt-palette-corner-weaker);\n width: calc(var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n background: var(--slider-track-background);\n border-top-right-radius: var(--salt-palette-corner-weaker);\n border-bottom-right-radius: var(--salt-palette-corner-weaker);\n width: calc(100% - var(--slider-progressPercentage) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n background: var(--slider-track-background);\n width: calc(var(--slider-progressPercentageStart) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n background: var(--slider-track-background);\n width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-spacing-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n background: var(--slider-track-fill);\n height: 100%;\n left: calc(var(--slider-progressPercentageStart) + var(--salt-spacing-fixed-300));\n position: absolute;\n width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-wrapper {\n cursor: var(--salt-cursor-grab-active);\n}\n\n.saltSliderTrack-ticks {\n top: calc(var(--salt-size-bar) + var(--slider-tick-height));\n position: absolute;\n width: 100%;\n}\n\n.saltSliderTrack-tick {\n background: var(--slider-track-background);\n height: var(--slider-tick-height);\n position: absolute;\n transform: translate(-50%);\n width: var(--salt-size-fixed-200);\n}\n\n.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {\n visibility: hidden;\n}\n\n.saltSliderTrack-tickSelected {\n background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-tick:first-of-type {\n transform: unset;\n}\n\n.saltSliderTrack-tick:last-of-type {\n transform: translateX(-100%);\n}\n\n.saltSliderTrack-marks {\n position: absolute;\n user-select: none;\n width: 100%;\n}\n\n.saltSliderTrack-markLabel {\n color: var(--salt-content-secondary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-label-fontWeight);\n font-size: var(--salt-text-label-fontSize);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n transform: translateX(-50%);\n top: calc(var(--slider-tick-height) + var(--salt-spacing-50));\n white-space: nowrap;\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {\n transform: translateX(0%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {\n transform: translateX(-100%);\n}\n\n/* Styles applied when slider and range slider are inside a form field */\n\n.saltFormField .saltSliderTrack.saltSliderTrack-withMark {\n margin-bottom: 0;\n}\n\n.saltFormField .saltSliderTrack-container {\n --saltFormField-label-width: 10%;\n\n height: var(--salt-size-base);\n}\n\n.saltFormField .saltSliderTrack-markLabel {\n top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=SliderTrack.css.js.map
|
|
@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
|
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
6
|
import '../../text/Code.js';
|
|
7
7
|
import '../../text/Display.js';
|
|
8
|
+
import '../../text/Editorial.js';
|
|
9
|
+
import '../../text/Eyebrow.js';
|
|
8
10
|
import '../../text/Headings.js';
|
|
9
11
|
import '../../text/Label.js';
|
|
10
12
|
import { Text } from '../../text/Text.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type RefObject } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTrackCss from \"./SliderTrack.css\";\nimport { calculateMarkPosition, calculatePercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\ninterface SliderTrackProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n children: React.ReactNode;\n constrainLabelPosition?: boolean;\n disabled: boolean;\n showTicks?: boolean;\n format?: (value: number) => string | number;\n handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n isDragging: boolean;\n isRange?: boolean;\n marks?: { label: string; value: number }[];\n max: number;\n maxLabel?: number | string;\n min: number;\n minLabel?: number | string;\n progressPercentage?: number;\n progressPercentageRange?: [number, number];\n sliderRef: RefObject<HTMLDivElement>;\n}\n\nexport const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(\n function SliderTrack(\n {\n children,\n className,\n constrainLabelPosition = false,\n disabled,\n showTicks,\n format,\n handlePointerDown,\n isDragging,\n isRange = false,\n marks,\n max,\n maxLabel,\n min,\n minLabel,\n progressPercentage = 0,\n progressPercentageRange = [0, 0],\n sliderRef,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-track\",\n css: sliderTrackCss,\n window: targetWindow,\n });\n\n const checkIsMarkSelected = (value: number) => {\n const markPercentage = calculatePercentage(value, max, min);\n if (isRange) {\n return (\n markPercentage > progressPercentageRange[0] &&\n markPercentage < progressPercentageRange[1]\n );\n }\n return markPercentage < progressPercentage;\n };\n\n const checkIsMarkOverlapped = (value: number) => {\n const markPercentage = calculatePercentage(value, max, min);\n if (isRange) {\n return (\n markPercentage === progressPercentageRange[0] ||\n markPercentage === progressPercentageRange[1]\n );\n }\n return markPercentage === progressPercentage;\n };\n\n const hasMinTick = () => {\n return marks?.some((mark) => mark.value === min) || false;\n };\n\n const hasMaxTick = () => {\n return marks?.some((mark) => mark.value === max) || false;\n };\n\n return (\n <div\n className={clsx(withBaseName(), className, {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"dragging\")]: isDragging,\n [withBaseName(\"range\")]: isRange,\n [withBaseName(\"withMarks\")]: marks,\n [withBaseName(\"constrainLabelPosition\")]: constrainLabelPosition,\n [withBaseName(\"withTicks\")]: showTicks,\n })}\n data-testid=\"sliderTrack\"\n ref={ref}\n {...rest}\n >\n <div className={clsx(withBaseName(\"container\"))}>\n {minLabel && (\n <Text\n aria-hidden\n className={withBaseName(\"minLabel\")}\n color=\"secondary\"\n styleAs=\"label\"\n >\n {minLabel || format?.(min)}\n </Text>\n )}\n {/* Slider Track */}\n <div\n onPointerDown={handlePointerDown}\n className={withBaseName(\"wrapper\")}\n >\n <div\n className={clsx(withBaseName(\"rail\"), {\n [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n })}\n ref={sliderRef}\n style={\n {\n ...(progressPercentage !== undefined && {\n \"--slider-progressPercentage\": `${progressPercentage}%`,\n }),\n ...(progressPercentageRange?.[0] !== undefined && {\n \"--slider-progressPercentageStart\": `${progressPercentageRange[0]}%`,\n }),\n ...(progressPercentageRange?.[1] !== undefined && {\n \"--slider-progressPercentageEnd\": `${progressPercentageRange[1]}%`,\n }),\n } as React.CSSProperties\n }\n >\n {isRange && <div className={clsx(withBaseName(\"fill\"))} />}\n {children}\n </div>\n {/* Ticks */}\n {marks && showTicks && (\n <div className={withBaseName(\"ticks\")}>\n {marks.map(({ value }) => (\n <span\n key={`${value}-tick`}\n style={{\n left: `${calculateMarkPosition(value, max, min)}%`,\n }}\n className={clsx(\n withBaseName(\"tick\"),\n {\n [withBaseName(\"tickSelected\")]:\n checkIsMarkSelected(value),\n },\n {\n [withBaseName(\"tickHidden\")]:\n checkIsMarkOverlapped(value),\n },\n )}\n />\n ))}\n </div>\n )}\n {/* Marks */}\n {marks && (\n <div className={withBaseName(\"marks\")}>\n {marks.map(({ label, value }) => (\n <span\n data-testid=\"mark\"\n key={`${value}-mark`}\n className={withBaseName(\"markLabel\")}\n style={{\n left: `${calculateMarkPosition(value, max, min)}%`,\n }}\n >\n {label}\n </span>\n ))}\n </div>\n )}\n </div>\n {maxLabel && (\n <Text\n aria-hidden\n className={withBaseName(\"maxLabel\")}\n color=\"secondary\"\n styleAs=\"label\"\n >\n {maxLabel || format?.(max)}\n </Text>\n )}\n </div>\n </div>\n );\n },\n);\n"],"names":["SliderTrack","sliderTrackCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type Ref } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTrackCss from \"./SliderTrack.css\";\nimport { calculateMarkPosition, calculatePercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\ninterface SliderTrackProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n children: React.ReactNode;\n constrainLabelPosition?: boolean;\n disabled: boolean;\n showTicks?: boolean;\n format?: (value: number) => string | number;\n handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n isDragging: boolean;\n isRange?: boolean;\n marks?: { label: string; value: number }[];\n max: number;\n maxLabel?: number | string;\n min: number;\n minLabel?: number | string;\n progressPercentage?: number;\n progressPercentageRange?: [number, number];\n sliderRef: Ref<HTMLDivElement>;\n}\n\nexport const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(\n function SliderTrack(\n {\n children,\n className,\n constrainLabelPosition = false,\n disabled,\n showTicks,\n format,\n handlePointerDown,\n isDragging,\n isRange = false,\n marks,\n max,\n maxLabel,\n min,\n minLabel,\n progressPercentage = 0,\n progressPercentageRange = [0, 0],\n sliderRef,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-slider-track\",\n css: sliderTrackCss,\n window: targetWindow,\n });\n\n const checkIsMarkSelected = (value: number) => {\n const markPercentage = calculatePercentage(value, max, min);\n if (isRange) {\n return (\n markPercentage > progressPercentageRange[0] &&\n markPercentage < progressPercentageRange[1]\n );\n }\n return markPercentage < progressPercentage;\n };\n\n const checkIsMarkOverlapped = (value: number) => {\n const markPercentage = calculatePercentage(value, max, min);\n if (isRange) {\n return (\n markPercentage === progressPercentageRange[0] ||\n markPercentage === progressPercentageRange[1]\n );\n }\n return markPercentage === progressPercentage;\n };\n\n const hasMinTick = () => {\n return marks?.some((mark) => mark.value === min) || false;\n };\n\n const hasMaxTick = () => {\n return marks?.some((mark) => mark.value === max) || false;\n };\n\n return (\n <div\n className={clsx(withBaseName(), className, {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"dragging\")]: isDragging,\n [withBaseName(\"range\")]: isRange,\n [withBaseName(\"withMarks\")]: marks,\n [withBaseName(\"constrainLabelPosition\")]: constrainLabelPosition,\n [withBaseName(\"withTicks\")]: showTicks,\n })}\n data-testid=\"sliderTrack\"\n ref={ref}\n {...rest}\n >\n <div className={clsx(withBaseName(\"container\"))}>\n {minLabel && (\n <Text\n aria-hidden\n className={withBaseName(\"minLabel\")}\n color=\"secondary\"\n styleAs=\"label\"\n >\n {minLabel || format?.(min)}\n </Text>\n )}\n {/* Slider Track */}\n <div\n onPointerDown={handlePointerDown}\n className={withBaseName(\"wrapper\")}\n >\n <div\n className={clsx(withBaseName(\"rail\"), {\n [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n })}\n ref={sliderRef}\n style={\n {\n ...(progressPercentage !== undefined && {\n \"--slider-progressPercentage\": `${progressPercentage}%`,\n }),\n ...(progressPercentageRange?.[0] !== undefined && {\n \"--slider-progressPercentageStart\": `${progressPercentageRange[0]}%`,\n }),\n ...(progressPercentageRange?.[1] !== undefined && {\n \"--slider-progressPercentageEnd\": `${progressPercentageRange[1]}%`,\n }),\n } as React.CSSProperties\n }\n >\n {isRange && <div className={clsx(withBaseName(\"fill\"))} />}\n {children}\n </div>\n {/* Ticks */}\n {marks && showTicks && (\n <div className={withBaseName(\"ticks\")}>\n {marks.map(({ value }) => (\n <span\n key={`${value}-tick`}\n style={{\n left: `${calculateMarkPosition(value, max, min)}%`,\n }}\n className={clsx(\n withBaseName(\"tick\"),\n {\n [withBaseName(\"tickSelected\")]:\n checkIsMarkSelected(value),\n },\n {\n [withBaseName(\"tickHidden\")]:\n checkIsMarkOverlapped(value),\n },\n )}\n />\n ))}\n </div>\n )}\n {/* Marks */}\n {marks && (\n <div className={withBaseName(\"marks\")}>\n {marks.map(({ label, value }) => (\n <span\n data-testid=\"mark\"\n key={`${value}-mark`}\n className={withBaseName(\"markLabel\")}\n style={{\n left: `${calculateMarkPosition(value, max, min)}%`,\n }}\n >\n {label}\n </span>\n ))}\n </div>\n )}\n </div>\n {maxLabel && (\n <Text\n aria-hidden\n className={withBaseName(\"maxLabel\")}\n color=\"secondary\"\n styleAs=\"label\"\n >\n {maxLabel || format?.(max)}\n </Text>\n )}\n </div>\n </div>\n );\n },\n);\n"],"names":["SliderTrack","sliderTrackCss"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRangeSliderThumb.js","sources":["../src/slider/internal/useRangeSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type Dispatch,\n type RefObject,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n decimalPlaces: number;\n handleInputChange: (\n event: ChangeEvent<HTMLInputElement>,\n thumbIndex: number,\n ) => void;\n inputRefs: RefObject<HTMLInputElement>[];\n marks?: { label: string; value: number }[];\n onChange?: (event: Event, value: [number, number]) => void;\n onChangeEnd?: (event: Event, value: [number, number]) => void;\n restrictToMarks?: boolean;\n setValue: Dispatch<SetStateAction<[number, number]>>;\n stepMultiplier: number;\n value: [number, number];\n};\n\nexport const useRangeSliderThumb = ({\n decimalPlaces,\n handleInputChange,\n inputRefs,\n marks,\n min = 0,\n max = 10,\n step = 1,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n value,\n}: UseRangeSliderThumbProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const [isFocusVisible, setIsFocusVisible] = useState(false);\n const [thumbIndexState, setIsThumbIndex] = useState<number>(0);\n const lastValueRef = useRef<[number, number]>(value);\n const sliderRef = useRef<HTMLDivElement>(null);\n const targetWindow = useWindow();\n\n const preventThumbOverlap = useCallback(\n (currentValue: number, value: [number, number], thumbIndex: number) => {\n const values = [...value] as [number, number];\n if (thumbIndex === 0 && currentValue >= values[1]) {\n values[0] = values[1];\n } else if (thumbIndex === 1 && currentValue <= values[0]) {\n values[1] = values[0];\n } else {\n values[thumbIndex] = currentValue;\n }\n return values;\n },\n [],\n );\n\n const handlePointerMove = useCallback(\n (event: PointerEvent) => {\n if (!sliderRef.current) return;\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined) return;\n const newValues = preventThumbOverlap(\n newValue,\n value as [number, number],\n thumbIndexState,\n );\n\n if (\n newValues[0] !== lastValueRef.current[0] ||\n newValues[1] !== lastValueRef.current[1]\n ) {\n lastValueRef.current = newValues;\n setValue(newValues);\n onChange?.(event, newValues);\n }\n },\n [\n decimalPlaces,\n marks,\n max,\n min,\n step,\n preventThumbOverlap,\n restrictToMarks,\n value,\n thumbIndexState,\n setValue,\n onChange,\n ],\n );\n\n const handleDragEnd = useCallback(\n (event: Event) => {\n setIsDragging(false);\n setIsFocusVisible(false);\n onChangeEnd?.(event, lastValueRef.current);\n },\n [onChangeEnd],\n );\n\n useEffect(() => {\n if (isDragging) {\n targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.addEventListener(\"blur\", handleDragEnd);\n targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n };\n }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n event.preventDefault();\n // To prevent the pointerdown event from bubbling up to the slider track\n // and triggering its pointerdown event\n event.stopPropagation();\n\n inputRefs[thumbIndex].current?.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n if (thumbIndex !== undefined) {\n setIsThumbIndex(thumbIndex);\n }\n },\n [inputRefs],\n );\n\n const handlePointerDownOnTrack = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n setIsDragging(true);\n\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n let closestThumbIndex = 0;\n\n if (newValue === undefined) return;\n const newValues = [...value] as [number, number];\n // Find nearest thumb\n const distanceToThumb0 = Math.abs(newValue - newValues[0]);\n const distanceToThumb1 = Math.abs(newValue - newValues[1]);\n if (distanceToThumb0 > distanceToThumb1) {\n // Move the second thumb\n newValues[1] = newValue;\n closestThumbIndex = 1;\n } else if (distanceToThumb0 < distanceToThumb1) {\n // Move the first thumb\n newValues[0] = newValue;\n closestThumbIndex = 0;\n } else {\n // If distances are equal, determine based on the click position\n if (newValue < newValues[0]) {\n // Clicked position is before both thumbs, move the first thumb\n newValues[0] = newValue;\n closestThumbIndex = 0;\n } else if (newValue > newValues[1]) {\n // Clicked position is after both thumbs, move the second thumb\n newValues[1] = newValue;\n closestThumbIndex = 1;\n } else {\n // Clicked position is between the thumbs, move the first thumb\n newValues[0] = newValue;\n closestThumbIndex = 0;\n }\n }\n setIsThumbIndex(closestThumbIndex);\n inputRefs[closestThumbIndex].current?.focus();\n setIsFocusVisible(false);\n\n if (\n newValues[0] !== lastValueRef.current[0] ||\n newValues[1] !== lastValueRef.current[1]\n ) {\n lastValueRef.current = newValues;\n setValue(newValues);\n onChange?.(event.nativeEvent, newValues);\n }\n },\n [\n decimalPlaces,\n marks,\n value,\n max,\n min,\n inputRefs,\n onChange,\n restrictToMarks,\n setValue,\n step,\n ],\n );\n\n const handleKeydownOnThumb = useCallback(\n (event: React.KeyboardEvent, thumbIndex: number) => {\n const newValue = getKeyboardValue(\n event,\n value[thumbIndex],\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n );\n if (\n newValue === undefined ||\n newValue === lastValueRef.current[thumbIndex]\n ) {\n return;\n }\n setIsFocusVisible(true);\n lastValueRef.current[thumbIndex] = newValue;\n handleInputChange(\n {\n target: { value: newValue.toString() },\n } as ChangeEvent<HTMLInputElement>,\n thumbIndex,\n );\n },\n [\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n handleInputChange,\n ],\n );\n\n const handleFocus = (thumbIndex: number) => {\n setIsThumbIndex(thumbIndex);\n setIsFocusVisible(true);\n };\n\n const handleBlur = (thumbIndex: number) => {\n setIsThumbIndex(thumbIndex);\n setIsFocusVisible(false);\n };\n\n return {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n preventThumbOverlap,\n sliderRef,\n thumbIndexState,\n };\n};\n"],"names":["value"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useRangeSliderThumb.js","sources":["../src/slider/internal/useRangeSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type Dispatch,\n type RefObject,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseRangeSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n decimalPlaces: number;\n handleInputChange: (\n event: ChangeEvent<HTMLInputElement>,\n thumbIndex: number,\n ) => void;\n inputRefs: RefObject<HTMLInputElement | null>[];\n marks?: { label: string; value: number }[];\n onChange?: (event: Event, value: [number, number]) => void;\n onChangeEnd?: (event: Event, value: [number, number]) => void;\n restrictToMarks?: boolean;\n setValue: Dispatch<SetStateAction<[number, number]>>;\n stepMultiplier: number;\n value: [number, number];\n};\n\nexport const useRangeSliderThumb = ({\n decimalPlaces,\n handleInputChange,\n inputRefs,\n marks,\n min = 0,\n max = 10,\n step = 1,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n value,\n}: UseRangeSliderThumbProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const [isFocusVisible, setIsFocusVisible] = useState(false);\n const [thumbIndexState, setIsThumbIndex] = useState<number>(0);\n const lastValueRef = useRef<[number, number]>(value);\n const sliderRef = useRef<HTMLDivElement>(null);\n const targetWindow = useWindow();\n\n const preventThumbOverlap = useCallback(\n (currentValue: number, value: [number, number], thumbIndex: number) => {\n const values = [...value] as [number, number];\n if (thumbIndex === 0 && currentValue >= values[1]) {\n values[0] = values[1];\n } else if (thumbIndex === 1 && currentValue <= values[0]) {\n values[1] = values[0];\n } else {\n values[thumbIndex] = currentValue;\n }\n return values;\n },\n [],\n );\n\n const handlePointerMove = useCallback(\n (event: PointerEvent) => {\n if (!sliderRef.current) return;\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined) return;\n const newValues = preventThumbOverlap(\n newValue,\n value as [number, number],\n thumbIndexState,\n );\n\n if (\n newValues[0] !== lastValueRef.current[0] ||\n newValues[1] !== lastValueRef.current[1]\n ) {\n lastValueRef.current = newValues;\n setValue(newValues);\n onChange?.(event, newValues);\n }\n },\n [\n decimalPlaces,\n marks,\n max,\n min,\n step,\n preventThumbOverlap,\n restrictToMarks,\n value,\n thumbIndexState,\n setValue,\n onChange,\n ],\n );\n\n const handleDragEnd = useCallback(\n (event: Event) => {\n setIsDragging(false);\n setIsFocusVisible(false);\n onChangeEnd?.(event, lastValueRef.current);\n },\n [onChangeEnd],\n );\n\n useEffect(() => {\n if (isDragging) {\n targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.addEventListener(\"blur\", handleDragEnd);\n targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n };\n }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>, thumbIndex: number) => {\n event.preventDefault();\n // To prevent the pointerdown event from bubbling up to the slider track\n // and triggering its pointerdown event\n event.stopPropagation();\n\n inputRefs[thumbIndex].current?.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n if (thumbIndex !== undefined) {\n setIsThumbIndex(thumbIndex);\n }\n },\n [inputRefs],\n );\n\n const handlePointerDownOnTrack = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n setIsDragging(true);\n\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n let closestThumbIndex = 0;\n\n if (newValue === undefined) return;\n const newValues = [...value] as [number, number];\n // Find nearest thumb\n const distanceToThumb0 = Math.abs(newValue - newValues[0]);\n const distanceToThumb1 = Math.abs(newValue - newValues[1]);\n if (distanceToThumb0 > distanceToThumb1) {\n // Move the second thumb\n newValues[1] = newValue;\n closestThumbIndex = 1;\n } else if (distanceToThumb0 < distanceToThumb1) {\n // Move the first thumb\n newValues[0] = newValue;\n closestThumbIndex = 0;\n } else {\n // If distances are equal, determine based on the click position\n if (newValue < newValues[0]) {\n // Clicked position is before both thumbs, move the first thumb\n newValues[0] = newValue;\n closestThumbIndex = 0;\n } else if (newValue > newValues[1]) {\n // Clicked position is after both thumbs, move the second thumb\n newValues[1] = newValue;\n closestThumbIndex = 1;\n } else {\n // Clicked position is between the thumbs, move the first thumb\n newValues[0] = newValue;\n closestThumbIndex = 0;\n }\n }\n setIsThumbIndex(closestThumbIndex);\n inputRefs[closestThumbIndex].current?.focus();\n setIsFocusVisible(false);\n\n if (\n newValues[0] !== lastValueRef.current[0] ||\n newValues[1] !== lastValueRef.current[1]\n ) {\n lastValueRef.current = newValues;\n setValue(newValues);\n onChange?.(event.nativeEvent, newValues);\n }\n },\n [\n decimalPlaces,\n marks,\n value,\n max,\n min,\n inputRefs,\n onChange,\n restrictToMarks,\n setValue,\n step,\n ],\n );\n\n const handleKeydownOnThumb = useCallback(\n (event: React.KeyboardEvent, thumbIndex: number) => {\n const newValue = getKeyboardValue(\n event,\n value[thumbIndex],\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n );\n if (\n newValue === undefined ||\n newValue === lastValueRef.current[thumbIndex]\n ) {\n return;\n }\n setIsFocusVisible(true);\n lastValueRef.current[thumbIndex] = newValue;\n handleInputChange(\n {\n target: { value: newValue.toString() },\n } as ChangeEvent<HTMLInputElement>,\n thumbIndex,\n );\n },\n [\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n handleInputChange,\n ],\n );\n\n const handleFocus = (thumbIndex: number) => {\n setIsThumbIndex(thumbIndex);\n setIsFocusVisible(true);\n };\n\n const handleBlur = (thumbIndex: number) => {\n setIsThumbIndex(thumbIndex);\n setIsFocusVisible(false);\n };\n\n return {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n preventThumbOverlap,\n sliderRef,\n thumbIndexState,\n };\n};\n"],"names":["value"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type Dispatch,\n type RefObject,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n decimalPlaces: number;\n handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n inputRef: RefObject<HTMLInputElement>;\n marks?: { label: string; value: number }[];\n onChange?: (event: Event, value: number) => void;\n onChangeEnd?: (event: Event, value: number) => void;\n restrictToMarks?: boolean;\n setValue: Dispatch<SetStateAction<number>>;\n stepMultiplier: number;\n value: number;\n};\n\nexport const useSliderThumb = ({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min = 0,\n max = 10,\n step = 1,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n value,\n}: UseSliderThumbProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const [isFocusVisible, setIsFocusVisible] = useState(false);\n const lastValueRef = useRef<number>(value);\n const sliderRef = useRef<HTMLDivElement>(null);\n const targetWindow = useWindow();\n\n const handlePointerMove = useCallback(\n (event: PointerEvent) => {\n if (!sliderRef.current) return;\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event, newValue);\n },\n [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n );\n\n const handleDragEnd = useCallback(\n (event: Event) => {\n setIsDragging(false);\n setIsFocusVisible(false);\n onChangeEnd?.(event, lastValueRef.current);\n },\n [onChangeEnd],\n );\n\n useEffect(() => {\n if (isDragging) {\n targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.addEventListener(\"blur\", handleDragEnd);\n targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n }\n\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n };\n }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n },\n [inputRef],\n );\n\n const handlePointerDownOnTrack = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event.nativeEvent, newValue);\n },\n [\n decimalPlaces,\n inputRef,\n marks,\n max,\n min,\n onChange,\n restrictToMarks,\n setValue,\n step,\n ],\n );\n\n const handleKeydownOnThumb = useCallback(\n (event: React.KeyboardEvent) => {\n const newValue = getKeyboardValue(\n event,\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n setIsFocusVisible(true);\n lastValueRef.current = newValue;\n handleInputChange({\n target: { value: newValue.toString() },\n } as ChangeEvent<HTMLInputElement>);\n },\n [\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n handleInputChange,\n ],\n );\n\n const handleFocus = () => setIsFocusVisible(true);\n const handleBlur = () => setIsFocusVisible(false);\n\n return {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n type ChangeEvent,\n type Dispatch,\n type RefObject,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n decimalPlaces: number;\n handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n inputRef: RefObject<HTMLInputElement | null>;\n marks?: { label: string; value: number }[];\n onChange?: (event: Event, value: number) => void;\n onChangeEnd?: (event: Event, value: number) => void;\n restrictToMarks?: boolean;\n setValue: Dispatch<SetStateAction<number>>;\n stepMultiplier: number;\n value: number;\n};\n\nexport const useSliderThumb = ({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min = 0,\n max = 10,\n step = 1,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n value,\n}: UseSliderThumbProps) => {\n const [isDragging, setIsDragging] = useState(false);\n const [isFocusVisible, setIsFocusVisible] = useState(false);\n const lastValueRef = useRef<number>(value);\n const sliderRef = useRef<HTMLDivElement>(null);\n const targetWindow = useWindow();\n\n const handlePointerMove = useCallback(\n (event: PointerEvent) => {\n if (!sliderRef.current) return;\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event, newValue);\n },\n [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n );\n\n const handleDragEnd = useCallback(\n (event: Event) => {\n setIsDragging(false);\n setIsFocusVisible(false);\n onChangeEnd?.(event, lastValueRef.current);\n },\n [onChangeEnd],\n );\n\n useEffect(() => {\n if (isDragging) {\n targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.addEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.addEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.addEventListener(\"blur\", handleDragEnd);\n targetWindow?.addEventListener(\"contextmenu\", handleDragEnd);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n }\n\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handleDragEnd);\n targetWindow?.removeEventListener(\"pointercancel\", handleDragEnd);\n targetWindow?.removeEventListener(\"blur\", handleDragEnd);\n targetWindow?.removeEventListener(\"contextmenu\", handleDragEnd);\n };\n }, [isDragging, targetWindow, handlePointerMove, handleDragEnd]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n event.stopPropagation();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n },\n [inputRef],\n );\n\n const handlePointerDownOnTrack = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\n event.preventDefault();\n if (inputRef.current) inputRef.current.focus();\n setIsDragging(true);\n setIsFocusVisible(false);\n const newValue = getClickedPosition(\n sliderRef,\n event.clientX,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n lastValueRef.current = newValue;\n setValue(newValue);\n onChange?.(event.nativeEvent, newValue);\n },\n [\n decimalPlaces,\n inputRef,\n marks,\n max,\n min,\n onChange,\n restrictToMarks,\n setValue,\n step,\n ],\n );\n\n const handleKeydownOnThumb = useCallback(\n (event: React.KeyboardEvent) => {\n const newValue = getKeyboardValue(\n event,\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n );\n if (newValue === undefined || lastValueRef.current === newValue) {\n return;\n }\n setIsFocusVisible(true);\n lastValueRef.current = newValue;\n handleInputChange({\n target: { value: newValue.toString() },\n } as ChangeEvent<HTMLInputElement>);\n },\n [\n value,\n step,\n stepMultiplier,\n max,\n min,\n restrictToMarks,\n marks,\n handleInputChange,\n ],\n );\n\n const handleFocus = () => setIsFocusVisible(true);\n const handleBlur = () => setIsFocusVisible(false);\n\n return {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n value: number | string,\n max: number,\n min: number,\n) => {\n if (min === max) {\n return 0;\n }\n const clampedValue = Number.isNaN(toFloat(value))\n ? min\n : Math.min(Math.max(toFloat(value), min), max);\n const markPosition = ((clampedValue - min) / (max - min)) * 100;\n return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n value: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n if (Number.isNaN(value)) {\n return min;\n }\n // Clamp the value between min and max\n const clampedValue = Math.min(Math.max(value, min), max);\n if (restrictToMarks && marks) {\n // Find the closest mark value\n let closestMark = marks[0].value;\n let smallestDifference = Math.abs(clampedValue - closestMark);\n for (let i = 1; i < marks.length; i++) {\n const currentDifference = Math.abs(clampedValue - marks[i].value);\n if (currentDifference < smallestDifference) {\n smallestDifference = currentDifference;\n closestMark = marks[i].value;\n }\n }\n return closestMark;\n }\n // Round to the nearest multiple of the step\n let roundedValue = Math.round(clampedValue / step) * step;\n // Ensure the rounded value does not exceed max or min\n if (roundedValue > max) {\n roundedValue = max;\n } else if (roundedValue < min) {\n roundedValue = min;\n }\n return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n range: [number, number],\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n let [start, end] = range;\n\n if (Number.isNaN(start)) {\n start = min;\n }\n if (Number.isNaN(end)) {\n end = max;\n }\n if (start > end) {\n [start, end] = [end, start];\n }\n start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n sliderRef: RefObject<HTMLDivElement>,\n clientX: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { label: string; value: number }[],\n restrictToMarks?: boolean,\n) => {\n if (!sliderRef.current) return;\n\n const sliderRect = sliderRef.current.getBoundingClientRect();\n const rawValue =\n ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n const steppedValue = Math.round(rawValue / step) * step;\n return clamp(\n steppedValue,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n};\n\nexport const getKeyboardValue = (\n event: React.KeyboardEvent,\n value: number,\n step: number,\n stepMultiplier: number,\n max: number,\n min: number,\n restrictToMarks?: boolean,\n marks?: { label: string; value: number }[],\n) => {\n let newValue = value;\n\n if (restrictToMarks && marks && marks.length >= 1) {\n const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"PageUp\":\n if (currentIndex < marks.length - 1) {\n newValue = marks[currentIndex + 1].value;\n }\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n case \"PageDown\":\n if (currentIndex > 0) {\n newValue = marks[currentIndex - 1].value;\n }\n break;\n default:\n return newValue;\n }\n } else {\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowRight\":\n newValue = Math.min(value + step, max);\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n newValue = Math.max(value - step, min);\n break;\n case \"Home\":\n newValue = min;\n break;\n case \"End\":\n newValue = max;\n break;\n case \"PageUp\":\n newValue = Math.min(value + step * stepMultiplier, max);\n break;\n case \"PageDown\":\n newValue = Math.max(value - step * stepMultiplier, min);\n break;\n default:\n return newValue;\n }\n }\n\n event.preventDefault();\n return newValue;\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n value: number | string,\n max: number,\n min: number,\n) => {\n if (min === max) {\n return 0;\n }\n const clampedValue = Number.isNaN(toFloat(value))\n ? min\n : Math.min(Math.max(toFloat(value), min), max);\n const markPosition = ((clampedValue - min) / (max - min)) * 100;\n return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n value: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n if (Number.isNaN(value)) {\n return min;\n }\n // Clamp the value between min and max\n const clampedValue = Math.min(Math.max(value, min), max);\n if (restrictToMarks && marks) {\n // Find the closest mark value\n let closestMark = marks[0].value;\n let smallestDifference = Math.abs(clampedValue - closestMark);\n for (let i = 1; i < marks.length; i++) {\n const currentDifference = Math.abs(clampedValue - marks[i].value);\n if (currentDifference < smallestDifference) {\n smallestDifference = currentDifference;\n closestMark = marks[i].value;\n }\n }\n return closestMark;\n }\n // Round to the nearest multiple of the step\n let roundedValue = Math.round(clampedValue / step) * step;\n // Ensure the rounded value does not exceed max or min\n if (roundedValue > max) {\n roundedValue = max;\n } else if (roundedValue < min) {\n roundedValue = min;\n }\n return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n range: [number, number],\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { value: number; label: string }[],\n restrictToMarks?: boolean,\n) => {\n let [start, end] = range;\n\n if (Number.isNaN(start)) {\n start = min;\n }\n if (Number.isNaN(end)) {\n end = max;\n }\n if (start > end) {\n [start, end] = [end, start];\n }\n start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n sliderRef: RefObject<HTMLDivElement | null>,\n clientX: number,\n max: number,\n min: number,\n step: number,\n decimalPlaces: number,\n marks?: { label: string; value: number }[],\n restrictToMarks?: boolean,\n) => {\n if (!sliderRef.current) return;\n\n const sliderRect = sliderRef.current.getBoundingClientRect();\n const rawValue =\n ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n const steppedValue = Math.round(rawValue / step) * step;\n return clamp(\n steppedValue,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n};\n\nexport const getKeyboardValue = (\n event: React.KeyboardEvent,\n value: number,\n step: number,\n stepMultiplier: number,\n max: number,\n min: number,\n restrictToMarks?: boolean,\n marks?: { label: string; value: number }[],\n) => {\n let newValue = value;\n\n if (restrictToMarks && marks && marks.length >= 1) {\n const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowRight\":\n case \"PageUp\":\n if (currentIndex < marks.length - 1) {\n newValue = marks[currentIndex + 1].value;\n }\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n case \"PageDown\":\n if (currentIndex > 0) {\n newValue = marks[currentIndex - 1].value;\n }\n break;\n default:\n return newValue;\n }\n } else {\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowRight\":\n newValue = Math.min(value + step, max);\n break;\n case \"ArrowDown\":\n case \"ArrowLeft\":\n newValue = Math.max(value - step, min);\n break;\n case \"Home\":\n newValue = min;\n break;\n case \"End\":\n newValue = max;\n break;\n case \"PageUp\":\n newValue = Math.min(value + step * stepMultiplier, max);\n break;\n case \"PageDown\":\n newValue = Math.max(value - step * stepMultiplier, min);\n break;\n default:\n return newValue;\n }\n }\n\n event.preventDefault();\n return newValue;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ const Stepper = forwardRef(
|
|
|
18
18
|
const orientationContext = useContext(StepperOrientationContext);
|
|
19
19
|
const orientation = orientationProp || orientationContext;
|
|
20
20
|
useComponentCssInjection({
|
|
21
|
-
testId: "salt-
|
|
21
|
+
testId: "salt-stepper",
|
|
22
22
|
css: css_248z,
|
|
23
23
|
window: targetWindow
|
|
24
24
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport {\n StepperOrientationContext,\n StepperProvider,\n} from \"./internal/StepperProvider\";\nimport StepperCSS from \"./Stepper.css\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n /**\n * The orientation of the stepper: defaults to horizontal.\n */\n orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n function Stepper(\n { orientation: orientationProp, children, className, ...props },\n ref,\n ) {\n const targetWindow = useWindow();\n const orientationContext = useContext(StepperOrientationContext);\n const orientation = orientationProp || orientationContext;\n\n useComponentCssInjection({\n testId: \"salt-
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport {\n StepperOrientationContext,\n StepperProvider,\n} from \"./internal/StepperProvider\";\nimport StepperCSS from \"./Stepper.css\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n /**\n * The orientation of the stepper: defaults to horizontal.\n */\n orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n function Stepper(\n { orientation: orientationProp, children, className, ...props },\n ref,\n ) {\n const targetWindow = useWindow();\n const orientationContext = useContext(StepperOrientationContext);\n const orientation = orientationProp || orientationContext;\n\n useComponentCssInjection({\n testId: \"salt-stepper\",\n css: StepperCSS,\n window: targetWindow,\n });\n\n return (\n <StepperProvider orientation={orientation}>\n <ol\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n ref={ref}\n {...props}\n >\n {children}\n </ol>\n </StepperProvider>\n );\n },\n);\n"],"names":["Stepper","StepperCSS"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAWxC,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,SAASA,QAAAA,CACP,EAAE,WAAA,EAAa,eAAA,EAAiB,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAC9D,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,MAAM,kBAAA,GAAqB,WAAW,yBAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAA,IAAmB,kBAAA;AAEvC,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,mBAAgB,WAAA,EACf,QAAA,kBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltStepText-label {\n grid-area: label;\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n font-weight: var(--salt-text-fontWeight-
|
|
1
|
+
var css_248z = ".saltStepText-label {\n grid-area: label;\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n font-weight: var(--salt-text-fontWeight-bolder);\n}\n\n.saltStepText-description {\n grid-area: description;\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-bolder);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltStepper-vertical .saltStepText-description {\n padding-bottom: var(--salt-spacing-300);\n padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n color: var(--salt-status-error-foreground-informative);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=StepText.css.js.map
|
|
@@ -4,6 +4,8 @@ import { useWindow } from '@salt-ds/window';
|
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
5
|
import '../../text/Code.js';
|
|
6
6
|
import '../../text/Display.js';
|
|
7
|
+
import '../../text/Editorial.js';
|
|
8
|
+
import '../../text/Eyebrow.js';
|
|
7
9
|
import '../../text/Headings.js';
|
|
8
10
|
import '../../text/Label.js';
|
|
9
11
|
import { Text } from '../../text/Text.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n id,\n purpose,\n className,\n styleAs = \"label\",\n children,\n ...props\n}: StepTextProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-text\",\n css: stepTextCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n className={clsx(withBaseName(), withBaseName(purpose), className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n"],"names":["stepTextCSS"],"mappings":"
|
|
1
|
+
{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n id,\n purpose,\n className,\n styleAs = \"label\",\n children,\n ...props\n}: StepTextProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-text\",\n css: stepTextCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n className={clsx(withBaseName(), withBaseName(purpose), className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n"],"names":["stepTextCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltSwitch {\n display: flex;\n width: fit-content;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground);\n\n cursor: var(--salt-cursor-disabled);\n opacity: 0.4;\n}\n\n.saltSwitch-track {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n border-radius: var(--salt-palette-corner-weak, 0);\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n box-sizing: border-box;\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n}\n\n.saltSwitch-readOnly {\n cursor: var(--salt-cursor-text);\n}\n\n.saltSwitch-readOnly .saltSwitch-track,\n.saltSwitch-readOnly:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltSwitch-readOnly:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-readonly);\n}\n\n.saltSwitch-readOnly .saltSwitch-thumb,\n.saltSwitch-readOnly.saltSwitch-checked .saltSwitch-thumb {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-dashed) var(--salt-selectable-borderColor-readonly);\n}\n\n.saltSwitch-readOnly .saltSwitch-input:focus-visible + .saltSwitch-track,\n.saltSwitch-readOnly .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n\n.salt-density-high .saltSwitch-readOnly .saltSwitch-thumb {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-dashed) var(--salt-selectable-borderColor-readonly);\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n}\n";
|
|
1
|
+
var css_248z = ".saltSwitch {\n display: flex;\n width: fit-content;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground);\n\n cursor: var(--salt-cursor-disabled);\n opacity: 0.4;\n}\n\n.saltSwitch-track {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n border-radius: var(--salt-palette-corner-weak, 0);\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n box-sizing: border-box;\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n}\n\n.saltSwitch-readOnly {\n cursor: var(--salt-cursor-text);\n}\n\n.saltSwitch-readOnly .saltSwitch-track,\n.saltSwitch-readOnly:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n\n.saltSwitch-readOnly:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-readonly);\n}\n\n.saltSwitch-readOnly .saltSwitch-thumb,\n.saltSwitch-readOnly.saltSwitch-checked .saltSwitch-thumb {\n background: var(--salt-container-primary-background);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-dashed) var(--salt-selectable-borderColor-readonly);\n}\n\n.saltSwitch-readOnly .saltSwitch-input:focus-visible + .saltSwitch-track,\n.saltSwitch-readOnly .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n\n.salt-density-high .saltSwitch-readOnly .saltSwitch-thumb {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-dashed) var(--salt-selectable-borderColor-readonly);\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Switch.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Table: Main css class */\n.saltTable {\n --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n}\n\n.saltTable-primary {\n --table-background: var(--salt-container-primary-background);\n}\n\n.saltTable-secondary {\n --table-background: var(--salt-container-secondary-background);\n}\n\n.saltTable-tertiary {\n --table-background: var(--salt-container-tertiary-background);\n}\n\n.saltTable-divider-primary {\n --table-divider-color: var(--salt-separable-primary-borderColor);\n}\n\n.saltTable-divider-secondary {\n --table-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltTable-divider-tertiary {\n --table-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\n/* Zebra styling */\ntable.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable {\n border-spacing: 0;\n border-radius: var(--salt-palette-corner, 0);\n border-collapse: collapse;\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n width: 100%;\n}\n\n/* TR */\ntable.saltTable tr {\n background: var(--table-background);\n}\n\ntable.saltTable tbody tr {\n height: var(--table-row-height);\n min-height: var(--table-row-height);\n}\n\ntable.saltTable tbody tr:not(:last-child) {\n border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable.saltTable-divider-none tbody tr {\n --table-divider-color: transparent;\n}\n\n/* THead */\ntable.saltTable thead {\n border-start-start-radius: var(--salt-palette-corner);\n border-start-end-radius: var(--salt-palette-corner);\n color: var(--salt-content-secondary-foreground);\n height: var(--table-header-height);\n min-height: var(--table-header-height);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-
|
|
1
|
+
var css_248z = "/* Table: Main css class */\n.saltTable {\n --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n}\n\n.saltTable-primary {\n --table-background: var(--salt-container-primary-background);\n}\n\n.saltTable-secondary {\n --table-background: var(--salt-container-secondary-background);\n}\n\n.saltTable-tertiary {\n --table-background: var(--salt-container-tertiary-background);\n}\n\n.saltTable-divider-primary {\n --table-divider-color: var(--salt-separable-primary-borderColor);\n}\n\n.saltTable-divider-secondary {\n --table-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltTable-divider-tertiary {\n --table-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\n/* Zebra styling */\ntable.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {\n --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable {\n border-spacing: 0;\n border-radius: var(--salt-palette-corner, 0);\n border-collapse: collapse;\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n width: 100%;\n}\n\n/* TR */\ntable.saltTable tr {\n background: var(--table-background);\n}\n\ntable.saltTable tbody tr {\n height: var(--table-row-height);\n min-height: var(--table-row-height);\n}\n\ntable.saltTable tbody tr:not(:last-child) {\n border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable.saltTable-divider-none tbody tr {\n --table-divider-color: transparent;\n}\n\n/* THead */\ntable.saltTable thead {\n border-start-start-radius: var(--salt-palette-corner);\n border-start-end-radius: var(--salt-palette-corner);\n color: var(--salt-content-secondary-foreground);\n height: var(--table-header-height);\n min-height: var(--table-header-height);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-bolder);\n line-height: var(--salt-text-label-lineHeight);\n}\n\ntable.saltTable thead.saltTable-thead-sticky {\n position: sticky;\n top: 0;\n}\n\ntable.saltTable thead.saltTable-thead-primary tr {\n background: var(--salt-container-primary-background);\n}\n\ntable.saltTable thead.saltTable-thead-secondary tr {\n background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable thead.saltTable-thead-tertiary tr {\n background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable thead.saltTable-thead tr {\n border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable thead.saltTable-thead-divider-primary {\n --table-header-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-secondary {\n --table-header-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-tertiary {\n --table-header-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-none {\n --table-header-divider-color: transparent;\n}\n\n/* TFoot */\ntable.saltTable tfoot {\n border-end-start-radius: var(--salt-palette-corner);\n border-end-end-radius: var(--salt-palette-corner);\n color: var(--salt-content-primary-foreground);\n height: var(--table-footer-height);\n min-height: var(--table-footer-height);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-weight: var(--salt-text-fontWeight-bolder);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-sticky {\n position: sticky;\n bottom: 0;\n}\n\ntable.saltTable tfoot.saltTable-tfoot tr {\n border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-primary tr {\n background: var(--salt-container-primary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-secondary tr {\n background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-tertiary tr {\n background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-primary tr {\n --table-footer-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-secondary tr {\n --table-footer-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {\n --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-none tr {\n --table-footer-divider-color: transparent;\n}\n\n/* TH */\ntable.saltTable th {\n padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));\n position: relative;\n text-align: start;\n vertical-align: top;\n font-weight: inherit;\n}\n\ntable.saltTable th.saltTable-th-align-left {\n text-align: start;\n}\n\ntable.saltTable th.saltTable-th-align-right {\n text-align: end;\n}\n\ntable.saltTable tbody th[scope=\"row\"] {\n font-weight: var(--salt-text-fontWeight-bolder);\n line-height: var(--salt-text-lineHeight);\n}\n\ntable.saltTable th + th::before {\n background: var(--salt-separable-tertiary-borderColor);\n content: \"\";\n position: absolute;\n z-index: 1;\n display: block;\n width: var(--salt-size-fixed-100);\n height: calc(100% - var(--salt-spacing-200));\n left: 0;\n top: var(--salt-spacing-100);\n}\n\n/* TD */\ntable.saltTable td {\n height: 100%;\n vertical-align: top;\n padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n}\n\ntable.saltTable td.saltTable-td-align-left {\n text-align: start;\n}\n\ntable.saltTable td.saltTable-td-align-right {\n text-align: end;\n}\n\n.saltTable-container {\n width: 100%;\n overflow: auto;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Table.css.js.map
|
package/dist-es/tabs/Tabs.js
CHANGED
|
@@ -72,7 +72,7 @@ const Tabs = forwardRef(
|
|
|
72
72
|
removalVersion,
|
|
73
73
|
getRemovedItems
|
|
74
74
|
} = useCollection({ targetWindow, wrap: true });
|
|
75
|
-
const activeTab = useRef();
|
|
75
|
+
const activeTab = useRef(void 0);
|
|
76
76
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
77
77
|
const [selected, setSelectedState] = useControlled({
|
|
78
78
|
controlled: value,
|
package/dist-es/tabs/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { type Item, TabsContext } from \"./internal/contexts/TabsContext\";\nimport { useOverflowSelectionState } from \"./internal/overflow/useOverflowSelectionState\";\nimport { useCollection } from \"./internal/registry/useCollection\";\nimport { useRenderedTabsRegistry } from \"./internal/registry/useRenderedTabsRegistry\";\nimport tabsCss from \"./Tabs.css\";\n\nexport interface TabsProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n children?: ReactNode;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: string;\n /**\n * The value. Use when the component is controlled.\n */\n value?: string;\n /**\n * Callback fired when the selection changes.\n * The event will be null when selection is moved automatically, such as when\n * the currently selected tab is removed and the next available tab is\n * selected.\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nfunction setValueIdMapEntry(\n map: Map<string, string>,\n value: string,\n id: string,\n) {\n if (map.get(value) === id) {\n return map;\n }\n\n const next = new Map(map);\n next.set(value, id);\n return next;\n}\n\nfunction removeValueIdMapEntry(\n map: Map<string, string>,\n value: string,\n id: string,\n) {\n if (map.get(value) !== id) {\n return map;\n }\n\n const next = new Map(map);\n next.delete(value);\n return next;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(\n function Tabs(props, ref) {\n const { className, children, value, defaultValue, onChange, ...rest } =\n props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs\",\n css: tabsCss,\n window: targetWindow,\n });\n\n const [valueToTabIdMap, setValueToIdMap] = useState(\n () => new Map<string, string>(),\n );\n const [valueToPanelIdMap, setValueToPanelIdMap] = useState(\n () => new Map<string, string>(),\n );\n const {\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n } = useRenderedTabsRegistry();\n\n const {\n registerItem,\n updateItem,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n } = useCollection({ targetWindow, wrap: true });\n\n const activeTab = useRef<Pick<Item, \"id\" | \"value\">>();\n\n const [menuOpen, setMenuOpen] = useState(false);\n\n const [selected, setSelectedState] = useControlled({\n controlled: value,\n default: defaultValue,\n name: \"Tabs\",\n state: \"selected\",\n });\n\n const commitSelection = useCallback(\n (event: SyntheticEvent | null, newValue: string) => {\n setSelectedState(newValue);\n if (selected !== newValue) {\n onChange?.(event, newValue);\n }\n },\n [onChange, selected],\n );\n const { selectionFromOverflowValueRef, setSelected } =\n useOverflowSelectionState({\n commitSelection,\n menuOpen,\n selected,\n setMenuOpen,\n });\n\n const registerTab = useCallback(\n (tab: Item) => {\n const cleanup = registerItem(tab);\n setValueToIdMap((map) => setValueIdMapEntry(map, tab.value, tab.id));\n\n return () => {\n cleanup();\n setValueToIdMap((map) =>\n removeValueIdMapEntry(map, tab.value, tab.id),\n );\n };\n },\n [registerItem],\n );\n\n const registerPanel = useCallback((id: string, value: string) => {\n setValueToPanelIdMap((map) => setValueIdMapEntry(map, value, id));\n return () => {\n setValueToPanelIdMap((map) => removeValueIdMapEntry(map, value, id));\n };\n }, []);\n\n const getPanelId = useCallback(\n (value: string) => {\n return valueToPanelIdMap.get(value);\n },\n [valueToPanelIdMap],\n );\n\n const getTabId = useCallback(\n (value: string) => {\n return valueToTabIdMap.get(value);\n },\n [valueToTabIdMap],\n );\n\n const context = useMemo(\n () => ({\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerTab,\n updateTab: updateItem,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n registerPanel,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n activeTab,\n selectionFromOverflowValueRef,\n menuOpen,\n setMenuOpen,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n }),\n [\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerPanel,\n registerTab,\n updateItem,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n menuOpen,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n selectionFromOverflowValueRef,\n ],\n );\n\n return (\n <TabsContext.Provider value={context}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n </TabsContext.Provider>\n );\n },\n);\n"],"names":["Tabs","tabsCss","value"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAE5C,SAAS,kBAAA,CACP,GAAA,EACA,KAAA,EACA,EAAA,EACA;AACA,EAAA,IAAI,GAAA,CAAI,GAAA,CAAI,KAAK,CAAA,KAAM,EAAA,EAAI;AACzB,IAAA,OAAO,GAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,GAAG,CAAA;AACxB,EAAA,IAAA,CAAK,GAAA,CAAI,OAAO,EAAE,CAAA;AAClB,EAAA,OAAO,IAAA;AACT;AAEA,SAAS,qBAAA,CACP,GAAA,EACA,KAAA,EACA,EAAA,EACA;AACA,EAAA,IAAI,GAAA,CAAI,GAAA,CAAI,KAAK,CAAA,KAAM,EAAA,EAAI;AACzB,IAAA,OAAO,GAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,GAAG,CAAA;AACxB,EAAA,IAAA,CAAK,OAAO,KAAK,CAAA;AACjB,EAAA,OAAO,IAAA;AACT;AAEO,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,SAASA,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM,EAAE,WAAW,QAAA,EAAU,KAAA,EAAO,cAAc,QAAA,EAAU,GAAG,MAAK,GAClE,KAAA;AACF,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,eAAA,EAAiB,eAAe,CAAA,GAAI,QAAA;AAAA,MACzC,0BAAU,GAAA;AAAoB,KAChC;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,QAAA;AAAA,MAChD,0BAAU,GAAA;AAAoB,KAChC;AACA,IAAA,MAAM;AAAA,MACJ,UAAA;AAAA,MACA,oBAAA;AAAA,MACA,oBAAA;AAAA,MACA,yBAAA;AAAA,MACA,mBAAA;AAAA,MACA,iBAAA;AAAA,MACA,cAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA,QACE,uBAAA,EAAwB;AAE5B,IAAA,MAAM;AAAA,MACJ,YAAA;AAAA,MACA,UAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,aAAA,CAAc,EAAE,YAAA,EAAc,IAAA,EAAM,MAAM,CAAA;AAE9C,IAAA,MAAM,YAAY,MAAA,EAAmC;AAErD,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,IAAA,MAAM,CAAC,QAAA,EAAU,gBAAgB,CAAA,GAAI,aAAA,CAAc;AAAA,MACjD,UAAA,EAAY,KAAA;AAAA,MACZ,OAAA,EAAS,YAAA;AAAA,MACT,IAAA,EAAM,MAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,MACtB,CAAC,OAA8B,QAAA,KAAqB;AAClD,QAAA,gBAAA,CAAiB,QAAQ,CAAA;AACzB,QAAA,IAAI,aAAa,QAAA,EAAU;AACzB,UAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,QAAA,CAAA;AAAA,QACpB;AAAA,MACF,CAAA;AAAA,MACA,CAAC,UAAU,QAAQ;AAAA,KACrB;AACA,IAAA,MAAM,EAAE,6BAAA,EAA+B,WAAA,EAAY,GACjD,yBAAA,CAA0B;AAAA,MACxB,eAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,MAAM,WAAA,GAAc,WAAA;AAAA,MAClB,CAAC,GAAA,KAAc;AACb,QAAA,MAAM,OAAA,GAAU,aAAa,GAAG,CAAA;AAChC,QAAA,eAAA,CAAgB,CAAC,QAAQ,kBAAA,CAAmB,GAAA,EAAK,IAAI,KAAA,EAAO,GAAA,CAAI,EAAE,CAAC,CAAA;AAEnE,QAAA,OAAO,MAAM;AACX,UAAA,OAAA,EAAQ;AACR,UAAA,eAAA;AAAA,YAAgB,CAAC,GAAA,KACf,qBAAA,CAAsB,KAAK,GAAA,CAAI,KAAA,EAAO,IAAI,EAAE;AAAA,WAC9C;AAAA,QACF,CAAA;AAAA,MACF,CAAA;AAAA,MACA,CAAC,YAAY;AAAA,KACf;AAEA,IAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,EAAA,EAAYC,MAAAA,KAAkB;AAC/D,MAAA,oBAAA,CAAqB,CAAC,GAAA,KAAQ,kBAAA,CAAmB,GAAA,EAAKA,MAAAA,EAAO,EAAE,CAAC,CAAA;AAChE,MAAA,OAAO,MAAM;AACX,QAAA,oBAAA,CAAqB,CAAC,GAAA,KAAQ,qBAAA,CAAsB,GAAA,EAAKA,MAAAA,EAAO,EAAE,CAAC,CAAA;AAAA,MACrE,CAAA;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,UAAA,GAAa,WAAA;AAAA,MACjB,CAACA,MAAAA,KAAkB;AACjB,QAAA,OAAO,iBAAA,CAAkB,IAAIA,MAAK,CAAA;AAAA,MACpC,CAAA;AAAA,MACA,CAAC,iBAAiB;AAAA,KACpB;AAEA,IAAA,MAAM,QAAA,GAAW,WAAA;AAAA,MACf,CAACA,MAAAA,KAAkB;AACjB,QAAA,OAAO,eAAA,CAAgB,IAAIA,MAAK,CAAA;AAAA,MAClC,CAAA;AAAA,MACA,CAAC,eAAe;AAAA,KAClB;AAEA,IAAA,MAAM,OAAA,GAAU,OAAA;AAAA,MACd,OAAO;AAAA,QACL,UAAA;AAAA,QACA,oBAAA;AAAA,QACA,oBAAA;AAAA,QACA,yBAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA,EAAW,UAAA;AAAA,QACX,mBAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,mBAAA;AAAA,QACA,YAAA;AAAA,QACA,aAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAA;AAAA,QACA,6BAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,cAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA;AAAA,QACE,UAAA;AAAA,QACA,oBAAA;AAAA,QACA,oBAAA;AAAA,QACA,yBAAA;AAAA,QACA,aAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAA;AAAA,QACA,mBAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAA;AAAA,QACA,mBAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,OAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,cAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,2BACG,WAAA,CAAY,QAAA,EAAZ,EAAqB,KAAA,EAAO,OAAA,EAC3B,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,KAAW,GAAG,IAAA,EAC5D,UACH,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../src/tabs/Tabs.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { type Item, TabsContext } from \"./internal/contexts/TabsContext\";\nimport { useOverflowSelectionState } from \"./internal/overflow/useOverflowSelectionState\";\nimport { useCollection } from \"./internal/registry/useCollection\";\nimport { useRenderedTabsRegistry } from \"./internal/registry/useRenderedTabsRegistry\";\nimport tabsCss from \"./Tabs.css\";\n\nexport interface TabsProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n children?: ReactNode;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: string;\n /**\n * The value. Use when the component is controlled.\n */\n value?: string;\n /**\n * Callback fired when the selection changes.\n * The event will be null when selection is moved automatically, such as when\n * the currently selected tab is removed and the next available tab is\n * selected.\n */\n onChange?: (event: SyntheticEvent | null, value: string) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltTabs\");\n\nfunction setValueIdMapEntry(\n map: Map<string, string>,\n value: string,\n id: string,\n) {\n if (map.get(value) === id) {\n return map;\n }\n\n const next = new Map(map);\n next.set(value, id);\n return next;\n}\n\nfunction removeValueIdMapEntry(\n map: Map<string, string>,\n value: string,\n id: string,\n) {\n if (map.get(value) !== id) {\n return map;\n }\n\n const next = new Map(map);\n next.delete(value);\n return next;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(\n function Tabs(props, ref) {\n const { className, children, value, defaultValue, onChange, ...rest } =\n props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tabs\",\n css: tabsCss,\n window: targetWindow,\n });\n\n const [valueToTabIdMap, setValueToIdMap] = useState(\n () => new Map<string, string>(),\n );\n const [valueToPanelIdMap, setValueToPanelIdMap] = useState(\n () => new Map<string, string>(),\n );\n const {\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n } = useRenderedTabsRegistry();\n\n const {\n registerItem,\n updateItem,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n } = useCollection({ targetWindow, wrap: true });\n\n const activeTab = useRef<Pick<Item, \"id\" | \"value\"> | undefined>(undefined);\n\n const [menuOpen, setMenuOpen] = useState(false);\n\n const [selected, setSelectedState] = useControlled({\n controlled: value,\n default: defaultValue,\n name: \"Tabs\",\n state: \"selected\",\n });\n\n const commitSelection = useCallback(\n (event: SyntheticEvent | null, newValue: string) => {\n setSelectedState(newValue);\n if (selected !== newValue) {\n onChange?.(event, newValue);\n }\n },\n [onChange, selected],\n );\n const { selectionFromOverflowValueRef, setSelected } =\n useOverflowSelectionState({\n commitSelection,\n menuOpen,\n selected,\n setMenuOpen,\n });\n\n const registerTab = useCallback(\n (tab: Item) => {\n const cleanup = registerItem(tab);\n setValueToIdMap((map) => setValueIdMapEntry(map, tab.value, tab.id));\n\n return () => {\n cleanup();\n setValueToIdMap((map) =>\n removeValueIdMapEntry(map, tab.value, tab.id),\n );\n };\n },\n [registerItem],\n );\n\n const registerPanel = useCallback((id: string, value: string) => {\n setValueToPanelIdMap((map) => setValueIdMapEntry(map, value, id));\n return () => {\n setValueToPanelIdMap((map) => removeValueIdMapEntry(map, value, id));\n };\n }, []);\n\n const getPanelId = useCallback(\n (value: string) => {\n return valueToPanelIdMap.get(value);\n },\n [valueToPanelIdMap],\n );\n\n const getTabId = useCallback(\n (value: string) => {\n return valueToTabIdMap.get(value);\n },\n [valueToTabIdMap],\n );\n\n const context = useMemo(\n () => ({\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerTab,\n updateTab: updateItem,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n registerPanel,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n activeTab,\n selectionFromOverflowValueRef,\n menuOpen,\n setMenuOpen,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n }),\n [\n renderMode,\n registerBootstrapTab,\n setBootstrapTabReady,\n setBootstrapOverflowReady,\n registerPanel,\n registerTab,\n updateItem,\n registerRenderedTab,\n updateRenderedTab,\n getRenderedTab,\n getRenderedTabOrder,\n renderedTabs,\n getPanelId,\n getTabId,\n selected,\n setSelected,\n item,\n getNext,\n getPrevious,\n getFirst,\n getLast,\n menuOpen,\n itemAt,\n getIndex,\n sortItems,\n removalVersion,\n getRemovedItems,\n selectionFromOverflowValueRef,\n ],\n );\n\n return (\n <TabsContext.Provider value={context}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n </TabsContext.Provider>\n );\n },\n);\n"],"names":["Tabs","tabsCss","value"],"mappings":"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"}
|