@salt-ds/core 1.22.0 → 1.24.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 +201 -96
- package/dist-cjs/accordion/Accordion.js +9 -2
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +9 -2
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +9 -2
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +10 -2
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +9 -2
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +9 -2
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +9 -2
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +9 -2
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +9 -2
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +9 -2
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +9 -2
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +9 -2
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +9 -2
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +9 -2
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/button/Button.js +9 -2
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +9 -2
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +10 -3
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +9 -2
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +9 -2
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +9 -2
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +8 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +9 -2
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +10 -3
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +9 -2
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +12 -3
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +9 -2
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +9 -2
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +8 -1
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +9 -2
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +9 -2
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +9 -2
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +9 -2
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +9 -2
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +9 -2
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +9 -2
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +9 -2
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +9 -2
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +9 -2
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +9 -2
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +9 -2
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +19 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +9 -2
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +6 -0
- package/dist-cjs/interactable-card/InteractableCard.js +201 -0
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.css.js +6 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.css.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js +232 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +107 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -0
- package/dist-cjs/{card → interactable-card}/useInteractableCard.js +5 -2
- package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -0
- package/dist-cjs/link/Link.js +9 -2
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.css.js +1 -1
- package/dist-cjs/link-card/LinkCard.js +9 -2
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +9 -2
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +9 -2
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +9 -2
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +9 -2
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.js +9 -2
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js +9 -2
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +9 -2
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +9 -2
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +164 -0
- package/dist-cjs/overlay/Overlay.js.map +1 -0
- package/dist-cjs/overlay/OverlayContext.js +127 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanel.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanel.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanel.js +166 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +129 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelContent.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanelContent.css.js.map +1 -0
- package/dist-cjs/{card/InteractableCard.js → overlay/OverlayPanelContent.js} +24 -44
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -0
- package/dist-cjs/overlay/OverlayTrigger.js +123 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +9 -2
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +9 -2
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +9 -2
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +9 -2
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +9 -2
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +9 -2
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +9 -2
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +9 -2
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/pill/Pill.js +10 -2
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +9 -2
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +9 -2
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +11 -4
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +10 -3
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +9 -2
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +9 -2
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +9 -2
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +9 -2
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +9 -2
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +6 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +118 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-cjs/spinner/Spinner.js +9 -2
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +9 -2
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +9 -2
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +9 -2
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +9 -2
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +9 -2
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +10 -2
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Text.js +9 -2
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +9 -2
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +9 -2
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +10 -2
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +9 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +9 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +15 -3
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +9 -2
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +9 -2
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +8 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +3 -5
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +9 -2
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +9 -2
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +9 -2
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +9 -2
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +9 -2
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +10 -2
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +9 -2
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +9 -2
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +9 -2
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +9 -2
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +9 -2
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +9 -2
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +9 -2
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +9 -2
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +9 -2
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +9 -2
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/button/Button.js +9 -2
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +9 -2
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +10 -3
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +9 -2
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +9 -2
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +9 -2
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +8 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +9 -2
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +10 -3
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +9 -2
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +12 -3
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +9 -2
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +9 -2
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +8 -1
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +9 -2
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +9 -2
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +9 -2
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +9 -2
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +9 -2
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +9 -2
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +9 -2
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +9 -2
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +9 -2
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +9 -2
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +9 -2
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +9 -2
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +9 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +9 -2
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +4 -0
- package/dist-es/interactable-card/InteractableCard.js +197 -0
- package/dist-es/interactable-card/InteractableCard.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.css.js +4 -0
- package/dist-es/interactable-card/InteractableCardGroup.css.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.js +228 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js +102 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -0
- package/dist-es/{card → interactable-card}/useInteractableCard.js +5 -2
- package/dist-es/interactable-card/useInteractableCard.js.map +1 -0
- package/dist-es/link/Link.js +9 -2
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.css.js +1 -1
- package/dist-es/link-card/LinkCard.js +9 -2
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +9 -2
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +9 -2
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +9 -2
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +9 -2
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.js +9 -2
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js +9 -2
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +9 -2
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +9 -2
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +160 -0
- package/dist-es/overlay/Overlay.js.map +1 -0
- package/dist-es/overlay/OverlayContext.js +122 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -0
- package/dist-es/overlay/OverlayPanel.css.js +4 -0
- package/dist-es/overlay/OverlayPanel.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanel.js +162 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -0
- package/dist-es/overlay/OverlayPanelCloseButton.css.js +4 -0
- package/dist-es/overlay/OverlayPanelCloseButton.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js +121 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -0
- package/dist-es/overlay/OverlayPanelContent.css.js +4 -0
- package/dist-es/overlay/OverlayPanelContent.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanelContent.js +115 -0
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -0
- package/dist-es/overlay/OverlayTrigger.js +119 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +9 -2
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +9 -2
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +9 -2
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +9 -2
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +9 -2
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +9 -2
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +9 -2
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +9 -2
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/pill/Pill.js +10 -2
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +9 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +9 -2
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +11 -4
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +10 -3
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +9 -2
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +9 -2
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +9 -2
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +9 -2
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +9 -2
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +4 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-es/{card/InteractableCard.js → segmented-button-group/SegmentedButtonGroup.js} +20 -45
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-es/spinner/Spinner.js +9 -2
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +9 -2
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +9 -2
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +9 -2
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +9 -2
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +9 -2
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +10 -2
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Text.js +9 -2
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +9 -2
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +9 -2
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +10 -2
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +9 -2
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +9 -2
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +15 -3
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +9 -2
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +9 -2
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +8 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +3 -5
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +9 -2
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +9 -2
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/card/index.d.ts +0 -1
- package/dist-types/index.d.ts +3 -0
- package/dist-types/{card → interactable-card}/InteractableCard.d.ts +15 -1
- package/dist-types/interactable-card/InteractableCardGroup.d.ts +27 -0
- package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +12 -0
- package/dist-types/interactable-card/index.d.ts +3 -0
- package/dist-types/overlay/Overlay.d.ts +13 -0
- package/dist-types/overlay/OverlayContext.d.ts +21 -0
- package/dist-types/overlay/OverlayPanel.d.ts +8 -0
- package/dist-types/overlay/OverlayPanelCloseButton.d.ts +2 -0
- package/dist-types/overlay/OverlayPanelContent.d.ts +8 -0
- package/dist-types/overlay/OverlayTrigger.d.ts +5 -0
- package/dist-types/overlay/index.d.ts +5 -0
- package/dist-types/segmented-button-group/SegmentedButtonGroup.d.ts +4 -0
- package/dist-types/segmented-button-group/index.d.ts +1 -0
- package/dist-types/tooltip/Tooltip.d.ts +2 -1
- package/dist-types/tooltip/TooltipBase.d.ts +2 -2
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -1
- package/package.json +2 -2
- package/dist-cjs/card/InteractableCard.css.js +0 -6
- package/dist-cjs/card/InteractableCard.js.map +0 -1
- package/dist-cjs/card/useInteractableCard.js.map +0 -1
- package/dist-es/card/InteractableCard.css.js +0 -4
- package/dist-es/card/InteractableCard.js.map +0 -1
- package/dist-es/card/useInteractableCard.js.map +0 -1
- /package/dist-cjs/{card → interactable-card}/InteractableCard.css.js.map +0 -0
- /package/dist-es/{card → interactable-card}/InteractableCard.css.js.map +0 -0
- /package/dist-types/{card → interactable-card}/useInteractableCard.d.ts +0 -0
|
@@ -22,7 +22,6 @@ import '../border-item/BorderItem.js';
|
|
|
22
22
|
import '../border-layout/BorderLayout.js';
|
|
23
23
|
import '../button/Button.js';
|
|
24
24
|
import '../card/Card.js';
|
|
25
|
-
import '../card/InteractableCard.js';
|
|
26
25
|
import '../checkbox/Checkbox.js';
|
|
27
26
|
import '../checkbox/CheckboxGroup.js';
|
|
28
27
|
import '@salt-ds/icons';
|
|
@@ -55,6 +54,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../grid-item/GridItem.js';
|
|
56
55
|
import '../grid-layout/GridLayout.js';
|
|
57
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../link/Link.js';
|
|
59
61
|
import '../link-card/LinkCard.js';
|
|
60
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../option/Option.js';
|
|
64
66
|
import '../option/OptionGroup.js';
|
|
67
|
+
import '../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../overlay/OverlayPanel.js';
|
|
70
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../pagination/Pagination.js';
|
|
66
73
|
import '../pagination/Paginator.js';
|
|
67
74
|
import '../pagination/CompactInput.js';
|
|
@@ -74,6 +81,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
74
81
|
import '../radio-button/RadioButton.js';
|
|
75
82
|
import '../radio-button/RadioButtonGroup.js';
|
|
76
83
|
import '../scrim/Scrim.js';
|
|
84
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
77
85
|
import '../spinner/Spinner.js';
|
|
78
86
|
import '../stack-layout/StackLayout.js';
|
|
79
87
|
import '../toast/Toast.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import { ErrorAdornmentIcon } from './ErrorAdornment.js';
|
|
89
96
|
import { SuccessAdornmentIcon } from './SuccessAdornment.js';
|
|
90
97
|
import { WarningAdornmentIcon } from './WarningAdornment.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport statusAdornmentCss from \"./StatusAdornment.css\";\n\nconst icons = {\n error: ErrorAdornmentIcon,\n warning: WarningAdornmentIcon,\n success: SuccessAdornmentIcon,\n};\n\nexport type AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n /**\n * Status adornment to be displayed.\n */\n status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n error: \"error\",\n warning: \"warning\",\n success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n function StatusAdornment({ className, status, ...restProps }, ref) {\n const AdornmentComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-adornment\",\n css: statusAdornmentCss,\n window: targetWindow,\n });\n\n return (\n <AdornmentComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport statusAdornmentCss from \"./StatusAdornment.css\";\n\nconst icons = {\n error: ErrorAdornmentIcon,\n warning: WarningAdornmentIcon,\n success: SuccessAdornmentIcon,\n};\n\nexport type AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n /**\n * Status adornment to be displayed.\n */\n status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n error: \"error\",\n warning: \"warning\",\n success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n function StatusAdornment({ className, status, ...restProps }, ref) {\n const AdornmentComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-adornment\",\n css: statusAdornmentCss,\n window: targetWindow,\n });\n\n return (\n <AdornmentComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,kBAAA;AAAA,EACP,OAAS,EAAA,oBAAA;AAAA,EACT,OAAS,EAAA,oBAAA;AACX,CAAA,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,EAAE,WAAW,MAAW,EAAA,GAAA,SAAA,IAAa,GAAK,EAAA;AACjE,IAAA,MAAM,qBAAqB,KAAM,CAAA,MAAA,CAAA,CAAA;AACjC,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -21,7 +21,6 @@ import '../border-item/BorderItem.js';
|
|
|
21
21
|
import '../border-layout/BorderLayout.js';
|
|
22
22
|
import '../button/Button.js';
|
|
23
23
|
import '../card/Card.js';
|
|
24
|
-
import '../card/InteractableCard.js';
|
|
25
24
|
import '../checkbox/Checkbox.js';
|
|
26
25
|
import '../checkbox/CheckboxGroup.js';
|
|
27
26
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -54,6 +53,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
54
53
|
import '../grid-item/GridItem.js';
|
|
55
54
|
import '../grid-layout/GridLayout.js';
|
|
56
55
|
import '../input/Input.js';
|
|
56
|
+
import '../interactable-card/InteractableCard.js';
|
|
57
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
59
|
import '../link/Link.js';
|
|
58
60
|
import '../link-card/LinkCard.js';
|
|
59
61
|
import '../list-control/ListControlContext.js';
|
|
@@ -61,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
61
63
|
import '../navigation-item/NavigationItem.js';
|
|
62
64
|
import '../option/Option.js';
|
|
63
65
|
import '../option/OptionGroup.js';
|
|
66
|
+
import '../overlay/OverlayContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../overlay/OverlayPanel.js';
|
|
69
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
70
|
+
import '../overlay/OverlayPanelContent.js';
|
|
64
71
|
import '../pagination/Pagination.js';
|
|
65
72
|
import '../pagination/Paginator.js';
|
|
66
73
|
import '../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../radio-button/RadioButton.js';
|
|
74
81
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../scrim/Scrim.js';
|
|
83
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../spinner/Spinner.js';
|
|
77
85
|
import '../stack-layout/StackLayout.js';
|
|
78
86
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import css_248z from './StatusIndicator.css.js';
|
|
89
96
|
|
|
90
97
|
const icons = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import {\n DEFAULT_ICON_SIZE,\n ErrorSolidIcon,\n IconProps,\n InfoSolidIcon,\n SuccessTickIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ValidationStatus } from \"./ValidationStatus\";\n\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst icons = {\n error: ErrorSolidIcon,\n success: SuccessTickIcon,\n warning: WarningSolidIcon,\n info: InfoSolidIcon,\n};\n\nexport interface StatusIndicatorProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n error: \"error\",\n success: \"success\",\n warning: \"warning\",\n info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n function StatusIndicator(\n { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-indicator\",\n css: statusIndicatorCss,\n window: targetWindow,\n });\n\n const IconComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n return (\n <IconComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusIndicator","statusIndicatorCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import {\n DEFAULT_ICON_SIZE,\n ErrorSolidIcon,\n IconProps,\n InfoSolidIcon,\n SuccessTickIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ValidationStatus } from \"./ValidationStatus\";\n\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst icons = {\n error: ErrorSolidIcon,\n success: SuccessTickIcon,\n warning: WarningSolidIcon,\n info: InfoSolidIcon,\n};\n\nexport interface StatusIndicatorProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n error: \"error\",\n success: \"success\",\n warning: \"warning\",\n info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n function StatusIndicator(\n { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-status-indicator\",\n css: statusIndicatorCss,\n window: targetWindow,\n });\n\n const IconComponent = icons[status];\n const ariaLabel = statusToAriaLabelMap[status];\n\n return (\n <IconComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n size={size}\n aria-label={ariaLabel}\n {...restProps}\n ref={ref}\n />\n );\n }\n);\n"],"names":["StatusIndicator","statusIndicatorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,cAAA;AAAA,EACP,OAAS,EAAA,eAAA;AAAA,EACT,OAAS,EAAA,gBAAA;AAAA,EACT,IAAM,EAAA,aAAA;AACR,CAAA,CAAA;AASA,MAAM,oBAAyD,GAAA;AAAA,EAC7D,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,MAAA;AACR,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,iBACP,EAAE,SAAA,EAAW,QAAQ,IAAO,GAAA,iBAAA,EAAA,GAAsB,SAAU,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,gBAAgB,KAAM,CAAA,MAAA,CAAA,CAAA;AAC5B,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,IAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist-es/switch/Switch.js
CHANGED
|
@@ -23,7 +23,6 @@ import '../border-item/BorderItem.js';
|
|
|
23
23
|
import '../border-layout/BorderLayout.js';
|
|
24
24
|
import '../button/Button.js';
|
|
25
25
|
import '../card/Card.js';
|
|
26
|
-
import '../card/InteractableCard.js';
|
|
27
26
|
import '../checkbox/Checkbox.js';
|
|
28
27
|
import '../checkbox/CheckboxGroup.js';
|
|
29
28
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -57,6 +56,9 @@ import '../text/TextNotation.js';
|
|
|
57
56
|
import '../grid-item/GridItem.js';
|
|
58
57
|
import '../grid-layout/GridLayout.js';
|
|
59
58
|
import '../input/Input.js';
|
|
59
|
+
import '../interactable-card/InteractableCard.js';
|
|
60
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
61
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
60
62
|
import '../link/Link.js';
|
|
61
63
|
import '../link-card/LinkCard.js';
|
|
62
64
|
import '../list-control/ListControlContext.js';
|
|
@@ -64,6 +66,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
66
|
import '../navigation-item/NavigationItem.js';
|
|
65
67
|
import '../option/Option.js';
|
|
66
68
|
import '../option/OptionGroup.js';
|
|
69
|
+
import '../overlay/OverlayContext.js';
|
|
70
|
+
import '@floating-ui/react';
|
|
71
|
+
import '../overlay/OverlayPanel.js';
|
|
72
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
73
|
+
import '../overlay/OverlayPanelContent.js';
|
|
67
74
|
import '../pagination/Pagination.js';
|
|
68
75
|
import '../pagination/Paginator.js';
|
|
69
76
|
import '../pagination/CompactInput.js';
|
|
@@ -76,6 +83,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
76
83
|
import '../radio-button/RadioButton.js';
|
|
77
84
|
import '../radio-button/RadioButtonGroup.js';
|
|
78
85
|
import '../scrim/Scrim.js';
|
|
86
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
79
87
|
import '../spinner/Spinner.js';
|
|
80
88
|
import '../stack-layout/StackLayout.js';
|
|
81
89
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -86,7 +94,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
86
94
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
87
95
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
88
96
|
import '../tooltip/Tooltip.js';
|
|
89
|
-
import '@floating-ui/react';
|
|
90
97
|
import css_248z from './Switch.css.js';
|
|
91
98
|
|
|
92
99
|
const withBaseName = makePrefixer("saltSwitch");
|
|
@@ -174,6 +181,7 @@ const Switch = forwardRef(function Switch2(props, ref) {
|
|
|
174
181
|
onChange: handleChange,
|
|
175
182
|
onFocus,
|
|
176
183
|
type: "checkbox",
|
|
184
|
+
role: "switch",
|
|
177
185
|
...restInputProps
|
|
178
186
|
}),
|
|
179
187
|
/* @__PURE__ */ jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useDensity } from \"../salt-provider\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\nimport {\n IconProps,\n SuccessSmallSolidIcon,\n SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n const density = useDensity();\n return density === \"high\" ? (\n <SuccessSmallSolidIcon {...props} />\n ) : (\n <SuccessSolidIcon {...props} />\n );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n )}\n </span>\n </span>\n <span className={withBaseName(\"label\")}>{label}</span>\n </label>\n );\n});\n"],"names":["Switch","switchCss","value"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useDensity } from \"../salt-provider\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\nimport {\n IconProps,\n SuccessSmallSolidIcon,\n SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<ComponentPropsWithoutRef<\"input\">>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n const density = useDensity();\n return density === \"high\" ? (\n <SuccessSmallSolidIcon {...props} />\n ) : (\n <SuccessSolidIcon {...props} />\n );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n inputProps = {},\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-switch\",\n css: switchCss,\n window: targetWindow,\n });\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"checked\")]: checked,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n defaultChecked={defaultChecked}\n disabled={disabled}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n role=\"switch\"\n {...restInputProps}\n />\n <span className={withBaseName(\"track\")}>\n <span className={withBaseName(\"thumb\")}>\n {checked && (\n <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n )}\n </span>\n </span>\n <span className={withBaseName(\"label\")}>{label}</span>\n </label>\n );\n});\n"],"names":["Switch","switchCss","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAE9C,SAAS,YAAY,KAAkB,EAAA;AACrC,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,yBAChB,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAuB,GAAG,KAAA;AAAA,GAAO,oBAEjC,GAAA,CAAA,gBAAA,EAAA;AAAA,IAAkB,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAEjC,CAAA;AAEO,MAAM,MAAS,GAAA,UAAA,CAA0C,SAASA,OAAAA,CACvE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,OAAS,EAAA,WAAA;AAAA,IACT,SAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,aAAa,EAAC;AAAA,IACd,KAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,kBAAoB,EAAA,gBAAA;AAAA,IACpB,iBAAmB,EAAA,eAAA;AAAA,IACnB,SAAW,EAAA,cAAA;AAAA,IACX,QAAU,EAAA,aAAA;AAAA,IACP,GAAA,cAAA;AAAA,GACD,GAAA,UAAA,CAAA;AAEJ,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,IAC/B,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,kBAAA,EAAoB,QAAU,EAAA,iBAAA,KAC/C,iBAAkB,EAAA,CAAA;AAEpB,EAAA,MAAM,WAAW,iBAAqB,IAAA,YAAA,CAAA;AAEtC,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAEpE,IAAI,IAAA,KAAA,CAAM,YAAY,gBAAkB,EAAA;AACtC,MAAA,OAAA;AAAA,KACF;AAEA,IAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,OAAA,CAAA;AAC3B,IAAA,UAAA,CAAWA,MAAK,CAAA,CAAA;AAChB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,IAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,OAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,QACC,kBAAkB,EAAA,IAAA;AAAA,UAChB,kBAAqB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAA,kBAAA,CAAA;AAAA,UACrB,gBAAA;AAAA,SACF;AAAA,QACA,iBAAiB,EAAA,IAAA;AAAA,UACf,kBAAqB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAA,iBAAA,CAAA;AAAA,UACrB,eAAA;AAAA,SACF;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,OAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,GAAG,cAAc,CAAA;AAAA,QACrD,cAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAA;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,cAAA;AAAA,OACN,CAAA;AAAA,sBACC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QACnC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAClC,qCACE,GAAA,CAAA,WAAA,EAAA;AAAA,YAAY,aAAW,EAAA,IAAA;AAAA,YAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAAG,CAAA;AAAA,SAE9D,CAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAI,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,KAAA;AAAA,GACjD,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
package/dist-es/text/Text.js
CHANGED
|
@@ -20,7 +20,6 @@ import '../border-item/BorderItem.js';
|
|
|
20
20
|
import '../border-layout/BorderLayout.js';
|
|
21
21
|
import '../button/Button.js';
|
|
22
22
|
import '../card/Card.js';
|
|
23
|
-
import '../card/InteractableCard.js';
|
|
24
23
|
import '../checkbox/Checkbox.js';
|
|
25
24
|
import '../checkbox/CheckboxGroup.js';
|
|
26
25
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -54,6 +53,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
54
53
|
import '../grid-item/GridItem.js';
|
|
55
54
|
import '../grid-layout/GridLayout.js';
|
|
56
55
|
import '../input/Input.js';
|
|
56
|
+
import '../interactable-card/InteractableCard.js';
|
|
57
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
59
|
import '../link/Link.js';
|
|
58
60
|
import '../link-card/LinkCard.js';
|
|
59
61
|
import '../list-control/ListControlContext.js';
|
|
@@ -61,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
61
63
|
import '../navigation-item/NavigationItem.js';
|
|
62
64
|
import '../option/Option.js';
|
|
63
65
|
import '../option/OptionGroup.js';
|
|
66
|
+
import '../overlay/OverlayContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../overlay/OverlayPanel.js';
|
|
69
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
70
|
+
import '../overlay/OverlayPanelContent.js';
|
|
64
71
|
import '../pagination/Pagination.js';
|
|
65
72
|
import '../pagination/Paginator.js';
|
|
66
73
|
import '../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../radio-button/RadioButton.js';
|
|
74
81
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../scrim/Scrim.js';
|
|
83
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../spinner/Spinner.js';
|
|
77
85
|
import '../stack-layout/StackLayout.js';
|
|
78
86
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import css_248z from './Text.css.js';
|
|
89
96
|
|
|
90
97
|
const withBaseName = makePrefixer("saltText");
|
package/dist-es/text/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n */\n variant?: \"primary\" | \"secondary\";\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant = \"primary\",\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs || \"\")]: styleAs,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["textCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Applies disabled styling when true\n */\n disabled?: boolean;\n /**\n * Apply text truncation by mentioning number of rows to be displayed\n */\n maxRows?: number;\n /**\n * Match styling to another text component's style\n */\n styleAs?:\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"label\"\n | \"display1\"\n | \"display2\"\n | \"display3\"\n | \"notation\"\n | \"action\"\n | \"code\";\n /**\n * Change text color palette\n */\n variant?: \"primary\" | \"secondary\";\n }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n disabled = false,\n maxRows,\n style,\n styleAs,\n variant = \"primary\",\n ...restProps\n }: TextProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-text\",\n css: textCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n\n const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"lineClamp\")]: maxRows,\n [withBaseName(styleAs || \"\")]: styleAs,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n {...restProps}\n ref={ref}\n style={textStyles}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["textCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,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,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,UAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist-es/toast/Toast.js
CHANGED
|
@@ -23,7 +23,6 @@ import '../border-item/BorderItem.js';
|
|
|
23
23
|
import '../border-layout/BorderLayout.js';
|
|
24
24
|
import '../button/Button.js';
|
|
25
25
|
import '../card/Card.js';
|
|
26
|
-
import '../card/InteractableCard.js';
|
|
27
26
|
import '../checkbox/Checkbox.js';
|
|
28
27
|
import '../checkbox/CheckboxGroup.js';
|
|
29
28
|
import '@salt-ds/icons';
|
|
@@ -55,6 +54,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../grid-item/GridItem.js';
|
|
56
55
|
import '../grid-layout/GridLayout.js';
|
|
57
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../link/Link.js';
|
|
59
61
|
import '../link-card/LinkCard.js';
|
|
60
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../option/Option.js';
|
|
64
66
|
import '../option/OptionGroup.js';
|
|
67
|
+
import '../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../overlay/OverlayPanel.js';
|
|
70
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../pagination/Pagination.js';
|
|
66
73
|
import '../pagination/Paginator.js';
|
|
67
74
|
import '../pagination/CompactInput.js';
|
|
@@ -74,6 +81,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
74
81
|
import '../radio-button/RadioButton.js';
|
|
75
82
|
import '../radio-button/RadioButtonGroup.js';
|
|
76
83
|
import '../scrim/Scrim.js';
|
|
84
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
77
85
|
import '../spinner/Spinner.js';
|
|
78
86
|
import '../stack-layout/StackLayout.js';
|
|
79
87
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import css_248z from './Toast.css.js';
|
|
89
96
|
|
|
90
97
|
const withBaseName = makePrefixer("saltToast");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status = \"info\", ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["Toast","toastCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status = \"info\", ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["Toast","toastCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAC1D,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,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -22,7 +22,6 @@ import '../border-item/BorderItem.js';
|
|
|
22
22
|
import '../border-layout/BorderLayout.js';
|
|
23
23
|
import '../button/Button.js';
|
|
24
24
|
import '../card/Card.js';
|
|
25
|
-
import '../card/InteractableCard.js';
|
|
26
25
|
import '../checkbox/Checkbox.js';
|
|
27
26
|
import '../checkbox/CheckboxGroup.js';
|
|
28
27
|
import '@salt-ds/icons';
|
|
@@ -55,6 +54,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../grid-item/GridItem.js';
|
|
56
55
|
import '../grid-layout/GridLayout.js';
|
|
57
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../link/Link.js';
|
|
59
61
|
import '../link-card/LinkCard.js';
|
|
60
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../option/Option.js';
|
|
64
66
|
import '../option/OptionGroup.js';
|
|
67
|
+
import '../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../overlay/OverlayPanel.js';
|
|
70
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../pagination/Pagination.js';
|
|
66
73
|
import '../pagination/Paginator.js';
|
|
67
74
|
import '../pagination/CompactInput.js';
|
|
@@ -74,6 +81,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
74
81
|
import '../radio-button/RadioButton.js';
|
|
75
82
|
import '../radio-button/RadioButtonGroup.js';
|
|
76
83
|
import '../scrim/Scrim.js';
|
|
84
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
77
85
|
import '../spinner/Spinner.js';
|
|
78
86
|
import '../stack-layout/StackLayout.js';
|
|
79
87
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import css_248z from './ToastContent.css.js';
|
|
89
96
|
|
|
90
97
|
const withBaseName = makePrefixer("saltToastContent");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AASvC,MAAA,YAAA,GAAe,WAAW,SAASA,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;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,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -26,7 +26,6 @@ import '../border-item/BorderItem.js';
|
|
|
26
26
|
import '../border-layout/BorderLayout.js';
|
|
27
27
|
import '../button/Button.js';
|
|
28
28
|
import '../card/Card.js';
|
|
29
|
-
import '../card/InteractableCard.js';
|
|
30
29
|
import '../checkbox/Checkbox.js';
|
|
31
30
|
import '../checkbox/CheckboxGroup.js';
|
|
32
31
|
import '@salt-ds/icons';
|
|
@@ -59,6 +58,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
59
58
|
import '../grid-item/GridItem.js';
|
|
60
59
|
import '../grid-layout/GridLayout.js';
|
|
61
60
|
import '../input/Input.js';
|
|
61
|
+
import '../interactable-card/InteractableCard.js';
|
|
62
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
63
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
62
64
|
import '../link/Link.js';
|
|
63
65
|
import '../link-card/LinkCard.js';
|
|
64
66
|
import '../list-control/ListControlContext.js';
|
|
@@ -66,6 +68,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
66
68
|
import '../navigation-item/NavigationItem.js';
|
|
67
69
|
import '../option/Option.js';
|
|
68
70
|
import '../option/OptionGroup.js';
|
|
71
|
+
import '../overlay/OverlayContext.js';
|
|
72
|
+
import '@floating-ui/react';
|
|
73
|
+
import '../overlay/OverlayPanel.js';
|
|
74
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
75
|
+
import '../overlay/OverlayPanelContent.js';
|
|
69
76
|
import '../pagination/Pagination.js';
|
|
70
77
|
import '../pagination/Paginator.js';
|
|
71
78
|
import '../pagination/CompactInput.js';
|
|
@@ -78,6 +85,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
78
85
|
import '../radio-button/RadioButton.js';
|
|
79
86
|
import '../radio-button/RadioButtonGroup.js';
|
|
80
87
|
import '../scrim/Scrim.js';
|
|
88
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
81
89
|
import '../spinner/Spinner.js';
|
|
82
90
|
import '../stack-layout/StackLayout.js';
|
|
83
91
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -86,7 +94,6 @@ import '../toast/ToastContent.js';
|
|
|
86
94
|
import '../split-layout/SplitLayout.js';
|
|
87
95
|
import '../switch/Switch.js';
|
|
88
96
|
import '../tooltip/Tooltip.js';
|
|
89
|
-
import '@floating-ui/react';
|
|
90
97
|
import css_248z from './ToggleButton.css.js';
|
|
91
98
|
|
|
92
99
|
const withBaseName = makePrefixer("saltToggleButton");
|
|
@@ -143,6 +150,7 @@ const ToggleButton = forwardRef(
|
|
|
143
150
|
onFocus: handleFocus,
|
|
144
151
|
tabIndex: focusable && !disabled ? 0 : -1,
|
|
145
152
|
value,
|
|
153
|
+
type: "button",
|
|
146
154
|
...rest,
|
|
147
155
|
children
|
|
148
156
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n role={toggleButtonGroup ? \"radio\" : undefined}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n {...rest}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n role={toggleButtonGroup ? \"radio\" : undefined}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n type=\"button\"\n {...rest}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
|
|
@@ -24,7 +24,6 @@ import '../border-item/BorderItem.js';
|
|
|
24
24
|
import '../border-layout/BorderLayout.js';
|
|
25
25
|
import '../button/Button.js';
|
|
26
26
|
import '../card/Card.js';
|
|
27
|
-
import '../card/InteractableCard.js';
|
|
28
27
|
import '../checkbox/Checkbox.js';
|
|
29
28
|
import '../checkbox/CheckboxGroup.js';
|
|
30
29
|
import '@salt-ds/icons';
|
|
@@ -57,6 +56,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
57
56
|
import '../grid-item/GridItem.js';
|
|
58
57
|
import '../grid-layout/GridLayout.js';
|
|
59
58
|
import '../input/Input.js';
|
|
59
|
+
import '../interactable-card/InteractableCard.js';
|
|
60
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
61
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
60
62
|
import '../link/Link.js';
|
|
61
63
|
import '../link-card/LinkCard.js';
|
|
62
64
|
import '../list-control/ListControlContext.js';
|
|
@@ -64,6 +66,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
66
|
import '../navigation-item/NavigationItem.js';
|
|
65
67
|
import '../option/Option.js';
|
|
66
68
|
import '../option/OptionGroup.js';
|
|
69
|
+
import '../overlay/OverlayContext.js';
|
|
70
|
+
import '@floating-ui/react';
|
|
71
|
+
import '../overlay/OverlayPanel.js';
|
|
72
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
73
|
+
import '../overlay/OverlayPanelContent.js';
|
|
67
74
|
import '../pagination/Pagination.js';
|
|
68
75
|
import '../pagination/Paginator.js';
|
|
69
76
|
import '../pagination/CompactInput.js';
|
|
@@ -76,6 +83,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
76
83
|
import '../radio-button/RadioButton.js';
|
|
77
84
|
import '../radio-button/RadioButtonGroup.js';
|
|
78
85
|
import '../scrim/Scrim.js';
|
|
86
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
79
87
|
import '../spinner/Spinner.js';
|
|
80
88
|
import '../stack-layout/StackLayout.js';
|
|
81
89
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -86,7 +94,6 @@ import '../switch/Switch.js';
|
|
|
86
94
|
import '../toggle-button/ToggleButton.js';
|
|
87
95
|
import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
|
|
88
96
|
import '../tooltip/Tooltip.js';
|
|
89
|
-
import '@floating-ui/react';
|
|
90
97
|
import css_248z from './ToggleButtonGroup.css.js';
|
|
91
98
|
|
|
92
99
|
const withBaseName = makePrefixer("saltToggleButtonGroup");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: Value) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: Value) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
|
|
@@ -20,7 +20,6 @@ import '../border-item/BorderItem.js';
|
|
|
20
20
|
import '../border-layout/BorderLayout.js';
|
|
21
21
|
import '../button/Button.js';
|
|
22
22
|
import '../card/Card.js';
|
|
23
|
-
import '../card/InteractableCard.js';
|
|
24
23
|
import '../checkbox/Checkbox.js';
|
|
25
24
|
import '../checkbox/CheckboxGroup.js';
|
|
26
25
|
import '@salt-ds/styles';
|
|
@@ -55,6 +54,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
55
54
|
import '../grid-item/GridItem.js';
|
|
56
55
|
import '../grid-layout/GridLayout.js';
|
|
57
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../link/Link.js';
|
|
59
61
|
import '../link-card/LinkCard.js';
|
|
60
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../option/Option.js';
|
|
64
66
|
import '../option/OptionGroup.js';
|
|
67
|
+
import '../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../overlay/OverlayPanel.js';
|
|
70
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../pagination/Pagination.js';
|
|
66
73
|
import '../pagination/Paginator.js';
|
|
67
74
|
import '../pagination/CompactInput.js';
|
|
@@ -74,6 +81,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
74
81
|
import '../radio-button/RadioButton.js';
|
|
75
82
|
import '../radio-button/RadioButtonGroup.js';
|
|
76
83
|
import '../scrim/Scrim.js';
|
|
84
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
77
85
|
import '../spinner/Spinner.js';
|
|
78
86
|
import '../stack-layout/StackLayout.js';
|
|
79
87
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../switch/Switch.js';
|
|
|
84
92
|
import '../toggle-button/ToggleButton.js';
|
|
85
93
|
import './ToggleButtonGroup.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
|
|
89
96
|
const ToggleButtonGroupContext = createContext("ToggleButtonGroupContext", void 0);
|
|
90
97
|
function useToggleButtonGroup() {
|