2 lines
18 KiB
JavaScript
2 lines
18 KiB
JavaScript
"use client";import{useFocusRing as Pe}from"@react-aria/focus";import{useHover as Oe}from"@react-aria/interactions";import{useVirtualizer as Ve}from"@tanstack/react-virtual";import L,{Fragment as Ee,createContext as he,useCallback as Q,useContext as Ae,useMemo as ae,useRef as me,useState as xe}from"react";import{flushSync as oe}from"react-dom";import{useActivePress as we}from'../../hooks/use-active-press.js';import{useByComparator as Be}from'../../hooks/use-by-comparator.js';import{useControllable as ke}from'../../hooks/use-controllable.js';import{useDefaultValue as Ne}from'../../hooks/use-default-value.js';import{useDisposables as Ue}from'../../hooks/use-disposables.js';import{useElementSize as Ie}from'../../hooks/use-element-size.js';import{useEvent as I}from'../../hooks/use-event.js';import{useHandleToggle as He}from'../../hooks/use-handle-toggle.js';import{useId as re}from'../../hooks/use-id.js';import{useInertOthers as Ge}from'../../hooks/use-inert-others.js';import{useIsoMorphicEffect as Z}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as ze}from'../../hooks/use-latest-value.js';import{useOnDisappear as Ke}from'../../hooks/use-on-disappear.js';import{useOutsideClick as We}from'../../hooks/use-outside-click.js';import{useOwnerDocument as Re}from'../../hooks/use-owner.js';import{Action as le,useQuickRelease as Xe}from'../../hooks/use-quick-release.js';import{useRefocusableInput as _e}from'../../hooks/use-refocusable-input.js';import{useResolveButtonType as $e}from'../../hooks/use-resolve-button-type.js';import{useScrollLock as Je}from'../../hooks/use-scroll-lock.js';import{useSlot as ie}from'../../hooks/use-slot.js';import{useSyncRefs as ce}from'../../hooks/use-sync-refs.js';import{useTrackedPointer as je}from'../../hooks/use-tracked-pointer.js';import{transitionDataAttributes as qe,useTransition as Qe}from'../../hooks/use-transition.js';import{useTreeWalker as Ye}from'../../hooks/use-tree-walker.js';import{useWatch as Fe}from'../../hooks/use-watch.js';import{useDisabled as Ze}from'../../internal/disabled.js';import{FloatingProvider as eo,useFloatingPanel as oo,useFloatingPanelProps as to,useFloatingReference as no,useResolvedAnchor as ao}from'../../internal/floating.js';import{FormFields as ro}from'../../internal/form-fields.js';import{Frozen as lo,useFrozenData as De}from'../../internal/frozen.js';import{useProvidedId as io}from'../../internal/id.js';import{OpenClosedProvider as so,State as fe,useOpenClosed as uo}from'../../internal/open-closed.js';import{stackMachines as po}from'../../machines/stack-machine.js';import{useSlice as F}from'../../react-glue.js';import{history as Se}from'../../utils/active-element-history.js';import{Focus as w}from'../../utils/calculate-active-index.js';import{disposables as bo}from'../../utils/disposables.js';import*as mo from'../../utils/dom.js';import{match as Te}from'../../utils/match.js';import{isActiveElement as co}from'../../utils/owner.js';import{isMobile as fo}from'../../utils/platform.js';import{RenderFeatures as Me,forwardRefWithAs as se,mergeProps as ge,useRender as ue}from'../../utils/render.js';import{useDescribedBy as To}from'../description/description.js';import{Keys as B}from'../keyboard.js';import{Label as xo,useLabelledBy as ye,useLabels as go}from'../label/label.js';import{MouseButton as yo}from'../mouse.js';import{Portal as Co}from'../portal/portal.js';import{ActionTypes as vo,ActivationTrigger as J,ComboboxState as r,ValueMode as H}from'./combobox-machine.js';import{ComboboxContext as Po,useComboboxMachine as Oo,useComboboxMachineContext as pe}from'./combobox-machine-glue.js';let de=he(null);de.displayName="ComboboxDataContext";function te(T){let O=Ae(de);if(O===null){let e=new Error(`<${T} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,te),e}return O}let Le=he(null);function Eo(T){let O=pe("VirtualProvider"),e=te("VirtualProvider"),{options:o}=e.virtual,E=F(O,a=>a.optionsElement),[R,y]=ae(()=>{let a=E;if(!a)return[0,0];let u=window.getComputedStyle(a);return[parseFloat(u.paddingBlockStart||u.paddingTop),parseFloat(u.paddingBlockEnd||u.paddingBottom)]},[E]),b=Ve({enabled:o.length!==0,scrollPaddingStart:R,scrollPaddingEnd:y,count:o.length,estimateSize(){return 40},getScrollElement(){return O.state.optionsElement},overscan:12}),[h,p]=xe(0);Z(()=>{p(a=>a+1)},[o]);let f=b.getVirtualItems(),n=F(O,a=>a.activationTrigger===J.Pointer),m=F(O,O.selectors.activeOptionIndex);return f.length===0?null:L.createElement(Le.Provider,{value:b},L.createElement("div",{style:{position:"relative",width:"100%",height:`${b.getTotalSize()}px`},ref:a=>{a&&(n||m!==null&&o.length>m&&b.scrollToIndex(m))}},f.map(a=>{var u;return L.createElement(Ee,{key:a.key},L.cloneElement((u=T.children)==null?void 0:u.call(T,{...T.slot,option:o[a.index]}),{key:`${h}-${a.key}`,"data-index":a.index,"aria-setsize":o.length,"aria-posinset":a.index+1,style:{position:"absolute",top:0,left:0,transform:`translateY(${a.start}px)`,overflowAnchor:"none"}}))})))}let ho=Ee;function Ao(T,O){let e=re(),o=Ze(),{value:E,defaultValue:R,onChange:y,form:b,name:h,by:p,invalid:f=!1,disabled:n=o||!1,onClose:m,__demoMode:a=!1,multiple:u=!1,immediate:A=!1,virtual:d=null,nullable:X,...G}=T,C=Ne(R),[x=u?[]:void 0,v]=ke(E,y,C),c=Oo({id:e,virtual:d,__demoMode:a}),z=me({static:!1,hold:!1}),D=Be(p),K=I(i=>d?p===null?d.options.indexOf(i):d.options.findIndex(M=>D(M,i)):c.state.options.findIndex(M=>D(M.dataRef.current.value,i))),W=Q(i=>Te(l.mode,{[H.Multi]:()=>x.some(M=>D(M,i)),[H.Single]:()=>D(x,i)}),[x]),S=F(c,i=>i.virtual),j=I(()=>m==null?void 0:m()),l=ae(()=>({__demoMode:a,immediate:A,optionsPropsRef:z,value:x,defaultValue:C,disabled:n,invalid:f,mode:u?H.Multi:H.Single,virtual:d?S:null,onChange:v,isSelected:W,calculateIndex:K,compare:D,onClose:j}),[a,A,z,x,C,n,f,u,d,S,v,W,K,D,j]);Z(()=>{var i;d&&c.send({type:vo.UpdateVirtualConfiguration,options:d.options,disabled:(i=d.disabled)!=null?i:null})},[d,d==null?void 0:d.options,d==null?void 0:d.disabled]),Z(()=>{c.state.dataRef.current=l},[l]);let[k,Y,s,U]=F(c,i=>[i.comboboxState,i.buttonElement,i.inputElement,i.optionsElement]),$=po.get(null),ne=F($,Q(i=>$.selectors.isTop(i,e),[$,e]));We(ne,[Y,s,U],()=>c.actions.closeCombobox());let be=F(c,c.selectors.activeOptionIndex),ee=F(c,c.selectors.activeOption),q=ie({open:k===r.Open,disabled:n,invalid:f,activeIndex:be,activeOption:ee,value:x}),[t,V]=go(),P=O===null?{}:{ref:O},N=Q(()=>{if(C!==void 0)return v==null?void 0:v(C)},[v,C]),g=ue();return L.createElement(V,{value:t,props:{htmlFor:s==null?void 0:s.id},slot:{open:k===r.Open,disabled:n}},L.createElement(eo,null,L.createElement(de.Provider,{value:l},L.createElement(Po.Provider,{value:c},L.createElement(so,{value:Te(k,{[r.Open]:fe.Open,[r.Closed]:fe.Closed})},h!=null&&L.createElement(ro,{disabled:n,data:x!=null?{[h]:x}:{},form:b,onReset:N}),g({ourProps:P,theirProps:G,slot:q,defaultTag:ho,name:"Combobox"}))))))}let Io="input";function Ro(T,O){var ee,q;let e=pe("Combobox.Input"),o=te("Combobox.Input"),E=re(),R=io(),{id:y=R||`headlessui-combobox-input-${E}`,onChange:b,displayValue:h,disabled:p=o.disabled||!1,autoFocus:f=!1,type:n="text",...m}=T,a=me(null),u=ce(a,O,no(),e.actions.setInputElement),[A,d]=F(e,t=>[t.comboboxState,t.isTyping]),X=Ue(),G=I(()=>{e.actions.onChange(null),e.state.optionsElement&&(e.state.optionsElement.scrollTop=0),e.actions.goToOption({focus:w.Nothing})}),C=ae(()=>{var t;return typeof h=="function"&&o.value!==void 0?(t=h(o.value))!=null?t:"":typeof o.value=="string"?o.value:""},[o.value,h]);Fe(([t,V],[P,N])=>{if(e.state.isTyping)return;let g=a.current;g&&((N===r.Open&&V===r.Closed||t!==P)&&(g.value=t),requestAnimationFrame(()=>{if(e.state.isTyping||!g||co(g))return;let{selectionStart:i,selectionEnd:M}=g;Math.abs((M!=null?M:0)-(i!=null?i:0))===0&&i===0&&g.setSelectionRange(g.value.length,g.value.length)}))},[C,A,d]),Fe(([t],[V])=>{if(t===r.Open&&V===r.Closed){if(e.state.isTyping)return;let P=a.current;if(!P)return;let N=P.value,{selectionStart:g,selectionEnd:i,selectionDirection:M}=P;P.value="",P.value=N,M!==null?P.setSelectionRange(g,i,M):P.setSelectionRange(g,i)}},[A]);let x=me(!1),v=I(()=>{x.current=!0}),c=I(()=>{X.nextFrame(()=>{x.current=!1})}),z=I(t=>{switch(e.actions.setIsTyping(!0),t.key){case B.Enter:if(e.state.comboboxState!==r.Open||x.current)return;if(t.preventDefault(),t.stopPropagation(),e.selectors.activeOptionIndex(e.state)===null){e.actions.closeCombobox();return}e.actions.selectActiveOption(),o.mode===H.Single&&e.actions.closeCombobox();break;case B.ArrowDown:return t.preventDefault(),t.stopPropagation(),Te(e.state.comboboxState,{[r.Open]:()=>e.actions.goToOption({focus:w.Next}),[r.Closed]:()=>e.actions.openCombobox()});case B.ArrowUp:return t.preventDefault(),t.stopPropagation(),Te(e.state.comboboxState,{[r.Open]:()=>e.actions.goToOption({focus:w.Previous}),[r.Closed]:()=>{oe(()=>e.actions.openCombobox()),o.value||e.actions.goToOption({focus:w.Last})}});case B.Home:if(e.state.comboboxState===r.Closed||t.shiftKey)break;return t.preventDefault(),t.stopPropagation(),e.actions.goToOption({focus:w.First});case B.PageUp:return t.preventDefault(),t.stopPropagation(),e.actions.goToOption({focus:w.First});case B.End:if(e.state.comboboxState===r.Closed||t.shiftKey)break;return t.preventDefault(),t.stopPropagation(),e.actions.goToOption({focus:w.Last});case B.PageDown:return t.preventDefault(),t.stopPropagation(),e.actions.goToOption({focus:w.Last});case B.Escape:return e.state.comboboxState!==r.Open?void 0:(t.preventDefault(),e.state.optionsElement&&!o.optionsPropsRef.current.static&&t.stopPropagation(),o.mode===H.Single&&o.value===null&&G(),e.actions.closeCombobox());case B.Tab:if(e.actions.setIsTyping(!1),e.state.comboboxState!==r.Open)return;o.mode===H.Single&&e.state.activationTrigger!==J.Focus&&e.actions.selectActiveOption(),e.actions.closeCombobox();break}}),D=I(t=>{b==null||b(t),o.mode===H.Single&&t.target.value===""&&G(),e.actions.openCombobox()}),K=I(t=>{var P,N,g;let V=(P=t.relatedTarget)!=null?P:Se.find(i=>i!==t.currentTarget);if(!((N=e.state.optionsElement)!=null&&N.contains(V))&&!((g=e.state.buttonElement)!=null&&g.contains(V))&&e.state.comboboxState===r.Open)return t.preventDefault(),o.mode===H.Single&&o.value===null&&G(),e.actions.closeCombobox()}),W=I(t=>{var P,N,g;let V=(P=t.relatedTarget)!=null?P:Se.find(i=>i!==t.currentTarget);(N=e.state.buttonElement)!=null&&N.contains(V)||(g=e.state.optionsElement)!=null&&g.contains(V)||o.disabled||o.immediate&&e.state.comboboxState!==r.Open&&X.microTask(()=>{oe(()=>e.actions.openCombobox()),e.actions.setActivationTrigger(J.Focus)})}),S=ye(),j=To(),{isFocused:l,focusProps:k}=Pe({autoFocus:f}),{isHovered:Y,hoverProps:s}=Oe({isDisabled:p}),U=F(e,t=>t.optionsElement),$=ie({open:A===r.Open,disabled:p,invalid:o.invalid,hover:Y,focus:l,autofocus:f}),ne=ge({ref:u,id:y,role:"combobox",type:n,"aria-controls":U==null?void 0:U.id,"aria-expanded":A===r.Open,"aria-activedescendant":F(e,e.selectors.activeDescendantId),"aria-labelledby":S,"aria-describedby":j,"aria-autocomplete":"list",defaultValue:(q=(ee=T.defaultValue)!=null?ee:o.defaultValue!==void 0?h==null?void 0:h(o.defaultValue):null)!=null?q:o.defaultValue,disabled:p||void 0,autoFocus:f,onCompositionStart:v,onCompositionEnd:c,onKeyDown:z,onChange:D,onFocus:W,onBlur:K},k,s);return ue()({ourProps:ne,theirProps:m,slot:$,defaultTag:Io,name:"Combobox.Input"})}let _o="button";function Fo(T,O){let e=pe("Combobox.Button"),o=te("Combobox.Button"),[E,R]=xe(null),y=ce(O,R,e.actions.setButtonElement),b=re(),{id:h=`headlessui-combobox-button-${b}`,disabled:p=o.disabled||!1,autoFocus:f=!1,...n}=T,[m,a,u]=F(e,l=>[l.comboboxState,l.inputElement,l.optionsElement]),A=_e(a),d=m===r.Open;Xe(d,{trigger:E,action:Q(l=>{if(E!=null&&E.contains(l.target))return le.Ignore;if(a!=null&&a.contains(l.target))return le.Ignore;let k=l.target.closest('[role="option"]:not([data-disabled])');return mo.isHTMLElement(k)?le.Select(k):u!=null&&u.contains(l.target)?le.Ignore:le.Close},[E,a,u]),close:e.actions.closeCombobox,select:e.actions.selectActiveOption});let X=I(l=>{switch(l.key){case B.Space:case B.Enter:l.preventDefault(),l.stopPropagation(),e.state.comboboxState===r.Closed&&oe(()=>e.actions.openCombobox()),A();return;case B.ArrowDown:l.preventDefault(),l.stopPropagation(),e.state.comboboxState===r.Closed&&(oe(()=>e.actions.openCombobox()),e.state.dataRef.current.value||e.actions.goToOption({focus:w.First})),A();return;case B.ArrowUp:l.preventDefault(),l.stopPropagation(),e.state.comboboxState===r.Closed&&(oe(()=>e.actions.openCombobox()),e.state.dataRef.current.value||e.actions.goToOption({focus:w.Last})),A();return;case B.Escape:if(e.state.comboboxState!==r.Open)return;l.preventDefault(),e.state.optionsElement&&!o.optionsPropsRef.current.static&&l.stopPropagation(),oe(()=>e.actions.closeCombobox()),A();return;default:return}}),G=He(()=>{e.state.comboboxState===r.Open?e.actions.closeCombobox():e.actions.openCombobox(),A()}),C=ye([h]),{isFocusVisible:x,focusProps:v}=Pe({autoFocus:f}),{isHovered:c,hoverProps:z}=Oe({isDisabled:p}),{pressed:D,pressProps:K}=we({disabled:p}),W=ie({open:m===r.Open,active:D||m===r.Open,disabled:p,invalid:o.invalid,value:o.value,hover:c,focus:x}),S=ge({ref:y,id:h,type:$e(T,E),tabIndex:-1,"aria-haspopup":"listbox","aria-controls":u==null?void 0:u.id,"aria-expanded":m===r.Open,"aria-labelledby":C,disabled:p||void 0,autoFocus:f,onKeyDown:X},G,v,z,K);return ue()({ourProps:S,theirProps:n,slot:W,defaultTag:_o,name:"Combobox.Button"})}let Do="div",So=Me.RenderStrategy|Me.Static;function Mo(T,O){var M,Ce,ve;let e=re(),{id:o=`headlessui-combobox-options-${e}`,hold:E=!1,anchor:R,portal:y=!1,modal:b=!0,transition:h=!1,...p}=T,f=pe("Combobox.Options"),n=te("Combobox.Options"),m=ao(R);m&&(y=!0);let[a,u]=oo(m),[A,d]=xe(null),X=to(),G=ce(O,m?a:null,f.actions.setOptionsElement,d),[C,x,v,c,z]=F(f,_=>[_.comboboxState,_.inputElement,_.buttonElement,_.optionsElement,_.activationTrigger]),D=Re(x||v),K=Re(c),W=uo(),[S,j]=Qe(h,A,W!==null?(W&fe.Open)===fe.Open:C===r.Open);Ke(S,x,f.actions.closeCombobox);let l=n.__demoMode?!1:b&&C===r.Open;Je(l,K);let k=n.__demoMode?!1:b&&C===r.Open;Ge(k,{allowed:Q(()=>[x,v,c],[x,v,c])});let s=F(f,f.selectors.didInputMove)?!1:S;Z(()=>{var _;n.optionsPropsRef.current.static=(_=T.static)!=null?_:!1},[n.optionsPropsRef,T.static]),Z(()=>{n.optionsPropsRef.current.hold=E},[n.optionsPropsRef,E]),Ye(C===r.Open,{container:c,accept(_){return _.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:_.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(_){_.setAttribute("role","none")}});let U=ye([v==null?void 0:v.id]),$=ie({open:C===r.Open,option:void 0}),ne=I(()=>{f.actions.setActivationTrigger(J.Pointer)}),be=I(_=>{_.preventDefault(),f.actions.setActivationTrigger(J.Pointer)}),ee=ge(m?X():{},{"aria-labelledby":U,role:"listbox","aria-multiselectable":n.mode===H.Multi?!0:void 0,id:o,ref:G,style:{...p.style,...u,"--input-width":Ie(S,x,!0).width,"--button-width":Ie(S,v,!0).width},onWheel:z===J.Pointer?void 0:ne,onMouseDown:be,...qe(j)}),q=S&&C===r.Closed&&!T.static,t=De(q,(M=n.virtual)==null?void 0:M.options),V=De(q,n.value),P=Q(_=>n.compare(V,_),[n.compare,V]),N=ae(()=>{if(!n.virtual)return n;if(t===void 0)throw new Error("Missing `options` in virtual mode");return t!==n.virtual.options?{...n,virtual:{...n.virtual,options:t}}:n},[n,t,(Ce=n.virtual)==null?void 0:Ce.options]);n.virtual&&Object.assign(p,{children:L.createElement(de.Provider,{value:N},L.createElement(Eo,{slot:$},p.children))});let g=ue(),i=ae(()=>n.mode===H.Multi?n:{...n,isSelected:P},[n,P]);return L.createElement(Co,{enabled:y?T.static||S:!1,ownerDocument:D},L.createElement(de.Provider,{value:i},g({ourProps:ee,theirProps:{...p,children:L.createElement(lo,{freeze:q},typeof p.children=="function"?(ve=p.children)==null?void 0:ve.call(p,$):p.children)},slot:$,defaultTag:Do,features:So,visible:s,name:"Combobox.Options"})))}let Lo="div";function Vo(T,O){var l,k,Y;let e=te("Combobox.Option"),o=pe("Combobox.Option"),E=re(),{id:R=`headlessui-combobox-option-${E}`,value:y,disabled:b=(Y=(k=(l=e.virtual)==null?void 0:l.disabled)==null?void 0:k.call(l,y))!=null?Y:!1,order:h=null,...p}=T,[f]=F(o,s=>[s.inputElement]),n=_e(f),m=F(o,Q(s=>o.selectors.isActive(s,y,R),[y,R])),a=e.isSelected(y),u=me(null),A=ze({disabled:b,value:y,domRef:u,order:h}),d=Ae(Le),X=ce(O,u,d?d.measureElement:null),G=I(()=>{o.actions.setIsTyping(!1),o.actions.onChange(y)});Z(()=>o.actions.registerOption(R,A),[A,R]);let C=F(o,Q(s=>o.selectors.shouldScrollIntoView(s,y,R),[y,R]));Z(()=>{if(C)return bo().requestAnimationFrame(()=>{var s,U;(U=(s=u.current)==null?void 0:s.scrollIntoView)==null||U.call(s,{block:"nearest"})})},[C,u]);let x=I(s=>{s.preventDefault(),s.button===yo.Left&&(b||(G(),fo()||requestAnimationFrame(()=>n()),e.mode===H.Single&&o.actions.closeCombobox()))}),v=I(()=>{if(b)return o.actions.goToOption({focus:w.Nothing});let s=e.calculateIndex(y);o.actions.goToOption({focus:w.Specific,idx:s})}),c=je(),z=I(s=>c.update(s)),D=I(s=>{if(!c.wasMoved(s)||b||m&&o.state.activationTrigger===J.Pointer)return;let U=e.calculateIndex(y);o.actions.goToOption({focus:w.Specific,idx:U},J.Pointer)}),K=I(s=>{c.wasMoved(s)&&(b||m&&(e.optionsPropsRef.current.hold||o.state.activationTrigger===J.Pointer&&o.actions.goToOption({focus:w.Nothing})))}),W=ie({active:m,focus:m,selected:a,disabled:b}),S={id:R,ref:X,role:"option",tabIndex:b===!0?void 0:-1,"aria-disabled":b===!0?!0:void 0,"aria-selected":a,disabled:void 0,onMouseDown:x,onFocus:v,onPointerEnter:z,onMouseEnter:z,onPointerMove:D,onMouseMove:D,onPointerLeave:K,onMouseLeave:K};return ue()({ourProps:S,theirProps:p,slot:W,defaultTag:Lo,name:"Combobox.Option"})}let wo=se(Ao),Bo=se(Fo),ko=se(Ro),No=xo,Uo=se(Mo),Ho=se(Vo),Ht=Object.assign(wo,{Input:ko,Button:Bo,Label:No,Options:Uo,Option:Ho});export{Ht as Combobox,Bo as ComboboxButton,ko as ComboboxInput,No as ComboboxLabel,Ho as ComboboxOption,Uo as ComboboxOptions};
|