@salt-ds/core 1.36.0 → 1.37.1
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 +71 -60
- package/dist-cjs/accordion/Accordion.js +1 -0
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +1 -0
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +1 -0
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +5 -3
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +1 -0
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +1 -0
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +8 -5
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +1 -0
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +1 -0
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +1 -0
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +1 -0
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +1 -0
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +1 -0
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +1 -0
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js +1 -0
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-cjs/button/Button.js +1 -0
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +1 -0
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js +1 -0
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +1 -0
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +1 -0
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +1 -0
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +6 -4
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +1 -0
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +3 -2
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +1 -0
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +4 -2
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js +1 -0
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +1 -0
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/divider/Divider.js +1 -0
- package/dist-cjs/divider/Divider.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +1 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +4 -2
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js +6 -4
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +1 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +3 -2
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +1 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +1 -0
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +1 -0
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +1 -0
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +1 -0
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +1 -0
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +1 -0
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +1 -0
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +1 -0
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +3 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.js +1 -0
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +1 -0
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/link/Link.js +8 -5
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.css.js +1 -1
- package/dist-cjs/link-card/LinkCard.js +1 -0
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js +1 -0
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +1 -0
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +38 -5
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js +1 -0
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js +1 -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 +1 -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 +4 -2
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuPanel.js +1 -0
- package/dist-cjs/menu/MenuPanel.js.map +1 -1
- package/dist-cjs/menu/MenuPanelContext.js +1 -0
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js +1 -0
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/menu/MenuTriggerContext.js +1 -0
- package/dist-cjs/menu/MenuTriggerContext.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +1 -0
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +12 -11
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +1 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItemAction.js +1 -0
- package/dist-cjs/navigation-item/NavigationItemAction.js.map +1 -1
- package/dist-cjs/option/Option.js +1 -0
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.css.js +1 -1
- package/dist-cjs/option/OptionGroup.js +1 -0
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +1 -0
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +1 -0
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +1 -0
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +1 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +1 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +4 -2
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +1 -0
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +1 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js +1 -0
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +5 -3
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +1 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +1 -0
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +1 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +1 -0
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +5 -3
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.css.js +1 -1
- package/dist-cjs/panel/Panel.js +1 -0
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +1 -0
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js +1 -0
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-cjs/pill/Pill.css.js +1 -1
- package/dist-cjs/pill/Pill.js +1 -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 +5 -3
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +1 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +1 -0
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js +1 -0
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +1 -0
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +1 -0
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +1 -0
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +1 -0
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +1 -0
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +1 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js +47 -0
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -0
- package/dist-cjs/spinner/Spinner.js +1 -0
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +1 -0
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +1 -0
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +1 -0
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +1 -0
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +11 -9
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +1 -0
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/tag/Tag.js +1 -0
- package/dist-cjs/tag/Tag.js.map +1 -1
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +1 -0
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +1 -0
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +1 -0
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +1 -0
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +1 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +1 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +1 -0
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +1 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +1 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +1 -0
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +1 -0
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +1 -0
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +1 -0
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +1 -0
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +1 -0
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +5 -3
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +1 -0
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +1 -0
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +8 -5
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +1 -0
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +1 -0
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +1 -0
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +1 -0
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +1 -0
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +1 -0
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +1 -0
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +1 -0
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-es/button/Button.js +1 -0
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +1 -0
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js +1 -0
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +1 -0
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +1 -0
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +1 -0
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +6 -4
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +1 -0
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +3 -2
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +1 -0
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +3 -1
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.js +1 -0
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +1 -0
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/divider/Divider.js +1 -0
- package/dist-es/divider/Divider.js.map +1 -1
- package/dist-es/drawer/Drawer.js +1 -0
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +3 -1
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js +6 -4
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +1 -0
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneIcon.js +3 -2
- package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +1 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +1 -0
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +1 -0
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +1 -0
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +1 -0
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +1 -0
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +1 -0
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +1 -0
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +1 -0
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +1 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.js +1 -0
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.js +1 -0
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js +1 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/link/Link.js +8 -5
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.css.js +1 -1
- package/dist-es/link-card/LinkCard.js +1 -0
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-box/ListBox.js +1 -0
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +1 -0
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +38 -5
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuBase.js +1 -0
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js +1 -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 +1 -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 +4 -2
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuPanel.js +1 -0
- package/dist-es/menu/MenuPanel.js.map +1 -1
- package/dist-es/menu/MenuPanelContext.js +1 -0
- package/dist-es/menu/MenuPanelContext.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js +1 -0
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/menu/MenuTriggerContext.js +1 -0
- package/dist-es/menu/MenuTriggerContext.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.js +1 -0
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js +12 -11
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +1 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/navigation-item/NavigationItemAction.js +1 -0
- package/dist-es/navigation-item/NavigationItemAction.js.map +1 -1
- package/dist-es/option/Option.js +1 -0
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.css.js +1 -1
- package/dist-es/option/OptionGroup.js +1 -0
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +1 -0
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +1 -0
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +1 -0
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +1 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.css.js +1 -1
- package/dist-es/overlay/OverlayPanel.js +1 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +3 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +1 -0
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +1 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/CompactInput.js +1 -0
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +5 -3
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +1 -0
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +1 -0
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +1 -0
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +1 -0
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +5 -3
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.css.js +1 -1
- package/dist-es/panel/Panel.js +1 -0
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +1 -0
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js +1 -0
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/pill/Pill.css.js +1 -1
- package/dist-es/pill/Pill.js +1 -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 +4 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +1 -0
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +1 -0
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js +1 -0
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +1 -0
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +1 -0
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +1 -0
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +1 -0
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +1 -0
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +1 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +42 -0
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -0
- package/dist-es/spinner/Spinner.js +1 -0
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +1 -0
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +1 -0
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +1 -0
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +1 -0
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +10 -8
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +1 -0
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/tag/Tag.js +1 -0
- package/dist-es/tag/Tag.js.map +1 -1
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +1 -0
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +1 -0
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +1 -0
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +1 -0
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +1 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +1 -0
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +1 -0
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +1 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +1 -0
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +1 -0
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +1 -0
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +1 -0
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/index.d.ts +1 -0
- package/dist-types/link/Link.d.ts +1 -1
- package/dist-types/semantic-icon-provider/SemanticIconProvider.d.ts +36 -0
- package/dist-types/semantic-icon-provider/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n function LinkCard(props, ref) {\n const {\n accent,\n children,\n className,\n href,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link-card\",\n css: linkCardCss,\n window: targetWindow,\n });\n\n return (\n <a\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n },\n className,\n )}\n href={href}\n {...rest}\n ref={ref}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["LinkCard","linkCardCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * Styling variant; defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n function LinkCard(props, ref) {\n const {\n accent,\n children,\n className,\n href,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link-card\",\n css: linkCardCss,\n window: targetWindow,\n });\n\n return (\n <a\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n },\n className,\n )}\n href={href}\n {...rest}\n ref={ref}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["LinkCard","linkCardCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,WAAW,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,SACvD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -105,6 +105,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
105
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
106
106
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
107
107
|
import '../tooltip/Tooltip.js';
|
|
108
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
108
109
|
import css_248z from './ListBox.css.js';
|
|
109
110
|
|
|
110
111
|
const withBaseName = makePrefixer("saltListBox");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n forwardRef,\n useRef,\n} from \"react\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n type ListControlProps,\n defaultValueToString,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption().data;\n\n let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n null;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n Boolean(activeState?.disabled) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(listRef, ref);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ListBox","listBoxCss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n forwardRef,\n useRef,\n} from \"react\";\nimport {\n ListControlContext,\n type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n type ListControlProps,\n defaultValueToString,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n listRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (!newOption) {\n newOption = getOptionFromSearch(typeaheadString.current);\n }\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption().data;\n\n let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n null;\n switch (event.key) {\n case \"ArrowDown\":\n newActive = getOptionAfter(activeOption) ?? getLastOption();\n break;\n case \"ArrowUp\":\n newActive = getOptionBefore(activeOption) ?? getFirstOption();\n break;\n case \"Home\":\n newActive = getFirstOption();\n break;\n case \"End\":\n newActive = getLastOption();\n break;\n case \"PageUp\":\n newActive = getOptionPageAbove(activeOption);\n break;\n case \"PageDown\":\n newActive = getOptionPageBelow(activeOption);\n break;\n case \"Enter\":\n case \" \":\n if (\n Boolean(activeState?.disabled) ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n event.preventDefault();\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive = undefined;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(listRef, ref);\n\n return (\n <ListControlContext.Provider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlContext.Provider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ListBox","listBoxCss"],"mappings":"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"}
|
|
@@ -103,6 +103,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
103
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
105
105
|
import '../tooltip/Tooltip.js';
|
|
106
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
106
107
|
import { defaultValueToString } from './ListControlState.js';
|
|
107
108
|
|
|
108
109
|
const ListControlContext = createContext(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n valueToString: (item: Item) => string;\n disabled?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n valueToString: defaultValueToString,\n disabled: false,\n },\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n valueToString: (item: Item) => string;\n disabled?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n valueToString: defaultValueToString,\n disabled: false,\n },\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,QAAW,GAAA;AACT,MAAA,OAAO,MAAM,KAAA,CAAA,CAAA;AAAA,KACf;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAS,GAAA;AACP,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA,CAAA;AAAA,IACb,SAAY,GAAA;AACV,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA;AAAA,IACb,iBAAmB,EAAA,KAAA;AAAA,IACnB,aAAe,EAAA,oBAAA;AAAA,IACf,QAAU,EAAA,KAAA;AAAA,GACZ;AACF,EAAA;AAEO,SAAS,qBAA8B,GAAA;AAC5C,EAAA,OAAO,WAAW,kBAAkB,CAAA,CAAA;AACtC;;;;"}
|
|
@@ -104,7 +104,43 @@ import '../toggle-button/ToggleButton.js';
|
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
105
105
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
106
106
|
import '../tooltip/Tooltip.js';
|
|
107
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
107
108
|
|
|
109
|
+
function findElementPosition(elements, element) {
|
|
110
|
+
if (elements.length === 0) {
|
|
111
|
+
return [0, false];
|
|
112
|
+
}
|
|
113
|
+
if (element.compareDocumentPosition(elements[elements.length - 1].element) & Node.DOCUMENT_POSITION_PRECEDING) {
|
|
114
|
+
return [-1, false];
|
|
115
|
+
}
|
|
116
|
+
if (element.compareDocumentPosition(elements[0].element) & Node.DOCUMENT_POSITION_FOLLOWING) {
|
|
117
|
+
return [0, false];
|
|
118
|
+
}
|
|
119
|
+
let left = 0;
|
|
120
|
+
let right = elements.length;
|
|
121
|
+
let leftLast = 0;
|
|
122
|
+
let rightLast = right;
|
|
123
|
+
let exists = false;
|
|
124
|
+
while (left < right) {
|
|
125
|
+
const inPos = Math.floor((right + left) / 2);
|
|
126
|
+
const compared = element.compareDocumentPosition(elements[inPos].element);
|
|
127
|
+
if (compared & Node.DOCUMENT_POSITION_PRECEDING) {
|
|
128
|
+
left = inPos;
|
|
129
|
+
} else if (compared & Node.DOCUMENT_POSITION_FOLLOWING) {
|
|
130
|
+
right = inPos;
|
|
131
|
+
} else {
|
|
132
|
+
right = inPos;
|
|
133
|
+
left = inPos;
|
|
134
|
+
exists = true;
|
|
135
|
+
}
|
|
136
|
+
if (leftLast === left && rightLast === right) {
|
|
137
|
+
break;
|
|
138
|
+
}
|
|
139
|
+
leftLast = left;
|
|
140
|
+
rightLast = right;
|
|
141
|
+
}
|
|
142
|
+
return [right, exists];
|
|
143
|
+
}
|
|
108
144
|
function defaultValueToString(item) {
|
|
109
145
|
return String(item);
|
|
110
146
|
}
|
|
@@ -190,11 +226,8 @@ function useListControl(props) {
|
|
|
190
226
|
const register = useCallback(
|
|
191
227
|
(optionValue, element) => {
|
|
192
228
|
const { id } = optionValue;
|
|
193
|
-
const
|
|
194
|
-
|
|
195
|
-
return option2.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;
|
|
196
|
-
});
|
|
197
|
-
if (!option) {
|
|
229
|
+
const [index, exists] = findElementPosition(optionsRef.current, element);
|
|
230
|
+
if (!exists) {
|
|
198
231
|
if (index === -1) {
|
|
199
232
|
optionsRef.current.push({ data: optionValue, element });
|
|
200
233
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useControlled } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n /**\n * If true, the control will be disabled.\n */\n disabled?: boolean;\n /**\n * If true, the control will be read-only.\n */\n readOnly?: boolean;\n /**\n * If true, the list will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * If true, the list will be open. Useful for controlling the component.\n */\n open?: boolean;\n /**\n * Callback fired when the open state changes.\n */\n onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n /**\n * The default selected options. If this is provided `defaultValue` should be provided as well.\n */\n defaultSelected?: Item[];\n /**\n * The selected options. The component will be controlled if this prop is provided.\n */\n selected?: Item[];\n /**\n * Callback fired when the selected options change.\n */\n onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n /**\n * If true, multiple options can be selected.\n */\n multiselect?: boolean;\n /**\n * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n */\n valueToString?: (item: Item) => string;\n};\n\nexport function defaultValueToString<Item>(item: Item): string {\n return String(item);\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n const {\n open: openProp,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected: selectedProp,\n onSelectionChange,\n disabled,\n readOnly,\n valueToString = defaultValueToString,\n } = props;\n\n const [focusedState, setFocusedState] = useState(false);\n const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n useEffect(() => {\n // remove focus when controlling disabled\n if (disabled && focusedState) {\n setFocusedState(false);\n setFocusVisibleState(false);\n }\n }, [disabled, focusedState]);\n\n const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n undefined,\n );\n\n const setActive = (option?: OptionValue<Item>) => {\n if (option) {\n setActiveState(option);\n } else {\n setActiveState(undefined);\n }\n };\n\n const [openState, setOpenState] = useControlled({\n controlled: openProp,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const openKey = useRef<string | undefined>(undefined);\n\n const setOpen = (\n newOpen: boolean,\n reason?: OpenChangeReason,\n key?: string,\n ) => {\n if (disabled || readOnly) {\n return;\n }\n\n setOpenState(newOpen);\n openKey.current = key;\n\n if (newOpen !== openState) {\n onOpenChange?.(newOpen, reason);\n }\n };\n\n const [selectedState, setSelectedState] = useControlled({\n controlled: selectedProp,\n default: defaultSelected ?? [],\n name: \"ListControl\",\n state: \"selected\",\n });\n\n const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n if (option.disabled || readOnly || disabled) {\n return;\n }\n\n let newSelected = [option.value];\n\n if (multiselect) {\n if (selectedState.includes(option.value)) {\n newSelected = selectedState.filter((item) => item !== option.value);\n } else {\n newSelected = selectedState.concat([option.value]);\n }\n }\n\n setSelectedState(newSelected);\n onSelectionChange?.(event, newSelected);\n\n if (!multiselect) {\n setOpen(false);\n }\n };\n\n const clear = (event: SyntheticEvent) => {\n setSelectedState([]);\n if (selectedState.length !== 0) {\n onSelectionChange?.(event, []);\n }\n };\n\n const optionsRef = useRef<\n { data: OptionValue<Item>; element: HTMLElement }[]\n >([]);\n\n const register = useCallback(\n (optionValue: OptionValue<Item>, element: HTMLElement) => {\n const { id } = optionValue;\n const option = optionsRef.current.find((item) => item.data.id === id);\n const index = optionsRef.current.findIndex((option) => {\n return (\n option.element.compareDocumentPosition(element) &\n Node.DOCUMENT_POSITION_PRECEDING\n );\n });\n\n if (!option) {\n if (index === -1) {\n optionsRef.current.push({ data: optionValue, element });\n } else {\n optionsRef.current.splice(index, 0, { data: optionValue, element });\n }\n }\n\n return () => {\n optionsRef.current = optionsRef.current.filter(\n (item) => item.data.id !== id,\n );\n };\n },\n [],\n );\n\n const getOptionAtIndex = (index: number) => {\n return optionsRef.current[index];\n };\n\n const getIndexOfOption = (option: OptionValue<Item>) => {\n return optionsRef.current.findIndex((item) => item.data.id === option.id);\n };\n\n const getOptionsMatching = (\n predicate: (option: OptionValue<Item>) => boolean,\n ) => {\n return optionsRef.current.filter((item) => predicate(item.data));\n };\n\n const getOptionFromSearch = (\n search: string,\n startFrom?: OptionValue<Item>,\n ) => {\n const collator = new Intl.Collator(\"en\", {\n usage: \"search\",\n sensitivity: \"base\",\n });\n\n const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n const searchList = optionsRef.current.map((item) => item.data);\n\n let matches = searchList.filter(\n (option) =>\n collator.compare(\n valueToString(option.value).substring(0, search.length),\n search,\n ) === 0,\n );\n\n if (matches.length === 0) {\n const letters = search.split(\"\");\n const allSameLetter =\n letters.length > 0 &&\n letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n if (allSameLetter) {\n matches = searchList.filter(\n (option) =>\n collator.compare(\n valueToString(option.value)[0].toLowerCase(),\n letters[0],\n ) === 0,\n );\n }\n }\n\n return matches.find((option) => getIndexOfOption(option) >= startIndex);\n };\n\n const getFirstOption = () => {\n return getOptionAtIndex(0);\n };\n\n const getLastOption = () => {\n return getOptionAtIndex(optionsRef.current.length - 1);\n };\n\n const getOptionBefore = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index - 1);\n };\n\n const getOptionAfter = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index + 1);\n };\n\n const listRef = useRef<HTMLDivElement>(null);\n\n const getOptionPageAbove = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return null;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect = option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.max(\n 0,\n optionRect.y - listY + optionRect.height - containerRect.height,\n );\n\n while (option && optionRect.y - listY > pageY) {\n option = getOptionBefore(option.data);\n optionRect = option?.element.getBoundingClientRect();\n }\n\n return option ?? getFirstOption();\n };\n\n const getOptionPageBelow = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return null;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect = option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.min(\n list.scrollHeight,\n optionRect.y - listY - optionRect.height + containerRect.height,\n );\n\n while (option && optionRect.y - listY < pageY) {\n option = getOptionAfter(option.data);\n optionRect = option?.element.getBoundingClientRect();\n }\n\n return option ?? getLastOption();\n };\n\n useEffect(() => {\n if (listRef.current) {\n const activeElement = optionsRef.current.find(\n (option) => option.data === activeState,\n )?.element;\n\n if (!activeElement) {\n return;\n }\n\n activeElement.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\n });\n }\n }, [activeState]);\n\n return {\n multiselect: Boolean(multiselect),\n openState,\n setOpen,\n openKey,\n activeState,\n setActive,\n selectedState,\n setSelectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n options: optionsRef.current.map((option) => option.element),\n register,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n getFirstOption,\n getLastOption,\n valueToString,\n disabled,\n };\n}\n"],"names":["option"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ListControlState.js","sources":["../src/list-control/ListControlState.ts"],"sourcesContent":["import {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useControlled } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport type ListControlProps<Item> = {\n /**\n * If true, the control will be disabled.\n */\n disabled?: boolean;\n /**\n * If true, the control will be read-only.\n */\n readOnly?: boolean;\n /**\n * If true, the list will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * If true, the list will be open. Useful for controlling the component.\n */\n open?: boolean;\n /**\n * Callback fired when the open state changes.\n */\n onOpenChange?: (newOpen: boolean, reason?: OpenChangeReason) => void;\n /**\n * The default selected options. If this is provided `defaultValue` should be provided as well.\n */\n defaultSelected?: Item[];\n /**\n * The selected options. The component will be controlled if this prop is provided.\n */\n selected?: Item[];\n /**\n * Callback fired when the selected options change.\n */\n onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;\n /**\n * If true, multiple options can be selected.\n */\n multiselect?: boolean;\n /**\n * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.\n */\n valueToString?: (item: Item) => string;\n};\n\nfunction findElementPosition(\n elements: { element: HTMLElement }[],\n element: HTMLElement,\n) {\n if (elements.length === 0) {\n return [0, false] as const;\n }\n\n if (\n element.compareDocumentPosition(elements[elements.length - 1].element) &\n Node.DOCUMENT_POSITION_PRECEDING\n ) {\n return [-1, false] as const;\n }\n\n if (\n element.compareDocumentPosition(elements[0].element) &\n Node.DOCUMENT_POSITION_FOLLOWING\n ) {\n return [0, false] as const;\n }\n\n let left = 0;\n let right = elements.length;\n let leftLast = 0;\n let rightLast = right;\n\n let exists = false;\n\n while (left < right) {\n const inPos = Math.floor((right + left) / 2);\n const compared = element.compareDocumentPosition(elements[inPos].element);\n if (compared & Node.DOCUMENT_POSITION_PRECEDING) {\n left = inPos;\n } else if (compared & Node.DOCUMENT_POSITION_FOLLOWING) {\n right = inPos;\n } else {\n right = inPos;\n left = inPos;\n exists = true;\n }\n // nothing has changed, must have found limits. insert between.\n if (leftLast === left && rightLast === right) {\n break;\n }\n leftLast = left;\n rightLast = right;\n }\n\n return [right, exists] as const;\n}\n\nexport function defaultValueToString<Item>(item: Item): string {\n return String(item);\n}\n\nexport function useListControl<Item>(props: ListControlProps<Item>) {\n const {\n open: openProp,\n defaultOpen,\n onOpenChange,\n multiselect,\n defaultSelected,\n selected: selectedProp,\n onSelectionChange,\n disabled,\n readOnly,\n valueToString = defaultValueToString,\n } = props;\n\n const [focusedState, setFocusedState] = useState(false);\n const [focusVisibleState, setFocusVisibleState] = useState(false);\n\n useEffect(() => {\n // remove focus when controlling disabled\n if (disabled && focusedState) {\n setFocusedState(false);\n setFocusVisibleState(false);\n }\n }, [disabled, focusedState]);\n\n const [activeState, setActiveState] = useState<OptionValue<Item> | undefined>(\n undefined,\n );\n\n const setActive = (option?: OptionValue<Item>) => {\n if (option) {\n setActiveState(option);\n } else {\n setActiveState(undefined);\n }\n };\n\n const [openState, setOpenState] = useControlled({\n controlled: openProp,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const openKey = useRef<string | undefined>(undefined);\n\n const setOpen = (\n newOpen: boolean,\n reason?: OpenChangeReason,\n key?: string,\n ) => {\n if (disabled || readOnly) {\n return;\n }\n\n setOpenState(newOpen);\n openKey.current = key;\n\n if (newOpen !== openState) {\n onOpenChange?.(newOpen, reason);\n }\n };\n\n const [selectedState, setSelectedState] = useControlled({\n controlled: selectedProp,\n default: defaultSelected ?? [],\n name: \"ListControl\",\n state: \"selected\",\n });\n\n const select = (event: SyntheticEvent, option: OptionValue<Item>) => {\n if (option.disabled || readOnly || disabled) {\n return;\n }\n\n let newSelected = [option.value];\n\n if (multiselect) {\n if (selectedState.includes(option.value)) {\n newSelected = selectedState.filter((item) => item !== option.value);\n } else {\n newSelected = selectedState.concat([option.value]);\n }\n }\n\n setSelectedState(newSelected);\n onSelectionChange?.(event, newSelected);\n\n if (!multiselect) {\n setOpen(false);\n }\n };\n\n const clear = (event: SyntheticEvent) => {\n setSelectedState([]);\n if (selectedState.length !== 0) {\n onSelectionChange?.(event, []);\n }\n };\n\n const optionsRef = useRef<\n { data: OptionValue<Item>; element: HTMLElement }[]\n >([]);\n\n const register = useCallback(\n (optionValue: OptionValue<Item>, element: HTMLElement) => {\n const { id } = optionValue;\n const [index, exists] = findElementPosition(optionsRef.current, element);\n\n if (!exists) {\n if (index === -1) {\n optionsRef.current.push({ data: optionValue, element });\n } else {\n optionsRef.current.splice(index, 0, { data: optionValue, element });\n }\n }\n\n return () => {\n optionsRef.current = optionsRef.current.filter(\n (item) => item.data.id !== id,\n );\n };\n },\n [],\n );\n\n const getOptionAtIndex = (index: number) => {\n return optionsRef.current[index];\n };\n\n const getIndexOfOption = (option: OptionValue<Item>) => {\n return optionsRef.current.findIndex((item) => item.data.id === option.id);\n };\n\n const getOptionsMatching = (\n predicate: (option: OptionValue<Item>) => boolean,\n ) => {\n return optionsRef.current.filter((item) => predicate(item.data));\n };\n\n const getOptionFromSearch = (\n search: string,\n startFrom?: OptionValue<Item>,\n ) => {\n const collator = new Intl.Collator(\"en\", {\n usage: \"search\",\n sensitivity: \"base\",\n });\n\n const startIndex = startFrom ? getIndexOfOption(startFrom) + 1 : 0;\n const searchList = optionsRef.current.map((item) => item.data);\n\n let matches = searchList.filter(\n (option) =>\n collator.compare(\n valueToString(option.value).substring(0, search.length),\n search,\n ) === 0,\n );\n\n if (matches.length === 0) {\n const letters = search.split(\"\");\n const allSameLetter =\n letters.length > 0 &&\n letters.every((letter) => collator.compare(letter, letters[0]) === 0);\n if (allSameLetter) {\n matches = searchList.filter(\n (option) =>\n collator.compare(\n valueToString(option.value)[0].toLowerCase(),\n letters[0],\n ) === 0,\n );\n }\n }\n\n return matches.find((option) => getIndexOfOption(option) >= startIndex);\n };\n\n const getFirstOption = () => {\n return getOptionAtIndex(0);\n };\n\n const getLastOption = () => {\n return getOptionAtIndex(optionsRef.current.length - 1);\n };\n\n const getOptionBefore = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index - 1);\n };\n\n const getOptionAfter = (option: OptionValue<Item>) => {\n const index = getIndexOfOption(option);\n return getOptionAtIndex(index + 1);\n };\n\n const listRef = useRef<HTMLDivElement>(null);\n\n const getOptionPageAbove = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return null;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect = option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.max(\n 0,\n optionRect.y - listY + optionRect.height - containerRect.height,\n );\n\n while (option && optionRect.y - listY > pageY) {\n option = getOptionBefore(option.data);\n optionRect = option?.element.getBoundingClientRect();\n }\n\n return option ?? getFirstOption();\n };\n\n const getOptionPageBelow = (start: OptionValue<Item>) => {\n const list = listRef.current;\n let option = optionsRef.current.find((option) => option.data === start);\n\n if (!list || !option) {\n return null;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect = option.element.getBoundingClientRect();\n\n const listY = containerRect.y - list.scrollTop;\n const pageY = Math.min(\n list.scrollHeight,\n optionRect.y - listY - optionRect.height + containerRect.height,\n );\n\n while (option && optionRect.y - listY < pageY) {\n option = getOptionAfter(option.data);\n optionRect = option?.element.getBoundingClientRect();\n }\n\n return option ?? getLastOption();\n };\n\n useEffect(() => {\n if (listRef.current) {\n const activeElement = optionsRef.current.find(\n (option) => option.data === activeState,\n )?.element;\n\n if (!activeElement) {\n return;\n }\n\n activeElement.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\n });\n }\n }, [activeState]);\n\n return {\n multiselect: Boolean(multiselect),\n openState,\n setOpen,\n openKey,\n activeState,\n setActive,\n selectedState,\n setSelectedState,\n select,\n clear,\n focusVisibleState,\n setFocusVisibleState,\n focusedState,\n setFocusedState,\n listRef,\n options: optionsRef.current.map((option) => option.element),\n register,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n getFirstOption,\n getLastOption,\n valueToString,\n disabled,\n };\n}\n"],"names":["option"],"mappings":"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"}
|
package/dist-es/menu/MenuBase.js
CHANGED
|
@@ -105,6 +105,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
105
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
106
106
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
107
107
|
import '../tooltip/Tooltip.js';
|
|
108
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
108
109
|
|
|
109
110
|
function MenuBase(props) {
|
|
110
111
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import {\n FloatingNode,\n type ReferenceType,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n size,\n useClick,\n useDismiss,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { MenuContext } from \"./MenuContext\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n /**\n * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n */\n getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {\n children,\n defaultOpen,\n open,\n onOpenChange,\n placement,\n getVirtualElement,\n } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n placement:\n placement ??\n (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(\n isNested ? { crossAxis: -1, mainAxis: 2 } : !getVirtualElement ? 1 : 0,\n ),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n useIsomorphicLayoutEffect(() => {\n if (getVirtualElement) {\n refs.setPositionReference(getVirtualElement());\n }\n }, [getVirtualElement, refs]);\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested && !focusInside,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ],\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["elements"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import {\n FloatingNode,\n type ReferenceType,\n flip,\n limitShift,\n offset,\n safePolygon,\n shift,\n size,\n useClick,\n useDismiss,\n useFloatingNodeId,\n useFloatingParentNodeId,\n useFloatingTree,\n useHover,\n useInteractions,\n useListNavigation,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n type UseFloatingUIProps,\n useControlled,\n useFloatingUI,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { MenuContext } from \"./MenuContext\";\n\nexport interface MenuBaseProps {\n children?: ReactNode;\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * If true, the menu will be open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (newOpen: boolean) => void;\n /**\n * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n */\n placement?: UseFloatingUIProps[\"placement\"];\n /**\n * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n */\n getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n const {\n children,\n defaultOpen,\n open,\n onOpenChange,\n placement,\n getVirtualElement,\n } = props;\n const parentId = useFloatingParentNodeId();\n const nodeId = useFloatingNodeId();\n const tree = useFloatingTree();\n const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: Boolean(defaultOpen),\n name: \"ListControl\",\n state: \"open\",\n });\n\n const setOpen = useCallback(\n (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const [activeIndex, setActiveIndex] = useState<number | null>(null);\n const [focusInside, setFocusInside] = useState(false);\n\n const isNested = parentId != null;\n\n const { x, y, strategy, elements, refs, context } = useFloatingUI({\n nodeId,\n open: openState,\n onOpenChange: setOpen,\n strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n placement:\n placement ??\n (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n middleware: [\n // Align the nested menu by shifting it by var(--salt-size-border)\n offset(\n isNested ? { crossAxis: -1, mainAxis: 2 } : !getVirtualElement ? 1 : 0,\n ),\n flip({}),\n shift({ limiter: limitShift() }),\n size({\n apply({ elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n maxHeight: `${availableHeight}px`,\n });\n },\n }),\n ],\n });\n\n useIsomorphicLayoutEffect(() => {\n if (getVirtualElement) {\n refs.setPositionReference(getVirtualElement());\n }\n }, [getVirtualElement, refs]);\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [\n useHover(context, {\n enabled: isNested && !focusInside,\n handleClose: safePolygon({ blockPointerEvents: true }),\n }),\n useClick(context, {\n event: \"mousedown\",\n toggle: !isNested,\n ignoreMouse: isNested,\n }),\n useRole(context, { role: \"menu\" }),\n useDismiss(context, { bubbles: true }),\n useListNavigation(context, {\n listRef: elementsRef,\n activeIndex,\n nested: isNested,\n onNavigate: setActiveIndex,\n }),\n ],\n );\n\n const getPanelPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n useEffect(() => {\n if (!tree) return;\n\n function handleItemClick() {\n setOpen(false);\n }\n\n tree.events.on(\"click\", handleItemClick);\n\n return () => {\n tree.events.off(\"click\", handleItemClick);\n };\n }, [tree, setOpen]);\n\n return (\n <FloatingNode id={nodeId}>\n <MenuContext.Provider\n value={{\n openState,\n getReferenceProps,\n getFloatingProps,\n refs,\n getPanelPosition,\n getItemProps,\n activeIndex,\n context,\n elementsRef,\n focusInside,\n setFocusInside,\n isNested,\n }}\n >\n {children}\n </MenuContext.Provider>\n </FloatingNode>\n );\n}\n"],"names":["elements"],"mappings":"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"}
|
|
@@ -103,6 +103,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
103
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
105
105
|
import '../tooltip/Tooltip.js';
|
|
106
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
106
107
|
|
|
107
108
|
const MenuContext = createContext("MenuContext", {
|
|
108
109
|
openState: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuContext.js","sources":["../src/menu/MenuContext.ts"],"sourcesContent":["import type { useInteractions } from \"@floating-ui/react\";\nimport {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n useContext,\n} from \"react\";\nimport { type UseFloatingUIReturn, createContext } from \"../utils\";\n\ntype UseInteractionsReturn = ReturnType<typeof useInteractions>;\n\nexport interface MenuContextValue\n extends Pick<\n UseInteractionsReturn,\n \"getItemProps\" | \"getReferenceProps\" | \"getFloatingProps\"\n >,\n Partial<Pick<UseFloatingUIReturn, \"context\" | \"refs\">> {\n openState: boolean;\n activeIndex: number | null;\n getPanelPosition: () => Record<string, unknown>;\n elementsRef: MutableRefObject<(HTMLDivElement | null)[]>;\n focusInside: boolean;\n setFocusInside: Dispatch<SetStateAction<boolean>>;\n isNested: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>(\"MenuContext\", {\n openState: false,\n getReferenceProps: () => ({}),\n getFloatingProps: () => ({}),\n getPanelPosition: () => ({}),\n getItemProps: () => ({}),\n activeIndex: null,\n elementsRef: { current: [] },\n focusInside: false,\n setFocusInside: () => undefined,\n isNested: false,\n});\n\nexport function useMenuContext() {\n return useContext(MenuContext);\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuContext.js","sources":["../src/menu/MenuContext.ts"],"sourcesContent":["import type { useInteractions } from \"@floating-ui/react\";\nimport {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n useContext,\n} from \"react\";\nimport { type UseFloatingUIReturn, createContext } from \"../utils\";\n\ntype UseInteractionsReturn = ReturnType<typeof useInteractions>;\n\nexport interface MenuContextValue\n extends Pick<\n UseInteractionsReturn,\n \"getItemProps\" | \"getReferenceProps\" | \"getFloatingProps\"\n >,\n Partial<Pick<UseFloatingUIReturn, \"context\" | \"refs\">> {\n openState: boolean;\n activeIndex: number | null;\n getPanelPosition: () => Record<string, unknown>;\n elementsRef: MutableRefObject<(HTMLDivElement | null)[]>;\n focusInside: boolean;\n setFocusInside: Dispatch<SetStateAction<boolean>>;\n isNested: boolean;\n}\n\nexport const MenuContext = createContext<MenuContextValue>(\"MenuContext\", {\n openState: false,\n getReferenceProps: () => ({}),\n getFloatingProps: () => ({}),\n getPanelPosition: () => ({}),\n getItemProps: () => ({}),\n activeIndex: null,\n elementsRef: { current: [] },\n focusInside: false,\n setFocusInside: () => undefined,\n isNested: false,\n});\n\nexport function useMenuContext() {\n return useContext(MenuContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,SAAW,EAAA,KAAA;AAAA,EACX,iBAAA,EAAmB,OAAO,EAAC,CAAA;AAAA,EAC3B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,gBAAA,EAAkB,OAAO,EAAC,CAAA;AAAA,EAC1B,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,EACtB,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA,EAAE,OAAS,EAAA,EAAG,EAAA;AAAA,EAC3B,WAAa,EAAA,KAAA;AAAA,EACb,gBAAgB,MAAM,KAAA,CAAA;AAAA,EACtB,QAAU,EAAA,KAAA;AACZ,CAAC,EAAA;AAEM,SAAS,cAAiB,GAAA;AAC/B,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltMenuGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-
|
|
1
|
+
var css_248z = ".saltMenuGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n font-family: var(--salt-text-label-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n box-sizing: border-box;\n}\n\n.saltMenuGroup {\n border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n border-top: 0;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=MenuGroup.css.js.map
|
|
@@ -103,6 +103,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
103
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
105
105
|
import '../tooltip/Tooltip.js';
|
|
106
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
106
107
|
import css_248z from './MenuGroup.css.js';
|
|
107
108
|
|
|
108
109
|
const withBaseName = makePrefixer("saltMenuGroup");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuGroup.js","sources":["../src/menu/MenuGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\nimport menuGroupCss from \"./MenuGroup.css\";\n\nexport interface MenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The label of the menu group.\n */\n label?: string;\n /**\n * Menus to be rendered inside the menu group.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuGroup\");\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n function MenuGroup(props, ref) {\n const { className, children, label, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-group\",\n css: menuGroupCss,\n window: targetWindow,\n });\n\n const labelId = useId();\n\n return (\n <div\n aria-labelledby={label ? labelId : undefined}\n className={clsx(withBaseName(), className)}\n role=\"group\"\n ref={ref}\n {...rest}\n >\n {label && (\n <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n {label}\n </div>\n )}\n {children}\n </div>\n );\n },\n);\n"],"names":["MenuGroup","menuGroupCss"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuGroup.js","sources":["../src/menu/MenuGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\nimport menuGroupCss from \"./MenuGroup.css\";\n\nexport interface MenuGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The label of the menu group.\n */\n label?: string;\n /**\n * Menus to be rendered inside the menu group.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuGroup\");\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n function MenuGroup(props, ref) {\n const { className, children, label, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-group\",\n css: menuGroupCss,\n window: targetWindow,\n });\n\n const labelId = useId();\n\n return (\n <div\n aria-labelledby={label ? labelId : undefined}\n className={clsx(withBaseName(), className)}\n role=\"group\"\n ref={ref}\n {...rest}\n >\n {label && (\n <div aria-hidden className={withBaseName(\"label\")} id={labelId}>\n {label}\n </div>\n )}\n {children}\n </div>\n );\n },\n);\n"],"names":["MenuGroup","menuGroupCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,KAAA,EAAA,GAAU,MAAS,GAAA,KAAA,CAAA;AAEhD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AAEtB,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,iBAAA,EAAiB,QAAQ,OAAU,GAAA,KAAA,CAAA;AAAA,MACnC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,OAAA;AAAA,MACL,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,KAAA,oBACE,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,aAAW,EAAA,IAAA;AAAA,UAAC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAG,EAAI,EAAA,OAAA;AAAA,UACpD,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QAED,QAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n background: var(--salt-selectable-background-selected);\n box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-
|
|
1
|
+
var css_248z = ".saltMenuItem {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n background: var(--salt-selectable-background-selected);\n box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n background: var(--salt-selectable-background-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n margin-left: auto;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=MenuItem.css.js.map
|
package/dist-es/menu/MenuItem.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useListItem, useFloatingTree } from '@floating-ui/react';
|
|
3
|
-
import { ChevronRightIcon } from '@salt-ds/icons';
|
|
4
3
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
4
|
import { useWindow } from '@salt-ds/window';
|
|
6
5
|
import { clsx } from 'clsx';
|
|
@@ -28,6 +27,7 @@ import '../button/Button.js';
|
|
|
28
27
|
import '../card/Card.js';
|
|
29
28
|
import '../checkbox/Checkbox.js';
|
|
30
29
|
import '../checkbox/CheckboxGroup.js';
|
|
30
|
+
import '@salt-ds/icons';
|
|
31
31
|
import '../combo-box/ComboBox.js';
|
|
32
32
|
import '../dialog/Dialog.js';
|
|
33
33
|
import '../dialog/DialogHeader.js';
|
|
@@ -104,6 +104,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
105
105
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
106
106
|
import '../tooltip/Tooltip.js';
|
|
107
|
+
import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
|
|
107
108
|
import css_248z from './MenuItem.css.js';
|
|
108
109
|
|
|
109
110
|
const withBaseName = makePrefixer("saltMenuItem");
|
|
@@ -119,6 +120,7 @@ const MenuItem = forwardRef(
|
|
|
119
120
|
...rest
|
|
120
121
|
} = props;
|
|
121
122
|
const { triggersSubmenu, blurActive } = useIsMenuTrigger();
|
|
123
|
+
const { ExpandGroupIcon } = useIcon();
|
|
122
124
|
const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();
|
|
123
125
|
const item = useListItem();
|
|
124
126
|
const tree = useFloatingTree();
|
|
@@ -171,7 +173,7 @@ const MenuItem = forwardRef(
|
|
|
171
173
|
ref: handleRef,
|
|
172
174
|
children: [
|
|
173
175
|
children,
|
|
174
|
-
triggersSubmenu && /* @__PURE__ */ jsx(
|
|
176
|
+
triggersSubmenu && /* @__PURE__ */ jsx(ExpandGroupIcon, {
|
|
175
177
|
className: withBaseName("expandIcon"),
|
|
176
178
|
"aria-hidden": true
|
|
177
179
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport {
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport { useIcon } from \"../semantic-icon-provider\";\nimport menuItemCss from \"./MenuItem.css\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the item will be disabled.\n */\n disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n function MenuItem(props, ref) {\n const {\n children,\n className,\n disabled,\n onClick,\n onFocus,\n onKeyDown,\n ...rest\n } = props;\n\n const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n const { ExpandGroupIcon } = useIcon();\n const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();\n const item = useListItem();\n const tree = useFloatingTree();\n const active = item.index === activeIndex;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-menu-item\",\n css: menuItemCss,\n window: targetWindow,\n });\n const handleRef = useForkRef<HTMLDivElement>(ref, item.ref);\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"blurActive\")]: blurActive,\n },\n className,\n )}\n role=\"menuitem\"\n aria-disabled={disabled || undefined}\n {...getItemProps({\n tabIndex: disabled ? undefined : active ? 0 : -1,\n onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n const element = event.currentTarget;\n onKeyDown?.(event);\n if (\n (event.key === \" \" || event.key === \"Enter\") &&\n !triggersSubmenu &&\n !disabled\n ) {\n event.preventDefault();\n const { view, ...eventInit } = event;\n queueMicrotask(() => {\n element.dispatchEvent(\n new window.MouseEvent(\"click\", eventInit),\n );\n });\n tree?.events.emit(\"click\");\n }\n },\n onClick(event: MouseEvent<HTMLDivElement>) {\n onClick?.(event);\n if (!triggersSubmenu && !disabled) {\n tree?.events.emit(\"click\");\n }\n },\n onFocus(event: FocusEvent<HTMLDivElement>) {\n onFocus?.(event);\n setFocusInside(true);\n },\n ...rest,\n })}\n ref={handleRef}\n >\n {children}\n {triggersSubmenu && (\n <ExpandGroupIcon className={withBaseName(\"expandIcon\")} aria-hidden />\n )}\n </div>\n );\n },\n);\n"],"names":["MenuItem","menuItemCss"],"mappings":"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"}
|
|
@@ -104,6 +104,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
105
105
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
106
106
|
import '../tooltip/Tooltip.js';
|
|
107
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
107
108
|
import { MenuPanelBase } from './MenuPanelBase.js';
|
|
108
109
|
|
|
109
110
|
const withBaseName = makePrefixer("saltMenuPanel");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the menu panel.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n function MenuPanel(props, ref) {\n const { children, className, ...rest } = props;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const {\n getItemProps,\n openState,\n getFloatingProps,\n refs,\n getPanelPosition,\n context,\n elementsRef,\n activeIndex,\n setFocusInside,\n isNested,\n } = useMenuContext();\n\n const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n return (\n <MenuPanelContext.Provider\n value={{ activeIndex, getItemProps, setFocusInside }}\n >\n <FloatingList elementsRef={elementsRef}>\n <FloatingComponent\n open={openState}\n role=\"menu\"\n {...getFloatingProps()}\n {...getPanelPosition()}\n className={clsx(withBaseName(), className)}\n focusManagerProps={\n context\n ? {\n context,\n initialFocus: isNested ? -1 : 0,\n returnFocus: !isNested,\n modal: false,\n }\n : undefined\n }\n tabIndex={-1}\n ref={handleRef}\n {...rest}\n >\n <MenuPanelBase>{children}</MenuPanelBase>\n </FloatingComponent>\n </FloatingList>\n </MenuPanelContext.Provider>\n );\n },\n);\n"],"names":["MenuPanel"],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the menu panel.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n function MenuPanel(props, ref) {\n const { children, className, ...rest } = props;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const {\n getItemProps,\n openState,\n getFloatingProps,\n refs,\n getPanelPosition,\n context,\n elementsRef,\n activeIndex,\n setFocusInside,\n isNested,\n } = useMenuContext();\n\n const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n return (\n <MenuPanelContext.Provider\n value={{ activeIndex, getItemProps, setFocusInside }}\n >\n <FloatingList elementsRef={elementsRef}>\n <FloatingComponent\n open={openState}\n role=\"menu\"\n {...getFloatingProps()}\n {...getPanelPosition()}\n className={clsx(withBaseName(), className)}\n focusManagerProps={\n context\n ? {\n context,\n initialFocus: isNested ? -1 : 0,\n returnFocus: !isNested,\n modal: false,\n }\n : undefined\n }\n tabIndex={-1}\n ref={handleRef}\n {...rest}\n >\n <MenuPanelBase>{children}</MenuPanelBase>\n </FloatingComponent>\n </FloatingList>\n </MenuPanelContext.Provider>\n );\n },\n);\n"],"names":["MenuPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,QACE,cAAe,EAAA,CAAA;AAEnB,IAAA,MAAM,SAAY,GAAA,UAAA,CAA2B,GAAK,EAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,WAAW,CAAA,CAAA;AAEnE,IACE,uBAAA,GAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA,EAAE,WAAa,EAAA,YAAA,EAAc,cAAe,EAAA;AAAA,MAEnD,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,QAAa,WAAA;AAAA,QACZ,QAAC,kBAAA,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,IAAM,EAAA,SAAA;AAAA,UACN,IAAK,EAAA,MAAA;AAAA,UACJ,GAAG,gBAAiB,EAAA;AAAA,UACpB,GAAG,gBAAiB,EAAA;AAAA,UACrB,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,UACzC,mBACE,OACI,GAAA;AAAA,YACE,OAAA;AAAA,YACA,YAAA,EAAc,WAAW,CAAK,CAAA,GAAA,CAAA;AAAA,YAC9B,aAAa,CAAC,QAAA;AAAA,YACd,KAAO,EAAA,KAAA;AAAA,WAET,GAAA,KAAA,CAAA;AAAA,UAEN,QAAU,EAAA,CAAA,CAAA;AAAA,UACV,GAAK,EAAA,SAAA;AAAA,UACJ,GAAG,IAAA;AAAA,UAEJ,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA;AAAA,YAAe,QAAA;AAAA,WAAS,CAAA;AAAA,SAC3B,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -103,6 +103,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
103
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
105
105
|
import '../tooltip/Tooltip.js';
|
|
106
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
106
107
|
|
|
107
108
|
const MenuPanelContext = createContext(
|
|
108
109
|
"MenuPanelContext",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n extends Pick<\n MenuContextValue,\n \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n > {}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n \"MenuPanelContext\",\n {\n activeIndex: null,\n getItemProps: () => ({}),\n setFocusInside: () => undefined,\n },\n);\n\nexport function useMenuPanelContext() {\n return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n extends Pick<\n MenuContextValue,\n \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n > {}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n \"MenuPanelContext\",\n {\n activeIndex: null,\n getItemProps: () => ({}),\n setFocusInside: () => undefined,\n },\n);\n\nexport function useMenuPanelContext() {\n return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAa,EAAA,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM,KAAA,CAAA;AAAA,GACxB;AACF,EAAA;AAEO,SAAS,mBAAsB,GAAA;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA,CAAA;AACpC;;;;"}
|
|
@@ -105,6 +105,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
105
105
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
106
106
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
107
107
|
import '../tooltip/Tooltip.js';
|
|
108
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
108
109
|
import { getRefFromChildren } from '../utils/getRefFromChildren.js';
|
|
109
110
|
|
|
110
111
|
function MenuTrigger(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n /**\n * The trigger element for the menu. This should be a single child element and accept a ref.\n */\n children?: ReactNode;\n}\n\nexport function MenuTrigger(props: MenuTriggerProps) {\n const { children } = props;\n\n const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n useMenuContext();\n const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n const handleRef = useForkRef(\n getRefFromChildren(children),\n refs?.setReference,\n );\n\n if (!children || !isValidElement(children)) {\n // Should we log or throw error?\n return <>{children}</>;\n }\n\n return (\n <MenuTriggerContext.Provider\n value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n >\n {cloneElement(children, {\n ...mergeProps(\n getReferenceProps({\n onFocus() {\n setFocusInsideParent(true);\n setFocusInside(false);\n },\n }),\n children.props,\n ),\n ref: handleRef,\n })}\n </MenuTriggerContext.Provider>\n );\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n /**\n * The trigger element for the menu. This should be a single child element and accept a ref.\n */\n children?: ReactNode;\n}\n\nexport function MenuTrigger(props: MenuTriggerProps) {\n const { children } = props;\n\n const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n useMenuContext();\n const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n const handleRef = useForkRef(\n getRefFromChildren(children),\n refs?.setReference,\n );\n\n if (!children || !isValidElement(children)) {\n // Should we log or throw error?\n return <>{children}</>;\n }\n\n return (\n <MenuTriggerContext.Provider\n value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n >\n {cloneElement(children, {\n ...mergeProps(\n getReferenceProps({\n onFocus() {\n setFocusInsideParent(true);\n setFocusInside(false);\n },\n }),\n children.props,\n ),\n ref: handleRef,\n })}\n </MenuTriggerContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AAErB,EAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5D,cAAe,EAAA,CAAA;AACjB,EAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAErE,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAChB,mBAAmB,QAAQ,CAAA;AAAA,IAC3B,IAAM,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,YAAA;AAAA,GACR,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAE1C,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IACC,OAAO,EAAE,eAAA,EAAiB,IAAM,EAAA,UAAA,EAAY,eAAe,SAAU,EAAA;AAAA,IAEpE,uBAAa,QAAU,EAAA;AAAA,MACtB,GAAG,UAAA;AAAA,QACD,iBAAkB,CAAA;AAAA,UAChB,OAAU,GAAA;AACR,YAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AACzB,YAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,WACtB;AAAA,SACD,CAAA;AAAA,QACD,QAAS,CAAA,KAAA;AAAA,OACX;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,KACN,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -103,6 +103,7 @@ import '../toggle-button/ToggleButton.js';
|
|
|
103
103
|
import '../toggle-button-group/ToggleButtonGroup.js';
|
|
104
104
|
import '../toggle-button-group/ToggleButtonGroupContext.js';
|
|
105
105
|
import '../tooltip/Tooltip.js';
|
|
106
|
+
import '../semantic-icon-provider/SemanticIconProvider.js';
|
|
106
107
|
|
|
107
108
|
const MenuTriggerContext = createContext(
|
|
108
109
|
"MenuTriggerContext",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTriggerContext.js","sources":["../src/menu/MenuTriggerContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface MenuTriggerContextValue {\n triggersSubmenu: boolean;\n blurActive: boolean;\n}\n\nexport const MenuTriggerContext = createContext<MenuTriggerContextValue>(\n \"MenuTriggerContext\",\n { triggersSubmenu: false, blurActive: false },\n);\n\nexport function useIsMenuTrigger() {\n return useContext(MenuTriggerContext);\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuTriggerContext.js","sources":["../src/menu/MenuTriggerContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface MenuTriggerContextValue {\n triggersSubmenu: boolean;\n blurActive: boolean;\n}\n\nexport const MenuTriggerContext = createContext<MenuTriggerContextValue>(\n \"MenuTriggerContext\",\n { triggersSubmenu: false, blurActive: false },\n);\n\nexport function useIsMenuTrigger() {\n return useContext(MenuTriggerContext);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,EAAE,eAAA,EAAiB,KAAO,EAAA,UAAA,EAAY,KAAM,EAAA;AAC9C,EAAA;AAEO,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAO,WAAW,kBAAkB,CAAA,CAAA;AACtC;;;;"}
|