@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
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @salt-ds/core
|
|
2
2
|
|
|
3
|
+
## 1.49.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 378fc01: Improved the experience of using `FileDropZoneTrigger`.
|
|
8
|
+
- 1f53f12: Enhanced `FlexLayout`, `StackLayout` and `SplitLayout` components by extending `LayoutDirection` to support both `column-reverse` and `row-reverse` directions, providing more flexible layout options.
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
direction = {{ xs: "column-reverse", sm: "row-reverse" }}
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- 22fed0d: Fixed `CollapsiblePanel` not supporting passing a ref.
|
|
17
|
+
- 770bc9c: Improved Avatar image loading logic. This should improve image flickering and make image loading more consistent.
|
|
18
|
+
- 54e4b19: Fixed FileDropZone's `status` prop type.
|
|
19
|
+
- bbb7dba: Fixed Dialog having a scrollbar when its content has uses `height: 100%`.
|
|
20
|
+
- c3df8d8: - Fixed `Checkbox`, `RadioButton` and `Switch`'s clickable areas taking full width of containers.
|
|
21
|
+
- Reduced the width of `FormFieldLabel` when `labelPlacement="top"` this prevents its whitespace triggering focus of the associated form control.
|
|
22
|
+
|
|
3
23
|
## 1.48.0
|
|
4
24
|
|
|
5
25
|
### Minor Changes
|
package/css/salt-core.css
CHANGED
|
@@ -839,6 +839,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
839
839
|
/* src/checkbox/Checkbox.css */
|
|
840
840
|
.saltCheckbox {
|
|
841
841
|
display: inline-flex;
|
|
842
|
+
width: fit-content;
|
|
842
843
|
gap: var(--salt-spacing-100);
|
|
843
844
|
position: relative;
|
|
844
845
|
cursor: var(--salt-cursor-hover);
|
|
@@ -1152,6 +1153,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1152
1153
|
box-sizing: border-box;
|
|
1153
1154
|
}
|
|
1154
1155
|
.saltDialogContent-inner {
|
|
1156
|
+
display: flex;
|
|
1155
1157
|
overflow-y: auto;
|
|
1156
1158
|
border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
|
|
1157
1159
|
border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
|
|
@@ -1524,9 +1526,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1524
1526
|
.saltFileDropZone-success {
|
|
1525
1527
|
border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-success-borderColor);
|
|
1526
1528
|
}
|
|
1527
|
-
.saltFileDropZone .input-hidden {
|
|
1528
|
-
display: none;
|
|
1529
|
-
}
|
|
1530
1529
|
.saltFileDropZone-disabled {
|
|
1531
1530
|
background: var(--salt-container-primary-background-disabled);
|
|
1532
1531
|
border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor-disabled);
|
|
@@ -1712,6 +1711,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1712
1711
|
align-self: baseline;
|
|
1713
1712
|
padding-top: var(--salt-spacing-100);
|
|
1714
1713
|
}
|
|
1714
|
+
.saltFormField-labelTop .saltFormFieldLabel.saltText {
|
|
1715
|
+
width: fit-content;
|
|
1716
|
+
}
|
|
1715
1717
|
.saltFormFieldLabel-necessityLabel {
|
|
1716
1718
|
font-weight: var(--salt-text-fontWeight);
|
|
1717
1719
|
font-style: var(--salt-editable-help-fontStyle);
|
|
@@ -3357,6 +3359,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3357
3359
|
/* src/radio-button/RadioButton.css */
|
|
3358
3360
|
.saltRadioButton {
|
|
3359
3361
|
display: inline-flex;
|
|
3362
|
+
width: fit-content;
|
|
3360
3363
|
gap: var(--salt-spacing-100);
|
|
3361
3364
|
cursor: var(--salt-cursor-hover);
|
|
3362
3365
|
position: relative;
|
|
@@ -3809,6 +3812,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
3809
3812
|
/* src/switch/Switch.css */
|
|
3810
3813
|
.saltSwitch {
|
|
3811
3814
|
display: flex;
|
|
3815
|
+
width: fit-content;
|
|
3812
3816
|
gap: var(--salt-spacing-100);
|
|
3813
3817
|
position: relative;
|
|
3814
3818
|
cursor: var(--salt-cursor-hover);
|
|
@@ -5455,4 +5459,4 @@ label.saltText small,
|
|
|
5455
5459
|
color: var(--salt-status-error-foreground-informative);
|
|
5456
5460
|
}
|
|
5457
5461
|
|
|
5458
|
-
/* src/
|
|
5462
|
+
/* src/6b292d77-1069-4ff3-8eee-6c5dec17dcee.css */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.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 SyntheticEvent,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Side to align the Accordion's indicator. Defaults to `left`.\n */\n indicatorSide?: \"left\" | \"right\";\n /**\n * Callback fired when the accordion is toggled.\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n /**\n * The status of the accordion.\n */\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n indicatorSide = \"left\",\n id: idProp,\n onToggle,\n status,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const [headerId, setHeaderId] = useState(`${id}-header`);\n const [panelId, setPanelId] = useState(`${id}-panel`);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n indicatorSide,\n disabled: Boolean(disabled),\n headerId,\n setHeaderId,\n panelId,\n setPanelId,\n status,\n }}\n >\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status ?? \"\")]: status,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n {...rest}\n />\n </AccordionContext.Provider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.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 SyntheticEvent,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Side to align the Accordion's indicator. Defaults to `left`.\n */\n indicatorSide?: \"left\" | \"right\";\n /**\n * Callback fired when the accordion is toggled.\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n /**\n * The status of the accordion.\n */\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n indicatorSide = \"left\",\n id: idProp,\n onToggle,\n status,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const [headerId, setHeaderId] = useState(`${id}-header`);\n const [panelId, setPanelId] = useState(`${id}-panel`);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n indicatorSide,\n disabled: Boolean(disabled),\n headerId,\n setHeaderId,\n panelId,\n setPanelId,\n status,\n }}\n >\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status ?? \"\")]: status,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n {...rest}\n />\n </AccordionContext.Provider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,SAASC,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAA,GAAgB,MAAA;AAAA,MAChB,EAAA,EAAI,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAIC,cAAA,CAAS,CAAA,EAAG,EAAE,CAAA,OAAA,CAAS,CAAA;AACvD,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,IAAIA,cAAA,CAAS,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAA,CAAc;AAAA,MAC5C,UAAA,EAAY,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,MAAA,GAAS,CAAC,KAAA,KAA6C;AAC3D,MAAA,WAAA,CAAY,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAC3B,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAACC,iCAAA,CAAiB,QAAA;AAAA,MAAjB;AAAA,QACC,KAAA,EAAO;AAAA,UACL,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,UAC1B,QAAA;AAAA,UACA,WAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,SAAA,EAAWE,SAAA;AAAA,cACT,YAAA,EAAa;AAAA,cACb;AAAA,gBACE,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,MAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,eAC9B;AAAA,cACA;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n value: string;\n expanded: boolean;\n toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n disabled: boolean;\n indicatorSide: \"left\" | \"right\";\n headerId: string;\n setHeaderId: (id: string) => void;\n panelId: string;\n setPanelId: (id: string) => void;\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n \"AccordionContext\",\n {\n value: \"\",\n expanded: false,\n toggle: () => undefined,\n disabled: false,\n indicatorSide: \"left\",\n headerId: \"\",\n setHeaderId: () => undefined,\n panelId: \"\",\n setPanelId: () => undefined,\n },\n);\n\nexport function useAccordion() {\n return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAgBO,MAAM,
|
|
1
|
+
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n value: string;\n expanded: boolean;\n toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n disabled: boolean;\n indicatorSide: \"left\" | \"right\";\n headerId: string;\n setHeaderId: (id: string) => void;\n panelId: string;\n setPanelId: (id: string) => void;\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n \"AccordionContext\",\n {\n value: \"\",\n expanded: false,\n toggle: () => undefined,\n disabled: false,\n indicatorSide: \"left\",\n headerId: \"\",\n setHeaderId: () => undefined,\n panelId: \"\",\n setPanelId: () => undefined,\n },\n);\n\nexport function useAccordion() {\n return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAgBO,MAAM,gBAAA,GAAmBA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAA,EAAO,EAAA;AAAA,IACP,QAAA,EAAU,KAAA;AAAA,IACV,QAAQ,MAAM,MAAA;AAAA,IACd,QAAA,EAAU,KAAA;AAAA,IACV,aAAA,EAAe,MAAA;AAAA,IACf,QAAA,EAAU,EAAA;AAAA,IACV,aAAa,MAAM,MAAA;AAAA,IACnB,OAAA,EAAS,EAAA;AAAA,IACT,YAAY,MAAM;AAAA;AAEtB;AAEO,SAAS,YAAA,GAAe;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.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 { makePrefixer } from \"../utils\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The child Accordions to be rendered\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-group\",\n css: accordionGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","useWindow","useComponentCssInjection","accordionGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,
|
|
1
|
+
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.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 { makePrefixer } from \"../utils\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The child Accordions to be rendered\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-group\",\n css: accordionGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","useWindow","useComponentCssInjection","accordionGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAAA,EAEzE;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The content of the Accordion Header\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n if (expanded) {\n return <CollapseIcon aria-hidden className={withBaseName(\"icon\")} />;\n }\n\n return <ExpandIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n HTMLButtonElement,\n AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n const { children, className, onClick, id, ...rest } = props;\n const {\n value,\n expanded,\n toggle,\n indicatorSide,\n disabled,\n headerId,\n panelId,\n setHeaderId,\n status,\n } = useAccordion();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-header\",\n css: accordionHeaderCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggle(event);\n onClick?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (id) {\n setHeaderId(id);\n }\n }, [id, setHeaderId]);\n\n return (\n <button\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n disabled={disabled}\n onClick={handleClick}\n aria-expanded={expanded}\n id={headerId}\n aria-controls={panelId}\n value={value}\n type=\"button\"\n {...rest}\n >\n {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n <span className={withBaseName(\"content\")}>{children}</span>\n {status && !disabled && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={status}\n />\n )}\n {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n </button>\n );\n});\n"],"names":["makePrefixer","useIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,
|
|
1
|
+
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The content of the Accordion Header\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n if (expanded) {\n return <CollapseIcon aria-hidden className={withBaseName(\"icon\")} />;\n }\n\n return <ExpandIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n HTMLButtonElement,\n AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n const { children, className, onClick, id, ...rest } = props;\n const {\n value,\n expanded,\n toggle,\n indicatorSide,\n disabled,\n headerId,\n panelId,\n setHeaderId,\n status,\n } = useAccordion();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-header\",\n css: accordionHeaderCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggle(event);\n onClick?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (id) {\n setHeaderId(id);\n }\n }, [id, setHeaderId]);\n\n return (\n <button\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n disabled={disabled}\n onClick={handleClick}\n aria-expanded={expanded}\n id={headerId}\n aria-controls={panelId}\n value={value}\n type=\"button\"\n {...rest}\n >\n {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n <span className={withBaseName(\"content\")}>{children}</span>\n {status && !disabled && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={status}\n />\n )}\n {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n </button>\n );\n});\n"],"names":["makePrefixer","useIcon","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAS,EAA0B;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,UAAA,EAAW,GAAIC,4BAAA,EAAQ;AAC7C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,sCAAQ,YAAA,EAAA,EAAa,aAAA,EAAW,MAAC,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,EACpE;AAEA,EAAA,sCAAQ,UAAA,EAAA,EAAW,aAAA,EAAW,MAAC,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAClE;AAEO,MAAM,eAAA,GAAkBC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAA,EAAK;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,SAAS,EAAA,EAAI,GAAG,MAAK,GAAI,KAAA;AACtD,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,MACEC,6BAAA,EAAa;AAEjB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKC,iBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA;AACZ,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA,IAChB;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,WAAW,CAAC,CAAA;AAEpB,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAA,EAAO;AAAA,QACvC;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,eAAA,EAAe,QAAA;AAAA,MACf,EAAA,EAAI,QAAA;AAAA,MACJ,eAAA,EAAe,OAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,aAAA,KAAkB,MAAA,oBAAUC,cAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAoB,CAAA;AAAA,uCAC/D,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,SAAS,GAAI,QAAA,EAAS,CAAA;AAAA,QACnD,MAAA,IAAU,CAAC,QAAA,oBACVA,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC;AAAA;AAAA,SACF;AAAA,QAED,aAAA,KAAkB,OAAA,oBAAWD,cAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAoB;AAAA;AAAA;AAAA,GACnE;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.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\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the Accordion Panel\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, id, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { headerId, panelId, setPanelId, expanded, indicatorSide } =\n useAccordion();\n\n useIsomorphicLayoutEffect(() => {\n if (id) {\n setPanelId(id);\n }\n }, [id, setPanelId]);\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={panelId}\n aria-labelledby={headerId}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n })}\n >\n {children}\n </div>\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,
|
|
1
|
+
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.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\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the Accordion Panel\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, id, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { headerId, panelId, setPanelId, expanded, indicatorSide } =\n useAccordion();\n\n useIsomorphicLayoutEffect(() => {\n if (id) {\n setPanelId(id);\n }\n }, [id, setPanelId]);\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={panelId}\n aria-labelledby={headerId}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n })}\n >\n {children}\n </div>\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,KAAA;AAE7C,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,YAAY,QAAA,EAAU,aAAA,KAC/CC,6BAAA,EAAa;AAEf,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAA,EAAI;AACN,QAAA,UAAA,CAAW,EAAE,CAAA;AAAA,MACf;AAAA,IACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAK,QAAA;AAAA,QACL,EAAA,EAAI,OAAA;AAAA,QACJ,iBAAA,EAAiB,QAAA;AAAA,QACjB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,QAClC,QAAQ,CAAC,QAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAClC,QAAA,kBAAAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,cACvC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,aAAA,KAAkB;AAAA,aACtD,CAAA;AAAA,YAEA;AAAA;AAAA,SACH,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AriaAnnounce.js","sources":["../src/aria-announcer/AriaAnnounce.tsx"],"sourcesContent":["import { type ComponentType, useEffect } from \"react\";\n\nimport { useAriaAnnouncer } from \"./useAriaAnnouncer\";\n\nexport interface AriaAnnounceProps {\n /**\n * String which will be announced by screen readers on change\n */\n announcement?: string;\n}\n\nexport const AriaAnnounce: ComponentType<AriaAnnounceProps> = ({\n announcement,\n}) => {\n const { announce } = useAriaAnnouncer();\n\n useEffect(() => {\n if (announcement) {\n announce(announcement);\n }\n }, [announce, announcement]);\n\n // biome-ignore lint/complexity/noUselessFragments: If we return null here, react-docgen wouldn't be able to locate the component.\n return <></>;\n};\n"],"names":["useAriaAnnouncer","useEffect","jsx","Fragment"],"mappings":";;;;;;AAWO,MAAM,eAAiD,CAAC;AAAA,EAC7D;AACF,
|
|
1
|
+
{"version":3,"file":"AriaAnnounce.js","sources":["../src/aria-announcer/AriaAnnounce.tsx"],"sourcesContent":["import { type ComponentType, useEffect } from \"react\";\n\nimport { useAriaAnnouncer } from \"./useAriaAnnouncer\";\n\nexport interface AriaAnnounceProps {\n /**\n * String which will be announced by screen readers on change\n */\n announcement?: string;\n}\n\nexport const AriaAnnounce: ComponentType<AriaAnnounceProps> = ({\n announcement,\n}) => {\n const { announce } = useAriaAnnouncer();\n\n useEffect(() => {\n if (announcement) {\n announce(announcement);\n }\n }, [announce, announcement]);\n\n // biome-ignore lint/complexity/noUselessFragments: If we return null here, react-docgen wouldn't be able to locate the component.\n return <></>;\n};\n"],"names":["useAriaAnnouncer","useEffect","jsx","Fragment"],"mappings":";;;;;;AAWO,MAAM,eAAiD,CAAC;AAAA,EAC7D;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,iCAAA,EAAiB;AAEtC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,YAAY,CAAC,CAAA;AAG3B,EAAA,uBAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAE,CAAA;AACX;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AriaAnnouncerContext.js","sources":["../src/aria-announcer/AriaAnnouncerContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AnnounceFn = (announcement: string, delay?: number) => void;\n\nexport type AriaAnnouncer = {\n announce: AnnounceFn;\n};\n\nexport const AriaAnnouncerContext = createContext<AriaAnnouncer | undefined>(\n undefined,\n);\n"],"names":["createContext"],"mappings":";;;;AAQO,MAAM,
|
|
1
|
+
{"version":3,"file":"AriaAnnouncerContext.js","sources":["../src/aria-announcer/AriaAnnouncerContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AnnounceFn = (announcement: string, delay?: number) => void;\n\nexport type AriaAnnouncer = {\n announce: AnnounceFn;\n};\n\nexport const AriaAnnouncerContext = createContext<AriaAnnouncer | undefined>(\n undefined,\n);\n"],"names":["createContext"],"mappings":";;;;AAQO,MAAM,oBAAA,GAAuBA,mBAAA;AAAA,EAClC;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n children?: ReactNode;\n /**\n * Style overrides for the aria-live element\n */\n style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n children,\n style,\n}: AriaAnnouncerProviderProps) {\n // announcement that gets rendered inside aria-live and read out by screen readers\n const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n // queue that stores all the requested announcements\n const announcementsRef = useRef<string[]>([]);\n // we use this variable to decide whether to start the announcement queue if one is not already in progress\n const isAnnouncingRef = useRef(false);\n // we need to keep track of the state of the component mount since all the async function calls\n // might trigger a setState after a component has been unmounted\n const mountedRef = useRef(true);\n\n // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n const announceAll = useCallback(() => {\n isAnnouncingRef.current = true;\n if (mountedRef.current) {\n setCurrentAnnouncement(\"\");\n requestAnimationFrame(() => {\n if (mountedRef.current && announcementsRef.current.length) {\n const announcement = announcementsRef.current.shift() as string;\n setCurrentAnnouncement(announcement);\n setTimeout(() => {\n announceAll();\n }, ARIA_ANNOUNCE_DELAY);\n } else {\n isAnnouncingRef.current = false;\n }\n });\n }\n }, []);\n\n const announce = useCallback(\n (announcement: string) => {\n announcementsRef.current.push(announcement);\n if (!isAnnouncingRef.current) {\n announceAll();\n }\n },\n [announceAll],\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n const value = useMemo(() => ({ announce }), [announce]);\n return (\n <AriaAnnouncerContext.Provider value={value}>\n {children}\n <div\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n // hidden styling based on https://tailwindcss.com/docs/screen-readers\n style={{\n position: \"absolute\",\n height: 1,\n width: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n borderWidth: 0,\n ...style,\n }}\n >\n {currentAnnouncement}\n </div>\n </AriaAnnouncerContext.Provider>\n );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","AriaAnnouncerContext","jsx"],"mappings":";;;;;;AAYO,MAAM,
|
|
1
|
+
{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n children?: ReactNode;\n /**\n * Style overrides for the aria-live element\n */\n style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n children,\n style,\n}: AriaAnnouncerProviderProps) {\n // announcement that gets rendered inside aria-live and read out by screen readers\n const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n // queue that stores all the requested announcements\n const announcementsRef = useRef<string[]>([]);\n // we use this variable to decide whether to start the announcement queue if one is not already in progress\n const isAnnouncingRef = useRef(false);\n // we need to keep track of the state of the component mount since all the async function calls\n // might trigger a setState after a component has been unmounted\n const mountedRef = useRef(true);\n\n // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n const announceAll = useCallback(() => {\n isAnnouncingRef.current = true;\n if (mountedRef.current) {\n setCurrentAnnouncement(\"\");\n requestAnimationFrame(() => {\n if (mountedRef.current && announcementsRef.current.length) {\n const announcement = announcementsRef.current.shift() as string;\n setCurrentAnnouncement(announcement);\n setTimeout(() => {\n announceAll();\n }, ARIA_ANNOUNCE_DELAY);\n } else {\n isAnnouncingRef.current = false;\n }\n });\n }\n }, []);\n\n const announce = useCallback(\n (announcement: string) => {\n announcementsRef.current.push(announcement);\n if (!isAnnouncingRef.current) {\n announceAll();\n }\n },\n [announceAll],\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n const value = useMemo(() => ({ announce }), [announce]);\n return (\n <AriaAnnouncerContext.Provider value={value}>\n {children}\n <div\n aria-atomic=\"true\"\n aria-live=\"assertive\"\n // hidden styling based on https://tailwindcss.com/docs/screen-readers\n style={{\n position: \"absolute\",\n height: 1,\n width: 1,\n padding: 0,\n margin: -1,\n overflow: \"hidden\",\n clip: \"rect(0, 0, 0, 0)\",\n whiteSpace: \"nowrap\",\n borderWidth: 0,\n ...style,\n }}\n >\n {currentAnnouncement}\n </div>\n </AriaAnnouncerContext.Provider>\n );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","AriaAnnouncerContext","jsx"],"mappings":";;;;;;AAYO,MAAM,mBAAA,GAAsB;AAU5B,SAAS,qBAAA,CAAsB;AAAA,EACpC,QAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAE7B,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAIA,eAAS,EAAE,CAAA;AAEjE,EAAA,MAAM,gBAAA,GAAmBC,YAAA,CAAiB,EAAE,CAAA;AAE5C,EAAA,MAAM,eAAA,GAAkBA,aAAO,KAAK,CAAA;AAGpC,EAAA,MAAM,UAAA,GAAaA,aAAO,IAAI,CAAA;AAG9B,EAAA,MAAM,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAC1B,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,sBAAA,CAAuB,EAAE,CAAA;AACzB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,UAAA,CAAW,OAAA,IAAW,gBAAA,CAAiB,OAAA,CAAQ,MAAA,EAAQ;AACzD,UAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,OAAA,CAAQ,KAAA,EAAM;AACpD,UAAA,sBAAA,CAAuB,YAAY,CAAA;AACnC,UAAA,UAAA,CAAW,MAAM;AACf,YAAA,WAAA,EAAY;AAAA,UACd,GAAG,mBAAmB,CAAA;AAAA,QACxB,CAAA,MAAO;AACL,UAAA,eAAA,CAAgB,OAAA,GAAU,KAAA;AAAA,QAC5B;AAAA,MACF,CAAC,CAAA;AAAA,IACH;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,QAAA,GAAWA,iBAAA;AAAA,IACf,CAAC,YAAA,KAAyB;AACxB,MAAA,gBAAA,CAAiB,OAAA,CAAQ,KAAK,YAAY,CAAA;AAC1C,MAAA,IAAI,CAAC,gBAAgB,OAAA,EAAS;AAC5B,QAAA,WAAA,EAAY;AAAA,MACd;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAA,GAAU,KAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQC,cAAQ,OAAO,EAAE,UAAS,CAAA,EAAI,CAAC,QAAQ,CAAC,CAAA;AACtD,EAAA,uBACEC,eAAA,CAACC,yCAAA,CAAqB,QAAA,EAArB,EAA8B,KAAA,EAC5B,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACDC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,WAAA,EAAU,WAAA;AAAA,QAEV,KAAA,EAAO;AAAA,UACL,QAAA,EAAU,UAAA;AAAA,UACV,MAAA,EAAQ,CAAA;AAAA,UACR,KAAA,EAAO,CAAA;AAAA,UACP,OAAA,EAAS,CAAA;AAAA,UACT,MAAA,EAAQ,EAAA;AAAA,UACR,QAAA,EAAU,QAAA;AAAA,UACV,IAAA,EAAM,kBAAA;AAAA,UACN,UAAA,EAAY,QAAA;AAAA,UACZ,WAAA,EAAa,CAAA;AAAA,UACb,GAAG;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils/debounce\";\nimport {\n type AriaAnnouncer,\n AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions,\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context?.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\",\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context],\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval],\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce],\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":";;;;;;AAgBO,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,
|
|
1
|
+
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils/debounce\";\nimport {\n type AriaAnnouncer,\n AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions,\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context?.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\",\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context],\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval],\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce],\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":";;;;;;AAgBO,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAA,GAAmB;AAC/B,CAAA,GAAI,EAAC,KAAM;AACT,EAAA,MAAM,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA;AAC/C,EAAA,MAAM,UAAA,GAAaC,aAAO,IAAI,CAAA;AAC9B,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAA,KAAmB;AACxC,MAAA,MAAM,4BAA4B,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,QAAA;AAE3C,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AAS3C,MAAA,SAAS,gBAAA,GAAmB;AAC1B,QAAA,IAAI,WAAW,OAAA,EAAS;AACtB,UAAA,IAAI,yBAAA,EAA2B;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA;AAAA,UAC/B;AAAA,QACF;AAAA,MACF;AAEA,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA;AAAA,MACpC,CAAA,MAAO;AACL,QAAA,gBAAA,EAAiB;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,EAAA,MAAM,QAAA,GAAWC,aAAA;AAAA,IACf,MACE,gBAAA,GAAmB,CAAA,GACfC,iBAAA,CAAS,YAAA,EAAc,gBAAgB,CAAA,GACvC,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB;AAAA,GACjC;AAEA,EAAA,MAAM,aAAA,GAAgBD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,GACpB;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAA,GAAU,KAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,aAAA;AACT;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.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 { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The name that Avatar represents.\n */\n name?: string;\n /**\n * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n * If a function is not passed or returns undefined, Avatar will default to Icon.\n */\n nameToInitials?: NameToInitials;\n /**\n * Image src of Avatar.\n */\n src?: string;\n /**\n * Multiplier for the base avatar.\n */\n size?: number;\n /**\n * Icon to be used as a default item. Defaults to `UserIcon`.\n */\n fallbackIcon?: ReactNode;\n /**\n * Changes Avatar's color.\n */\n color?:\n | \"accent\"\n | \"category-1\"\n | \"category-2\"\n | \"category-3\"\n | \"category-4\"\n | \"category-5\"\n | \"category-6\"\n | \"category-7\"\n | \"category-8\"\n | \"category-9\"\n | \"category-10\"\n | \"category-11\"\n | \"category-12\"\n | \"category-13\"\n | \"category-14\"\n | \"category-15\"\n | \"category-16\"\n | \"category-17\"\n | \"category-18\"\n | \"category-19\"\n | \"category-20\";\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n name\n ?.split(\" \")\n .slice(0, 2)\n .map((n) => n[0])\n .join(\"\")\n .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n className,\n children: childrenProp,\n color = \"accent\",\n name,\n nameToInitials = defaultNameToInitials,\n src,\n size = DEFAULT_AVATAR_SIZE,\n style: styleProp,\n fallbackIcon: fallbackIconProp,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n const { UserIcon } = useIcon();\n\n const fallbackIcon =\n fallbackIconProp === undefined ? (\n <UserIcon aria-hidden />\n ) : (\n fallbackIconProp\n );\n\n useComponentCssInjection({\n testId: \"salt-avatar\",\n css: avatarCss,\n window: targetWindow,\n });\n\n let children: ReactNode;\n\n const style = {\n ...styleProp,\n \"--saltAvatar-size-multiplier\": `${size}`,\n };\n\n const status = useAvatarImage({ src });\n const hasImgNotFailing = status === \"loaded\";\n if (hasImgNotFailing) {\n children = <img alt=\"\" src={src} />;\n } else if (childrenProp != null) {\n children = childrenProp;\n }\n\n const avatarInitials = nameToInitials(name);\n\n const ariaProps = name\n ? {\n role: \"img\",\n \"aria-label\": name,\n }\n : {};\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(\n withBaseName(),\n withBaseName(color),\n {\n [withBaseName(\"withImage\")]: hasImgNotFailing,\n },\n className,\n )}\n {...ariaProps}\n {...rest}\n >\n {children || avatarInitials || fallbackIcon}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.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 { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The name that Avatar represents.\n */\n name?: string;\n /**\n * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n * If a function is not passed or returns undefined, Avatar will default to Icon.\n */\n nameToInitials?: NameToInitials;\n /**\n * Image src of Avatar.\n */\n src?: string;\n /**\n * Multiplier for the base avatar.\n */\n size?: number;\n /**\n * Icon to be used as a default item. Defaults to `UserIcon`.\n */\n fallbackIcon?: ReactNode;\n /**\n * Changes Avatar's color.\n */\n color?:\n | \"accent\"\n | \"category-1\"\n | \"category-2\"\n | \"category-3\"\n | \"category-4\"\n | \"category-5\"\n | \"category-6\"\n | \"category-7\"\n | \"category-8\"\n | \"category-9\"\n | \"category-10\"\n | \"category-11\"\n | \"category-12\"\n | \"category-13\"\n | \"category-14\"\n | \"category-15\"\n | \"category-16\"\n | \"category-17\"\n | \"category-18\"\n | \"category-19\"\n | \"category-20\";\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n name\n ?.split(\" \")\n .slice(0, 2)\n .map((n) => n[0])\n .join(\"\")\n .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n className,\n children: childrenProp,\n color = \"accent\",\n name,\n nameToInitials = defaultNameToInitials,\n src,\n size = DEFAULT_AVATAR_SIZE,\n style: styleProp,\n fallbackIcon: fallbackIconProp,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n const { UserIcon } = useIcon();\n\n const fallbackIcon =\n fallbackIconProp === undefined ? (\n <UserIcon aria-hidden />\n ) : (\n fallbackIconProp\n );\n\n useComponentCssInjection({\n testId: \"salt-avatar\",\n css: avatarCss,\n window: targetWindow,\n });\n\n let children: ReactNode;\n\n const style = {\n ...styleProp,\n \"--saltAvatar-size-multiplier\": `${size}`,\n };\n\n const status = useAvatarImage({ src });\n const hasImgNotFailing = status === \"loaded\";\n if (hasImgNotFailing) {\n children = <img alt=\"\" src={src} />;\n } else if (childrenProp != null) {\n children = childrenProp;\n }\n\n const avatarInitials = nameToInitials(name);\n\n const ariaProps = name\n ? {\n role: \"img\",\n \"aria-label\": name,\n }\n : {};\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(\n withBaseName(),\n withBaseName(color),\n {\n [withBaseName(\"withImage\")]: hasImgNotFailing,\n },\n className,\n )}\n {...ariaProps}\n {...rest}\n >\n {children || avatarInitials || fallbackIcon}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,mBAAA,GAAsB,CAAA;AAE5B,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CACI,KAAA,CAAM,KACP,KAAA,CAAM,CAAA,EAAG,CAAA,CAAA,CACT,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EAAA,CAAA,CACL,WAAA,EAAA;AAEE,MAAM,MAAA,GAASC,gBAAA,CAAwC,SAASC,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA;AAAA,EACA,cAAA,GAAiB,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAA,GAAO,mBAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA;AAAA,EACd,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,4BAAA,EAAQ;AAE7B,EAAA,MAAM,eACJ,gBAAA,KAAqB,MAAA,kCAClB,QAAA,EAAA,EAAS,aAAA,EAAW,MAAC,CAAA,GAEtB,gBAAA;AAGJ,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,IAAI,QAAA;AAEJ,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAA,GAASC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAA,KAAW,QAAA;AACpC,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,QAAA,mBAAWC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAI,EAAA,EAAG,GAAA,EAAU,CAAA;AAAA,EACnC,CAAA,MAAA,IAAW,gBAAgB,IAAA,EAAM;AAC/B,IAAA,QAAA,GAAW,YAAA;AAAA,EACb;AAEA,EAAA,MAAM,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,YAAY,IAAA,GACd;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,YAAA,EAAc;AAAA,MAEhB,EAAC;AAEL,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAA,IAAkB;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}
|
|
@@ -8,29 +8,57 @@ require('../utils/useFloatingUI/useFloatingUI.js');
|
|
|
8
8
|
require('../utils/useId.js');
|
|
9
9
|
require('../salt-provider/SaltProvider.js');
|
|
10
10
|
require('../viewport/ViewportProvider.js');
|
|
11
|
+
var useIsHydrated = require('./useIsHydrated.js');
|
|
11
12
|
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
function resolveStatus(image, src) {
|
|
14
|
+
if (!image) {
|
|
15
|
+
return "pending";
|
|
16
|
+
}
|
|
17
|
+
if (!src) {
|
|
18
|
+
return "error";
|
|
19
|
+
}
|
|
20
|
+
if (image.src !== src) {
|
|
21
|
+
image.src = src;
|
|
22
|
+
}
|
|
23
|
+
return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
|
|
24
|
+
}
|
|
25
|
+
function useAvatarImage({
|
|
26
|
+
src,
|
|
27
|
+
referrerPolicy,
|
|
28
|
+
crossOrigin
|
|
29
|
+
}) {
|
|
30
|
+
const isHydrated = useIsHydrated.useIsHydrated();
|
|
31
|
+
const imageRef = React.useRef(null);
|
|
32
|
+
const image = (() => {
|
|
33
|
+
if (!isHydrated) return null;
|
|
34
|
+
if (!imageRef.current) {
|
|
35
|
+
imageRef.current = new Image();
|
|
36
|
+
}
|
|
37
|
+
return imageRef.current;
|
|
38
|
+
})();
|
|
39
|
+
const [status, setStatus] = React.useState(
|
|
40
|
+
() => resolveStatus(image, src)
|
|
41
|
+
);
|
|
17
42
|
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
18
|
-
|
|
19
|
-
|
|
43
|
+
setStatus(resolveStatus(image, src));
|
|
44
|
+
}, [image, src]);
|
|
45
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
46
|
+
if (!image) return;
|
|
47
|
+
const handleLoad = () => setStatus("loaded");
|
|
48
|
+
const handleError = () => setStatus("error");
|
|
49
|
+
image.addEventListener("load", handleLoad);
|
|
50
|
+
image.addEventListener("error", handleError);
|
|
51
|
+
if (referrerPolicy) {
|
|
52
|
+
image.referrerPolicy = referrerPolicy;
|
|
53
|
+
}
|
|
54
|
+
if (typeof crossOrigin === "string") {
|
|
55
|
+
image.crossOrigin = crossOrigin;
|
|
20
56
|
}
|
|
21
|
-
let active = true;
|
|
22
|
-
const image = new Image();
|
|
23
|
-
image.src = src;
|
|
24
|
-
const onLoad = () => active && setStatus("loaded");
|
|
25
|
-
const onError = () => active && setStatus("error");
|
|
26
|
-
image.addEventListener("load", onLoad, { once: true });
|
|
27
|
-
image.addEventListener("error", onError, { once: true });
|
|
28
57
|
return () => {
|
|
29
|
-
image.removeEventListener("load",
|
|
30
|
-
image.removeEventListener("
|
|
31
|
-
active = false;
|
|
58
|
+
image.removeEventListener("load", handleLoad);
|
|
59
|
+
image.removeEventListener("error", handleError);
|
|
32
60
|
};
|
|
33
|
-
}, [
|
|
61
|
+
}, [image, crossOrigin, referrerPolicy]);
|
|
34
62
|
return status;
|
|
35
63
|
}
|
|
36
64
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { type ImgHTMLAttributes,
|
|
1
|
+
{"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { type ImgHTMLAttributes, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\nimport { useIsHydrated } from \"./useIsHydrated\";\n\ntype ImageLoadingStatus = \"pending\" | \"loading\" | \"loaded\" | \"error\";\n\nfunction resolveStatus(\n image: HTMLImageElement | null,\n src?: string,\n): ImageLoadingStatus {\n if (!image) {\n return \"pending\";\n }\n if (!src) {\n return \"error\";\n }\n if (image.src !== src) {\n image.src = src;\n }\n return image.complete && image.naturalWidth > 0 ? \"loaded\" : \"loading\";\n}\n\nexport function useAvatarImage({\n src,\n referrerPolicy,\n crossOrigin,\n}: ImgHTMLAttributes<HTMLImageElement>) {\n const isHydrated = useIsHydrated();\n const imageRef = useRef<HTMLImageElement | null>(null);\n const image = (() => {\n if (!isHydrated) return null;\n if (!imageRef.current) {\n imageRef.current = new Image();\n }\n return imageRef.current;\n })();\n\n const [status, setStatus] = useState<ImageLoadingStatus>(() =>\n resolveStatus(image, src),\n );\n\n useIsomorphicLayoutEffect(() => {\n setStatus(resolveStatus(image, src));\n }, [image, src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!image) return;\n\n const handleLoad = () => setStatus(\"loaded\");\n const handleError = () => setStatus(\"error\");\n image.addEventListener(\"load\", handleLoad);\n image.addEventListener(\"error\", handleError);\n if (referrerPolicy) {\n image.referrerPolicy = referrerPolicy;\n }\n if (typeof crossOrigin === \"string\") {\n image.crossOrigin = crossOrigin;\n }\n\n return () => {\n image.removeEventListener(\"load\", handleLoad);\n image.removeEventListener(\"error\", handleError);\n };\n }, [image, crossOrigin, referrerPolicy]);\n\n return status;\n}\n"],"names":["useIsHydrated","useRef","useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;;;AAMA,SAAS,aAAA,CACP,OACA,GAAA,EACoB;AACpB,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO,SAAA;AAAA,EACT;AACA,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,IAAI,KAAA,CAAM,QAAQ,GAAA,EAAK;AACrB,IAAA,KAAA,CAAM,GAAA,GAAM,GAAA;AAAA,EACd;AACA,EAAA,OAAO,KAAA,CAAM,QAAA,IAAY,KAAA,CAAM,YAAA,GAAe,IAAI,QAAA,GAAW,SAAA;AAC/D;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,GAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,aAAaA,2BAAA,EAAc;AACjC,EAAA,MAAM,QAAA,GAAWC,aAAgC,IAAI,CAAA;AACrD,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,IAAI,CAAC,YAAY,OAAO,IAAA;AACxB,IAAA,IAAI,CAAC,SAAS,OAAA,EAAS;AACrB,MAAA,QAAA,CAAS,OAAA,GAAU,IAAI,KAAA,EAAM;AAAA,IAC/B;AACA,IAAA,OAAO,QAAA,CAAS,OAAA;AAAA,EAClB,CAAA,GAAG;AAEH,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,cAAA;AAAA,IAA6B,MACvD,aAAA,CAAc,KAAA,EAAO,GAAG;AAAA,GAC1B;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,SAAA,CAAU,aAAA,CAAc,KAAA,EAAO,GAAG,CAAC,CAAA;AAAA,EACrC,CAAA,EAAG,CAAC,KAAA,EAAO,GAAG,CAAC,CAAA;AAEf,EAAAA,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,KAAA,EAAO;AAEZ,IAAA,MAAM,UAAA,GAAa,MAAM,SAAA,CAAU,QAAQ,CAAA;AAC3C,IAAA,MAAM,WAAA,GAAc,MAAM,SAAA,CAAU,OAAO,CAAA;AAC3C,IAAA,KAAA,CAAM,gBAAA,CAAiB,QAAQ,UAAU,CAAA;AACzC,IAAA,KAAA,CAAM,gBAAA,CAAiB,SAAS,WAAW,CAAA;AAC3C,IAAA,IAAI,cAAA,EAAgB;AAClB,MAAA,KAAA,CAAM,cAAA,GAAiB,cAAA;AAAA,IACzB;AACA,IAAA,IAAI,OAAO,gBAAgB,QAAA,EAAU;AACnC,MAAA,KAAA,CAAM,WAAA,GAAc,WAAA;AAAA,IACtB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,CAAM,mBAAA,CAAoB,QAAQ,UAAU,CAAA;AAC5C,MAAA,KAAA,CAAM,mBAAA,CAAoB,SAAS,WAAW,CAAA;AAAA,IAChD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,WAAA,EAAa,cAAc,CAAC,CAAA;AAEvC,EAAA,OAAO,MAAA;AACT;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var shim = require('use-sync-external-store/shim');
|
|
4
|
+
|
|
5
|
+
function subscribe() {
|
|
6
|
+
return () => {
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
function useIsHydrated() {
|
|
10
|
+
return shim.useSyncExternalStore(
|
|
11
|
+
subscribe,
|
|
12
|
+
() => true,
|
|
13
|
+
() => false
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
exports.useIsHydrated = useIsHydrated;
|
|
18
|
+
//# sourceMappingURL=useIsHydrated.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsHydrated.js","sources":["../src/avatar/useIsHydrated.ts"],"sourcesContent":["import { useSyncExternalStore } from \"use-sync-external-store/shim\";\n\nfunction subscribe() {\n return () => {};\n}\n\n// TODO consider moving this to utils\nexport function useIsHydrated() {\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n"],"names":["useSyncExternalStore"],"mappings":";;;;AAEA,SAAS,SAAA,GAAY;AACnB,EAAA,OAAO,MAAM;AAAA,EAAC,CAAA;AAChB;AAGO,SAAS,aAAA,GAAgB;AAC9B,EAAA,OAAOA,yBAAA;AAAA,IACL,SAAA;AAAA,IACA,MAAM,IAAA;AAAA,IACN,MAAM;AAAA,GACR;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.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 badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * The number to display on the badge. If `value` is not provided,\n * the badge will render as a dot badge.\n */\n value?: number | string;\n /**\n * If a child is provided the Badge will render top right. By defualt renders inline.\n */\n children?: ReactNode;\n /**\n * The max number to display on the badge.\n */\n max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { value, max = 999, className, children, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-badge\",\n css: badgeCss,\n window: targetWindow,\n });\n\n const valueText =\n typeof value === \"number\" && value > max ? `${max}+` : value;\n\n const dotBadge = typeof value === \"undefined\";\n\n return (\n <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n <span\n className={clsx(withBaseName(\"badge\"), {\n [withBaseName(\"topRight\")]: children,\n [withBaseName(\"dotBadge\")]: dotBadge,\n })}\n >\n {valueText}\n </span>\n </span>\n );\n});\n"],"names":["makePrefixer","forwardRef","Badge","useWindow","useComponentCssInjection","badgeCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAEtC,MAAM,
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.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 badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * The number to display on the badge. If `value` is not provided,\n * the badge will render as a dot badge.\n */\n value?: number | string;\n /**\n * If a child is provided the Badge will render top right. By defualt renders inline.\n */\n children?: ReactNode;\n /**\n * The max number to display on the badge.\n */\n max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { value, max = 999, className, children, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-badge\",\n css: badgeCss,\n window: targetWindow,\n });\n\n const valueText =\n typeof value === \"number\" && value > max ? `${max}+` : value;\n\n const dotBadge = typeof value === \"undefined\";\n\n return (\n <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n <span\n className={clsx(withBaseName(\"badge\"), {\n [withBaseName(\"topRight\")]: children,\n [withBaseName(\"dotBadge\")]: dotBadge,\n })}\n >\n {valueText}\n </span>\n </span>\n );\n});\n"],"names":["makePrefixer","forwardRef","Badge","useWindow","useComponentCssInjection","badgeCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAEtC,MAAM,KAAA,GAAQC,gBAAA,CAAwC,SAASC,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAA,GAAM,GAAA,EAAK,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,IAC5C,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,YAAA;AAAA,IACR,GAAA,EAAKC,OAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAA,GACJ,OAAO,KAAA,KAAU,QAAA,IAAY,QAAQ,GAAA,GAAM,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,GAAM,KAAA;AAEzD,EAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,WAAA;AAElC,EAAA,uBACEC,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC7D,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACDC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,UACrC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n aria-live=\"polite\"\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Banner","useWindow","useComponentCssInjection","bannerCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n aria-live=\"polite\"\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Banner","useWindow","useComponentCssInjection","bannerCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,MAAA,GAAS,MAAA,EAAQ,GAAG,IAAA,IAChE,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,MAAM,CAAA;AAAA,QACnB,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,QAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,+BAAA,EAAA,EAAgB,MAAA,EAAgB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QACjE;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.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 { makePrefixer } from \"../utils\";\nimport bannerActionsCss from \"./BannerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\ninterface BannerActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerActions\n */\n children: ReactNode;\n}\n\nexport const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(\n function BannerActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-actions\",\n css: bannerActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerActions","useWindow","useComponentCssInjection","bannerActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,
|
|
1
|
+
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.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 { makePrefixer } from \"../utils\";\nimport bannerActionsCss from \"./BannerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\ninterface BannerActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerActions\n */\n children: ReactNode;\n}\n\nexport const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(\n function BannerActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-actions\",\n css: bannerActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerActions","useWindow","useComponentCssInjection","bannerActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,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,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAAA,EAEzE;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.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 { makePrefixer } from \"../utils\";\nimport bannerContentCss from \"./BannerContent.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\ninterface BannerContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerContent\n */\n children: ReactNode;\n}\n\nexport const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(\n function BannerContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-content\",\n css: bannerContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerContent","useWindow","useComponentCssInjection","bannerContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,
|
|
1
|
+
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.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 { makePrefixer } from \"../utils\";\nimport bannerContentCss from \"./BannerContent.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\ninterface BannerContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerContent\n */\n children: ReactNode;\n}\n\nexport const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(\n function BannerContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-content\",\n css: bannerContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerContent","useWindow","useComponentCssInjection","bannerContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,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,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAAA,EAEzE;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.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 { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\nimport borderItemCss from \"./BorderItem.css\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: 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\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderItem: BorderItemComponent = forwardRef(function BorderItem<\n T extends ElementType,\n>(props: unknown, ref?: ForwardedRef<unknown>) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const {\n as,\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n } = props as BorderItemProps<T>;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n as={as as ElementType}\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className,\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n});\n"],"names":["makePrefixer","forwardRef","BorderItem","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,
|
|
1
|
+
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.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 { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\nimport borderItemCss from \"./BorderItem.css\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: 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\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderItem: BorderItemComponent = forwardRef(function BorderItem<\n T extends ElementType,\n>(props: unknown, ref?: ForwardedRef<unknown>) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const {\n as,\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n } = props as BorderItemProps<T>;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n as={as as ElementType}\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className,\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n});\n"],"names":["makePrefixer","forwardRef","BorderItem","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,eAAA,GAAkB;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAmCA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAA,GAAkCC,gBAAA,CAAW,SAASC,WAAAA,CAEjE,OAAgB,GAAA,EAA6B;AAE7C,EAAA,MAAM;AAAA,IACJ,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,GAAS,KAAA;AAAA,IACT,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,kBAAA;AAAA,IACR,GAAA,EAAKC,YAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,GAAG,KAAA;AAAA,IACH,qBAAA,EAAuB;AAAA,GACzB;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n isValidElement,\n type ReactNode,\n useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n function BorderLayout<T extends ElementType>(\n props: unknown,\n ref?: ForwardedRef<unknown>,\n ) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const { as, children, className, gap, style, ...rest } =\n props as BorderLayoutProps<T>;\n\n const borderAreas = Children.map(\n children,\n (child) => isValidElement(child) && child.props.position,\n ) as BorderPosition[];\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\",\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n as={as as ElementType}\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BorderLayout","Children","isValidElement","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAEpD,MAAM,
|
|
1
|
+
{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n isValidElement,\n type ReactNode,\n useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n function BorderLayout<T extends ElementType>(\n props: unknown,\n ref?: ForwardedRef<unknown>,\n ) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const { as, children, className, gap, style, ...rest } =\n props as BorderLayoutProps<T>;\n\n const borderAreas = Children.map(\n children,\n (child) => isValidElement(child) && child.props.position,\n ) as BorderPosition[];\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\",\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n as={as as ElementType}\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BorderLayout","Children","isValidElement","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAEpD,MAAM,eAAA,GAAkB,CAAA;AAMjB,MAAM,YAAA,GAAsCC,gBAAA;AAAA,EACjD,SAASC,aAAAA,CACP,KAAA,EACA,GAAA,EACA;AAEA,IAAA,MAAM,EAAE,IAAI,QAAA,EAAU,SAAA,EAAW,KAAK,KAAA,EAAO,GAAG,MAAK,GACnD,KAAA;AAEF,IAAA,MAAM,cAAcC,cAAA,CAAS,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAAA,KAAUC,oBAAA,CAAe,KAAK,CAAA,IAAK,MAAM,KAAA,CAAM;AAAA,KAClD;AAEA,IAAA,MAAM,UAAA,GAAa,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAA,CAAS,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAA,CAAQ,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,WAAA,GAAc,WAAA,CAAY,QAAA,CAAS,MAAM,IAAI,MAAA,GAAS,QAAA;AAE5D,IAAA,MAAM,YAAA,GAAe,WAAA,CAAY,QAAA,CAAS,MAAM,IAAI,MAAA,GAAS,QAAA;AAE7D,IAAA,MAAM,UAAA,GAAa,CAAA,EAAG,WAAW,CAAA,QAAA,EAAW,YAAY,CAAA,CAAA;AAExD,IAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAA,CAAS,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAA,CAAQ,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,oBAAoB,CAAA,CAAA,EAAI,UAAU,CAAA,GAAA,EAAM,UAAU,MAAM,aAAa,CAAA,CAAA,CAAA;AAE3E,IAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,QAAA,CAAS,QAAQ,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,QAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,UAAA,OAAA,CAAQ,IAAA;AAAA,YACN;AAAA,WACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,MAAM,kBAAA,GAAqB;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAAA,EAA6B;AAAA,KAC/B;AAEA,IAAA,uBACEC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,WAAW,qBAAqB,CAAA;AAAA,QAChE,OAAA,EAAS,eAAA;AAAA,QACT,KAAK,GAAA,IAAO,CAAA;AAAA,QACZ,KAAA,EAAO,kBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useMemo, useState } from \"react\";\nimport { createContext } from \"../utils/createContext\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport type { Breakpoints } from \"./Breakpoints\";\n\ntype Breakpoint = keyof Breakpoints;\n\ninterface BreakpointContext {\n matchedBreakpoints: Breakpoint[];\n}\n\nconst Context = createContext<BreakpointContext>(\"BreakpointContext\", {\n matchedBreakpoints: [],\n});\n\ninterface BreakpointProviderProps {\n children?: ReactNode;\n matchedBreakpoints: Breakpoint[];\n}\n\nexport function BreakpointProvider(props: BreakpointProviderProps) {\n const { children, matchedBreakpoints } = props;\n\n return (\n <Context.Provider value={{ matchedBreakpoints }}>\n {children}\n </Context.Provider>\n );\n}\n\nexport function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[] {\n const entries = useMemo(\n () => Object.entries(breakpoints).sort(([, a], [, b]) => b - a),\n [breakpoints],\n );\n\n const supportsMatchMedia =\n typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n const [matchedBreakpoints, setMatchedBreakpoints] = useState<\n Partial<Record<Breakpoint, boolean>>\n >(Object.fromEntries(entries.map(([bp]) => [bp as Breakpoint, false])));\n\n useIsomorphicLayoutEffect(() => {\n if (!supportsMatchMedia) {\n return;\n }\n\n const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\n\n const matchers = queries.map((query, index) => {\n const mq = window.matchMedia(query);\n const bp = entries[index][0] as Breakpoint;\n\n return {\n mq,\n handler: () => {\n setMatchedBreakpoints((prev) => {\n return {\n ...prev,\n [bp]: mq.matches,\n };\n });\n },\n };\n });\n\n for (const { mq, handler } of matchers) {\n handler();\n mq.addEventListener(\"change\", handler);\n }\n\n return () => {\n for (const { mq, handler } of matchers) {\n mq.removeEventListener(\"change\", handler);\n }\n };\n }, [supportsMatchMedia, entries]);\n\n return Object.keys(matchedBreakpoints).filter(\n (bp) => matchedBreakpoints[bp as Breakpoint],\n ) as Breakpoint[];\n}\n\nexport function useBreakpoint(): BreakpointContext & {\n breakpoint: Breakpoint | null;\n} {\n const { matchedBreakpoints } = useContext(Context);\n\n return {\n matchedBreakpoints,\n breakpoint: matchedBreakpoints[0] ?? null,\n };\n}\n"],"names":["createContext","jsx","useMemo","useState","useIsomorphicLayoutEffect","useContext"],"mappings":";;;;;;;AAWA,MAAM,OAAA,GAAUA,4BAAiC,
|
|
1
|
+
{"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useMemo, useState } from \"react\";\nimport { createContext } from \"../utils/createContext\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport type { Breakpoints } from \"./Breakpoints\";\n\ntype Breakpoint = keyof Breakpoints;\n\ninterface BreakpointContext {\n matchedBreakpoints: Breakpoint[];\n}\n\nconst Context = createContext<BreakpointContext>(\"BreakpointContext\", {\n matchedBreakpoints: [],\n});\n\ninterface BreakpointProviderProps {\n children?: ReactNode;\n matchedBreakpoints: Breakpoint[];\n}\n\nexport function BreakpointProvider(props: BreakpointProviderProps) {\n const { children, matchedBreakpoints } = props;\n\n return (\n <Context.Provider value={{ matchedBreakpoints }}>\n {children}\n </Context.Provider>\n );\n}\n\nexport function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[] {\n const entries = useMemo(\n () => Object.entries(breakpoints).sort(([, a], [, b]) => b - a),\n [breakpoints],\n );\n\n const supportsMatchMedia =\n typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n const [matchedBreakpoints, setMatchedBreakpoints] = useState<\n Partial<Record<Breakpoint, boolean>>\n >(Object.fromEntries(entries.map(([bp]) => [bp as Breakpoint, false])));\n\n useIsomorphicLayoutEffect(() => {\n if (!supportsMatchMedia) {\n return;\n }\n\n const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\n\n const matchers = queries.map((query, index) => {\n const mq = window.matchMedia(query);\n const bp = entries[index][0] as Breakpoint;\n\n return {\n mq,\n handler: () => {\n setMatchedBreakpoints((prev) => {\n return {\n ...prev,\n [bp]: mq.matches,\n };\n });\n },\n };\n });\n\n for (const { mq, handler } of matchers) {\n handler();\n mq.addEventListener(\"change\", handler);\n }\n\n return () => {\n for (const { mq, handler } of matchers) {\n mq.removeEventListener(\"change\", handler);\n }\n };\n }, [supportsMatchMedia, entries]);\n\n return Object.keys(matchedBreakpoints).filter(\n (bp) => matchedBreakpoints[bp as Breakpoint],\n ) as Breakpoint[];\n}\n\nexport function useBreakpoint(): BreakpointContext & {\n breakpoint: Breakpoint | null;\n} {\n const { matchedBreakpoints } = useContext(Context);\n\n return {\n matchedBreakpoints,\n breakpoint: matchedBreakpoints[0] ?? null,\n };\n}\n"],"names":["createContext","jsx","useMemo","useState","useIsomorphicLayoutEffect","useContext"],"mappings":";;;;;;;AAWA,MAAM,OAAA,GAAUA,4BAAiC,mBAAA,EAAqB;AAAA,EACpE,oBAAoB;AACtB,CAAC,CAAA;AAOM,SAAS,mBAAmB,KAAA,EAAgC;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,kBAAA,EAAmB,GAAI,KAAA;AAEzC,EAAA,uBACEC,cAAA,CAAC,QAAQ,QAAA,EAAR,EAAiB,OAAO,EAAE,kBAAA,IACxB,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,sBAAsB,WAAA,EAAwC;AAC5E,EAAA,MAAM,OAAA,GAAUC,aAAA;AAAA,IACd,MAAM,MAAA,CAAO,OAAA,CAAQ,WAAW,CAAA,CAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA;AAAA,IAC9D,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,qBACJ,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,OAAO,UAAA,KAAe,UAAA;AAEhE,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,IAAIC,cAAA,CAElD,MAAA,CAAO,YAAY,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAC,EAAE,CAAA,KAAM,CAAC,IAAkB,KAAK,CAAC,CAAC,CAAC,CAAA;AAEtE,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,kBAAA,EAAoB;AACvB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAG,KAAK,CAAA,KAAM,CAAA,YAAA,EAAe,KAAK,CAAA,GAAA,CAAK,CAAA;AAEpE,IAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,GAAA,CAAI,CAAC,OAAO,KAAA,KAAU;AAC7C,MAAA,MAAM,EAAA,GAAK,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAClC,MAAA,MAAM,EAAA,GAAK,OAAA,CAAQ,KAAK,CAAA,CAAE,CAAC,CAAA;AAE3B,MAAA,OAAO;AAAA,QACL,EAAA;AAAA,QACA,SAAS,MAAM;AACb,UAAA,qBAAA,CAAsB,CAAC,IAAA,KAAS;AAC9B,YAAA,OAAO;AAAA,cACL,GAAG,IAAA;AAAA,cACH,CAAC,EAAE,GAAG,EAAA,CAAG;AAAA,aACX;AAAA,UACF,CAAC,CAAA;AAAA,QACH;AAAA,OACF;AAAA,IACF,CAAC,CAAA;AAED,IAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAA,EAAQ,IAAK,QAAA,EAAU;AACtC,MAAA,OAAA,EAAQ;AACR,MAAA,EAAA,CAAG,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAAA,IACvC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAA,EAAQ,IAAK,QAAA,EAAU;AACtC,QAAA,EAAA,CAAG,mBAAA,CAAoB,UAAU,OAAO,CAAA;AAAA,MAC1C;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,kBAAA,EAAoB,OAAO,CAAC,CAAA;AAEhC,EAAA,OAAO,MAAA,CAAO,IAAA,CAAK,kBAAkB,CAAA,CAAE,MAAA;AAAA,IACrC,CAAC,EAAA,KAAO,kBAAA,CAAmB,EAAgB;AAAA,GAC7C;AACF;AAEO,SAAS,aAAA,GAEd;AACA,EAAA,MAAM,EAAE,kBAAA,EAAmB,GAAIC,gBAAA,CAAW,OAAO,CAAA;AAEjD,EAAA,OAAO;AAAA,IACL,kBAAA;AAAA,IACA,UAAA,EAAY,kBAAA,CAAmB,CAAC,CAAA,IAAK;AAAA,GACvC;AACF;;;;;;"}
|