2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
import ee,{Fragment as xe,createContext as pe,createRef as Ce,useCallback as Oe,useContext as se,useEffect as be,useMemo as M,useReducer as ge,useRef as S}from"react";import{useComputed as ne}from'../../hooks/use-computed.js';import{useDisposables as re}from'../../hooks/use-disposables.js';import{useEvent as x}from'../../hooks/use-event.js';import{useId as Q}from'../../hooks/use-id.js';import{useIsoMorphicEffect as k}from'../../hooks/use-iso-morphic-effect.js';import{useLatestValue as ye}from'../../hooks/use-latest-value.js';import{useOutsideClick as Re}from'../../hooks/use-outside-click.js';import{useResolveButtonType as ve}from'../../hooks/use-resolve-button-type.js';import{useSyncRefs as Y}from'../../hooks/use-sync-refs.js';import{useTreeWalker as Pe}from'../../hooks/use-tree-walker.js';import{calculateActiveIndex as Ae,Focus as R}from'../../utils/calculate-active-index.js';import{disposables as de}from'../../utils/disposables.js';import{forwardRefWithAs as G,render as X,compact as Ee,Features as fe}from'../../utils/render.js';import{isDisabledReactIssue7711 as Se}from'../../utils/bugs.js';import{match as j}from'../../utils/match.js';import{objectToFormEntries as Ie}from'../../utils/form.js';import{sortByDomNode as Le}from'../../utils/focus-management.js';import{Hidden as Ve,Features as De}from'../../internal/hidden.js';import{useOpenClosed as Fe,State as oe,OpenClosedProvider as Me}from'../../internal/open-closed.js';import{Keys as I}from'../keyboard.js';import{useControllable as _e}from'../../hooks/use-controllable.js';import{useWatch as ce}from'../../hooks/use-watch.js';import{useTrackedPointer as he}from'../../hooks/use-tracked-pointer.js';import{isMobile as Be}from'../../utils/platform.js';import{useOwnerDocument as ke}from'../../hooks/use-owner.js';var we=(e=>(e[e.Open=0]="Open",e[e.Closed=1]="Closed",e))(we||{}),Ue=(e=>(e[e.Single=0]="Single",e[e.Multi=1]="Multi",e))(Ue||{}),Ne=(e=>(e[e.Pointer=0]="Pointer",e[e.Other=1]="Other",e))(Ne||{}),He=(n=>(n[n.OpenCombobox=0]="OpenCombobox",n[n.CloseCombobox=1]="CloseCombobox",n[n.GoToOption=2]="GoToOption",n[n.RegisterOption=3]="RegisterOption",n[n.UnregisterOption=4]="UnregisterOption",n[n.RegisterLabel=5]="RegisterLabel",n))(He||{});function ae(t,a=e=>e){let e=t.activeOptionIndex!==null?t.options[t.activeOptionIndex]:null,r=Le(a(t.options.slice()),b=>b.dataRef.current.domRef.current),l=e?r.indexOf(e):null;return l===-1&&(l=null),{options:r,activeOptionIndex:l}}let Ge={[1](t){var a;return(a=t.dataRef.current)!=null&&a.disabled||t.comboboxState===1?t:{...t,activeOptionIndex:null,comboboxState:1}},[0](t){var e;if((e=t.dataRef.current)!=null&&e.disabled||t.comboboxState===0)return t;let a=t.activeOptionIndex;if(t.dataRef.current){let{isSelected:r}=t.dataRef.current,l=t.options.findIndex(b=>r(b.dataRef.current.value));l!==-1&&(a=l)}return{...t,comboboxState:0,activeOptionIndex:a}},[2](t,a){var l,b,n,d;if((l=t.dataRef.current)!=null&&l.disabled||(b=t.dataRef.current)!=null&&b.optionsRef.current&&!((n=t.dataRef.current)!=null&&n.optionsPropsRef.current.static)&&t.comboboxState===1)return t;let e=ae(t);if(e.activeOptionIndex===null){let o=e.options.findIndex(i=>!i.dataRef.current.disabled);o!==-1&&(e.activeOptionIndex=o)}let r=Ae(a,{resolveItems:()=>e.options,resolveActiveIndex:()=>e.activeOptionIndex,resolveId:o=>o.id,resolveDisabled:o=>o.dataRef.current.disabled});return{...t,...e,activeOptionIndex:r,activationTrigger:(d=a.trigger)!=null?d:1}},[3]:(t,a)=>{var b,n;let e={id:a.id,dataRef:a.dataRef},r=ae(t,d=>[...d,e]);t.activeOptionIndex===null&&(b=t.dataRef.current)!=null&&b.isSelected(a.dataRef.current.value)&&(r.activeOptionIndex=r.options.indexOf(e));let l={...t,...r,activationTrigger:1};return(n=t.dataRef.current)!=null&&n.__demoMode&&t.dataRef.current.value===void 0&&(l.activeOptionIndex=0),l},[4]:(t,a)=>{let e=ae(t,r=>{let l=r.findIndex(b=>b.id===a.id);return l!==-1&&r.splice(l,1),r});return{...t,...e,activationTrigger:1}},[5]:(t,a)=>({...t,labelId:a.id})},le=pe(null);le.displayName="ComboboxActionsContext";function Z(t){let a=se(le);if(a===null){let e=new Error(`<${t} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,Z),e}return a}let ie=pe(null);ie.displayName="ComboboxDataContext";function J(t){let a=se(ie);if(a===null){let e=new Error(`<${t} /> is missing a parent <Combobox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(e,J),e}return a}function Xe(t,a){return j(a.type,Ge,t,a)}let je=xe;function Je(t,a){let{value:e,defaultValue:r,onChange:l,form:b,name:n,by:d=(u,T)=>u===T,disabled:o=!1,__demoMode:i=!1,nullable:A=!1,multiple:O=!1,...C}=t,[f=O?[]:void 0,g]=_e(e,l,r),[m,c]=ge(Xe,{dataRef:Ce(),comboboxState:i?0:1,options:[],activeOptionIndex:null,activationTrigger:1,labelId:null}),D=S(!1),_=S({static:!1,hold:!1}),w=S(null),U=S(null),N=S(null),K=S(null),h=x(typeof d=="string"?(u,T)=>{let v=d;return(u==null?void 0:u[v])===(T==null?void 0:T[v])}:d),H=Oe(u=>j(p.mode,{[1]:()=>f.some(T=>h(T,u)),[0]:()=>h(f,u)}),[f]),p=M(()=>({...m,optionsPropsRef:_,labelRef:w,inputRef:U,buttonRef:N,optionsRef:K,value:f,defaultValue:r,disabled:o,mode:O?1:0,get activeOptionIndex(){if(D.current&&m.activeOptionIndex===null&&m.options.length>0){let u=m.options.findIndex(T=>!T.dataRef.current.disabled);if(u!==-1)return u}return m.activeOptionIndex},compare:h,isSelected:H,nullable:A,__demoMode:i}),[f,r,o,O,A,i,m]),y=S(p.activeOptionIndex!==null?p.options[p.activeOptionIndex]:null);be(()=>{let u=p.activeOptionIndex!==null?p.options[p.activeOptionIndex]:null;y.current!==u&&(y.current=u)}),k(()=>{m.dataRef.current=p},[p]),Re([p.buttonRef,p.inputRef,p.optionsRef],()=>te.closeCombobox(),p.comboboxState===0);let E=M(()=>({open:p.comboboxState===0,disabled:o,activeIndex:p.activeOptionIndex,activeOption:p.activeOptionIndex===null?null:p.options[p.activeOptionIndex].dataRef.current.value,value:f}),[p,o,f]),B=x(u=>{let T=p.options.find(v=>v.id===u);T&&V(T.dataRef.current.value)}),s=x(()=>{if(p.activeOptionIndex!==null){let{dataRef:u,id:T}=p.options[p.activeOptionIndex];V(u.current.value),te.goToOption(R.Specific,T)}}),W=x(()=>{c({type:0}),D.current=!0}),L=x(()=>{c({type:1}),D.current=!1}),$=x((u,T,v)=>(D.current=!1,u===R.Specific?c({type:2,focus:R.Specific,id:T,trigger:v}):c({type:2,focus:u,trigger:v}))),P=x((u,T)=>(c({type:3,id:u,dataRef:T}),()=>{var v;((v=y.current)==null?void 0:v.id)===u&&(D.current=!0),c({type:4,id:u})})),F=x(u=>(c({type:5,id:u}),()=>c({type:5,id:null}))),V=x(u=>j(p.mode,{[0](){return g==null?void 0:g(u)},[1](){let T=p.value.slice(),v=T.findIndex(q=>h(q,u));return v===-1?T.push(u):T.splice(v,1),g==null?void 0:g(T)}})),te=M(()=>({onChange:V,registerOption:P,registerLabel:F,goToOption:$,closeCombobox:L,openCombobox:W,selectActiveOption:s,selectOption:B}),[]),Te=a===null?{}:{ref:a},z=S(null),me=re();return be(()=>{z.current&&r!==void 0&&me.addEventListener(z.current,"reset",()=>{g==null||g(r)})},[z,g]),ee.createElement(le.Provider,{value:te},ee.createElement(ie.Provider,{value:p},ee.createElement(Me,{value:j(p.comboboxState,{[0]:oe.Open,[1]:oe.Closed})},n!=null&&f!=null&&Ie({[n]:f}).map(([u,T],v)=>ee.createElement(Ve,{features:De.Hidden,ref:v===0?q=>{var ue;z.current=(ue=q==null?void 0:q.closest("form"))!=null?ue:null}:void 0,...Ee({key:u,as:"input",type:"hidden",hidden:!0,readOnly:!0,form:b,name:u,value:T})})),X({ourProps:Te,theirProps:C,slot:E,defaultTag:je,name:"Combobox"}))))}let Ke="input";function We(t,a){var p,y,E,B;let e=Q(),{id:r=`headlessui-combobox-input-${e}`,onChange:l,displayValue:b,type:n="text",...d}=t,o=J("Combobox.Input"),i=Z("Combobox.Input"),A=Y(o.inputRef,a),O=ke(o.inputRef),C=S(!1),f=re(),g=x(()=>{i.onChange(null),o.optionsRef.current&&(o.optionsRef.current.scrollTop=0),i.goToOption(R.Nothing)}),m=function(){var s;return typeof b=="function"&&o.value!==void 0?(s=b(o.value))!=null?s:"":typeof o.value=="string"?o.value:""}();ce(([s,W],[L,$])=>{if(C.current)return;let P=o.inputRef.current;P&&(($===0&&W===1||s!==L)&&(P.value=s),requestAnimationFrame(()=>{if(C.current||!P||(O==null?void 0:O.activeElement)!==P)return;let{selectionStart:F,selectionEnd:V}=P;Math.abs((V!=null?V:0)-(F!=null?F:0))===0&&F===0&&P.setSelectionRange(P.value.length,P.value.length)}))},[m,o.comboboxState,O]),ce(([s],[W])=>{if(s===0&&W===1){if(C.current)return;let L=o.inputRef.current;if(!L)return;let $=L.value,{selectionStart:P,selectionEnd:F,selectionDirection:V}=L;L.value="",L.value=$,V!==null?L.setSelectionRange(P,F,V):L.setSelectionRange(P,F)}},[o.comboboxState]);let c=S(!1),D=x(()=>{c.current=!0}),_=x(()=>{f.nextFrame(()=>{c.current=!1})}),w=x(s=>{switch(C.current=!0,s.key){case I.Enter:if(C.current=!1,o.comboboxState!==0||c.current)return;if(s.preventDefault(),s.stopPropagation(),o.activeOptionIndex===null){i.closeCombobox();return}i.selectActiveOption(),o.mode===0&&i.closeCombobox();break;case I.ArrowDown:return C.current=!1,s.preventDefault(),s.stopPropagation(),j(o.comboboxState,{[0]:()=>{i.goToOption(R.Next)},[1]:()=>{i.openCombobox()}});case I.ArrowUp:return C.current=!1,s.preventDefault(),s.stopPropagation(),j(o.comboboxState,{[0]:()=>{i.goToOption(R.Previous)},[1]:()=>{i.openCombobox(),f.nextFrame(()=>{o.value||i.goToOption(R.Last)})}});case I.Home:if(s.shiftKey)break;return C.current=!1,s.preventDefault(),s.stopPropagation(),i.goToOption(R.First);case I.PageUp:return C.current=!1,s.preventDefault(),s.stopPropagation(),i.goToOption(R.First);case I.End:if(s.shiftKey)break;return C.current=!1,s.preventDefault(),s.stopPropagation(),i.goToOption(R.Last);case I.PageDown:return C.current=!1,s.preventDefault(),s.stopPropagation(),i.goToOption(R.Last);case I.Escape:return C.current=!1,o.comboboxState!==0?void 0:(s.preventDefault(),o.optionsRef.current&&!o.optionsPropsRef.current.static&&s.stopPropagation(),o.nullable&&o.mode===0&&o.value===null&&g(),i.closeCombobox());case I.Tab:if(C.current=!1,o.comboboxState!==0)return;o.mode===0&&i.selectActiveOption(),i.closeCombobox();break}}),U=x(s=>{l==null||l(s),o.nullable&&o.mode===0&&s.target.value===""&&g(),i.openCombobox()}),N=x(()=>{C.current=!1}),K=ne(()=>{if(o.labelId)return[o.labelId].join(" ")},[o.labelId]),h=M(()=>({open:o.comboboxState===0,disabled:o.disabled}),[o]),H={ref:A,id:r,role:"combobox",type:n,"aria-controls":(p=o.optionsRef.current)==null?void 0:p.id,"aria-expanded":o.comboboxState===0,"aria-activedescendant":o.activeOptionIndex===null||(y=o.options[o.activeOptionIndex])==null?void 0:y.id,"aria-labelledby":K,"aria-autocomplete":"list",defaultValue:(B=(E=t.defaultValue)!=null?E:o.defaultValue!==void 0?b==null?void 0:b(o.defaultValue):null)!=null?B:o.defaultValue,disabled:o.disabled,onCompositionStart:D,onCompositionEnd:_,onKeyDown:w,onChange:U,onBlur:N};return X({ourProps:H,theirProps:d,slot:h,defaultTag:Ke,name:"Combobox.Input"})}let $e="button";function qe(t,a){var g;let e=J("Combobox.Button"),r=Z("Combobox.Button"),l=Y(e.buttonRef,a),b=Q(),{id:n=`headlessui-combobox-button-${b}`,...d}=t,o=re(),i=x(m=>{switch(m.key){case I.ArrowDown:return m.preventDefault(),m.stopPropagation(),e.comboboxState===1&&r.openCombobox(),o.nextFrame(()=>{var c;return(c=e.inputRef.current)==null?void 0:c.focus({preventScroll:!0})});case I.ArrowUp:return m.preventDefault(),m.stopPropagation(),e.comboboxState===1&&(r.openCombobox(),o.nextFrame(()=>{e.value||r.goToOption(R.Last)})),o.nextFrame(()=>{var c;return(c=e.inputRef.current)==null?void 0:c.focus({preventScroll:!0})});case I.Escape:return e.comboboxState!==0?void 0:(m.preventDefault(),e.optionsRef.current&&!e.optionsPropsRef.current.static&&m.stopPropagation(),r.closeCombobox(),o.nextFrame(()=>{var c;return(c=e.inputRef.current)==null?void 0:c.focus({preventScroll:!0})}));default:return}}),A=x(m=>{if(Se(m.currentTarget))return m.preventDefault();e.comboboxState===0?r.closeCombobox():(m.preventDefault(),r.openCombobox()),o.nextFrame(()=>{var c;return(c=e.inputRef.current)==null?void 0:c.focus({preventScroll:!0})})}),O=ne(()=>{if(e.labelId)return[e.labelId,n].join(" ")},[e.labelId,n]),C=M(()=>({open:e.comboboxState===0,disabled:e.disabled,value:e.value}),[e]),f={ref:l,id:n,type:ve(t,e.buttonRef),tabIndex:-1,"aria-haspopup":"listbox","aria-controls":(g=e.optionsRef.current)==null?void 0:g.id,"aria-expanded":e.comboboxState===0,"aria-labelledby":O,disabled:e.disabled,onClick:A,onKeyDown:i};return X({ourProps:f,theirProps:d,slot:C,defaultTag:$e,name:"Combobox.Button"})}let Qe="label";function Ye(t,a){let e=Q(),{id:r=`headlessui-combobox-label-${e}`,...l}=t,b=J("Combobox.Label"),n=Z("Combobox.Label"),d=Y(b.labelRef,a);k(()=>n.registerLabel(r),[r]);let o=x(()=>{var O;return(O=b.inputRef.current)==null?void 0:O.focus({preventScroll:!0})}),i=M(()=>({open:b.comboboxState===0,disabled:b.disabled}),[b]);return X({ourProps:{ref:d,id:r,onClick:o},theirProps:l,slot:i,defaultTag:Qe,name:"Combobox.Label"})}let Ze="ul",ze=fe.RenderStrategy|fe.Static;function eo(t,a){let e=Q(),{id:r=`headlessui-combobox-options-${e}`,hold:l=!1,...b}=t,n=J("Combobox.Options"),d=Y(n.optionsRef,a),o=Fe(),i=(()=>o!==null?(o&oe.Open)===oe.Open:n.comboboxState===0)();k(()=>{var f;n.optionsPropsRef.current.static=(f=t.static)!=null?f:!1},[n.optionsPropsRef,t.static]),k(()=>{n.optionsPropsRef.current.hold=l},[n.optionsPropsRef,l]),Pe({container:n.optionsRef.current,enabled:n.comboboxState===0,accept(f){return f.getAttribute("role")==="option"?NodeFilter.FILTER_REJECT:f.hasAttribute("role")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT},walk(f){f.setAttribute("role","none")}});let A=ne(()=>{var f,g;return(g=n.labelId)!=null?g:(f=n.buttonRef.current)==null?void 0:f.id},[n.labelId,n.buttonRef.current]),O=M(()=>({open:n.comboboxState===0}),[n]),C={"aria-labelledby":A,role:"listbox","aria-multiselectable":n.mode===1?!0:void 0,id:r,ref:d};return X({ourProps:C,theirProps:b,slot:O,defaultTag:Ze,features:ze,visible:i,name:"Combobox.Options"})}let oo="li";function to(t,a){var H,p;let e=Q(),{id:r=`headlessui-combobox-option-${e}`,disabled:l=!1,value:b,...n}=t,d=J("Combobox.Option"),o=Z("Combobox.Option"),i=d.activeOptionIndex!==null?d.options[d.activeOptionIndex].id===r:!1,A=d.isSelected(b),O=S(null),C=ye({disabled:l,value:b,domRef:O,textValue:(p=(H=O.current)==null?void 0:H.textContent)==null?void 0:p.toLowerCase()}),f=Y(a,O),g=x(()=>o.selectOption(r));k(()=>o.registerOption(r,C),[C,r]);let m=S(!d.__demoMode);k(()=>{if(!d.__demoMode)return;let y=de();return y.requestAnimationFrame(()=>{m.current=!0}),y.dispose},[]),k(()=>{if(d.comboboxState!==0||!i||!m.current||d.activationTrigger===0)return;let y=de();return y.requestAnimationFrame(()=>{var E,B;(B=(E=O.current)==null?void 0:E.scrollIntoView)==null||B.call(E,{block:"nearest"})}),y.dispose},[O,i,d.comboboxState,d.activationTrigger,d.activeOptionIndex]);let c=x(y=>{if(l)return y.preventDefault();g(),d.mode===0&&o.closeCombobox(),Be()||requestAnimationFrame(()=>{var E;return(E=d.inputRef.current)==null?void 0:E.focus()})}),D=x(()=>{if(l)return o.goToOption(R.Nothing);o.goToOption(R.Specific,r)}),_=he(),w=x(y=>_.update(y)),U=x(y=>{_.wasMoved(y)&&(l||i||o.goToOption(R.Specific,r,0))}),N=x(y=>{_.wasMoved(y)&&(l||i&&(d.optionsPropsRef.current.hold||o.goToOption(R.Nothing)))}),K=M(()=>({active:i,selected:A,disabled:l}),[i,A,l]);return X({ourProps:{id:r,ref:f,role:"option",tabIndex:l===!0?void 0:-1,"aria-disabled":l===!0?!0:void 0,"aria-selected":A,disabled:void 0,onClick:c,onFocus:D,onPointerEnter:w,onMouseEnter:w,onPointerMove:U,onMouseMove:U,onPointerLeave:N,onMouseLeave:N},theirProps:n,slot:K,defaultTag:oo,name:"Combobox.Option"})}let no=G(Je),ro=G(qe),ao=G(We),lo=G(Ye),io=G(eo),uo=G(to),qo=Object.assign(no,{Input:ao,Button:ro,Label:lo,Options:io,Option:uo});export{qo as Combobox};
|