@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":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {}\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: FormFieldHelperTextProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-helper-text\",\n css: formFieldHelperTextCss,\n window: targetWindow,\n });\n\n const { a11yProps, disabled, readOnly, validationStatus } =\n useFormFieldProps();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className,\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={validationStatus}\n />\n )}\n <Text\n disabled={disabled}\n id={a11yProps?.[\"aria-describedby\"]}\n styleAs=\"label\"\n color={validationStatus ?? \"secondary\"}\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","clsx","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,
|
|
1
|
+
{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {}\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: FormFieldHelperTextProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-helper-text\",\n css: formFieldHelperTextCss,\n window: targetWindow,\n });\n\n const { a11yProps, disabled, readOnly, validationStatus } =\n useFormFieldProps();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className,\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={validationStatus}\n />\n )}\n <Text\n disabled={disabled}\n id={a11yProps?.[\"aria-describedby\"]}\n styleAs=\"label\"\n color={validationStatus ?? \"secondary\"}\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldHelperTextCss","useFormFieldProps","jsxs","clsx","jsx","StatusIndicator","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,yBAAyB,CAAA;AAKpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,6BAAA;AAAA,IACR,GAAA,EAAKC,qBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,QAAA,EAAU,gBAAA,KACrCC,mCAAA,EAAkB;AAEpB,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAA,EAAiB;AAAA,QACrD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,CAAC,QAAA,IAAY,CAAC,QAAA,IAAY,gBAAA,oBACzBC,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,wBAEFD,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,IAAI,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,kBAAA,CAAA;AAAA,YAChB,OAAA,EAAQ,OAAA;AAAA,YACR,OAAO,gBAAA,IAAoB,WAAA;AAAA,YAC1B,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
|
|
3
|
+
var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FormFieldLabel.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n /**\n * Intent for the label.\n *\n * Defaults to \"label\"\n * Using \"sentence\" gives more prominent styling\n */\n intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n className,\n children,\n intent = \"label\",\n onClick,\n ...restProps\n}: FormFieldLabelProps) => {\n const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-label\",\n css: formFieldLabelCss,\n window: targetWindow,\n });\n\n const id = a11yProps?.[\"aria-labelledby\"];\n\n const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n if (formFieldRef?.current) {\n const element = formFieldRef.current.querySelector<HTMLElement>(\n `[aria-labelledby*=\"${id}\"]`,\n );\n element?.focus();\n element?.click();\n }\n onClick?.(event);\n };\n\n const necessityLabel = necessity\n ? necessity === \"asterisk\"\n ? \" *\"\n : ` (${capitalize(necessity)})`\n : undefined;\n\n return (\n <Label\n className={clsx(withBaseName(), withBaseName(intent), className)}\n id={id}\n disabled={disabled}\n variant=\"secondary\"\n onClick={handleClick}\n {...restProps}\n >\n {children}\n {necessityLabel && (\n <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n )}\n </Label>\n );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,
|
|
1
|
+
{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { MouseEvent } from \"react\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n /**\n * Intent for the label.\n *\n * Defaults to \"label\"\n * Using \"sentence\" gives more prominent styling\n */\n intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n className,\n children,\n intent = \"label\",\n onClick,\n ...restProps\n}: FormFieldLabelProps) => {\n const { a11yProps, disabled, necessity, formFieldRef } = useFormFieldProps();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-label\",\n css: formFieldLabelCss,\n window: targetWindow,\n });\n\n const id = a11yProps?.[\"aria-labelledby\"];\n\n const handleClick = (event: MouseEvent<HTMLLabelElement>) => {\n if (formFieldRef?.current) {\n const element = formFieldRef.current.querySelector<HTMLElement>(\n `[aria-labelledby*=\"${id}\"]`,\n );\n element?.focus();\n element?.click();\n }\n onClick?.(event);\n };\n\n const necessityLabel = necessity\n ? necessity === \"asterisk\"\n ? \" *\"\n : ` (${capitalize(necessity)})`\n : undefined;\n\n return (\n <Label\n className={clsx(withBaseName(), withBaseName(intent), className)}\n id={id}\n disabled={disabled}\n variant=\"secondary\"\n onClick={handleClick}\n {...restProps}\n >\n {children}\n {necessityLabel && (\n <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n )}\n </Label>\n );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,YAAA,KAAiBC,mCAAA,EAAkB;AAC3E,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKC,gBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,KAAK,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,iBAAA,CAAA;AAEvB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,IAAI,6CAAc,OAAA,EAAS;AACzB,MAAA,MAAM,OAAA,GAAU,aAAa,OAAA,CAAQ,aAAA;AAAA,QACnC,sBAAsB,EAAE,CAAA,EAAA;AAAA,OAC1B;AACA,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AACT,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,KAAA,EAAA;AAAA,IACX;AACA,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,YACnB,SAAA,KAAc,UAAA,GACZ,OACA,CAAA,EAAA,EAAKC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAA,CAAA,GAC5B,MAAA;AAEJ,EAAA,uBACEC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA,CAAK,YAAA,IAAgB,YAAA,CAAa,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA,EAAQ,WAAA;AAAA,MACR,OAAA,EAAS,WAAA;AAAA,MACR,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,kCACCC,cAAA,CAAC,MAAA,EAAA,EAAK,WAAW,YAAA,CAAa,gBAAgB,GAAI,QAAA,EAAA,cAAA,EAAe;AAAA;AAAA;AAAA,GAErE;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n necessity: NecessityType | undefined;\n readOnly: boolean;\n validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n formFieldRef?: RefObject<HTMLDivElement>;\n}\n\nexport const FormFieldContext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextValue,\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;AA8BO,MAAM,
|
|
1
|
+
{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n necessity: NecessityType | undefined;\n readOnly: boolean;\n validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n formFieldRef?: RefObject<HTMLDivElement>;\n}\n\nexport const FormFieldContext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextValue,\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;AA8BO,MAAM,gBAAA,GAAmBA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormFieldProps.js","sources":["../src/form-field-context/useFormFieldProps.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n FormFieldContext,\n type FormFieldContextValue,\n} from \"./FormFieldContext\";\n\nexport function useFormFieldProps(): Partial<FormFieldContextValue> {\n return useContext(FormFieldContext) || {};\n}\n"],"names":["useContext","FormFieldContext"],"mappings":";;;;;AAMO,SAAS,
|
|
1
|
+
{"version":3,"file":"useFormFieldProps.js","sources":["../src/form-field-context/useFormFieldProps.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n FormFieldContext,\n type FormFieldContextValue,\n} from \"./FormFieldContext\";\n\nexport function useFormFieldProps(): Partial<FormFieldContextValue> {\n return useContext(FormFieldContext) || {};\n}\n"],"names":["useContext","FormFieldContext"],"mappings":";;;;;AAMO,SAAS,iBAAA,GAAoD;AAClE,EAAA,OAAOA,gBAAA,CAAWC,iCAAgB,CAAA,IAAK,EAAC;AAC1C;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\n\nexport const GRID_ALIGNMENT_BASE = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * The item will span across the provided number of grid columns. Defaults to \"auto\"\n */\n colSpan?: ResponsiveProp<GridProperty>;\n /**\n * The item will span across the provided number of grid rows. Defaults to \"auto\"\n */\n rowSpan?: ResponsiveProp<GridProperty>;\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridAlignment;\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridAlignment;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n props: GridItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const GridItem: GridItemComponent = forwardRef(function GridItem<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n margin = 0,\n padding = 0,\n colSpan = \"auto\",\n rowSpan = \"auto\",\n horizontalAlignment = \"stretch\",\n verticalAlignment = \"stretch\",\n style,\n ...rest\n }: GridItemProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-item\",\n css: gridItemCss,\n window: targetWindow,\n });\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const Component = as || \"div\";\n const gridItemColSpan = resolveResponsiveValue(colSpan, matchedBreakpoints);\n\n const gridItemRowSpan = resolveResponsiveValue(rowSpan, matchedBreakpoints);\n const gridItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n const gridItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n const gridColumnStart = gridItemColSpan\n ? `span ${gridItemColSpan}`\n : colStart;\n\n const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n const gridStyles = {\n \"--gridItem-margin\": parseSpacing(gridItemMargin),\n \"--gridItem-padding\": parseSpacing(gridItemPadding),\n ...style,\n \"--gridItem-justifySelf\": horizontalAlignment,\n \"--gridItem-alignSelf\": verticalAlignment,\n \"--gridItem-gridRowStart\": gridRowStart,\n \"--gridItem-gridColumnStart\": gridColumnStart,\n \"--gridItem-gridRowEnd\": gridRowEnd,\n \"--gridItem-gridColumnEnd\": gridColumnEnd,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridStyles}\n ref={ref as PolymorphicRef<T>}\n {...rest}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","GridItem","useWindow","useComponentCssInjection","gridItemCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBO,MAAM,
|
|
1
|
+
{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\n\nexport const GRID_ALIGNMENT_BASE = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * The item will span across the provided number of grid columns. Defaults to \"auto\"\n */\n colSpan?: ResponsiveProp<GridProperty>;\n /**\n * The item will span across the provided number of grid rows. Defaults to \"auto\"\n */\n rowSpan?: ResponsiveProp<GridProperty>;\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridAlignment;\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridAlignment;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n props: GridItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const GridItem: GridItemComponent = forwardRef(function GridItem<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n margin = 0,\n padding = 0,\n colSpan = \"auto\",\n rowSpan = \"auto\",\n horizontalAlignment = \"stretch\",\n verticalAlignment = \"stretch\",\n style,\n ...rest\n }: GridItemProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-item\",\n css: gridItemCss,\n window: targetWindow,\n });\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const Component = as || \"div\";\n const gridItemColSpan = resolveResponsiveValue(colSpan, matchedBreakpoints);\n\n const gridItemRowSpan = resolveResponsiveValue(rowSpan, matchedBreakpoints);\n const gridItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n const gridItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n const gridColumnStart = gridItemColSpan\n ? `span ${gridItemColSpan}`\n : colStart;\n\n const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n const gridStyles = {\n \"--gridItem-margin\": parseSpacing(gridItemMargin),\n \"--gridItem-padding\": parseSpacing(gridItemPadding),\n ...style,\n \"--gridItem-justifySelf\": horizontalAlignment,\n \"--gridItem-alignSelf\": verticalAlignment,\n \"--gridItem-gridRowStart\": gridRowStart,\n \"--gridItem-gridColumnStart\": gridColumnStart,\n \"--gridItem-gridRowEnd\": gridRowEnd,\n \"--gridItem-gridColumnEnd\": gridColumnEnd,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridStyles}\n ref={ref as PolymorphicRef<T>}\n {...rest}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","GridItem","useWindow","useComponentCssInjection","gridItemCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBO,MAAM,mBAAA,GAAsB;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAoCA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEhD,MAAM,QAAA,GAAW,MAAA;AACjB,MAAM,MAAA,GAAS,MAAA;AACf,MAAM,QAAA,GAAW,MAAA;AACjB,MAAM,MAAA,GAAS,MAAA;AAMR,MAAM,QAAA,GAA8BC,gBAAA,CAAW,SAASC,SAAAA,CAG7D;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA,GAAS,CAAA;AAAA,EACT,OAAA,GAAU,CAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,mBAAA,GAAsB,SAAA;AAAA,EACtB,iBAAA,GAAoB,SAAA;AAAA,EACpB,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,kBAAA,EAAmB,GAAIC,gCAAA,EAAc;AAE7C,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AACxB,EAAA,MAAM,eAAA,GAAkBC,wCAAA,CAAuB,OAAA,EAAS,kBAAkB,CAAA;AAE1E,EAAA,MAAM,eAAA,GAAkBA,wCAAA,CAAuB,OAAA,EAAS,kBAAkB,CAAA;AAC1E,EAAA,MAAM,cAAA,GAAiBA,wCAAA,CAAuB,MAAA,EAAQ,kBAAkB,CAAA;AACxE,EAAA,MAAM,eAAA,GAAkBA,wCAAA,CAAuB,OAAA,EAAS,kBAAkB,CAAA;AAC1E,EAAA,MAAM,eAAA,GAAkB,eAAA,GACpB,CAAA,KAAA,EAAQ,eAAe,CAAA,CAAA,GACvB,QAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,eAAA,GAAkB,CAAA,KAAA,EAAQ,eAAe,CAAA,CAAA,GAAK,MAAA;AAEpE,EAAA,MAAM,YAAA,GAAe,eAAA,GAAkB,CAAA,KAAA,EAAQ,eAAe,CAAA,CAAA,GAAK,QAAA;AAEnE,EAAA,MAAM,UAAA,GAAa,eAAA,GAAkB,CAAA,KAAA,EAAQ,eAAe,CAAA,CAAA,GAAK,MAAA;AAEjE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,mBAAA,EAAqBC,0BAAa,cAAc,CAAA;AAAA,IAChD,oBAAA,EAAsBA,0BAAa,eAAe,CAAA;AAAA,IAClD,GAAG,KAAA;AAAA,IACH,wBAAA,EAA0B,mBAAA;AAAA,IAC1B,sBAAA,EAAwB,iBAAA;AAAA,IACxB,yBAAA,EAA2B,YAAA;AAAA,IAC3B,4BAAA,EAA8B,eAAA;AAAA,IAC9B,uBAAA,EAAyB,UAAA;AAAA,IACzB,0BAAA,EAA4B;AAAA,GAC9B;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA,EAAO,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport gridLayoutCss from \"./GridLayout.css\";\n\nexport type GridLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Number of columns to be displayed. Defaults to 12\n */\n columns?: ResponsiveProp<number | string>;\n /**\n * Number of rows to be displayed. Defaults to 1\n */\n rows?: ResponsiveProp<number | string>;\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n */\n gap?: ResponsiveProp<number | string>;\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n */\n columnGap?: ResponsiveProp<number | string>;\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n */\n rowGap?: ResponsiveProp<number | string>;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n props: GridLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nfunction parseGridValue(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `repeat(${value}, 1fr)`;\n}\n\nexport const GridLayout: GridLayoutComponent = forwardRef(function GridLayout<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n columns = 12,\n rows = 1,\n gap = 3,\n margin = 0,\n padding = 0,\n columnGap,\n rowGap,\n style,\n ...rest\n }: GridLayoutProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-layout\",\n css: gridLayoutCss,\n window: targetWindow,\n });\n const Component = as || \"div\";\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const gridColumns = resolveResponsiveValue(columns, matchedBreakpoints);\n\n const gridRows = resolveResponsiveValue(rows, matchedBreakpoints);\n\n const gridGap = resolveResponsiveValue(gap, matchedBreakpoints);\n\n const gridColumnGap = resolveResponsiveValue(columnGap, matchedBreakpoints);\n\n const gridRowGap = resolveResponsiveValue(rowGap, matchedBreakpoints);\n const gridMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n const gridPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n const gridLayoutStyles = {\n \"--gridLayout-margin\": parseSpacing(gridMargin),\n \"--gridLayout-padding\": parseSpacing(gridPadding),\n ...style,\n \"--gridLayout-columns\": parseGridValue(gridColumns),\n \"--gridLayout-rows\": parseGridValue(gridRows),\n \"--gridLayout-columnGap\": parseSpacing(gridColumnGap ?? gridGap),\n \"--gridLayout-rowGap\": parseSpacing(gridRowGap ?? gridGap),\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridLayoutStyles}\n ref={ref as PolymorphicRef<T>}\n {...rest}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","GridLayout","useWindow","useComponentCssInjection","gridLayoutCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAElD,SAAS,eAAe,
|
|
1
|
+
{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport gridLayoutCss from \"./GridLayout.css\";\n\nexport type GridLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Number of columns to be displayed. Defaults to 12\n */\n columns?: ResponsiveProp<number | string>;\n /**\n * Number of rows to be displayed. Defaults to 1\n */\n rows?: ResponsiveProp<number | string>;\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n */\n gap?: ResponsiveProp<number | string>;\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n */\n columnGap?: ResponsiveProp<number | string>;\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n */\n rowGap?: ResponsiveProp<number | string>;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n props: GridLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nfunction parseGridValue(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `repeat(${value}, 1fr)`;\n}\n\nexport const GridLayout: GridLayoutComponent = forwardRef(function GridLayout<\n T extends ElementType = \"div\",\n>(\n {\n as,\n children,\n className,\n columns = 12,\n rows = 1,\n gap = 3,\n margin = 0,\n padding = 0,\n columnGap,\n rowGap,\n style,\n ...rest\n }: GridLayoutProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-layout\",\n css: gridLayoutCss,\n window: targetWindow,\n });\n const Component = as || \"div\";\n\n const { matchedBreakpoints } = useBreakpoint();\n\n const gridColumns = resolveResponsiveValue(columns, matchedBreakpoints);\n\n const gridRows = resolveResponsiveValue(rows, matchedBreakpoints);\n\n const gridGap = resolveResponsiveValue(gap, matchedBreakpoints);\n\n const gridColumnGap = resolveResponsiveValue(columnGap, matchedBreakpoints);\n\n const gridRowGap = resolveResponsiveValue(rowGap, matchedBreakpoints);\n const gridMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n const gridPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n const gridLayoutStyles = {\n \"--gridLayout-margin\": parseSpacing(gridMargin),\n \"--gridLayout-padding\": parseSpacing(gridPadding),\n ...style,\n \"--gridLayout-columns\": parseGridValue(gridColumns),\n \"--gridLayout-rows\": parseGridValue(gridRows),\n \"--gridLayout-columnGap\": parseSpacing(gridColumnGap ?? gridGap),\n \"--gridLayout-rowGap\": parseSpacing(gridRowGap ?? gridGap),\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridLayoutStyles}\n ref={ref as PolymorphicRef<T>}\n {...rest}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","GridLayout","useWindow","useComponentCssInjection","gridLayoutCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AA2DA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAElD,SAAS,eAAe,KAAA,EAAoC;AAC1D,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,OAAO,KAAA,KAAU,QAAA,EAAU;AACpD,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,UAAU,KAAK,CAAA,MAAA,CAAA;AACxB;AAEO,MAAM,UAAA,GAAkCC,gBAAA,CAAW,SAASC,WAAAA,CAGjE;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA,GAAU,EAAA;AAAA,EACV,IAAA,GAAO,CAAA;AAAA,EACP,GAAA,GAAM,CAAA;AAAA,EACN,MAAA,GAAS,CAAA;AAAA,EACT,OAAA,GAAU,CAAA;AAAA,EACV,SAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,kBAAA;AAAA,IACR,GAAA,EAAKC,YAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AAExB,EAAA,MAAM,EAAE,kBAAA,EAAmB,GAAIC,gCAAA,EAAc;AAE7C,EAAA,MAAM,WAAA,GAAcC,wCAAA,CAAuB,OAAA,EAAS,kBAAkB,CAAA;AAEtE,EAAA,MAAM,QAAA,GAAWA,wCAAA,CAAuB,IAAA,EAAM,kBAAkB,CAAA;AAEhE,EAAA,MAAM,OAAA,GAAUA,wCAAA,CAAuB,GAAA,EAAK,kBAAkB,CAAA;AAE9D,EAAA,MAAM,aAAA,GAAgBA,wCAAA,CAAuB,SAAA,EAAW,kBAAkB,CAAA;AAE1E,EAAA,MAAM,UAAA,GAAaA,wCAAA,CAAuB,MAAA,EAAQ,kBAAkB,CAAA;AACpE,EAAA,MAAM,UAAA,GAAaA,wCAAA,CAAuB,MAAA,EAAQ,kBAAkB,CAAA;AACpE,EAAA,MAAM,WAAA,GAAcA,wCAAA,CAAuB,OAAA,EAAS,kBAAkB,CAAA;AACtE,EAAA,MAAM,gBAAA,GAAmB;AAAA,IACvB,qBAAA,EAAuBC,0BAAa,UAAU,CAAA;AAAA,IAC9C,sBAAA,EAAwBA,0BAAa,WAAW,CAAA;AAAA,IAChD,GAAG,KAAA;AAAA,IACH,sBAAA,EAAwB,eAAe,WAAW,CAAA;AAAA,IAClD,mBAAA,EAAqB,eAAe,QAAQ,CAAA;AAAA,IAC5C,wBAAA,EAA0BA,yBAAA,CAAa,aAAA,IAAiB,OAAO,CAAA;AAAA,IAC/D,qBAAA,EAAuBA,yBAAA,CAAa,UAAA,IAAc,OAAO;AAAA,GAC3D;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,KAAA,EAAO,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n id,\n inputProps = {},\n inputRef,\n placeholder,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n bordered = false,\n ...other\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input\",\n css: inputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: inputPropsRequired,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Input","useWindow","useComponentCssInjection","inputCss","useFormFieldProps","useState","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"input\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Alignment of text within container. Defaults to \"left\"\n */\n textAlign?: \"left\" | \"center\" | \"right\";\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n id,\n inputProps = {},\n inputRef,\n placeholder,\n readOnly: readOnlyProp,\n role,\n startAdornment,\n style,\n textAlign = \"left\",\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n bordered = false,\n ...other\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input\",\n css: inputCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnlyProp || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [focused, setFocused] = useState(false);\n\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: inputPropsRequired,\n ...restInputProps\n } = inputProps;\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : inputPropsRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const inputStyle = {\n \"--input-textAlign\": textAlign,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n classNameProp,\n )}\n ref={ref}\n style={inputStyle}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <input\n aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={inputRef}\n role={role}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restInputProps}\n required={isRequired}\n />\n {!isDisabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Input","useWindow","useComponentCssInjection","inputCss","useFormFieldProps","useState","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.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 MouseEvent,\n type SyntheticEvent,\n useRef,\n} from \"react\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n type InteractableCardValue,\n useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Accent border position: defaults to \"bottom\"\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * @deprecated Use the `accent` prop instead\n */\n accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Value of card (for selectable use case).\n */\n value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n HTMLDivElement,\n InteractableCardProps\n>(function InteractableCard(props, ref) {\n const {\n accent,\n accentPlacement,\n children,\n className,\n disabled: disabledProp,\n variant = \"primary\",\n value,\n onBlur,\n onChange,\n onClick,\n onKeyUp,\n onKeyDown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-interactable-card\",\n css: interactableCardCss,\n window: targetWindow,\n });\n\n const interactableCardGroup = useInteractableCardGroup();\n\n const interactableCardGroupSelected =\n interactableCardGroup?.isSelected(value);\n\n const disabled = interactableCardGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: interactableCardGroupSelected,\n default: Boolean(false),\n name: \"InteractableCard\",\n state: \"selected\",\n });\n\n const role = interactableCardGroup\n ? interactableCardGroup.multiSelect\n ? \"checkbox\"\n : \"radio\"\n : \"button\";\n\n const isMultiselect = interactableCardGroup?.multiSelect;\n\n const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n const ariaChecked =\n role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n const accentValue = accent || accentPlacement;\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (interactableCardGroup && !disabled) {\n interactableCardGroup.select(event, value);\n setSelected(!selected);\n }\n onChange?.(event);\n onClick?.(event);\n };\n\n let tabIndex: number;\n\n if (interactableCardGroup) {\n if (disabled) {\n tabIndex = -1;\n } else if (isMultiselect) {\n tabIndex = 0; // All items focusable in multi-select\n } else {\n // Single select: Only selected or first item (if none are selected) is focusable\n tabIndex = selected ? 0 : -1;\n if (!interactableCardGroup.value && isFirstChild) {\n tabIndex = 0;\n }\n }\n } else {\n tabIndex = disabled ? -1 : 0;\n }\n\n const cardRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, cardRef);\n\n const { active, cardProps } = useInteractableCard({\n disabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n return (\n // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n <div\n {...cardProps}\n role={role}\n aria-checked={ariaChecked}\n aria-disabled={disabled}\n data-value={value}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accentValue,\n [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n [withBaseName(\"active\")]: role === \"button\" && active,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"selected\")]: selected,\n },\n className,\n )}\n {...rest}\n onClick={handleClick}\n ref={handleRef}\n tabIndex={tabIndex}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useInteractableCard","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AA8BjD,MAAM,
|
|
1
|
+
{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.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 MouseEvent,\n type SyntheticEvent,\n useRef,\n} from \"react\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n type InteractableCardValue,\n useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\nimport { useInteractableCard } from \"./useInteractableCard\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Accent border position: defaults to \"bottom\"\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * @deprecated Use the `accent` prop instead\n */\n accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n /**\n * Value of card (for selectable use case).\n */\n value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n HTMLDivElement,\n InteractableCardProps\n>(function InteractableCard(props, ref) {\n const {\n accent,\n accentPlacement,\n children,\n className,\n disabled: disabledProp,\n variant = \"primary\",\n value,\n onBlur,\n onChange,\n onClick,\n onKeyUp,\n onKeyDown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-interactable-card\",\n css: interactableCardCss,\n window: targetWindow,\n });\n\n const interactableCardGroup = useInteractableCardGroup();\n\n const interactableCardGroupSelected =\n interactableCardGroup?.isSelected(value);\n\n const disabled = interactableCardGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: interactableCardGroupSelected,\n default: Boolean(false),\n name: \"InteractableCard\",\n state: \"selected\",\n });\n\n const role = interactableCardGroup\n ? interactableCardGroup.multiSelect\n ? \"checkbox\"\n : \"radio\"\n : \"button\";\n\n const isMultiselect = interactableCardGroup?.multiSelect;\n\n const isFirstChild = interactableCardGroup?.isFirstChild(value);\n\n const ariaChecked =\n role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n const accentValue = accent || accentPlacement;\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (interactableCardGroup && !disabled) {\n interactableCardGroup.select(event, value);\n setSelected(!selected);\n }\n onChange?.(event);\n onClick?.(event);\n };\n\n let tabIndex: number;\n\n if (interactableCardGroup) {\n if (disabled) {\n tabIndex = -1;\n } else if (isMultiselect) {\n tabIndex = 0; // All items focusable in multi-select\n } else {\n // Single select: Only selected or first item (if none are selected) is focusable\n tabIndex = selected ? 0 : -1;\n if (!interactableCardGroup.value && isFirstChild) {\n tabIndex = 0;\n }\n }\n } else {\n tabIndex = disabled ? -1 : 0;\n }\n\n const cardRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, cardRef);\n\n const { active, cardProps } = useInteractableCard({\n disabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n return (\n // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n <div\n {...cardProps}\n role={role}\n aria-checked={ariaChecked}\n aria-disabled={disabled}\n data-value={value}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accentValue,\n [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n [withBaseName(\"active\")]: role === \"button\" && active,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"selected\")]: selected,\n },\n className,\n )}\n {...rest}\n onClick={handleClick}\n ref={handleRef}\n tabIndex={tabIndex}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCard","useWindow","useComponentCssInjection","interactableCardCss","useInteractableCardGroup","useControlled","useRef","useForkRef","useInteractableCard","jsx","clsx","capitalize"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.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 useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport {\n makePrefixer,\n ownerDocument,\n useControlled,\n useForkRef,\n} from \"../utils\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\nimport {\n InteractableCardGroupContext,\n type InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\n\nexport interface InteractableCardGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n */\n defaultValue?: InteractableCardValue;\n /**\n * If `true`, the Interactable Card Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n */\n value?: InteractableCardValue;\n /**\n * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n */\n multiSelect?: boolean;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (\n event: SyntheticEvent<HTMLDivElement>,\n value: InteractableCardValue,\n ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n HTMLDivElement,\n InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n multiSelect,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-interactable-card-group\",\n css: interactableCardGroupCss,\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: \"InteractableCardGroup\",\n state: \"value\",\n });\n\n const [elements, setElements] = useState<HTMLElement[]>([]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: queries the dom when children changes.\n useEffect(() => {\n const childElements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\n \".saltInteractableCard:not([disabled])\",\n ) ?? [],\n );\n setElements(childElements);\n }, [children]);\n\n const select = useCallback(\n (\n event: SyntheticEvent<HTMLDivElement>,\n newValue: InteractableCardValue,\n ) => {\n if (multiSelect) {\n const currentValues = Array.isArray(value) ? value : [];\n const isSelected = currentValues.includes(newValue);\n\n const nextValues = isSelected\n ? currentValues.filter((val) => val !== newValue)\n : [...currentValues, newValue];\n setValue(nextValues);\n onChange?.(event, nextValues);\n } else {\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event, newValue);\n }\n }\n },\n [onChange, value, multiSelect],\n );\n\n const isSelected = useCallback(\n (cardValue: InteractableCardValue) =>\n multiSelect\n ? Array.isArray(value) && value.includes(cardValue)\n : cardValue !== undefined && value === cardValue,\n [value, multiSelect],\n );\n\n const isFirstChild = useCallback(\n (cardValue: InteractableCardValue) => {\n return (\n elements.findIndex(\n (element) => element.getAttribute(\"data-value\") === cardValue,\n ) === 0\n );\n },\n [elements],\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n isFirstChild,\n disabled,\n multiSelect,\n value,\n }),\n [select, isSelected, disabled, multiSelect, isFirstChild, value],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const doc = ownerDocument(groupRef.current);\n\n const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n const nextIndex = (currentIndex + 1) % elements.length;\n const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n if (event.key === \" \") {\n event.preventDefault();\n select(\n event,\n elements[currentIndex].getAttribute(\n \"data-value\",\n ) as InteractableCardValue,\n );\n }\n\n if (!multiSelect) {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n select(\n event,\n elements[nextIndex].getAttribute(\n \"data-value\",\n ) as InteractableCardValue,\n );\n elements[nextIndex]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n select(\n event,\n elements[prevIndex].getAttribute(\n \"data-value\",\n ) as InteractableCardValue,\n );\n elements[prevIndex]?.focus();\n break;\n }\n }\n onKeyDown?.(event);\n };\n\n return (\n <InteractableCardGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), className)}\n role={multiSelect ? \"group\" : \"radiogroup\"}\n onKeyDown={handleKeyDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </InteractableCardGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCardGroup","useWindow","useComponentCssInjection","interactableCardGroupCss","useRef","useForkRef","useControlled","useState","useEffect","useCallback","isSelected","useMemo","ownerDocument","jsx","InteractableCardGroupContext","clsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.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 useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport {\n makePrefixer,\n ownerDocument,\n useControlled,\n useForkRef,\n} from \"../utils\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\nimport {\n InteractableCardGroupContext,\n type InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\n\nexport interface InteractableCardGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n */\n defaultValue?: InteractableCardValue;\n /**\n * If `true`, the Interactable Card Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n */\n value?: InteractableCardValue;\n /**\n * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n */\n multiSelect?: boolean;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (\n event: SyntheticEvent<HTMLDivElement>,\n value: InteractableCardValue,\n ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n HTMLDivElement,\n InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n multiSelect,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-interactable-card-group\",\n css: interactableCardGroupCss,\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: \"InteractableCardGroup\",\n state: \"value\",\n });\n\n const [elements, setElements] = useState<HTMLElement[]>([]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: queries the dom when children changes.\n useEffect(() => {\n const childElements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\n \".saltInteractableCard:not([disabled])\",\n ) ?? [],\n );\n setElements(childElements);\n }, [children]);\n\n const select = useCallback(\n (\n event: SyntheticEvent<HTMLDivElement>,\n newValue: InteractableCardValue,\n ) => {\n if (multiSelect) {\n const currentValues = Array.isArray(value) ? value : [];\n const isSelected = currentValues.includes(newValue);\n\n const nextValues = isSelected\n ? currentValues.filter((val) => val !== newValue)\n : [...currentValues, newValue];\n setValue(nextValues);\n onChange?.(event, nextValues);\n } else {\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event, newValue);\n }\n }\n },\n [onChange, value, multiSelect],\n );\n\n const isSelected = useCallback(\n (cardValue: InteractableCardValue) =>\n multiSelect\n ? Array.isArray(value) && value.includes(cardValue)\n : cardValue !== undefined && value === cardValue,\n [value, multiSelect],\n );\n\n const isFirstChild = useCallback(\n (cardValue: InteractableCardValue) => {\n return (\n elements.findIndex(\n (element) => element.getAttribute(\"data-value\") === cardValue,\n ) === 0\n );\n },\n [elements],\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n isFirstChild,\n disabled,\n multiSelect,\n value,\n }),\n [select, isSelected, disabled, multiSelect, isFirstChild, value],\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const doc = ownerDocument(groupRef.current);\n\n const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n const nextIndex = (currentIndex + 1) % elements.length;\n const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n if (event.key === \" \") {\n event.preventDefault();\n select(\n event,\n elements[currentIndex].getAttribute(\n \"data-value\",\n ) as InteractableCardValue,\n );\n }\n\n if (!multiSelect) {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n select(\n event,\n elements[nextIndex].getAttribute(\n \"data-value\",\n ) as InteractableCardValue,\n );\n elements[nextIndex]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n select(\n event,\n elements[prevIndex].getAttribute(\n \"data-value\",\n ) as InteractableCardValue,\n );\n elements[prevIndex]?.focus();\n break;\n }\n }\n onKeyDown?.(event);\n };\n\n return (\n <InteractableCardGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), className)}\n role={multiSelect ? \"group\" : \"radiogroup\"}\n onKeyDown={handleKeyDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </InteractableCardGroupContext.Provider>\n );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCardGroup","useWindow","useComponentCssInjection","interactableCardGroupCss","useRef","useForkRef","useControlled","useState","useEffect","useCallback","isSelected","useMemo","ownerDocument","jsx","InteractableCardGroupContext","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InteractableCardGroupContext.js","sources":["../src/interactable-card/InteractableCardGroupContext.tsx"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type InteractableCardValue = string | readonly string[] | undefined;\n\nexport interface InteractableCardGroupContextValue {\n disabled?: boolean;\n select: (\n event: SyntheticEvent<HTMLDivElement>,\n value: InteractableCardValue,\n ) => void;\n isSelected: (id: InteractableCardValue) => boolean;\n isFirstChild: (value: InteractableCardValue) => boolean;\n multiSelect?: boolean;\n value: InteractableCardValue;\n}\n\nexport const InteractableCardGroupContext = createContext<\n InteractableCardGroupContextValue | undefined\n>(\"InteractableCardGroupContext\", undefined);\n\nexport function useInteractableCardGroup() {\n return useContext(InteractableCardGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"InteractableCardGroupContext.js","sources":["../src/interactable-card/InteractableCardGroupContext.tsx"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type InteractableCardValue = string | readonly string[] | undefined;\n\nexport interface InteractableCardGroupContextValue {\n disabled?: boolean;\n select: (\n event: SyntheticEvent<HTMLDivElement>,\n value: InteractableCardValue,\n ) => void;\n isSelected: (id: InteractableCardValue) => boolean;\n isFirstChild: (value: InteractableCardValue) => boolean;\n multiSelect?: boolean;\n value: InteractableCardValue;\n}\n\nexport const InteractableCardGroupContext = createContext<\n InteractableCardGroupContextValue | undefined\n>(\"InteractableCardGroupContext\", undefined);\n\nexport function useInteractableCardGroup() {\n return useContext(InteractableCardGroupContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAiBO,MAAM,4BAAA,GAA+BA,2BAAA,CAE1C,8BAAA,EAAgC,MAAS;AAEpC,SAAS,wBAAA,GAA2B;AACzC,EAAA,OAAOC,iBAAW,4BAA4B,CAAA;AAChD;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInteractableCard.js","sources":["../src/interactable-card/useInteractableCard.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface CardHookProps<T extends Element> {\n disabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface CardHookResult<T extends Element> {\n active: boolean;\n cardProps: {\n \"aria-disabled\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useInteractableCard = <T extends Element>({\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: CardHookProps<T>): CardHookResult<T> => {\n const [keyIsDown, setkeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button-like component\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space && active) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setkeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setkeyIsDown(event.key);\n event.preventDefault();\n setActive(true);\n onClick?.(event as unknown as MouseEvent<T>);\n }\n onKeyDown?.(event);\n };\n\n const cardProps = {\n \"aria-disabled\": disabled ? true : undefined,\n disabled: disabled,\n tabIndex: disabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n cardProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AA6BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,
|
|
1
|
+
{"version":3,"file":"useInteractableCard.js","sources":["../src/interactable-card/useInteractableCard.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface CardHookProps<T extends Element> {\n disabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface CardHookResult<T extends Element> {\n active: boolean;\n cardProps: {\n \"aria-disabled\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useInteractableCard = <T extends Element>({\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: CardHookProps<T>): CardHookResult<T> => {\n const [keyIsDown, setkeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button-like component\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space && active) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setkeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setkeyIsDown(event.key);\n event.preventDefault();\n setActive(true);\n onClick?.(event as unknown as MouseEvent<T>);\n }\n onKeyDown?.(event);\n };\n\n const cardProps = {\n \"aria-disabled\": disabled ? true : undefined,\n disabled: disabled,\n tabIndex: disabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n cardProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AA6BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA2C;AACzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,OAAA;AACd,EAAA,MAAM,KAAA,GAAQ,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAA,IAAI,SAAA,KAAc,KAAA,IAAS,SAAA,KAAc,KAAA,IAAS,MAAA,EAAQ;AACxD,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MACjB;AAAA,IACF,GAAG,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,SAAS,CAAC,CAAA;AAEtB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyB;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAyB;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4B;AACjD,IAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,KAAA,IAAS,KAAA,CAAM,QAAQ,KAAA,EAAO;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,IACZ;AACA,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,eAAA,EAAiB,WAAW,IAAA,GAAO,MAAA;AAAA,IACnC,QAAA;AAAA,IACA,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,IAC1B,MAAA,EAAQ,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAA,GAAc,MAAA;AAAA,IACnC,SAAA,EAAW,aAAA;AAAA,IACX,OAAA,EAAS;AAAA,GACX;AAEA,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../src/link/Link.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 type ComponentType,\n forwardRef,\n type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n /**\n * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * Render prop to enable customisation of anchor element.\n */\n render?: RenderPropsType[\"render\"];\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n /**\n *\n * Either \"default\" or \"never\".\n * Determines when underline should be applied to the link.\n *\n * @default \"default\".\n */\n underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent,\n href,\n className,\n children,\n color: colorProp,\n variant,\n target = \"_self\",\n underline = \"default\",\n ...rest\n },\n ref,\n): ReactElement<LinkProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link\",\n css: linkCss,\n window: targetWindow,\n });\n const { ExternalIcon } = useIcon();\n\n const color = variant ?? colorProp ?? \"primary\";\n const LinkIconComponent =\n IconComponent === undefined ? ExternalIcon : IconComponent;\n\n return (\n <Text\n as={LinkAction}\n className={clsx(\n withBaseName(),\n withBaseName(`underline${capitalize(underline)}`),\n {\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n href={href}\n ref={ref}\n target={target}\n color=\"inherit\"\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n {LinkIconComponent && (\n <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>\n Opens in a new tab\n </span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsxs","Text","LinkAction","clsx","capitalize","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../src/link/Link.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 type ComponentType,\n forwardRef,\n type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n /**\n * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * Render prop to enable customisation of anchor element.\n */\n render?: RenderPropsType[\"render\"];\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n /**\n *\n * Either \"default\" or \"never\".\n * Determines when underline should be applied to the link.\n *\n * @default \"default\".\n */\n underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent,\n href,\n className,\n children,\n color: colorProp,\n variant,\n target = \"_self\",\n underline = \"default\",\n ...rest\n },\n ref,\n): ReactElement<LinkProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link\",\n css: linkCss,\n window: targetWindow,\n });\n const { ExternalIcon } = useIcon();\n\n const color = variant ?? colorProp ?? \"primary\";\n const LinkIconComponent =\n IconComponent === undefined ? ExternalIcon : IconComponent;\n\n return (\n <Text\n as={LinkAction}\n className={clsx(\n withBaseName(),\n withBaseName(`underline${capitalize(underline)}`),\n {\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n href={href}\n ref={ref}\n target={target}\n color=\"inherit\"\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n {LinkIconComponent && (\n <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>\n Opens in a new tab\n </span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsxs","Text","LinkAction","clsx","capitalize","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAiCrC,MAAM,IAAA,GAAOC,gBAAA,CAAyC,SAASC,KAAAA,CACpE;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GAAA,EACyB;AACzB,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;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAEjC,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AACtC,EAAA,MAAM,iBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,EAAA,uBACEC,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAIC,qBAAA;AAAA,MACJ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAYC,qBAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA,EAAM,SAAA;AAAA,MACL,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,MAAA,KAAW,4BACVJ,eAAA,CAAAK,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,iBAAA,mCACE,iBAAA,EAAA,EAAkB,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,yCAEjE,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n function LinkAction(props, ref) {\n return renderProps(\"a\", { ...props, ref });\n },\n);\n"],"names":["forwardRef","LinkAction","renderProps"],"mappings":";;;;;;;;;;AAKO,MAAM,
|
|
1
|
+
{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n function LinkAction(props, ref) {\n return renderProps(\"a\", { ...props, ref });\n },\n);\n"],"names":["forwardRef","LinkAction","renderProps"],"mappings":";;;;;;;;;;AAKO,MAAM,UAAA,GAAaA,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,OAAOC,wBAAY,GAAA,EAAK,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAAA,EAC3C;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n function LinkCard(props, ref) {\n const {\n accent,\n children,\n className,\n href,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link-card\",\n css: linkCardCss,\n window: targetWindow,\n });\n\n return (\n <a\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n },\n className,\n )}\n href={href}\n {...rest}\n ref={ref}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","LinkCard","useWindow","useComponentCssInjection","linkCardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAazC,MAAM,
|
|
1
|
+
{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n function LinkCard(props, ref) {\n const {\n accent,\n children,\n className,\n href,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link-card\",\n css: linkCardCss,\n window: targetWindow,\n });\n\n return (\n <a\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n },\n className,\n )}\n href={href}\n {...rest}\n ref={ref}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","LinkCard","useWindow","useComponentCssInjection","linkCardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAazC,MAAM,QAAA,GAAWC,gBAAA;AAAA,EACtB,SAASC,SAAAA,CAAS,KAAA,EAAO,GAAA,EAAK;AAC5B,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAKC,UAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAA,MAAA,EAASC,qBAAA,CAAW,UAAU,EAAE,CAAC,CAAA,CAAE,CAAC,GAAG;AAAA,WACvD;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.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 type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n Boolean(activeState?.disabled) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getOptionAtIndex>;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(listRef, ref);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","useForkRef","jsx","ListControlContext","clsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.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 type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n Boolean(activeState?.disabled) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getOptionAtIndex>;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(listRef, ref);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","useForkRef","jsx","ListControlContext","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n valueToString: (item: Item) => string;\n disabled?: boolean;\n listRef?: RefObject<HTMLDivElement>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n valueToString: defaultValueToString,\n disabled: false,\n listRef: undefined,\n },\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA+BO,MAAM,
|
|
1
|
+
{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n valueToString: (item: Item) => string;\n disabled?: boolean;\n listRef?: RefObject<HTMLDivElement>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n valueToString: defaultValueToString,\n disabled: false,\n listRef: undefined,\n },\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA+BO,MAAM,kBAAA,GAAqBA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,GAAU;AACR,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,GAAW;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,IACf,CAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAA,GAAS;AACP,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,MAAA;AAAA,IACb,SAAA,GAAY;AACV,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,KAAA;AAAA,IACb,iBAAA,EAAmB,KAAA;AAAA,IACnB,aAAA,EAAeC,qCAAA;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;AAEO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}
|