2 lines
12 KiB
JavaScript
2 lines
12 KiB
JavaScript
"use client";import{useFocusRing as Ke}from"@react-aria/focus";import{useHover as We}from"@react-aria/interactions";import v,{createContext as _e,useCallback as ee,useContext as Ce,useEffect as pe,useMemo as De,useRef as ue,useState as ie}from"react";import{useActivePress as Ve}from'../../hooks/use-active-press.js';import{useElementSize as je}from'../../hooks/use-element-size.js';import{useEvent as g}from'../../hooks/use-event.js';import{useEventListener as $e}from'../../hooks/use-event-listener.js';import{useId as te}from'../../hooks/use-id.js';import{useIsoMorphicEffect as Je}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as Oe}from'../../hooks/use-latest-value.js';import{useOnDisappear as Xe}from'../../hooks/use-on-disappear.js';import{useOutsideClick as qe}from'../../hooks/use-outside-click.js';import{useOwnerDocument as xe,useRootDocument as ze}from'../../hooks/use-owner.js';import{useResolveButtonType as Ye}from'../../hooks/use-resolve-button-type.js';import{MainTreeProvider as Le,useMainTreeNode as Qe,useRootContainers as Ze}from'../../hooks/use-root-containers.js';import{useScrollLock as et}from'../../hooks/use-scroll-lock.js';import{useSlot as oe}from'../../hooks/use-slot.js';import{optionalRef as tt,useSyncRefs as J}from'../../hooks/use-sync-refs.js';import{Direction as U,useTabDirection as he}from'../../hooks/use-tab-direction.js';import{transitionDataAttributes as Se,useTransition as Me}from'../../hooks/use-transition.js';import{CloseProvider as Ge}from'../../internal/close-provider.js';import{FloatingProvider as ot,useFloatingPanel as rt,useFloatingPanelProps as nt,useFloatingReference as lt,useResolvedAnchor as at}from'../../internal/floating.js';import{Hidden as Te,HiddenFeatures as Ee}from'../../internal/hidden.js';import{OpenClosedProvider as st,ResetOpenClosedProvider as pt,State as X,useOpenClosed as ke}from'../../internal/open-closed.js';import{useSlice as q}from'../../react-glue.js';import{isDisabledReactIssue7711 as Ie}from'../../utils/bugs.js';import*as He from'../../utils/dom.js';import{Focus as w,FocusResult as be,FocusableMode as ut,focusIn as N,getFocusableElements as Ue,isFocusableElement as it}from'../../utils/focus-management.js';import{match as re}from'../../utils/match.js';import'../../utils/micro-task.js';import{getActiveElement as ne,getRootNode as ye}from'../../utils/owner.js';import{RenderFeatures as ce,forwardRefWithAs as z,mergeProps as ge,useRender as le}from'../../utils/render.js';import{Keys as K}from'../keyboard.js';import{Portal as ct,useNestedPortals as dt}from'../portal/portal.js';import{PopoverStates as P}from'./popover-machine.js';import{PopoverContext as ft,usePopoverMachine as Pt,usePopoverMachineContext as Re}from'./popover-machine-glue.js';let Fe=_e(null);Fe.displayName="PopoverGroupContext";function we(){return Ce(Fe)}let de=_e(null);de.displayName="PopoverPanelContext";function mt(){return Ce(de)}let vt="div";function Tt(E,O){var M;let R=te(),{__demoMode:B=!1,...T}=E,n=Pt({id:R,__demoMode:B}),b=ue(null),t=J(O,tt(r=>{b.current=r})),[A,d,o,C,y]=q(n,ee(r=>[r.popoverState,r.button,r.panel,r.buttonId,r.panelId],[])),D=ze((M=b.current)!=null?M:d),_=Oe(C),a=Oe(y),u=De(()=>({buttonId:_,panelId:a,close:n.actions.close}),[_,a,n]),f=we(),l=f==null?void 0:f.registerPopover,c=g(()=>{var F,G;let r=ne((F=b.current)!=null?F:d);return(G=f==null?void 0:f.isFocusWithinPopoverGroup())!=null?G:r&&((d==null?void 0:d.contains(r))||(o==null?void 0:o.contains(r)))});pe(()=>l==null?void 0:l(u),[l,u]);let[m,W]=dt(),V=Qe(d),j=Ze({mainTreeNode:V,portals:m,defaultContainers:[{get current(){return n.state.button}},{get current(){return n.state.panel}}]});$e(D,"focus",r=>{var F,G,h,k,I,H;r.target!==window&&He.isHTMLorSVGElement(r.target)&&n.state.popoverState===P.Open&&(c()||n.state.button&&n.state.panel&&(j.contains(r.target)||(G=(F=n.state.beforePanelSentinel.current)==null?void 0:F.contains)!=null&&G.call(F,r.target)||(k=(h=n.state.afterPanelSentinel.current)==null?void 0:h.contains)!=null&&k.call(h,r.target)||(H=(I=n.state.afterButtonSentinel.current)==null?void 0:I.contains)!=null&&H.call(I,r.target)||n.actions.close()))},!0);let L=A===P.Open;qe(L,j.resolveContainers,(r,F)=>{n.actions.close(),it(F,ut.Loose)||(r.preventDefault(),d==null||d.focus())});let Y=oe({open:A===P.Open,close:n.actions.refocusableClose}),$=q(n,ee(r=>re(r.popoverState,{[P.Open]:X.Open,[P.Closed]:X.Closed}),[])),Q={ref:t},Z=le();return v.createElement(Le,{node:V},v.createElement(ot,null,v.createElement(de.Provider,{value:null},v.createElement(ft.Provider,{value:n},v.createElement(Ge,{value:n.actions.refocusableClose},v.createElement(st,{value:$},v.createElement(W,null,Z({ourProps:Q,theirProps:T,slot:Y,defaultTag:vt,name:"Popover"}))))))))}let Et="button";function bt(E,O){let R=te(),{id:B=`headlessui-popover-button-${R}`,disabled:T=!1,autoFocus:n=!1,...b}=E,t=Re("Popover.Button"),[A,d,o,C,y,D,_]=q(t,ee(e=>[e.popoverState,t.selectors.isPortalled(e),e.button,e.buttonId,e.panel,e.panelId,e.afterButtonSentinel],[])),a=ue(null),u=`headlessui-focus-sentinel-${te()}`,f=we(),l=f==null?void 0:f.closeOthers,m=mt()!==null;pe(()=>{if(!m)return t.actions.setButtonId(B),()=>t.actions.setButtonId(null)},[m,B,t]);let[W]=ie(()=>Symbol()),V=J(a,O,lt(),g(e=>{if(!m){if(e)t.state.buttons.current.push(W);else{let p=t.state.buttons.current.indexOf(W);p!==-1&&t.state.buttons.current.splice(p,1)}t.state.buttons.current.length>1&&console.warn("You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported."),e&&t.actions.setButton(e)}})),j=J(a,O),L=g(e=>{var p,i,x;if(m){if(t.state.popoverState===P.Closed)return;switch(e.key){case K.Space:case K.Enter:e.preventDefault(),(i=(p=e.target).click)==null||i.call(p),t.actions.close(),(x=t.state.button)==null||x.focus();break}}else switch(e.key){case K.Space:case K.Enter:e.preventDefault(),e.stopPropagation(),t.state.popoverState===P.Closed?(l==null||l(t.state.buttonId),t.actions.open()):t.actions.close();break;case K.Escape:if(t.state.popoverState!==P.Open)return l==null?void 0:l(t.state.buttonId);if(!a.current)return;let S=ne(a.current);if(S&&!a.current.contains(S))return;e.preventDefault(),e.stopPropagation(),t.actions.close();break}}),Y=g(e=>{m||e.key===K.Space&&e.preventDefault()}),$=g(e=>{var p,i;Ie(e.currentTarget)||T||(m?(t.actions.close(),(p=t.state.button)==null||p.focus()):(e.preventDefault(),e.stopPropagation(),t.state.popoverState===P.Closed?(l==null||l(t.state.buttonId),t.actions.open()):t.actions.close(),(i=t.state.button)==null||i.focus()))}),Q=g(e=>{e.preventDefault(),e.stopPropagation()}),{isFocusVisible:Z,focusProps:M}=Ke({autoFocus:n}),{isHovered:r,hoverProps:F}=We({isDisabled:T}),{pressed:G,pressProps:h}=Ve({disabled:T}),k=A===P.Open,I=oe({open:k,active:G||k,disabled:T,hover:r,focus:Z,autofocus:n}),H=Ye(E,o),fe=m?ge({ref:j,type:H,onKeyDown:L,onClick:$,disabled:T||void 0,autoFocus:n},M,F,h):ge({ref:V,id:C,type:H,"aria-expanded":A===P.Open,"aria-controls":y?D:void 0,disabled:T||void 0,autoFocus:n,onKeyDown:L,onKeyUp:Y,onClick:$,onMouseDown:Q},M,F,h),ae=he(),Pe=g(()=>{if(!He.isHTMLElement(t.state.panel))return;let e=t.state.panel;function p(){re(ae.current,{[U.Forwards]:()=>N(e,w.First),[U.Backwards]:()=>N(e,w.Last)})===be.Error&&N(Ue(ye(t.state.button)).filter(x=>x.dataset.headlessuiFocusGuard!=="true"),re(ae.current,{[U.Forwards]:w.Next,[U.Backwards]:w.Previous}),{relativeTo:t.state.button})}p()}),s=le();return v.createElement(v.Fragment,null,s({ourProps:fe,theirProps:b,slot:I,defaultTag:Et,name:"Popover.Button"}),k&&!m&&d&&v.createElement(Te,{id:u,ref:_,features:Ee.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:Pe}))}let yt="div",gt=ce.RenderStrategy|ce.Static;function Ne(E,O){let R=te(),{id:B=`headlessui-popover-backdrop-${R}`,transition:T=!1,...n}=E,b=Re("Popover.Backdrop"),t=q(b,ee(l=>l.popoverState,[])),[A,d]=ie(null),o=J(O,d),C=ke(),[y,D]=Me(T,A,C!==null?(C&X.Open)===X.Open:t===P.Open),_=g(l=>{if(Ie(l.currentTarget))return l.preventDefault();b.actions.close()}),a=oe({open:t===P.Open}),u={ref:o,id:B,"aria-hidden":!0,onClick:_,...Se(D)};return le()({ourProps:u,theirProps:n,slot:a,defaultTag:yt,features:gt,visible:y,name:"Popover.Backdrop"})}let Rt="div",Ft=ce.RenderStrategy|ce.Static;function Bt(E,O){let R=te(),{id:B=`headlessui-popover-panel-${R}`,focus:T=!1,anchor:n,portal:b=!1,modal:t=!1,transition:A=!1,...d}=E,o=Re("Popover.Panel"),C=q(o,o.selectors.isPortalled),[y,D,_,a,u]=q(o,ee(s=>[s.popoverState,s.button,s.__demoMode,s.beforePanelSentinel,s.afterPanelSentinel],[])),f=`headlessui-focus-sentinel-before-${R}`,l=`headlessui-focus-sentinel-after-${R}`,c=ue(null),m=at(n),[W,V]=rt(m),j=nt();m&&(b=!0);let[L,Y]=ie(null),$=J(c,O,m?W:null,o.actions.setPanel,Y),Q=xe(D),Z=xe(c.current);Je(()=>(o.actions.setPanelId(B),()=>o.actions.setPanelId(null)),[B,o]);let M=ke(),[r,F]=Me(A,L,M!==null?(M&X.Open)===X.Open:y===P.Open);Xe(r,D,o.actions.close),et(_?!1:t&&r,Z);let h=g(s=>{var e;switch(s.key){case K.Escape:if(o.state.popoverState!==P.Open||!c.current)return;let p=ne(c.current);if(p&&!c.current.contains(p))return;s.preventDefault(),s.stopPropagation(),o.actions.close(),(e=o.state.button)==null||e.focus();break}});pe(()=>{var s;E.static||y===P.Closed&&((s=E.unmount)==null||s)&&o.actions.setPanel(null)},[y,E.unmount,E.static,o]),pe(()=>{if(_||!T||y!==P.Open||!c.current)return;let s=ne(c.current);c.current.contains(s)||N(c.current,w.First)},[_,T,c.current,y]);let k=oe({open:y===P.Open,close:o.actions.refocusableClose}),I=ge(m?j():{},{ref:$,id:B,onKeyDown:h,onBlur:T&&y===P.Open?s=>{var p,i,x,S,me;let e=s.relatedTarget;e&&c.current&&((p=c.current)!=null&&p.contains(e)||(o.actions.close(),((x=(i=a.current)==null?void 0:i.contains)!=null&&x.call(i,e)||(me=(S=u.current)==null?void 0:S.contains)!=null&&me.call(S,e))&&e.focus({preventScroll:!0})))}:void 0,tabIndex:-1,style:{...d.style,...V,"--button-width":je(r,D,!0).width},...Se(F)}),H=he(),fe=g(()=>{let s=c.current;if(!s)return;function e(){re(H.current,{[U.Forwards]:()=>{var i;N(s,w.First)===be.Error&&((i=o.state.afterPanelSentinel.current)==null||i.focus())},[U.Backwards]:()=>{var p;(p=o.state.button)==null||p.focus({preventScroll:!0})}})}e()}),ae=g(()=>{let s=c.current;if(!s)return;function e(){re(H.current,{[U.Forwards]:()=>{var Be;if(!o.state.button)return;let p=(Be=ye(o.state.button))!=null?Be:document.body,i=Ue(p),x=i.indexOf(o.state.button),S=i.slice(0,x+1),se=[...i.slice(x+1),...S];for(let ve of se.slice())if(ve.dataset.headlessuiFocusGuard==="true"||L!=null&&L.contains(ve)){let Ae=se.indexOf(ve);Ae!==-1&&se.splice(Ae,1)}N(se,w.First,{sorted:!1})},[U.Backwards]:()=>{var i;N(s,w.Previous)===be.Error&&((i=o.state.button)==null||i.focus())}})}e()}),Pe=le();return v.createElement(pt,null,v.createElement(de.Provider,{value:B},v.createElement(Ge,{value:o.actions.refocusableClose},v.createElement(ct,{enabled:b?E.static||r:!1,ownerDocument:Q},r&&C&&v.createElement(Te,{id:f,ref:a,features:Ee.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:fe}),Pe({ourProps:I,theirProps:d,slot:k,defaultTag:Rt,features:Ft,visible:r,name:"Popover.Panel"}),r&&C&&v.createElement(Te,{id:l,ref:u,features:Ee.Focusable,"data-headlessui-focus-guard":!0,as:"button",type:"button",onFocus:ae})))))}let At="div";function _t(E,O){let R=ue(null),B=J(R,O),[T,n]=ie([]),b=g(a=>{n(u=>{let f=u.indexOf(a);if(f!==-1){let l=u.slice();return l.splice(f,1),l}return u})}),t=g(a=>(n(u=>[...u,a]),()=>b(a))),A=g(()=>{var f;let a=ye(R.current);if(!a)return!1;let u=ne(R.current);return(f=R.current)!=null&&f.contains(u)?!0:T.some(l=>{var c,m;return((c=a.getElementById(l.buttonId.current))==null?void 0:c.contains(u))||((m=a.getElementById(l.panelId.current))==null?void 0:m.contains(u))})}),d=g(a=>{for(let u of T)u.buttonId.current!==a&&u.close()}),o=De(()=>({registerPopover:t,unregisterPopover:b,isFocusWithinPopoverGroup:A,closeOthers:d}),[t,b,A,d]),C=oe({}),y=E,D={ref:B},_=le();return v.createElement(Le,null,v.createElement(Fe.Provider,{value:o},_({ourProps:D,theirProps:y,slot:C,defaultTag:At,name:"Popover.Group"})))}let Ct=z(Tt),Dt=z(bt),Ot=z(Ne),xt=z(Ne),Lt=z(Bt),ht=z(_t),vo=Object.assign(Ct,{Button:Dt,Backdrop:xt,Overlay:Ot,Panel:Lt,Group:ht});export{vo as Popover,xt as PopoverBackdrop,Dt as PopoverButton,ht as PopoverGroup,Ot as PopoverOverlay,Lt as PopoverPanel};
|