@loke/ui
Version:
2 lines (1 loc) • 23.9 kB
JavaScript
import{createCollection}from"@loke/ui/collection";import{composeEventHandlers}from"@loke/ui/compose-events";import{composeRefs,useComposedRefs}from"@loke/ui/compose-refs";import{createContextScope}from"@loke/ui/context";import{DismissableLayer}from"@loke/ui/dismissable-layer";import{useFocusGuards}from"@loke/ui/focus-guards";import{FocusScope}from"@loke/ui/focus-scope";import*as PopperPrimitive from"@loke/ui/popper";import{createPopperScope}from"@loke/ui/popper";import{Portal as PortalPrimitive}from"@loke/ui/portal";import{Presence}from"@loke/ui/presence";import{dispatchDiscreteCustomEvent,Primitive}from"@loke/ui/primitive";import*as RovingFocusGroup from"@loke/ui/roving-focus";import{createRovingFocusGroupScope}from"@loke/ui/roving-focus";import{createSlot}from"@loke/ui/slot";import{useCallbackRef}from"@loke/ui/use-callback-ref";import{useDirection}from"@loke/ui/use-direction";import{useId}from"@loke/ui/use-id";import{hideOthers}from"aria-hidden";import{forwardRef,useCallback,useEffect,useRef,useState}from"react";import{Fragment}from"react/jsx-runtime";import{RemoveScroll}from"react-remove-scroll";import{jsx}from"react/jsx-runtime";var SELECTION_KEYS=["Enter"," "],FIRST_KEYS=["ArrowDown","PageUp","Home"],LAST_KEYS=["ArrowUp","PageDown","End"],FIRST_LAST_KEYS=[...FIRST_KEYS,...LAST_KEYS],SUB_OPEN_KEYS={ltr:[...SELECTION_KEYS,"ArrowRight"],rtl:[...SELECTION_KEYS,"ArrowLeft"]},SUB_CLOSE_KEYS={ltr:["ArrowLeft"],rtl:["ArrowRight"]},MENU_NAME="Menu",[Collection,useCollection,createCollectionScope]=createCollection(MENU_NAME),[createMenuContext,createMenuScope]=createContextScope(MENU_NAME,[createCollectionScope,createPopperScope,createRovingFocusGroupScope]),usePopperScope=createPopperScope(),useRovingFocusGroupScope=createRovingFocusGroupScope(),[MenuProvider,useMenuContext]=createMenuContext(MENU_NAME),[MenuRootProvider,useMenuRootContext]=createMenuContext(MENU_NAME),Menu=(props)=>{let{__scopeMenu,open=!1,children,dir,onOpenChange,modal=!0}=props,popperScope=usePopperScope(__scopeMenu),[content,setContent]=useState(null),isUsingKeyboardRef=useRef(!1),handleOpenChange=useCallbackRef(onOpenChange),direction=useDirection(dir);return useEffect(()=>{let handleKeyDown=()=>{isUsingKeyboardRef.current=!0,document.addEventListener("pointerdown",handlePointer,{capture:!0,once:!0}),document.addEventListener("pointermove",handlePointer,{capture:!0,once:!0})},handlePointer=()=>isUsingKeyboardRef.current=!1;return document.addEventListener("keydown",handleKeyDown,{capture:!0}),()=>{document.removeEventListener("keydown",handleKeyDown,{capture:!0}),document.removeEventListener("pointerdown",handlePointer,{capture:!0}),document.removeEventListener("pointermove",handlePointer,{capture:!0})}},[]),jsx(PopperPrimitive.Root,{...popperScope,children:jsx(MenuProvider,{content,onContentChange:setContent,onOpenChange:handleOpenChange,open,scope:__scopeMenu,children:jsx(MenuRootProvider,{dir:direction,isUsingKeyboardRef,modal,onClose:useCallback(()=>handleOpenChange(!1),[handleOpenChange]),scope:__scopeMenu,children})})})};Menu.displayName=MENU_NAME;var ANCHOR_NAME="MenuAnchor",MenuAnchor=forwardRef((props,forwardedRef)=>{let{__scopeMenu,...anchorProps}=props,popperScope=usePopperScope(__scopeMenu);return jsx(PopperPrimitive.Anchor,{...popperScope,...anchorProps,ref:forwardedRef})});MenuAnchor.displayName=ANCHOR_NAME;var PORTAL_NAME="MenuPortal",[PortalProvider,usePortalContext]=createMenuContext(PORTAL_NAME,{forceMount:void 0}),MenuPortal=(props)=>{let{__scopeMenu,forceMount,children,container}=props,context=useMenuContext(PORTAL_NAME,__scopeMenu);return jsx(PortalProvider,{forceMount,scope:__scopeMenu,children:jsx(Presence,{present:forceMount||context.open,children:jsx(PortalPrimitive,{asChild:!0,container,children})})})};MenuPortal.displayName=PORTAL_NAME;var CONTENT_NAME="MenuContent",[MenuContentProvider,useMenuContentContext]=createMenuContext(CONTENT_NAME),MenuContent=forwardRef((props,forwardedRef)=>{let portalContext=usePortalContext(CONTENT_NAME,props.__scopeMenu),{forceMount=portalContext.forceMount,...contentProps}=props,context=useMenuContext(CONTENT_NAME,props.__scopeMenu),rootContext=useMenuRootContext(CONTENT_NAME,props.__scopeMenu);return jsx(Collection.Provider,{scope:props.__scopeMenu,children:jsx(Presence,{present:forceMount||context.open,children:jsx(Collection.Slot,{scope:props.__scopeMenu,children:rootContext.modal?jsx(MenuRootContentModal,{...contentProps,ref:forwardedRef}):jsx(MenuRootContentNonModal,{...contentProps,ref:forwardedRef})})})})}),MenuRootContentModal=forwardRef((props,forwardedRef)=>{let context=useMenuContext(CONTENT_NAME,props.__scopeMenu),ref=useRef(null),composedRefs=useComposedRefs(forwardedRef,ref);return useEffect(()=>{let content=ref.current;if(content)return hideOthers(content)},[]),jsx(MenuContentImpl,{...props,disableOutsidePointerEvents:context.open,disableOutsideScroll:!0,onDismiss:()=>context.onOpenChange(!1),onFocusOutside:composeEventHandlers(props.onFocusOutside,(event)=>event.preventDefault(),{checkForDefaultPrevented:!1}),ref:composedRefs,trapFocus:context.open})}),MenuRootContentNonModal=forwardRef((props,forwardedRef)=>{let context=useMenuContext(CONTENT_NAME,props.__scopeMenu);return jsx(MenuContentImpl,{...props,disableOutsidePointerEvents:!1,disableOutsideScroll:!1,onDismiss:()=>context.onOpenChange(!1),ref:forwardedRef,trapFocus:!1})}),Slot=createSlot("MenuContent.ScrollLock"),MenuContentImpl=forwardRef((props,forwardedRef)=>{let{__scopeMenu,loop=!1,trapFocus,onOpenAutoFocus,onCloseAutoFocus,disableOutsidePointerEvents,onEntryFocus,onEscapeKeyDown,onPointerDownOutside,onFocusOutside,onInteractOutside,onDismiss,disableOutsideScroll,...contentProps}=props,context=useMenuContext(CONTENT_NAME,__scopeMenu),rootContext=useMenuRootContext(CONTENT_NAME,__scopeMenu),popperScope=usePopperScope(__scopeMenu),rovingFocusGroupScope=useRovingFocusGroupScope(__scopeMenu),getItems=useCollection(__scopeMenu),[currentItemId,setCurrentItemId]=useState(null),contentRef=useRef(null),composedRefs=useComposedRefs(forwardedRef,contentRef,context.onContentChange),timerRef=useRef(0),searchRef=useRef(""),pointerGraceTimerRef=useRef(0),pointerGraceIntentRef=useRef(null),pointerDirRef=useRef("right"),lastPointerXRef=useRef(0),ScrollLockWrapper=disableOutsideScroll?RemoveScroll:Fragment,scrollLockWrapperProps=disableOutsideScroll?{allowPinchZoom:!0,as:Slot}:void 0,handleTypeaheadSearch=(key)=>{let search=searchRef.current+key,items=getItems().filter((item)=>!item.disabled),currentItem=document.activeElement,currentMatch=items.find((item)=>item.ref.current===currentItem)?.textValue,values=items.map((item)=>item.textValue),nextMatch=getNextMatch(values,search,currentMatch),newItem=items.find((item)=>item.textValue===nextMatch)?.ref.current;if(function updateSearch(value){if(searchRef.current=value,window.clearTimeout(timerRef.current),value!=="")timerRef.current=window.setTimeout(()=>updateSearch(""),1000)}(search),newItem)setTimeout(()=>newItem.focus())};useEffect(()=>{return()=>window.clearTimeout(timerRef.current)},[]),useFocusGuards();let isPointerMovingToSubmenu=useCallback((event)=>{return pointerDirRef.current===pointerGraceIntentRef.current?.side&&isPointerInGraceArea(event,pointerGraceIntentRef.current?.area)},[]);return jsx(MenuContentProvider,{onItemEnter:useCallback((event)=>{if(isPointerMovingToSubmenu(event))event.preventDefault()},[isPointerMovingToSubmenu]),onItemLeave:useCallback((event)=>{if(isPointerMovingToSubmenu(event))return;contentRef.current?.focus(),setCurrentItemId(null)},[isPointerMovingToSubmenu]),onPointerGraceIntentChange:useCallback((intent)=>{pointerGraceIntentRef.current=intent},[]),onTriggerLeave:useCallback((event)=>{if(isPointerMovingToSubmenu(event))event.preventDefault()},[isPointerMovingToSubmenu]),pointerGraceTimerRef,scope:__scopeMenu,searchRef,children:jsx(ScrollLockWrapper,{...scrollLockWrapperProps,children:jsx(FocusScope,{asChild:!0,onMountAutoFocus:composeEventHandlers(onOpenAutoFocus,(event)=>{event.preventDefault(),contentRef.current?.focus({preventScroll:!0})}),onUnmountAutoFocus:onCloseAutoFocus,trapped:trapFocus,children:jsx(DismissableLayer,{asChild:!0,disableOutsidePointerEvents,onDismiss,onEscapeKeyDown,onFocusOutside,onInteractOutside,onPointerDownOutside,children:jsx(RovingFocusGroup.Root,{asChild:!0,...rovingFocusGroupScope,currentTabStopId:currentItemId,dir:rootContext.dir,loop,onCurrentTabStopIdChange:setCurrentItemId,onEntryFocus:composeEventHandlers(onEntryFocus,(event)=>{if(!rootContext.isUsingKeyboardRef.current)event.preventDefault()}),orientation:"vertical",preventScrollOnEntryFocus:!0,children:jsx(PopperPrimitive.Content,{"aria-orientation":"vertical","data-loke-menu-content":"","data-state":getOpenState(context.open),dir:rootContext.dir,role:"menu",...popperScope,...contentProps,onBlur:composeEventHandlers(props.onBlur,(event)=>{if(!event.currentTarget.contains(event.target))window.clearTimeout(timerRef.current),searchRef.current=""}),onKeyDown:composeEventHandlers(contentProps.onKeyDown,(event)=>{let isKeyDownInside=event.target.closest("[data-loke-menu-content]")===event.currentTarget,isModifierKey=event.ctrlKey||event.altKey||event.metaKey,isCharacterKey=event.key.length===1;if(isKeyDownInside){if(event.key==="Tab")event.preventDefault();if(!isModifierKey&&isCharacterKey)handleTypeaheadSearch(event.key)}let content=contentRef.current;if(event.target!==content)return;if(!FIRST_LAST_KEYS.includes(event.key))return;event.preventDefault();let candidateNodes=getItems().filter((item)=>!item.disabled).map((item)=>item.ref.current).filter((node)=>node!=null);if(LAST_KEYS.includes(event.key))candidateNodes.reverse();focusFirst(candidateNodes)}),onPointerMove:composeEventHandlers(props.onPointerMove,whenMouse((event)=>{let target=event.target,pointerXHasChanged=lastPointerXRef.current!==event.clientX;if(event.currentTarget.contains(target)&&pointerXHasChanged){let newDir=event.clientX>lastPointerXRef.current?"right":"left";pointerDirRef.current=newDir,lastPointerXRef.current=event.clientX}})),ref:composedRefs,style:{outline:"none",...contentProps.style}})})})})})})});MenuContent.displayName=CONTENT_NAME;var GROUP_NAME="MenuGroup",MenuGroup=forwardRef((props,forwardedRef)=>{let{__scopeMenu,...groupProps}=props;return jsx(Primitive.div,{role:"group",...groupProps,ref:forwardedRef})});MenuGroup.displayName=GROUP_NAME;var LABEL_NAME="MenuLabel",MenuLabel=forwardRef((props,forwardedRef)=>{let{__scopeMenu,...labelProps}=props;return jsx(Primitive.div,{...labelProps,ref:forwardedRef})});MenuLabel.displayName=LABEL_NAME;var ITEM_NAME="MenuItem",ITEM_SELECT="menu.itemSelect",MenuItem=forwardRef((props,forwardedRef)=>{let{disabled=!1,onSelect,...itemProps}=props,ref=useRef(null),rootContext=useMenuRootContext(ITEM_NAME,props.__scopeMenu),contentContext=useMenuContentContext(ITEM_NAME,props.__scopeMenu),composedRefs=useComposedRefs(forwardedRef,ref),isPointerDownRef=useRef(!1),handleSelect=()=>{let menuItem=ref.current;if(!disabled&&menuItem){let itemSelectEvent=new CustomEvent(ITEM_SELECT,{bubbles:!0,cancelable:!0});if(menuItem.addEventListener(ITEM_SELECT,(event)=>onSelect?.(event),{once:!0}),dispatchDiscreteCustomEvent(menuItem,itemSelectEvent),itemSelectEvent.defaultPrevented)isPointerDownRef.current=!1;else rootContext.onClose()}};return jsx(MenuItemImpl,{...itemProps,disabled,onClick:composeEventHandlers(props.onClick,handleSelect),onKeyDown:composeEventHandlers(props.onKeyDown,(event)=>{let isTypingAhead=contentContext.searchRef.current!=="";if(disabled||isTypingAhead&&event.key===" ")return;if(SELECTION_KEYS.includes(event.key))event.currentTarget.click(),event.preventDefault()}),onPointerDown:(event)=>{props.onPointerDown?.(event),isPointerDownRef.current=!0},onPointerUp:composeEventHandlers(props.onPointerUp,(event)=>{if(!isPointerDownRef.current)event.currentTarget?.click()}),ref:composedRefs})});MenuItem.displayName=ITEM_NAME;var MenuItemImpl=forwardRef((props,forwardedRef)=>{let{__scopeMenu,disabled=!1,textValue,...itemProps}=props,contentContext=useMenuContentContext(ITEM_NAME,__scopeMenu),rovingFocusGroupScope=useRovingFocusGroupScope(__scopeMenu),ref=useRef(null),composedRefs=useComposedRefs(forwardedRef,ref),[isFocused,setIsFocused]=useState(!1),[textContent,setTextContent]=useState("");return useEffect(()=>{let menuItem=ref.current;if(menuItem)setTextContent((menuItem.textContent??"").trim())},[itemProps.children]),jsx(Collection.ItemSlot,{disabled,scope:__scopeMenu,textValue:textValue??textContent,children:jsx(RovingFocusGroup.Item,{asChild:!0,...rovingFocusGroupScope,focusable:!disabled,children:jsx(Primitive.div,{"aria-disabled":disabled||void 0,"data-disabled":disabled?"":void 0,"data-highlighted":isFocused?"":void 0,role:"menuitem",...itemProps,onBlur:composeEventHandlers(props.onBlur,()=>setIsFocused(!1)),onFocus:composeEventHandlers(props.onFocus,()=>setIsFocused(!0)),onPointerLeave:composeEventHandlers(props.onPointerLeave,whenMouse((event)=>contentContext.onItemLeave(event))),onPointerMove:composeEventHandlers(props.onPointerMove,whenMouse((event)=>{if(disabled)contentContext.onItemLeave(event);else if(contentContext.onItemEnter(event),!event.defaultPrevented)event.currentTarget.focus({preventScroll:!0})})),ref:composedRefs})})})}),CHECKBOX_ITEM_NAME="MenuCheckboxItem",MenuCheckboxItem=forwardRef((props,forwardedRef)=>{let{checked=!1,onCheckedChange,...checkboxItemProps}=props;return jsx(ItemIndicatorProvider,{checked,scope:props.__scopeMenu,children:jsx(MenuItem,{"aria-checked":isIndeterminate(checked)?"mixed":checked,role:"menuitemcheckbox",...checkboxItemProps,"data-state":getCheckedState(checked),onSelect:composeEventHandlers(checkboxItemProps.onSelect,()=>onCheckedChange?.(isIndeterminate(checked)?!0:!checked),{checkForDefaultPrevented:!1}),ref:forwardedRef})})});MenuCheckboxItem.displayName=CHECKBOX_ITEM_NAME;var RADIO_GROUP_NAME="MenuRadioGroup",[RadioGroupProvider,useRadioGroupContext]=createMenuContext(RADIO_GROUP_NAME,{onValueChange:()=>{return},value:void 0}),MenuRadioGroup=forwardRef((props,forwardedRef)=>{let{value,onValueChange,...groupProps}=props,handleValueChange=useCallbackRef(onValueChange);return jsx(RadioGroupProvider,{onValueChange:handleValueChange,scope:props.__scopeMenu,value,children:jsx(MenuGroup,{...groupProps,ref:forwardedRef})})});MenuRadioGroup.displayName=RADIO_GROUP_NAME;var RADIO_ITEM_NAME="MenuRadioItem",MenuRadioItem=forwardRef((props,forwardedRef)=>{let{value,...radioItemProps}=props,context=useRadioGroupContext(RADIO_ITEM_NAME,props.__scopeMenu),checked=value===context.value;return jsx(ItemIndicatorProvider,{checked,scope:props.__scopeMenu,children:jsx(MenuItem,{"aria-checked":checked,role:"menuitemradio",...radioItemProps,"data-state":getCheckedState(checked),onSelect:composeEventHandlers(radioItemProps.onSelect,()=>context.onValueChange?.(value),{checkForDefaultPrevented:!1}),ref:forwardedRef})})});MenuRadioItem.displayName=RADIO_ITEM_NAME;var ITEM_INDICATOR_NAME="MenuItemIndicator",[ItemIndicatorProvider,useItemIndicatorContext]=createMenuContext(ITEM_INDICATOR_NAME,{checked:!1}),MenuItemIndicator=forwardRef((props,forwardedRef)=>{let{__scopeMenu,forceMount,...itemIndicatorProps}=props,indicatorContext=useItemIndicatorContext(ITEM_INDICATOR_NAME,__scopeMenu);return jsx(Presence,{present:forceMount||isIndeterminate(indicatorContext.checked)||indicatorContext.checked===!0,children:jsx(Primitive.span,{...itemIndicatorProps,"data-state":getCheckedState(indicatorContext.checked),ref:forwardedRef})})});MenuItemIndicator.displayName=ITEM_INDICATOR_NAME;var SEPARATOR_NAME="MenuSeparator",MenuSeparator=forwardRef((props,forwardedRef)=>{let{__scopeMenu,...separatorProps}=props;return jsx(Primitive.div,{"aria-orientation":"horizontal",role:"separator",...separatorProps,ref:forwardedRef})});MenuSeparator.displayName=SEPARATOR_NAME;var ARROW_NAME="MenuArrow",MenuArrow=forwardRef((props,forwardedRef)=>{let{__scopeMenu,...arrowProps}=props,popperScope=usePopperScope(__scopeMenu);return jsx(PopperPrimitive.Arrow,{...popperScope,...arrowProps,ref:forwardedRef})});MenuArrow.displayName=ARROW_NAME;var SUB_NAME="MenuSub",[MenuSubProvider,useMenuSubContext]=createMenuContext(SUB_NAME),MenuSub=(props)=>{let{__scopeMenu,children,open=!1,onOpenChange}=props,parentMenuContext=useMenuContext(SUB_NAME,__scopeMenu),popperScope=usePopperScope(__scopeMenu),[trigger,setTrigger]=useState(null),[content,setContent]=useState(null),handleOpenChange=useCallbackRef(onOpenChange);return useEffect(()=>{if(parentMenuContext.open===!1)handleOpenChange(!1);return()=>handleOpenChange(!1)},[parentMenuContext.open,handleOpenChange]),jsx(PopperPrimitive.Root,{...popperScope,children:jsx(MenuProvider,{content,onContentChange:setContent,onOpenChange:handleOpenChange,open,scope:__scopeMenu,children:jsx(MenuSubProvider,{contentId:useId(),onTriggerChange:setTrigger,scope:__scopeMenu,trigger,triggerId:useId(),children})})})};MenuSub.displayName=SUB_NAME;var SUB_TRIGGER_NAME="MenuSubTrigger",MenuSubTrigger=forwardRef((props,forwardedRef)=>{let context=useMenuContext(SUB_TRIGGER_NAME,props.__scopeMenu),rootContext=useMenuRootContext(SUB_TRIGGER_NAME,props.__scopeMenu),subContext=useMenuSubContext(SUB_TRIGGER_NAME,props.__scopeMenu),contentContext=useMenuContentContext(SUB_TRIGGER_NAME,props.__scopeMenu),openTimerRef=useRef(null),{pointerGraceTimerRef,onPointerGraceIntentChange}=contentContext,scope={__scopeMenu:props.__scopeMenu},clearOpenTimer=useCallback(()=>{if(openTimerRef.current)window.clearTimeout(openTimerRef.current);openTimerRef.current=null},[]);return useEffect(()=>clearOpenTimer,[clearOpenTimer]),useEffect(()=>{let pointerGraceTimer=pointerGraceTimerRef.current;return()=>{window.clearTimeout(pointerGraceTimer),onPointerGraceIntentChange(null)}},[pointerGraceTimerRef,onPointerGraceIntentChange]),jsx(MenuAnchor,{asChild:!0,...scope,children:jsx(MenuItemImpl,{"aria-controls":subContext.contentId,"aria-expanded":context.open,"aria-haspopup":"menu","data-state":getOpenState(context.open),id:subContext.triggerId,...props,onClick:(event)=>{if(props.onClick?.(event),props.disabled||event.defaultPrevented)return;if(event.currentTarget.focus(),!context.open)context.onOpenChange(!0)},onKeyDown:composeEventHandlers(props.onKeyDown,(event)=>{let isTypingAhead=contentContext.searchRef.current!=="";if(props.disabled||isTypingAhead&&event.key===" ")return;if(SUB_OPEN_KEYS[rootContext.dir].includes(event.key))context.onOpenChange(!0),context.content?.focus(),event.preventDefault()}),onPointerLeave:composeEventHandlers(props.onPointerLeave,whenMouse((event)=>{clearOpenTimer();let contentRect=context.content?.getBoundingClientRect();if(contentRect){let side=context.content?.dataset.side,rightSide=side==="right",bleed=rightSide?-5:5,contentNearEdge=contentRect[rightSide?"left":"right"],contentFarEdge=contentRect[rightSide?"right":"left"];contentContext.onPointerGraceIntentChange({area:[{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}),window.clearTimeout(pointerGraceTimerRef.current),pointerGraceTimerRef.current=window.setTimeout(()=>contentContext.onPointerGraceIntentChange(null),300)}else{if(contentContext.onTriggerLeave(event),event.defaultPrevented)return;contentContext.onPointerGraceIntentChange(null)}})),onPointerMove:composeEventHandlers(props.onPointerMove,whenMouse((event)=>{if(contentContext.onItemEnter(event),event.defaultPrevented)return;if(!(props.disabled||context.open||openTimerRef.current))contentContext.onPointerGraceIntentChange(null),openTimerRef.current=window.setTimeout(()=>{context.onOpenChange(!0),clearOpenTimer()},100)})),ref:composeRefs(forwardedRef,subContext.onTriggerChange)})})});MenuSubTrigger.displayName=SUB_TRIGGER_NAME;var SUB_CONTENT_NAME="MenuSubContent",MenuSubContent=forwardRef((props,forwardedRef)=>{let portalContext=usePortalContext(CONTENT_NAME,props.__scopeMenu),{forceMount=portalContext.forceMount,...subContentProps}=props,context=useMenuContext(CONTENT_NAME,props.__scopeMenu),rootContext=useMenuRootContext(CONTENT_NAME,props.__scopeMenu),subContext=useMenuSubContext(SUB_CONTENT_NAME,props.__scopeMenu),ref=useRef(null),composedRefs=useComposedRefs(forwardedRef,ref);return jsx(Collection.Provider,{scope:props.__scopeMenu,children:jsx(Presence,{present:forceMount||context.open,children:jsx(Collection.Slot,{scope:props.__scopeMenu,children:jsx(MenuContentImpl,{"aria-labelledby":subContext.triggerId,id:subContext.contentId,...subContentProps,align:"start",disableOutsidePointerEvents:!1,disableOutsideScroll:!1,onCloseAutoFocus:(event)=>event.preventDefault(),onEscapeKeyDown:composeEventHandlers(props.onEscapeKeyDown,(event)=>{rootContext.onClose(),event.preventDefault()}),onFocusOutside:composeEventHandlers(props.onFocusOutside,(event)=>{if(event.target!==subContext.trigger)context.onOpenChange(!1)}),onKeyDown:composeEventHandlers(props.onKeyDown,(event)=>{let isKeyDownInside=event.currentTarget.contains(event.target),isCloseKey=SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);if(isKeyDownInside&&isCloseKey)context.onOpenChange(!1),subContext.trigger?.focus(),event.preventDefault()}),onOpenAutoFocus:(event)=>{if(rootContext.isUsingKeyboardRef.current)ref.current?.focus();event.preventDefault()},ref:composedRefs,side:rootContext.dir==="rtl"?"left":"right",trapFocus:!1})})})})});MenuSubContent.displayName=SUB_CONTENT_NAME;function getOpenState(open){return open?"open":"closed"}function isIndeterminate(checked){return checked==="indeterminate"}function getCheckedState(checked){if(isIndeterminate(checked))return"indeterminate";return checked?"checked":"unchecked"}function focusFirst(candidates){let PREVIOUSLY_FOCUSED_ELEMENT=document.activeElement;for(let candidate of candidates){if(candidate===PREVIOUSLY_FOCUSED_ELEMENT)return;if(candidate.focus(),document.activeElement!==PREVIOUSLY_FOCUSED_ELEMENT)return}}function wrapArray(array,startIndex){return array.map((_,index)=>array[(startIndex+index)%array.length])}function getNextMatch(values,search,currentMatch){let normalizedSearch=search.length>1&&Array.from(search).every((char)=>char===search[0])?search.charAt(0):search,currentMatchIndex=currentMatch?values.indexOf(currentMatch):-1,wrappedValues=wrapArray(values,Math.max(currentMatchIndex,0));if(normalizedSearch.length===1)wrappedValues=wrappedValues.filter((v)=>v!==currentMatch);let nextMatch=wrappedValues.find((value)=>value.toLowerCase().startsWith(normalizedSearch.toLowerCase()));return nextMatch!==currentMatch?nextMatch:void 0}function isPointInPolygon(point,polygon){let{x,y}=point,inside=!1;for(let i=0,j=polygon.length-1;i<polygon.length;j=i++){let ii=polygon[i],jj=polygon[j],xi=ii.x,yi=ii.y,xj=jj.x,yj=jj.y;if(yi>y!==yj>y&&x<(xj-xi)*(y-yi)/(yj-yi)+xi)inside=!inside}return inside}function isPointerInGraceArea(event,area){if(!area)return!1;let cursorPos={x:event.clientX,y:event.clientY};return isPointInPolygon(cursorPos,area)}function whenMouse(handler){return(event)=>event.pointerType==="mouse"?handler(event):void 0}var Root3=Menu,Anchor2=MenuAnchor,Portal=MenuPortal,Content2=MenuContent,Group=MenuGroup,Label=MenuLabel,Item2=MenuItem,CheckboxItem=MenuCheckboxItem,RadioGroup=MenuRadioGroup,RadioItem=MenuRadioItem,ItemIndicator=MenuItemIndicator,Separator=MenuSeparator,Arrow2=MenuArrow,Sub=MenuSub,SubTrigger=MenuSubTrigger,SubContent=MenuSubContent;export{createMenuScope,SubTrigger,SubContent,Sub,Separator,Root3 as Root,RadioItem,RadioGroup,Portal,MenuSubTrigger,MenuSubContent,MenuSub,MenuSeparator,MenuRadioItem,MenuRadioGroup,MenuPortal,MenuLabel,MenuItemIndicator,MenuItem,MenuGroup,MenuContent,MenuCheckboxItem,MenuArrow,MenuAnchor,Menu,Label,ItemIndicator,Item2 as Item,Group,Content2 as Content,CheckboxItem,Arrow2 as Arrow,Anchor2 as Anchor};