@salt-ds/core 1.20.0 → 1.22.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 +474 -19
- package/dist-cjs/accordion/Accordion.js +77 -0
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +81 -0
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +78 -1
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +75 -0
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +77 -0
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +80 -0
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +76 -0
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +81 -0
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +77 -0
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +78 -2
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +78 -1
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +78 -1
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +77 -1
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +78 -0
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/button/Button.js +78 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.js +77 -0
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/card/InteractableCard.js +77 -0
- package/dist-cjs/card/InteractableCard.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +75 -0
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +76 -0
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +77 -0
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +81 -0
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.css.js +6 -0
- package/dist-cjs/combo-box/ComboBox.css.js.map +1 -0
- package/dist-cjs/combo-box/ComboBox.js +445 -0
- package/dist-cjs/combo-box/ComboBox.js.map +1 -0
- package/dist-cjs/combo-box/useComboBox.js +155 -0
- package/dist-cjs/combo-box/useComboBox.js.map +1 -0
- package/dist-cjs/dialog/Dialog.js +79 -3
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +78 -1
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +76 -1
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +78 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.js +124 -51
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +79 -4
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +76 -1
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +6 -0
- package/dist-cjs/dropdown/Dropdown.css.js.map +1 -0
- package/dist-cjs/dropdown/Dropdown.js +414 -0
- package/dist-cjs/dropdown/Dropdown.js.map +1 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js +77 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +78 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +81 -2
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +81 -2
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +76 -0
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +73 -3
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +72 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +80 -0
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +81 -2
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +81 -2
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +20 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +75 -0
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/link/Link.js +73 -3
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.js +77 -0
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +123 -0
- package/dist-cjs/list-control/ListControlContext.js.map +1 -0
- package/dist-cjs/list-control/ListControlState.js +278 -0
- package/dist-cjs/list-control/ListControlState.js.map +1 -0
- package/dist-cjs/multiline-input/MultilineInput.js +75 -0
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +79 -2
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.css.js +6 -0
- package/dist-cjs/option/Option.css.js.map +1 -0
- package/dist-cjs/option/Option.js +180 -0
- package/dist-cjs/option/Option.js.map +1 -0
- package/dist-cjs/option/OptionGroup.css.js +6 -0
- package/dist-cjs/option/OptionGroup.css.js.map +1 -0
- package/dist-cjs/option/OptionGroup.js +125 -0
- package/dist-cjs/option/OptionGroup.js.map +1 -0
- package/dist-cjs/option/OptionList.css.js +6 -0
- package/dist-cjs/option/OptionList.css.js.map +1 -0
- package/dist-cjs/option/OptionList.js +120 -0
- package/dist-cjs/option/OptionList.js.map +1 -0
- package/dist-cjs/option/OptionListBase.js +115 -0
- package/dist-cjs/option/OptionListBase.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +78 -2
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +72 -3
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +71 -4
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +79 -2
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +80 -2
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +78 -2
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +77 -2
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +79 -2
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/pill/Pill.js +76 -0
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +6 -0
- package/dist-cjs/pill-input/PillInput.css.js.map +1 -0
- package/dist-cjs/pill-input/PillInput.js +340 -0
- package/dist-cjs/pill-input/PillInput.js.map +1 -0
- package/dist-cjs/pill-input/useTruncatePills.js +83 -0
- package/dist-cjs/pill-input/useTruncatePills.js.map +1 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +141 -15
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +92 -9
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +80 -4
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +79 -3
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +78 -0
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +81 -0
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +80 -3
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +78 -1
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +78 -2
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +80 -0
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +78 -2
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +80 -2
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +77 -0
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +78 -2
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +77 -2
- 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 +79 -2
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +76 -0
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +77 -0
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +75 -0
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +76 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +80 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +77 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +77 -2
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +79 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +80 -0
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/ownerWindow.js.map +1 -1
- package/dist-cjs/utils/useEventCallback.js +20 -0
- package/dist-cjs/utils/useEventCallback.js.map +1 -0
- package/dist-cjs/utils/useResizeObserver.js +29 -0
- package/dist-cjs/utils/useResizeObserver.js.map +1 -0
- package/dist-cjs/utils/useValueEffect.js +126 -0
- package/dist-cjs/utils/useValueEffect.js.map +1 -0
- package/dist-cjs/viewport/ViewportProvider.js +80 -0
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +77 -0
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +81 -0
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +78 -1
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +75 -0
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +77 -0
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +80 -0
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +76 -0
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +81 -0
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +77 -0
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +78 -2
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +78 -1
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +78 -1
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +77 -1
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +78 -0
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/button/Button.js +78 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.js +77 -0
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/card/InteractableCard.js +77 -0
- package/dist-es/card/InteractableCard.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +75 -0
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +76 -0
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +77 -0
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +81 -0
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.css.js +4 -0
- package/dist-es/combo-box/ComboBox.css.js.map +1 -0
- package/dist-es/combo-box/ComboBox.js +441 -0
- package/dist-es/combo-box/ComboBox.js.map +1 -0
- package/dist-es/combo-box/useComboBox.js +151 -0
- package/dist-es/combo-box/useComboBox.js.map +1 -0
- package/dist-es/dialog/Dialog.js +79 -3
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +78 -1
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +76 -1
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +78 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.css.js +1 -1
- package/dist-es/dialog/DialogHeader.js +124 -51
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +79 -4
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +76 -1
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.css.js +4 -0
- package/dist-es/dropdown/Dropdown.css.js.map +1 -0
- package/dist-es/dropdown/Dropdown.js +410 -0
- package/dist-es/dropdown/Dropdown.js.map +1 -0
- package/dist-es/file-drop-zone/FileDropZone.js +77 -0
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +78 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +81 -2
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +81 -2
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +76 -0
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +73 -3
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +72 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +80 -0
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +81 -2
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +81 -2
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +10 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +75 -0
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/link/Link.js +73 -3
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.js +77 -0
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +118 -0
- package/dist-es/list-control/ListControlContext.js.map +1 -0
- package/dist-es/list-control/ListControlState.js +273 -0
- package/dist-es/list-control/ListControlState.js.map +1 -0
- package/dist-es/multiline-input/MultilineInput.js +75 -0
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +79 -2
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.css.js +4 -0
- package/dist-es/option/Option.css.js.map +1 -0
- package/dist-es/option/Option.js +176 -0
- package/dist-es/option/Option.js.map +1 -0
- package/dist-es/option/OptionGroup.css.js +4 -0
- package/dist-es/option/OptionGroup.css.js.map +1 -0
- package/dist-es/option/OptionGroup.js +121 -0
- package/dist-es/option/OptionGroup.js.map +1 -0
- package/dist-es/option/OptionList.css.js +4 -0
- package/dist-es/option/OptionList.css.js.map +1 -0
- package/dist-es/option/OptionList.js +116 -0
- package/dist-es/option/OptionList.js.map +1 -0
- package/dist-es/option/OptionListBase.js +111 -0
- package/dist-es/option/OptionListBase.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +78 -2
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +72 -3
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +71 -4
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +79 -2
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +80 -2
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +78 -2
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +77 -2
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +79 -2
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/pill/Pill.js +76 -0
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +4 -0
- package/dist-es/pill-input/PillInput.css.js.map +1 -0
- package/dist-es/pill-input/PillInput.js +336 -0
- package/dist-es/pill-input/PillInput.js.map +1 -0
- package/dist-es/pill-input/useTruncatePills.js +79 -0
- package/dist-es/pill-input/useTruncatePills.js.map +1 -0
- package/dist-es/progress/CircularProgress/CircularProgress.css.js +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +141 -15
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.css.js +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +92 -9
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +80 -4
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +79 -3
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +78 -0
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +81 -0
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +80 -3
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +78 -1
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/spinner/Spinner.js +78 -2
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +80 -0
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +78 -2
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +80 -2
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +77 -0
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +78 -2
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +77 -2
- 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 +79 -2
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +76 -0
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +77 -0
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +75 -0
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +76 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +80 -0
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +77 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +77 -2
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +79 -0
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +80 -0
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/ownerWindow.js.map +1 -1
- package/dist-es/utils/useEventCallback.js +16 -0
- package/dist-es/utils/useEventCallback.js.map +1 -0
- package/dist-es/utils/useResizeObserver.js +25 -0
- package/dist-es/utils/useResizeObserver.js.map +1 -0
- package/dist-es/utils/useValueEffect.js +122 -0
- package/dist-es/utils/useValueEffect.js.map +1 -0
- package/dist-es/viewport/ViewportProvider.js +80 -0
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/combo-box/ComboBox.d.ts +17 -0
- package/dist-types/combo-box/index.d.ts +1 -0
- package/dist-types/combo-box/useComboBox.d.ts +30 -0
- package/dist-types/dialog/DialogHeader.d.ts +2 -4
- package/dist-types/dropdown/Dropdown.d.ts +99 -0
- package/dist-types/dropdown/index.d.ts +1 -0
- package/dist-types/index.d.ts +4 -0
- package/dist-types/list-control/ListControlContext.d.ts +21 -0
- package/dist-types/list-control/ListControlState.d.ts +70 -0
- package/dist-types/list-control/index.d.ts +1 -0
- package/dist-types/option/Option.d.ts +16 -0
- package/dist-types/option/OptionGroup.d.ts +12 -0
- package/dist-types/option/OptionList.d.ts +5 -0
- package/dist-types/option/OptionListBase.d.ts +4 -0
- package/dist-types/option/index.d.ts +2 -0
- package/dist-types/pill-input/PillInput.d.ts +48 -0
- package/dist-types/pill-input/index.d.ts +1 -0
- package/dist-types/pill-input/useTruncatePills.d.ts +8 -0
- package/dist-types/progress/CircularProgress/CircularProgress.d.ts +5 -0
- package/dist-types/progress/LinearProgress/LinearProgress.d.ts +5 -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/dist-types/utils/index.d.ts +3 -0
- package/dist-types/utils/ownerWindow.d.ts +1 -1
- package/dist-types/utils/useEventCallback.d.ts +4 -0
- package/dist-types/utils/useResizeObserver.d.ts +6 -0
- package/dist-types/utils/useValueEffect.d.ts +4 -0
- package/package.json +1 -1
package/css/salt-core.css
CHANGED
|
@@ -668,6 +668,11 @@ a:link .saltInteractableCard * {
|
|
|
668
668
|
color: var(--salt-content-primary-foreground);
|
|
669
669
|
}
|
|
670
670
|
|
|
671
|
+
/* src/combo-box/ComboBox.css */
|
|
672
|
+
.saltComboBox-focused {
|
|
673
|
+
outline: var(--salt-focused-outline);
|
|
674
|
+
}
|
|
675
|
+
|
|
671
676
|
/* src/dialog/Dialog.css */
|
|
672
677
|
.saltDialog {
|
|
673
678
|
position: fixed;
|
|
@@ -924,6 +929,91 @@ a:link .saltInteractableCard * {
|
|
|
924
929
|
margin-right: calc(var(--salt-spacing-300) * -1);
|
|
925
930
|
}
|
|
926
931
|
|
|
932
|
+
/* src/dropdown/Dropdown.css */
|
|
933
|
+
.saltDropdown {
|
|
934
|
+
--dropdown-borderColor: var(--salt-editable-borderColor);
|
|
935
|
+
--dropdown-color: var(--salt-content-primary-foreground);
|
|
936
|
+
--dropdown-cursor: var(--salt-selectable-cursor-hover);
|
|
937
|
+
}
|
|
938
|
+
.saltDropdown {
|
|
939
|
+
all: unset;
|
|
940
|
+
box-sizing: border-box;
|
|
941
|
+
min-width: 4em;
|
|
942
|
+
width: 100%;
|
|
943
|
+
background: var(--dropdown-background);
|
|
944
|
+
cursor: var(--dropdown-cursor);
|
|
945
|
+
min-height: var(--salt-size-base);
|
|
946
|
+
border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
|
|
947
|
+
display: flex;
|
|
948
|
+
align-items: center;
|
|
949
|
+
padding: 0 var(--salt-spacing-100);
|
|
950
|
+
gap: var(--salt-spacing-100);
|
|
951
|
+
color: var(--dropdown-color);
|
|
952
|
+
font-family: var(--salt-text-fontFamily);
|
|
953
|
+
font-size: var(--salt-text-fontSize);
|
|
954
|
+
font-weight: var(--salt-text-fontWeight);
|
|
955
|
+
}
|
|
956
|
+
.saltDropdown:hover {
|
|
957
|
+
--dropdown-borderColor: var(--salt-editable-borderColor-hover);
|
|
958
|
+
}
|
|
959
|
+
.saltDropdown:focus-visible {
|
|
960
|
+
outline: var(--salt-focused-outline);
|
|
961
|
+
--dropdown-borderColor: var(--salt-editable-borderColor-hover);
|
|
962
|
+
}
|
|
963
|
+
.saltDropdown-content {
|
|
964
|
+
flex: 1;
|
|
965
|
+
max-width: 100%;
|
|
966
|
+
overflow: hidden;
|
|
967
|
+
text-overflow: ellipsis;
|
|
968
|
+
text-wrap: nowrap;
|
|
969
|
+
}
|
|
970
|
+
.saltDropdown-placeholder {
|
|
971
|
+
color: var(--salt-content-secondary-foreground);
|
|
972
|
+
font-weight: var(--salt-text-fontWeight-small);
|
|
973
|
+
}
|
|
974
|
+
.saltDropdown-primary {
|
|
975
|
+
--dropdown-background: var(--salt-editable-primary-background);
|
|
976
|
+
}
|
|
977
|
+
.saltDropdown-secondary {
|
|
978
|
+
--dropdown-background: var(--salt-editable-secondary-background);
|
|
979
|
+
}
|
|
980
|
+
.saltDropdown:disabled {
|
|
981
|
+
--dropdown-background: var(--salt-editable-primary-background-disabled);
|
|
982
|
+
--dropdown-borderColor: var(--salt-editable-borderColor-disabled);
|
|
983
|
+
--dropdown-color: var(--salt-content-primary-foreground-disabled);
|
|
984
|
+
--dropdown-cursor: var(--salt-selectable-cursor-disabled);
|
|
985
|
+
}
|
|
986
|
+
.saltDropdown[aria-readonly=true] {
|
|
987
|
+
--dropdown-background: var(--salt-editable-primary-background-readonly);
|
|
988
|
+
--dropdown-borderColor: var(--salt-editable-borderColor-readonly);
|
|
989
|
+
--dropdown-color: var(--salt-content-primary-foreground);
|
|
990
|
+
--dropdown-cursor: var(--salt-selectable-cursor-readonly);
|
|
991
|
+
}
|
|
992
|
+
.saltDropdown-error {
|
|
993
|
+
--dropdown-background: var(--salt-status-error-background);
|
|
994
|
+
--dropdown-borderColor: var(--salt-status-error-borderColor);
|
|
995
|
+
}
|
|
996
|
+
.saltDropdown-error .saltDropdown:focus-visible {
|
|
997
|
+
outline-color: var(--salt-status-error-borderColor);
|
|
998
|
+
--dropdown-borderColor: var(--salt-status-error-borderColor);
|
|
999
|
+
}
|
|
1000
|
+
.saltDropdown-warning {
|
|
1001
|
+
--dropdown-background: var(--salt-status-warning-background);
|
|
1002
|
+
--dropdown-borderColor: var(--salt-status-warning-borderColor);
|
|
1003
|
+
}
|
|
1004
|
+
.saltDropdown-warning .saltDropdown:focus-visible {
|
|
1005
|
+
outline-color: var(--salt-status-warning-borderColor);
|
|
1006
|
+
--dropdown-borderColor: var(--salt-status-warning-borderColor);
|
|
1007
|
+
}
|
|
1008
|
+
.saltDropdown-success {
|
|
1009
|
+
--dropdown-background: var(--salt-status-success-background);
|
|
1010
|
+
--dropdown-borderColor: var(--salt-status-success-borderColor);
|
|
1011
|
+
}
|
|
1012
|
+
.saltDropdown-success .saltDropdown:focus-visible {
|
|
1013
|
+
outline-color: var(--salt-status-success-borderColor);
|
|
1014
|
+
--dropdown-borderColor: var(--salt-status-success-borderColor);
|
|
1015
|
+
}
|
|
1016
|
+
|
|
927
1017
|
/* src/file-drop-zone/FileDropZone.css */
|
|
928
1018
|
.saltFileDropZone {
|
|
929
1019
|
color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
|
|
@@ -1770,6 +1860,99 @@ a:link .saltInteractableCard * {
|
|
|
1770
1860
|
transition: all var(--salt-duration-perceptible) ease-in-out;
|
|
1771
1861
|
}
|
|
1772
1862
|
|
|
1863
|
+
/* src/option/Option.css */
|
|
1864
|
+
.saltOption {
|
|
1865
|
+
color: var(--salt-content-primary-foreground);
|
|
1866
|
+
background: var(--salt-selectable-background);
|
|
1867
|
+
font-size: var(--salt-text-fontSize);
|
|
1868
|
+
font-weight: var(--salt-text-fontWeight);
|
|
1869
|
+
min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
|
|
1870
|
+
padding-left: var(--salt-spacing-100);
|
|
1871
|
+
padding-right: var(--salt-spacing-100);
|
|
1872
|
+
display: flex;
|
|
1873
|
+
gap: var(--salt-spacing-100);
|
|
1874
|
+
position: relative;
|
|
1875
|
+
align-items: center;
|
|
1876
|
+
cursor: var(--salt-selectable-cursor-hover);
|
|
1877
|
+
box-sizing: border-box;
|
|
1878
|
+
}
|
|
1879
|
+
.saltOption-active {
|
|
1880
|
+
background: var(--salt-selectable-background-hover);
|
|
1881
|
+
}
|
|
1882
|
+
.saltOption-focusVisible {
|
|
1883
|
+
outline: var(--salt-focused-outline);
|
|
1884
|
+
outline-offset: calc(var(--salt-size-border) * -2);
|
|
1885
|
+
}
|
|
1886
|
+
.saltOption:hover {
|
|
1887
|
+
background: var(--salt-selectable-background-hover);
|
|
1888
|
+
}
|
|
1889
|
+
.saltOption[aria-selected=true] {
|
|
1890
|
+
background: var(--salt-selectable-background-selected);
|
|
1891
|
+
}
|
|
1892
|
+
.saltOption[aria-selected=true]::before {
|
|
1893
|
+
content: "";
|
|
1894
|
+
display: block;
|
|
1895
|
+
position: absolute;
|
|
1896
|
+
top: -1px;
|
|
1897
|
+
bottom: -1px;
|
|
1898
|
+
left: 0;
|
|
1899
|
+
width: 100%;
|
|
1900
|
+
}
|
|
1901
|
+
.saltOption[aria-selected=true]::before {
|
|
1902
|
+
border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
|
|
1903
|
+
border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
|
|
1904
|
+
}
|
|
1905
|
+
.saltOption[aria-selected=true]:first-of-type::before {
|
|
1906
|
+
border-top: unset;
|
|
1907
|
+
top: 0;
|
|
1908
|
+
}
|
|
1909
|
+
.saltOption[aria-selected=true]:last-of-type::before {
|
|
1910
|
+
border-bottom: unset;
|
|
1911
|
+
bottom: 0;
|
|
1912
|
+
}
|
|
1913
|
+
.saltOption[aria-disabled=true] {
|
|
1914
|
+
color: var(--salt-content-primary-foreground-disabled);
|
|
1915
|
+
cursor: var(--salt-selectable-cursor-disabled);
|
|
1916
|
+
}
|
|
1917
|
+
|
|
1918
|
+
/* src/option/OptionGroup.css */
|
|
1919
|
+
.saltOptionGroup-label {
|
|
1920
|
+
background: var(--salt-container-primary-background);
|
|
1921
|
+
color: var(--salt-text-secondary-foreground);
|
|
1922
|
+
font-size: var(--salt-text-label-fontSize);
|
|
1923
|
+
font-weight: var(--salt-text-label-fontWeight-strong);
|
|
1924
|
+
height: calc(var(--salt-size-base) + var(--salt-spacing-100));
|
|
1925
|
+
padding-left: var(--salt-spacing-100);
|
|
1926
|
+
padding-right: var(--salt-spacing-100);
|
|
1927
|
+
display: flex;
|
|
1928
|
+
align-items: center;
|
|
1929
|
+
position: sticky;
|
|
1930
|
+
top: 0;
|
|
1931
|
+
z-index: 2;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
/* src/option/OptionList.css */
|
|
1935
|
+
.saltOptionList {
|
|
1936
|
+
background: var(--salt-container-primary-background);
|
|
1937
|
+
border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
|
|
1938
|
+
overflow: hidden;
|
|
1939
|
+
overflow-y: auto;
|
|
1940
|
+
position: relative;
|
|
1941
|
+
z-index: var(--salt-zIndex-flyover);
|
|
1942
|
+
box-shadow: var(--salt-overlayable-shadow-popout);
|
|
1943
|
+
box-sizing: border-box;
|
|
1944
|
+
}
|
|
1945
|
+
.saltOptionList-container {
|
|
1946
|
+
display: flex;
|
|
1947
|
+
flex-direction: column;
|
|
1948
|
+
gap: var(--salt-size-border);
|
|
1949
|
+
max-height: inherit;
|
|
1950
|
+
min-height: inherit;
|
|
1951
|
+
}
|
|
1952
|
+
.saltOptionList-collapsed {
|
|
1953
|
+
display: none;
|
|
1954
|
+
}
|
|
1955
|
+
|
|
1773
1956
|
/* src/pagination/CompactInput.css */
|
|
1774
1957
|
.saltCompactInput {
|
|
1775
1958
|
--saltInput-paddingLeft: 0;
|
|
@@ -1930,6 +2113,223 @@ a:link .saltInteractableCard * {
|
|
|
1930
2113
|
cursor: var(--salt-selectable-cursor-disabled);
|
|
1931
2114
|
}
|
|
1932
2115
|
|
|
2116
|
+
/* src/pill-input/PillInput.css */
|
|
2117
|
+
.saltPillInput {
|
|
2118
|
+
--input-borderColor: var(--salt-editable-borderColor);
|
|
2119
|
+
--input-borderStyle: var(--salt-editable-borderStyle);
|
|
2120
|
+
--input-outlineColor: var(--salt-focused-outlineColor);
|
|
2121
|
+
--input-borderWidth: var(--salt-size-border);
|
|
2122
|
+
align-items: center;
|
|
2123
|
+
background: var(--saltInput-background, var(--input-background));
|
|
2124
|
+
color: var(--saltInput-color, var(--salt-content-primary-foreground));
|
|
2125
|
+
display: inline-flex;
|
|
2126
|
+
font-family: var(--salt-text-fontFamily);
|
|
2127
|
+
font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));
|
|
2128
|
+
line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));
|
|
2129
|
+
min-height: var(--saltInput-minHeight, var(--salt-size-base));
|
|
2130
|
+
min-width: var(--saltInput-minWidth, 4em);
|
|
2131
|
+
padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));
|
|
2132
|
+
padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
|
|
2133
|
+
position: relative;
|
|
2134
|
+
width: 100%;
|
|
2135
|
+
box-sizing: border-box;
|
|
2136
|
+
}
|
|
2137
|
+
.saltPillInput-truncate {
|
|
2138
|
+
height: var(--salt-size-base);
|
|
2139
|
+
}
|
|
2140
|
+
.saltPillInput-truncate .saltPillInput-inputWrapper {
|
|
2141
|
+
flex-wrap: nowrap;
|
|
2142
|
+
}
|
|
2143
|
+
.saltPillInput:hover {
|
|
2144
|
+
--input-borderStyle: var(--salt-editable-borderStyle-hover);
|
|
2145
|
+
--input-borderColor: var(--salt-editable-borderColor-hover);
|
|
2146
|
+
background: var(--saltInput-background-hover, var(--input-background-hover));
|
|
2147
|
+
cursor: var(--salt-editable-cursor-hover);
|
|
2148
|
+
}
|
|
2149
|
+
.saltPillInput:active {
|
|
2150
|
+
--input-borderColor: var(--salt-editable-borderColor-active);
|
|
2151
|
+
--input-borderStyle: var(--salt-editable-borderStyle-active);
|
|
2152
|
+
--input-borderWidth: var(--salt-editable-borderWidth-active);
|
|
2153
|
+
background: var(--saltInput-background-active, var(--input-background-active));
|
|
2154
|
+
cursor: var(--salt-editable-cursor-active);
|
|
2155
|
+
}
|
|
2156
|
+
.saltPillInput-primary {
|
|
2157
|
+
--input-background: var(--salt-editable-primary-background);
|
|
2158
|
+
--input-background-active: var(--salt-editable-primary-background-active);
|
|
2159
|
+
--input-background-hover: var(--salt-editable-primary-background-hover);
|
|
2160
|
+
--input-background-disabled: var(--salt-editable-primary-background-disabled);
|
|
2161
|
+
--input-background-readonly: var(--salt-editable-primary-background-readonly);
|
|
2162
|
+
}
|
|
2163
|
+
.saltPillInput-secondary {
|
|
2164
|
+
--input-background: var(--salt-editable-secondary-background);
|
|
2165
|
+
--input-background-active: var(--salt-editable-secondary-background-active);
|
|
2166
|
+
--input-background-hover: var(--salt-editable-secondary-background-active);
|
|
2167
|
+
--input-background-disabled: var(--salt-editable-secondary-background-disabled);
|
|
2168
|
+
--input-background-readonly: var(--salt-editable-secondary-background-readonly);
|
|
2169
|
+
}
|
|
2170
|
+
.saltPillInput-error,
|
|
2171
|
+
.saltPillInput-error:hover {
|
|
2172
|
+
--input-background: var(--salt-status-error-background);
|
|
2173
|
+
--input-background-active: var(--salt-status-error-background);
|
|
2174
|
+
--input-background-hover: var(--salt-status-error-background);
|
|
2175
|
+
--input-borderColor: var(--salt-status-error-borderColor);
|
|
2176
|
+
--input-outlineColor: var(--salt-status-error-borderColor);
|
|
2177
|
+
}
|
|
2178
|
+
.saltPillInput-warning,
|
|
2179
|
+
.saltPillInput-warning:hover {
|
|
2180
|
+
--input-background: var(--salt-status-warning-background);
|
|
2181
|
+
--input-background-active: var(--salt-status-warning-background);
|
|
2182
|
+
--input-background-hover: var(--salt-status-warning-background);
|
|
2183
|
+
--input-borderColor: var(--salt-status-warning-borderColor);
|
|
2184
|
+
--input-outlineColor: var(--salt-status-warning-borderColor);
|
|
2185
|
+
}
|
|
2186
|
+
.saltPillInput-success,
|
|
2187
|
+
.saltPillInput-success:hover {
|
|
2188
|
+
--input-background: var(--salt-status-success-background);
|
|
2189
|
+
--input-background-active: var(--salt-status-success-background);
|
|
2190
|
+
--input-background-hover: var(--salt-status-success-background);
|
|
2191
|
+
--input-borderColor: var(--salt-status-success-borderColor);
|
|
2192
|
+
--input-outlineColor: var(--salt-status-success-borderColor);
|
|
2193
|
+
}
|
|
2194
|
+
.saltPillInput-input {
|
|
2195
|
+
background: none;
|
|
2196
|
+
border: none;
|
|
2197
|
+
box-sizing: content-box;
|
|
2198
|
+
color: inherit;
|
|
2199
|
+
cursor: inherit;
|
|
2200
|
+
display: block;
|
|
2201
|
+
flex: 1;
|
|
2202
|
+
font: inherit;
|
|
2203
|
+
height: 100%;
|
|
2204
|
+
letter-spacing: var(--saltInput-letterSpacing, 0);
|
|
2205
|
+
margin: 0;
|
|
2206
|
+
min-width: 0;
|
|
2207
|
+
overflow: hidden;
|
|
2208
|
+
padding: 0;
|
|
2209
|
+
text-align: var(--input-textAlign);
|
|
2210
|
+
width: 100%;
|
|
2211
|
+
}
|
|
2212
|
+
.saltPillInput-input:focus {
|
|
2213
|
+
outline: none;
|
|
2214
|
+
}
|
|
2215
|
+
.saltPillInput-input::selection {
|
|
2216
|
+
background: var(--salt-content-foreground-highlight);
|
|
2217
|
+
}
|
|
2218
|
+
.saltPillInput-input::placeholder {
|
|
2219
|
+
color: var(--salt-content-secondary-foreground);
|
|
2220
|
+
font-weight: var(--salt-text-fontWeight-small);
|
|
2221
|
+
}
|
|
2222
|
+
.saltPillInput-focused {
|
|
2223
|
+
--input-borderColor: var(--input-outlineColor);
|
|
2224
|
+
--input-borderWidth: var(--salt-editable-borderWidth-active);
|
|
2225
|
+
outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
|
|
2226
|
+
}
|
|
2227
|
+
.saltPillInput.saltPillInput-readOnly {
|
|
2228
|
+
--input-borderColor: var(--salt-editable-borderColor-readonly);
|
|
2229
|
+
--input-borderStyle: var(--salt-editable-borderStyle-readonly);
|
|
2230
|
+
--input-borderWidth: var(--salt-size-border);
|
|
2231
|
+
background: var(--input-background-readonly);
|
|
2232
|
+
cursor: var(--salt-editable-cursor-readonly);
|
|
2233
|
+
}
|
|
2234
|
+
.saltPillInput-focused.saltPillInput-disabled {
|
|
2235
|
+
--input-borderWidth: var(--salt-size-border);
|
|
2236
|
+
outline: none;
|
|
2237
|
+
}
|
|
2238
|
+
.saltPillInput-focused.saltPillInput-readOnly {
|
|
2239
|
+
--input-borderWidth: var(--salt-size-border);
|
|
2240
|
+
}
|
|
2241
|
+
.saltPillInput-disabled .saltPillInput-input::selection {
|
|
2242
|
+
background: none;
|
|
2243
|
+
}
|
|
2244
|
+
.saltPillInput.saltPillInput-disabled,
|
|
2245
|
+
.saltPillInput.saltPillInput-disabled:hover,
|
|
2246
|
+
.saltPillInput.saltPillInput-disabled:active {
|
|
2247
|
+
--input-borderColor: var(--salt-editable-borderColor-disabled);
|
|
2248
|
+
--input-borderStyle: var(--salt-editable-borderStyle-disabled);
|
|
2249
|
+
--input-borderWidth: var(--salt-size-border);
|
|
2250
|
+
background: var(--input-background-disabled);
|
|
2251
|
+
cursor: var(--salt-editable-cursor-disabled);
|
|
2252
|
+
color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));
|
|
2253
|
+
}
|
|
2254
|
+
.saltPillInput-activationIndicator {
|
|
2255
|
+
left: 0;
|
|
2256
|
+
bottom: 0;
|
|
2257
|
+
width: 100%;
|
|
2258
|
+
position: absolute;
|
|
2259
|
+
border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
|
|
2260
|
+
}
|
|
2261
|
+
.saltPillInput-startAdornmentContainer {
|
|
2262
|
+
align-items: center;
|
|
2263
|
+
display: inline-flex;
|
|
2264
|
+
padding-right: var(--salt-spacing-100);
|
|
2265
|
+
column-gap: var(--salt-spacing-100);
|
|
2266
|
+
}
|
|
2267
|
+
.saltPillInput-endAdornmentContainer {
|
|
2268
|
+
align-items: center;
|
|
2269
|
+
display: inline-flex;
|
|
2270
|
+
padding-left: var(--salt-spacing-100);
|
|
2271
|
+
padding-top: var(--salt-spacing-50);
|
|
2272
|
+
column-gap: var(--salt-spacing-100);
|
|
2273
|
+
align-self: flex-start;
|
|
2274
|
+
}
|
|
2275
|
+
.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {
|
|
2276
|
+
margin-left: var(--salt-spacing-50);
|
|
2277
|
+
}
|
|
2278
|
+
.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {
|
|
2279
|
+
margin-left: calc(-1 * var(--salt-spacing-50));
|
|
2280
|
+
}
|
|
2281
|
+
.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {
|
|
2282
|
+
margin-left: calc(-1 * var(--salt-spacing-50));
|
|
2283
|
+
}
|
|
2284
|
+
.saltPillInput-startAdornmentContainer .saltButton:first-child {
|
|
2285
|
+
margin-left: calc(var(--salt-spacing-50) * -1);
|
|
2286
|
+
}
|
|
2287
|
+
.saltPillInput-endAdornmentContainer .saltButton:last-child {
|
|
2288
|
+
margin-right: calc(var(--salt-spacing-50) * -1);
|
|
2289
|
+
}
|
|
2290
|
+
.saltPillInput-startAdornmentContainer > .saltButton,
|
|
2291
|
+
.saltPillInput-endAdornmentContainer > .saltButton {
|
|
2292
|
+
--saltButton-padding: var(--salt-spacing-50);
|
|
2293
|
+
--saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
2294
|
+
}
|
|
2295
|
+
.saltPillInput-inputWrapper {
|
|
2296
|
+
display: flex;
|
|
2297
|
+
gap: var(--salt-spacing-50);
|
|
2298
|
+
align-items: center;
|
|
2299
|
+
flex: 1;
|
|
2300
|
+
padding: var(--salt-spacing-50) 0;
|
|
2301
|
+
flex-wrap: wrap;
|
|
2302
|
+
max-height: inherit;
|
|
2303
|
+
height: inherit;
|
|
2304
|
+
overflow-y: auto;
|
|
2305
|
+
box-sizing: border-box;
|
|
2306
|
+
}
|
|
2307
|
+
.saltPillInput-pillList {
|
|
2308
|
+
display: contents;
|
|
2309
|
+
}
|
|
2310
|
+
.saltPillInput .saltPill:focus-visible {
|
|
2311
|
+
background: var(--salt-selectable-background-hover);
|
|
2312
|
+
outline: none;
|
|
2313
|
+
}
|
|
2314
|
+
.saltPillInput .saltPill:hover {
|
|
2315
|
+
background: var(--salt-selectable-background-hover);
|
|
2316
|
+
}
|
|
2317
|
+
.saltPillInput .saltPill:active {
|
|
2318
|
+
background: var(--salt-actionable-primary-background-active);
|
|
2319
|
+
--saltPill-color: var(--salt-actionable-primary-foreground-active);
|
|
2320
|
+
--saltIcon-color: var(--salt-actionable-primary-foreground-active);
|
|
2321
|
+
}
|
|
2322
|
+
div[role=listitem] {
|
|
2323
|
+
display: inline;
|
|
2324
|
+
}
|
|
2325
|
+
.saltPillInput-overflowIndicator {
|
|
2326
|
+
width: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
2327
|
+
height: calc(var(--salt-size-base) - var(--salt-spacing-100));
|
|
2328
|
+
display: flex;
|
|
2329
|
+
align-items: center;
|
|
2330
|
+
justify-content: center;
|
|
2331
|
+
}
|
|
2332
|
+
|
|
1933
2333
|
/* src/radio-button/RadioButton.css */
|
|
1934
2334
|
.saltRadioButton {
|
|
1935
2335
|
display: flex;
|
|
@@ -2380,6 +2780,10 @@ a:link .saltInteractableCard * {
|
|
|
2380
2780
|
text-align: var(--salt-text-action-textAlign);
|
|
2381
2781
|
font-weight: var(--salt-text-action-fontWeight);
|
|
2382
2782
|
}
|
|
2783
|
+
code.saltText,
|
|
2784
|
+
.saltText-code.saltText {
|
|
2785
|
+
font-family: var(--salt-text-code-fontFamily);
|
|
2786
|
+
}
|
|
2383
2787
|
.saltText-display1.saltText {
|
|
2384
2788
|
font-family: var(--salt-text-display1-fontFamily);
|
|
2385
2789
|
font-size: var(--salt-text-display1-fontSize);
|
|
@@ -2669,21 +3073,37 @@ label.saltText small,
|
|
|
2669
3073
|
.saltCircularProgress-track {
|
|
2670
3074
|
inline-size: calc(var(--salt-size-base) * 3);
|
|
2671
3075
|
block-size: calc(var(--salt-size-base) * 3);
|
|
2672
|
-
|
|
2673
|
-
|
|
3076
|
+
outline-style: var(--salt-track-borderStyle);
|
|
3077
|
+
outline-width: var(--salt-size-bar);
|
|
3078
|
+
outline-offset: calc(var(--salt-size-bar) * -1.5);
|
|
2674
3079
|
border-radius: calc(var(--salt-size-base) * 3);
|
|
2675
|
-
|
|
3080
|
+
outline-color: var(--salt-track-borderColor);
|
|
2676
3081
|
box-sizing: border-box;
|
|
2677
3082
|
}
|
|
2678
|
-
.saltCircularProgress-bar
|
|
3083
|
+
.saltCircularProgress-bar,
|
|
3084
|
+
.saltCircularProgress-bufferBorder,
|
|
3085
|
+
.saltCircularProgress-bufferBackground {
|
|
2679
3086
|
inline-size: calc(var(--salt-size-base) * 3);
|
|
2680
3087
|
block-size: calc(var(--salt-size-base) * 3);
|
|
2681
|
-
border-style: var(--salt-track-borderStyle);
|
|
2682
|
-
border-width: var(--salt-size-bar-strong);
|
|
2683
3088
|
border-radius: calc(var(--salt-size-base) * 3);
|
|
2684
|
-
border-color: var(--salt-accent-background);
|
|
2685
3089
|
box-sizing: border-box;
|
|
2686
3090
|
}
|
|
3091
|
+
.saltCircularProgress-bar {
|
|
3092
|
+
border-color: var(--salt-accent-background);
|
|
3093
|
+
border-style: var(--salt-track-borderStyle);
|
|
3094
|
+
border-width: var(--salt-size-bar-strong);
|
|
3095
|
+
}
|
|
3096
|
+
.saltCircularProgress-bufferBorder {
|
|
3097
|
+
border: solid var(--salt-size-border) var(--salt-accent-background);
|
|
3098
|
+
outline: solid var(--salt-size-border) var(--salt-accent-background);
|
|
3099
|
+
outline-offset: calc(var(--salt-size-bar-strong) * -1);
|
|
3100
|
+
}
|
|
3101
|
+
.saltCircularProgress-bufferBackground {
|
|
3102
|
+
border: solid var(--salt-size-bar-strong) var(--salt-container-primary-background);
|
|
3103
|
+
position: absolute;
|
|
3104
|
+
bottom: 0;
|
|
3105
|
+
z-index: calc(var(--salt-zIndex-default) * -1);
|
|
3106
|
+
}
|
|
2687
3107
|
.saltCircularProgress-bars {
|
|
2688
3108
|
position: absolute;
|
|
2689
3109
|
inset-block-start: 0;
|
|
@@ -2691,26 +3111,50 @@ label.saltText small,
|
|
|
2691
3111
|
inline-size: 100%;
|
|
2692
3112
|
block-size: 100%;
|
|
2693
3113
|
}
|
|
3114
|
+
.saltCircularProgress-bufferOverlayRight,
|
|
3115
|
+
.saltCircularProgress-bufferOverlayLeft,
|
|
2694
3116
|
.saltCircularProgress-barOverlayRight,
|
|
2695
|
-
.saltCircularProgress-barOverlayLeft
|
|
2696
|
-
|
|
3117
|
+
.saltCircularProgress-barOverlayLeft,
|
|
3118
|
+
.saltCircularProgress-bufferSubOverlayRight,
|
|
3119
|
+
.saltCircularProgress-bufferSubOverlayLeft,
|
|
3120
|
+
.saltCircularProgress-barSubOverlayRight,
|
|
3121
|
+
.saltCircularProgress-barSubOverlayLeft {
|
|
2697
3122
|
block-size: 100%;
|
|
2698
3123
|
transform-origin: 100% center;
|
|
2699
|
-
transform: rotate(180deg);
|
|
2700
3124
|
overflow: hidden;
|
|
3125
|
+
}
|
|
3126
|
+
.saltCircularProgress-bufferOverlayRight,
|
|
3127
|
+
.saltCircularProgress-bufferOverlayLeft,
|
|
3128
|
+
.saltCircularProgress-barOverlayRight,
|
|
3129
|
+
.saltCircularProgress-barOverlayLeft {
|
|
3130
|
+
inline-size: 50%;
|
|
3131
|
+
transform: rotate(180deg);
|
|
2701
3132
|
position: absolute;
|
|
2702
3133
|
}
|
|
3134
|
+
.saltCircularProgress-bufferSubOverlayRight,
|
|
3135
|
+
.saltCircularProgress-bufferSubOverlayLeft,
|
|
2703
3136
|
.saltCircularProgress-barSubOverlayRight,
|
|
2704
3137
|
.saltCircularProgress-barSubOverlayLeft {
|
|
2705
3138
|
inline-size: 100%;
|
|
2706
|
-
block-size: 100%;
|
|
2707
|
-
transform-origin: 100% center;
|
|
2708
|
-
overflow: hidden;
|
|
2709
3139
|
transform: rotate(-180deg);
|
|
2710
3140
|
}
|
|
3141
|
+
.saltCircularProgress-bufferOverlayLeft,
|
|
2711
3142
|
.saltCircularProgress-barOverlayLeft {
|
|
2712
3143
|
transform: rotate(0deg);
|
|
2713
3144
|
}
|
|
3145
|
+
.saltCircularProgress-bufferOverlayRight:before,
|
|
3146
|
+
.saltCircularProgress-bufferSubOverlay:before {
|
|
3147
|
+
content: "";
|
|
3148
|
+
background: var(--salt-accent-background);
|
|
3149
|
+
position: absolute;
|
|
3150
|
+
right: 0;
|
|
3151
|
+
width: var(--salt-size-border);
|
|
3152
|
+
height: var(--salt-size-bar-strong);
|
|
3153
|
+
}
|
|
3154
|
+
.saltCircularProgress-bufferOverlayRight:before {
|
|
3155
|
+
bottom: 0;
|
|
3156
|
+
z-index: var(--salt-zIndex-default);
|
|
3157
|
+
}
|
|
2714
3158
|
|
|
2715
3159
|
/* src/progress/LinearProgress/LinearProgress.css */
|
|
2716
3160
|
.saltLinearProgress {
|
|
@@ -2728,23 +3172,34 @@ label.saltText small,
|
|
|
2728
3172
|
overflow: hidden;
|
|
2729
3173
|
height: var(--salt-size-bar-strong);
|
|
2730
3174
|
}
|
|
2731
|
-
.saltLinearProgress-bar
|
|
2732
|
-
|
|
3175
|
+
.saltLinearProgress-bar,
|
|
3176
|
+
.saltLinearProgress-buffer {
|
|
2733
3177
|
position: absolute;
|
|
2734
3178
|
left: 0;
|
|
2735
3179
|
bottom: 0;
|
|
2736
3180
|
top: 0;
|
|
2737
3181
|
transition: transform 0.2s linear;
|
|
2738
3182
|
transform-origin: left;
|
|
3183
|
+
}
|
|
3184
|
+
.saltLinearProgress-buffer {
|
|
3185
|
+
width: 0;
|
|
3186
|
+
background: var(--salt-container-primary-background);
|
|
3187
|
+
outline: solid var(--salt-size-border) var(--salt-accent-background);
|
|
3188
|
+
z-index: var(--salt-zIndex-default);
|
|
3189
|
+
outline-offset: calc(var(--salt-size-border) * -1);
|
|
3190
|
+
}
|
|
3191
|
+
.saltLinearProgress-bar {
|
|
3192
|
+
width: 100%;
|
|
2739
3193
|
background: var(--salt-accent-background);
|
|
2740
|
-
z-index: 2;
|
|
3194
|
+
z-index: calc(var(--salt-zIndex-default) * 2);
|
|
2741
3195
|
}
|
|
2742
3196
|
.saltLinearProgress-track {
|
|
2743
3197
|
background: var(--salt-track-borderColor);
|
|
2744
3198
|
width: 100%;
|
|
2745
|
-
height: var(--salt-size-bar
|
|
3199
|
+
height: var(--salt-size-bar);
|
|
2746
3200
|
position: absolute;
|
|
2747
|
-
top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar
|
|
3201
|
+
top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar)) / 2);
|
|
3202
|
+
right: 0;
|
|
2748
3203
|
transition: transform 0.2s linear;
|
|
2749
3204
|
transform-origin: left;
|
|
2750
3205
|
}
|
|
@@ -2755,4 +3210,4 @@ label.saltText small,
|
|
|
2755
3210
|
padding-left: var(--salt-spacing-100);
|
|
2756
3211
|
}
|
|
2757
3212
|
|
|
2758
|
-
/* src/
|
|
3213
|
+
/* src/d72e8333-4d4c-453e-897f-4d6dd61d6eb3.css */
|
|
@@ -14,6 +14,83 @@ require('../utils/useFloatingUI/useFloatingUI.js');
|
|
|
14
14
|
var useId = require('../utils/useId.js');
|
|
15
15
|
require('../salt-provider/SaltProvider.js');
|
|
16
16
|
require('../viewport/ViewportProvider.js');
|
|
17
|
+
require('./AccordionGroup.js');
|
|
18
|
+
require('./AccordionPanel.js');
|
|
19
|
+
require('./AccordionHeader.js');
|
|
20
|
+
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
21
|
+
require('../avatar/Avatar.js');
|
|
22
|
+
require('../badge/Badge.js');
|
|
23
|
+
require('../banner/Banner.js');
|
|
24
|
+
require('../banner/BannerActions.js');
|
|
25
|
+
require('../banner/BannerContent.js');
|
|
26
|
+
require('../border-item/BorderItem.js');
|
|
27
|
+
require('../border-layout/BorderLayout.js');
|
|
28
|
+
require('../button/Button.js');
|
|
29
|
+
require('../card/Card.js');
|
|
30
|
+
require('../card/InteractableCard.js');
|
|
31
|
+
require('../checkbox/Checkbox.js');
|
|
32
|
+
require('../checkbox/CheckboxGroup.js');
|
|
33
|
+
require('@salt-ds/icons');
|
|
34
|
+
require('../combo-box/ComboBox.js');
|
|
35
|
+
require('../dialog/Dialog.js');
|
|
36
|
+
require('../dialog/DialogHeader.js');
|
|
37
|
+
require('../dialog/DialogActions.js');
|
|
38
|
+
require('../dialog/DialogContent.js');
|
|
39
|
+
require('../dialog/DialogContext.js');
|
|
40
|
+
require('../dialog/DialogCloseButton.js');
|
|
41
|
+
require('../drawer/Drawer.js');
|
|
42
|
+
require('../drawer/DrawerCloseButton.js');
|
|
43
|
+
require('../dropdown/Dropdown.js');
|
|
44
|
+
require('../file-drop-zone/FileDropZone.js');
|
|
45
|
+
require('../file-drop-zone/FileDropZoneIcon.js');
|
|
46
|
+
require('../file-drop-zone/FileDropZoneTrigger.js');
|
|
47
|
+
require('../flex-item/FlexItem.js');
|
|
48
|
+
require('../flex-layout/FlexLayout.js');
|
|
49
|
+
require('../flow-layout/FlowLayout.js');
|
|
50
|
+
require('../form-field/FormField.js');
|
|
51
|
+
require('../status-indicator/StatusIndicator.js');
|
|
52
|
+
require('../text/Text.js');
|
|
53
|
+
require('../text/Code.js');
|
|
54
|
+
require('../text/Display.js');
|
|
55
|
+
require('../text/Headings.js');
|
|
56
|
+
require('../text/Label.js');
|
|
57
|
+
require('../text/TextAction.js');
|
|
58
|
+
require('../text/TextNotation.js');
|
|
59
|
+
require('../form-field-context/FormFieldContext.js');
|
|
60
|
+
require('../grid-item/GridItem.js');
|
|
61
|
+
require('../grid-layout/GridLayout.js');
|
|
62
|
+
require('../input/Input.js');
|
|
63
|
+
require('../link/Link.js');
|
|
64
|
+
require('../link-card/LinkCard.js');
|
|
65
|
+
require('../list-control/ListControlContext.js');
|
|
66
|
+
require('../multiline-input/MultilineInput.js');
|
|
67
|
+
require('../navigation-item/NavigationItem.js');
|
|
68
|
+
require('../option/Option.js');
|
|
69
|
+
require('../option/OptionGroup.js');
|
|
70
|
+
require('../pagination/Pagination.js');
|
|
71
|
+
require('../pagination/Paginator.js');
|
|
72
|
+
require('../pagination/CompactInput.js');
|
|
73
|
+
require('../pagination/CompactPaginator.js');
|
|
74
|
+
require('../pagination/GoToInput.js');
|
|
75
|
+
require('../panel/Panel.js');
|
|
76
|
+
require('../pill/Pill.js');
|
|
77
|
+
require('../progress/CircularProgress/CircularProgress.js');
|
|
78
|
+
require('../progress/LinearProgress/LinearProgress.js');
|
|
79
|
+
require('../radio-button/RadioButton.js');
|
|
80
|
+
require('../radio-button/RadioButtonGroup.js');
|
|
81
|
+
require('../scrim/Scrim.js');
|
|
82
|
+
require('../spinner/Spinner.js');
|
|
83
|
+
require('../stack-layout/StackLayout.js');
|
|
84
|
+
require('../status-adornment/StatusAdornment.js');
|
|
85
|
+
require('../toast/Toast.js');
|
|
86
|
+
require('../toast/ToastContent.js');
|
|
87
|
+
require('../split-layout/SplitLayout.js');
|
|
88
|
+
require('../switch/Switch.js');
|
|
89
|
+
require('../toggle-button/ToggleButton.js');
|
|
90
|
+
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
91
|
+
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
92
|
+
require('../tooltip/Tooltip.js');
|
|
93
|
+
require('@floating-ui/react');
|
|
17
94
|
var Accordion$1 = require('./Accordion.css.js');
|
|
18
95
|
|
|
19
96
|
const withBaseName = makePrefixer.makePrefixer("saltAccordion");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the accordion is toggled.\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n /**\n * The status of the accordion.\n */\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n id: idProp,\n onToggle,\n status,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n disabled: Boolean(disabled),\n id: id ?? \"\",\n status,\n }}\n >\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n {...rest}\n />\n </AccordionContext.Provider>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, SyntheticEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nexport interface AccordionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Callback fired when the accordion is toggled.\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n /**\n * The status of the accordion.\n */\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n id: idProp,\n onToggle,\n status,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n disabled: Boolean(disabled),\n id: id ?? \"\",\n status,\n }}\n >\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n {...rest}\n />\n </AccordionContext.Provider>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,IAAI,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACV,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,UACvC,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|