@salt-ds/core 1.22.0 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/salt-core.css +201 -96
- package/dist-cjs/accordion/Accordion.js +9 -2
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +9 -2
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +9 -2
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +10 -2
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +9 -2
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +9 -2
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +9 -2
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +9 -2
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +9 -2
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +9 -2
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +9 -2
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +9 -2
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +9 -2
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +9 -2
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/button/Button.js +9 -2
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +9 -2
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +10 -3
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +9 -2
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +9 -2
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +9 -2
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +8 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +9 -2
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +10 -3
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +9 -2
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +12 -3
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +9 -2
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +9 -2
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +8 -1
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +9 -2
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +9 -2
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +9 -2
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +9 -2
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +9 -2
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +9 -2
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +9 -2
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +9 -2
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +9 -2
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +9 -2
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +9 -2
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +9 -2
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +19 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +9 -2
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +6 -0
- package/dist-cjs/interactable-card/InteractableCard.js +201 -0
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.css.js +6 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.css.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js +232 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +107 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -0
- package/dist-cjs/{card → interactable-card}/useInteractableCard.js +5 -2
- package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -0
- package/dist-cjs/link/Link.js +9 -2
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.css.js +1 -1
- package/dist-cjs/link-card/LinkCard.js +9 -2
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +9 -2
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +9 -2
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +9 -2
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +9 -2
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.js +9 -2
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js +9 -2
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +9 -2
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +9 -2
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +164 -0
- package/dist-cjs/overlay/Overlay.js.map +1 -0
- package/dist-cjs/overlay/OverlayContext.js +127 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanel.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanel.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanel.js +166 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +129 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelContent.css.js +6 -0
- package/dist-cjs/overlay/OverlayPanelContent.css.js.map +1 -0
- package/dist-cjs/{card/InteractableCard.js → overlay/OverlayPanelContent.js} +24 -44
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -0
- package/dist-cjs/overlay/OverlayTrigger.js +123 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -0
- package/dist-cjs/pagination/CompactInput.js +9 -2
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +9 -2
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +9 -2
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +9 -2
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +9 -2
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +9 -2
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +9 -2
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +9 -2
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/pill/Pill.js +10 -2
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +9 -2
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +9 -2
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +11 -4
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +10 -3
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +9 -2
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +9 -2
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +9 -2
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +9 -2
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +9 -2
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js +6 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +118 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-cjs/spinner/Spinner.js +9 -2
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +9 -2
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +9 -2
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +9 -2
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +9 -2
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +9 -2
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +10 -2
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Text.js +9 -2
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +9 -2
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +9 -2
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +10 -2
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +9 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +9 -2
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +15 -3
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +9 -2
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +9 -2
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +8 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +3 -5
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +9 -2
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +9 -2
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +9 -2
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +9 -2
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +9 -2
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +10 -2
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +9 -2
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +9 -2
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +9 -2
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +9 -2
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +9 -2
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +9 -2
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +9 -2
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +9 -2
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +9 -2
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +9 -2
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/button/Button.js +9 -2
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +9 -2
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +10 -3
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +9 -2
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +9 -2
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +9 -2
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +8 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +9 -2
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +10 -3
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +9 -2
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +12 -3
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +9 -2
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +9 -2
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +8 -1
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +9 -2
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +9 -2
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +9 -2
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +9 -2
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +9 -2
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +9 -2
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +9 -2
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +9 -2
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +9 -2
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +9 -2
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +9 -2
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +9 -2
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +9 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +9 -2
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +4 -0
- package/dist-es/interactable-card/InteractableCard.js +197 -0
- package/dist-es/interactable-card/InteractableCard.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.css.js +4 -0
- package/dist-es/interactable-card/InteractableCardGroup.css.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.js +228 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js +102 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -0
- package/dist-es/{card → interactable-card}/useInteractableCard.js +5 -2
- package/dist-es/interactable-card/useInteractableCard.js.map +1 -0
- package/dist-es/link/Link.js +9 -2
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.css.js +1 -1
- package/dist-es/link-card/LinkCard.js +9 -2
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +9 -2
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +9 -2
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +9 -2
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +9 -2
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.js +9 -2
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js +9 -2
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +9 -2
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +9 -2
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +160 -0
- package/dist-es/overlay/Overlay.js.map +1 -0
- package/dist-es/overlay/OverlayContext.js +122 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -0
- package/dist-es/overlay/OverlayPanel.css.js +4 -0
- package/dist-es/overlay/OverlayPanel.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanel.js +162 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -0
- package/dist-es/overlay/OverlayPanelCloseButton.css.js +4 -0
- package/dist-es/overlay/OverlayPanelCloseButton.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js +121 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -0
- package/dist-es/overlay/OverlayPanelContent.css.js +4 -0
- package/dist-es/overlay/OverlayPanelContent.css.js.map +1 -0
- package/dist-es/overlay/OverlayPanelContent.js +115 -0
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -0
- package/dist-es/overlay/OverlayTrigger.js +119 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -0
- package/dist-es/pagination/CompactInput.js +9 -2
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +9 -2
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +9 -2
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +9 -2
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +9 -2
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +9 -2
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +9 -2
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +9 -2
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/pill/Pill.js +10 -2
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +9 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +9 -2
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +11 -4
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +10 -3
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +9 -2
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +9 -2
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +9 -2
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +9 -2
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +9 -2
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js +4 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.css.js.map +1 -0
- package/dist-es/{card/InteractableCard.js → segmented-button-group/SegmentedButtonGroup.js} +20 -45
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -0
- package/dist-es/spinner/Spinner.js +9 -2
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +9 -2
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +9 -2
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +9 -2
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +9 -2
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +9 -2
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +10 -2
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Text.js +9 -2
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +9 -2
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +9 -2
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +10 -2
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +9 -2
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +9 -2
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +15 -3
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +9 -2
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +9 -2
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +8 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +3 -5
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +9 -2
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +9 -2
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/card/index.d.ts +0 -1
- package/dist-types/index.d.ts +3 -0
- package/dist-types/{card → interactable-card}/InteractableCard.d.ts +15 -1
- package/dist-types/interactable-card/InteractableCardGroup.d.ts +27 -0
- package/dist-types/interactable-card/InteractableCardGroupContext.d.ts +12 -0
- package/dist-types/interactable-card/index.d.ts +3 -0
- package/dist-types/overlay/Overlay.d.ts +13 -0
- package/dist-types/overlay/OverlayContext.d.ts +21 -0
- package/dist-types/overlay/OverlayPanel.d.ts +8 -0
- package/dist-types/overlay/OverlayPanelCloseButton.d.ts +2 -0
- package/dist-types/overlay/OverlayPanelContent.d.ts +8 -0
- package/dist-types/overlay/OverlayTrigger.d.ts +5 -0
- package/dist-types/overlay/index.d.ts +5 -0
- package/dist-types/segmented-button-group/SegmentedButtonGroup.d.ts +4 -0
- package/dist-types/segmented-button-group/index.d.ts +1 -0
- package/dist-types/tooltip/Tooltip.d.ts +2 -1
- package/dist-types/tooltip/TooltipBase.d.ts +2 -2
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -1
- package/package.json +2 -2
- package/dist-cjs/card/InteractableCard.css.js +0 -6
- package/dist-cjs/card/InteractableCard.js.map +0 -1
- package/dist-cjs/card/useInteractableCard.js.map +0 -1
- package/dist-es/card/InteractableCard.css.js +0 -4
- package/dist-es/card/InteractableCard.js.map +0 -1
- package/dist-es/card/useInteractableCard.js.map +0 -1
- /package/dist-cjs/{card → interactable-card}/InteractableCard.css.js.map +0 -0
- /package/dist-es/{card → interactable-card}/InteractableCard.css.js.map +0 -0
- /package/dist-types/{card → interactable-card}/useInteractableCard.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport { useForkRef } from \"../utils\";\nimport { Button } from \"../button\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["FileDropZoneTrigger"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport { useForkRef } from \"../utils\";\nimport { Button } from \"../button\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["FileDropZoneTrigger"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,IAC7D,GACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA,CAAA;AAClD,EAAM,MAAA,UAAA,GAAa,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAI5C,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AA7C/D,IAAA,IAAA,EAAA,CAAA;AA8CI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAlDpE,IAAA,IAAA,EAAA,CAAA;AAmDI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAvDpE,IAAA,IAAA,EAAA,CAAA;AAwDI,IAAM,MAAA,KAAA,GAAQ,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,OAA4B,KAAlC,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAE,CAAA,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AACA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,QAAA,IAAA,IAAA,GAAA,QAAA,GAAA,cAAA;AAAA,OACf,CAAA;AAAA,sBACC,GAAA,CAAA,OAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,SAAU,EAAA,cAAA;AAAA,QACV,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,GAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,OACP,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -19,7 +19,6 @@ import '../border-item/BorderItem.js';
|
|
|
19
19
|
import '../border-layout/BorderLayout.js';
|
|
20
20
|
import '../button/Button.js';
|
|
21
21
|
import '../card/Card.js';
|
|
22
|
-
import '../card/InteractableCard.js';
|
|
23
22
|
import '../checkbox/Checkbox.js';
|
|
24
23
|
import '../checkbox/CheckboxGroup.js';
|
|
25
24
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -54,6 +53,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
54
53
|
import '../grid-item/GridItem.js';
|
|
55
54
|
import '../grid-layout/GridLayout.js';
|
|
56
55
|
import '../input/Input.js';
|
|
56
|
+
import '../interactable-card/InteractableCard.js';
|
|
57
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
59
|
import '../link/Link.js';
|
|
58
60
|
import '../link-card/LinkCard.js';
|
|
59
61
|
import '../list-control/ListControlContext.js';
|
|
@@ -61,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
61
63
|
import '../navigation-item/NavigationItem.js';
|
|
62
64
|
import '../option/Option.js';
|
|
63
65
|
import '../option/OptionGroup.js';
|
|
66
|
+
import '../overlay/OverlayContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../overlay/OverlayPanel.js';
|
|
69
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
70
|
+
import '../overlay/OverlayPanelContent.js';
|
|
64
71
|
import '../pagination/Pagination.js';
|
|
65
72
|
import '../pagination/Paginator.js';
|
|
66
73
|
import '../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../radio-button/RadioButton.js';
|
|
74
81
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../scrim/Scrim.js';
|
|
83
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../spinner/Spinner.js';
|
|
77
85
|
import '../stack-layout/StackLayout.js';
|
|
78
86
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import '../viewport/ViewportProvider.js';
|
|
89
96
|
import css_248z from './FlexItem.css.js';
|
|
90
97
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement, CSSProperties } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport flexItemCss from \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = (typeof FLEX_ITEM_ALIGNMENTS)[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Sets the initial main size of a flex item, default is \"auto\".\n */\n basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\n }\n >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n shrink,\n grow,\n basis,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-flex-item\",\n css: flexItemCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n const flexItemShrink = useResponsiveProp(shrink, 1);\n const flexItemGrow = useResponsiveProp(grow, 0);\n const flexItemBasis = useResponsiveProp(basis, \"auto\");\n\n const itemStyle = {\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n \"--saltFlexItem-basis\": flexItemBasis,\n ...style,\n };\n return (\n <Component\n className={clsx(withBaseName(), className)}\n ref={ref}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["flexItemCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement, CSSProperties } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport flexItemCss from \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = (typeof FLEX_ITEM_ALIGNMENTS)[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Sets the initial main size of a flex item, default is \"auto\".\n */\n basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\n }\n >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n shrink,\n grow,\n basis,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-flex-item\",\n css: flexItemCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n const flexItemShrink = useResponsiveProp(shrink, 1);\n const flexItemGrow = useResponsiveProp(grow, 0);\n const flexItemBasis = useResponsiveProp(basis, \"auto\");\n\n const itemStyle = {\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n \"--saltFlexItem-basis\": flexItemBasis,\n ...style,\n };\n return (\n <Component\n className={clsx(withBaseName(), className)}\n ref={ref}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["flexItemCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA+BO,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,cAAA,GAAiB,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAe,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAC9C,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAErD,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,sBAAwB,EAAA,aAAA;AAAA,MACxB,GAAG,KAAA;AAAA,KACL,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -19,7 +19,6 @@ import '../border-item/BorderItem.js';
|
|
|
19
19
|
import '../border-layout/BorderLayout.js';
|
|
20
20
|
import '../button/Button.js';
|
|
21
21
|
import '../card/Card.js';
|
|
22
|
-
import '../card/InteractableCard.js';
|
|
23
22
|
import '../checkbox/Checkbox.js';
|
|
24
23
|
import '../checkbox/CheckboxGroup.js';
|
|
25
24
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -54,6 +53,9 @@ import '../form-field-context/FormFieldContext.js';
|
|
|
54
53
|
import '../grid-item/GridItem.js';
|
|
55
54
|
import '../grid-layout/GridLayout.js';
|
|
56
55
|
import '../input/Input.js';
|
|
56
|
+
import '../interactable-card/InteractableCard.js';
|
|
57
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
59
|
import '../link/Link.js';
|
|
58
60
|
import '../link-card/LinkCard.js';
|
|
59
61
|
import '../list-control/ListControlContext.js';
|
|
@@ -61,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
61
63
|
import '../navigation-item/NavigationItem.js';
|
|
62
64
|
import '../option/Option.js';
|
|
63
65
|
import '../option/OptionGroup.js';
|
|
66
|
+
import '../overlay/OverlayContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../overlay/OverlayPanel.js';
|
|
69
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
70
|
+
import '../overlay/OverlayPanelContent.js';
|
|
64
71
|
import '../pagination/Pagination.js';
|
|
65
72
|
import '../pagination/Paginator.js';
|
|
66
73
|
import '../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../radio-button/RadioButton.js';
|
|
74
81
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../scrim/Scrim.js';
|
|
83
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../spinner/Spinner.js';
|
|
77
85
|
import '../stack-layout/StackLayout.js';
|
|
78
86
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import '../viewport/ViewportProvider.js';
|
|
89
96
|
import css_248z from './FlexLayout.css.js';
|
|
90
97
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport flexLayoutCss from \"./FlexLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n ...FLEX_ALIGNMENT_BASE,\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];\nexport type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexAlignment | \"stretch\" | \"baseline\";\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the alignment along the main axis, default is \"start\".\n */\n justify?: FlexContentAlignment;\n /**\n * **Deprecated:** For separators see `StackLayout` component instead.\n *\n * Adds a separator between elements if wrap is not active, default is false.\n */\n separators?: LayoutSeparator | true;\n /**\n * Allow the items to wrap as needed, default is false.\n */\n wrap?: ResponsiveProp<boolean>;\n }\n >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n props: FlexLayoutProps<T>\n) => ReactElement | null;\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n direction,\n gap,\n justify,\n separators,\n style,\n wrap,\n ...rest\n }: FlexLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-flex-layout\",\n css: flexLayoutCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n const separatorAlignment = separators === true ? \"center\" : separators;\n const addPrefix = (style: string) => {\n return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n };\n\n const flexGap = useResponsiveProp(gap, 3);\n const flexDirection = useResponsiveProp(direction, \"row\");\n const flexWrap = useResponsiveProp(wrap, false);\n const flexLayoutStyles = {\n ...style,\n \"--flexLayout-align\": align && addPrefix(align),\n \"--flexLayout-direction\": flexDirection,\n \"--flexLayout-gap-multiplier\": flexGap,\n \"--flexLayout-justify\": justify && addPrefix(justify),\n \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n };\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n [withBaseName(\n `separator-${flexDirection || \"row\"}-${\n separatorAlignment || \"center\"\n }`\n )]: separatorAlignment && !wrap,\n [withBaseName(`separator-${flexDirection || \"row\"}`)]:\n separatorAlignment && !wrap,\n },\n className\n )}\n ref={ref}\n style={flexLayoutStyles}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["flexLayoutCss","style"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { ElementType, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport flexLayoutCss from \"./FlexLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n ...FLEX_ALIGNMENT_BASE,\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];\nexport type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n */\n align?: FlexAlignment | \"stretch\" | \"baseline\";\n /**\n * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n */\n direction?: ResponsiveProp<LayoutDirection>;\n /**\n * Controls the space between items, default is 3.\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the alignment along the main axis, default is \"start\".\n */\n justify?: FlexContentAlignment;\n /**\n * **Deprecated:** For separators see `StackLayout` component instead.\n *\n * Adds a separator between elements if wrap is not active, default is false.\n */\n separators?: LayoutSeparator | true;\n /**\n * Allow the items to wrap as needed, default is false.\n */\n wrap?: ResponsiveProp<boolean>;\n }\n >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n props: FlexLayoutProps<T>\n) => ReactElement | null;\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n direction,\n gap,\n justify,\n separators,\n style,\n wrap,\n ...rest\n }: FlexLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-flex-layout\",\n css: flexLayoutCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n const separatorAlignment = separators === true ? \"center\" : separators;\n const addPrefix = (style: string) => {\n return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n };\n\n const flexGap = useResponsiveProp(gap, 3);\n const flexDirection = useResponsiveProp(direction, \"row\");\n const flexWrap = useResponsiveProp(wrap, false);\n const flexLayoutStyles = {\n ...style,\n \"--flexLayout-align\": align && addPrefix(align),\n \"--flexLayout-direction\": flexDirection,\n \"--flexLayout-gap-multiplier\": flexGap,\n \"--flexLayout-justify\": justify && addPrefix(justify),\n \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n };\n\n return (\n <Component\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n [withBaseName(\n `separator-${flexDirection || \"row\"}-${\n separatorAlignment || \"center\"\n }`\n )]: separatorAlignment && !wrap,\n [withBaseName(`separator-${flexDirection || \"row\"}`)]:\n separatorAlignment && !wrap,\n },\n className\n )}\n ref={ref}\n style={flexLayoutStyles}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["flexLayoutCss","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAK3C,MAAM,mBAAsB,GAAA,CAAC,OAAS,EAAA,KAAA,EAAO,QAAQ,EAAA;AACrD,MAAM,2BAA8B,GAAA;AAAA,EACzC,GAAG,mBAAA;AAAA,EACH,eAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AACF,EAAA;AA0CO,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA,CAAA;AAC5D,IAAM,MAAA,SAAA,GAAY,CAACC,MAAkB,KAAA;AACnC,MAAA,OAAOA,MAAU,KAAA,OAAA,IAAWA,MAAU,KAAA,KAAA,GAAQ,QAAQA,MAAUA,CAAAA,CAAAA,GAAAA,MAAAA,CAAAA;AAAA,KAClE,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AACxC,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AACxD,IAAM,MAAA,QAAA,GAAW,iBAAkB,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAC9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,oBAAA,EAAsB,KAAS,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MAC9C,wBAA0B,EAAA,aAAA;AAAA,MAC1B,6BAA+B,EAAA,OAAA;AAAA,MAC/B,sBAAA,EAAwB,OAAW,IAAA,SAAA,CAAU,OAAO,CAAA;AAAA,MACpD,mBAAA,EAAqB,WAAW,MAAS,GAAA,QAAA;AAAA,KAC3C,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,sBAAsB,CAAC,IAAA;AAAA,UACpD,CAAC,YAAA;AAAA,YACC,CAAA,UAAA,EAAa,aAAiB,IAAA,KAAA,CAAA,CAAA,EAC5B,kBAAsB,IAAA,QAAA,CAAA,CAAA;AAAA,WAE1B,GAAI,sBAAsB,CAAC,IAAA;AAAA,UAC3B,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,iBAAiB,KAAO,CAAA,CAAA,CAAA,GACjD,sBAAsB,CAAC,IAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACA,KAAO,EAAA,gBAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -24,7 +24,6 @@ import '../border-item/BorderItem.js';
|
|
|
24
24
|
import '../border-layout/BorderLayout.js';
|
|
25
25
|
import '../button/Button.js';
|
|
26
26
|
import '../card/Card.js';
|
|
27
|
-
import '../card/InteractableCard.js';
|
|
28
27
|
import '../checkbox/Checkbox.js';
|
|
29
28
|
import '../checkbox/CheckboxGroup.js';
|
|
30
29
|
import '@salt-ds/icons';
|
|
@@ -55,6 +54,9 @@ import '../text/TextNotation.js';
|
|
|
55
54
|
import '../grid-item/GridItem.js';
|
|
56
55
|
import '../grid-layout/GridLayout.js';
|
|
57
56
|
import '../input/Input.js';
|
|
57
|
+
import '../interactable-card/InteractableCard.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
59
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
58
60
|
import '../link/Link.js';
|
|
59
61
|
import '../link-card/LinkCard.js';
|
|
60
62
|
import '../list-control/ListControlContext.js';
|
|
@@ -62,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
62
64
|
import '../navigation-item/NavigationItem.js';
|
|
63
65
|
import '../option/Option.js';
|
|
64
66
|
import '../option/OptionGroup.js';
|
|
67
|
+
import '../overlay/OverlayContext.js';
|
|
68
|
+
import '@floating-ui/react';
|
|
69
|
+
import '../overlay/OverlayPanel.js';
|
|
70
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
71
|
+
import '../overlay/OverlayPanelContent.js';
|
|
65
72
|
import '../pagination/Pagination.js';
|
|
66
73
|
import '../pagination/Paginator.js';
|
|
67
74
|
import '../pagination/CompactInput.js';
|
|
@@ -74,6 +81,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
74
81
|
import '../radio-button/RadioButton.js';
|
|
75
82
|
import '../radio-button/RadioButtonGroup.js';
|
|
76
83
|
import '../scrim/Scrim.js';
|
|
84
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
77
85
|
import '../spinner/Spinner.js';
|
|
78
86
|
import '../stack-layout/StackLayout.js';
|
|
79
87
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -85,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
86
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
87
95
|
import '../tooltip/Tooltip.js';
|
|
88
|
-
import '@floating-ui/react';
|
|
89
96
|
import css_248z from './FormField.css.js';
|
|
90
97
|
|
|
91
98
|
const withBaseName = makePrefixer("saltFormField");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { makePrefixer, useId, capitalize } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * Disabled prop\n */\n disabled?: boolean;\n /**\n * Location of the label, values: 'top' (default) or 'left'\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * Readonly prop\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n *\n * Used as suffix of FormFieldLabel id: `label-{id}`\n * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n */\n id?: string;\n /**\n * Displays necessity on label\n */\n necessity?: \"required\" | \"optional\" | \"asterisk\";\n /**\n * Validation status\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef(\n (\n {\n children,\n className,\n disabled = false,\n id: idProp,\n labelPlacement = \"top\",\n necessity,\n onBlur,\n onFocus,\n readOnly = false,\n validationStatus,\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field\",\n css: formFieldCss,\n window: targetWindow,\n });\n\n const formId = useId(idProp);\n\n const labelId = formId ? `label-${formId}` : undefined;\n const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className\n )}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n a11yProps: {\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n },\n disabled,\n necessity,\n readOnly,\n validationStatus,\n }}\n >\n {children}\n </FormFieldContext.Provider>\n </div>\n );\n }\n);\n"],"names":["formFieldCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { makePrefixer, useId, capitalize } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * Disabled prop\n */\n disabled?: boolean;\n /**\n * Location of the label, values: 'top' (default) or 'left'\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * Readonly prop\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n *\n * Used as suffix of FormFieldLabel id: `label-{id}`\n * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n */\n id?: string;\n /**\n * Displays necessity on label\n */\n necessity?: \"required\" | \"optional\" | \"asterisk\";\n /**\n * Validation status\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef(\n (\n {\n children,\n className,\n disabled = false,\n id: idProp,\n labelPlacement = \"top\",\n necessity,\n onBlur,\n onFocus,\n readOnly = false,\n validationStatus,\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field\",\n css: formFieldCss,\n window: targetWindow,\n });\n\n const formId = useId(idProp);\n\n const labelId = formId ? `label-${formId}` : undefined;\n const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className\n )}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n a11yProps: {\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n },\n disabled,\n necessity,\n readOnly,\n validationStatus,\n }}\n >\n {children}\n </FormFieldContext.Provider>\n </div>\n );\n }\n);\n"],"names":["formFieldCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,MAAM,MAAM,CAAA,CAAA;AAE3B,IAAM,MAAA,OAAA,GAAU,MAAS,GAAA,CAAA,MAAA,EAAS,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,YAAA,GAAe,MAAS,GAAA,CAAA,WAAA,EAAc,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEvD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,UAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAW,EAAA;AAAA,YACT,iBAAmB,EAAA,OAAA;AAAA,YACnB,kBAAoB,EAAA,YAAA;AAAA,WACtB;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,SACF;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -28,7 +28,6 @@ import '../border-item/BorderItem.js';
|
|
|
28
28
|
import '../border-layout/BorderLayout.js';
|
|
29
29
|
import '../button/Button.js';
|
|
30
30
|
import '../card/Card.js';
|
|
31
|
-
import '../card/InteractableCard.js';
|
|
32
31
|
import '../checkbox/Checkbox.js';
|
|
33
32
|
import '../checkbox/CheckboxGroup.js';
|
|
34
33
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -57,6 +56,9 @@ import css_248z from './FormFieldHelperText.css.js';
|
|
|
57
56
|
import '../grid-item/GridItem.js';
|
|
58
57
|
import '../grid-layout/GridLayout.js';
|
|
59
58
|
import '../input/Input.js';
|
|
59
|
+
import '../interactable-card/InteractableCard.js';
|
|
60
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
61
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
60
62
|
import '../link/Link.js';
|
|
61
63
|
import '../link-card/LinkCard.js';
|
|
62
64
|
import '../list-control/ListControlContext.js';
|
|
@@ -64,6 +66,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
66
|
import '../navigation-item/NavigationItem.js';
|
|
65
67
|
import '../option/Option.js';
|
|
66
68
|
import '../option/OptionGroup.js';
|
|
69
|
+
import '../overlay/OverlayContext.js';
|
|
70
|
+
import '@floating-ui/react';
|
|
71
|
+
import '../overlay/OverlayPanel.js';
|
|
72
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
73
|
+
import '../overlay/OverlayPanelContent.js';
|
|
67
74
|
import '../pagination/Pagination.js';
|
|
68
75
|
import '../pagination/Paginator.js';
|
|
69
76
|
import '../pagination/CompactInput.js';
|
|
@@ -76,6 +83,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
76
83
|
import '../radio-button/RadioButton.js';
|
|
77
84
|
import '../radio-button/RadioButtonGroup.js';
|
|
78
85
|
import '../scrim/Scrim.js';
|
|
86
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
79
87
|
import '../spinner/Spinner.js';
|
|
80
88
|
import '../stack-layout/StackLayout.js';
|
|
81
89
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -87,7 +95,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
95
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
96
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
97
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
98
|
|
|
92
99
|
const withBaseName = makePrefixer("saltFormFieldHelperText");
|
|
93
100
|
const FormFieldHelperText = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-helper-text\",\n css: formFieldHelperTextCss,\n window: targetWindow,\n });\n\n const { a11yProps, disabled, readOnly, validationStatus } =\n useFormFieldProps();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator status={validationStatus} />\n )}\n <Text\n disabled={disabled}\n id={a11yProps?.[\"aria-describedby\"]}\n variant=\"secondary\"\n styleAs=\"label\"\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":["formFieldHelperTextCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { Text, TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldHelperTextCss from \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-helper-text\",\n css: formFieldHelperTextCss,\n window: targetWindow,\n });\n\n const { a11yProps, disabled, readOnly, validationStatus } =\n useFormFieldProps();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator status={validationStatus} />\n )}\n <Text\n disabled={disabled}\n id={a11yProps?.[\"aria-describedby\"]}\n variant=\"secondary\"\n styleAs=\"label\"\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":["formFieldHelperTextCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,QAAU,EAAA,gBAAA,KACrC,iBAAkB,EAAA,CAAA;AAEpB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxB,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5C,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,QAChB,OAAQ,EAAA,WAAA;AAAA,QACR,OAAQ,EAAA,OAAA;AAAA,QACP,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -32,7 +32,6 @@ import '../border-item/BorderItem.js';
|
|
|
32
32
|
import '../border-layout/BorderLayout.js';
|
|
33
33
|
import '../button/Button.js';
|
|
34
34
|
import '../card/Card.js';
|
|
35
|
-
import '../card/InteractableCard.js';
|
|
36
35
|
import '../checkbox/Checkbox.js';
|
|
37
36
|
import '../checkbox/CheckboxGroup.js';
|
|
38
37
|
import '@salt-ds/icons';
|
|
@@ -58,6 +57,9 @@ import css_248z from './FormFieldLabel.css.js';
|
|
|
58
57
|
import '../grid-item/GridItem.js';
|
|
59
58
|
import '../grid-layout/GridLayout.js';
|
|
60
59
|
import '../input/Input.js';
|
|
60
|
+
import '../interactable-card/InteractableCard.js';
|
|
61
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
62
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
61
63
|
import '../link/Link.js';
|
|
62
64
|
import '../link-card/LinkCard.js';
|
|
63
65
|
import '../list-control/ListControlContext.js';
|
|
@@ -65,6 +67,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
65
67
|
import '../navigation-item/NavigationItem.js';
|
|
66
68
|
import '../option/Option.js';
|
|
67
69
|
import '../option/OptionGroup.js';
|
|
70
|
+
import '../overlay/OverlayContext.js';
|
|
71
|
+
import '@floating-ui/react';
|
|
72
|
+
import '../overlay/OverlayPanel.js';
|
|
73
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
74
|
+
import '../overlay/OverlayPanelContent.js';
|
|
68
75
|
import '../pagination/Pagination.js';
|
|
69
76
|
import '../pagination/Paginator.js';
|
|
70
77
|
import '../pagination/CompactInput.js';
|
|
@@ -77,6 +84,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
77
84
|
import '../radio-button/RadioButton.js';
|
|
78
85
|
import '../radio-button/RadioButtonGroup.js';
|
|
79
86
|
import '../scrim/Scrim.js';
|
|
87
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
80
88
|
import '../spinner/Spinner.js';
|
|
81
89
|
import '../stack-layout/StackLayout.js';
|
|
82
90
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -88,7 +96,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
96
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
97
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
98
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
99
|
|
|
93
100
|
const withBaseName = makePrefixer("saltFormFieldLabel");
|
|
94
101
|
const FormFieldLabel = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n /**\n * Intent for the label.\n *\n * Defaults to \"label\"\n * Using \"sentence\" gives more prominent styling\n */\n intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n className,\n children,\n intent = \"label\",\n ...restProps\n}: FormFieldLabelProps) => {\n const { a11yProps, disabled, necessity } = useFormFieldProps();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-label\",\n css: formFieldLabelCss,\n window: targetWindow,\n });\n\n const necessityLabel = necessity\n ? necessity === \"asterisk\"\n ? \" *\"\n : ` (${capitalize(necessity)})`\n : undefined;\n\n return (\n <Label\n as=\"label\"\n className={clsx(withBaseName(), withBaseName(intent), className)}\n id={a11yProps?.[\"aria-labelledby\"]}\n disabled={disabled}\n variant=\"secondary\"\n {...restProps}\n >\n {children}\n {necessityLabel && (\n <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n )}\n </Label>\n );\n};\n"],"names":["formFieldLabelCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n /**\n * Intent for the label.\n *\n * Defaults to \"label\"\n * Using \"sentence\" gives more prominent styling\n */\n intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n className,\n children,\n intent = \"label\",\n ...restProps\n}: FormFieldLabelProps) => {\n const { a11yProps, disabled, necessity } = useFormFieldProps();\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-form-field-label\",\n css: formFieldLabelCss,\n window: targetWindow,\n });\n\n const necessityLabel = necessity\n ? necessity === \"asterisk\"\n ? \" *\"\n : ` (${capitalize(necessity)})`\n : undefined;\n\n return (\n <Label\n as=\"label\"\n className={clsx(withBaseName(), withBaseName(intent), className)}\n id={a11yProps?.[\"aria-labelledby\"]}\n disabled={disabled}\n variant=\"secondary\"\n {...restProps}\n >\n {children}\n {necessityLabel && (\n <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n )}\n </Label>\n );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAc,iBAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAA,UAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACE,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -20,7 +20,6 @@ import '../border-item/BorderItem.js';
|
|
|
20
20
|
import '../border-layout/BorderLayout.js';
|
|
21
21
|
import '../button/Button.js';
|
|
22
22
|
import '../card/Card.js';
|
|
23
|
-
import '../card/InteractableCard.js';
|
|
24
23
|
import '../checkbox/Checkbox.js';
|
|
25
24
|
import '../checkbox/CheckboxGroup.js';
|
|
26
25
|
import '@salt-ds/styles';
|
|
@@ -54,6 +53,9 @@ import '../text/TextNotation.js';
|
|
|
54
53
|
import '../grid-item/GridItem.js';
|
|
55
54
|
import '../grid-layout/GridLayout.js';
|
|
56
55
|
import '../input/Input.js';
|
|
56
|
+
import '../interactable-card/InteractableCard.js';
|
|
57
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
59
|
import '../link/Link.js';
|
|
58
60
|
import '../link-card/LinkCard.js';
|
|
59
61
|
import '../list-control/ListControlContext.js';
|
|
@@ -61,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
61
63
|
import '../navigation-item/NavigationItem.js';
|
|
62
64
|
import '../option/Option.js';
|
|
63
65
|
import '../option/OptionGroup.js';
|
|
66
|
+
import '../overlay/OverlayContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../overlay/OverlayPanel.js';
|
|
69
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
70
|
+
import '../overlay/OverlayPanelContent.js';
|
|
64
71
|
import '../pagination/Pagination.js';
|
|
65
72
|
import '../pagination/Paginator.js';
|
|
66
73
|
import '../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../radio-button/RadioButton.js';
|
|
74
81
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../scrim/Scrim.js';
|
|
83
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../spinner/Spinner.js';
|
|
77
85
|
import '../stack-layout/StackLayout.js';
|
|
78
86
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
|
|
89
96
|
const FormFieldContext = createContext(
|
|
90
97
|
"FormFieldContext",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n necessity: NecessityType | undefined;\n readOnly: boolean;\n validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextValue\n);\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n necessity: NecessityType | undefined;\n readOnly: boolean;\n validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextValue\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}
|
|
@@ -19,7 +19,6 @@ import '../border-item/BorderItem.js';
|
|
|
19
19
|
import '../border-layout/BorderLayout.js';
|
|
20
20
|
import '../button/Button.js';
|
|
21
21
|
import '../card/Card.js';
|
|
22
|
-
import '../card/InteractableCard.js';
|
|
23
22
|
import '../checkbox/Checkbox.js';
|
|
24
23
|
import '../checkbox/CheckboxGroup.js';
|
|
25
24
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -54,6 +53,9 @@ import '../text/TextNotation.js';
|
|
|
54
53
|
import '../form-field-context/FormFieldContext.js';
|
|
55
54
|
import '../grid-layout/GridLayout.js';
|
|
56
55
|
import '../input/Input.js';
|
|
56
|
+
import '../interactable-card/InteractableCard.js';
|
|
57
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
59
|
import '../link/Link.js';
|
|
58
60
|
import '../link-card/LinkCard.js';
|
|
59
61
|
import '../list-control/ListControlContext.js';
|
|
@@ -61,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
61
63
|
import '../navigation-item/NavigationItem.js';
|
|
62
64
|
import '../option/Option.js';
|
|
63
65
|
import '../option/OptionGroup.js';
|
|
66
|
+
import '../overlay/OverlayContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../overlay/OverlayPanel.js';
|
|
69
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
70
|
+
import '../overlay/OverlayPanelContent.js';
|
|
64
71
|
import '../pagination/Pagination.js';
|
|
65
72
|
import '../pagination/Paginator.js';
|
|
66
73
|
import '../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../radio-button/RadioButton.js';
|
|
74
81
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../scrim/Scrim.js';
|
|
83
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../spinner/Spinner.js';
|
|
77
85
|
import '../stack-layout/StackLayout.js';
|
|
78
86
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import '../viewport/ViewportProvider.js';
|
|
89
96
|
import css_248z from './GridItem.css.js';
|
|
90
97
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const GRID_ALIGNMENT_BASE = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * The item will span across the provided number of grid columns. Defaults to \"auto\"\n */\n colSpan?: ResponsiveProp<GridProperty>;\n /**\n * The item will span across the provided number of grid rows. Defaults to \"auto\"\n */\n rowSpan?: ResponsiveProp<GridProperty>;\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridAlignment;\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridAlignment;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n props: GridItemProps<T>\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n colSpan,\n rowSpan,\n horizontalAlignment = \"stretch\",\n verticalAlignment = \"stretch\",\n style,\n ...rest\n }: GridItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-item\",\n css: gridItemCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n const gridItemColSpan = useResponsiveProp(colSpan, \"auto\");\n\n const gridItemRowSpan = useResponsiveProp(rowSpan, \"auto\");\n\n const gridColumnStart = gridItemColSpan\n ? `span ${gridItemColSpan}`\n : colStart;\n\n const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n const gridStyles = {\n ...style,\n \"--gridItem-justifySelf\": horizontalAlignment,\n \"--gridItem-alignSelf\": verticalAlignment,\n \"--gridItem-gridRowStart\": gridRowStart,\n \"--gridItem-gridColumnStart\": gridColumnStart,\n \"--gridItem-gridRowEnd\": gridRowEnd,\n \"--gridItem-gridColumnEnd\": gridColumnEnd,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["gridItemCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const GRID_ALIGNMENT_BASE = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * The item will span across the provided number of grid columns. Defaults to \"auto\"\n */\n colSpan?: ResponsiveProp<GridProperty>;\n /**\n * The item will span across the provided number of grid rows. Defaults to \"auto\"\n */\n rowSpan?: ResponsiveProp<GridProperty>;\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridAlignment;\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridAlignment;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n props: GridItemProps<T>\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n colSpan,\n rowSpan,\n horizontalAlignment = \"stretch\",\n verticalAlignment = \"stretch\",\n style,\n ...rest\n }: GridItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-item\",\n css: gridItemCss,\n window: targetWindow,\n });\n\n const Component = as || \"div\";\n const gridItemColSpan = useResponsiveProp(colSpan, \"auto\");\n\n const gridItemRowSpan = useResponsiveProp(rowSpan, \"auto\");\n\n const gridColumnStart = gridItemColSpan\n ? `span ${gridItemColSpan}`\n : colStart;\n\n const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n const gridStyles = {\n ...style,\n \"--gridItem-justifySelf\": horizontalAlignment,\n \"--gridItem-alignSelf\": verticalAlignment,\n \"--gridItem-gridRowStart\": gridRowStart,\n \"--gridItem-gridColumnStart\": gridColumnStart,\n \"--gridItem-gridRowEnd\": gridRowEnd,\n \"--gridItem-gridColumnEnd\": gridColumnEnd,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["gridItemCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AACf,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AAMR,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,eACpB,GAAA,CAAA,KAAA,EAAQ,eACR,CAAA,CAAA,GAAA,QAAA,CAAA;AAEJ,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEpE,IAAM,MAAA,YAAA,GAAe,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,QAAA,CAAA;AAEnE,IAAM,MAAA,UAAA,GAAa,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,wBAA0B,EAAA,mBAAA;AAAA,MAC1B,sBAAwB,EAAA,iBAAA;AAAA,MACxB,yBAA2B,EAAA,YAAA;AAAA,MAC3B,4BAA8B,EAAA,eAAA;AAAA,MAC9B,uBAAyB,EAAA,UAAA;AAAA,MACzB,0BAA4B,EAAA,aAAA;AAAA,KAC9B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -19,7 +19,6 @@ import '../border-item/BorderItem.js';
|
|
|
19
19
|
import '../border-layout/BorderLayout.js';
|
|
20
20
|
import '../button/Button.js';
|
|
21
21
|
import '../card/Card.js';
|
|
22
|
-
import '../card/InteractableCard.js';
|
|
23
22
|
import '../checkbox/Checkbox.js';
|
|
24
23
|
import '../checkbox/CheckboxGroup.js';
|
|
25
24
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
@@ -54,6 +53,9 @@ import '../text/TextNotation.js';
|
|
|
54
53
|
import '../form-field-context/FormFieldContext.js';
|
|
55
54
|
import '../grid-item/GridItem.js';
|
|
56
55
|
import '../input/Input.js';
|
|
56
|
+
import '../interactable-card/InteractableCard.js';
|
|
57
|
+
import '../interactable-card/InteractableCardGroup.js';
|
|
58
|
+
import '../interactable-card/InteractableCardGroupContext.js';
|
|
57
59
|
import '../link/Link.js';
|
|
58
60
|
import '../link-card/LinkCard.js';
|
|
59
61
|
import '../list-control/ListControlContext.js';
|
|
@@ -61,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
61
63
|
import '../navigation-item/NavigationItem.js';
|
|
62
64
|
import '../option/Option.js';
|
|
63
65
|
import '../option/OptionGroup.js';
|
|
66
|
+
import '../overlay/OverlayContext.js';
|
|
67
|
+
import '@floating-ui/react';
|
|
68
|
+
import '../overlay/OverlayPanel.js';
|
|
69
|
+
import '../overlay/OverlayPanelCloseButton.js';
|
|
70
|
+
import '../overlay/OverlayPanelContent.js';
|
|
64
71
|
import '../pagination/Pagination.js';
|
|
65
72
|
import '../pagination/Paginator.js';
|
|
66
73
|
import '../pagination/CompactInput.js';
|
|
@@ -73,6 +80,7 @@ import '../progress/LinearProgress/LinearProgress.js';
|
|
|
73
80
|
import '../radio-button/RadioButton.js';
|
|
74
81
|
import '../radio-button/RadioButtonGroup.js';
|
|
75
82
|
import '../scrim/Scrim.js';
|
|
83
|
+
import '../segmented-button-group/SegmentedButtonGroup.js';
|
|
76
84
|
import '../spinner/Spinner.js';
|
|
77
85
|
import '../stack-layout/StackLayout.js';
|
|
78
86
|
import '../status-adornment/StatusAdornment.js';
|
|
@@ -84,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
84
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
85
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
86
94
|
import '../tooltip/Tooltip.js';
|
|
87
|
-
import '@floating-ui/react';
|
|
88
95
|
import '../viewport/ViewportProvider.js';
|
|
89
96
|
import css_248z from './GridLayout.css.js';
|
|
90
97
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { forwardRef, ReactElement, ElementType } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport gridLayoutCss from \"./GridLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type GridLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Number of columns to be displayed. Defaults to 12\n */\n columns?: ResponsiveProp<number>;\n /**\n * Number of rows to be displayed. Defaults to 1\n */\n rows?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n */\n columnGap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n */\n rowGap?: ResponsiveProp<number>;\n }\n >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n props: GridLayoutProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n columns = 12,\n rows = 1,\n gap,\n columnGap,\n rowGap,\n style,\n ...rest\n }: GridLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-layout\",\n css: gridLayoutCss,\n window: targetWindow,\n });\n const Component = as || \"div\";\n\n const gridColumns = useResponsiveProp(columns, 12);\n\n const gridRows = useResponsiveProp(rows, 1);\n\n const gridGap = useResponsiveProp(gap, 3);\n\n const gridColumnGap = useResponsiveProp(columnGap, 3);\n\n const gridRowGap = useResponsiveProp(rowGap, 3);\n\n const gridLayoutStyles = {\n ...style,\n \"--gridLayout-columns\": gridColumns,\n \"--gridLayout-rows\": gridRows,\n \"--gridLayout-columnGap\": gridColumnGap ?? gridGap,\n \"--gridLayout-rowGap\": gridRowGap ?? gridGap,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["gridLayoutCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { forwardRef, ReactElement, ElementType } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\n\nimport gridLayoutCss from \"./GridLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type GridLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Number of columns to be displayed. Defaults to 12\n */\n columns?: ResponsiveProp<number>;\n /**\n * Number of rows to be displayed. Defaults to 1\n */\n rows?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n */\n gap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n */\n columnGap?: ResponsiveProp<number>;\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n */\n rowGap?: ResponsiveProp<number>;\n }\n >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n props: GridLayoutProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n children,\n className,\n columns = 12,\n rows = 1,\n gap,\n columnGap,\n rowGap,\n style,\n ...rest\n }: GridLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-grid-layout\",\n css: gridLayoutCss,\n window: targetWindow,\n });\n const Component = as || \"div\";\n\n const gridColumns = useResponsiveProp(columns, 12);\n\n const gridRows = useResponsiveProp(rows, 1);\n\n const gridGap = useResponsiveProp(gap, 3);\n\n const gridColumnGap = useResponsiveProp(columnGap, 3);\n\n const gridRowGap = useResponsiveProp(rowGap, 3);\n\n const gridLayoutStyles = {\n ...style,\n \"--gridLayout-columns\": gridColumns,\n \"--gridLayout-rows\": gridRows,\n \"--gridLayout-columnGap\": gridColumnGap ?? gridGap,\n \"--gridLayout-rowGap\": gridRowGap ?? gridGap,\n };\n\n return (\n <Component\n className={clsx(withBaseName(), className)}\n style={gridLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["gridLayoutCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,EAAA;AAAA,IACV,IAAO,GAAA,CAAA;AAAA,IACP,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAM,MAAA,WAAA,GAAc,iBAAkB,CAAA,OAAA,EAAS,EAAE,CAAA,CAAA;AAEjD,IAAM,MAAA,QAAA,GAAW,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAE1C,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AAExC,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,CAAC,CAAA,CAAA;AAEpD,IAAM,MAAA,UAAA,GAAa,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAE9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAwB,EAAA,WAAA;AAAA,MACxB,mBAAqB,EAAA,QAAA;AAAA,MACrB,0BAA0B,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,OAAA;AAAA,MAC3C,uBAAuB,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,OAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist-es/index.js
CHANGED
|
@@ -18,7 +18,6 @@ export { DEFAULT_BREAKPOINTS } from './breakpoints/Breakpoints.js';
|
|
|
18
18
|
export { Button, ButtonVariantValues } from './button/Button.js';
|
|
19
19
|
export { useButton } from './button/useButton.js';
|
|
20
20
|
export { Card } from './card/Card.js';
|
|
21
|
-
export { InteractableCard } from './card/InteractableCard.js';
|
|
22
21
|
export { Checkbox } from './checkbox/Checkbox.js';
|
|
23
22
|
export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
|
|
24
23
|
export { CheckboxIcon } from './checkbox/CheckboxIcon.js';
|
|
@@ -46,6 +45,9 @@ export { useFormFieldProps } from './form-field-context/useFormFieldProps.js';
|
|
|
46
45
|
export { GRID_ALIGNMENT_BASE, GridItem } from './grid-item/GridItem.js';
|
|
47
46
|
export { GridLayout } from './grid-layout/GridLayout.js';
|
|
48
47
|
export { Input } from './input/Input.js';
|
|
48
|
+
export { InteractableCard } from './interactable-card/InteractableCard.js';
|
|
49
|
+
export { InteractableCardGroup } from './interactable-card/InteractableCardGroup.js';
|
|
50
|
+
export { InteractableCardGroupContext, useInteractableCardGroup } from './interactable-card/InteractableCardGroupContext.js';
|
|
49
51
|
export { Link } from './link/Link.js';
|
|
50
52
|
export { LinkCard } from './link-card/LinkCard.js';
|
|
51
53
|
export { useListControlContext } from './list-control/ListControlContext.js';
|
|
@@ -53,6 +55,11 @@ export { MultilineInput } from './multiline-input/MultilineInput.js';
|
|
|
53
55
|
export { NavigationItem } from './navigation-item/NavigationItem.js';
|
|
54
56
|
export { Option } from './option/Option.js';
|
|
55
57
|
export { OptionGroup } from './option/OptionGroup.js';
|
|
58
|
+
export { Overlay } from './overlay/Overlay.js';
|
|
59
|
+
export { OverlayTrigger } from './overlay/OverlayTrigger.js';
|
|
60
|
+
export { OverlayPanel } from './overlay/OverlayPanel.js';
|
|
61
|
+
export { OverlayPanelCloseButton } from './overlay/OverlayPanelCloseButton.js';
|
|
62
|
+
export { OverlayPanelContent } from './overlay/OverlayPanelContent.js';
|
|
56
63
|
export { Pagination } from './pagination/Pagination.js';
|
|
57
64
|
export { Paginator } from './pagination/Paginator.js';
|
|
58
65
|
export { CompactInput } from './pagination/CompactInput.js';
|
|
@@ -66,6 +73,7 @@ export { RadioButton } from './radio-button/RadioButton.js';
|
|
|
66
73
|
export { RadioButtonGroup } from './radio-button/RadioButtonGroup.js';
|
|
67
74
|
export { RadioButtonIcon } from './radio-button/RadioButtonIcon.js';
|
|
68
75
|
export { Scrim } from './scrim/Scrim.js';
|
|
76
|
+
export { SegmentedButtonGroup } from './segmented-button-group/SegmentedButtonGroup.js';
|
|
69
77
|
export { Spinner, SpinnerSizeValues } from './spinner/Spinner.js';
|
|
70
78
|
export { StackLayout } from './stack-layout/StackLayout.js';
|
|
71
79
|
export { StatusAdornment } from './status-adornment/StatusAdornment.js';
|
package/dist-es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|