2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
"use client";import{useFocusRing as Te}from"@react-aria/focus";import{useHover as ce}from"@react-aria/interactions";import h,{Fragment as ee,useCallback as k,useEffect as fe,useRef as Q,useState as ye}from"react";import{flushSync as $}from"react-dom";import{useActivePress as ge}from'../../hooks/use-active-press.js';import{useDisposables as Pe}from'../../hooks/use-disposables.js';import{useElementSize as Ee}from'../../hooks/use-element-size.js';import{useEvent as E}from'../../hooks/use-event.js';import{useHandleToggle as Me}from'../../hooks/use-handle-toggle.js';import{useId as B}from'../../hooks/use-id.js';import{useInertOthers as be}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as K}from'../../hooks/use-iso-morphic-effect.js';import{useOnDisappear as Ae}from'../../hooks/use-on-disappear.js';import{useOutsideClick as _e}from'../../hooks/use-outside-click.js';import{useOwnerDocument as te}from'../../hooks/use-owner.js';import{Action as W,useQuickRelease as Ie}from'../../hooks/use-quick-release.js';import{useResolveButtonType as Se}from'../../hooks/use-resolve-button-type.js';import{useScrollLock as Re}from'../../hooks/use-scroll-lock.js';import{useSlot as J}from'../../hooks/use-slot.js';import{useSyncRefs as V}from'../../hooks/use-sync-refs.js';import{useTextValue as De}from'../../hooks/use-text-value.js';import{useTrackedPointer as Fe}from'../../hooks/use-tracked-pointer.js';import{transitionDataAttributes as he,useTransition as xe}from'../../hooks/use-transition.js';import{useTreeWalker as Ce}from'../../hooks/use-tree-walker.js';import{FloatingProvider as Le,useFloatingPanel as ve,useFloatingPanelProps as He,useFloatingReference as Oe,useFloatingReferenceProps as Ue,useResolvedAnchor as Ge}from'../../internal/floating.js';import{OpenClosedProvider as Ne,State as X,useOpenClosed as ke}from'../../internal/open-closed.js';import{stackMachines as Be}from'../../machines/stack-machine.js';import{useSlice as R}from'../../react-glue.js';import{Focus as A}from'../../utils/calculate-active-index.js';import{disposables as we}from'../../utils/disposables.js';import*as Ke from'../../utils/dom.js';import{Focus as oe,FocusableMode as We,focusFrom as Je,isFocusableElement as Ve,restoreFocusIfNecessary as ne}from'../../utils/focus-management.js';import{match as Xe}from'../../utils/match.js';import{isActiveElement as Qe}from'../../utils/owner.js';import{RenderFeatures as re,forwardRefWithAs as x,mergeProps as ae,useRender as C}from'../../utils/render.js';import{useDescriptions as $e}from'../description/description.js';import{Keys as u}from'../keyboard.js';import{useLabelContext as je,useLabels as se}from'../label/label.js';import{Portal as qe}from'../portal/portal.js';import{ActionTypes as r,ActivationTrigger as j,MenuState as c}from'./menu-machine.js';import{MenuContext as ze,useMenuMachine as Ye,useMenuMachineContext as q}from'./menu-machine-glue.js';let Ze=ee;function et(m,y){let l=B(),{__demoMode:a=!1,...p}=m,s=Ye({id:l,__demoMode:a}),[n,M,f]=R(s,d=>[d.menuState,d.itemsElement,d.buttonElement]),_=V(y),o=Be.get(null),F=R(o,k(d=>o.selectors.isTop(d,l),[o,l]));_e(F,[f,M],(d,T)=>{var P;s.send({type:r.CloseMenu}),Ve(T,We.Loose)||(d.preventDefault(),(P=s.state.buttonElement)==null||P.focus())});let I=E(()=>{s.send({type:r.CloseMenu})}),b=J({open:n===c.Open,close:I}),i={ref:_},g=C();return h.createElement(Le,null,h.createElement(ze.Provider,{value:s},h.createElement(Ne,{value:Xe(n,{[c.Open]:X.Open,[c.Closed]:X.Closed})},g({ourProps:i,theirProps:p,slot:b,defaultTag:Ze,name:"Menu"}))))}let tt="button";function ot(m,y){let l=q("Menu.Button"),a=B(),{id:p=`headlessui-menu-button-${a}`,disabled:s=!1,autoFocus:n=!1,...M}=m,f=Q(null),_=Ue(),o=V(y,f,Oe(),E(t=>l.send({type:r.SetButtonElement,element:t}))),F=E(t=>{switch(t.key){case u.Space:case u.Enter:case u.ArrowDown:t.preventDefault(),t.stopPropagation(),l.send({type:r.OpenMenu,focus:{focus:A.First}});break;case u.ArrowUp:t.preventDefault(),t.stopPropagation(),l.send({type:r.OpenMenu,focus:{focus:A.Last}});break}}),I=E(t=>{switch(t.key){case u.Space:t.preventDefault();break}}),[b,i,g]=R(l,t=>[t.menuState,t.buttonElement,t.itemsElement]),d=b===c.Open;Ie(d,{trigger:i,action:k(t=>{if(i!=null&&i.contains(t.target))return W.Ignore;let S=t.target.closest('[role="menuitem"]:not([data-disabled])');return Ke.isHTMLElement(S)?W.Select(S):g!=null&&g.contains(t.target)?W.Ignore:W.Close},[i,g]),close:k(()=>l.send({type:r.CloseMenu}),[]),select:k(t=>t.click(),[])});let T=Me(t=>{var S;s||(b===c.Open?($(()=>l.send({type:r.CloseMenu})),(S=f.current)==null||S.focus({preventScroll:!0})):(t.preventDefault(),l.send({type:r.OpenMenu,focus:{focus:A.Nothing},trigger:j.Pointer})))}),{isFocusVisible:P,focusProps:L}=Te({autoFocus:n}),{isHovered:O,hoverProps:v}=ce({isDisabled:s}),{pressed:D,pressProps:U}=ge({disabled:s}),H=J({open:b===c.Open,active:D||b===c.Open,disabled:s,hover:O,focus:P,autofocus:n}),G=ae(_(),{ref:o,id:p,type:Se(m,f.current),"aria-haspopup":"menu","aria-controls":g==null?void 0:g.id,"aria-expanded":b===c.Open,disabled:s||void 0,autoFocus:n,onKeyDown:F,onKeyUp:I},T,L,v,U);return C()({ourProps:G,theirProps:M,slot:H,defaultTag:tt,name:"Menu.Button"})}let nt="div",rt=re.RenderStrategy|re.Static;function at(m,y){let l=B(),{id:a=`headlessui-menu-items-${l}`,anchor:p,portal:s=!1,modal:n=!0,transition:M=!1,...f}=m,_=Ge(p),o=q("Menu.Items"),[F,I]=ve(_),b=He(),[i,g]=ye(null),d=V(y,_?F:null,E(e=>o.send({type:r.SetItemsElement,element:e})),g),[T,P]=R(o,e=>[e.menuState,e.buttonElement]),L=te(P),O=te(i);_&&(s=!0);let v=ke(),[D,U]=xe(M,i,v!==null?(v&X.Open)===X.Open:T===c.Open);Ae(D,P,()=>{o.send({type:r.CloseMenu})});let H=R(o,e=>e.__demoMode),G=H?!1:n&&T===c.Open;Re(G,O);let w=H?!1:n&&T===c.Open;be(w,{allowed:k(()=>[P,i],[P,i])});let S=R(o,o.selectors.didButtonMove)?!1:D;fe(()=>{let e=i;e&&T===c.Open&&(Qe(e)||e.focus({preventScroll:!0}))},[T,i]),Ce(T===c.Open,{container:i,accept(e){return e.getAttribute("role")==="menuitem"?NodeFilter.FILTER_REJECT:e.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(e){e.setAttribute("role","none")}});let z=Pe(),le=E(e=>{var N,Y,Z;switch(z.dispose(),e.key){case u.Space:if(o.state.searchQuery!=="")return e.preventDefault(),e.stopPropagation(),o.send({type:r.Search,value:e.key});case u.Enter:if(e.preventDefault(),e.stopPropagation(),o.state.activeItemIndex!==null){let{dataRef:de}=o.state.items[o.state.activeItemIndex];(Y=(N=de.current)==null?void 0:N.domRef.current)==null||Y.click()}o.send({type:r.CloseMenu}),ne(o.state.buttonElement);break;case u.ArrowDown:return e.preventDefault(),e.stopPropagation(),o.send({type:r.GoToItem,focus:A.Next});case u.ArrowUp:return e.preventDefault(),e.stopPropagation(),o.send({type:r.GoToItem,focus:A.Previous});case u.Home:case u.PageUp:return e.preventDefault(),e.stopPropagation(),o.send({type:r.GoToItem,focus:A.First});case u.End:case u.PageDown:return e.preventDefault(),e.stopPropagation(),o.send({type:r.GoToItem,focus:A.Last});case u.Escape:e.preventDefault(),e.stopPropagation(),$(()=>o.send({type:r.CloseMenu})),(Z=o.state.buttonElement)==null||Z.focus({preventScroll:!0});break;case u.Tab:e.preventDefault(),e.stopPropagation(),$(()=>o.send({type:r.CloseMenu})),Je(o.state.buttonElement,e.shiftKey?oe.Previous:oe.Next);break;default:e.key.length===1&&(o.send({type:r.Search,value:e.key}),z.setTimeout(()=>o.send({type:r.ClearSearch}),350));break}}),pe=E(e=>{switch(e.key){case u.Space:e.preventDefault();break}}),ie=J({open:T===c.Open}),ue=ae(_?b():{},{"aria-activedescendant":R(o,o.selectors.activeDescendantId),"aria-labelledby":R(o,e=>{var N;return(N=e.buttonElement)==null?void 0:N.id}),id:a,onKeyDown:le,onKeyUp:pe,role:"menu",tabIndex:T===c.Open?0:void 0,ref:d,style:{...f.style,...I,"--button-width":Ee(D,P,!0).width},...he(U)}),me=C();return h.createElement(qe,{enabled:s?m.static||D:!1,ownerDocument:L},me({ourProps:ue,theirProps:f,slot:ie,defaultTag:nt,features:rt,visible:S,name:"Menu.Items"}))}let st=ee;function lt(m,y){let l=B(),{id:a=`headlessui-menu-item-${l}`,disabled:p=!1,...s}=m,n=q("Menu.Item"),M=R(n,t=>n.selectors.isActive(t,a)),f=Q(null),_=V(y,f),o=R(n,t=>n.selectors.shouldScrollIntoView(t,a));K(()=>{if(o)return we().requestAnimationFrame(()=>{var t,S;(S=(t=f.current)==null?void 0:t.scrollIntoView)==null||S.call(t,{block:"nearest"})})},[o,f]);let F=De(f),I=Q({disabled:p,domRef:f,get textValue(){return F()}});K(()=>{I.current.disabled=p},[I,p]),K(()=>(n.actions.registerItem(a,I),()=>n.actions.unregisterItem(a)),[I,a]);let b=E(()=>{n.send({type:r.CloseMenu})}),i=E(t=>{if(p)return t.preventDefault();n.send({type:r.CloseMenu}),ne(n.state.buttonElement)}),g=E(()=>{if(p)return n.send({type:r.GoToItem,focus:A.Nothing});n.send({type:r.GoToItem,focus:A.Specific,id:a})}),d=Fe(),T=E(t=>d.update(t)),P=E(t=>{d.wasMoved(t)&&(p||M||n.send({type:r.GoToItem,focus:A.Specific,id:a,trigger:j.Pointer}))}),L=E(t=>{d.wasMoved(t)&&(p||M&&n.state.activationTrigger===j.Pointer&&n.send({type:r.GoToItem,focus:A.Nothing}))}),[O,v]=se(),[D,U]=$e(),H=J({active:M,focus:M,disabled:p,close:b}),G={id:a,ref:_,role:"menuitem",tabIndex:p===!0?void 0:-1,"aria-disabled":p===!0?!0:void 0,"aria-labelledby":O,"aria-describedby":D,disabled:void 0,onClick:i,onFocus:g,onPointerEnter:T,onMouseEnter:T,onPointerMove:P,onMouseMove:P,onPointerLeave:L,onMouseLeave:L},w=C();return h.createElement(v,null,h.createElement(U,null,w({ourProps:G,theirProps:s,slot:H,defaultTag:st,name:"Menu.Item"})))}let pt="div";function it(m,y){let[l,a]=se(),p=m,s={ref:y,"aria-labelledby":l,role:"group"},n=C();return h.createElement(a,null,n({ourProps:s,theirProps:p,slot:{},defaultTag:pt,name:"Menu.Section"}))}let ut="header";function mt(m,y){let l=B(),{id:a=`headlessui-menu-heading-${l}`,...p}=m,s=je();K(()=>s.register(a),[a,s.register]);let n={id:a,ref:y,role:"presentation",...s.props};return C()({ourProps:n,theirProps:p,slot:{},defaultTag:ut,name:"Menu.Heading"})}let dt="div";function Tt(m,y){let l=m,a={ref:y,role:"separator"};return C()({ourProps:a,theirProps:l,slot:{},defaultTag:dt,name:"Menu.Separator"})}let ct=x(et),ft=x(ot),yt=x(at),gt=x(lt),Pt=x(it),Et=x(mt),Mt=x(Tt),lo=Object.assign(ct,{Button:ft,Items:yt,Item:gt,Section:Pt,Heading:Et,Separator:Mt});export{lo as Menu,ft as MenuButton,Et as MenuHeading,gt as MenuItem,yt as MenuItems,Pt as MenuSection,Mt as MenuSeparator};
|