@salt-ds/core 1.48.0 → 1.49.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 +20 -0
- package/css/salt-core.css +8 -4
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnounce.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +46 -18
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/avatar/useIsHydrated.js +18 -0
- package/dist-cjs/avatar/useIsHydrated.js.map +1 -0
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-cjs/breakpoints/Breakpoints.js.map +1 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/button/useButton.js.map +1 -1
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/checkbox/internal/useCheckboxGroup.js.map +1 -1
- package/dist-cjs/collapsible/Collapsible.js.map +1 -1
- package/dist-cjs/collapsible/CollapsibleContext.js.map +1 -1
- package/dist-cjs/collapsible/CollapsiblePanel.js +3 -2
- package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -1
- package/dist-cjs/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogContext.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/divider/Divider.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/flex-layout/parseSpacing.js.map +1 -1
- package/dist-cjs/flow-layout/FlowLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js.map +1 -1
- 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.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/form-field-context/useFormFieldProps.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- 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.map +1 -1
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link/LinkAction.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- 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/ListControlState.js.map +1 -1
- package/dist-cjs/menu/Menu.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js.map +1 -1
- package/dist-cjs/menu/MenuGroup.js.map +1 -1
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuPanel.js.map +1 -1
- package/dist-cjs/menu/MenuPanelBase.js.map +1 -1
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/menu/MenuTriggerContext.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItemAction.js.map +1 -1
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/PaginationContext.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/pagination/usePagination.js.map +1 -1
- package/dist-cjs/pagination/usePaginationContext.js.map +1 -1
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/pill-input/useTruncatePills.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- 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/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/radio-button/internal/useRadioGroup.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-cjs/skip-link/SkipLink.js.map +1 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-cjs/slider/RangeSlider.js.map +1 -1
- package/dist-cjs/slider/Slider.js.map +1 -1
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -1
- 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/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/ErrorAdornment.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-adornment/SuccessAdornment.js.map +1 -1
- package/dist-cjs/status-adornment/WarningAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/status-indicator/ValidationStatus.js.map +1 -1
- package/dist-cjs/stepper/Step.js.map +1 -1
- package/dist-cjs/stepper/Stepper.js.map +1 -1
- package/dist-cjs/stepper/internal/StepConnector.js.map +1 -1
- package/dist-cjs/stepper/internal/StepExpandTrigger.js.map +1 -1
- package/dist-cjs/stepper/internal/StepIcon.js.map +1 -1
- package/dist-cjs/stepper/internal/StepScreenReaderOnly.js.map +1 -1
- package/dist-cjs/stepper/internal/StepText.js.map +1 -1
- package/dist-cjs/stepper/internal/StepperProvider.js.map +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/tag/Tag.js.map +1 -1
- package/dist-cjs/text/Code.js.map +1 -1
- package/dist-cjs/text/Display.js.map +1 -1
- package/dist-cjs/text/Headings.js.map +1 -1
- package/dist-cjs/text/Label.js.map +1 -1
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/text/TextAction.js.map +1 -1
- package/dist-cjs/text/TextNotation.js.map +1 -1
- package/dist-cjs/theme/Accent.js.map +1 -1
- package/dist-cjs/theme/ActionFont.js.map +1 -1
- package/dist-cjs/theme/Corner.js.map +1 -1
- package/dist-cjs/theme/Density.js.map +1 -1
- package/dist-cjs/theme/HeadingFont.js.map +1 -1
- package/dist-cjs/theme/Mode.js.map +1 -1
- package/dist-cjs/theme/Theme.js.map +1 -1
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- 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/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/capitalize.js.map +1 -1
- package/dist-cjs/utils/createChainedFunction.js.map +1 -1
- package/dist-cjs/utils/createContext.js.map +1 -1
- package/dist-cjs/utils/debounce.js.map +1 -1
- package/dist-cjs/utils/getRefFromChildren.js.map +1 -1
- package/dist-cjs/utils/makePrefixer.js.map +1 -1
- package/dist-cjs/utils/marginMiddleware.js.map +1 -1
- package/dist-cjs/utils/mergeProps.js.map +1 -1
- package/dist-cjs/utils/ownerDocument.js.map +1 -1
- package/dist-cjs/utils/ownerWindow.js.map +1 -1
- package/dist-cjs/utils/renderProps.js.map +1 -1
- package/dist-cjs/utils/setRef.js.map +1 -1
- package/dist-cjs/utils/useControlled.js.map +1 -1
- package/dist-cjs/utils/useEventCallback.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useForkRef.js.map +1 -1
- package/dist-cjs/utils/useId.js.map +1 -1
- package/dist-cjs/utils/useIsFocusVisible.js.map +1 -1
- package/dist-cjs/utils/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist-cjs/utils/usePreventScroll.js.map +1 -1
- package/dist-cjs/utils/usePrevious.js.map +1 -1
- package/dist-cjs/utils/useResizeObserver.js.map +1 -1
- package/dist-cjs/utils/useResponsiveProp.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/vertical-navigation/SubMenuContext.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigation.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItem.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnounce.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +47 -19
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/avatar/useIsHydrated.js +16 -0
- package/dist-es/avatar/useIsHydrated.js.map +1 -0
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-es/breakpoints/Breakpoints.js.map +1 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/button/useButton.js.map +1 -1
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/checkbox/internal/useCheckboxGroup.js.map +1 -1
- package/dist-es/collapsible/Collapsible.js.map +1 -1
- package/dist-es/collapsible/CollapsibleContext.js.map +1 -1
- package/dist-es/collapsible/CollapsiblePanel.js +4 -3
- package/dist-es/collapsible/CollapsiblePanel.js.map +1 -1
- package/dist-es/collapsible/CollapsibleTrigger.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogContext.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/divider/Divider.js.map +1 -1
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/flex-layout/parseSpacing.js.map +1 -1
- package/dist-es/flow-layout/FlowLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js.map +1 -1
- 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.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/form-field-context/useFormFieldProps.js.map +1 -1
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- 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.map +1 -1
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link/LinkAction.js.map +1 -1
- package/dist-es/link-card/LinkCard.js.map +1 -1
- 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/ListControlState.js.map +1 -1
- package/dist-es/menu/Menu.js.map +1 -1
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js.map +1 -1
- package/dist-es/menu/MenuGroup.js.map +1 -1
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuPanel.js.map +1 -1
- package/dist-es/menu/MenuPanelBase.js.map +1 -1
- package/dist-es/menu/MenuPanelContext.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/menu/MenuTriggerContext.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/navigation-item/NavigationItemAction.js.map +1 -1
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayHeader.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/PaginationContext.js.map +1 -1
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/pagination/usePagination.js.map +1 -1
- package/dist-es/pagination/usePaginationContext.js.map +1 -1
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/pill-input/useTruncatePills.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- 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/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/radio-button/internal/useRadioGroup.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-es/skip-link/SkipLink.js.map +1 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-es/slider/RangeSlider.js.map +1 -1
- package/dist-es/slider/Slider.js.map +1 -1
- package/dist-es/slider/internal/SliderThumb.js.map +1 -1
- package/dist-es/slider/internal/SliderTooltip.js.map +1 -1
- 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/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/ErrorAdornment.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-adornment/SuccessAdornment.js.map +1 -1
- package/dist-es/status-adornment/WarningAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/status-indicator/ValidationStatus.js.map +1 -1
- package/dist-es/stepper/Step.js.map +1 -1
- package/dist-es/stepper/Stepper.js.map +1 -1
- package/dist-es/stepper/internal/StepConnector.js.map +1 -1
- package/dist-es/stepper/internal/StepExpandTrigger.js.map +1 -1
- package/dist-es/stepper/internal/StepIcon.js.map +1 -1
- package/dist-es/stepper/internal/StepScreenReaderOnly.js.map +1 -1
- package/dist-es/stepper/internal/StepText.js.map +1 -1
- package/dist-es/stepper/internal/StepperProvider.js.map +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/tag/Tag.js.map +1 -1
- package/dist-es/text/Code.js.map +1 -1
- package/dist-es/text/Display.js.map +1 -1
- package/dist-es/text/Headings.js.map +1 -1
- package/dist-es/text/Label.js.map +1 -1
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/text/TextAction.js.map +1 -1
- package/dist-es/text/TextNotation.js.map +1 -1
- package/dist-es/theme/Accent.js.map +1 -1
- package/dist-es/theme/ActionFont.js.map +1 -1
- package/dist-es/theme/Corner.js.map +1 -1
- package/dist-es/theme/Density.js.map +1 -1
- package/dist-es/theme/HeadingFont.js.map +1 -1
- package/dist-es/theme/Mode.js.map +1 -1
- package/dist-es/theme/Theme.js.map +1 -1
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- 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/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/capitalize.js.map +1 -1
- package/dist-es/utils/createChainedFunction.js.map +1 -1
- package/dist-es/utils/createContext.js.map +1 -1
- package/dist-es/utils/debounce.js.map +1 -1
- package/dist-es/utils/getRefFromChildren.js.map +1 -1
- package/dist-es/utils/makePrefixer.js.map +1 -1
- package/dist-es/utils/marginMiddleware.js.map +1 -1
- package/dist-es/utils/mergeProps.js.map +1 -1
- package/dist-es/utils/ownerDocument.js.map +1 -1
- package/dist-es/utils/ownerWindow.js.map +1 -1
- package/dist-es/utils/renderProps.js.map +1 -1
- package/dist-es/utils/setRef.js.map +1 -1
- package/dist-es/utils/useControlled.js.map +1 -1
- package/dist-es/utils/useEventCallback.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useForkRef.js.map +1 -1
- package/dist-es/utils/useId.js.map +1 -1
- package/dist-es/utils/useIsFocusVisible.js.map +1 -1
- package/dist-es/utils/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist-es/utils/usePreventScroll.js.map +1 -1
- package/dist-es/utils/usePrevious.js.map +1 -1
- package/dist-es/utils/useResizeObserver.js.map +1 -1
- package/dist-es/utils/useResponsiveProp.js.map +1 -1
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/vertical-navigation/SubMenuContext.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigation.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItem.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/avatar/useAvatarImage.d.ts +3 -1
- package/dist-types/avatar/useIsHydrated.d.ts +1 -0
- package/dist-types/collapsible/CollapsiblePanel.d.ts +1 -1
- package/dist-types/file-drop-zone/FileDropZone.d.ts +1 -1
- package/dist-types/flex-layout/FlexLayout.d.ts +1 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n forwardRef,\n type HTMLAttributes,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n * @default false\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default min + (max - min) / 2,\n */\n defaultValue?: number;\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for the minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: number) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: number) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n min = 0,\n minLabel,\n max = 100,\n maxLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = min + (max - min) / 2,\n ...rest\n },\n ref,\n) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"value\",\n });\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRef = useRef<HTMLInputElement>(null);\n const value = clamp(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentage = calculatePercentage(toFloat(value), max, min);\n const lastValueRef = useRef<number>(value);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const parsedValue = toFloat(event.target.value);\n if (parsedValue !== lastValueRef.current) {\n setValue(parsedValue);\n onChange?.(event.nativeEvent, parsedValue);\n onChangeEnd?.(event.nativeEvent, parsedValue);\n lastValueRef.current = parsedValue;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n } = useSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n marks={marks}\n progressPercentage={progressPercentage}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuetext={ariaValueText}\n accessibleMaxText={accessibleMaxText}\n accessibleMinText={accessibleMinText}\n disabled={disabled}\n format={format}\n onBlur={handleBlur}\n onFocus={handleFocus}\n handleInputChange={handleInputChange}\n handlePointerDown={handlePointerDownOnThumb}\n handleKeydownOnThumb={handleKeydownOnThumb}\n inputRef={inputRef}\n isFocusVisible={isFocusVisible}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n offsetPercentage={`${progressPercentage}%`}\n restrictToMarks={restrictToMarks}\n sliderValue={value}\n showTooltip={showTooltip}\n step={step}\n stepMultiplier={stepMultiplier}\n trackDragging={isDragging}\n />\n </SliderTrack>\n );\n});\n"],"names":["Slider"],"mappings":";;;;;;;;;;;;;;;AA+
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n forwardRef,\n type HTMLAttributes,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * Accessible text to announce maximum value label.\n */\n accessibleMaxText?: string;\n /**\n * Accessible text to announce minimum value label.\n */\n accessibleMinText?: string;\n /**\n * When minimum and maximum labels are defined, ensure\n * they are confined within the boundary of the slider.\n * @default false\n */\n constrainLabelPosition?: boolean;\n /**\n * The number of allowed decimal places\n * @default 2\n */\n decimalPlaces?: number;\n /**\n * The default value. Use when the component is not controlled.\n * @default min + (max - min) / 2,\n */\n defaultValue?: number;\n /**\n * Disable the slider.\n */\n disabled?: boolean;\n /**\n * A callback to format the display value in the tooltip, min and max labels\n * and the `aria-valuetext` attribute.\n */\n format?: (value: number) => string | number;\n /**\n * Marks that are displayed under the track.\n */\n marks?: { label: string; value: number }[];\n /**\n * Maximum slider value.\n * @default 10\n */\n max?: number;\n /**\n * Minimum slider value.\n * @default 0\n */\n min?: number;\n /**\n * Label for maximum value.\n */\n maxLabel?: string;\n /**\n * Label for the minimum value.\n */\n minLabel?: string;\n /**\n * Callback called when slider value is changed.\n * It provides a generic event and the current value of the slider.\n */\n onChange?: (event: Event, value: number) => void;\n /**\n * Callback called when the slider is stopped from being dragged or\n * its value is changed from the keyboard. It provides a generic\n * event and the current value of the slider.\n */\n onChangeEnd?: (event: Event, value: number) => void;\n /**\n * Restrict slider value to marks only. The step will be ignored.\n */\n restrictToMarks?: boolean;\n /**\n * Show visual ticks above the marks.\n */\n showTicks?: boolean;\n /**\n * Show the slider value in a tooltip when the thumb is hovered.\n * @default true\n */\n showTooltip?: boolean;\n /**\n * Minimum interval the slider thumb can move.\n * @default 1\n */\n step?: number;\n /**\n * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n * @default 2\n */\n stepMultiplier?: number;\n /**\n * Value of the slider, to be used when in a controlled state.\n */\n value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n accessibleMaxText,\n accessibleMinText,\n decimalPlaces = 2,\n disabled: disabledProp = false,\n format,\n marks,\n min = 0,\n minLabel,\n max = 100,\n maxLabel,\n onChange,\n onChangeEnd,\n restrictToMarks = false,\n showTooltip = true,\n step = 1,\n stepMultiplier = 2,\n value: valueProp,\n defaultValue = min + (max - min) / 2,\n ...rest\n },\n ref,\n) {\n const [valueState, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Slider\",\n state: \"value\",\n });\n const {\n a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n disabled: formFieldDisabled,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const inputRef = useRef<HTMLInputElement>(null);\n const value = clamp(\n valueState,\n max,\n min,\n step,\n decimalPlaces,\n marks,\n restrictToMarks,\n );\n const progressPercentage = calculatePercentage(toFloat(value), max, min);\n const lastValueRef = useRef<number>(value);\n\n const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n const parsedValue = toFloat(event.target.value);\n if (parsedValue !== lastValueRef.current) {\n setValue(parsedValue);\n onChange?.(event.nativeEvent, parsedValue);\n onChangeEnd?.(event.nativeEvent, parsedValue);\n lastValueRef.current = parsedValue;\n }\n };\n\n const {\n handleBlur,\n handleFocus,\n handleKeydownOnThumb,\n handlePointerDownOnThumb,\n handlePointerDownOnTrack,\n isDragging,\n isFocusVisible,\n sliderRef,\n } = useSliderThumb({\n decimalPlaces,\n handleInputChange,\n inputRef,\n marks,\n min,\n max,\n step,\n value,\n onChange,\n onChangeEnd,\n restrictToMarks,\n setValue,\n stepMultiplier,\n });\n\n return (\n <SliderTrack\n disabled={disabled}\n format={format}\n handlePointerDown={handlePointerDownOnTrack}\n isDragging={isDragging}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n marks={marks}\n progressPercentage={progressPercentage}\n ref={ref}\n sliderRef={sliderRef}\n {...rest}\n >\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuetext={ariaValueText}\n accessibleMaxText={accessibleMaxText}\n accessibleMinText={accessibleMinText}\n disabled={disabled}\n format={format}\n onBlur={handleBlur}\n onFocus={handleFocus}\n handleInputChange={handleInputChange}\n handlePointerDown={handlePointerDownOnThumb}\n handleKeydownOnThumb={handleKeydownOnThumb}\n inputRef={inputRef}\n isFocusVisible={isFocusVisible}\n min={min}\n minLabel={minLabel}\n max={max}\n maxLabel={maxLabel}\n offsetPercentage={`${progressPercentage}%`}\n restrictToMarks={restrictToMarks}\n sliderValue={value}\n showTooltip={showTooltip}\n step={step}\n stepMultiplier={stepMultiplier}\n trackDragging={isDragging}\n />\n </SliderTrack>\n );\n});\n"],"names":["Slider"],"mappings":"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"}
|
|
@@ -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 RefObject,\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?: RefObject<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,
|
|
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 RefObject,\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?: RefObject<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":"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"}
|
|
@@ -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-primary-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,
|
|
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-primary-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 +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 disabled={disabled}\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 disabled={disabled}\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 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 disabled={disabled}\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 disabled={disabled}\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 handlePointerUp = useCallback(\n (event: PointerEvent) => {\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\", handlePointerUp);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\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>[];\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 handlePointerUp = useCallback(\n (event: PointerEvent) => {\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\", handlePointerUp);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\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 handlePointerUp = useCallback(\n (event: PointerEvent) => {\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\", handlePointerUp);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\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 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\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":";;;;AA2BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,aAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAM,
|
|
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 handlePointerUp = useCallback(\n (event: PointerEvent) => {\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\", handlePointerUp);\n } else {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n }\n return () => {\n targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n };\n }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n const handlePointerDownOnThumb = useCallback(\n (event: React.PointerEvent<HTMLDivElement>) => {\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 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\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":"
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n \"default\",\n \"large\",\n \"small\",\n \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n */\n announcerInterval?: number;\n /**\n * * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n */\n announcerTimeout?: number;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n */\n completionAnnouncement?: string | null;\n /**\n * If true, built in aria announcer will be inactive\n */\n disableAnnouncer?: boolean;\n /**\n * The prop for the role attribute of the component\n */\n role?: string;\n /**\n * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n */\n size?: SpinnerSize;\n /**\n * The ids of the SvgSpinner components\n */\n id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n \"aria-label\": ariaLabel = \"loading\",\n announcerInterval = 5000,\n announcerTimeout = 20000,\n completionAnnouncement = `finished ${ariaLabel}`,\n disableAnnouncer,\n className,\n size = \"medium\",\n id: idProp,\n ...rest\n },\n ref,\n ) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-spinner\",\n css: spinnerCss,\n window: targetWindow,\n });\n\n const { announce } = useAriaAnnouncer();\n\n const density = useDensity();\n size = handleSize(size);\n\n useEffect(() => {\n if (disableAnnouncer) return;\n\n announce(ariaLabel);\n\n const startTime = Date.now();\n\n const interval =\n announcerInterval > 0 &&\n setInterval(() => {\n if (Date.now() - startTime > announcerTimeout) {\n // The announcer will stop after `announcerTimeout` time\n announce(\n `${ariaLabel} is still in progress, but will no longer announce.`,\n );\n interval && clearInterval(interval);\n return;\n }\n announce(ariaLabel);\n }, announcerInterval);\n\n return () => {\n if (disableAnnouncer) return;\n\n interval && clearInterval(interval);\n if (completionAnnouncement) {\n announce(completionAnnouncement);\n }\n };\n }, [\n announce,\n announcerInterval,\n announcerTimeout,\n ariaLabel,\n completionAnnouncement,\n disableAnnouncer,\n ]);\n\n return (\n <div\n aria-label={ariaLabel}\n className={clsx(withBaseName(), withBaseName(size), className)}\n ref={ref}\n role=\"img\"\n {...rest}\n >\n <SpinnerSVG size={size} density={density} id={id} />\n </div>\n );\n },\n);\n"],"names":["Spinner","spinnerCss"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n \"default\",\n \"large\",\n \"small\",\n \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n */\n announcerInterval?: number;\n /**\n * * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n */\n announcerTimeout?: number;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n */\n completionAnnouncement?: string | null;\n /**\n * If true, built in aria announcer will be inactive\n */\n disableAnnouncer?: boolean;\n /**\n * The prop for the role attribute of the component\n */\n role?: string;\n /**\n * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n */\n size?: SpinnerSize;\n /**\n * The ids of the SvgSpinner components\n */\n id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n \"aria-label\": ariaLabel = \"loading\",\n announcerInterval = 5000,\n announcerTimeout = 20000,\n completionAnnouncement = `finished ${ariaLabel}`,\n disableAnnouncer,\n className,\n size = \"medium\",\n id: idProp,\n ...rest\n },\n ref,\n ) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-spinner\",\n css: spinnerCss,\n window: targetWindow,\n });\n\n const { announce } = useAriaAnnouncer();\n\n const density = useDensity();\n size = handleSize(size);\n\n useEffect(() => {\n if (disableAnnouncer) return;\n\n announce(ariaLabel);\n\n const startTime = Date.now();\n\n const interval =\n announcerInterval > 0 &&\n setInterval(() => {\n if (Date.now() - startTime > announcerTimeout) {\n // The announcer will stop after `announcerTimeout` time\n announce(\n `${ariaLabel} is still in progress, but will no longer announce.`,\n );\n interval && clearInterval(interval);\n return;\n }\n announce(ariaLabel);\n }, announcerInterval);\n\n return () => {\n if (disableAnnouncer) return;\n\n interval && clearInterval(interval);\n if (completionAnnouncement) {\n announce(completionAnnouncement);\n }\n };\n }, [\n announce,\n announcerInterval,\n announcerTimeout,\n ariaLabel,\n completionAnnouncement,\n disableAnnouncer,\n ]);\n\n return (\n <div\n aria-label={ariaLabel}\n className={clsx(withBaseName(), withBaseName(size), className)}\n ref={ref}\n role=\"img\"\n {...rest}\n >\n <SpinnerSVG size={size} density={density} id={id} />\n </div>\n );\n },\n);\n"],"names":["Spinner","spinnerCss"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAA,GAAa,CAAC,IAAA,KAClB,IAAA,KAAS,YAAY,QAAA,GAAW,IAAA;AAElC,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAqCxC,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,SAASA,QAAAA,CACP;AAAA,IACE,cAAc,SAAA,GAAY,SAAA;AAAA,IAC1B,iBAAA,GAAoB,GAAA;AAAA,IACpB,gBAAA,GAAmB,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,EAAA,EAAI,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAS,GAAI,gBAAA,EAAiB;AAEtC,IAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAA,EAAkB;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAA,GAAY,KAAK,GAAA,EAAI;AAE3B,MAAA,MAAM,QAAA,GACJ,iBAAA,GAAoB,CAAA,IACpB,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAA,CAAK,GAAA,EAAI,GAAI,SAAA,GAAY,gBAAA,EAAkB;AAE7C,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA,QACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,MACpB,GAAG,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAA,EAAkB;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAA,EAAwB;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA,QACjC;AAAA,MACF,CAAA;AAAA,IACF,CAAA,EAAG;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,SAAA;AAAA,QACZ,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA,EAAK,KAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,OAAA,EAAkB,EAAA,EAAQ;AAAA;AAAA,KACpD;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { Density } from \"../../theme\";\nimport { makePrefixer } from \"../../utils\";\nimport type { SpinnerSVGSize } from \"../Spinner\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ninterface SpinnerProps {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n size: SpinnerSVGSize;\n density: Density;\n}\n\nconst sizeAndStrokeWidthMapping = {\n small: {\n high: { width: 12, strokeWidth: 2 },\n medium: { width: 12, strokeWidth: 2 },\n low: { width: 14, strokeWidth: 2 },\n touch: { width: 16, strokeWidth: 2 },\n },\n medium: {\n high: { width: 20, strokeWidth: 2 },\n medium: { width: 28, strokeWidth: 4 },\n low: { width: 36, strokeWidth: 6 },\n touch: { width: 44, strokeWidth: 8 },\n },\n large: {\n high: { width: 40, strokeWidth: 2 },\n medium: { width: 56, strokeWidth: 4 },\n low: { width: 72, strokeWidth: 6 },\n touch: { width: 88, strokeWidth: 8 },\n },\n};\n\nexport const SpinnerSVG = ({\n id = \"svg-spinner\",\n rest,\n size,\n density,\n}: SpinnerProps) => {\n const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];\n const radius = (width - strokeWidth) / 2;\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox={`0 0 ${width} ${width}`}\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"15%\"\n stopOpacity=\"1\"\n />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\">\n {/* \n This first path draws the top half of the circle without a gradient. \n It starts from the right end, moves in a circular arc, and ends at the left end.\n */}\n <path\n d={`M${width - strokeWidth / 2},${\n width / 2\n } a${radius},${radius} 0 1,0 -${width - strokeWidth},0`}\n stroke=\"var(--saltSpinner-gradient-color, var(--salt-accent-background)\"\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n {/* \n This second path draws the left half of the circle with a gradient that transitions \n from opaque on the left to transparent on the right.\n It starts from the top-center, moves in a circular arc, and ends at the bottom-center.\n */}\n <path\n d={`M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${\n width - strokeWidth\n }`}\n stroke={`url(#${id}-1)`}\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n </g>\n </svg>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAS/C,MAAM,
|
|
1
|
+
{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { Density } from \"../../theme\";\nimport { makePrefixer } from \"../../utils\";\nimport type { SpinnerSVGSize } from \"../Spinner\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ninterface SpinnerProps {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n size: SpinnerSVGSize;\n density: Density;\n}\n\nconst sizeAndStrokeWidthMapping = {\n small: {\n high: { width: 12, strokeWidth: 2 },\n medium: { width: 12, strokeWidth: 2 },\n low: { width: 14, strokeWidth: 2 },\n touch: { width: 16, strokeWidth: 2 },\n },\n medium: {\n high: { width: 20, strokeWidth: 2 },\n medium: { width: 28, strokeWidth: 4 },\n low: { width: 36, strokeWidth: 6 },\n touch: { width: 44, strokeWidth: 8 },\n },\n large: {\n high: { width: 40, strokeWidth: 2 },\n medium: { width: 56, strokeWidth: 4 },\n low: { width: 72, strokeWidth: 6 },\n touch: { width: 88, strokeWidth: 8 },\n },\n};\n\nexport const SpinnerSVG = ({\n id = \"svg-spinner\",\n rest,\n size,\n density,\n}: SpinnerProps) => {\n const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];\n const radius = (width - strokeWidth) / 2;\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox={`0 0 ${width} ${width}`}\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"15%\"\n stopOpacity=\"1\"\n />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\">\n {/* \n This first path draws the top half of the circle without a gradient. \n It starts from the right end, moves in a circular arc, and ends at the left end.\n */}\n <path\n d={`M${width - strokeWidth / 2},${\n width / 2\n } a${radius},${radius} 0 1,0 -${width - strokeWidth},0`}\n stroke=\"var(--saltSpinner-gradient-color, var(--salt-accent-background)\"\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n {/* \n This second path draws the left half of the circle with a gradient that transitions \n from opaque on the left to transparent on the right.\n It starts from the top-center, moves in a circular arc, and ends at the bottom-center.\n */}\n <path\n d={`M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${\n width - strokeWidth\n }`}\n stroke={`url(#${id}-1)`}\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n </g>\n </svg>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport { makePrefixer, type PolymorphicComponentPropWithRef } from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: FlexLayoutProps<ElementType>[\"direction\"];\n /**\n * End component to be rendered.\n */\n endItem?: ReactNode;\n /**\n * Controls the space between left and right items.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Start component to be rendered.\n */\n startItem?: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n props: SplitLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n function SplitLayout<T extends ElementType = \"div\">(\n { as, endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n ref?: ForwardedRef<unknown>,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-split-layout\",\n css: splitLayoutCss,\n window: targetWindow,\n });\n\n const justify = endItem && !startItem ? \"end\" : \"space-between\";\n return (\n <FlexLayout\n as={as as ElementType}\n className={clsx(withBaseName(), className)}\n ref={ref}\n justify={justify}\n {...rest}\n >\n {startItem}\n {endItem}\n </FlexLayout>\n );\n },\n);\n"],"names":["SplitLayout","splitLayoutCss"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAyC5C,MAAM,
|
|
1
|
+
{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport { makePrefixer, type PolymorphicComponentPropWithRef } from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: FlexLayoutProps<ElementType>[\"direction\"];\n /**\n * End component to be rendered.\n */\n endItem?: ReactNode;\n /**\n * Controls the space between left and right items.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Start component to be rendered.\n */\n startItem?: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n props: SplitLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n function SplitLayout<T extends ElementType = \"div\">(\n { as, endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n ref?: ForwardedRef<unknown>,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-split-layout\",\n css: splitLayoutCss,\n window: targetWindow,\n });\n\n const justify = endItem && !startItem ? \"end\" : \"space-between\";\n return (\n <FlexLayout\n as={as as ElementType}\n className={clsx(withBaseName(), className)}\n ref={ref}\n justify={justify}\n {...rest}\n >\n {startItem}\n {endItem}\n </FlexLayout>\n );\n },\n);\n"],"names":["SplitLayout","splitLayoutCss"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAA,GAAoC,UAAA;AAAA,EAC/C,SAASA,YAAAA,CACP,EAAE,EAAA,EAAI,OAAA,EAAS,WAAW,SAAA,EAAW,GAAG,IAAA,EAAK,EAC7C,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,mBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAU,OAAA,IAAW,CAAC,SAAA,GAAY,KAAA,GAAQ,eAAA;AAChD,IAAA,uBACE,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n FlexLayout,\n type FlexLayoutProps,\n type LayoutDirection,\n type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Adds a separator between elements, default is false.\n */\n separators?: LayoutSeparator | boolean;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n props: StackLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nfunction parseSpacing(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n function StackLayout<T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n direction = \"column\",\n gap = 3,\n separators,\n style,\n ...rest\n }: StackLayoutProps<T>,\n ref?: ForwardedRef<unknown>,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stack-layout\",\n css: stackLayoutCss,\n window: targetWindow,\n });\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n const separatorAlignment = separators === true ? \"center\" : separators;\n const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n const stackLayoutStyles = {\n ...style,\n \"--stackLayout-gap\": parseSpacing(flexGap),\n };\n return (\n <FlexLayout\n as={as as ElementType}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(flexDirection ?? \"\")]: flexDirection,\n [withBaseName(\"separator\")]: !!separatorAlignment,\n [separatorAlignment\n ? withBaseName(`separator-${separatorAlignment}`)\n : \"\"]: separatorAlignment,\n },\n className,\n )}\n ref={ref}\n direction={direction}\n style={stackLayoutStyles}\n wrap={false}\n gap={flexGap}\n {...rest}\n >\n {children}\n </FlexLayout>\n );\n },\n);\n"],"names":["StackLayout","stackLayoutCss"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,
|
|
1
|
+
{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n FlexLayout,\n type FlexLayoutProps,\n type LayoutDirection,\n type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Adds a separator between elements, default is false.\n */\n separators?: LayoutSeparator | boolean;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n props: StackLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nfunction parseSpacing(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n function StackLayout<T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n direction = \"column\",\n gap = 3,\n separators,\n style,\n ...rest\n }: StackLayoutProps<T>,\n ref?: ForwardedRef<unknown>,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stack-layout\",\n css: stackLayoutCss,\n window: targetWindow,\n });\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n const separatorAlignment = separators === true ? \"center\" : separators;\n const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n const stackLayoutStyles = {\n ...style,\n \"--stackLayout-gap\": parseSpacing(flexGap),\n };\n return (\n <FlexLayout\n as={as as ElementType}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(flexDirection ?? \"\")]: flexDirection,\n [withBaseName(\"separator\")]: !!separatorAlignment,\n [separatorAlignment\n ? withBaseName(`separator-${separatorAlignment}`)\n : \"\"]: separatorAlignment,\n },\n className,\n )}\n ref={ref}\n direction={direction}\n style={stackLayoutStyles}\n wrap={false}\n gap={flexGap}\n {...rest}\n >\n {children}\n </FlexLayout>\n );\n },\n);\n"],"names":["StackLayout","stackLayoutCss"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAA,EAAoC;AACxD,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,OAAO,KAAA,KAAU,QAAA,EAAU;AACpD,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAA,GAAoC,UAAA;AAAA,EAC/C,SAASA,YAAAA,CACP;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,QAAA;AAAA,IACZ,GAAA,GAAM,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,mBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,kBAAA,EAAmB,GAAI,aAAA,EAAc;AAE7C,IAAA,MAAM,OAAA,GAAU,sBAAA,CAAuB,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAA,MAAM,kBAAA,GAAqB,UAAA,KAAe,IAAA,GAAO,QAAA,GAAW,UAAA;AAC5D,IAAA,MAAM,aAAA,GAAgB,sBAAA,CAAuB,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAA,GAAoB;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAA,IAAiB,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAA,CAAa,CAAA,UAAA,EAAa,kBAAkB,CAAA,CAAE,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAA,EAAO,iBAAA;AAAA,QACP,IAAA,EAAM,KAAA;AAAA,QACN,GAAA,EAAK,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorAdornment.js","sources":["../src/status-adornment/ErrorAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\n\nexport type ErrorAdornmentIconProps = IconProps;\n\nexport const ErrorAdornmentIcon = forwardRef<\n SVGSVGElement,\n ErrorAdornmentIconProps\n>(function ErrorAdornmentIcon(\n { children, className, ...rest }: ErrorAdornmentIconProps,\n ref,\n) {\n return (\n <svg className={className} {...rest} role=\"img\" ref={ref} viewBox=\"0 0 8 8\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z\"\n />\n </svg>\n );\n});\n"],"names":["ErrorAdornmentIcon"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"ErrorAdornment.js","sources":["../src/status-adornment/ErrorAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\n\nexport type ErrorAdornmentIconProps = IconProps;\n\nexport const ErrorAdornmentIcon = forwardRef<\n SVGSVGElement,\n ErrorAdornmentIconProps\n>(function ErrorAdornmentIcon(\n { children, className, ...rest }: ErrorAdornmentIconProps,\n ref,\n) {\n return (\n <svg className={className} {...rest} role=\"img\" ref={ref} viewBox=\"0 0 8 8\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z\"\n />\n </svg>\n );\n});\n"],"names":["ErrorAdornmentIcon"],"mappings":";;;AAKO,MAAM,kBAAA,GAAqB,UAAA,CAGhC,SAASA,mBAAAA,CACT,EAAE,UAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EAC/B,GAAA,EACA;AACA,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAuB,GAAG,MAAM,IAAA,EAAK,KAAA,EAAM,GAAA,EAAU,OAAA,EAAQ,SAAA,EAChE,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAS,SAAA;AAAA,MACT,CAAA,EAAE;AAAA;AAAA,GACJ,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport statusAdornmentCss from \"./StatusAdornment.css\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nconst icons = {\n error: ErrorAdornmentIcon,\n warning: WarningAdornmentIcon,\n success: SuccessAdornmentIcon,\n};\n\nexport type AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n /**\n * Status adornment to be displayed.\n */\n status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n error: \"error\",\n warning: \"warning\",\n success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n function StatusAdornment({ className, status, ...restProps }, ref) {\n const AdornmentComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-adornment\",\n css: statusAdornmentCss,\n window: targetWindow,\n });\n\n return (\n <AdornmentComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n },\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,
|
|
1
|
+
{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport statusAdornmentCss from \"./StatusAdornment.css\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nconst icons = {\n error: ErrorAdornmentIcon,\n warning: WarningAdornmentIcon,\n success: SuccessAdornmentIcon,\n};\n\nexport type AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n /**\n * Status adornment to be displayed.\n */\n status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n error: \"error\",\n warning: \"warning\",\n success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n function StatusAdornment({ className, status, ...restProps }, ref) {\n const AdornmentComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-adornment\",\n css: statusAdornmentCss,\n window: targetWindow,\n });\n\n return (\n <AdornmentComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n },\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,KAAA,GAAQ;AAAA,EACZ,KAAA,EAAO,kBAAA;AAAA,EACP,OAAA,EAAS,oBAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;AAWA,MAAM,oBAAA,GAAkE;AAAA,EACtE,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAEhD,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,iBAAgB,EAAE,SAAA,EAAW,QAAQ,GAAG,SAAA,IAAa,GAAA,EAAK;AACjE,IAAA,MAAM,kBAAA,GAAqB,MAAM,MAAM,CAAA;AACvC,IAAA,MAAM,SAAA,GAAY,qBAAqB,MAAM,CAAA;AAE7C,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,YAAA,EAAY,SAAA;AAAA,QACX,GAAG,SAAA;AAAA,QACJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuccessAdornment.js","sources":["../src/status-adornment/SuccessAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\n\nexport type SuccessAdornmentIconProps = IconProps;\n\nexport const SuccessAdornmentIcon = forwardRef<\n SVGSVGElement,\n SuccessAdornmentIconProps\n>(function SuccessAdornmentIcon(\n { children, className, ...rest }: SuccessAdornmentIconProps,\n ref,\n) {\n return (\n <svg\n className={className}\n {...rest}\n role=\"img\"\n viewBox=\"0 0 10 8\"\n ref={ref}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z\"\n />\n </svg>\n );\n});\n"],"names":["SuccessAdornmentIcon"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"SuccessAdornment.js","sources":["../src/status-adornment/SuccessAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\n\nexport type SuccessAdornmentIconProps = IconProps;\n\nexport const SuccessAdornmentIcon = forwardRef<\n SVGSVGElement,\n SuccessAdornmentIconProps\n>(function SuccessAdornmentIcon(\n { children, className, ...rest }: SuccessAdornmentIconProps,\n ref,\n) {\n return (\n <svg\n className={className}\n {...rest}\n role=\"img\"\n viewBox=\"0 0 10 8\"\n ref={ref}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z\"\n />\n </svg>\n );\n});\n"],"names":["SuccessAdornmentIcon"],"mappings":";;;AAKO,MAAM,oBAAA,GAAuB,UAAA,CAGlC,SAASA,qBAAAA,CACT,EAAE,UAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EAC/B,GAAA,EACA;AACA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,IAAA,EAAK,KAAA;AAAA,MACL,OAAA,EAAQ,UAAA;AAAA,MACR,GAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,QAAA,EAAS,SAAA;AAAA,UACT,QAAA,EAAS,SAAA;AAAA,UACT,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA,GACF;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WarningAdornment.js","sources":["../src/status-adornment/WarningAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\n\nexport type WarningAdornmentIconProps = IconProps;\n\nexport const WarningAdornmentIcon = forwardRef<\n SVGSVGElement,\n WarningAdornmentIconProps\n>(function WarningAdornmentIcon(\n { children, className, ...rest }: WarningAdornmentIconProps,\n ref,\n) {\n return (\n <svg className={className} {...rest} role=\"img\" viewBox=\"0 0 9 8\" ref={ref}>\n <path d=\"M0 8L4.5 0L9 8H0Z\" />\n </svg>\n );\n});\n"],"names":["WarningAdornmentIcon"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"WarningAdornment.js","sources":["../src/status-adornment/WarningAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\n\nexport type WarningAdornmentIconProps = IconProps;\n\nexport const WarningAdornmentIcon = forwardRef<\n SVGSVGElement,\n WarningAdornmentIconProps\n>(function WarningAdornmentIcon(\n { children, className, ...rest }: WarningAdornmentIconProps,\n ref,\n) {\n return (\n <svg className={className} {...rest} role=\"img\" viewBox=\"0 0 9 8\" ref={ref}>\n <path d=\"M0 8L4.5 0L9 8H0Z\" />\n </svg>\n );\n});\n"],"names":["WarningAdornmentIcon"],"mappings":";;;AAKO,MAAM,oBAAA,GAAuB,UAAA,CAGlC,SAASA,qBAAAA,CACT,EAAE,UAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EAC/B,GAAA,EACA;AACA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAuB,GAAG,MAAM,IAAA,EAAK,KAAA,EAAM,OAAA,EAAQ,SAAA,EAAU,GAAA,EAChE,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,qBAAoB,CAAA,EAC9B,CAAA;AAEJ,CAAC;;;;"}
|