@preply/ds-web-lib 11.0.0 → 11.1.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/dist/Accordion-B0hR-tcI.js +96 -0
- package/dist/AlertBannerProvider-Cf7w9AOq.js +76 -0
- package/dist/AlertDialog-BG-diKBi.js +475 -0
- package/dist/Avatar-B-JdqVyg.js +66 -0
- package/dist/AvatarWithStatus-CD9jEqEB.js +36 -0
- package/dist/Badge-Dd-CLBoW.js +50 -0
- package/dist/Box-BJBE9KNm.js +91 -0
- package/dist/BubbleCounter.module-BU2S0euA.js +16 -0
- package/dist/Button-C35BZJZT.js +91 -0
- package/dist/ButtonBase-8eUyTWxX.js +215 -0
- package/dist/Checkbox-CtolNbxI.js +108 -0
- package/dist/Chips-BRGw7Uup.js +99 -0
- package/dist/ChipsPrimitive-Bezq7ptE.js +1179 -0
- package/dist/CountryFlag-DVDKHmQH.js +43 -0
- package/dist/Dialog.module-Db2BJAn4.js +21 -0
- package/dist/DialogCloseButton-DjDd9Mid.js +98 -0
- package/dist/DialogDescription-8zw9t6pm.js +44 -0
- package/dist/DialogRoot-B67oJduC.js +335 -0
- package/dist/DialogRootContext-Bz8RW-Mq.js +12 -0
- package/dist/DialogTitle-C2Nn2ys-.js +43 -0
- package/dist/Divider-DvwDWB9_.js +17 -0
- package/dist/DropdownMenu.primitives-BrsTBvMk.js +4007 -0
- package/dist/FieldButton-B2slox8P.js +32 -0
- package/dist/FormControl-qnbQL1iF.js +128 -0
- package/dist/Heading-DA9gHfsx.js +71 -0
- package/dist/Icon-CixAeOSd.js +48 -0
- package/dist/IconButton-BPKpgfep.js +31 -0
- package/dist/InputContainer-CzzuOe_p.js +38 -0
- package/dist/LayoutFlex-e9auDvWD.js +86 -0
- package/dist/LayoutFlexItem-D9ziMmHe.js +48 -0
- package/dist/LayoutGridItem-Q8Lnvrri.js +34 -0
- package/dist/Link-CdoJVeER.js +66 -0
- package/dist/Loader-BMOxdJce.js +26 -0
- package/dist/OnboardingTooltip-B47_Yrsj.js +165 -0
- package/dist/OnboardingTour-DUUoI5WE.js +131 -0
- package/dist/PasswordField-Bx5YG62t.js +93 -0
- package/dist/PreplyLogo-abgOre30.js +112 -0
- package/dist/ProgressBar-CEU4GyHn.js +31 -0
- package/dist/ProgressSteps-BSqopxqv.js +45 -0
- package/dist/Select-Bo7PX_8V.js +124 -0
- package/dist/Slider-Crg4DEn_.js +64 -0
- package/dist/Spinner-Ck8KQA22.js +86 -0
- package/dist/Stars-D5QspUBE.js +72 -0
- package/dist/Steps-DbN5vFrP.js +173 -0
- package/dist/Switch-Ck_xB0ID.js +49 -0
- package/dist/Text-CaOF75Z-.js +121 -0
- package/dist/TextHighlighted-Dwq9Clgn.js +34 -0
- package/dist/TextInline-BcA4H2Tk.js +34 -0
- package/dist/Toast-wJAjSLfo.js +1019 -0
- package/dist/TokyoUIChevronDown-DGcVqR1z.js +14 -0
- package/dist/Tooltip-grvKQxTN.js +84 -0
- package/dist/VisuallyHidden-CtcHcZCK.js +29 -0
- package/dist/align-self-VrZUceie.js +42 -0
- package/dist/assets/Accordion.css +2 -2
- package/dist/assets/AlertBannerProvider.css +2 -2
- package/dist/assets/AlertDialog.css +2 -2
- package/dist/assets/Avatar.css +3 -3
- package/dist/assets/AvatarWithStatus.css +2 -2
- package/dist/assets/Badge.css +1 -1
- package/dist/assets/Box.css +3 -3
- package/dist/assets/BubbleCounter.css +1 -1
- package/dist/assets/Button.css +4 -4
- package/dist/assets/ButtonBase.css +40 -46
- package/dist/assets/Checkbox.css +1 -1
- package/dist/assets/Chips.css +2 -2
- package/dist/assets/ChipsPrimitive.css +2 -2
- package/dist/assets/CountryFlag.css +1 -1
- package/dist/assets/Dialog.css +13 -4
- package/dist/assets/Divider.css +1 -1
- package/dist/assets/DropdownMenu.css +2 -2
- package/dist/assets/FieldButton.css +3 -3
- package/dist/assets/FormControl.css +1 -1
- package/dist/assets/Heading.css +3 -3
- package/dist/assets/Icon.css +3 -3
- package/dist/assets/InputContainer.css +2 -2
- package/dist/assets/LayoutFlex.css +1 -1
- package/dist/assets/LayoutFlexItem.css +1 -1
- package/dist/assets/Link.css +3 -3
- package/dist/assets/Loader.css +1 -1
- package/dist/assets/OnboardingTooltip.css +1 -1
- package/dist/assets/OnboardingTour.css +1 -1
- package/dist/assets/PreplyLogo.css +1 -1
- package/dist/assets/ProgressBar.css +1 -1
- package/dist/assets/ProgressSteps.css +1 -1
- package/dist/assets/Select.css +2 -2
- package/dist/assets/Slider.css +1 -1
- package/dist/assets/Spinner.css +3 -3
- package/dist/assets/Stars.css +3 -3
- package/dist/assets/Steps.css +2 -2
- package/dist/assets/Switch.css +1 -1
- package/dist/assets/Text.css +3 -3
- package/dist/assets/TextHighlighted.css +3 -3
- package/dist/assets/TextInline.css +3 -3
- package/dist/assets/Toast.css +2 -2
- package/dist/assets/Tooltip.css +1 -1
- package/dist/assets/align-self.css +1 -1
- package/dist/assets/{IconTile.css → components.css} +1 -1
- package/dist/assets/exp-color.css +2 -2
- package/dist/assets/index.css +1 -1
- package/dist/assets/layout-gap.css +3 -3
- package/dist/assets/layout-grid.css +3 -3
- package/dist/assets/layout-hide.css +1 -1
- package/dist/assets/layout-padding.css +3 -3
- package/dist/assets/layout-relative.css +1 -1
- package/dist/assets/text-accent.css +2 -2
- package/dist/assets/text-centered.css +1 -1
- package/dist/assets/text-weight.css +2 -2
- package/dist/chunk-BVTlhY3a.js +24 -0
- package/dist/components/Accordion/Accordion.js +4 -60
- package/dist/components/Accordion/hooks/useOnOpenChange.js +19 -28
- package/dist/components/AlertBanner/AlertBanner.js +11 -26
- package/dist/components/AlertBanner/AlertBannerProvider.js +3 -8
- package/dist/components/AlertBanner/primitives/AlertBannerAction.js +11 -69
- package/dist/components/AlertBanner/primitives/AlertBannerIcon.js +77 -39
- package/dist/components/AlertBanner/primitives/AlertBannerRoot.js +26 -22
- package/dist/components/AlertBanner/primitives/AlertBannerText.js +11 -70
- package/dist/components/AlertDialog/AlertDialog.js +5 -430
- package/dist/components/Avatar/Avatar.js +3 -71
- package/dist/components/AvatarWithStatus/AvatarWithStatus.js +3 -43
- package/dist/components/Badge/Badge.js +4 -62
- package/dist/components/Box/Box.js +3 -95
- package/dist/components/BubbleCounter/BubbleCounter.js +23 -28
- package/dist/components/Button/Button.js +4 -80
- package/dist/components/CalloutBanner/CalloutBanner.js +61 -12
- package/dist/components/CalloutBanner/primitives/CalloutBannerDismissButton.js +50 -22
- package/dist/components/CalloutBanner/primitives/CalloutBannerIcon.js +86 -45
- package/dist/components/CalloutBanner/primitives/CalloutBannerRoot.js +50 -24
- package/dist/components/CalloutBanner/primitives/CalloutBannerText.js +41 -11
- package/dist/components/Checkbox/Checkbox.js +4 -78
- package/dist/components/Checkbox/hooks/useIndeterminate.js +24 -30
- package/dist/components/Chips/Chips.types.js +0 -1
- package/dist/components/Chips/DismissibleChips.js +117 -86
- package/dist/components/Chips/MultiSelectChips.js +98 -64
- package/dist/components/Chips/SingleSelectChips.js +94 -57
- package/dist/components/Chips/private/ChipsPrimitive.js +4 -17
- package/dist/components/CountryFlag/CountryFlag.js +3 -44
- package/dist/components/Dialog/Dialog.js +56 -31
- package/dist/components/Dialog/DialogSteps.js +40 -29
- package/dist/components/Dialog/primitives/DialogActions.js +26 -19
- package/dist/components/Dialog/primitives/DialogButtonStack.d.ts.map +1 -1
- package/dist/components/Dialog/primitives/DialogButtonStack.js +22 -15
- package/dist/components/Dialog/primitives/DialogCloseButton.d.ts +1 -1
- package/dist/components/Dialog/primitives/DialogCloseButton.d.ts.map +1 -1
- package/dist/components/Dialog/primitives/DialogCloseButton.js +4 -67
- package/dist/components/Dialog/primitives/DialogDescription.js +3 -43
- package/dist/components/Dialog/primitives/DialogFooter.js +37 -34
- package/dist/components/Dialog/primitives/DialogRoot.js +4 -315
- package/dist/components/Dialog/primitives/DialogTitle.js +3 -42
- package/dist/components/Divider/Divider.js +3 -14
- package/dist/components/DropdownMenu/DropdownMenu.js +253 -188
- package/dist/components/DropdownMenu/primitives/DropdownMenu.primitives.js +5 -34
- package/dist/components/DropdownMenu/primitives/DropdownMenuSelectItem.primitives.js +121 -71
- package/dist/components/FieldButton/FieldButton.js +3 -37
- package/dist/components/FormControl/FormControl.js +3 -105
- package/dist/components/Heading/Heading.js +3 -78
- package/dist/components/Icon/Icon.js +4 -49
- package/dist/components/IconButton/IconButton.d.ts +5 -1
- package/dist/components/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton/IconButton.js +4 -28
- package/dist/components/IconTile/IconTile.js +11 -69
- package/dist/components/IntlFormatted/IntlFormattedAggregatedDateTime.js +16 -32
- package/dist/components/IntlFormatted/IntlFormattedCurrency.js +20 -42
- package/dist/components/IntlFormatted/IntlFormattedDate.js +73 -195
- package/dist/components/IntlFormatted/IntlFormattedTime.js +14 -24
- package/dist/components/IntlFormatted/Wrapper.js +14 -8
- package/dist/components/LayoutFlex/LayoutFlex.js +3 -100
- package/dist/components/LayoutFlex/style/getStyleAttrs.js +71 -143
- package/dist/components/LayoutFlex/tests/AlignItems.js +67 -97
- package/dist/components/LayoutFlex/tests/ColumnReverse.js +63 -100
- package/dist/components/LayoutFlex/tests/DataOverride.js +1498 -1093
- package/dist/components/LayoutFlex/tests/Default.js +19 -20
- package/dist/components/LayoutFlex/tests/Direction.js +65 -88
- package/dist/components/LayoutFlex/tests/Gap.js +115 -197
- package/dist/components/LayoutFlex/tests/HideInline.js +95 -136
- package/dist/components/LayoutFlex/tests/JustifyContent.js +75 -108
- package/dist/components/LayoutFlex/tests/Nowrap.js +35 -42
- package/dist/components/LayoutFlex/tests/Padding.js +207 -263
- package/dist/components/LayoutFlex/tests/Relative.js +49 -64
- package/dist/components/LayoutFlexItem/LayoutFlexItem.js +3 -54
- package/dist/components/LayoutGrid/LayoutGrid.js +26 -34
- package/dist/components/LayoutGridItem/LayoutGridItem.js +3 -41
- package/dist/components/Link/Link.js +3 -72
- package/dist/components/Loader/Loader.js +3 -32
- package/dist/components/NumberField/NumberField.js +33 -35
- package/dist/components/ObserveIntersection/ObserveIntersection.js +41 -42
- package/dist/components/OnboardingTooltip/OnboardingTooltip.js +4 -115
- package/dist/components/OnboardingTour/OnboardingTour.js +4 -114
- package/dist/components/PasswordField/PasswordField.js +3 -78
- package/dist/components/PreplyLogo/PreplyLogo.js +3 -81
- package/dist/components/ProgressBar/ProgressBar.js +3 -27
- package/dist/components/ProgressSteps/ProgressSteps.js +3 -48
- package/dist/components/Rating/Rating.js +29 -20
- package/dist/components/Rating/RatingInput.js +57 -59
- package/dist/components/Rating/Stars.js +4 -8
- package/dist/components/Rating/hooks/useHasError.js +11 -15
- package/dist/components/Rating/hooks/useHoverPercentage.js +37 -45
- package/dist/components/Rating/hooks/useInputState.js +18 -24
- package/dist/components/Rating/hooks/useLocalizations.js +12 -24
- package/dist/components/Rating/utils/roundToHalfDecimal.js +4 -4
- package/dist/components/SelectField/Select.js +5 -112
- package/dist/components/SelectField/SelectField.js +29 -24
- package/dist/components/SelectField/hooks/useBreakpointMatch.js +18 -19
- package/dist/components/ShowOnIntersection/ShowOnIntersection.js +32 -21
- package/dist/components/Slider/RangeSlider.js +62 -52
- package/dist/components/Slider/Slider.js +3 -10
- package/dist/components/Steps/Steps.js +4 -210
- package/dist/components/Switch/Switch.js +3 -51
- package/dist/components/Text/Text.js +3 -128
- package/dist/components/TextField/TextField.js +27 -29
- package/dist/components/TextHighlighted/TextHighlighted.js +3 -41
- package/dist/components/TextInline/TextInline.js +3 -40
- package/dist/components/TextareaField/TextareaField.js +26 -28
- package/dist/components/Toast/Toast.js +4 -1168
- package/dist/components/Tooltip/Tooltip.js +3 -66
- package/dist/components/deprecated/Chips/Chips.js +4 -76
- package/dist/components/deprecated/NativeSelectField/NativeSelect.js +40 -32
- package/dist/components/deprecated/NativeSelectField/NativeSelectField.js +34 -33
- package/dist/components/deprecated/index.js +5 -6
- package/dist/components/index.js +50 -150
- package/dist/components/private/ButtonBase/ButtonBase.d.ts +7 -11
- package/dist/components/private/ButtonBase/ButtonBase.d.ts.map +1 -1
- package/dist/components/private/ButtonBase/ButtonBase.js +3 -247
- package/dist/components/private/Input/Input.js +27 -19
- package/dist/components/private/Input/InputContainer.js +3 -5
- package/dist/components/private/Input/Textarea.js +24 -20
- package/dist/components/private/Input/index.js +2 -4
- package/dist/components/private/Spinner/Spinner.js +3 -52
- package/dist/components/private/VisuallyHidden/VisuallyHidden.js +3 -15
- package/dist/components-BIYP8wHJ.js +200 -0
- package/dist/exp-color-C5mKAN91.js +74 -0
- package/dist/floating-ui.utils.dom-CoeTbDZx.js +215 -0
- package/dist/index.js +50 -150
- package/dist/index.module-1c7ENvxc.js +7 -0
- package/dist/jsx-runtime-i4KUlhDu.js +743 -0
- package/dist/layout-gap.module-DLD8bcR4.js +95 -0
- package/dist/layout-grid.module-CZfhrKrB.js +101 -0
- package/dist/layout-hide.module-B1P0N4i3.js +53 -0
- package/dist/layout-padding-ugY-yd2q.js +389 -0
- package/dist/layout-relative.module-B5xrFD9j.js +6 -0
- package/dist/render-icon-Ch3b2dE0.js +290 -0
- package/dist/shared-styles/align-self/align-self.js +2 -36
- package/dist/shared-styles/exp-color/exp-color.js +2 -68
- package/dist/shared-styles/layout-gap/layout-gap.js +13 -7
- package/dist/shared-styles/layout-grid/layout-grid.js +28 -28
- package/dist/shared-styles/layout-grid-responsive-columns/layout-grid-responsive-columns.js +29 -43
- package/dist/shared-styles/layout-hide/layout-hide.js +8 -8
- package/dist/shared-styles/layout-padding/layout-padding.js +2 -5
- package/dist/shared-styles/layout-relative/layout-relative.js +14 -8
- package/dist/shared-styles/text-accent/text-accent.js +2 -25
- package/dist/shared-styles/text-centered/text-centered.js +2 -24
- package/dist/shared-styles/text-weight/text-weight.js +2 -15
- package/dist/store-sN_eYeZT.js +1064 -0
- package/dist/storybook-utils/consts.js +6 -8
- package/dist/storybook-utils/index.js +1 -5
- package/dist/text-accent-CfUFx-1K.js +30 -0
- package/dist/text-centered-Dwp2_-Yp.js +30 -0
- package/dist/text-weight-CwoqmM4o.js +21 -0
- package/dist/useBaseUiId-CWAD_PSs.js +13 -0
- package/dist/useBreakpointMatch-D9a3CTNK.js +338 -0
- package/dist/useButton-DHTh3Hm7.js +148 -0
- package/dist/useDialogClose-BzFIyWco.js +22 -0
- package/dist/useId-CJsH-2wV.js +34 -0
- package/dist/useOpenInteractionType-D8vA_ZKI.js +4104 -0
- package/dist/useRenderElement-ZBds6eRN.js +341 -0
- package/dist/utils/Orientation/OrientationProvider.js +54 -23
- package/dist/utils/Orientation/index.js +2 -4
- package/dist/utils/RovingTabIndex/RovingTabIndexProvider.js +70 -44
- package/dist/utils/RovingTabIndex/index.js +2 -4
- package/dist/utils/createRequiredContext.js +23 -13
- package/dist/utils/filterAttributesPassedByRadixUIAtRuntime.js +28 -25
- package/dist/utils/render-icon.js +3 -320
- package/dist/utils/shared-strings.js +24 -32
- package/dist/utils/useBreakpointMatch.d.ts.map +1 -1
- package/dist/utils/useBreakpointMatch.js +2 -183
- package/dist/utils/useControllableState/useControllableState.js +31 -25
- package/dist/utils/useMergeRefs.js +29 -14
- package/dist/utils/useStableCallback/useStableCallback.js +28 -13
- package/package.json +17 -22
- package/dist/AlertBannerProvider-DTx2Xp3V.js +0 -50
- package/dist/BubbleCounter.module-QMwXWFIS.js +0 -16
- package/dist/ChipsPrimitive-DzsaOWgY.js +0 -1244
- package/dist/Dialog.module-Ba1X7b3N.js +0 -29
- package/dist/DialogRootContext-BCXmmJAw.js +0 -15
- package/dist/DropdownMenu.primitives-B3WK71bR.js +0 -5871
- package/dist/IconTile-D1G7MljH.js +0 -172
- package/dist/InputContainer-oHJlLWIi.js +0 -30
- package/dist/Slider-DB4Maswa.js +0 -55
- package/dist/Stars-C_mHop2H.js +0 -67
- package/dist/TokyoUIChevronDown-D_tD1yU8.js +0 -11
- package/dist/floating-ui.utils.dom-3OgjGonN.js +0 -234
- package/dist/index.module-Q9TzIR6B.js +0 -11
- package/dist/layout-gap.module-MKn_un_k.js +0 -97
- package/dist/layout-grid.module-P4B4WVUy.js +0 -103
- package/dist/layout-hide.module-Bpl3Pl-a.js +0 -55
- package/dist/layout-padding-D5I6rRlL.js +0 -373
- package/dist/layout-relative.module-1z75aSwo.js +0 -8
- package/dist/store-BUKWfVf3.js +0 -1155
- package/dist/useBaseUiId-DavsGYu9.js +0 -8
- package/dist/useButton-CFPpP0o5.js +0 -193
- package/dist/useDialogClose-C9x1leGd.js +0 -34
- package/dist/useId-BhIOp2JG.js +0 -28
- package/dist/useOpenInteractionType-Cj41-8Yk.js +0 -2880
- package/dist/useRenderElement-DtYPTE_y.js +0 -350
|
@@ -0,0 +1,4007 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { t as Icon } from "./Icon-CixAeOSd.js";
|
|
3
|
+
import { t as require_jsx_runtime } from "./jsx-runtime-i4KUlhDu.js";
|
|
4
|
+
import { a as useMergedRefs, c as DROPDOWN_COLLISION_AVOIDANCE, f as useRefWithInit, l as EMPTY_ARRAY$1, r as mergeProps, s as DISABLED_TRANSITIONS_STYLE, t as useRenderElement, u as EMPTY_OBJECT } from "./useRenderElement-ZBds6eRN.js";
|
|
5
|
+
import { S as useEventCallback, b as createChangeEventDetails, c as getParentNode, d as isElement, f as isHTMLElement, l as getWindow, p as isLastTraversableNode, x as useIsoLayoutEffect } from "./floating-ui.utils.dom-CoeTbDZx.js";
|
|
6
|
+
import { t as useId$1 } from "./useId-CJsH-2wV.js";
|
|
7
|
+
import { t as useBaseUiId } from "./useBaseUiId-CWAD_PSs.js";
|
|
8
|
+
import { $ as contains, A as inertValue, B as floor, C as FloatingNode, D as useFloatingTree, E as useFloatingParentNodeId, F as useOpenChangeComplete, G as getSide, H as getAlignmentAxis, I as useLatestRef, J as isVirtualClick, K as getSideAxis, L as COMPOSITE_KEYS, M as popupStateMapping, N as pressableTriggerOpenStateMapping, O as Timeout, P as triggerOpenStateMapping, Q as activeElement, R as clamp, S as createAttribute, T as useFloatingNodeId, U as getAxisLength, V as getAlignment, W as getPaddingObject, X as stopEvent, Y as isVirtualPointerEvent, Z as getNodeChildren, _ as useClick, a as useInteractions, at as matchesFocusVisible, b as enqueueFocus, c as useDismiss, ct as ARROW_RIGHT, d as limitShift, dt as isSafari, et as getDocument, f as offset, ft as transitionStatusMapping, g as autoUpdate, h as useFloating$1, i as useRole, it as isTypeableElement, k as useTimeout, l as flip, lt as ARROW_UP, m as size, n as useScrollLock, nt as getTarget, ot as ARROW_DOWN, p as shift, pt as useTransitionStatus, q as isMouseLikePointerType, r as InternalBackdrop, rt as isTypeableCombobox, s as useFloatingRootContext, st as ARROW_LEFT, t as useOpenInteractionType, tt as getFloatingFocusElement, u as hide, ut as isMac, v as FloatingFocusManager, w as FloatingTree, x as ownerDocument, y as FloatingPortal, z as evaluate } from "./useOpenInteractionType-D8vA_ZKI.js";
|
|
9
|
+
import { n as useCompositeRootContext, t as useButton } from "./useButton-DHTh3Hm7.js";
|
|
10
|
+
import { t as useBreakpointMatch } from "./useBreakpointMatch-D9a3CTNK.js";
|
|
11
|
+
import * as React$1 from "react";
|
|
12
|
+
import { createContext, forwardRef, useContext, useId } from "react";
|
|
13
|
+
import { getDatasetProps } from "@preply/ds-web-core";
|
|
14
|
+
import * as ReactDOM$1 from "react-dom";
|
|
15
|
+
import { usePortalElement } from "@preply/ds-web-root";
|
|
16
|
+
import TokyoUICheck from "@preply/ds-media-icons/dist/24/TokyoUICheck.svg";
|
|
17
|
+
import TokyoUIChevronRight from "@preply/ds-media-icons/dist/24/TokyoUIChevronRight.svg";
|
|
18
|
+
import './assets/DropdownMenu.css';//#region ../../node_modules/@base-ui-components/utils/esm/useControlled.js
|
|
19
|
+
function useControlled({ controlled, default: defaultProp, name, state = "value" }) {
|
|
20
|
+
const { current: isControlled } = React$1.useRef(controlled !== void 0);
|
|
21
|
+
const [valueState, setValue] = React$1.useState(defaultProp);
|
|
22
|
+
const value = isControlled ? controlled : valueState;
|
|
23
|
+
if (process.env.NODE_ENV !== "production") {
|
|
24
|
+
React$1.useEffect(() => {
|
|
25
|
+
if (isControlled !== (controlled !== void 0)) console.error([
|
|
26
|
+
`Base UI: A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`,
|
|
27
|
+
"Elements should not switch from uncontrolled to controlled (or vice versa).",
|
|
28
|
+
`Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,
|
|
29
|
+
"The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.",
|
|
30
|
+
"More info: https://fb.me/react-controlled-components"
|
|
31
|
+
].join("\n"));
|
|
32
|
+
}, [
|
|
33
|
+
state,
|
|
34
|
+
name,
|
|
35
|
+
controlled
|
|
36
|
+
]);
|
|
37
|
+
const { current: defaultValue } = React$1.useRef(defaultProp);
|
|
38
|
+
React$1.useEffect(() => {
|
|
39
|
+
if (!isControlled && JSON.stringify(defaultValue) !== JSON.stringify(defaultProp)) console.error([`Base UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`].join("\n"));
|
|
40
|
+
}, [JSON.stringify(defaultProp)]);
|
|
41
|
+
}
|
|
42
|
+
return [value, React$1.useCallback((newValue) => {
|
|
43
|
+
if (!isControlled) setValue(newValue);
|
|
44
|
+
}, [])];
|
|
45
|
+
}
|
|
46
|
+
//#endregion
|
|
47
|
+
//#region ../../node_modules/@base-ui-components/react/esm/composite/list/CompositeListContext.js
|
|
48
|
+
var CompositeListContext = /* @__PURE__ */ React$1.createContext({
|
|
49
|
+
register: () => {},
|
|
50
|
+
unregister: () => {},
|
|
51
|
+
subscribeMapChange: () => {
|
|
52
|
+
return () => {};
|
|
53
|
+
},
|
|
54
|
+
elementsRef: { current: [] },
|
|
55
|
+
nextIndexRef: { current: 0 }
|
|
56
|
+
});
|
|
57
|
+
if (process.env.NODE_ENV !== "production") CompositeListContext.displayName = "CompositeListContext";
|
|
58
|
+
function useCompositeListContext() {
|
|
59
|
+
return React$1.useContext(CompositeListContext);
|
|
60
|
+
}
|
|
61
|
+
//#endregion
|
|
62
|
+
//#region ../../node_modules/@base-ui-components/react/esm/composite/list/CompositeList.js
|
|
63
|
+
var import_jsx_runtime = require_jsx_runtime();
|
|
64
|
+
/**
|
|
65
|
+
* Provides context for a list of items in a composite component.
|
|
66
|
+
* @internal
|
|
67
|
+
*/
|
|
68
|
+
function CompositeList(props) {
|
|
69
|
+
const { children, elementsRef, labelsRef, onMapChange } = props;
|
|
70
|
+
const nextIndexRef = React$1.useRef(0);
|
|
71
|
+
const listeners = useRefWithInit(createListeners).current;
|
|
72
|
+
const map = useRefWithInit(createMap).current;
|
|
73
|
+
const [mapTick, setMapTick] = React$1.useState(EMPTY_OBJECT);
|
|
74
|
+
const lastTickRef = React$1.useRef(mapTick);
|
|
75
|
+
const register = useEventCallback((node, metadata) => {
|
|
76
|
+
map.set(node, metadata !== null && metadata !== void 0 ? metadata : null);
|
|
77
|
+
lastTickRef.current = {};
|
|
78
|
+
setMapTick(lastTickRef.current);
|
|
79
|
+
});
|
|
80
|
+
const unregister = useEventCallback((node) => {
|
|
81
|
+
map.delete(node);
|
|
82
|
+
lastTickRef.current = {};
|
|
83
|
+
setMapTick(lastTickRef.current);
|
|
84
|
+
});
|
|
85
|
+
const sortedMap = React$1.useMemo(() => {
|
|
86
|
+
disableEslintWarning(mapTick);
|
|
87
|
+
const newMap = /* @__PURE__ */ new Map();
|
|
88
|
+
Array.from(map.keys()).sort(sortByDocumentPosition).forEach((node, index) => {
|
|
89
|
+
var _map$get;
|
|
90
|
+
const metadata = (_map$get = map.get(node)) !== null && _map$get !== void 0 ? _map$get : {};
|
|
91
|
+
newMap.set(node, {
|
|
92
|
+
...metadata,
|
|
93
|
+
index
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
return newMap;
|
|
97
|
+
}, [map, mapTick]);
|
|
98
|
+
useIsoLayoutEffect(() => {
|
|
99
|
+
if (typeof MutationObserver !== "function" || sortedMap.size === 0) return;
|
|
100
|
+
const mutationObserver = new MutationObserver((entries) => {
|
|
101
|
+
const diff = /* @__PURE__ */ new Set();
|
|
102
|
+
const updateDiff = (node) => diff.has(node) ? diff.delete(node) : diff.add(node);
|
|
103
|
+
entries.forEach((entry) => {
|
|
104
|
+
entry.removedNodes.forEach(updateDiff);
|
|
105
|
+
entry.addedNodes.forEach(updateDiff);
|
|
106
|
+
});
|
|
107
|
+
if (diff.size === 0) {
|
|
108
|
+
lastTickRef.current = {};
|
|
109
|
+
setMapTick(lastTickRef.current);
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
sortedMap.forEach((_, node) => {
|
|
113
|
+
if (node.parentElement) mutationObserver.observe(node.parentElement, { childList: true });
|
|
114
|
+
});
|
|
115
|
+
return () => {
|
|
116
|
+
mutationObserver.disconnect();
|
|
117
|
+
};
|
|
118
|
+
}, [sortedMap]);
|
|
119
|
+
useIsoLayoutEffect(() => {
|
|
120
|
+
if (lastTickRef.current === mapTick) {
|
|
121
|
+
if (elementsRef.current.length !== sortedMap.size) elementsRef.current.length = sortedMap.size;
|
|
122
|
+
if (labelsRef && labelsRef.current.length !== sortedMap.size) labelsRef.current.length = sortedMap.size;
|
|
123
|
+
nextIndexRef.current = sortedMap.size;
|
|
124
|
+
}
|
|
125
|
+
onMapChange === null || onMapChange === void 0 || onMapChange(sortedMap);
|
|
126
|
+
}, [
|
|
127
|
+
onMapChange,
|
|
128
|
+
sortedMap,
|
|
129
|
+
elementsRef,
|
|
130
|
+
labelsRef,
|
|
131
|
+
mapTick
|
|
132
|
+
]);
|
|
133
|
+
const subscribeMapChange = useEventCallback((fn) => {
|
|
134
|
+
listeners.add(fn);
|
|
135
|
+
return () => {
|
|
136
|
+
listeners.delete(fn);
|
|
137
|
+
};
|
|
138
|
+
});
|
|
139
|
+
useIsoLayoutEffect(() => {
|
|
140
|
+
listeners.forEach((l) => l(sortedMap));
|
|
141
|
+
}, [listeners, sortedMap]);
|
|
142
|
+
const contextValue = React$1.useMemo(() => ({
|
|
143
|
+
register,
|
|
144
|
+
unregister,
|
|
145
|
+
subscribeMapChange,
|
|
146
|
+
elementsRef,
|
|
147
|
+
labelsRef,
|
|
148
|
+
nextIndexRef
|
|
149
|
+
}), [
|
|
150
|
+
register,
|
|
151
|
+
unregister,
|
|
152
|
+
subscribeMapChange,
|
|
153
|
+
elementsRef,
|
|
154
|
+
labelsRef,
|
|
155
|
+
nextIndexRef
|
|
156
|
+
]);
|
|
157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompositeListContext.Provider, {
|
|
158
|
+
value: contextValue,
|
|
159
|
+
children
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
function createMap() {
|
|
163
|
+
return /* @__PURE__ */ new Map();
|
|
164
|
+
}
|
|
165
|
+
function createListeners() {
|
|
166
|
+
return /* @__PURE__ */ new Set();
|
|
167
|
+
}
|
|
168
|
+
function sortByDocumentPosition(a, b) {
|
|
169
|
+
const position = a.compareDocumentPosition(b);
|
|
170
|
+
if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) return -1;
|
|
171
|
+
if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) return 1;
|
|
172
|
+
return 0;
|
|
173
|
+
}
|
|
174
|
+
function disableEslintWarning(_) {}
|
|
175
|
+
//#endregion
|
|
176
|
+
//#region ../../node_modules/@base-ui-components/react/esm/direction-provider/DirectionContext.js
|
|
177
|
+
/**
|
|
178
|
+
* @internal
|
|
179
|
+
*/
|
|
180
|
+
var DirectionContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
181
|
+
if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
|
|
182
|
+
function useDirection(optional = true) {
|
|
183
|
+
var _context$direction;
|
|
184
|
+
const context = React$1.useContext(DirectionContext);
|
|
185
|
+
if (context === void 0 && !optional) throw new Error("Base UI: DirectionContext is missing.");
|
|
186
|
+
return (_context$direction = context === null || context === void 0 ? void 0 : context.direction) !== null && _context$direction !== void 0 ? _context$direction : "ltr";
|
|
187
|
+
}
|
|
188
|
+
//#endregion
|
|
189
|
+
//#region ../../node_modules/@base-ui-components/react/esm/composite/list/useCompositeListItem.js
|
|
190
|
+
var IndexGuessBehavior = /* @__PURE__ */ function(IndexGuessBehavior) {
|
|
191
|
+
IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
|
|
192
|
+
IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
|
|
193
|
+
return IndexGuessBehavior;
|
|
194
|
+
}({});
|
|
195
|
+
/**
|
|
196
|
+
* Used to register a list item and its index (DOM position) in the `CompositeList`.
|
|
197
|
+
*/
|
|
198
|
+
function useCompositeListItem(params = {}) {
|
|
199
|
+
const { label, metadata, textRef, indexGuessBehavior, index: externalIndex } = params;
|
|
200
|
+
const { register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef } = useCompositeListContext();
|
|
201
|
+
const indexRef = React$1.useRef(-1);
|
|
202
|
+
const [index, setIndex] = React$1.useState(externalIndex !== null && externalIndex !== void 0 ? externalIndex : indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? () => {
|
|
203
|
+
if (indexRef.current === -1) {
|
|
204
|
+
const newIndex = nextIndexRef.current;
|
|
205
|
+
nextIndexRef.current += 1;
|
|
206
|
+
indexRef.current = newIndex;
|
|
207
|
+
}
|
|
208
|
+
return indexRef.current;
|
|
209
|
+
} : -1);
|
|
210
|
+
const componentRef = React$1.useRef(null);
|
|
211
|
+
const ref = React$1.useCallback((node) => {
|
|
212
|
+
componentRef.current = node;
|
|
213
|
+
if (index !== -1 && node !== null) {
|
|
214
|
+
elementsRef.current[index] = node;
|
|
215
|
+
if (labelsRef) {
|
|
216
|
+
var _textRef$current$text, _textRef$current;
|
|
217
|
+
const isLabelDefined = label !== void 0;
|
|
218
|
+
labelsRef.current[index] = isLabelDefined ? label : (_textRef$current$text = textRef === null || textRef === void 0 || (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.textContent) !== null && _textRef$current$text !== void 0 ? _textRef$current$text : node.textContent;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}, [
|
|
222
|
+
index,
|
|
223
|
+
elementsRef,
|
|
224
|
+
labelsRef,
|
|
225
|
+
label,
|
|
226
|
+
textRef
|
|
227
|
+
]);
|
|
228
|
+
useIsoLayoutEffect(() => {
|
|
229
|
+
if (externalIndex != null) return;
|
|
230
|
+
const node = componentRef.current;
|
|
231
|
+
if (node) {
|
|
232
|
+
register(node, metadata);
|
|
233
|
+
return () => {
|
|
234
|
+
unregister(node);
|
|
235
|
+
};
|
|
236
|
+
}
|
|
237
|
+
}, [
|
|
238
|
+
externalIndex,
|
|
239
|
+
register,
|
|
240
|
+
unregister,
|
|
241
|
+
metadata
|
|
242
|
+
]);
|
|
243
|
+
useIsoLayoutEffect(() => {
|
|
244
|
+
if (externalIndex != null) return;
|
|
245
|
+
return subscribeMapChange((map) => {
|
|
246
|
+
var _map$get;
|
|
247
|
+
const i = componentRef.current ? (_map$get = map.get(componentRef.current)) === null || _map$get === void 0 ? void 0 : _map$get.index : null;
|
|
248
|
+
if (i != null) setIndex(i);
|
|
249
|
+
});
|
|
250
|
+
}, [
|
|
251
|
+
externalIndex,
|
|
252
|
+
subscribeMapChange,
|
|
253
|
+
setIndex
|
|
254
|
+
]);
|
|
255
|
+
return React$1.useMemo(() => ({
|
|
256
|
+
ref,
|
|
257
|
+
index
|
|
258
|
+
}), [index, ref]);
|
|
259
|
+
}
|
|
260
|
+
//#endregion
|
|
261
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/utils/composite.js
|
|
262
|
+
function isDifferentGridRow(index, cols, prevRow) {
|
|
263
|
+
return Math.floor(index / cols) !== prevRow;
|
|
264
|
+
}
|
|
265
|
+
function isIndexOutOfListBounds(listRef, index) {
|
|
266
|
+
return index < 0 || index >= listRef.current.length;
|
|
267
|
+
}
|
|
268
|
+
function getMinListIndex(listRef, disabledIndices) {
|
|
269
|
+
return findNonDisabledListIndex(listRef, { disabledIndices });
|
|
270
|
+
}
|
|
271
|
+
function getMaxListIndex(listRef, disabledIndices) {
|
|
272
|
+
return findNonDisabledListIndex(listRef, {
|
|
273
|
+
decrement: true,
|
|
274
|
+
startingIndex: listRef.current.length,
|
|
275
|
+
disabledIndices
|
|
276
|
+
});
|
|
277
|
+
}
|
|
278
|
+
function findNonDisabledListIndex(listRef, { startingIndex = -1, decrement = false, disabledIndices, amount = 1 } = {}) {
|
|
279
|
+
let index = startingIndex;
|
|
280
|
+
do
|
|
281
|
+
index += decrement ? -amount : amount;
|
|
282
|
+
while (index >= 0 && index <= listRef.current.length - 1 && isListIndexDisabled(listRef, index, disabledIndices));
|
|
283
|
+
return index;
|
|
284
|
+
}
|
|
285
|
+
function getGridNavigatedIndex(listRef, { event, orientation, loop, rtl, cols, disabledIndices, minIndex, maxIndex, prevIndex, stopEvent: stop = false }) {
|
|
286
|
+
let nextIndex = prevIndex;
|
|
287
|
+
const rows = [];
|
|
288
|
+
const rowIndexMap = {};
|
|
289
|
+
let hasRoleRow = false;
|
|
290
|
+
{
|
|
291
|
+
let currentRowEl = null;
|
|
292
|
+
let currentRowIndex = -1;
|
|
293
|
+
listRef.current.forEach((el, idx) => {
|
|
294
|
+
if (el == null) return;
|
|
295
|
+
const rowEl = el.closest("[role=\"row\"]");
|
|
296
|
+
if (rowEl) hasRoleRow = true;
|
|
297
|
+
if (rowEl !== currentRowEl || currentRowIndex === -1) {
|
|
298
|
+
currentRowEl = rowEl;
|
|
299
|
+
currentRowIndex += 1;
|
|
300
|
+
rows[currentRowIndex] = [];
|
|
301
|
+
}
|
|
302
|
+
rows[currentRowIndex].push(idx);
|
|
303
|
+
rowIndexMap[idx] = currentRowIndex;
|
|
304
|
+
});
|
|
305
|
+
}
|
|
306
|
+
const hasDomRows = hasRoleRow && rows.length > 0 && rows.some((row) => row.length !== cols);
|
|
307
|
+
function navigateVertically(direction) {
|
|
308
|
+
if (!hasDomRows || prevIndex === -1) return;
|
|
309
|
+
const currentRow = rowIndexMap[prevIndex];
|
|
310
|
+
if (currentRow == null) return;
|
|
311
|
+
const colInRow = rows[currentRow].indexOf(prevIndex);
|
|
312
|
+
let nextRow = direction === "up" ? currentRow - 1 : currentRow + 1;
|
|
313
|
+
if (loop) {
|
|
314
|
+
if (nextRow < 0) nextRow = rows.length - 1;
|
|
315
|
+
else if (nextRow >= rows.length) nextRow = 0;
|
|
316
|
+
}
|
|
317
|
+
const visited = /* @__PURE__ */ new Set();
|
|
318
|
+
while (nextRow >= 0 && nextRow < rows.length && !visited.has(nextRow)) {
|
|
319
|
+
visited.add(nextRow);
|
|
320
|
+
const targetRow = rows[nextRow];
|
|
321
|
+
if (targetRow.length === 0) {
|
|
322
|
+
nextRow = direction === "up" ? nextRow - 1 : nextRow + 1;
|
|
323
|
+
continue;
|
|
324
|
+
}
|
|
325
|
+
const clampedCol = Math.min(colInRow, targetRow.length - 1);
|
|
326
|
+
for (let col = clampedCol; col >= 0; col -= 1) {
|
|
327
|
+
const candidate = targetRow[col];
|
|
328
|
+
if (!isListIndexDisabled(listRef, candidate, disabledIndices)) return candidate;
|
|
329
|
+
}
|
|
330
|
+
nextRow = direction === "up" ? nextRow - 1 : nextRow + 1;
|
|
331
|
+
if (loop) {
|
|
332
|
+
if (nextRow < 0) nextRow = rows.length - 1;
|
|
333
|
+
else if (nextRow >= rows.length) nextRow = 0;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
if (event.key === "ArrowUp") {
|
|
338
|
+
const domBasedCandidate = navigateVertically("up");
|
|
339
|
+
if (domBasedCandidate !== void 0) {
|
|
340
|
+
if (stop) stopEvent(event);
|
|
341
|
+
nextIndex = domBasedCandidate;
|
|
342
|
+
} else {
|
|
343
|
+
if (stop) stopEvent(event);
|
|
344
|
+
if (prevIndex === -1) nextIndex = maxIndex;
|
|
345
|
+
else {
|
|
346
|
+
nextIndex = findNonDisabledListIndex(listRef, {
|
|
347
|
+
startingIndex: nextIndex,
|
|
348
|
+
amount: cols,
|
|
349
|
+
decrement: true,
|
|
350
|
+
disabledIndices
|
|
351
|
+
});
|
|
352
|
+
if (loop && (prevIndex - cols < minIndex || nextIndex < 0)) {
|
|
353
|
+
const col = prevIndex % cols;
|
|
354
|
+
const maxCol = maxIndex % cols;
|
|
355
|
+
const offset = maxIndex - (maxCol - col);
|
|
356
|
+
if (maxCol === col) nextIndex = maxIndex;
|
|
357
|
+
else nextIndex = maxCol > col ? offset : offset - cols;
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
if (isIndexOutOfListBounds(listRef, nextIndex)) nextIndex = prevIndex;
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
if (event.key === "ArrowDown") {
|
|
364
|
+
const domBasedCandidate = navigateVertically("down");
|
|
365
|
+
if (domBasedCandidate !== void 0) {
|
|
366
|
+
if (stop) stopEvent(event);
|
|
367
|
+
nextIndex = domBasedCandidate;
|
|
368
|
+
} else {
|
|
369
|
+
if (stop) stopEvent(event);
|
|
370
|
+
if (prevIndex === -1) nextIndex = minIndex;
|
|
371
|
+
else {
|
|
372
|
+
nextIndex = findNonDisabledListIndex(listRef, {
|
|
373
|
+
startingIndex: prevIndex,
|
|
374
|
+
amount: cols,
|
|
375
|
+
disabledIndices
|
|
376
|
+
});
|
|
377
|
+
if (loop && prevIndex + cols > maxIndex) nextIndex = findNonDisabledListIndex(listRef, {
|
|
378
|
+
startingIndex: prevIndex % cols - cols,
|
|
379
|
+
amount: cols,
|
|
380
|
+
disabledIndices
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
if (isIndexOutOfListBounds(listRef, nextIndex)) nextIndex = prevIndex;
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
if (orientation === "both") {
|
|
387
|
+
const prevRow = floor(prevIndex / cols);
|
|
388
|
+
if (event.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
|
|
389
|
+
if (stop) stopEvent(event);
|
|
390
|
+
if (prevIndex % cols !== cols - 1) {
|
|
391
|
+
nextIndex = findNonDisabledListIndex(listRef, {
|
|
392
|
+
startingIndex: prevIndex,
|
|
393
|
+
disabledIndices
|
|
394
|
+
});
|
|
395
|
+
if (loop && isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = findNonDisabledListIndex(listRef, {
|
|
396
|
+
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
397
|
+
disabledIndices
|
|
398
|
+
});
|
|
399
|
+
} else if (loop) nextIndex = findNonDisabledListIndex(listRef, {
|
|
400
|
+
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
401
|
+
disabledIndices
|
|
402
|
+
});
|
|
403
|
+
if (isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = prevIndex;
|
|
404
|
+
}
|
|
405
|
+
if (event.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
|
|
406
|
+
if (stop) stopEvent(event);
|
|
407
|
+
if (prevIndex % cols !== 0) {
|
|
408
|
+
nextIndex = findNonDisabledListIndex(listRef, {
|
|
409
|
+
startingIndex: prevIndex,
|
|
410
|
+
decrement: true,
|
|
411
|
+
disabledIndices
|
|
412
|
+
});
|
|
413
|
+
if (loop && isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = findNonDisabledListIndex(listRef, {
|
|
414
|
+
startingIndex: prevIndex + (cols - prevIndex % cols),
|
|
415
|
+
decrement: true,
|
|
416
|
+
disabledIndices
|
|
417
|
+
});
|
|
418
|
+
} else if (loop) nextIndex = findNonDisabledListIndex(listRef, {
|
|
419
|
+
startingIndex: prevIndex + (cols - prevIndex % cols),
|
|
420
|
+
decrement: true,
|
|
421
|
+
disabledIndices
|
|
422
|
+
});
|
|
423
|
+
if (isDifferentGridRow(nextIndex, cols, prevRow)) nextIndex = prevIndex;
|
|
424
|
+
}
|
|
425
|
+
const lastRow = floor(maxIndex / cols) === prevRow;
|
|
426
|
+
if (isIndexOutOfListBounds(listRef, nextIndex)) if (loop && lastRow) nextIndex = event.key === (rtl ? "ArrowRight" : "ArrowLeft") ? maxIndex : findNonDisabledListIndex(listRef, {
|
|
427
|
+
startingIndex: prevIndex - prevIndex % cols - 1,
|
|
428
|
+
disabledIndices
|
|
429
|
+
});
|
|
430
|
+
else nextIndex = prevIndex;
|
|
431
|
+
}
|
|
432
|
+
return nextIndex;
|
|
433
|
+
}
|
|
434
|
+
/** For each cell index, gets the item index that occupies that cell */
|
|
435
|
+
function createGridCellMap(sizes, cols, dense) {
|
|
436
|
+
const cellMap = [];
|
|
437
|
+
let startIndex = 0;
|
|
438
|
+
sizes.forEach(({ width, height }, index) => {
|
|
439
|
+
if (width > cols) {
|
|
440
|
+
if (process.env.NODE_ENV !== "production") throw new Error(`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`);
|
|
441
|
+
}
|
|
442
|
+
let itemPlaced = false;
|
|
443
|
+
if (dense) startIndex = 0;
|
|
444
|
+
while (!itemPlaced) {
|
|
445
|
+
const targetCells = [];
|
|
446
|
+
for (let i = 0; i < width; i += 1) for (let j = 0; j < height; j += 1) targetCells.push(startIndex + i + j * cols);
|
|
447
|
+
if (startIndex % cols + width <= cols && targetCells.every((cell) => cellMap[cell] == null)) {
|
|
448
|
+
targetCells.forEach((cell) => {
|
|
449
|
+
cellMap[cell] = index;
|
|
450
|
+
});
|
|
451
|
+
itemPlaced = true;
|
|
452
|
+
} else startIndex += 1;
|
|
453
|
+
}
|
|
454
|
+
});
|
|
455
|
+
return [...cellMap];
|
|
456
|
+
}
|
|
457
|
+
/** Gets cell index of an item's corner or -1 when index is -1. */
|
|
458
|
+
function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
|
|
459
|
+
if (index === -1) return -1;
|
|
460
|
+
const firstCellIndex = cellMap.indexOf(index);
|
|
461
|
+
const sizeItem = sizes[index];
|
|
462
|
+
switch (corner) {
|
|
463
|
+
case "tl": return firstCellIndex;
|
|
464
|
+
case "tr":
|
|
465
|
+
if (!sizeItem) return firstCellIndex;
|
|
466
|
+
return firstCellIndex + sizeItem.width - 1;
|
|
467
|
+
case "bl":
|
|
468
|
+
if (!sizeItem) return firstCellIndex;
|
|
469
|
+
return firstCellIndex + (sizeItem.height - 1) * cols;
|
|
470
|
+
case "br": return cellMap.lastIndexOf(index);
|
|
471
|
+
default: return -1;
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
/** Gets all cell indices that correspond to the specified indices */
|
|
475
|
+
function getGridCellIndices(indices, cellMap) {
|
|
476
|
+
return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
|
|
477
|
+
}
|
|
478
|
+
function isListIndexDisabled(listRef, index, disabledIndices) {
|
|
479
|
+
if (typeof disabledIndices === "function") return disabledIndices(index);
|
|
480
|
+
if (disabledIndices) return disabledIndices.includes(index);
|
|
481
|
+
const element = listRef.current[index];
|
|
482
|
+
return element == null || element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
|
|
483
|
+
}
|
|
484
|
+
//#endregion
|
|
485
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/hooks/useHover.js
|
|
486
|
+
var safePolygonIdentifier = createAttribute("safe-polygon");
|
|
487
|
+
function getDelay(value, prop, pointerType) {
|
|
488
|
+
if (pointerType && !isMouseLikePointerType(pointerType)) return 0;
|
|
489
|
+
if (typeof value === "number") return value;
|
|
490
|
+
if (typeof value === "function") {
|
|
491
|
+
const result = value();
|
|
492
|
+
if (typeof result === "number") return result;
|
|
493
|
+
return result === null || result === void 0 ? void 0 : result[prop];
|
|
494
|
+
}
|
|
495
|
+
return value === null || value === void 0 ? void 0 : value[prop];
|
|
496
|
+
}
|
|
497
|
+
function getRestMs(value) {
|
|
498
|
+
if (typeof value === "function") return value();
|
|
499
|
+
return value;
|
|
500
|
+
}
|
|
501
|
+
/**
|
|
502
|
+
* Opens the floating element while hovering over the reference element, like
|
|
503
|
+
* CSS `:hover`.
|
|
504
|
+
* @see https://floating-ui.com/docs/useHover
|
|
505
|
+
*/
|
|
506
|
+
function useHover(context, props = {}) {
|
|
507
|
+
const { open, onOpenChange, dataRef, events, elements } = context;
|
|
508
|
+
const { enabled = true, delay = 0, handleClose = null, mouseOnly = false, restMs = 0, move = true } = props;
|
|
509
|
+
const tree = useFloatingTree();
|
|
510
|
+
const parentId = useFloatingParentNodeId();
|
|
511
|
+
const handleCloseRef = useLatestRef(handleClose);
|
|
512
|
+
const delayRef = useLatestRef(delay);
|
|
513
|
+
const openRef = useLatestRef(open);
|
|
514
|
+
const restMsRef = useLatestRef(restMs);
|
|
515
|
+
const pointerTypeRef = React$1.useRef(void 0);
|
|
516
|
+
const timeout = useTimeout();
|
|
517
|
+
const handlerRef = React$1.useRef(void 0);
|
|
518
|
+
const restTimeout = useTimeout();
|
|
519
|
+
const blockMouseMoveRef = React$1.useRef(true);
|
|
520
|
+
const performedPointerEventsMutationRef = React$1.useRef(false);
|
|
521
|
+
const unbindMouseMoveRef = React$1.useRef(() => {});
|
|
522
|
+
const restTimeoutPendingRef = React$1.useRef(false);
|
|
523
|
+
const isHoverOpen = useEventCallback(() => {
|
|
524
|
+
var _dataRef$current$open;
|
|
525
|
+
const type = (_dataRef$current$open = dataRef.current.openEvent) === null || _dataRef$current$open === void 0 ? void 0 : _dataRef$current$open.type;
|
|
526
|
+
return (type === null || type === void 0 ? void 0 : type.includes("mouse")) && type !== "mousedown";
|
|
527
|
+
});
|
|
528
|
+
React$1.useEffect(() => {
|
|
529
|
+
if (!enabled) return;
|
|
530
|
+
function onOpenChangeLocal(details) {
|
|
531
|
+
if (!details.open) {
|
|
532
|
+
timeout.clear();
|
|
533
|
+
restTimeout.clear();
|
|
534
|
+
blockMouseMoveRef.current = true;
|
|
535
|
+
restTimeoutPendingRef.current = false;
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
events.on("openchange", onOpenChangeLocal);
|
|
539
|
+
return () => {
|
|
540
|
+
events.off("openchange", onOpenChangeLocal);
|
|
541
|
+
};
|
|
542
|
+
}, [
|
|
543
|
+
enabled,
|
|
544
|
+
events,
|
|
545
|
+
timeout,
|
|
546
|
+
restTimeout
|
|
547
|
+
]);
|
|
548
|
+
React$1.useEffect(() => {
|
|
549
|
+
if (!enabled) return;
|
|
550
|
+
if (!handleCloseRef.current) return;
|
|
551
|
+
if (!open) return;
|
|
552
|
+
function onLeave(event) {
|
|
553
|
+
if (isHoverOpen()) onOpenChange(false, createChangeEventDetails("trigger-hover", event));
|
|
554
|
+
}
|
|
555
|
+
const html = getDocument(elements.floating).documentElement;
|
|
556
|
+
html.addEventListener("mouseleave", onLeave);
|
|
557
|
+
return () => {
|
|
558
|
+
html.removeEventListener("mouseleave", onLeave);
|
|
559
|
+
};
|
|
560
|
+
}, [
|
|
561
|
+
elements.floating,
|
|
562
|
+
open,
|
|
563
|
+
onOpenChange,
|
|
564
|
+
enabled,
|
|
565
|
+
handleCloseRef,
|
|
566
|
+
isHoverOpen
|
|
567
|
+
]);
|
|
568
|
+
const closeWithDelay = React$1.useCallback((event, runElseBranch = true) => {
|
|
569
|
+
const closeDelay = getDelay(delayRef.current, "close", pointerTypeRef.current);
|
|
570
|
+
if (closeDelay && !handlerRef.current) timeout.start(closeDelay, () => onOpenChange(false, createChangeEventDetails("trigger-hover", event)));
|
|
571
|
+
else if (runElseBranch) {
|
|
572
|
+
timeout.clear();
|
|
573
|
+
onOpenChange(false, createChangeEventDetails("trigger-hover", event));
|
|
574
|
+
}
|
|
575
|
+
}, [
|
|
576
|
+
delayRef,
|
|
577
|
+
onOpenChange,
|
|
578
|
+
timeout
|
|
579
|
+
]);
|
|
580
|
+
const cleanupMouseMoveHandler = useEventCallback(() => {
|
|
581
|
+
unbindMouseMoveRef.current();
|
|
582
|
+
handlerRef.current = void 0;
|
|
583
|
+
});
|
|
584
|
+
const clearPointerEvents = useEventCallback(() => {
|
|
585
|
+
if (performedPointerEventsMutationRef.current) {
|
|
586
|
+
const body = getDocument(elements.floating).body;
|
|
587
|
+
body.style.pointerEvents = "";
|
|
588
|
+
body.removeAttribute(safePolygonIdentifier);
|
|
589
|
+
performedPointerEventsMutationRef.current = false;
|
|
590
|
+
}
|
|
591
|
+
});
|
|
592
|
+
const isClickLikeOpenEvent = useEventCallback(() => {
|
|
593
|
+
return dataRef.current.openEvent ? ["click", "mousedown"].includes(dataRef.current.openEvent.type) : false;
|
|
594
|
+
});
|
|
595
|
+
React$1.useEffect(() => {
|
|
596
|
+
if (!enabled) return;
|
|
597
|
+
function onReferenceMouseEnter(event) {
|
|
598
|
+
timeout.clear();
|
|
599
|
+
blockMouseMoveRef.current = false;
|
|
600
|
+
if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current) || getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, "open")) return;
|
|
601
|
+
const openDelay = getDelay(delayRef.current, "open", pointerTypeRef.current);
|
|
602
|
+
if (openDelay) timeout.start(openDelay, () => {
|
|
603
|
+
if (!openRef.current) onOpenChange(true, createChangeEventDetails("trigger-hover", event));
|
|
604
|
+
});
|
|
605
|
+
else if (!open) onOpenChange(true, createChangeEventDetails("trigger-hover", event));
|
|
606
|
+
}
|
|
607
|
+
function onReferenceMouseLeave(event) {
|
|
608
|
+
if (isClickLikeOpenEvent()) {
|
|
609
|
+
clearPointerEvents();
|
|
610
|
+
return;
|
|
611
|
+
}
|
|
612
|
+
unbindMouseMoveRef.current();
|
|
613
|
+
const doc = getDocument(elements.floating);
|
|
614
|
+
restTimeout.clear();
|
|
615
|
+
restTimeoutPendingRef.current = false;
|
|
616
|
+
if (handleCloseRef.current && dataRef.current.floatingContext) {
|
|
617
|
+
if (!open) timeout.clear();
|
|
618
|
+
handlerRef.current = handleCloseRef.current({
|
|
619
|
+
...dataRef.current.floatingContext,
|
|
620
|
+
tree,
|
|
621
|
+
x: event.clientX,
|
|
622
|
+
y: event.clientY,
|
|
623
|
+
onClose() {
|
|
624
|
+
clearPointerEvents();
|
|
625
|
+
cleanupMouseMoveHandler();
|
|
626
|
+
if (!isClickLikeOpenEvent()) closeWithDelay(event, true);
|
|
627
|
+
}
|
|
628
|
+
});
|
|
629
|
+
const handler = handlerRef.current;
|
|
630
|
+
doc.addEventListener("mousemove", handler);
|
|
631
|
+
unbindMouseMoveRef.current = () => {
|
|
632
|
+
doc.removeEventListener("mousemove", handler);
|
|
633
|
+
};
|
|
634
|
+
return;
|
|
635
|
+
}
|
|
636
|
+
if (pointerTypeRef.current === "touch" ? !contains(elements.floating, event.relatedTarget) : true) closeWithDelay(event);
|
|
637
|
+
}
|
|
638
|
+
function onScrollMouseLeave(event) {
|
|
639
|
+
var _handleCloseRef$curre;
|
|
640
|
+
if (isClickLikeOpenEvent()) return;
|
|
641
|
+
if (!dataRef.current.floatingContext) return;
|
|
642
|
+
(_handleCloseRef$curre = handleCloseRef.current) === null || _handleCloseRef$curre === void 0 || _handleCloseRef$curre.call(handleCloseRef, {
|
|
643
|
+
...dataRef.current.floatingContext,
|
|
644
|
+
tree,
|
|
645
|
+
x: event.clientX,
|
|
646
|
+
y: event.clientY,
|
|
647
|
+
onClose() {
|
|
648
|
+
clearPointerEvents();
|
|
649
|
+
cleanupMouseMoveHandler();
|
|
650
|
+
if (!isClickLikeOpenEvent()) closeWithDelay(event);
|
|
651
|
+
}
|
|
652
|
+
})(event);
|
|
653
|
+
}
|
|
654
|
+
function onFloatingMouseEnter() {
|
|
655
|
+
timeout.clear();
|
|
656
|
+
}
|
|
657
|
+
function onFloatingMouseLeave(event) {
|
|
658
|
+
if (!isClickLikeOpenEvent()) closeWithDelay(event, false);
|
|
659
|
+
}
|
|
660
|
+
if (isElement(elements.domReference)) {
|
|
661
|
+
const reference = elements.domReference;
|
|
662
|
+
const floating = elements.floating;
|
|
663
|
+
if (open) reference.addEventListener("mouseleave", onScrollMouseLeave);
|
|
664
|
+
if (move) reference.addEventListener("mousemove", onReferenceMouseEnter, { once: true });
|
|
665
|
+
reference.addEventListener("mouseenter", onReferenceMouseEnter);
|
|
666
|
+
reference.addEventListener("mouseleave", onReferenceMouseLeave);
|
|
667
|
+
if (floating) {
|
|
668
|
+
floating.addEventListener("mouseleave", onScrollMouseLeave);
|
|
669
|
+
floating.addEventListener("mouseenter", onFloatingMouseEnter);
|
|
670
|
+
floating.addEventListener("mouseleave", onFloatingMouseLeave);
|
|
671
|
+
}
|
|
672
|
+
return () => {
|
|
673
|
+
if (open) reference.removeEventListener("mouseleave", onScrollMouseLeave);
|
|
674
|
+
if (move) reference.removeEventListener("mousemove", onReferenceMouseEnter);
|
|
675
|
+
reference.removeEventListener("mouseenter", onReferenceMouseEnter);
|
|
676
|
+
reference.removeEventListener("mouseleave", onReferenceMouseLeave);
|
|
677
|
+
if (floating) {
|
|
678
|
+
floating.removeEventListener("mouseleave", onScrollMouseLeave);
|
|
679
|
+
floating.removeEventListener("mouseenter", onFloatingMouseEnter);
|
|
680
|
+
floating.removeEventListener("mouseleave", onFloatingMouseLeave);
|
|
681
|
+
}
|
|
682
|
+
};
|
|
683
|
+
}
|
|
684
|
+
}, [
|
|
685
|
+
elements,
|
|
686
|
+
enabled,
|
|
687
|
+
context,
|
|
688
|
+
mouseOnly,
|
|
689
|
+
move,
|
|
690
|
+
closeWithDelay,
|
|
691
|
+
cleanupMouseMoveHandler,
|
|
692
|
+
clearPointerEvents,
|
|
693
|
+
onOpenChange,
|
|
694
|
+
open,
|
|
695
|
+
openRef,
|
|
696
|
+
tree,
|
|
697
|
+
delayRef,
|
|
698
|
+
handleCloseRef,
|
|
699
|
+
dataRef,
|
|
700
|
+
isClickLikeOpenEvent,
|
|
701
|
+
restMsRef,
|
|
702
|
+
timeout,
|
|
703
|
+
restTimeout
|
|
704
|
+
]);
|
|
705
|
+
useIsoLayoutEffect(() => {
|
|
706
|
+
var _handleCloseRef$curre2;
|
|
707
|
+
if (!enabled) return;
|
|
708
|
+
if (open && ((_handleCloseRef$curre2 = handleCloseRef.current) === null || _handleCloseRef$curre2 === void 0 || (_handleCloseRef$curre2 = _handleCloseRef$curre2.__options) === null || _handleCloseRef$curre2 === void 0 ? void 0 : _handleCloseRef$curre2.blockPointerEvents) && isHoverOpen()) {
|
|
709
|
+
performedPointerEventsMutationRef.current = true;
|
|
710
|
+
const floatingEl = elements.floating;
|
|
711
|
+
if (isElement(elements.domReference) && floatingEl) {
|
|
712
|
+
var _tree$nodesRef$curren;
|
|
713
|
+
const body = getDocument(elements.floating).body;
|
|
714
|
+
body.setAttribute(safePolygonIdentifier, "");
|
|
715
|
+
const ref = elements.domReference;
|
|
716
|
+
const parentFloating = tree === null || tree === void 0 || (_tree$nodesRef$curren = tree.nodesRef.current.find((node) => node.id === parentId)) === null || _tree$nodesRef$curren === void 0 || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) === null || _tree$nodesRef$curren === void 0 ? void 0 : _tree$nodesRef$curren.elements.floating;
|
|
717
|
+
if (parentFloating) parentFloating.style.pointerEvents = "";
|
|
718
|
+
body.style.pointerEvents = "none";
|
|
719
|
+
ref.style.pointerEvents = "auto";
|
|
720
|
+
floatingEl.style.pointerEvents = "auto";
|
|
721
|
+
return () => {
|
|
722
|
+
body.style.pointerEvents = "";
|
|
723
|
+
ref.style.pointerEvents = "";
|
|
724
|
+
floatingEl.style.pointerEvents = "";
|
|
725
|
+
};
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
}, [
|
|
729
|
+
enabled,
|
|
730
|
+
open,
|
|
731
|
+
parentId,
|
|
732
|
+
elements,
|
|
733
|
+
tree,
|
|
734
|
+
handleCloseRef,
|
|
735
|
+
isHoverOpen
|
|
736
|
+
]);
|
|
737
|
+
useIsoLayoutEffect(() => {
|
|
738
|
+
if (!open) {
|
|
739
|
+
pointerTypeRef.current = void 0;
|
|
740
|
+
restTimeoutPendingRef.current = false;
|
|
741
|
+
cleanupMouseMoveHandler();
|
|
742
|
+
clearPointerEvents();
|
|
743
|
+
}
|
|
744
|
+
}, [
|
|
745
|
+
open,
|
|
746
|
+
cleanupMouseMoveHandler,
|
|
747
|
+
clearPointerEvents
|
|
748
|
+
]);
|
|
749
|
+
React$1.useEffect(() => {
|
|
750
|
+
return () => {
|
|
751
|
+
cleanupMouseMoveHandler();
|
|
752
|
+
timeout.clear();
|
|
753
|
+
restTimeout.clear();
|
|
754
|
+
};
|
|
755
|
+
}, [
|
|
756
|
+
enabled,
|
|
757
|
+
elements.domReference,
|
|
758
|
+
cleanupMouseMoveHandler,
|
|
759
|
+
timeout,
|
|
760
|
+
restTimeout
|
|
761
|
+
]);
|
|
762
|
+
React$1.useEffect(() => {
|
|
763
|
+
return clearPointerEvents;
|
|
764
|
+
}, [clearPointerEvents]);
|
|
765
|
+
const reference = React$1.useMemo(() => {
|
|
766
|
+
function setPointerRef(event) {
|
|
767
|
+
pointerTypeRef.current = event.pointerType;
|
|
768
|
+
}
|
|
769
|
+
return {
|
|
770
|
+
onPointerDown: setPointerRef,
|
|
771
|
+
onPointerEnter: setPointerRef,
|
|
772
|
+
onMouseMove(event) {
|
|
773
|
+
const { nativeEvent } = event;
|
|
774
|
+
function handleMouseMove() {
|
|
775
|
+
if (!blockMouseMoveRef.current && !openRef.current) onOpenChange(true, createChangeEventDetails("trigger-hover", nativeEvent));
|
|
776
|
+
}
|
|
777
|
+
if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) return;
|
|
778
|
+
if (open || getRestMs(restMsRef.current) === 0) return;
|
|
779
|
+
if (restTimeoutPendingRef.current && event.movementX ** 2 + event.movementY ** 2 < 2) return;
|
|
780
|
+
restTimeout.clear();
|
|
781
|
+
if (pointerTypeRef.current === "touch") handleMouseMove();
|
|
782
|
+
else {
|
|
783
|
+
restTimeoutPendingRef.current = true;
|
|
784
|
+
restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
};
|
|
788
|
+
}, [
|
|
789
|
+
mouseOnly,
|
|
790
|
+
onOpenChange,
|
|
791
|
+
open,
|
|
792
|
+
openRef,
|
|
793
|
+
restMsRef,
|
|
794
|
+
restTimeout
|
|
795
|
+
]);
|
|
796
|
+
return React$1.useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
|
|
797
|
+
}
|
|
798
|
+
//#endregion
|
|
799
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/hooks/useFloating.js
|
|
800
|
+
/**
|
|
801
|
+
* Provides data to position a floating element and context to add interactions.
|
|
802
|
+
* @see https://floating-ui.com/docs/useFloating
|
|
803
|
+
*/
|
|
804
|
+
function useFloating(options = {}) {
|
|
805
|
+
const { nodeId } = options;
|
|
806
|
+
const internalRootContext = useFloatingRootContext({
|
|
807
|
+
...options,
|
|
808
|
+
elements: {
|
|
809
|
+
reference: null,
|
|
810
|
+
floating: null,
|
|
811
|
+
...options.elements
|
|
812
|
+
}
|
|
813
|
+
});
|
|
814
|
+
const rootContext = options.rootContext || internalRootContext;
|
|
815
|
+
const computedElements = rootContext.elements;
|
|
816
|
+
const [domReferenceState, setDomReference] = React$1.useState(null);
|
|
817
|
+
const [positionReference, setPositionReferenceRaw] = React$1.useState(null);
|
|
818
|
+
const domReference = (computedElements === null || computedElements === void 0 ? void 0 : computedElements.domReference) || domReferenceState;
|
|
819
|
+
const domReferenceRef = React$1.useRef(null);
|
|
820
|
+
const tree = useFloatingTree();
|
|
821
|
+
useIsoLayoutEffect(() => {
|
|
822
|
+
if (domReference) domReferenceRef.current = domReference;
|
|
823
|
+
}, [domReference]);
|
|
824
|
+
const position = useFloating$1({
|
|
825
|
+
...options,
|
|
826
|
+
elements: {
|
|
827
|
+
...computedElements,
|
|
828
|
+
...positionReference && { reference: positionReference }
|
|
829
|
+
}
|
|
830
|
+
});
|
|
831
|
+
const setPositionReference = React$1.useCallback((node) => {
|
|
832
|
+
const computedPositionReference = isElement(node) ? {
|
|
833
|
+
getBoundingClientRect: () => node.getBoundingClientRect(),
|
|
834
|
+
getClientRects: () => node.getClientRects(),
|
|
835
|
+
contextElement: node
|
|
836
|
+
} : node;
|
|
837
|
+
setPositionReferenceRaw(computedPositionReference);
|
|
838
|
+
position.refs.setReference(computedPositionReference);
|
|
839
|
+
}, [position.refs]);
|
|
840
|
+
const setReference = React$1.useCallback((node) => {
|
|
841
|
+
if (isElement(node) || node === null) {
|
|
842
|
+
domReferenceRef.current = node;
|
|
843
|
+
setDomReference(node);
|
|
844
|
+
}
|
|
845
|
+
if (isElement(position.refs.reference.current) || position.refs.reference.current === null || node !== null && !isElement(node)) position.refs.setReference(node);
|
|
846
|
+
}, [position.refs]);
|
|
847
|
+
const refs = React$1.useMemo(() => ({
|
|
848
|
+
...position.refs,
|
|
849
|
+
setReference,
|
|
850
|
+
setPositionReference,
|
|
851
|
+
domReference: domReferenceRef
|
|
852
|
+
}), [
|
|
853
|
+
position.refs,
|
|
854
|
+
setReference,
|
|
855
|
+
setPositionReference
|
|
856
|
+
]);
|
|
857
|
+
const elements = React$1.useMemo(() => ({
|
|
858
|
+
...position.elements,
|
|
859
|
+
domReference
|
|
860
|
+
}), [position.elements, domReference]);
|
|
861
|
+
const context = React$1.useMemo(() => ({
|
|
862
|
+
...position,
|
|
863
|
+
...rootContext,
|
|
864
|
+
refs,
|
|
865
|
+
elements,
|
|
866
|
+
nodeId
|
|
867
|
+
}), [
|
|
868
|
+
position,
|
|
869
|
+
refs,
|
|
870
|
+
elements,
|
|
871
|
+
nodeId,
|
|
872
|
+
rootContext
|
|
873
|
+
]);
|
|
874
|
+
useIsoLayoutEffect(() => {
|
|
875
|
+
rootContext.dataRef.current.floatingContext = context;
|
|
876
|
+
const node = tree === null || tree === void 0 ? void 0 : tree.nodesRef.current.find((n) => n.id === nodeId);
|
|
877
|
+
if (node) node.context = context;
|
|
878
|
+
});
|
|
879
|
+
return React$1.useMemo(() => ({
|
|
880
|
+
...position,
|
|
881
|
+
context,
|
|
882
|
+
refs,
|
|
883
|
+
elements
|
|
884
|
+
}), [
|
|
885
|
+
position,
|
|
886
|
+
refs,
|
|
887
|
+
elements,
|
|
888
|
+
context
|
|
889
|
+
]);
|
|
890
|
+
}
|
|
891
|
+
//#endregion
|
|
892
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/hooks/useFocus.js
|
|
893
|
+
var isMacSafari = isMac && isSafari;
|
|
894
|
+
/**
|
|
895
|
+
* Opens the floating element while the reference element has focus, like CSS
|
|
896
|
+
* `:focus`.
|
|
897
|
+
* @see https://floating-ui.com/docs/useFocus
|
|
898
|
+
*/
|
|
899
|
+
function useFocus(context, props = {}) {
|
|
900
|
+
const { open, onOpenChange, events, dataRef, elements } = context;
|
|
901
|
+
const { enabled = true, visibleOnly = true } = props;
|
|
902
|
+
const blockFocusRef = React$1.useRef(false);
|
|
903
|
+
const timeout = useTimeout();
|
|
904
|
+
const keyboardModalityRef = React$1.useRef(true);
|
|
905
|
+
React$1.useEffect(() => {
|
|
906
|
+
if (!enabled) return;
|
|
907
|
+
const win = getWindow(elements.domReference);
|
|
908
|
+
function onBlur() {
|
|
909
|
+
if (!open && isHTMLElement(elements.domReference) && elements.domReference === activeElement(getDocument(elements.domReference))) blockFocusRef.current = true;
|
|
910
|
+
}
|
|
911
|
+
function onKeyDown() {
|
|
912
|
+
keyboardModalityRef.current = true;
|
|
913
|
+
}
|
|
914
|
+
function onPointerDown() {
|
|
915
|
+
keyboardModalityRef.current = false;
|
|
916
|
+
}
|
|
917
|
+
win.addEventListener("blur", onBlur);
|
|
918
|
+
if (isMacSafari) {
|
|
919
|
+
win.addEventListener("keydown", onKeyDown, true);
|
|
920
|
+
win.addEventListener("pointerdown", onPointerDown, true);
|
|
921
|
+
}
|
|
922
|
+
return () => {
|
|
923
|
+
win.removeEventListener("blur", onBlur);
|
|
924
|
+
if (isMacSafari) {
|
|
925
|
+
win.removeEventListener("keydown", onKeyDown, true);
|
|
926
|
+
win.removeEventListener("pointerdown", onPointerDown, true);
|
|
927
|
+
}
|
|
928
|
+
};
|
|
929
|
+
}, [
|
|
930
|
+
elements.domReference,
|
|
931
|
+
open,
|
|
932
|
+
enabled
|
|
933
|
+
]);
|
|
934
|
+
React$1.useEffect(() => {
|
|
935
|
+
if (!enabled) return;
|
|
936
|
+
function onOpenChangeLocal(details) {
|
|
937
|
+
if (details.reason === "trigger-press" || details.reason === "escape-key") blockFocusRef.current = true;
|
|
938
|
+
}
|
|
939
|
+
events.on("openchange", onOpenChangeLocal);
|
|
940
|
+
return () => {
|
|
941
|
+
events.off("openchange", onOpenChangeLocal);
|
|
942
|
+
};
|
|
943
|
+
}, [events, enabled]);
|
|
944
|
+
const reference = React$1.useMemo(() => ({
|
|
945
|
+
onMouseLeave() {
|
|
946
|
+
blockFocusRef.current = false;
|
|
947
|
+
},
|
|
948
|
+
onFocus(event) {
|
|
949
|
+
if (blockFocusRef.current) return;
|
|
950
|
+
const target = getTarget(event.nativeEvent);
|
|
951
|
+
if (visibleOnly && isElement(target)) {
|
|
952
|
+
if (isMacSafari && !event.relatedTarget) {
|
|
953
|
+
if (!keyboardModalityRef.current && !isTypeableElement(target)) return;
|
|
954
|
+
} else if (!matchesFocusVisible(target)) return;
|
|
955
|
+
}
|
|
956
|
+
onOpenChange(true, createChangeEventDetails("trigger-focus", event.nativeEvent));
|
|
957
|
+
},
|
|
958
|
+
onBlur(event) {
|
|
959
|
+
blockFocusRef.current = false;
|
|
960
|
+
const relatedTarget = event.relatedTarget;
|
|
961
|
+
const nativeEvent = event.nativeEvent;
|
|
962
|
+
const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute("focus-guard")) && relatedTarget.getAttribute("data-type") === "outside";
|
|
963
|
+
timeout.start(0, () => {
|
|
964
|
+
var _dataRef$current$floa;
|
|
965
|
+
const activeEl = activeElement(elements.domReference ? elements.domReference.ownerDocument : document);
|
|
966
|
+
if (!relatedTarget && activeEl === elements.domReference) return;
|
|
967
|
+
if (contains((_dataRef$current$floa = dataRef.current.floatingContext) === null || _dataRef$current$floa === void 0 ? void 0 : _dataRef$current$floa.refs.floating.current, activeEl) || contains(elements.domReference, activeEl) || movedToFocusGuard) return;
|
|
968
|
+
onOpenChange(false, createChangeEventDetails("trigger-focus", nativeEvent));
|
|
969
|
+
});
|
|
970
|
+
}
|
|
971
|
+
}), [
|
|
972
|
+
dataRef,
|
|
973
|
+
elements.domReference,
|
|
974
|
+
onOpenChange,
|
|
975
|
+
visibleOnly,
|
|
976
|
+
timeout
|
|
977
|
+
]);
|
|
978
|
+
return React$1.useMemo(() => enabled ? { reference } : {}, [enabled, reference]);
|
|
979
|
+
}
|
|
980
|
+
//#endregion
|
|
981
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/hooks/useListNavigation.js
|
|
982
|
+
var ESCAPE = "Escape";
|
|
983
|
+
function doSwitch(orientation, vertical, horizontal) {
|
|
984
|
+
switch (orientation) {
|
|
985
|
+
case "vertical": return vertical;
|
|
986
|
+
case "horizontal": return horizontal;
|
|
987
|
+
default: return vertical || horizontal;
|
|
988
|
+
}
|
|
989
|
+
}
|
|
990
|
+
function isMainOrientationKey(key, orientation) {
|
|
991
|
+
return doSwitch(orientation, key === "ArrowUp" || key === "ArrowDown", key === "ArrowLeft" || key === "ArrowRight");
|
|
992
|
+
}
|
|
993
|
+
function isMainOrientationToEndKey(key, orientation, rtl) {
|
|
994
|
+
return doSwitch(orientation, key === "ArrowDown", rtl ? key === "ArrowLeft" : key === "ArrowRight") || key === "Enter" || key === " " || key === "";
|
|
995
|
+
}
|
|
996
|
+
function isCrossOrientationOpenKey(key, orientation, rtl) {
|
|
997
|
+
return doSwitch(orientation, rtl ? key === ARROW_LEFT : key === ARROW_RIGHT, key === ARROW_DOWN);
|
|
998
|
+
}
|
|
999
|
+
function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
|
|
1000
|
+
const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
|
|
1001
|
+
const horizontal = key === ARROW_UP;
|
|
1002
|
+
if (orientation === "both" || orientation === "horizontal" && cols && cols > 1) return key === ESCAPE;
|
|
1003
|
+
return doSwitch(orientation, vertical, horizontal);
|
|
1004
|
+
}
|
|
1005
|
+
/**
|
|
1006
|
+
* Adds arrow key-based navigation of a list of items, either using real DOM
|
|
1007
|
+
* focus or virtual focus.
|
|
1008
|
+
* @see https://floating-ui.com/docs/useListNavigation
|
|
1009
|
+
*/
|
|
1010
|
+
function useListNavigation(context, props) {
|
|
1011
|
+
const { open, onOpenChange, elements } = context;
|
|
1012
|
+
const { listRef, activeIndex, onNavigate: onNavigateProp = () => {}, enabled = true, selectedIndex = null, allowEscape = false, loop = false, nested = false, rtl = false, virtual = false, focusItemOnOpen = "auto", focusItemOnHover = true, openOnArrowKeyDown = true, disabledIndices = void 0, orientation = "vertical", parentOrientation, cols = 1, scrollItemIntoView = true, itemSizes, dense = false, id } = props;
|
|
1013
|
+
if (process.env.NODE_ENV !== "production") {
|
|
1014
|
+
if (allowEscape) {
|
|
1015
|
+
if (!loop) console.warn("`useListNavigation` looping must be enabled to allow escaping.");
|
|
1016
|
+
if (!virtual) console.warn("`useListNavigation` must be virtual to allow escaping.");
|
|
1017
|
+
}
|
|
1018
|
+
if (orientation === "vertical" && cols > 1) console.warn("In grid list navigation mode (`cols` > 1), the `orientation` should", "be either \"horizontal\" or \"both\".");
|
|
1019
|
+
}
|
|
1020
|
+
const floatingFocusElementRef = useLatestRef(getFloatingFocusElement(elements.floating));
|
|
1021
|
+
const parentId = useFloatingParentNodeId();
|
|
1022
|
+
const tree = useFloatingTree();
|
|
1023
|
+
useIsoLayoutEffect(() => {
|
|
1024
|
+
context.dataRef.current.orientation = orientation;
|
|
1025
|
+
}, [context, orientation]);
|
|
1026
|
+
const typeableComboboxReference = isTypeableCombobox(elements.domReference);
|
|
1027
|
+
const focusItemOnOpenRef = React$1.useRef(focusItemOnOpen);
|
|
1028
|
+
const indexRef = React$1.useRef(selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : -1);
|
|
1029
|
+
const keyRef = React$1.useRef(null);
|
|
1030
|
+
const isPointerModalityRef = React$1.useRef(true);
|
|
1031
|
+
const onNavigate = useEventCallback((event) => {
|
|
1032
|
+
onNavigateProp(indexRef.current === -1 ? null : indexRef.current, event);
|
|
1033
|
+
});
|
|
1034
|
+
const previousOnNavigateRef = React$1.useRef(onNavigate);
|
|
1035
|
+
const previousMountedRef = React$1.useRef(!!elements.floating);
|
|
1036
|
+
const previousOpenRef = React$1.useRef(open);
|
|
1037
|
+
const forceSyncFocusRef = React$1.useRef(false);
|
|
1038
|
+
const forceScrollIntoViewRef = React$1.useRef(false);
|
|
1039
|
+
const disabledIndicesRef = useLatestRef(disabledIndices);
|
|
1040
|
+
const latestOpenRef = useLatestRef(open);
|
|
1041
|
+
const scrollItemIntoViewRef = useLatestRef(scrollItemIntoView);
|
|
1042
|
+
const selectedIndexRef = useLatestRef(selectedIndex);
|
|
1043
|
+
const focusItem = useEventCallback(() => {
|
|
1044
|
+
function runFocus(item) {
|
|
1045
|
+
if (virtual) tree === null || tree === void 0 || tree.events.emit("virtualfocus", item);
|
|
1046
|
+
else enqueueFocus(item, {
|
|
1047
|
+
sync: forceSyncFocusRef.current,
|
|
1048
|
+
preventScroll: true
|
|
1049
|
+
});
|
|
1050
|
+
}
|
|
1051
|
+
const initialItem = listRef.current[indexRef.current];
|
|
1052
|
+
const forceScrollIntoView = forceScrollIntoViewRef.current;
|
|
1053
|
+
if (initialItem) runFocus(initialItem);
|
|
1054
|
+
(forceSyncFocusRef.current ? (v) => v() : requestAnimationFrame)(() => {
|
|
1055
|
+
const waitedItem = listRef.current[indexRef.current] || initialItem;
|
|
1056
|
+
if (!waitedItem) return;
|
|
1057
|
+
if (!initialItem) runFocus(waitedItem);
|
|
1058
|
+
const scrollIntoViewOptions = scrollItemIntoViewRef.current;
|
|
1059
|
+
if (scrollIntoViewOptions && item && (forceScrollIntoView || !isPointerModalityRef.current)) {
|
|
1060
|
+
var _waitedItem$scrollInt;
|
|
1061
|
+
(_waitedItem$scrollInt = waitedItem.scrollIntoView) === null || _waitedItem$scrollInt === void 0 || _waitedItem$scrollInt.call(waitedItem, typeof scrollIntoViewOptions === "boolean" ? {
|
|
1062
|
+
block: "nearest",
|
|
1063
|
+
inline: "nearest"
|
|
1064
|
+
} : scrollIntoViewOptions);
|
|
1065
|
+
}
|
|
1066
|
+
});
|
|
1067
|
+
});
|
|
1068
|
+
useIsoLayoutEffect(() => {
|
|
1069
|
+
if (!enabled) return;
|
|
1070
|
+
if (open && elements.floating) {
|
|
1071
|
+
if (focusItemOnOpenRef.current && selectedIndex != null) {
|
|
1072
|
+
forceScrollIntoViewRef.current = true;
|
|
1073
|
+
indexRef.current = selectedIndex;
|
|
1074
|
+
onNavigate();
|
|
1075
|
+
}
|
|
1076
|
+
} else if (previousMountedRef.current) {
|
|
1077
|
+
indexRef.current = -1;
|
|
1078
|
+
previousOnNavigateRef.current();
|
|
1079
|
+
}
|
|
1080
|
+
}, [
|
|
1081
|
+
enabled,
|
|
1082
|
+
open,
|
|
1083
|
+
elements.floating,
|
|
1084
|
+
selectedIndex,
|
|
1085
|
+
onNavigate
|
|
1086
|
+
]);
|
|
1087
|
+
useIsoLayoutEffect(() => {
|
|
1088
|
+
if (!enabled) return;
|
|
1089
|
+
if (!open) {
|
|
1090
|
+
forceSyncFocusRef.current = false;
|
|
1091
|
+
return;
|
|
1092
|
+
}
|
|
1093
|
+
if (!elements.floating) return;
|
|
1094
|
+
if (activeIndex == null) {
|
|
1095
|
+
forceSyncFocusRef.current = false;
|
|
1096
|
+
if (selectedIndexRef.current != null) return;
|
|
1097
|
+
if (previousMountedRef.current) {
|
|
1098
|
+
indexRef.current = -1;
|
|
1099
|
+
focusItem();
|
|
1100
|
+
}
|
|
1101
|
+
if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
|
|
1102
|
+
let runs = 0;
|
|
1103
|
+
const waitForListPopulated = () => {
|
|
1104
|
+
if (listRef.current[0] == null) {
|
|
1105
|
+
if (runs < 2) (runs ? requestAnimationFrame : queueMicrotask)(waitForListPopulated);
|
|
1106
|
+
runs += 1;
|
|
1107
|
+
} else {
|
|
1108
|
+
indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? getMinListIndex(listRef, disabledIndicesRef.current) : getMaxListIndex(listRef, disabledIndicesRef.current);
|
|
1109
|
+
keyRef.current = null;
|
|
1110
|
+
onNavigate();
|
|
1111
|
+
}
|
|
1112
|
+
};
|
|
1113
|
+
waitForListPopulated();
|
|
1114
|
+
}
|
|
1115
|
+
} else if (!isIndexOutOfListBounds(listRef, activeIndex)) {
|
|
1116
|
+
indexRef.current = activeIndex;
|
|
1117
|
+
focusItem();
|
|
1118
|
+
forceScrollIntoViewRef.current = false;
|
|
1119
|
+
}
|
|
1120
|
+
}, [
|
|
1121
|
+
enabled,
|
|
1122
|
+
open,
|
|
1123
|
+
elements.floating,
|
|
1124
|
+
activeIndex,
|
|
1125
|
+
selectedIndexRef,
|
|
1126
|
+
nested,
|
|
1127
|
+
listRef,
|
|
1128
|
+
orientation,
|
|
1129
|
+
rtl,
|
|
1130
|
+
onNavigate,
|
|
1131
|
+
focusItem,
|
|
1132
|
+
disabledIndicesRef
|
|
1133
|
+
]);
|
|
1134
|
+
useIsoLayoutEffect(() => {
|
|
1135
|
+
var _nodes$find;
|
|
1136
|
+
if (!enabled || elements.floating || !tree || virtual || !previousMountedRef.current) return;
|
|
1137
|
+
const nodes = tree.nodesRef.current;
|
|
1138
|
+
const parent = (_nodes$find = nodes.find((node) => node.id === parentId)) === null || _nodes$find === void 0 || (_nodes$find = _nodes$find.context) === null || _nodes$find === void 0 ? void 0 : _nodes$find.elements.floating;
|
|
1139
|
+
const activeEl = activeElement(getDocument(elements.floating));
|
|
1140
|
+
const treeContainsActiveEl = nodes.some((node) => node.context && contains(node.context.elements.floating, activeEl));
|
|
1141
|
+
if (parent && !treeContainsActiveEl && isPointerModalityRef.current) parent.focus({ preventScroll: true });
|
|
1142
|
+
}, [
|
|
1143
|
+
enabled,
|
|
1144
|
+
elements.floating,
|
|
1145
|
+
tree,
|
|
1146
|
+
parentId,
|
|
1147
|
+
virtual
|
|
1148
|
+
]);
|
|
1149
|
+
useIsoLayoutEffect(() => {
|
|
1150
|
+
previousOnNavigateRef.current = onNavigate;
|
|
1151
|
+
previousOpenRef.current = open;
|
|
1152
|
+
previousMountedRef.current = !!elements.floating;
|
|
1153
|
+
});
|
|
1154
|
+
useIsoLayoutEffect(() => {
|
|
1155
|
+
if (!open) {
|
|
1156
|
+
keyRef.current = null;
|
|
1157
|
+
focusItemOnOpenRef.current = focusItemOnOpen;
|
|
1158
|
+
}
|
|
1159
|
+
}, [open, focusItemOnOpen]);
|
|
1160
|
+
const hasActiveIndex = activeIndex != null;
|
|
1161
|
+
const item = React$1.useMemo(() => {
|
|
1162
|
+
function syncCurrentTarget(event) {
|
|
1163
|
+
if (!latestOpenRef.current) return;
|
|
1164
|
+
const index = listRef.current.indexOf(event.currentTarget);
|
|
1165
|
+
if (index !== -1 && indexRef.current !== index) {
|
|
1166
|
+
indexRef.current = index;
|
|
1167
|
+
onNavigate(event);
|
|
1168
|
+
}
|
|
1169
|
+
}
|
|
1170
|
+
return {
|
|
1171
|
+
onFocus(event) {
|
|
1172
|
+
forceSyncFocusRef.current = true;
|
|
1173
|
+
syncCurrentTarget(event);
|
|
1174
|
+
},
|
|
1175
|
+
onClick: ({ currentTarget }) => currentTarget.focus({ preventScroll: true }),
|
|
1176
|
+
onMouseMove(event) {
|
|
1177
|
+
forceSyncFocusRef.current = true;
|
|
1178
|
+
forceScrollIntoViewRef.current = false;
|
|
1179
|
+
if (focusItemOnHover) syncCurrentTarget(event);
|
|
1180
|
+
},
|
|
1181
|
+
onPointerLeave(event) {
|
|
1182
|
+
if (!isPointerModalityRef.current || event.pointerType === "touch") return;
|
|
1183
|
+
forceSyncFocusRef.current = true;
|
|
1184
|
+
const relatedTarget = event.relatedTarget;
|
|
1185
|
+
if (!focusItemOnHover || listRef.current.includes(relatedTarget)) return;
|
|
1186
|
+
indexRef.current = -1;
|
|
1187
|
+
onNavigate(event);
|
|
1188
|
+
if (!virtual) {
|
|
1189
|
+
var _floatingFocusElement;
|
|
1190
|
+
(_floatingFocusElement = floatingFocusElementRef.current) === null || _floatingFocusElement === void 0 || _floatingFocusElement.focus({ preventScroll: true });
|
|
1191
|
+
}
|
|
1192
|
+
}
|
|
1193
|
+
};
|
|
1194
|
+
}, [
|
|
1195
|
+
latestOpenRef,
|
|
1196
|
+
floatingFocusElementRef,
|
|
1197
|
+
focusItemOnHover,
|
|
1198
|
+
listRef,
|
|
1199
|
+
onNavigate,
|
|
1200
|
+
virtual
|
|
1201
|
+
]);
|
|
1202
|
+
const getParentOrientation = React$1.useCallback(() => {
|
|
1203
|
+
var _tree$nodesRef$curren;
|
|
1204
|
+
return parentOrientation !== null && parentOrientation !== void 0 ? parentOrientation : tree === null || tree === void 0 || (_tree$nodesRef$curren = tree.nodesRef.current.find((node) => node.id === parentId)) === null || _tree$nodesRef$curren === void 0 || (_tree$nodesRef$curren = _tree$nodesRef$curren.context) === null || _tree$nodesRef$curren === void 0 || (_tree$nodesRef$curren = _tree$nodesRef$curren.dataRef) === null || _tree$nodesRef$curren === void 0 ? void 0 : _tree$nodesRef$curren.current.orientation;
|
|
1205
|
+
}, [
|
|
1206
|
+
parentId,
|
|
1207
|
+
tree,
|
|
1208
|
+
parentOrientation
|
|
1209
|
+
]);
|
|
1210
|
+
const commonOnKeyDown = useEventCallback((event) => {
|
|
1211
|
+
isPointerModalityRef.current = false;
|
|
1212
|
+
forceSyncFocusRef.current = true;
|
|
1213
|
+
if (event.which === 229) return;
|
|
1214
|
+
if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) return;
|
|
1215
|
+
if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl, cols)) {
|
|
1216
|
+
if (!isMainOrientationKey(event.key, getParentOrientation())) stopEvent(event);
|
|
1217
|
+
onOpenChange(false, createChangeEventDetails("list-navigation", event.nativeEvent));
|
|
1218
|
+
if (isHTMLElement(elements.domReference)) if (virtual) tree === null || tree === void 0 || tree.events.emit("virtualfocus", elements.domReference);
|
|
1219
|
+
else elements.domReference.focus();
|
|
1220
|
+
return;
|
|
1221
|
+
}
|
|
1222
|
+
const currentIndex = indexRef.current;
|
|
1223
|
+
const minIndex = getMinListIndex(listRef, disabledIndices);
|
|
1224
|
+
const maxIndex = getMaxListIndex(listRef, disabledIndices);
|
|
1225
|
+
if (!typeableComboboxReference) {
|
|
1226
|
+
if (event.key === "Home") {
|
|
1227
|
+
stopEvent(event);
|
|
1228
|
+
indexRef.current = minIndex;
|
|
1229
|
+
onNavigate(event);
|
|
1230
|
+
}
|
|
1231
|
+
if (event.key === "End") {
|
|
1232
|
+
stopEvent(event);
|
|
1233
|
+
indexRef.current = maxIndex;
|
|
1234
|
+
onNavigate(event);
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
if (cols > 1) {
|
|
1238
|
+
const sizes = itemSizes || Array.from({ length: listRef.current.length }, () => ({
|
|
1239
|
+
width: 1,
|
|
1240
|
+
height: 1
|
|
1241
|
+
}));
|
|
1242
|
+
const cellMap = createGridCellMap(sizes, cols, dense);
|
|
1243
|
+
const minGridIndex = cellMap.findIndex((index) => index != null && !isListIndexDisabled(listRef, index, disabledIndices));
|
|
1244
|
+
const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
|
|
1245
|
+
const index = cellMap[getGridNavigatedIndex({ current: cellMap.map((itemIndex) => itemIndex != null ? listRef.current[itemIndex] : null) }, {
|
|
1246
|
+
event,
|
|
1247
|
+
orientation,
|
|
1248
|
+
loop,
|
|
1249
|
+
rtl,
|
|
1250
|
+
cols,
|
|
1251
|
+
disabledIndices: getGridCellIndices([...(typeof disabledIndices !== "function" ? disabledIndices : null) || listRef.current.map((_, listIndex) => isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : void 0), void 0], cellMap),
|
|
1252
|
+
minIndex: minGridIndex,
|
|
1253
|
+
maxIndex: maxGridIndex,
|
|
1254
|
+
prevIndex: getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols, event.key === "ArrowDown" ? "bl" : event.key === (rtl ? "ArrowLeft" : "ArrowRight") ? "tr" : "tl"),
|
|
1255
|
+
stopEvent: true
|
|
1256
|
+
})];
|
|
1257
|
+
if (index != null) {
|
|
1258
|
+
indexRef.current = index;
|
|
1259
|
+
onNavigate(event);
|
|
1260
|
+
}
|
|
1261
|
+
if (orientation === "both") return;
|
|
1262
|
+
}
|
|
1263
|
+
if (isMainOrientationKey(event.key, orientation)) {
|
|
1264
|
+
stopEvent(event);
|
|
1265
|
+
if (open && !virtual && activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
|
|
1266
|
+
indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
|
|
1267
|
+
onNavigate(event);
|
|
1268
|
+
return;
|
|
1269
|
+
}
|
|
1270
|
+
if (isMainOrientationToEndKey(event.key, orientation, rtl)) if (loop) if (currentIndex >= maxIndex) if (allowEscape && currentIndex !== listRef.current.length) indexRef.current = -1;
|
|
1271
|
+
else {
|
|
1272
|
+
forceSyncFocusRef.current = false;
|
|
1273
|
+
indexRef.current = minIndex;
|
|
1274
|
+
}
|
|
1275
|
+
else indexRef.current = findNonDisabledListIndex(listRef, {
|
|
1276
|
+
startingIndex: currentIndex,
|
|
1277
|
+
disabledIndices
|
|
1278
|
+
});
|
|
1279
|
+
else indexRef.current = Math.min(maxIndex, findNonDisabledListIndex(listRef, {
|
|
1280
|
+
startingIndex: currentIndex,
|
|
1281
|
+
disabledIndices
|
|
1282
|
+
}));
|
|
1283
|
+
else if (loop) if (currentIndex <= minIndex) if (allowEscape && currentIndex !== -1) indexRef.current = listRef.current.length;
|
|
1284
|
+
else {
|
|
1285
|
+
forceSyncFocusRef.current = false;
|
|
1286
|
+
indexRef.current = maxIndex;
|
|
1287
|
+
}
|
|
1288
|
+
else indexRef.current = findNonDisabledListIndex(listRef, {
|
|
1289
|
+
startingIndex: currentIndex,
|
|
1290
|
+
decrement: true,
|
|
1291
|
+
disabledIndices
|
|
1292
|
+
});
|
|
1293
|
+
else indexRef.current = Math.max(minIndex, findNonDisabledListIndex(listRef, {
|
|
1294
|
+
startingIndex: currentIndex,
|
|
1295
|
+
decrement: true,
|
|
1296
|
+
disabledIndices
|
|
1297
|
+
}));
|
|
1298
|
+
if (isIndexOutOfListBounds(listRef, indexRef.current)) indexRef.current = -1;
|
|
1299
|
+
onNavigate(event);
|
|
1300
|
+
}
|
|
1301
|
+
});
|
|
1302
|
+
const ariaActiveDescendantProp = React$1.useMemo(() => {
|
|
1303
|
+
return virtual && open && hasActiveIndex && { "aria-activedescendant": `${id}-${activeIndex}` };
|
|
1304
|
+
}, [
|
|
1305
|
+
virtual,
|
|
1306
|
+
open,
|
|
1307
|
+
hasActiveIndex,
|
|
1308
|
+
id,
|
|
1309
|
+
activeIndex
|
|
1310
|
+
]);
|
|
1311
|
+
const floating = React$1.useMemo(() => {
|
|
1312
|
+
return {
|
|
1313
|
+
"aria-orientation": orientation === "both" ? void 0 : orientation,
|
|
1314
|
+
...!typeableComboboxReference ? ariaActiveDescendantProp : {},
|
|
1315
|
+
onKeyDown(event) {
|
|
1316
|
+
if (event.key === "Tab" && event.shiftKey && open && !virtual) {
|
|
1317
|
+
stopEvent(event);
|
|
1318
|
+
onOpenChange(false, createChangeEventDetails("list-navigation", event.nativeEvent));
|
|
1319
|
+
if (isHTMLElement(elements.domReference)) elements.domReference.focus();
|
|
1320
|
+
return;
|
|
1321
|
+
}
|
|
1322
|
+
commonOnKeyDown(event);
|
|
1323
|
+
},
|
|
1324
|
+
onPointerMove() {
|
|
1325
|
+
isPointerModalityRef.current = true;
|
|
1326
|
+
}
|
|
1327
|
+
};
|
|
1328
|
+
}, [
|
|
1329
|
+
ariaActiveDescendantProp,
|
|
1330
|
+
commonOnKeyDown,
|
|
1331
|
+
orientation,
|
|
1332
|
+
typeableComboboxReference,
|
|
1333
|
+
onOpenChange,
|
|
1334
|
+
open,
|
|
1335
|
+
virtual,
|
|
1336
|
+
elements.domReference
|
|
1337
|
+
]);
|
|
1338
|
+
const reference = React$1.useMemo(() => {
|
|
1339
|
+
function checkVirtualMouse(event) {
|
|
1340
|
+
if (focusItemOnOpen === "auto" && isVirtualClick(event.nativeEvent)) focusItemOnOpenRef.current = !virtual;
|
|
1341
|
+
}
|
|
1342
|
+
function checkVirtualPointer(event) {
|
|
1343
|
+
focusItemOnOpenRef.current = focusItemOnOpen;
|
|
1344
|
+
if (focusItemOnOpen === "auto" && isVirtualPointerEvent(event.nativeEvent)) focusItemOnOpenRef.current = true;
|
|
1345
|
+
}
|
|
1346
|
+
return {
|
|
1347
|
+
...ariaActiveDescendantProp,
|
|
1348
|
+
onKeyDown(event) {
|
|
1349
|
+
isPointerModalityRef.current = false;
|
|
1350
|
+
const isArrowKey = event.key.startsWith("Arrow");
|
|
1351
|
+
const isParentCrossOpenKey = isCrossOrientationOpenKey(event.key, getParentOrientation(), rtl);
|
|
1352
|
+
const isMainKey = isMainOrientationKey(event.key, orientation);
|
|
1353
|
+
const isNavigationKey = (nested ? isParentCrossOpenKey : isMainKey) || event.key === "Enter" || event.key.trim() === "";
|
|
1354
|
+
if (virtual && open) return commonOnKeyDown(event);
|
|
1355
|
+
if (!open && !openOnArrowKeyDown && isArrowKey) return;
|
|
1356
|
+
if (isNavigationKey) {
|
|
1357
|
+
const isParentMainKey = isMainOrientationKey(event.key, getParentOrientation());
|
|
1358
|
+
keyRef.current = nested && isParentMainKey ? null : event.key;
|
|
1359
|
+
}
|
|
1360
|
+
if (nested) {
|
|
1361
|
+
if (isParentCrossOpenKey) {
|
|
1362
|
+
stopEvent(event);
|
|
1363
|
+
if (open) {
|
|
1364
|
+
indexRef.current = getMinListIndex(listRef, disabledIndicesRef.current);
|
|
1365
|
+
onNavigate(event);
|
|
1366
|
+
} else onOpenChange(true, createChangeEventDetails("list-navigation", event.nativeEvent));
|
|
1367
|
+
}
|
|
1368
|
+
return;
|
|
1369
|
+
}
|
|
1370
|
+
if (isMainKey) {
|
|
1371
|
+
if (selectedIndex != null) indexRef.current = selectedIndex;
|
|
1372
|
+
stopEvent(event);
|
|
1373
|
+
if (!open && openOnArrowKeyDown) onOpenChange(true, createChangeEventDetails("list-navigation", event.nativeEvent));
|
|
1374
|
+
else commonOnKeyDown(event);
|
|
1375
|
+
if (open) onNavigate(event);
|
|
1376
|
+
}
|
|
1377
|
+
},
|
|
1378
|
+
onFocus(event) {
|
|
1379
|
+
if (open && !virtual) {
|
|
1380
|
+
indexRef.current = -1;
|
|
1381
|
+
onNavigate(event);
|
|
1382
|
+
}
|
|
1383
|
+
},
|
|
1384
|
+
onPointerDown: checkVirtualPointer,
|
|
1385
|
+
onPointerEnter: checkVirtualPointer,
|
|
1386
|
+
onMouseDown: checkVirtualMouse,
|
|
1387
|
+
onClick: checkVirtualMouse
|
|
1388
|
+
};
|
|
1389
|
+
}, [
|
|
1390
|
+
ariaActiveDescendantProp,
|
|
1391
|
+
commonOnKeyDown,
|
|
1392
|
+
disabledIndicesRef,
|
|
1393
|
+
focusItemOnOpen,
|
|
1394
|
+
listRef,
|
|
1395
|
+
nested,
|
|
1396
|
+
onNavigate,
|
|
1397
|
+
onOpenChange,
|
|
1398
|
+
open,
|
|
1399
|
+
openOnArrowKeyDown,
|
|
1400
|
+
orientation,
|
|
1401
|
+
getParentOrientation,
|
|
1402
|
+
rtl,
|
|
1403
|
+
selectedIndex,
|
|
1404
|
+
virtual
|
|
1405
|
+
]);
|
|
1406
|
+
return React$1.useMemo(() => enabled ? {
|
|
1407
|
+
reference,
|
|
1408
|
+
floating,
|
|
1409
|
+
item
|
|
1410
|
+
} : {}, [
|
|
1411
|
+
enabled,
|
|
1412
|
+
reference,
|
|
1413
|
+
floating,
|
|
1414
|
+
item
|
|
1415
|
+
]);
|
|
1416
|
+
}
|
|
1417
|
+
//#endregion
|
|
1418
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/hooks/useTypeahead.js
|
|
1419
|
+
/**
|
|
1420
|
+
* Provides a matching callback that can be used to focus an item as the user
|
|
1421
|
+
* types, often used in tandem with `useListNavigation()`.
|
|
1422
|
+
* @see https://floating-ui.com/docs/useTypeahead
|
|
1423
|
+
*/
|
|
1424
|
+
function useTypeahead(context, props) {
|
|
1425
|
+
var _ref;
|
|
1426
|
+
const { open, dataRef } = context;
|
|
1427
|
+
const { listRef, activeIndex, onMatch: onMatchProp, onTypingChange: onTypingChangeProp, enabled = true, findMatch = null, resetMs = 750, ignoreKeys = [], selectedIndex = null } = props;
|
|
1428
|
+
const timeout = useTimeout();
|
|
1429
|
+
const stringRef = React$1.useRef("");
|
|
1430
|
+
const prevIndexRef = React$1.useRef((_ref = selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : activeIndex) !== null && _ref !== void 0 ? _ref : -1);
|
|
1431
|
+
const matchIndexRef = React$1.useRef(null);
|
|
1432
|
+
const onMatch = useEventCallback(onMatchProp);
|
|
1433
|
+
const onTypingChange = useEventCallback(onTypingChangeProp);
|
|
1434
|
+
const findMatchRef = useLatestRef(findMatch);
|
|
1435
|
+
const ignoreKeysRef = useLatestRef(ignoreKeys);
|
|
1436
|
+
useIsoLayoutEffect(() => {
|
|
1437
|
+
if (open) {
|
|
1438
|
+
timeout.clear();
|
|
1439
|
+
matchIndexRef.current = null;
|
|
1440
|
+
stringRef.current = "";
|
|
1441
|
+
}
|
|
1442
|
+
}, [open, timeout]);
|
|
1443
|
+
useIsoLayoutEffect(() => {
|
|
1444
|
+
if (open && stringRef.current === "") {
|
|
1445
|
+
var _ref2;
|
|
1446
|
+
prevIndexRef.current = (_ref2 = selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : activeIndex) !== null && _ref2 !== void 0 ? _ref2 : -1;
|
|
1447
|
+
}
|
|
1448
|
+
}, [
|
|
1449
|
+
open,
|
|
1450
|
+
selectedIndex,
|
|
1451
|
+
activeIndex
|
|
1452
|
+
]);
|
|
1453
|
+
const setTypingChange = useEventCallback((value) => {
|
|
1454
|
+
if (value) {
|
|
1455
|
+
if (!dataRef.current.typing) {
|
|
1456
|
+
dataRef.current.typing = value;
|
|
1457
|
+
onTypingChange(value);
|
|
1458
|
+
}
|
|
1459
|
+
} else if (dataRef.current.typing) {
|
|
1460
|
+
dataRef.current.typing = value;
|
|
1461
|
+
onTypingChange(value);
|
|
1462
|
+
}
|
|
1463
|
+
});
|
|
1464
|
+
const onKeyDown = useEventCallback((event) => {
|
|
1465
|
+
function getMatchingIndex(list, orderedList, string) {
|
|
1466
|
+
const str = findMatchRef.current ? findMatchRef.current(orderedList, string) : orderedList.find((text) => (text === null || text === void 0 ? void 0 : text.toLocaleLowerCase().indexOf(string.toLocaleLowerCase())) === 0);
|
|
1467
|
+
return str ? list.indexOf(str) : -1;
|
|
1468
|
+
}
|
|
1469
|
+
const listContent = listRef.current;
|
|
1470
|
+
if (stringRef.current.length > 0 && stringRef.current[0] !== " ") {
|
|
1471
|
+
if (getMatchingIndex(listContent, listContent, stringRef.current) === -1) setTypingChange(false);
|
|
1472
|
+
else if (event.key === " ") stopEvent(event);
|
|
1473
|
+
}
|
|
1474
|
+
if (listContent == null || ignoreKeysRef.current.includes(event.key) || event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
|
|
1475
|
+
if (open && event.key !== " ") {
|
|
1476
|
+
stopEvent(event);
|
|
1477
|
+
setTypingChange(true);
|
|
1478
|
+
}
|
|
1479
|
+
if (listContent.every((text) => {
|
|
1480
|
+
var _text$, _text$2;
|
|
1481
|
+
return text ? ((_text$ = text[0]) === null || _text$ === void 0 ? void 0 : _text$.toLocaleLowerCase()) !== ((_text$2 = text[1]) === null || _text$2 === void 0 ? void 0 : _text$2.toLocaleLowerCase()) : true;
|
|
1482
|
+
}) && stringRef.current === event.key) {
|
|
1483
|
+
stringRef.current = "";
|
|
1484
|
+
prevIndexRef.current = matchIndexRef.current;
|
|
1485
|
+
}
|
|
1486
|
+
stringRef.current += event.key;
|
|
1487
|
+
timeout.start(resetMs, () => {
|
|
1488
|
+
stringRef.current = "";
|
|
1489
|
+
prevIndexRef.current = matchIndexRef.current;
|
|
1490
|
+
setTypingChange(false);
|
|
1491
|
+
});
|
|
1492
|
+
const prevIndex = prevIndexRef.current;
|
|
1493
|
+
const index = getMatchingIndex(listContent, [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)], stringRef.current);
|
|
1494
|
+
if (index !== -1) {
|
|
1495
|
+
onMatch(index);
|
|
1496
|
+
matchIndexRef.current = index;
|
|
1497
|
+
} else if (event.key !== " ") {
|
|
1498
|
+
stringRef.current = "";
|
|
1499
|
+
setTypingChange(false);
|
|
1500
|
+
}
|
|
1501
|
+
});
|
|
1502
|
+
const reference = React$1.useMemo(() => ({ onKeyDown }), [onKeyDown]);
|
|
1503
|
+
const floating = React$1.useMemo(() => {
|
|
1504
|
+
return {
|
|
1505
|
+
onKeyDown,
|
|
1506
|
+
onKeyUp(event) {
|
|
1507
|
+
if (event.key === " ") setTypingChange(false);
|
|
1508
|
+
}
|
|
1509
|
+
};
|
|
1510
|
+
}, [onKeyDown, setTypingChange]);
|
|
1511
|
+
return React$1.useMemo(() => enabled ? {
|
|
1512
|
+
reference,
|
|
1513
|
+
floating
|
|
1514
|
+
} : {}, [
|
|
1515
|
+
enabled,
|
|
1516
|
+
reference,
|
|
1517
|
+
floating
|
|
1518
|
+
]);
|
|
1519
|
+
}
|
|
1520
|
+
//#endregion
|
|
1521
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/safePolygon.js
|
|
1522
|
+
function isPointInPolygon(point, polygon) {
|
|
1523
|
+
const [x, y] = point;
|
|
1524
|
+
let isInsideValue = false;
|
|
1525
|
+
const length = polygon.length;
|
|
1526
|
+
for (let i = 0, j = length - 1; i < length; j = i++) {
|
|
1527
|
+
const [xi, yi] = polygon[i] || [0, 0];
|
|
1528
|
+
const [xj, yj] = polygon[j] || [0, 0];
|
|
1529
|
+
if (yi >= y !== yj >= y && x <= (xj - xi) * (y - yi) / (yj - yi) + xi) isInsideValue = !isInsideValue;
|
|
1530
|
+
}
|
|
1531
|
+
return isInsideValue;
|
|
1532
|
+
}
|
|
1533
|
+
function isInside(point, rect) {
|
|
1534
|
+
return point[0] >= rect.x && point[0] <= rect.x + rect.width && point[1] >= rect.y && point[1] <= rect.y + rect.height;
|
|
1535
|
+
}
|
|
1536
|
+
/**
|
|
1537
|
+
* Generates a safe polygon area that the user can traverse without closing the
|
|
1538
|
+
* floating element once leaving the reference element.
|
|
1539
|
+
* @see https://floating-ui.com/docs/useHover#safepolygon
|
|
1540
|
+
*/
|
|
1541
|
+
function safePolygon(options = {}) {
|
|
1542
|
+
const { buffer = .5, blockPointerEvents = false, requireIntent = true } = options;
|
|
1543
|
+
const timeout = new Timeout();
|
|
1544
|
+
let hasLanded = false;
|
|
1545
|
+
let lastX = null;
|
|
1546
|
+
let lastY = null;
|
|
1547
|
+
let lastCursorTime = typeof performance !== "undefined" ? performance.now() : 0;
|
|
1548
|
+
function getCursorSpeed(x, y) {
|
|
1549
|
+
const currentTime = performance.now();
|
|
1550
|
+
const elapsedTime = currentTime - lastCursorTime;
|
|
1551
|
+
if (lastX === null || lastY === null || elapsedTime === 0) {
|
|
1552
|
+
lastX = x;
|
|
1553
|
+
lastY = y;
|
|
1554
|
+
lastCursorTime = currentTime;
|
|
1555
|
+
return null;
|
|
1556
|
+
}
|
|
1557
|
+
const deltaX = x - lastX;
|
|
1558
|
+
const deltaY = y - lastY;
|
|
1559
|
+
const speed = Math.sqrt(deltaX * deltaX + deltaY * deltaY) / elapsedTime;
|
|
1560
|
+
lastX = x;
|
|
1561
|
+
lastY = y;
|
|
1562
|
+
lastCursorTime = currentTime;
|
|
1563
|
+
return speed;
|
|
1564
|
+
}
|
|
1565
|
+
const fn = ({ x, y, placement, elements, onClose, nodeId, tree }) => {
|
|
1566
|
+
return function onMouseMove(event) {
|
|
1567
|
+
function close() {
|
|
1568
|
+
timeout.clear();
|
|
1569
|
+
onClose();
|
|
1570
|
+
}
|
|
1571
|
+
timeout.clear();
|
|
1572
|
+
if (!elements.domReference || !elements.floating || placement == null || x == null || y == null) return;
|
|
1573
|
+
const { clientX, clientY } = event;
|
|
1574
|
+
const clientPoint = [clientX, clientY];
|
|
1575
|
+
const target = getTarget(event);
|
|
1576
|
+
const isLeave = event.type === "mouseleave";
|
|
1577
|
+
const isOverFloatingEl = contains(elements.floating, target);
|
|
1578
|
+
const isOverReferenceEl = contains(elements.domReference, target);
|
|
1579
|
+
const refRect = elements.domReference.getBoundingClientRect();
|
|
1580
|
+
const rect = elements.floating.getBoundingClientRect();
|
|
1581
|
+
const side = placement.split("-")[0];
|
|
1582
|
+
const cursorLeaveFromRight = x > rect.right - rect.width / 2;
|
|
1583
|
+
const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
|
|
1584
|
+
const isOverReferenceRect = isInside(clientPoint, refRect);
|
|
1585
|
+
const isFloatingWider = rect.width > refRect.width;
|
|
1586
|
+
const isFloatingTaller = rect.height > refRect.height;
|
|
1587
|
+
const left = (isFloatingWider ? refRect : rect).left;
|
|
1588
|
+
const right = (isFloatingWider ? refRect : rect).right;
|
|
1589
|
+
const top = (isFloatingTaller ? refRect : rect).top;
|
|
1590
|
+
const bottom = (isFloatingTaller ? refRect : rect).bottom;
|
|
1591
|
+
if (isOverFloatingEl) {
|
|
1592
|
+
hasLanded = true;
|
|
1593
|
+
if (!isLeave) return;
|
|
1594
|
+
}
|
|
1595
|
+
if (isOverReferenceEl) hasLanded = false;
|
|
1596
|
+
if (isOverReferenceEl && !isLeave) {
|
|
1597
|
+
hasLanded = true;
|
|
1598
|
+
return;
|
|
1599
|
+
}
|
|
1600
|
+
if (isLeave && isElement(event.relatedTarget) && contains(elements.floating, event.relatedTarget)) return;
|
|
1601
|
+
if (tree && getNodeChildren(tree.nodesRef.current, nodeId).some(({ context }) => context === null || context === void 0 ? void 0 : context.open)) return;
|
|
1602
|
+
if (side === "top" && y >= refRect.bottom - 1 || side === "bottom" && y <= refRect.top + 1 || side === "left" && x >= refRect.right - 1 || side === "right" && x <= refRect.left + 1) return close();
|
|
1603
|
+
let rectPoly = [];
|
|
1604
|
+
switch (side) {
|
|
1605
|
+
case "top":
|
|
1606
|
+
rectPoly = [
|
|
1607
|
+
[left, refRect.top + 1],
|
|
1608
|
+
[left, rect.bottom - 1],
|
|
1609
|
+
[right, rect.bottom - 1],
|
|
1610
|
+
[right, refRect.top + 1]
|
|
1611
|
+
];
|
|
1612
|
+
break;
|
|
1613
|
+
case "bottom":
|
|
1614
|
+
rectPoly = [
|
|
1615
|
+
[left, rect.top + 1],
|
|
1616
|
+
[left, refRect.bottom - 1],
|
|
1617
|
+
[right, refRect.bottom - 1],
|
|
1618
|
+
[right, rect.top + 1]
|
|
1619
|
+
];
|
|
1620
|
+
break;
|
|
1621
|
+
case "left":
|
|
1622
|
+
rectPoly = [
|
|
1623
|
+
[rect.right - 1, bottom],
|
|
1624
|
+
[rect.right - 1, top],
|
|
1625
|
+
[refRect.left + 1, top],
|
|
1626
|
+
[refRect.left + 1, bottom]
|
|
1627
|
+
];
|
|
1628
|
+
break;
|
|
1629
|
+
case "right":
|
|
1630
|
+
rectPoly = [
|
|
1631
|
+
[refRect.right - 1, bottom],
|
|
1632
|
+
[refRect.right - 1, top],
|
|
1633
|
+
[rect.left + 1, top],
|
|
1634
|
+
[rect.left + 1, bottom]
|
|
1635
|
+
];
|
|
1636
|
+
break;
|
|
1637
|
+
default:
|
|
1638
|
+
}
|
|
1639
|
+
function getPolygon([px, py]) {
|
|
1640
|
+
switch (side) {
|
|
1641
|
+
case "top": return [
|
|
1642
|
+
[isFloatingWider ? px + buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py + buffer + 1],
|
|
1643
|
+
[isFloatingWider ? px - buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py + buffer + 1],
|
|
1644
|
+
...[[rect.left, cursorLeaveFromRight ? rect.bottom - buffer : isFloatingWider ? rect.bottom - buffer : rect.top], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.bottom - buffer : rect.top : rect.bottom - buffer]]
|
|
1645
|
+
];
|
|
1646
|
+
case "bottom": return [
|
|
1647
|
+
[isFloatingWider ? px + buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py - buffer],
|
|
1648
|
+
[isFloatingWider ? px - buffer / 2 : cursorLeaveFromRight ? px + buffer * 4 : px - buffer * 4, py - buffer],
|
|
1649
|
+
...[[rect.left, cursorLeaveFromRight ? rect.top + buffer : isFloatingWider ? rect.top + buffer : rect.bottom], [rect.right, cursorLeaveFromRight ? isFloatingWider ? rect.top + buffer : rect.bottom : rect.top + buffer]]
|
|
1650
|
+
];
|
|
1651
|
+
case "left": {
|
|
1652
|
+
const cursorPointOne = [px + buffer + 1, isFloatingTaller ? py + buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4];
|
|
1653
|
+
const cursorPointTwo = [px + buffer + 1, isFloatingTaller ? py - buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4];
|
|
1654
|
+
return [
|
|
1655
|
+
...[[cursorLeaveFromBottom ? rect.right - buffer : isFloatingTaller ? rect.right - buffer : rect.left, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.right - buffer : rect.left : rect.right - buffer, rect.bottom]],
|
|
1656
|
+
cursorPointOne,
|
|
1657
|
+
cursorPointTwo
|
|
1658
|
+
];
|
|
1659
|
+
}
|
|
1660
|
+
case "right": return [
|
|
1661
|
+
[px - buffer, isFloatingTaller ? py + buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4],
|
|
1662
|
+
[px - buffer, isFloatingTaller ? py - buffer / 2 : cursorLeaveFromBottom ? py + buffer * 4 : py - buffer * 4],
|
|
1663
|
+
...[[cursorLeaveFromBottom ? rect.left + buffer : isFloatingTaller ? rect.left + buffer : rect.right, rect.top], [cursorLeaveFromBottom ? isFloatingTaller ? rect.left + buffer : rect.right : rect.left + buffer, rect.bottom]]
|
|
1664
|
+
];
|
|
1665
|
+
default: return [];
|
|
1666
|
+
}
|
|
1667
|
+
}
|
|
1668
|
+
if (isPointInPolygon([clientX, clientY], rectPoly)) return;
|
|
1669
|
+
if (hasLanded && !isOverReferenceRect) return close();
|
|
1670
|
+
if (!isLeave && requireIntent) {
|
|
1671
|
+
const cursorSpeed = getCursorSpeed(event.clientX, event.clientY);
|
|
1672
|
+
if (cursorSpeed !== null && cursorSpeed < .1) return close();
|
|
1673
|
+
}
|
|
1674
|
+
if (!isPointInPolygon([clientX, clientY], getPolygon([x, y]))) close();
|
|
1675
|
+
else if (!hasLanded && requireIntent) timeout.start(40, close);
|
|
1676
|
+
};
|
|
1677
|
+
};
|
|
1678
|
+
fn.__options = { blockPointerEvents };
|
|
1679
|
+
return fn;
|
|
1680
|
+
}
|
|
1681
|
+
//#endregion
|
|
1682
|
+
//#region ../../node_modules/@base-ui-components/react/esm/floating-ui-react/middleware/arrow.js
|
|
1683
|
+
/**
|
|
1684
|
+
* Fork of the original `arrow` middleware from Floating UI that allows
|
|
1685
|
+
* configuring the offset parent.
|
|
1686
|
+
*/
|
|
1687
|
+
var baseArrow = (options) => ({
|
|
1688
|
+
name: "arrow",
|
|
1689
|
+
options,
|
|
1690
|
+
async fn(state) {
|
|
1691
|
+
var _platform$getOffsetPa, _platform$isElement;
|
|
1692
|
+
const { x, y, placement, rects, platform, elements, middlewareData } = state;
|
|
1693
|
+
const { element, padding = 0, offsetParent = "real" } = evaluate(options, state) || {};
|
|
1694
|
+
if (element == null) return {};
|
|
1695
|
+
const paddingObject = getPaddingObject(padding);
|
|
1696
|
+
const coords = {
|
|
1697
|
+
x,
|
|
1698
|
+
y
|
|
1699
|
+
};
|
|
1700
|
+
const axis = getAlignmentAxis(placement);
|
|
1701
|
+
const length = getAxisLength(axis);
|
|
1702
|
+
const arrowDimensions = await platform.getDimensions(element);
|
|
1703
|
+
const isYAxis = axis === "y";
|
|
1704
|
+
const minProp = isYAxis ? "top" : "left";
|
|
1705
|
+
const maxProp = isYAxis ? "bottom" : "right";
|
|
1706
|
+
const clientProp = isYAxis ? "clientHeight" : "clientWidth";
|
|
1707
|
+
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
1708
|
+
const startDiff = coords[axis] - rects.reference[axis];
|
|
1709
|
+
const arrowOffsetParent = offsetParent === "real" ? await ((_platform$getOffsetPa = platform.getOffsetParent) === null || _platform$getOffsetPa === void 0 ? void 0 : _platform$getOffsetPa.call(platform, element)) : elements.floating;
|
|
1710
|
+
let clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
1711
|
+
if (!clientSize || !await ((_platform$isElement = platform.isElement) === null || _platform$isElement === void 0 ? void 0 : _platform$isElement.call(platform, arrowOffsetParent))) clientSize = elements.floating[clientProp] || rects.floating[length];
|
|
1712
|
+
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
1713
|
+
const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
|
|
1714
|
+
const minPadding = Math.min(paddingObject[minProp], largestPossiblePadding);
|
|
1715
|
+
const maxPadding = Math.min(paddingObject[maxProp], largestPossiblePadding);
|
|
1716
|
+
const min = minPadding;
|
|
1717
|
+
const max = clientSize - arrowDimensions[length] - maxPadding;
|
|
1718
|
+
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
1719
|
+
const offset = clamp(min, center, max);
|
|
1720
|
+
const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
|
|
1721
|
+
const alignmentOffset = shouldAddOffset ? center < min ? center - min : center - max : 0;
|
|
1722
|
+
return {
|
|
1723
|
+
[axis]: coords[axis] + alignmentOffset,
|
|
1724
|
+
data: {
|
|
1725
|
+
[axis]: offset,
|
|
1726
|
+
centerOffset: center - offset - alignmentOffset,
|
|
1727
|
+
...shouldAddOffset && { alignmentOffset }
|
|
1728
|
+
},
|
|
1729
|
+
reset: shouldAddOffset
|
|
1730
|
+
};
|
|
1731
|
+
}
|
|
1732
|
+
});
|
|
1733
|
+
/**
|
|
1734
|
+
* Provides data to position an inner element of the floating element so that it
|
|
1735
|
+
* appears centered to the reference element.
|
|
1736
|
+
* This wraps the core `arrow` middleware to allow React refs as the element.
|
|
1737
|
+
* @see https://floating-ui.com/docs/arrow
|
|
1738
|
+
*/
|
|
1739
|
+
var arrow = (options, deps) => ({
|
|
1740
|
+
...baseArrow(options),
|
|
1741
|
+
options: [options, deps]
|
|
1742
|
+
});
|
|
1743
|
+
//#endregion
|
|
1744
|
+
//#region ../../node_modules/@base-ui-components/react/esm/utils/useAnchorPositioning.js
|
|
1745
|
+
function getLogicalSide(sideParam, renderedSide, isRtl) {
|
|
1746
|
+
const isLogicalSideParam = sideParam === "inline-start" || sideParam === "inline-end";
|
|
1747
|
+
return {
|
|
1748
|
+
top: "top",
|
|
1749
|
+
right: isLogicalSideParam ? isRtl ? "inline-start" : "inline-end" : "right",
|
|
1750
|
+
bottom: "bottom",
|
|
1751
|
+
left: isLogicalSideParam ? isRtl ? "inline-end" : "inline-start" : "left"
|
|
1752
|
+
}[renderedSide];
|
|
1753
|
+
}
|
|
1754
|
+
function getOffsetData(state, sideParam, isRtl) {
|
|
1755
|
+
const { rects, placement } = state;
|
|
1756
|
+
return {
|
|
1757
|
+
side: getLogicalSide(sideParam, getSide(placement), isRtl),
|
|
1758
|
+
align: getAlignment(placement) || "center",
|
|
1759
|
+
anchor: {
|
|
1760
|
+
width: rects.reference.width,
|
|
1761
|
+
height: rects.reference.height
|
|
1762
|
+
},
|
|
1763
|
+
positioner: {
|
|
1764
|
+
width: rects.floating.width,
|
|
1765
|
+
height: rects.floating.height
|
|
1766
|
+
}
|
|
1767
|
+
};
|
|
1768
|
+
}
|
|
1769
|
+
/**
|
|
1770
|
+
* Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
|
|
1771
|
+
* `useFloating` hook.
|
|
1772
|
+
*/
|
|
1773
|
+
function useAnchorPositioning(params) {
|
|
1774
|
+
var _middlewareData$hide, _middlewareData$arrow5;
|
|
1775
|
+
const { anchor, positionMethod = "absolute", side: sideParam = "bottom", sideOffset = 0, align = "center", alignOffset = 0, collisionBoundary, collisionPadding: collisionPaddingParam = 5, sticky = false, arrowPadding = 5, trackAnchor = true, keepMounted = false, floatingRootContext, mounted, collisionAvoidance, shiftCrossAxis = false, nodeId, adaptiveOrigin, lazyFlip = false } = params;
|
|
1776
|
+
const [mountSide, setMountSide] = React$1.useState(null);
|
|
1777
|
+
if (!mounted && mountSide !== null) setMountSide(null);
|
|
1778
|
+
const collisionAvoidanceSide = collisionAvoidance.side || "flip";
|
|
1779
|
+
const collisionAvoidanceAlign = collisionAvoidance.align || "flip";
|
|
1780
|
+
const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || "end";
|
|
1781
|
+
const anchorFn = typeof anchor === "function" ? anchor : void 0;
|
|
1782
|
+
const anchorFnCallback = useEventCallback(anchorFn);
|
|
1783
|
+
const anchorDep = anchorFn ? anchorFnCallback : anchor;
|
|
1784
|
+
const anchorValueRef = useLatestRef(anchor);
|
|
1785
|
+
const isRtl = useDirection() === "rtl";
|
|
1786
|
+
const side = mountSide || {
|
|
1787
|
+
top: "top",
|
|
1788
|
+
right: "right",
|
|
1789
|
+
bottom: "bottom",
|
|
1790
|
+
left: "left",
|
|
1791
|
+
"inline-end": isRtl ? "left" : "right",
|
|
1792
|
+
"inline-start": isRtl ? "right" : "left"
|
|
1793
|
+
}[sideParam];
|
|
1794
|
+
const placement = align === "center" ? side : `${side}-${align}`;
|
|
1795
|
+
let collisionPadding = collisionPaddingParam;
|
|
1796
|
+
const bias = 1;
|
|
1797
|
+
const biasTop = sideParam === "bottom" ? bias : 0;
|
|
1798
|
+
const biasBottom = sideParam === "top" ? bias : 0;
|
|
1799
|
+
const biasLeft = sideParam === "right" ? bias : 0;
|
|
1800
|
+
const biasRight = sideParam === "left" ? bias : 0;
|
|
1801
|
+
if (typeof collisionPadding === "number") collisionPadding = {
|
|
1802
|
+
top: collisionPadding + biasTop,
|
|
1803
|
+
right: collisionPadding + biasRight,
|
|
1804
|
+
bottom: collisionPadding + biasBottom,
|
|
1805
|
+
left: collisionPadding + biasLeft
|
|
1806
|
+
};
|
|
1807
|
+
else if (collisionPadding) collisionPadding = {
|
|
1808
|
+
top: (collisionPadding.top || 0) + biasTop,
|
|
1809
|
+
right: (collisionPadding.right || 0) + biasRight,
|
|
1810
|
+
bottom: (collisionPadding.bottom || 0) + biasBottom,
|
|
1811
|
+
left: (collisionPadding.left || 0) + biasLeft
|
|
1812
|
+
};
|
|
1813
|
+
const commonCollisionProps = {
|
|
1814
|
+
boundary: collisionBoundary === "clipping-ancestors" ? "clippingAncestors" : collisionBoundary,
|
|
1815
|
+
padding: collisionPadding
|
|
1816
|
+
};
|
|
1817
|
+
const arrowRef = React$1.useRef(null);
|
|
1818
|
+
const sideOffsetRef = useLatestRef(sideOffset);
|
|
1819
|
+
const alignOffsetRef = useLatestRef(alignOffset);
|
|
1820
|
+
const middleware = [offset((state) => {
|
|
1821
|
+
const data = getOffsetData(state, sideParam, isRtl);
|
|
1822
|
+
const sideAxis = typeof sideOffsetRef.current === "function" ? sideOffsetRef.current(data) : sideOffsetRef.current;
|
|
1823
|
+
const alignAxis = typeof alignOffsetRef.current === "function" ? alignOffsetRef.current(data) : alignOffsetRef.current;
|
|
1824
|
+
return {
|
|
1825
|
+
mainAxis: sideAxis,
|
|
1826
|
+
crossAxis: alignAxis,
|
|
1827
|
+
alignmentAxis: alignAxis
|
|
1828
|
+
};
|
|
1829
|
+
}, [
|
|
1830
|
+
typeof sideOffset !== "function" ? sideOffset : 0,
|
|
1831
|
+
typeof alignOffset !== "function" ? alignOffset : 0,
|
|
1832
|
+
isRtl,
|
|
1833
|
+
sideParam
|
|
1834
|
+
])];
|
|
1835
|
+
const shiftDisabled = collisionAvoidanceAlign === "none" && collisionAvoidanceSide !== "shift";
|
|
1836
|
+
const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === "shift");
|
|
1837
|
+
const flipMiddleware = collisionAvoidanceSide === "none" ? null : flip({
|
|
1838
|
+
...commonCollisionProps,
|
|
1839
|
+
padding: {
|
|
1840
|
+
top: collisionPadding.top + bias,
|
|
1841
|
+
right: collisionPadding.right + bias,
|
|
1842
|
+
bottom: collisionPadding.bottom + bias,
|
|
1843
|
+
left: collisionPadding.left + bias
|
|
1844
|
+
},
|
|
1845
|
+
mainAxis: !shiftCrossAxis && collisionAvoidanceSide === "flip",
|
|
1846
|
+
crossAxis: collisionAvoidanceAlign === "flip" ? "alignment" : false,
|
|
1847
|
+
fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
|
|
1848
|
+
});
|
|
1849
|
+
const shiftMiddleware = shiftDisabled ? null : shift((data) => {
|
|
1850
|
+
const html = ownerDocument(data.elements.floating).documentElement;
|
|
1851
|
+
return {
|
|
1852
|
+
...commonCollisionProps,
|
|
1853
|
+
rootBoundary: shiftCrossAxis ? {
|
|
1854
|
+
x: 0,
|
|
1855
|
+
y: 0,
|
|
1856
|
+
width: html.clientWidth,
|
|
1857
|
+
height: html.clientHeight
|
|
1858
|
+
} : void 0,
|
|
1859
|
+
mainAxis: collisionAvoidanceAlign !== "none",
|
|
1860
|
+
crossAxis: crossAxisShiftEnabled,
|
|
1861
|
+
limiter: sticky || shiftCrossAxis ? void 0 : limitShift((limitData) => {
|
|
1862
|
+
if (!arrowRef.current) return {};
|
|
1863
|
+
const { width, height } = arrowRef.current.getBoundingClientRect();
|
|
1864
|
+
const sideAxis = getSideAxis(getSide(limitData.placement));
|
|
1865
|
+
const arrowSize = sideAxis === "y" ? width : height;
|
|
1866
|
+
const offsetAmount = sideAxis === "y" ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
|
|
1867
|
+
return { offset: arrowSize / 2 + offsetAmount / 2 };
|
|
1868
|
+
})
|
|
1869
|
+
};
|
|
1870
|
+
}, [
|
|
1871
|
+
commonCollisionProps,
|
|
1872
|
+
sticky,
|
|
1873
|
+
shiftCrossAxis,
|
|
1874
|
+
collisionPadding,
|
|
1875
|
+
collisionAvoidanceAlign
|
|
1876
|
+
]);
|
|
1877
|
+
if (collisionAvoidanceSide === "shift" || collisionAvoidanceAlign === "shift" || align === "center") middleware.push(shiftMiddleware, flipMiddleware);
|
|
1878
|
+
else middleware.push(flipMiddleware, shiftMiddleware);
|
|
1879
|
+
middleware.push(size({
|
|
1880
|
+
...commonCollisionProps,
|
|
1881
|
+
apply({ elements: { floating }, rects: { reference }, availableWidth, availableHeight }) {
|
|
1882
|
+
Object.entries({
|
|
1883
|
+
"--available-width": `${availableWidth}px`,
|
|
1884
|
+
"--available-height": `${availableHeight}px`,
|
|
1885
|
+
"--anchor-width": `${reference.width}px`,
|
|
1886
|
+
"--anchor-height": `${reference.height}px`
|
|
1887
|
+
}).forEach(([key, value]) => {
|
|
1888
|
+
floating.style.setProperty(key, value);
|
|
1889
|
+
});
|
|
1890
|
+
}
|
|
1891
|
+
}), arrow(() => ({
|
|
1892
|
+
element: arrowRef.current || document.createElement("div"),
|
|
1893
|
+
padding: arrowPadding,
|
|
1894
|
+
offsetParent: "floating"
|
|
1895
|
+
}), [arrowPadding]), hide(), {
|
|
1896
|
+
name: "transformOrigin",
|
|
1897
|
+
fn(state) {
|
|
1898
|
+
var _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$shift;
|
|
1899
|
+
const { elements, middlewareData, placement: renderedPlacement, rects, y } = state;
|
|
1900
|
+
const currentRenderedSide = getSide(renderedPlacement);
|
|
1901
|
+
const currentRenderedAxis = getSideAxis(currentRenderedSide);
|
|
1902
|
+
const arrowEl = arrowRef.current;
|
|
1903
|
+
const arrowX = ((_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x) || 0;
|
|
1904
|
+
const arrowY = ((_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y) || 0;
|
|
1905
|
+
const arrowWidth = (arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.clientWidth) || 0;
|
|
1906
|
+
const arrowHeight = (arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.clientHeight) || 0;
|
|
1907
|
+
const transformX = arrowX + arrowWidth / 2;
|
|
1908
|
+
const transformY = arrowY + arrowHeight / 2;
|
|
1909
|
+
const shiftY = Math.abs(((_middlewareData$shift = middlewareData.shift) === null || _middlewareData$shift === void 0 ? void 0 : _middlewareData$shift.y) || 0);
|
|
1910
|
+
const halfAnchorHeight = rects.reference.height / 2;
|
|
1911
|
+
const sideOffsetValue = typeof sideOffset === "function" ? sideOffset(getOffsetData(state, sideParam, isRtl)) : sideOffset;
|
|
1912
|
+
const isOverlappingAnchor = shiftY > sideOffsetValue;
|
|
1913
|
+
const adjacentTransformOrigin = {
|
|
1914
|
+
top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
|
|
1915
|
+
bottom: `${transformX}px ${-sideOffsetValue}px`,
|
|
1916
|
+
left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
|
|
1917
|
+
right: `${-sideOffsetValue}px ${transformY}px`
|
|
1918
|
+
}[currentRenderedSide];
|
|
1919
|
+
const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
|
|
1920
|
+
elements.floating.style.setProperty("--transform-origin", crossAxisShiftEnabled && currentRenderedAxis === "y" && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin);
|
|
1921
|
+
return {};
|
|
1922
|
+
}
|
|
1923
|
+
}, adaptiveOrigin);
|
|
1924
|
+
let rootContext = floatingRootContext;
|
|
1925
|
+
if (!mounted && floatingRootContext) rootContext = {
|
|
1926
|
+
...floatingRootContext,
|
|
1927
|
+
elements: {
|
|
1928
|
+
reference: null,
|
|
1929
|
+
floating: null,
|
|
1930
|
+
domReference: null
|
|
1931
|
+
}
|
|
1932
|
+
};
|
|
1933
|
+
const autoUpdateOptions = React$1.useMemo(() => ({
|
|
1934
|
+
elementResize: trackAnchor && typeof ResizeObserver !== "undefined",
|
|
1935
|
+
layoutShift: trackAnchor && typeof IntersectionObserver !== "undefined"
|
|
1936
|
+
}), [trackAnchor]);
|
|
1937
|
+
const { refs, elements, x, y, middlewareData, update, placement: renderedPlacement, context, isPositioned, floatingStyles: originalFloatingStyles } = useFloating({
|
|
1938
|
+
rootContext,
|
|
1939
|
+
placement,
|
|
1940
|
+
middleware,
|
|
1941
|
+
strategy: positionMethod,
|
|
1942
|
+
whileElementsMounted: keepMounted ? void 0 : (...args) => autoUpdate(...args, autoUpdateOptions),
|
|
1943
|
+
nodeId
|
|
1944
|
+
});
|
|
1945
|
+
const { sideX, sideY } = middlewareData.adaptiveOrigin || {};
|
|
1946
|
+
const floatingStyles = React$1.useMemo(() => adaptiveOrigin ? {
|
|
1947
|
+
position: positionMethod,
|
|
1948
|
+
[sideX]: `${x}px`,
|
|
1949
|
+
[sideY]: `${y}px`
|
|
1950
|
+
} : originalFloatingStyles, [
|
|
1951
|
+
adaptiveOrigin,
|
|
1952
|
+
sideX,
|
|
1953
|
+
sideY,
|
|
1954
|
+
positionMethod,
|
|
1955
|
+
x,
|
|
1956
|
+
y,
|
|
1957
|
+
originalFloatingStyles
|
|
1958
|
+
]);
|
|
1959
|
+
const registeredPositionReferenceRef = React$1.useRef(null);
|
|
1960
|
+
useIsoLayoutEffect(() => {
|
|
1961
|
+
if (!mounted) return;
|
|
1962
|
+
const anchorValue = anchorValueRef.current;
|
|
1963
|
+
const resolvedAnchor = typeof anchorValue === "function" ? anchorValue() : anchorValue;
|
|
1964
|
+
const finalAnchor = (isRef(resolvedAnchor) ? resolvedAnchor.current : resolvedAnchor) || null;
|
|
1965
|
+
if (finalAnchor !== registeredPositionReferenceRef.current) {
|
|
1966
|
+
refs.setPositionReference(finalAnchor);
|
|
1967
|
+
registeredPositionReferenceRef.current = finalAnchor;
|
|
1968
|
+
}
|
|
1969
|
+
}, [
|
|
1970
|
+
mounted,
|
|
1971
|
+
refs,
|
|
1972
|
+
anchorDep,
|
|
1973
|
+
anchorValueRef
|
|
1974
|
+
]);
|
|
1975
|
+
React$1.useEffect(() => {
|
|
1976
|
+
if (!mounted) return;
|
|
1977
|
+
const anchorValue = anchorValueRef.current;
|
|
1978
|
+
if (typeof anchorValue === "function") return;
|
|
1979
|
+
if (isRef(anchorValue) && anchorValue.current !== registeredPositionReferenceRef.current) {
|
|
1980
|
+
refs.setPositionReference(anchorValue.current);
|
|
1981
|
+
registeredPositionReferenceRef.current = anchorValue.current;
|
|
1982
|
+
}
|
|
1983
|
+
}, [
|
|
1984
|
+
mounted,
|
|
1985
|
+
refs,
|
|
1986
|
+
anchorDep,
|
|
1987
|
+
anchorValueRef
|
|
1988
|
+
]);
|
|
1989
|
+
React$1.useEffect(() => {
|
|
1990
|
+
if (keepMounted && mounted && elements.domReference && elements.floating) return autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
|
|
1991
|
+
}, [
|
|
1992
|
+
keepMounted,
|
|
1993
|
+
mounted,
|
|
1994
|
+
elements,
|
|
1995
|
+
update,
|
|
1996
|
+
autoUpdateOptions
|
|
1997
|
+
]);
|
|
1998
|
+
const renderedSide = getSide(renderedPlacement);
|
|
1999
|
+
const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
|
|
2000
|
+
const renderedAlign = getAlignment(renderedPlacement) || "center";
|
|
2001
|
+
const anchorHidden = Boolean((_middlewareData$hide = middlewareData.hide) === null || _middlewareData$hide === void 0 ? void 0 : _middlewareData$hide.referenceHidden);
|
|
2002
|
+
/**
|
|
2003
|
+
* Locks the flip (makes it "sticky") so it doesn't prefer a given placement
|
|
2004
|
+
* and flips back lazily, not eagerly. Ideal for filtered lists that change
|
|
2005
|
+
* the size of the popup dynamically to avoid unwanted flipping when typing.
|
|
2006
|
+
*/
|
|
2007
|
+
useIsoLayoutEffect(() => {
|
|
2008
|
+
if (lazyFlip && mounted && isPositioned) setMountSide(renderedSide);
|
|
2009
|
+
}, [
|
|
2010
|
+
lazyFlip,
|
|
2011
|
+
mounted,
|
|
2012
|
+
isPositioned,
|
|
2013
|
+
renderedSide
|
|
2014
|
+
]);
|
|
2015
|
+
const arrowStyles = React$1.useMemo(() => {
|
|
2016
|
+
var _middlewareData$arrow3, _middlewareData$arrow4;
|
|
2017
|
+
return {
|
|
2018
|
+
position: "absolute",
|
|
2019
|
+
top: (_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.y,
|
|
2020
|
+
left: (_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.x
|
|
2021
|
+
};
|
|
2022
|
+
}, [middlewareData.arrow]);
|
|
2023
|
+
const arrowUncentered = ((_middlewareData$arrow5 = middlewareData.arrow) === null || _middlewareData$arrow5 === void 0 ? void 0 : _middlewareData$arrow5.centerOffset) !== 0;
|
|
2024
|
+
return React$1.useMemo(() => ({
|
|
2025
|
+
positionerStyles: floatingStyles,
|
|
2026
|
+
arrowStyles,
|
|
2027
|
+
arrowRef,
|
|
2028
|
+
arrowUncentered,
|
|
2029
|
+
side: logicalRenderedSide,
|
|
2030
|
+
align: renderedAlign,
|
|
2031
|
+
physicalSide: renderedSide,
|
|
2032
|
+
anchorHidden,
|
|
2033
|
+
refs,
|
|
2034
|
+
context,
|
|
2035
|
+
isPositioned,
|
|
2036
|
+
update
|
|
2037
|
+
}), [
|
|
2038
|
+
floatingStyles,
|
|
2039
|
+
arrowStyles,
|
|
2040
|
+
arrowRef,
|
|
2041
|
+
arrowUncentered,
|
|
2042
|
+
logicalRenderedSide,
|
|
2043
|
+
renderedAlign,
|
|
2044
|
+
renderedSide,
|
|
2045
|
+
anchorHidden,
|
|
2046
|
+
refs,
|
|
2047
|
+
context,
|
|
2048
|
+
isPositioned,
|
|
2049
|
+
update
|
|
2050
|
+
]);
|
|
2051
|
+
}
|
|
2052
|
+
function isRef(param) {
|
|
2053
|
+
return param != null && "current" in param;
|
|
2054
|
+
}
|
|
2055
|
+
//#endregion
|
|
2056
|
+
//#region ../../node_modules/@base-ui-components/react/esm/context-menu/root/ContextMenuRootContext.js
|
|
2057
|
+
var ContextMenuRootContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2058
|
+
if (process.env.NODE_ENV !== "production") ContextMenuRootContext.displayName = "ContextMenuRootContext";
|
|
2059
|
+
function useContextMenuRootContext(optional = true) {
|
|
2060
|
+
const context = React$1.useContext(ContextMenuRootContext);
|
|
2061
|
+
if (context === void 0 && !optional) throw new Error("Base UI: ContextMenuRootContext is missing. ContextMenu parts must be placed within <ContextMenu.Root>.");
|
|
2062
|
+
return context;
|
|
2063
|
+
}
|
|
2064
|
+
//#endregion
|
|
2065
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/positioner/MenuPositionerContext.js
|
|
2066
|
+
var MenuPositionerContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2067
|
+
if (process.env.NODE_ENV !== "production") MenuPositionerContext.displayName = "MenuPositionerContext";
|
|
2068
|
+
function useMenuPositionerContext(optional) {
|
|
2069
|
+
const context = React$1.useContext(MenuPositionerContext);
|
|
2070
|
+
if (context === void 0 && !optional) throw new Error("Base UI: MenuPositionerContext is missing. MenuPositioner parts must be placed within <Menu.Positioner>.");
|
|
2071
|
+
return context;
|
|
2072
|
+
}
|
|
2073
|
+
//#endregion
|
|
2074
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/root/MenuRootContext.js
|
|
2075
|
+
var MenuRootContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2076
|
+
if (process.env.NODE_ENV !== "production") MenuRootContext.displayName = "MenuRootContext";
|
|
2077
|
+
function useMenuRootContext(optional) {
|
|
2078
|
+
const context = React$1.useContext(MenuRootContext);
|
|
2079
|
+
if (context === void 0 && !optional) throw new Error("Base UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.");
|
|
2080
|
+
return context;
|
|
2081
|
+
}
|
|
2082
|
+
//#endregion
|
|
2083
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/backdrop/MenuBackdrop.js
|
|
2084
|
+
var stateAttributesMapping$1 = {
|
|
2085
|
+
...popupStateMapping,
|
|
2086
|
+
...transitionStatusMapping
|
|
2087
|
+
};
|
|
2088
|
+
/**
|
|
2089
|
+
* An overlay displayed beneath the menu popup.
|
|
2090
|
+
* Renders a `<div>` element.
|
|
2091
|
+
*
|
|
2092
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2093
|
+
*/
|
|
2094
|
+
var MenuBackdrop = /* @__PURE__ */ React$1.forwardRef(function MenuBackdrop(componentProps, forwardedRef) {
|
|
2095
|
+
const { className, render, ...elementProps } = componentProps;
|
|
2096
|
+
const { open, mounted, transitionStatus, lastOpenChangeReason } = useMenuRootContext();
|
|
2097
|
+
const contextMenuContext = useContextMenuRootContext();
|
|
2098
|
+
const state = React$1.useMemo(() => ({
|
|
2099
|
+
open,
|
|
2100
|
+
transitionStatus
|
|
2101
|
+
}), [open, transitionStatus]);
|
|
2102
|
+
return useRenderElement("div", componentProps, {
|
|
2103
|
+
ref: (contextMenuContext === null || contextMenuContext === void 0 ? void 0 : contextMenuContext.backdropRef) ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
|
|
2104
|
+
state,
|
|
2105
|
+
stateAttributesMapping: stateAttributesMapping$1,
|
|
2106
|
+
props: [{
|
|
2107
|
+
role: "presentation",
|
|
2108
|
+
hidden: !mounted,
|
|
2109
|
+
style: {
|
|
2110
|
+
pointerEvents: lastOpenChangeReason === "trigger-hover" ? "none" : void 0,
|
|
2111
|
+
userSelect: "none",
|
|
2112
|
+
WebkitUserSelect: "none"
|
|
2113
|
+
}
|
|
2114
|
+
}, elementProps]
|
|
2115
|
+
});
|
|
2116
|
+
});
|
|
2117
|
+
if (process.env.NODE_ENV !== "production") MenuBackdrop.displayName = "MenuBackdrop";
|
|
2118
|
+
//#endregion
|
|
2119
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/checkbox-item/MenuCheckboxItemContext.js
|
|
2120
|
+
var MenuCheckboxItemContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2121
|
+
if (process.env.NODE_ENV !== "production") MenuCheckboxItemContext.displayName = "MenuCheckboxItemContext";
|
|
2122
|
+
function useMenuCheckboxItemContext() {
|
|
2123
|
+
const context = React$1.useContext(MenuCheckboxItemContext);
|
|
2124
|
+
if (context === void 0) throw new Error("Base UI: MenuCheckboxItemContext is missing. MenuCheckboxItem parts must be placed within <Menu.CheckboxItem>.");
|
|
2125
|
+
return context;
|
|
2126
|
+
}
|
|
2127
|
+
//#endregion
|
|
2128
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/item/useMenuItem.js
|
|
2129
|
+
var REGULAR_ITEM = { type: "regular-item" };
|
|
2130
|
+
function useMenuItem(params) {
|
|
2131
|
+
const { closeOnClick, disabled = false, highlighted, id, menuEvents, allowMouseUpTriggerRef, typingRef, nativeButton, itemMetadata, nodeId } = params;
|
|
2132
|
+
const itemRef = React$1.useRef(null);
|
|
2133
|
+
const isContextMenu = useContextMenuRootContext(true) !== void 0;
|
|
2134
|
+
const { getButtonProps, buttonRef } = useButton({
|
|
2135
|
+
disabled,
|
|
2136
|
+
focusableWhenDisabled: true,
|
|
2137
|
+
native: nativeButton
|
|
2138
|
+
});
|
|
2139
|
+
const getItemProps = React$1.useCallback((externalProps) => {
|
|
2140
|
+
return mergeProps({
|
|
2141
|
+
id,
|
|
2142
|
+
role: "menuitem",
|
|
2143
|
+
tabIndex: highlighted ? 0 : -1,
|
|
2144
|
+
onMouseMove(event) {
|
|
2145
|
+
if (!nodeId) return;
|
|
2146
|
+
menuEvents.emit("itemhover", {
|
|
2147
|
+
nodeId,
|
|
2148
|
+
target: event.currentTarget
|
|
2149
|
+
});
|
|
2150
|
+
},
|
|
2151
|
+
onMouseEnter() {
|
|
2152
|
+
if (itemMetadata.type !== "submenu-trigger") return;
|
|
2153
|
+
itemMetadata.setActive();
|
|
2154
|
+
},
|
|
2155
|
+
onKeyUp(event) {
|
|
2156
|
+
if (event.key === " " && typingRef.current) event.preventBaseUIHandler();
|
|
2157
|
+
},
|
|
2158
|
+
onClick(event) {
|
|
2159
|
+
if (closeOnClick) menuEvents.emit("close", {
|
|
2160
|
+
domEvent: event,
|
|
2161
|
+
reason: "item-press"
|
|
2162
|
+
});
|
|
2163
|
+
},
|
|
2164
|
+
onMouseUp(event) {
|
|
2165
|
+
if (itemRef.current && allowMouseUpTriggerRef.current && (!isContextMenu || event.button === 2)) {
|
|
2166
|
+
if (itemMetadata.type === "regular-item") itemRef.current.click();
|
|
2167
|
+
}
|
|
2168
|
+
}
|
|
2169
|
+
}, externalProps, getButtonProps);
|
|
2170
|
+
}, [
|
|
2171
|
+
id,
|
|
2172
|
+
highlighted,
|
|
2173
|
+
getButtonProps,
|
|
2174
|
+
typingRef,
|
|
2175
|
+
closeOnClick,
|
|
2176
|
+
menuEvents,
|
|
2177
|
+
allowMouseUpTriggerRef,
|
|
2178
|
+
isContextMenu,
|
|
2179
|
+
itemMetadata,
|
|
2180
|
+
nodeId
|
|
2181
|
+
]);
|
|
2182
|
+
const mergedRef = useMergedRefs(itemRef, buttonRef);
|
|
2183
|
+
return React$1.useMemo(() => ({
|
|
2184
|
+
getItemProps,
|
|
2185
|
+
itemRef: mergedRef
|
|
2186
|
+
}), [getItemProps, mergedRef]);
|
|
2187
|
+
}
|
|
2188
|
+
//#endregion
|
|
2189
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/checkbox-item/MenuCheckboxItemDataAttributes.js
|
|
2190
|
+
var MenuCheckboxItemDataAttributes = /* @__PURE__ */ function(MenuCheckboxItemDataAttributes) {
|
|
2191
|
+
/**
|
|
2192
|
+
* Present when the menu checkbox item is checked.
|
|
2193
|
+
*/
|
|
2194
|
+
MenuCheckboxItemDataAttributes["checked"] = "data-checked";
|
|
2195
|
+
/**
|
|
2196
|
+
* Present when the menu checkbox item is not checked.
|
|
2197
|
+
*/
|
|
2198
|
+
MenuCheckboxItemDataAttributes["unchecked"] = "data-unchecked";
|
|
2199
|
+
/**
|
|
2200
|
+
* Present when the menu checkbox item is disabled.
|
|
2201
|
+
*/
|
|
2202
|
+
MenuCheckboxItemDataAttributes["disabled"] = "data-disabled";
|
|
2203
|
+
/**
|
|
2204
|
+
* Present when the menu checkbox item is highlighted.
|
|
2205
|
+
*/
|
|
2206
|
+
MenuCheckboxItemDataAttributes["highlighted"] = "data-highlighted";
|
|
2207
|
+
return MenuCheckboxItemDataAttributes;
|
|
2208
|
+
}({});
|
|
2209
|
+
//#endregion
|
|
2210
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/utils/stateAttributesMapping.js
|
|
2211
|
+
var itemMapping = {
|
|
2212
|
+
checked(value) {
|
|
2213
|
+
if (value) return { [MenuCheckboxItemDataAttributes.checked]: "" };
|
|
2214
|
+
return { [MenuCheckboxItemDataAttributes.unchecked]: "" };
|
|
2215
|
+
},
|
|
2216
|
+
...transitionStatusMapping
|
|
2217
|
+
};
|
|
2218
|
+
//#endregion
|
|
2219
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/checkbox-item/MenuCheckboxItem.js
|
|
2220
|
+
var InnerMenuCheckboxItem = /* @__PURE__ */ React$1.memo(/* @__PURE__ */ React$1.forwardRef(function InnerMenuCheckboxItem(componentProps, forwardedRef) {
|
|
2221
|
+
const { checked: checkedProp, defaultChecked, onCheckedChange, className, closeOnClick, disabled = false, highlighted, id, menuEvents, itemProps, render, allowMouseUpTriggerRef, typingRef, nativeButton, nodeId, ...elementProps } = componentProps;
|
|
2222
|
+
const [checked, setChecked] = useControlled({
|
|
2223
|
+
controlled: checkedProp,
|
|
2224
|
+
default: defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false,
|
|
2225
|
+
name: "MenuCheckboxItem",
|
|
2226
|
+
state: "checked"
|
|
2227
|
+
});
|
|
2228
|
+
const { getItemProps, itemRef } = useMenuItem({
|
|
2229
|
+
closeOnClick,
|
|
2230
|
+
disabled,
|
|
2231
|
+
highlighted,
|
|
2232
|
+
id,
|
|
2233
|
+
menuEvents,
|
|
2234
|
+
allowMouseUpTriggerRef,
|
|
2235
|
+
typingRef,
|
|
2236
|
+
nativeButton,
|
|
2237
|
+
nodeId,
|
|
2238
|
+
itemMetadata: REGULAR_ITEM
|
|
2239
|
+
});
|
|
2240
|
+
const state = React$1.useMemo(() => ({
|
|
2241
|
+
disabled,
|
|
2242
|
+
highlighted,
|
|
2243
|
+
checked
|
|
2244
|
+
}), [
|
|
2245
|
+
disabled,
|
|
2246
|
+
highlighted,
|
|
2247
|
+
checked
|
|
2248
|
+
]);
|
|
2249
|
+
const element = useRenderElement("div", componentProps, {
|
|
2250
|
+
state,
|
|
2251
|
+
stateAttributesMapping: itemMapping,
|
|
2252
|
+
props: [
|
|
2253
|
+
itemProps,
|
|
2254
|
+
{
|
|
2255
|
+
role: "menuitemcheckbox",
|
|
2256
|
+
"aria-checked": checked,
|
|
2257
|
+
onClick(event) {
|
|
2258
|
+
const details = createChangeEventDetails("item-press", event.nativeEvent);
|
|
2259
|
+
onCheckedChange === null || onCheckedChange === void 0 || onCheckedChange(!checked, details);
|
|
2260
|
+
if (details.isCanceled) return;
|
|
2261
|
+
setChecked((currentlyChecked) => !currentlyChecked);
|
|
2262
|
+
}
|
|
2263
|
+
},
|
|
2264
|
+
elementProps,
|
|
2265
|
+
getItemProps
|
|
2266
|
+
],
|
|
2267
|
+
ref: [itemRef, forwardedRef]
|
|
2268
|
+
});
|
|
2269
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuCheckboxItemContext.Provider, {
|
|
2270
|
+
value: state,
|
|
2271
|
+
children: element
|
|
2272
|
+
});
|
|
2273
|
+
}));
|
|
2274
|
+
/**
|
|
2275
|
+
* A menu item that toggles a setting on or off.
|
|
2276
|
+
* Renders a `<div>` element.
|
|
2277
|
+
*
|
|
2278
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2279
|
+
*/
|
|
2280
|
+
if (process.env.NODE_ENV !== "production") InnerMenuCheckboxItem.displayName = "InnerMenuCheckboxItem";
|
|
2281
|
+
var MenuCheckboxItem = /* @__PURE__ */ React$1.forwardRef(function MenuCheckboxItem(props, forwardedRef) {
|
|
2282
|
+
const { id: idProp, label, closeOnClick = false, nativeButton = false, ...other } = props;
|
|
2283
|
+
const itemRef = React$1.useRef(null);
|
|
2284
|
+
const listItem = useCompositeListItem({ label });
|
|
2285
|
+
const mergedRef = useMergedRefs(forwardedRef, listItem.ref, itemRef);
|
|
2286
|
+
const { itemProps, activeIndex, allowMouseUpTriggerRef, typingRef } = useMenuRootContext();
|
|
2287
|
+
const menuPositionerContext = useMenuPositionerContext(true);
|
|
2288
|
+
const id = useBaseUiId(idProp);
|
|
2289
|
+
const highlighted = listItem.index === activeIndex;
|
|
2290
|
+
const { events: menuEvents } = useFloatingTree();
|
|
2291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerMenuCheckboxItem, {
|
|
2292
|
+
...other,
|
|
2293
|
+
id,
|
|
2294
|
+
ref: mergedRef,
|
|
2295
|
+
highlighted,
|
|
2296
|
+
menuEvents,
|
|
2297
|
+
itemProps,
|
|
2298
|
+
allowMouseUpTriggerRef,
|
|
2299
|
+
typingRef,
|
|
2300
|
+
closeOnClick,
|
|
2301
|
+
nativeButton,
|
|
2302
|
+
nodeId: menuPositionerContext === null || menuPositionerContext === void 0 ? void 0 : menuPositionerContext.floatingContext.nodeId
|
|
2303
|
+
});
|
|
2304
|
+
});
|
|
2305
|
+
if (process.env.NODE_ENV !== "production") MenuCheckboxItem.displayName = "MenuCheckboxItem";
|
|
2306
|
+
//#endregion
|
|
2307
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.js
|
|
2308
|
+
/**
|
|
2309
|
+
* Indicates whether the checkbox item is ticked.
|
|
2310
|
+
* Renders a `<div>` element.
|
|
2311
|
+
*
|
|
2312
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2313
|
+
*/
|
|
2314
|
+
var MenuCheckboxItemIndicator = /* @__PURE__ */ React$1.forwardRef(function MenuCheckboxItemIndicator(componentProps, forwardedRef) {
|
|
2315
|
+
const { render, className, keepMounted = false, ...elementProps } = componentProps;
|
|
2316
|
+
const item = useMenuCheckboxItemContext();
|
|
2317
|
+
const indicatorRef = React$1.useRef(null);
|
|
2318
|
+
const { transitionStatus, setMounted } = useTransitionStatus(item.checked);
|
|
2319
|
+
useOpenChangeComplete({
|
|
2320
|
+
open: item.checked,
|
|
2321
|
+
ref: indicatorRef,
|
|
2322
|
+
onComplete() {
|
|
2323
|
+
if (!item.checked) setMounted(false);
|
|
2324
|
+
}
|
|
2325
|
+
});
|
|
2326
|
+
return useRenderElement("span", componentProps, {
|
|
2327
|
+
state: React$1.useMemo(() => ({
|
|
2328
|
+
checked: item.checked,
|
|
2329
|
+
disabled: item.disabled,
|
|
2330
|
+
highlighted: item.highlighted,
|
|
2331
|
+
transitionStatus
|
|
2332
|
+
}), [
|
|
2333
|
+
item.checked,
|
|
2334
|
+
item.disabled,
|
|
2335
|
+
item.highlighted,
|
|
2336
|
+
transitionStatus
|
|
2337
|
+
]),
|
|
2338
|
+
ref: [forwardedRef, indicatorRef],
|
|
2339
|
+
stateAttributesMapping: itemMapping,
|
|
2340
|
+
props: {
|
|
2341
|
+
"aria-hidden": true,
|
|
2342
|
+
...elementProps
|
|
2343
|
+
},
|
|
2344
|
+
enabled: keepMounted || item.checked
|
|
2345
|
+
});
|
|
2346
|
+
});
|
|
2347
|
+
if (process.env.NODE_ENV !== "production") MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
|
|
2348
|
+
//#endregion
|
|
2349
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/group/MenuGroupContext.js
|
|
2350
|
+
var MenuGroupContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2351
|
+
if (process.env.NODE_ENV !== "production") MenuGroupContext.displayName = "MenuGroupContext";
|
|
2352
|
+
function useMenuGroupRootContext() {
|
|
2353
|
+
const context = React$1.useContext(MenuGroupContext);
|
|
2354
|
+
if (context === void 0) throw new Error("Base UI: MenuGroupRootContext is missing. Menu group parts must be used within <Menu.Group>.");
|
|
2355
|
+
return context;
|
|
2356
|
+
}
|
|
2357
|
+
//#endregion
|
|
2358
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/group/MenuGroup.js
|
|
2359
|
+
/**
|
|
2360
|
+
* Groups related menu items with the corresponding label.
|
|
2361
|
+
* Renders a `<div>` element.
|
|
2362
|
+
*
|
|
2363
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2364
|
+
*/
|
|
2365
|
+
var MenuGroup = /* @__PURE__ */ React$1.forwardRef(function MenuGroup(componentProps, forwardedRef) {
|
|
2366
|
+
const { render, className, ...elementProps } = componentProps;
|
|
2367
|
+
const [labelId, setLabelId] = React$1.useState(void 0);
|
|
2368
|
+
const context = React$1.useMemo(() => ({ setLabelId }), [setLabelId]);
|
|
2369
|
+
const element = useRenderElement("div", componentProps, {
|
|
2370
|
+
ref: forwardedRef,
|
|
2371
|
+
props: {
|
|
2372
|
+
role: "group",
|
|
2373
|
+
"aria-labelledby": labelId,
|
|
2374
|
+
...elementProps
|
|
2375
|
+
}
|
|
2376
|
+
});
|
|
2377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuGroupContext.Provider, {
|
|
2378
|
+
value: context,
|
|
2379
|
+
children: element
|
|
2380
|
+
});
|
|
2381
|
+
});
|
|
2382
|
+
if (process.env.NODE_ENV !== "production") MenuGroup.displayName = "MenuGroup";
|
|
2383
|
+
//#endregion
|
|
2384
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/group-label/MenuGroupLabel.js
|
|
2385
|
+
/**
|
|
2386
|
+
* An accessible label that is automatically associated with its parent group.
|
|
2387
|
+
* Renders a `<div>` element.
|
|
2388
|
+
*
|
|
2389
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2390
|
+
*/
|
|
2391
|
+
var MenuGroupLabel = /* @__PURE__ */ React$1.forwardRef(function MenuGroupLabelComponent(componentProps, forwardedRef) {
|
|
2392
|
+
const { className, render, id: idProp, ...elementProps } = componentProps;
|
|
2393
|
+
const id = useBaseUiId(idProp);
|
|
2394
|
+
const { setLabelId } = useMenuGroupRootContext();
|
|
2395
|
+
useIsoLayoutEffect(() => {
|
|
2396
|
+
setLabelId(id);
|
|
2397
|
+
return () => {
|
|
2398
|
+
setLabelId(void 0);
|
|
2399
|
+
};
|
|
2400
|
+
}, [setLabelId, id]);
|
|
2401
|
+
return useRenderElement("div", componentProps, {
|
|
2402
|
+
ref: forwardedRef,
|
|
2403
|
+
props: {
|
|
2404
|
+
id,
|
|
2405
|
+
role: "presentation",
|
|
2406
|
+
...elementProps
|
|
2407
|
+
}
|
|
2408
|
+
});
|
|
2409
|
+
});
|
|
2410
|
+
if (process.env.NODE_ENV !== "production") MenuGroupLabel.displayName = "MenuGroupLabel";
|
|
2411
|
+
//#endregion
|
|
2412
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/item/MenuItem.js
|
|
2413
|
+
var InnerMenuItem = /* @__PURE__ */ React$1.memo(/* @__PURE__ */ React$1.forwardRef(function InnerMenuItem(componentProps, forwardedRef) {
|
|
2414
|
+
const { className, closeOnClick = true, disabled = false, highlighted, id, menuEvents, itemProps, render, allowMouseUpTriggerRef, typingRef, nativeButton, nodeId, ...elementProps } = componentProps;
|
|
2415
|
+
const { getItemProps, itemRef } = useMenuItem({
|
|
2416
|
+
closeOnClick,
|
|
2417
|
+
disabled,
|
|
2418
|
+
highlighted,
|
|
2419
|
+
id,
|
|
2420
|
+
menuEvents,
|
|
2421
|
+
allowMouseUpTriggerRef,
|
|
2422
|
+
typingRef,
|
|
2423
|
+
nativeButton,
|
|
2424
|
+
nodeId,
|
|
2425
|
+
itemMetadata: REGULAR_ITEM
|
|
2426
|
+
});
|
|
2427
|
+
return useRenderElement("div", componentProps, {
|
|
2428
|
+
state: React$1.useMemo(() => ({
|
|
2429
|
+
disabled,
|
|
2430
|
+
highlighted
|
|
2431
|
+
}), [disabled, highlighted]),
|
|
2432
|
+
ref: [itemRef, forwardedRef],
|
|
2433
|
+
props: [
|
|
2434
|
+
itemProps,
|
|
2435
|
+
elementProps,
|
|
2436
|
+
getItemProps
|
|
2437
|
+
]
|
|
2438
|
+
});
|
|
2439
|
+
}));
|
|
2440
|
+
/**
|
|
2441
|
+
* An individual interactive item in the menu.
|
|
2442
|
+
* Renders a `<div>` element.
|
|
2443
|
+
*
|
|
2444
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2445
|
+
*/
|
|
2446
|
+
if (process.env.NODE_ENV !== "production") InnerMenuItem.displayName = "InnerMenuItem";
|
|
2447
|
+
var MenuItem = /* @__PURE__ */ React$1.forwardRef(function MenuItem(props, forwardedRef) {
|
|
2448
|
+
const { id: idProp, label, nativeButton = false, ...other } = props;
|
|
2449
|
+
const itemRef = React$1.useRef(null);
|
|
2450
|
+
const listItem = useCompositeListItem({ label });
|
|
2451
|
+
const mergedRef = useMergedRefs(forwardedRef, listItem.ref, itemRef);
|
|
2452
|
+
const { itemProps, activeIndex, allowMouseUpTriggerRef, typingRef } = useMenuRootContext();
|
|
2453
|
+
const menuPositionerContext = useMenuPositionerContext(true);
|
|
2454
|
+
const id = useBaseUiId(idProp);
|
|
2455
|
+
const highlighted = listItem.index === activeIndex;
|
|
2456
|
+
const { events: menuEvents } = useFloatingTree();
|
|
2457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerMenuItem, {
|
|
2458
|
+
...other,
|
|
2459
|
+
id,
|
|
2460
|
+
ref: mergedRef,
|
|
2461
|
+
highlighted,
|
|
2462
|
+
menuEvents,
|
|
2463
|
+
itemProps,
|
|
2464
|
+
allowMouseUpTriggerRef,
|
|
2465
|
+
typingRef,
|
|
2466
|
+
nativeButton,
|
|
2467
|
+
nodeId: menuPositionerContext === null || menuPositionerContext === void 0 ? void 0 : menuPositionerContext.floatingContext.nodeId
|
|
2468
|
+
});
|
|
2469
|
+
});
|
|
2470
|
+
if (process.env.NODE_ENV !== "production") MenuItem.displayName = "MenuItem";
|
|
2471
|
+
//#endregion
|
|
2472
|
+
//#region ../../node_modules/@base-ui-components/react/esm/toolbar/root/ToolbarRootContext.js
|
|
2473
|
+
var ToolbarRootContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2474
|
+
if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
|
|
2475
|
+
function useToolbarRootContext(optional) {
|
|
2476
|
+
const context = React$1.useContext(ToolbarRootContext);
|
|
2477
|
+
if (context === void 0 && !optional) throw new Error("Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.");
|
|
2478
|
+
return context;
|
|
2479
|
+
}
|
|
2480
|
+
//#endregion
|
|
2481
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/popup/MenuPopup.js
|
|
2482
|
+
var stateAttributesMapping = {
|
|
2483
|
+
...popupStateMapping,
|
|
2484
|
+
...transitionStatusMapping
|
|
2485
|
+
};
|
|
2486
|
+
/**
|
|
2487
|
+
* A container for the menu items.
|
|
2488
|
+
* Renders a `<div>` element.
|
|
2489
|
+
*
|
|
2490
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2491
|
+
*/
|
|
2492
|
+
var MenuPopup = /* @__PURE__ */ React$1.forwardRef(function MenuPopup(componentProps, forwardedRef) {
|
|
2493
|
+
const { render, className, finalFocus, ...elementProps } = componentProps;
|
|
2494
|
+
const { open, setOpen, popupRef, transitionStatus, popupProps, mounted, instantType, triggerElement, onOpenChangeComplete, parent, lastOpenChangeReason, rootId } = useMenuRootContext();
|
|
2495
|
+
const { side, align, floatingContext } = useMenuPositionerContext();
|
|
2496
|
+
const insideToolbar = useToolbarRootContext(true) != null;
|
|
2497
|
+
useOpenChangeComplete({
|
|
2498
|
+
open,
|
|
2499
|
+
ref: popupRef,
|
|
2500
|
+
onComplete() {
|
|
2501
|
+
if (open) onOpenChangeComplete === null || onOpenChangeComplete === void 0 || onOpenChangeComplete(true);
|
|
2502
|
+
}
|
|
2503
|
+
});
|
|
2504
|
+
const { events: menuEvents } = useFloatingTree();
|
|
2505
|
+
React$1.useEffect(() => {
|
|
2506
|
+
function handleClose(event) {
|
|
2507
|
+
setOpen(false, createChangeEventDetails(event.reason, event.domEvent));
|
|
2508
|
+
}
|
|
2509
|
+
menuEvents.on("close", handleClose);
|
|
2510
|
+
return () => {
|
|
2511
|
+
menuEvents.off("close", handleClose);
|
|
2512
|
+
};
|
|
2513
|
+
}, [menuEvents, setOpen]);
|
|
2514
|
+
const element = useRenderElement("div", componentProps, {
|
|
2515
|
+
state: React$1.useMemo(() => ({
|
|
2516
|
+
transitionStatus,
|
|
2517
|
+
side,
|
|
2518
|
+
align,
|
|
2519
|
+
open,
|
|
2520
|
+
nested: parent.type === "menu",
|
|
2521
|
+
instant: instantType
|
|
2522
|
+
}), [
|
|
2523
|
+
transitionStatus,
|
|
2524
|
+
side,
|
|
2525
|
+
align,
|
|
2526
|
+
open,
|
|
2527
|
+
parent.type,
|
|
2528
|
+
instantType
|
|
2529
|
+
]),
|
|
2530
|
+
ref: [forwardedRef, popupRef],
|
|
2531
|
+
stateAttributesMapping,
|
|
2532
|
+
props: [
|
|
2533
|
+
popupProps,
|
|
2534
|
+
{ onKeyDown(event) {
|
|
2535
|
+
if (insideToolbar && COMPOSITE_KEYS.has(event.key)) event.stopPropagation();
|
|
2536
|
+
} },
|
|
2537
|
+
transitionStatus === "starting" ? DISABLED_TRANSITIONS_STYLE : EMPTY_OBJECT,
|
|
2538
|
+
elementProps,
|
|
2539
|
+
{ "data-rootownerid": rootId }
|
|
2540
|
+
]
|
|
2541
|
+
});
|
|
2542
|
+
let returnFocus = parent.type === void 0 || parent.type === "context-menu";
|
|
2543
|
+
if (triggerElement || parent.type === "menubar" && lastOpenChangeReason !== "outside-press") returnFocus = true;
|
|
2544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingFocusManager, {
|
|
2545
|
+
context: floatingContext,
|
|
2546
|
+
modal: false,
|
|
2547
|
+
disabled: !mounted,
|
|
2548
|
+
returnFocus: finalFocus === void 0 ? returnFocus : finalFocus,
|
|
2549
|
+
initialFocus: parent.type !== "menu",
|
|
2550
|
+
restoreFocus: true,
|
|
2551
|
+
children: element
|
|
2552
|
+
});
|
|
2553
|
+
});
|
|
2554
|
+
if (process.env.NODE_ENV !== "production") MenuPopup.displayName = "MenuPopup";
|
|
2555
|
+
//#endregion
|
|
2556
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/portal/MenuPortalContext.js
|
|
2557
|
+
var MenuPortalContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2558
|
+
if (process.env.NODE_ENV !== "production") MenuPortalContext.displayName = "MenuPortalContext";
|
|
2559
|
+
function useMenuPortalContext() {
|
|
2560
|
+
const value = React$1.useContext(MenuPortalContext);
|
|
2561
|
+
if (value === void 0) throw new Error("Base UI: <Menu.Portal> is missing.");
|
|
2562
|
+
return value;
|
|
2563
|
+
}
|
|
2564
|
+
//#endregion
|
|
2565
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/portal/MenuPortal.js
|
|
2566
|
+
/**
|
|
2567
|
+
* A portal element that moves the popup to a different part of the DOM.
|
|
2568
|
+
* By default, the portal element is appended to `<body>`.
|
|
2569
|
+
*
|
|
2570
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2571
|
+
*/
|
|
2572
|
+
function MenuPortal(props) {
|
|
2573
|
+
const { children, keepMounted = false, container } = props;
|
|
2574
|
+
const { mounted } = useMenuRootContext();
|
|
2575
|
+
if (!(mounted || keepMounted)) return null;
|
|
2576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPortalContext.Provider, {
|
|
2577
|
+
value: keepMounted,
|
|
2578
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingPortal, {
|
|
2579
|
+
root: container,
|
|
2580
|
+
children
|
|
2581
|
+
})
|
|
2582
|
+
});
|
|
2583
|
+
}
|
|
2584
|
+
//#endregion
|
|
2585
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/positioner/MenuPositioner.js
|
|
2586
|
+
/**
|
|
2587
|
+
* Positions the menu popup against the trigger.
|
|
2588
|
+
* Renders a `<div>` element.
|
|
2589
|
+
*
|
|
2590
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2591
|
+
*/
|
|
2592
|
+
var MenuPositioner = /* @__PURE__ */ React$1.forwardRef(function MenuPositioner(componentProps, forwardedRef) {
|
|
2593
|
+
const { anchor: anchorProp, positionMethod: positionMethodProp = "absolute", className, render, side, align: alignProp, sideOffset: sideOffsetProp = 0, alignOffset: alignOffsetProp = 0, collisionBoundary = "clipping-ancestors", collisionPadding = 5, arrowPadding = 5, sticky = false, trackAnchor = true, collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE, ...elementProps } = componentProps;
|
|
2594
|
+
const { open, setOpen, floatingRootContext, setPositionerElement, itemDomElements, itemLabels, mounted, modal, lastOpenChangeReason, parent, setHoverEnabled, triggerElement } = useMenuRootContext();
|
|
2595
|
+
const keepMounted = useMenuPortalContext();
|
|
2596
|
+
const nodeId = useFloatingNodeId();
|
|
2597
|
+
const parentNodeId = useFloatingParentNodeId();
|
|
2598
|
+
const contextMenuContext = useContextMenuRootContext(true);
|
|
2599
|
+
let anchor = anchorProp;
|
|
2600
|
+
let sideOffset = sideOffsetProp;
|
|
2601
|
+
let alignOffset = alignOffsetProp;
|
|
2602
|
+
let align = alignProp;
|
|
2603
|
+
if (parent.type === "context-menu") {
|
|
2604
|
+
var _parent$context$ancho, _parent$context, _align;
|
|
2605
|
+
anchor = (_parent$context$ancho = (_parent$context = parent.context) === null || _parent$context === void 0 ? void 0 : _parent$context.anchor) !== null && _parent$context$ancho !== void 0 ? _parent$context$ancho : anchorProp;
|
|
2606
|
+
align = (_align = align) !== null && _align !== void 0 ? _align : "start";
|
|
2607
|
+
if (!side && align !== "center") {
|
|
2608
|
+
var _componentProps$align, _componentProps$sideO;
|
|
2609
|
+
alignOffset = (_componentProps$align = componentProps.alignOffset) !== null && _componentProps$align !== void 0 ? _componentProps$align : 2;
|
|
2610
|
+
sideOffset = (_componentProps$sideO = componentProps.sideOffset) !== null && _componentProps$sideO !== void 0 ? _componentProps$sideO : -5;
|
|
2611
|
+
}
|
|
2612
|
+
}
|
|
2613
|
+
let computedSide = side;
|
|
2614
|
+
let computedAlign = align;
|
|
2615
|
+
if (parent.type === "menu") {
|
|
2616
|
+
var _computedSide, _computedAlign;
|
|
2617
|
+
computedSide = (_computedSide = computedSide) !== null && _computedSide !== void 0 ? _computedSide : "inline-end";
|
|
2618
|
+
computedAlign = (_computedAlign = computedAlign) !== null && _computedAlign !== void 0 ? _computedAlign : "start";
|
|
2619
|
+
} else if (parent.type === "menubar") {
|
|
2620
|
+
var _computedSide2, _computedAlign2;
|
|
2621
|
+
computedSide = (_computedSide2 = computedSide) !== null && _computedSide2 !== void 0 ? _computedSide2 : "bottom";
|
|
2622
|
+
computedAlign = (_computedAlign2 = computedAlign) !== null && _computedAlign2 !== void 0 ? _computedAlign2 : "start";
|
|
2623
|
+
}
|
|
2624
|
+
const contextMenu = parent.type === "context-menu";
|
|
2625
|
+
const positioner = useAnchorPositioning({
|
|
2626
|
+
anchor,
|
|
2627
|
+
floatingRootContext,
|
|
2628
|
+
positionMethod: contextMenuContext ? "fixed" : positionMethodProp,
|
|
2629
|
+
mounted,
|
|
2630
|
+
side: computedSide,
|
|
2631
|
+
sideOffset,
|
|
2632
|
+
align: computedAlign,
|
|
2633
|
+
alignOffset,
|
|
2634
|
+
arrowPadding: contextMenu ? 0 : arrowPadding,
|
|
2635
|
+
collisionBoundary,
|
|
2636
|
+
collisionPadding,
|
|
2637
|
+
sticky,
|
|
2638
|
+
nodeId,
|
|
2639
|
+
keepMounted,
|
|
2640
|
+
trackAnchor,
|
|
2641
|
+
collisionAvoidance,
|
|
2642
|
+
shiftCrossAxis: contextMenu
|
|
2643
|
+
});
|
|
2644
|
+
const { events: menuEvents } = useFloatingTree();
|
|
2645
|
+
const positionerProps = React$1.useMemo(() => {
|
|
2646
|
+
const hiddenStyles = {};
|
|
2647
|
+
if (!open) hiddenStyles.pointerEvents = "none";
|
|
2648
|
+
return {
|
|
2649
|
+
role: "presentation",
|
|
2650
|
+
hidden: !mounted,
|
|
2651
|
+
style: {
|
|
2652
|
+
...positioner.positionerStyles,
|
|
2653
|
+
...hiddenStyles
|
|
2654
|
+
}
|
|
2655
|
+
};
|
|
2656
|
+
}, [
|
|
2657
|
+
open,
|
|
2658
|
+
mounted,
|
|
2659
|
+
positioner.positionerStyles
|
|
2660
|
+
]);
|
|
2661
|
+
React$1.useEffect(() => {
|
|
2662
|
+
function onMenuOpenChange(details) {
|
|
2663
|
+
if (details.open) {
|
|
2664
|
+
if (details.parentNodeId === nodeId) setHoverEnabled(false);
|
|
2665
|
+
if (details.nodeId !== nodeId && details.parentNodeId === parentNodeId) setOpen(false, createChangeEventDetails("sibling-open"));
|
|
2666
|
+
} else if (details.parentNodeId === nodeId) {
|
|
2667
|
+
if (details.reason !== "sibling-open") setHoverEnabled(true);
|
|
2668
|
+
}
|
|
2669
|
+
}
|
|
2670
|
+
menuEvents.on("menuopenchange", onMenuOpenChange);
|
|
2671
|
+
return () => {
|
|
2672
|
+
menuEvents.off("menuopenchange", onMenuOpenChange);
|
|
2673
|
+
};
|
|
2674
|
+
}, [
|
|
2675
|
+
menuEvents,
|
|
2676
|
+
nodeId,
|
|
2677
|
+
parentNodeId,
|
|
2678
|
+
setOpen,
|
|
2679
|
+
setHoverEnabled
|
|
2680
|
+
]);
|
|
2681
|
+
React$1.useEffect(() => {
|
|
2682
|
+
if (parentNodeId == null) return;
|
|
2683
|
+
function onParentClose(details) {
|
|
2684
|
+
var _details$reason;
|
|
2685
|
+
if (details.open || details.nodeId !== parentNodeId) return;
|
|
2686
|
+
setOpen(false, createChangeEventDetails((_details$reason = details.reason) !== null && _details$reason !== void 0 ? _details$reason : "sibling-open"));
|
|
2687
|
+
}
|
|
2688
|
+
menuEvents.on("menuopenchange", onParentClose);
|
|
2689
|
+
return () => {
|
|
2690
|
+
menuEvents.off("menuopenchange", onParentClose);
|
|
2691
|
+
};
|
|
2692
|
+
}, [
|
|
2693
|
+
menuEvents,
|
|
2694
|
+
parentNodeId,
|
|
2695
|
+
setOpen
|
|
2696
|
+
]);
|
|
2697
|
+
React$1.useEffect(() => {
|
|
2698
|
+
function onItemHover(event) {
|
|
2699
|
+
if (!open || event.nodeId !== parentNodeId) return;
|
|
2700
|
+
if (triggerElement && event.target && triggerElement !== event.target) setOpen(false, createChangeEventDetails("sibling-open"));
|
|
2701
|
+
}
|
|
2702
|
+
menuEvents.on("itemhover", onItemHover);
|
|
2703
|
+
return () => {
|
|
2704
|
+
menuEvents.off("itemhover", onItemHover);
|
|
2705
|
+
};
|
|
2706
|
+
}, [
|
|
2707
|
+
menuEvents,
|
|
2708
|
+
parentNodeId,
|
|
2709
|
+
triggerElement,
|
|
2710
|
+
open,
|
|
2711
|
+
setOpen
|
|
2712
|
+
]);
|
|
2713
|
+
React$1.useEffect(() => {
|
|
2714
|
+
const eventDetails = {
|
|
2715
|
+
open,
|
|
2716
|
+
nodeId,
|
|
2717
|
+
parentNodeId,
|
|
2718
|
+
reason: lastOpenChangeReason
|
|
2719
|
+
};
|
|
2720
|
+
menuEvents.emit("menuopenchange", eventDetails);
|
|
2721
|
+
}, [
|
|
2722
|
+
menuEvents,
|
|
2723
|
+
open,
|
|
2724
|
+
nodeId,
|
|
2725
|
+
parentNodeId,
|
|
2726
|
+
lastOpenChangeReason
|
|
2727
|
+
]);
|
|
2728
|
+
const state = React$1.useMemo(() => ({
|
|
2729
|
+
open,
|
|
2730
|
+
side: positioner.side,
|
|
2731
|
+
align: positioner.align,
|
|
2732
|
+
anchorHidden: positioner.anchorHidden,
|
|
2733
|
+
nested: parent.type === "menu"
|
|
2734
|
+
}), [
|
|
2735
|
+
open,
|
|
2736
|
+
positioner.side,
|
|
2737
|
+
positioner.align,
|
|
2738
|
+
positioner.anchorHidden,
|
|
2739
|
+
parent.type
|
|
2740
|
+
]);
|
|
2741
|
+
const contextValue = React$1.useMemo(() => ({
|
|
2742
|
+
side: positioner.side,
|
|
2743
|
+
align: positioner.align,
|
|
2744
|
+
arrowRef: positioner.arrowRef,
|
|
2745
|
+
arrowUncentered: positioner.arrowUncentered,
|
|
2746
|
+
arrowStyles: positioner.arrowStyles,
|
|
2747
|
+
floatingContext: positioner.context
|
|
2748
|
+
}), [
|
|
2749
|
+
positioner.side,
|
|
2750
|
+
positioner.align,
|
|
2751
|
+
positioner.arrowRef,
|
|
2752
|
+
positioner.arrowUncentered,
|
|
2753
|
+
positioner.arrowStyles,
|
|
2754
|
+
positioner.context
|
|
2755
|
+
]);
|
|
2756
|
+
const element = useRenderElement("div", componentProps, {
|
|
2757
|
+
state,
|
|
2758
|
+
stateAttributesMapping: popupStateMapping,
|
|
2759
|
+
ref: [forwardedRef, setPositionerElement],
|
|
2760
|
+
props: {
|
|
2761
|
+
...positionerProps,
|
|
2762
|
+
...elementProps
|
|
2763
|
+
}
|
|
2764
|
+
});
|
|
2765
|
+
const shouldRenderBackdrop = mounted && parent.type !== "menu" && (parent.type !== "menubar" && modal && lastOpenChangeReason !== "trigger-hover" || parent.type === "menubar" && parent.context.modal);
|
|
2766
|
+
let backdropCutout = null;
|
|
2767
|
+
if (parent.type === "menubar") backdropCutout = parent.context.contentElement;
|
|
2768
|
+
else if (parent.type === void 0) backdropCutout = triggerElement;
|
|
2769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuPositionerContext.Provider, {
|
|
2770
|
+
value: contextValue,
|
|
2771
|
+
children: [shouldRenderBackdrop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalBackdrop, {
|
|
2772
|
+
ref: parent.type === "context-menu" || parent.type === "nested-context-menu" ? parent.context.internalBackdropRef : null,
|
|
2773
|
+
inert: inertValue(!open),
|
|
2774
|
+
cutout: backdropCutout
|
|
2775
|
+
}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingNode, {
|
|
2776
|
+
id: nodeId,
|
|
2777
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompositeList, {
|
|
2778
|
+
elementsRef: itemDomElements,
|
|
2779
|
+
labelsRef: itemLabels,
|
|
2780
|
+
children: element
|
|
2781
|
+
})
|
|
2782
|
+
})]
|
|
2783
|
+
});
|
|
2784
|
+
});
|
|
2785
|
+
if (process.env.NODE_ENV !== "production") MenuPositioner.displayName = "MenuPositioner";
|
|
2786
|
+
//#endregion
|
|
2787
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/radio-group/MenuRadioGroupContext.js
|
|
2788
|
+
var MenuRadioGroupContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2789
|
+
if (process.env.NODE_ENV !== "production") MenuRadioGroupContext.displayName = "MenuRadioGroupContext";
|
|
2790
|
+
function useMenuRadioGroupContext() {
|
|
2791
|
+
const context = React$1.useContext(MenuRadioGroupContext);
|
|
2792
|
+
if (context === void 0) throw new Error("Base UI: MenuRadioGroupContext is missing. MenuRadioGroup parts must be placed within <Menu.RadioGroup>.");
|
|
2793
|
+
return context;
|
|
2794
|
+
}
|
|
2795
|
+
//#endregion
|
|
2796
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/radio-group/MenuRadioGroup.js
|
|
2797
|
+
/**
|
|
2798
|
+
* Groups related radio items.
|
|
2799
|
+
* Renders a `<div>` element.
|
|
2800
|
+
*
|
|
2801
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2802
|
+
*/
|
|
2803
|
+
var MenuRadioGroup = /* @__PURE__ */ React$1.memo(/* @__PURE__ */ React$1.forwardRef(function MenuRadioGroup(componentProps, forwardedRef) {
|
|
2804
|
+
const { render, className, value: valueProp, defaultValue, onValueChange: onValueChangeProp, disabled = false, ...elementProps } = componentProps;
|
|
2805
|
+
const [value, setValueUnwrapped] = useControlled({
|
|
2806
|
+
controlled: valueProp,
|
|
2807
|
+
default: defaultValue,
|
|
2808
|
+
name: "MenuRadioGroup"
|
|
2809
|
+
});
|
|
2810
|
+
const onValueChange = useEventCallback(onValueChangeProp);
|
|
2811
|
+
const setValue = useEventCallback((newValue, eventDetails) => {
|
|
2812
|
+
onValueChange === null || onValueChange === void 0 || onValueChange(newValue, eventDetails);
|
|
2813
|
+
if (eventDetails.isCanceled) return;
|
|
2814
|
+
setValueUnwrapped(newValue);
|
|
2815
|
+
});
|
|
2816
|
+
const element = useRenderElement("div", componentProps, {
|
|
2817
|
+
state: React$1.useMemo(() => ({ disabled }), [disabled]),
|
|
2818
|
+
ref: forwardedRef,
|
|
2819
|
+
props: {
|
|
2820
|
+
role: "group",
|
|
2821
|
+
"aria-disabled": disabled || void 0,
|
|
2822
|
+
...elementProps
|
|
2823
|
+
}
|
|
2824
|
+
});
|
|
2825
|
+
const context = React$1.useMemo(() => ({
|
|
2826
|
+
value,
|
|
2827
|
+
setValue,
|
|
2828
|
+
disabled
|
|
2829
|
+
}), [
|
|
2830
|
+
value,
|
|
2831
|
+
setValue,
|
|
2832
|
+
disabled
|
|
2833
|
+
]);
|
|
2834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRadioGroupContext.Provider, {
|
|
2835
|
+
value: context,
|
|
2836
|
+
children: element
|
|
2837
|
+
});
|
|
2838
|
+
}));
|
|
2839
|
+
if (process.env.NODE_ENV !== "production") MenuRadioGroup.displayName = "MenuRadioGroup";
|
|
2840
|
+
//#endregion
|
|
2841
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/radio-item/MenuRadioItemContext.js
|
|
2842
|
+
var MenuRadioItemContext = /* @__PURE__ */ React$1.createContext(void 0);
|
|
2843
|
+
if (process.env.NODE_ENV !== "production") MenuRadioItemContext.displayName = "MenuRadioItemContext";
|
|
2844
|
+
function useMenuRadioItemContext() {
|
|
2845
|
+
const context = React$1.useContext(MenuRadioItemContext);
|
|
2846
|
+
if (context === void 0) throw new Error("Base UI: MenuRadioItemContext is missing. MenuRadioItem parts must be placed within <Menu.RadioItem>.");
|
|
2847
|
+
return context;
|
|
2848
|
+
}
|
|
2849
|
+
//#endregion
|
|
2850
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/radio-item/MenuRadioItem.js
|
|
2851
|
+
var InnerMenuRadioItem = /* @__PURE__ */ React$1.memo(/* @__PURE__ */ React$1.forwardRef(function InnerMenuRadioItem(componentProps, forwardedRef) {
|
|
2852
|
+
const { checked, setChecked, className, closeOnClick, disabled = false, highlighted, id, menuEvents, itemProps, render, allowMouseUpTriggerRef, typingRef, nativeButton, nodeId, ...elementProps } = componentProps;
|
|
2853
|
+
const { getItemProps, itemRef } = useMenuItem({
|
|
2854
|
+
closeOnClick,
|
|
2855
|
+
disabled,
|
|
2856
|
+
highlighted,
|
|
2857
|
+
id,
|
|
2858
|
+
menuEvents,
|
|
2859
|
+
allowMouseUpTriggerRef,
|
|
2860
|
+
typingRef,
|
|
2861
|
+
nativeButton,
|
|
2862
|
+
itemMetadata: REGULAR_ITEM,
|
|
2863
|
+
nodeId
|
|
2864
|
+
});
|
|
2865
|
+
return useRenderElement("div", componentProps, {
|
|
2866
|
+
state: React$1.useMemo(() => ({
|
|
2867
|
+
disabled,
|
|
2868
|
+
highlighted,
|
|
2869
|
+
checked
|
|
2870
|
+
}), [
|
|
2871
|
+
disabled,
|
|
2872
|
+
highlighted,
|
|
2873
|
+
checked
|
|
2874
|
+
]),
|
|
2875
|
+
stateAttributesMapping: itemMapping,
|
|
2876
|
+
ref: [itemRef, forwardedRef],
|
|
2877
|
+
props: [
|
|
2878
|
+
itemProps,
|
|
2879
|
+
{
|
|
2880
|
+
role: "menuitemradio",
|
|
2881
|
+
"aria-checked": checked,
|
|
2882
|
+
onClick(event) {
|
|
2883
|
+
setChecked(createChangeEventDetails("item-press", event.nativeEvent));
|
|
2884
|
+
}
|
|
2885
|
+
},
|
|
2886
|
+
elementProps,
|
|
2887
|
+
getItemProps
|
|
2888
|
+
]
|
|
2889
|
+
});
|
|
2890
|
+
}));
|
|
2891
|
+
/**
|
|
2892
|
+
* A menu item that works like a radio button in a given group.
|
|
2893
|
+
* Renders a `<div>` element.
|
|
2894
|
+
*
|
|
2895
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2896
|
+
*/
|
|
2897
|
+
if (process.env.NODE_ENV !== "production") InnerMenuRadioItem.displayName = "InnerMenuRadioItem";
|
|
2898
|
+
var MenuRadioItem = /* @__PURE__ */ React$1.forwardRef(function MenuRadioItem(props, forwardedRef) {
|
|
2899
|
+
const { id: idProp, value, label, disabled: disabledProp = false, closeOnClick = false, nativeButton = false, ...other } = props;
|
|
2900
|
+
const itemRef = React$1.useRef(null);
|
|
2901
|
+
const listItem = useCompositeListItem({ label });
|
|
2902
|
+
const mergedRef = useMergedRefs(forwardedRef, listItem.ref, itemRef);
|
|
2903
|
+
const { itemProps, activeIndex, allowMouseUpTriggerRef, typingRef } = useMenuRootContext();
|
|
2904
|
+
const menuPositionerContext = useMenuPositionerContext(true);
|
|
2905
|
+
const id = useBaseUiId(idProp);
|
|
2906
|
+
const highlighted = listItem.index === activeIndex;
|
|
2907
|
+
const { events: menuEvents } = useFloatingTree();
|
|
2908
|
+
const { value: selectedValue, setValue: setSelectedValue, disabled: groupDisabled } = useMenuRadioGroupContext();
|
|
2909
|
+
const disabled = groupDisabled || disabledProp;
|
|
2910
|
+
const checked = selectedValue === value;
|
|
2911
|
+
const setChecked = React$1.useCallback((eventDetails) => {
|
|
2912
|
+
setSelectedValue(value, eventDetails);
|
|
2913
|
+
}, [setSelectedValue, value]);
|
|
2914
|
+
const contextValue = React$1.useMemo(() => ({
|
|
2915
|
+
checked,
|
|
2916
|
+
highlighted,
|
|
2917
|
+
disabled
|
|
2918
|
+
}), [
|
|
2919
|
+
checked,
|
|
2920
|
+
highlighted,
|
|
2921
|
+
disabled
|
|
2922
|
+
]);
|
|
2923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRadioItemContext.Provider, {
|
|
2924
|
+
value: contextValue,
|
|
2925
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerMenuRadioItem, {
|
|
2926
|
+
...other,
|
|
2927
|
+
id,
|
|
2928
|
+
ref: mergedRef,
|
|
2929
|
+
disabled,
|
|
2930
|
+
highlighted,
|
|
2931
|
+
menuEvents,
|
|
2932
|
+
itemProps,
|
|
2933
|
+
allowMouseUpTriggerRef,
|
|
2934
|
+
checked: selectedValue === value,
|
|
2935
|
+
setChecked,
|
|
2936
|
+
typingRef,
|
|
2937
|
+
closeOnClick,
|
|
2938
|
+
nativeButton,
|
|
2939
|
+
nodeId: menuPositionerContext === null || menuPositionerContext === void 0 ? void 0 : menuPositionerContext.floatingContext.nodeId
|
|
2940
|
+
})
|
|
2941
|
+
});
|
|
2942
|
+
});
|
|
2943
|
+
if (process.env.NODE_ENV !== "production") MenuRadioItem.displayName = "MenuRadioItem";
|
|
2944
|
+
//#endregion
|
|
2945
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/radio-item-indicator/MenuRadioItemIndicator.js
|
|
2946
|
+
/**
|
|
2947
|
+
* Indicates whether the radio item is selected.
|
|
2948
|
+
* Renders a `<div>` element.
|
|
2949
|
+
*
|
|
2950
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
2951
|
+
*/
|
|
2952
|
+
var MenuRadioItemIndicator = /* @__PURE__ */ React$1.forwardRef(function MenuRadioItemIndicator(componentProps, forwardedRef) {
|
|
2953
|
+
const { render, className, keepMounted = false, ...elementProps } = componentProps;
|
|
2954
|
+
const item = useMenuRadioItemContext();
|
|
2955
|
+
const indicatorRef = React$1.useRef(null);
|
|
2956
|
+
const { transitionStatus, setMounted } = useTransitionStatus(item.checked);
|
|
2957
|
+
useOpenChangeComplete({
|
|
2958
|
+
open: item.checked,
|
|
2959
|
+
ref: indicatorRef,
|
|
2960
|
+
onComplete() {
|
|
2961
|
+
if (!item.checked) setMounted(false);
|
|
2962
|
+
}
|
|
2963
|
+
});
|
|
2964
|
+
return useRenderElement("span", componentProps, {
|
|
2965
|
+
state: React$1.useMemo(() => ({
|
|
2966
|
+
checked: item.checked,
|
|
2967
|
+
disabled: item.disabled,
|
|
2968
|
+
highlighted: item.highlighted,
|
|
2969
|
+
transitionStatus
|
|
2970
|
+
}), [
|
|
2971
|
+
item.checked,
|
|
2972
|
+
item.disabled,
|
|
2973
|
+
item.highlighted,
|
|
2974
|
+
transitionStatus
|
|
2975
|
+
]),
|
|
2976
|
+
stateAttributesMapping: itemMapping,
|
|
2977
|
+
ref: [forwardedRef, indicatorRef],
|
|
2978
|
+
props: {
|
|
2979
|
+
"aria-hidden": true,
|
|
2980
|
+
...elementProps
|
|
2981
|
+
},
|
|
2982
|
+
enabled: keepMounted || item.checked
|
|
2983
|
+
});
|
|
2984
|
+
});
|
|
2985
|
+
if (process.env.NODE_ENV !== "production") MenuRadioItemIndicator.displayName = "MenuRadioItemIndicator";
|
|
2986
|
+
//#endregion
|
|
2987
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menubar/MenubarContext.js
|
|
2988
|
+
var MenubarContext = /* @__PURE__ */ React$1.createContext(null);
|
|
2989
|
+
if (process.env.NODE_ENV !== "production") MenubarContext.displayName = "MenubarContext";
|
|
2990
|
+
function useMenubarContext(optional) {
|
|
2991
|
+
const context = React$1.useContext(MenubarContext);
|
|
2992
|
+
if (context === null && !optional) throw new Error("Base UI: MenubarContext is missing. Menubar parts must be placed within <Menubar>.");
|
|
2993
|
+
return context;
|
|
2994
|
+
}
|
|
2995
|
+
//#endregion
|
|
2996
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/submenu-root/MenuSubmenuRootContext.js
|
|
2997
|
+
var MenuSubmenuRootContext = /* @__PURE__ */ React$1.createContext(false);
|
|
2998
|
+
if (process.env.NODE_ENV !== "production") MenuSubmenuRootContext.displayName = "MenuSubmenuRootContext";
|
|
2999
|
+
function useMenuSubmenuRootContext() {
|
|
3000
|
+
return React$1.useContext(MenuSubmenuRootContext);
|
|
3001
|
+
}
|
|
3002
|
+
//#endregion
|
|
3003
|
+
//#region ../../node_modules/@base-ui-components/react/esm/utils/useMixedToggleClickHander.js
|
|
3004
|
+
/**
|
|
3005
|
+
* Returns `click` and `mousedown` handlers that fix the behavior of triggers of popups that are toggled by different events.
|
|
3006
|
+
* For example, a button that opens a popup on mousedown and closes it on click.
|
|
3007
|
+
* This hook prevents the popup from closing immediately after the mouse button is released.
|
|
3008
|
+
*/
|
|
3009
|
+
function useMixedToggleClickHandler(params) {
|
|
3010
|
+
const { enabled = true, mouseDownAction, open } = params;
|
|
3011
|
+
const ignoreClickRef = React$1.useRef(false);
|
|
3012
|
+
return React$1.useMemo(() => {
|
|
3013
|
+
if (!enabled) return EMPTY_OBJECT;
|
|
3014
|
+
return {
|
|
3015
|
+
onMouseDown: (event) => {
|
|
3016
|
+
if (mouseDownAction === "open" && !open || mouseDownAction === "close" && open) {
|
|
3017
|
+
ignoreClickRef.current = true;
|
|
3018
|
+
ownerDocument(event.currentTarget).addEventListener("click", () => {
|
|
3019
|
+
ignoreClickRef.current = false;
|
|
3020
|
+
}, { once: true });
|
|
3021
|
+
}
|
|
3022
|
+
},
|
|
3023
|
+
onClick: (event) => {
|
|
3024
|
+
if (ignoreClickRef.current) {
|
|
3025
|
+
ignoreClickRef.current = false;
|
|
3026
|
+
event.preventBaseUIHandler();
|
|
3027
|
+
}
|
|
3028
|
+
}
|
|
3029
|
+
};
|
|
3030
|
+
}, [
|
|
3031
|
+
enabled,
|
|
3032
|
+
mouseDownAction,
|
|
3033
|
+
open
|
|
3034
|
+
]);
|
|
3035
|
+
}
|
|
3036
|
+
//#endregion
|
|
3037
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/root/MenuRoot.js
|
|
3038
|
+
var EMPTY_ARRAY = [];
|
|
3039
|
+
var EMPTY_REF = { current: false };
|
|
3040
|
+
/**
|
|
3041
|
+
* Groups all parts of the menu.
|
|
3042
|
+
* Doesn’t render its own HTML element.
|
|
3043
|
+
*
|
|
3044
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
3045
|
+
*/
|
|
3046
|
+
var MenuRoot = function MenuRoot(props) {
|
|
3047
|
+
const { children, open: openProp, onOpenChange, onOpenChangeComplete, defaultOpen = false, disabled: disabledProp = false, modal: modalProp, loop = true, orientation = "vertical", actionsRef, openOnHover: openOnHoverProp, delay = 100, closeDelay = 0, closeParentOnEsc = true } = props;
|
|
3048
|
+
const [triggerElement, setTriggerElement] = React$1.useState(null);
|
|
3049
|
+
const [positionerElement, setPositionerElementUnwrapped] = React$1.useState(null);
|
|
3050
|
+
const [instantType, setInstantType] = React$1.useState();
|
|
3051
|
+
const [hoverEnabled, setHoverEnabled] = React$1.useState(true);
|
|
3052
|
+
const [activeIndex, setActiveIndex] = React$1.useState(null);
|
|
3053
|
+
const [lastOpenChangeReason, setLastOpenChangeReason] = React$1.useState(null);
|
|
3054
|
+
const [stickIfOpen, setStickIfOpen] = React$1.useState(true);
|
|
3055
|
+
const [allowMouseEnterState, setAllowMouseEnterState] = React$1.useState(false);
|
|
3056
|
+
const openEventRef = React$1.useRef(null);
|
|
3057
|
+
const popupRef = React$1.useRef(null);
|
|
3058
|
+
const positionerRef = React$1.useRef(null);
|
|
3059
|
+
const itemDomElements = React$1.useRef([]);
|
|
3060
|
+
const itemLabels = React$1.useRef([]);
|
|
3061
|
+
const stickIfOpenTimeout = useTimeout();
|
|
3062
|
+
const contextMenuContext = useContextMenuRootContext(true);
|
|
3063
|
+
const isSubmenu = useMenuSubmenuRootContext();
|
|
3064
|
+
const nested = useFloatingParentNodeId() != null;
|
|
3065
|
+
let floatingEvents;
|
|
3066
|
+
let parent;
|
|
3067
|
+
{
|
|
3068
|
+
const parentContext = useMenuRootContext(true);
|
|
3069
|
+
const menubarContext = useMenubarContext(true);
|
|
3070
|
+
if (isSubmenu && parentContext) parent = {
|
|
3071
|
+
type: "menu",
|
|
3072
|
+
context: parentContext
|
|
3073
|
+
};
|
|
3074
|
+
else if (menubarContext) parent = {
|
|
3075
|
+
type: "menubar",
|
|
3076
|
+
context: menubarContext
|
|
3077
|
+
};
|
|
3078
|
+
else if (contextMenuContext && !parentContext) parent = {
|
|
3079
|
+
type: "context-menu",
|
|
3080
|
+
context: contextMenuContext
|
|
3081
|
+
};
|
|
3082
|
+
else parent = { type: void 0 };
|
|
3083
|
+
}
|
|
3084
|
+
let rootId = useId$1();
|
|
3085
|
+
if (parent.type !== void 0) rootId = parent.context.rootId;
|
|
3086
|
+
const modal = (parent.type === void 0 || parent.type === "context-menu") && (modalProp !== null && modalProp !== void 0 ? modalProp : true);
|
|
3087
|
+
const disabled = disabledProp || parent.type === "menubar" && parent.context.disabled || false;
|
|
3088
|
+
const allowMouseEnter = parent.type === "menu" ? parent.context.allowMouseEnter : allowMouseEnterState;
|
|
3089
|
+
const setAllowMouseEnter = parent.type === "menu" ? parent.context.setAllowMouseEnter : setAllowMouseEnterState;
|
|
3090
|
+
if (process.env.NODE_ENV !== "production") {
|
|
3091
|
+
if (parent.type !== void 0 && modalProp !== void 0) console.warn("Base UI: The `modal` prop is not supported on nested menus. It will be ignored.");
|
|
3092
|
+
}
|
|
3093
|
+
const openOnHover = openOnHoverProp !== null && openOnHoverProp !== void 0 ? openOnHoverProp : parent.type === "menu" || parent.type === "menubar" && parent.context.hasSubmenuOpen;
|
|
3094
|
+
const [open, setOpenUnwrapped] = useControlled({
|
|
3095
|
+
controlled: openProp,
|
|
3096
|
+
default: defaultOpen,
|
|
3097
|
+
name: "MenuRoot",
|
|
3098
|
+
state: "open"
|
|
3099
|
+
});
|
|
3100
|
+
const allowOutsidePressDismissalRef = React$1.useRef(parent.type !== "context-menu");
|
|
3101
|
+
const allowOutsidePressDismissalTimeout = useTimeout();
|
|
3102
|
+
React$1.useEffect(() => {
|
|
3103
|
+
if (!open) openEventRef.current = null;
|
|
3104
|
+
if (parent.type !== "context-menu") return;
|
|
3105
|
+
if (!open) {
|
|
3106
|
+
allowOutsidePressDismissalTimeout.clear();
|
|
3107
|
+
allowOutsidePressDismissalRef.current = false;
|
|
3108
|
+
return;
|
|
3109
|
+
}
|
|
3110
|
+
allowOutsidePressDismissalTimeout.start(500, () => {
|
|
3111
|
+
allowOutsidePressDismissalRef.current = true;
|
|
3112
|
+
});
|
|
3113
|
+
}, [
|
|
3114
|
+
allowOutsidePressDismissalTimeout,
|
|
3115
|
+
open,
|
|
3116
|
+
parent.type
|
|
3117
|
+
]);
|
|
3118
|
+
const setPositionerElement = React$1.useCallback((value) => {
|
|
3119
|
+
positionerRef.current = value;
|
|
3120
|
+
setPositionerElementUnwrapped(value);
|
|
3121
|
+
}, []);
|
|
3122
|
+
const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
|
|
3123
|
+
const { openMethod, triggerProps: interactionTypeProps, reset: resetOpenInteractionType } = useOpenInteractionType(open);
|
|
3124
|
+
useScrollLock({
|
|
3125
|
+
enabled: open && modal && lastOpenChangeReason !== "trigger-hover" && openMethod !== "touch",
|
|
3126
|
+
mounted,
|
|
3127
|
+
open,
|
|
3128
|
+
referenceElement: positionerElement
|
|
3129
|
+
});
|
|
3130
|
+
if (!open && !hoverEnabled) setHoverEnabled(true);
|
|
3131
|
+
const handleUnmount = useEventCallback(() => {
|
|
3132
|
+
setMounted(false);
|
|
3133
|
+
setStickIfOpen(true);
|
|
3134
|
+
setAllowMouseEnter(false);
|
|
3135
|
+
onOpenChangeComplete === null || onOpenChangeComplete === void 0 || onOpenChangeComplete(false);
|
|
3136
|
+
resetOpenInteractionType();
|
|
3137
|
+
});
|
|
3138
|
+
useOpenChangeComplete({
|
|
3139
|
+
enabled: !actionsRef,
|
|
3140
|
+
open,
|
|
3141
|
+
ref: popupRef,
|
|
3142
|
+
onComplete() {
|
|
3143
|
+
if (!open) handleUnmount();
|
|
3144
|
+
}
|
|
3145
|
+
});
|
|
3146
|
+
const allowTouchToCloseRef = React$1.useRef(true);
|
|
3147
|
+
const allowTouchToCloseTimeout = useTimeout();
|
|
3148
|
+
const setOpen = useEventCallback((nextOpen, eventDetails) => {
|
|
3149
|
+
const reason = eventDetails.reason;
|
|
3150
|
+
if (open === nextOpen) return;
|
|
3151
|
+
onOpenChange === null || onOpenChange === void 0 || onOpenChange(nextOpen, eventDetails);
|
|
3152
|
+
if (eventDetails.isCanceled) return;
|
|
3153
|
+
const details = {
|
|
3154
|
+
open: nextOpen,
|
|
3155
|
+
nativeEvent: eventDetails.event,
|
|
3156
|
+
reason: eventDetails.reason,
|
|
3157
|
+
nested
|
|
3158
|
+
};
|
|
3159
|
+
floatingEvents === null || floatingEvents === void 0 || floatingEvents.emit("openchange", details);
|
|
3160
|
+
const nativeEvent = eventDetails.event;
|
|
3161
|
+
if (nextOpen === false && (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.type) === "click" && nativeEvent.pointerType === "touch" && !allowTouchToCloseRef.current) return;
|
|
3162
|
+
if (!nextOpen && activeIndex !== null) {
|
|
3163
|
+
const activeOption = itemDomElements.current[activeIndex];
|
|
3164
|
+
queueMicrotask(() => {
|
|
3165
|
+
activeOption === null || activeOption === void 0 || activeOption.setAttribute("tabindex", "-1");
|
|
3166
|
+
});
|
|
3167
|
+
}
|
|
3168
|
+
if (nextOpen && reason === "trigger-focus") {
|
|
3169
|
+
allowTouchToCloseRef.current = false;
|
|
3170
|
+
allowTouchToCloseTimeout.start(300, () => {
|
|
3171
|
+
allowTouchToCloseRef.current = true;
|
|
3172
|
+
});
|
|
3173
|
+
} else {
|
|
3174
|
+
allowTouchToCloseRef.current = true;
|
|
3175
|
+
allowTouchToCloseTimeout.clear();
|
|
3176
|
+
}
|
|
3177
|
+
const isKeyboardClick = (reason === "trigger-press" || reason === "item-press") && nativeEvent.detail === 0 && (nativeEvent === null || nativeEvent === void 0 ? void 0 : nativeEvent.isTrusted);
|
|
3178
|
+
const isDismissClose = !nextOpen && (reason === "escape-key" || reason == null);
|
|
3179
|
+
function changeState() {
|
|
3180
|
+
var _eventDetails$event;
|
|
3181
|
+
setOpenUnwrapped(nextOpen);
|
|
3182
|
+
setLastOpenChangeReason(reason !== null && reason !== void 0 ? reason : null);
|
|
3183
|
+
openEventRef.current = (_eventDetails$event = eventDetails.event) !== null && _eventDetails$event !== void 0 ? _eventDetails$event : null;
|
|
3184
|
+
}
|
|
3185
|
+
if (reason === "trigger-hover") {
|
|
3186
|
+
setStickIfOpen(true);
|
|
3187
|
+
stickIfOpenTimeout.start(500, () => {
|
|
3188
|
+
setStickIfOpen(false);
|
|
3189
|
+
});
|
|
3190
|
+
ReactDOM$1.flushSync(changeState);
|
|
3191
|
+
} else changeState();
|
|
3192
|
+
if (parent.type === "menubar" && (reason === "trigger-focus" || reason === "focus-out" || reason === "trigger-hover" || reason === "list-navigation" || reason === "sibling-open")) setInstantType("group");
|
|
3193
|
+
else if (isKeyboardClick || isDismissClose) setInstantType(isKeyboardClick ? "click" : "dismiss");
|
|
3194
|
+
else setInstantType(void 0);
|
|
3195
|
+
});
|
|
3196
|
+
React$1.useImperativeHandle(actionsRef, () => ({ unmount: handleUnmount }), [handleUnmount]);
|
|
3197
|
+
let ctx;
|
|
3198
|
+
if (parent.type === "context-menu") ctx = parent.context;
|
|
3199
|
+
React$1.useImperativeHandle(ctx === null || ctx === void 0 ? void 0 : ctx.positionerRef, () => positionerElement, [positionerElement]);
|
|
3200
|
+
React$1.useImperativeHandle(ctx === null || ctx === void 0 ? void 0 : ctx.actionsRef, () => ({ setOpen }), [setOpen]);
|
|
3201
|
+
React$1.useEffect(() => {
|
|
3202
|
+
if (!open) stickIfOpenTimeout.clear();
|
|
3203
|
+
}, [stickIfOpenTimeout, open]);
|
|
3204
|
+
const floatingRootContext = useFloatingRootContext({
|
|
3205
|
+
elements: {
|
|
3206
|
+
reference: triggerElement,
|
|
3207
|
+
floating: positionerElement
|
|
3208
|
+
},
|
|
3209
|
+
open,
|
|
3210
|
+
onOpenChange: setOpen
|
|
3211
|
+
});
|
|
3212
|
+
floatingEvents = floatingRootContext.events;
|
|
3213
|
+
const hover = useHover(floatingRootContext, {
|
|
3214
|
+
enabled: hoverEnabled && openOnHover && !disabled && parent.type !== "context-menu" && (parent.type !== "menubar" || parent.context.hasSubmenuOpen && !open),
|
|
3215
|
+
handleClose: safePolygon({ blockPointerEvents: true }),
|
|
3216
|
+
mouseOnly: true,
|
|
3217
|
+
move: parent.type === "menu",
|
|
3218
|
+
restMs: parent.type === void 0 || parent.type === "menu" && allowMouseEnter ? delay : void 0,
|
|
3219
|
+
delay: parent.type === "menu" ? {
|
|
3220
|
+
open: allowMouseEnter ? delay : 10 ** 10,
|
|
3221
|
+
close: closeDelay
|
|
3222
|
+
} : { close: closeDelay }
|
|
3223
|
+
});
|
|
3224
|
+
const focus = useFocus(floatingRootContext, { enabled: !disabled && !open && parent.type === "menubar" && parent.context.hasSubmenuOpen && !contextMenuContext });
|
|
3225
|
+
const click = useClick(floatingRootContext, {
|
|
3226
|
+
enabled: !disabled && parent.type !== "context-menu",
|
|
3227
|
+
event: open && parent.type === "menubar" ? "click" : "mousedown",
|
|
3228
|
+
toggle: !openOnHover || parent.type !== "menu",
|
|
3229
|
+
ignoreMouse: openOnHover && parent.type === "menu",
|
|
3230
|
+
stickIfOpen: parent.type === void 0 ? stickIfOpen : false
|
|
3231
|
+
});
|
|
3232
|
+
const dismiss = useDismiss(floatingRootContext, {
|
|
3233
|
+
enabled: !disabled,
|
|
3234
|
+
bubbles: closeParentOnEsc && parent.type === "menu",
|
|
3235
|
+
outsidePress() {
|
|
3236
|
+
var _openEventRef$current;
|
|
3237
|
+
if (parent.type !== "context-menu" || ((_openEventRef$current = openEventRef.current) === null || _openEventRef$current === void 0 ? void 0 : _openEventRef$current.type) === "contextmenu") return true;
|
|
3238
|
+
return allowOutsidePressDismissalRef.current;
|
|
3239
|
+
}
|
|
3240
|
+
});
|
|
3241
|
+
const role = useRole(floatingRootContext, { role: "menu" });
|
|
3242
|
+
const direction = useDirection();
|
|
3243
|
+
const listNavigation = useListNavigation(floatingRootContext, {
|
|
3244
|
+
enabled: !disabled,
|
|
3245
|
+
listRef: itemDomElements,
|
|
3246
|
+
activeIndex,
|
|
3247
|
+
nested: parent.type !== void 0,
|
|
3248
|
+
loop,
|
|
3249
|
+
orientation,
|
|
3250
|
+
parentOrientation: parent.type === "menubar" ? parent.context.orientation : void 0,
|
|
3251
|
+
rtl: direction === "rtl",
|
|
3252
|
+
disabledIndices: EMPTY_ARRAY,
|
|
3253
|
+
onNavigate: setActiveIndex,
|
|
3254
|
+
openOnArrowKeyDown: parent.type !== "context-menu"
|
|
3255
|
+
});
|
|
3256
|
+
const typingRef = React$1.useRef(false);
|
|
3257
|
+
const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
|
|
3258
|
+
hover,
|
|
3259
|
+
click,
|
|
3260
|
+
dismiss,
|
|
3261
|
+
focus,
|
|
3262
|
+
role,
|
|
3263
|
+
listNavigation,
|
|
3264
|
+
useTypeahead(floatingRootContext, {
|
|
3265
|
+
listRef: itemLabels,
|
|
3266
|
+
activeIndex,
|
|
3267
|
+
resetMs: 500,
|
|
3268
|
+
onMatch: (index) => {
|
|
3269
|
+
if (open && index !== activeIndex) setActiveIndex(index);
|
|
3270
|
+
},
|
|
3271
|
+
onTypingChange: React$1.useCallback((nextTyping) => {
|
|
3272
|
+
typingRef.current = nextTyping;
|
|
3273
|
+
}, [])
|
|
3274
|
+
})
|
|
3275
|
+
]);
|
|
3276
|
+
const mixedToggleHandlers = useMixedToggleClickHandler({
|
|
3277
|
+
open,
|
|
3278
|
+
enabled: parent.type === "menubar",
|
|
3279
|
+
mouseDownAction: "open"
|
|
3280
|
+
});
|
|
3281
|
+
const triggerProps = React$1.useMemo(() => {
|
|
3282
|
+
const referenceProps = mergeProps(getReferenceProps(), {
|
|
3283
|
+
onMouseEnter() {
|
|
3284
|
+
setHoverEnabled(true);
|
|
3285
|
+
},
|
|
3286
|
+
onMouseMove() {
|
|
3287
|
+
setAllowMouseEnter(true);
|
|
3288
|
+
}
|
|
3289
|
+
}, interactionTypeProps, mixedToggleHandlers);
|
|
3290
|
+
delete referenceProps.role;
|
|
3291
|
+
return referenceProps;
|
|
3292
|
+
}, [
|
|
3293
|
+
getReferenceProps,
|
|
3294
|
+
mixedToggleHandlers,
|
|
3295
|
+
setAllowMouseEnter,
|
|
3296
|
+
interactionTypeProps
|
|
3297
|
+
]);
|
|
3298
|
+
const popupProps = React$1.useMemo(() => getFloatingProps({
|
|
3299
|
+
onMouseEnter() {
|
|
3300
|
+
if (!openOnHover || parent.type === "menu") setHoverEnabled(false);
|
|
3301
|
+
},
|
|
3302
|
+
onMouseMove() {
|
|
3303
|
+
setAllowMouseEnter(true);
|
|
3304
|
+
},
|
|
3305
|
+
onClick() {
|
|
3306
|
+
if (openOnHover) setHoverEnabled(false);
|
|
3307
|
+
}
|
|
3308
|
+
}), [
|
|
3309
|
+
getFloatingProps,
|
|
3310
|
+
openOnHover,
|
|
3311
|
+
parent.type,
|
|
3312
|
+
setAllowMouseEnter
|
|
3313
|
+
]);
|
|
3314
|
+
const itemProps = React$1.useMemo(() => getItemProps(), [getItemProps]);
|
|
3315
|
+
const context = React$1.useMemo(() => ({
|
|
3316
|
+
activeIndex,
|
|
3317
|
+
setActiveIndex,
|
|
3318
|
+
allowMouseUpTriggerRef: parent.type ? parent.context.allowMouseUpTriggerRef : EMPTY_REF,
|
|
3319
|
+
floatingRootContext,
|
|
3320
|
+
itemProps,
|
|
3321
|
+
popupProps,
|
|
3322
|
+
triggerProps,
|
|
3323
|
+
itemDomElements,
|
|
3324
|
+
itemLabels,
|
|
3325
|
+
mounted,
|
|
3326
|
+
open,
|
|
3327
|
+
popupRef,
|
|
3328
|
+
positionerRef,
|
|
3329
|
+
setOpen,
|
|
3330
|
+
setPositionerElement,
|
|
3331
|
+
triggerElement,
|
|
3332
|
+
setTriggerElement,
|
|
3333
|
+
transitionStatus,
|
|
3334
|
+
lastOpenChangeReason,
|
|
3335
|
+
instantType,
|
|
3336
|
+
onOpenChangeComplete,
|
|
3337
|
+
setHoverEnabled,
|
|
3338
|
+
typingRef,
|
|
3339
|
+
modal,
|
|
3340
|
+
disabled,
|
|
3341
|
+
parent,
|
|
3342
|
+
rootId,
|
|
3343
|
+
allowMouseEnter,
|
|
3344
|
+
setAllowMouseEnter
|
|
3345
|
+
}), [
|
|
3346
|
+
activeIndex,
|
|
3347
|
+
floatingRootContext,
|
|
3348
|
+
itemProps,
|
|
3349
|
+
popupProps,
|
|
3350
|
+
triggerProps,
|
|
3351
|
+
itemDomElements,
|
|
3352
|
+
itemLabels,
|
|
3353
|
+
mounted,
|
|
3354
|
+
open,
|
|
3355
|
+
positionerRef,
|
|
3356
|
+
setOpen,
|
|
3357
|
+
transitionStatus,
|
|
3358
|
+
triggerElement,
|
|
3359
|
+
setPositionerElement,
|
|
3360
|
+
lastOpenChangeReason,
|
|
3361
|
+
instantType,
|
|
3362
|
+
onOpenChangeComplete,
|
|
3363
|
+
modal,
|
|
3364
|
+
disabled,
|
|
3365
|
+
parent,
|
|
3366
|
+
rootId,
|
|
3367
|
+
allowMouseEnter,
|
|
3368
|
+
setAllowMouseEnter
|
|
3369
|
+
]);
|
|
3370
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRootContext.Provider, {
|
|
3371
|
+
value: context,
|
|
3372
|
+
children
|
|
3373
|
+
});
|
|
3374
|
+
if (parent.type === void 0 || parent.type === "context-menu") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloatingTree, { children: content });
|
|
3375
|
+
return content;
|
|
3376
|
+
};
|
|
3377
|
+
//#endregion
|
|
3378
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/submenu-root/MenuSubmenuRoot.js
|
|
3379
|
+
/**
|
|
3380
|
+
* Groups all parts of a submenu.
|
|
3381
|
+
* Doesn’t render its own HTML element.
|
|
3382
|
+
*
|
|
3383
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
3384
|
+
*/
|
|
3385
|
+
function MenuSubmenuRoot(props) {
|
|
3386
|
+
const { closeParentOnEsc = false } = props;
|
|
3387
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuSubmenuRootContext.Provider, {
|
|
3388
|
+
value: true,
|
|
3389
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRoot, {
|
|
3390
|
+
closeParentOnEsc,
|
|
3391
|
+
...props
|
|
3392
|
+
})
|
|
3393
|
+
});
|
|
3394
|
+
}
|
|
3395
|
+
//#endregion
|
|
3396
|
+
//#region ../../node_modules/@base-ui-components/react/esm/utils/getPseudoElementBounds.js
|
|
3397
|
+
function getPseudoElementBounds(element) {
|
|
3398
|
+
const elementRect = element.getBoundingClientRect();
|
|
3399
|
+
if (process.env.NODE_ENV === "test") return elementRect;
|
|
3400
|
+
const beforeStyles = window.getComputedStyle(element, "::before");
|
|
3401
|
+
const afterStyles = window.getComputedStyle(element, "::after");
|
|
3402
|
+
if (!(beforeStyles.content !== "none" || afterStyles.content !== "none")) return elementRect;
|
|
3403
|
+
const beforeWidth = parseFloat(beforeStyles.width) || 0;
|
|
3404
|
+
const beforeHeight = parseFloat(beforeStyles.height) || 0;
|
|
3405
|
+
const afterWidth = parseFloat(afterStyles.width) || 0;
|
|
3406
|
+
const afterHeight = parseFloat(afterStyles.height) || 0;
|
|
3407
|
+
const totalWidth = Math.max(elementRect.width, beforeWidth, afterWidth);
|
|
3408
|
+
const totalHeight = Math.max(elementRect.height, beforeHeight, afterHeight);
|
|
3409
|
+
const widthDiff = totalWidth - elementRect.width;
|
|
3410
|
+
const heightDiff = totalHeight - elementRect.height;
|
|
3411
|
+
return {
|
|
3412
|
+
left: elementRect.left - widthDiff / 2,
|
|
3413
|
+
right: elementRect.right + widthDiff / 2,
|
|
3414
|
+
top: elementRect.top - heightDiff / 2,
|
|
3415
|
+
bottom: elementRect.bottom + heightDiff / 2
|
|
3416
|
+
};
|
|
3417
|
+
}
|
|
3418
|
+
//#endregion
|
|
3419
|
+
//#region ../../node_modules/@base-ui-components/react/esm/composite/item/useCompositeItem.js
|
|
3420
|
+
function useCompositeItem(params = {}) {
|
|
3421
|
+
const { highlightItemOnHover, highlightedIndex, onHighlightedIndexChange } = useCompositeRootContext();
|
|
3422
|
+
const { ref, index } = useCompositeListItem(params);
|
|
3423
|
+
const isHighlighted = highlightedIndex === index;
|
|
3424
|
+
const itemRef = React$1.useRef(null);
|
|
3425
|
+
const mergedRef = useMergedRefs(ref, itemRef);
|
|
3426
|
+
return {
|
|
3427
|
+
compositeProps: React$1.useMemo(() => ({
|
|
3428
|
+
tabIndex: isHighlighted ? 0 : -1,
|
|
3429
|
+
onFocus() {
|
|
3430
|
+
onHighlightedIndexChange(index);
|
|
3431
|
+
},
|
|
3432
|
+
onMouseMove() {
|
|
3433
|
+
const item = itemRef.current;
|
|
3434
|
+
if (!highlightItemOnHover || !item) return;
|
|
3435
|
+
const disabled = item.hasAttribute("disabled") || item.ariaDisabled === "true";
|
|
3436
|
+
if (!isHighlighted && !disabled) item.focus();
|
|
3437
|
+
}
|
|
3438
|
+
}), [
|
|
3439
|
+
isHighlighted,
|
|
3440
|
+
onHighlightedIndexChange,
|
|
3441
|
+
index,
|
|
3442
|
+
highlightItemOnHover
|
|
3443
|
+
]),
|
|
3444
|
+
compositeRef: mergedRef,
|
|
3445
|
+
index
|
|
3446
|
+
};
|
|
3447
|
+
}
|
|
3448
|
+
//#endregion
|
|
3449
|
+
//#region ../../node_modules/@base-ui-components/react/esm/composite/item/CompositeItem.js
|
|
3450
|
+
/**
|
|
3451
|
+
* @internal
|
|
3452
|
+
*/
|
|
3453
|
+
function CompositeItem(componentProps) {
|
|
3454
|
+
const { render, className, state = EMPTY_OBJECT, props = EMPTY_ARRAY$1, refs = EMPTY_ARRAY$1, metadata, stateAttributesMapping, tag = "div", ...elementProps } = componentProps;
|
|
3455
|
+
const { compositeProps, compositeRef } = useCompositeItem({ metadata });
|
|
3456
|
+
return useRenderElement(tag, componentProps, {
|
|
3457
|
+
state,
|
|
3458
|
+
ref: [...refs, compositeRef],
|
|
3459
|
+
props: [
|
|
3460
|
+
compositeProps,
|
|
3461
|
+
...props,
|
|
3462
|
+
elementProps
|
|
3463
|
+
],
|
|
3464
|
+
stateAttributesMapping
|
|
3465
|
+
});
|
|
3466
|
+
}
|
|
3467
|
+
//#endregion
|
|
3468
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/utils/findRootOwnerId.js
|
|
3469
|
+
function findRootOwnerId(node) {
|
|
3470
|
+
if (isHTMLElement(node) && node.hasAttribute("data-rootownerid")) {
|
|
3471
|
+
var _node$getAttribute;
|
|
3472
|
+
return (_node$getAttribute = node.getAttribute("data-rootownerid")) !== null && _node$getAttribute !== void 0 ? _node$getAttribute : void 0;
|
|
3473
|
+
}
|
|
3474
|
+
if (isLastTraversableNode(node)) return;
|
|
3475
|
+
return findRootOwnerId(getParentNode(node));
|
|
3476
|
+
}
|
|
3477
|
+
//#endregion
|
|
3478
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/trigger/MenuTrigger.js
|
|
3479
|
+
var BOUNDARY_OFFSET = 2;
|
|
3480
|
+
/**
|
|
3481
|
+
* A button that opens the menu.
|
|
3482
|
+
* Renders a `<button>` element.
|
|
3483
|
+
*
|
|
3484
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
3485
|
+
*/
|
|
3486
|
+
var MenuTrigger = /* @__PURE__ */ React$1.forwardRef(function MenuTrigger(componentProps, forwardedRef) {
|
|
3487
|
+
const { render, className, disabled: disabledProp = false, nativeButton = true, ...elementProps } = componentProps;
|
|
3488
|
+
const { triggerProps: rootTriggerProps, disabled: menuDisabled, setTriggerElement, open, allowMouseUpTriggerRef, positionerRef, parent, lastOpenChangeReason, rootId } = useMenuRootContext();
|
|
3489
|
+
const disabled = disabledProp || menuDisabled;
|
|
3490
|
+
const triggerRef = React$1.useRef(null);
|
|
3491
|
+
const allowMouseUpTriggerTimeout = useTimeout();
|
|
3492
|
+
const { getButtonProps, buttonRef } = useButton({
|
|
3493
|
+
disabled,
|
|
3494
|
+
native: nativeButton
|
|
3495
|
+
});
|
|
3496
|
+
const handleRef = useMergedRefs(buttonRef, setTriggerElement);
|
|
3497
|
+
const { events: menuEvents } = useFloatingTree();
|
|
3498
|
+
React$1.useEffect(() => {
|
|
3499
|
+
if (!open && parent.type === void 0) allowMouseUpTriggerRef.current = false;
|
|
3500
|
+
}, [
|
|
3501
|
+
allowMouseUpTriggerRef,
|
|
3502
|
+
open,
|
|
3503
|
+
parent.type
|
|
3504
|
+
]);
|
|
3505
|
+
const handleDocumentMouseUp = useEventCallback((mouseEvent) => {
|
|
3506
|
+
if (!triggerRef.current) return;
|
|
3507
|
+
allowMouseUpTriggerTimeout.clear();
|
|
3508
|
+
allowMouseUpTriggerRef.current = false;
|
|
3509
|
+
const mouseUpTarget = mouseEvent.target;
|
|
3510
|
+
if (contains(triggerRef.current, mouseUpTarget) || contains(positionerRef.current, mouseUpTarget) || mouseUpTarget === triggerRef.current) return;
|
|
3511
|
+
if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === rootId) return;
|
|
3512
|
+
const bounds = getPseudoElementBounds(triggerRef.current);
|
|
3513
|
+
if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) return;
|
|
3514
|
+
menuEvents.emit("close", {
|
|
3515
|
+
domEvent: mouseEvent,
|
|
3516
|
+
reason: "cancel-open"
|
|
3517
|
+
});
|
|
3518
|
+
});
|
|
3519
|
+
React$1.useEffect(() => {
|
|
3520
|
+
if (open && lastOpenChangeReason === "trigger-hover") ownerDocument(triggerRef.current).addEventListener("mouseup", handleDocumentMouseUp, { once: true });
|
|
3521
|
+
}, [
|
|
3522
|
+
open,
|
|
3523
|
+
handleDocumentMouseUp,
|
|
3524
|
+
lastOpenChangeReason
|
|
3525
|
+
]);
|
|
3526
|
+
const isMenubar = parent.type === "menubar";
|
|
3527
|
+
const getTriggerProps = React$1.useCallback((externalProps) => {
|
|
3528
|
+
return mergeProps(isMenubar ? { role: "menuitem" } : {}, {
|
|
3529
|
+
"aria-haspopup": "menu",
|
|
3530
|
+
ref: handleRef,
|
|
3531
|
+
onMouseDown: (event) => {
|
|
3532
|
+
if (open) return;
|
|
3533
|
+
allowMouseUpTriggerTimeout.start(200, () => {
|
|
3534
|
+
allowMouseUpTriggerRef.current = true;
|
|
3535
|
+
});
|
|
3536
|
+
ownerDocument(event.currentTarget).addEventListener("mouseup", handleDocumentMouseUp, { once: true });
|
|
3537
|
+
}
|
|
3538
|
+
}, externalProps, getButtonProps);
|
|
3539
|
+
}, [
|
|
3540
|
+
getButtonProps,
|
|
3541
|
+
handleRef,
|
|
3542
|
+
open,
|
|
3543
|
+
allowMouseUpTriggerRef,
|
|
3544
|
+
allowMouseUpTriggerTimeout,
|
|
3545
|
+
handleDocumentMouseUp,
|
|
3546
|
+
isMenubar
|
|
3547
|
+
]);
|
|
3548
|
+
const state = React$1.useMemo(() => ({
|
|
3549
|
+
disabled,
|
|
3550
|
+
open
|
|
3551
|
+
}), [disabled, open]);
|
|
3552
|
+
const ref = [
|
|
3553
|
+
triggerRef,
|
|
3554
|
+
forwardedRef,
|
|
3555
|
+
buttonRef
|
|
3556
|
+
];
|
|
3557
|
+
const props = [
|
|
3558
|
+
rootTriggerProps,
|
|
3559
|
+
elementProps,
|
|
3560
|
+
getTriggerProps
|
|
3561
|
+
];
|
|
3562
|
+
const element = useRenderElement("button", componentProps, {
|
|
3563
|
+
enabled: !isMenubar,
|
|
3564
|
+
stateAttributesMapping: pressableTriggerOpenStateMapping,
|
|
3565
|
+
state,
|
|
3566
|
+
ref,
|
|
3567
|
+
props
|
|
3568
|
+
});
|
|
3569
|
+
if (isMenubar) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompositeItem, {
|
|
3570
|
+
tag: "button",
|
|
3571
|
+
render,
|
|
3572
|
+
className,
|
|
3573
|
+
state,
|
|
3574
|
+
refs: ref,
|
|
3575
|
+
props,
|
|
3576
|
+
stateAttributesMapping: pressableTriggerOpenStateMapping
|
|
3577
|
+
});
|
|
3578
|
+
return element;
|
|
3579
|
+
});
|
|
3580
|
+
if (process.env.NODE_ENV !== "production") MenuTrigger.displayName = "MenuTrigger";
|
|
3581
|
+
//#endregion
|
|
3582
|
+
//#region ../../node_modules/@base-ui-components/react/esm/menu/submenu-trigger/MenuSubmenuTrigger.js
|
|
3583
|
+
/**
|
|
3584
|
+
* A menu item that opens a submenu.
|
|
3585
|
+
* Renders a `<div>` element.
|
|
3586
|
+
*
|
|
3587
|
+
* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
|
|
3588
|
+
*/
|
|
3589
|
+
var MenuSubmenuTrigger = /* @__PURE__ */ React$1.forwardRef(function SubmenuTriggerComponent(componentProps, forwardedRef) {
|
|
3590
|
+
const { render, className, label, id: idProp, nativeButton = false, ...elementProps } = componentProps;
|
|
3591
|
+
const id = useBaseUiId(idProp);
|
|
3592
|
+
const { triggerProps: rootTriggerProps, parent, setTriggerElement, open, typingRef, disabled, allowMouseUpTriggerRef } = useMenuRootContext();
|
|
3593
|
+
const menuPositionerContext = useMenuPositionerContext();
|
|
3594
|
+
if (parent.type !== "menu") throw new Error("Base UI: <Menu.SubmenuTrigger> must be placed in <Menu.SubmenuRoot>.");
|
|
3595
|
+
const parentMenuContext = parent.context;
|
|
3596
|
+
const { activeIndex, itemProps, setActiveIndex } = parentMenuContext;
|
|
3597
|
+
const item = useCompositeListItem();
|
|
3598
|
+
const highlighted = activeIndex === item.index;
|
|
3599
|
+
const { events: menuEvents } = useFloatingTree();
|
|
3600
|
+
const { getItemProps, itemRef } = useMenuItem({
|
|
3601
|
+
closeOnClick: false,
|
|
3602
|
+
disabled,
|
|
3603
|
+
highlighted,
|
|
3604
|
+
id,
|
|
3605
|
+
menuEvents,
|
|
3606
|
+
allowMouseUpTriggerRef,
|
|
3607
|
+
typingRef,
|
|
3608
|
+
nativeButton,
|
|
3609
|
+
itemMetadata: React$1.useMemo(() => ({
|
|
3610
|
+
type: "submenu-trigger",
|
|
3611
|
+
setActive: () => setActiveIndex(item.index),
|
|
3612
|
+
allowMouseEnterEnabled: parentMenuContext.allowMouseEnter
|
|
3613
|
+
}), [
|
|
3614
|
+
setActiveIndex,
|
|
3615
|
+
item.index,
|
|
3616
|
+
parentMenuContext.allowMouseEnter
|
|
3617
|
+
]),
|
|
3618
|
+
nodeId: menuPositionerContext === null || menuPositionerContext === void 0 ? void 0 : menuPositionerContext.floatingContext.nodeId
|
|
3619
|
+
});
|
|
3620
|
+
return useRenderElement("div", componentProps, {
|
|
3621
|
+
state: React$1.useMemo(() => ({
|
|
3622
|
+
disabled,
|
|
3623
|
+
highlighted,
|
|
3624
|
+
open
|
|
3625
|
+
}), [
|
|
3626
|
+
disabled,
|
|
3627
|
+
highlighted,
|
|
3628
|
+
open
|
|
3629
|
+
]),
|
|
3630
|
+
ref: [
|
|
3631
|
+
forwardedRef,
|
|
3632
|
+
item.ref,
|
|
3633
|
+
itemRef,
|
|
3634
|
+
setTriggerElement
|
|
3635
|
+
],
|
|
3636
|
+
stateAttributesMapping: triggerOpenStateMapping,
|
|
3637
|
+
props: [
|
|
3638
|
+
rootTriggerProps,
|
|
3639
|
+
itemProps,
|
|
3640
|
+
elementProps,
|
|
3641
|
+
getItemProps,
|
|
3642
|
+
{
|
|
3643
|
+
tabIndex: open || highlighted ? 0 : -1,
|
|
3644
|
+
onBlur() {
|
|
3645
|
+
if (highlighted) setActiveIndex(null);
|
|
3646
|
+
}
|
|
3647
|
+
}
|
|
3648
|
+
]
|
|
3649
|
+
});
|
|
3650
|
+
});
|
|
3651
|
+
if (process.env.NODE_ENV !== "production") MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger";
|
|
3652
|
+
//#endregion
|
|
3653
|
+
//#region ../../node_modules/@base-ui-components/react/esm/use-render/useRender.js
|
|
3654
|
+
/**
|
|
3655
|
+
* Renders a Base UI element.
|
|
3656
|
+
*
|
|
3657
|
+
* @public
|
|
3658
|
+
*/
|
|
3659
|
+
function useRender(params) {
|
|
3660
|
+
var _params$defaultTagNam;
|
|
3661
|
+
return useRenderElement((_params$defaultTagNam = params.defaultTagName) !== null && _params$defaultTagNam !== void 0 ? _params$defaultTagNam : "div", params, params);
|
|
3662
|
+
}
|
|
3663
|
+
//#endregion
|
|
3664
|
+
//#region src/components/DropdownMenu/style/DropdownMenu.module.less
|
|
3665
|
+
var positioner = "positioner__eWf4l";
|
|
3666
|
+
var fixedPositioner = "fixedPositioner__ASeFt";
|
|
3667
|
+
var popup = "popup__UucRm";
|
|
3668
|
+
var backdrop = "backdrop__bBmVf";
|
|
3669
|
+
var item = "item__5a484";
|
|
3670
|
+
var itemLabel = "itemLabel__z75Xr";
|
|
3671
|
+
var itemDescription = "itemDescription__oxy7a";
|
|
3672
|
+
var itemValue = "itemValue__VOv0R";
|
|
3673
|
+
var itemLeadingElements = "itemLeadingElements__5ARFl";
|
|
3674
|
+
var itemTrailingElements = "itemTrailingElements__rx0FW";
|
|
3675
|
+
var group = "group__-plPv";
|
|
3676
|
+
var groupLabel = "groupLabel__OisFc";
|
|
3677
|
+
var radioGroup = "radioGroup__cjmci";
|
|
3678
|
+
var checkboxItemIndicator = "checkboxItemIndicator__6wmLt";
|
|
3679
|
+
var DropdownMenu_module_default = {
|
|
3680
|
+
positioner,
|
|
3681
|
+
fixedPositioner,
|
|
3682
|
+
popup,
|
|
3683
|
+
backdrop,
|
|
3684
|
+
"slide-in": "slide-in__GPz7e",
|
|
3685
|
+
"slide-out": "slide-out__02zSh",
|
|
3686
|
+
"opacity-in": "opacity-in__056Lb",
|
|
3687
|
+
"opacity-out": "opacity-out__COIpb",
|
|
3688
|
+
item,
|
|
3689
|
+
itemLabel,
|
|
3690
|
+
itemDescription,
|
|
3691
|
+
itemValue,
|
|
3692
|
+
itemLeadingElements,
|
|
3693
|
+
itemTrailingElements,
|
|
3694
|
+
group,
|
|
3695
|
+
groupLabel,
|
|
3696
|
+
radioGroup,
|
|
3697
|
+
checkboxItemIndicator
|
|
3698
|
+
};
|
|
3699
|
+
//#endregion
|
|
3700
|
+
//#region src/components/DropdownMenu/primitives/DropdownMenu.primitives.tsx
|
|
3701
|
+
/**
|
|
3702
|
+
* Set of styled and extended primitives for the DropdownMenu component.
|
|
3703
|
+
* Follows radix/base-ui philosophy of having a single element per component.
|
|
3704
|
+
*/
|
|
3705
|
+
/**
|
|
3706
|
+
* Anatomy:
|
|
3707
|
+
*
|
|
3708
|
+
* <Root>
|
|
3709
|
+
* <Trigger />
|
|
3710
|
+
*
|
|
3711
|
+
* <Portal>
|
|
3712
|
+
* <Backdrop />
|
|
3713
|
+
*
|
|
3714
|
+
* <Positioner>
|
|
3715
|
+
* <Popup>
|
|
3716
|
+
* <Item>
|
|
3717
|
+
* <ItemContainer>
|
|
3718
|
+
* <ItemLeadingElements />
|
|
3719
|
+
* <ItemLabel />
|
|
3720
|
+
* <ItemDescription />
|
|
3721
|
+
* <ItemTrailingElements>
|
|
3722
|
+
* <ItemValue />
|
|
3723
|
+
* <ItemSubmenuIcon />
|
|
3724
|
+
* </ItemTrailingElements>
|
|
3725
|
+
* </ItemContainer>
|
|
3726
|
+
* </Item>
|
|
3727
|
+
*
|
|
3728
|
+
* <Group>
|
|
3729
|
+
* <GroupLabel />
|
|
3730
|
+
* <Item />
|
|
3731
|
+
* </Group>
|
|
3732
|
+
*
|
|
3733
|
+
* <SubmenuRoot>
|
|
3734
|
+
* <SubmenuTrigger>
|
|
3735
|
+
* <ItemContainer />
|
|
3736
|
+
* </SubmenuTrigger>
|
|
3737
|
+
* <Portal>
|
|
3738
|
+
* <Backdrop />
|
|
3739
|
+
* <Positioner>
|
|
3740
|
+
* <Popup />
|
|
3741
|
+
* </Positioner>
|
|
3742
|
+
* </Portal>
|
|
3743
|
+
* </SubmenuRoot>
|
|
3744
|
+
* </Popup>
|
|
3745
|
+
* </Positioner>
|
|
3746
|
+
* </Portal>
|
|
3747
|
+
* </Root>
|
|
3748
|
+
*/
|
|
3749
|
+
var Root = MenuRoot;
|
|
3750
|
+
/**
|
|
3751
|
+
* Extends base-ui Menu.Trigger component to use children as the trigger element by default.
|
|
3752
|
+
*/
|
|
3753
|
+
var Trigger = forwardRef(function Trigger({ children, ...props }, ref) {
|
|
3754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuTrigger, {
|
|
3755
|
+
render: children,
|
|
3756
|
+
ref,
|
|
3757
|
+
...props
|
|
3758
|
+
});
|
|
3759
|
+
});
|
|
3760
|
+
/**
|
|
3761
|
+
* Extends base-ui Menu.Portal component to use our portals slot.
|
|
3762
|
+
*/
|
|
3763
|
+
function Portal(props) {
|
|
3764
|
+
const portalElement = usePortalElement();
|
|
3765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPortal, {
|
|
3766
|
+
container: portalElement,
|
|
3767
|
+
...props
|
|
3768
|
+
});
|
|
3769
|
+
}
|
|
3770
|
+
/**
|
|
3771
|
+
* Context for whether the positioner is inside a submenu.
|
|
3772
|
+
*/
|
|
3773
|
+
var submenuContext = createContext(false);
|
|
3774
|
+
/**
|
|
3775
|
+
* Styled base-ui Menu.Backdrop
|
|
3776
|
+
*/
|
|
3777
|
+
function Backdrop(props) {
|
|
3778
|
+
const isSubmenu = useContext(submenuContext);
|
|
3779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuBackdrop, {
|
|
3780
|
+
className: DropdownMenu_module_default.backdrop,
|
|
3781
|
+
"data-backdrop": isSubmenu ? "submenu" : "root",
|
|
3782
|
+
...props
|
|
3783
|
+
});
|
|
3784
|
+
}
|
|
3785
|
+
var FixedPositioner = forwardRef(function StaticPositioner(props, ref) {
|
|
3786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
3787
|
+
ref,
|
|
3788
|
+
className: DropdownMenu_module_default.fixedPositioner,
|
|
3789
|
+
...props,
|
|
3790
|
+
style: void 0
|
|
3791
|
+
});
|
|
3792
|
+
});
|
|
3793
|
+
/**
|
|
3794
|
+
* Extends base-ui Menu.Positioner component to use bottom sheet on mobile.
|
|
3795
|
+
*/
|
|
3796
|
+
function Positioner(props) {
|
|
3797
|
+
const shouldRenderBottomSheet = !useBreakpointMatch("medium-s");
|
|
3798
|
+
const isSubmenu = useContext(submenuContext);
|
|
3799
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPositioner, {
|
|
3800
|
+
render: shouldRenderBottomSheet ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FixedPositioner, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: DropdownMenu_module_default.positioner }),
|
|
3801
|
+
collisionAvoidance: {
|
|
3802
|
+
side: "shift",
|
|
3803
|
+
align: "shift"
|
|
3804
|
+
},
|
|
3805
|
+
collisionPadding: 24,
|
|
3806
|
+
sideOffset: isSubmenu ? 12 : void 0,
|
|
3807
|
+
...props
|
|
3808
|
+
});
|
|
3809
|
+
}
|
|
3810
|
+
/**
|
|
3811
|
+
* Styled base-ui Menu.Popup
|
|
3812
|
+
*/
|
|
3813
|
+
function Popup({ dataset, preplyDsComponent, ...props }) {
|
|
3814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPopup, {
|
|
3815
|
+
className: DropdownMenu_module_default.popup,
|
|
3816
|
+
tabIndex: 0,
|
|
3817
|
+
...getDatasetProps(dataset, { preplyDsComponent }),
|
|
3818
|
+
...props
|
|
3819
|
+
});
|
|
3820
|
+
}
|
|
3821
|
+
var itemDescriptionIdCtx = createContext("");
|
|
3822
|
+
/**
|
|
3823
|
+
* Item container.
|
|
3824
|
+
* By default will render a div, but can be modified via `render` prop,
|
|
3825
|
+
* see https://base-ui.com/react/utils/use-render
|
|
3826
|
+
*
|
|
3827
|
+
* @example
|
|
3828
|
+
* <ItemContainer>
|
|
3829
|
+
* Will render div
|
|
3830
|
+
* </ItemContainer>
|
|
3831
|
+
*
|
|
3832
|
+
* @example
|
|
3833
|
+
* <ItemContainer render={<a href="#" />}>
|
|
3834
|
+
* Will render anchor
|
|
3835
|
+
* </ItemContainer>
|
|
3836
|
+
*
|
|
3837
|
+
* @example
|
|
3838
|
+
* <ItemContainer as={<Link to="/" />}>
|
|
3839
|
+
* Will render custom element
|
|
3840
|
+
* </ItemContainer>
|
|
3841
|
+
*/
|
|
3842
|
+
var ItemContainer = forwardRef(function ItemContainer({ dataset, render, ...props }, ref) {
|
|
3843
|
+
const descriptionId = useId();
|
|
3844
|
+
const element = useRender({
|
|
3845
|
+
render,
|
|
3846
|
+
ref,
|
|
3847
|
+
defaultTagName: "div",
|
|
3848
|
+
props: {
|
|
3849
|
+
className: DropdownMenu_module_default.item,
|
|
3850
|
+
"aria-describedby": descriptionId,
|
|
3851
|
+
...getDatasetProps(dataset),
|
|
3852
|
+
...props
|
|
3853
|
+
}
|
|
3854
|
+
});
|
|
3855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(itemDescriptionIdCtx.Provider, {
|
|
3856
|
+
value: descriptionId,
|
|
3857
|
+
children: element
|
|
3858
|
+
});
|
|
3859
|
+
});
|
|
3860
|
+
/**
|
|
3861
|
+
* Extends base-ui Menu.Item component to use children as the item element by default.
|
|
3862
|
+
*/
|
|
3863
|
+
function Item({ children, ...props }) {
|
|
3864
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
|
|
3865
|
+
render: children,
|
|
3866
|
+
...props
|
|
3867
|
+
});
|
|
3868
|
+
}
|
|
3869
|
+
/**
|
|
3870
|
+
* Container for leading elements, such as an icon, image or avatar.
|
|
3871
|
+
*/
|
|
3872
|
+
function ItemLeadingElements(props) {
|
|
3873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
3874
|
+
className: DropdownMenu_module_default.itemLeadingElements,
|
|
3875
|
+
...props
|
|
3876
|
+
});
|
|
3877
|
+
}
|
|
3878
|
+
/**
|
|
3879
|
+
* Container for trailing elements, such as a value or a submenu icon.
|
|
3880
|
+
*/
|
|
3881
|
+
function ItemTrailingElements(props) {
|
|
3882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
3883
|
+
className: DropdownMenu_module_default.itemTrailingElements,
|
|
3884
|
+
...props
|
|
3885
|
+
});
|
|
3886
|
+
}
|
|
3887
|
+
/**
|
|
3888
|
+
* Item label
|
|
3889
|
+
*/
|
|
3890
|
+
function ItemLabel(props) {
|
|
3891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
3892
|
+
className: DropdownMenu_module_default.itemLabel,
|
|
3893
|
+
...props
|
|
3894
|
+
});
|
|
3895
|
+
}
|
|
3896
|
+
/**
|
|
3897
|
+
* Item description
|
|
3898
|
+
*/
|
|
3899
|
+
function ItemDescription(props) {
|
|
3900
|
+
const descriptionId = useContext(itemDescriptionIdCtx);
|
|
3901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
3902
|
+
className: DropdownMenu_module_default.itemDescription,
|
|
3903
|
+
id: descriptionId,
|
|
3904
|
+
"aria-hidden": true,
|
|
3905
|
+
...props
|
|
3906
|
+
});
|
|
3907
|
+
}
|
|
3908
|
+
/**
|
|
3909
|
+
* Item value
|
|
3910
|
+
*/
|
|
3911
|
+
var ItemValue = forwardRef(function ItemValue(props, ref) {
|
|
3912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
3913
|
+
className: DropdownMenu_module_default.itemValue,
|
|
3914
|
+
...props,
|
|
3915
|
+
ref
|
|
3916
|
+
});
|
|
3917
|
+
});
|
|
3918
|
+
/**
|
|
3919
|
+
* Item submenu icon
|
|
3920
|
+
*/
|
|
3921
|
+
function ItemSubmenuIcon(props) {
|
|
3922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
|
|
3923
|
+
svg: TokyoUIChevronRight,
|
|
3924
|
+
size: "16",
|
|
3925
|
+
accent: "tertiary",
|
|
3926
|
+
...props
|
|
3927
|
+
});
|
|
3928
|
+
}
|
|
3929
|
+
/**
|
|
3930
|
+
* Styled base-ui Menu.Group
|
|
3931
|
+
*/
|
|
3932
|
+
var Group = forwardRef(function Group({ dataset, ...props }, ref) {
|
|
3933
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuGroup, {
|
|
3934
|
+
className: DropdownMenu_module_default.group,
|
|
3935
|
+
...getDatasetProps(dataset),
|
|
3936
|
+
ref,
|
|
3937
|
+
...props
|
|
3938
|
+
});
|
|
3939
|
+
});
|
|
3940
|
+
/**
|
|
3941
|
+
* Styled base-ui Menu.GroupLabel
|
|
3942
|
+
*/
|
|
3943
|
+
function GroupLabel(props) {
|
|
3944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuGroupLabel, {
|
|
3945
|
+
className: DropdownMenu_module_default.groupLabel,
|
|
3946
|
+
...props
|
|
3947
|
+
});
|
|
3948
|
+
}
|
|
3949
|
+
/**
|
|
3950
|
+
* Extends base-ui Menu.SubmenuRoot to not open on hover on mobile.
|
|
3951
|
+
*/
|
|
3952
|
+
function SubmenuRoot(props) {
|
|
3953
|
+
const shouldRenderBottomSheet = !useBreakpointMatch("medium-s");
|
|
3954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(submenuContext.Provider, {
|
|
3955
|
+
value: true,
|
|
3956
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuSubmenuRoot, {
|
|
3957
|
+
openOnHover: !shouldRenderBottomSheet,
|
|
3958
|
+
...props
|
|
3959
|
+
})
|
|
3960
|
+
});
|
|
3961
|
+
}
|
|
3962
|
+
/**
|
|
3963
|
+
* Extends base-ui Menu.SubmenuTrigger to use children as the trigger element by default.
|
|
3964
|
+
*/
|
|
3965
|
+
function SubmenuTrigger({ children, ...props }) {
|
|
3966
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuSubmenuTrigger, {
|
|
3967
|
+
render: children,
|
|
3968
|
+
...props
|
|
3969
|
+
});
|
|
3970
|
+
}
|
|
3971
|
+
var RadioGroup = forwardRef(function RadioGroup(props, ref) {
|
|
3972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRadioGroup, {
|
|
3973
|
+
className: DropdownMenu_module_default.radioGroup,
|
|
3974
|
+
ref,
|
|
3975
|
+
...props
|
|
3976
|
+
});
|
|
3977
|
+
});
|
|
3978
|
+
function RadioItem({ children, ...props }) {
|
|
3979
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRadioItem, {
|
|
3980
|
+
render: children,
|
|
3981
|
+
...props
|
|
3982
|
+
});
|
|
3983
|
+
}
|
|
3984
|
+
function RadioItemIndicator(props) {
|
|
3985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuRadioItemIndicator, {
|
|
3986
|
+
render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
|
|
3987
|
+
svg: TokyoUICheck,
|
|
3988
|
+
size: "24"
|
|
3989
|
+
}),
|
|
3990
|
+
...props
|
|
3991
|
+
});
|
|
3992
|
+
}
|
|
3993
|
+
function CheckboxItem({ children, ...props }) {
|
|
3994
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuCheckboxItem, {
|
|
3995
|
+
render: children,
|
|
3996
|
+
...props
|
|
3997
|
+
});
|
|
3998
|
+
}
|
|
3999
|
+
function CheckboxItemIndicator(props) {
|
|
4000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuCheckboxItemIndicator, {
|
|
4001
|
+
className: DropdownMenu_module_default.checkboxItemIndicator,
|
|
4002
|
+
keepMounted: true,
|
|
4003
|
+
...props
|
|
4004
|
+
});
|
|
4005
|
+
}
|
|
4006
|
+
//#endregion
|
|
4007
|
+
export { Trigger as C, SubmenuTrigger as S, RadioGroup as _, GroupLabel as a, Root as b, ItemDescription as c, ItemSubmenuIcon as d, ItemTrailingElements as f, Positioner as g, Portal as h, Group as i, ItemLabel as l, Popup as m, CheckboxItem as n, Item as o, ItemValue as p, CheckboxItemIndicator as r, ItemContainer as s, Backdrop as t, ItemLeadingElements as u, RadioItem as v, MenuRadioItemIndicator as w, SubmenuRoot as x, RadioItemIndicator as y };
|