@salt-ds/core 1.25.0 → 1.27.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/css/salt-core.css +122 -32
- package/dist-cjs/accordion/Accordion.js +8 -1
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +8 -1
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +8 -1
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +8 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +8 -1
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +8 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +8 -1
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +8 -1
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +8 -1
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +8 -1
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +8 -1
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +8 -1
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +8 -1
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +8 -1
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js +169 -0
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -0
- package/dist-cjs/breakpoints/Breakpoints.js +1 -2
- package/dist-cjs/breakpoints/Breakpoints.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/button/Button.js +8 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +8 -1
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +8 -1
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +8 -1
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +8 -1
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +8 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +10 -2
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +23 -2
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +7 -0
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +8 -1
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +8 -1
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +8 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.js +8 -1
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +7 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +8 -1
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +8 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +8 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +8 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +12 -4
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.css.js +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +29 -15
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +8 -1
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +8 -1
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +8 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +8 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +13 -5
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.css.js +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +31 -11
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +13 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +8 -1
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +8 -1
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +8 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +8 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/link/Link.js +8 -1
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.css.js +1 -1
- package/dist-cjs/link-card/LinkCard.js +8 -1
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +8 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +8 -1
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/Menu.js +24 -0
- package/dist-cjs/menu/Menu.js.map +1 -0
- package/dist-cjs/menu/MenuBase.js +228 -0
- package/dist-cjs/menu/MenuBase.js.map +1 -0
- package/dist-cjs/menu/MenuContext.js +126 -0
- package/dist-cjs/menu/MenuContext.js.map +1 -0
- package/dist-cjs/menu/MenuGroup.css.js +6 -0
- package/dist-cjs/menu/MenuGroup.css.js.map +1 -0
- package/dist-cjs/menu/MenuGroup.js +140 -0
- package/dist-cjs/menu/MenuGroup.js.map +1 -0
- package/dist-cjs/menu/MenuItem.css.js +6 -0
- package/dist-cjs/menu/MenuItem.css.js.map +1 -0
- package/dist-cjs/menu/MenuItem.js +185 -0
- package/dist-cjs/menu/MenuItem.js.map +1 -0
- package/dist-cjs/menu/MenuPanel.css.js +6 -0
- package/dist-cjs/menu/MenuPanel.css.js.map +1 -0
- package/dist-cjs/menu/MenuPanel.js +157 -0
- package/dist-cjs/menu/MenuPanel.js.map +1 -0
- package/dist-cjs/menu/MenuPanelBase.js +29 -0
- package/dist-cjs/menu/MenuPanelBase.js.map +1 -0
- package/dist-cjs/menu/MenuPanelContext.js +122 -0
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -0
- package/dist-cjs/menu/MenuTrigger.js +141 -0
- package/dist-cjs/menu/MenuTrigger.js.map +1 -0
- package/dist-cjs/menu/MenuTriggerContext.js +118 -0
- package/dist-cjs/menu/MenuTriggerContext.js.map +1 -0
- package/dist-cjs/multiline-input/MultilineInput.js +8 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +8 -1
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/Option.js +8 -1
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js +8 -1
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +8 -1
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +8 -1
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +8 -1
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +8 -1
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +8 -1
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +8 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +8 -1
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +8 -1
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js +8 -1
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +8 -1
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +8 -1
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +8 -1
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +8 -1
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +8 -1
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +8 -1
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +8 -1
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +8 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js +8 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-cjs/pill/Pill.js +8 -1
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +8 -1
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +8 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +8 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +8 -1
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +8 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +8 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +8 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +16 -5
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +8 -1
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +8 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +8 -1
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +8 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +8 -1
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.css.js +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +20 -6
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +8 -1
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +8 -1
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/switch/Switch.js +8 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Text.js +8 -1
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +8 -1
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +8 -1
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +8 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +8 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +8 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +9 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +7 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +8 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +12 -4
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useResponsiveProp.js +15 -0
- package/dist-cjs/utils/useResponsiveProp.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +8 -1
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +8 -1
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +8 -1
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +8 -1
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +8 -1
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +8 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +8 -1
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +8 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +8 -1
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +8 -1
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +8 -1
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +8 -1
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +8 -1
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +8 -1
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +8 -1
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +8 -1
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +163 -0
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -0
- package/dist-es/breakpoints/Breakpoints.js +1 -2
- package/dist-es/breakpoints/Breakpoints.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/button/Button.js +8 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +8 -1
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +8 -1
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +8 -1
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +8 -1
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +8 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +10 -2
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +23 -2
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +7 -0
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +8 -1
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +8 -1
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +8 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.css.js +1 -1
- package/dist-es/dialog/DialogHeader.js +8 -1
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +7 -0
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +8 -1
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +8 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +8 -1
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +8 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +13 -5
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.css.js +1 -1
- package/dist-es/flex-layout/FlexLayout.js +30 -16
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +8 -1
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +8 -1
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +8 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +8 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +14 -6
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.css.js +1 -1
- package/dist-es/grid-layout/GridLayout.js +32 -12
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +7 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +8 -1
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.js +8 -1
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +8 -1
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js +8 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/link/Link.js +8 -1
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.css.js +1 -1
- package/dist-es/link-card/LinkCard.js +8 -1
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +8 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +8 -1
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/Menu.js +20 -0
- package/dist-es/menu/Menu.js.map +1 -0
- package/dist-es/menu/MenuBase.js +224 -0
- package/dist-es/menu/MenuBase.js.map +1 -0
- package/dist-es/menu/MenuContext.js +121 -0
- package/dist-es/menu/MenuContext.js.map +1 -0
- package/dist-es/menu/MenuGroup.css.js +4 -0
- package/dist-es/menu/MenuGroup.css.js.map +1 -0
- package/dist-es/menu/MenuGroup.js +136 -0
- package/dist-es/menu/MenuGroup.js.map +1 -0
- package/dist-es/menu/MenuItem.css.js +4 -0
- package/dist-es/menu/MenuItem.css.js.map +1 -0
- package/dist-es/menu/MenuItem.js +181 -0
- package/dist-es/menu/MenuItem.js.map +1 -0
- package/dist-es/menu/MenuPanel.css.js +4 -0
- package/dist-es/menu/MenuPanel.css.js.map +1 -0
- package/dist-es/menu/MenuPanel.js +153 -0
- package/dist-es/menu/MenuPanel.js.map +1 -0
- package/dist-es/menu/MenuPanelBase.js +25 -0
- package/dist-es/menu/MenuPanelBase.js.map +1 -0
- package/dist-es/menu/MenuPanelContext.js +117 -0
- package/dist-es/menu/MenuPanelContext.js.map +1 -0
- package/dist-es/menu/MenuTrigger.js +137 -0
- package/dist-es/menu/MenuTrigger.js.map +1 -0
- package/dist-es/menu/MenuTriggerContext.js +113 -0
- package/dist-es/menu/MenuTriggerContext.js.map +1 -0
- package/dist-es/multiline-input/MultilineInput.js +8 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +8 -1
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/Option.js +8 -1
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js +8 -1
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +8 -1
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +8 -1
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +8 -1
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +8 -1
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.js +8 -1
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +8 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +8 -1
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +8 -1
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/CompactInput.js +8 -1
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +8 -1
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +8 -1
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +8 -1
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +8 -1
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +8 -1
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +8 -1
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +8 -1
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +8 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js +8 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/pill/Pill.js +8 -1
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +8 -1
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +8 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +8 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +8 -1
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +8 -1
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +8 -1
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +8 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +16 -5
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +8 -1
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +8 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/spinner/Spinner.js +8 -1
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +8 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +8 -1
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.css.js +1 -1
- package/dist-es/stack-layout/StackLayout.js +21 -7
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +8 -1
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +8 -1
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/switch/Switch.js +8 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Text.js +8 -1
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +8 -1
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +8 -1
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +8 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +8 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +8 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +9 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +7 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +8 -1
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +12 -4
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useResponsiveProp.js +15 -1
- package/dist-es/utils/useResponsiveProp.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +8 -1
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +8 -1
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/breakpoints/BreakpointProvider.d.ts +16 -0
- package/dist-types/breakpoints/Breakpoints.d.ts +2 -2
- package/dist-types/breakpoints/index.d.ts +1 -0
- package/dist-types/combo-box/useComboBox.d.ts +1 -0
- package/dist-types/flex-layout/FlexLayout.d.ts +1 -1
- package/dist-types/grid-layout/GridLayout.d.ts +5 -5
- package/dist-types/index.d.ts +2 -1
- package/dist-types/menu/Menu.d.ts +4 -0
- package/dist-types/menu/MenuBase.d.ts +27 -0
- package/dist-types/menu/MenuContext.d.ts +16 -0
- package/dist-types/menu/MenuGroup.d.ts +12 -0
- package/dist-types/menu/MenuItem.d.ts +8 -0
- package/dist-types/menu/MenuPanel.d.ts +8 -0
- package/dist-types/menu/MenuPanelBase.d.ts +4 -0
- package/dist-types/menu/MenuPanelContext.d.ts +5 -0
- package/dist-types/menu/MenuTrigger.d.ts +8 -0
- package/dist-types/menu/MenuTriggerContext.d.ts +6 -0
- package/dist-types/menu/index.d.ts +5 -0
- package/dist-types/tooltip/useTooltip.d.ts +4 -0
- package/dist-types/utils/useResponsiveProp.d.ts +1 -0
- package/package.json +2 -2
|
@@ -18,6 +18,7 @@ import '../../banner/BannerActions.js';
|
|
|
18
18
|
import '../../banner/BannerContent.js';
|
|
19
19
|
import '../../border-item/BorderItem.js';
|
|
20
20
|
import '../../border-layout/BorderLayout.js';
|
|
21
|
+
import '../../breakpoints/BreakpointProvider.js';
|
|
21
22
|
import '../../button/Button.js';
|
|
22
23
|
import '../../card/Card.js';
|
|
23
24
|
import '../../checkbox/Checkbox.js';
|
|
@@ -60,12 +61,18 @@ import '../../interactable-card/InteractableCardGroupContext.js';
|
|
|
60
61
|
import '../../link/Link.js';
|
|
61
62
|
import '../../link-card/LinkCard.js';
|
|
62
63
|
import '../../list-control/ListControlContext.js';
|
|
64
|
+
import '../../menu/MenuContext.js';
|
|
65
|
+
import '@floating-ui/react';
|
|
66
|
+
import '../../menu/MenuItem.js';
|
|
67
|
+
import '../../menu/MenuPanel.js';
|
|
68
|
+
import '../../menu/MenuTriggerContext.js';
|
|
69
|
+
import '../../menu/MenuPanelContext.js';
|
|
70
|
+
import '../../menu/MenuGroup.js';
|
|
63
71
|
import '../../multiline-input/MultilineInput.js';
|
|
64
72
|
import '../../navigation-item/NavigationItem.js';
|
|
65
73
|
import '../../option/Option.js';
|
|
66
74
|
import '../../option/OptionGroup.js';
|
|
67
75
|
import '../../overlay/OverlayContext.js';
|
|
68
|
-
import '@floating-ui/react';
|
|
69
76
|
import '../../overlay/OverlayPanel.js';
|
|
70
77
|
import '../../overlay/OverlayPanelCloseButton.js';
|
|
71
78
|
import '../../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../../utils\";\nimport { Text } from \"../../text\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n function LinearProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-linear-progress\",\n css: linearProgressCss,\n window: targetWindow,\n });\n\n const progress = ((value - min) / (max - min)) * 100;\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const barStyle: CSSProperties = {};\n const bufferStyle: CSSProperties = {};\n\n barStyle.width = `${progress}%`;\n bufferStyle.width = `${buffer}%`;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"barContainer\")}>\n <div className={withBaseName(\"bar\")} style={barStyle} />\n {bufferValue > 0 ? (\n <div className={withBaseName(\"buffer\")} style={bufferStyle} />\n ) : null}\n <div className={withBaseName(\"track\")} />\n </div>\n {!hideLabel && (\n <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n {`${Math.round(progress)} %`}\n </Text>\n )}\n </div>\n );\n }\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../../utils\";\nimport { Text } from \"../../text\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The value of the buffer indicator.\n * Value between 0 and max.\n */\n bufferValue?: number;\n /**\n * Whether to hide the text label within the progress. Defaults to `false`.\n */\n hideLabel?: boolean;\n /**\n * The value of the max progress indicator.\n * Default value is 100.\n */\n max?: number;\n /**\n * The value of the min progress indicator.\n * Default value is 0.\n */\n min?: number;\n /**\n * The value of the progress indicator.\n * Value between 0 and max.\n */\n value?: number;\n}\n\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n function LinearProgress(\n {\n className,\n hideLabel = false,\n max = 100,\n min = 0,\n value = 0,\n bufferValue = 0,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-linear-progress\",\n css: linearProgressCss,\n window: targetWindow,\n });\n\n const progress = ((value - min) / (max - min)) * 100;\n const buffer = ((bufferValue - min) / (max - min)) * 100;\n const barStyle: CSSProperties = {};\n const bufferStyle: CSSProperties = {};\n\n barStyle.width = `${progress}%`;\n bufferStyle.width = `${buffer}%`;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n ref={ref}\n role=\"progressbar\"\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={Math.round(value)}\n {...rest}\n >\n <div className={withBaseName(\"barContainer\")}>\n <div className={withBaseName(\"bar\")} style={barStyle} />\n {bufferValue > 0 ? (\n <div className={withBaseName(\"buffer\")} style={bufferStyle} />\n ) : null}\n <div className={withBaseName(\"track\")} />\n </div>\n {!hideLabel && (\n <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n {`${Math.round(progress)} %`}\n </Text>\n )}\n </div>\n );\n }\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AA6B/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,GAAM,GAAA,GAAA;AAAA,IACN,GAAM,GAAA,CAAA;AAAA,IACN,KAAQ,GAAA,CAAA;AAAA,IACR,WAAc,GAAA,CAAA;AAAA,IACX,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,QAAa,GAAA,CAAA,KAAA,GAAQ,GAAQ,KAAA,GAAA,GAAM,GAAQ,CAAA,GAAA,GAAA,CAAA;AACjD,IAAA,MAAM,MAAW,GAAA,CAAA,WAAA,GAAc,GAAQ,KAAA,GAAA,GAAM,GAAQ,CAAA,GAAA,GAAA,CAAA;AACrD,IAAA,MAAM,WAA0B,EAAC,CAAA;AACjC,IAAA,MAAM,cAA6B,EAAC,CAAA;AAEpC,IAAA,QAAA,CAAS,QAAQ,CAAG,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AACpB,IAAA,WAAA,CAAY,QAAQ,CAAG,EAAA,MAAA,CAAA,CAAA,CAAA,CAAA;AAEvB,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,IAAK,EAAA,aAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC9B,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACzC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAAG,KAAO,EAAA,QAAA;AAAA,aAAU,CAAA;AAAA,YACrD,WAAA,GAAc,oBACZ,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,cAAG,KAAO,EAAA,WAAA;AAAA,aAAa,CAC1D,GAAA,IAAA;AAAA,4BACH,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,aAAG,CAAA;AAAA,WAAA;AAAA,SACzC,CAAA;AAAA,QACC,CAAC,6BACC,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,OAAQ,EAAA,IAAA;AAAA,UAAK,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,UACvD,QAAA,EAAA,CAAA,EAAG,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA,EAAA,CAAA;AAAA,SACzB,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -19,6 +19,7 @@ import '../banner/BannerActions.js';
|
|
|
19
19
|
import '../banner/BannerContent.js';
|
|
20
20
|
import '../border-item/BorderItem.js';
|
|
21
21
|
import '../border-layout/BorderLayout.js';
|
|
22
|
+
import '../breakpoints/BreakpointProvider.js';
|
|
22
23
|
import '../button/Button.js';
|
|
23
24
|
import '../card/Card.js';
|
|
24
25
|
import '../checkbox/Checkbox.js';
|
|
@@ -62,12 +63,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
|
|
|
62
63
|
import '../link/Link.js';
|
|
63
64
|
import '../link-card/LinkCard.js';
|
|
64
65
|
import '../list-control/ListControlContext.js';
|
|
66
|
+
import '../menu/MenuContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../menu/MenuItem.js';
|
|
69
|
+
import '../menu/MenuPanel.js';
|
|
70
|
+
import '../menu/MenuTriggerContext.js';
|
|
71
|
+
import '../menu/MenuPanelContext.js';
|
|
72
|
+
import '../menu/MenuGroup.js';
|
|
65
73
|
import '../multiline-input/MultilineInput.js';
|
|
66
74
|
import '../navigation-item/NavigationItem.js';
|
|
67
75
|
import '../option/Option.js';
|
|
68
76
|
import '../option/OptionGroup.js';
|
|
69
77
|
import '../overlay/OverlayContext.js';
|
|
70
|
-
import '@floating-ui/react';
|
|
71
78
|
import '../overlay/OverlayPanel.js';
|
|
72
79
|
import '../overlay/OverlayPanelCloseButton.js';
|
|
73
80
|
import '../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n * **Note**: Setting a standalone radio button as read-only is not accessible. The whole radio buttton group should be set as read-only instead.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n checkedProp ??\n (radioGroup && value ? radioGroup.value === value : checkedProp);\n const name = nameProp ?? radioGroup?.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup?.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy\n ) || undefined\n }\n aria-labelledby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy\n ) || undefined\n }\n className={clsx(withBaseName(\"input\"), inputClassName)}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n * **Note**: Setting a standalone radio button as read-only is not accessible. The whole radio buttton group should be set as read-only instead.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n checkedProp ??\n (radioGroup && value ? radioGroup.value === value : checkedProp);\n const name = nameProp ?? radioGroup?.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup?.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy\n ) || undefined\n }\n aria-labelledby={\n clsx(\n radioGroup == undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy\n ) || undefined\n }\n className={clsx(withBaseName(\"input\"), inputClassName)}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"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"}
|
|
@@ -19,6 +19,7 @@ import '../banner/BannerActions.js';
|
|
|
19
19
|
import '../banner/BannerContent.js';
|
|
20
20
|
import '../border-item/BorderItem.js';
|
|
21
21
|
import '../border-layout/BorderLayout.js';
|
|
22
|
+
import '../breakpoints/BreakpointProvider.js';
|
|
22
23
|
import '../button/Button.js';
|
|
23
24
|
import '../card/Card.js';
|
|
24
25
|
import '../checkbox/Checkbox.js';
|
|
@@ -62,12 +63,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
|
|
|
62
63
|
import '../link/Link.js';
|
|
63
64
|
import '../link-card/LinkCard.js';
|
|
64
65
|
import '../list-control/ListControlContext.js';
|
|
66
|
+
import '../menu/MenuContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../menu/MenuItem.js';
|
|
69
|
+
import '../menu/MenuPanel.js';
|
|
70
|
+
import '../menu/MenuTriggerContext.js';
|
|
71
|
+
import '../menu/MenuPanelContext.js';
|
|
72
|
+
import '../menu/MenuGroup.js';
|
|
65
73
|
import '../multiline-input/MultilineInput.js';
|
|
66
74
|
import '../navigation-item/NavigationItem.js';
|
|
67
75
|
import '../option/Option.js';
|
|
68
76
|
import '../option/OptionGroup.js';
|
|
69
77
|
import '../overlay/OverlayContext.js';
|
|
70
|
-
import '@floating-ui/react';
|
|
71
78
|
import '../overlay/OverlayPanel.js';
|
|
72
79
|
import '../overlay/OverlayPanelCloseButton.js';
|
|
73
80
|
import '../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * Set the selected value when initialized.\n */\n defaultValue?: string;\n /**\n * Set the group direction.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the RadioButton group\n */\n disabled?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n */\n name?: string;\n /**\n * Callback for change event.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Set the RadioButton group to read only.\n */\n readOnly?: boolean;\n /**\n * The value of the radio group, required for a controlled component.\n */\n value?: string;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n defaultValue,\n direction = \"vertical\",\n disabled: disabledProp,\n wrap = true,\n name: nameProp,\n onChange,\n readOnly: readOnlyProp,\n value: valueProp,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-group\",\n css: radioButtonGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [value, setStateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n state: \"value\",\n name: \"RadioButtonGroup\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setStateValue(event.target.value);\n onChange?.(event);\n };\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n role=\"radiogroup\"\n aria-readonly={readOnly}\n aria-labelledby={\n clsx(a11yProps?.[\"aria-labelledby\"], ariaLabelledBy) || undefined\n }\n aria-describedby={\n clsx(a11yProps?.[\"aria-describedby\"], ariaDescribedBy) || undefined\n }\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n {...rest}\n >\n <RadioGroupContext.Provider\n value={{\n disabled,\n name,\n onChange: handleChange,\n readOnly,\n validationStatus,\n value,\n }}\n >\n {children}\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * Set the selected value when initialized.\n */\n defaultValue?: string;\n /**\n * Set the group direction.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the RadioButton group\n */\n disabled?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n */\n name?: string;\n /**\n * Callback for change event.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Set the RadioButton group to read only.\n */\n readOnly?: boolean;\n /**\n * The value of the radio group, required for a controlled component.\n */\n value?: string;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioButtonGroup = forwardRef<\n HTMLFieldSetElement,\n RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n defaultValue,\n direction = \"vertical\",\n disabled: disabledProp,\n wrap = true,\n name: nameProp,\n onChange,\n readOnly: readOnlyProp,\n value: valueProp,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-group\",\n css: radioButtonGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [value, setStateValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n state: \"value\",\n name: \"RadioButtonGroup\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setStateValue(event.target.value);\n onChange?.(event);\n };\n\n const name = useId(nameProp);\n\n return (\n <fieldset\n role=\"radiogroup\"\n aria-readonly={readOnly}\n aria-labelledby={\n clsx(a11yProps?.[\"aria-labelledby\"], ariaLabelledBy) || undefined\n }\n aria-describedby={\n clsx(a11yProps?.[\"aria-describedby\"], ariaDescribedBy) || undefined\n }\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className\n )}\n data-testid=\"radio-button-group\"\n ref={ref}\n {...rest}\n >\n <RadioGroupContext.Provider\n value={{\n disabled,\n name,\n onChange: handleChange,\n readOnly,\n validationStatus,\n value,\n }}\n >\n {children}\n </RadioGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":"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"}
|
|
@@ -18,6 +18,7 @@ import '../banner/BannerActions.js';
|
|
|
18
18
|
import '../banner/BannerContent.js';
|
|
19
19
|
import '../border-item/BorderItem.js';
|
|
20
20
|
import '../border-layout/BorderLayout.js';
|
|
21
|
+
import '../breakpoints/BreakpointProvider.js';
|
|
21
22
|
import '../button/Button.js';
|
|
22
23
|
import '../card/Card.js';
|
|
23
24
|
import '../checkbox/Checkbox.js';
|
|
@@ -60,12 +61,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
|
|
|
60
61
|
import '../link/Link.js';
|
|
61
62
|
import '../link-card/LinkCard.js';
|
|
62
63
|
import '../list-control/ListControlContext.js';
|
|
64
|
+
import '../menu/MenuContext.js';
|
|
65
|
+
import '@floating-ui/react';
|
|
66
|
+
import '../menu/MenuItem.js';
|
|
67
|
+
import '../menu/MenuPanel.js';
|
|
68
|
+
import '../menu/MenuTriggerContext.js';
|
|
69
|
+
import '../menu/MenuPanelContext.js';
|
|
70
|
+
import '../menu/MenuGroup.js';
|
|
63
71
|
import '../multiline-input/MultilineInput.js';
|
|
64
72
|
import '../navigation-item/NavigationItem.js';
|
|
65
73
|
import '../option/Option.js';
|
|
66
74
|
import '../option/OptionGroup.js';
|
|
67
75
|
import '../overlay/OverlayContext.js';
|
|
68
|
-
import '@floating-ui/react';
|
|
69
76
|
import '../overlay/OverlayPanel.js';
|
|
70
77
|
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
78
|
import '../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\nimport { ComponentPropsWithoutRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps extends ComponentPropsWithoutRef<\"div\"> {\n checked?: boolean;\n disabled?: boolean;\n /**\n * @deprecated Use validationStatus instead\n */\n error?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n checked,\n className,\n error,\n disabled,\n validationStatus,\n readOnly,\n ...rest\n}: RadioButtonIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-icon\",\n css: radioButtonIconCss,\n window: targetWindow,\n });\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"error\")]: error,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className\n )}\n {...rest}\n >\n {checked && !readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n fill=\"currentColor\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n )}\n {checked && readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 12 12\"\n >\n <path\n fill=\"#161616\"\n d=\"M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z\"\n />\n </svg>\n )}\n </div>\n );\n};\n"],"names":["radioButtonIconCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\nimport { ComponentPropsWithoutRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps extends ComponentPropsWithoutRef<\"div\"> {\n checked?: boolean;\n disabled?: boolean;\n /**\n * @deprecated Use validationStatus instead\n */\n error?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n checked,\n className,\n error,\n disabled,\n validationStatus,\n readOnly,\n ...rest\n}: RadioButtonIconProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button-icon\",\n css: radioButtonIconCss,\n window: targetWindow,\n });\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"error\")]: error,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className\n )}\n {...rest}\n >\n {checked && !readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n fill=\"currentColor\"\n >\n <path\n fillRule=\"evenodd\"\n d=\"M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n )}\n {checked && readOnly && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 12 12\"\n >\n <path\n fill=\"#161616\"\n d=\"M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z\"\n />\n </svg>\n )}\n </div>\n );\n};\n"],"names":["radioButtonIconCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAgBhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAW,OAAA,IAAA,CAAC,4BACV,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,cAAA;AAAA,QAEL,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,QAAS,EAAA,SAAA;AAAA,UACT,CAAE,EAAA,qEAAA;AAAA,UACF,QAAS,EAAA,SAAA;AAAA,SACX,CAAA;AAAA,OACF,CAAA;AAAA,MAED,OAAA,IAAW,4BACT,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,IAAK,EAAA,cAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QAER,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,IAAK,EAAA,SAAA;AAAA,UACL,CAAE,EAAA,6CAAA;AAAA,SACJ,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -18,6 +18,7 @@ import '../../banner/BannerActions.js';
|
|
|
18
18
|
import '../../banner/BannerContent.js';
|
|
19
19
|
import '../../border-item/BorderItem.js';
|
|
20
20
|
import '../../border-layout/BorderLayout.js';
|
|
21
|
+
import '../../breakpoints/BreakpointProvider.js';
|
|
21
22
|
import '../../button/Button.js';
|
|
22
23
|
import '../../card/Card.js';
|
|
23
24
|
import '../../checkbox/Checkbox.js';
|
|
@@ -60,12 +61,18 @@ import '../../interactable-card/InteractableCardGroupContext.js';
|
|
|
60
61
|
import '../../link/Link.js';
|
|
61
62
|
import '../../link-card/LinkCard.js';
|
|
62
63
|
import '../../list-control/ListControlContext.js';
|
|
64
|
+
import '../../menu/MenuContext.js';
|
|
65
|
+
import '@floating-ui/react';
|
|
66
|
+
import '../../menu/MenuItem.js';
|
|
67
|
+
import '../../menu/MenuPanel.js';
|
|
68
|
+
import '../../menu/MenuTriggerContext.js';
|
|
69
|
+
import '../../menu/MenuPanelContext.js';
|
|
70
|
+
import '../../menu/MenuGroup.js';
|
|
63
71
|
import '../../multiline-input/MultilineInput.js';
|
|
64
72
|
import '../../navigation-item/NavigationItem.js';
|
|
65
73
|
import '../../option/Option.js';
|
|
66
74
|
import '../../option/OptionGroup.js';
|
|
67
75
|
import '../../overlay/OverlayContext.js';
|
|
68
|
-
import '@floating-ui/react';
|
|
69
76
|
import '../../overlay/OverlayPanel.js';
|
|
70
77
|
import '../../overlay/OverlayPanelCloseButton.js';
|
|
71
78
|
import '../../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n disabled?: boolean;\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioGroupContext = createContext<\n RadioGroupContextValue | undefined\n>(\"RadioGroupContext\", undefined);\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n disabled?: boolean;\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioGroupContext = createContext<\n RadioGroupContextValue | undefined\n>(\"RadioGroupContext\", undefined);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaa,MAAA,iBAAA,GAAoB,aAE/B,CAAA,mBAAA,EAAqB,KAAS,CAAA;;;;"}
|
|
@@ -18,6 +18,7 @@ import '../banner/BannerContent.js';
|
|
|
18
18
|
import '../border-item/BorderItem.js';
|
|
19
19
|
import '../border-layout/BorderLayout.js';
|
|
20
20
|
import { DEFAULT_BREAKPOINTS } from '../breakpoints/Breakpoints.js';
|
|
21
|
+
import { useMatchedBreakpoints, BreakpointProvider } from '../breakpoints/BreakpointProvider.js';
|
|
21
22
|
import '../button/Button.js';
|
|
22
23
|
import '../card/Card.js';
|
|
23
24
|
import '../checkbox/Checkbox.js';
|
|
@@ -60,12 +61,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
|
|
|
60
61
|
import '../link/Link.js';
|
|
61
62
|
import '../link-card/LinkCard.js';
|
|
62
63
|
import '../list-control/ListControlContext.js';
|
|
64
|
+
import '../menu/MenuContext.js';
|
|
65
|
+
import '@floating-ui/react';
|
|
66
|
+
import '../menu/MenuItem.js';
|
|
67
|
+
import '../menu/MenuPanel.js';
|
|
68
|
+
import '../menu/MenuTriggerContext.js';
|
|
69
|
+
import '../menu/MenuPanelContext.js';
|
|
70
|
+
import '../menu/MenuGroup.js';
|
|
63
71
|
import '../multiline-input/MultilineInput.js';
|
|
64
72
|
import '../navigation-item/NavigationItem.js';
|
|
65
73
|
import '../option/Option.js';
|
|
66
74
|
import '../option/OptionGroup.js';
|
|
67
75
|
import '../overlay/OverlayContext.js';
|
|
68
|
-
import '@floating-ui/react';
|
|
69
76
|
import '../overlay/OverlayPanel.js';
|
|
70
77
|
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
78
|
import '../overlay/OverlayPanelContent.js';
|
|
@@ -258,14 +265,18 @@ function InternalSaltProvider({
|
|
|
258
265
|
themeNext,
|
|
259
266
|
corner
|
|
260
267
|
]);
|
|
268
|
+
const matchedBreakpoints = useMatchedBreakpoints(breakpoints);
|
|
261
269
|
const saltProvider = /* @__PURE__ */ jsx(DensityContext.Provider, {
|
|
262
270
|
value: density,
|
|
263
271
|
children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
|
|
264
272
|
value: themeContextValue,
|
|
265
|
-
children: /* @__PURE__ */ jsx(
|
|
266
|
-
|
|
267
|
-
children: /* @__PURE__ */ jsx(
|
|
268
|
-
|
|
273
|
+
children: /* @__PURE__ */ jsx(BreakpointProvider, {
|
|
274
|
+
matchedBreakpoints,
|
|
275
|
+
children: /* @__PURE__ */ jsx(BreakpointContext.Provider, {
|
|
276
|
+
value: breakpoints,
|
|
277
|
+
children: /* @__PURE__ */ jsx(ViewportProvider, {
|
|
278
|
+
children: themedChildren
|
|
279
|
+
})
|
|
269
280
|
})
|
|
270
281
|
})
|
|
271
282
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\nimport { UNSTABLE_Corner } from \"../theme/Corner\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst UNSTABLE_ADDITIONAL_THEME_NAME = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: UNSTABLE_Corner = \"sharp\";\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n window?: WindowContextType;\n /** Only available when using SaltProviderNext. */\n themeNext: boolean;\n UNSTABLE_corner: UNSTABLE_Corner;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n themeNext: false,\n UNSTABLE_corner: DEFAULT_CORNER,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (themeName: ThemeName, themeNext?: boolean) => {\n if (themeNext) {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME]\n : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];\n } else {\n {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n }\n }\n};\n\ninterface ThemeNextProps {\n themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner,\n}: {\n children: ReactNode;\n themeName: ThemeName;\n density: Density;\n mode: Mode;\n applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n UNSTABLE_SaltProviderNextAdditionalProps) => {\n const themeNames = getThemeNames(themeName, themeNext);\n const themeNextProps = {\n \"data-corner\": corner,\n };\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n \"data-mode\": mode,\n ...(themeNext ? themeNextProps : {}),\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n {...(themeNext ? themeNextProps : {})}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n themeNext,\n corner: cornerProp,\n}: Omit<\n SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,\n \"enableStyleInjection\"\n>) {\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n window: inheritedWindow,\n UNSTABLE_corner: inheritedCorner,\n } = useContext(ThemeContext);\n\n const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n\n const applyClassesTo =\n applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n const themeContextValue = useMemo(\n () => ({\n theme: themeName,\n mode,\n window: targetWindow,\n themeNext: Boolean(themeNext),\n UNSTABLE_corner: corner,\n }),\n [themeName, mode, targetWindow, themeNext, corner]\n );\n\n const themedChildren = createThemedChildren({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner: corner,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames = getThemeNames(themeName, themeNext);\n\n if (applyClassesTo === \"root\" && targetWindow) {\n if (inheritedWindow != targetWindow) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n if (themeNext) {\n targetWindow.document.documentElement.dataset.corner = corner;\n }\n } else {\n console.warn(\n \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n if (themeNext) {\n delete targetWindow.document.documentElement.dataset.corner;\n }\n }\n };\n }, [\n applyClassesTo,\n density,\n mode,\n themeName,\n targetWindow,\n inheritedWindow,\n themeNext,\n corner,\n ]);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRootProvider) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\ninterface UNSTABLE_SaltProviderNextAdditionalProps {\n corner?: UNSTABLE_Corner;\n}\n\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderProps &\n UNSTABLE_SaltProviderNextAdditionalProps;\n\nexport function UNSTABLE_SaltProviderNext({\n enableStyleInjection,\n ...restProps\n}: UNSTABLE_SaltProviderNextProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n <InternalSaltProvider {...restProps} themeNext={true} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n createContext,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n useContext,\n useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n Breakpoints,\n DEFAULT_BREAKPOINTS,\n BreakpointProvider,\n useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n useComponentCssInjection,\n StyleInjectionProvider,\n} from \"@salt-ds/styles\";\nimport { UNSTABLE_Corner } from \"../theme/Corner\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst UNSTABLE_ADDITIONAL_THEME_NAME = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: UNSTABLE_Corner = \"sharp\";\nexport interface ThemeContextProps {\n theme: ThemeName;\n mode: Mode;\n window?: WindowContextType;\n /** Only available when using SaltProviderNext. */\n themeNext: boolean;\n UNSTABLE_corner: UNSTABLE_Corner;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n theme: \"\",\n mode: DEFAULT_MODE,\n themeNext: false,\n UNSTABLE_corner: DEFAULT_CORNER,\n});\n\nexport const BreakpointContext =\n createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (themeName: ThemeName, themeNext?: boolean) => {\n if (themeNext) {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME]\n : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];\n } else {\n {\n return themeName === DEFAULT_THEME_NAME\n ? [DEFAULT_THEME_NAME]\n : [DEFAULT_THEME_NAME, themeName];\n }\n }\n};\n\ninterface ThemeNextProps {\n themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner,\n}: {\n children: ReactNode;\n themeName: ThemeName;\n density: Density;\n mode: Mode;\n applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n UNSTABLE_SaltProviderNextAdditionalProps) => {\n const themeNames = getThemeNames(themeName, themeNext);\n const themeNextProps = {\n \"data-corner\": corner,\n };\n if (applyClassesTo === \"root\") {\n return children;\n } else if (applyClassesTo === \"child\") {\n if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n return React.cloneElement(children, {\n className: clsx(\n children.props?.className,\n ...themeNames,\n `salt-density-${density}`\n ),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n \"data-mode\": mode,\n ...(themeNext ? themeNextProps : {}),\n });\n } else {\n console.warn(\n `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n div element will wrap your child elements`\n );\n return children;\n }\n } else {\n return (\n <div\n className={clsx(\n `salt-provider`,\n ...themeNames,\n `salt-density-${density}`\n )}\n data-mode={mode}\n {...(themeNext ? themeNextProps : {})}\n >\n {children}\n </div>\n );\n }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n applyClassesTo?: TargetElement;\n density?: Density;\n theme?: ThemeName;\n mode?: Mode;\n breakpoints?: Breakpoints;\n enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n children: ReactElement;\n applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n extends SaltProviderThatInjectsThemeElement {\n applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n | SaltProviderThatAppliesClassesToChild\n | SaltProviderThatInjectsThemeElement\n | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n applyClassesTo: applyClassesToProp,\n children,\n density: densityProp,\n theme: themeProp,\n mode: modeProp,\n breakpoints: breakpointsProp,\n themeNext,\n corner: cornerProp,\n}: Omit<\n SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,\n \"enableStyleInjection\"\n>) {\n const inheritedDensity = useContext(DensityContext);\n const {\n theme: inheritedTheme,\n mode: inheritedMode,\n window: inheritedWindow,\n UNSTABLE_corner: inheritedCorner,\n } = useContext(ThemeContext);\n\n const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n const themeName =\n themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n const mode = modeProp ?? inheritedMode;\n const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n\n const applyClassesTo =\n applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-provider\",\n css: saltProviderCss,\n window: targetWindow,\n });\n\n const themeContextValue = useMemo(\n () => ({\n theme: themeName,\n mode,\n window: targetWindow,\n themeNext: Boolean(themeNext),\n UNSTABLE_corner: corner,\n }),\n [themeName, mode, targetWindow, themeNext, corner]\n );\n\n const themedChildren = createThemedChildren({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner: corner,\n });\n\n useIsomorphicLayoutEffect(() => {\n const themeNames = getThemeNames(themeName, themeNext);\n\n if (applyClassesTo === \"root\" && targetWindow) {\n if (inheritedWindow != targetWindow) {\n // add the styles we want to apply\n targetWindow.document.documentElement.classList.add(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = mode;\n if (themeNext) {\n targetWindow.document.documentElement.dataset.corner = corner;\n }\n } else {\n console.warn(\n \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n );\n }\n }\n return () => {\n if (applyClassesTo === \"root\" && targetWindow) {\n // When unmounting/remounting, remove the applied styles from the root\n targetWindow.document.documentElement.classList.remove(\n ...themeNames,\n `salt-density-${density}`\n );\n targetWindow.document.documentElement.dataset.mode = undefined;\n if (themeNext) {\n delete targetWindow.document.documentElement.dataset.corner;\n }\n }\n };\n }, [\n applyClassesTo,\n density,\n mode,\n themeName,\n targetWindow,\n inheritedWindow,\n themeNext,\n corner,\n ]);\n\n const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n const saltProvider = (\n <DensityContext.Provider value={density}>\n <ThemeContext.Provider value={themeContextValue}>\n <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n <BreakpointContext.Provider value={breakpoints}>\n <ViewportProvider>{themedChildren}</ViewportProvider>\n </BreakpointContext.Provider>\n </BreakpointProvider>\n </ThemeContext.Provider>\n </DensityContext.Provider>\n );\n\n if (isRootProvider) {\n return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n } else {\n return saltProvider;\n }\n}\n\nexport function SaltProvider({\n enableStyleInjection,\n ...restProps\n}: SaltProviderProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n <InternalSaltProvider {...restProps} />\n </StyleInjectionProvider>\n );\n}\n\ninterface UNSTABLE_SaltProviderNextAdditionalProps {\n corner?: UNSTABLE_Corner;\n}\n\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderProps &\n UNSTABLE_SaltProviderNextAdditionalProps;\n\nexport function UNSTABLE_SaltProviderNext({\n enableStyleInjection,\n ...restProps\n}: UNSTABLE_SaltProviderNextProps) {\n return (\n <StyleInjectionProvider value={enableStyleInjection}>\n {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n <InternalSaltProvider {...restProps} themeNext={true} />\n </StyleInjectionProvider>\n );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n const densityFromContext = useContext(DensityContext);\n return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}
|
package/dist-es/scrim/Scrim.js
CHANGED
|
@@ -18,6 +18,7 @@ import '../banner/BannerActions.js';
|
|
|
18
18
|
import '../banner/BannerContent.js';
|
|
19
19
|
import '../border-item/BorderItem.js';
|
|
20
20
|
import '../border-layout/BorderLayout.js';
|
|
21
|
+
import '../breakpoints/BreakpointProvider.js';
|
|
21
22
|
import '../button/Button.js';
|
|
22
23
|
import '../card/Card.js';
|
|
23
24
|
import '../checkbox/Checkbox.js';
|
|
@@ -60,12 +61,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
|
|
|
60
61
|
import '../link/Link.js';
|
|
61
62
|
import '../link-card/LinkCard.js';
|
|
62
63
|
import '../list-control/ListControlContext.js';
|
|
64
|
+
import '../menu/MenuContext.js';
|
|
65
|
+
import '@floating-ui/react';
|
|
66
|
+
import '../menu/MenuItem.js';
|
|
67
|
+
import '../menu/MenuPanel.js';
|
|
68
|
+
import '../menu/MenuTriggerContext.js';
|
|
69
|
+
import '../menu/MenuPanelContext.js';
|
|
70
|
+
import '../menu/MenuGroup.js';
|
|
63
71
|
import '../multiline-input/MultilineInput.js';
|
|
64
72
|
import '../navigation-item/NavigationItem.js';
|
|
65
73
|
import '../option/Option.js';
|
|
66
74
|
import '../option/OptionGroup.js';
|
|
67
75
|
import '../overlay/OverlayContext.js';
|
|
68
|
-
import '@floating-ui/react';
|
|
69
76
|
import '../overlay/OverlayPanel.js';
|
|
70
77
|
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
78
|
import '../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true` the scrim is bound to the document viewport.\n * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n */\n fixed?: boolean;\n /**\n * If `true` the scrim is shown.\n */\n open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n { className, children, fixed = false, open = true, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-scrim\",\n css: scrimCss,\n window: targetWindow,\n });\n\n if (!open) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fixed\")]: fixed,\n },\n className\n )}\n data-testid=\"scrim\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Scrim","scrimCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true` the scrim is bound to the document viewport.\n * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n */\n fixed?: boolean;\n /**\n * If `true` the scrim is shown.\n */\n open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n { className, children, fixed = false, open = true, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-scrim\",\n css: scrimCss,\n window: targetWindow,\n });\n\n if (!open) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fixed\")]: fixed,\n },\n className\n )}\n data-testid=\"scrim\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Scrim","scrimCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -18,6 +18,7 @@ import '../banner/BannerActions.js';
|
|
|
18
18
|
import '../banner/BannerContent.js';
|
|
19
19
|
import '../border-item/BorderItem.js';
|
|
20
20
|
import '../border-layout/BorderLayout.js';
|
|
21
|
+
import '../breakpoints/BreakpointProvider.js';
|
|
21
22
|
import '../button/Button.js';
|
|
22
23
|
import '../card/Card.js';
|
|
23
24
|
import '../checkbox/Checkbox.js';
|
|
@@ -60,12 +61,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
|
|
|
60
61
|
import '../link/Link.js';
|
|
61
62
|
import '../link-card/LinkCard.js';
|
|
62
63
|
import '../list-control/ListControlContext.js';
|
|
64
|
+
import '../menu/MenuContext.js';
|
|
65
|
+
import '@floating-ui/react';
|
|
66
|
+
import '../menu/MenuItem.js';
|
|
67
|
+
import '../menu/MenuPanel.js';
|
|
68
|
+
import '../menu/MenuTriggerContext.js';
|
|
69
|
+
import '../menu/MenuPanelContext.js';
|
|
70
|
+
import '../menu/MenuGroup.js';
|
|
63
71
|
import '../multiline-input/MultilineInput.js';
|
|
64
72
|
import '../navigation-item/NavigationItem.js';
|
|
65
73
|
import '../option/Option.js';
|
|
66
74
|
import '../option/OptionGroup.js';
|
|
67
75
|
import '../overlay/OverlayContext.js';
|
|
68
|
-
import '@floating-ui/react';
|
|
69
76
|
import '../overlay/OverlayPanel.js';
|
|
70
77
|
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
78
|
import '../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedButtonGroup.js","sources":["../src/segmented-button-group/SegmentedButtonGroup.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport segmentedButtonGroupCss from \"./SegmentedButtonGroup.css\";\n\nexport interface SegmentedButtonGroupProps\n extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltSegmentedButtonGroup\");\n\nexport const SegmentedButtonGroup = forwardRef<\n HTMLDivElement,\n SegmentedButtonGroupProps\n>(function SegmentedButtonGroup({ className, children, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-segmented-button-group\",\n css: segmentedButtonGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n );\n});\n"],"names":["SegmentedButtonGroup","segmentedButtonGroupCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SegmentedButtonGroup.js","sources":["../src/segmented-button-group/SegmentedButtonGroup.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport segmentedButtonGroupCss from \"./SegmentedButtonGroup.css\";\n\nexport interface SegmentedButtonGroupProps\n extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltSegmentedButtonGroup\");\n\nexport const SegmentedButtonGroup = forwardRef<\n HTMLDivElement,\n SegmentedButtonGroupProps\n>(function SegmentedButtonGroup({ className, children, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-segmented-button-group\",\n css: segmentedButtonGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n );\n});\n"],"names":["SegmentedButtonGroup","segmentedButtonGroupCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAE/C,MAAA,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CAAqB,EAAE,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EAAG,GAAK,EAAA;AACrE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC5D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -19,6 +19,7 @@ import '../banner/BannerActions.js';
|
|
|
19
19
|
import '../banner/BannerContent.js';
|
|
20
20
|
import '../border-item/BorderItem.js';
|
|
21
21
|
import '../border-layout/BorderLayout.js';
|
|
22
|
+
import '../breakpoints/BreakpointProvider.js';
|
|
22
23
|
import '../button/Button.js';
|
|
23
24
|
import '../card/Card.js';
|
|
24
25
|
import '../checkbox/Checkbox.js';
|
|
@@ -61,12 +62,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
|
|
|
61
62
|
import '../link/Link.js';
|
|
62
63
|
import '../link-card/LinkCard.js';
|
|
63
64
|
import '../list-control/ListControlContext.js';
|
|
65
|
+
import '../menu/MenuContext.js';
|
|
66
|
+
import '@floating-ui/react';
|
|
67
|
+
import '../menu/MenuItem.js';
|
|
68
|
+
import '../menu/MenuPanel.js';
|
|
69
|
+
import '../menu/MenuTriggerContext.js';
|
|
70
|
+
import '../menu/MenuPanelContext.js';
|
|
71
|
+
import '../menu/MenuGroup.js';
|
|
64
72
|
import '../multiline-input/MultilineInput.js';
|
|
65
73
|
import '../navigation-item/NavigationItem.js';
|
|
66
74
|
import '../option/Option.js';
|
|
67
75
|
import '../option/OptionGroup.js';
|
|
68
76
|
import '../overlay/OverlayContext.js';
|
|
69
|
-
import '@floating-ui/react';
|
|
70
77
|
import '../overlay/OverlayPanel.js';
|
|
71
78
|
import '../overlay/OverlayPanelCloseButton.js';
|
|
72
79
|
import '../overlay/OverlayPanelContent.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport spinnerCss from \"./Spinner.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDensity } from \"../salt-provider\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n \"default\",\n \"large\",\n \"small\",\n \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n */\n announcerInterval?: number;\n /**\n * * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n */\n announcerTimeout?: number;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n */\n completionAnnouncement?: string | null;\n /**\n * If true, built in aria announcer will be inactive\n */\n disableAnnouncer?: boolean;\n /**\n * The prop for the role attribute of the component\n */\n role?: string;\n /**\n * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n */\n size?: SpinnerSize;\n /**\n * The ids of the SvgSpinner components\n */\n id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n \"aria-label\": ariaLabel = \"loading\",\n announcerInterval = 5000,\n announcerTimeout = 20000,\n completionAnnouncement = `finished ${ariaLabel}`,\n disableAnnouncer,\n role = \"img\",\n className,\n size = \"medium\",\n id: idProp,\n ...rest\n },\n ref\n ) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-spinner\",\n css: spinnerCss,\n window: targetWindow,\n });\n\n const { announce } = useAriaAnnouncer();\n\n const density = useDensity();\n size = handleSize(size);\n\n useEffect(() => {\n if (disableAnnouncer) return;\n\n announce(ariaLabel);\n\n const startTime = new Date().getTime();\n\n const interval =\n announcerInterval > 0 &&\n setInterval(() => {\n if (new Date().getTime() - startTime > announcerTimeout) {\n // The announcer will stop after `announcerTimeout` time\n announce(\n `${ariaLabel} is still in progress, but will no longer announce.`\n );\n interval && clearInterval(interval);\n return;\n }\n announce(ariaLabel);\n }, announcerInterval);\n\n return () => {\n if (disableAnnouncer) return;\n\n interval && clearInterval(interval);\n if (completionAnnouncement) {\n announce(completionAnnouncement);\n }\n };\n }, [\n announce,\n announcerInterval,\n announcerTimeout,\n ariaLabel,\n completionAnnouncement,\n disableAnnouncer,\n ]);\n\n return (\n <div\n aria-label={ariaLabel}\n className={clsx(withBaseName(), withBaseName(size), className)}\n ref={ref}\n role={role}\n {...rest}\n >\n <SpinnerSVG size={size} density={density} id={id} />\n </div>\n );\n }\n);\n"],"names":["Spinner","spinnerCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport spinnerCss from \"./Spinner.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDensity } from \"../salt-provider\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n \"default\",\n \"large\",\n \"small\",\n \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n */\n announcerInterval?: number;\n /**\n * * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n */\n announcerTimeout?: number;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n */\n completionAnnouncement?: string | null;\n /**\n * If true, built in aria announcer will be inactive\n */\n disableAnnouncer?: boolean;\n /**\n * The prop for the role attribute of the component\n */\n role?: string;\n /**\n * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n */\n size?: SpinnerSize;\n /**\n * The ids of the SvgSpinner components\n */\n id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n \"aria-label\": ariaLabel = \"loading\",\n announcerInterval = 5000,\n announcerTimeout = 20000,\n completionAnnouncement = `finished ${ariaLabel}`,\n disableAnnouncer,\n role = \"img\",\n className,\n size = \"medium\",\n id: idProp,\n ...rest\n },\n ref\n ) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-spinner\",\n css: spinnerCss,\n window: targetWindow,\n });\n\n const { announce } = useAriaAnnouncer();\n\n const density = useDensity();\n size = handleSize(size);\n\n useEffect(() => {\n if (disableAnnouncer) return;\n\n announce(ariaLabel);\n\n const startTime = new Date().getTime();\n\n const interval =\n announcerInterval > 0 &&\n setInterval(() => {\n if (new Date().getTime() - startTime > announcerTimeout) {\n // The announcer will stop after `announcerTimeout` time\n announce(\n `${ariaLabel} is still in progress, but will no longer announce.`\n );\n interval && clearInterval(interval);\n return;\n }\n announce(ariaLabel);\n }, announcerInterval);\n\n return () => {\n if (disableAnnouncer) return;\n\n interval && clearInterval(interval);\n if (completionAnnouncement) {\n announce(completionAnnouncement);\n }\n };\n }, [\n announce,\n announcerInterval,\n announcerTimeout,\n ariaLabel,\n completionAnnouncement,\n disableAnnouncer,\n ]);\n\n return (\n <div\n aria-label={ariaLabel}\n className={clsx(withBaseName(), withBaseName(size), className)}\n ref={ref}\n role={role}\n {...rest}\n >\n <SpinnerSVG size={size} density={density} id={id} />\n </div>\n );\n }\n);\n"],"names":["Spinner","spinnerCss"],"mappings":"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"}
|
|
@@ -18,6 +18,7 @@ import '../../banner/BannerActions.js';
|
|
|
18
18
|
import '../../banner/BannerContent.js';
|
|
19
19
|
import '../../border-item/BorderItem.js';
|
|
20
20
|
import '../../border-layout/BorderLayout.js';
|
|
21
|
+
import '../../breakpoints/BreakpointProvider.js';
|
|
21
22
|
import '../../button/Button.js';
|
|
22
23
|
import '../../card/Card.js';
|
|
23
24
|
import '../../checkbox/Checkbox.js';
|
|
@@ -60,12 +61,18 @@ import '../../interactable-card/InteractableCardGroupContext.js';
|
|
|
60
61
|
import '../../link/Link.js';
|
|
61
62
|
import '../../link-card/LinkCard.js';
|
|
62
63
|
import '../../list-control/ListControlContext.js';
|
|
64
|
+
import '../../menu/MenuContext.js';
|
|
65
|
+
import '@floating-ui/react';
|
|
66
|
+
import '../../menu/MenuItem.js';
|
|
67
|
+
import '../../menu/MenuPanel.js';
|
|
68
|
+
import '../../menu/MenuTriggerContext.js';
|
|
69
|
+
import '../../menu/MenuPanelContext.js';
|
|
70
|
+
import '../../menu/MenuGroup.js';
|
|
63
71
|
import '../../multiline-input/MultilineInput.js';
|
|
64
72
|
import '../../navigation-item/NavigationItem.js';
|
|
65
73
|
import '../../option/Option.js';
|
|
66
74
|
import '../../option/OptionGroup.js';
|
|
67
75
|
import '../../overlay/OverlayContext.js';
|
|
68
|
-
import '@floating-ui/react';
|
|
69
76
|
import '../../overlay/OverlayPanel.js';
|
|
70
77
|
import '../../overlay/OverlayPanelCloseButton.js';
|
|
71
78
|
import '../../overlay/OverlayPanelContent.js';
|