@salt-ds/core 1.25.0 → 1.27.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 +122 -32
- package/dist-cjs/accordion/Accordion.js +8 -1
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +8 -1
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +8 -1
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +8 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +8 -1
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +8 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +8 -1
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +8 -1
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +8 -1
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +8 -1
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +8 -1
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +8 -1
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +8 -1
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +8 -1
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js +169 -0
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -0
- package/dist-cjs/breakpoints/Breakpoints.js +1 -2
- package/dist-cjs/breakpoints/Breakpoints.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/button/Button.js +8 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +8 -1
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +8 -1
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +8 -1
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +8 -1
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +8 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +10 -2
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +23 -2
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +7 -0
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +8 -1
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +8 -1
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +8 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.js +8 -1
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +7 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +8 -1
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +8 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +8 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +8 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +12 -4
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.css.js +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +29 -15
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +8 -1
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +8 -1
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +8 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +8 -1
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +13 -5
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.css.js +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +31 -11
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +13 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +8 -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 +8 -1
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +8 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +8 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/link/Link.js +8 -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 +8 -1
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +8 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +8 -1
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/Menu.js +24 -0
- package/dist-cjs/menu/Menu.js.map +1 -0
- package/dist-cjs/menu/MenuBase.js +228 -0
- package/dist-cjs/menu/MenuBase.js.map +1 -0
- package/dist-cjs/menu/MenuContext.js +126 -0
- package/dist-cjs/menu/MenuContext.js.map +1 -0
- package/dist-cjs/menu/MenuGroup.css.js +6 -0
- package/dist-cjs/menu/MenuGroup.css.js.map +1 -0
- package/dist-cjs/menu/MenuGroup.js +140 -0
- package/dist-cjs/menu/MenuGroup.js.map +1 -0
- package/dist-cjs/menu/MenuItem.css.js +6 -0
- package/dist-cjs/menu/MenuItem.css.js.map +1 -0
- package/dist-cjs/menu/MenuItem.js +185 -0
- package/dist-cjs/menu/MenuItem.js.map +1 -0
- package/dist-cjs/menu/MenuPanel.css.js +6 -0
- package/dist-cjs/menu/MenuPanel.css.js.map +1 -0
- package/dist-cjs/menu/MenuPanel.js +157 -0
- package/dist-cjs/menu/MenuPanel.js.map +1 -0
- package/dist-cjs/menu/MenuPanelBase.js +29 -0
- package/dist-cjs/menu/MenuPanelBase.js.map +1 -0
- package/dist-cjs/menu/MenuPanelContext.js +122 -0
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -0
- package/dist-cjs/menu/MenuTrigger.js +141 -0
- package/dist-cjs/menu/MenuTrigger.js.map +1 -0
- package/dist-cjs/menu/MenuTriggerContext.js +118 -0
- package/dist-cjs/menu/MenuTriggerContext.js.map +1 -0
- package/dist-cjs/multiline-input/MultilineInput.js +8 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +8 -1
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/Option.js +8 -1
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.js +8 -1
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +8 -1
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +8 -1
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +8 -1
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +8 -1
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +8 -1
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +8 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +8 -1
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +8 -1
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js +8 -1
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +8 -1
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +8 -1
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +8 -1
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +8 -1
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +8 -1
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +8 -1
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +8 -1
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +8 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js +8 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-cjs/pill/Pill.js +8 -1
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js +8 -1
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +8 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +8 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +8 -1
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +8 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +8 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +8 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +16 -5
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +8 -1
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +8 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +8 -1
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +8 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +8 -1
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.css.js +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +20 -6
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +8 -1
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +8 -1
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/switch/Switch.js +8 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/text/Text.js +8 -1
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +8 -1
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +8 -1
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +8 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +8 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +8 -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 +9 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +7 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +8 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +12 -4
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useResponsiveProp.js +15 -0
- package/dist-cjs/utils/useResponsiveProp.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +8 -1
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +8 -1
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +8 -1
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +8 -1
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +8 -1
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +8 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +8 -1
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +8 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +8 -1
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +8 -1
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +8 -1
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +8 -1
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +8 -1
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +8 -1
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +8 -1
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +8 -1
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +163 -0
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -0
- package/dist-es/breakpoints/Breakpoints.js +1 -2
- package/dist-es/breakpoints/Breakpoints.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/button/Button.js +8 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +8 -1
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +8 -1
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +8 -1
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +8 -1
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +8 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +10 -2
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +23 -2
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +7 -0
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +8 -1
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +8 -1
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +8 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.css.js +1 -1
- package/dist-es/dialog/DialogHeader.js +8 -1
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/drawer/Drawer.js +7 -0
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +8 -1
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +8 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +8 -1
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +8 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +13 -5
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.css.js +1 -1
- package/dist-es/flex-layout/FlexLayout.js +30 -16
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +8 -1
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +8 -1
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +8 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +8 -1
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +14 -6
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.css.js +1 -1
- package/dist-es/grid-layout/GridLayout.js +32 -12
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +7 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +8 -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 +8 -1
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +8 -1
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js +8 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/link/Link.js +8 -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 +8 -1
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +8 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +8 -1
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/Menu.js +20 -0
- package/dist-es/menu/Menu.js.map +1 -0
- package/dist-es/menu/MenuBase.js +224 -0
- package/dist-es/menu/MenuBase.js.map +1 -0
- package/dist-es/menu/MenuContext.js +121 -0
- package/dist-es/menu/MenuContext.js.map +1 -0
- package/dist-es/menu/MenuGroup.css.js +4 -0
- package/dist-es/menu/MenuGroup.css.js.map +1 -0
- package/dist-es/menu/MenuGroup.js +136 -0
- package/dist-es/menu/MenuGroup.js.map +1 -0
- package/dist-es/menu/MenuItem.css.js +4 -0
- package/dist-es/menu/MenuItem.css.js.map +1 -0
- package/dist-es/menu/MenuItem.js +181 -0
- package/dist-es/menu/MenuItem.js.map +1 -0
- package/dist-es/menu/MenuPanel.css.js +4 -0
- package/dist-es/menu/MenuPanel.css.js.map +1 -0
- package/dist-es/menu/MenuPanel.js +153 -0
- package/dist-es/menu/MenuPanel.js.map +1 -0
- package/dist-es/menu/MenuPanelBase.js +25 -0
- package/dist-es/menu/MenuPanelBase.js.map +1 -0
- package/dist-es/menu/MenuPanelContext.js +117 -0
- package/dist-es/menu/MenuPanelContext.js.map +1 -0
- package/dist-es/menu/MenuTrigger.js +137 -0
- package/dist-es/menu/MenuTrigger.js.map +1 -0
- package/dist-es/menu/MenuTriggerContext.js +113 -0
- package/dist-es/menu/MenuTriggerContext.js.map +1 -0
- package/dist-es/multiline-input/MultilineInput.js +8 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +8 -1
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/Option.js +8 -1
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.js +8 -1
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +8 -1
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +8 -1
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +8 -1
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +8 -1
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.js +8 -1
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +8 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +8 -1
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +8 -1
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/CompactInput.js +8 -1
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +8 -1
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +8 -1
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +8 -1
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +8 -1
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +8 -1
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +8 -1
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +8 -1
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +8 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js +8 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/pill/Pill.js +8 -1
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.js +8 -1
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +8 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +8 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +8 -1
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +8 -1
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +8 -1
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +8 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +16 -5
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +8 -1
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +8 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/spinner/Spinner.js +8 -1
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +8 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +8 -1
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.css.js +1 -1
- package/dist-es/stack-layout/StackLayout.js +21 -7
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +8 -1
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +8 -1
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/switch/Switch.js +8 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/text/Text.js +8 -1
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +8 -1
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +8 -1
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +8 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +8 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +8 -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 +9 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +7 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +8 -1
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +12 -4
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useResponsiveProp.js +15 -1
- package/dist-es/utils/useResponsiveProp.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +8 -1
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +8 -1
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/breakpoints/BreakpointProvider.d.ts +16 -0
- package/dist-types/breakpoints/Breakpoints.d.ts +2 -2
- package/dist-types/breakpoints/index.d.ts +1 -0
- package/dist-types/combo-box/useComboBox.d.ts +1 -0
- package/dist-types/flex-layout/FlexLayout.d.ts +1 -1
- package/dist-types/grid-layout/GridLayout.d.ts +5 -5
- package/dist-types/index.d.ts +2 -1
- package/dist-types/menu/Menu.d.ts +4 -0
- package/dist-types/menu/MenuBase.d.ts +27 -0
- package/dist-types/menu/MenuContext.d.ts +16 -0
- package/dist-types/menu/MenuGroup.d.ts +12 -0
- package/dist-types/menu/MenuItem.d.ts +8 -0
- package/dist-types/menu/MenuPanel.d.ts +8 -0
- package/dist-types/menu/MenuPanelBase.d.ts +4 -0
- package/dist-types/menu/MenuPanelContext.d.ts +5 -0
- package/dist-types/menu/MenuTrigger.d.ts +8 -0
- package/dist-types/menu/MenuTriggerContext.d.ts +6 -0
- package/dist-types/menu/index.d.ts +5 -0
- package/dist-types/tooltip/useTooltip.d.ts +4 -0
- package/dist-types/utils/useResponsiveProp.d.ts +1 -0
- package/package.json +2 -2
|
@@ -22,6 +22,7 @@ require('../banner/BannerActions.js');
|
|
|
22
22
|
require('../banner/BannerContent.js');
|
|
23
23
|
require('../border-item/BorderItem.js');
|
|
24
24
|
require('../border-layout/BorderLayout.js');
|
|
25
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
25
26
|
require('../button/Button.js');
|
|
26
27
|
require('../card/Card.js');
|
|
27
28
|
require('../checkbox/Checkbox.js');
|
|
@@ -64,12 +65,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
64
65
|
require('../link/Link.js');
|
|
65
66
|
require('../link-card/LinkCard.js');
|
|
66
67
|
require('../list-control/ListControlContext.js');
|
|
68
|
+
require('../menu/MenuContext.js');
|
|
69
|
+
require('@floating-ui/react');
|
|
70
|
+
require('../menu/MenuItem.js');
|
|
71
|
+
require('../menu/MenuPanel.js');
|
|
72
|
+
require('../menu/MenuTriggerContext.js');
|
|
73
|
+
require('../menu/MenuPanelContext.js');
|
|
74
|
+
require('../menu/MenuGroup.js');
|
|
67
75
|
require('../multiline-input/MultilineInput.js');
|
|
68
76
|
require('../navigation-item/NavigationItem.js');
|
|
69
77
|
require('../option/Option.js');
|
|
70
78
|
require('../option/OptionGroup.js');
|
|
71
79
|
require('../overlay/OverlayContext.js');
|
|
72
|
-
require('@floating-ui/react');
|
|
73
80
|
require('../overlay/OverlayPanel.js');
|
|
74
81
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
75
82
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["useState","useEffect","useIsomorphicLayoutEffect"],"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":["useState","useEffect","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAE1B,SAAS,CAAA,CAAA;AAEX,EAAAC,eAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAAC,mDAAA,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-cjs/badge/Badge.js
CHANGED
|
@@ -23,6 +23,7 @@ require('../banner/BannerActions.js');
|
|
|
23
23
|
require('../banner/BannerContent.js');
|
|
24
24
|
require('../border-item/BorderItem.js');
|
|
25
25
|
require('../border-layout/BorderLayout.js');
|
|
26
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
26
27
|
require('../button/Button.js');
|
|
27
28
|
require('../card/Card.js');
|
|
28
29
|
require('../checkbox/Checkbox.js');
|
|
@@ -63,12 +64,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
63
64
|
require('../link/Link.js');
|
|
64
65
|
require('../link-card/LinkCard.js');
|
|
65
66
|
require('../list-control/ListControlContext.js');
|
|
67
|
+
require('../menu/MenuContext.js');
|
|
68
|
+
require('@floating-ui/react');
|
|
69
|
+
require('../menu/MenuItem.js');
|
|
70
|
+
require('../menu/MenuPanel.js');
|
|
71
|
+
require('../menu/MenuTriggerContext.js');
|
|
72
|
+
require('../menu/MenuPanelContext.js');
|
|
73
|
+
require('../menu/MenuGroup.js');
|
|
66
74
|
require('../multiline-input/MultilineInput.js');
|
|
67
75
|
require('../navigation-item/NavigationItem.js');
|
|
68
76
|
require('../option/Option.js');
|
|
69
77
|
require('../option/OptionGroup.js');
|
|
70
78
|
require('../overlay/OverlayContext.js');
|
|
71
|
-
require('@floating-ui/react');
|
|
72
79
|
require('../overlay/OverlayPanel.js');
|
|
73
80
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
74
81
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["makePrefixer","forwardRef","Badge","useWindow","useComponentCssInjection","badgeCss","jsxs","clsx","jsx"],"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":["makePrefixer","forwardRef","Badge","useWindow","useComponentCssInjection","badgeCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA,CAAA;AAEtC,MAAM,KAAQ,GAAAC,gBAAA,CAAwC,SAASC,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAM,GAAA,GAAA,EAAK,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACjD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;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,uBACGC,eAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACAC,cAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAAD,SAAA,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;;;;"}
|
|
@@ -21,6 +21,7 @@ require('./BannerActions.js');
|
|
|
21
21
|
require('./BannerContent.js');
|
|
22
22
|
require('../border-item/BorderItem.js');
|
|
23
23
|
require('../border-layout/BorderLayout.js');
|
|
24
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
24
25
|
require('../button/Button.js');
|
|
25
26
|
require('../card/Card.js');
|
|
26
27
|
require('../checkbox/Checkbox.js');
|
|
@@ -63,12 +64,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
63
64
|
require('../link/Link.js');
|
|
64
65
|
require('../link-card/LinkCard.js');
|
|
65
66
|
require('../list-control/ListControlContext.js');
|
|
67
|
+
require('../menu/MenuContext.js');
|
|
68
|
+
require('@floating-ui/react');
|
|
69
|
+
require('../menu/MenuItem.js');
|
|
70
|
+
require('../menu/MenuPanel.js');
|
|
71
|
+
require('../menu/MenuTriggerContext.js');
|
|
72
|
+
require('../menu/MenuPanelContext.js');
|
|
73
|
+
require('../menu/MenuGroup.js');
|
|
66
74
|
require('../multiline-input/MultilineInput.js');
|
|
67
75
|
require('../navigation-item/NavigationItem.js');
|
|
68
76
|
require('../option/Option.js');
|
|
69
77
|
require('../option/OptionGroup.js');
|
|
70
78
|
require('../overlay/OverlayContext.js');
|
|
71
|
-
require('@floating-ui/react');
|
|
72
79
|
require('../overlay/OverlayPanel.js');
|
|
73
80
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
74
81
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["makePrefixer","forwardRef","Banner","useWindow","useComponentCssInjection","bannerCss","jsxs","clsx","jsx","StatusIndicator"],"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":["makePrefixer","forwardRef","Banner","useWindow","useComponentCssInjection","bannerCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,GAAU,SAAW,EAAA,MAAA,GAAS,MAAW,EAAA,GAAA,IAAA,IAChE,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;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,sBAACC,cAAA,CAAAC,+BAAA,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;;;;"}
|
|
@@ -21,6 +21,7 @@ require('./Banner.js');
|
|
|
21
21
|
require('./BannerContent.js');
|
|
22
22
|
require('../border-item/BorderItem.js');
|
|
23
23
|
require('../border-layout/BorderLayout.js');
|
|
24
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
24
25
|
require('../button/Button.js');
|
|
25
26
|
require('../card/Card.js');
|
|
26
27
|
require('../checkbox/Checkbox.js');
|
|
@@ -63,12 +64,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
63
64
|
require('../link/Link.js');
|
|
64
65
|
require('../link-card/LinkCard.js');
|
|
65
66
|
require('../list-control/ListControlContext.js');
|
|
67
|
+
require('../menu/MenuContext.js');
|
|
68
|
+
require('@floating-ui/react');
|
|
69
|
+
require('../menu/MenuItem.js');
|
|
70
|
+
require('../menu/MenuPanel.js');
|
|
71
|
+
require('../menu/MenuTriggerContext.js');
|
|
72
|
+
require('../menu/MenuPanelContext.js');
|
|
73
|
+
require('../menu/MenuGroup.js');
|
|
66
74
|
require('../multiline-input/MultilineInput.js');
|
|
67
75
|
require('../navigation-item/NavigationItem.js');
|
|
68
76
|
require('../option/Option.js');
|
|
69
77
|
require('../option/OptionGroup.js');
|
|
70
78
|
require('../overlay/OverlayContext.js');
|
|
71
|
-
require('@floating-ui/react');
|
|
72
79
|
require('../overlay/OverlayPanel.js');
|
|
73
80
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
74
81
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["makePrefixer","forwardRef","BannerActions","useWindow","useComponentCssInjection","bannerActionsCss","jsx","clsx"],"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":["makePrefixer","forwardRef","BannerActions","useWindow","useComponentCssInjection","bannerActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -21,6 +21,7 @@ require('./Banner.js');
|
|
|
21
21
|
require('./BannerActions.js');
|
|
22
22
|
require('../border-item/BorderItem.js');
|
|
23
23
|
require('../border-layout/BorderLayout.js');
|
|
24
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
24
25
|
require('../button/Button.js');
|
|
25
26
|
require('../card/Card.js');
|
|
26
27
|
require('../checkbox/Checkbox.js');
|
|
@@ -63,12 +64,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
63
64
|
require('../link/Link.js');
|
|
64
65
|
require('../link-card/LinkCard.js');
|
|
65
66
|
require('../list-control/ListControlContext.js');
|
|
67
|
+
require('../menu/MenuContext.js');
|
|
68
|
+
require('@floating-ui/react');
|
|
69
|
+
require('../menu/MenuItem.js');
|
|
70
|
+
require('../menu/MenuPanel.js');
|
|
71
|
+
require('../menu/MenuTriggerContext.js');
|
|
72
|
+
require('../menu/MenuPanelContext.js');
|
|
73
|
+
require('../menu/MenuGroup.js');
|
|
66
74
|
require('../multiline-input/MultilineInput.js');
|
|
67
75
|
require('../navigation-item/NavigationItem.js');
|
|
68
76
|
require('../option/Option.js');
|
|
69
77
|
require('../option/OptionGroup.js');
|
|
70
78
|
require('../overlay/OverlayContext.js');
|
|
71
|
-
require('@floating-ui/react');
|
|
72
79
|
require('../overlay/OverlayPanel.js');
|
|
73
80
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
74
81
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["makePrefixer","forwardRef","BannerContent","useWindow","useComponentCssInjection","bannerContentCss","jsx","clsx"],"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":["makePrefixer","forwardRef","BannerContent","useWindow","useComponentCssInjection","bannerContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -23,6 +23,7 @@ require('../banner/Banner.js');
|
|
|
23
23
|
require('../banner/BannerActions.js');
|
|
24
24
|
require('../banner/BannerContent.js');
|
|
25
25
|
require('../border-layout/BorderLayout.js');
|
|
26
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
26
27
|
require('../button/Button.js');
|
|
27
28
|
require('../card/Card.js');
|
|
28
29
|
require('../checkbox/Checkbox.js');
|
|
@@ -64,12 +65,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
64
65
|
require('../link/Link.js');
|
|
65
66
|
require('../link-card/LinkCard.js');
|
|
66
67
|
require('../list-control/ListControlContext.js');
|
|
68
|
+
require('../menu/MenuContext.js');
|
|
69
|
+
require('@floating-ui/react');
|
|
70
|
+
require('../menu/MenuItem.js');
|
|
71
|
+
require('../menu/MenuPanel.js');
|
|
72
|
+
require('../menu/MenuTriggerContext.js');
|
|
73
|
+
require('../menu/MenuPanelContext.js');
|
|
74
|
+
require('../menu/MenuGroup.js');
|
|
67
75
|
require('../multiline-input/MultilineInput.js');
|
|
68
76
|
require('../navigation-item/NavigationItem.js');
|
|
69
77
|
require('../option/Option.js');
|
|
70
78
|
require('../option/OptionGroup.js');
|
|
71
79
|
require('../overlay/OverlayContext.js');
|
|
72
|
-
require('@floating-ui/react');
|
|
73
80
|
require('../overlay/OverlayPanel.js');
|
|
74
81
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
75
82
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"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,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAAC,gBAAA;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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;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,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;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;;;;;"}
|
|
@@ -22,6 +22,7 @@ require('../banner/Banner.js');
|
|
|
22
22
|
require('../banner/BannerActions.js');
|
|
23
23
|
require('../banner/BannerContent.js');
|
|
24
24
|
require('../border-item/BorderItem.js');
|
|
25
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
25
26
|
require('../button/Button.js');
|
|
26
27
|
require('../card/Card.js');
|
|
27
28
|
require('../checkbox/Checkbox.js');
|
|
@@ -63,12 +64,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
63
64
|
require('../link/Link.js');
|
|
64
65
|
require('../link-card/LinkCard.js');
|
|
65
66
|
require('../list-control/ListControlContext.js');
|
|
67
|
+
require('../menu/MenuContext.js');
|
|
68
|
+
require('@floating-ui/react');
|
|
69
|
+
require('../menu/MenuItem.js');
|
|
70
|
+
require('../menu/MenuPanel.js');
|
|
71
|
+
require('../menu/MenuTriggerContext.js');
|
|
72
|
+
require('../menu/MenuPanelContext.js');
|
|
73
|
+
require('../menu/MenuGroup.js');
|
|
66
74
|
require('../multiline-input/MultilineInput.js');
|
|
67
75
|
require('../navigation-item/NavigationItem.js');
|
|
68
76
|
require('../option/Option.js');
|
|
69
77
|
require('../option/OptionGroup.js');
|
|
70
78
|
require('../overlay/OverlayContext.js');
|
|
71
|
-
require('@floating-ui/react');
|
|
72
79
|
require('../overlay/OverlayPanel.js');
|
|
73
80
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
74
81
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["makePrefixer","forwardRef","Children","useEffect","jsx","GridLayout","clsx"],"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":["makePrefixer","forwardRef","Children","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA,CAAA;AAMjB,MAAM,YAAsC,GAAAC,gBAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAU,EAAA,GAAA,IAAA,IACtC,GACG,KAAA;AACH,IAAA,MAAM,cAAcC,cAAS,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,IAAAC,eAAA,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,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,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;;;;"}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var createContext = require('../utils/createContext.js');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
9
|
+
require('../utils/useId.js');
|
|
10
|
+
var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
|
|
11
|
+
require('../salt-provider/SaltProvider.js');
|
|
12
|
+
require('../viewport/ViewportProvider.js');
|
|
13
|
+
require('clsx');
|
|
14
|
+
require('../accordion/AccordionGroup.js');
|
|
15
|
+
require('../accordion/AccordionPanel.js');
|
|
16
|
+
require('../accordion/Accordion.js');
|
|
17
|
+
require('../accordion/AccordionHeader.js');
|
|
18
|
+
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
19
|
+
require('../avatar/Avatar.js');
|
|
20
|
+
require('../badge/Badge.js');
|
|
21
|
+
require('../banner/Banner.js');
|
|
22
|
+
require('../banner/BannerActions.js');
|
|
23
|
+
require('../banner/BannerContent.js');
|
|
24
|
+
require('../border-item/BorderItem.js');
|
|
25
|
+
require('../border-layout/BorderLayout.js');
|
|
26
|
+
require('../button/Button.js');
|
|
27
|
+
require('../card/Card.js');
|
|
28
|
+
require('../checkbox/Checkbox.js');
|
|
29
|
+
require('../checkbox/CheckboxGroup.js');
|
|
30
|
+
require('@salt-ds/styles');
|
|
31
|
+
require('@salt-ds/window');
|
|
32
|
+
require('@salt-ds/icons');
|
|
33
|
+
require('../combo-box/ComboBox.js');
|
|
34
|
+
require('../dialog/Dialog.js');
|
|
35
|
+
require('../dialog/DialogHeader.js');
|
|
36
|
+
require('../dialog/DialogActions.js');
|
|
37
|
+
require('../dialog/DialogContent.js');
|
|
38
|
+
require('../dialog/DialogContext.js');
|
|
39
|
+
require('../dialog/DialogCloseButton.js');
|
|
40
|
+
require('../drawer/Drawer.js');
|
|
41
|
+
require('../drawer/DrawerCloseButton.js');
|
|
42
|
+
require('../dropdown/Dropdown.js');
|
|
43
|
+
require('../file-drop-zone/FileDropZone.js');
|
|
44
|
+
require('../file-drop-zone/FileDropZoneIcon.js');
|
|
45
|
+
require('../file-drop-zone/FileDropZoneTrigger.js');
|
|
46
|
+
require('../flex-item/FlexItem.js');
|
|
47
|
+
require('../flex-layout/FlexLayout.js');
|
|
48
|
+
require('../flow-layout/FlowLayout.js');
|
|
49
|
+
require('../form-field/FormField.js');
|
|
50
|
+
require('../status-indicator/StatusIndicator.js');
|
|
51
|
+
require('../text/Text.js');
|
|
52
|
+
require('../text/Code.js');
|
|
53
|
+
require('../text/Display.js');
|
|
54
|
+
require('../text/Headings.js');
|
|
55
|
+
require('../text/Label.js');
|
|
56
|
+
require('../text/TextAction.js');
|
|
57
|
+
require('../text/TextNotation.js');
|
|
58
|
+
require('../form-field-context/FormFieldContext.js');
|
|
59
|
+
require('../grid-item/GridItem.js');
|
|
60
|
+
require('../grid-layout/GridLayout.js');
|
|
61
|
+
require('../input/Input.js');
|
|
62
|
+
require('../interactable-card/InteractableCard.js');
|
|
63
|
+
require('../interactable-card/InteractableCardGroup.js');
|
|
64
|
+
require('../interactable-card/InteractableCardGroupContext.js');
|
|
65
|
+
require('../link/Link.js');
|
|
66
|
+
require('../link-card/LinkCard.js');
|
|
67
|
+
require('../list-control/ListControlContext.js');
|
|
68
|
+
require('../menu/MenuContext.js');
|
|
69
|
+
require('@floating-ui/react');
|
|
70
|
+
require('../menu/MenuItem.js');
|
|
71
|
+
require('../menu/MenuPanel.js');
|
|
72
|
+
require('../menu/MenuTriggerContext.js');
|
|
73
|
+
require('../menu/MenuPanelContext.js');
|
|
74
|
+
require('../menu/MenuGroup.js');
|
|
75
|
+
require('../multiline-input/MultilineInput.js');
|
|
76
|
+
require('../navigation-item/NavigationItem.js');
|
|
77
|
+
require('../option/Option.js');
|
|
78
|
+
require('../option/OptionGroup.js');
|
|
79
|
+
require('../overlay/OverlayContext.js');
|
|
80
|
+
require('../overlay/OverlayPanel.js');
|
|
81
|
+
require('../overlay/OverlayPanelCloseButton.js');
|
|
82
|
+
require('../overlay/OverlayPanelContent.js');
|
|
83
|
+
require('../pagination/Pagination.js');
|
|
84
|
+
require('../pagination/Paginator.js');
|
|
85
|
+
require('../pagination/CompactInput.js');
|
|
86
|
+
require('../pagination/CompactPaginator.js');
|
|
87
|
+
require('../pagination/GoToInput.js');
|
|
88
|
+
require('../panel/Panel.js');
|
|
89
|
+
require('../parent-child-layout/ParentChildLayout.js');
|
|
90
|
+
require('../pill/Pill.js');
|
|
91
|
+
require('../progress/CircularProgress/CircularProgress.js');
|
|
92
|
+
require('../progress/LinearProgress/LinearProgress.js');
|
|
93
|
+
require('../radio-button/RadioButton.js');
|
|
94
|
+
require('../radio-button/RadioButtonGroup.js');
|
|
95
|
+
require('../scrim/Scrim.js');
|
|
96
|
+
require('../segmented-button-group/SegmentedButtonGroup.js');
|
|
97
|
+
require('../spinner/Spinner.js');
|
|
98
|
+
require('../stack-layout/StackLayout.js');
|
|
99
|
+
require('../status-adornment/StatusAdornment.js');
|
|
100
|
+
require('../toast/Toast.js');
|
|
101
|
+
require('../toast/ToastContent.js');
|
|
102
|
+
require('../split-layout/SplitLayout.js');
|
|
103
|
+
require('../switch/Switch.js');
|
|
104
|
+
require('../toggle-button/ToggleButton.js');
|
|
105
|
+
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
106
|
+
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
107
|
+
require('../tooltip/Tooltip.js');
|
|
108
|
+
|
|
109
|
+
const Context = createContext.createContext("BreakpointContext", {
|
|
110
|
+
matchedBreakpoints: []
|
|
111
|
+
});
|
|
112
|
+
function BreakpointProvider(props) {
|
|
113
|
+
const { children, matchedBreakpoints } = props;
|
|
114
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, {
|
|
115
|
+
value: { matchedBreakpoints },
|
|
116
|
+
children
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
function useMatchedBreakpoints(breakpoints) {
|
|
120
|
+
const entries = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
|
|
121
|
+
const queries = entries.map(([, value]) => `(min-width: ${value}px)`);
|
|
122
|
+
const supportsMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
|
|
123
|
+
const [matchedBreakpoints, setMatchedBreakpoints] = React.useState(Object.fromEntries(entries.map(([bp]) => [bp, false])));
|
|
124
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
125
|
+
if (!supportsMatchMedia) {
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
const matchers = queries.map((query, index) => {
|
|
129
|
+
const mq = window.matchMedia(query);
|
|
130
|
+
const bp = entries[index][0];
|
|
131
|
+
return {
|
|
132
|
+
mq,
|
|
133
|
+
handler: () => {
|
|
134
|
+
setMatchedBreakpoints((prev) => {
|
|
135
|
+
return {
|
|
136
|
+
...prev,
|
|
137
|
+
[bp]: mq.matches
|
|
138
|
+
};
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
});
|
|
143
|
+
matchers.forEach(({ mq, handler }) => {
|
|
144
|
+
handler();
|
|
145
|
+
mq.addEventListener("change", handler);
|
|
146
|
+
});
|
|
147
|
+
return () => {
|
|
148
|
+
matchers.forEach(({ mq, handler }) => {
|
|
149
|
+
mq.removeEventListener("change", handler);
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
}, [supportsMatchMedia]);
|
|
153
|
+
return Object.keys(matchedBreakpoints).filter(
|
|
154
|
+
(bp) => matchedBreakpoints[bp]
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
function useBreakpoint() {
|
|
158
|
+
var _a;
|
|
159
|
+
const { matchedBreakpoints } = React.useContext(Context);
|
|
160
|
+
return {
|
|
161
|
+
matchedBreakpoints,
|
|
162
|
+
breakpoint: (_a = matchedBreakpoints[0]) != null ? _a : null
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
exports.BreakpointProvider = BreakpointProvider;
|
|
167
|
+
exports.useBreakpoint = useBreakpoint;
|
|
168
|
+
exports.useMatchedBreakpoints = useMatchedBreakpoints;
|
|
169
|
+
//# sourceMappingURL=BreakpointProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { createContext, useIsomorphicLayoutEffect } from \"../utils\";\nimport { ReactNode, useContext, useState } from \"react\";\nimport { Breakpoints } from \"./Breakpoints\";\n\ntype Breakpoint = keyof Breakpoints;\n\ninterface BreakpointContext {\n matchedBreakpoints: Breakpoint[];\n}\n\nconst Context = createContext<BreakpointContext>(\"BreakpointContext\", {\n matchedBreakpoints: [],\n});\n\ninterface BreakpointProviderProps {\n children?: ReactNode;\n matchedBreakpoints: Breakpoint[];\n}\n\nexport function BreakpointProvider(props: BreakpointProviderProps) {\n const { children, matchedBreakpoints } = props;\n\n return (\n <Context.Provider value={{ matchedBreakpoints }}>\n {children}\n </Context.Provider>\n );\n}\n\nexport function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[] {\n const entries = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);\n const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\n\n const supportsMatchMedia =\n typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n const [matchedBreakpoints, setMatchedBreakpoints] = useState<\n Partial<Record<Breakpoint, boolean>>\n >(Object.fromEntries(entries.map(([bp]) => [bp as Breakpoint, false])));\n\n useIsomorphicLayoutEffect(() => {\n if (!supportsMatchMedia) {\n return;\n }\n\n const matchers = queries.map((query, index) => {\n const mq = window.matchMedia(query);\n const bp = entries[index][0] as Breakpoint;\n\n return {\n mq,\n handler: () => {\n setMatchedBreakpoints((prev) => {\n return {\n ...prev,\n [bp]: mq.matches,\n };\n });\n },\n };\n });\n\n matchers.forEach(({ mq, handler }) => {\n handler();\n mq.addEventListener(\"change\", handler);\n });\n\n return () => {\n matchers.forEach(({ mq, handler }) => {\n mq.removeEventListener(\"change\", handler);\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [supportsMatchMedia]);\n\n return Object.keys(matchedBreakpoints).filter(\n (bp) => matchedBreakpoints[bp as Breakpoint]\n ) as Breakpoint[];\n}\n\nexport function useBreakpoint(): BreakpointContext & {\n breakpoint: Breakpoint | null;\n} {\n const { matchedBreakpoints } = useContext(Context);\n\n return {\n matchedBreakpoints,\n breakpoint: matchedBreakpoints[0] ?? null,\n };\n}\n"],"names":["createContext","jsx","useState","useIsomorphicLayoutEffect","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,OAAA,GAAUA,4BAAiC,mBAAqB,EAAA;AAAA,EACpE,oBAAoB,EAAC;AACvB,CAAC,CAAA,CAAA;AAOM,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,KAAA,CAAA;AAEzC,EACE,uBAAAC,cAAA,CAAC,QAAQ,QAAR,EAAA;AAAA,IAAiB,KAAA,EAAO,EAAE,kBAAmB,EAAA;AAAA,IAC3C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,sBAAsB,WAAwC,EAAA;AAC5E,EAAA,MAAM,UAAU,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAA,CAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA,CAAA;AACxE,EAAM,MAAA,OAAA,GAAU,QAAQ,GAAI,CAAA,CAAC,GAAG,KAAK,CAAM,KAAA,CAAA,YAAA,EAAe,KAAU,CAAA,GAAA,CAAA,CAAA,CAAA;AAEpE,EAAA,MAAM,qBACJ,OAAO,MAAA,KAAW,WAAe,IAAA,OAAO,OAAO,UAAe,KAAA,UAAA,CAAA;AAEhE,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,IAAIC,cAElD,CAAA,MAAA,CAAO,YAAY,OAAQ,CAAA,GAAA,CAAI,CAAC,CAAC,EAAE,CAAM,KAAA,CAAC,IAAkB,KAAK,CAAC,CAAC,CAAC,CAAA,CAAA;AAEtE,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,kBAAoB,EAAA;AACvB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,QAAW,GAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC7C,MAAM,MAAA,EAAA,GAAK,MAAO,CAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAClC,MAAM,MAAA,EAAA,GAAK,QAAQ,KAAO,CAAA,CAAA,CAAA,CAAA,CAAA;AAE1B,MAAO,OAAA;AAAA,QACL,EAAA;AAAA,QACA,SAAS,MAAM;AACb,UAAA,qBAAA,CAAsB,CAAC,IAAS,KAAA;AAC9B,YAAO,OAAA;AAAA,cACL,GAAG,IAAA;AAAA,cACH,CAAC,KAAK,EAAG,CAAA,OAAA;AAAA,aACX,CAAA;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,QAAA,CAAS,OAAQ,CAAA,CAAC,EAAE,EAAA,EAAI,SAAc,KAAA;AACpC,MAAQ,OAAA,EAAA,CAAA;AACR,MAAG,EAAA,CAAA,gBAAA,CAAiB,UAAU,OAAO,CAAA,CAAA;AAAA,KACtC,CAAA,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,OAAQ,CAAA,CAAC,EAAE,EAAA,EAAI,SAAc,KAAA;AACpC,QAAG,EAAA,CAAA,mBAAA,CAAoB,UAAU,OAAO,CAAA,CAAA;AAAA,OACzC,CAAA,CAAA;AAAA,KACH,CAAA;AAAA,GAEF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,kBAAkB,CAAE,CAAA,MAAA;AAAA,IACrC,CAAC,OAAO,kBAAmB,CAAA,EAAA,CAAA;AAAA,GAC7B,CAAA;AACF,CAAA;AAEO,SAAS,aAEd,GAAA;AAlFF,EAAA,IAAA,EAAA,CAAA;AAmFE,EAAA,MAAM,EAAE,kBAAA,EAAuB,GAAAC,gBAAA,CAAW,OAAO,CAAA,CAAA;AAEjD,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,UAAA,EAAA,CAAY,EAAmB,GAAA,kBAAA,CAAA,CAAA,CAAA,KAAnB,IAAyB,GAAA,EAAA,GAAA,IAAA;AAAA,GACvC,CAAA;AACF;;;;;;"}
|
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const DEFAULT_BREAKPOINTS = {
|
|
6
6
|
xs: 0,
|
|
7
7
|
sm: 600,
|
|
8
8
|
md: 960,
|
|
9
9
|
lg: 1280,
|
|
10
10
|
xl: 1920
|
|
11
11
|
};
|
|
12
|
-
const DEFAULT_BREAKPOINTS = breakpoints;
|
|
13
12
|
|
|
14
13
|
exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
|
|
15
14
|
//# sourceMappingURL=Breakpoints.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breakpoints.js","sources":["../src/breakpoints/Breakpoints.tsx"],"sourcesContent":["export
|
|
1
|
+
{"version":3,"file":"Breakpoints.js","sources":["../src/breakpoints/Breakpoints.tsx"],"sourcesContent":["export interface Breakpoints {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n xs: 0,\n sm: 600,\n md: 960,\n lg: 1280,\n xl: 1920,\n};\n"],"names":[],"mappings":";;;;AAQO,MAAM,mBAAmC,GAAA;AAAA,EAC9C,EAAI,EAAA,CAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA,EACJ,EAAI,EAAA,IAAA;AAAA,EACJ,EAAI,EAAA,IAAA;AACN;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, transparent);\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, 0);\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, transparent);\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, 0);\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, var(--salt-spacing-100));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Button.css.js.map
|
|
@@ -24,6 +24,7 @@ require('../banner/BannerActions.js');
|
|
|
24
24
|
require('../banner/BannerContent.js');
|
|
25
25
|
require('../border-item/BorderItem.js');
|
|
26
26
|
require('../border-layout/BorderLayout.js');
|
|
27
|
+
require('../breakpoints/BreakpointProvider.js');
|
|
27
28
|
var useButton = require('./useButton.js');
|
|
28
29
|
require('../card/Card.js');
|
|
29
30
|
require('../checkbox/Checkbox.js');
|
|
@@ -64,12 +65,18 @@ require('../interactable-card/InteractableCardGroupContext.js');
|
|
|
64
65
|
require('../link/Link.js');
|
|
65
66
|
require('../link-card/LinkCard.js');
|
|
66
67
|
require('../list-control/ListControlContext.js');
|
|
68
|
+
require('../menu/MenuContext.js');
|
|
69
|
+
require('@floating-ui/react');
|
|
70
|
+
require('../menu/MenuItem.js');
|
|
71
|
+
require('../menu/MenuPanel.js');
|
|
72
|
+
require('../menu/MenuTriggerContext.js');
|
|
73
|
+
require('../menu/MenuPanelContext.js');
|
|
74
|
+
require('../menu/MenuGroup.js');
|
|
67
75
|
require('../multiline-input/MultilineInput.js');
|
|
68
76
|
require('../navigation-item/NavigationItem.js');
|
|
69
77
|
require('../option/Option.js');
|
|
70
78
|
require('../option/OptionGroup.js');
|
|
71
79
|
require('../overlay/OverlayContext.js');
|
|
72
|
-
require('@floating-ui/react');
|
|
73
80
|
require('../overlay/OverlayPanel.js');
|
|
74
81
|
require('../overlay/OverlayPanelCloseButton.js');
|
|
75
82
|
require('../overlay/OverlayPanelContent.js');
|
|
@@ -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":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsx","clsx"],"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":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,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,GAAIC,mBAAU,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,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,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;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;;;;;"}
|