@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":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import { DEFAULT_ICON_SIZE, 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 { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport type { ValidationStatus } from \"./ValidationStatus\";\n\nexport interface StatusIndicatorProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n error: \"error\",\n success: \"success\",\n warning: \"warning\",\n info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n function StatusIndicator(\n { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-indicator\",\n css: statusIndicatorCss,\n window: targetWindow,\n });\n\n const { ErrorIcon, WarningIcon, SuccessIcon, InfoIcon } = useIcon();\n\n const iconMap = {\n error: ErrorIcon,\n success: SuccessIcon,\n warning: WarningIcon,\n info: InfoIcon,\n };\n\n const IconComponent = iconMap[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n if (IconComponent === undefined) {\n return null;\n }\n\n return (\n <IconComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","StatusIndicator","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","statusIndicatorCss","useIcon","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,
|
|
1
|
+
{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import { DEFAULT_ICON_SIZE, 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 { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport type { ValidationStatus } from \"./ValidationStatus\";\n\nexport interface StatusIndicatorProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n error: \"error\",\n success: \"success\",\n warning: \"warning\",\n info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n function StatusIndicator(\n { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-indicator\",\n css: statusIndicatorCss,\n window: targetWindow,\n });\n\n const { ErrorIcon, WarningIcon, SuccessIcon, InfoIcon } = useIcon();\n\n const iconMap = {\n error: ErrorIcon,\n success: SuccessIcon,\n warning: WarningIcon,\n info: InfoIcon,\n };\n\n const IconComponent = iconMap[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n if (IconComponent === undefined) {\n return null;\n }\n\n return (\n <IconComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","StatusIndicator","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","statusIndicatorCss","useIcon","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,oBAAA,GAAyD;AAAA,EAC7D,KAAA,EAAO,OAAA;AAAA,EACP,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,SAAA;AAAA,EACT,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEhD,MAAM,eAAA,GAAkBC,gBAAA;AAAA,EAC7B,SAASC,gBAAAA,CACP,EAAE,SAAA,EAAW,MAAA,EAAQ,OAAOC,uBAAA,EAAmB,GAAG,SAAA,EAAU,EAC5D,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,iBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAA,EAAW,WAAA,EAAa,WAAA,EAAa,QAAA,KAAaC,4BAAA,EAAQ;AAElE,IAAA,MAAM,OAAA,GAAU;AAAA,MACd,KAAA,EAAO,SAAA;AAAA,MACP,OAAA,EAAS,WAAA;AAAA,MACT,OAAA,EAAS,WAAA;AAAA,MACT,IAAA,EAAM;AAAA,KACR;AAEA,IAAA,MAAM,aAAA,GAAgB,QAAQ,MAAM,CAAA;AACpC,IAAA,MAAM,SAAA,GAAY,qBAAqB,MAAM,CAAA;AAE7C,IAAA,IAAI,kBAAkB,MAAA,EAAW;AAC/B,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,IAAA;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACX,GAAG,SAAA;AAAA,QACJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ValidationStatus.js","sources":["../src/status-indicator/ValidationStatus.ts"],"sourcesContent":["export const VALIDATION_NAMED_STATUS = [\n \"error\",\n \"warning\",\n \"success\",\n \"info\",\n] as const;\n\nexport type ValidationStatus = (typeof VALIDATION_NAMED_STATUS)[number];\n"],"names":[],"mappings":";;AAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"ValidationStatus.js","sources":["../src/status-indicator/ValidationStatus.ts"],"sourcesContent":["export const VALIDATION_NAMED_STATUS = [\n \"error\",\n \"warning\",\n \"success\",\n \"info\",\n] as const;\n\nexport type ValidationStatus = (typeof VALIDATION_NAMED_STATUS)[number];\n"],"names":[],"mappings":";;AAAO,MAAM,uBAAA,GAA0B;AAAA,EACrC,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type ReactNode,\n useContext,\n useEffect,\n} from \"react\";\nimport type { ButtonProps } from \"../button\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport {\n StepDepthContext,\n StepperOrientationContext,\n} from \"./internal/StepperProvider\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n /**\n * The label of the step\n */\n label?: ReactNode;\n /**\n * Description text is displayed just below the label\n **/\n description?: ReactNode;\n /**\n * Optional string to determine the status of the step.\n */\n status?: StepStatus;\n /**\n * The stage of the step\n */\n stage?: StepStage;\n /**\n * Whether the step item is expanded.\n */\n expanded?: boolean;\n /**\n * Initial expanded state of the step.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the step is toggled.\n */\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n | \"pending\"\n | \"locked\"\n | \"completed\"\n | \"inprogress\"\n | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n label?: ReactNode;\n description?: ReactNode;\n status?: StepStatus;\n stage?: StepStage;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n {\n id: idProp,\n label,\n description,\n status,\n stage = \"pending\",\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n className,\n style,\n children,\n ...rest\n },\n ref,\n) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n const depth = useContext(StepDepthContext);\n const orientation = useContext(StepperOrientationContext);\n\n const hasNestedSteps = !!children;\n\n const [expanded, setExpanded] = useControlled({\n name: \"Step\",\n state: \"expanded\",\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n });\n\n useComponentCssInjection({\n testId: \"salt-step\",\n css: stepCSS,\n window: targetWindow,\n });\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (depth === -1) {\n console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n }\n if (depth > 2) {\n console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n }\n if (orientation === \"horizontal\" && hasNestedSteps) {\n console.warn(\n \"<Stepper /> does not support nested steps in horizontal orientation!\",\n );\n }\n }\n }, [depth, orientation, hasNestedSteps]);\n\n const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n const state = status || stageText;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n const expandTriggerId = `${id}-expand-trigger`;\n const nestedStepperId = `${id}-nested-stepper`;\n\n const screenReaderOnly = {\n stateId: `${id}-sr-only-state`,\n stateText: state !== \"active\" ? state : \"\",\n substepsId: `${id}-sr-only-substeps`,\n substepsText: \"substeps\",\n toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n toggleSubstepsText: \"toggle substeps\",\n };\n\n return (\n <li\n id={id}\n aria-current={ariaCurrent}\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`depth-${depth}`),\n status && withBaseName(`status-${status}`),\n !hasNestedSteps && withBaseName(\"terminal\"),\n hasNestedSteps && expanded && withBaseName(\"expanded\"),\n hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n className,\n )}\n style={\n {\n \"--saltStep-depth\": depth,\n ...style,\n } as CSSProperties\n }\n {...rest}\n ref={ref}\n >\n <StepScreenReaderOnly>\n {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n </StepScreenReaderOnly>\n {hasNestedSteps && (\n <>\n <StepScreenReaderOnly\n id={screenReaderOnly.toggleSubstepsId}\n aria-hidden\n >\n {screenReaderOnly.toggleSubstepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n {screenReaderOnly.substepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n {screenReaderOnly.stateText}\n </StepScreenReaderOnly>\n </>\n )}\n <StepConnector />\n <StepIcon\n stage={stage}\n status={status}\n sizeMultiplier={iconSizeMultiplier}\n aria-hidden\n />\n {label && (\n <StepText id={labelId} purpose=\"label\" aria-hidden>\n {label}\n </StepText>\n )}\n {description && (\n <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n {description}\n </StepText>\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <StepExpandTrigger\n id={expandTriggerId}\n aria-expanded={expanded}\n aria-controls={nestedStepperId}\n aria-labelledby={[\n labelId,\n descriptionId,\n screenReaderOnly.stateId,\n screenReaderOnly.toggleSubstepsId,\n ].join(\" \")}\n expanded={expanded}\n onClick={(event) => {\n onToggle?.(event);\n setExpanded(!expanded);\n }}\n />\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <Stepper\n id={nestedStepperId}\n aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n aria-hidden={!expanded}\n hidden={!expanded}\n >\n {children}\n </Stepper>\n )}\n </li>\n );\n});\n"],"names":["makePrefixer","forwardRef","Step","useId","useWindow","useContext","StepDepthContext","StepperOrientationContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","clsx","jsx","StepScreenReaderOnly","Fragment","StepConnector","StepIcon","StepText","StepExpandTrigger","Stepper"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type ReactNode,\n useContext,\n useEffect,\n} from \"react\";\nimport type { ButtonProps } from \"../button\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport {\n StepDepthContext,\n StepperOrientationContext,\n} from \"./internal/StepperProvider\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n /**\n * The label of the step\n */\n label?: ReactNode;\n /**\n * Description text is displayed just below the label\n **/\n description?: ReactNode;\n /**\n * Optional string to determine the status of the step.\n */\n status?: StepStatus;\n /**\n * The stage of the step\n */\n stage?: StepStage;\n /**\n * Whether the step item is expanded.\n */\n expanded?: boolean;\n /**\n * Initial expanded state of the step.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the step is toggled.\n */\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n | \"pending\"\n | \"locked\"\n | \"completed\"\n | \"inprogress\"\n | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n label?: ReactNode;\n description?: ReactNode;\n status?: StepStatus;\n stage?: StepStage;\n expanded?: boolean;\n defaultExpanded?: boolean;\n onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n {\n id: idProp,\n label,\n description,\n status,\n stage = \"pending\",\n expanded: expandedProp,\n defaultExpanded,\n onToggle,\n className,\n style,\n children,\n ...rest\n },\n ref,\n) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n const depth = useContext(StepDepthContext);\n const orientation = useContext(StepperOrientationContext);\n\n const hasNestedSteps = !!children;\n\n const [expanded, setExpanded] = useControlled({\n name: \"Step\",\n state: \"expanded\",\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n });\n\n useComponentCssInjection({\n testId: \"salt-step\",\n css: stepCSS,\n window: targetWindow,\n });\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (depth === -1) {\n console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n }\n if (depth > 2) {\n console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n }\n if (orientation === \"horizontal\" && hasNestedSteps) {\n console.warn(\n \"<Stepper /> does not support nested steps in horizontal orientation!\",\n );\n }\n }\n }, [depth, orientation, hasNestedSteps]);\n\n const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n const state = status || stageText;\n\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n const expandTriggerId = `${id}-expand-trigger`;\n const nestedStepperId = `${id}-nested-stepper`;\n\n const screenReaderOnly = {\n stateId: `${id}-sr-only-state`,\n stateText: state !== \"active\" ? state : \"\",\n substepsId: `${id}-sr-only-substeps`,\n substepsText: \"substeps\",\n toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n toggleSubstepsText: \"toggle substeps\",\n };\n\n return (\n <li\n id={id}\n aria-current={ariaCurrent}\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`depth-${depth}`),\n status && withBaseName(`status-${status}`),\n !hasNestedSteps && withBaseName(\"terminal\"),\n hasNestedSteps && expanded && withBaseName(\"expanded\"),\n hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n className,\n )}\n style={\n {\n \"--saltStep-depth\": depth,\n ...style,\n } as CSSProperties\n }\n {...rest}\n ref={ref}\n >\n <StepScreenReaderOnly>\n {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n </StepScreenReaderOnly>\n {hasNestedSteps && (\n <>\n <StepScreenReaderOnly\n id={screenReaderOnly.toggleSubstepsId}\n aria-hidden\n >\n {screenReaderOnly.toggleSubstepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n {screenReaderOnly.substepsText}\n </StepScreenReaderOnly>\n <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n {screenReaderOnly.stateText}\n </StepScreenReaderOnly>\n </>\n )}\n <StepConnector />\n <StepIcon\n stage={stage}\n status={status}\n sizeMultiplier={iconSizeMultiplier}\n aria-hidden\n />\n {label && (\n <StepText id={labelId} purpose=\"label\" aria-hidden>\n {label}\n </StepText>\n )}\n {description && (\n <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n {description}\n </StepText>\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <StepExpandTrigger\n id={expandTriggerId}\n aria-expanded={expanded}\n aria-controls={nestedStepperId}\n aria-labelledby={[\n labelId,\n descriptionId,\n screenReaderOnly.stateId,\n screenReaderOnly.toggleSubstepsId,\n ].join(\" \")}\n expanded={expanded}\n onClick={(event) => {\n onToggle?.(event);\n setExpanded(!expanded);\n }}\n />\n )}\n {hasNestedSteps && orientation === \"vertical\" && (\n <Stepper\n id={nestedStepperId}\n aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n aria-hidden={!expanded}\n hidden={!expanded}\n >\n {children}\n </Stepper>\n )}\n </li>\n );\n});\n"],"names":["makePrefixer","forwardRef","Step","useId","useWindow","useContext","StepDepthContext","StepperOrientationContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","clsx","jsx","StepScreenReaderOnly","Fragment","StepConnector","StepIcon","StepText","StepExpandTrigger","Stepper"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport {\n StepperOrientationContext,\n StepperProvider,\n} from \"./internal/StepperProvider\";\nimport StepperCSS from \"./Stepper.css\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n /**\n * The orientation of the stepper: defaults to horizontal.\n */\n orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n function Stepper(\n { orientation: orientationProp, children, className, ...props },\n ref,\n ) {\n const targetWindow = useWindow();\n const orientationContext = useContext(StepperOrientationContext);\n const orientation = orientationProp || orientationContext;\n\n useComponentCssInjection({\n testId: \"salt-Stepper\",\n css: StepperCSS,\n window: targetWindow,\n });\n\n return (\n <StepperProvider orientation={orientation}>\n <ol\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n ref={ref}\n {...props}\n >\n {children}\n </ol>\n </StepperProvider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Stepper","useWindow","useContext","StepperOrientationContext","useComponentCssInjection","StepperCSS","jsx","StepperProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAWxC,MAAM,
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport {\n StepperOrientationContext,\n StepperProvider,\n} from \"./internal/StepperProvider\";\nimport StepperCSS from \"./Stepper.css\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n /**\n * The orientation of the stepper: defaults to horizontal.\n */\n orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n function Stepper(\n { orientation: orientationProp, children, className, ...props },\n ref,\n ) {\n const targetWindow = useWindow();\n const orientationContext = useContext(StepperOrientationContext);\n const orientation = orientationProp || orientationContext;\n\n useComponentCssInjection({\n testId: \"salt-Stepper\",\n css: StepperCSS,\n window: targetWindow,\n });\n\n return (\n <StepperProvider orientation={orientation}>\n <ol\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n ref={ref}\n {...props}\n >\n {children}\n </ol>\n </StepperProvider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Stepper","useWindow","useContext","StepperOrientationContext","useComponentCssInjection","StepperCSS","jsx","StepperProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAWxC,MAAM,OAAA,GAAUC,gBAAA;AAAA,EACrB,SAASC,QAAAA,CACP,EAAE,WAAA,EAAa,eAAA,EAAiB,UAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAC9D,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAA,MAAM,kBAAA,GAAqBC,iBAAWC,yCAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAA,IAAmB,kBAAA;AAEvC,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,SAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAACC,mCAAgB,WAAA,EACf,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAWE,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepConnector.js","sources":["../src/stepper/internal/StepConnector.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepConnectorCSS from \"./StepConnector.css\";\n\nconst withBaseName = makePrefixer(\"saltStepConnector\");\n\nexport function StepConnector() {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-connector\",\n css: stepConnectorCSS,\n window: targetWindow,\n });\n\n return <div aria-hidden className={withBaseName()} />;\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepConnectorCSS"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAE9C,SAAS,
|
|
1
|
+
{"version":3,"file":"StepConnector.js","sources":["../src/stepper/internal/StepConnector.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepConnectorCSS from \"./StepConnector.css\";\n\nconst withBaseName = makePrefixer(\"saltStepConnector\");\n\nexport function StepConnector() {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-connector\",\n css: stepConnectorCSS,\n window: targetWindow,\n });\n\n return <div aria-hidden className={withBaseName()} />;\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepConnectorCSS"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAE9C,SAAS,aAAA,GAAgB;AAC9B,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,eAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,sCAAQ,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,cAAa,EAAG,CAAA;AACrD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepExpandTrigger.js","sources":["../src/stepper/internal/StepExpandTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Button, type ButtonProps } from \"../../button\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepExpandTriggerCSS from \"./StepExpandTrigger.css\";\n\nexport interface StepExpandTriggerProps extends ButtonProps {\n expanded: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltStepExpandTrigger\");\n\nexport function StepExpandTrigger({\n id,\n expanded,\n className,\n ...props\n}: StepExpandTriggerProps) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-expand-trigger\",\n css: stepExpandTriggerCSS,\n window: targetWindow,\n });\n\n return (\n <Button\n id={id}\n sentiment=\"neutral\"\n appearance=\"transparent\"\n className={clsx(withBaseName(), className)}\n {...props}\n >\n {expanded ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n </Button>\n );\n}\n"],"names":["makePrefixer","useIcon","useWindow","useComponentCssInjection","stepExpandTriggerCSS","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,SAAS,
|
|
1
|
+
{"version":3,"file":"StepExpandTrigger.js","sources":["../src/stepper/internal/StepExpandTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Button, type ButtonProps } from \"../../button\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepExpandTriggerCSS from \"./StepExpandTrigger.css\";\n\nexport interface StepExpandTriggerProps extends ButtonProps {\n expanded: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltStepExpandTrigger\");\n\nexport function StepExpandTrigger({\n id,\n expanded,\n className,\n ...props\n}: StepExpandTriggerProps) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-expand-trigger\",\n css: stepExpandTriggerCSS,\n window: targetWindow,\n });\n\n return (\n <Button\n id={id}\n sentiment=\"neutral\"\n appearance=\"transparent\"\n className={clsx(withBaseName(), className)}\n {...props}\n >\n {expanded ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n </Button>\n );\n}\n"],"names":["makePrefixer","useIcon","useWindow","useComponentCssInjection","stepExpandTriggerCSS","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,SAAS,iBAAA,CAAkB;AAAA,EAChC,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,UAAA,EAAW,GAAIC,4BAAA,EAAQ;AAC7C,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,mBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAU,SAAA;AAAA,MACV,UAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA,kCAAY,YAAA,EAAA,EAAa,aAAA,EAAW,MAAC,CAAA,mBAAKF,cAAA,CAAC,UAAA,EAAA,EAAW,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACrE;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepIcon.js","sources":["../src/stepper/internal/StepIcon.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 { useMemo } from \"react\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\nimport type { StepStage, StepStatus } from \"../Step\";\nimport stepIconCSS from \"./StepIcon.css\";\n\nexport interface StepIconProps extends IconProps {\n stage: StepStage;\n status?: StepStatus;\n sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n status,\n stage,\n size,\n sizeMultiplier = size || 1.5,\n className,\n ...props\n}: StepIconProps) {\n const targetWindow = useWindow();\n const IconComponent = useStepIcon({ stage, status });\n\n useComponentCssInjection({\n testId: \"salt-step-icon\",\n css: stepIconCSS,\n window: targetWindow,\n });\n\n return (\n <IconComponent\n size={sizeMultiplier}\n className={clsx(withBaseName(), className)}\n {...props}\n />\n );\n}\n\nfunction useStepIcon({\n stage,\n status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n const icons = useIcon();\n\n const stateToIcon = useMemo(\n () => ({\n error: icons.ErrorIcon,\n warning: icons.WarningIcon,\n active: icons.ActiveIcon,\n completed: icons.CompletedIcon,\n pending: icons.PendingIcon,\n inprogress: icons.InProgressIcon,\n locked: icons.LockedIcon,\n }),\n [icons],\n );\n\n return stateToIcon[status || stage];\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepIconCSS","jsx","clsx","useIcon","useMemo"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,
|
|
1
|
+
{"version":3,"file":"StepIcon.js","sources":["../src/stepper/internal/StepIcon.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 { useMemo } from \"react\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\nimport type { StepStage, StepStatus } from \"../Step\";\nimport stepIconCSS from \"./StepIcon.css\";\n\nexport interface StepIconProps extends IconProps {\n stage: StepStage;\n status?: StepStatus;\n sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n status,\n stage,\n size,\n sizeMultiplier = size || 1.5,\n className,\n ...props\n}: StepIconProps) {\n const targetWindow = useWindow();\n const IconComponent = useStepIcon({ stage, status });\n\n useComponentCssInjection({\n testId: \"salt-step-icon\",\n css: stepIconCSS,\n window: targetWindow,\n });\n\n return (\n <IconComponent\n size={sizeMultiplier}\n className={clsx(withBaseName(), className)}\n {...props}\n />\n );\n}\n\nfunction useStepIcon({\n stage,\n status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n const icons = useIcon();\n\n const stateToIcon = useMemo(\n () => ({\n error: icons.ErrorIcon,\n warning: icons.WarningIcon,\n active: icons.ActiveIcon,\n completed: icons.CompletedIcon,\n pending: icons.PendingIcon,\n inprogress: icons.InProgressIcon,\n locked: icons.LockedIcon,\n }),\n [icons],\n );\n\n return stateToIcon[status || stage];\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepIconCSS","jsx","clsx","useIcon","useMemo"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAA,CAAS;AAAA,EACvB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,iBAAiB,IAAA,IAAQ,GAAA;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,EAAE,KAAA,EAAO,QAAQ,CAAA;AAEnD,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,cAAA;AAAA,MACN,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,KAAA;AAAA,EACA;AACF,CAAA,EAA4C;AAC1C,EAAA,MAAM,QAAQC,4BAAA,EAAQ;AAEtB,EAAA,MAAM,WAAA,GAAcC,aAAA;AAAA,IAClB,OAAO;AAAA,MACL,OAAO,KAAA,CAAM,SAAA;AAAA,MACb,SAAS,KAAA,CAAM,WAAA;AAAA,MACf,QAAQ,KAAA,CAAM,UAAA;AAAA,MACd,WAAW,KAAA,CAAM,aAAA;AAAA,MACjB,SAAS,KAAA,CAAM,WAAA;AAAA,MACf,YAAY,KAAA,CAAM,cAAA;AAAA,MAClB,QAAQ,KAAA,CAAM;AAAA,KAChB,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,OAAO,WAAA,CAAY,UAAU,KAAK,CAAA;AACpC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepScreenReaderOnly.js","sources":["../src/stepper/internal/StepScreenReaderOnly.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nexport interface StepScreenReaderOnlyProps\n extends ComponentPropsWithoutRef<\"div\"> {\n children?: ReactNode;\n}\n\nexport function StepScreenReaderOnly({\n children,\n ...props\n}: StepScreenReaderOnlyProps) {\n return (\n <div className=\"salt-visuallyHidden\" {...props}>\n {children}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;AAOO,SAAS,
|
|
1
|
+
{"version":3,"file":"StepScreenReaderOnly.js","sources":["../src/stepper/internal/StepScreenReaderOnly.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nexport interface StepScreenReaderOnlyProps\n extends ComponentPropsWithoutRef<\"div\"> {\n children?: ReactNode;\n}\n\nexport function StepScreenReaderOnly({\n children,\n ...props\n}: StepScreenReaderOnlyProps) {\n return (\n <div className=\"salt-visuallyHidden\" {...props}>\n {children}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;AAOO,SAAS,oBAAA,CAAqB;AAAA,EACnC,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8B;AAC5B,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EAAuB,GAAG,OACtC,QAAA,EACH,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n id,\n purpose,\n className,\n styleAs = \"label\",\n children,\n ...props\n}: StepTextProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-text\",\n css: stepTextCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n className={clsx(withBaseName(), withBaseName(purpose), className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,
|
|
1
|
+
{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n id,\n purpose,\n className,\n styleAs = \"label\",\n children,\n ...props\n}: StepTextProps) {\n const targetWindow = useWindow();\n\n useComponentCssInjection({\n testId: \"salt-step-text\",\n css: stepTextCSS,\n window: targetWindow,\n });\n\n return (\n <Text\n id={id}\n className={clsx(withBaseName(), withBaseName(purpose), className)}\n {...props}\n >\n {children}\n </Text>\n );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n orientation: StepperOrientation;\n children: ReactNode;\n}\n\nexport function StepperProvider({\n orientation: orientationProp,\n children,\n}: StepperProviderProps) {\n const depth = useContext(StepDepthContext);\n\n return (\n <StepperOrientationContext.Provider value={orientationProp}>\n <StepDepthContext.Provider value={depth + 1}>\n {children}\n </StepDepthContext.Provider>\n </StepperOrientationContext.Provider>\n );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n orientation: StepperOrientation;\n children: ReactNode;\n}\n\nexport function StepperProvider({\n orientation: orientationProp,\n children,\n}: StepperProviderProps) {\n const depth = useContext(StepDepthContext);\n\n return (\n <StepperOrientationContext.Provider value={orientationProp}>\n <StepDepthContext.Provider value={depth + 1}>\n {children}\n </StepDepthContext.Provider>\n </StepperOrientationContext.Provider>\n );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;AAKO,MAAM,yBAAA,GACXA,oBAAkC,YAAY;AACzC,MAAM,gBAAA,GAAmBA,oBAAyB,EAAE;AAOpD,SAAS,eAAA,CAAgB;AAAA,EAC9B,WAAA,EAAa,eAAA;AAAA,EACb;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,KAAA,GAAQC,iBAAW,gBAAgB,CAAA;AAEzC,EAAA,uBACEC,cAAA,CAAC,yBAAA,CAA0B,QAAA,EAA1B,EAAmC,OAAO,eAAA,EACzC,QAAA,kBAAAA,cAAA,CAAC,gBAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAA,GAAQ,CAAA,EACvC,UACH,CAAA,EACF,CAAA;AAEJ;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n border-radius: var(--salt-palette-corner-weak, 0);\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n box-sizing: border-box;\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n}\n";
|
|
3
|
+
var css_248z = ".saltSwitch {\n display: flex;\n width: fit-content;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n border-radius: var(--salt-palette-corner-weak, 0);\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n box-sizing: border-box;\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Switch.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n // biome-ignore lint/a11y/useAriaPropsForRole: aria-checked is not needed when input and checked is used.\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckmarkSolidIcon\n aria-hidden\n className={withBaseName(\"icon\")}\n />\n )}\n </span>\n </span>\n {label && <span className={withBaseName(\"label\")}>{label}</span>}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx","jsx","CheckmarkSolidIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAiEA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the switch will be checked.\n */\n checked?: boolean;\n /**\n * Whether the switch component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the switch will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n /**\n * The label to be shown next to the switch.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when switch loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when switch gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the switch.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n function Switch(props, ref) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n // biome-ignore lint/a11y/useAriaPropsForRole: aria-checked is not needed when input and checked is used.\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckmarkSolidIcon\n aria-hidden\n className={withBaseName(\"icon\")}\n />\n )}\n </span>\n </span>\n {label && <span className={withBaseName(\"label\")}>{label}</span>}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx","jsx","CheckmarkSolidIcon"],"mappings":"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"}
|
package/dist-cjs/tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport tagCss from \"./Tag.css\";\n\nconst withBaseName = makePrefixer(\"saltTag\");\n\nexport interface TagProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * Emphasize the styling by applying a background color. Defaults to primary\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The tag category, needs to be within range of 1-20. Defaults to 1\n */\n category?: number;\n}\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(\n { children, className, variant = \"primary\", category = 1, bordered, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tag\",\n css: tagCss,\n window: targetWindow,\n });\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n withBaseName(`category-${category}`),\n withBaseName(variant),\n {\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Tag","useWindow","useComponentCssInjection","tagCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,SAAS,CAAA;AAiBpC,MAAM,
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport tagCss from \"./Tag.css\";\n\nconst withBaseName = makePrefixer(\"saltTag\");\n\nexport interface TagProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * Emphasize the styling by applying a background color. Defaults to primary\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The tag category, needs to be within range of 1-20. Defaults to 1\n */\n category?: number;\n}\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(\n { children, className, variant = \"primary\", category = 1, bordered, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tag\",\n css: tagCss,\n window: targetWindow,\n });\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n withBaseName(`category-${category}`),\n withBaseName(variant),\n {\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Tag","useWindow","useComponentCssInjection","tagCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,SAAS,CAAA;AAiBpC,MAAM,GAAA,GAAMC,gBAAA,CAAqC,SAASC,IAAAA,CAC/D,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,WAAW,CAAA,EAAG,QAAA,EAAU,GAAG,IAAA,IACvE,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,UAAA;AAAA,IACR,GAAA,EAAKC,KAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAA;AAAA,QACnC,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n function TextAction({ children, ...rest }, ref) {\n return (\n <Text as=\"code\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n"],"names":["forwardRef","Text"],"mappings":";;;;;;AAGO,MAAM,
|
|
1
|
+
{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n function TextAction({ children, ...rest }, ref) {\n return (\n <Text as=\"code\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n"],"names":["forwardRef","Text"],"mappings":";;;;;;AAGO,MAAM,IAAA,GAAOA,gBAAA;AAAA,EAClB,SAAS,UAAA,CAAW,EAAE,UAAU,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC9C,IAAA,sCACGC,SAAA,EAAA,EAAK,EAAA,EAAG,QAAO,GAAA,EAAW,GAAG,MAC3B,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Display1 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display1({ children, styleAs = \"display1\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display2 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display2({ children, styleAs = \"display2\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display3 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display3({ children, styleAs = \"display3\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display4 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display4({ children, styleAs = \"display4\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","Display1","jsx","Text","Display2","Display3","Display4"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Display1 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display1({ children, styleAs = \"display1\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display2 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display2({ children, styleAs = \"display2\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display3 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display3({ children, styleAs = \"display3\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n\nexport const Display4 = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function Display4({ children, styleAs = \"display4\", ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","Display1","jsx","Text","Display2","Display3","Display4"],"mappings":";;;;;;AAGO,MAAM,QAAA,GAAWA,gBAAA,CAGtB,SAASC,SAAAA,CAAS,EAAE,QAAA,EAAU,OAAA,GAAU,UAAA,EAAY,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACpE,EAAA,uBACEC,cAAA,CAACC,aAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,QAAA,GAAWH,gBAAA,CAGtB,SAASI,SAAAA,CAAS,EAAE,QAAA,EAAU,OAAA,GAAU,UAAA,EAAY,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACpE,EAAA,uBACEF,cAAA,CAACC,aAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,QAAA,GAAWH,gBAAA,CAGtB,SAASK,SAAAA,CAAS,EAAE,QAAA,EAAU,OAAA,GAAU,UAAA,EAAY,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACpE,EAAA,uBACEH,cAAA,CAACC,aAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;AAEM,MAAM,QAAA,GAAWH,gBAAA,CAGtB,SAASM,SAAAA,CAAS,EAAE,QAAA,EAAU,OAAA,GAAU,UAAA,EAAY,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACpE,EAAA,uBACEJ,cAAA,CAACC,aAAK,EAAA,EAAG,MAAA,EAAO,SAAkB,GAAA,EAAW,GAAG,MAC7C,QAAA,EACH,CAAA;AAEJ,CAAC;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Headings.js","sources":["../src/text/Headings.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { Text, type TextProps } from \"./Text\";\n\nexport const H1 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h1\">, \"as\">>(\n function H1({ children, ...rest }, ref) {\n return (\n <Text as=\"h1\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n\nexport const H2 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h2\">, \"as\">>(\n function H2({ children, ...rest }, ref) {\n return (\n <Text as=\"h2\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n\nexport const H3 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h3\">, \"as\">>(\n function H3({ children, ...rest }, ref) {\n return (\n <Text as=\"h3\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n\nexport const H4 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h4\">, \"as\">>(\n function H4({ children, ...rest }, ref) {\n return (\n <Text as=\"h4\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n"],"names":["forwardRef","H1","Text","H2","H3","H4"],"mappings":";;;;;;AAIO,MAAM,
|
|
1
|
+
{"version":3,"file":"Headings.js","sources":["../src/text/Headings.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { Text, type TextProps } from \"./Text\";\n\nexport const H1 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h1\">, \"as\">>(\n function H1({ children, ...rest }, ref) {\n return (\n <Text as=\"h1\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n\nexport const H2 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h2\">, \"as\">>(\n function H2({ children, ...rest }, ref) {\n return (\n <Text as=\"h2\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n\nexport const H3 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h3\">, \"as\">>(\n function H3({ children, ...rest }, ref) {\n return (\n <Text as=\"h3\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n\nexport const H4 = forwardRef<HTMLHeadingElement, Omit<TextProps<\"h4\">, \"as\">>(\n function H4({ children, ...rest }, ref) {\n return (\n <Text as=\"h4\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n },\n);\n"],"names":["forwardRef","H1","Text","H2","H3","H4"],"mappings":";;;;;;AAIO,MAAM,EAAA,GAAKA,gBAAA;AAAA,EAChB,SAASC,GAAAA,CAAG,EAAE,UAAU,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtC,IAAA,sCACGC,SAAA,EAAA,EAAK,EAAA,EAAG,MAAK,GAAA,EAAW,GAAG,MACzB,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEO,MAAM,EAAA,GAAKF,gBAAA;AAAA,EAChB,SAASG,GAAAA,CAAG,EAAE,UAAU,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtC,IAAA,sCACGD,SAAA,EAAA,EAAK,EAAA,EAAG,MAAK,GAAA,EAAW,GAAG,MACzB,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEO,MAAM,EAAA,GAAKF,gBAAA;AAAA,EAChB,SAASI,GAAAA,CAAG,EAAE,UAAU,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtC,IAAA,sCACGF,SAAA,EAAA,EAAK,EAAA,EAAG,MAAK,GAAA,EAAW,GAAG,MACzB,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEO,MAAM,EAAA,GAAKF,gBAAA;AAAA,EAChB,SAASK,GAAAA,CAAG,EAAE,UAAU,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtC,IAAA,sCACGH,SAAA,EAAA,EAAK,EAAA,EAAG,MAAK,GAAA,EAAW,GAAG,MACzB,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../src/text/Label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Label = forwardRef<\n HTMLLabelElement,\n Omit<TextProps<\"label\">, \"as\">\n>(function Label({ children, ...rest }, ref) {\n return (\n <Text as=\"label\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","Label","Text"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../src/text/Label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const Label = forwardRef<\n HTMLLabelElement,\n Omit<TextProps<\"label\">, \"as\">\n>(function Label({ children, ...rest }, ref) {\n return (\n <Text as=\"label\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","Label","Text"],"mappings":";;;;;;AAGO,MAAM,KAAA,GAAQA,iBAGnB,SAASC,MAAAA,CAAM,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC3C,EAAA,sCACGC,SAAA,EAAA,EAAK,EAAA,EAAG,SAAQ,GAAA,EAAW,GAAG,MAC5B,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../src/text/Text.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 type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n} from \"../utils\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"display4\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n * @deprecated Use `color` instead\n */\n variant?: \"primary\" | \"secondary\";\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant,\n color: colorProp,\n ...restProps\n }: TextProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as ?? \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n const color = variant ?? colorProp ?? \"primary\";\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs as string)]: styleAs,\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n {...restProps}\n ref={ref as PolymorphicRef<T>}\n style={textStyles}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../src/text/Text.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 type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n} from \"../utils\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"display4\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n * @deprecated Use `color` instead\n */\n variant?: \"primary\" | \"secondary\";\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant,\n color: colorProp,\n ...restProps\n }: TextProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as ?? \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n const color = variant ?? colorProp ?? \"primary\";\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs as string)]: styleAs,\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n {...restProps}\n ref={ref as PolymorphicRef<T>}\n style={textStyles}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAErC,MAAM,IAAA,GAAsBC,gBAAA,CAAW,SAASC,KAAAA,CAGrD;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,MAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AAExB,EAAA,MAAM,UAAA,GAAa,EAAE,iBAAA,EAAmB,OAAA,EAAS,GAAG,KAAA,EAAM;AAE1D,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AAEtC,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAA,EAAO,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAction.js","sources":["../src/text/TextAction.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const TextAction = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextAction({ children, ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs=\"action\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","TextAction","jsx","Text"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TextAction.js","sources":["../src/text/TextAction.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const TextAction = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextAction({ children, ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs=\"action\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","TextAction","jsx","Text"],"mappings":";;;;;;AAGO,MAAM,UAAA,GAAaA,iBAGxB,SAASC,WAAAA,CAAW,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAChD,EAAA,uBACEC,cAAA,CAACC,aAAK,EAAA,EAAG,MAAA,EAAO,SAAQ,QAAA,EAAS,GAAA,EAAW,GAAG,IAAA,EAC5C,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextNotation.js","sources":["../src/text/TextNotation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const TextNotation = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextNotation({ children, ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs=\"notation\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","TextNotation","jsx","Text"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"TextNotation.js","sources":["../src/text/TextNotation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nexport const TextNotation = forwardRef<\n HTMLSpanElement,\n Omit<TextProps<\"span\">, \"as\">\n>(function TextNotation({ children, ...rest }, ref) {\n return (\n <Text as=\"span\" styleAs=\"notation\" ref={ref} {...rest}>\n {children}\n </Text>\n );\n});\n"],"names":["forwardRef","TextNotation","jsx","Text"],"mappings":";;;;;;AAGO,MAAM,YAAA,GAAeA,iBAG1B,SAASC,aAAAA,CAAa,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAClD,EAAA,uBACEC,cAAA,CAACC,aAAK,EAAA,EAAG,MAAA,EAAO,SAAQ,UAAA,EAAW,GAAA,EAAW,GAAG,IAAA,EAC9C,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accent.js","sources":["../src/theme/Accent.ts"],"sourcesContent":["export const AccentValues = [\"blue\", \"teal\"] as const;\n/** @deprecated use `AccentValues` */\nexport const UNSTABLE_AccentValues = AccentValues;\n\nexport type Accent = (typeof AccentValues)[number];\n/** @deprecated use `Accent` */\nexport type UNSTABLE_Accent = Accent;\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Accent.js","sources":["../src/theme/Accent.ts"],"sourcesContent":["export const AccentValues = [\"blue\", \"teal\"] as const;\n/** @deprecated use `AccentValues` */\nexport const UNSTABLE_AccentValues = AccentValues;\n\nexport type Accent = (typeof AccentValues)[number];\n/** @deprecated use `Accent` */\nexport type UNSTABLE_Accent = Accent;\n"],"names":[],"mappings":";;AAAO,MAAM,YAAA,GAAe,CAAC,MAAA,EAAQ,MAAM;AAEpC,MAAM,qBAAA,GAAwB;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionFont.js","sources":["../src/theme/ActionFont.ts"],"sourcesContent":["export const ActionFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated use `ActionFontValues` */\nexport const UNSTABLE_ActionFontValues = ActionFontValues;\n\nexport type ActionFont = (typeof ActionFontValues)[number];\n/** @deprecated use `ActionFont` */\nexport type UNSTABLE_ActionFont = ActionFont;\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"ActionFont.js","sources":["../src/theme/ActionFont.ts"],"sourcesContent":["export const ActionFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated use `ActionFontValues` */\nexport const UNSTABLE_ActionFontValues = ActionFontValues;\n\nexport type ActionFont = (typeof ActionFontValues)[number];\n/** @deprecated use `ActionFont` */\nexport type UNSTABLE_ActionFont = ActionFont;\n"],"names":[],"mappings":";;AAAO,MAAM,gBAAA,GAAmB,CAAC,WAAA,EAAa,WAAW;AAElD,MAAM,yBAAA,GAA4B;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Corner.js","sources":["../src/theme/Corner.ts"],"sourcesContent":["export const CornerValues = [\"sharp\", \"rounded\"] as const;\n/** @deprecated use `CornerValues` */\nexport const UNSTABLE_CornerValues = CornerValues;\n\nexport type Corner = (typeof CornerValues)[number];\n/** @deprecated Use `Corner` */\nexport type UNSTABLE_Corner = Corner;\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Corner.js","sources":["../src/theme/Corner.ts"],"sourcesContent":["export const CornerValues = [\"sharp\", \"rounded\"] as const;\n/** @deprecated use `CornerValues` */\nexport const UNSTABLE_CornerValues = CornerValues;\n\nexport type Corner = (typeof CornerValues)[number];\n/** @deprecated Use `Corner` */\nexport type UNSTABLE_Corner = Corner;\n"],"names":[],"mappings":";;AAAO,MAAM,YAAA,GAAe,CAAC,OAAA,EAAS,SAAS;AAExC,MAAM,qBAAA,GAAwB;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Density.js","sources":["../src/theme/Density.ts"],"sourcesContent":["export const DensityValues = [\"high\", \"medium\", \"low\", \"touch\"] as const;\n\nexport type Density = (typeof DensityValues)[number];\n"],"names":[],"mappings":";;AAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Density.js","sources":["../src/theme/Density.ts"],"sourcesContent":["export const DensityValues = [\"high\", \"medium\", \"low\", \"touch\"] as const;\n\nexport type Density = (typeof DensityValues)[number];\n"],"names":[],"mappings":";;AAAO,MAAM,aAAA,GAAgB,CAAC,MAAA,EAAQ,QAAA,EAAU,OAAO,OAAO;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeadingFont.js","sources":["../src/theme/HeadingFont.ts"],"sourcesContent":["export const HeadingFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated use `HeadingFontValues` */\nexport const UNSTABLE_HeadingFontValues = HeadingFontValues;\n\nexport type HeadingFont = (typeof HeadingFontValues)[number];\n/** @deprecated Use `HeadingFont` */\nexport type UNSTABLE_HeadingFont = HeadingFont;\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"HeadingFont.js","sources":["../src/theme/HeadingFont.ts"],"sourcesContent":["export const HeadingFontValues = [\"Open Sans\", \"Amplitude\"] as const;\n/** @deprecated use `HeadingFontValues` */\nexport const UNSTABLE_HeadingFontValues = HeadingFontValues;\n\nexport type HeadingFont = (typeof HeadingFontValues)[number];\n/** @deprecated Use `HeadingFont` */\nexport type UNSTABLE_HeadingFont = HeadingFont;\n"],"names":[],"mappings":";;AAAO,MAAM,iBAAA,GAAoB,CAAC,WAAA,EAAa,WAAW;AAEnD,MAAM,0BAAA,GAA6B;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mode.js","sources":["../src/theme/Mode.ts"],"sourcesContent":["export const ModeValues = [\"light\", \"dark\"] as const;\n\nexport type Mode = (typeof ModeValues)[number];\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Mode.js","sources":["../src/theme/Mode.ts"],"sourcesContent":["export const ModeValues = [\"light\", \"dark\"] as const;\n\nexport type Mode = (typeof ModeValues)[number];\n"],"names":[],"mappings":";;AAAO,MAAM,UAAA,GAAa,CAAC,OAAA,EAAS,MAAM;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n | \"accent\"\n | \"actionable\"\n | \"container\"\n | \"draggable\" /* **deprecated** */\n | \"editable\"\n | \"focused\"\n | \"measured\"\n | \"navigable\"\n | \"overlayable\"\n | \"selectable\"\n | \"separable\"\n | \"status\"\n | \"taggable\"\n | \"target\"\n | \"text\"\n | \"differential\" /* **deprecated** */;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n themeName: ThemeName,\n characteristicName: characteristic,\n variant: string,\n scopeElement?: HTMLElement,\n): string | null => {\n const cssVariableName = `--salt-${characteristicName}-${variant}`;\n const scopeTarget =\n scopeElement || document.body.querySelector(`.${themeName}`);\n if (scopeTarget) {\n const style = getComputedStyle(scopeTarget);\n const variableValue = style.getPropertyValue(cssVariableName);\n if (variableValue) {\n return variableValue;\n }\n }\n return null;\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,
|
|
1
|
+
{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n | \"accent\"\n | \"actionable\"\n | \"container\"\n | \"draggable\" /* **deprecated** */\n | \"editable\"\n | \"focused\"\n | \"measured\"\n | \"navigable\"\n | \"overlayable\"\n | \"selectable\"\n | \"separable\"\n | \"status\"\n | \"taggable\"\n | \"target\"\n | \"text\"\n | \"differential\" /* **deprecated** */;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n themeName: ThemeName,\n characteristicName: characteristic,\n variant: string,\n scopeElement?: HTMLElement,\n): string | null => {\n const cssVariableName = `--salt-${characteristicName}-${variant}`;\n const scopeTarget =\n scopeElement || document.body.querySelector(`.${themeName}`);\n if (scopeTarget) {\n const style = getComputedStyle(scopeTarget);\n const variableValue = style.getPropertyValue(cssVariableName);\n if (variableValue) {\n return variableValue;\n }\n }\n return null;\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,sBAAA,GAAyB,CACpC,SAAA,EACA,kBAAA,EACA,SACA,YAAA,KACkB;AAClB,EAAA,MAAM,eAAA,GAAkB,CAAA,OAAA,EAAU,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAC/D,EAAA,MAAM,cACJ,YAAA,IAAgB,QAAA,CAAS,KAAK,aAAA,CAAc,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAA;AAC7D,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,MAAM,KAAA,GAAQ,iBAAiB,WAAW,CAAA;AAC1C,IAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,gBAAA,CAAiB,eAAe,CAAA;AAC5D,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,OAAO,aAAA;AAAA,IACT;AAAA,EACF;AACA,EAAA,OAAO,IAAA;AACT;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.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 {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactElement,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n /**\n * (Optional) if provided, this icon component will be used instead of the status icon\n */\n icon?: ReactElement<IconProps>;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const { children, className, status, icon, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n {status && (\n <div className={withBaseName(\"iconContainer\")}>\n {icon ? icon : <StatusIndicator status={status} />}\n </div>\n )}\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Toast","useWindow","useComponentCssInjection","toastCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAatC,MAAM,
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.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 {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactElement,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n /**\n * (Optional) if provided, this icon component will be used instead of the status icon\n */\n icon?: ReactElement<IconProps>;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const { children, className, status, icon, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n {status && (\n <div className={withBaseName(\"iconContainer\")}>\n {icon ? icon : <StatusIndicator status={status} />}\n </div>\n )}\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Toast","useWindow","useComponentCssInjection","toastCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAatC,MAAM,KAAA,GAAQC,gBAAA;AAAA,EACnB,SAASC,MAAAA,CAAM,KAAA,EAAO,GAAA,EAAK;AACzB,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,IAAA,EAAM,GAAG,MAAK,GAAI,KAAA;AACvD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,YAAA;AAAA,MACR,GAAA,EAAKC,OAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAA,EAAO;AAAA,UACvC;AAAA,SACF;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,MAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,eAAe,CAAA,EACzC,QAAA,EAAA,IAAA,GAAO,IAAA,mBAAOA,cAAA,CAACC,+BAAA,EAAA,EAAgB,MAAA,EAAgB,CAAA,EAClD,CAAA;AAAA,UAED;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ForwardedRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToastContent","useWindow","useComponentCssInjection","toastContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ForwardedRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToastContent","useWindow","useComponentCssInjection","toastContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAS7C,MAAM,YAAA,GAAeC,gBAAA,CAAW,SAASC,aAAAA,CAC9C,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EACpC,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKC,cAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC7D,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type MouseEvent,\n useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The appearance of the toggle button when `selected` is true.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * Callback fired when the toggle button's selection state is changed.\n */\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button will be read-only.\n */\n readOnly?: boolean;\n /**\n * The sentiment of the toggle button.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n /**\n * Whether the toggle button is in a selected state.\n */\n selected?: boolean;\n /**\n * Whether the toggle button is selected by default.\n * This will be disregarded if `selected` is already set.\n */\n defaultSelected?: boolean;\n /**\n * Value of the toggle button, to be used when in a controlled state.\n */\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n appearance: appearanceProp,\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n readOnly: readOnlyProp,\n selected: selectedProp,\n defaultSelected,\n sentiment: sentimenentProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n\n const sentiment =\n sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n const appearance =\n appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(defaultSelected),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const toggleButtonProps: ToggleButtonProps = {\n \"aria-readonly\": readOnlyProp,\n \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n \"aria-checked\": toggleButtonGroup ? selected : undefined,\n \"aria-disabled\": disabled,\n role: toggleButtonGroup ? \"radio\" : undefined,\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(appearance),\n readOnly && withBaseName(\"readOnly\"),\n className,\n ),\n onClick: handleClick,\n onFocus: handleFocus,\n tabIndex: focusable ? 0 : -1,\n value: value,\n type: \"button\",\n disabled: disabled,\n readOnly: readOnlyProp,\n ...rest,\n };\n\n return (\n <button ref={handleRef} {...toggleButtonProps}>\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAkDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,
|
|
1
|
+
{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type MouseEvent,\n useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The appearance of the toggle button when `selected` is true.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * Callback fired when the toggle button's selection state is changed.\n */\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button will be read-only.\n */\n readOnly?: boolean;\n /**\n * The sentiment of the toggle button.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n /**\n * Whether the toggle button is in a selected state.\n */\n selected?: boolean;\n /**\n * Whether the toggle button is selected by default.\n * This will be disregarded if `selected` is already set.\n */\n defaultSelected?: boolean;\n /**\n * Value of the toggle button, to be used when in a controlled state.\n */\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n appearance: appearanceProp,\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n readOnly: readOnlyProp,\n selected: selectedProp,\n defaultSelected,\n sentiment: sentimenentProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n\n const sentiment =\n sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n const appearance =\n appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(defaultSelected),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const toggleButtonProps: ToggleButtonProps = {\n \"aria-readonly\": readOnlyProp,\n \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n \"aria-checked\": toggleButtonGroup ? selected : undefined,\n \"aria-disabled\": disabled,\n role: toggleButtonGroup ? \"radio\" : undefined,\n className: clsx(\n withBaseName(),\n withBaseName(sentiment),\n withBaseName(appearance),\n readOnly && withBaseName(\"readOnly\"),\n className,\n ),\n onClick: handleClick,\n onFocus: handleFocus,\n tabIndex: focusable ? 0 : -1,\n value: value,\n type: \"button\",\n disabled: disabled,\n readOnly: readOnlyProp,\n ...rest,\n };\n\n return (\n <button ref={handleRef} {...toggleButtonProps}>\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAkDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,UAAA,EAAY,cAAA;AAAA,MACZ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,QAAA,EAAU,YAAA;AAAA,MACV,eAAA;AAAA,MACA,SAAA,EAAW,eAAA;AAAA,MACX,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAA,GAAYC,aAA0B,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,SAAS,CAAA;AAE3C,IAAA,MAAM,oBAAoBC,6CAAA,EAAqB;AAE/C,IAAA,MAAM,yBAAA,GAA4B,iBAAA,GAC9B,iBAAA,CAAkB,UAAA,CAAW,KAAK,CAAA,GAClC,YAAA;AACJ,IAAA,MAAM,SAAA,GAAY,iBAAA,GACd,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,SAAA,CAAU,KAAA,CAAA,GAC7B,IAAA;AAEJ,IAAA,MAAM,SAAA,GACJ,eAAA,KAAmB,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,SAAA,CAAA,IAAa,SAAA;AACrD,IAAA,MAAM,UAAA,GACJ,cAAA,KAAkB,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,UAAA,CAAA,IAAc,OAAA;AACrD,IAAA,MAAM,QAAA,GAAA,CAAW,uDAAmB,QAAA,KAAY,YAAA;AAChD,IAAA,MAAM,QAAA,GAAA,CAAW,uDAAmB,QAAA,KAAY,YAAA;AAEhD,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAA,CAAc;AAAA,MAC5C,UAAA,EAAY,yBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAA,EAAM,cAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,IAAI,YAAY,QAAA,EAAU;AACxB,QAAA;AAAA,MACF;AACA,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,MAAA,CAAO,KAAA,CAAA;AAC1B,MAAA,WAAA,CAAY,CAAC,QAAQ,CAAA;AACrB,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AACX,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,KAAA,CAAM,KAAA,CAAA;AACzB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ,CAAA;AAEA,IAAA,MAAM,iBAAA,GAAuC;AAAA,MAC3C,eAAA,EAAiB,YAAA;AAAA,MACjB,cAAA,EAAgB,CAAC,iBAAA,GAAoB,QAAA,GAAW,MAAA;AAAA,MAChD,cAAA,EAAgB,oBAAoB,QAAA,GAAW,MAAA;AAAA,MAC/C,eAAA,EAAiB,QAAA;AAAA,MACjB,IAAA,EAAM,oBAAoB,OAAA,GAAU,MAAA;AAAA,MACpC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,aAAa,UAAU,CAAA;AAAA,QACvB,QAAA,IAAY,aAAa,UAAU,CAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,OAAA,EAAS,WAAA;AAAA,MACT,QAAA,EAAU,YAAY,CAAA,GAAI,EAAA;AAAA,MAC1B,KAAA;AAAA,MACA,IAAA,EAAM,QAAA;AAAA,MACN,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,GAAG;AAAA,KACL;AAEA,IAAA,sCACG,QAAA,EAAA,EAAO,GAAA,EAAK,SAAA,EAAY,GAAG,mBACzB,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport {\n makePrefixer,\n ownerDocument,\n useControlled,\n useForkRef,\n} from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n ToggleButtonGroupContext,\n type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The appearance of all the toggle buttons within the group.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * Value of the toggle button group, to be used when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button group will be read-only.\n */\n readOnly?: boolean;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The visual sentimenent of all the toggle buttons within the group.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n appearance,\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n readOnly,\n sentiment,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value],\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value],\n );\n\n const focus = useCallback((id: Value) => {\n setFocused(id);\n }, []);\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused],\n );\n\n const contextValue = useMemo(\n () => ({\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n }),\n [\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n ],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n );\n\n const doc = ownerDocument(groupRef.current);\n\n const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n aria-disabled={disabled}\n aria-readonly={readOnly}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n disabled && withBaseName(\"disabled\"),\n readOnly && withBaseName(\"readOnly\"),\n className,\n )}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","ownerDocument","jsx","ToggleButtonGroupContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAiEA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,MAAM,
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type KeyboardEvent,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport {\n makePrefixer,\n ownerDocument,\n useControlled,\n useForkRef,\n} from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n ToggleButtonGroupContext,\n type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The appearance of all the toggle buttons within the group.\n * @default solid\n */\n appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * Value of the toggle button group, to be used when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * If `true`, the toggle button group will be read-only.\n */\n readOnly?: boolean;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The visual sentimenent of all the toggle buttons within the group.\n * @default neutral\n */\n sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n appearance,\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n readOnly,\n sentiment,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value],\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value],\n );\n\n const focus = useCallback((id: Value) => {\n setFocused(id);\n }, []);\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused],\n );\n\n const contextValue = useMemo(\n () => ({\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n }),\n [\n appearance,\n disabled,\n focus,\n isFocused,\n isSelected,\n orientation,\n readOnly,\n select,\n sentiment,\n ],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n );\n\n const doc = ownerDocument(groupRef.current);\n\n const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n aria-disabled={disabled}\n aria-readonly={readOnly}\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n disabled && withBaseName(\"disabled\"),\n readOnly && withBaseName(\"readOnly\"),\n className,\n )}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","ownerDocument","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
|