@salt-ds/core 1.29.0 → 1.31.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 +368 -51
- package/dist-cjs/accordion/Accordion.js +5 -0
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +4 -0
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +3 -0
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +22 -5
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.css.js +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +7 -2
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +3 -0
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +3 -0
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +3 -0
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +3 -0
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +3 -0
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +3 -0
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +3 -0
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +3 -0
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +3 -0
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js +3 -0
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/button/Button.js +3 -0
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.js +3 -0
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +3 -0
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +3 -0
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +3 -0
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +3 -0
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +30 -20
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +5 -2
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +3 -0
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +3 -0
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +3 -0
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +3 -0
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +3 -0
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/divider/Divider.css.js +6 -0
- package/dist-cjs/divider/Divider.css.js.map +1 -0
- package/dist-cjs/divider/Divider.js +143 -0
- package/dist-cjs/divider/Divider.js.map +1 -0
- package/dist-cjs/drawer/Drawer.js +3 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +3 -0
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.js +29 -18
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +3 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +4 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +3 -0
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +3 -0
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +3 -0
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +3 -0
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +3 -0
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +3 -0
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +3 -0
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +3 -0
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +8 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +3 -0
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +3 -0
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +3 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +3 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/link/Link.js +3 -0
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.js +3 -0
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-box/ListBox.css.js +6 -0
- package/dist-cjs/list-box/ListBox.css.js.map +1 -0
- package/dist-cjs/list-box/ListBox.js +295 -0
- package/dist-cjs/list-box/ListBox.js.map +1 -0
- package/dist-cjs/list-control/ListControlContext.js +5 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +78 -11
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js +3 -0
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js +3 -0
- package/dist-cjs/menu/MenuContext.js.map +1 -1
- package/dist-cjs/menu/MenuGroup.css.js +1 -1
- package/dist-cjs/menu/MenuGroup.js +3 -0
- package/dist-cjs/menu/MenuGroup.js.map +1 -1
- package/dist-cjs/menu/MenuItem.css.js +1 -1
- package/dist-cjs/menu/MenuItem.js +3 -0
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuPanel.css.js +1 -1
- package/dist-cjs/menu/MenuPanel.js +3 -0
- package/dist-cjs/menu/MenuPanel.js.map +1 -1
- package/dist-cjs/menu/MenuPanelContext.js +3 -0
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js +3 -0
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/menu/MenuTriggerContext.js +3 -0
- package/dist-cjs/menu/MenuTriggerContext.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +3 -0
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +3 -0
- 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 +7 -2
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.css.js +1 -1
- package/dist-cjs/option/OptionGroup.js +3 -0
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.css.js +1 -1
- package/dist-cjs/option/OptionList.js +3 -0
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +3 -0
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +3 -0
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +3 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +3 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +3 -0
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +3 -0
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +3 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js +3 -0
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +3 -0
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +3 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +3 -0
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +3 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +3 -0
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +3 -0
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.js +3 -0
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +3 -0
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js +3 -0
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-cjs/pill/Pill.js +3 -0
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.js +7 -2
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +3 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +3 -0
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +3 -0
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +3 -0
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +3 -0
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +3 -0
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +34 -10
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +3 -0
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +3 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/spinner/Spinner.js +3 -0
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +3 -0
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +3 -0
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +3 -0
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +3 -0
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +3 -0
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +3 -0
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/tag/Tag.css.js +6 -0
- package/dist-cjs/tag/Tag.css.js.map +1 -0
- package/dist-cjs/tag/Tag.js +137 -0
- package/dist-cjs/tag/Tag.js.map +1 -0
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +3 -0
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/theme/ActionFont.js +8 -0
- package/dist-cjs/theme/ActionFont.js.map +1 -0
- package/dist-cjs/toast/Toast.js +3 -0
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +3 -0
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +3 -0
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +3 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +3 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js +3 -0
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +3 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +3 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +3 -0
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +3 -0
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +3 -0
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +5 -0
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +4 -0
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +3 -0
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/accordion/AccordionHeader.js +23 -6
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.css.js +1 -1
- package/dist-es/accordion/AccordionPanel.js +7 -2
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +3 -0
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +3 -0
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +3 -0
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +3 -0
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +3 -0
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +3 -0
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +3 -0
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +3 -0
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +3 -0
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +3 -0
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/button/Button.js +3 -0
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.js +3 -0
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +3 -0
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +3 -0
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +3 -0
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +3 -0
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +30 -20
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +5 -2
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +3 -0
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +3 -0
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +3 -0
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +3 -0
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +3 -0
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/divider/Divider.css.js +4 -0
- package/dist-es/divider/Divider.css.js.map +1 -0
- package/dist-es/divider/Divider.js +139 -0
- package/dist-es/divider/Divider.js.map +1 -0
- package/dist-es/drawer/Drawer.js +3 -0
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +3 -0
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.css.js +1 -1
- package/dist-es/dropdown/Dropdown.js +30 -19
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +3 -0
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +4 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +3 -0
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +3 -0
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +3 -0
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +3 -0
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +3 -0
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +3 -0
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +3 -0
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +3 -0
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +4 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +3 -0
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.js +3 -0
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +3 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js +3 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/link/Link.js +3 -0
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.js +3 -0
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-box/ListBox.css.js +4 -0
- package/dist-es/list-box/ListBox.css.js.map +1 -0
- package/dist-es/list-box/ListBox.js +291 -0
- package/dist-es/list-box/ListBox.js.map +1 -0
- package/dist-es/list-control/ListControlContext.js +5 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +79 -12
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuBase.js +3 -0
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js +3 -0
- package/dist-es/menu/MenuContext.js.map +1 -1
- package/dist-es/menu/MenuGroup.css.js +1 -1
- package/dist-es/menu/MenuGroup.js +3 -0
- package/dist-es/menu/MenuGroup.js.map +1 -1
- package/dist-es/menu/MenuItem.css.js +1 -1
- package/dist-es/menu/MenuItem.js +3 -0
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuPanel.css.js +1 -1
- package/dist-es/menu/MenuPanel.js +3 -0
- package/dist-es/menu/MenuPanel.js.map +1 -1
- package/dist-es/menu/MenuPanelContext.js +3 -0
- package/dist-es/menu/MenuPanelContext.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js +3 -0
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/menu/MenuTriggerContext.js +3 -0
- package/dist-es/menu/MenuTriggerContext.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js +3 -0
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +3 -0
- 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 +7 -2
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.css.js +1 -1
- package/dist-es/option/OptionGroup.js +3 -0
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.css.js +1 -1
- package/dist-es/option/OptionList.js +3 -0
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +3 -0
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +3 -0
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +3 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.js +3 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +3 -0
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +3 -0
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +3 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/CompactInput.js +3 -0
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +3 -0
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +3 -0
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +3 -0
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +3 -0
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +3 -0
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +3 -0
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.js +3 -0
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +3 -0
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js +3 -0
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/pill/Pill.js +3 -0
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/pill-input/PillInput.js +7 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +3 -0
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +3 -0
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +3 -0
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +3 -0
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +3 -0
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +3 -0
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +34 -10
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +3 -0
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +3 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/spinner/Spinner.js +3 -0
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +3 -0
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +3 -0
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +3 -0
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +3 -0
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +3 -0
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +3 -0
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/tag/Tag.css.js +4 -0
- package/dist-es/tag/Tag.css.js.map +1 -0
- package/dist-es/tag/Tag.js +133 -0
- package/dist-es/tag/Tag.js.map +1 -0
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +3 -0
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/theme/ActionFont.js +4 -0
- package/dist-es/theme/ActionFont.js.map +1 -0
- package/dist-es/toast/Toast.js +3 -0
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +3 -0
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.js +3 -0
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +3 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +3 -0
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js +3 -0
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +3 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +3 -0
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +3 -0
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +3 -0
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +3 -0
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/accordion/Accordion.d.ts +4 -0
- package/dist-types/accordion/AccordionContext.d.ts +1 -0
- package/dist-types/combo-box/ComboBox.d.ts +8 -0
- package/dist-types/combo-box/useComboBox.d.ts +33 -2
- package/dist-types/divider/Divider.d.ts +12 -0
- package/dist-types/divider/index.d.ts +1 -0
- package/dist-types/dropdown/Dropdown.d.ts +6 -0
- package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +2 -2
- package/dist-types/index.d.ts +4 -1
- package/dist-types/list-box/ListBox.d.ts +40 -0
- package/dist-types/list-box/index.d.ts +1 -0
- package/dist-types/list-control/ListControlContext.d.ts +1 -0
- package/dist-types/list-control/ListControlState.d.ts +33 -2
- package/dist-types/pill-input/PillInput.d.ts +3 -0
- package/dist-types/salt-provider/SaltProvider.d.ts +3 -1
- package/dist-types/tag/Tag.d.ts +16 -0
- package/dist-types/tag/index.d.ts +1 -0
- package/dist-types/theme/ActionFont.d.ts +2 -0
- package/dist-types/theme/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n /**\n * (Optional) if provided, this icon component will be used instead of the status icon\n */\n icon?: ReactElement<IconProps>;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status, icon, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n {status && (\n <div className={withBaseName(\"iconContainer\")}>\n {icon ? icon : <StatusIndicator status={status} />}\n </div>\n )}\n {children}\n </div>\n );\n});\n"],"names":["Toast","toastCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef, ReactElement } from \"react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastCss from \"./Toast.css\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * A string to determine the current state of the Toast.\n */\n status?: ValidationStatus;\n /**\n * (Optional) if provided, this icon component will be used instead of the status icon\n */\n icon?: ReactElement<IconProps>;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n props,\n ref\n) {\n const { children, className, status, icon, ...rest } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast\",\n css: toastCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n role=\"alert\"\n {...rest}\n ref={ref}\n >\n {status && (\n <div className={withBaseName(\"iconContainer\")}>\n {icon ? icon : <StatusIndicator status={status} />}\n </div>\n )}\n {children}\n </div>\n );\n});\n"],"names":["Toast","toastCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAatC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAQ,EAAA,IAAA,EAAA,GAAS,MAAS,GAAA,KAAA,CAAA;AACvD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,MAAA,oBACE,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,QACzC,QAAA,EAAA,IAAA,GAAO,uBAAQ,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,MAAA;AAAA,SAAgB,CAAA;AAAA,OAClD,CAAA;AAAA,MAED,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -33,6 +33,7 @@ import '../dialog/DialogActions.js';
|
|
|
33
33
|
import '../dialog/DialogContent.js';
|
|
34
34
|
import '../dialog/DialogContext.js';
|
|
35
35
|
import '../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../divider/Divider.js';
|
|
36
37
|
import '../drawer/Drawer.js';
|
|
37
38
|
import '../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../link/Link.js';
|
|
62
63
|
import '../link-card/LinkCard.js';
|
|
64
|
+
import '../list-box/ListBox.js';
|
|
63
65
|
import '../list-control/ListControlContext.js';
|
|
64
66
|
import '../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -96,6 +98,7 @@ import '../status-adornment/StatusAdornment.js';
|
|
|
96
98
|
import './Toast.js';
|
|
97
99
|
import '../split-layout/SplitLayout.js';
|
|
98
100
|
import '../switch/Switch.js';
|
|
101
|
+
import '../tag/Tag.js';
|
|
99
102
|
import '../toggle-button/ToggleButton.js';
|
|
100
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
101
104
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactNode,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of Toast Content\n */\n children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n { children, className, ...restProps }: ToastContentProps,\n ref: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toast-content\",\n css: toastContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AASvC,MAAA,YAAA,GAAe,WAAW,SAASA,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border-color: var(--salt-actionable-secondary-borderColor, transparent);\n border-style: solid;\n border-width: var(--salt-actionable-borderWidth, 0);\n border-radius: var(--salt-palette-corner-weaker, 0);\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-text-action-textTransform);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-text-action-textAlign);\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible,\n.saltToggleButton[aria-pressed=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--salt-actionable-secondary-borderColor-active, transparent);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--salt-actionable-secondary-borderColor-active, transparent);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
|
|
1
|
+
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border-color: var(--salt-actionable-secondary-borderColor, transparent);\n border-style: solid;\n border-width: var(--salt-actionable-borderWidth, 0);\n border-radius: var(--salt-palette-corner-weaker, 0);\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-text-action-textTransform);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n text-align: var(--salt-text-action-textAlign);\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible,\n.saltToggleButton[aria-pressed=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--salt-actionable-secondary-borderColor-active, transparent);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n border-color: var(--salt-actionable-secondary-borderColor-active, transparent);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=ToggleButton.css.js.map
|
|
@@ -37,6 +37,7 @@ import '../dialog/DialogActions.js';
|
|
|
37
37
|
import '../dialog/DialogContent.js';
|
|
38
38
|
import '../dialog/DialogContext.js';
|
|
39
39
|
import '../dialog/DialogCloseButton.js';
|
|
40
|
+
import '../divider/Divider.js';
|
|
40
41
|
import '../drawer/Drawer.js';
|
|
41
42
|
import '../drawer/DrawerCloseButton.js';
|
|
42
43
|
import '../dropdown/Dropdown.js';
|
|
@@ -64,6 +65,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
64
65
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
65
66
|
import '../link/Link.js';
|
|
66
67
|
import '../link-card/LinkCard.js';
|
|
68
|
+
import '../list-box/ListBox.js';
|
|
67
69
|
import '../list-control/ListControlContext.js';
|
|
68
70
|
import '../menu/MenuContext.js';
|
|
69
71
|
import '@floating-ui/react';
|
|
@@ -101,6 +103,7 @@ import '../toast/Toast.js';
|
|
|
101
103
|
import '../toast/ToastContent.js';
|
|
102
104
|
import '../split-layout/SplitLayout.js';
|
|
103
105
|
import '../switch/Switch.js';
|
|
106
|
+
import '../tag/Tag.js';
|
|
104
107
|
import '../tooltip/Tooltip.js';
|
|
105
108
|
import css_248z from './ToggleButton.css.js';
|
|
106
109
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n role={toggleButtonGroup ? \"radio\" : undefined}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n type=\"button\"\n {...rest}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n forwardRef,\n useRef,\n MouseEvent,\n FocusEvent,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n selected?: boolean;\n onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n function ToggleButton(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n value,\n onClick,\n onFocus,\n onChange,\n selected: selectedProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button\",\n css: toggleButtonCss,\n window: targetWindow,\n });\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const handleRef = useForkRef(ref, buttonRef);\n\n const toggleButtonGroup = useToggleButtonGroup();\n\n const toggleButtonGroupSelected = toggleButtonGroup\n ? toggleButtonGroup.isSelected(value)\n : selectedProp;\n const focusable = toggleButtonGroup\n ? toggleButtonGroup?.isFocused(value)\n : true;\n const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n const [selected, setSelected] = useControlled({\n controlled: toggleButtonGroupSelected,\n default: Boolean(selectedProp),\n name: \"ToggleButton\",\n state: \"selected\",\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.select(event);\n setSelected(!selected);\n onChange?.(event);\n onClick?.(event);\n };\n\n const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n toggleButtonGroup?.focus(value);\n onFocus?.(event);\n };\n\n const ariaChecked = selected && !disabled;\n\n return (\n <button\n aria-pressed={!toggleButtonGroup ? ariaChecked : undefined}\n aria-checked={toggleButtonGroup ? ariaChecked : undefined}\n role={toggleButtonGroup ? \"radio\" : undefined}\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n ref={handleRef}\n onClick={handleClick}\n onFocus={handleFocus}\n tabIndex={focusable && !disabled ? 0 : -1}\n value={value}\n type=\"button\"\n {...rest}\n >\n {children}\n </button>\n );\n }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}
|
|
@@ -35,6 +35,7 @@ import '../dialog/DialogActions.js';
|
|
|
35
35
|
import '../dialog/DialogContent.js';
|
|
36
36
|
import '../dialog/DialogContext.js';
|
|
37
37
|
import '../dialog/DialogCloseButton.js';
|
|
38
|
+
import '../divider/Divider.js';
|
|
38
39
|
import '../drawer/Drawer.js';
|
|
39
40
|
import '../drawer/DrawerCloseButton.js';
|
|
40
41
|
import '../dropdown/Dropdown.js';
|
|
@@ -62,6 +63,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
62
63
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
63
64
|
import '../link/Link.js';
|
|
64
65
|
import '../link-card/LinkCard.js';
|
|
66
|
+
import '../list-box/ListBox.js';
|
|
65
67
|
import '../list-control/ListControlContext.js';
|
|
66
68
|
import '../menu/MenuContext.js';
|
|
67
69
|
import '@floating-ui/react';
|
|
@@ -99,6 +101,7 @@ import '../toast/Toast.js';
|
|
|
99
101
|
import '../toast/ToastContent.js';
|
|
100
102
|
import '../split-layout/SplitLayout.js';
|
|
101
103
|
import '../switch/Switch.js';
|
|
104
|
+
import '../tag/Tag.js';
|
|
102
105
|
import '../toggle-button/ToggleButton.js';
|
|
103
106
|
import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
|
|
104
107
|
import '../tooltip/Tooltip.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: Value) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n ComponentPropsWithoutRef,\n forwardRef,\n KeyboardEvent,\n SyntheticEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { ToggleButtonGroupContext, Value } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: Value;\n /**\n * If `true`, the Toggle Button Group will be disabled.\n */\n disabled?: boolean;\n /**\n * The value. Use when the component is controlled.\n */\n value?: Value;\n /**\n * Callback fired when the selection changes.\n * @param event\n */\n onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * The orientation of the toggle buttons.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n HTMLDivElement,\n ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n const {\n children,\n className,\n value: valueProp,\n defaultValue,\n disabled,\n onChange,\n onKeyDown,\n orientation = \"horizontal\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-toggle-button-group\",\n css: toggleButtonGroupCss,\n window: targetWindow,\n });\n\n const groupRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, groupRef);\n\n const [value, setValue] = useControlled({\n default: defaultValue,\n controlled: valueProp,\n name: \"ToggleButtonGroup\",\n state: \"value\",\n });\n const [focused, setFocused] = useState<Value>(value);\n\n const select = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n const newValue = event.currentTarget.value;\n setValue(newValue);\n if (value !== newValue) {\n onChange?.(event);\n }\n },\n [onChange, value, setValue]\n );\n\n const isSelected = useCallback(\n (id: Value) => {\n return value === id;\n },\n [value]\n );\n\n const focus = (id: Value) => {\n setFocused(id);\n };\n\n const isFocused = useCallback(\n (id: Value) => {\n return focused === id || !focused;\n },\n [focused]\n );\n\n const contextValue = useMemo(\n () => ({\n select,\n isSelected,\n focus,\n isFocused,\n disabled,\n orientation,\n }),\n [select, isSelected, isFocused, disabled, orientation]\n );\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const elements: HTMLElement[] = Array.from(\n groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n );\n const currentIndex = elements.findIndex(\n (element) => element === document.activeElement\n );\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n elements[(currentIndex + 1) % elements.length]?.focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n elements[\n (currentIndex - 1 + elements.length) % elements.length\n ]?.focus();\n break;\n }\n\n onKeyDown?.(event);\n };\n\n return (\n <ToggleButtonGroupContext.Provider value={contextValue}>\n <div\n className={clsx(withBaseName(), withBaseName(orientation), className)}\n role=\"radiogroup\"\n ref={handleRef}\n onKeyDown={handleKeyDown}\n {...rest}\n >\n {children}\n </div>\n </ToggleButtonGroupContext.Provider>\n );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}
|
|
@@ -33,6 +33,7 @@ import '../dialog/DialogActions.js';
|
|
|
33
33
|
import '../dialog/DialogContent.js';
|
|
34
34
|
import '../dialog/DialogContext.js';
|
|
35
35
|
import '../dialog/DialogCloseButton.js';
|
|
36
|
+
import '../divider/Divider.js';
|
|
36
37
|
import '../drawer/Drawer.js';
|
|
37
38
|
import '../drawer/DrawerCloseButton.js';
|
|
38
39
|
import '../dropdown/Dropdown.js';
|
|
@@ -60,6 +61,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
60
61
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
61
62
|
import '../link/Link.js';
|
|
62
63
|
import '../link-card/LinkCard.js';
|
|
64
|
+
import '../list-box/ListBox.js';
|
|
63
65
|
import '../list-control/ListControlContext.js';
|
|
64
66
|
import '../menu/MenuContext.js';
|
|
65
67
|
import '@floating-ui/react';
|
|
@@ -97,6 +99,7 @@ import '../toast/Toast.js';
|
|
|
97
99
|
import '../toast/ToastContent.js';
|
|
98
100
|
import '../split-layout/SplitLayout.js';
|
|
99
101
|
import '../switch/Switch.js';
|
|
102
|
+
import '../tag/Tag.js';
|
|
100
103
|
import '../toggle-button/ToggleButton.js';
|
|
101
104
|
import './ToggleButtonGroup.js';
|
|
102
105
|
import '../tooltip/Tooltip.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (id: Value) => boolean;\n focus: (id: Value) => void;\n isFocused: (id: Value) => boolean;\n orientation: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type Value = string | readonly string[] | number | undefined;\n\nexport interface ToggleButtonGroupContextValue {\n disabled?: boolean;\n select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n isSelected: (id: Value) => boolean;\n focus: (id: Value) => void;\n isFocused: (id: Value) => boolean;\n orientation: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleButtonGroupContext = createContext<\n ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAca,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;"}
|
|
@@ -37,6 +37,7 @@ import '../dialog/DialogActions.js';
|
|
|
37
37
|
import '../dialog/DialogContent.js';
|
|
38
38
|
import '../dialog/DialogContext.js';
|
|
39
39
|
import '../dialog/DialogCloseButton.js';
|
|
40
|
+
import '../divider/Divider.js';
|
|
40
41
|
import '../drawer/Drawer.js';
|
|
41
42
|
import '../drawer/DrawerCloseButton.js';
|
|
42
43
|
import '../dropdown/Dropdown.js';
|
|
@@ -64,6 +65,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
64
65
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
65
66
|
import '../link/Link.js';
|
|
66
67
|
import '../link-card/LinkCard.js';
|
|
68
|
+
import '../list-box/ListBox.js';
|
|
67
69
|
import '../list-control/ListControlContext.js';
|
|
68
70
|
import '../menu/MenuContext.js';
|
|
69
71
|
import '@floating-ui/react';
|
|
@@ -101,6 +103,7 @@ import '../toast/Toast.js';
|
|
|
101
103
|
import '../toast/ToastContent.js';
|
|
102
104
|
import '../split-layout/SplitLayout.js';
|
|
103
105
|
import '../switch/Switch.js';
|
|
106
|
+
import '../tag/Tag.js';
|
|
104
107
|
import '../toggle-button/ToggleButton.js';
|
|
105
108
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
106
109
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n * If no status is provided, icon will also be hidden.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp,\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n disabled,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-expect-error children.ref cannot currently be typed.\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n const hasContent = content != undefined && content !== \"\";\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n open={open && !disabled && hasContent}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n * If no status is provided, icon will also be hidden.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp,\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = disabledProp || formFieldDisabled;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n disabled,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-expect-error children.ref cannot currently be typed.\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n const hasContent = content != undefined && content !== \"\";\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className\n )}\n open={open && !disabled && hasContent}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":"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"}
|
|
@@ -35,6 +35,7 @@ import '../dialog/DialogActions.js';
|
|
|
35
35
|
import '../dialog/DialogContent.js';
|
|
36
36
|
import '../dialog/DialogContext.js';
|
|
37
37
|
import '../dialog/DialogCloseButton.js';
|
|
38
|
+
import '../divider/Divider.js';
|
|
38
39
|
import '../drawer/Drawer.js';
|
|
39
40
|
import '../drawer/DrawerCloseButton.js';
|
|
40
41
|
import '../dropdown/Dropdown.js';
|
|
@@ -62,6 +63,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
62
63
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
63
64
|
import '../link/Link.js';
|
|
64
65
|
import '../link-card/LinkCard.js';
|
|
66
|
+
import '../list-box/ListBox.js';
|
|
65
67
|
import '../list-control/ListControlContext.js';
|
|
66
68
|
import '../menu/MenuContext.js';
|
|
67
69
|
import '../menu/MenuItem.js';
|
|
@@ -98,6 +100,7 @@ import '../toast/Toast.js';
|
|
|
98
100
|
import '../toast/ToastContent.js';
|
|
99
101
|
import '../split-layout/SplitLayout.js';
|
|
100
102
|
import '../switch/Switch.js';
|
|
103
|
+
import '../tag/Tag.js';
|
|
101
104
|
import '../toggle-button/ToggleButton.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
103
106
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && status && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["tooltipCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * Optional string to determine the status of the Tooltip.\n */\n status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && status && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,CAAA;AAE7D,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAC,CAAA,QAAA,IAAY,0BACX,GAAA,CAAA,eAAA,EAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAM,EAAA,CAAA;AAAA,YACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAChC,CAAA;AAAA,0BAED,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAEhC,QAAA,EAAA,OAAA;AAAA,WACH,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,CAAC,6BACC,GAAA,CAAA,aAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -34,6 +34,7 @@ import '../dialog/DialogActions.js';
|
|
|
34
34
|
import '../dialog/DialogContent.js';
|
|
35
35
|
import '../dialog/DialogContext.js';
|
|
36
36
|
import '../dialog/DialogCloseButton.js';
|
|
37
|
+
import '../divider/Divider.js';
|
|
37
38
|
import '../drawer/Drawer.js';
|
|
38
39
|
import '../drawer/DrawerCloseButton.js';
|
|
39
40
|
import '../dropdown/Dropdown.js';
|
|
@@ -61,6 +62,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
61
62
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
62
63
|
import '../link/Link.js';
|
|
63
64
|
import '../link-card/LinkCard.js';
|
|
65
|
+
import '../list-box/ListBox.js';
|
|
64
66
|
import '../list-control/ListControlContext.js';
|
|
65
67
|
import '../menu/MenuContext.js';
|
|
66
68
|
import '@floating-ui/react';
|
|
@@ -98,6 +100,7 @@ import '../toast/Toast.js';
|
|
|
98
100
|
import '../toast/ToastContent.js';
|
|
99
101
|
import '../split-layout/SplitLayout.js';
|
|
100
102
|
import '../switch/Switch.js';
|
|
103
|
+
import '../tag/Tag.js';
|
|
101
104
|
import '../toggle-button/ToggleButton.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
103
106
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement | null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" | \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement | null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" | \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number | Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -34,6 +34,7 @@ import '../dialog/DialogActions.js';
|
|
|
34
34
|
import '../dialog/DialogContent.js';
|
|
35
35
|
import '../dialog/DialogContext.js';
|
|
36
36
|
import '../dialog/DialogCloseButton.js';
|
|
37
|
+
import '../divider/Divider.js';
|
|
37
38
|
import '../drawer/Drawer.js';
|
|
38
39
|
import '../drawer/DrawerCloseButton.js';
|
|
39
40
|
import '../dropdown/Dropdown.js';
|
|
@@ -61,6 +62,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
61
62
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
62
63
|
import '../link/Link.js';
|
|
63
64
|
import '../link-card/LinkCard.js';
|
|
65
|
+
import '../list-box/ListBox.js';
|
|
64
66
|
import '../list-control/ListControlContext.js';
|
|
65
67
|
import '../menu/MenuContext.js';
|
|
66
68
|
import '../menu/MenuItem.js';
|
|
@@ -97,6 +99,7 @@ import '../toast/Toast.js';
|
|
|
97
99
|
import '../toast/ToastContent.js';
|
|
98
100
|
import '../split-layout/SplitLayout.js';
|
|
99
101
|
import '../switch/Switch.js';
|
|
102
|
+
import '../tag/Tag.js';
|
|
100
103
|
import '../toggle-button/ToggleButton.js';
|
|
101
104
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * When `true`, the tooltip will be disabled.\n */\n disabled?: boolean;\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n disabled,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props ?? {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context, elements } =\n useFloatingUI({\n open: disabled ? false : open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n shift({ limiter: limitShift() }),\n flip({\n fallbackAxisSideDirection: \"end\",\n fallbackStrategy: \"initialPlacement\",\n }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !(disableHoverListener || disabled),\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !(disableFocusListener || disabled) }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context, { enabled: !disabled }),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- tabIndex raises false positives because it is set to \"-1\".\n const { tabIndex, ...tooltipProps } = getFloatingProps({\n // @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.\n \"data-placement\": placement,\n ref: floating,\n });\n\n return tooltipProps;\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * When `true`, the tooltip will be disabled.\n */\n disabled?: boolean;\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n disabled,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props ?? {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const { floating, reference, x, y, strategy, placement, context, elements } =\n useFloatingUI({\n open: disabled ? false : open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n shift({ limiter: limitShift() }),\n flip({\n fallbackAxisSideDirection: \"end\",\n fallbackStrategy: \"initialPlacement\",\n }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !(disableHoverListener || disabled),\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !(disableFocusListener || disabled) }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context, { enabled: !disabled }),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars -- tabIndex raises false positives because it is set to \"-1\".\n const { tabIndex, ...tooltipProps } = getFloatingProps({\n // @ts-expect-error - `data-*` props need extra typing when not used on a DOM element.\n \"data-placement\": placement,\n ref: floating,\n });\n\n return tooltipProps;\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"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"}
|
|
@@ -34,6 +34,7 @@ import '../dialog/DialogActions.js';
|
|
|
34
34
|
import '../dialog/DialogContent.js';
|
|
35
35
|
import '../dialog/DialogContext.js';
|
|
36
36
|
import '../dialog/DialogCloseButton.js';
|
|
37
|
+
import '../divider/Divider.js';
|
|
37
38
|
import '../drawer/Drawer.js';
|
|
38
39
|
import '../drawer/DrawerCloseButton.js';
|
|
39
40
|
import '../dropdown/Dropdown.js';
|
|
@@ -61,6 +62,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
61
62
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
62
63
|
import '../link/Link.js';
|
|
63
64
|
import '../link-card/LinkCard.js';
|
|
65
|
+
import '../list-box/ListBox.js';
|
|
64
66
|
import '../list-control/ListControlContext.js';
|
|
65
67
|
import '../menu/MenuContext.js';
|
|
66
68
|
import '@floating-ui/react';
|
|
@@ -98,6 +100,7 @@ import '../toast/Toast.js';
|
|
|
98
100
|
import '../toast/ToastContent.js';
|
|
99
101
|
import '../split-layout/SplitLayout.js';
|
|
100
102
|
import '../switch/Switch.js';
|
|
103
|
+
import '../tag/Tag.js';
|
|
101
104
|
import '../toggle-button/ToggleButton.js';
|
|
102
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
103
106
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useValueEffect.js","sources":["../src/utils/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Dispatch, MutableRefObject, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../index\";\nimport { useEventCallback } from \"./useEventCallback\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(\n defaultValue: S | (() => S)\n): [S, Dispatch<SetValueAction<S>>] {\n const [value, setValue] = useState(defaultValue);\n const effect: MutableRefObject<Generator<S> | null> =\n useRef<Generator<S> | null>(null);\n\n // Store the function in a ref so we can always access the current version\n // which has the proper `value` in scope.\n const nextRef = useEventCallback(() => {\n if (!effect.current) {\n return;\n }\n // Run the generator to the next yield.\n const newValue = effect.current.next();\n\n // If the generator is done, reset the effect.\n if (newValue.done) {\n effect.current = null;\n return;\n }\n\n // If the value is the same as the current value,\n // then continue to the next yield. Otherwise,\n // set the value in state and wait for the next layout effect.\n if (value === newValue.value) {\n nextRef();\n } else {\n setValue(newValue.value);\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // If there is an effect currently running, continue to the next yield.\n if (effect.current) {\n nextRef();\n }\n });\n\n const queue: Dispatch<SetValueAction<S>> = useEventCallback((fn) => {\n effect.current = fn(value);\n nextRef();\n });\n\n return [value, queue];\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useValueEffect.js","sources":["../src/utils/useValueEffect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { Dispatch, MutableRefObject, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../index\";\nimport { useEventCallback } from \"./useEventCallback\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(\n defaultValue: S | (() => S)\n): [S, Dispatch<SetValueAction<S>>] {\n const [value, setValue] = useState(defaultValue);\n const effect: MutableRefObject<Generator<S> | null> =\n useRef<Generator<S> | null>(null);\n\n // Store the function in a ref so we can always access the current version\n // which has the proper `value` in scope.\n const nextRef = useEventCallback(() => {\n if (!effect.current) {\n return;\n }\n // Run the generator to the next yield.\n const newValue = effect.current.next();\n\n // If the generator is done, reset the effect.\n if (newValue.done) {\n effect.current = null;\n return;\n }\n\n // If the value is the same as the current value,\n // then continue to the next yield. Otherwise,\n // set the value in state and wait for the next layout effect.\n if (value === newValue.value) {\n nextRef();\n } else {\n setValue(newValue.value);\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n // If there is an effect currently running, continue to the next yield.\n if (effect.current) {\n nextRef();\n }\n });\n\n const queue: Dispatch<SetValueAction<S>> = useEventCallback((fn) => {\n effect.current = fn(value);\n nextRef();\n });\n\n return [value, queue];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,eACd,YACkC,EAAA;AAClC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA,CAAA;AAC/C,EAAM,MAAA,MAAA,GACJ,OAA4B,IAAI,CAAA,CAAA;AAIlC,EAAM,MAAA,OAAA,GAAU,iBAAiB,MAAM;AACrC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACnB,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,QAAA,GAAW,MAAO,CAAA,OAAA,CAAQ,IAAK,EAAA,CAAA;AAGrC,IAAA,IAAI,SAAS,IAAM,EAAA;AACjB,MAAA,MAAA,CAAO,OAAU,GAAA,IAAA,CAAA;AACjB,MAAA,OAAA;AAAA,KACF;AAKA,IAAI,IAAA,KAAA,KAAU,SAAS,KAAO,EAAA;AAC5B,MAAQ,OAAA,EAAA,CAAA;AAAA,KACH,MAAA;AACL,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA,CAAA;AAAA,KACzB;AAAA,GACD,CAAA,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAE9B,IAAA,IAAI,OAAO,OAAS,EAAA;AAClB,MAAQ,OAAA,EAAA,CAAA;AAAA,KACV;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAqC,gBAAiB,CAAA,CAAC,EAAO,KAAA;AAClE,IAAO,MAAA,CAAA,OAAA,GAAU,GAAG,KAAK,CAAA,CAAA;AACzB,IAAQ,OAAA,EAAA,CAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAO,OAAA,CAAC,OAAO,KAAK,CAAA,CAAA;AACtB;;;;"}
|
|
@@ -32,6 +32,7 @@ import '../dialog/DialogActions.js';
|
|
|
32
32
|
import '../dialog/DialogContent.js';
|
|
33
33
|
import '../dialog/DialogContext.js';
|
|
34
34
|
import '../dialog/DialogCloseButton.js';
|
|
35
|
+
import '../divider/Divider.js';
|
|
35
36
|
import '../drawer/Drawer.js';
|
|
36
37
|
import '../drawer/DrawerCloseButton.js';
|
|
37
38
|
import '../dropdown/Dropdown.js';
|
|
@@ -59,6 +60,7 @@ import '../interactable-card/InteractableCardGroup.js';
|
|
|
59
60
|
import '../interactable-card/InteractableCardGroupContext.js';
|
|
60
61
|
import '../link/Link.js';
|
|
61
62
|
import '../link-card/LinkCard.js';
|
|
63
|
+
import '../list-box/ListBox.js';
|
|
62
64
|
import '../list-control/ListControlContext.js';
|
|
63
65
|
import '../menu/MenuContext.js';
|
|
64
66
|
import '@floating-ui/react';
|
|
@@ -96,6 +98,7 @@ import '../toast/Toast.js';
|
|
|
96
98
|
import '../toast/ToastContent.js';
|
|
97
99
|
import '../split-layout/SplitLayout.js';
|
|
98
100
|
import '../switch/Switch.js';
|
|
101
|
+
import '../tag/Tag.js';
|
|
99
102
|
import '../toggle-button/ToggleButton.js';
|
|
100
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
101
104
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport || viewport || 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver | null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n setViewport(document.body.getBoundingClientRect().width);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number | null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport || viewport || 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver | null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n setViewport(document.body.getBoundingClientRect().width);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAC9B,MAAA,WAAA,CAAY,QAAS,CAAA,IAAA,CAAK,qBAAsB,EAAA,CAAE,KAAK,CAAA,CAAA;AAAA,KACzD;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}
|
|
@@ -12,6 +12,10 @@ export interface AccordionProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
12
12
|
* Whether the accordion is expanded by default.
|
|
13
13
|
*/
|
|
14
14
|
defaultExpanded?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Side to align the Accordion's indicator. Defaults to `left`.
|
|
17
|
+
*/
|
|
18
|
+
indicatorSide?: "left" | "right";
|
|
15
19
|
/**
|
|
16
20
|
* Callback fired when the accordion is toggled.
|
|
17
21
|
*/
|
|
@@ -6,12 +6,20 @@ export declare type ComboBoxProps<Item = string> = {
|
|
|
6
6
|
* The options to display in the combo box.
|
|
7
7
|
*/
|
|
8
8
|
children?: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* If true, options will be selected on tab key press.
|
|
11
|
+
*/
|
|
12
|
+
selectOnTab?: boolean;
|
|
9
13
|
} & UseComboBoxProps<Item> & PillInputProps;
|
|
10
14
|
export declare const ComboBox: <Item = string>(props: {
|
|
11
15
|
/**
|
|
12
16
|
* The options to display in the combo box.
|
|
13
17
|
*/
|
|
14
18
|
children?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* If true, options will be selected on tab key press.
|
|
21
|
+
*/
|
|
22
|
+
selectOnTab?: boolean | undefined;
|
|
15
23
|
} & import("../list-control/ListControlState").ListControlProps<Item> & Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultValue" | "value"> & PillInputProps & {
|
|
16
24
|
ref?: Ref<HTMLDivElement> | undefined;
|
|
17
25
|
}) => JSX.Element;
|