@salt-ds/core 1.23.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 +52 -7
- package/dist-cjs/accordion/Accordion.js +5 -1
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +5 -1
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +5 -1
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +6 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +5 -1
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +5 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +5 -1
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +5 -1
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +5 -1
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +5 -1
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +5 -1
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +5 -1
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +5 -1
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +5 -1
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/button/Button.js +5 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.js +5 -1
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +6 -2
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +5 -1
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +5 -1
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +5 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +4 -0
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +5 -1
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +4 -0
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +5 -1
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +5 -1
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +5 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +5 -1
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +4 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +5 -1
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +5 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +5 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +5 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +5 -1
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +5 -1
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +5 -1
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +5 -1
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +5 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +5 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +5 -1
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +5 -1
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +10 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +5 -1
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +5 -1
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +5 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +5 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/link/Link.js +5 -1
- 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 +5 -1
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +5 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +5 -1
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +5 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +5 -1
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.js +5 -1
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js +5 -1
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +5 -1
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +5 -1
- 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/overlay/OverlayPanelContent.js +123 -0
- 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 +5 -1
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +5 -1
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +5 -1
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +5 -1
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +5 -1
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +5 -1
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +5 -1
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +5 -1
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/pill/Pill.js +6 -1
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +5 -1
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +5 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +7 -3
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +6 -2
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +5 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +5 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +5 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +5 -1
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +5 -1
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +5 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +5 -1
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +5 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +5 -1
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +5 -1
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +5 -1
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +5 -1
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +5 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Text.js +5 -1
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +5 -1
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +5 -1
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +6 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +5 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +5 -1
- 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 +11 -2
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +5 -1
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +5 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +4 -0
- 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 +5 -1
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +5 -1
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +5 -1
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +5 -1
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +5 -1
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +6 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +5 -1
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +5 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +5 -1
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +5 -1
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +5 -1
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +5 -1
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +5 -1
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +5 -1
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +5 -1
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +5 -1
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/button/Button.js +5 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.js +5 -1
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +6 -2
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +5 -1
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +5 -1
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +5 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +4 -0
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +5 -1
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +4 -0
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +5 -1
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +5 -1
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +5 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +5 -1
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +4 -0
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +5 -1
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +5 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +5 -1
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +5 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +5 -1
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +5 -1
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +5 -1
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +5 -1
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +5 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +5 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +5 -1
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +5 -1
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +5 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +5 -1
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.js +5 -1
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +5 -1
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js +5 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/link/Link.js +5 -1
- 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 +5 -1
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +5 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +5 -1
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +5 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +5 -1
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.js +5 -1
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js +5 -1
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +5 -1
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +5 -1
- 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 +5 -1
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +5 -1
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +5 -1
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +5 -1
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +5 -1
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +5 -1
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +5 -1
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +5 -1
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/pill/Pill.js +6 -1
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +5 -1
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +5 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +7 -3
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +6 -2
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +5 -1
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +5 -1
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +5 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +5 -1
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +5 -1
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +5 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/spinner/Spinner.js +5 -1
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +5 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +5 -1
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +5 -1
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +5 -1
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +5 -1
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +5 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Text.js +5 -1
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +5 -1
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +5 -1
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +6 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +5 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +5 -1
- 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 +11 -2
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +5 -1
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +5 -1
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +4 -0
- 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 +5 -1
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +5 -1
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/index.d.ts +1 -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/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
|
@@ -64,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
64
|
import '../navigation-item/NavigationItem.js';
|
|
65
65
|
import '../option/Option.js';
|
|
66
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';
|
|
67
72
|
import '../pagination/Pagination.js';
|
|
68
73
|
import '../pagination/Paginator.js';
|
|
69
74
|
import '../pagination/CompactInput.js';
|
|
@@ -88,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
95
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
96
|
|
|
93
97
|
const AccordionContext = createContext(
|
|
94
98
|
"AccordionContext",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n value: string;\n expanded: boolean;\n toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n disabled: boolean;\n id: string;\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n \"AccordionContext\",\n {\n value: \"\",\n expanded: false,\n toggle: () => undefined,\n disabled: false,\n id: \"\",\n }\n);\n\nexport function useAccordion() {\n return useContext(AccordionContext);\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n value: string;\n expanded: boolean;\n toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n disabled: boolean;\n id: string;\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n \"AccordionContext\",\n {\n value: \"\",\n expanded: false,\n toggle: () => undefined,\n disabled: false,\n id: \"\",\n }\n);\n\nexport function useAccordion() {\n return useContext(AccordionContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,EAAI,EAAA,EAAA;AAAA,GACN;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAO,WAAW,gBAAgB,CAAA,CAAA;AACpC;;;;"}
|
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
import css_248z from './AccordionGroup.css.js';
|
|
92
96
|
|
|
93
97
|
const withBaseName = makePrefixer("saltAccordionGroup");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The child Accordions to be rendered\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-group\",\n css: accordionGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n }\n);\n"],"names":["AccordionGroup","accordionGroupCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The child Accordions to be rendered\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-group\",\n css: accordionGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n }\n);\n"],"names":["AccordionGroup","accordionGroupCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
import { useAccordion } from './AccordionContext.js';
|
|
92
96
|
import css_248z from './AccordionHeader.css.js';
|
|
93
97
|
|
|
@@ -118,6 +122,7 @@ const AccordionHeader = forwardRef(function AccordionHeader2(props, ref) {
|
|
|
118
122
|
id: `${id}-header`,
|
|
119
123
|
"aria-controls": `${id}-panel`,
|
|
120
124
|
value,
|
|
125
|
+
type: "button",
|
|
121
126
|
...rest,
|
|
122
127
|
children: [
|
|
123
128
|
/* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n MouseEvent,\n ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The content of the Accordion Header\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nexport const AccordionHeader = forwardRef<\n HTMLButtonElement,\n AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n const { children, className, onClick, ...rest } = props;\n const { value, expanded, toggle, disabled, id, status } = useAccordion();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-header\",\n css: accordionHeaderCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggle(event);\n onClick?.(event);\n };\n\n return (\n <button\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n disabled={disabled}\n onClick={handleClick}\n aria-expanded={expanded}\n id={`${id}-header`}\n aria-controls={`${id}-panel`}\n value={value}\n {...rest}\n >\n <ChevronRightIcon aria-hidden=\"true\" className={withBaseName(\"icon\")} />\n {children}\n {status && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={status}\n />\n )}\n </button>\n );\n});\n"],"names":["AccordionHeader","accordionHeaderCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n MouseEvent,\n ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The content of the Accordion Header\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nexport const AccordionHeader = forwardRef<\n HTMLButtonElement,\n AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n const { children, className, onClick, ...rest } = props;\n const { value, expanded, toggle, disabled, id, status } = useAccordion();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-header\",\n css: accordionHeaderCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggle(event);\n onClick?.(event);\n };\n\n return (\n <button\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n disabled={disabled}\n onClick={handleClick}\n aria-expanded={expanded}\n id={`${id}-header`}\n aria-controls={`${id}-panel`}\n value={value}\n type=\"button\"\n {...rest}\n >\n <ChevronRightIcon aria-hidden=\"true\" className={withBaseName(\"icon\")} />\n {children}\n {status && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={status}\n />\n )}\n </button>\n );\n});\n"],"names":["AccordionHeader","accordionHeaderCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA,CAG7B,SAASA,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,EAAM,MAAA,EAAE,OAAO,QAAU,EAAA,MAAA,EAAQ,UAAU,EAAI,EAAA,MAAA,KAAW,YAAa,EAAA,CAAA;AAEvE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,eAAe,EAAA,QAAA;AAAA,IACf,IAAI,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,IACP,iBAAe,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,IAClB,KAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,gBAAA,EAAA;AAAA,QAAiB,aAAY,EAAA,MAAA;AAAA,QAAO,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACrE,QAAA;AAAA,MACA,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
import { useAccordion } from './AccordionContext.js';
|
|
92
96
|
import css_248z from './AccordionPanel.css.js';
|
|
93
97
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the Accordion Panel\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { id, expanded } = useAccordion();\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={`${id}-panel`}\n aria-labelledby={`${id}-header`}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div className={withBaseName(\"content\")}>{children}</div>\n </div>\n </div>\n );\n }\n);\n"],"names":["AccordionPanel","accordionPanelCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\n\nimport { makePrefixer } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the Accordion Panel\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { id, expanded } = useAccordion();\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={`${id}-panel`}\n aria-labelledby={`${id}-header`}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div className={withBaseName(\"content\")}>{children}</div>\n </div>\n </div>\n );\n }\n);\n"],"names":["AccordionPanel","accordionPanelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,EAAA,EAAI,QAAS,EAAA,GAAI,YAAa,EAAA,CAAA;AAEtC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,MACP,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,MACpB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OACrD,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -64,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
64
|
import '../navigation-item/NavigationItem.js';
|
|
65
65
|
import '../option/Option.js';
|
|
66
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';
|
|
67
72
|
import '../pagination/Pagination.js';
|
|
68
73
|
import '../pagination/Paginator.js';
|
|
69
74
|
import '../pagination/CompactInput.js';
|
|
@@ -88,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
95
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
96
|
|
|
93
97
|
let warnedOnce = false;
|
|
94
98
|
const useAriaAnnouncer = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
|
package/dist-es/avatar/Avatar.js
CHANGED
|
@@ -64,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
64
|
import '../navigation-item/NavigationItem.js';
|
|
65
65
|
import '../option/Option.js';
|
|
66
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';
|
|
67
72
|
import '../pagination/Pagination.js';
|
|
68
73
|
import '../pagination/Paginator.js';
|
|
69
74
|
import '../pagination/CompactInput.js';
|
|
@@ -88,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
95
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
96
|
import css_248z from './Avatar.css.js';
|
|
93
97
|
|
|
94
98
|
const withBaseName = makePrefixer("saltAvatar");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { UserSolidIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The name that Avatar represents.\n */\n name?: string;\n /**\n * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n * If a function is not passed or returns undefined, Avatar will default to Icon.\n */\n nameToInitials?: NameToInitials;\n /**\n * Image src of Avatar.\n */\n src?: string;\n /**\n * Multiplier for the base avatar.\n */\n size?: number;\n /**\n * Icon to be used as a default item. Defaults to `UserIcon`\n */\n fallbackIcon?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n name\n ?.split(\" \")\n .slice(0, 2)\n .map((n) => n[0])\n .join(\"\")\n .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n className,\n children: childrenProp,\n name,\n nameToInitials = defaultNameToInitials,\n src,\n size = DEFAULT_AVATAR_SIZE,\n style: styleProp,\n fallbackIcon = <UserSolidIcon aria-label=\"User Avatar\" />,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-avatar\",\n css: avatarCss,\n window: targetWindow,\n });\n\n let children;\n\n const style = {\n ...styleProp,\n \"--saltAvatar-size-multiplier\": `${size}`,\n };\n\n const status = useAvatarImage({ src });\n const hasImgNotFailing = status === \"loaded\";\n if (hasImgNotFailing) {\n children = <img alt={name} src={src} />;\n } else if (childrenProp != null) {\n children = childrenProp;\n }\n\n const avatarInitials = nameToInitials(name);\n\n const initialsProps = avatarInitials\n ? {\n role: \"img\",\n \"aria-label\": name,\n }\n : {};\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withImage\")]: hasImgNotFailing },\n className\n )}\n {...initialsProps}\n {...rest}\n >\n {children || avatarInitials || fallbackIcon}\n </div>\n );\n});\n"],"names":["Avatar","avatarCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { UserSolidIcon } from \"@salt-ds/icons\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The name that Avatar represents.\n */\n name?: string;\n /**\n * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n * If a function is not passed or returns undefined, Avatar will default to Icon.\n */\n nameToInitials?: NameToInitials;\n /**\n * Image src of Avatar.\n */\n src?: string;\n /**\n * Multiplier for the base avatar.\n */\n size?: number;\n /**\n * Icon to be used as a default item. Defaults to `UserIcon`\n */\n fallbackIcon?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n name\n ?.split(\" \")\n .slice(0, 2)\n .map((n) => n[0])\n .join(\"\")\n .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n className,\n children: childrenProp,\n name,\n nameToInitials = defaultNameToInitials,\n src,\n size = DEFAULT_AVATAR_SIZE,\n style: styleProp,\n fallbackIcon = <UserSolidIcon aria-label=\"User Avatar\" />,\n ...rest\n },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-avatar\",\n css: avatarCss,\n window: targetWindow,\n });\n\n let children;\n\n const style = {\n ...styleProp,\n \"--saltAvatar-size-multiplier\": `${size}`,\n };\n\n const status = useAvatarImage({ src });\n const hasImgNotFailing = status === \"loaded\";\n if (hasImgNotFailing) {\n children = <img alt={name} src={src} />;\n } else if (childrenProp != null) {\n children = childrenProp;\n }\n\n const avatarInitials = nameToInitials(name);\n\n const initialsProps = avatarInitials\n ? {\n role: \"img\",\n \"aria-label\": name,\n }\n : {};\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withImage\")]: hasImgNotFailing },\n className\n )}\n {...initialsProps}\n {...rest}\n >\n {children || avatarInitials || fallbackIcon}\n </div>\n );\n});\n"],"names":["Avatar","avatarCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAC9C,MAAM,mBAAsB,GAAA,CAAA,CAAA;AAE5B,MAAM,qBAAwB,GAAA,CAAC,IAC7B,KAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CACI,MAAM,GACP,CAAA,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,CAAA,CAAA,CAAA,CACb,KAAK,EACL,CAAA,CAAA,WAAA,EAAA,CAAA;AAEQ,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAiB,GAAA,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAO,GAAA,mBAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,+BAAgB,GAAA,CAAA,aAAA,EAAA;AAAA,IAAc,YAAW,EAAA,aAAA;AAAA,GAAc,CAAA;AAAA,EACpD,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,QAAA,CAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,gCAAgC,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,MAAS,GAAA,cAAA,CAAe,EAAE,GAAA,EAAK,CAAA,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAW,KAAA,QAAA,CAAA;AACpC,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBAAY,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACvC,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb;AAEA,EAAM,MAAA,cAAA,GAAiB,eAAe,IAAI,CAAA,CAAA;AAE1C,EAAA,MAAM,gBAAgB,cAClB,GAAA;AAAA,IACE,IAAM,EAAA,KAAA;AAAA,IACN,YAAc,EAAA,IAAA;AAAA,MAEhB,EAAC,CAAA;AAEL,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,WAAW,IAAI,gBAAiB,EAAA;AAAA,MAChD,SAAA;AAAA,KACF;AAAA,IACC,GAAG,aAAA;AAAA,IACH,GAAG,IAAA;AAAA,IAEH,sBAAY,cAAkB,IAAA,YAAA;AAAA,GACjC,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -64,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
64
|
import '../navigation-item/NavigationItem.js';
|
|
65
65
|
import '../option/Option.js';
|
|
66
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';
|
|
67
72
|
import '../pagination/Pagination.js';
|
|
68
73
|
import '../pagination/Paginator.js';
|
|
69
74
|
import '../pagination/CompactInput.js';
|
|
@@ -88,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
95
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
96
|
|
|
93
97
|
function useAvatarImage({ src }) {
|
|
94
98
|
const [status, setStatus] = useState("loading");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" | \"loading\" | \"loaded\" | \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" | \"loading\" | \"loaded\" | \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAE1B,SAAS,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|
package/dist-es/badge/Badge.js
CHANGED
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
import css_248z from './Badge.css.js';
|
|
92
96
|
|
|
93
97
|
const withBaseName = makePrefixer("saltBadge");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * The number to display on the badge\n */\n value: number | string;\n /**\n * If a child is provided the Badge will render top right. By defualt renders inline.\n */\n children?: ReactNode;\n /**\n * The max number to display on the badge.\n */\n max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { value, max = 999, className, children, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-badge\",\n css: badgeCss,\n window: targetWindow,\n });\n\n const valueText =\n typeof value === \"number\" && value > max ? `${max}+` : value;\n\n return (\n <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n <span\n className={clsx(withBaseName(\"badge\"), {\n [withBaseName(\"topRight\")]: children,\n })}\n >\n {valueText}\n </span>\n </span>\n );\n});\n"],"names":["Badge","badgeCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * The number to display on the badge\n */\n value: number | string;\n /**\n * If a child is provided the Badge will render top right. By defualt renders inline.\n */\n children?: ReactNode;\n /**\n * The max number to display on the badge.\n */\n max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { value, max = 999, className, children, ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-badge\",\n css: badgeCss,\n window: targetWindow,\n });\n\n const valueText =\n typeof value === \"number\" && value > max ? `${max}+` : value;\n\n return (\n <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n <span\n className={clsx(withBaseName(\"badge\"), {\n [withBaseName(\"topRight\")]: children,\n })}\n >\n {valueText}\n </span>\n </span>\n );\n});\n"],"names":["Badge","badgeCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEtC,MAAM,KAAQ,GAAA,UAAA,CAAwC,SAASA,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAM,GAAA,GAAA,EAAK,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACjD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,OAAO,KAAA,KAAU,YAAY,KAAQ,GAAA,GAAA,GAAM,GAAG,GAAS,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAEzD,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,UACrC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
package/dist-es/banner/Banner.js
CHANGED
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
import css_248z from './Banner.css.js';
|
|
92
96
|
|
|
93
97
|
const withBaseName = makePrefixer("saltBanner");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className\n )}\n ref={ref}\n {...rest}\n aria-live=\"polite\"\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["Banner","bannerCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className\n )}\n ref={ref}\n {...rest}\n aria-live=\"polite\"\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["Banner","bannerCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA,CAAwC,SAASA,OAAAA,CACrE,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,GAAU,SAAW,EAAA,MAAA,GAAS,MAAW,EAAA,GAAA,IAAA,IAChE,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,MAAM,CAAA;AAAA,MACnB,aAAa,OAAO,CAAA;AAAA,MACpB,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,WAAU,EAAA,QAAA;AAAA,IAEV,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
import css_248z from './BannerActions.css.js';
|
|
92
96
|
|
|
93
97
|
const withBaseName = makePrefixer("saltBannerActions");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerActionsCss from \"./BannerActions.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\ninterface BannerActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerActions\n */\n children: ReactNode;\n}\n\nexport const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(\n function BannerActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-actions\",\n css: bannerActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n }\n);\n"],"names":["BannerActions","bannerActionsCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerActionsCss from \"./BannerActions.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\ninterface BannerActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerActions\n */\n children: ReactNode;\n}\n\nexport const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(\n function BannerActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-actions\",\n css: bannerActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n }\n);\n"],"names":["BannerActions","bannerActionsCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
import css_248z from './BannerContent.css.js';
|
|
92
96
|
|
|
93
97
|
const withBaseName = makePrefixer("saltBannerContent");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerContentCss from \"./BannerContent.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\ninterface BannerContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerContent\n */\n children: ReactNode;\n}\n\nexport const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(\n function BannerContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-content\",\n css: bannerContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n }\n);\n"],"names":["BannerContent","bannerContentCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerContentCss from \"./BannerContent.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\ninterface BannerContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerContent\n */\n children: ReactNode;\n}\n\nexport const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(\n function BannerContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-content\",\n css: bannerContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n }\n);\n"],"names":["BannerContent","bannerContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -64,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
64
|
import '../navigation-item/NavigationItem.js';
|
|
65
65
|
import '../option/Option.js';
|
|
66
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';
|
|
67
72
|
import '../pagination/Pagination.js';
|
|
68
73
|
import '../pagination/Paginator.js';
|
|
69
74
|
import '../pagination/CompactInput.js';
|
|
@@ -88,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
95
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
96
|
|
|
93
97
|
const BORDER_POSITION = [
|
|
94
98
|
"north",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport borderItemCss from \"./BorderItem.css\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n }\n);\n"],"names":["borderItemCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { GridItem, GridItemProps } from \"../grid-item\";\nimport borderItemCss from \"./BorderItem.css\";\nimport {\n makePrefixer,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n }\n);\n"],"names":["borderItemCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,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;AAED,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -63,6 +63,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
63
63
|
import '../navigation-item/NavigationItem.js';
|
|
64
64
|
import '../option/Option.js';
|
|
65
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';
|
|
66
71
|
import '../pagination/Pagination.js';
|
|
67
72
|
import '../pagination/Paginator.js';
|
|
68
73
|
import '../pagination/CompactInput.js';
|
|
@@ -87,7 +92,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
87
92
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
89
94
|
import '../tooltip/Tooltip.js';
|
|
90
|
-
import '@floating-ui/react';
|
|
91
95
|
|
|
92
96
|
const withBaseName = makePrefixer("saltBorderLayout");
|
|
93
97
|
const numberOfColumns = 3;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n ReactElement,\n useEffect,\n ElementType,\n} from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { GridLayout, GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport { BorderItemProps } from \"../border-item\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactElement<BorderItemProps<T>>[];\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n <T extends ElementType>(\n { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const borderAreas = Children.map(\n children,\n (child: ReactElement<BorderItemProps<T>>) => child.props.position\n );\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\"\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n }\n);\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import {\n Children,\n forwardRef,\n ReactElement,\n useEffect,\n ElementType,\n} from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { GridLayout, GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n PolymorphicRef,\n PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport { BorderItemProps } from \"../border-item\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactElement<BorderItemProps<T>>[];\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n <T extends ElementType>(\n { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const borderAreas = Children.map(\n children,\n (child: ReactElement<BorderItemProps<T>>) => child.props.position\n );\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\"\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA,CAAA;AAMjB,MAAM,YAAsC,GAAA,UAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAU,EAAA,GAAA,IAAA,IACtC,GACG,KAAA;AACH,IAAA,MAAM,cAAc,QAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAA4C,KAAA,KAAA,CAAM,KAAM,CAAA,QAAA;AAAA,KAC3D,CAAA;AAEA,IAAM,MAAA,UAAA,GAAa,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE7D,IAAM,MAAA,UAAA,GAAa,GAAG,WAAsB,CAAA,QAAA,EAAA,YAAA,CAAA,CAAA,CAAA;AAE5C,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA,CAAA;AAElC,IAAM,MAAA,iBAAA,GAAoB,CAAI,CAAA,EAAA,UAAA,CAAA,GAAA,EAAgB,UAAgB,CAAA,GAAA,EAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAE9D,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,oEAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA,iBAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,MAChE,OAAS,EAAA,eAAA;AAAA,MACT,KAAK,GAAO,IAAA,CAAA;AAAA,MACZ,KAAO,EAAA,kBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist-es/button/Button.js
CHANGED
|
@@ -64,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
64
|
import '../navigation-item/NavigationItem.js';
|
|
65
65
|
import '../option/Option.js';
|
|
66
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';
|
|
67
72
|
import '../pagination/Pagination.js';
|
|
68
73
|
import '../pagination/Paginator.js';
|
|
69
74
|
import '../pagination/CompactInput.js';
|
|
@@ -88,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
95
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
96
|
import css_248z from './Button.css.js';
|
|
93
97
|
|
|
94
98
|
const withBaseName = makePrefixer("saltButton");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n */\n variant?: ButtonVariant;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n type = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n },\n className\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["Button","buttonCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n /**\n * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n */\n variant?: ButtonVariant;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n type = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n },\n className\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["Button","buttonCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GAC2B,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAI,SAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAID,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
package/dist-es/card/Card.js
CHANGED
|
@@ -64,6 +64,11 @@ import '../multiline-input/MultilineInput.js';
|
|
|
64
64
|
import '../navigation-item/NavigationItem.js';
|
|
65
65
|
import '../option/Option.js';
|
|
66
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';
|
|
67
72
|
import '../pagination/Pagination.js';
|
|
68
73
|
import '../pagination/Paginator.js';
|
|
69
74
|
import '../pagination/CompactInput.js';
|
|
@@ -88,7 +93,6 @@ import '../toggle-button/ToggleButton.js';
|
|
|
88
93
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
89
94
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
90
95
|
import '../tooltip/Tooltip.js';
|
|
91
|
-
import '@floating-ui/react';
|
|
92
96
|
import css_248z from './Card.css.js';
|
|
93
97
|
|
|
94
98
|
const withBaseName = makePrefixer("saltCard");
|
package/dist-es/card/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the card will have hover styling.\n */\n hoverable?: boolean;\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n * on the page.\n */\n interactable?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n props,\n ref\n) {\n const {\n accent,\n children,\n className,\n disabled,\n interactable,\n hoverable,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-card\",\n css: cardCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n [withBaseName(\"hoverable\")]: hoverable,\n /* **Deprecated:** InteractableCard should be used instead for these features */\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"interactable\")]: interactable,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Card","cardCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the card will have hover styling.\n */\n hoverable?: boolean;\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n * on the page.\n */\n interactable?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n props,\n ref\n) {\n const {\n accent,\n children,\n className,\n disabled,\n interactable,\n hoverable,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-card\",\n css: cardCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n [withBaseName(\"hoverable\")]: hoverable,\n /* **Deprecated:** InteractableCard should be used instead for these features */\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"interactable\")]: interactable,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Card","cardCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AA6BrC,MAAM,IAAO,GAAA,UAAA,CAAsC,SAASA,KAAAA,CACjE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,OAAO,CAAA;AAAA,MACpB;AAAA,QACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,QAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,WAAW,MAAU,IAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,QACrD,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAE7B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|