991 lines
55 KiB
JavaScript
991 lines
55 KiB
JavaScript
import $epM9y$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
|
|
import {useState as $epM9y$useState, useRef as $epM9y$useRef, useEffect as $epM9y$useEffect, createElement as $epM9y$createElement, useCallback as $epM9y$useCallback, forwardRef as $epM9y$forwardRef, Fragment as $epM9y$Fragment} from "react";
|
|
import {composeEventHandlers as $epM9y$composeEventHandlers} from "@radix-ui/primitive";
|
|
import {createCollection as $epM9y$createCollection} from "@radix-ui/react-collection";
|
|
import {useComposedRefs as $epM9y$useComposedRefs, composeRefs as $epM9y$composeRefs} from "@radix-ui/react-compose-refs";
|
|
import {createContextScope as $epM9y$createContextScope} from "@radix-ui/react-context";
|
|
import {useDirection as $epM9y$useDirection} from "@radix-ui/react-direction";
|
|
import {DismissableLayer as $epM9y$DismissableLayer} from "@radix-ui/react-dismissable-layer";
|
|
import {useFocusGuards as $epM9y$useFocusGuards} from "@radix-ui/react-focus-guards";
|
|
import {FocusScope as $epM9y$FocusScope} from "@radix-ui/react-focus-scope";
|
|
import {useId as $epM9y$useId} from "@radix-ui/react-id";
|
|
import {createPopperScope as $epM9y$createPopperScope, Root as $epM9y$Root, Anchor as $epM9y$Anchor, Content as $epM9y$Content, Arrow as $epM9y$Arrow} from "@radix-ui/react-popper";
|
|
import {Portal as $epM9y$Portal} from "@radix-ui/react-portal";
|
|
import {Presence as $epM9y$Presence} from "@radix-ui/react-presence";
|
|
import {Primitive as $epM9y$Primitive, dispatchDiscreteCustomEvent as $epM9y$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive";
|
|
import {createRovingFocusGroupScope as $epM9y$createRovingFocusGroupScope, Root as $epM9y$Root1, Item as $epM9y$Item} from "@radix-ui/react-roving-focus";
|
|
import {Slot as $epM9y$Slot} from "@radix-ui/react-slot";
|
|
import {useCallbackRef as $epM9y$useCallbackRef} from "@radix-ui/react-use-callback-ref";
|
|
import {hideOthers as $epM9y$hideOthers} from "aria-hidden";
|
|
import {RemoveScroll as $epM9y$RemoveScroll} from "react-remove-scroll";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const $6cc32821e9371a1c$var$SELECTION_KEYS = [
|
|
'Enter',
|
|
' '
|
|
];
|
|
const $6cc32821e9371a1c$var$FIRST_KEYS = [
|
|
'ArrowDown',
|
|
'PageUp',
|
|
'Home'
|
|
];
|
|
const $6cc32821e9371a1c$var$LAST_KEYS = [
|
|
'ArrowUp',
|
|
'PageDown',
|
|
'End'
|
|
];
|
|
const $6cc32821e9371a1c$var$FIRST_LAST_KEYS = [
|
|
...$6cc32821e9371a1c$var$FIRST_KEYS,
|
|
...$6cc32821e9371a1c$var$LAST_KEYS
|
|
];
|
|
const $6cc32821e9371a1c$var$SUB_OPEN_KEYS = {
|
|
ltr: [
|
|
...$6cc32821e9371a1c$var$SELECTION_KEYS,
|
|
'ArrowRight'
|
|
],
|
|
rtl: [
|
|
...$6cc32821e9371a1c$var$SELECTION_KEYS,
|
|
'ArrowLeft'
|
|
]
|
|
};
|
|
const $6cc32821e9371a1c$var$SUB_CLOSE_KEYS = {
|
|
ltr: [
|
|
'ArrowLeft'
|
|
],
|
|
rtl: [
|
|
'ArrowRight'
|
|
]
|
|
};
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* Menu
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$MENU_NAME = 'Menu';
|
|
const [$6cc32821e9371a1c$var$Collection, $6cc32821e9371a1c$var$useCollection, $6cc32821e9371a1c$var$createCollectionScope] = $epM9y$createCollection($6cc32821e9371a1c$var$MENU_NAME);
|
|
const [$6cc32821e9371a1c$var$createMenuContext, $6cc32821e9371a1c$export$4027731b685e72eb] = $epM9y$createContextScope($6cc32821e9371a1c$var$MENU_NAME, [
|
|
$6cc32821e9371a1c$var$createCollectionScope,
|
|
$epM9y$createPopperScope,
|
|
$epM9y$createRovingFocusGroupScope
|
|
]);
|
|
const $6cc32821e9371a1c$var$usePopperScope = $epM9y$createPopperScope();
|
|
const $6cc32821e9371a1c$var$useRovingFocusGroupScope = $epM9y$createRovingFocusGroupScope();
|
|
const [$6cc32821e9371a1c$var$MenuProvider, $6cc32821e9371a1c$var$useMenuContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
|
|
const [$6cc32821e9371a1c$var$MenuRootProvider, $6cc32821e9371a1c$var$useMenuRootContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME);
|
|
const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{
|
|
const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true } = props;
|
|
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
const [content, setContent] = $epM9y$useState(null);
|
|
const isUsingKeyboardRef = $epM9y$useRef(false);
|
|
const handleOpenChange = $epM9y$useCallbackRef(onOpenChange);
|
|
const direction = $epM9y$useDirection(dir);
|
|
$epM9y$useEffect(()=>{
|
|
// Capture phase ensures we set the boolean before any side effects execute
|
|
// in response to the key or pointer event as they might depend on this value.
|
|
const handleKeyDown = ()=>{
|
|
isUsingKeyboardRef.current = true;
|
|
document.addEventListener('pointerdown', handlePointer, {
|
|
capture: true,
|
|
once: true
|
|
});
|
|
document.addEventListener('pointermove', handlePointer, {
|
|
capture: true,
|
|
once: true
|
|
});
|
|
};
|
|
const handlePointer = ()=>isUsingKeyboardRef.current = false
|
|
;
|
|
document.addEventListener('keydown', handleKeyDown, {
|
|
capture: true
|
|
});
|
|
return ()=>{
|
|
document.removeEventListener('keydown', handleKeyDown, {
|
|
capture: true
|
|
});
|
|
document.removeEventListener('pointerdown', handlePointer, {
|
|
capture: true
|
|
});
|
|
document.removeEventListener('pointermove', handlePointer, {
|
|
capture: true
|
|
});
|
|
};
|
|
}, []);
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Root, popperScope, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuProvider, {
|
|
scope: __scopeMenu,
|
|
open: open,
|
|
onOpenChange: handleOpenChange,
|
|
content: content,
|
|
onContentChange: setContent
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootProvider, {
|
|
scope: __scopeMenu,
|
|
onClose: $epM9y$useCallback(()=>handleOpenChange(false)
|
|
, [
|
|
handleOpenChange
|
|
]),
|
|
isUsingKeyboardRef: isUsingKeyboardRef,
|
|
dir: direction,
|
|
modal: modal
|
|
}, children)));
|
|
};
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$d9b273488cd8ce6f, {
|
|
displayName: $6cc32821e9371a1c$var$MENU_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuAnchor
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ANCHOR_NAME = 'MenuAnchor';
|
|
const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , ...anchorProps } = props;
|
|
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Anchor, $epM9y$babelruntimehelpersesmextends({}, popperScope, anchorProps, {
|
|
ref: forwardedRef
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$9fa5ebd18bee4d43, {
|
|
displayName: $6cc32821e9371a1c$var$ANCHOR_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuPortal
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$PORTAL_NAME = 'MenuPortal';
|
|
const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, {
|
|
forceMount: undefined
|
|
});
|
|
const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{
|
|
const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container } = props;
|
|
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$PortalProvider, {
|
|
scope: __scopeMenu,
|
|
forceMount: forceMount
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$Presence, {
|
|
present: forceMount || context.open
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$Portal, {
|
|
asChild: true,
|
|
container: container
|
|
}, children)));
|
|
};
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$793392f970497feb, {
|
|
displayName: $6cc32821e9371a1c$var$PORTAL_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuContent
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent';
|
|
const [$6cc32821e9371a1c$var$MenuContentProvider, $6cc32821e9371a1c$var$useMenuContentContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$CONTENT_NAME);
|
|
const $6cc32821e9371a1c$export$479f0f2f71193efe = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
|
|
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Provider, {
|
|
scope: props.__scopeMenu
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$Presence, {
|
|
present: forceMount || context.open
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Slot, {
|
|
scope: props.__scopeMenu
|
|
}, rootContext.modal ? /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootContentModal, $epM9y$babelruntimehelpersesmextends({}, contentProps, {
|
|
ref: forwardedRef
|
|
})) : /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuRootContentNonModal, $epM9y$babelruntimehelpersesmextends({}, contentProps, {
|
|
ref: forwardedRef
|
|
})))));
|
|
});
|
|
/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuRootContentModal = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
const ref = $epM9y$useRef(null);
|
|
const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent`
|
|
$epM9y$useEffect(()=>{
|
|
const content = ref.current;
|
|
if (content) return $epM9y$hideOthers(content);
|
|
}, []);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentImpl, $epM9y$babelruntimehelpersesmextends({}, props, {
|
|
ref: composedRefs // we make sure we're not trapping once it's been closed
|
|
,
|
|
trapFocus: context.open // make sure to only disable pointer events when open
|
|
,
|
|
disableOutsidePointerEvents: context.open,
|
|
disableOutsideScroll: true // When focus is trapped, a `focusout` event may still happen.
|
|
,
|
|
onFocusOutside: $epM9y$composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault()
|
|
, {
|
|
checkForDefaultPrevented: false
|
|
}),
|
|
onDismiss: ()=>context.onOpenChange(false)
|
|
}));
|
|
});
|
|
const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentImpl, $epM9y$babelruntimehelpersesmextends({}, props, {
|
|
ref: forwardedRef,
|
|
trapFocus: false,
|
|
disableOutsidePointerEvents: false,
|
|
disableOutsideScroll: false,
|
|
onDismiss: ()=>context.onOpenChange(false)
|
|
}));
|
|
});
|
|
/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuContentImpl = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEntryFocus: onEntryFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , ...contentProps } = props;
|
|
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
|
|
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu);
|
|
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
|
|
const getItems = $6cc32821e9371a1c$var$useCollection(__scopeMenu);
|
|
const [currentItemId, setCurrentItemId] = $epM9y$useState(null);
|
|
const contentRef = $epM9y$useRef(null);
|
|
const composedRefs = $epM9y$useComposedRefs(forwardedRef, contentRef, context.onContentChange);
|
|
const timerRef = $epM9y$useRef(0);
|
|
const searchRef = $epM9y$useRef('');
|
|
const pointerGraceTimerRef = $epM9y$useRef(0);
|
|
const pointerGraceIntentRef = $epM9y$useRef(null);
|
|
const pointerDirRef = $epM9y$useRef('right');
|
|
const lastPointerXRef = $epM9y$useRef(0);
|
|
const ScrollLockWrapper = disableOutsideScroll ? $epM9y$RemoveScroll : $epM9y$Fragment;
|
|
const scrollLockWrapperProps = disableOutsideScroll ? {
|
|
as: $epM9y$Slot,
|
|
allowPinchZoom: true
|
|
} : undefined;
|
|
const handleTypeaheadSearch = (key)=>{
|
|
var _items$find, _items$find2;
|
|
const search = searchRef.current + key;
|
|
const items = getItems().filter((item)=>!item.disabled
|
|
);
|
|
const currentItem = document.activeElement;
|
|
const currentMatch = (_items$find = items.find((item)=>item.ref.current === currentItem
|
|
)) === null || _items$find === void 0 ? void 0 : _items$find.textValue;
|
|
const values = items.map((item)=>item.textValue
|
|
);
|
|
const nextMatch = $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch);
|
|
const newItem = (_items$find2 = items.find((item)=>item.textValue === nextMatch
|
|
)) === null || _items$find2 === void 0 ? void 0 : _items$find2.ref.current; // Reset `searchRef` 1 second after it was last updated
|
|
(function updateSearch(value) {
|
|
searchRef.current = value;
|
|
window.clearTimeout(timerRef.current);
|
|
if (value !== '') timerRef.current = window.setTimeout(()=>updateSearch('')
|
|
, 1000);
|
|
})(search);
|
|
if (newItem) /**
|
|
* Imperative focus during keydown is risky so we prevent React's batching updates
|
|
* to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
|
|
*/ setTimeout(()=>newItem.focus()
|
|
);
|
|
};
|
|
$epM9y$useEffect(()=>{
|
|
return ()=>window.clearTimeout(timerRef.current)
|
|
;
|
|
}, []); // Make sure the whole tree has focus guards as our `MenuContent` may be
|
|
// the last element in the DOM (beacuse of the `Portal`)
|
|
$epM9y$useFocusGuards();
|
|
const isPointerMovingToSubmenu = $epM9y$useCallback((event)=>{
|
|
var _pointerGraceIntentRe, _pointerGraceIntentRe2;
|
|
const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side);
|
|
return isMovingTowards && $6cc32821e9371a1c$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area);
|
|
}, []);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentProvider, {
|
|
scope: __scopeMenu,
|
|
searchRef: searchRef,
|
|
onItemEnter: $epM9y$useCallback((event)=>{
|
|
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
}, [
|
|
isPointerMovingToSubmenu
|
|
]),
|
|
onItemLeave: $epM9y$useCallback((event)=>{
|
|
var _contentRef$current;
|
|
if (isPointerMovingToSubmenu(event)) return;
|
|
(_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus();
|
|
setCurrentItemId(null);
|
|
}, [
|
|
isPointerMovingToSubmenu
|
|
]),
|
|
onTriggerLeave: $epM9y$useCallback((event)=>{
|
|
if (isPointerMovingToSubmenu(event)) event.preventDefault();
|
|
}, [
|
|
isPointerMovingToSubmenu
|
|
]),
|
|
pointerGraceTimerRef: pointerGraceTimerRef,
|
|
onPointerGraceIntentChange: $epM9y$useCallback((intent)=>{
|
|
pointerGraceIntentRef.current = intent;
|
|
}, [])
|
|
}, /*#__PURE__*/ $epM9y$createElement(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ $epM9y$createElement($epM9y$FocusScope, {
|
|
asChild: true,
|
|
trapped: trapFocus,
|
|
onMountAutoFocus: $epM9y$composeEventHandlers(onOpenAutoFocus, (event)=>{
|
|
var _contentRef$current2;
|
|
// when opening, explicitly focus the content area only and leave
|
|
// `onEntryFocus` in control of focusing first item
|
|
event.preventDefault();
|
|
(_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.focus();
|
|
}),
|
|
onUnmountAutoFocus: onCloseAutoFocus
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$DismissableLayer, {
|
|
asChild: true,
|
|
disableOutsidePointerEvents: disableOutsidePointerEvents,
|
|
onEscapeKeyDown: onEscapeKeyDown,
|
|
onPointerDownOutside: onPointerDownOutside,
|
|
onFocusOutside: onFocusOutside,
|
|
onInteractOutside: onInteractOutside,
|
|
onDismiss: onDismiss
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$Root1, $epM9y$babelruntimehelpersesmextends({
|
|
asChild: true
|
|
}, rovingFocusGroupScope, {
|
|
dir: rootContext.dir,
|
|
orientation: "vertical",
|
|
loop: loop,
|
|
currentTabStopId: currentItemId,
|
|
onCurrentTabStopIdChange: setCurrentItemId,
|
|
onEntryFocus: $epM9y$composeEventHandlers(onEntryFocus, (event)=>{
|
|
// only focus first item when using keyboard
|
|
if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
|
|
})
|
|
}), /*#__PURE__*/ $epM9y$createElement($epM9y$Content, $epM9y$babelruntimehelpersesmextends({
|
|
role: "menu",
|
|
"aria-orientation": "vertical",
|
|
"data-state": $6cc32821e9371a1c$var$getOpenState(context.open),
|
|
"data-radix-menu-content": "",
|
|
dir: rootContext.dir
|
|
}, popperScope, contentProps, {
|
|
ref: composedRefs,
|
|
style: {
|
|
outline: 'none',
|
|
...contentProps.style
|
|
},
|
|
onKeyDown: $epM9y$composeEventHandlers(contentProps.onKeyDown, (event)=>{
|
|
// submenu key events bubble through portals. We only care about keys in this menu.
|
|
const target = event.target;
|
|
const isKeyDownInside = target.closest('[data-radix-menu-content]') === event.currentTarget;
|
|
const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
|
|
const isCharacterKey = event.key.length === 1;
|
|
if (isKeyDownInside) {
|
|
// menus should not be navigated using tab key so we prevent it
|
|
if (event.key === 'Tab') event.preventDefault();
|
|
if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);
|
|
} // focus first/last item based on key pressed
|
|
const content = contentRef.current;
|
|
if (event.target !== content) return;
|
|
if (!$6cc32821e9371a1c$var$FIRST_LAST_KEYS.includes(event.key)) return;
|
|
event.preventDefault();
|
|
const items = getItems().filter((item)=>!item.disabled
|
|
);
|
|
const candidateNodes = items.map((item)=>item.ref.current
|
|
);
|
|
if ($6cc32821e9371a1c$var$LAST_KEYS.includes(event.key)) candidateNodes.reverse();
|
|
$6cc32821e9371a1c$var$focusFirst(candidateNodes);
|
|
}),
|
|
onBlur: $epM9y$composeEventHandlers(props.onBlur, (event)=>{
|
|
// clear search buffer when leaving the menu
|
|
if (!event.currentTarget.contains(event.target)) {
|
|
window.clearTimeout(timerRef.current);
|
|
searchRef.current = '';
|
|
}
|
|
}),
|
|
onPointerMove: $epM9y$composeEventHandlers(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
|
|
const target = event.target;
|
|
const pointerXHasChanged = lastPointerXRef.current !== event.clientX; // We don't use `event.movementX` for this check because Safari will
|
|
// always return `0` on a pointer event.
|
|
if (event.currentTarget.contains(target) && pointerXHasChanged) {
|
|
const newDir = event.clientX > lastPointerXRef.current ? 'right' : 'left';
|
|
pointerDirRef.current = newDir;
|
|
lastPointerXRef.current = event.clientX;
|
|
}
|
|
}))
|
|
})))))));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$479f0f2f71193efe, {
|
|
displayName: $6cc32821e9371a1c$var$CONTENT_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuGroup
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$GROUP_NAME = 'MenuGroup';
|
|
const $6cc32821e9371a1c$export$22a631d1f72787bb = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , ...groupProps } = props;
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Primitive.div, $epM9y$babelruntimehelpersesmextends({
|
|
role: "group"
|
|
}, groupProps, {
|
|
ref: forwardedRef
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$22a631d1f72787bb, {
|
|
displayName: $6cc32821e9371a1c$var$GROUP_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuLabel
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$LABEL_NAME = 'MenuLabel';
|
|
const $6cc32821e9371a1c$export$dd37bec0e8a99143 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , ...labelProps } = props;
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Primitive.div, $epM9y$babelruntimehelpersesmextends({}, labelProps, {
|
|
ref: forwardedRef
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$dd37bec0e8a99143, {
|
|
displayName: $6cc32821e9371a1c$var$LABEL_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuItem
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_NAME = 'MenuItem';
|
|
const $6cc32821e9371a1c$var$ITEM_SELECT = 'menu.itemSelect';
|
|
const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props;
|
|
const ref = $epM9y$useRef(null);
|
|
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
|
|
const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu);
|
|
const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref);
|
|
const isPointerDownRef = $epM9y$useRef(false);
|
|
const handleSelect = ()=>{
|
|
const menuItem = ref.current;
|
|
if (!disabled && menuItem) {
|
|
const itemSelectEvent = new CustomEvent($6cc32821e9371a1c$var$ITEM_SELECT, {
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
menuItem.addEventListener($6cc32821e9371a1c$var$ITEM_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event)
|
|
, {
|
|
once: true
|
|
});
|
|
$epM9y$dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);
|
|
if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false;
|
|
else rootContext.onClose();
|
|
}
|
|
};
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuItemImpl, $epM9y$babelruntimehelpersesmextends({}, itemProps, {
|
|
ref: composedRefs,
|
|
disabled: disabled,
|
|
onClick: $epM9y$composeEventHandlers(props.onClick, handleSelect),
|
|
onPointerDown: (event)=>{
|
|
var _props$onPointerDown;
|
|
(_props$onPointerDown = props.onPointerDown) === null || _props$onPointerDown === void 0 || _props$onPointerDown.call(props, event);
|
|
isPointerDownRef.current = true;
|
|
},
|
|
onPointerUp: $epM9y$composeEventHandlers(props.onPointerUp, (event)=>{
|
|
var _event$currentTarget;
|
|
// Pointer down can move to a different menu item which should activate it on pointer up.
|
|
// We dispatch a click for selection to allow composition with click based triggers and to
|
|
// prevent Firefox from getting stuck in text selection mode when the menu closes.
|
|
if (!isPointerDownRef.current) (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.click();
|
|
}),
|
|
onKeyDown: $epM9y$composeEventHandlers(props.onKeyDown, (event)=>{
|
|
const isTypingAhead = contentContext.searchRef.current !== '';
|
|
if (disabled || isTypingAhead && event.key === ' ') return;
|
|
if ($6cc32821e9371a1c$var$SELECTION_KEYS.includes(event.key)) {
|
|
event.currentTarget.click();
|
|
/**
|
|
* We prevent default browser behaviour for selection keys as they should trigger
|
|
* a selection only:
|
|
* - prevents space from scrolling the page.
|
|
* - if keydown causes focus to move, prevents keydown from firing on the new target.
|
|
*/ event.preventDefault();
|
|
}
|
|
})
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$2ce376c2cc3355c8, {
|
|
displayName: $6cc32821e9371a1c$var$ITEM_NAME
|
|
});
|
|
/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuItemImpl = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props;
|
|
const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, __scopeMenu);
|
|
const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu);
|
|
const ref = $epM9y$useRef(null);
|
|
const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref);
|
|
const [isFocused, setIsFocused] = $epM9y$useState(false); // get the item's `.textContent` as default strategy for typeahead `textValue`
|
|
const [textContent, setTextContent] = $epM9y$useState('');
|
|
$epM9y$useEffect(()=>{
|
|
const menuItem = ref.current;
|
|
if (menuItem) {
|
|
var _menuItem$textContent;
|
|
setTextContent(((_menuItem$textContent = menuItem.textContent) !== null && _menuItem$textContent !== void 0 ? _menuItem$textContent : '').trim());
|
|
}
|
|
}, [
|
|
itemProps.children
|
|
]);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.ItemSlot, {
|
|
scope: __scopeMenu,
|
|
disabled: disabled,
|
|
textValue: textValue !== null && textValue !== void 0 ? textValue : textContent
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$Item, $epM9y$babelruntimehelpersesmextends({
|
|
asChild: true
|
|
}, rovingFocusGroupScope, {
|
|
focusable: !disabled
|
|
}), /*#__PURE__*/ $epM9y$createElement($epM9y$Primitive.div, $epM9y$babelruntimehelpersesmextends({
|
|
role: "menuitem",
|
|
"data-highlighted": isFocused ? '' : undefined,
|
|
"aria-disabled": disabled || undefined,
|
|
"data-disabled": disabled ? '' : undefined
|
|
}, itemProps, {
|
|
ref: composedRefs,
|
|
onPointerMove: $epM9y$composeEventHandlers(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
|
|
if (disabled) contentContext.onItemLeave(event);
|
|
else {
|
|
contentContext.onItemEnter(event);
|
|
if (!event.defaultPrevented) {
|
|
const item = event.currentTarget;
|
|
item.focus();
|
|
}
|
|
}
|
|
})),
|
|
onPointerLeave: $epM9y$composeEventHandlers(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>contentContext.onItemLeave(event)
|
|
)),
|
|
onFocus: $epM9y$composeEventHandlers(props.onFocus, ()=>setIsFocused(true)
|
|
),
|
|
onBlur: $epM9y$composeEventHandlers(props.onBlur, ()=>setIsFocused(false)
|
|
)
|
|
}))));
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuCheckboxItem
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CHECKBOX_ITEM_NAME = 'MenuCheckboxItem';
|
|
const $6cc32821e9371a1c$export$f6f243521332502d = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { checked: checked = false , onCheckedChange: onCheckedChange , ...checkboxItemProps } = props;
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$ItemIndicatorProvider, {
|
|
scope: props.__scopeMenu,
|
|
checked: checked
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$export$2ce376c2cc3355c8, $epM9y$babelruntimehelpersesmextends({
|
|
role: "menuitemcheckbox",
|
|
"aria-checked": $6cc32821e9371a1c$var$isIndeterminate(checked) ? 'mixed' : checked
|
|
}, checkboxItemProps, {
|
|
ref: forwardedRef,
|
|
"data-state": $6cc32821e9371a1c$var$getCheckedState(checked),
|
|
onSelect: $epM9y$composeEventHandlers(checkboxItemProps.onSelect, ()=>onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange($6cc32821e9371a1c$var$isIndeterminate(checked) ? true : !checked)
|
|
, {
|
|
checkForDefaultPrevented: false
|
|
})
|
|
})));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$f6f243521332502d, {
|
|
displayName: $6cc32821e9371a1c$var$CHECKBOX_ITEM_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuRadioGroup
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_GROUP_NAME = 'MenuRadioGroup';
|
|
const [$6cc32821e9371a1c$var$RadioGroupProvider, $6cc32821e9371a1c$var$useRadioGroupContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$RADIO_GROUP_NAME, {
|
|
value: undefined,
|
|
onValueChange: ()=>{}
|
|
});
|
|
const $6cc32821e9371a1c$export$ea2200c9eee416b3 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { value: value , onValueChange: onValueChange , ...groupProps } = props;
|
|
const handleValueChange = $epM9y$useCallbackRef(onValueChange);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$RadioGroupProvider, {
|
|
scope: props.__scopeMenu,
|
|
value: value,
|
|
onValueChange: handleValueChange
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$export$22a631d1f72787bb, $epM9y$babelruntimehelpersesmextends({}, groupProps, {
|
|
ref: forwardedRef
|
|
})));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$ea2200c9eee416b3, {
|
|
displayName: $6cc32821e9371a1c$var$RADIO_GROUP_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuRadioItem
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_ITEM_NAME = 'MenuRadioItem';
|
|
const $6cc32821e9371a1c$export$69bd225e9817f6d0 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { value: value , ...radioItemProps } = props;
|
|
const context = $6cc32821e9371a1c$var$useRadioGroupContext($6cc32821e9371a1c$var$RADIO_ITEM_NAME, props.__scopeMenu);
|
|
const checked = value === context.value;
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$ItemIndicatorProvider, {
|
|
scope: props.__scopeMenu,
|
|
checked: checked
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$export$2ce376c2cc3355c8, $epM9y$babelruntimehelpersesmextends({
|
|
role: "menuitemradio",
|
|
"aria-checked": checked
|
|
}, radioItemProps, {
|
|
ref: forwardedRef,
|
|
"data-state": $6cc32821e9371a1c$var$getCheckedState(checked),
|
|
onSelect: $epM9y$composeEventHandlers(radioItemProps.onSelect, ()=>{
|
|
var _context$onValueChang;
|
|
return (_context$onValueChang = context.onValueChange) === null || _context$onValueChang === void 0 ? void 0 : _context$onValueChang.call(context, value);
|
|
}, {
|
|
checkForDefaultPrevented: false
|
|
})
|
|
})));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$69bd225e9817f6d0, {
|
|
displayName: $6cc32821e9371a1c$var$RADIO_ITEM_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuItemIndicator
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME = 'MenuItemIndicator';
|
|
const [$6cc32821e9371a1c$var$ItemIndicatorProvider, $6cc32821e9371a1c$var$useItemIndicatorContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, {
|
|
checked: false
|
|
});
|
|
const $6cc32821e9371a1c$export$a2593e23056970a3 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , forceMount: forceMount , ...itemIndicatorProps } = props;
|
|
const indicatorContext = $6cc32821e9371a1c$var$useItemIndicatorContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, __scopeMenu);
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Presence, {
|
|
present: forceMount || $6cc32821e9371a1c$var$isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$Primitive.span, $epM9y$babelruntimehelpersesmextends({}, itemIndicatorProps, {
|
|
ref: forwardedRef,
|
|
"data-state": $6cc32821e9371a1c$var$getCheckedState(indicatorContext.checked)
|
|
})));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$a2593e23056970a3, {
|
|
displayName: $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuSeparator
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SEPARATOR_NAME = 'MenuSeparator';
|
|
const $6cc32821e9371a1c$export$1cec7dcdd713e220 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , ...separatorProps } = props;
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Primitive.div, $epM9y$babelruntimehelpersesmextends({
|
|
role: "separator",
|
|
"aria-orientation": "horizontal"
|
|
}, separatorProps, {
|
|
ref: forwardedRef
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$1cec7dcdd713e220, {
|
|
displayName: $6cc32821e9371a1c$var$SEPARATOR_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuArrow
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ARROW_NAME = 'MenuArrow';
|
|
const $6cc32821e9371a1c$export$bcdda4773debf5fa = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const { __scopeMenu: __scopeMenu , ...arrowProps } = props;
|
|
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Arrow, $epM9y$babelruntimehelpersesmextends({}, popperScope, arrowProps, {
|
|
ref: forwardedRef
|
|
}));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$bcdda4773debf5fa, {
|
|
displayName: $6cc32821e9371a1c$var$ARROW_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuSub
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_NAME = 'MenuSub';
|
|
const [$6cc32821e9371a1c$var$MenuSubProvider, $6cc32821e9371a1c$var$useMenuSubContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$SUB_NAME);
|
|
const $6cc32821e9371a1c$export$71bdb9d1e2909932 = (props)=>{
|
|
const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange } = props;
|
|
const parentMenuContext = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_NAME, __scopeMenu);
|
|
const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu);
|
|
const [trigger, setTrigger] = $epM9y$useState(null);
|
|
const [content, setContent] = $epM9y$useState(null);
|
|
const handleOpenChange = $epM9y$useCallbackRef(onOpenChange); // Prevent the parent menu from reopening with open submenus.
|
|
$epM9y$useEffect(()=>{
|
|
if (parentMenuContext.open === false) handleOpenChange(false);
|
|
return ()=>handleOpenChange(false)
|
|
;
|
|
}, [
|
|
parentMenuContext.open,
|
|
handleOpenChange
|
|
]);
|
|
return /*#__PURE__*/ $epM9y$createElement($epM9y$Root, popperScope, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuProvider, {
|
|
scope: __scopeMenu,
|
|
open: open,
|
|
onOpenChange: handleOpenChange,
|
|
content: content,
|
|
onContentChange: setContent
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuSubProvider, {
|
|
scope: __scopeMenu,
|
|
contentId: $epM9y$useId(),
|
|
triggerId: $epM9y$useId(),
|
|
trigger: trigger,
|
|
onTriggerChange: setTrigger
|
|
}, children)));
|
|
};
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$71bdb9d1e2909932, {
|
|
displayName: $6cc32821e9371a1c$var$SUB_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuSubTrigger
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_TRIGGER_NAME = 'MenuSubTrigger';
|
|
const $6cc32821e9371a1c$export$5fbbb3ba7297405f = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu);
|
|
const openTimerRef = $epM9y$useRef(null);
|
|
const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange } = contentContext;
|
|
const scope = {
|
|
__scopeMenu: props.__scopeMenu
|
|
};
|
|
const clearOpenTimer = $epM9y$useCallback(()=>{
|
|
if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = null;
|
|
}, []);
|
|
$epM9y$useEffect(()=>clearOpenTimer
|
|
, [
|
|
clearOpenTimer
|
|
]);
|
|
$epM9y$useEffect(()=>{
|
|
const pointerGraceTimer = pointerGraceTimerRef.current;
|
|
return ()=>{
|
|
window.clearTimeout(pointerGraceTimer);
|
|
onPointerGraceIntentChange(null);
|
|
};
|
|
}, [
|
|
pointerGraceTimerRef,
|
|
onPointerGraceIntentChange
|
|
]);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$export$9fa5ebd18bee4d43, $epM9y$babelruntimehelpersesmextends({
|
|
asChild: true
|
|
}, scope), /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuItemImpl, $epM9y$babelruntimehelpersesmextends({
|
|
id: subContext.triggerId,
|
|
"aria-haspopup": "menu",
|
|
"aria-expanded": context.open,
|
|
"aria-controls": subContext.contentId,
|
|
"data-state": $6cc32821e9371a1c$var$getOpenState(context.open)
|
|
}, props, {
|
|
ref: $epM9y$composeRefs(forwardedRef, subContext.onTriggerChange) // This is redundant for mouse users but we cannot determine pointer type from
|
|
,
|
|
onClick: (event)=>{
|
|
var _props$onClick;
|
|
(_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event);
|
|
if (props.disabled || event.defaultPrevented) return;
|
|
/**
|
|
* We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)
|
|
* and we rely heavily on `onFocusOutside` for submenus to close when switching
|
|
* between separate submenus.
|
|
*/ event.currentTarget.focus();
|
|
if (!context.open) context.onOpenChange(true);
|
|
},
|
|
onPointerMove: $epM9y$composeEventHandlers(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{
|
|
contentContext.onItemEnter(event);
|
|
if (event.defaultPrevented) return;
|
|
if (!props.disabled && !context.open && !openTimerRef.current) {
|
|
contentContext.onPointerGraceIntentChange(null);
|
|
openTimerRef.current = window.setTimeout(()=>{
|
|
context.onOpenChange(true);
|
|
clearOpenTimer();
|
|
}, 100);
|
|
}
|
|
})),
|
|
onPointerLeave: $epM9y$composeEventHandlers(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>{
|
|
var _context$content;
|
|
clearOpenTimer();
|
|
const contentRect = (_context$content = context.content) === null || _context$content === void 0 ? void 0 : _context$content.getBoundingClientRect();
|
|
if (contentRect) {
|
|
var _context$content2;
|
|
// TODO: make sure to update this when we change positioning logic
|
|
const side = (_context$content2 = context.content) === null || _context$content2 === void 0 ? void 0 : _context$content2.dataset.side;
|
|
const rightSide = side === 'right';
|
|
const bleed = rightSide ? -5 : 5;
|
|
const contentNearEdge = contentRect[rightSide ? 'left' : 'right'];
|
|
const contentFarEdge = contentRect[rightSide ? 'right' : 'left'];
|
|
contentContext.onPointerGraceIntentChange({
|
|
area: [
|
|
// consistently within polygon bounds
|
|
{
|
|
x: event.clientX + bleed,
|
|
y: event.clientY
|
|
},
|
|
{
|
|
x: contentNearEdge,
|
|
y: contentRect.top
|
|
},
|
|
{
|
|
x: contentFarEdge,
|
|
y: contentRect.top
|
|
},
|
|
{
|
|
x: contentFarEdge,
|
|
y: contentRect.bottom
|
|
},
|
|
{
|
|
x: contentNearEdge,
|
|
y: contentRect.bottom
|
|
}
|
|
],
|
|
side: side
|
|
});
|
|
window.clearTimeout(pointerGraceTimerRef.current);
|
|
pointerGraceTimerRef.current = window.setTimeout(()=>contentContext.onPointerGraceIntentChange(null)
|
|
, 300);
|
|
} else {
|
|
contentContext.onTriggerLeave(event);
|
|
if (event.defaultPrevented) return; // There's 100ms where the user may leave an item before the submenu was opened.
|
|
contentContext.onPointerGraceIntentChange(null);
|
|
}
|
|
})),
|
|
onKeyDown: $epM9y$composeEventHandlers(props.onKeyDown, (event)=>{
|
|
const isTypingAhead = contentContext.searchRef.current !== '';
|
|
if (props.disabled || isTypingAhead && event.key === ' ') return;
|
|
if ($6cc32821e9371a1c$var$SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {
|
|
var _context$content3;
|
|
context.onOpenChange(true); // The trigger may hold focus if opened via pointer interaction
|
|
// so we ensure content is given focus again when switching to keyboard.
|
|
(_context$content3 = context.content) === null || _context$content3 === void 0 || _context$content3.focus(); // prevent window from scrolling
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
})));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$5fbbb3ba7297405f, {
|
|
displayName: $6cc32821e9371a1c$var$SUB_TRIGGER_NAME
|
|
});
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuSubContent
|
|
* -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_CONTENT_NAME = 'MenuSubContent';
|
|
const $6cc32821e9371a1c$export$e7142ab31822bde6 = /*#__PURE__*/ $epM9y$forwardRef((props, forwardedRef)=>{
|
|
const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
const { forceMount: forceMount = portalContext.forceMount , ...subContentProps } = props;
|
|
const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu);
|
|
const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_CONTENT_NAME, props.__scopeMenu);
|
|
const ref = $epM9y$useRef(null);
|
|
const composedRefs = $epM9y$useComposedRefs(forwardedRef, ref);
|
|
return /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Provider, {
|
|
scope: props.__scopeMenu
|
|
}, /*#__PURE__*/ $epM9y$createElement($epM9y$Presence, {
|
|
present: forceMount || context.open
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$Collection.Slot, {
|
|
scope: props.__scopeMenu
|
|
}, /*#__PURE__*/ $epM9y$createElement($6cc32821e9371a1c$var$MenuContentImpl, $epM9y$babelruntimehelpersesmextends({
|
|
id: subContext.contentId,
|
|
"aria-labelledby": subContext.triggerId
|
|
}, subContentProps, {
|
|
ref: composedRefs,
|
|
align: "start",
|
|
side: rootContext.dir === 'rtl' ? 'left' : 'right',
|
|
disableOutsidePointerEvents: false,
|
|
disableOutsideScroll: false,
|
|
trapFocus: false,
|
|
onOpenAutoFocus: (event)=>{
|
|
var _ref$current;
|
|
// when opening a submenu, focus content for keyboard users only
|
|
if (rootContext.isUsingKeyboardRef.current) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
|
|
event.preventDefault();
|
|
} // The menu might close because of focusing another menu item in the parent menu. We
|
|
,
|
|
onCloseAutoFocus: (event)=>event.preventDefault()
|
|
,
|
|
onFocusOutside: $epM9y$composeEventHandlers(props.onFocusOutside, (event)=>{
|
|
// We prevent closing when the trigger is focused to avoid triggering a re-open animation
|
|
// on pointer interaction.
|
|
if (event.target !== subContext.trigger) context.onOpenChange(false);
|
|
}),
|
|
onEscapeKeyDown: $epM9y$composeEventHandlers(props.onEscapeKeyDown, (event)=>{
|
|
rootContext.onClose(); // ensure pressing escape in submenu doesn't escape full screen mode
|
|
event.preventDefault();
|
|
}),
|
|
onKeyDown: $epM9y$composeEventHandlers(props.onKeyDown, (event)=>{
|
|
// Submenu key events bubble through portals. We only care about keys in this menu.
|
|
const isKeyDownInside = event.currentTarget.contains(event.target);
|
|
const isCloseKey = $6cc32821e9371a1c$var$SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);
|
|
if (isKeyDownInside && isCloseKey) {
|
|
var _subContext$trigger;
|
|
context.onOpenChange(false); // We focus manually because we prevented it in `onCloseAutoFocus`
|
|
(_subContext$trigger = subContext.trigger) === null || _subContext$trigger === void 0 || _subContext$trigger.focus(); // prevent window from scrolling
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
})))));
|
|
});
|
|
/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$e7142ab31822bde6, {
|
|
displayName: $6cc32821e9371a1c$var$SUB_CONTENT_NAME
|
|
});
|
|
/* -----------------------------------------------------------------------------------------------*/ function $6cc32821e9371a1c$var$getOpenState(open) {
|
|
return open ? 'open' : 'closed';
|
|
}
|
|
function $6cc32821e9371a1c$var$isIndeterminate(checked) {
|
|
return checked === 'indeterminate';
|
|
}
|
|
function $6cc32821e9371a1c$var$getCheckedState(checked) {
|
|
return $6cc32821e9371a1c$var$isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
|
|
}
|
|
function $6cc32821e9371a1c$var$focusFirst(candidates) {
|
|
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
|
|
for (const candidate of candidates){
|
|
// if focus is already where we want to go, we don't want to keep going through the candidates
|
|
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
candidate.focus();
|
|
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
|
|
}
|
|
}
|
|
/**
|
|
* Wraps an array around itself at a given start index
|
|
* Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
|
|
*/ function $6cc32821e9371a1c$var$wrapArray(array, startIndex) {
|
|
return array.map((_, index)=>array[(startIndex + index) % array.length]
|
|
);
|
|
}
|
|
/**
|
|
* This is the "meat" of the typeahead matching logic. It takes in all the values,
|
|
* the search and the current match, and returns the next match (or `undefined`).
|
|
*
|
|
* We normalize the search because if a user has repeatedly pressed a character,
|
|
* we want the exact same behavior as if we only had that one character
|
|
* (ie. cycle through options starting with that character)
|
|
*
|
|
* We also reorder the values by wrapping the array around the current match.
|
|
* This is so we always look forward from the current match, and picking the first
|
|
* match will always be the correct one.
|
|
*
|
|
* Finally, if the normalized search is exactly one character, we exclude the
|
|
* current match from the values because otherwise it would be the first to match always
|
|
* and focus would never move. This is as opposed to the regular case, where we
|
|
* don't want focus to move if the current match still matches.
|
|
*/ function $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch) {
|
|
const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0]
|
|
);
|
|
const normalizedSearch = isRepeated ? search[0] : search;
|
|
const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
|
|
let wrappedValues = $6cc32821e9371a1c$var$wrapArray(values, Math.max(currentMatchIndex, 0));
|
|
const excludeCurrentMatch = normalizedSearch.length === 1;
|
|
if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v)=>v !== currentMatch
|
|
);
|
|
const nextMatch = wrappedValues.find((value)=>value.toLowerCase().startsWith(normalizedSearch.toLowerCase())
|
|
);
|
|
return nextMatch !== currentMatch ? nextMatch : undefined;
|
|
}
|
|
// Determine if a point is inside of a polygon.
|
|
// Based on https://github.com/substack/point-in-polygon
|
|
function $6cc32821e9371a1c$var$isPointInPolygon(point, polygon) {
|
|
const { x: x , y: y } = point;
|
|
let inside = false;
|
|
for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){
|
|
const xi = polygon[i].x;
|
|
const yi = polygon[i].y;
|
|
const xj = polygon[j].x;
|
|
const yj = polygon[j].y; // prettier-ignore
|
|
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
if (intersect) inside = !inside;
|
|
}
|
|
return inside;
|
|
}
|
|
function $6cc32821e9371a1c$var$isPointerInGraceArea(event, area) {
|
|
if (!area) return false;
|
|
const cursorPos = {
|
|
x: event.clientX,
|
|
y: event.clientY
|
|
};
|
|
return $6cc32821e9371a1c$var$isPointInPolygon(cursorPos, area);
|
|
}
|
|
function $6cc32821e9371a1c$var$whenMouse(handler) {
|
|
return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined
|
|
;
|
|
}
|
|
const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f;
|
|
const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43;
|
|
const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb;
|
|
const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe;
|
|
const $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4 = $6cc32821e9371a1c$export$22a631d1f72787bb;
|
|
const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143;
|
|
const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8;
|
|
const $6cc32821e9371a1c$export$16ce288f89fa631c = $6cc32821e9371a1c$export$f6f243521332502d;
|
|
const $6cc32821e9371a1c$export$a98f0dcb43a68a25 = $6cc32821e9371a1c$export$ea2200c9eee416b3;
|
|
const $6cc32821e9371a1c$export$371ab307eab489c0 = $6cc32821e9371a1c$export$69bd225e9817f6d0;
|
|
const $6cc32821e9371a1c$export$c3468e2714d175fa = $6cc32821e9371a1c$export$a2593e23056970a3;
|
|
const $6cc32821e9371a1c$export$1ff3c3f08ae963c0 = $6cc32821e9371a1c$export$1cec7dcdd713e220;
|
|
const $6cc32821e9371a1c$export$21b07c8f274aebd5 = $6cc32821e9371a1c$export$bcdda4773debf5fa;
|
|
const $6cc32821e9371a1c$export$d7a01e11500dfb6f = $6cc32821e9371a1c$export$71bdb9d1e2909932;
|
|
const $6cc32821e9371a1c$export$2ea8a7a591ac5eac = $6cc32821e9371a1c$export$5fbbb3ba7297405f;
|
|
const $6cc32821e9371a1c$export$6d4de93b380beddf = $6cc32821e9371a1c$export$e7142ab31822bde6;
|
|
|
|
|
|
|
|
|
|
export {$6cc32821e9371a1c$export$4027731b685e72eb as createMenuScope, $6cc32821e9371a1c$export$d9b273488cd8ce6f as Menu, $6cc32821e9371a1c$export$9fa5ebd18bee4d43 as MenuAnchor, $6cc32821e9371a1c$export$793392f970497feb as MenuPortal, $6cc32821e9371a1c$export$479f0f2f71193efe as MenuContent, $6cc32821e9371a1c$export$22a631d1f72787bb as MenuGroup, $6cc32821e9371a1c$export$dd37bec0e8a99143 as MenuLabel, $6cc32821e9371a1c$export$2ce376c2cc3355c8 as MenuItem, $6cc32821e9371a1c$export$f6f243521332502d as MenuCheckboxItem, $6cc32821e9371a1c$export$ea2200c9eee416b3 as MenuRadioGroup, $6cc32821e9371a1c$export$69bd225e9817f6d0 as MenuRadioItem, $6cc32821e9371a1c$export$a2593e23056970a3 as MenuItemIndicator, $6cc32821e9371a1c$export$1cec7dcdd713e220 as MenuSeparator, $6cc32821e9371a1c$export$bcdda4773debf5fa as MenuArrow, $6cc32821e9371a1c$export$71bdb9d1e2909932 as MenuSub, $6cc32821e9371a1c$export$5fbbb3ba7297405f as MenuSubTrigger, $6cc32821e9371a1c$export$e7142ab31822bde6 as MenuSubContent, $6cc32821e9371a1c$export$be92b6f5f03c0fe9 as Root, $6cc32821e9371a1c$export$b688253958b8dfe7 as Anchor, $6cc32821e9371a1c$export$602eac185826482c as Portal, $6cc32821e9371a1c$export$7c6e2c02157bb7d2 as Content, $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4 as Group, $6cc32821e9371a1c$export$b04be29aa201d4f5 as Label, $6cc32821e9371a1c$export$6d08773d2e66f8f2 as Item, $6cc32821e9371a1c$export$16ce288f89fa631c as CheckboxItem, $6cc32821e9371a1c$export$a98f0dcb43a68a25 as RadioGroup, $6cc32821e9371a1c$export$371ab307eab489c0 as RadioItem, $6cc32821e9371a1c$export$c3468e2714d175fa as ItemIndicator, $6cc32821e9371a1c$export$1ff3c3f08ae963c0 as Separator, $6cc32821e9371a1c$export$21b07c8f274aebd5 as Arrow, $6cc32821e9371a1c$export$d7a01e11500dfb6f as Sub, $6cc32821e9371a1c$export$2ea8a7a591ac5eac as SubTrigger, $6cc32821e9371a1c$export$6d4de93b380beddf as SubContent};
|
|
//# sourceMappingURL=index.mjs.map
|