react-animated-select 0.2.7 → 0.2.8

package/dist/index.cjs.js

@@ -3,7 +3,7 @@
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,T,j,z,j),E[j+T]=!0)}if(j=null,g!==void 0&&(i(g),j=""+g),y(c)&&(i(c.key),j=""+c.key),"key"in c){g={};for(var B in c)B!=="key"&&(g[B]=c[B])}else g=c;return j&&R(g,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,j,g,b(),U,X)}function I(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}var C=o,P=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),d=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),G=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),V=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),S=C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,K=Array.isArray,O=console.createTask?console.createTask:function(){return null};C={react_stack_bottom_frame:function(e){return e()}};var r,h={},n=C.react_stack_bottom_frame.bind(C,a)(),l=O(u(a)),E={};ee.Fragment=w,ee.jsx=function(e,c,g){var T=1e4>S.recentlyCreatedOwnerStacks++;return D(e,c,g,!1,T?Error("react-stack-top-frame"):n,T?O(u(e)):l)},ee.jsxs=function(e,c,g){var T=1e4>S.recentlyCreatedOwnerStacks++;return D(e,c,g,!0,T?Error("react-stack-top-frame"):n,T?O(u(e)):l)}})()),ee}var de;function _e(){return de||(de=1,process.env.NODE_ENV==="production"?re.exports=ke():re.exports=Te()),re.exports}var m=_e();const Re=({className:t="",...s})=>m.jsx("svg",{className:t,role:"button","aria-label":"Clear selection",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...s,children:m.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"})}),Se=({className:t="",...s})=>m.jsx("svg",{className:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...s,children:m.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"})}),he=o.createContext(null);function $e({disabled:t,isOpen:s,setIsOpen:i,options:u,selectOption:b,selected:a}){const y=o.useRef(!1),R=o.useRef(0),[v,k]=o.useState(-1);o.useEffect(()=>{const f=()=>{R.current=Date.now()};return window.addEventListener("focus",f),()=>window.removeEventListener("focus",f)},[]),o.useEffect(()=>{if(s){let f=-1;if(a){const w=u.findIndex(x=>x.id===a.id&&!x.disabled);w>=0&&(f=w)}f===-1&&(f=u.findIndex(w=>!w.disabled)),k(f)}else k(-1)},[s,a,u]);const D=o.useCallback(f=>{f.currentTarget.contains(f.relatedTarget)||i(!1)},[i]),I=o.useCallback(()=>{t||document.hidden||Date.now()-R.current<100||s||(i(!0),y.current=!0,setTimeout(()=>{y.current=!1},200))},[t,s,i]),A=o.useCallback(f=>{t||f.target.closest(".rac-select-cancel")||y.current||i(!s)},[t,s,i]),C=(f,w)=>{if(u.every($=>$.disabled))return-1;let x=f,N=0;do x+=w,x<0&&(x=u.length-1),x>=u.length&&(x=0),N++;while(u[x]?.disabled&&N<=u.length);return x},P=o.useCallback(f=>{if(!t)switch(f.key){case"Enter":case" ":f.preventDefault(),s?v!==-1&&u[v]&&b(u[v],f):i(!0);break;case"Escape":f.preventDefault(),i(!1);break;case"ArrowDown":f.preventDefault(),s?k(w=>C(w,1)):i(!0);break;case"ArrowUp":f.preventDefault(),s?k(w=>C(w,-1)):i(!0);break;case"Tab":s&&i(!1);break}},[t,s,i,v,u,b]);return o.useMemo(()=>({handleBlur:D,handleFocus:I,handleToggle:A,handleKeyDown:P,highlightedIndex:v,setHighlightedIndex:k}),[D,I,A,P,v,k])}function Ae({options:t=[],jsxOptions:s=[],value:i,defaultValue:u=void 0,onChange:b,disabled:a=!1,loading:y=!1,error:R=!1,placeholder:v="Choose option",emptyText:k="No options",disabledText:D="Disabled",loadingText:I="Loading",errorText:A="Failed to load",disabledOption:C="Disabled option",emptyOption:P="Empty option",invalidOption:f="Invalid option",setVisibility:w}){const x=o.useId(),N=i!==void 0,[$,d]=o.useState(u),W=N?i:$,F=r=>!r||typeof r!="object"||Array.isArray(r)?!1:"id"in r||"value"in r||"name"in r||"label"in r||"disabled"in r,Y=o.useMemo(()=>{if(!t)return[];const r=[],h=(n,l,E)=>{let e=E?.id??E?.value;if(e==null&&(e=l??n),typeof l=="number"&&l===0){r.push({key:"0",value:0,userId:0,label:"0",original:E});return}if(typeof l=="boolean"){r.push({key:`bool-${r.length}`,value:l,userId:e,label:String(l),type:"boolean",original:E});return}if(l===""||l===null||l===void 0){r.push({key:`empty-${r.length}`,value:null,userId:e??`empty-${r.length}`,disabled:!0,label:P,original:E});return}if(typeof l=="function"){r.push({key:`invalid-${r.length}`,value:null,userId:e??`invalid-${r.length}`,disabled:!0,label:f,original:E});return}l&&typeof l=="object"&&!Array.isArray(l)?r.push({key:l.id??l.value??l.name??n,value:l,userId:e,disabled:!!l.disabled,label:l.name??l.label??n,original:E}):r.push({key:n,value:l,userId:e,label:String(l??n),original:E})};if(Array.isArray(t))for(const n of t){if(n&&typeof n=="object"&&!Array.isArray(n)&&Object.keys(n).length==1&&n.disabled==!0){r.push({key:`disabled-${r.length}`,value:null,userId:null,disabled:!0,label:C,original:n});continue}if(F(n)){const l=n.id??(typeof n.value!="object"?n.value:n.label??n.name??n.value);r.push({key:n.id??n.value??n.name??`opt-${r.length}`,value:n.value??n.id??n,userId:l,disabled:!!n.disabled,label:n.name??n.label??String(n.id??n.value),original:n})}else if(n&&typeof n=="object")for(const[l,E]of Object.entries(n))h(l,E,E);else h(n,n,n)}else if(typeof t=="object")for(const[n,l]of Object.entries(t))h(n,l,l);return r.map((n,l)=>({id:`${x}-opt-${l}`,userId:n.userId,name:String(n.label),raw:n.value,original:n.original,disabled:n.disabled,type:typeof n.value=="boolean"?"boolean":"normal"}))},[t,x]),G=o.useMemo(()=>s.map((r,h)=>({id:`jsx-${x.replace(/:/g,"")}-${r.id}-${h}`,userId:r.id,value:r.value,raw:r.value,original:r.value,name:r.label,jsx:r.jsx,disabled:r.disabled,className:r.className,type:typeof r.value=="boolean"?"boolean":"normal"})),[s,x]),_=o.useMemo(()=>[...Y,...G],[Y,G]),V=_.length>0,L=o.useMemo(()=>!R&&!y&&!a&&V,[R,y,a,V]),S=o.useMemo(()=>{if(!N)return null;if($){const r=_.find(h=>h.id===$);if(r&&r.userId===i)return $}return _.find(r=>r.userId===i)?.id??null},[N,i,_,$]),H=o.useMemo(()=>{const r=N?S:$;return r?_.find(h=>h.id===r)??null:null},[N,S,$,_]),K=o.useCallback((r,h)=>{if(r.disabled){h.stopPropagation(),h.preventDefault();return}d(r.id),b?.(r?.original,r?.userId),w(!1)},[b,w]),O=o.useCallback(r=>{r.preventDefault(),r.stopPropagation(),d(null),b?.(null,null)},[b]);return{normalizedOptions:_,selected:H,selectOption:K,clear:O,hasOptions:V,active:L,selectedValue:W,placeholder:v,emptyText:k,disabledText:D,loadingText:I,errorText:A,disabledOption:C,emptyOption:P,invalidOption:f,disabled:a,loading:y,error:R}}const oe=(t,s="invalid-option",i="")=>{const u=i?i.replace(/:/g,""):"";if(typeof t!="string"||!t.trim())return u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`;const b=t.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return b?b||`${s}-${Math.random().toString(36).slice(2,8)}`:u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`};function Ce({visibility:t,children:s,selectRef:i,onAnimationDone:u,unmount:b=!0,duration:a,easing:y,offset:R,animateOpacity:v}){const k=o.useRef(null),[D,I]=o.useState(0);o.useEffect(()=>{if(!i?.current)return;I(i.current.offsetHeight);const W=new ResizeObserver(F=>{for(let Y of F)I(Y.target.offsetHeight)});return W.observe(i.current),()=>W.disconnect()},[i]);const A=`height ${a}ms ${y}${v?`, opacity ${a}ms ${y}`:""}`,C={position:"absolute",top:`calc(100% + ${R}px)`,left:"0",width:"100%",overflow:"hidden",marginTop:"2px",zIndex:"1",height:t?"auto":"0px",opacity:t?1:0,pointerEvents:t?"all":"none",visibility:D?"visible":"hidden"},P=o.useCallback(()=>{const d=k.current;d&&(d.style.height="0px",v&&(d.style.opacity="0"),d.style.transition="")},[v]),f=o.useCallback(()=>{const d=k.current;d&&(d.style.transition=A,d.style.height=`${d.scrollHeight}px`,v&&(d.style.opacity="1"))},[A,v]),w=o.useCallback(()=>{const d=k.current;d&&(d.style.height="auto",d.style.transition="",u&&u())},[u]),x=o.useCallback(()=>{const d=k.current;d&&(d.style.height=`${d.scrollHeight}px`,v&&(d.style.opacity="1"),d.offsetHeight,d.style.transition=A)},[A,v]),N=o.useCallback(()=>{const d=k.current;d&&(d.style.height="0px",v&&(d.style.opacity="0"))},[v]),$=o.useCallback(()=>{const d=k.current;d&&(d.style.transition="")},[]);return m.jsx(pe.CSSTransition,{in:t,timeout:a,classNames:"rac-options",unmountOnExit:b,nodeRef:k,onEnter:P,onEntering:f,onEntered:w,onExit:x,onExiting:N,onExited:$,children:m.jsx("div",{ref:k,className:"rac-options",style:C,children:s})})}const Ne=o.memo(Ce,(t,s)=>t.visibility===s.visibility&&t.duration===s.duration&&t.easing===s.easing&&t.offset===s.offset&&t.animateOpacity===s.animateOpacity&&t.selectRef===s.selectRef&&t.children===s.children);function ne({visibility:t,children:s,duration:i=300,unmount:u,style:b}){const a=o.useRef(null);return m.jsx(pe.CSSTransition,{in:t,timeout:i,classNames:"rac-slide-left",unmountOnExit:!0,nodeRef:a,onEnter:()=>a.current.style.width="0px",onEntering:()=>a.current.style.width=a.current.scrollWidth+"px",onEntered:()=>a.current.style.width="auto",onExit:()=>a.current.style.width=a.current.scrollWidth+"px",onExiting:()=>a.current.style.width="0px",onExited:()=>u?.(),children:m.jsx("div",{ref:a,style:{...b,overflow:"hidden",transition:`width ${i}ms ease`},children:s})})}const be=(t,s)=>{if(!t)return null;if(typeof t=="string")return m.jsx("img",{src:t,...s,alt:""});if(o.isValidElement(t))return o.cloneElement(t,s);if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const i=t;return m.jsx(i,{...s})}return null},Oe=o.forwardRef(({unmount:t,children:s,renderedDropdown:i,visibility:u,ownBehavior:b=!1,alwaysOpen:a=!1,duration:y=300,easing:R="ease-out",offset:v=2,animateOpacity:k=!0,style:D={},className:I="",ArrowIcon:A=Se,ClearIcon:C=Re,...P},f)=>{const w=o.useId(),x=o.useMemo(()=>w.replace(/:/g,""),[w]),[N,$]=o.useState([]),d=o.useCallback(p=>{$(M=>[...M,p])},[]),W=o.useCallback(p=>{$(M=>M.filter(q=>q.id!==p))},[]),F=o.useRef(null);o.useEffect(()=>{f&&(typeof f=="function"?f(F.current):f.current=F.current)},[f]),o.useImperativeHandle(f,()=>F.current);const[Y,G]=o.useState(!1),_=o.useMemo(()=>a?!0:b?!!u:Y,[a,b,u,Y]),V=o.useCallback(p=>{a||b||G(M=>typeof p=="function"?p(M):p)},[a,b]),{normalizedOptions:L,selected:S,selectOption:H,clear:K,hasOptions:O,active:r,selectedValue:h,disabled:n,loading:l,error:E,placeholder:e,invalidOption:c,options:g,value:T,defaultValue:U,isControlled:X,emptyText:j,disabledText:z,loadingText:B,errorText:te}=Ae({...P,setVisibility:V,jsxOptions:N}),{handleBlur:ge,handleFocus:me,handleToggle:ye,handleKeyDown:xe,highlightedIndex:Z,setHighlightedIndex:Ee}=$e({disabled:n,isOpen:_,setIsOpen:V,options:L,selectOption:H,selected:S}),[le,ie]=o.useState(!1);o.useEffect(()=>{_||ie(!1)},[_]),o.useEffect(()=>{(E||n||l||!O)&&V(!1)},[E,n,l,O]),o.useEffect(()=>{if(_&&le&&Z!==-1){const p=L[Z];if(p){const M=`opt-${x}-${oe(p.id)}`,q=document.getElementById(M);q&&q.scrollIntoView({block:"nearest"})}}},[Z,_,le,L,x]);const ae=h!=null&&!(Array.isArray(h)&&h.length===0)&&!(typeof h=="object"&&Object.keys(h).length===0),ce=o.useMemo(()=>{if(E)return te;if(l)return B;if(n)return z;if(S)return S.jsx??S.name;if(ae){const p=L.find(M=>M.raw===h);return p?p.name:typeof h=="object"&&h!==null?h.name??h.label??"Selected Object":String(h)}return O?e:j},[n,l,E,O,S,h,e,te,B,z,j]),ve=`${x}-listbox`,we=o.useMemo(()=>L?.map((p,M)=>{const q=`opt-${x}-${oe(p.id)}`;let J="rac-select-option";return p.className&&(J+=` ${p.className}`),S?.id===p.id&&(J+=" rac-selected"),M===Z&&(J+=" rac-highlighted"),p.disabled&&(J+=" rac-disabled-option"),typeof p.raw=="boolean"&&(J+=p.raw?" rac-true-option":" rac-false-option"),p.name==c&&(J+=" rac-invalid-option"),m.jsx("div",{className:J,onClick:je=>H(p,je),onMouseEnter:()=>!p.disabled&&Ee(M),id:q,role:"option","aria-selected":S?.id===p.id,"aria-disabled":p.disabled,children:p.jsx??p.name},p.id)}),[L,H,x,S,Z]);return o.useEffect(()=>{process.env.NODE_ENV!=="production"&&(g&&typeof g!="object"&&console.error(`%c[Select Library]:%c Invalid prop %coptions%c.
+  <%s key={someKey} {...props} />`,T,j,z,j),E[j+T]=!0)}if(j=null,g!==void 0&&(i(g),j=""+g),y(c)&&(i(c.key),j=""+c.key),"key"in c){g={};for(var B in c)B!=="key"&&(g[B]=c[B])}else g=c;return j&&R(g,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,j,g,b(),U,X)}function I(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}var C=o,P=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),d=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),G=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),V=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),S=C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,K=Array.isArray,O=console.createTask?console.createTask:function(){return null};C={react_stack_bottom_frame:function(e){return e()}};var r,h={},n=C.react_stack_bottom_frame.bind(C,a)(),l=O(u(a)),E={};ee.Fragment=w,ee.jsx=function(e,c,g){var T=1e4>S.recentlyCreatedOwnerStacks++;return D(e,c,g,!1,T?Error("react-stack-top-frame"):n,T?O(u(e)):l)},ee.jsxs=function(e,c,g){var T=1e4>S.recentlyCreatedOwnerStacks++;return D(e,c,g,!0,T?Error("react-stack-top-frame"):n,T?O(u(e)):l)}})()),ee}var de;function _e(){return de||(de=1,process.env.NODE_ENV==="production"?re.exports=ke():re.exports=Te()),re.exports}var m=_e();const Re=({className:t="",...s})=>m.jsx("svg",{className:t,role:"button","aria-label":"Clear selection",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...s,children:m.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"})}),Se=({className:t="",...s})=>m.jsx("svg",{className:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...s,children:m.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"})}),he=o.createContext(null);function $e({disabled:t,isOpen:s,setIsOpen:i,options:u,selectOption:b,selected:a}){const y=o.useRef(!1),R=o.useRef(0),[v,k]=o.useState(-1);o.useEffect(()=>{const f=()=>{R.current=Date.now()};return window.addEventListener("focus",f),()=>window.removeEventListener("focus",f)},[]),o.useEffect(()=>{if(s){let f=-1;if(a){const w=u.findIndex(x=>x.id===a.id&&!x.disabled);w>=0&&(f=w)}f===-1&&(f=u.findIndex(w=>!w.disabled)),k(f)}else k(-1)},[s,a,u]);const D=o.useCallback(f=>{f.currentTarget.contains(f.relatedTarget)||i(!1)},[i]),I=o.useCallback(()=>{t||document.hidden||Date.now()-R.current<100||s||(i(!0),y.current=!0,setTimeout(()=>{y.current=!1},200))},[t,s,i]),A=o.useCallback(f=>{t||f.target.closest(".rac-select-cancel")||y.current||i(!s)},[t,s,i]),C=(f,w)=>{if(u.every($=>$.disabled))return-1;let x=f,N=0;do x+=w,x<0&&(x=u.length-1),x>=u.length&&(x=0),N++;while(u[x]?.disabled&&N<=u.length);return x},P=o.useCallback(f=>{if(!t)switch(f.key){case"Enter":case" ":f.preventDefault(),s?v!==-1&&u[v]&&b(u[v],f):i(!0);break;case"Escape":f.preventDefault(),i(!1);break;case"ArrowDown":f.preventDefault(),s?k(w=>C(w,1)):i(!0);break;case"ArrowUp":f.preventDefault(),s?k(w=>C(w,-1)):i(!0);break;case"Tab":s&&i(!1);break}},[t,s,i,v,u,b]);return o.useMemo(()=>({handleBlur:D,handleFocus:I,handleToggle:A,handleKeyDown:P,highlightedIndex:v,setHighlightedIndex:k}),[D,I,A,P,v,k])}function Ae({options:t=[],jsxOptions:s=[],value:i,defaultValue:u=void 0,onChange:b,disabled:a=!1,loading:y=!1,error:R=!1,placeholder:v="Choose option",emptyText:k="No options",disabledText:D="Disabled",loadingText:I="Loading",errorText:A="Failed to load",disabledOption:C="Disabled option",emptyOption:P="Empty option",invalidOption:f="Invalid option",setVisibility:w}){const x=o.useId(),N=i!==void 0,[$,d]=o.useState(u),W=N?i:$,F=r=>!r||typeof r!="object"||Array.isArray(r)?!1:"id"in r||"value"in r||"name"in r||"label"in r||"disabled"in r,Y=o.useMemo(()=>{if(!t)return[];const r=[],h=(n,l,E)=>{let e=E?.id??E?.value;if(e==null&&(e=l??n),typeof l=="number"&&l===0){r.push({key:"0",value:0,userId:0,label:"0",original:E});return}if(typeof l=="boolean"){r.push({key:`bool-${r.length}`,value:l,userId:e,label:String(l),type:"boolean",original:E});return}if(l===""||l===null||l===void 0){r.push({key:`empty-${r.length}`,value:null,userId:e??`empty-${r.length}`,disabled:!0,label:P,original:E});return}if(typeof l=="function"){r.push({key:`invalid-${r.length}`,value:null,userId:e??`invalid-${r.length}`,disabled:!0,label:f,original:E});return}l&&typeof l=="object"&&!Array.isArray(l)?r.push({key:l.id??l.value??l.name??n,value:l,userId:e,disabled:!!l.disabled,label:l.name??l.label??n,original:E}):r.push({key:n,value:l,userId:e,label:String(l??n),original:E})};if(Array.isArray(t))for(const n of t){if(n&&typeof n=="object"&&!Array.isArray(n)&&Object.keys(n).length==1&&n.disabled==!0){r.push({key:`disabled-${r.length}`,value:null,userId:null,disabled:!0,label:C,original:n});continue}if(F(n)){const l=n.id??(typeof n.value!="object"?n.value:n.label??n.name??n.value);r.push({key:n.id??n.value??n.name??`opt-${r.length}`,value:n.value??n.id??n,userId:l,disabled:!!n.disabled,label:n.name??n.label??String(n.id??n.value),original:n})}else if(n&&typeof n=="object")for(const[l,E]of Object.entries(n))h(l,E,E);else h(n,n,n)}else if(typeof t=="object")for(const[n,l]of Object.entries(t))h(n,l,l);return r.map((n,l)=>({id:`${x}-opt-${l}`,userId:n.userId,name:String(n.label),raw:n.value,original:n.original,disabled:n.disabled,type:typeof n.value=="boolean"?"boolean":"normal"}))},[t,x]),G=o.useMemo(()=>s.map((r,h)=>({id:`jsx-${x.replace(/:/g,"")}-${r.id}-${h}`,userId:r.id,value:r.value,raw:r.value,original:r.value,name:r.label,jsx:r.jsx,disabled:r.disabled,className:r.className,type:typeof r.value=="boolean"?"boolean":"normal"})),[s,x]),_=o.useMemo(()=>[...Y,...G],[Y,G]),V=_.length>0,L=o.useMemo(()=>!R&&!y&&!a&&V,[R,y,a,V]),S=o.useMemo(()=>{if(!N)return null;if($){const r=_.find(h=>h.id===$);if(r&&r.userId===i)return $}return _.find(r=>r.userId===i)?.id??null},[N,i,_,$]),H=o.useMemo(()=>{const r=N?S:$;return r?_.find(h=>h.id===r)??null:null},[N,S,$,_]),K=o.useCallback((r,h)=>{if(r.disabled){h.stopPropagation(),h.preventDefault();return}d(r.id),b?.(r?.original,r?.userId),w(!1)},[b,w]),O=o.useCallback(r=>{r.preventDefault(),r.stopPropagation(),d(null),b?.(null,null)},[b]);return{normalizedOptions:_,selected:H,selectOption:K,clear:O,hasOptions:V,active:L,selectedValue:W,placeholder:v,emptyText:k,disabledText:D,loadingText:I,errorText:A,disabledOption:C,emptyOption:P,invalidOption:f,disabled:a,loading:y,error:R}}const oe=(t,s="invalid-option",i="")=>{const u=i?i.replace(/:/g,""):"";if(typeof t!="string"||!t.trim())return u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`;const b=t.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return b?b||`${s}-${Math.random().toString(36).slice(2,8)}`:u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`};function Ce({visibility:t,children:s,selectRef:i,onAnimationDone:u,unmount:b=!0,duration:a,easing:y,offset:R,animateOpacity:v}){const k=o.useRef(null),[D,I]=o.useState(0);o.useEffect(()=>{if(!i?.current)return;I(i.current.offsetHeight);const W=new ResizeObserver(F=>{for(let Y of F)I(Y.target.offsetHeight)});return W.observe(i.current),()=>W.disconnect()},[i]);const A=`height ${a}ms ${y}${v?`, opacity ${a}ms ${y}`:""}`,C={position:"absolute",top:`calc(100% + ${R}px)`,left:"0",width:"100%",overflow:"hidden",marginTop:"2px",zIndex:"1",height:t?"auto":"0px",opacity:v?t?1:0:1,pointerEvents:t?"all":"none",visibility:D?"visible":"hidden"},P=o.useCallback(()=>{const d=k.current;d&&(d.style.height="0px",v&&(d.style.opacity="0"),d.style.transition="")},[v]),f=o.useCallback(()=>{const d=k.current;d&&(d.style.transition=A,d.style.height=`${d.scrollHeight}px`,v&&(d.style.opacity="1"))},[A,v]),w=o.useCallback(()=>{const d=k.current;d&&(d.style.height="auto",d.style.transition="",u&&u())},[u]),x=o.useCallback(()=>{const d=k.current;d&&(d.style.height=`${d.scrollHeight}px`,v&&(d.style.opacity="1"),d.offsetHeight,d.style.transition=A)},[A,v]),N=o.useCallback(()=>{const d=k.current;d&&(d.style.height="0px",v&&(d.style.opacity="0"))},[v]),$=o.useCallback(()=>{const d=k.current;d&&(d.style.transition="")},[]);return m.jsx(pe.CSSTransition,{in:t,timeout:a,classNames:"rac-options",unmountOnExit:b,nodeRef:k,onEnter:P,onEntering:f,onEntered:w,onExit:x,onExiting:N,onExited:$,children:m.jsx("div",{ref:k,className:"rac-options",style:C,children:s})})}const Ne=o.memo(Ce,(t,s)=>t.visibility===s.visibility&&t.duration===s.duration&&t.easing===s.easing&&t.offset===s.offset&&t.animateOpacity===s.animateOpacity&&t.selectRef===s.selectRef&&t.children===s.children);function ne({visibility:t,children:s,duration:i=300,unmount:u,style:b}){const a=o.useRef(null);return m.jsx(pe.CSSTransition,{in:t,timeout:i,classNames:"rac-slide-left",unmountOnExit:!0,nodeRef:a,onEnter:()=>a.current.style.width="0px",onEntering:()=>a.current.style.width=a.current.scrollWidth+"px",onEntered:()=>a.current.style.width="auto",onExit:()=>a.current.style.width=a.current.scrollWidth+"px",onExiting:()=>a.current.style.width="0px",onExited:()=>u?.(),children:m.jsx("div",{ref:a,style:{...b,overflow:"hidden",transition:`width ${i}ms ease`},children:s})})}const be=(t,s)=>{if(!t)return null;if(typeof t=="string")return m.jsx("img",{src:t,...s,alt:""});if(o.isValidElement(t))return o.cloneElement(t,s);if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const i=t;return m.jsx(i,{...s})}return null},Oe=o.forwardRef(({unmount:t,children:s,renderedDropdown:i,visibility:u,ownBehavior:b=!1,alwaysOpen:a=!1,duration:y=300,easing:R="ease-out",offset:v=2,animateOpacity:k=!0,style:D={},className:I="",ArrowIcon:A=Se,ClearIcon:C=Re,...P},f)=>{const w=o.useId(),x=o.useMemo(()=>w.replace(/:/g,""),[w]),[N,$]=o.useState([]),d=o.useCallback(p=>{$(M=>[...M,p])},[]),W=o.useCallback(p=>{$(M=>M.filter(q=>q.id!==p))},[]),F=o.useRef(null);o.useEffect(()=>{f&&(typeof f=="function"?f(F.current):f.current=F.current)},[f]),o.useImperativeHandle(f,()=>F.current);const[Y,G]=o.useState(!1),_=o.useMemo(()=>a?!0:b?!!u:Y,[a,b,u,Y]),V=o.useCallback(p=>{a||b||G(M=>typeof p=="function"?p(M):p)},[a,b]),{normalizedOptions:L,selected:S,selectOption:H,clear:K,hasOptions:O,active:r,selectedValue:h,disabled:n,loading:l,error:E,placeholder:e,invalidOption:c,options:g,value:T,defaultValue:U,isControlled:X,emptyText:j,disabledText:z,loadingText:B,errorText:te}=Ae({...P,setVisibility:V,jsxOptions:N}),{handleBlur:ge,handleFocus:me,handleToggle:ye,handleKeyDown:xe,highlightedIndex:Z,setHighlightedIndex:Ee}=$e({disabled:n,isOpen:_,setIsOpen:V,options:L,selectOption:H,selected:S}),[le,ie]=o.useState(!1);o.useEffect(()=>{_||ie(!1)},[_]),o.useEffect(()=>{(E||n||l||!O)&&V(!1)},[E,n,l,O]),o.useEffect(()=>{if(_&&le&&Z!==-1){const p=L[Z];if(p){const M=`opt-${x}-${oe(p.id)}`,q=document.getElementById(M);q&&q.scrollIntoView({block:"nearest"})}}},[Z,_,le,L,x]);const ae=h!=null&&!(Array.isArray(h)&&h.length===0)&&!(typeof h=="object"&&Object.keys(h).length===0),ce=o.useMemo(()=>{if(E)return te;if(l)return B;if(n)return z;if(S)return S.jsx??S.name;if(ae){const p=L.find(M=>M.raw===h);return p?p.name:typeof h=="object"&&h!==null?h.name??h.label??"Selected Object":String(h)}return O?e:j},[n,l,E,O,S,h,e,te,B,z,j]),ve=`${x}-listbox`,we=o.useMemo(()=>L?.map((p,M)=>{const q=`opt-${x}-${oe(p.id)}`;let J="rac-select-option";return p.className&&(J+=` ${p.className}`),S?.id===p.id&&(J+=" rac-selected"),M===Z&&(J+=" rac-highlighted"),p.disabled&&(J+=" rac-disabled-option"),typeof p.raw=="boolean"&&(J+=p.raw?" rac-true-option":" rac-false-option"),p.name==c&&(J+=" rac-invalid-option"),m.jsx("div",{className:J,onClick:je=>H(p,je),onMouseEnter:()=>!p.disabled&&Ee(M),id:q,role:"option","aria-selected":S?.id===p.id,"aria-disabled":p.disabled,children:p.jsx??p.name},p.id)}),[L,H,x,S,Z]);return o.useEffect(()=>{process.env.NODE_ENV!=="production"&&(g&&typeof g!="object"&&console.error(`%c[Select Library]:%c Invalid prop %coptions%c.
 Expected %cArray%c or %cObject%c, but received %c${typeof g}%c.
 `,"color: #ff4d4f; font-weight: bold;","color: default;","color: #1890ff; font-weight: bold;","color: default;","color: #52c41a; font-weight: bold;","color: default;","color: #52c41a; font-weight: bold;","color: default;","color: #ff4d4f; font-weight: bold;","color: default;"),X&&U!==void 0&&console.warn(`%c[Select Library]:%c .
 `,"color: #faad14; font-weight: bold;","color: default;"))},[g,T,U,X]),m.jsxs(he.Provider,{value:{registerOption:d,unregisterOption:W},children:[s,i,m.jsxs("div",{style:{"--rac-duration":`${y}ms`,...D},className:`rac-select

package/dist/index.es.js

@@ -548,7 +548,7 @@ function He({
     marginTop: "2px",
     zIndex: "1",
     height: r ? "auto" : "0px",
-    opacity: r ? 1 : 0,
+    opacity: v ? r ? 1 : 0 : 1,
     pointerEvents: r ? "all" : "none",
     visibility: F ? "visible" : "hidden"
   }, C = k(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-select",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "type": "module",
   "author": "l1nway (https://github.com/l1nway/)",
   "description": "Animated, accessible, and flexible select component for React",

package/src/options.jsx

@@ -38,7 +38,7 @@ function Options({
       marginTop: '2px',
       zIndex: '1',
       height: visibility ? 'auto' : '0px',
-      opacity: visibility ? 1 : 0,
+      opacity: animateOpacity ? (visibility ? 1 : 0) : 1,
       pointerEvents: visibility ? 'all' : 'none',
       visibility: selectHeight ? 'visible' : 'hidden'
   }
@@ -77,7 +77,7 @@ function Options({
     el.style.height = `${el.scrollHeight}px`
     if (animateOpacity) el.style.opacity = '1'
     
-    el.offsetHeight // force reflow
+    el.offsetHeight
     el.style.transition = transitionString
   }, [transitionString, animateOpacity])