@salt-ds/core 1.45.0 → 1.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/css/salt-core.css +1 -1
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +1 -9
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/button/useButton.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogContext.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-cjs/flex-layout/parseSpacing.js.map +1 -1
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js.map +1 -1
- package/dist-cjs/menu/MenuGroup.js.map +1 -1
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuPanel.js.map +1 -1
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/PaginationContext.js.map +1 -1
- package/dist-cjs/pagination/usePagination.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-cjs/slider/RangeSlider.js.map +1 -1
- package/dist-cjs/slider/Slider.js.map +1 -1
- package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
- package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/stepper/Step.js +4 -3
- package/dist-cjs/stepper/Step.js.map +1 -1
- package/dist-cjs/stepper/internal/StepperProvider.js.map +1 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +2 -1
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/mergeProps.js.map +1 -1
- package/dist-cjs/utils/useControlled.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-cjs/utils/useId.js.map +1 -1
- package/dist-cjs/utils/usePreventScroll.js.map +1 -1
- package/dist-cjs/utils/useResizeObserver.js.map +1 -1
- package/dist-cjs/utils/useResponsiveProp.js.map +1 -1
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -1
- package/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +1 -9
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +1 -1
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/button/useButton.js.map +1 -1
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogContext.js.map +1 -1
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-es/flex-layout/parseSpacing.js.map +1 -1
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuBase.js +1 -1
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js.map +1 -1
- package/dist-es/menu/MenuGroup.js.map +1 -1
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuPanel.js.map +1 -1
- package/dist-es/menu/MenuPanelContext.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/overlay/Overlay.js +1 -1
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/PaginationContext.js.map +1 -1
- package/dist-es/pagination/usePagination.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +1 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
- package/dist-es/slider/RangeSlider.js.map +1 -1
- package/dist-es/slider/Slider.js.map +1 -1
- package/dist-es/slider/internal/SliderThumb.js.map +1 -1
- package/dist-es/slider/internal/SliderTrack.js.map +1 -1
- package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
- package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/stepper/Step.js +5 -4
- package/dist-es/stepper/Step.js.map +1 -1
- package/dist-es/stepper/internal/StepperProvider.js.map +1 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +2 -1
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +1 -1
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/mergeProps.js.map +1 -1
- package/dist-es/utils/useControlled.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +2 -2
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/utils/useId.js.map +1 -1
- package/dist-es/utils/usePreventScroll.js.map +1 -1
- package/dist-es/utils/useResizeObserver.js.map +1 -1
- package/dist-es/utils/useResponsiveProp.js.map +1 -1
- package/dist-types/combo-box/ComboBox.d.ts +2 -2
- package/dist-types/form-field/FormFieldHelperText.d.ts +3 -1
- package/dist-types/stepper/Step.d.ts +1 -1
- package/dist-types/toggle-button/ToggleButton.d.ts +7 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInteractableCard.js","sources":["../src/interactable-card/useInteractableCard.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface CardHookProps<T extends Element> {\n disabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface CardHookResult<T extends Element> {\n active: boolean;\n cardProps: {\n \"aria-disabled\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useInteractableCard = <T extends Element>({\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: CardHookProps<T>): CardHookResult<T> => {\n const [keyIsDown, setkeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button-like component\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space && active) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setkeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setkeyIsDown(event.key);\n event.preventDefault();\n setActive(true);\n onClick?.(event as unknown as MouseEvent<T>);\n }\n onKeyDown?.(event);\n };\n\n const cardProps = {\n \"aria-disabled\": disabled ? true : undefined,\n disabled: disabled,\n tabIndex: disabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n cardProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AA6BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2C,KAAA;AACzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAA,IAAI,SAAc,KAAA,KAAA,IAAS,SAAc,KAAA,KAAA,IAAS,MAAQ,EAAA;AACxD,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,OACC,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"useInteractableCard.js","sources":["../src/interactable-card/useInteractableCard.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface CardHookProps<T extends Element> {\n disabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface CardHookResult<T extends Element> {\n active: boolean;\n cardProps: {\n \"aria-disabled\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useInteractableCard = <T extends Element>({\n disabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: CardHookProps<T>): CardHookResult<T> => {\n const [keyIsDown, setkeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button-like component\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space && active) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setkeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setkeyIsDown(event.key);\n event.preventDefault();\n setActive(true);\n onClick?.(event as unknown as MouseEvent<T>);\n }\n onKeyDown?.(event);\n };\n\n const cardProps = {\n \"aria-disabled\": disabled ? true : undefined,\n disabled: disabled,\n tabIndex: disabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n cardProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AA6BO,MAAM,sBAAsB,CAAoB;AAAA,EACrD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2C,KAAA;AACzC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAA,IAAI,SAAc,KAAA,KAAA,IAAS,SAAc,KAAA,KAAA,IAAS,MAAQ,EAAA;AACxD,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,OACC,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA;AAEZ,IAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,eAAA,EAAiB,WAAW,IAAO,GAAA,MAAA;AAAA,IACnC,QAAA;AAAA,IACA,QAAA,EAAU,WAAW,EAAK,GAAA,CAAA;AAAA,IAC1B,MAAQ,EAAA,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,QAAA,GAAW,WAAc,GAAA,MAAA;AAAA,IACnC,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA;AAAA,GACX;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ComponentType,\n type ReactElement,\n forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { type RenderPropsType, capitalize, makePrefixer } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n /**\n * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * Render prop to enable customisation of anchor element.\n */\n render?: RenderPropsType[\"render\"];\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n /**\n *\n * Either \"default\" or \"never\".\n * Determines when underline should be applied to the link.\n *\n * @default \"default\".\n */\n underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent,\n href,\n className,\n children,\n color: colorProp,\n variant,\n target = \"_self\",\n underline = \"default\",\n ...rest\n },\n ref,\n): ReactElement<LinkProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link\",\n css: linkCss,\n window: targetWindow,\n });\n const { ExternalIcon } = useIcon();\n\n const color = variant ?? colorProp ?? \"primary\";\n const LinkIconComponent =\n IconComponent === undefined ? ExternalIcon : IconComponent;\n\n return (\n <Text\n as={LinkAction}\n className={clsx(\n withBaseName(),\n withBaseName(`underline${capitalize(underline)}`),\n {\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n href={href}\n ref={ref}\n target={target}\n color=\"inherit\"\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n {LinkIconComponent && (\n <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>External</span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsxs","Text","LinkAction","clsx","capitalize","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAiC/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,SAAY,GAAA,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,4BAAQ,EAAA;AAEjC,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AACtC,EAAM,MAAA,iBAAA,GACJ,aAAkB,KAAA,
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ComponentType,\n type ReactElement,\n forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { type RenderPropsType, capitalize, makePrefixer } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n /**\n * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n */\n IconComponent?: ComponentType<IconProps> | null;\n /**\n * Render prop to enable customisation of anchor element.\n */\n render?: RenderPropsType[\"render\"];\n /*\n * The color of the text. Defaults to \"primary\".\n */\n color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n /**\n *\n * Either \"default\" or \"never\".\n * Determines when underline should be applied to the link.\n *\n * @default \"default\".\n */\n underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n {\n IconComponent,\n href,\n className,\n children,\n color: colorProp,\n variant,\n target = \"_self\",\n underline = \"default\",\n ...rest\n },\n ref,\n): ReactElement<LinkProps> {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-link\",\n css: linkCss,\n window: targetWindow,\n });\n const { ExternalIcon } = useIcon();\n\n const color = variant ?? colorProp ?? \"primary\";\n const LinkIconComponent =\n IconComponent === undefined ? ExternalIcon : IconComponent;\n\n return (\n <Text\n as={LinkAction}\n className={clsx(\n withBaseName(),\n withBaseName(`underline${capitalize(underline)}`),\n {\n [withBaseName(color)]: color !== \"inherit\",\n },\n className,\n )}\n href={href}\n ref={ref}\n target={target}\n color=\"inherit\"\n {...rest}\n >\n {children}\n {target === \"_blank\" && (\n <>\n {LinkIconComponent && (\n <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n )}\n <span className={withBaseName(\"externalLinkADA\")}>External</span>\n </>\n )}\n </Text>\n );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsxs","Text","LinkAction","clsx","capitalize","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAiC/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,SAAY,GAAA,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,4BAAQ,EAAA;AAEjC,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AACtC,EAAM,MAAA,iBAAA,GACJ,aAAkB,KAAA,MAAA,GAAY,YAAe,GAAA,aAAA;AAE/C,EACE,uBAAAC,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAAC,qBAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAa,CAAA,CAAA,SAAA,EAAYC,qBAAW,CAAA,SAAS,CAAC,CAAE,CAAA,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAU,KAAA;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAM,EAAA,SAAA;AAAA,MACL,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,MAAA,KAAW,4BAEPJ,eAAA,CAAAK,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,iBAAA,mCACE,iBAAkB,EAAA,EAAA,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAC,EAAA,CAAA;AAAA,yCAEjE,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,GAAG,QAAQ,EAAA,UAAA,EAAA;AAAA,SAC5D,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
|
|
@@ -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 if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined = undefined;\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":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","useForkRef","jsx","ListControlContext","clsx"],"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 if (activeOption === undefined) {\n return;\n }\n\n let newActive:\n | { data: OptionValue<Item>; element: HTMLElement }\n | undefined = undefined;\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":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","useForkRef","jsx","ListControlContext","clsx"],"mappings":"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"}
|
|
@@ -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":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA8BO,MAAM,kBAAqB,GAAAA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,
|
|
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":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA8BO,MAAM,kBAAqB,GAAAA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,MAAA;AAAA,KACT;AAAA,IACA,QAAW,GAAA;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,KACf;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAS,GAAA;AACP,MAAO,OAAA,MAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,MAAA;AAAA,IACb,SAAY,GAAA;AACV,MAAO,OAAA,MAAA;AAAA,KACT;AAAA,IACA,WAAa,EAAA,KAAA;AAAA,IACb,iBAAmB,EAAA,KAAA;AAAA,IACnB,aAAe,EAAAC,qCAAA;AAAA,IACf,QAAU,EAAA;AAAA;AAEd;AAEO,SAAS,qBAA8B,GAAA;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}
|
|
@@ -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\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 = (\n index: number,\n ): { data: OptionValue<Item>; element: HTMLElement } | undefined => {\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 undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n 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 && 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 undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n 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 && 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":["useState","useEffect","useControlled","useRef","useCallback","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 = (\n index: number,\n ): { data: OptionValue<Item>; element: HTMLElement } | undefined => {\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 undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n 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 && 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 undefined;\n }\n\n const containerRect = list.getBoundingClientRect();\n let optionRect: DOMRect | undefined =\n 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 && 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":["useState","useEffect","useControlled","useRef","useCallback","option"],"mappings":"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"}
|
|
@@ -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":["useFloatingParentNodeId","useFloatingNodeId","useFloatingTree","useRef","useControlled","useCallback","useState","useFloatingUI","offset","flip","shift","limitShift","size","elements","useIsomorphicLayoutEffect","useInteractions","useHover","safePolygon","useClick","useRole","useDismiss","useListNavigation","useEffect","jsx","FloatingNode","MenuContext"],"mappings":";;;;;;;;;;;;;;AA0DO,SAAS,SAAS,KAAsB,EAAA;AAC7C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,WAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AACJ,EAAA,MAAM,WAAWA,6BAAwB,EAAA;AACzC,EAAA,MAAM,SAASC,uBAAkB,EAAA;AACjC,EAAA,MAAM,OAAOC,qBAAgB,EAAA;AAC7B,EAAM,MAAA,WAAA,GAAcC,YAAkC,CAAA,EAAE,CAAA;AAExD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,2BAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,IAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,IAC5B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,OAAU,GAAAC,iBAAA;AAAA,IACd,CAAC,OAAqB,KAAA;AACpB,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAe,YAAA,IAAA,IAAA,GAAA,
|
|
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":["useFloatingParentNodeId","useFloatingNodeId","useFloatingTree","useRef","useControlled","useCallback","useState","useFloatingUI","offset","flip","shift","limitShift","size","elements","useIsomorphicLayoutEffect","useInteractions","useHover","safePolygon","useClick","useRole","useDismiss","useListNavigation","useEffect","jsx","FloatingNode","MenuContext"],"mappings":"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"}
|
|
@@ -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":["createContext","useContext"],"mappings":";;;;;;;;;;;AA0Ba,MAAA,WAAA,GAAcA,4BAAgC,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,
|
|
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":["createContext","useContext"],"mappings":";;;;;;;;;;;AA0Ba,MAAA,WAAA,GAAcA,4BAAgC,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,MAAA;AAAA,EACtB,QAAU,EAAA;AACZ,CAAC;AAEM,SAAS,cAAiB,GAAA;AAC/B,EAAA,OAAOC,iBAAW,WAAW,CAAA;AAC/B;;;;;"}
|
|
@@ -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":["makePrefixer","forwardRef","MenuGroup","useWindow","useComponentCssInjection","menuGroupCss","useId","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEhD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,UAAUC,WAAM,EAAA;AAEtB,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAiB,QAAQ,OAAU,GAAA,
|
|
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":["makePrefixer","forwardRef","MenuGroup","useWindow","useComponentCssInjection","menuGroupCss","useId","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEhD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,UAAUC,WAAM,EAAA;AAEtB,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAiB,QAAQ,OAAU,GAAA,MAAA;AAAA,QACnC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,OAAA;AAAA,QACL,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UACC,KAAA,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA,SAAA,EAAW,aAAa,OAAO,CAAA,EAAG,EAAI,EAAA,OAAA,EACpD,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,UAED;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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 if (!disabled) {\n onClick?.(event);\n if (!triggersSubmenu) {\n tree?.events.emit(\"click\");\n }\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":["makePrefixer","forwardRef","MenuItem","useIsMenuTrigger","useIcon","useMenuPanelContext","useListItem","useFloatingTree","useWindow","useComponentCssInjection","menuItemCss","useForkRef","jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,eAAA,EAAiB,UAAW,EAAA,GAAIC,mCAAiB,EAAA;AACzD,IAAM,MAAA,EAAE,eAAgB,EAAA,GAAIC,4BAAQ,EAAA;AACpC,IAAA,MAAM,EAAE,WAAA,EAAa,YAAc,EAAA,cAAA,KAAmBC,oCAAoB,EAAA;AAC1E,IAAA,MAAM,OAAOC,iBAAY,EAAA;AACzB,IAAA,MAAM,OAAOC,qBAAgB,EAAA;AAC7B,IAAM,MAAA,MAAA,GAAS,KAAK,KAAU,KAAA,WAAA;AAC9B,IAAA,MAAM,eAAeC,kBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAA,MAAM,SAAY,GAAAC,qBAAA,CAA2B,GAAK,EAAA,IAAA,CAAK,GAAG,CAAA;AAC1D,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG;AAAA,WAChC;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QACL,iBAAe,QAAY,IAAA,
|
|
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 if (!disabled) {\n onClick?.(event);\n if (!triggersSubmenu) {\n tree?.events.emit(\"click\");\n }\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":["makePrefixer","forwardRef","MenuItem","useIsMenuTrigger","useIcon","useMenuPanelContext","useListItem","useFloatingTree","useWindow","useComponentCssInjection","menuItemCss","useForkRef","jsxs","clsx"],"mappings":"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"}
|
|
@@ -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":["makePrefixer","forwardRef","MenuPanel","useFloatingComponent","useMenuContext","useForkRef","jsx","MenuPanelContext","FloatingList","clsx","MenuPanelBase"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA;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;AAAA,QACEC,0BAAe,EAAA;AAEnB,IAAA,MAAM,SAAY,GAAAC,qBAAA,CAA2B,GAAK,EAAA,IAAA,IAAA,IAAA,GAAA,
|
|
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":["makePrefixer","forwardRef","MenuPanel","useFloatingComponent","useMenuContext","useForkRef","jsx","MenuPanelContext","FloatingList","clsx","MenuPanelBase"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA;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;AAAA,QACEC,0BAAe,EAAA;AAEnB,IAAA,MAAM,SAAY,GAAAC,qBAAA,CAA2B,GAAK,EAAA,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,WAAW,CAAA;AAEnE,IACE,uBAAAC,cAAA;AAAA,MAACC,iCAAiB,CAAA,QAAA;AAAA,MAAjB;AAAA,QACC,KAAO,EAAA,EAAE,WAAa,EAAA,YAAA,EAAc,cAAe,EAAA;AAAA,QAEnD,QAAA,kBAAAD,cAAA,CAACE,sBAAa,WACZ,EAAA,QAAA,kBAAAF,cAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,IAAM,EAAA,SAAA;AAAA,YACN,IAAK,EAAA,MAAA;AAAA,YACJ,GAAG,gBAAiB,EAAA;AAAA,YACpB,GAAG,gBAAiB,EAAA;AAAA,YACrB,SAAW,EAAAG,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,mBACE,OACI,GAAA;AAAA,cACE,OAAA;AAAA,cACA,YAAA,EAAc,WAAW,EAAK,GAAA,CAAA;AAAA,cAC9B,aAAa,CAAC,QAAA;AAAA,cACd,KAAO,EAAA;AAAA,aAET,GAAA,MAAA;AAAA,YAEN,QAAU,EAAA,EAAA;AAAA,YACV,GAAK,EAAA,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YAEJ,QAAA,kBAAAH,cAAA,CAACI,+BAAe,QAAS,EAAA;AAAA;AAAA,SAE7B,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -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":["createContext","useContext"],"mappings":";;;;;;;;;;;AAUO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAa,EAAA,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM
|
|
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":["createContext","useContext"],"mappings":";;;;;;;;;;;AAUO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAa,EAAA,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA;AAE1B;AAEO,SAAS,mBAAsB,GAAA;AACpC,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}
|
|
@@ -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":["useMenuContext","useMenuPanelContext","useForkRef","getRefFromChildren","isValidElement","jsx","MenuTriggerContext","mergeProps"],"mappings":";;;;;;;;;;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5DA,0BAAe,EAAA;AACjB,EAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAIC,oCAAoB,EAAA;AAErE,EAAA,MAAM,SAAY,GAAAC,qBAAA;AAAA,IAChBC,sCAAmB,QAAQ,CAAA;AAAA,IAC3B,IAAM,IAAA,IAAA,GAAA,
|
|
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":["useMenuContext","useMenuPanelContext","useForkRef","getRefFromChildren","isValidElement","jsx","MenuTriggerContext","mergeProps"],"mappings":";;;;;;;;;;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5DA,0BAAe,EAAA;AACjB,EAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAIC,oCAAoB,EAAA;AAErE,EAAA,MAAM,SAAY,GAAAC,qBAAA;AAAA,IAChBC,sCAAmB,QAAQ,CAAA;AAAA,IAC3B,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA;AAAA,GACR;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAe,QAAQ,CAAG,EAAA;AAE1C,IAAA,6DAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EACE,uBAAAC,cAAA;AAAA,IAACC,qCAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,OAAO,EAAE,eAAA,EAAiB,IAAM,EAAA,UAAA,EAAY,eAAe,SAAU,EAAA;AAAA,MAEpE,6BAAa,QAAU,EAAA;AAAA,QACtB,GAAGC,qBAAA;AAAA,UACD,iBAAkB,CAAA;AAAA,YAChB,OAAU,GAAA;AACR,cAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,cAAA,cAAA,CAAe,KAAK,CAAA;AAAA;AACtB,WACD,CAAA;AAAA,UACD,QAAS,CAAA;AAAA,SACX;AAAA,QACA,GAAK,EAAA;AAAA,OACN;AAAA;AAAA,GACH;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ReactNode,\n type Ref,\n type TextareaHTMLAttributes,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"textarea\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The default minimum number of rows. Defaults to 3\n */\n rows?: number;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n */\n textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n DataAttributes;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n function MultilineInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n bordered = false,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n placeholder,\n readOnly,\n role,\n rows = 3,\n startAdornment,\n style,\n textAreaProps = {},\n textAreaRef,\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref,\n ) {\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const handleRef = useForkRef(inputRef, textAreaRef);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-multiline-input\",\n css: multilineInputCss,\n window: targetWindow,\n });\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const previousHeight = useRef<string | undefined>(undefined);\n const input = inputRef.current;\n\n const changeHeight = useCallback(() => {\n if (!input) return;\n const hasBeenManuallyResized =\n previousHeight.current !== undefined &&\n input.style.height !== previousHeight.current;\n if (!hasBeenManuallyResized) {\n const previousOverflow = input.style.overflow;\n input.style.overflow = \"hidden\";\n input.style.height = \"auto\";\n input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n const newHeight = `${\n input.scrollHeight + (input.offsetHeight - input.clientHeight)\n }px`;\n input.style.height = newHeight;\n previousHeight.current = newHeight;\n input.style.overflow = previousOverflow;\n }\n }, [input]);\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n changeHeight();\n };\n\n useLayoutEffect(() => {\n changeHeight();\n }, [value, changeHeight]);\n\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const multilineInputStyles = {\n \"--saltMultilineInput-rows\": rows,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"withAdornmentRow\")]: endAdornment,\n [withBaseName(\"bordered\")]: bordered,\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp,\n )}\n ref={ref}\n style={multilineInputStyles}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <textarea\n aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleRef}\n required={isRequired}\n role={role}\n rows={rows}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restTextAreaProps}\n />\n <div className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useRef","useForkRef","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","useCallback","value","useLayoutEffect","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ReactNode,\n type Ref,\n type TextareaHTMLAttributes,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n Pick<\n ComponentPropsWithoutRef<\"textarea\">,\n \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n > {\n /**\n * Styling variant with full border. Defaults to false\n */\n bordered?: boolean;\n /**\n * End adornment component\n */\n endAdornment?: ReactNode;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * The default minimum number of rows. Defaults to 3\n */\n rows?: number;\n /**\n * Start adornment component\n */\n startAdornment?: ReactNode;\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n */\n textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n DataAttributes;\n /**\n * Optional ref for the textarea component\n */\n textAreaRef?: Ref<HTMLTextAreaElement>;\n /**\n * Validation status.\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n function MultilineInput(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n bordered = false,\n className: classNameProp,\n disabled,\n endAdornment,\n id,\n placeholder,\n readOnly,\n role,\n rows = 3,\n startAdornment,\n style,\n textAreaProps = {},\n textAreaRef,\n value: valueProp,\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n ...other\n },\n ref,\n ) {\n const inputRef = useRef<HTMLTextAreaElement>(null);\n const handleRef = useForkRef(inputRef, textAreaRef);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-multiline-input\",\n css: multilineInputCss,\n window: targetWindow,\n });\n\n const restA11yProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n };\n\n const [focused, setFocused] = useState(false);\n\n const {\n \"aria-describedby\": textAreaDescribedBy,\n \"aria-labelledby\": textAreaLabelledBy,\n onBlur,\n onChange,\n onFocus,\n required: textAreaRequired,\n ...restTextAreaProps\n } = textAreaProps;\n\n const {\n a11yProps: {\n \"aria-describedby\": formFieldDescribedBy,\n \"aria-labelledby\": formFieldLabelledBy,\n } = {},\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n necessity: formFieldRequired,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const isDisabled = disabled || formFieldDisabled;\n const isReadOnly = readOnly || formFieldReadOnly;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : textAreaRequired;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"MultilineInput\",\n state: \"value\",\n });\n\n const previousHeight = useRef<string | undefined>(undefined);\n const input = inputRef.current;\n\n const changeHeight = useCallback(() => {\n if (!input) return;\n const hasBeenManuallyResized =\n previousHeight.current !== undefined &&\n input.style.height !== previousHeight.current;\n if (!hasBeenManuallyResized) {\n const previousOverflow = input.style.overflow;\n input.style.overflow = \"hidden\";\n input.style.height = \"auto\";\n input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n const newHeight = `${\n input.scrollHeight + (input.offsetHeight - input.clientHeight)\n }px`;\n input.style.height = newHeight;\n previousHeight.current = newHeight;\n input.style.overflow = previousOverflow;\n }\n }, [input]);\n\n const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event);\n changeHeight();\n };\n\n useLayoutEffect(() => {\n changeHeight();\n }, [value, changeHeight]);\n\n const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n const multilineInputStyles = {\n \"--saltMultilineInput-rows\": rows,\n ...style,\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"withAdornmentRow\")]: endAdornment,\n [withBaseName(\"bordered\")]: bordered,\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n classNameProp,\n )}\n ref={ref}\n style={multilineInputStyles}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"startAdornmentContainer\")}>\n {startAdornment}\n </div>\n )}\n <textarea\n aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n disabled={isDisabled}\n id={id}\n readOnly={isReadOnly}\n ref={handleRef}\n required={isRequired}\n role={role}\n rows={rows}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n value={value}\n {...restA11yProps}\n {...restTextAreaProps}\n />\n <div className={withBaseName(\"suffixAdornments\")}>\n {!isDisabled && validationStatus && (\n <div className={withBaseName(\"statusAdornmentContainer\")}>\n <StatusAdornment status={validationStatus} />\n </div>\n )}\n {endAdornment && (\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {endAdornment}\n </div>\n )}\n </div>\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useRef","useForkRef","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","useCallback","value","useLayoutEffect","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ const ExpansionIcon = ({
|
|
|
7
7
|
expanded = false,
|
|
8
8
|
orientation = "horizontal"
|
|
9
9
|
}) => {
|
|
10
|
-
const { ExpandGroupIcon,
|
|
10
|
+
const { ExpandGroupIcon, CollapseGroupIcon } = SemanticIconProvider.useIcon();
|
|
11
11
|
const iconExpansionMap = {
|
|
12
12
|
vertical: {
|
|
13
13
|
expanded: CollapseGroupIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { useIcon } from \"../semantic-icon-provider\";\n\ninterface ExpansionIconProps {\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ExpansionIcon = ({\n expanded = false,\n orientation = \"horizontal\",\n}: ExpansionIconProps) => {\n const { ExpandGroupIcon, ExpandIcon, CollapseGroupIcon } = useIcon();\n const iconExpansionMap = {\n vertical: {\n expanded: CollapseGroupIcon,\n collapsed: ExpandGroupIcon,\n },\n horizontal: {\n expanded: CollapseGroupIcon,\n collapsed: CollapseGroupIcon,\n },\n };\n\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" />;\n};\n"],"names":["useIcon","jsx"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA;AAChB,CAA0B,KAAA;AACxB,EAAA,MAAM,EAAE,eAAA,
|
|
1
|
+
{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { useIcon } from \"../semantic-icon-provider\";\n\ninterface ExpansionIconProps {\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ExpansionIcon = ({\n expanded = false,\n orientation = \"horizontal\",\n}: ExpansionIconProps) => {\n const { ExpandGroupIcon, ExpandIcon, CollapseGroupIcon } = useIcon();\n const iconExpansionMap = {\n vertical: {\n expanded: CollapseGroupIcon,\n collapsed: ExpandGroupIcon,\n },\n horizontal: {\n expanded: CollapseGroupIcon,\n collapsed: CollapseGroupIcon,\n },\n };\n\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" />;\n};\n"],"names":["useIcon","jsx"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA;AAChB,CAA0B,KAAA;AACxB,EAAA,MAAM,EAAE,eAAA,EAA6B,iBAAA,KAAsBA,4BAAQ,EAAA;AACnE,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,QAAU,EAAA;AAAA,MACR,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,UAAY,EAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA;AACb,GACF;AAEA,EAAA,MAAM,OACJ,gBAAiB,CAAA,WAAW,CAAE,CAAA,QAAA,GAAW,aAAa,WAAW,CAAA;AACnE,EAAO,uBAAAC,cAAA,CAAC,IAAK,EAAA,EAAA,aAAA,EAAY,MAAO,EAAA,CAAA;AAClC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { RenderPropsType } from \"../utils\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Render prop to enable customisation of navigation item element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n render,\n children,\n className,\n expanded = false,\n href,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n const isLink = href !== undefined;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onExpand?.(event);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <NavigationItemAction\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation),\n )}\n render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n aria-expanded={isLink ? undefined : expanded}\n onClick={handleClick}\n aria-current={isLink && active ? \"page\" : undefined}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent ? (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n ) : null}\n </NavigationItemAction>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACP,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAS,KAAA,
|
|
1
|
+
{"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport type { RenderPropsType } from \"../utils\";\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { NavigationItemAction } from \"./NavigationItemAction\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Render prop to enable customisation of navigation item element.\n */\n render?: RenderPropsType[\"render\"];\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n render,\n children,\n className,\n expanded = false,\n href,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n const isLink = href !== undefined;\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n onExpand?.(event);\n };\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n style={style}\n {...rest}\n >\n <NavigationItemAction\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive,\n [withBaseName(\"rootItem\")]: level === 0,\n },\n withBaseName(orientation),\n )}\n render={render ?? (isLink ? undefined : <button type=\"button\" />)}\n aria-expanded={isLink ? undefined : expanded}\n onClick={handleClick}\n aria-current={isLink && active ? \"page\" : undefined}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent ? (\n <ExpansionIcon expanded={expanded} orientation={orientation} />\n ) : null}\n </NavigationItemAction>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","NavigationItem","useWindow","useComponentCssInjection","navigationItemCss","jsx","clsx","jsxs","NavigationItemAction","ExpansionIcon"],"mappings":";;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,IAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACP,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,4BAAA,EAA8B,GAAG,KAAK,CAAA;AAAA,KACxC;AAEA,IAAA,MAAM,SAAS,IAAS,KAAA,MAAA;AAExB,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,KACb;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAC,eAAA;AAAA,UAACC,yCAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAF,SAAA;AAAA,cACT,aAAa,SAAS,CAAA;AAAA,cACtB;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAU,IAAA,UAAA;AAAA,gBACpC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,KAAU,KAAA;AAAA,eACxC;AAAA,cACA,aAAa,WAAW;AAAA,aAC1B;AAAA,YACA,QAAQ,MAAW,KAAA,MAAA,GAAS,yBAAaD,cAAA,CAAA,QAAA,EAAA,EAAO,MAAK,QAAS,EAAA,CAAA,CAAA;AAAA,YAC9D,eAAA,EAAe,SAAS,MAAY,GAAA,QAAA;AAAA,YACpC,OAAS,EAAA,WAAA;AAAA,YACT,cAAA,EAAc,MAAU,IAAA,MAAA,GAAS,MAAS,GAAA,MAAA;AAAA,YAC1C,IAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAS,EAAA,CAAA;AAAA,cACjD,MACC,mBAAAA,cAAA,CAACI,2BAAc,EAAA,EAAA,QAAA,EAAoB,aAA0B,CAC3D,GAAA;AAAA;AAAA;AAAA;AACN;AAAA,KACF;AAAA;AAGN;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport {\n type OptionValue,\n useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n activeState,\n multiselect,\n select,\n register,\n selectedState,\n focusVisibleState,\n valueToString,\n disabled: listDisabled,\n } = useListControlContext();\n\n const disabled = disabledProp || listDisabled;\n\n const selected = selectedState.includes(value);\n const active = activeState?.id === id;\n\n const optionValue: OptionValue<unknown> = useMemo(\n () => ({\n id: String(id),\n disabled: Boolean(disabled),\n value,\n }),\n [id, disabled, value],\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n {...rest}\n >\n {multiselect && <CheckboxIcon checked={selected} disabled={disabled} />}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Option","useWindow","useComponentCssInjection","optionCss","useRef","useId","useListControlContext","useMemo","useEffect","useForkRef","jsxs","clsx","jsx","CheckboxIcon"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,OAAA;AAAA,MACA,EAAI,EAAA,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAAO,IAAI,CAAA;AAC7B,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AAEvB,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAU,EAAA;AAAA,QACRC,wCAAsB,EAAA;AAE1B,IAAA,MAAM,WAAW,YAAgB,IAAA,YAAA;AAEjC,IAAM,MAAA,QAAA,GAAW,aAAc,CAAA,QAAA,CAAS,KAAK,CAAA;AAC7C,IAAM,MAAA,MAAA,GAAA,CAAS,2CAAa,EAAO,MAAA,EAAA;AAEnC,IAAA,MAAM,WAAoC,GAAAC,aAAA;AAAA,MACxC,OAAO;AAAA,QACL,EAAA,EAAI,OAAO,EAAE,CAAA;AAAA,QACb,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B;AAAA,OACF,CAAA;AAAA,MACA,CAAC,EAAI,EAAA,QAAA,EAAU,KAAK;AAAA,KACtB;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAsC,KAAA;AACzD,MAAI,IAAA,QAAA,IAAY,OAAO,
|
|
1
|
+
{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport {\n type OptionValue,\n useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n activeState,\n multiselect,\n select,\n register,\n selectedState,\n focusVisibleState,\n valueToString,\n disabled: listDisabled,\n } = useListControlContext();\n\n const disabled = disabledProp || listDisabled;\n\n const selected = selectedState.includes(value);\n const active = activeState?.id === id;\n\n const optionValue: OptionValue<unknown> = useMemo(\n () => ({\n id: String(id),\n disabled: Boolean(disabled),\n value,\n }),\n [id, disabled, value],\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n {...rest}\n >\n {multiselect && <CheckboxIcon checked={selected} disabled={disabled} />}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Option","useWindow","useComponentCssInjection","optionCss","useRef","useId","useListControlContext","useMemo","useEffect","useForkRef","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type ComponentPropsWithoutRef, useMemo, useRef } from \"react\";\nimport { useControlled, useFloatingUI } from \"../utils\";\nimport { OverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /*\n * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n */\n placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const Overlay = ({\n children,\n open,\n onOpenChange,\n placement: placementProp = \"top\",\n}: OverlayProps) => {\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n\n const handleOpenChange = (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n };\n\n const { x, y, strategy, context, elements, floating, reference } =\n useFloatingUI({\n open: openState,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(11),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n useDismiss(context),\n ]);\n\n const floatingStyles = useMemo(() => {\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n };\n }, [elements.floating, strategy, x, y]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n return (\n <OverlayContext.Provider\n value={{\n openState,\n floatingStyles,\n context,\n arrowProps,\n floating,\n reference,\n getFloatingProps,\n getReferenceProps,\n }}\n >\n {children}\n </OverlayContext.Provider>\n );\n};\n"],"names":["useRef","useControlled","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useRole","useClick","useDismiss","useMemo","jsx","OverlayContext"],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAW,aAAgB,GAAA;AAC7B,CAAoB,KAAA;AAClB,EAAM,MAAA,QAAA,GAAWA,aAA6B,IAAI,CAAA;AAElD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,2BAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,IAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,YAAA,CAAa,OAAO,CAAA;AACpB,IAAe,YAAA,IAAA,IAAA,GAAA,
|
|
1
|
+
{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { type ComponentPropsWithoutRef, useMemo, useRef } from \"react\";\nimport { useControlled, useFloatingUI } from \"../utils\";\nimport { OverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Display or hide the component.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n /*\n * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n */\n placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nexport const Overlay = ({\n children,\n open,\n onOpenChange,\n placement: placementProp = \"top\",\n}: OverlayProps) => {\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [openState, setOpenState] = useControlled({\n controlled: open,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n\n const handleOpenChange = (newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(newOpen);\n };\n\n const { x, y, strategy, context, elements, floating, reference } =\n useFloatingUI({\n open: openState,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(11),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n useDismiss(context),\n ]);\n\n const floatingStyles = useMemo(() => {\n return {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n };\n }, [elements.floating, strategy, x, y]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n return (\n <OverlayContext.Provider\n value={{\n openState,\n floatingStyles,\n context,\n arrowProps,\n floating,\n reference,\n getFloatingProps,\n getReferenceProps,\n }}\n >\n {children}\n </OverlayContext.Provider>\n );\n};\n"],"names":["useRef","useControlled","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useRole","useClick","useDismiss","useMemo","jsx","OverlayContext"],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAW,aAAgB,GAAA;AAC7B,CAAoB,KAAA;AAClB,EAAM,MAAA,QAAA,GAAWA,aAA6B,IAAI,CAAA;AAElD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,2BAAc,CAAA;AAAA,IAC9C,UAAY,EAAA,IAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,YAAA,CAAa,OAAO,CAAA;AACpB,IAAe,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAA,OAAA,CAAA;AAAA,GACjB;AAEA,EAAM,MAAA,EAAE,GAAG,CAAG,EAAA,QAAA,EAAU,SAAS,QAAU,EAAA,QAAA,EAAU,SAAU,EAAA,GAC7DC,2BAAc,CAAA;AAAA,IACZ,IAAM,EAAA,SAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,aAAO,EAAE,CAAA;AAAA,MACTC,UAAK,EAAA;AAAA,MACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AAAA,MAC/BC,WAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU;AAAA;AAC7B,GACD,CAAA;AAEH,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,aAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,UAAU,CAAA;AAAA,IACnCC,eAAS,OAAO,CAAA;AAAA,IAChBC,iBAAW,OAAO;AAAA,GACnB,CAAA;AAED,EAAM,MAAA,cAAA,GAAiBC,cAAQ,MAAM;AArEvC,IAAA,IAAA,EAAA,EAAA,EAAA;AAsEI,IAAO,OAAA;AAAA,MACL,KAAK,CAAK,IAAA,CAAA;AAAA,MACV,MAAM,CAAK,IAAA,CAAA;AAAA,MACX,QAAU,EAAA,QAAA;AAAA,MACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,MAAA,GAAA,EAAA,CAAA,WAAA;AAAA,MAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,MAAA,GAAA,EAAA,CAAA;AAAA,KAC7B;AAAA,KACC,CAAC,QAAA,CAAS,UAAU,QAAU,EAAA,CAAA,EAAG,CAAC,CAAC,CAAA;AAEtC,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL;AAAA,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,6BAAe,CAAA,QAAA;AAAA,IAAf;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,cAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,SAAA;AAAA,QACA,gBAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}
|