@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
|
@@ -0,0 +1,410 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useRef, useEffect } from 'react';
|
|
3
|
+
import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
|
|
4
|
+
import { useListControl, defaultValueToString } from '../list-control/ListControlState.js';
|
|
5
|
+
import { makePrefixer } from '../utils/makePrefixer.js';
|
|
6
|
+
import { useFloatingComponent, useFloatingUI } from '../utils/useFloatingUI/useFloatingUI.js';
|
|
7
|
+
import { useForkRef } from '../utils/useForkRef.js';
|
|
8
|
+
import { useId } from '../utils/useId.js';
|
|
9
|
+
import '../salt-provider/SaltProvider.js';
|
|
10
|
+
import '../viewport/ViewportProvider.js';
|
|
11
|
+
import { clsx } from 'clsx';
|
|
12
|
+
import '../accordion/AccordionGroup.js';
|
|
13
|
+
import '../accordion/AccordionPanel.js';
|
|
14
|
+
import '../accordion/Accordion.js';
|
|
15
|
+
import '../accordion/AccordionHeader.js';
|
|
16
|
+
import '../aria-announcer/AriaAnnouncerContext.js';
|
|
17
|
+
import '../avatar/Avatar.js';
|
|
18
|
+
import '../badge/Badge.js';
|
|
19
|
+
import '../banner/Banner.js';
|
|
20
|
+
import '../banner/BannerActions.js';
|
|
21
|
+
import '../banner/BannerContent.js';
|
|
22
|
+
import '../border-item/BorderItem.js';
|
|
23
|
+
import '../border-layout/BorderLayout.js';
|
|
24
|
+
import '../button/Button.js';
|
|
25
|
+
import '../card/Card.js';
|
|
26
|
+
import '../card/InteractableCard.js';
|
|
27
|
+
import '../checkbox/Checkbox.js';
|
|
28
|
+
import '../checkbox/CheckboxGroup.js';
|
|
29
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
30
|
+
import { useWindow } from '@salt-ds/window';
|
|
31
|
+
import '../combo-box/ComboBox.js';
|
|
32
|
+
import '../dialog/Dialog.js';
|
|
33
|
+
import '../dialog/DialogHeader.js';
|
|
34
|
+
import '../dialog/DialogActions.js';
|
|
35
|
+
import '../dialog/DialogContent.js';
|
|
36
|
+
import '../dialog/DialogContext.js';
|
|
37
|
+
import '../dialog/DialogCloseButton.js';
|
|
38
|
+
import '../drawer/Drawer.js';
|
|
39
|
+
import '../drawer/DrawerCloseButton.js';
|
|
40
|
+
import '../file-drop-zone/FileDropZone.js';
|
|
41
|
+
import '../file-drop-zone/FileDropZoneIcon.js';
|
|
42
|
+
import '../file-drop-zone/FileDropZoneTrigger.js';
|
|
43
|
+
import '../flex-item/FlexItem.js';
|
|
44
|
+
import '../flex-layout/FlexLayout.js';
|
|
45
|
+
import '../flow-layout/FlowLayout.js';
|
|
46
|
+
import '../form-field/FormField.js';
|
|
47
|
+
import '../status-indicator/StatusIndicator.js';
|
|
48
|
+
import '../text/Text.js';
|
|
49
|
+
import '../text/Code.js';
|
|
50
|
+
import '../text/Display.js';
|
|
51
|
+
import '../text/Headings.js';
|
|
52
|
+
import '../text/Label.js';
|
|
53
|
+
import '../text/TextAction.js';
|
|
54
|
+
import '../text/TextNotation.js';
|
|
55
|
+
import '../form-field-context/FormFieldContext.js';
|
|
56
|
+
import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
|
|
57
|
+
import '../grid-item/GridItem.js';
|
|
58
|
+
import '../grid-layout/GridLayout.js';
|
|
59
|
+
import '../input/Input.js';
|
|
60
|
+
import '../link/Link.js';
|
|
61
|
+
import '../link-card/LinkCard.js';
|
|
62
|
+
import { ListControlContext } from '../list-control/ListControlContext.js';
|
|
63
|
+
import '../multiline-input/MultilineInput.js';
|
|
64
|
+
import '../navigation-item/NavigationItem.js';
|
|
65
|
+
import '../option/Option.js';
|
|
66
|
+
import '../option/OptionGroup.js';
|
|
67
|
+
import '../pagination/Pagination.js';
|
|
68
|
+
import '../pagination/Paginator.js';
|
|
69
|
+
import '../pagination/CompactInput.js';
|
|
70
|
+
import '../pagination/CompactPaginator.js';
|
|
71
|
+
import '../pagination/GoToInput.js';
|
|
72
|
+
import '../panel/Panel.js';
|
|
73
|
+
import '../pill/Pill.js';
|
|
74
|
+
import '../progress/CircularProgress/CircularProgress.js';
|
|
75
|
+
import '../progress/LinearProgress/LinearProgress.js';
|
|
76
|
+
import '../radio-button/RadioButton.js';
|
|
77
|
+
import '../radio-button/RadioButtonGroup.js';
|
|
78
|
+
import '../scrim/Scrim.js';
|
|
79
|
+
import '../spinner/Spinner.js';
|
|
80
|
+
import '../stack-layout/StackLayout.js';
|
|
81
|
+
import { StatusAdornment } from '../status-adornment/StatusAdornment.js';
|
|
82
|
+
import '../toast/Toast.js';
|
|
83
|
+
import '../toast/ToastContent.js';
|
|
84
|
+
import '../split-layout/SplitLayout.js';
|
|
85
|
+
import '../switch/Switch.js';
|
|
86
|
+
import '../toggle-button/ToggleButton.js';
|
|
87
|
+
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
|
+
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
|
+
import '../tooltip/Tooltip.js';
|
|
90
|
+
import { size, flip, useInteractions, useDismiss, useFocus, useClick } from '@floating-ui/react';
|
|
91
|
+
import css_248z from './Dropdown.css.js';
|
|
92
|
+
import { OptionList } from '../option/OptionList.js';
|
|
93
|
+
|
|
94
|
+
function ExpandIcon({ open }) {
|
|
95
|
+
return open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
|
|
96
|
+
"aria-hidden": true
|
|
97
|
+
}) : /* @__PURE__ */ jsx(ChevronDownIcon, {
|
|
98
|
+
"aria-hidden": true
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
const withBaseName = makePrefixer("saltDropdown");
|
|
102
|
+
const Dropdown = forwardRef(function Dropdown2(props, ref) {
|
|
103
|
+
var _a, _b;
|
|
104
|
+
const {
|
|
105
|
+
"aria-labelledby": ariaLabelledBy,
|
|
106
|
+
"aria-describedby": ariaDescribedBy,
|
|
107
|
+
children,
|
|
108
|
+
className,
|
|
109
|
+
disabled: disabledProp,
|
|
110
|
+
emptyReadOnlyMarker = "\u2014",
|
|
111
|
+
readOnly: readOnlyProp,
|
|
112
|
+
multiselect,
|
|
113
|
+
onSelectionChange,
|
|
114
|
+
selected,
|
|
115
|
+
defaultSelected,
|
|
116
|
+
defaultOpen,
|
|
117
|
+
value,
|
|
118
|
+
onOpenChange,
|
|
119
|
+
open,
|
|
120
|
+
placeholder,
|
|
121
|
+
startAdornment,
|
|
122
|
+
required: requiredProp,
|
|
123
|
+
variant = "primary",
|
|
124
|
+
validationStatus: validationStatusProp,
|
|
125
|
+
onKeyDown,
|
|
126
|
+
onFocus,
|
|
127
|
+
onBlur,
|
|
128
|
+
valueToString = defaultValueToString,
|
|
129
|
+
...rest
|
|
130
|
+
} = props;
|
|
131
|
+
const targetWindow = useWindow();
|
|
132
|
+
useComponentCssInjection({
|
|
133
|
+
testId: "salt-dropdown",
|
|
134
|
+
css: css_248z,
|
|
135
|
+
window: targetWindow
|
|
136
|
+
});
|
|
137
|
+
const {
|
|
138
|
+
a11yProps: {
|
|
139
|
+
"aria-describedby": formFieldDescribedBy,
|
|
140
|
+
"aria-labelledby": formFieldLabelledBy
|
|
141
|
+
} = {},
|
|
142
|
+
disabled: formFieldDisabled,
|
|
143
|
+
readOnly: formFieldReadOnly,
|
|
144
|
+
necessity: formFieldRequired,
|
|
145
|
+
validationStatus: formFieldValidationStatus
|
|
146
|
+
} = useFormFieldProps();
|
|
147
|
+
const disabled = Boolean(disabledProp) || formFieldDisabled;
|
|
148
|
+
const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
|
|
149
|
+
const validationStatus = validationStatusProp != null ? validationStatusProp : formFieldValidationStatus;
|
|
150
|
+
const required = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : requiredProp;
|
|
151
|
+
const listControl = useListControl({
|
|
152
|
+
open,
|
|
153
|
+
defaultOpen,
|
|
154
|
+
onOpenChange,
|
|
155
|
+
multiselect,
|
|
156
|
+
defaultSelected,
|
|
157
|
+
selected,
|
|
158
|
+
onSelectionChange,
|
|
159
|
+
valueToString
|
|
160
|
+
});
|
|
161
|
+
const {
|
|
162
|
+
activeState,
|
|
163
|
+
setActive,
|
|
164
|
+
openState,
|
|
165
|
+
setOpen,
|
|
166
|
+
openKey,
|
|
167
|
+
getOptionAtIndex,
|
|
168
|
+
getIndexOfOption,
|
|
169
|
+
getOptionsMatching,
|
|
170
|
+
getOptionFromSearch,
|
|
171
|
+
options,
|
|
172
|
+
selectedState,
|
|
173
|
+
select,
|
|
174
|
+
setFocusVisibleState,
|
|
175
|
+
focusedState,
|
|
176
|
+
setFocusedState,
|
|
177
|
+
listRef
|
|
178
|
+
} = listControl;
|
|
179
|
+
const selectedValue = selectedState.map((item) => valueToString(item)).join(", ");
|
|
180
|
+
const isEmptyReadOnly = readOnly && selectedValue === "";
|
|
181
|
+
const valueText = isEmptyReadOnly ? emptyReadOnlyMarker : value != null ? value : selectedValue;
|
|
182
|
+
useFloatingComponent();
|
|
183
|
+
const handleOpenChange = (newOpen, _event, reason) => {
|
|
184
|
+
const focusNotBlur = reason === "focus" && newOpen;
|
|
185
|
+
if (readOnly || focusNotBlur)
|
|
186
|
+
return;
|
|
187
|
+
setOpen(newOpen);
|
|
188
|
+
};
|
|
189
|
+
const { x, y, strategy, elements, floating, reference, context } = useFloatingUI({
|
|
190
|
+
open: openState && !readOnly && children != void 0,
|
|
191
|
+
onOpenChange: handleOpenChange,
|
|
192
|
+
placement: "bottom-start",
|
|
193
|
+
middleware: [
|
|
194
|
+
size({
|
|
195
|
+
apply({ rects, elements: elements2, availableHeight }) {
|
|
196
|
+
Object.assign(elements2.floating.style, {
|
|
197
|
+
minWidth: `${rects.reference.width}px`,
|
|
198
|
+
maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
}),
|
|
202
|
+
flip({ fallbackStrategy: "initialPlacement" })
|
|
203
|
+
]
|
|
204
|
+
});
|
|
205
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
206
|
+
useDismiss(context),
|
|
207
|
+
useFocus(context),
|
|
208
|
+
useClick(context)
|
|
209
|
+
]);
|
|
210
|
+
const buttonRef = useRef(null);
|
|
211
|
+
const handleTriggerRef = useForkRef(reference, buttonRef);
|
|
212
|
+
const handleButtonRef = useForkRef(handleTriggerRef, ref);
|
|
213
|
+
const typeaheadString = useRef("");
|
|
214
|
+
const typeaheadTimeout = useRef();
|
|
215
|
+
const handleTypeahead = (event) => {
|
|
216
|
+
if (typeaheadTimeout.current) {
|
|
217
|
+
clearTimeout(typeaheadTimeout.current);
|
|
218
|
+
}
|
|
219
|
+
typeaheadString.current += event.key;
|
|
220
|
+
typeaheadTimeout.current = window.setTimeout(() => {
|
|
221
|
+
typeaheadString.current = "";
|
|
222
|
+
}, 500);
|
|
223
|
+
if (!openState) {
|
|
224
|
+
setOpen(true, "input");
|
|
225
|
+
}
|
|
226
|
+
let newOption = getOptionFromSearch(typeaheadString.current, activeState);
|
|
227
|
+
if (!newOption) {
|
|
228
|
+
newOption = getOptionFromSearch(typeaheadString.current);
|
|
229
|
+
}
|
|
230
|
+
if (newOption) {
|
|
231
|
+
setActive(newOption);
|
|
232
|
+
setFocusVisibleState(true);
|
|
233
|
+
}
|
|
234
|
+
};
|
|
235
|
+
const handleKeyDown = (event) => {
|
|
236
|
+
const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
|
|
237
|
+
const count = options.length - 1;
|
|
238
|
+
if (readOnly) {
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
if (!openState) {
|
|
242
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
243
|
+
setOpen(true, void 0, event.key);
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
|
|
248
|
+
event.preventDefault();
|
|
249
|
+
event.stopPropagation();
|
|
250
|
+
handleTypeahead(event);
|
|
251
|
+
}
|
|
252
|
+
let newActive;
|
|
253
|
+
switch (event.key) {
|
|
254
|
+
case "ArrowDown":
|
|
255
|
+
newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
|
|
256
|
+
break;
|
|
257
|
+
case "ArrowUp":
|
|
258
|
+
newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
|
|
259
|
+
break;
|
|
260
|
+
case "Home":
|
|
261
|
+
newActive = getOptionAtIndex(0);
|
|
262
|
+
break;
|
|
263
|
+
case "End":
|
|
264
|
+
newActive = getOptionAtIndex(count);
|
|
265
|
+
break;
|
|
266
|
+
case "PageUp":
|
|
267
|
+
newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
|
|
268
|
+
break;
|
|
269
|
+
case "PageDown":
|
|
270
|
+
newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
|
|
271
|
+
break;
|
|
272
|
+
case "Enter":
|
|
273
|
+
case " ":
|
|
274
|
+
if (openState && Boolean(activeState == null ? void 0 : activeState.disabled) || typeaheadString.current.trim().length > 0 && event.key === " ") {
|
|
275
|
+
event.preventDefault();
|
|
276
|
+
return;
|
|
277
|
+
}
|
|
278
|
+
if (!openState || !activeState) {
|
|
279
|
+
return;
|
|
280
|
+
}
|
|
281
|
+
event.preventDefault();
|
|
282
|
+
select(event, activeState);
|
|
283
|
+
break;
|
|
284
|
+
case "Tab":
|
|
285
|
+
if (!multiselect && activeState) {
|
|
286
|
+
select(event, activeState);
|
|
287
|
+
}
|
|
288
|
+
break;
|
|
289
|
+
}
|
|
290
|
+
if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
|
|
291
|
+
event.preventDefault();
|
|
292
|
+
setActive(newActive);
|
|
293
|
+
setFocusVisibleState(true);
|
|
294
|
+
}
|
|
295
|
+
onKeyDown == null ? void 0 : onKeyDown(event);
|
|
296
|
+
};
|
|
297
|
+
const handleFocus = (event) => {
|
|
298
|
+
setFocusedState(true);
|
|
299
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
300
|
+
};
|
|
301
|
+
const handleBlur = (event) => {
|
|
302
|
+
setFocusedState(false);
|
|
303
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
304
|
+
};
|
|
305
|
+
const handleListMouseOver = () => {
|
|
306
|
+
setFocusVisibleState(false);
|
|
307
|
+
};
|
|
308
|
+
const handleFocusButton = () => {
|
|
309
|
+
var _a2;
|
|
310
|
+
(_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
|
|
311
|
+
};
|
|
312
|
+
useEffect(() => {
|
|
313
|
+
const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
|
|
314
|
+
let newActive = void 0;
|
|
315
|
+
if (activeIndex > 0) {
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
if (!openState) {
|
|
319
|
+
setActive(void 0);
|
|
320
|
+
return;
|
|
321
|
+
}
|
|
322
|
+
if (selectedState.length > 0) {
|
|
323
|
+
newActive = getOptionsMatching(
|
|
324
|
+
(option) => option.value === selectedState[0]
|
|
325
|
+
).pop();
|
|
326
|
+
}
|
|
327
|
+
if (!newActive) {
|
|
328
|
+
if (openKey.current === "ArrowDown") {
|
|
329
|
+
newActive = getOptionAtIndex(0);
|
|
330
|
+
} else if (openKey.current === "ArrowUp") {
|
|
331
|
+
newActive = getOptionAtIndex(options.length - 1);
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
if (!newActive) {
|
|
335
|
+
newActive = getOptionAtIndex(0);
|
|
336
|
+
}
|
|
337
|
+
setActive(newActive);
|
|
338
|
+
}, [openState, children]);
|
|
339
|
+
const listId = useId();
|
|
340
|
+
const handleListRef = useForkRef(listRef, floating);
|
|
341
|
+
return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
|
|
342
|
+
value: listControl,
|
|
343
|
+
children: [
|
|
344
|
+
/* @__PURE__ */ jsxs("button", {
|
|
345
|
+
className: clsx(
|
|
346
|
+
withBaseName(),
|
|
347
|
+
withBaseName(variant),
|
|
348
|
+
{
|
|
349
|
+
[withBaseName("disabled")]: disabled,
|
|
350
|
+
[withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus
|
|
351
|
+
},
|
|
352
|
+
className
|
|
353
|
+
),
|
|
354
|
+
ref: handleButtonRef,
|
|
355
|
+
role: "combobox",
|
|
356
|
+
type: "button",
|
|
357
|
+
disabled,
|
|
358
|
+
"aria-readonly": readOnly ? "true" : void 0,
|
|
359
|
+
"aria-required": required ? "true" : void 0,
|
|
360
|
+
"aria-expanded": openState,
|
|
361
|
+
"aria-activedescendant": activeState == null ? void 0 : activeState.id,
|
|
362
|
+
"aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
|
|
363
|
+
"aria-describedby": clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
|
|
364
|
+
"aria-multiselectable": multiselect,
|
|
365
|
+
"aria-controls": openState ? listId : void 0,
|
|
366
|
+
...getReferenceProps({
|
|
367
|
+
onKeyDown: handleKeyDown,
|
|
368
|
+
onFocus: handleFocus,
|
|
369
|
+
onBlur: handleBlur,
|
|
370
|
+
...rest
|
|
371
|
+
}),
|
|
372
|
+
children: [
|
|
373
|
+
startAdornment,
|
|
374
|
+
/* @__PURE__ */ jsx("span", {
|
|
375
|
+
className: clsx(withBaseName("content"), {
|
|
376
|
+
[withBaseName("placeholder")]: !valueText
|
|
377
|
+
}),
|
|
378
|
+
children: !valueText ? placeholder : valueText
|
|
379
|
+
}),
|
|
380
|
+
validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
|
|
381
|
+
status: validationStatus
|
|
382
|
+
}),
|
|
383
|
+
!readOnly && /* @__PURE__ */ jsx(ExpandIcon, {
|
|
384
|
+
open: openState
|
|
385
|
+
})
|
|
386
|
+
]
|
|
387
|
+
}),
|
|
388
|
+
/* @__PURE__ */ jsx(OptionList, {
|
|
389
|
+
open: (openState || focusedState) && !readOnly && children != void 0,
|
|
390
|
+
...getFloatingProps({
|
|
391
|
+
onMouseOver: handleListMouseOver,
|
|
392
|
+
onFocus: handleFocusButton,
|
|
393
|
+
onClick: handleFocusButton
|
|
394
|
+
}),
|
|
395
|
+
left: x != null ? x : 0,
|
|
396
|
+
top: y != null ? y : 0,
|
|
397
|
+
position: strategy,
|
|
398
|
+
width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
|
|
399
|
+
height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
|
|
400
|
+
ref: handleListRef,
|
|
401
|
+
id: listId,
|
|
402
|
+
collapsed: !openState,
|
|
403
|
+
children
|
|
404
|
+
})
|
|
405
|
+
]
|
|
406
|
+
});
|
|
407
|
+
});
|
|
408
|
+
|
|
409
|
+
export { Dropdown };
|
|
410
|
+
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n ReactNode,\n KeyboardEvent,\n useEffect,\n FocusEvent,\n useRef,\n ForwardedRef,\n Ref,\n} from \"react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n ListControlProps,\n useListControl,\n defaultValueToString,\n} from \"../list-control/ListControlState\";\nimport {\n makePrefixer,\n useFloatingComponent,\n useFloatingUI,\n UseFloatingUIProps,\n useForkRef,\n useId,\n} from \"../utils\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n flip,\n size,\n useClick,\n useDismiss,\n useFocus,\n useInteractions,\n} from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dropdownCss from \"./Dropdown.css\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport type DropdownProps<Item = string> = {\n /**\n * If `true`, the dropdown will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the dropdown will be read-only.\n */\n readOnly?: boolean;\n /**\n * The options to display in the dropdown.\n */\n children?: ReactNode;\n /**\n * The marker to use in an empty read only dropdown.\n * Use `''` to disable this feature. Defaults to '—'.\n */\n emptyReadOnlyMarker?: string;\n /**\n * If `true`, the dropdown will be multiselect.\n */\n multiselect?: boolean;\n /**\n * The text shown when the dropdown has no value.\n */\n placeholder?: string;\n /**\n * If `true`, the dropdown will be required.\n */\n required?: boolean;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n */\n value?: string;\n /**\n * Validation status, one of \"error\" | \"warning\" | \"success\".\n */\n validationStatus?: Exclude<ValidationStatus, \"info\">;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n ListControlProps<Item>;\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n props: DropdownProps<Item>,\n ref: ForwardedRef<HTMLButtonElement>\n) {\n const {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n children,\n className,\n disabled: disabledProp,\n emptyReadOnlyMarker = \"—\",\n readOnly: readOnlyProp,\n multiselect,\n onSelectionChange,\n selected,\n defaultSelected,\n defaultOpen,\n value,\n onOpenChange,\n open,\n placeholder,\n startAdornment,\n required: requiredProp,\n variant = \"primary\",\n validationStatus: validationStatusProp,\n onKeyDown,\n onFocus,\n onBlur,\n valueToString = defaultValueToString,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = Boolean(disabledProp) || formFieldDisabled;\n const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n const required = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : undefined ?? requiredProp;\n const listControl = useListControl<Item>({\n open,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n });\n\n const {\n activeState,\n setActive,\n openState,\n setOpen,\n openKey,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n options,\n selectedState,\n select,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const selectedValue = selectedState\n .map((item) => valueToString(item))\n .join(\", \");\n const isEmptyReadOnly = readOnly && selectedValue === \"\";\n const valueText = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : value ?? selectedValue;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n newOpen,\n _event,\n reason\n ) => {\n const focusNotBlur = reason === \"focus\" && newOpen;\n if (readOnly || focusNotBlur) return;\n setOpen(newOpen);\n };\n\n const { x, y, strategy, elements, floating, reference, context } =\n useFloatingUI({\n open: openState && !readOnly && children != undefined,\n onOpenChange: handleOpenChange,\n placement: \"bottom-start\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useFocus(context),\n useClick(context),\n ]);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n if (!openState) {\n setOpen(true, \"input\");\n }\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n const count = options.length - 1;\n\n if (readOnly) {\n return;\n }\n\n if (!openState) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n setOpen(true, undefined, event.key);\n return;\n }\n }\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n let newActive;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n break;\n case \"ArrowUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n break;\n case \"Home\":\n newActive = getOptionAtIndex(0);\n break;\n case \"End\":\n newActive = getOptionAtIndex(count);\n break;\n case \"PageUp\":\n newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n break;\n case \"PageDown\":\n newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n break;\n case \"Enter\":\n case \" \":\n if (\n (openState && Boolean(activeState?.disabled)) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!openState || !activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n case \"Tab\":\n if (!multiselect && activeState) {\n select(event, activeState);\n }\n break;\n }\n\n if (newActive && newActive?.id != activeState?.id) {\n event.preventDefault();\n setActive(newActive);\n setFocusVisibleState(true);\n }\n\n onKeyDown?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n setFocusedState(false);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n };\n\n const handleFocusButton = () => {\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If the list is closed we should clear the active item\n if (!openState) {\n setActive(undefined);\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0]\n ).pop();\n }\n\n // If we still don't have an active item, we should check if the list has been opened with the keyboard\n if (!newActive) {\n if (openKey.current === \"ArrowDown\") {\n newActive = getOptionAtIndex(0);\n } else if (openKey.current === \"ArrowUp\") {\n newActive = getOptionAtIndex(options.length - 1);\n }\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive);\n /* eslint-disable-next-line react-hooks/exhaustive-deps -- We only want this to run when the list's openState or the displayed options change */\n }, [openState, children]);\n\n const listId = useId();\n\n const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <button\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className\n )}\n ref={handleButtonRef}\n role=\"combobox\"\n type=\"button\"\n disabled={disabled}\n aria-readonly={readOnly ? \"true\" : undefined}\n aria-required={required ? \"true\" : undefined}\n aria-expanded={openState}\n aria-activedescendant={activeState?.id}\n aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n aria-describedby={\n clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n }\n aria-multiselectable={multiselect}\n aria-controls={openState ? listId : undefined}\n {...getReferenceProps({\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ...rest,\n })}\n >\n {startAdornment}\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"placeholder\")]: !valueText,\n })}\n >\n {!valueText ? placeholder : valueText}\n </span>\n {validationStatus && <StatusAdornment status={validationStatus} />}\n {!readOnly && <ExpandIcon open={openState} />}\n </button>\n <OptionList\n open={(openState || focusedState) && !readOnly && children != undefined}\n {...getFloatingProps({\n onMouseOver: handleListMouseOver,\n onFocus: handleFocusButton,\n onClick: handleFocusButton,\n })}\n left={x ?? 0}\n top={y ?? 0}\n position={strategy}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n ref={handleListRef}\n id={listId}\n collapsed={!openState}\n >\n {children}\n </OptionList>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> }\n) => JSX.Element;\n"],"names":["Dropdown","dropdownCss","elements","_a"],"mappings":"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"}
|
|
@@ -11,6 +11,83 @@ import { useForkRef } from '../utils/useForkRef.js';
|
|
|
11
11
|
import '../utils/useId.js';
|
|
12
12
|
import '../salt-provider/SaltProvider.js';
|
|
13
13
|
import '../viewport/ViewportProvider.js';
|
|
14
|
+
import '../accordion/AccordionGroup.js';
|
|
15
|
+
import '../accordion/AccordionPanel.js';
|
|
16
|
+
import '../accordion/Accordion.js';
|
|
17
|
+
import '../accordion/AccordionHeader.js';
|
|
18
|
+
import '../aria-announcer/AriaAnnouncerContext.js';
|
|
19
|
+
import '../avatar/Avatar.js';
|
|
20
|
+
import '../badge/Badge.js';
|
|
21
|
+
import '../banner/Banner.js';
|
|
22
|
+
import '../banner/BannerActions.js';
|
|
23
|
+
import '../banner/BannerContent.js';
|
|
24
|
+
import '../border-item/BorderItem.js';
|
|
25
|
+
import '../border-layout/BorderLayout.js';
|
|
26
|
+
import '../button/Button.js';
|
|
27
|
+
import '../card/Card.js';
|
|
28
|
+
import '../card/InteractableCard.js';
|
|
29
|
+
import '../checkbox/Checkbox.js';
|
|
30
|
+
import '../checkbox/CheckboxGroup.js';
|
|
31
|
+
import '@salt-ds/icons';
|
|
32
|
+
import '../combo-box/ComboBox.js';
|
|
33
|
+
import '../dialog/Dialog.js';
|
|
34
|
+
import '../dialog/DialogHeader.js';
|
|
35
|
+
import '../dialog/DialogActions.js';
|
|
36
|
+
import '../dialog/DialogContent.js';
|
|
37
|
+
import '../dialog/DialogContext.js';
|
|
38
|
+
import '../dialog/DialogCloseButton.js';
|
|
39
|
+
import '../drawer/Drawer.js';
|
|
40
|
+
import '../drawer/DrawerCloseButton.js';
|
|
41
|
+
import '../dropdown/Dropdown.js';
|
|
42
|
+
import './FileDropZoneIcon.js';
|
|
43
|
+
import './FileDropZoneTrigger.js';
|
|
44
|
+
import '../flex-item/FlexItem.js';
|
|
45
|
+
import '../flex-layout/FlexLayout.js';
|
|
46
|
+
import '../flow-layout/FlowLayout.js';
|
|
47
|
+
import '../form-field/FormField.js';
|
|
48
|
+
import '../status-indicator/StatusIndicator.js';
|
|
49
|
+
import '../text/Text.js';
|
|
50
|
+
import '../text/Code.js';
|
|
51
|
+
import '../text/Display.js';
|
|
52
|
+
import '../text/Headings.js';
|
|
53
|
+
import '../text/Label.js';
|
|
54
|
+
import '../text/TextAction.js';
|
|
55
|
+
import '../text/TextNotation.js';
|
|
56
|
+
import '../form-field-context/FormFieldContext.js';
|
|
57
|
+
import '../grid-item/GridItem.js';
|
|
58
|
+
import '../grid-layout/GridLayout.js';
|
|
59
|
+
import '../input/Input.js';
|
|
60
|
+
import '../link/Link.js';
|
|
61
|
+
import '../link-card/LinkCard.js';
|
|
62
|
+
import '../list-control/ListControlContext.js';
|
|
63
|
+
import '../multiline-input/MultilineInput.js';
|
|
64
|
+
import '../navigation-item/NavigationItem.js';
|
|
65
|
+
import '../option/Option.js';
|
|
66
|
+
import '../option/OptionGroup.js';
|
|
67
|
+
import '../pagination/Pagination.js';
|
|
68
|
+
import '../pagination/Paginator.js';
|
|
69
|
+
import '../pagination/CompactInput.js';
|
|
70
|
+
import '../pagination/CompactPaginator.js';
|
|
71
|
+
import '../pagination/GoToInput.js';
|
|
72
|
+
import '../panel/Panel.js';
|
|
73
|
+
import '../pill/Pill.js';
|
|
74
|
+
import '../progress/CircularProgress/CircularProgress.js';
|
|
75
|
+
import '../progress/LinearProgress/LinearProgress.js';
|
|
76
|
+
import '../radio-button/RadioButton.js';
|
|
77
|
+
import '../radio-button/RadioButtonGroup.js';
|
|
78
|
+
import '../scrim/Scrim.js';
|
|
79
|
+
import '../spinner/Spinner.js';
|
|
80
|
+
import '../stack-layout/StackLayout.js';
|
|
81
|
+
import '../status-adornment/StatusAdornment.js';
|
|
82
|
+
import '../toast/Toast.js';
|
|
83
|
+
import '../toast/ToastContent.js';
|
|
84
|
+
import '../split-layout/SplitLayout.js';
|
|
85
|
+
import '../switch/Switch.js';
|
|
86
|
+
import '../toggle-button/ToggleButton.js';
|
|
87
|
+
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
|
+
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
|
+
import '../tooltip/Tooltip.js';
|
|
90
|
+
import '@floating-ui/react';
|
|
14
91
|
|
|
15
92
|
const withBaseName = makePrefixer("saltFileDropZone");
|
|
16
93
|
const FileDropZone = forwardRef(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n DragEventHandler,\n forwardRef,\n DragEvent,\n useRef,\n useState,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n DragEventHandler,\n forwardRef,\n DragEvent,\n useRef,\n useState,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"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"}
|
|
@@ -6,7 +6,85 @@ import '../utils/useId.js';
|
|
|
6
6
|
import '../salt-provider/SaltProvider.js';
|
|
7
7
|
import '../viewport/ViewportProvider.js';
|
|
8
8
|
import 'clsx';
|
|
9
|
+
import '../accordion/AccordionGroup.js';
|
|
10
|
+
import '../accordion/AccordionPanel.js';
|
|
11
|
+
import '../accordion/Accordion.js';
|
|
12
|
+
import '../accordion/AccordionHeader.js';
|
|
13
|
+
import '../aria-announcer/AriaAnnouncerContext.js';
|
|
14
|
+
import '../avatar/Avatar.js';
|
|
15
|
+
import '../badge/Badge.js';
|
|
16
|
+
import '../banner/Banner.js';
|
|
17
|
+
import '../banner/BannerActions.js';
|
|
18
|
+
import '../banner/BannerContent.js';
|
|
19
|
+
import '../border-item/BorderItem.js';
|
|
20
|
+
import '../border-layout/BorderLayout.js';
|
|
9
21
|
import { Button } from '../button/Button.js';
|
|
22
|
+
import '../card/Card.js';
|
|
23
|
+
import '../card/InteractableCard.js';
|
|
24
|
+
import '../checkbox/Checkbox.js';
|
|
25
|
+
import '../checkbox/CheckboxGroup.js';
|
|
26
|
+
import '@salt-ds/styles';
|
|
27
|
+
import '@salt-ds/window';
|
|
28
|
+
import '@salt-ds/icons';
|
|
29
|
+
import '../combo-box/ComboBox.js';
|
|
30
|
+
import '../dialog/Dialog.js';
|
|
31
|
+
import '../dialog/DialogHeader.js';
|
|
32
|
+
import '../dialog/DialogActions.js';
|
|
33
|
+
import '../dialog/DialogContent.js';
|
|
34
|
+
import '../dialog/DialogContext.js';
|
|
35
|
+
import '../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../drawer/Drawer.js';
|
|
37
|
+
import '../drawer/DrawerCloseButton.js';
|
|
38
|
+
import '../dropdown/Dropdown.js';
|
|
39
|
+
import './FileDropZone.js';
|
|
40
|
+
import './FileDropZoneIcon.js';
|
|
41
|
+
import '../flex-item/FlexItem.js';
|
|
42
|
+
import '../flex-layout/FlexLayout.js';
|
|
43
|
+
import '../flow-layout/FlowLayout.js';
|
|
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';
|
|
53
|
+
import '../form-field-context/FormFieldContext.js';
|
|
54
|
+
import '../grid-item/GridItem.js';
|
|
55
|
+
import '../grid-layout/GridLayout.js';
|
|
56
|
+
import '../input/Input.js';
|
|
57
|
+
import '../link/Link.js';
|
|
58
|
+
import '../link-card/LinkCard.js';
|
|
59
|
+
import '../list-control/ListControlContext.js';
|
|
60
|
+
import '../multiline-input/MultilineInput.js';
|
|
61
|
+
import '../navigation-item/NavigationItem.js';
|
|
62
|
+
import '../option/Option.js';
|
|
63
|
+
import '../option/OptionGroup.js';
|
|
64
|
+
import '../pagination/Pagination.js';
|
|
65
|
+
import '../pagination/Paginator.js';
|
|
66
|
+
import '../pagination/CompactInput.js';
|
|
67
|
+
import '../pagination/CompactPaginator.js';
|
|
68
|
+
import '../pagination/GoToInput.js';
|
|
69
|
+
import '../panel/Panel.js';
|
|
70
|
+
import '../pill/Pill.js';
|
|
71
|
+
import '../progress/CircularProgress/CircularProgress.js';
|
|
72
|
+
import '../progress/LinearProgress/LinearProgress.js';
|
|
73
|
+
import '../radio-button/RadioButton.js';
|
|
74
|
+
import '../radio-button/RadioButtonGroup.js';
|
|
75
|
+
import '../scrim/Scrim.js';
|
|
76
|
+
import '../spinner/Spinner.js';
|
|
77
|
+
import '../stack-layout/StackLayout.js';
|
|
78
|
+
import '../status-adornment/StatusAdornment.js';
|
|
79
|
+
import '../toast/Toast.js';
|
|
80
|
+
import '../toast/ToastContent.js';
|
|
81
|
+
import '../split-layout/SplitLayout.js';
|
|
82
|
+
import '../switch/Switch.js';
|
|
83
|
+
import '../toggle-button/ToggleButton.js';
|
|
84
|
+
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
|
+
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
|
+
import '../tooltip/Tooltip.js';
|
|
87
|
+
import '@floating-ui/react';
|
|
10
88
|
|
|
11
89
|
const FileDropZoneTrigger = forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
|
|
12
90
|
const buttonRef = useRef(null);
|