@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":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Actions\n */\n children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,
|
|
1
|
+
{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Actions\n */\n children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EACxD,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DialogCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-close-button\",\n css: dialogCloseButtonCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n\n return (\n <Button\n ref={ref}\n aria-label=\"Close dialog\"\n appearance=\"transparent\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogCloseButton","useWindow","useComponentCssInjection","dialogCloseButtonCss","useIcon","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,MAAM,
|
|
1
|
+
{"version":3,"file":"DialogCloseButton.js","sources":["../src/dialog/DialogCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nimport dialogCloseButtonCss from \"./DialogCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogCloseButton\");\n\nexport const DialogCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DialogCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-close-button\",\n css: dialogCloseButtonCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n\n return (\n <Button\n ref={ref}\n aria-label=\"Close dialog\"\n appearance=\"transparent\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogCloseButton","useWindow","useComponentCssInjection","dialogCloseButtonCss","useIcon","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,MAAM,iBAAA,GAAoBC,gBAAA;AAAA,EAC/B,SAASC,kBAAAA,CAAkB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,0BAAA;AAAA,MACR,GAAA,EAAKC,mBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,IAAA,uBACEC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KACzB;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltDialogContent {\n color: var(--salt-content-primary-foreground);\n min-height: var(--salt-text-lineHeight);\n background: var(--salt-container-primary-background);\n\n margin-left: var(--salt-spacing-200);\n margin-right: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-100);\n /* auto is needed for support on Safari, due to webkit bugs with flex */\n flex: 1 1 auto;\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n\n.saltDialogContent-inner {\n overflow-y: auto;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n max-height: inherit;\n flex: 1;\n box-sizing: border-box;\n}\n\n.saltDialogContent-overflow {\n padding-right: var(--salt-spacing-100);\n}\n\n.saltDialogContent-scrollTop.saltDialogContent-inner {\n border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDialogContent-scrollBottom.saltDialogContent-inner {\n border-bottom-color: var(--salt-separable-tertiary-borderColor);\n}\n\n@supports selector(:has(*)) {\n .saltDialogContent:has(.saltDialogContent-overflow) {\n min-height: calc(var(--salt-text-lineHeight) * 4);\n }\n}\n";
|
|
3
|
+
var css_248z = ".saltDialogContent {\n color: var(--salt-content-primary-foreground);\n min-height: var(--salt-text-lineHeight);\n background: var(--salt-container-primary-background);\n\n margin-left: var(--salt-spacing-200);\n margin-right: var(--salt-spacing-300);\n padding-left: var(--salt-spacing-100);\n /* auto is needed for support on Safari, due to webkit bugs with flex */\n flex: 1 1 auto;\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n\n.saltDialogContent-inner {\n display: flex;\n overflow-y: auto;\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n max-height: inherit;\n flex: 1;\n box-sizing: border-box;\n}\n\n.saltDialogContent-overflow {\n padding-right: var(--salt-spacing-100);\n}\n\n.saltDialogContent-scrollTop.saltDialogContent-inner {\n border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDialogContent-scrollBottom.saltDialogContent-inner {\n border-bottom-color: var(--salt-separable-tertiary-borderColor);\n}\n\n@supports selector(:has(*)) {\n .saltDialogContent:has(.saltDialogContent-overflow) {\n min-height: calc(var(--salt-text-lineHeight) * 4);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=DialogContent.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n makePrefixer,\n useIsomorphicLayoutEffect,\n useResizeObserver,\n} from \"../utils\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Content\n */\n children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const [canScrollUp, setCanScrollUp] = useState(false);\n const [canScrollDown, setCanScrollDown] = useState(true);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const divRef = useRef<HTMLDivElement>(null);\n\n const handleScroll = () => {\n targetWindow?.requestAnimationFrame(() => {\n const container = divRef.current;\n if (!container) return;\n setCanScrollUp(container.scrollTop > 0);\n setCanScrollDown(\n container.scrollHeight -\n container.scrollTop -\n container.clientHeight >\n 1,\n );\n });\n };\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n const checkOverflow = useCallback(() => {\n if (!divRef.current) return;\n setIsOverflowing(\n divRef.current.scrollHeight > divRef.current.offsetHeight,\n );\n }, []);\n\n useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n useIsomorphicLayoutEffect(() => {\n checkOverflow();\n }, [checkOverflow]);\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n <div\n onScrollCapture={handleScroll}\n ref={divRef}\n className={clsx(withBaseName(\"inner\"), {\n [withBaseName(\"overflow\")]: isOverflowing,\n [withBaseName(\"scrollTop\")]: isOverflowing && canScrollUp,\n [withBaseName(\"scrollBottom\")]: isOverflowing && canScrollDown,\n })}\n >\n {children}\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useState","useRef","useWindow","useComponentCssInjection","dialogContentCss","useCallback","useResizeObserver","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,
|
|
1
|
+
{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport {\n makePrefixer,\n useIsomorphicLayoutEffect,\n useResizeObserver,\n} from \"../utils\";\n\nimport dialogContentCss from \"./DialogContent.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The content of Dialog Content\n */\n children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const [canScrollUp, setCanScrollUp] = useState(false);\n const [canScrollDown, setCanScrollDown] = useState(true);\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const divRef = useRef<HTMLDivElement>(null);\n\n const handleScroll = () => {\n targetWindow?.requestAnimationFrame(() => {\n const container = divRef.current;\n if (!container) return;\n setCanScrollUp(container.scrollTop > 0);\n setCanScrollDown(\n container.scrollHeight -\n container.scrollTop -\n container.clientHeight >\n 1,\n );\n });\n };\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n const checkOverflow = useCallback(() => {\n if (!divRef.current) return;\n setIsOverflowing(\n divRef.current.scrollHeight > divRef.current.offsetHeight,\n );\n }, []);\n\n useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n useIsomorphicLayoutEffect(() => {\n checkOverflow();\n }, [checkOverflow]);\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n <div\n onScrollCapture={handleScroll}\n ref={divRef}\n className={clsx(withBaseName(\"inner\"), {\n [withBaseName(\"overflow\")]: isOverflowing,\n [withBaseName(\"scrollTop\")]: isOverflowing && canScrollUp,\n [withBaseName(\"scrollBottom\")]: isOverflowing && canScrollDown,\n })}\n >\n {children}\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useState","useRef","useWindow","useComponentCssInjection","dialogContentCss","useCallback","useResizeObserver","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAS,KAAK,CAAA;AACpD,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,IAAI,CAAA;AACvD,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAExD,IAAA,MAAM,MAAA,GAASC,aAAuB,IAAI,CAAA;AAE1C,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,sBAAsB,MAAM;AACxC,QAAA,MAAM,YAAY,MAAA,CAAO,OAAA;AACzB,QAAA,IAAI,CAAC,SAAA,EAAW;AAChB,QAAA,cAAA,CAAe,SAAA,CAAU,YAAY,CAAC,CAAA;AACtC,QAAA,gBAAA;AAAA,UACE,SAAA,CAAU,YAAA,GACR,SAAA,CAAU,SAAA,GACV,UAAU,YAAA,GACV;AAAA,SACJ;AAAA,MACF,CAAA,CAAA;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,aAAA,GAAgBC,kBAAY,MAAM;AACtC,MAAA,IAAI,CAAC,OAAO,OAAA,EAAS;AACrB,MAAA,gBAAA;AAAA,QACE,MAAA,CAAO,OAAA,CAAQ,YAAA,GAAe,MAAA,CAAO,OAAA,CAAQ;AAAA,OAC/C;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAAC,mCAAA,CAAkB,EAAE,GAAA,EAAK,MAAA,EAAQ,QAAA,EAAU,eAAe,CAAA;AAE1D,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,aAAA,EAAc;AAAA,IAChB,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EACzD,QAAA,kBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,eAAA,EAAiB,YAAA;AAAA,QACjB,GAAA,EAAK,MAAA;AAAA,QACL,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,UACrC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,aAAA,IAAiB,WAAA;AAAA,UAC9C,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,aAAA,IAAiB;AAAA,SAClD,CAAA;AAAA,QAEA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\n\nexport const DialogContext = createContext<{\n status?: ValidationStatus;\n id: string | undefined;\n}>({\n status: undefined,\n id: \"\",\n});\n\nexport const useDialogContext = () => {\n return useContext(DialogContext);\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AAGO,MAAM,gBAAgBA,
|
|
1
|
+
{"version":3,"file":"DialogContext.js","sources":["../src/dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\n\nexport const DialogContext = createContext<{\n status?: ValidationStatus;\n id: string | undefined;\n}>({\n status: undefined,\n id: \"\",\n});\n\nexport const useDialogContext = () => {\n return useContext(DialogContext);\n};\n"],"names":["createContext","useContext"],"mappings":";;;;AAGO,MAAM,gBAAgBA,mBAAA,CAG1B;AAAA,EACD,MAAA,EAAQ,MAAA;AAAA,EACR,EAAA,EAAI;AACN,CAAC;AAEM,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAOC,iBAAW,aAAa,CAAA;AACjC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Dialog\n */\n header: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n function DialogHeader(props, ref) {\n const {\n className,\n description,\n disableAccent,\n actions,\n header,\n preheader,\n status: statusProp,\n ...rest\n } = props;\n const { status: statusContext, id } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-header\",\n css: dialogHeaderCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? statusContext;\n\n return (\n <div\n id={id}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status ?? \"\")]: !!status,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <div className={withBaseName(\"container\")}>\n <H2 className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n {description && (\n <Text color=\"secondary\" className={withBaseName(\"description\")}>\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogHeader","useDialogContext","useWindow","useComponentCssInjection","dialogHeaderCss","jsxs","clsx","jsx","StatusIndicator","H2","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AA4B7C,MAAM,
|
|
1
|
+
{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The status of the Dialog\n */\n status?: ValidationStatus | undefined;\n /**\n * Displays the accent bar in the Dialog Title */\n disableAccent?: boolean;\n /**\n * Displays the header at the top of the Dialog\n */\n header: ReactNode;\n /**\n * Displays the preheader just above the header\n **/\n preheader?: ReactNode;\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n function DialogHeader(props, ref) {\n const {\n className,\n description,\n disableAccent,\n actions,\n header,\n preheader,\n status: statusProp,\n ...rest\n } = props;\n const { status: statusContext, id } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-header\",\n css: dialogHeaderCss,\n window: targetWindow,\n });\n\n const status = statusProp ?? statusContext;\n\n return (\n <div\n id={id}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"withAccent\")]: !disableAccent && !status,\n [withBaseName(status ?? \"\")]: !!status,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {status && <StatusIndicator status={status} />}\n <div className={withBaseName(\"container\")}>\n <H2 className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n {description && (\n <Text color=\"secondary\" className={withBaseName(\"description\")}>\n {description}\n </Text>\n )}\n </div>\n {actions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DialogHeader","useDialogContext","useWindow","useComponentCssInjection","dialogHeaderCss","jsxs","clsx","jsx","StatusIndicator","H2","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAA,EAAe,EAAA,KAAOC,8BAAA,EAAiB;AAEvD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAE7B,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAUC,cAAA,CAACC,mCAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5CH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAACI,WAAA,EAAA,EAAG,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EACjC,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAaF,cAAA,CAACG,SAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,mCACEA,SAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACCH,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport dividerCss from \"./Divider.css\";\n\nexport interface DividerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The orientation of the divider. Defaults to `\"horizontal\"`.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The variant of the divider. Defaults to `\"primary\"`.\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDivider\");\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n function Divider(props, ref) {\n const {\n className,\n orientation = \"horizontal\",\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-divider\",\n css: dividerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n withBaseName(variant),\n className,\n )}\n aria-orientation={orientation}\n // biome-ignore lint/a11y/useAriaPropsForRole: Separator is not focusable, so it doesn't need aria-valuenow.\n role=\"separator\"\n ref={ref}\n {...rest}\n />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Divider","useWindow","useComponentCssInjection","dividerCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAExC,MAAM,
|
|
1
|
+
{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport dividerCss from \"./Divider.css\";\n\nexport interface DividerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The orientation of the divider. Defaults to `\"horizontal\"`.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * The variant of the divider. Defaults to `\"primary\"`.\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDivider\");\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n function Divider(props, ref) {\n const {\n className,\n orientation = \"horizontal\",\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-divider\",\n css: dividerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(orientation),\n withBaseName(variant),\n className,\n )}\n aria-orientation={orientation}\n // biome-ignore lint/a11y/useAriaPropsForRole: Separator is not focusable, so it doesn't need aria-valuenow.\n role=\"separator\"\n ref={ref}\n {...rest}\n />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Divider","useWindow","useComponentCssInjection","dividerCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAExC,MAAM,OAAA,GAAUC,gBAAA;AAAA,EACrB,SAASC,QAAAA,CAAQ,KAAA,EAAO,GAAA,EAAK;AAC3B,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA,GAAc,YAAA;AAAA,MACd,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,cAAA;AAAA,MACR,GAAA,EAAKC,SAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,WAAW,CAAA;AAAA,UACxB,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,kBAAA,EAAkB,WAAA;AAAA,QAElB,IAAA,EAAK,WAAA;AAAA,QACL,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n useEffect,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n function Drawer(props, ref) {\n const {\n children,\n className,\n position = \"left\",\n open = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n return (\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n },\n);\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;AAwBA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA;AACF,
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type PropsWithChildren,\n useEffect,\n useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n condition,\n children,\n}: ConditionalScrimWrapperProps) => {\n return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Defines the drawer position within the screen. Defaults to `left`.\n */\n position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Change background color palette\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * Prevent the dialog closing on click away\n * */\n disableDismiss?: boolean;\n /**\n * Prevent Scrim from rendering\n * */\n disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n function Drawer(props, ref) {\n const {\n children,\n className,\n position = \"left\",\n open = false,\n onOpenChange,\n variant = \"primary\",\n disableDismiss,\n disableScrim,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const { context, floating, elements } = useFloatingUI({\n open: showComponent,\n onOpenChange,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { enabled: !disableDismiss }),\n ]);\n\n const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n\n if (!open && showComponent) {\n const animate = setTimeout(() => {\n setShowComponent(false);\n }, 300); // var(--salt-duration-perceptible)\n return () => clearTimeout(animate);\n }\n }, [open, showComponent]);\n\n return (\n <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n <FloatingComponent\n open={showComponent}\n ref={handleRef}\n role={\"dialog\"}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n aria-modal=\"true\"\n focusManagerProps={{\n context: context,\n }}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className,\n )}\n {...getFloatingProps()}\n {...rest}\n >\n {children}\n </FloatingComponent>\n </ConditionalScrimWrapper>\n );\n },\n);\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DrawerCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer-close-button\",\n css: drawerCloseButtonCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n\n return (\n <div className={withBaseName(\"container\")}>\n <Button\n ref={ref}\n aria-label=\"Close Drawer\"\n appearance=\"transparent\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DrawerCloseButton","useWindow","useComponentCssInjection","drawerCloseButtonCss","useIcon","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,MAAM,
|
|
1
|
+
{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n function DrawerCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer-close-button\",\n css: drawerCloseButtonCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n\n return (\n <div className={withBaseName(\"container\")}>\n <Button\n ref={ref}\n aria-label=\"Close Drawer\"\n appearance=\"transparent\"\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","DrawerCloseButton","useWindow","useComponentCssInjection","drawerCloseButtonCss","useIcon","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,MAAM,iBAAA,GAAoBC,gBAAA;AAAA,EAC/B,SAASC,kBAAAA,CAAkB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,0BAAA;AAAA,MACR,GAAA,EAAKC,mBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KACzB,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useEffect,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\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 { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\n /**\n * If `true`, the dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the dropdown will be read-only.\n */\n readOnly?: boolean;\n /**\n * The options to display in the dropdown.\n */\n children?: ReactNode;\n /**\n * The marker to use in an empty read only dropdown.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * If `true`, the dropdown will be multiselect.\n */\n multiselect?: boolean;\n /**\n * The text shown when the dropdown has no value.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown will be required.\n */\n required?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n ListControlProps<Item>;\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n return open ? (\n <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n ) : (\n <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n props: DropdownProps<Item>,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n disabled: disabledProp,\n emptyReadOnlyMarker = \"—\",\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n value,\n onOpenChange,\n open,\n placeholder,\n startAdornment,\n required: requiredProp,\n variant = \"primary\",\n validationStatus: validationStatusProp,\n onKeyDown,\n onFocus,\n onBlur,\n valueToString = defaultValueToString,\n bordered = false,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\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 disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n const required = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : requiredProp;\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\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 focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const isEmptyReadOnly = readOnly && selectedValue === \"\";\n const valueText = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : (value ?? selectedValue);\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason,\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && Children.count(children) > 0,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context),\n ]);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\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 if (!openState) {\n setOpen(true, \"input\");\n }\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<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\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 (openState && Boolean(activeState?.disabled)) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\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 handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(false);\n if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\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 getFirstOption>;\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 check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getFirstOption();\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleButtonRef}\n role=\"combobox\"\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly ? \"true\" : undefined}\n aria-required={required ? \"true\" : undefined}\n aria-expanded={openState}\n aria-activedescendant={activeState?.id}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n aria-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueText,\n })}\n >\n {!valueText ? placeholder : valueText}\n </span>\n {!disabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {!readOnly && <ExpandIcon open={openState} />}\n <div className={withBaseName(\"activationIndicator\")} />\n </button>\n <OptionList\n aria-multiselectable={multiselect}\n open={\n (openState || focusedState) &&\n !readOnly &&\n Children.count(children) > 0\n }\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusButton,\n onClick: handleFocusButton,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={handleListRef}\n id={listId}\n collapsed={!openState}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","ExpandIcon","useIcon","jsx","forwardRef","Dropdown","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","useEffect","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n flip,\n offset,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n Children,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useEffect,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\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 { OptionList } from \"../option/OptionList\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n type UseFloatingUIProps,\n useFloatingUI,\n useForkRef,\n useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\n /**\n * If `true`, the dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the dropdown will be read-only.\n */\n readOnly?: boolean;\n /**\n * The options to display in the dropdown.\n */\n children?: ReactNode;\n /**\n * The marker to use in an empty read only dropdown.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * If `true`, the dropdown will be multiselect.\n */\n multiselect?: boolean;\n /**\n * The text shown when the dropdown has no value.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown will be required.\n */\n required?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n /** Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n ListControlProps<Item>;\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n return open ? (\n <CollapseIcon className={withBaseName(\"toggle\")} aria-hidden />\n ) : (\n <ExpandIcon className={withBaseName(\"toggle\")} aria-hidden />\n );\n}\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n props: DropdownProps<Item>,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n disabled: disabledProp,\n emptyReadOnlyMarker = \"—\",\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n value,\n onOpenChange,\n open,\n placeholder,\n startAdornment,\n required: requiredProp,\n variant = \"primary\",\n validationStatus: validationStatusProp,\n onKeyDown,\n onFocus,\n onBlur,\n valueToString = defaultValueToString,\n bordered = false,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\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 disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n const required = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : requiredProp;\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\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 focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const isEmptyReadOnly = readOnly && selectedValue === \"\";\n const valueText = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : (value ?? selectedValue);\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason,\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && Children.count(children) > 0,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n offset(1),\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context),\n ]);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\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 if (!openState) {\n setOpen(true, \"input\");\n }\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<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\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 (openState && Boolean(activeState?.disabled)) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\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 handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(false);\n if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n onBlur?.(event);\n }\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n useEffect(() => {\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\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 getFirstOption>;\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 check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getFirstOption();\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getLastOption();\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getFirstOption();\n }\n\n setActive(newActive?.data);\n }, [openState, children]);\n\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n ref={handleButtonRef}\n role=\"combobox\"\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly ? \"true\" : undefined}\n aria-required={required ? \"true\" : undefined}\n aria-expanded={openState}\n aria-activedescendant={activeState?.id}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n aria-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueText,\n })}\n >\n {!valueText ? placeholder : valueText}\n </span>\n {!disabled && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {!readOnly && <ExpandIcon open={openState} />}\n <div className={withBaseName(\"activationIndicator\")} />\n </button>\n <OptionList\n aria-multiselectable={multiselect}\n open={\n (openState || focusedState) &&\n !readOnly &&\n Children.count(children) > 0\n }\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusButton,\n onClick: handleFocusButton,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={handleListRef}\n id={listId}\n collapsed={!openState}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","ExpandIcon","useIcon","jsx","forwardRef","Dropdown","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","useEffect","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor));\n border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-success-borderColor);\n}\n\n
|
|
3
|
+
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor));\n border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-success-borderColor);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FileDropZone.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type DragEvent,\n type DragEventHandler,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?:
|
|
1
|
+
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type DragEvent,\n type DragEventHandler,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Exclude<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","FileDropZone","useWindow","useComponentCssInjection","fileDropZoneCss","useState","useRef","useForkRef","containsFiles","extractFiles","jsx","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n SVGSVGElement,\n FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n const iconProps = {\n ref,\n size,\n ...rest,\n };\n\n const { UploadIcon } = useIcon();\n return status ? (\n <StatusIndicator status={status} {...iconProps} />\n ) : (\n <UploadIcon {...iconProps} />\n );\n});\n"],"names":["forwardRef","FileDropZoneIcon","useIcon","jsx","StatusIndicator"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { forwardRef } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n SVGSVGElement,\n FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n const iconProps = {\n ref,\n size,\n ...rest,\n };\n\n const { UploadIcon } = useIcon();\n return status ? (\n <StatusIndicator status={status} {...iconProps} />\n ) : (\n <UploadIcon {...iconProps} />\n );\n});\n"],"names":["forwardRef","FileDropZoneIcon","useIcon","jsx","StatusIndicator"],"mappings":";;;;;;;AAYO,MAAM,gBAAA,GAAmBA,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,EAAE,MAAA,EAAQ,IAAA,GAAO,CAAA,EAAG,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC9D,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,4BAAA,EAAQ;AAC/B,EAAA,OAAO,MAAA,mBACLC,cAAA,CAACC,+BAAA,EAAA,EAAgB,MAAA,EAAiB,GAAG,WAAW,CAAA,mBAEhDD,cAAA,CAAC,UAAA,EAAA,EAAY,GAAG,SAAA,EAAW,CAAA;AAE/B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n type FocusEvent,\n forwardRef,\n type HTMLAttributes,\n type SyntheticEvent,\n useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useForkRef } from \"../utils\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref,\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n // Allow selecting the same file multiple times - #3591\n // User would still be able to put back the value in onChange, if necessary\n event.target.value = \"\";\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n
|
|
1
|
+
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n type ChangeEvent,\n type FocusEvent,\n forwardRef,\n type HTMLAttributes,\n type SyntheticEvent,\n useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useForkRef } from \"../utils\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref,\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n // Allow selecting the same file multiple times - #3591\n // User would still be able to put back the value in onChange, if necessary\n event.target.value = \"\";\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n style={{ display: \"none\" }}\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["forwardRef","FileDropZoneTrigger","useRef","useForkRef","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;;;;;;;AAiCO,MAAM,mBAAA,GAAsBA,gBAAA,CAGjC,SAASC,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAA,EAAU,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,QAAA,EAAU,GAAG,IAAA,IAC7D,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAYC,aAA0B,IAAI,CAAA;AAChD,EAAA,MAAM,YAAA,GAAeA,aAAyB,IAAI,CAAA;AAClD,EAAA,MAAM,UAAA,GAAaC,qBAAA,CAAW,GAAA,EAAK,SAAS,CAAA;AAI5C,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AA9C/D,IAAA,IAAA,EAAA;AA+CI,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,KAAA,EAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA6C;AAnDpE,IAAA,IAAA,EAAA;AAoDI,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsB,KAAA,EAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA,CAAM,MAAM,MAAA,CAA4B,KAAA,IAAS,EAAE,CAAA;AAGvE,IAAA,KAAA,CAAM,OAAO,KAAA,GAAQ,EAAA;AACrB,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,KAAA,CAAA;AAAA,EACpB,CAAA;AACA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAA,EAAK,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,QAAA,IAAY;AAAA;AAAA,KACf;AAAA,oBACAD,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO;AAAA,QACzB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,YAAA;AAAA,QACV,OAAA,EAAS,WAAA;AAAA,QACT,GAAA,EAAK,YAAA;AAAA,QACL,IAAA,EAAK;AAAA;AAAA;AACP,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import type { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n if (!e.dataTransfer) {\n const target = e.target as HTMLInputElement;\n return target?.files;\n }\n\n return Array.prototype.some.call(\n e.dataTransfer.types,\n (type) => type === \"Files\",\n );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n if (containsFiles(e)) {\n if (e.dataTransfer) {\n return Array.from(e.dataTransfer.files);\n }\n\n if (e.target) {\n return Array.from((e.target as HTMLInputElement).files ?? []);\n }\n }\n\n return [];\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import type { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n if (!e.dataTransfer) {\n const target = e.target as HTMLInputElement;\n return target?.files;\n }\n\n return Array.prototype.some.call(\n e.dataTransfer.types,\n (type) => type === \"Files\",\n );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n if (containsFiles(e)) {\n if (e.dataTransfer) {\n return Array.from(e.dataTransfer.files);\n }\n\n if (e.target) {\n return Array.from((e.target as HTMLInputElement).files ?? []);\n }\n }\n\n return [];\n};\n"],"names":[],"mappings":";;AAEO,MAAM,aAAA,GAAgB,CAAC,CAAA,KAAiB;AAC7C,EAAA,IAAI,CAAC,EAAE,YAAA,EAAc;AACnB,IAAA,MAAM,SAAS,CAAA,CAAE,MAAA;AACjB,IAAA,OAAO,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,KAAA;AAAA,EACjB;AAEA,EAAA,OAAO,KAAA,CAAM,UAAU,IAAA,CAAK,IAAA;AAAA,IAC1B,EAAE,YAAA,CAAa,KAAA;AAAA,IACf,CAAC,SAAS,IAAA,KAAS;AAAA,GACrB;AACF;AAEO,MAAM,YAAA,GAAe,CAAC,CAAA,KAAyB;AACpD,EAAA,IAAI,aAAA,CAAc,CAAC,CAAA,EAAG;AACpB,IAAA,IAAI,EAAE,YAAA,EAAc;AAClB,MAAA,OAAO,KAAA,CAAM,IAAA,CAAK,CAAA,CAAE,YAAA,CAAa,KAAK,CAAA;AAAA,IACxC;AAEA,IAAA,IAAI,EAAE,MAAA,EAAQ;AACZ,MAAA,OAAO,MAAM,IAAA,CAAM,CAAA,CAAE,MAAA,CAA4B,KAAA,IAAS,EAAE,CAAA;AAAA,IAC9D;AAAA,EACF;AAEA,EAAA,OAAO,EAAC;AACV;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type CSSProperties,\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 flexItemCss from \"./FlexItem.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = (typeof FLEX_ITEM_ALIGNMENTS)[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to its siblings, default is 1.\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to its siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Sets the initial main size of a flex item, default is \"auto\".\n */\n basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\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 FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const FlexItem: FlexItemComponent = forwardRef(function FlexItem<\n T extends ElementType = \"div\",\n>(\n {\n as,\n align,\n children,\n className,\n margin = 0,\n padding = 0,\n shrink,\n grow,\n basis,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-flex-item\",\n css: flexItemCss,\n window: targetWindow,\n });\n const { matchedBreakpoints } = useBreakpoint();\n\n const Component = as || \"div\";\n const flexItemShrink = resolveResponsiveValue(shrink, matchedBreakpoints);\n const flexItemGrow = resolveResponsiveValue(grow, matchedBreakpoints);\n const flexItemBasis = resolveResponsiveValue(basis, matchedBreakpoints);\n const flexItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n const flexItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n\n const itemStyle = {\n \"--flexItem-margin\": parseSpacing(flexItemMargin),\n \"--flexItem-padding\": parseSpacing(flexItemPadding),\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n \"--saltFlexItem-basis\": flexItemBasis,\n ...style,\n };\n return (\n <Component\n className={clsx(withBaseName(), className)}\n ref={ref as PolymorphicRef<T>}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","FlexItem","useWindow","useComponentCssInjection","flexItemCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AACzC,MAAM,
|
|
1
|
+
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type CSSProperties,\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 flexItemCss from \"./FlexItem.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = (typeof FLEX_ITEM_ALIGNMENTS)[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to its siblings, default is 1.\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to its siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Sets the initial main size of a flex item, default is \"auto\".\n */\n basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\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 FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const FlexItem: FlexItemComponent = forwardRef(function FlexItem<\n T extends ElementType = \"div\",\n>(\n {\n as,\n align,\n children,\n className,\n margin = 0,\n padding = 0,\n shrink,\n grow,\n basis,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-flex-item\",\n css: flexItemCss,\n window: targetWindow,\n });\n const { matchedBreakpoints } = useBreakpoint();\n\n const Component = as || \"div\";\n const flexItemShrink = resolveResponsiveValue(shrink, matchedBreakpoints);\n const flexItemGrow = resolveResponsiveValue(grow, matchedBreakpoints);\n const flexItemBasis = resolveResponsiveValue(basis, matchedBreakpoints);\n const flexItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n const flexItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n\n const itemStyle = {\n \"--flexItem-margin\": parseSpacing(flexItemMargin),\n \"--flexItem-padding\": parseSpacing(flexItemPadding),\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n \"--saltFlexItem-basis\": flexItemBasis,\n ...style,\n };\n return (\n <Component\n className={clsx(withBaseName(), className)}\n ref={ref as PolymorphicRef<T>}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","FlexItem","useWindow","useComponentCssInjection","flexItemCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AACzC,MAAM,oBAAA,GAAuB;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAuCO,MAAM,QAAA,GAA8BC,gBAAA,CAAW,SAASC,SAAAA,CAG7D;AAAA,EACE,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA,GAAS,CAAA;AAAA,EACT,OAAA,GAAU,CAAA;AAAA,EACV,MAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;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,gBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,kBAAA,EAAmB,GAAIC,gCAAA,EAAc;AAE7C,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AACxB,EAAA,MAAM,cAAA,GAAiBC,wCAAA,CAAuB,MAAA,EAAQ,kBAAkB,CAAA;AACxE,EAAA,MAAM,YAAA,GAAeA,wCAAA,CAAuB,IAAA,EAAM,kBAAkB,CAAA;AACpE,EAAA,MAAM,aAAA,GAAgBA,wCAAA,CAAuB,KAAA,EAAO,kBAAkB,CAAA;AACtE,EAAA,MAAM,cAAA,GAAiBA,wCAAA,CAAuB,MAAA,EAAQ,kBAAkB,CAAA;AACxE,EAAA,MAAM,eAAA,GAAkBA,wCAAA,CAAuB,OAAA,EAAS,kBAAkB,CAAA;AAE1E,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,mBAAA,EAAqBC,0BAAa,cAAc,CAAA;AAAA,IAChD,oBAAA,EAAsBA,0BAAa,eAAe,CAAA;AAAA,IAClD,0BAAA,EAA4B,KAAA;AAAA,IAC5B,uBAAA,EAAyB,cAAA;AAAA,IACzB,qBAAA,EAAuB,YAAA;AAAA,IACvB,sBAAA,EAAwB,aAAA;AAAA,IACxB,GAAG;AAAA,GACL;AACA,EAAA,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport flexLayoutCss from \"./FlexLayout.css\";\nimport { parseSpacing } from \"./parseSpacing\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection
|
|
1
|
+
{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n type ResponsiveProp,\n resolveResponsiveValue,\n} from \"../utils\";\nimport flexLayoutCss from \"./FlexLayout.css\";\nimport { parseSpacing } from \"./parseSpacing\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection =\n | \"row\"\n | \"column\"\n | \"row-reverse\"\n | \"column-reverse\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n ...FLEX_ALIGNMENT_BASE,\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];\nexport type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexAlignment | \"stretch\" | \"baseline\";\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: ResponsiveProp<number | string>;\n /**\n * Defines the alignment along the main axis, default is \"start\".\n */\n justify?: FlexContentAlignment;\n /**\n * **Deprecated:** For separators see `StackLayout` component instead.\n *\n * Adds a separator between elements if wrap is not active, default is false.\n */\n separators?: LayoutSeparator | true;\n /**\n * Allow the items to wrap as needed, default is false.\n */\n wrap?: ResponsiveProp<boolean>;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: 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 FlexLayoutComponent = <T extends ElementType = \"div\">(\n props: FlexLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nfunction parseAlignment(style: string | undefined) {\n return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n}\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(function FlexLayout<\n T extends ElementType = \"div\",\n>(\n {\n as,\n align,\n children,\n className,\n direction = \"row\",\n gap = 3,\n margin = 0,\n padding = 0,\n justify,\n separators,\n style,\n wrap = false,\n ...rest\n }: FlexLayoutProps<T>,\n ref?: ForwardedRef<unknown>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-flex-layout\",\n css: flexLayoutCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n const separatorAlignment = separators === true ? \"center\" : separators;\n\n const { matchedBreakpoints } = useBreakpoint();\n const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n const flexMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n const flexPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n const flexWrap = resolveResponsiveValue(wrap, matchedBreakpoints);\n const flexLayoutStyles = {\n ...style,\n \"--flexLayout-align\": parseAlignment(align),\n \"--flexLayout-direction\": flexDirection,\n \"--flexLayout-gap\": parseSpacing(flexGap),\n \"--flexLayout-margin\": parseSpacing(flexMargin),\n \"--flexLayout-padding\": parseSpacing(flexPadding),\n \"--flexLayout-justify\": parseAlignment(justify),\n \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n };\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n [withBaseName(\n `separator-${flexDirection ?? \"row\"}-${\n separatorAlignment ?? \"center\"\n }`,\n )]: separatorAlignment && !wrap,\n [withBaseName(`separator-${flexDirection ?? \"row\"}`)]:\n separatorAlignment && !wrap,\n },\n className,\n )}\n ref={ref as PolymorphicRef<T>}\n style={flexLayoutStyles}\n {...rest}\n >\n {children}\n </Component>\n );\n});\n"],"names":["makePrefixer","forwardRef","FlexLayout","useWindow","useComponentCssInjection","flexLayoutCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseSpacing.js","sources":["../src/flex-layout/parseSpacing.ts"],"sourcesContent":["export function parseSpacing(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `calc(var(--salt-spacing-100) * ${value})`;\n}\n"],"names":[],"mappings":";;AAAO,SAAS,aAAa,
|
|
1
|
+
{"version":3,"file":"parseSpacing.js","sources":["../src/flex-layout/parseSpacing.ts"],"sourcesContent":["export function parseSpacing(value: number | string | undefined) {\n if (value === undefined || typeof value === \"string\") {\n return value;\n }\n\n return `calc(var(--salt-spacing-100) * ${value})`;\n}\n"],"names":[],"mappings":";;AAAO,SAAS,aAAa,KAAA,EAAoC;AAC/D,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,OAAO,KAAA,KAAU,QAAA,EAAU;AACpD,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowLayout.js","sources":["../src/flow-layout/FlowLayout.tsx"],"sourcesContent":["import {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport type { PolymorphicComponentPropWithRef } from \"../utils\";\n\nexport type FlowLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Defines the alignment along the main axis, default is \"start\"\n */\n justify?: FlexLayoutProps<ElementType>[\"justify\"];\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype FlowLayoutComponent = <T extends ElementType = \"div\">(\n props: FlowLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const FlowLayout: FlowLayoutComponent = forwardRef(function FlowLayout<\n T extends ElementType = \"div\",\n>({ as, children, ...rest }: FlowLayoutProps<T>, ref?: ForwardedRef<unknown>) {\n return (\n <FlexLayout as={as as ElementType} direction=\"row\" ref={ref} wrap {...rest}>\n {children}\n </FlexLayout>\n );\n});\n"],"names":["forwardRef","FlowLayout","jsx","FlexLayout"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"FlowLayout.js","sources":["../src/flow-layout/FlowLayout.tsx"],"sourcesContent":["import {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport type { PolymorphicComponentPropWithRef } from \"../utils\";\n\nexport type FlowLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Defines the alignment along the main axis, default is \"start\"\n */\n justify?: FlexLayoutProps<ElementType>[\"justify\"];\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: FlexLayoutProps<ElementType>[\"margin\"];\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: FlexLayoutProps<ElementType>[\"padding\"];\n }\n >;\n\ntype FlowLayoutComponent = <T extends ElementType = \"div\">(\n props: FlowLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const FlowLayout: FlowLayoutComponent = forwardRef(function FlowLayout<\n T extends ElementType = \"div\",\n>({ as, children, ...rest }: FlowLayoutProps<T>, ref?: ForwardedRef<unknown>) {\n return (\n <FlexLayout as={as as ElementType} direction=\"row\" ref={ref} wrap {...rest}>\n {children}\n </FlexLayout>\n );\n});\n"],"names":["forwardRef","FlowLayout","jsx","FlexLayout"],"mappings":";;;;;;AAwCO,MAAM,UAAA,GAAkCA,gBAAA,CAAW,SAASC,WAAAA,CAEjE,EAAE,IAAI,QAAA,EAAU,GAAG,IAAA,EAAK,EAAuB,GAAA,EAA6B;AAC5E,EAAA,uBACEC,cAAA,CAACC,qBAAA,EAAA,EAAW,EAAA,EAAuB,SAAA,EAAU,KAAA,EAAM,KAAU,IAAA,EAAI,IAAA,EAAE,GAAG,IAAA,EACnE,QAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * If `true`, the field will be disabled.\n */\n disabled?: boolean;\n /**\n * Location of the label relative to the control.\n *\n * Either 'top', 'left', or 'right'`.\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * If `true`, the field will be read-only.\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n *\n * Used as suffix of FormFieldLabel id: `label-{id}`\n * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n */\n id?: string;\n /**\n * Displays necessity on label\n */\n necessity?: \"required\" | \"optional\" | \"asterisk\";\n /**\n * Validation status\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n (\n {\n children,\n className,\n disabled = false,\n id: idProp,\n labelPlacement = \"top\",\n necessity,\n readOnly = false,\n validationStatus,\n ...restProps\n },\n ref,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field\",\n css: formFieldCss,\n window: targetWindow,\n });\n\n const formFieldRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, formFieldRef);\n\n const formId = useId(idProp);\n\n const labelId = formId ? `label-${formId}` : undefined;\n const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n return (\n <div\n ref={handleRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className,\n )}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n a11yProps: {\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n },\n disabled,\n necessity,\n readOnly,\n validationStatus,\n formFieldRef,\n }}\n >\n {children}\n </FormFieldContext.Provider>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useRef","useForkRef","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,
|
|
1
|
+
{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useRef } from \"react\";\nimport { type A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { capitalize, makePrefixer, useForkRef, useId } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * If `true`, the field will be disabled.\n */\n disabled?: boolean;\n /**\n * Location of the label relative to the control.\n *\n * Either 'top', 'left', or 'right'`.\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * If `true`, the field will be read-only.\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n *\n * Used as suffix of FormFieldLabel id: `label-{id}`\n * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n */\n id?: string;\n /**\n * Displays necessity on label\n */\n necessity?: \"required\" | \"optional\" | \"asterisk\";\n /**\n * Validation status\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n (\n {\n children,\n className,\n disabled = false,\n id: idProp,\n labelPlacement = \"top\",\n necessity,\n readOnly = false,\n validationStatus,\n ...restProps\n },\n ref,\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field\",\n css: formFieldCss,\n window: targetWindow,\n });\n\n const formFieldRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, formFieldRef);\n\n const formId = useId(idProp);\n\n const labelId = formId ? `label-${formId}` : undefined;\n const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n return (\n <div\n ref={handleRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className,\n )}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n a11yProps: {\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n },\n disabled,\n necessity,\n readOnly,\n validationStatus,\n formFieldRef,\n }}\n >\n {children}\n </FormFieldContext.Provider>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useRef","useForkRef","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,EAAA,EAAI,MAAA;AAAA,IACJ,cAAA,GAAiB,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,gBAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAA,GAAeC,aAAuB,IAAI,CAAA;AAChD,IAAA,MAAM,SAAA,GAAYC,qBAAA,CAAW,GAAA,EAAK,YAAY,CAAA;AAE9C,IAAA,MAAM,MAAA,GAASC,YAAM,MAAM,CAAA;AAE3B,IAAA,MAAM,OAAA,GAAU,MAAA,GAAS,CAAA,MAAA,EAAS,MAAM,CAAA,CAAA,GAAK,MAAA;AAC7C,IAAA,MAAM,YAAA,GAAe,MAAA,GAAS,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,GAAK,MAAA;AAEvD,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,aAAa,CAAA,KAAA,EAAQC,qBAAA,CAAW,cAAc,CAAC,CAAA,CAAE,CAAC,GACjD;AAAA,WACJ;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA;AAAA,UAACG,iCAAA,CAAiB,QAAA;AAAA,UAAjB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,SAAA,EAAW;AAAA,gBACT,iBAAA,EAAmB,OAAA;AAAA,gBACnB,kBAAA,EAAoB;AAAA,eACtB;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,QAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|