@salt-ds/core 1.21.0 → 1.23.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 +158 -94
- package/dist-cjs/accordion/Accordion.js +14 -9
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +14 -9
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +14 -9
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +13 -8
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +14 -9
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +14 -9
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +14 -9
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +14 -9
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +14 -9
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +14 -9
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +14 -9
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +14 -9
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +14 -9
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +14 -9
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/button/Button.js +14 -9
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +14 -9
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +14 -9
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +14 -9
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +14 -9
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +14 -9
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +14 -9
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +14 -9
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +16 -11
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +14 -9
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +17 -10
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +14 -9
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.js +60 -52
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +16 -11
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +14 -9
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +14 -9
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +14 -9
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +14 -9
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +14 -9
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +14 -9
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +14 -9
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +8 -3
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +9 -4
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +14 -9
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +14 -9
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +14 -9
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +13 -4
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +14 -9
- 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 +197 -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 +228 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +103 -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 +14 -9
- 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 +14 -9
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +14 -9
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +14 -9
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +14 -9
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +14 -9
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.js +14 -9
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js +14 -9
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +14 -9
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +14 -9
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js +14 -9
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +9 -4
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +8 -3
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +14 -9
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +14 -9
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +14 -9
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +14 -9
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +14 -9
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/pill/Pill.js +14 -9
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +14 -9
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +14 -9
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +14 -9
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +14 -9
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +14 -9
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +14 -9
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +14 -9
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +14 -9
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +14 -9
- 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/{card/InteractableCard.js → segmented-button-group/SegmentedButtonGroup.js} +26 -53
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-cjs/spinner/Spinner.js +14 -9
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +14 -9
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +14 -9
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +14 -9
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +14 -9
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +13 -8
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +15 -9
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Code.js +21 -0
- package/dist-cjs/text/Code.js.map +1 -0
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +13 -8
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +13 -8
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +14 -9
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +14 -9
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +14 -9
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +14 -9
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +13 -8
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +13 -8
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +14 -9
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +14 -9
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +14 -9
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +14 -9
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +14 -9
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +14 -9
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +14 -9
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +13 -8
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +14 -9
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +14 -9
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +14 -9
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +14 -9
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +14 -9
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +14 -9
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +14 -9
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +14 -9
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +14 -9
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +14 -9
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/button/Button.js +14 -9
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +14 -9
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +14 -9
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +14 -9
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +14 -9
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +14 -9
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +14 -9
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +14 -9
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +16 -11
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +14 -9
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +17 -10
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +14 -9
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.css.js +1 -1
- package/dist-es/dialog/DialogHeader.js +60 -52
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +16 -11
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +14 -9
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +14 -9
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +14 -9
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +14 -9
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +14 -9
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +14 -9
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +14 -9
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +8 -3
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +9 -4
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +14 -9
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +14 -9
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +14 -9
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +6 -2
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +14 -9
- 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 +193 -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 +224 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js +98 -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 +14 -9
- 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 +14 -9
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +14 -9
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +14 -9
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +14 -9
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +14 -9
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.js +14 -9
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js +14 -9
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +14 -9
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +14 -9
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/pagination/CompactInput.js +14 -9
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +9 -4
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +8 -3
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +14 -9
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +14 -9
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +14 -9
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +14 -9
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +14 -9
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/pill/Pill.js +14 -9
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +14 -9
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +14 -9
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +14 -9
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +14 -9
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +14 -9
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +14 -9
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +14 -9
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +14 -9
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +14 -9
- 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} +25 -52
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-es/spinner/Spinner.js +14 -9
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +14 -9
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +14 -9
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +14 -9
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +14 -9
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +13 -8
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +15 -9
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Code.js +17 -0
- package/dist-es/text/Code.js.map +1 -0
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +13 -8
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +13 -8
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +14 -9
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +14 -9
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +14 -9
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +14 -9
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +13 -8
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +13 -8
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +14 -9
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +14 -9
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +14 -9
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +14 -9
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/card/index.d.ts +0 -1
- package/dist-types/dialog/DialogHeader.d.ts +1 -1
- package/dist-types/index.d.ts +2 -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/segmented-button-group/SegmentedButtonGroup.d.ts +4 -0
- package/dist-types/segmented-button-group/index.d.ts +1 -0
- package/dist-types/text/Code.d.ts +2 -0
- package/dist-types/text/Text.d.ts +1 -1
- package/dist-types/text/index.d.ts +2 -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
package/dist-es/scrim/Scrim.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';
|
|
@@ -28,16 +27,10 @@ import { useWindow } from '@salt-ds/window';
|
|
|
28
27
|
import '@salt-ds/icons';
|
|
29
28
|
import '../combo-box/ComboBox.js';
|
|
30
29
|
import '../dialog/Dialog.js';
|
|
31
|
-
import '../
|
|
32
|
-
import '../text/Text.js';
|
|
33
|
-
import '../text/Display.js';
|
|
34
|
-
import '../text/Headings.js';
|
|
35
|
-
import '../text/Label.js';
|
|
36
|
-
import '../text/TextNotation.js';
|
|
37
|
-
import '../text/TextAction.js';
|
|
38
|
-
import '../dialog/DialogContext.js';
|
|
30
|
+
import '../dialog/DialogHeader.js';
|
|
39
31
|
import '../dialog/DialogActions.js';
|
|
40
32
|
import '../dialog/DialogContent.js';
|
|
33
|
+
import '../dialog/DialogContext.js';
|
|
41
34
|
import '../dialog/DialogCloseButton.js';
|
|
42
35
|
import '../drawer/Drawer.js';
|
|
43
36
|
import '../drawer/DrawerCloseButton.js';
|
|
@@ -49,10 +42,21 @@ import '../flex-item/FlexItem.js';
|
|
|
49
42
|
import '../flex-layout/FlexLayout.js';
|
|
50
43
|
import '../flow-layout/FlowLayout.js';
|
|
51
44
|
import '../form-field/FormField.js';
|
|
45
|
+
import '../status-indicator/StatusIndicator.js';
|
|
46
|
+
import '../text/Text.js';
|
|
47
|
+
import '../text/Code.js';
|
|
48
|
+
import '../text/Display.js';
|
|
49
|
+
import '../text/Headings.js';
|
|
50
|
+
import '../text/Label.js';
|
|
51
|
+
import '../text/TextAction.js';
|
|
52
|
+
import '../text/TextNotation.js';
|
|
52
53
|
import '../form-field-context/FormFieldContext.js';
|
|
53
54
|
import '../grid-item/GridItem.js';
|
|
54
55
|
import '../grid-layout/GridLayout.js';
|
|
55
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
56
60
|
import '../link/Link.js';
|
|
57
61
|
import '../link-card/LinkCard.js';
|
|
58
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -71,6 +75,7 @@ import '../progress/CircularProgress/CircularProgress.js';
|
|
|
71
75
|
import '../progress/LinearProgress/LinearProgress.js';
|
|
72
76
|
import '../radio-button/RadioButton.js';
|
|
73
77
|
import '../radio-button/RadioButtonGroup.js';
|
|
78
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
74
79
|
import '../spinner/Spinner.js';
|
|
75
80
|
import '../stack-layout/StackLayout.js';
|
|
76
81
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true` the scrim is bound to the document viewport.\n * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n */\n fixed?: boolean;\n /**\n * If `true` the scrim is shown.\n */\n open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n { className, children, fixed = false, open = true, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-scrim\",\n css: scrimCss,\n window: targetWindow,\n });\n\n if (!open) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fixed\")]: fixed,\n },\n className\n )}\n data-testid=\"scrim\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Scrim","scrimCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true` the scrim is bound to the document viewport.\n * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n */\n fixed?: boolean;\n /**\n * If `true` the scrim is shown.\n */\n open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n { className, children, fixed = false, open = true, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-scrim\",\n css: scrimCss,\n window: targetWindow,\n });\n\n if (!open) {\n return null;\n }\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fixed\")]: fixed,\n },\n className\n )}\n data-testid=\"scrim\"\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Scrim","scrimCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AActC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,GAAQ,KAAO,EAAA,IAAA,GAAO,IAAS,EAAA,GAAA,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,OAC3B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,OAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var css_248z = ".saltSegmentedButtonGroup {\n display: flex;\n flex-direction: row;\n background: var(--button-background);\n gap: var(--salt-size-border);\n}\n\n.saltSegmentedButtonGroup > *:not(:last-child)::after {\n content: \"\";\n width: var(--salt-size-border);\n position: absolute;\n background: var(--button-background);\n right: calc(var(--salt-size-border) * -1);\n height: 100%;\n}\n\n.saltSegmentedButtonGroup > *:not(:first-child)::before {\n content: \"\";\n width: var(--salt-size-border);\n position: absolute;\n background: var(--salt-separable-primary-borderColor);\n left: calc(var(--salt-size-border) * -1);\n height: 100%;\n}\n";
|
|
2
|
+
|
|
3
|
+
export { css_248z as default };
|
|
4
|
+
//# sourceMappingURL=SegmentedButtonGroup.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedButtonGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
2
|
import { forwardRef } from 'react';
|
|
4
|
-
import {
|
|
5
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
|
-
import { capitalize } from '../utils/capitalize.js';
|
|
3
|
+
import { clsx } from 'clsx';
|
|
7
4
|
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
8
5
|
import '../utils/useFloatingUI/useFloatingUI.js';
|
|
9
6
|
import '../utils/useId.js';
|
|
@@ -22,22 +19,18 @@ import '../banner/BannerContent.js';
|
|
|
22
19
|
import '../border-item/BorderItem.js';
|
|
23
20
|
import '../border-layout/BorderLayout.js';
|
|
24
21
|
import '../button/Button.js';
|
|
25
|
-
import '
|
|
22
|
+
import '../card/Card.js';
|
|
26
23
|
import '../checkbox/Checkbox.js';
|
|
27
24
|
import '../checkbox/CheckboxGroup.js';
|
|
25
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
26
|
+
import { useWindow } from '@salt-ds/window';
|
|
28
27
|
import '@salt-ds/icons';
|
|
29
28
|
import '../combo-box/ComboBox.js';
|
|
30
29
|
import '../dialog/Dialog.js';
|
|
31
|
-
import '../
|
|
32
|
-
import '../text/Text.js';
|
|
33
|
-
import '../text/Display.js';
|
|
34
|
-
import '../text/Headings.js';
|
|
35
|
-
import '../text/Label.js';
|
|
36
|
-
import '../text/TextNotation.js';
|
|
37
|
-
import '../text/TextAction.js';
|
|
38
|
-
import '../dialog/DialogContext.js';
|
|
30
|
+
import '../dialog/DialogHeader.js';
|
|
39
31
|
import '../dialog/DialogActions.js';
|
|
40
32
|
import '../dialog/DialogContent.js';
|
|
33
|
+
import '../dialog/DialogContext.js';
|
|
41
34
|
import '../dialog/DialogCloseButton.js';
|
|
42
35
|
import '../drawer/Drawer.js';
|
|
43
36
|
import '../drawer/DrawerCloseButton.js';
|
|
@@ -49,10 +42,21 @@ import '../flex-item/FlexItem.js';
|
|
|
49
42
|
import '../flex-layout/FlexLayout.js';
|
|
50
43
|
import '../flow-layout/FlowLayout.js';
|
|
51
44
|
import '../form-field/FormField.js';
|
|
45
|
+
import '../status-indicator/StatusIndicator.js';
|
|
46
|
+
import '../text/Text.js';
|
|
47
|
+
import '../text/Code.js';
|
|
48
|
+
import '../text/Display.js';
|
|
49
|
+
import '../text/Headings.js';
|
|
50
|
+
import '../text/Label.js';
|
|
51
|
+
import '../text/TextAction.js';
|
|
52
|
+
import '../text/TextNotation.js';
|
|
52
53
|
import '../form-field-context/FormFieldContext.js';
|
|
53
54
|
import '../grid-item/GridItem.js';
|
|
54
55
|
import '../grid-layout/GridLayout.js';
|
|
55
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
56
60
|
import '../link/Link.js';
|
|
57
61
|
import '../link-card/LinkCard.js';
|
|
58
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -84,54 +88,23 @@ import '../toggle-button-group/ToggleButtonGroup.js';
|
|
|
84
88
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
85
89
|
import '../tooltip/Tooltip.js';
|
|
86
90
|
import '@floating-ui/react';
|
|
87
|
-
import
|
|
88
|
-
import css_248z from './InteractableCard.css.js';
|
|
91
|
+
import css_248z from './SegmentedButtonGroup.css.js';
|
|
89
92
|
|
|
90
|
-
const withBaseName = makePrefixer("
|
|
91
|
-
const
|
|
92
|
-
const {
|
|
93
|
-
accentPlacement = "bottom",
|
|
94
|
-
children,
|
|
95
|
-
className,
|
|
96
|
-
variant = "primary",
|
|
97
|
-
disabled,
|
|
98
|
-
onBlur,
|
|
99
|
-
onClick,
|
|
100
|
-
onKeyUp,
|
|
101
|
-
onKeyDown,
|
|
102
|
-
...rest
|
|
103
|
-
} = props;
|
|
93
|
+
const withBaseName = makePrefixer("saltSegmentedButtonGroup");
|
|
94
|
+
const SegmentedButtonGroup = forwardRef(function SegmentedButtonGroup2({ className, children, ...rest }, ref) {
|
|
104
95
|
const targetWindow = useWindow();
|
|
105
96
|
useComponentCssInjection({
|
|
106
|
-
testId: "salt-
|
|
97
|
+
testId: "salt-segmented-button-group",
|
|
107
98
|
css: css_248z,
|
|
108
99
|
window: targetWindow
|
|
109
100
|
});
|
|
110
|
-
const { active, cardProps } = useInteractableCard({
|
|
111
|
-
disabled,
|
|
112
|
-
onKeyUp,
|
|
113
|
-
onKeyDown,
|
|
114
|
-
onBlur,
|
|
115
|
-
onClick
|
|
116
|
-
});
|
|
117
|
-
const { tabIndex, ...restCardProps } = cardProps;
|
|
118
101
|
return /* @__PURE__ */ jsx("div", {
|
|
119
|
-
|
|
120
|
-
className: clsx(
|
|
121
|
-
withBaseName(),
|
|
122
|
-
withBaseName(variant),
|
|
123
|
-
withBaseName(`accent${capitalize(accentPlacement)}`),
|
|
124
|
-
{
|
|
125
|
-
[withBaseName("disabled")]: disabled,
|
|
126
|
-
[withBaseName("active")]: active
|
|
127
|
-
},
|
|
128
|
-
className
|
|
129
|
-
),
|
|
130
|
-
...rest,
|
|
102
|
+
className: clsx(withBaseName(), className),
|
|
131
103
|
ref,
|
|
104
|
+
...rest,
|
|
132
105
|
children
|
|
133
106
|
});
|
|
134
107
|
});
|
|
135
108
|
|
|
136
|
-
export {
|
|
137
|
-
//# sourceMappingURL=
|
|
109
|
+
export { SegmentedButtonGroup };
|
|
110
|
+
//# sourceMappingURL=SegmentedButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SegmentedButtonGroup.js","sources":["../src/segmented-button-group/SegmentedButtonGroup.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport segmentedButtonGroupCss from \"./SegmentedButtonGroup.css\";\n\nexport interface SegmentedButtonGroupProps\n extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltSegmentedButtonGroup\");\n\nexport const SegmentedButtonGroup = forwardRef<\n HTMLDivElement,\n SegmentedButtonGroupProps\n>(function SegmentedButtonGroup({ className, children, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-segmented-button-group\",\n css: segmentedButtonGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n </div>\n );\n});\n"],"names":["SegmentedButtonGroup","segmentedButtonGroupCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAE/C,MAAA,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CAAqB,EAAE,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EAAG,GAAK,EAAA;AACrE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC5D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -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';
|
|
@@ -29,16 +28,10 @@ import { useWindow } from '@salt-ds/window';
|
|
|
29
28
|
import '@salt-ds/icons';
|
|
30
29
|
import '../combo-box/ComboBox.js';
|
|
31
30
|
import '../dialog/Dialog.js';
|
|
32
|
-
import '../
|
|
33
|
-
import '../text/Text.js';
|
|
34
|
-
import '../text/Display.js';
|
|
35
|
-
import '../text/Headings.js';
|
|
36
|
-
import '../text/Label.js';
|
|
37
|
-
import '../text/TextNotation.js';
|
|
38
|
-
import '../text/TextAction.js';
|
|
39
|
-
import '../dialog/DialogContext.js';
|
|
31
|
+
import '../dialog/DialogHeader.js';
|
|
40
32
|
import '../dialog/DialogActions.js';
|
|
41
33
|
import '../dialog/DialogContent.js';
|
|
34
|
+
import '../dialog/DialogContext.js';
|
|
42
35
|
import '../dialog/DialogCloseButton.js';
|
|
43
36
|
import '../drawer/Drawer.js';
|
|
44
37
|
import '../drawer/DrawerCloseButton.js';
|
|
@@ -50,10 +43,21 @@ import '../flex-item/FlexItem.js';
|
|
|
50
43
|
import '../flex-layout/FlexLayout.js';
|
|
51
44
|
import '../flow-layout/FlowLayout.js';
|
|
52
45
|
import '../form-field/FormField.js';
|
|
46
|
+
import '../status-indicator/StatusIndicator.js';
|
|
47
|
+
import '../text/Text.js';
|
|
48
|
+
import '../text/Code.js';
|
|
49
|
+
import '../text/Display.js';
|
|
50
|
+
import '../text/Headings.js';
|
|
51
|
+
import '../text/Label.js';
|
|
52
|
+
import '../text/TextAction.js';
|
|
53
|
+
import '../text/TextNotation.js';
|
|
53
54
|
import '../form-field-context/FormFieldContext.js';
|
|
54
55
|
import '../grid-item/GridItem.js';
|
|
55
56
|
import '../grid-layout/GridLayout.js';
|
|
56
57
|
import '../input/Input.js';
|
|
58
|
+
import '../interactable-card/InteractableCard.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
60
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
61
|
import '../link/Link.js';
|
|
58
62
|
import '../link-card/LinkCard.js';
|
|
59
63
|
import '../list-control/ListControlContext.js';
|
|
@@ -73,6 +77,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
77
|
import '../radio-button/RadioButton.js';
|
|
74
78
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
79
|
import '../scrim/Scrim.js';
|
|
80
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
81
|
import '../stack-layout/StackLayout.js';
|
|
77
82
|
import '../status-adornment/StatusAdornment.js';
|
|
78
83
|
import '../toast/Toast.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport spinnerCss from \"./Spinner.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDensity } from \"../salt-provider\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n \"default\",\n \"large\",\n \"small\",\n \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n */\n announcerInterval?: number;\n /**\n * * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n */\n announcerTimeout?: number;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n */\n completionAnnouncement?: string | null;\n /**\n * If true, built in aria announcer will be inactive\n */\n disableAnnouncer?: boolean;\n /**\n * The prop for the role attribute of the component\n */\n role?: string;\n /**\n * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n */\n size?: SpinnerSize;\n /**\n * The ids of the SvgSpinner components\n */\n id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n \"aria-label\": ariaLabel = \"loading\",\n announcerInterval = 5000,\n announcerTimeout = 20000,\n completionAnnouncement = `finished ${ariaLabel}`,\n disableAnnouncer,\n role = \"img\",\n className,\n size = \"medium\",\n id: idProp,\n ...rest\n },\n ref\n ) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-spinner\",\n css: spinnerCss,\n window: targetWindow,\n });\n\n const { announce } = useAriaAnnouncer();\n\n const density = useDensity();\n size = handleSize(size);\n\n useEffect(() => {\n if (disableAnnouncer) return;\n\n announce(ariaLabel);\n\n const startTime = new Date().getTime();\n\n const interval =\n announcerInterval > 0 &&\n setInterval(() => {\n if (new Date().getTime() - startTime > announcerTimeout) {\n // The announcer will stop after `announcerTimeout` time\n announce(\n `${ariaLabel} is still in progress, but will no longer announce.`\n );\n interval && clearInterval(interval);\n return;\n }\n announce(ariaLabel);\n }, announcerInterval);\n\n return () => {\n if (disableAnnouncer) return;\n\n interval && clearInterval(interval);\n if (completionAnnouncement) {\n announce(completionAnnouncement);\n }\n };\n }, [\n announce,\n announcerInterval,\n announcerTimeout,\n ariaLabel,\n completionAnnouncement,\n disableAnnouncer,\n ]);\n\n return (\n <div\n aria-label={ariaLabel}\n className={clsx(withBaseName(), withBaseName(size), className)}\n ref={ref}\n role={role}\n {...rest}\n >\n <SpinnerSVG size={size} density={density} id={id} />\n </div>\n );\n }\n);\n"],"names":["Spinner","spinnerCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport spinnerCss from \"./Spinner.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDensity } from \"../salt-provider\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n \"default\",\n \"large\",\n \"small\",\n \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n */\n announcerInterval?: number;\n /**\n * * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n */\n announcerTimeout?: number;\n /**\n * The className(s) of the component\n */\n className?: string;\n /**\n * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n */\n completionAnnouncement?: string | null;\n /**\n * If true, built in aria announcer will be inactive\n */\n disableAnnouncer?: boolean;\n /**\n * The prop for the role attribute of the component\n */\n role?: string;\n /**\n * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n */\n size?: SpinnerSize;\n /**\n * The ids of the SvgSpinner components\n */\n id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n {\n \"aria-label\": ariaLabel = \"loading\",\n announcerInterval = 5000,\n announcerTimeout = 20000,\n completionAnnouncement = `finished ${ariaLabel}`,\n disableAnnouncer,\n role = \"img\",\n className,\n size = \"medium\",\n id: idProp,\n ...rest\n },\n ref\n ) {\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-spinner\",\n css: spinnerCss,\n window: targetWindow,\n });\n\n const { announce } = useAriaAnnouncer();\n\n const density = useDensity();\n size = handleSize(size);\n\n useEffect(() => {\n if (disableAnnouncer) return;\n\n announce(ariaLabel);\n\n const startTime = new Date().getTime();\n\n const interval =\n announcerInterval > 0 &&\n setInterval(() => {\n if (new Date().getTime() - startTime > announcerTimeout) {\n // The announcer will stop after `announcerTimeout` time\n announce(\n `${ariaLabel} is still in progress, but will no longer announce.`\n );\n interval && clearInterval(interval);\n return;\n }\n announce(ariaLabel);\n }, announcerInterval);\n\n return () => {\n if (disableAnnouncer) return;\n\n interval && clearInterval(interval);\n if (completionAnnouncement) {\n announce(completionAnnouncement);\n }\n };\n }, [\n announce,\n announcerInterval,\n announcerTimeout,\n ariaLabel,\n completionAnnouncement,\n disableAnnouncer,\n ]);\n\n return (\n <div\n aria-label={ariaLabel}\n className={clsx(withBaseName(), withBaseName(size), className)}\n ref={ref}\n role={role}\n {...rest}\n >\n <SpinnerSVG size={size} density={density} id={id} />\n </div>\n );\n }\n);\n"],"names":["Spinner","spinnerCss"],"mappings":"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"}
|
|
@@ -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';
|
|
@@ -28,16 +27,10 @@ import '@salt-ds/window';
|
|
|
28
27
|
import '@salt-ds/icons';
|
|
29
28
|
import '../../combo-box/ComboBox.js';
|
|
30
29
|
import '../../dialog/Dialog.js';
|
|
31
|
-
import '../../
|
|
32
|
-
import '../../text/Text.js';
|
|
33
|
-
import '../../text/Display.js';
|
|
34
|
-
import '../../text/Headings.js';
|
|
35
|
-
import '../../text/Label.js';
|
|
36
|
-
import '../../text/TextNotation.js';
|
|
37
|
-
import '../../text/TextAction.js';
|
|
38
|
-
import '../../dialog/DialogContext.js';
|
|
30
|
+
import '../../dialog/DialogHeader.js';
|
|
39
31
|
import '../../dialog/DialogActions.js';
|
|
40
32
|
import '../../dialog/DialogContent.js';
|
|
33
|
+
import '../../dialog/DialogContext.js';
|
|
41
34
|
import '../../dialog/DialogCloseButton.js';
|
|
42
35
|
import '../../drawer/Drawer.js';
|
|
43
36
|
import '../../drawer/DrawerCloseButton.js';
|
|
@@ -49,10 +42,21 @@ import '../../flex-item/FlexItem.js';
|
|
|
49
42
|
import '../../flex-layout/FlexLayout.js';
|
|
50
43
|
import '../../flow-layout/FlowLayout.js';
|
|
51
44
|
import '../../form-field/FormField.js';
|
|
45
|
+
import '../../status-indicator/StatusIndicator.js';
|
|
46
|
+
import '../../text/Text.js';
|
|
47
|
+
import '../../text/Code.js';
|
|
48
|
+
import '../../text/Display.js';
|
|
49
|
+
import '../../text/Headings.js';
|
|
50
|
+
import '../../text/Label.js';
|
|
51
|
+
import '../../text/TextAction.js';
|
|
52
|
+
import '../../text/TextNotation.js';
|
|
52
53
|
import '../../form-field-context/FormFieldContext.js';
|
|
53
54
|
import '../../grid-item/GridItem.js';
|
|
54
55
|
import '../../grid-layout/GridLayout.js';
|
|
55
56
|
import '../../input/Input.js';
|
|
57
|
+
import '../../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../../interactable-card/InteractableCardGroupContext.js';
|
|
56
60
|
import '../../link/Link.js';
|
|
57
61
|
import '../../link-card/LinkCard.js';
|
|
58
62
|
import '../../list-control/ListControlContext.js';
|
|
@@ -72,6 +76,7 @@ import '../../progress/LinearProgress/LinearProgress.js';
|
|
|
72
76
|
import '../../radio-button/RadioButton.js';
|
|
73
77
|
import '../../radio-button/RadioButtonGroup.js';
|
|
74
78
|
import '../../scrim/Scrim.js';
|
|
79
|
+
import '../../segmented-button-group/SegmentedButtonGroup.js';
|
|
75
80
|
import '../Spinner.js';
|
|
76
81
|
import '../../stack-layout/StackLayout.js';
|
|
77
82
|
import '../../status-adornment/StatusAdornment.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\nimport { SpinnerSVGSize } from \"../Spinner\";\nimport { Density } from \"../../theme\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ninterface SpinnerProps {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n size: SpinnerSVGSize;\n density: Density;\n}\n\nconst sizeAndStrokeWidthMapping = {\n small: {\n high: { width: 12, strokeWidth: 2 },\n medium: { width: 12, strokeWidth: 2 },\n low: { width: 14, strokeWidth: 2 },\n touch: { width: 16, strokeWidth: 2 },\n },\n medium: {\n high: { width: 20, strokeWidth: 2 },\n medium: { width: 28, strokeWidth: 4 },\n low: { width: 36, strokeWidth: 6 },\n touch: { width: 44, strokeWidth: 8 },\n },\n large: {\n high: { width: 40, strokeWidth: 2 },\n medium: { width: 56, strokeWidth: 4 },\n low: { width: 72, strokeWidth: 6 },\n touch: { width: 88, strokeWidth: 8 },\n },\n};\n\nexport const SpinnerSVG = ({\n id = \"svg-spinner\",\n rest,\n size,\n density,\n}: SpinnerProps) => {\n const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];\n const radius = (width - strokeWidth) / 2;\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox={`0 0 ${width} ${width}`}\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"15%\"\n stopOpacity=\"1\"\n />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\">\n {/* \n This first path draws the top half of the circle without a gradient. \n It starts from the right end, moves in a circular arc, and ends at the left end.\n */}\n <path\n d={`M${width - strokeWidth / 2},${\n width / 2\n } a${radius},${radius} 0 1,0 -${width - strokeWidth},0`}\n stroke=\"var(--saltSpinner-gradient-color, var(--salt-accent-background)\"\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n {/* \n This second path draws the left half of the circle with a gradient that transitions \n from opaque on the left to transparent on the right.\n It starts from the top-center, moves in a circular arc, and ends at the bottom-center.\n */}\n <path\n d={`M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${\n width - strokeWidth\n }`}\n stroke={`url(#${id}-1)`}\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n </g>\n </svg>\n );\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\nimport { SpinnerSVGSize } from \"../Spinner\";\nimport { Density } from \"../../theme\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ninterface SpinnerProps {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n size: SpinnerSVGSize;\n density: Density;\n}\n\nconst sizeAndStrokeWidthMapping = {\n small: {\n high: { width: 12, strokeWidth: 2 },\n medium: { width: 12, strokeWidth: 2 },\n low: { width: 14, strokeWidth: 2 },\n touch: { width: 16, strokeWidth: 2 },\n },\n medium: {\n high: { width: 20, strokeWidth: 2 },\n medium: { width: 28, strokeWidth: 4 },\n low: { width: 36, strokeWidth: 6 },\n touch: { width: 44, strokeWidth: 8 },\n },\n large: {\n high: { width: 40, strokeWidth: 2 },\n medium: { width: 56, strokeWidth: 4 },\n low: { width: 72, strokeWidth: 6 },\n touch: { width: 88, strokeWidth: 8 },\n },\n};\n\nexport const SpinnerSVG = ({\n id = \"svg-spinner\",\n rest,\n size,\n density,\n}: SpinnerProps) => {\n const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];\n const radius = (width - strokeWidth) / 2;\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox={`0 0 ${width} ${width}`}\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"15%\"\n stopOpacity=\"1\"\n />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\">\n {/* \n This first path draws the top half of the circle without a gradient. \n It starts from the right end, moves in a circular arc, and ends at the left end.\n */}\n <path\n d={`M${width - strokeWidth / 2},${\n width / 2\n } a${radius},${radius} 0 1,0 -${width - strokeWidth},0`}\n stroke=\"var(--saltSpinner-gradient-color, var(--salt-accent-background)\"\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n {/* \n This second path draws the left half of the circle with a gradient that transitions \n from opaque on the left to transparent on the right.\n It starts from the top-center, moves in a circular arc, and ends at the bottom-center.\n */}\n <path\n d={`M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${\n width - strokeWidth\n }`}\n stroke={`url(#${id}-1)`}\n strokeWidth=\"var(--spinner-strokeWidth)\"\n fill=\"none\"\n />\n </g>\n </svg>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -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';
|
|
@@ -29,16 +28,10 @@ import { useWindow } from '@salt-ds/window';
|
|
|
29
28
|
import '@salt-ds/icons';
|
|
30
29
|
import '../combo-box/ComboBox.js';
|
|
31
30
|
import '../dialog/Dialog.js';
|
|
32
|
-
import '../
|
|
33
|
-
import '../text/Text.js';
|
|
34
|
-
import '../text/Display.js';
|
|
35
|
-
import '../text/Headings.js';
|
|
36
|
-
import '../text/Label.js';
|
|
37
|
-
import '../text/TextNotation.js';
|
|
38
|
-
import '../text/TextAction.js';
|
|
39
|
-
import '../dialog/DialogContext.js';
|
|
31
|
+
import '../dialog/DialogHeader.js';
|
|
40
32
|
import '../dialog/DialogActions.js';
|
|
41
33
|
import '../dialog/DialogContent.js';
|
|
34
|
+
import '../dialog/DialogContext.js';
|
|
42
35
|
import '../dialog/DialogCloseButton.js';
|
|
43
36
|
import '../drawer/Drawer.js';
|
|
44
37
|
import '../drawer/DrawerCloseButton.js';
|
|
@@ -49,10 +42,21 @@ import '../file-drop-zone/FileDropZoneTrigger.js';
|
|
|
49
42
|
import '../flex-item/FlexItem.js';
|
|
50
43
|
import '../flow-layout/FlowLayout.js';
|
|
51
44
|
import '../form-field/FormField.js';
|
|
45
|
+
import '../status-indicator/StatusIndicator.js';
|
|
46
|
+
import '../text/Text.js';
|
|
47
|
+
import '../text/Code.js';
|
|
48
|
+
import '../text/Display.js';
|
|
49
|
+
import '../text/Headings.js';
|
|
50
|
+
import '../text/Label.js';
|
|
51
|
+
import '../text/TextAction.js';
|
|
52
|
+
import '../text/TextNotation.js';
|
|
52
53
|
import '../form-field-context/FormFieldContext.js';
|
|
53
54
|
import '../grid-item/GridItem.js';
|
|
54
55
|
import '../grid-layout/GridLayout.js';
|
|
55
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
56
60
|
import '../link/Link.js';
|
|
57
61
|
import '../link-card/LinkCard.js';
|
|
58
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -72,6 +76,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
72
76
|
import '../radio-button/RadioButton.js';
|
|
73
77
|
import '../radio-button/RadioButtonGroup.js';
|
|
74
78
|
import '../scrim/Scrim.js';
|
|
79
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
75
80
|
import '../spinner/Spinner.js';
|
|
76
81
|
import '../stack-layout/StackLayout.js';
|
|
77
82
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement, ReactNode } from \"react\";\nimport { FlexLayout, FlexLayoutProps } from \"../flex-layout\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: FlexLayoutProps<ElementType>[\"direction\"];\n /**\n * End component to be rendered.\n */\n endItem?: ReactNode;\n /**\n * Controls the space between left and right items.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Start component to be rendered.\n */\n startItem?: ReactNode;\n }\n >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n props: SplitLayoutProps<T>\n) => ReactElement | null;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n { endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-split-layout\",\n css: splitLayoutCss,\n window: targetWindow,\n });\n\n const justify = endItem && !startItem ? \"end\" : \"space-between\";\n return (\n <FlexLayout\n className={clsx(withBaseName(), className)}\n ref={ref}\n justify={justify}\n {...rest}\n >\n {startItem}\n {endItem}\n </FlexLayout>\n );\n }\n);\n"],"names":["splitLayoutCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement, ReactNode } from \"react\";\nimport { FlexLayout, FlexLayoutProps } from \"../flex-layout\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: FlexLayoutProps<ElementType>[\"direction\"];\n /**\n * End component to be rendered.\n */\n endItem?: ReactNode;\n /**\n * Controls the space between left and right items.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Start component to be rendered.\n */\n startItem?: ReactNode;\n }\n >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n props: SplitLayoutProps<T>\n) => ReactElement | null;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n { endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-split-layout\",\n css: splitLayoutCss,\n window: targetWindow,\n });\n\n const justify = endItem && !startItem ? \"end\" : \"space-between\";\n return (\n <FlexLayout\n className={clsx(withBaseName(), className)}\n ref={ref}\n justify={justify}\n {...rest}\n >\n {startItem}\n {endItem}\n </FlexLayout>\n );\n }\n);\n"],"names":["splitLayoutCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAiC5C,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,CACE,EAAE,OAAA,EAAS,WAAW,SAAc,EAAA,GAAA,IAAA,IACpC,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA,CAAA;AAChD,IAAA,uBACG,IAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,OAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QACA,OAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -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';
|
|
@@ -29,16 +28,10 @@ import '../salt-provider/SaltProvider.js';
|
|
|
29
28
|
import '@salt-ds/icons';
|
|
30
29
|
import '../combo-box/ComboBox.js';
|
|
31
30
|
import '../dialog/Dialog.js';
|
|
32
|
-
import '../
|
|
33
|
-
import '../text/Text.js';
|
|
34
|
-
import '../text/Display.js';
|
|
35
|
-
import '../text/Headings.js';
|
|
36
|
-
import '../text/Label.js';
|
|
37
|
-
import '../text/TextNotation.js';
|
|
38
|
-
import '../text/TextAction.js';
|
|
39
|
-
import '../dialog/DialogContext.js';
|
|
31
|
+
import '../dialog/DialogHeader.js';
|
|
40
32
|
import '../dialog/DialogActions.js';
|
|
41
33
|
import '../dialog/DialogContent.js';
|
|
34
|
+
import '../dialog/DialogContext.js';
|
|
42
35
|
import '../dialog/DialogCloseButton.js';
|
|
43
36
|
import '../drawer/Drawer.js';
|
|
44
37
|
import '../drawer/DrawerCloseButton.js';
|
|
@@ -49,10 +42,21 @@ import '../file-drop-zone/FileDropZoneTrigger.js';
|
|
|
49
42
|
import '../flex-item/FlexItem.js';
|
|
50
43
|
import '../flow-layout/FlowLayout.js';
|
|
51
44
|
import '../form-field/FormField.js';
|
|
45
|
+
import '../status-indicator/StatusIndicator.js';
|
|
46
|
+
import '../text/Text.js';
|
|
47
|
+
import '../text/Code.js';
|
|
48
|
+
import '../text/Display.js';
|
|
49
|
+
import '../text/Headings.js';
|
|
50
|
+
import '../text/Label.js';
|
|
51
|
+
import '../text/TextAction.js';
|
|
52
|
+
import '../text/TextNotation.js';
|
|
52
53
|
import '../form-field-context/FormFieldContext.js';
|
|
53
54
|
import '../grid-item/GridItem.js';
|
|
54
55
|
import '../grid-layout/GridLayout.js';
|
|
55
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
56
60
|
import '../link/Link.js';
|
|
57
61
|
import '../link-card/LinkCard.js';
|
|
58
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -72,6 +76,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
72
76
|
import '../radio-button/RadioButton.js';
|
|
73
77
|
import '../radio-button/RadioButtonGroup.js';
|
|
74
78
|
import '../scrim/Scrim.js';
|
|
79
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
75
80
|
import '../spinner/Spinner.js';
|
|
76
81
|
import '../status-adornment/StatusAdornment.js';
|
|
77
82
|
import '../toast/Toast.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n FlexLayout,\n FlexLayoutProps,\n LayoutDirection,\n LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n ResponsiveProp,\n useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport stackLayoutCss from \"./StackLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Adds a separator between elements, default is false.\n */\n separators?: LayoutSeparator | boolean;\n }\n >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n children,\n className,\n direction = \"column\",\n gap,\n separators,\n style,\n ...rest\n }: StackLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stack-layout\",\n css: stackLayoutCss,\n window: targetWindow,\n });\n\n const flexGap = useResponsiveProp(gap, 3);\n const separatorAlignment = separators === true ? \"center\" : separators;\n const flexDirection = useResponsiveProp(direction, \"column\");\n const stackLayoutStyles = {\n ...style,\n \"--stackLayout-gap-multiplier\": flexGap,\n };\n return (\n <FlexLayout\n className={clsx(\n withBaseName(),\n withBaseName(flexDirection),\n {\n [withBaseName(\"separator\")]: !!separatorAlignment,\n [separatorAlignment\n ? withBaseName(`separator-${separatorAlignment}`)\n : \"\"]: separatorAlignment,\n },\n className\n )}\n ref={ref}\n direction={direction}\n style={stackLayoutStyles}\n wrap={false}\n gap={flexGap}\n {...rest}\n >\n {children}\n </FlexLayout>\n );\n }\n);\n"],"names":["stackLayoutCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport {\n FlexLayout,\n FlexLayoutProps,\n LayoutDirection,\n LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n ResponsiveProp,\n useResponsiveProp,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport stackLayoutCss from \"./StackLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexLayoutProps<ElementType>[\"align\"];\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Adds a separator between elements, default is false.\n */\n separators?: LayoutSeparator | boolean;\n }\n >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n props: StackLayoutProps<T>\n) => ReactElement | null;\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n children,\n className,\n direction = \"column\",\n gap,\n separators,\n style,\n ...rest\n }: StackLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-stack-layout\",\n css: stackLayoutCss,\n window: targetWindow,\n });\n\n const flexGap = useResponsiveProp(gap, 3);\n const separatorAlignment = separators === true ? \"center\" : separators;\n const flexDirection = useResponsiveProp(direction, \"column\");\n const stackLayoutStyles = {\n ...style,\n \"--stackLayout-gap-multiplier\": flexGap,\n };\n return (\n <FlexLayout\n className={clsx(\n withBaseName(),\n withBaseName(flexDirection),\n {\n [withBaseName(\"separator\")]: !!separatorAlignment,\n [separatorAlignment\n ? withBaseName(`separator-${separatorAlignment}`)\n : \"\"]: separatorAlignment,\n },\n className\n )}\n ref={ref}\n direction={direction}\n style={stackLayoutStyles}\n wrap={false}\n gap={flexGap}\n {...rest}\n >\n {children}\n </FlexLayout>\n );\n }\n);\n"],"names":["stackLayoutCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AA6B5C,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,QAAQ,CAAA,CAAA;AAC3D,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,8BAAgC,EAAA,OAAA;AAAA,KAClC,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,aAAa,CAAA;AAAA,QAC1B;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,CAAC,kBAAA;AAAA,UAC/B,CAAC,kBACG,GAAA,YAAA,CAAa,CAAa,UAAA,EAAA,kBAAA,CAAA,CAAoB,IAC9C,EAAK,GAAA,kBAAA;AAAA,SACX;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAO,EAAA,iBAAA;AAAA,MACP,IAAM,EAAA,KAAA;AAAA,MACN,GAAK,EAAA,OAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -22,22 +22,15 @@ 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';
|
|
29
28
|
import '../combo-box/ComboBox.js';
|
|
30
29
|
import '../dialog/Dialog.js';
|
|
31
|
-
import '../
|
|
32
|
-
import '../text/Text.js';
|
|
33
|
-
import '../text/Display.js';
|
|
34
|
-
import '../text/Headings.js';
|
|
35
|
-
import '../text/Label.js';
|
|
36
|
-
import '../text/TextNotation.js';
|
|
37
|
-
import '../text/TextAction.js';
|
|
38
|
-
import '../dialog/DialogContext.js';
|
|
30
|
+
import '../dialog/DialogHeader.js';
|
|
39
31
|
import '../dialog/DialogActions.js';
|
|
40
32
|
import '../dialog/DialogContent.js';
|
|
33
|
+
import '../dialog/DialogContext.js';
|
|
41
34
|
import '../dialog/DialogCloseButton.js';
|
|
42
35
|
import '../drawer/Drawer.js';
|
|
43
36
|
import '../drawer/DrawerCloseButton.js';
|
|
@@ -49,10 +42,21 @@ import '../flex-item/FlexItem.js';
|
|
|
49
42
|
import '../flex-layout/FlexLayout.js';
|
|
50
43
|
import '../flow-layout/FlowLayout.js';
|
|
51
44
|
import '../form-field/FormField.js';
|
|
45
|
+
import '../status-indicator/StatusIndicator.js';
|
|
46
|
+
import '../text/Text.js';
|
|
47
|
+
import '../text/Code.js';
|
|
48
|
+
import '../text/Display.js';
|
|
49
|
+
import '../text/Headings.js';
|
|
50
|
+
import '../text/Label.js';
|
|
51
|
+
import '../text/TextAction.js';
|
|
52
|
+
import '../text/TextNotation.js';
|
|
52
53
|
import '../form-field-context/FormFieldContext.js';
|
|
53
54
|
import '../grid-item/GridItem.js';
|
|
54
55
|
import '../grid-layout/GridLayout.js';
|
|
55
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
56
60
|
import '../link/Link.js';
|
|
57
61
|
import '../link-card/LinkCard.js';
|
|
58
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -72,6 +76,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
72
76
|
import '../radio-button/RadioButton.js';
|
|
73
77
|
import '../radio-button/RadioButtonGroup.js';
|
|
74
78
|
import '../scrim/Scrim.js';
|
|
79
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
75
80
|
import '../spinner/Spinner.js';
|
|
76
81
|
import '../stack-layout/StackLayout.js';
|
|
77
82
|
import '../toast/Toast.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;;;;"}
|