@salt-ds/core 1.29.0 → 1.30.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 +250 -24
- package/dist-cjs/accordion/Accordion.js +3 -0
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +3 -0
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +3 -0
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +3 -0
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +3 -0
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +3 -0
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +3 -0
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +3 -0
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +3 -0
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +3 -0
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +3 -0
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +3 -0
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +3 -0
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +3 -0
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js +3 -0
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/button/Button.js +3 -0
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.js +3 -0
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +3 -0
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +3 -0
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +3 -0
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +3 -0
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +28 -20
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +5 -2
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +3 -0
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +3 -0
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +3 -0
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +3 -0
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +3 -0
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/divider/Divider.css.js +6 -0
- package/dist-cjs/divider/Divider.css.js.map +1 -0
- package/dist-cjs/divider/Divider.js +143 -0
- package/dist-cjs/divider/Divider.js.map +1 -0
- package/dist-cjs/drawer/Drawer.js +3 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +3 -0
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.js +23 -17
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +3 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +3 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +3 -0
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +3 -0
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +3 -0
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +3 -0
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +3 -0
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +3 -0
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +3 -0
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +3 -0
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +8 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +3 -0
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +3 -0
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +3 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +3 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/link/Link.js +3 -0
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.js +3 -0
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-box/ListBox.css.js +6 -0
- package/dist-cjs/list-box/ListBox.css.js.map +1 -0
- package/dist-cjs/list-box/ListBox.js +295 -0
- package/dist-cjs/list-box/ListBox.js.map +1 -0
- package/dist-cjs/list-control/ListControlContext.js +5 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +78 -11
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js +3 -0
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js +3 -0
- package/dist-cjs/menu/MenuContext.js.map +1 -1
- package/dist-cjs/menu/MenuGroup.css.js +1 -1
- package/dist-cjs/menu/MenuGroup.js +3 -0
- package/dist-cjs/menu/MenuGroup.js.map +1 -1
- package/dist-cjs/menu/MenuItem.css.js +1 -1
- package/dist-cjs/menu/MenuItem.js +3 -0
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuPanel.js +3 -0
- package/dist-cjs/menu/MenuPanel.js.map +1 -1
- package/dist-cjs/menu/MenuPanelContext.js +3 -0
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js +3 -0
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/menu/MenuTriggerContext.js +3 -0
- package/dist-cjs/menu/MenuTriggerContext.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +3 -0
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +3 -0
- 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 +7 -2
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.css.js +1 -1
- package/dist-cjs/option/OptionGroup.js +3 -0
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +3 -0
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +3 -0
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +3 -0
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +3 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +3 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +3 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +3 -0
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +3 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js +3 -0
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +3 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +3 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +3 -0
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +3 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +3 -0
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +3 -0
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +3 -0
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +3 -0
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js +3 -0
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-cjs/pill/Pill.js +3 -0
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +3 -0
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +3 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +3 -0
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +3 -0
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +3 -0
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +3 -0
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +3 -0
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +34 -10
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +3 -0
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +3 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +3 -0
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +3 -0
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +3 -0
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +3 -0
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +3 -0
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +3 -0
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +3 -0
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/tag/Tag.css.js +6 -0
- package/dist-cjs/tag/Tag.css.js.map +1 -0
- package/dist-cjs/tag/Tag.js +137 -0
- package/dist-cjs/tag/Tag.js.map +1 -0
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +3 -0
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/theme/ActionFont.js +8 -0
- package/dist-cjs/theme/ActionFont.js.map +1 -0
- package/dist-cjs/toast/Toast.js +3 -0
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +3 -0
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +3 -0
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +3 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +3 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +3 -0
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +3 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +3 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +3 -0
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +3 -0
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +3 -0
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +3 -0
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +3 -0
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +3 -0
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +3 -0
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +3 -0
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +3 -0
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +3 -0
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +3 -0
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +3 -0
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +3 -0
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +3 -0
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +3 -0
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +3 -0
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +3 -0
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +3 -0
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/button/Button.js +3 -0
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.js +3 -0
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +3 -0
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +3 -0
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +3 -0
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +3 -0
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +28 -20
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +5 -2
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +3 -0
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +3 -0
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +3 -0
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +3 -0
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +3 -0
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/divider/Divider.css.js +4 -0
- package/dist-es/divider/Divider.css.js.map +1 -0
- package/dist-es/divider/Divider.js +139 -0
- package/dist-es/divider/Divider.js.map +1 -0
- package/dist-es/drawer/Drawer.js +3 -0
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +3 -0
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.css.js +1 -1
- package/dist-es/dropdown/Dropdown.js +24 -18
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +3 -0
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +3 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +3 -0
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +3 -0
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +3 -0
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +3 -0
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +3 -0
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +3 -0
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +3 -0
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +3 -0
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +4 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +3 -0
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.js +3 -0
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +3 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js +3 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/link/Link.js +3 -0
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.js +3 -0
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-box/ListBox.css.js +4 -0
- package/dist-es/list-box/ListBox.css.js.map +1 -0
- package/dist-es/list-box/ListBox.js +291 -0
- package/dist-es/list-box/ListBox.js.map +1 -0
- package/dist-es/list-control/ListControlContext.js +5 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +79 -12
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuBase.js +3 -0
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js +3 -0
- package/dist-es/menu/MenuContext.js.map +1 -1
- package/dist-es/menu/MenuGroup.css.js +1 -1
- package/dist-es/menu/MenuGroup.js +3 -0
- package/dist-es/menu/MenuGroup.js.map +1 -1
- package/dist-es/menu/MenuItem.css.js +1 -1
- package/dist-es/menu/MenuItem.js +3 -0
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuPanel.js +3 -0
- package/dist-es/menu/MenuPanel.js.map +1 -1
- package/dist-es/menu/MenuPanelContext.js +3 -0
- package/dist-es/menu/MenuPanelContext.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js +3 -0
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/menu/MenuTriggerContext.js +3 -0
- package/dist-es/menu/MenuTriggerContext.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +3 -0
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +3 -0
- 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 +7 -2
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.css.js +1 -1
- package/dist-es/option/OptionGroup.js +3 -0
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +3 -0
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +3 -0
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +3 -0
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +3 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.js +3 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +3 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +3 -0
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +3 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/CompactInput.js +3 -0
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +3 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +3 -0
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +3 -0
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +3 -0
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +3 -0
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +3 -0
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +3 -0
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +3 -0
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js +3 -0
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/pill/Pill.js +3 -0
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +3 -0
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +3 -0
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +3 -0
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +3 -0
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +3 -0
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +3 -0
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +3 -0
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +34 -10
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +3 -0
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +3 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/spinner/Spinner.js +3 -0
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +3 -0
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +3 -0
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +3 -0
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +3 -0
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +3 -0
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +3 -0
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/tag/Tag.css.js +4 -0
- package/dist-es/tag/Tag.css.js.map +1 -0
- package/dist-es/tag/Tag.js +133 -0
- package/dist-es/tag/Tag.js.map +1 -0
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +3 -0
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/theme/ActionFont.js +4 -0
- package/dist-es/theme/ActionFont.js.map +1 -0
- package/dist-es/toast/Toast.js +3 -0
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +3 -0
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.js +3 -0
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +3 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +3 -0
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +3 -0
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +3 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +3 -0
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +3 -0
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +3 -0
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +3 -0
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/combo-box/ComboBox.d.ts +8 -0
- package/dist-types/combo-box/useComboBox.d.ts +33 -2
- package/dist-types/divider/Divider.d.ts +12 -0
- package/dist-types/divider/index.d.ts +1 -0
- package/dist-types/index.d.ts +4 -1
- package/dist-types/list-box/ListBox.d.ts +40 -0
- package/dist-types/list-box/index.d.ts +1 -0
- package/dist-types/list-control/ListControlContext.d.ts +1 -0
- package/dist-types/list-control/ListControlState.d.ts +33 -2
- package/dist-types/salt-provider/SaltProvider.d.ts +3 -1
- package/dist-types/tag/Tag.d.ts +16 -0
- package/dist-types/tag/index.d.ts +1 -0
- package/dist-types/theme/ActionFont.d.ts +2 -0
- package/dist-types/theme/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AA8D5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAlFnC,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAmFI,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,aAAa,EAAC;AAAA,MACd,KAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,gBAAkB,EAAA,oBAAA;AAAA,MACf,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAW,EAAA,kBAAA;AAAA,MACX,QAAU,EAAA,iBAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,IAAM,MAAA;AAAA,MACJ,kBAAoB,EAAA,gBAAA;AAAA,MACpB,iBAAmB,EAAA,eAAA;AAAA,MACnB,SAAW,EAAA,cAAA;AAAA,MACX,QAAU,EAAA,aAAA;AAAA,MACP,GAAA,cAAA;AAAA,KACD,GAAA,UAAA,CAAA;AAEJ,IAAM,MAAA,QAAA,GAAA,CAAW,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,QAAA,KAAY,iBAAqB,IAAA,YAAA,CAAA;AAC9D,IAAM,MAAA,QAAA,GAAA,CAAW,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,QAAA,KAAY,iBAAqB,IAAA,YAAA,CAAA;AAC9D,IAAM,MAAA,gBAAA,GAAmB,CAAC,QACtB,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,qBAAZ,IACA,GAAA,EAAA,GAAA,yBAAA,KADA,YAEA,oBACA,GAAA,KAAA,CAAA,CAAA;AAEJ,IAAA,MAAM,oBACJ,WACC,IAAA,IAAA,GAAA,WAAA,GAAA,UAAA,IAAc,KAAQ,GAAA,UAAA,CAAW,UAAU,KAAQ,GAAA,WAAA,CAAA;AACtD,IAAM,MAAA,IAAA,GAAO,8BAAY,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,IAAA,CAAA;AAErC,IAAA,MAAM,CAAC,OAAA,EAAS,eAAe,CAAA,GAAI,aAAc,CAAA;AAAA,MAC/C,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAhJ1E,MAAAC,IAAAA,GAAAA,CAAAA;AAiJM,MAAI,IAAA,QAAA;AAAU,QAAA,OAAA;AAEd,MAAM,MAAA,UAAA,GAAa,MAAM,MAAO,CAAA,OAAA,CAAA;AAChC,MAAA,eAAA,CAAgB,UAAU,CAAA,CAAA;AAE1B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAA,CAAA,CAAA;AAChB,MAAA,CAAAA,GAAA,GAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,QAAZ,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,IAAA,IAAuB,CAAA,UAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,SAC1C;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,kBACE,EAAA,IAAA;AAAA,YACE,UAAA,IAAc,KACV,CAAA,GAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAqB,kBACrB,CAAA,GAAA,KAAA,CAAA;AAAA,YACJ,gBAAA;AAAA,WACG,IAAA,KAAA,CAAA;AAAA,UAEP,iBACE,EAAA,IAAA;AAAA,YACE,UAAA,IAAc,KACV,CAAA,GAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAqB,iBACrB,CAAA,GAAA,KAAA,CAAA;AAAA,YACJ,eAAA;AAAA,WACG,IAAA,KAAA,CAAA;AAAA,UAEP,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,GAAG,cAAc,CAAA;AAAA,UACrD,OAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,UACJ,GAAG,cAAA;AAAA,SACN,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -34,6 +34,7 @@ import '../dialog/DialogActions.js';
|
|
|
34
34
|
import '../dialog/DialogContent.js';
|
|
35
35
|
import '../dialog/DialogContext.js';
|
|
36
36
|
import '../dialog/DialogCloseButton.js';
|
|
37
|
+
import '../divider/Divider.js';
|
|
37
38
|
import '../drawer/Drawer.js';
|
|
38
39
|
import '../drawer/DrawerCloseButton.js';
|
|
39
40
|
import '../dropdown/Dropdown.js';
|
|
@@ -62,6 +63,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
62
63
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
63
64
|
import '../link/Link.js';
|
|
64
65
|
import '../link-card/LinkCard.js';
|
|
66
|
+
import '../list-box/ListBox.js';
|
|
65
67
|
import '../list-control/ListControlContext.js';
|
|
66
68
|
import '../menu/MenuContext.js';
|
|
67
69
|
import '@floating-ui/react';
|
|
@@ -98,6 +100,7 @@ import '../toast/Toast.js';
|
|
|
98
100
|
import '../toast/ToastContent.js';
|
|
99
101
|
import '../split-layout/SplitLayout.js';
|
|
100
102
|
import '../switch/Switch.js';
|
|
103
|
+
import '../tag/Tag.js';
|
|
101
104
|
import '../toggle-button/ToggleButton.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
103
106
|
import '../toggle-button-group/ToggleButtonGroupContext.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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"}
|
|
@@ -33,6 +33,7 @@ import '../dialog/DialogActions.js';
|
|
|
33
33
|
import '../dialog/DialogContent.js';
|
|
34
34
|
import '../dialog/DialogContext.js';
|
|
35
35
|
import '../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../divider/Divider.js';
|
|
36
37
|
import '../drawer/Drawer.js';
|
|
37
38
|
import '../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../link/Link.js';
|
|
62
63
|
import '../link-card/LinkCard.js';
|
|
64
|
+
import '../list-box/ListBox.js';
|
|
63
65
|
import '../list-control/ListControlContext.js';
|
|
64
66
|
import '../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -98,6 +100,7 @@ import '../toast/Toast.js';
|
|
|
98
100
|
import '../toast/ToastContent.js';
|
|
99
101
|
import '../split-layout/SplitLayout.js';
|
|
100
102
|
import '../switch/Switch.js';
|
|
103
|
+
import '../tag/Tag.js';
|
|
101
104
|
import '../toggle-button/ToggleButton.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
103
106
|
import '../toggle-button-group/ToggleButtonGroupContext.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;;;;"}
|
|
@@ -33,6 +33,7 @@ import '../../dialog/DialogActions.js';
|
|
|
33
33
|
import '../../dialog/DialogContent.js';
|
|
34
34
|
import '../../dialog/DialogContext.js';
|
|
35
35
|
import '../../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../../divider/Divider.js';
|
|
36
37
|
import '../../drawer/Drawer.js';
|
|
37
38
|
import '../../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../../link/Link.js';
|
|
62
63
|
import '../../link-card/LinkCard.js';
|
|
64
|
+
import '../../list-box/ListBox.js';
|
|
63
65
|
import '../../list-control/ListControlContext.js';
|
|
64
66
|
import '../../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -97,6 +99,7 @@ import '../../toast/Toast.js';
|
|
|
97
99
|
import '../../toast/ToastContent.js';
|
|
98
100
|
import '../../split-layout/SplitLayout.js';
|
|
99
101
|
import '../../switch/Switch.js';
|
|
102
|
+
import '../../tag/Tag.js';
|
|
100
103
|
import '../../toggle-button/ToggleButton.js';
|
|
101
104
|
import '../../toggle-button-group/ToggleButtonGroup.js';
|
|
102
105
|
import '../../toggle-button-group/ToggleButtonGroupContext.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;;;;"}
|
|
@@ -33,6 +33,7 @@ import '../dialog/DialogActions.js';
|
|
|
33
33
|
import '../dialog/DialogContent.js';
|
|
34
34
|
import '../dialog/DialogContext.js';
|
|
35
35
|
import '../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../divider/Divider.js';
|
|
36
37
|
import '../drawer/Drawer.js';
|
|
37
38
|
import '../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../link/Link.js';
|
|
62
63
|
import '../link-card/LinkCard.js';
|
|
64
|
+
import '../list-box/ListBox.js';
|
|
63
65
|
import '../list-control/ListControlContext.js';
|
|
64
66
|
import '../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -97,6 +99,7 @@ import '../toast/Toast.js';
|
|
|
97
99
|
import '../toast/ToastContent.js';
|
|
98
100
|
import '../split-layout/SplitLayout.js';
|
|
99
101
|
import '../switch/Switch.js';
|
|
102
|
+
import '../tag/Tag.js';
|
|
100
103
|
import '../toggle-button/ToggleButton.js';
|
|
101
104
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -111,6 +114,7 @@ const DEFAULT_MODE = "light";
|
|
|
111
114
|
const DEFAULT_CORNER = "sharp";
|
|
112
115
|
const DEFAULT_HEADING_FONT = "Open Sans";
|
|
113
116
|
const DEFAULT_ACCENT = "blue";
|
|
117
|
+
const DEFAULT_ACTION_FONT = "Open Sans";
|
|
114
118
|
const DensityContext = createContext(DEFAULT_DENSITY);
|
|
115
119
|
const ThemeContext = createContext({
|
|
116
120
|
theme: "",
|
|
@@ -118,7 +122,8 @@ const ThemeContext = createContext({
|
|
|
118
122
|
themeNext: false,
|
|
119
123
|
UNSTABLE_corner: DEFAULT_CORNER,
|
|
120
124
|
UNSTABLE_headingFont: DEFAULT_HEADING_FONT,
|
|
121
|
-
UNSTABLE_accent: DEFAULT_ACCENT
|
|
125
|
+
UNSTABLE_accent: DEFAULT_ACCENT,
|
|
126
|
+
UNSTABLE_actionFont: DEFAULT_ACTION_FONT
|
|
122
127
|
});
|
|
123
128
|
const BreakpointContext = createContext(DEFAULT_BREAKPOINTS);
|
|
124
129
|
const getThemeNames = (themeName, themeNext) => {
|
|
@@ -139,14 +144,16 @@ const createThemedChildren = ({
|
|
|
139
144
|
themeNext,
|
|
140
145
|
corner,
|
|
141
146
|
headingFont,
|
|
142
|
-
accent
|
|
147
|
+
accent,
|
|
148
|
+
actionFont
|
|
143
149
|
}) => {
|
|
144
150
|
var _a;
|
|
145
151
|
const themeNames = getThemeNames(themeName, themeNext);
|
|
146
152
|
const themeNextProps = {
|
|
147
153
|
"data-corner": corner,
|
|
148
154
|
"data-heading-font": headingFont,
|
|
149
|
-
"data-accent": accent
|
|
155
|
+
"data-accent": accent,
|
|
156
|
+
"data-action-font": actionFont
|
|
150
157
|
};
|
|
151
158
|
if (applyClassesTo === "root") {
|
|
152
159
|
return children;
|
|
@@ -193,9 +200,10 @@ function InternalSaltProvider({
|
|
|
193
200
|
themeNext,
|
|
194
201
|
corner: cornerProp,
|
|
195
202
|
headingFont: headingFontProp,
|
|
196
|
-
accent: accentProp
|
|
203
|
+
accent: accentProp,
|
|
204
|
+
actionFont: actionFontProp
|
|
197
205
|
}) {
|
|
198
|
-
var _a, _b, _c, _d;
|
|
206
|
+
var _a, _b, _c, _d, _e;
|
|
199
207
|
const inheritedDensity = useContext(DensityContext);
|
|
200
208
|
const {
|
|
201
209
|
theme: inheritedTheme,
|
|
@@ -203,7 +211,8 @@ function InternalSaltProvider({
|
|
|
203
211
|
window: inheritedWindow,
|
|
204
212
|
UNSTABLE_corner: inheritedCorner,
|
|
205
213
|
UNSTABLE_headingFont: inheritedHeadingFont,
|
|
206
|
-
UNSTABLE_accent: inheritedAccent
|
|
214
|
+
UNSTABLE_accent: inheritedAccent,
|
|
215
|
+
UNSTABLE_actionFont: inheritedActionFont
|
|
207
216
|
} = useContext(ThemeContext);
|
|
208
217
|
const isRootProvider = inheritedTheme === void 0 || inheritedTheme === "";
|
|
209
218
|
const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY;
|
|
@@ -213,6 +222,7 @@ function InternalSaltProvider({
|
|
|
213
222
|
const corner = (_b = cornerProp != null ? cornerProp : inheritedCorner) != null ? _b : DEFAULT_CORNER;
|
|
214
223
|
const headingFont = (_c = headingFontProp != null ? headingFontProp : inheritedHeadingFont) != null ? _c : DEFAULT_HEADING_FONT;
|
|
215
224
|
const accent = (_d = accentProp != null ? accentProp : inheritedAccent) != null ? _d : DEFAULT_ACCENT;
|
|
225
|
+
const actionFont = (_e = actionFontProp != null ? actionFontProp : inheritedActionFont) != null ? _e : DEFAULT_ACTION_FONT;
|
|
216
226
|
const applyClassesTo = applyClassesToProp != null ? applyClassesToProp : isRootProvider ? "root" : "scope";
|
|
217
227
|
const targetWindow = useWindow();
|
|
218
228
|
useComponentCssInjection({
|
|
@@ -228,9 +238,19 @@ function InternalSaltProvider({
|
|
|
228
238
|
themeNext: Boolean(themeNext),
|
|
229
239
|
UNSTABLE_corner: corner,
|
|
230
240
|
UNSTABLE_headingFont: headingFont,
|
|
231
|
-
UNSTABLE_accent: accent
|
|
241
|
+
UNSTABLE_accent: accent,
|
|
242
|
+
UNSTABLE_actionFont: actionFont
|
|
232
243
|
}),
|
|
233
|
-
[
|
|
244
|
+
[
|
|
245
|
+
themeName,
|
|
246
|
+
mode,
|
|
247
|
+
targetWindow,
|
|
248
|
+
themeNext,
|
|
249
|
+
corner,
|
|
250
|
+
headingFont,
|
|
251
|
+
accent,
|
|
252
|
+
actionFont
|
|
253
|
+
]
|
|
234
254
|
);
|
|
235
255
|
const themedChildren = createThemedChildren({
|
|
236
256
|
children,
|
|
@@ -241,7 +261,8 @@ function InternalSaltProvider({
|
|
|
241
261
|
themeNext,
|
|
242
262
|
corner,
|
|
243
263
|
headingFont,
|
|
244
|
-
accent
|
|
264
|
+
accent,
|
|
265
|
+
actionFont
|
|
245
266
|
});
|
|
246
267
|
useIsomorphicLayoutEffect(() => {
|
|
247
268
|
const themeNames = getThemeNames(themeName, themeNext);
|
|
@@ -256,6 +277,7 @@ function InternalSaltProvider({
|
|
|
256
277
|
targetWindow.document.documentElement.dataset.corner = corner;
|
|
257
278
|
targetWindow.document.documentElement.dataset.headingFont = headingFont;
|
|
258
279
|
targetWindow.document.documentElement.dataset.accent = accent;
|
|
280
|
+
targetWindow.document.documentElement.dataset.actionFont = actionFont;
|
|
259
281
|
}
|
|
260
282
|
} else {
|
|
261
283
|
console.warn(
|
|
@@ -274,6 +296,7 @@ function InternalSaltProvider({
|
|
|
274
296
|
delete targetWindow.document.documentElement.dataset.corner;
|
|
275
297
|
delete targetWindow.document.documentElement.dataset.headingFont;
|
|
276
298
|
delete targetWindow.document.documentElement.dataset.accent;
|
|
299
|
+
delete targetWindow.document.documentElement.dataset.actionFont;
|
|
277
300
|
}
|
|
278
301
|
}
|
|
279
302
|
};
|
|
@@ -287,7 +310,8 @@ function InternalSaltProvider({
|
|
|
287
310
|
themeNext,
|
|
288
311
|
corner,
|
|
289
312
|
headingFont,
|
|
290
|
-
accent
|
|
313
|
+
accent,
|
|
314
|
+
actionFont
|
|
291
315
|
]);
|
|
292
316
|
const matchedBreakpoints = useMatchedBreakpoints(breakpoints);
|
|
293
317
|
const saltProvider = /* @__PURE__ */ jsx(DensityContext.Provider, {
|
|
@@ -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 {\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\";\nimport { UNSTABLE_HeadingFont } from \"../theme/HeadingFont\";\nimport { UNSTABLE_Accent } from \"../theme/Accent\";\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\";\nconst DEFAULT_HEADING_FONT: UNSTABLE_HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: UNSTABLE_Accent = \"blue\";\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 UNSTABLE_headingFont: UNSTABLE_HeadingFont;\n UNSTABLE_accent: UNSTABLE_Accent;\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 UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n UNSTABLE_accent: DEFAULT_ACCENT,\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 headingFont,\n accent,\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 \"data-heading-font\": headingFont,\n \"data-accent\": accent,\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 headingFont: headingFontProp,\n accent: accentProp,\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 UNSTABLE_headingFont: inheritedHeadingFont,\n UNSTABLE_accent: inheritedAccent,\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 const headingFont =\n headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\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 UNSTABLE_headingFont: headingFont,\n UNSTABLE_accent: accent,\n }),\n [themeName, mode, targetWindow, themeNext, corner, headingFont, accent]\n );\n\n const themedChildren = createThemedChildren({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner: corner,\n headingFont,\n accent,\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 targetWindow.document.documentElement.dataset.headingFont =\n headingFont;\n targetWindow.document.documentElement.dataset.accent = accent;\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 delete targetWindow.document.documentElement.dataset.headingFont;\n delete targetWindow.document.documentElement.dataset.accent;\n }\n }\n };\n }, [\n applyClassesTo,\n density,\n mode,\n themeName,\n targetWindow,\n inheritedWindow,\n themeNext,\n corner,\n headingFont,\n accent,\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 headingFont?: UNSTABLE_HeadingFont;\n accent?: UNSTABLE_Accent;\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, UNSTABLE_ActionFont } 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\";\nimport { UNSTABLE_HeadingFont } from \"../theme/HeadingFont\";\nimport { UNSTABLE_Accent } from \"../theme/Accent\";\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\";\nconst DEFAULT_HEADING_FONT: UNSTABLE_HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: UNSTABLE_Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: UNSTABLE_ActionFont = \"Open Sans\";\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 UNSTABLE_headingFont: UNSTABLE_HeadingFont;\n UNSTABLE_accent: UNSTABLE_Accent;\n UNSTABLE_actionFont: UNSTABLE_ActionFont;\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 UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n UNSTABLE_accent: DEFAULT_ACCENT,\n UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\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 headingFont,\n accent,\n actionFont,\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 \"data-heading-font\": headingFont,\n \"data-accent\": accent,\n \"data-action-font\": actionFont,\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 headingFont: headingFontProp,\n accent: accentProp,\n actionFont: actionFontProp,\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 UNSTABLE_headingFont: inheritedHeadingFont,\n UNSTABLE_accent: inheritedAccent,\n UNSTABLE_actionFont: inheritedActionFont,\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 const headingFont =\n headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n const actionFont =\n actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\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 UNSTABLE_headingFont: headingFont,\n UNSTABLE_accent: accent,\n UNSTABLE_actionFont: actionFont,\n }),\n [\n themeName,\n mode,\n targetWindow,\n themeNext,\n corner,\n headingFont,\n accent,\n actionFont,\n ]\n );\n\n const themedChildren = createThemedChildren({\n children,\n themeName,\n density,\n mode,\n applyClassesTo,\n themeNext,\n corner: corner,\n headingFont,\n accent,\n actionFont,\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 targetWindow.document.documentElement.dataset.headingFont =\n headingFont;\n targetWindow.document.documentElement.dataset.accent = accent;\n targetWindow.document.documentElement.dataset.actionFont = actionFont;\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 delete targetWindow.document.documentElement.dataset.headingFont;\n delete targetWindow.document.documentElement.dataset.accent;\n delete targetWindow.document.documentElement.dataset.actionFont;\n }\n }\n };\n }, [\n applyClassesTo,\n density,\n mode,\n themeName,\n targetWindow,\n inheritedWindow,\n themeNext,\n corner,\n headingFont,\n accent,\n actionFont,\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 headingFont?: UNSTABLE_HeadingFont;\n accent?: UNSTABLE_Accent;\n actionFont?: UNSTABLE_ActionFont;\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
|
@@ -33,6 +33,7 @@ import '../dialog/DialogActions.js';
|
|
|
33
33
|
import '../dialog/DialogContent.js';
|
|
34
34
|
import '../dialog/DialogContext.js';
|
|
35
35
|
import '../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../divider/Divider.js';
|
|
36
37
|
import '../drawer/Drawer.js';
|
|
37
38
|
import '../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../link/Link.js';
|
|
62
63
|
import '../link-card/LinkCard.js';
|
|
64
|
+
import '../list-box/ListBox.js';
|
|
63
65
|
import '../list-control/ListControlContext.js';
|
|
64
66
|
import '../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -96,6 +98,7 @@ import '../toast/Toast.js';
|
|
|
96
98
|
import '../toast/ToastContent.js';
|
|
97
99
|
import '../split-layout/SplitLayout.js';
|
|
98
100
|
import '../switch/Switch.js';
|
|
101
|
+
import '../tag/Tag.js';
|
|
99
102
|
import '../toggle-button/ToggleButton.js';
|
|
100
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
101
104
|
import '../toggle-button-group/ToggleButtonGroupContext.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;;;;"}
|
|
@@ -33,6 +33,7 @@ import '../dialog/DialogActions.js';
|
|
|
33
33
|
import '../dialog/DialogContent.js';
|
|
34
34
|
import '../dialog/DialogContext.js';
|
|
35
35
|
import '../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../divider/Divider.js';
|
|
36
37
|
import '../drawer/Drawer.js';
|
|
37
38
|
import '../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../link/Link.js';
|
|
62
63
|
import '../link-card/LinkCard.js';
|
|
64
|
+
import '../list-box/ListBox.js';
|
|
63
65
|
import '../list-control/ListControlContext.js';
|
|
64
66
|
import '../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -96,6 +98,7 @@ import '../toast/Toast.js';
|
|
|
96
98
|
import '../toast/ToastContent.js';
|
|
97
99
|
import '../split-layout/SplitLayout.js';
|
|
98
100
|
import '../switch/Switch.js';
|
|
101
|
+
import '../tag/Tag.js';
|
|
99
102
|
import '../toggle-button/ToggleButton.js';
|
|
100
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
101
104
|
import '../toggle-button-group/ToggleButtonGroupContext.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;;;;"}
|
|
@@ -34,6 +34,7 @@ import '../dialog/DialogActions.js';
|
|
|
34
34
|
import '../dialog/DialogContent.js';
|
|
35
35
|
import '../dialog/DialogContext.js';
|
|
36
36
|
import '../dialog/DialogCloseButton.js';
|
|
37
|
+
import '../divider/Divider.js';
|
|
37
38
|
import '../drawer/Drawer.js';
|
|
38
39
|
import '../drawer/DrawerCloseButton.js';
|
|
39
40
|
import '../dropdown/Dropdown.js';
|
|
@@ -61,6 +62,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
61
62
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
62
63
|
import '../link/Link.js';
|
|
63
64
|
import '../link-card/LinkCard.js';
|
|
65
|
+
import '../list-box/ListBox.js';
|
|
64
66
|
import '../list-control/ListControlContext.js';
|
|
65
67
|
import '../menu/MenuContext.js';
|
|
66
68
|
import '@floating-ui/react';
|
|
@@ -97,6 +99,7 @@ import '../toast/Toast.js';
|
|
|
97
99
|
import '../toast/ToastContent.js';
|
|
98
100
|
import '../split-layout/SplitLayout.js';
|
|
99
101
|
import '../switch/Switch.js';
|
|
102
|
+
import '../tag/Tag.js';
|
|
100
103
|
import '../toggle-button/ToggleButton.js';
|
|
101
104
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroupContext.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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"}
|
|
@@ -33,6 +33,7 @@ import '../../dialog/DialogActions.js';
|
|
|
33
33
|
import '../../dialog/DialogContent.js';
|
|
34
34
|
import '../../dialog/DialogContext.js';
|
|
35
35
|
import '../../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../../divider/Divider.js';
|
|
36
37
|
import '../../drawer/Drawer.js';
|
|
37
38
|
import '../../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../../link/Link.js';
|
|
62
63
|
import '../../link-card/LinkCard.js';
|
|
64
|
+
import '../../list-box/ListBox.js';
|
|
63
65
|
import '../../list-control/ListControlContext.js';
|
|
64
66
|
import '../../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -97,6 +99,7 @@ import '../../toast/Toast.js';
|
|
|
97
99
|
import '../../toast/ToastContent.js';
|
|
98
100
|
import '../../split-layout/SplitLayout.js';
|
|
99
101
|
import '../../switch/Switch.js';
|
|
102
|
+
import '../../tag/Tag.js';
|
|
100
103
|
import '../../toggle-button/ToggleButton.js';
|
|
101
104
|
import '../../toggle-button-group/ToggleButtonGroup.js';
|
|
102
105
|
import '../../toggle-button-group/ToggleButtonGroupContext.js';
|