react-animated-select 0.7.7 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/base.css +1 -0
  2. package/dist/chip.cjs +1 -0
  3. package/dist/chip.css +1 -0
  4. package/dist/chip.js +113 -0
  5. package/dist/chipGeometry.cjs +1 -0
  6. package/dist/chipGeometry.js +37 -0
  7. package/dist/chipMotion.cjs +1 -0
  8. package/dist/chipMotion.js +85 -0
  9. package/dist/dropdown.cjs +1 -0
  10. package/dist/dropdown.js +70 -0
  11. package/dist/dropdownPosition.cjs +1 -0
  12. package/dist/dropdownPosition.js +97 -0
  13. package/dist/index.cjs +1 -1
  14. package/dist/index.d.cts +41 -1
  15. package/dist/index.js +13 -0
  16. package/dist/liveRegion.cjs +1 -0
  17. package/dist/liveRegion.js +42 -0
  18. package/dist/model.cjs +1 -0
  19. package/dist/model.js +138 -0
  20. package/dist/motion.cjs +1 -0
  21. package/dist/motion.js +122 -0
  22. package/dist/optionList.cjs +1 -0
  23. package/dist/optionList.js +105 -0
  24. package/dist/paging.cjs +1 -0
  25. package/dist/paging.js +47 -0
  26. package/dist/select.cjs +1 -0
  27. package/dist/select.js +165 -0
  28. package/dist/state.cjs +1 -0
  29. package/dist/state.js +50 -0
  30. package/dist/style.css +4 -0
  31. package/dist/theme.css +1 -0
  32. package/dist/trigger.cjs +1 -0
  33. package/dist/trigger.js +99 -0
  34. package/dist/useChipLayout.cjs +1 -0
  35. package/dist/useChipLayout.js +77 -0
  36. package/dist/useSelect.cjs +1 -0
  37. package/dist/useSelect.js +100 -0
  38. package/dist/useSelectBehavior.cjs +1 -0
  39. package/dist/useSelectBehavior.js +107 -0
  40. package/dist/useSelectModel.cjs +1 -0
  41. package/dist/useSelectModel.js +59 -0
  42. package/dist/utils.cjs +1 -0
  43. package/dist/utils.js +99 -0
  44. package/index.d.ts +41 -1
  45. package/package.json +4 -4
  46. package/dist/index.css +0 -1
  47. package/dist/index.es.js +0 -1299
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),o=require("react"),Re=require("react-dom"),Y=o.createContext(null),ne=o.createContext(null),se=o.createContext(null),kt=(e,t)=>{const n=typeof t=="function"?t(e):t;return n===e?e:Object.keys(n).some(r=>!Object.is(n[r],e[r]))?{...e,...n}:e},at=e=>{let t=e;const n=new Set;return{get:()=>t,set:s=>{Object.keys(s).every(r=>Object.is(s[r],t[r]))||(t={...t,...s},n.forEach(r=>r()))},subscribe:s=>(n.add(s),()=>n.delete(s))}},Be=e=>{const t=o.useRef(e);o.useInsertionEffect(()=>{t.current=e});const[n]=o.useState(()=>Object.fromEntries(Object.keys(e).map(s=>[s,(...r)=>t.current[s](...r)])));return n},ct=(e,t)=>{const[n,s]=o.useState(e);return n===e||t(n,e)?n:(s(e),e)},jt=(e,t)=>e===t||!!e&&!!t&&Object.keys(e).length===Object.keys(t).length&&Object.keys(e).every(n=>Object.is(e[n],t[n])),ye=(e,t,n=0)=>{if(Object.is(e,t))return!0;if(n>12||typeof e!="object"||typeof t!="object"||e===null||t===null||Array.isArray(e)!==Array.isArray(t))return!1;if(e.$$typeof||t.$$typeof)return e.$$typeof===t.$$typeof&&e.type===t.type&&e.key===t.key&&ye(e.props,t.props,n+1);const s=Object.keys(e);return s.length===Object.keys(t).length&&s.every(r=>Object.hasOwn(t,r)&&ye(e[r],t[r],n+1))},Tt=new Set(["style","texts","icons","attrs"]),Mt=(e,t)=>{const n=Object.keys(t);return n.length===Object.keys(e).length&&n.every(s=>Tt.has(s)?jt(e[s],t[s]):Object.is(e[s],t[s]))},It=e=>ct(e,Mt),$e=e=>ct(e,ye),he={XMark:({className:e="",...t})=>E.jsx("svg",{className:e,viewBox:"0 0 320 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...t,children:E.jsx("path",{d:"M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z"})}),ArrowUp:({className:e="",...t})=>E.jsx("svg",{className:e,viewBox:"0 0 448 512",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...t,children:E.jsx("path",{d:"M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"})}),Checkmark:({className:e="",...t})=>E.jsx("svg",{className:e,viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",height:"1em",width:"1em",...t,children:E.jsx("path",{d:"M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z"})})},ie=(e,t)=>{if(!e)return null;const n=(s={})=>({...t,...s,style:{...t?.style,...s?.style}});if(typeof e=="string")return E.jsx("img",{src:e,...n(),className:ae("rac-icon",t?.className),alt:""});if(o.isValidElement(e))return o.cloneElement(e,n(e.props));if(typeof e=="function"||typeof e=="object"&&e.$$typeof){const s=e;return E.jsx(s,{...n()})}return null},Ee=(e,t)=>`${e}-${String(t).replace(/[^A-Za-z0-9-]/gu,n=>`_${n.codePointAt(0).toString(36)}_`)}`,X=e=>e?"":void 0,ae=(e,t)=>t?`${e} ${t}`:e,Fe=(e,t,n)=>e.jsx||(t&&"original"in e?t(e.original,{selected:n,disabled:!!e.disabled}):null),Pe=E.jsxs("span",{className:"rac-dots","aria-hidden":"true",children:[E.jsx("i",{}),E.jsx("i",{}),E.jsx("i",{})]}),Rt=(()=>{try{return process.env.NODE_ENV!=="production"}catch{return!1}})(),We=new Set,ee=(e,t)=>{!Rt||We.has(e)||(We.add(e),console.warn(`[react-animated-select] ${t}`))},Z=e=>{e?.stopPropagation(),e?.preventDefault()},lt=(e,t)=>{e?.currentTarget.contains(document.activeElement)&&t.current?.focus()},$t={index:-1,fallback:-1,ready:!1},xe=({index:e,fallback:t})=>e===-1?t:e,At=10,Lt=500,Nt=new Set(["ArrowDown","ArrowUp","PageDown","PageUp","Home","End"]),Dt=(e,t)=>o.useMemo(()=>{const n=new Set(e.map(r=>r.group).filter(Boolean)),s=r=>!!r&&!r.disabled&&!r.loading&&(r.groupHeader?n.has(r.name):!r.group||t.has(r.group));return{reach:s,list:e.flatMap((r,i)=>s(r)?[i]:[])}},[e,t]),Bt=(e,t,n,s)=>{const r=e.length-1;if(r<0)return-1;if(n==="Home")return e[0];if(n==="End")return e[r];const i=n==="ArrowUp"||n==="PageUp"?-1:1,a=e.indexOf(t);if(a===-1)return e[i>0?0:r];const c=a+i*(n.startsWith("Page")?At:1);return c>=0&&c<=r?e[c]:n.startsWith("Page")||s?e[c<0?0:r]:e[(c+e.length)%e.length]},Ft=(e,t,n,s)=>{const r=[...s].every(u=>u===s[0]),i=r?s[0]:s,a=t.filter(u=>"original"in e[u]),c=Math.max(a.indexOf(n)+(r?1:0),0);for(let u=0;u<a.length;u++){const y=a[(c+u)%a.length];if(String(e[y].name).toLowerCase().startsWith(i))return y}return-1};function Pt({props:e,state:t,setState:n,normalizedOptions:s,expandedGroups:r,selected:i,selectedIDs:a,visibility:c,setVisibility:u,modelActions:y,loadMoreOnce:f,highlightStore:O}){const{disabled:d,multiple:l,hasMore:x,loadButton:w,loadOffset:g,loadAhead:p,icons:v,onFocus:$,onBlur:M,onKeyDown:H}=e,{selectOption:T,clear:h,removeOption:j}=y,{deleting:L}=t,{reach:B,list:I}=Dt(s,r),F=o.useRef({lastWindowFocusTime:0,justFocused:!1,focusTimeout:null,query:"",queryTimeout:null}),b=o.useMemo(()=>{const m=new Set(l?a.map(C=>C.id):i?[i.id]:[]),S=m.size?s.findIndex(C=>m.has(C.id)&&B(C)):-1;return S!==-1?S:I.find(C=>!s[C].groupHeader)??I[0]??-1},[s,i,a,l,B,I]),N=m=>{!w&&c&&x&&m>=s.length-p&&f()};o.useLayoutEffect(()=>{const{index:m}=O.get();O.set({fallback:b,index:m!==-1&&B(s[m])?m:-1}),N(xe(O.get()))}),o.useEffect(()=>{const m=F.current,S=()=>m.lastWindowFocusTime=Date.now();return window.addEventListener("focus",S),()=>{window.removeEventListener("focus",S),clearTimeout(m.focusTimeout),clearTimeout(m.queryTimeout)}},[]);const k=m=>{O.set({index:m}),N(m)},P=(m,S)=>{const C=F.current;clearTimeout(C.queryTimeout),C.queryTimeout=setTimeout(()=>C.query="",Lt),C.query+=m.toLowerCase();const R=Ft(s,I,S,C.query);R!==-1&&k(R),c||u(!0)};return Be({highlight:k,handleListScroll:m=>{if(w)return;const{scrollTop:S,scrollHeight:C,clientHeight:R}=m.currentTarget;C-S<=R+g&&f()},handleBlur:m=>{const S=m.relatedTarget?.closest(".rac-options");m.currentTarget.contains(m.relatedTarget)||S||(M?.(m),L&&n({deleting:!1}),c&&u(!1))},handleFocus:m=>{const S=m.currentTarget.contains(m.relatedTarget);S||$?.(m),!(S||m.target!==m.currentTarget||c||d||L||document.hidden||Date.now()-F.current.lastWindowFocusTime<100)&&(clearTimeout(F.current.focusTimeout),F.current.focusTimeout=setTimeout(()=>F.current.justFocused=!1,200),F.current.justFocused=!0,u(!0))},toggleVisibility:m=>{if(L){Z(m),n({deleting:!1});return}d||F.current.justFocused||u(!c)},handleKeyDown:m=>{if(H?.(m),m.defaultPrevented||d||m.nativeEvent?.isComposing)return;const{key:S}=m;if(m.target!==m.currentTarget&&(S==="Enter"||S.length===1))return;const C=xe(O.get());if(S.length===1&&!m.ctrlKey&&!m.metaKey&&!m.altKey&&(S!==" "||F.current.query)){m.preventDefault(),P(S,C);return}if(Nt.has(S)){m.preventDefault(),(c||S==="Home"||S==="End")&&k(Bt(I,C,S,!w&&x)),c||u(!0);return}switch(S){case"Enter":case" ":m.preventDefault(),c?C!==-1&&s[C]&&(k(C),T(s[C],m)):u(!0);break;case"Escape":if(L)n({deleting:!1});else if(c)u(!1);else break;Z(m);break;case"Tab":c&&u(!1);break;case"Backspace":case"Delete":{const R=a.at(-1);if(l&&S==="Backspace"&&v.remove&&R)j(R.id);else if(v.clear&&(i||R))h();else break;m.preventDefault();break}}}})}const Ht=["group","disabled","options","items","children"],He=["name","label","id","value"],pe=e=>e!=null&&e!=="",ut=e=>e!==null&&typeof e=="object"&&!Array.isArray(e),Oe=e=>ut(e)&&[Object.prototype,null].includes(Object.getPrototypeOf(e)),Vt=e=>{try{const t=String(e);return t.startsWith("[object ")?null:t}catch{return null}},Ve=(e,t=!1)=>{if(t&&typeof e.group=="string")return e.group;const n=He.find(i=>pe(e[i]));if(n)return String(e[n]);const s=!Oe(e)&&Vt(e);if(s)return s;const r=Object.entries(e).find(([i,a])=>!Ht.includes(i)&&pe(a));return r?String(r[1]):null},zt=e=>Oe(e)&&("options"in e||"group"in e&&!He.some(t=>t in e)),Ge=(e,t,n,s,r,{emptyOption:i,invalidOption:a,disabledOption:c})=>{const u=`${n}-${t}`;if(e==null||e==="")return{id:u,userId:null,name:i,raw:e,disabled:!0,type:"normal",group:s,groupDisabled:r};if(typeof e=="function")return{id:u,userId:null,name:a,raw:e,disabled:!0,invalid:!0,type:"normal",group:s};if(ut(e)){const y=r||e.disabled===!0,f=e.value!==void 0?e.value:e.id!==void 0?e.id:e,O=Ve(e)||(y?c:i);return{id:u,userId:e.id??e.value??e.name??e.label,name:O,raw:f,original:e,disabled:y||O===i,type:typeof f=="boolean"?"boolean":"normal",group:s||e.group||null,groupDisabled:r}}return{id:u,userId:e,name:String(e),raw:e,original:e,disabled:r,type:typeof e=="boolean"?"boolean":"normal",group:s}},qt=({options:e,jsxOptions:t,childrenFirst:n,hasMore:s,loadButton:r,loadPending:i,loadingTitle:a,emptyOption:c,invalidOption:u,disabledOption:y,emptyGroup:f})=>{const O={emptyOption:c,invalidOption:u,disabledOption:y},d=new Map,l=[],x=new Set,w=h=>{let j=h;for(let L=1;x.has(j);L++)j=`${h}~${L}`;return x.add(j),j},g=t.map((h,j)=>{if(h.isGroupMarker)return{...h,type:"group-marker"};const L=!h.label&&!pe(h.userId)&&!pe(h.value)&&!h.hasJsx;return{...h,id:w(`jsx-${h.id}`),index:j,userId:h.userId,raw:h.value,original:h.value,name:h.label||(pe(h.value)?String(h.value):c),disabled:!!h.disabled||L,type:typeof h.value=="boolean"?"boolean":"normal",group:h.group||null}});let p=0;const v=(h,j=null,L=!1,B="0")=>{Array.isArray(h)||(h=[h]),h.forEach((I,F)=>{const b=`${B}-${F}`;if(zt(I)){const N=Ve(I,!0)||f;d.has(N)||d.set(N,{disabled:!!I.disabled,items:[]}),I.options?v(I.options,N,L||!!I.disabled,b):l.push({id:`empty-${N}-${b}`,name:N,group:N,isPlaceholder:!0,type:"group-marker",index:p++})}else Oe(I)&&!He.some(N=>N in I)&&!I.group?Object.values(I).forEach((N,k)=>l.push({...Ge(N,`${b}-${k}`,"default",j,L,O),index:p++})):l.push({...Ge(I,b,"default",j,L,O),index:p++})})};v(e);const $=n?[...g,...l]:[...l,...g],M=[],H=new Set;$.forEach(h=>{if(!h.group){M.push({type:"item",data:h});return}H.has(h.group)||(H.add(h.group),M.push({type:"group",name:h.group})),d.has(h.group)||d.set(h.group,{items:[]});const j=d.get(h.group);h.isGroupMarker?(j.className=h.className,j.style=h.style,h.disabled&&(j.disabled=!0)):h.isPlaceholder||j.items.push(h)});const T=[];return M.forEach(h=>{if(h.type==="item"){T.push(h.data);return}const j=d.get(h.name);T.push({className:j?.className||"",id:`group-header-${h.name}`,disabled:!!j?.disabled,style:j?.style||{},groupHeader:!0,name:h.name,type:"group"}),j?.items.forEach(L=>T.push(L))}),s&&r&&T.push({id:"special-load-more-id",name:a,loadMore:!0,loading:i,type:"special"}),T},Wt=e=>{const t=()=>null;return t.racKind="define",t.racRender=e,t.displayName=`defineOption(${e.name||"anonymous"})`,t},Ke={selected:null,selectedIDs:[]},le=e=>{try{return JSON.stringify(e)}catch{return}},dt=(e,t)=>e===t||e!==e&&t!==t,ve=e=>typeof e=="object"&&e!==null,Gt=(e,t)=>dt(e,t)||ve(e)&&ve(t)&&le(e)!==void 0&&le(e)===le(t),_e=(e,t,n,s)=>{if(e==null||Array.isArray(e)&&e.length===0)return Ke;const r=s.length?new Map(t.map(f=>[f.id,f])):null,i=r?[...s.map(f=>r.get(f)).filter(Boolean),...t]:t,a=new Set,c=new Map,u=f=>"original"in f&&!a.has(f.id),y=f=>{const O=ve(f);let d=i.find(p=>u(p)&&dt(p.original,f));const l=O?le(f):void 0;if(!d&&l!==void 0&&(d=i.find(p=>u(p)&&ve(p.original)&&le(p.original)===l)),d)return a.add(d.id),d;const x=String(O?f.id||f.value||l||"object":f),w=(c.get(x)??-1)+1;c.set(x,w);const g=`virtual-${x}-${w}`;return O?{id:g,name:Ve(f)||String(f.id||"Selected Object"),raw:f.value??f.id??f,original:f,userId:f.id??f.value??null,virtual:!0}:{id:g,name:String(f),raw:f,original:f,userId:f,virtual:!0}};return n?{selected:null,selectedIDs:(Array.isArray(e)?e:[e]).map(y)}:{selected:y(Array.isArray(e)?e[0]:e),selectedIDs:Ke.selectedIDs}},Ue={x:["width","marginLeft","marginRight","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],y:["height","marginTop","marginBottom","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"]},Kt={x:{minWidth:"0px",maxWidth:"none"},y:{minHeight:"0px",maxHeight:"none"}},ft=o.createContext(null);let Ae=null;const _t=()=>Ae??=(queueMicrotask(()=>{Ae=null}),{});function te({as:e="div",axis:t="y",fade:n=!1,in:s,unmountOnExit:r=!0,easing:i,duration:a,group:c,nodeRef:u,onEntered:y,onExited:f,...O}){const d=o.useContext(Y),l=o.useContext(ft),x=s===void 0&&!!l,w=x?l.present:!!s,g=a??(d?.duration??300)/(x&&l.swap?2:1),p=i??d?.easing??"ease",v=o.useRef(null),$=u??v,M=o.useRef(null),H=o.useRef(!1),T=o.useRef({restart:()=>{}}),[h]=o.useState(()=>x&&l.appear?!w:w),j=o.useRef(h),[L,B]=o.useState(!w);w&&L&&B(!1);const I=o.useEffectEvent(()=>{if(c?.delete(T.current),w){M.current?.cancel(),M.current=null,y?.();return}f?.(),x&&l.onExited(),r&&(M.current=null,B(!0))});if(o.useLayoutEffect(()=>{const b=$.current;if(!b)return;const N=n?[...Ue[t],"opacity"]:Ue[t],k={overflow:"hidden",textOverflow:"clip",...Kt[t]},P={...Object.fromEntries(N.map(A=>[A,A==="opacity"?0:"0px"])),...k},m=()=>{const{overflow:A}=b.style;b.style.overflow="hidden";const V=getComputedStyle(b),K={...Object.fromEntries(N.map(z=>[z,V[z]])),...k};return b.style.overflow=A,K},S=(A,V)=>{const K=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,z=M.current=b.animate([A,V],{duration:K?0:g,easing:p,fill:j.current?"backwards":"both"});if(z.onfinish=()=>{M.current===z&&H.current&&I()},T.current.frames=[A,V],!c)return;const q=z.timeline?.currentTime;q!=null&&(z.startTime=q,z.currentTime=0),T.current.batch=_t(),c.add(T.current)},C=()=>{const[A,V]=T.current.frames,K=M.current.effect.getComputedTiming().progress??0,z=q=>parseFloat(A[q])+(parseFloat(V[q])-parseFloat(A[q]))*K;return{...Object.fromEntries(N.map(q=>[q,q==="opacity"?z(q):`${z(q)}px`])),...k}};if(T.current.restart=A=>{const V=M.current;if(V?.playState!=="running"||!A&&T.current.batch===Ae)return;const K=C();V.cancel(),S(K,j.current?m():P)},j.current===w){!w&&!M.current&&b.animate&&(M.current=b.animate([P,P],{fill:"forwards"}));return}j.current=w;const R=M.current;if(R?.playState==="running"){if(!c){R.reverse();return}T.current.restart(!0)}else{if(R?.cancel(),!b.animate){I();return}w?S(P,m()):S(m(),P)}c?.forEach(A=>A!==T.current&&A.restart())},[w,t,n,g,p,$,c]),o.useLayoutEffect(()=>{const b=T.current;return H.current=!0,M.current?.playState==="running"&&c?.add(b),()=>{H.current=!1,c?.delete(b)}},[c]),L&&r)return null;const F=e;return E.jsx(F,{ref:$,...O})}const Ut=({id:e,present:t,appear:n,swap:s,onExited:r,children:i})=>{const a=o.useMemo(()=>({present:t,appear:n,swap:s,onExited:()=>r(e)}),[e,t,n,s,r]);return E.jsx(ft.Provider,{value:a,children:i})},Ye=(e,t,n,s=!0)=>{const r=o.Children.toArray(t).filter(o.isValidElement),i=new Set(r.map(d=>d.key)),a=new Map(e.map(d=>[d.key,d])),c=r.map(d=>({key:d.key,el:d,present:!0,appear:a.get(d.key)?.appear??s}));let u=0;const y=new Set;e.forEach(d=>{if(i.has(d.key))d.present&&(u=c.findIndex(l=>l.key===d.key)+1);else if(!d.pending){const l=d.present?{...d,present:!1,swap:!1}:d;d.present&&y.add(l),c.splice(u++,0,l)}});const f=d=>d.present&&(a.get(d.key)?.pending??!a.has(d.key)),O=n&&(y.size>0||e.some(d=>d.pending))&&c.some(d=>!d.present)&&c.some(f);return{children:t,list:O?c.map(d=>y.has(d)?{...d,swap:!0}:f(d)?{...d,pending:!0,swap:!0}:d):c}},Xe=e=>e.some(t=>!t.present)?e:e.map(t=>t.pending?{...t,pending:!1}:t);function Le({children:e,hold:t=!1,wait:n=!1}){const[s,r]=o.useState(()=>({...Ye([],e,n,!1),hold:t}));let i=s;i.children!==e&&(i={...i,...Ye(i.list,e,n)}),i.hold!==t&&(i={...i,hold:t,list:t?i.list:Xe(i.list.filter(c=>c.present))}),i!==s&&r(i);const a=o.useCallback(c=>r(u=>!u.hold&&u.list.some(y=>y.key===c&&!y.present)?{...u,list:Xe(u.list.filter(y=>y.key!==c))}:u),[]);return s.list.map(({key:c,el:u,present:y,appear:f,pending:O,swap:d=!1})=>!O&&E.jsx(Ut,{id:c,present:y,appear:f,swap:d,onExited:a,children:u},c))}const pt="rac-chip-slot",we="rac-flip",ze="rac-resize",qe=[],Je={overflow:"hidden",textOverflow:"clip",boxSizing:"border-box",minWidth:"0px",maxWidth:"none",minHeight:"0px",maxHeight:"none"},gt="(prefers-reduced-motion: reduce)",fe=()=>!!window.matchMedia?.(gt).matches,Yt=e=>{const t=window.matchMedia?.(gt);return t?.addEventListener("change",e),()=>t?.removeEventListener("change",e)},ge=e=>Array.from(e.children).filter(t=>t.classList.contains(pt)),Se=e=>e.firstElementChild?.firstElementChild,ht=(e,t)=>!!e?.getAnimations?.().some(n=>n.constructor===Animation&&t(n)),mt=(e,t)=>ht(e,n=>n.playState==="running"&&t(n)),bt=e=>ge(e).some(t=>mt(Se(t),n=>n.id===ze)),Ce=e=>Array.from(e.children).some(t=>mt(t,n=>n.id!==we))||bt(e),Xt=(e,t)=>e.length===t.length&&e.every((n,s)=>n===t[s]),Jt=e=>{const t=[];let n=-1/0;for(const s of e){const r=s.getBoundingClientRect();r.top>=n-1&&(t.push([]),n=r.bottom),t.at(-1).push(s),n=Math.max(n,r.bottom)}return t},yt=(e,t,n,s,r)=>{const i=e.cloneNode(!0),{height:a,paddingInlineEnd:c}=getComputedStyle(e),u=r?"":`height: ${a}; min-height: 0;`;i.style.cssText=`visibility: hidden; pointer-events: none; ${u} padding-inline-end: calc(${c} + ${n}px)`,i.querySelectorAll(`:scope > :not(.${pt})`).forEach(l=>l.remove()),s&&ge(i).forEach(l=>s.has(l.dataset.id)||l.remove()),n&&i.querySelectorAll(".rac-chip-del").forEach(l=>l.remove());const y=ge(i);y.forEach(l=>r?.has(l.dataset.id)&&Object.assign(Se(l)?.style??{},{minWidth:r.get(l.dataset.id),boxSizing:"border-box"}));const f=new Map(y.map((l,x)=>[l.dataset.id,x]));t?.slice(1).forEach((l,x)=>{const w=Math.min(...l.map(p=>f.get(p)??1/0)),g=Math.max(...t[x].map(p=>f.get(p)??-1).filter(p=>p<w));g>=0&&y[g].after(Object.assign(document.createElement("div"),{className:"rac-spacer"}))}),e.style.position="absolute",e.after(i),i.getAnimations?.({subtree:!0}).forEach(l=>l.effect?.getComputedTiming().endTime<1/0&&l.finish());const O=Jt(y).map(l=>l.map(x=>x.dataset.id)),d=i.offsetHeight;return i.remove(),e.style.position="",{rows:O,fit:d}},xt=(e,t)=>{const n=t?t.slice(0,-1).map(r=>r.at(-1)):qe,{breaks:s}=e.get();return Xt(s,n)?s:n},Ze=(e,t,n,s)=>xt(e,s&&n.length?yt(t,null,s,new Set(n.map(r=>r.id))).rows:null),me=(e,t,n)=>{const{rows:s,fit:r}=yt(t,n.rows,n.reserve,null,n.floor);Object.assign(n,{rows:s,fit:n.floor?r:null}),e.set({held:!0,breaks:xt(e,s)})},Zt=(e,t)=>new Map(ge(e).map(n=>{const{left:s,top:r}=n.getBoundingClientRect(),i=t&&Se(n);return[n,{left:s,top:r,label:i?vt(i):null}]})),Qe=(e,t,n,s)=>{if(!e.animate)return;e.getAnimations().forEach(c=>c.id===we&&c.cancel());const r=e.getBoundingClientRect(),i=t.left-r.left,a=t.top-r.top;(Math.abs(i)>.5||Math.abs(a)>.5)&&e.animate([{transform:`translate(${i}px, ${a}px)`},{transform:"none"}],{id:we,duration:n,easing:s})},vt=e=>{const t=getComputedStyle(e),n=(...s)=>`${s.reduce((r,i)=>r+parseFloat(t[i]),0)}px`;return t.boxSizing==="border-box"?{width:t.width,height:t.height}:{width:n("width","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"),height:n("height","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth")}},Qt=e=>{const t=[];e.forEach(({label:s},r)=>{const i=s&&r.isConnected&&Se(r);!i?.animate||ht(r,a=>a.id!==we)||(i.getAnimations().forEach(a=>a.id===ze&&a.cancel()),t.push({id:r.dataset.id,el:i,from:s}))});const n=(s,r)=>Math.abs(parseFloat(s)-parseFloat(r))>.5;return t.map(s=>({...s,to:vt(s.el)})).filter(({from:s,to:r})=>n(s.width,r.width)||n(s.height,r.height))},en=(e,t,n,s)=>e.forEach(({el:r,from:i,to:a})=>{r.animate([{...Je,...i},{...Je,...a}],{id:ze,duration:t,easing:n}).onfinish=s}),ke=(e,t,n,s,r,i)=>{if(!e||n===t.value)return;const a=getComputedStyle(e),c=t.anim?a.height:t.root;t.anim?.cancel(),i&&Object.assign(i.style,{height:`${n}px`,boxSizing:"border-box"}),t.root=a.height,i&&Object.assign(i.style,{height:"",boxSizing:""});const u=!t.value||c===t.root||!e.animate||fe();if(t.value=n,t.anim=null,u)return;const y={overflow:"hidden",alignItems:"flex-start"},f=t.anim=e.animate([{...y,height:c},{...y,height:t.root}],{duration:s,easing:r});f.onfinish=()=>{t.anim===f&&(t.anim=null)}},tn=.25,nn={hoverId:null,swipedId:null,held:!1,breaks:qe};function sn(e){const{selectRef:t,duration:n,easing:s,multiple:r,deleteInline:i,deleteAlways:a,icons:c,valueAsOption:u,renderOption:y}=o.useContext(Y),{selectedIDs:f,deleting:O,visibility:d,active:l}=o.useContext(se),{setDeleting:x,setVisibility:w}=o.useContext(ne),[g,p]=o.useState(0),[v]=o.useState(()=>at(nn)),[$]=o.useState(()=>new Set),M=o.useSyncExternalStore(v.subscribe,()=>v.get().held,()=>!1),H=o.useSyncExternalStore(v.subscribe,()=>v.get().breaks,()=>qe),T=o.useSyncExternalStore(Yt,fe,()=>!1),h=o.useRef({rows:null,reserve:0,chips:e,swap:!1,duration:n,easing:s}),j=o.useRef(null),L=o.useRef({value:0,root:"",anim:null}),B=o.useRef(null),I=o.useRef(null),F=i&&!a&&!O&&!!c.remove,b=F?g+tn:0,N=r&&F&&!g&&e.length>0,k=u?y?2:1:0,P=o.useEffectEvent((C,R)=>{const A=B.current,V=h.current;if(!A)return;const K=bt(A);if(K&&R)return;C&&v.get().held&&me(v,A,V);const z=V.swap?V.duration/2:V.duration;K?V.fit!=null&&ke(t.current,L.current,V.fit,z,V.easing,A):(R||L.current.value)&&ke(t.current,L.current,A.offsetHeight,z,V.easing),v.get().held||v.set({breaks:Ze(v,A,V.chips,V.reserve)})});o.useLayoutEffect(()=>{Object.assign(h.current,{duration:n,easing:s})},[n,s]),o.useLayoutEffect(()=>{const C=h.current,R=B.current,A=C.chips!==e;Object.assign(C,{chips:e,reserve:b}),A&&R&&Ce(R)&&me(v,R,C),P(!A)},[e,b,v]),o.useLayoutEffect(()=>{const C=()=>P(!0,!0),R=typeof ResizeObserver>"u"?null:new ResizeObserver(C);return R?R.observe(B.current):C(),document.fonts?.addEventListener("loadingdone",C),()=>{R?.disconnect(),document.fonts?.removeEventListener("loadingdone",C)}},[]);const m=o.useCallback(()=>{const C=B.current;if(!C||!v.get().held||Ce(C))return;const R=h.current,A=ge(C),V=A.map(z=>z.getBoundingClientRect()),K=Ze(v,C,R.chips,R.reserve);Object.assign(R,{rows:null,floor:null,fit:null}),Re.flushSync(()=>v.set({held:!1,breaks:K})),R.swap=Ce(C),R.swap&&Re.flushSync(()=>me(v,C,R)),fe()||A.forEach((z,q)=>z.isConnected&&Qe(z,V[q],R.swap?n/2:n,s))},[v,n,s]),S=o.useCallback(C=>{B.current&&(j.current=Zt(B.current,C))},[]);return o.useLayoutEffect(()=>{const C=B.current,R=h.current;if(!C||!j.current||!n||fe())return;const A=Qt(j.current);A.length&&(R.floor=new Map(A.map(({id:V,from:K})=>[V,K.width])),me(v,C,R),ke(t.current,L.current,R.fit,n,s,C),en(A,n,s,()=>{m(),P(!1,!0)}))},[k,v,n,s,t,m]),o.useLayoutEffect(()=>{const C=j.current;!C||H!==v.get().breaks||(j.current=null,fe()||C.forEach((R,A)=>A.isConnected&&Qe(A,R,n,s)))},[H,e,k,v,n,s]),o.useEffect(()=>()=>L.current.anim?.cancel(),[]),o.useEffect(()=>{O&&d&&w(!1),O&&(!f.length||!l)&&x(!1),v.set({hoverId:null,...!l&&{swipedId:null}})},[f.length,O,d,l,x,w,v]),o.useLayoutEffect(()=>{const C=I.current;if(!N||!C)return;const R=getComputedStyle(C);p(C.getBoundingClientRect().width+parseFloat(R.marginLeft)+parseFloat(R.marginRight))},[N]),{chipStore:v,delGroup:$,valueRef:B,delIconRef:I,probe:N,settle:m,held:M,snapshot:S,look:k,wait:n>0&&!T}}const et=1,tt=2,rn=600,on=10,nt=30,an=o.memo(function({element:t,deleting:n,locked:s,chipStore:r,delGroup:i}){const{selectRef:a,deleteInline:c,deleteAlways:u,icons:y,texts:f,valueAsOption:O,renderOption:d}=o.useContext(Y),l=!!y.remove,{setVisibility:x,setDeleting:w,removeOption:g}=o.useContext(ne),p=o.useRef({longPressTimer:null,longPress:!1,x:0,y:0}),v=o.useSyncExternalStore(r.subscribe,()=>{const{hoverId:k,swipedId:P}=r.get();return(k===t.id?et:0)|(P===t.id?tt:0)},()=>0),$=!!(v&et),M=!!(v&tt),H=o.useCallback(k=>{const{clientX:P,clientY:m}=k.touches[0];Object.assign(p.current,{x:P,y:m,longPress:!1}),clearTimeout(p.current.longPressTimer),l&&(p.current.longPressTimer=setTimeout(()=>{w(!0),p.current.longPress=!0,a.current?.focus(),x(!1),window.navigator.vibrate?.(50)},rn))},[l,w,x,a]),T=o.useCallback(k=>{const{clientX:P,clientY:m}=k.touches[0],S=p.current.x-P;Math.hypot(S,p.current.y-m)>on&&clearTimeout(p.current.longPressTimer),S>nt&&!M?r.set({hoverId:null,swipedId:t.id}):S<-nt&&M&&r.set({swipedId:null})},[t.id,M,r]),h=o.useCallback(k=>{clearTimeout(p.current.longPressTimer),p.current.longPress&&k.cancelable&&k.preventDefault(),p.current.longPress=!1},[]),j=o.useCallback(()=>r.set({hoverId:t.id,swipedId:null}),[t.id,r]),L=o.useCallback(()=>{r.get().hoverId===t.id&&r.set({hoverId:null})},[t.id,r]);o.useEffect(()=>()=>clearTimeout(p.current.longPressTimer),[]);const B=O?Fe(t,d,!0):null,I=B?E.jsx("div",{className:"rac-option-jsx",children:B}):E.jsx("span",{className:"rac-chip-text",children:t.name||f.emptyOption}),F=o.useCallback(k=>{r.set({swipedId:null}),lt(k,a),g(t.id),Z(k)},[t.id,g,r,a]),b=o.useCallback(k=>{Z(k),n&&F(k)},[n,F]),N=l&&(u||!s&&($||M||n));return E.jsxs("div",{className:ae("rac-chip",B&&t.className),style:B?t.style:void 0,...!s&&{onTouchStart:H,onTouchMove:T,onTouchEnd:h,onTouchCancel:h,onMouseEnter:j,onMouseLeave:L,onClick:b},children:[I,E.jsx(te,{"aria-label":`${f.remove} ${t.name??""}`.trim(),group:c&&!u&&!n?i:void 0,onMouseDown:Z,onClick:F,className:"rac-chip-del",disabled:s,tabIndex:-1,type:"button",in:N,as:"button",axis:"x",children:ie(y.remove)})]})}),cn=o.memo(function({element:t,chipStore:n,settle:s,...r}){const i=o.useSyncExternalStore(n.subscribe,()=>n.get().breaks.includes(t.id),()=>!1);return E.jsxs(o.Fragment,{children:[E.jsx(te,{className:"rac-chip-slot",onEntered:s,onExited:s,unmountOnExit:!1,"data-id":t.id,axis:"x",fade:!0,children:E.jsx(an,{element:t,chipStore:n,...r})}),i&&E.jsx("div",{className:"rac-spacer"})]})}),ln={position:"absolute",visibility:"hidden",pointerEvents:"none"},wt=[],un=()=>{},dn=e=>e==null?"":typeof e=="object"?le(e)??"":String(e),fn=o.memo(function(){const{selectRef:t,multiple:n,name:s,form:r,required:i}=o.useContext(Y),{selected:a,selectedIDs:c,disabled:u,fieldsetDisabled:y}=o.useContext(se),{reset:f,markInvalid:O}=o.useContext(ne),d=o.useRef(null);o.useEffect(()=>{const p=d.current?.getRootNode();let v;const $=M=>{M.target===d.current?.form&&(clearTimeout(v),v=setTimeout(()=>M.defaultPrevented||f()))};return p?.addEventListener("reset",$,!0),()=>{clearTimeout(v),p?.removeEventListener("reset",$,!0)}},[f]);const l=n?c:a?[a]:wt,x=!i&&(!s||n&&!l.length),w=x||!l.length?[""]:l.map(p=>dn(p.original)),g=()=>t.current?.focus();return w.map((p,v)=>E.jsx("input",{className:"rac-input",ref:v?void 0:d,name:x?void 0:s,form:r,value:p,hidden:x,required:i&&!v,disabled:u&&!y,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",onChange:un,onInvalid:O,onFocus:g},v))});class pn extends o.Component{getSnapshotBeforeUpdate(t){const n=t.look!==this.props.look;return(n||t.chips!==this.props.chips)&&this.props.take(n),null}componentDidUpdate(){}render(){return null}}const st=(e,t)=>{const n=new Set(e.map(a=>a.id)),s=new Map(t.map(([a,c])=>[c.id,a])),r=t.filter(([,a])=>!n.has(a.id)),i=new Set(t.map(([a])=>a));return e.map(a=>{if(s.has(a.id))return[s.get(a.id),a];const c=r.findIndex(([,y])=>Gt(y.original,a.original));if(c>=0)return[r.splice(c,1)[0][0],a];let u=a.id;for(;i.has(u);)u+="~";return i.add(u),[u,a]})},gn=e=>{const[t,n]=o.useState(()=>({chips:e,keyed:st(e,[])}));if(t.chips===e)return t.keyed;const s=st(e,t.keyed);return n({chips:e,keyed:s}),s},hn=o.memo(function(){const{selectedText:t,icons:n,valueAsOption:s,renderOption:r}=o.useContext(Y),{selectedIDs:i,title:a,valueOption:c,hasActualValue:u,loading:y,error:f,deleting:O,active:d}=o.useContext(se),l=i.length>0&&!t,x=l?i:wt,{chipStore:w,delGroup:g,valueRef:p,delIconRef:v,probe:$,settle:M,held:H,snapshot:T,look:h,wait:j}=sn(x),L=gn(x),[B]=o.useState(()=>new Set),I=s&&c?Fe(c,r,!0):null,F=y&&!f&&!u,b=`${I?c.id:a}${F?"-loading":""}`,N=c?.type==="boolean"?String(c.raw):void 0;return E.jsxs("div",{className:"rac-value",ref:p,children:[E.jsx(pn,{chips:x,look:h,take:T}),E.jsx(Le,{children:!l&&E.jsxs(te,{axis:"x",fade:!0,group:B,className:ae("rac-title",I&&c.className),style:I?c.style:void 0,"data-bool":N,onEntered:M,onExited:M,children:[I?E.jsx("div",{className:"rac-option-jsx",children:I}):a,F&&Pe]},b)}),E.jsx(Le,{hold:H,wait:j,children:L.map(([k,P])=>E.jsx(cn,{element:P,deleting:O,locked:!d,chipStore:w,delGroup:g,settle:M},k))}),$&&E.jsx("button",{type:"button",className:"rac-chip-del",tabIndex:-1,"aria-hidden":"true",ref:v,style:ln,children:ie(n.remove)})]})}),mn=o.memo(function(){const{selectRef:t,selectId:n,highlightStore:s,className:r,style:i,duration:a,easing:c,deleteInline:u,icons:y,texts:f,placeholder:O,id:d,required:l,popup:x,attrs:w}=o.useContext(Y),{visibility:g,active:p,hasActualValue:v,deleting:$,loading:M,loadPending:H,error:T,invalid:h,normalizedOptions:j}=o.useContext(se),{handleBlur:L,handleFocus:B,handleKeyDown:I,toggleVisibility:F,clear:b}=o.useContext(ne),N=o.useSyncExternalStore(s.subscribe,()=>{const S=g?j[xe(s.get())]:null;return S?Ee(n,S.id):void 0},()=>{}),k=!!y.clear&&v&&p&&!$,P=!!y.arrow&&p&&!$&&x,m=x?{role:"combobox","aria-haspopup":"listbox","aria-controls":`${n}-listbox`,"aria-expanded":g,"aria-activedescendant":N,"aria-required":l||void 0}:{role:"group"};return E.jsxs("div",{...w,id:d,ref:t,style:{"--rac-duration":`${a}ms`,"--rac-ease":c,...i},className:ae("rac-select",r),...p&&{onKeyDown:I,onFocus:B,onClick:F,onBlur:L},...m,"aria-disabled":!p,tabIndex:p?0:-1,"aria-busy":M||H||void 0,"aria-label":w["aria-label"]??(w["aria-labelledby"]?void 0:O),"aria-invalid":h||w["aria-invalid"],"aria-describedby":[w["aria-describedby"],T&&`${n}-error`].filter(Boolean).join(" ")||void 0,"data-inline-delete":X(u),"data-empty":X(!v),"data-deleting":X($),"data-error":X(T),"data-invalid":X(h),children:[E.jsx(hn,{}),E.jsxs(Le,{children:[k&&E.jsx(te,{as:"button",type:"button",axis:"x",className:"rac-clear",tabIndex:-1,"aria-label":f.clear,onMouseDown:Z,onClick:S=>{lt(S,t),b(S)},children:ie(y.clear)},"clear"),P&&E.jsx(te,{axis:"x",className:"rac-arrow","aria-hidden":"true",children:ie(y.arrow)},"arrow")]}),E.jsx(fn,{})]})}),je=0,bn=1,rt=2,Et=e=>{const{highlightStore:t}=o.useContext(Y),n=o.useRef(null),s=o.useSyncExternalStore(t.subscribe,()=>{const r=t.get();return xe(r)!==e?je:r.ready?rt:bn},()=>je);return o.useLayoutEffect(()=>{s===rt&&n.current?.scrollIntoView?.({block:"nearest"})},[s]),[n,s!==je]},Ot=(e,t)=>`${Ee(e,t.id)}_l`,yn=o.memo(function({option:t,index:n,open:s,hasChildren:r}){const{selectId:i,icons:a,texts:c}=o.useContext(Y),{selectOption:u,highlight:y}=o.useContext(ne),[f,O]=Et(n),d=r&&!t.disabled;return E.jsxs("div",{className:ae("rac-group",t.className),onMouseEnter:()=>d&&y(n),onClick:l=>u(t,l),"aria-label":d?`${t.name}, ${s?c.groupOpen:c.groupClosed}`:void 0,"aria-disabled":!d||void 0,"data-highlighted":X(O),"data-disabled":X(t.disabled),id:Ee(i,t.id),"data-open":X(s),"aria-selected":"false",style:t.style,role:"option",ref:f,children:[E.jsx("span",{className:"rac-group-text",id:Ot(i,t),children:t.name}),E.jsx(te,{axis:"x",in:r&&!t.disabled,className:"rac-group-arrow","aria-hidden":"true",children:ie(a.arrow)})]})}),xn=o.memo(function({option:t,index:n,isSelected:s,showCheckbox:r}){const{selectId:i,icons:a,renderOption:c}=o.useContext(Y),{selectOption:u,highlight:y}=o.useContext(ne),[f,O]=Et(n),d=!t.disabled&&!t.loading,l=Fe(t,c,s);return E.jsxs("div",{className:ae("rac-option",t.className),onMouseEnter:()=>d&&y(n),onClick:x=>!t.loading&&u(t,x),"aria-disabled":t.disabled||t.loading,"data-invalid":X(t.invalid),"data-bool":typeof t.raw=="boolean"?String(t.raw):void 0,"data-highlighted":X(O),"data-loading":X(t.loading),id:Ee(i,t.id),"aria-selected":s,style:t.style,role:"option",ref:f,children:[l?E.jsx("div",{className:"rac-option-jsx",children:l}):E.jsx("span",{className:"rac-option-text",children:t.name}),t.loading&&Pe,r&&E.jsxs("div",{className:"rac-check","data-default":X(!a.checkbox),children:[ie(a.check,{className:"rac-checkmark"}),ie(a.checkbox,{className:"rac-check-icon"})]})]})}),vn=o.memo(function(){const{selectId:t,multiple:n}=o.useContext(Y),{normalizedOptions:s,selected:r,selectedIDs:i,expandedGroups:a}=o.useContext(se),c=r?.id;return o.useMemo(()=>{const u=new Set(i.map(g=>g.id)),y=s.reduce((g,p)=>(p.group&&(g[p.group]=(g[p.group]||0)+1),g),{}),f=[];let O=[],d=null,l=null;const x=()=>{d!==null&&O.length&&f.push(E.jsx(te,{axis:"y",in:a.has(d),className:"rac-group-items",role:"group","aria-labelledby":l,children:O},`slide-${d}`)),O=[]},w=(g,p)=>E.jsx(xn,{isSelected:u.has(g.id)||c===g.id,showCheckbox:n&&!g.disabled&&"original"in g,option:g,index:p},g.id);return s.forEach((g,p)=>{g.groupHeader?(x(),d=g.name,l=Ot(t,g),f.push(E.jsx(yn,{hasChildren:y[g.name]>0,open:a.has(g.name),option:g,index:p},g.id))):g.group?O.push(w(g,p)):(x(),d=null,f.push(w(g,p)))}),x(),f},[s,c,i,a,n,t])}),wn=(e,t,n,s)=>{const r=e.getBoundingClientRect(),i=getComputedStyle(e),a=r.left-parseFloat(i.marginLeft)-t.left,c=n?r.bottom+parseFloat(i.marginBottom)-t.top+s:r.top-parseFloat(i.marginTop)-t.bottom-s;Math.abs(a)>.5&&(e.style.left=`${t.left-a}px`),Math.abs(c)>.5&&(e.style[n?"bottom":"top"]=`${parseFloat(e.style[n?"bottom":"top"])+(n?c:-c)}px`)},En=(e,t)=>{e&&e.dataset.placement!==(t?"top":"bottom")&&(e.dataset.placement=t?"top":"bottom")},Te=()=>typeof IntersectionObserver<"u",ot=(e,t,n=window.innerHeight-e.bottom)=>n<t&&e.top>n,On=({selectRef:e,panelRef:t,open:n,frozen:s,offset:r,onFlip:i})=>{const a=o.useRef(0),c=o.useRef(s),u=o.useRef(i);o.useLayoutEffect(()=>{c.current=s,u.current=i});const y=o.useCallback(l=>[e.current,t.current].forEach(x=>En(x,l)),[e,t]),f=o.useCallback(l=>{const x=e.current;if(!x||!l)return;l.scrollHeight&&(a.current=l.scrollHeight);const w=x.getBoundingClientRect(),g=l.dataset.placement,p=a.current,v=g==="top"?w.top-r>=p:window.innerHeight-w.bottom-r>=p;let $=g&&(c.current||v)?g==="top":ot(w,p);g&&$!==(g==="top")&&(u.current?.(),$=g==="top"),y($),l.style.width=`${w.width}px`,l.style.left=`${w.left+window.scrollX}px`,l.style.top=$?"auto":`${w.bottom+window.scrollY+r}px`,l.style.bottom=$?`${window.innerHeight-w.top-window.scrollY+r}px`:"auto",wn(l,w,$,r)},[e,r,y]),O=o.useCallback(l=>{l&&f(l.parentElement)},[f]),d=o.useCallback(l=>{l?.removeAttribute("data-placement"),f(l)},[f]);return o.useEffect(()=>{const l=e.current;if(n||!l||!Te())return;a.current||=parseFloat(getComputedStyle(l).getPropertyValue("--rac-list-max-height"))||250;const x={fits:!0,lower:!1},w=(p,v,$)=>{const M=new IntersectionObserver(([{boundingClientRect:H,rootBounds:T}])=>{T&&($(H,T),y(!x.fits&&x.lower))},{rootMargin:p,threshold:v});return M.observe(l),M},g=[w(`0px 0px ${-a.current}px 0px`,[0,1],(p,v)=>{x.fits=p.bottom<=v.bottom}),w("0px 0px -50% 0px",[0,.5,1],(p,v)=>{x.lower=p.top+p.bottom>2*v.bottom})];return()=>g.forEach(p=>p.disconnect())},[n,e,y]),o.useLayoutEffect(()=>{const l=e.current;if(!n||!l)return;const x=l.ownerDocument,w=t.current;let g=0,p=0,v="",$=null;const M=()=>{const b=l.getBoundingClientRect(),N=t.current?.getBoundingClientRect()??b,k=ot(b,a.current),P=a.current+r;return[b.left-N.left,k?b.top-N.bottom:b.bottom-N.top,b.width,window.innerHeight,t.current?.scrollHeight,k,b.top>=P,window.innerHeight-b.bottom>=P].join()},H=()=>{if($?.disconnect(),!Te())return;const b=l.getBoundingClientRect(),{clientWidth:N,clientHeight:k}=x.documentElement,P=[b.top,N-b.right,k-b.bottom,b.left].map(S=>`${-Math.floor(S)}px`).join(" ");let m=!1;$=new IntersectionObserver(([S])=>{m&&S.intersectionRatio<1&&j(),m=S.intersectionRatio===1},{root:x,rootMargin:P,threshold:1}),$.observe(l)},T=()=>M()===v?!1:(f(t.current),v=M(),!0),h=()=>{if(g=0,T())p=0;else if(++p>1)return H();g=requestAnimationFrame(h)},j=()=>{p=0,g||=requestAnimationFrame(h)};t.current?.removeAttribute("data-offscreen"),f(t.current),v=M(),H(),window.addEventListener("scroll",j,{capture:!0,passive:!0}),window.addEventListener("resize",j);const L=typeof ResizeObserver<"u"&&new ResizeObserver(j);L&&[l,t.current].forEach(b=>b&&L.observe(b));const B=({target:b})=>!l.contains(b)&&!t.current?.contains(b),I=typeof MutationObserver<"u"&&new MutationObserver(b=>{b.some(B)&&T()&&j()});I&&I.observe(x.body,{subtree:!0,childList:!0,attributes:!0,characterData:!0});const F=Te()&&new IntersectionObserver(([{isIntersecting:b,boundingClientRect:N,rootBounds:k}])=>{const P=!b&&!!k&&N.bottom>k.top&&N.top<k.bottom&&N.right>k.left&&N.left<k.right;t.current?.toggleAttribute("data-offscreen",P)});return F&&F.observe(l),()=>{cancelAnimationFrame(g),window.removeEventListener("scroll",j,{capture:!0}),window.removeEventListener("resize",j);for(const b of[L,I,F,$])b&&b.disconnect();w?.removeAttribute("data-placement")}},[n,f,r,e,t]),[O,d]},Sn=(e={})=>Object.fromEntries(Object.entries(e).filter(([t])=>t.startsWith("--"))),Cn=e=>(typeof e=="function"?e():e)||document.body,kn=()=>()=>{},jn=o.memo(function(){const{selectRef:t,selectId:n,multiple:s,offset:r,duration:i,easing:a,animateOpacity:c,keepMounted:u,optionsClassName:y,style:f,container:O,hasMore:d,loadButton:l,texts:x,popup:w}=o.useContext(Y),{visibility:g,normalizedOptions:p,loading:v,error:$}=o.useContext(se),{handleListScroll:M,setListReady:H}=o.useContext(ne),T=g&&p.length>0,h=o.useSyncExternalStore(kn,()=>!0,()=>!1),[j,L]=o.useState(!1);T&&h&&!j&&L(!0);const[B,I]=o.useState(null),F=o.useCallback(()=>I(S=>S||"out"),[]),b=o.useRef(null),[N,k]=On({selectRef:t,panelRef:b,open:j,frozen:!T||B==="out",offset:r,onFlip:F}),P=()=>{if(B==="out"&&T){k(b.current),I("in");return}I(null),L(!1)},m=()=>{I(null),H(!0)};return!h||!w?null:Re.createPortal(E.jsx(te,{axis:"y",fade:c,in:T&&B!=="out",duration:B?i/2:void 0,nodeRef:b,unmountOnExit:!u&&!(B&&T),onEntered:m,onExited:P,onMouseDown:S=>S.preventDefault(),className:ae("rac-options",y),style:{...Sn(f),"--rac-duration":`${i}ms`,"--rac-ease":a,pointerEvents:T?"auto":"none",position:"absolute"},children:E.jsxs("div",{onScroll:M,className:"rac-list","aria-multiselectable":s,id:`${n}-listbox`,"aria-label":x.list,role:"listbox",tabIndex:"-1",ref:N,children:[E.jsx(vn,{}),$?E.jsx("div",{className:"rac-option","data-error":"",children:E.jsx("span",{className:"rac-option-text",children:x.error})}):(v||!l&&d)&&E.jsxs("div",{className:"rac-option","data-loading":"",children:[E.jsx("span",{className:"rac-option-text",children:v?x.loading:x.loadingMore}),Pe]})]})}),Cn(O))}),Tn=250,Mn=5e3,In=[],Rn=()=>()=>{},ce=(e,t)=>typeof e=="function"?e(t):String(e??"").replace(/\{(n|label)\}/g,()=>t),$n=(e,t,n,s)=>{const r=[];if(e.picked.length&&!t.picked.length)r.push(ce(n.cleared));else if(s){const i=new Set(t.picked.map(u=>u.id)),a=new Set(e.picked.map(u=>u.id)),c=e.picked.filter(u=>!i.has(u.id));c.length&&r.push(ce(n.removed,c.map(u=>u.name).join(", "))),t.picked.some(u=>!a.has(u.id))&&r.push(ce(n.selected,t.picked.length))}return t.open&&e.count&&t.count>e.count&&r.push(ce(n.loaded,t.count-e.count)),t.error&&!e.error&&r.push(ce(n.error)),r.filter(Boolean).join(". ")},An=o.memo(function(){const{selectRef:t,selectId:n,multiple:s,texts:r}=o.useContext(Y),{selected:i,selectedIDs:a,normalizedOptions:c,visibility:u,deleting:y,error:f}=o.useContext(se),O=o.useSyncExternalStore(Rn,()=>!0,()=>!1),[d,l]=o.useState(""),x=o.useRef({base:null,timer:0,wipe:0,latest:null}),w=o.useMemo(()=>c.reduce((g,p)=>"original"in p?g+1:g,0),[c]);return o.useEffect(()=>{const g=s?a:i?[i]:In;x.current.latest={snap:{picked:g,count:w,open:u,error:!!f},texts:r,multiple:s,deleting:y}}),o.useEffect(()=>{const g=x.current,{snap:p,deleting:v}=g.latest;if(!g.base||!g.timer&&!v&&!t.current?.contains(document.activeElement)){g.base=p;return}clearTimeout(g.timer),g.timer=setTimeout(()=>{g.timer=0;const{snap:$,texts:M,multiple:H}=g.latest,T=$n(g.base,$,M,H);g.base=$,T&&(l(h=>h===T?`${T} `:T),clearTimeout(g.wipe),g.wipe=setTimeout(()=>l(""),Mn))},Tn)},[i,a,w,f,t]),o.useEffect(()=>{const g=x.current;return()=>{clearTimeout(g.timer),clearTimeout(g.wipe)}},[]),O?E.jsxs("div",{className:"rac-live",children:[E.jsx("div",{"aria-live":"polite","aria-atomic":"true",children:d}),f&&E.jsx("div",{id:`${n}-error`,children:ce(r.error)})]}):null}),Ne=[];function Ln({props:e,jsxOptions:t,state:n,setState:s,setVisibility:r,loadMoreOnce:i}){const{onChange:a,disabled:c,loading:u,error:y,multiple:f,childrenFirst:O,groupsClosed:d,hasMore:l,loadButton:x,placeholder:w,selectedText:g,texts:p}=e,{disabledOption:v,emptyOption:$,invalidOption:M,emptyGroup:H}=p,{loadPending:T,internalValue:h,toggledGroups:j,picked:L}=n,B=$e(e.options),I=$e(e.value),F=I!==void 0,b=F?I:h,N=T?p.loadingMore:p.loadMore,k=o.useMemo(()=>qt({options:B,jsxOptions:t,childrenFirst:O,hasMore:l,loadButton:x,loadPending:T,loadingTitle:N,emptyOption:$,invalidOption:M,disabledOption:v,emptyGroup:H}),[B,t,O,l,x,T,N,$,M,v,H]),P=o.useMemo(()=>new Set(k.filter(D=>D.groupHeader&&!D.disabled&&d===j.has(D.name)).map(D=>D.name)),[k,j,d]),{selected:m,selectedIDs:S}=o.useMemo(()=>_e(b,k,f,L),[b,k,f,L]),C=k.length>0,R=!c&&C,A=b!=null&&!(Array.isArray(b)&&!b.length)&&!(Oe(b)&&!Object.keys(b).length),V=A&&g?null:m,K=o.useMemo(()=>A&&g?g:m?m.name:y?p.error:u?p.loading:c?p.disabled:C?w:p.empty,[y,u,c,A,g,m,C,w,p]),z=D=>s(G=>{const _=new Set(G.toggledGroups);return _.has(D)?_.delete(D):_.add(D),{toggledGroups:_}}),q=(D,G,_)=>{s(F?{picked:_}:{internalValue:D,picked:_}),a?.(D,G)},ue=D=>q(D.map(G=>G.original),D.map(G=>G.userId),D.map(G=>G.id)),de=Be({toggleGroup:z,selectOption:(D,G)=>{if(D.groupHeader){Z(G),D.disabled||z(D.name);return}if(D.disabled||D.loadMore){Z(G),D.loadMore&&!D.loading&&i();return}if(f){Z(G);const _=S.some(re=>re.id===D.id);ue(_?S.filter(re=>re.id!==D.id):[...S,D]);return}m?.id!==D.id&&q(D.original,D.userId,[D.id]),r(!1)},clear:D=>{Z(D),q(f?[]:null,f?[]:null,Ne)},removeOption:D=>ue(S.filter(G=>G.id!==D)),reset:()=>{s({deleting:!1,invalid:!1}),r(!1);const D=f?[]:null,G=e.defaultValue??D,{selected:_,selectedIDs:re}=_e(G,k,f,Ne),W=f?re:_?[_]:[],U=f?S:m?[m]:[];ye(b??D,G)&&W.length===U.length&&W.every((Q,oe)=>Q.id===U[oe].id)||q(G,f?W.map(Q=>Q.userId):_?.userId??null,W.map(Q=>Q.id))}});return{normalizedOptions:k,expandedGroups:P,selected:m,selectedIDs:S,hasOptions:C,active:R,hasActualValue:A,title:K,valueOption:V,actions:de}}const Nn=e=>({internalVisibility:!1,deleting:!1,loadPending:!1,toggledGroups:new Set,internalValue:e.defaultValue,picked:Ne,fieldsetDisabled:!1,invalid:!1});function Dn(e,t){const[n,s]=o.useReducer(kt,e,Nn),{internalVisibility:r,deleting:i,loadPending:a,fieldsetDisabled:c}=n,u=o.useMemo(()=>c&&!e.disabled?{...e,disabled:!0}:e,[e,c]),{ref:y,open:f,onOpenChange:O,popup:d,hasMore:l,loadMore:x,loadButton:w,error:g,disabled:p,loading:v,required:$,texts:M}=u,H=o.useId(),T=o.useMemo(()=>H.replace(/:/g,""),[H]),h=o.useRef(null);o.useImperativeHandle(y,()=>h.current),o.useLayoutEffect(()=>{const W=h.current?.querySelector(".rac-input");if(!W)return;const U=()=>s({fieldsetDisabled:!e.disabled&&W.matches(":disabled")});U();const Q=new MutationObserver(U);for(let oe=W.parentElement;oe;oe=oe.parentElement)oe.tagName==="FIELDSET"&&Q.observe(oe,{attributeFilter:["disabled"]});return()=>Q.disconnect()},[e.disabled]);const[j]=o.useState(()=>at($t)),L=f!==void 0,B=L?!!f:r,I=o.useRef(!1),F=o.useRef(!1),b=Be({setVisibility:W=>{W===B||W&&!d||(L||s({internalVisibility:W}),O?.(W))},loadMoreOnce:()=>{if(!l||I.current)return;if(!x)return ee("no loadMore","`hasMore` is set, but there is no `loadMore` to call.");I.current=!0,s({loadPending:!0});const W=()=>s({loadPending:!1});try{x()?.then?.(W,W)}catch(U){I.current=!1,W(),(globalThis.reportError??console.error)(U)}},setListReady:W=>j.set({ready:W}),setDeleting:W=>s({deleting:W}),markInvalid:()=>s({invalid:!0})}),N=Ln({props:u,jsxOptions:t,state:n,setState:s,setVisibility:b.setVisibility,loadMoreOnce:b.loadMoreOnce}),{normalizedOptions:k,expandedGroups:P,selected:m,selectedIDs:S,hasOptions:C,active:R,hasActualValue:A,title:V,valueOption:K,actions:z}=N,q=R&&B&&d,ue=Pt({props:u,state:n,setState:s,normalizedOptions:k,expandedGroups:P,selected:m,selectedIDs:S,visibility:q,highlightStore:j,setVisibility:b.setVisibility,loadMoreOnce:b.loadMoreOnce,modelActions:z});o.useEffect(()=>{s({loadPending:!1})},[k.length,l,w]),o.useEffect(()=>{a||(I.current=!1)},[a]),o.useEffect(()=>{q&&h.current&&document.activeElement!==h.current&&h.current.focus(),q||j.set({index:-1,ready:!1})},[q,j]),o.useEffect(()=>{F.current&&!R&&b.setVisibility(!1),F.current=R},[R,b]);const de=o.useRef(null),D=u.value!==void 0;o.useEffect(()=>{const W={value:D,open:L};for(const U in W)de.current&&de.current[U]!==W[U]&&ee(`switch ${U}`,`\`${U}\` switched between controlled and uncontrolled (\`undefined\`) after mount. Pick one mode for the lifetime of the Select, like a React input${U==="value"?"; clear a controlled value with `null` or `[]`":""}.`);de.current=W},[D,L]),o.useLayoutEffect(()=>{h.current?.querySelector(".rac-input")?.setCustomValidity($&&!A&&M.required||"")},[$,A,M.required]);const G=n.invalid&&$&&!A&&!p,_=o.useMemo(()=>({...b,...z,...ue}),[b,z,ue]),re=o.useMemo(()=>({visibility:q,deleting:i,loadPending:a,expandedGroups:P,selectedIDs:S,normalizedOptions:k,selected:m,hasOptions:C,active:R,hasActualValue:A,title:V,valueOption:K,disabled:p,fieldsetDisabled:c,invalid:G,loading:v,error:g}),[q,i,a,P,S,k,m,C,R,A,V,K,p,c,G,v,g]);return{selectId:T,selectRef:h,highlightStore:j,state:re,actions:_}}const Bn={},J=e=>e!=null&&e!=="",De=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(De).join(" ").replace(/\s+/g," ").trim():o.isValidElement(e)?De(e.props.children):"":"",Fn=({name:e,label:t,id:n,value:s,className:r,style:i,children:a,disabled:c,group:u},y,f)=>{const O=De(a),d=s!==void 0?s:O;return a!=null&&!O&&!J(t)&&!J(e)&&!J(n)&&!J(s)&&ee("no text","<Option> has content but no text to show in the title or chips. Add a `label` (or `value`), or enable `valueAsOption`."),{id:J(n)?String(n):y,userId:J(n)?n:d,value:d,label:J(t)?String(t):J(e)?String(e):O||(J(n)?String(n):""),jsx:a,hasJsx:a!=null,className:r,style:i,disabled:!!c,group:u||f||null}},Pn=({name:e,label:t,value:n,id:s,disabled:r,className:i="",style:a=Bn},c)=>{const u=e??t??s??n;return{disabled:!!r,isGroupMarker:!0,group:J(u)?String(u):c,className:i,style:a}},Hn=e=>`<${typeof e=="string"?e:e?.displayName||e?.name||"Component"}>`,be=(e,t,n=null,s="o",r=[])=>(o.Children.toArray(e).forEach(i=>{if(!o.isValidElement(i)){ee("text",`Text inside <Select> or <OptGroup> is ignored ("${String(i).slice(0,30)}"). Wrap it in <Option>.`);return}const a=`${s}-${String(i.key).slice(1).replace(/[:$]/g,u=>u===":"?"-":"k").replace(/[^\p{L}\p{N}-]/gu,"")}`,c=i.type?.racKind;if(i.type===o.Fragment)be(i.props.children,t,n,a,r);else if(c==="option")r.push(Fn(i.props,a,n));else if(c==="define")be(i.type.racRender(i.props),t,n,a,r);else if(c==="group"){const u=Pn(i.props,t);r.push(u),be(i.props.children,t,u.group,a,r)}else{const u=Hn(i.type);ee(`child ${u}`,`${u} inside <Select> is ignored: only <Option/>, <OptGroup/> and defineOption() components are read. Put custom content inside <Option>, or wrap the component with defineOption().`)}}),r),Vn=new Set(["ref","options","value","defaultValue","onChange","children","loadMore","open","onOpenChange","onFocus","onBlur","onKeyDown","childrenFirst","groupsClosed","disabled","loading","error"]),zn=/^(aria|data)-/,Me={options:[],value:void 0,defaultValue:void 0,onChange:void 0,multiple:!1,childrenFirst:!1,groupsClosed:!1,disabled:!1,loading:!1,error:!1,open:void 0,onOpenChange:void 0,popup:!0,onFocus:void 0,onBlur:void 0,onKeyDown:void 0,id:void 0,name:void 0,form:void 0,required:!1,hasMore:!1,loadMore:void 0,loadButton:!1,loadOffset:100,loadAhead:3,placeholder:"Choose option",selectedText:void 0,texts:{empty:"No options",disabled:"Disabled",loading:"Loading",error:"Failed to load",clear:"Clear selection",remove:"Remove",loadMore:"Load more",loadingMore:"Loading",emptyOption:"Empty option",invalidOption:"Invalid option",disabledOption:"Disabled option",emptyGroup:"Empty group",groupOpen:"expanded",groupClosed:"collapsed",list:"Options",required:void 0,removed:"Removed {label}",cleared:"Selection cleared",selected:"{n} selected",loaded:"{n} more options loaded"},renderOption:void 0,valueAsOption:!1,icons:{arrow:he.ArrowUp,clear:he.XMark,remove:he.XMark,check:he.Checkmark,checkbox:void 0},deleteInline:!1,deleteAlways:!1,className:"",optionsClassName:"",style:{},container:void 0,duration:300,easing:"ease",offset:1,animateOpacity:!0,keepMounted:!1},it={visibility:"open",setVisibility:"onOpenChange",ownBehavior:"open without onOpenChange",onOpen:"onOpenChange",onClose:"onOpenChange",unmount:"keepMounted (inverted)",showDelete:"deleteAlways",OpenIcon:"icons.arrow",ClearIcon:"icons.clear",DelIcon:"icons.remove",Checkmark:"icons.check",Checkbox:"icons.checkbox",emptyText:"texts.empty",disabledText:"texts.disabled",loadingText:"texts.loading",errorText:"texts.error",clearText:"texts.clear",removeText:"texts.remove",loadButtonText:"texts.loadMore",loadMoreText:"texts.loadingMore",emptyOption:"texts.emptyOption",invalidOption:"texts.invalidOption",disabledOption:"texts.disabledOption"},Ie=(e,t)=>{const n={...e};for(const s in t)t[s]!==void 0&&(n[s]=t[s]);return n};function qn(e){for(const d in e)d in it&&ee(`renamed ${d}`,`The \`${d}\` prop was removed. Use \`${it[d]}\`.`);e.value!==void 0&&!e.onChange&&ee("read-only value","`value` is set without `onChange`, so the Select is read-only. Pass `onChange`, or `defaultValue` instead of `value`.");const t=Ie(Me,e);t.texts=Ie(Me.texts,e.texts),t.icons=Ie(Me.icons,e.icons);const n=t.texts.emptyGroup,s=$e(o.useMemo(()=>be(t.children,n),[t.children,n])),{selectId:r,selectRef:i,highlightStore:a,state:c,actions:u}=Dn(t,s),y={},f={};for(const d in t)Vn.has(d)||((zn.test(d)?f:y)[d]=t[d]);const O=It({...y,attrs:f,selectId:r,selectRef:i,highlightStore:a});return E.jsx(Y.Provider,{value:O,children:E.jsx(ne.Provider,{value:u,children:E.jsxs(se.Provider,{value:c,children:[E.jsx(mn,{}),E.jsx(jn,{}),E.jsx(An,{})]})})})}function St(){return ee("option outside","<Option/> was rendered outside <Select>, or inside a component that <Select> cannot read. Use it as a direct child, or wrap the component with defineOption()."),null}St.racKind="option";function Ct(){return null}Ct.racKind="group";exports.OptGroup=Ct;exports.Option=St;exports.Select=qn;exports.defineOption=Wt;
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./select.cjs"),i=require("./model.cjs"),t=require("./chip.cjs"),n=require("./paging.cjs");exports.OptGroup=e.OptGroup;exports.Option=e.Option;exports.Select=e.Select;exports.defineOption=i.defineOption;exports.chips=t.chips;exports.paging=n.paging;
package/dist/index.d.cts CHANGED
@@ -1,4 +1,7 @@
1
- import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, AriaAttributes} from 'react'
1
+ import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, KeyboardEvent, AriaAttributes} from 'react'
2
+
3
+ /** Live region message: a template with {label} / {n}, or a function for plural forms. */
4
+ export type LiveText = string | ((value: string | number) => string)
2
5
 
3
6
  export interface SelectTexts {
4
7
  empty: string
@@ -13,7 +16,21 @@ export interface SelectTexts {
13
16
  invalidOption: string
14
17
  disabledOption: string
15
18
  emptyGroup: string
19
+ /** State word in a group header's accessible name. Default `'expanded'`. */
20
+ groupOpen: string
21
+ /** State word in a group header's accessible name. Default `'collapsed'`. */
22
+ groupClosed: string
16
23
  list: string
24
+ /** Validation bubble text of an empty required Select; default: the browser's own. */
25
+ required?: string
26
+ /** Default `'Removed {label}'`. */
27
+ removed?: LiveText
28
+ /** Default `'Selection cleared'`. */
29
+ cleared?: LiveText
30
+ /** Default `'{n} selected'`. */
31
+ selected?: LiveText
32
+ /** Default `'{n} more options loaded'`. */
33
+ loaded?: LiveText
17
34
  }
18
35
 
19
36
  export type SelectIcon = ElementType | string | ReactNode | null | false
@@ -26,17 +43,28 @@ export interface SelectIcons {
26
43
  checkbox: SelectIcon
27
44
  }
28
45
 
46
+ /** An extension passed to `<Select plugins={[...]}/>`: use the built-in `chips` and `paging`. */
47
+ export interface SelectPlugin {
48
+ readonly [key: string]: unknown
49
+ }
50
+
29
51
  export interface SelectProps extends AriaAttributes {
30
52
  [key: `data-${string}`]: string | number | boolean | undefined
31
53
 
32
54
  ref?: Ref<HTMLDivElement>
33
55
  children?: ReactNode
34
56
 
57
+ /** A dictionary's values are the options, keys ignored; a key named name/label/id/value makes it one option, options/group a group. Array items take no className/style (use <Option/>). */
35
58
  options?: any[] | Record<string, any>
59
+ /** undefined = uncontrolled; keep one mode, clear a controlled Select with null / [] (a switch warns in dev). */
36
60
  value?: any
61
+ /** Initial value of an uncontrolled Select; also the target of form.reset(), in both modes, with or without name. */
37
62
  defaultValue?: any
63
+ /** value: an array item as given (an object stays the whole object), an <Option/> as its `value`; a controlled value must have the shape of its source. */
38
64
  onChange?: (value: any, ids: any) => void
39
65
  multiple?: boolean
66
+ /** Optional features: `[chips]` for chips in a multiple Select, `[paging]` for `hasMore` / `loadMore` / `loadButton`. */
67
+ plugins?: SelectPlugin[]
40
68
  childrenFirst?: boolean
41
69
  groupsClosed?: boolean
42
70
 
@@ -46,11 +74,17 @@ export interface SelectProps extends AriaAttributes {
46
74
 
47
75
  open?: boolean
48
76
  onOpenChange?: (open: boolean) => void
77
+ /** false: no panel, a tag list: role="group" without the combobox ARIA, never opens, no arrow; chip deletion and clear keep working. Default true. */
78
+ popup?: boolean
49
79
  onFocus?: (e: FocusEvent<HTMLDivElement>) => void
50
80
  onBlur?: (e: FocusEvent<HTMLDivElement>) => void
81
+ /** Runs before the Select handles a key; event.preventDefault() makes the Select skip it. */
82
+ onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
51
83
 
52
84
  id?: string
53
85
  name?: string
86
+ /** Id of the owner <form>, like <select form="id">: submits and resets with it even when placed outside. */
87
+ form?: string
54
88
  required?: boolean
55
89
 
56
90
  hasMore?: boolean
@@ -131,6 +165,12 @@ export interface SelectProps extends AriaAttributes {
131
165
 
132
166
  export const Select: FC<SelectProps>
133
167
 
168
+ /** Plugin: chips for the selected values of a multiple Select. */
169
+ export const chips: SelectPlugin
170
+
171
+ /** Plugin: loading more options (`hasMore`, `loadMore`, `loadButton`, `loadOffset`, `loadAhead`). */
172
+ export const paging: SelectPlugin
173
+
134
174
  export interface OptionProps {
135
175
  value?: any
136
176
  id?: any
package/dist/index.js ADDED
@@ -0,0 +1,13 @@
1
+ "use client";
2
+ import { OptGroup as p, Option as r, Select as t } from "./select.js";
3
+ import { defineOption as f } from "./model.js";
4
+ import { chips as m } from "./chip.js";
5
+ import { paging as c } from "./paging.js";
6
+ export {
7
+ p as OptGroup,
8
+ r as Option,
9
+ t as Select,
10
+ m as chips,
11
+ f as defineOption,
12
+ c as paging
13
+ };
@@ -0,0 +1 @@
1
+ "use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react/jsx-runtime"),E=require("./state.cjs"),r=require("react"),M=250,N=5e3,O=[],q=()=>()=>{},o=(i,t)=>typeof i=="function"?i(t):String(i??"").replace(/\{(n|label)\}/g,()=>t),I=(i,t,c,a)=>{const s=[];if(i.picked.length&&!t.picked.length)s.push(o(c.cleared));else if(a){const l=new Set(t.picked.map(n=>n.id)),d=new Set(i.picked.map(n=>n.id)),u=i.picked.filter(n=>!l.has(n.id));u.length&&s.push(o(c.removed,u.map(n=>n.name).join(", "))),t.picked.some(n=>!d.has(n.id))&&s.push(o(c.selected,t.picked.length))}return t.open&&i.count&&t.count>i.count&&s.push(o(c.loaded,t.count-i.count)),t.error&&!i.error&&s.push(o(c.error)),s.filter(Boolean).join(". ")},B=r.memo(function(){const{selectRef:t,selectId:c,multiple:a,texts:s}=r.useContext(E.SelectConfigContext),{selected:l,selectedIDs:d,normalizedOptions:u,visibility:n,deleting:k,error:m}=r.useContext(E.SelectStateContext),b=r.useSyncExternalStore(q,()=>!0,()=>!1),[j,v]=r.useState(""),f=r.useRef({base:null,timer:0,wipe:0,latest:null}),S=r.useMemo(()=>u.reduce((e,g)=>"original"in g?e+1:e,0),[u]);return r.useEffect(()=>{const e=a?d:l?[l]:O;f.current.latest={snap:{picked:e,count:S,open:n,error:!!m},texts:s,multiple:a,deleting:k}}),r.useEffect(()=>{const e=f.current,{snap:g,deleting:T}=e.latest;if(!e.base||!e.timer&&!T&&!t.current?.contains(document.activeElement)){e.base=g;return}clearTimeout(e.timer),e.timer=setTimeout(()=>{e.timer=0;const{snap:x,texts:C,multiple:R}=e.latest,p=I(e.base,x,C,R);e.base=x,p&&(v(y=>y===p?`${p} `:p),clearTimeout(e.wipe),e.wipe=setTimeout(()=>v(""),N))},M)},[l,d,S,m,t]),r.useEffect(()=>{const e=f.current;return()=>{clearTimeout(e.timer),clearTimeout(e.wipe)}},[]),b?h.jsxs("div",{className:"rac-live",children:[h.jsx("div",{"aria-live":"polite","aria-atomic":"true",children:j}),m&&h.jsx("div",{id:`${c}-error`,children:o(s.error)})]}):null});exports.default=B;
@@ -0,0 +1,42 @@
1
+ "use client";
2
+ import { jsxs as y, jsx as k } from "react/jsx-runtime";
3
+ import { SelectConfigContext as I, SelectStateContext as O } from "./state.js";
4
+ import { memo as B, useContext as x, useSyncExternalStore as D, useState as L, useRef as M, useMemo as $, useEffect as g } from "react";
5
+ const z = 250, P = 5e3, U = [], W = () => () => {
6
+ }, s = (i, t) => typeof i == "function" ? i(t) : String(i ?? "").replace(/\{(n|label)\}/g, () => t), q = (i, t, o, u) => {
7
+ const r = [];
8
+ if (i.picked.length && !t.picked.length) r.push(s(o.cleared));
9
+ else if (u) {
10
+ const c = new Set(t.picked.map((n) => n.id)), a = new Set(i.picked.map((n) => n.id)), l = i.picked.filter((n) => !c.has(n.id));
11
+ l.length && r.push(s(o.removed, l.map((n) => n.name).join(", "))), t.picked.some((n) => !a.has(n.id)) && r.push(s(o.selected, t.picked.length));
12
+ }
13
+ return t.open && i.count && t.count > i.count && r.push(s(o.loaded, t.count - i.count)), t.error && !i.error && r.push(s(o.error)), r.filter(Boolean).join(". ");
14
+ }, H = /* @__PURE__ */ B(function() {
15
+ const { selectRef: t, selectId: o, multiple: u, texts: r } = x(I), { selected: c, selectedIDs: a, normalizedOptions: l, visibility: n, deleting: E, error: m } = x(O), T = D(W, () => !0, () => !1), [b, h] = L(""), d = M({ base: null, timer: 0, wipe: 0, latest: null }), v = $(() => l.reduce((e, f) => "original" in f ? e + 1 : e, 0), [l]);
16
+ return g(() => {
17
+ const e = u ? a : c ? [c] : U;
18
+ d.current.latest = { snap: { picked: e, count: v, open: n, error: !!m }, texts: r, multiple: u, deleting: E };
19
+ }), g(() => {
20
+ const e = d.current, { snap: f, deleting: C } = e.latest;
21
+ if (!e.base || !e.timer && !C && !t.current?.contains(document.activeElement)) {
22
+ e.base = f;
23
+ return;
24
+ }
25
+ clearTimeout(e.timer), e.timer = setTimeout(() => {
26
+ e.timer = 0;
27
+ const { snap: S, texts: j, multiple: N } = e.latest, p = q(e.base, S, j, N);
28
+ e.base = S, p && (h((R) => R === p ? `${p} ` : p), clearTimeout(e.wipe), e.wipe = setTimeout(() => h(""), P));
29
+ }, z);
30
+ }, [c, a, v, m, t]), g(() => {
31
+ const e = d.current;
32
+ return () => {
33
+ clearTimeout(e.timer), clearTimeout(e.wipe);
34
+ };
35
+ }, []), T ? /* @__PURE__ */ y("div", { className: "rac-live", children: [
36
+ /* @__PURE__ */ k("div", { "aria-live": "polite", "aria-atomic": "true", children: b }),
37
+ m && /* @__PURE__ */ k("div", { id: `${o}-error`, children: s(r.error) })
38
+ ] }) : null;
39
+ });
40
+ export {
41
+ H as default
42
+ };
package/dist/model.cjs ADDED
@@ -0,0 +1 @@
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=["group","disabled","options","items","children"],K=["name","label","id","value"],E=e=>e!=null&&e!=="",V=e=>e!==null&&typeof e=="object"&&!Array.isArray(e),P=e=>V(e)&&[Object.prototype,null].includes(Object.getPrototypeOf(e)),R=e=>{try{const r=String(e);return r.startsWith("[object ")?null:r}catch{return null}},J=(e,r=!1)=>{if(r&&typeof e.group=="string")return e.group;const p=K.find(u=>E(e[u]));if(p)return String(e[p]);const l=!P(e)&&R(e);if(l)return l;const i=Object.entries(e).find(([u,b])=>!z.includes(u)&&E(b));return i?String(i[1]):null},C=e=>P(e)&&("options"in e||"group"in e&&!K.some(r=>r in e)),k=(e,r,p,l,i,{emptyOption:u,invalidOption:b,disabledOption:$})=>{const a=`${p}-${r}`;if(e==null||e==="")return{id:a,userId:null,name:u,raw:e,disabled:!0,type:"normal",group:l,groupDisabled:i};if(typeof e=="function")return{id:a,userId:null,name:b,raw:e,disabled:!0,invalid:!0,type:"normal",group:l};if(V(e)){const o=i||e.disabled===!0,s=e.value!==void 0?e.value:e.id!==void 0?e.id:e,y=J(e)||(o?$:u);return{id:a,userId:e.id??e.value??e.name??e.label,name:y,raw:s,original:e,disabled:o||y===u,type:typeof s=="boolean"?"boolean":"normal",group:l||e.group||null,groupDisabled:i}}return{id:a,userId:e,name:String(e),raw:e,original:e,disabled:i,type:typeof e=="boolean"?"boolean":"normal",group:l}},D=({options:e,jsxOptions:r,childrenFirst:p,tail:l,emptyOption:i,invalidOption:u,disabledOption:b,emptyGroup:$})=>{const a={emptyOption:i,invalidOption:u,disabledOption:b},o=new Map,s=[],y=new Set,h=n=>{let t=n;for(let f=1;y.has(t);f++)t=`${n}~${f}`;return y.add(t),t},O=r.map((n,t)=>{if(n.isGroupMarker)return{...n,type:"group-marker"};const f=!n.label&&!E(n.userId)&&!E(n.value)&&!n.hasJsx;return{...n,id:h(`jsx-${n.id}`),index:t,userId:n.userId,raw:n.value,original:n.value,name:n.label||(E(n.value)?String(n.value):i),disabled:!!n.disabled||f,type:typeof n.value=="boolean"?"boolean":"normal",group:n.group||null}});let S=0;const x=(n,t=null,f=!1,G="0")=>{Array.isArray(n)||(n=[n]),n.forEach((d,Y)=>{const j=`${G}-${Y}`;if(C(d)){const g=J(d,!0)||$;o.has(g)||o.set(g,{disabled:!!d.disabled,items:[]}),d.options?x(d.options,g,f||!!d.disabled,j):s.push({id:`empty-${g}-${j}`,name:g,group:g,isPlaceholder:!0,type:"group-marker",index:S++})}else P(d)&&!K.some(g=>g in d)&&!d.group?Object.values(d).forEach((g,_)=>s.push({...k(g,`${j}-${_}`,"default",t,f,a),index:S++})):s.push({...k(d,j,"default",t,f,a),index:S++})})};x(e);const N=p?[...O,...s]:[...s,...O],c=[],L=new Set;N.forEach(n=>{if(!n.group){c.push({type:"item",data:n});return}L.has(n.group)||(L.add(n.group),c.push({type:"group",name:n.group})),o.has(n.group)||o.set(n.group,{items:[]});const t=o.get(n.group);n.isGroupMarker?(t.className=n.className,t.style=n.style,n.disabled&&(t.disabled=!0)):n.isPlaceholder||t.items.push(n)});const A=[];return c.forEach(n=>{if(n.type==="item"){A.push(n.data);return}const t=o.get(n.name);A.push({className:t?.className||"",id:`group-header-${n.name}`,disabled:!!t?.disabled,style:t?.style||{},groupHeader:!0,name:n.name,type:"group"}),t?.items.forEach(f=>A.push(f))}),l&&A.push(l),A},H=e=>{const r=()=>null;return r.racKind="define",r.racRender=e,r.displayName=`defineOption(${e.name||"anonymous"})`,r},T={selected:null,selectedIDs:[]},m=e=>{try{return JSON.stringify(e)}catch{return}},B=(e,r)=>e===r||e!==e&&r!==r,M=e=>typeof e=="object"&&e!==null,W=(e,r)=>B(e,r)||M(e)&&M(r)&&m(e)!==void 0&&m(e)===m(r),q=(e,r,p,l)=>{if(e==null||Array.isArray(e)&&e.length===0)return T;const i=l.length?new Map(r.map(s=>[s.id,s])):null,u=i?[...l.map(s=>i.get(s)).filter(Boolean),...r]:r,b=new Set,$=new Map,a=s=>"original"in s&&!b.has(s.id),o=s=>{const y=M(s);let h=u.find(c=>a(c)&&B(c.original,s));const O=y?m(s):void 0;if(!h&&O!==void 0&&(h=u.find(c=>a(c)&&M(c.original)&&m(c.original)===O)),h)return b.add(h.id),h;const S=String(y?s.id||s.value||O||"object":s),x=($.get(S)??-1)+1;$.set(S,x);const N=`virtual-${S}-${x}`;return y?{id:N,name:J(s)||String(s.id||"Selected Object"),raw:s.value??s.id??s,original:s,userId:s.id??s.value??null,virtual:!0}:{id:N,name:String(s),raw:s,original:s,userId:s,virtual:!0}};return p?{selected:null,selectedIDs:(Array.isArray(e)?e:[e]).map(o)}:{selected:o(Array.isArray(e)?e[0]:e),selectedIDs:T.selectedIDs}};exports.defineOption=H;exports.getLabel=J;exports.isPlain=P;exports.normalizeOptions=D;exports.resolveSelection=q;exports.sameValue=W;exports.toJSON=m;
package/dist/model.js ADDED
@@ -0,0 +1,138 @@
1
+ "use client";
2
+ const R = ["group", "disabled", "options", "items", "children"], K = ["name", "label", "id", "value"], N = (e) => e != null && e !== "", G = (e) => e !== null && typeof e == "object" && !Array.isArray(e), k = (e) => G(e) && [Object.prototype, null].includes(Object.getPrototypeOf(e)), z = (e) => {
3
+ try {
4
+ const r = String(e);
5
+ return r.startsWith("[object ") ? null : r;
6
+ } catch {
7
+ return null;
8
+ }
9
+ }, J = (e, r = !1) => {
10
+ if (r && typeof e.group == "string") return e.group;
11
+ const p = K.find((u) => N(e[u]));
12
+ if (p) return String(e[p]);
13
+ const l = !k(e) && z(e);
14
+ if (l) return l;
15
+ const i = Object.entries(e).find(([u, h]) => !R.includes(u) && N(h));
16
+ return i ? String(i[1]) : null;
17
+ }, C = (e) => k(e) && ("options" in e || "group" in e && !K.some((r) => r in e)), P = (e, r, p, l, i, { emptyOption: u, invalidOption: h, disabledOption: $ }) => {
18
+ const a = `${p}-${r}`;
19
+ if (e == null || e === "")
20
+ return { id: a, userId: null, name: u, raw: e, disabled: !0, type: "normal", group: l, groupDisabled: i };
21
+ if (typeof e == "function")
22
+ return { id: a, userId: null, name: h, raw: e, disabled: !0, invalid: !0, type: "normal", group: l };
23
+ if (G(e)) {
24
+ const d = i || e.disabled === !0, s = e.value !== void 0 ? e.value : e.id !== void 0 ? e.id : e, y = J(e) || (d ? $ : u);
25
+ return {
26
+ id: a,
27
+ userId: e.id ?? e.value ?? e.name ?? e.label,
28
+ name: y,
29
+ raw: s,
30
+ original: e,
31
+ disabled: d || y === u,
32
+ type: typeof s == "boolean" ? "boolean" : "normal",
33
+ group: l || e.group || null,
34
+ groupDisabled: i
35
+ };
36
+ }
37
+ return { id: a, userId: e, name: String(e), raw: e, original: e, disabled: i, type: typeof e == "boolean" ? "boolean" : "normal", group: l };
38
+ }, D = ({
39
+ options: e,
40
+ jsxOptions: r,
41
+ childrenFirst: p,
42
+ tail: l,
43
+ emptyOption: i,
44
+ invalidOption: u,
45
+ disabledOption: h,
46
+ emptyGroup: $
47
+ }) => {
48
+ const a = { emptyOption: i, invalidOption: u, disabledOption: h }, d = /* @__PURE__ */ new Map(), s = [], y = /* @__PURE__ */ new Set(), b = (n) => {
49
+ let t = n;
50
+ for (let f = 1; y.has(t); f++) t = `${n}~${f}`;
51
+ return y.add(t), t;
52
+ }, x = r.map((n, t) => {
53
+ if (n.isGroupMarker) return { ...n, type: "group-marker" };
54
+ const f = !n.label && !N(n.userId) && !N(n.value) && !n.hasJsx;
55
+ return {
56
+ ...n,
57
+ id: b(`jsx-${n.id}`),
58
+ index: t,
59
+ userId: n.userId,
60
+ raw: n.value,
61
+ original: n.value,
62
+ name: n.label || (N(n.value) ? String(n.value) : i),
63
+ disabled: !!n.disabled || f,
64
+ type: typeof n.value == "boolean" ? "boolean" : "normal",
65
+ group: n.group || null
66
+ };
67
+ });
68
+ let S = 0;
69
+ const A = (n, t = null, f = !1, V = "0") => {
70
+ Array.isArray(n) || (n = [n]), n.forEach((o, Y) => {
71
+ const j = `${V}-${Y}`;
72
+ if (C(o)) {
73
+ const g = J(o, !0) || $;
74
+ d.has(g) || d.set(g, { disabled: !!o.disabled, items: [] }), o.options ? A(o.options, g, f || !!o.disabled, j) : s.push({ id: `empty-${g}-${j}`, name: g, group: g, isPlaceholder: !0, type: "group-marker", index: S++ });
75
+ } else k(o) && !K.some((g) => g in o) && !o.group ? Object.values(o).forEach((g, _) => s.push({ ...P(g, `${j}-${_}`, "default", t, f, a), index: S++ })) : s.push({ ...P(o, j, "default", t, f, a), index: S++ });
76
+ });
77
+ };
78
+ A(e);
79
+ const m = p ? [...x, ...s] : [...s, ...x], c = [], L = /* @__PURE__ */ new Set();
80
+ m.forEach((n) => {
81
+ if (!n.group) {
82
+ c.push({ type: "item", data: n });
83
+ return;
84
+ }
85
+ L.has(n.group) || (L.add(n.group), c.push({ type: "group", name: n.group })), d.has(n.group) || d.set(n.group, { items: [] });
86
+ const t = d.get(n.group);
87
+ n.isGroupMarker ? (t.className = n.className, t.style = n.style, n.disabled && (t.disabled = !0)) : n.isPlaceholder || t.items.push(n);
88
+ });
89
+ const E = [];
90
+ return c.forEach((n) => {
91
+ if (n.type === "item") {
92
+ E.push(n.data);
93
+ return;
94
+ }
95
+ const t = d.get(n.name);
96
+ E.push({
97
+ className: t?.className || "",
98
+ id: `group-header-${n.name}`,
99
+ disabled: !!t?.disabled,
100
+ style: t?.style || {},
101
+ groupHeader: !0,
102
+ name: n.name,
103
+ type: "group"
104
+ }), t?.items.forEach((f) => E.push(f));
105
+ }), l && E.push(l), E;
106
+ }, H = (e) => {
107
+ const r = () => null;
108
+ return r.racKind = "define", r.racRender = e, r.displayName = `defineOption(${e.name || "anonymous"})`, r;
109
+ }, B = { selected: null, selectedIDs: [] }, O = (e) => {
110
+ try {
111
+ return JSON.stringify(e);
112
+ } catch {
113
+ return;
114
+ }
115
+ }, T = (e, r) => e === r || e !== e && r !== r, M = (e) => typeof e == "object" && e !== null, W = (e, r) => T(e, r) || M(e) && M(r) && O(e) !== void 0 && O(e) === O(r), q = (e, r, p, l) => {
116
+ if (e == null || Array.isArray(e) && e.length === 0) return B;
117
+ const i = l.length ? new Map(r.map((s) => [s.id, s])) : null, u = i ? [...l.map((s) => i.get(s)).filter(Boolean), ...r] : r, h = /* @__PURE__ */ new Set(), $ = /* @__PURE__ */ new Map(), a = (s) => "original" in s && !h.has(s.id), d = (s) => {
118
+ const y = M(s);
119
+ let b = u.find((c) => a(c) && T(c.original, s));
120
+ const x = y ? O(s) : void 0;
121
+ if (!b && x !== void 0 && (b = u.find((c) => a(c) && M(c.original) && O(c.original) === x)), b)
122
+ return h.add(b.id), b;
123
+ const S = String(y ? s.id || s.value || x || "object" : s), A = ($.get(S) ?? -1) + 1;
124
+ $.set(S, A);
125
+ const m = `virtual-${S}-${A}`;
126
+ return y ? { id: m, name: J(s) || String(s.id || "Selected Object"), raw: s.value ?? s.id ?? s, original: s, userId: s.id ?? s.value ?? null, virtual: !0 } : { id: m, name: String(s), raw: s, original: s, userId: s, virtual: !0 };
127
+ };
128
+ return p ? { selected: null, selectedIDs: (Array.isArray(e) ? e : [e]).map(d) } : { selected: d(Array.isArray(e) ? e[0] : e), selectedIDs: B.selectedIDs };
129
+ };
130
+ export {
131
+ H as defineOption,
132
+ J as getLabel,
133
+ k as isPlain,
134
+ D as normalizeOptions,
135
+ q as resolveSelection,
136
+ W as sameValue,
137
+ O as toJSON
138
+ };
@@ -0,0 +1 @@
1
+ "use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),s=require("react"),Y=require("./state.cjs"),X={x:["width","marginLeft","marginRight","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"],y:["height","marginTop","marginBottom","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"],none:[]},Z={x:{minWidth:"0px",maxWidth:"none"},y:{minHeight:"0px",maxHeight:"none"}},J=s.createContext(null);let I=null;const _=()=>I??=(queueMicrotask(()=>{I=null}),{});function ee({as:c="div",axis:n="y",exitAxis:h=n,fade:l=!1,in:f,unmountOnExit:r=!0,easing:x,duration:o,group:t,nodeRef:u,onEntered:S,onExited:C,...e}){const b=s.useContext(Y.SelectConfigContext),v=s.useContext(J),T=f===void 0&&!!v,d=T?v.present:!!f,R=d?n:h,H=o??(b?.duration??300)/(T&&v.swap?2:1),z=x??b?.easing??"ease",K=s.useRef(null),L=u??K,p=s.useRef(null),M=s.useRef(!1),y=s.useRef({restart:()=>{}}),[N]=s.useState(()=>T&&v.appear?!d:d),j=s.useRef(N),[A,G]=s.useState(!d);d&&A&&G(!1);const V=s.useEffectEvent(()=>{if(t?.delete(y.current),d){p.current?.cancel(),p.current=null,S?.();return}C?.(),T&&v.onExited(),r&&(p.current=null,G(!0))});if(s.useLayoutEffect(()=>{const i=L.current;if(!i)return;const P=l?[...X[R],"opacity"]:X[R],W=R==="none"?{}:{overflow:"hidden",textOverflow:"clip",...Z[R]},E={...Object.fromEntries(P.map(a=>[a,a==="opacity"?0:"0px"])),...W},q=()=>{const{overflow:a}=i.style;i.style.overflow="hidden";const w=getComputedStyle(i),k={...Object.fromEntries(P.map(m=>[m,w[m]])),...W};return i.style.overflow=a,k},B=(a,w)=>{const k=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,m=p.current=i.animate([a,w],{duration:k?0:H,easing:z,fill:j.current?"backwards":"both"});if(m.onfinish=()=>{p.current===m&&M.current&&V()},y.current.frames=[a,w],!t)return;const g=m.timeline?.currentTime;g!=null&&(m.startTime=g,m.currentTime=0),y.current.batch=_(),t.add(y.current)},U=()=>{const[a,w]=y.current.frames,k=p.current.effect.getComputedTiming().progress??0,m=g=>parseFloat(a[g])+(parseFloat(w[g])-parseFloat(a[g]))*k;return{...Object.fromEntries(P.map(g=>[g,g==="opacity"?m(g):`${m(g)}px`])),...W}};if(y.current.restart=a=>{const w=p.current;if(w?.playState!=="running"||!a&&y.current.batch===I)return;const k=U();w.cancel(),B(k,j.current?q():E)},j.current===d){!d&&p.current?.effect?.target!==i&&i.animate&&(p.current=i.animate([E,E],{fill:"forwards"}));return}j.current=d;const F=p.current;if(F?.playState==="running"){if(!t){F.reverse();return}y.current.restart(!0)}else{if(F?.cancel(),!i.animate){V();return}d?B(E,q()):B(q(),E)}t?.forEach(a=>a!==y.current&&a.restart())},[d,r,R,l,H,z,L,t]),s.useLayoutEffect(()=>{const i=y.current;return M.current=!0,p.current?.playState==="running"&&t?.add(i),()=>{M.current=!1,t?.delete(i)}},[t]),A&&r)return null;const Q=c;return O.jsx(Q,{ref:L,...e})}const te=({id:c,present:n,appear:h,swap:l,onExited:f,children:r})=>{const x=s.useMemo(()=>({present:n,appear:h,swap:l,onExited:()=>f(c)}),[c,n,h,l,f]);return O.jsx(J.Provider,{value:x,children:r})},$=(c,n,h,l=!0)=>{const f=s.Children.toArray(n).filter(s.isValidElement),r=new Set(f.map(e=>e.key)),x=new Map(c.map(e=>[e.key,e])),o=f.map(e=>({key:e.key,el:e,present:!0,appear:x.get(e.key)?.appear??l}));let t=0;const u=new Set;c.forEach(e=>{if(r.has(e.key))e.present&&(t=o.findIndex(b=>b.key===e.key)+1);else if(!e.pending){const b=e.present?{...e,present:!1,swap:!1}:e;e.present&&u.add(b),o.splice(t++,0,b)}});const S=e=>e.present&&(x.get(e.key)?.pending??!x.has(e.key)),C=h&&(u.size>0||c.some(e=>e.pending))&&o.some(e=>!e.present)&&o.some(S);return{children:n,list:C?o.map(e=>u.has(e)?{...e,swap:!0}:S(e)?{...e,pending:!0,swap:!0}:e):o}},D=c=>c.some(n=>!n.present)?c:c.map(n=>n.pending?{...n,pending:!1}:n);function ne({children:c,hold:n=!1,wait:h=!1}){const[l,f]=s.useState(()=>({...$([],c,h,!1),hold:n}));let r=l;r.children!==c&&(r={...r,...$(r.list,c,h)}),r.hold!==n&&(r={...r,hold:n,list:n?r.list:D(r.list.filter(o=>o.present))}),r!==l&&f(r);const x=s.useCallback(o=>f(t=>!t.hold&&t.list.some(u=>u.key===o&&!u.present)?{...t,list:D(t.list.filter(u=>u.key!==o))}:t),[]);return l.list.map(({key:o,el:t,present:u,appear:S,pending:C,swap:e=!1})=>!C&&O.jsx(te,{id:o,present:u,appear:S,swap:e,onExited:x,children:t},o))}exports.Collapse=ee;exports.Presence=ne;
package/dist/motion.js ADDED
@@ -0,0 +1,122 @@
1
+ "use client";
2
+ import { jsx as q } from "react/jsx-runtime";
3
+ import { useState as H, useCallback as _, useContext as $, createContext as ee, useRef as T, useEffectEvent as te, useLayoutEffect as D, Children as ne, isValidElement as re, useMemo as se } from "react";
4
+ import { SelectConfigContext as oe } from "./state.js";
5
+ const J = {
6
+ x: ["width", "marginLeft", "marginRight", "paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"],
7
+ y: ["height", "marginTop", "marginBottom", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"],
8
+ none: []
9
+ }, ce = { x: { minWidth: "0px", maxWidth: "none" }, y: { minHeight: "0px", maxHeight: "none" } }, Q = /* @__PURE__ */ ee(null);
10
+ let O = null;
11
+ const ae = () => O ??= (queueMicrotask(() => {
12
+ O = null;
13
+ }), {});
14
+ function pe({
15
+ as: s = "div",
16
+ axis: n = "y",
17
+ exitAxis: h = n,
18
+ fade: l = !1,
19
+ in: f,
20
+ unmountOnExit: r = !0,
21
+ easing: y,
22
+ duration: o,
23
+ group: t,
24
+ nodeRef: i,
25
+ onEntered: k,
26
+ onExited: v,
27
+ ...e
28
+ }) {
29
+ const x = $(oe), C = $(Q), R = f === void 0 && !!C, u = R ? C.present : !!f, S = u ? n : h, z = o ?? (x?.duration ?? 300) / (R && C.swap ? 2 : 1), A = y ?? x?.easing ?? "ease", U = T(null), L = i ?? U, d = T(null), M = T(!1), g = T({ restart: () => {
30
+ } }), [Y] = H(() => R && C.appear ? !u : u), W = T(Y), [G, V] = H(!u);
31
+ u && G && V(!1);
32
+ const X = te(() => {
33
+ if (t?.delete(g.current), u) {
34
+ d.current?.cancel(), d.current = null, k?.();
35
+ return;
36
+ }
37
+ v?.(), R && C.onExited(), r && (d.current = null, V(!0));
38
+ });
39
+ return D(() => {
40
+ const a = L.current;
41
+ if (!a) return;
42
+ const j = l ? [...J[S], "opacity"] : J[S], B = S === "none" ? {} : { overflow: "hidden", textOverflow: "clip", ...ce[S] }, E = { ...Object.fromEntries(j.map((c) => [c, c === "opacity" ? 0 : "0px"])), ...B }, P = () => {
43
+ const { overflow: c } = a.style;
44
+ a.style.overflow = "hidden";
45
+ const w = getComputedStyle(a), b = { ...Object.fromEntries(j.map((p) => [p, w[p]])), ...B };
46
+ return a.style.overflow = c, b;
47
+ }, F = (c, w) => {
48
+ const b = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, p = d.current = a.animate([c, w], { duration: b ? 0 : z, easing: A, fill: W.current ? "backwards" : "both" });
49
+ if (p.onfinish = () => {
50
+ d.current === p && M.current && X();
51
+ }, g.current.frames = [c, w], !t) return;
52
+ const m = p.timeline?.currentTime;
53
+ m != null && (p.startTime = m, p.currentTime = 0), g.current.batch = ae(), t.add(g.current);
54
+ }, Z = () => {
55
+ const [c, w] = g.current.frames, b = d.current.effect.getComputedTiming().progress ?? 0, p = (m) => parseFloat(c[m]) + (parseFloat(w[m]) - parseFloat(c[m])) * b;
56
+ return { ...Object.fromEntries(j.map((m) => [m, m === "opacity" ? p(m) : `${p(m)}px`])), ...B };
57
+ };
58
+ if (g.current.restart = (c) => {
59
+ const w = d.current;
60
+ if (w?.playState !== "running" || !c && g.current.batch === O) return;
61
+ const b = Z();
62
+ w.cancel(), F(b, W.current ? P() : E);
63
+ }, W.current === u) {
64
+ !u && d.current?.effect?.target !== a && a.animate && (d.current = a.animate([E, E], { fill: "forwards" }));
65
+ return;
66
+ }
67
+ W.current = u;
68
+ const I = d.current;
69
+ if (I?.playState === "running") {
70
+ if (!t) {
71
+ I.reverse();
72
+ return;
73
+ }
74
+ g.current.restart(!0);
75
+ } else {
76
+ if (I?.cancel(), !a.animate) {
77
+ X();
78
+ return;
79
+ }
80
+ u ? F(E, P()) : F(P(), E);
81
+ }
82
+ t?.forEach((c) => c !== g.current && c.restart());
83
+ }, [u, r, S, l, z, A, L, t]), D(() => {
84
+ const a = g.current;
85
+ return M.current = !0, d.current?.playState === "running" && t?.add(a), () => {
86
+ M.current = !1, t?.delete(a);
87
+ };
88
+ }, [t]), G && r ? null : /* @__PURE__ */ q(s, { ref: L, ...e });
89
+ }
90
+ const ie = ({ id: s, present: n, appear: h, swap: l, onExited: f, children: r }) => {
91
+ const y = se(() => ({ present: n, appear: h, swap: l, onExited: () => f(s) }), [s, n, h, l, f]);
92
+ return /* @__PURE__ */ q(Q.Provider, { value: y, children: r });
93
+ }, K = (s, n, h, l = !0) => {
94
+ const f = ne.toArray(n).filter(re), r = new Set(f.map((e) => e.key)), y = new Map(s.map((e) => [e.key, e])), o = f.map((e) => ({ key: e.key, el: e, present: !0, appear: y.get(e.key)?.appear ?? l }));
95
+ let t = 0;
96
+ const i = /* @__PURE__ */ new Set();
97
+ s.forEach((e) => {
98
+ if (r.has(e.key))
99
+ e.present && (t = o.findIndex((x) => x.key === e.key) + 1);
100
+ else if (!e.pending) {
101
+ const x = e.present ? { ...e, present: !1, swap: !1 } : e;
102
+ e.present && i.add(x), o.splice(t++, 0, x);
103
+ }
104
+ });
105
+ const k = (e) => e.present && (y.get(e.key)?.pending ?? !y.has(e.key)), v = h && (i.size > 0 || s.some((e) => e.pending)) && o.some((e) => !e.present) && o.some(k);
106
+ return { children: n, list: v ? o.map((e) => i.has(e) ? { ...e, swap: !0 } : k(e) ? { ...e, pending: !0, swap: !0 } : e) : o };
107
+ }, N = (s) => s.some((n) => !n.present) ? s : s.map((n) => n.pending ? { ...n, pending: !1 } : n);
108
+ function me({ children: s, hold: n = !1, wait: h = !1 }) {
109
+ const [l, f] = H(() => ({ ...K([], s, h, !1), hold: n }));
110
+ let r = l;
111
+ r.children !== s && (r = { ...r, ...K(r.list, s, h) }), r.hold !== n && (r = { ...r, hold: n, list: n ? r.list : N(r.list.filter((o) => o.present)) }), r !== l && f(r);
112
+ const y = _((o) => f(
113
+ (t) => !t.hold && t.list.some((i) => i.key === o && !i.present) ? { ...t, list: N(t.list.filter((i) => i.key !== o)) } : t
114
+ ), []);
115
+ return l.list.map(
116
+ ({ key: o, el: t, present: i, appear: k, pending: v, swap: e = !1 }) => !v && /* @__PURE__ */ q(ie, { id: o, present: i, appear: k, swap: e, onExited: y, children: t }, o)
117
+ );
118
+ }
119
+ export {
120
+ pe as Collapse,
121
+ me as Presence
122
+ };
@@ -0,0 +1 @@
1
+ "use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),x=require("./state.cjs"),a=require("react"),H=require("./useSelectBehavior.cjs"),t=require("./utils.cjs"),p=require("./motion.cjs"),N=0,O=1,j=2,k=C=>{const{highlightStore:e}=a.useContext(x.SelectConfigContext),r=a.useRef(null),l=a.useSyncExternalStore(e.subscribe,()=>{const i=e.get();return H.effectiveHighlight(i)!==C?N:i.ready?j:O},()=>N);return a.useLayoutEffect(()=>{l===j&&r.current?.scrollIntoView?.({block:"nearest"})},[l]),[r,l!==N]},y=(C,e)=>`${t.optionDomId(C,e.id)}_l`,w=a.memo(function({option:e,index:r,open:l,hasChildren:i}){const{selectId:h,icons:d,texts:m}=a.useContext(x.SelectConfigContext),{selectOption:b,highlight:I}=a.useContext(x.SelectActionsContext),[u,g]=k(r),c=i&&!e.disabled;return n.jsxs("div",{className:t.withClass("rac-group",e.className),onMouseEnter:()=>c&&I(r),onClick:f=>b(e,f),"aria-label":c?`${e.name}, ${l?m.groupOpen:m.groupClosed}`:void 0,"aria-disabled":!c||void 0,"data-highlighted":t.flag(g),"data-disabled":t.flag(e.disabled),id:t.optionDomId(h,e.id),"data-open":t.flag(l),"aria-selected":"false",style:e.style,role:"option",ref:u,children:[n.jsx("span",{className:"rac-group-text",id:y(h,e),children:e.name}),n.jsx(p.Collapse,{axis:"x",in:i&&!e.disabled,className:"rac-group-arrow","aria-hidden":"true",children:t.renderIcon(d.arrow)})]})}),E=a.memo(function({option:e,index:r,isSelected:l,showCheckbox:i}){const{selectId:h,icons:d,renderOption:m}=a.useContext(x.SelectConfigContext),{selectOption:b,highlight:I}=a.useContext(x.SelectActionsContext),[u,g]=k(r),c=!e.disabled&&!e.loading,f=t.optionContent(e,m,l);return n.jsxs("div",{className:t.withClass("rac-option",e.className),onMouseEnter:()=>c&&I(r),onClick:S=>!e.loading&&b(e,S),"aria-disabled":e.disabled||e.loading,"data-invalid":t.flag(e.invalid),"data-bool":typeof e.raw=="boolean"?String(e.raw):void 0,"data-highlighted":t.flag(g),"data-loading":t.flag(e.loading),id:t.optionDomId(h,e.id),"aria-selected":l,style:e.style,role:"option",ref:u,children:[f?n.jsx("div",{className:"rac-option-jsx",children:f}):n.jsx("span",{className:"rac-option-text",children:e.name}),e.loading&&t.dots,i&&n.jsxs("div",{className:"rac-check","data-default":t.flag(!d.checkbox),children:[t.renderIcon(d.check,{className:"rac-checkmark"}),t.renderIcon(d.checkbox,{className:"rac-check-icon"})]})]})}),G=a.memo(function(){const{selectId:e,multiple:r}=a.useContext(x.SelectConfigContext),{normalizedOptions:l,selected:i,selectedIDs:h,expandedGroups:d}=a.useContext(x.SelectStateContext),m=i?.id;return a.useMemo(()=>{const b=new Set(h.map(s=>s.id)),I=l.reduce((s,o)=>(o.group&&(s[o.group]=(s[o.group]||0)+1),s),{}),u=[];let g=[],c=null,f=null;const S=()=>{c!==null&&g.length&&u.push(n.jsx(p.Collapse,{axis:"y",in:d.has(c),className:"rac-group-items",role:"group","aria-labelledby":f,children:g},`slide-${c}`)),g=[]},v=(s,o)=>n.jsx(E,{isSelected:b.has(s.id)||m===s.id,showCheckbox:r&&!s.disabled&&"original"in s,option:s,index:o},s.id);return l.forEach((s,o)=>{s.groupHeader?(S(),c=s.name,f=y(e,s),u.push(n.jsx(w,{hasChildren:I[s.name]>0,open:d.has(s.name),option:s,index:o},s.id))):s.group?g.push(v(s,o)):(S(),c=null,u.push(v(s,o)))}),S(),u},[l,m,h,d,r,e])});exports.default=G;