react-animated-select 0.2.8 → 0.3.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.
- package/README.md +70 -28
- package/demo/README.md +16 -0
- package/demo/eslint.config.js +29 -0
- package/demo/index.html +13 -0
- package/demo/package-lock.json +3436 -0
- package/demo/package.json +37 -0
- package/demo/public/vite.svg +1 -0
- package/demo/src/App.tsx +412 -0
- package/demo/src/main.jsx +9 -0
- package/demo/src/rac.css +754 -0
- package/demo/src/shake.js +11 -0
- package/demo/src/slideDown.jsx +35 -0
- package/demo/vite.config.js +7 -0
- package/dist/index.cjs.js +6 -9
- package/dist/index.css +1 -1
- package/dist/index.es.js +714 -609
- package/index.d.ts +10 -1
- package/package.json +3 -2
- package/src/option.jsx +5 -1
- package/src/select.css +7 -0
- package/src/select.jsx +72 -39
- package/src/useSelect.jsx +77 -8
- package/src/useSelectLogic.jsx +163 -174
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import {CSSTransition} from 'react-transition-group'
|
|
2
|
+
import {useRef} from 'react'
|
|
3
|
+
|
|
4
|
+
function SlideDown({visibility, children, duration = 300}) {
|
|
5
|
+
const nodeRef = useRef(null)
|
|
6
|
+
|
|
7
|
+
return(
|
|
8
|
+
<CSSTransition
|
|
9
|
+
in={visibility}
|
|
10
|
+
timeout={300}
|
|
11
|
+
classNames='slideDown'
|
|
12
|
+
unmountOnExit
|
|
13
|
+
nodeRef={nodeRef}
|
|
14
|
+
onEnter={() => (nodeRef.current.style.height = '0px')}
|
|
15
|
+
onEntering={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
|
|
16
|
+
onEntered={() => (nodeRef.current.style.height = 'auto')}
|
|
17
|
+
onExit={() => (nodeRef.current.style.height = nodeRef.current.scrollHeight + 'px')}
|
|
18
|
+
onExiting={() => (nodeRef.current.style.height = '0px')}
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
ref={nodeRef}
|
|
22
|
+
style={{
|
|
23
|
+
overflow: 'hidden',
|
|
24
|
+
transition: `height ${duration}ms ease`
|
|
25
|
+
}}
|
|
26
|
+
className='slideDown-enter-done'
|
|
27
|
+
tabIndex={-1}
|
|
28
|
+
>
|
|
29
|
+
{children}
|
|
30
|
+
</div>
|
|
31
|
+
</CSSTransition>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export default SlideDown
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const n=require("react"),xe=require("react-transition-group");var ne={exports:{}},re={};var pe;function Ce(){if(pe)return re;pe=1;var t=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function u(a,p,d){var y=null;if(d!==void 0&&(y=""+d),p.key!==void 0&&(y=""+p.key),"key"in p){d={};for(var _ in p)_!=="key"&&(d[_]=p[_])}else d=p;return p=d.ref,{$$typeof:t,type:a,key:y,ref:p!==void 0?p:null,props:d}}return re.Fragment=l,re.jsx=u,re.jsxs=u,re}var te={};var ye;function Ae(){return ye||(ye=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===j?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case P:return"Profiler";case A:return"StrictMode";case G:return"Suspense";case I:return"SuspenseList";case b:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case f:return e.displayName||"Context";case V:return(e._context.displayName||"Context")+".Consumer";case D:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case M:return s=e.displayName||null,s!==null?s:t(e.type)||"Memo";case Y:s=e._payload,e=e._init;try{return t(e(s))}catch{}}return null}function l(e){return""+e}function u(e){try{l(e);var s=!1}catch{s=!0}if(s){s=console;var r=s.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),l(e)}}function a(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var s=t(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function p(){var e=O.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function y(e){if(v.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function _(e,s){function r(){X||(X=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function E(){var e=t(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function N(e,s,r,o,m,w){var g=r.ref;return e={$$typeof:R,type:e,key:s,props:r,_owner:o},(g!==void 0?g:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:m}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:w}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function q(e,s,r,o,m,w){var g=s.children;if(g!==void 0)if(o)if(U(g)){for(o=0;o<g.length;o++)z(g[o]);Object.freeze&&Object.freeze(g)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else z(g);if(v.call(s,"key")){g=t(e);var $=Object.keys(s).filter(function(H){return H!=="key"});o=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",T[g+o]||($=0<$.length?"{"+$.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%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.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
${
|
|
11
|
-
${!O||n?"rac-disabled-style":""}
|
|
12
|
-
${l?"rac-loading-style":""}
|
|
13
|
-
${E?"rac-error-style":""}`,tabIndex:r?0:-1,ref:F,role:"combobox","aria-haspopup":"listbox","aria-expanded":_,"aria-controls":ve,"aria-label":e,"aria-disabled":n||!O,...r&&{onBlur:ge,onFocus:me,onClick:ye,onKeyDown:xe},children:[m.jsxs("div",{className:`rac-select-title ${!E&&!l&&S?.type=="boolean"?S.raw?"rac-true-option":"rac-false-option":""}`,children:[m.jsx("span",{className:"rac-title-text",children:ce},ce),m.jsx(ne,{visibility:l&&!E,duration:y,children:m.jsxs("span",{className:"rac-loading-dots",children:[m.jsx("i",{}),m.jsx("i",{}),m.jsx("i",{})]})})]}),m.jsxs("div",{className:"rac-select-buttons",children:[m.jsx(ne,{visibility:ae&&O&&!n&&!l&&!E,duration:y,style:{display:"grid"},children:be(C,{className:"rac-select-cancel",onClick:p=>K(p)})}),m.jsx(ne,{visibility:r,duration:y,style:{display:"grid"},children:m.jsx("span",{className:`rac-select-arrow-wrapper ${_?"--open":""}`,children:be(A,{className:"rac-select-arrow-wrapper"})})})]}),m.jsx(Ne,{visibility:_,selectRef:F,onAnimationDone:()=>ie(!0),unmount:t,duration:y,easing:R,offset:v,animateOpacity:k,children:m.jsx("div",{className:"rac-select-list",role:"listbox","aria-label":"Options",children:we})})]})]})}),se=t=>t?typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(se).join(" ").replace(/\s+/g," ").trim():o.isValidElement(t)?se(t.props.children):"":"";function Ie({value:t,id:s,className:i,children:u,disabled:b}){const a=o.useContext(he);return o.useEffect(()=>{if(!a)return;const y=se(u),R={id:String(s??oe(String(y))),value:t!==void 0?t:y,label:typeof u=="string"?u:String(t??s),jsx:u,className:i,disabled:!!b};return a.registerOption(R),()=>a.unregisterOption(R.id)},[s,t,u,i,b]),null}exports.Option=Ie;exports.Select=Oe;
|
|
6
|
+
<%s key={someKey} {...props} />`,o,g,$,g),T[g+o]=!0)}if(g=null,r!==void 0&&(u(r),g=""+r),y(s)&&(u(s.key),g=""+s.key),"key"in s){r={};for(var L in s)L!=="key"&&(r[L]=s[L])}else r=s;return g&&_(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),N(e,g,r,p(),m,w)}function z(e){F(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===Y&&(e._payload.status==="fulfilled"?F(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function F(e){return typeof e=="object"&&e!==null&&e.$$typeof===R}var C=n,R=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),f=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),I=Symbol.for("react.suspense_list"),M=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),b=Symbol.for("react.activity"),j=Symbol.for("react.client.reference"),O=C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,v=Object.prototype.hasOwnProperty,U=Array.isArray,J=console.createTask?console.createTask:function(){return null};C={react_stack_bottom_frame:function(e){return e()}};var X,Z={},i=C.react_stack_bottom_frame.bind(C,d)(),x=J(a(d)),T={};te.Fragment=S,te.jsx=function(e,s,r){var o=1e4>O.recentlyCreatedOwnerStacks++;return q(e,s,r,!1,o?Error("react-stack-top-frame"):i,o?J(a(e)):x)},te.jsxs=function(e,s,r){var o=1e4>O.recentlyCreatedOwnerStacks++;return q(e,s,r,!0,o?Error("react-stack-top-frame"):i,o?J(a(e)):x)}})()),te}var Ee;function Pe(){return Ee||(Ee=1,process.env.NODE_ENV==="production"?ne.exports=Ce():ne.exports=Ae()),ne.exports}var h=Pe();const Ie=({className:t="",...l})=>h.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",...l,children:h.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"})}),Oe=({className:t="",...l})=>h.jsx("svg",{className:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...l,children:h.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"})}),me=n.createContext(null),le=(t,l="invalid-option",u="")=>{const a=u?u.replace(/:/g,""):"";if(typeof t!="string"||!t.trim())return a?`${l}-${a}`:`${l}-${Math.random().toString(36).slice(2,8)}`;const p=t.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return p?p||`${l}-${Math.random().toString(36).slice(2,8)}`:a?`${l}-${a}`:`${l}-${Math.random().toString(36).slice(2,8)}`};function Le({disabled:t,isOpen:l,setIsOpen:u,options:a,selectOption:p,selected:d,hasMore:y,loadMore:_,loadButton:E,loadButtonText:N,setLoadingTitle:q,loadOffset:z,loadAhead:F}){const C=n.useRef(!1),R=n.useRef(0),[k,S]=n.useState(-1),A=n.useRef(!1),P=n.useRef(a?.length||0);n.useEffect(()=>{a&&a.length!==P.current&&(A.current=!1,P.current=a.length,E&&q(N))},[a]);const V=n.useCallback(()=>{!y||A.current||(A.current=!0,_())},[y,_]),f=n.useCallback(b=>{if(E||!y||A.current)return;const{scrollTop:j,scrollHeight:O,clientHeight:v}=b.currentTarget,U=z;O-j<=v+U&&V()},[E,y,V]);n.useEffect(()=>{if(!E&&l&&y&&k>=0){const b=F;k>=a.length-b&&V()}},[E,k,l,y,a.length,V]),n.useEffect(()=>{const b=()=>{R.current=Date.now()};return window.addEventListener("focus",b),()=>window.removeEventListener("focus",b)},[]),n.useEffect(()=>{if(l){if(k>=0&&k<a.length)return;let b=-1;if(d){const j=a.findIndex(O=>O.id===d.id&&!O.disabled);j>=0&&(b=j)}b===-1&&(b=a.findIndex(j=>!j.disabled)),S(b)}else S(-1)},[l,a]);const D=n.useCallback(b=>{b.currentTarget.contains(b.relatedTarget)||u(!1)},[u]),G=n.useCallback(()=>{t||document.hidden||Date.now()-R.current<100||l||(u(!0),C.current=!0,setTimeout(()=>{C.current=!1},200))},[t,l,u]),I=n.useCallback(b=>{t||b.target.closest&&b.target.closest(".rac-select-cancel")||C.current||u(!l)},[t,l,u]),M=(b,j)=>{const O=J=>J&&!J.disabled&&!J.loading;if(!a.some(O))return-1;let v=b,U=0;do{if(v+=j,v>=a.length){if(y&&!E)return b;v=0}if(v<0){if(y&&!E)return b;v=a.length-1}U++}while(!O(a[v])&&U<=a.length);return v},Y=n.useCallback(b=>{if(!t)switch(b.key){case"Enter":case" ":b.preventDefault(),l?k!==-1&&a[k]&&p(a[k],b):u(!0);break;case"Escape":b.preventDefault(),u(!1);break;case"ArrowDown":b.preventDefault(),l?S(j=>M(j,1)):u(!0);break;case"ArrowUp":b.preventDefault(),l?S(j=>M(j,-1)):u(!0);break;case"Tab":l&&u(!1);break}},[t,l,u,k,a,p]);return n.useMemo(()=>({handleBlur:D,handleFocus:G,handleToggle:I,handleKeyDown:Y,highlightedIndex:k,setHighlightedIndex:S,handleListScroll:f}),[D,G,I,Y,k,S])}function De({options:t=[],jsxOptions:l=[],value:u,defaultValue:a=void 0,onChange:p,disabled:d=!1,loading:y=!1,error:_=!1,placeholder:E="Choose option",emptyText:N="No options",disabledText:q="Disabled",loadingText:z="Loading",errorText:F="Failed to load",disabledOption:C="Disabled option",emptyOption:R="Empty option",invalidOption:k="Invalid option",setVisibility:S,hasMore:A,loadButton:P,setLoadingTitle:V,loadingTitle:f,loadMoreText:D,loadMore:G,childrenFirst:I}){const M=n.useId(),Y=u!==void 0,[b,j]=n.useState(null),O=i=>!i||typeof i!="object"||Array.isArray(i)?!1:"id"in i||"value"in i||"name"in i||"label"in i||"disabled"in i,v=n.useMemo(()=>{const i=[],x=(r,o,m)=>{let w=m?.id??m?.value??o??r;if(typeof o=="function"){i.push({key:`invalid-${i.length}`,value:o,userId:null,disabled:!0,invalid:!0,label:k,original:m});return}if(o===""){i.push({key:`empty-str-${i.length}`,value:"",userId:null,disabled:!0,label:R,original:m});return}if(o==null){i.push({key:`empty-${i.length}`,value:null,userId:null,disabled:!0,label:R,original:m});return}if(typeof o=="number"||typeof o=="boolean"){i.push({key:`${typeof o}-${o}-${i.length}`,value:o,userId:w,label:String(o),original:m});return}else i.push({key:r??`opt-${i.length}`,value:o,userId:w,label:String(o??r),original:m})};Array.isArray(t)?t.forEach((r,o)=>{if(r&&typeof r=="object"&&Object.keys(r).length===1&&r.disabled===!0)i.push({key:`dis-${o}`,value:null,userId:null,disabled:!0,label:C,original:r});else if(O(r)){const m=r.id??(typeof r.value!="object"?r.value:r.label??r.name??r.value);let w=r.name||r.label||r.id||r.value;if(w==null||w===""){const L=Object.entries(r).find(([H,Q])=>H!=="disabled"&&Q!==null&&Q!==void 0&&Q!=="");L&&(w=L[1])}const g=w==null||w==="",$=g?R:String(w);i.push({key:r.id??r.value??r.name??`opt-${o}`,value:r.value!==void 0?r.value:r.id!==void 0?r.id:r,userId:m,disabled:g||!!r.disabled,label:$,original:r})}else r&&typeof r=="object"&&!Array.isArray(r)?Object.entries(r).forEach(([m,w])=>x(m,w,w)):x(r,r,r)}):typeof t=="object"&&t!==null&&Object.entries(t).forEach(([r,o])=>x(r,o,o));const T=i.map((r,o)=>({id:`${M}-opt-${o}`,userId:r.userId,name:String(r.label),raw:r.value,original:r.original,disabled:r.disabled,invalid:r.invalid,type:typeof r.value=="boolean"?"boolean":"normal"})),e=l.map((r,o)=>{const m=r.value===null||r.value===void 0,w=r.label===null||r.label===void 0||r.label==="",g=m&&w;return{...r,id:`jsx-${M.replace(/:/g,"")}-${r.id}-${o}`,userId:r.id,raw:r.value,original:r.value,name:g?R:r.label,disabled:r.disabled||g,type:typeof r.value=="boolean"?"boolean":"normal"}}),s=I?[...e,...T]:[...T,...e];if(A&&P){const r=f===D;s.push({id:"special-load-more-id",name:f,loadMore:!0,loading:r,type:"special"})}return s},[t,l,M,R,C,A,P,f,D]),U=n.useCallback(i=>{if(i==null)return null;const x=v.find(T=>T.original===i||T.raw===i);if(x)return x.id;if(typeof i=="object")try{const T=JSON.stringify(i),e=v.find(s=>s.original&&typeof s.original=="object"&&JSON.stringify(s.original)===T);if(e)return e.id}catch{}return v.find(T=>T.userId===i)?.id??null},[v]);n.useEffect(()=>{const i=Y?u:a,x=v.find(e=>e.id===b);x&&(x.original===i||x.raw===i||x.userId===i)||j(U(i))},[u,a,Y,v,U]);const J=n.useMemo(()=>v.find(i=>i.id===b)??null,[b,v]),X=n.useCallback((i,x)=>{if(i.disabled||i.loadMore){x?.stopPropagation(),x?.preventDefault(),f!==D&&(V(D),G());return}j(i.id),p?.(i.original,i.userId),S(!1)},[p,S]),Z=n.useCallback(()=>{j(null),p?.(null,null)},[p]);return{normalizedOptions:v,selected:J,selectOption:X,clear:Z,hasOptions:v.length>0,active:!_&&!y&&!d&&v.length>0,selectedValue:u??a,placeholder:E,emptyText:N,disabledText:q,loadingText:z,errorText:F,disabledOption:C,emptyOption:R,invalidOption:k,disabled:d,loading:y,error:_}}function Fe({visibility:t,children:l,selectRef:u,onAnimationDone:a,unmount:p=!0,duration:d,easing:y,offset:_,animateOpacity:E}){const N=n.useRef(null),[q,z]=n.useState(0);n.useEffect(()=>{if(!u?.current)return;z(u.current.offsetHeight);const D=new ResizeObserver(G=>{for(let I of G)z(I.target.offsetHeight)});return D.observe(u.current),()=>D.disconnect()},[u]);const F=`height ${d}ms ${y}${E?`, opacity ${d}ms ${y}`:""}`,C={position:"absolute",top:`calc(100% + ${_}px)`,left:"0",width:"100%",overflow:"hidden",marginTop:"2px",zIndex:"1",height:t?"auto":"0px",opacity:E?t?1:0:1,pointerEvents:t?"all":"none",visibility:q?"visible":"hidden"},R=n.useCallback(()=>{const f=N.current;f&&(f.style.height="0px",E&&(f.style.opacity="0"),f.style.transition="")},[E]),k=n.useCallback(()=>{const f=N.current;f&&(f.style.transition=F,f.style.height=`${f.scrollHeight}px`,E&&(f.style.opacity="1"))},[F,E]),S=n.useCallback(()=>{const f=N.current;f&&(f.style.height="auto",f.style.transition="",a&&a())},[a]),A=n.useCallback(()=>{const f=N.current;f&&(f.style.height=`${f.scrollHeight}px`,E&&(f.style.opacity="1"),f.offsetHeight,f.style.transition=F)},[F,E]),P=n.useCallback(()=>{const f=N.current;f&&(f.style.height="0px",E&&(f.style.opacity="0"))},[E]),V=n.useCallback(()=>{const f=N.current;f&&(f.style.transition="")},[]);return h.jsx(xe.CSSTransition,{in:t,timeout:d,classNames:"rac-options",unmountOnExit:p,nodeRef:N,onEnter:R,onEntering:k,onEntered:S,onExit:A,onExiting:P,onExited:V,children:h.jsx("div",{ref:N,className:"rac-options",style:C,children:l})})}const Ye=n.memo(Fe,(t,l)=>t.visibility===l.visibility&&t.duration===l.duration&&t.easing===l.easing&&t.offset===l.offset&&t.animateOpacity===l.animateOpacity&&t.selectRef===l.selectRef&&t.children===l.children);function se({visibility:t,children:l,duration:u=300,unmount:a,style:p}){const d=n.useRef(null);return h.jsx(xe.CSSTransition,{in:t,timeout:u,classNames:"rac-slide-left",unmountOnExit:!0,nodeRef:d,onEnter:()=>d.current.style.width="0px",onEntering:()=>d.current.style.width=d.current.scrollWidth+"px",onEntered:()=>d.current.style.width="auto",onExit:()=>d.current.style.width=d.current.scrollWidth+"px",onExiting:()=>d.current.style.width="0px",onExited:()=>a?.(),children:h.jsx("div",{ref:d,style:{...p,overflow:"hidden",transition:`width ${u}ms ease`},children:l})})}const ve=(t,l)=>{if(!t)return null;if(typeof t=="string")return h.jsx("img",{src:t,...l,alt:""});if(n.isValidElement(t))return n.cloneElement(t,l);if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const u=t;return h.jsx(u,{...l})}return null},Ve=n.forwardRef(({unmount:t,children:l,renderedDropdown:u,visibility:a,ownBehavior:p=!1,alwaysOpen:d=!1,duration:y=300,easing:_="ease-out",offset:E=2,animateOpacity:N=!0,style:q={},className:z="",ArrowIcon:F=Oe,ClearIcon:C=Ie,hasMore:R=!1,loadMore:k=()=>{},loadButton:S=!1,loadButtonText:A="Load more",loadMoreText:P="Loading",loadOffset:V=100,loadAhead:f=3,childrenFirst:D=!1,...G},I)=>{const[M,Y]=n.useState(S?A:P);n.useEffect(()=>{Y(S?A:P)},[S,A,P]);const b=n.useId(),j=n.useMemo(()=>b.replace(/:/g,""),[b]),[O,v]=n.useState([]),U=n.useCallback(c=>{v(W=>[...W,c])},[]),J=n.useCallback(c=>{v(W=>W.filter(B=>B.id!==c))},[]),X=n.useRef(null);n.useEffect(()=>{I&&(typeof I=="function"?I(X.current):I.current=X.current)},[I]),n.useImperativeHandle(I,()=>X.current);const[Z,i]=n.useState(!1),x=n.useMemo(()=>d?!0:p?!!a:Z,[d,p,a,Z]),T=n.useCallback(c=>{d||p||i(W=>typeof c=="function"?c(W):c)},[d,p]),{normalizedOptions:e,selected:s,selectOption:r,clear:o,hasOptions:m,active:w,selectedValue:g,disabled:$,loading:L,error:H,placeholder:Q,invalidOption:je,emptyText:ie,disabledText:oe,loadingText:ce,errorText:ue}=De({...G,setVisibility:T,jsxOptions:O,hasMore:R,loadButton:S,loadingTitle:M,loadMore:k,loadMoreText:P,setLoadingTitle:Y,childrenFirst:D}),{handleListScroll:we,handleBlur:Se,handleFocus:ke,handleToggle:Re,handleKeyDown:_e,highlightedIndex:ee,setHighlightedIndex:Te}=Le({setLoadingTitle:Y,loadButton:S,loadButtonText:A,hasMore:R,loadMore:k,disabled:$,isOpen:x,setIsOpen:T,options:e,selectOption:r,selected:s,loadOffset:V,loadAhead:f}),[fe,de]=n.useState(!1);n.useEffect(()=>{x||de(!1)},[x]),n.useEffect(()=>{(H||$||L||!m)&&T(!1)},[H,$,L,m]),n.useEffect(()=>{if(x&&fe&&ee!==-1){const c=e[ee];if(c){const W=`opt-${j}-${le(c.id)}`,B=document.getElementById(W);B&&B.scrollIntoView({block:"nearest"})}}},[ee,x,fe,e,j]);const ge=g!=null&&!(Array.isArray(g)&&g.length===0)&&!(typeof g=="object"&&Object.keys(g).length===0),be=n.useMemo(()=>{if(H)return ue;if(L)return ce;if($)return oe;if(s)return s.jsx??s.name;if(ge){const c=e.find(W=>W.raw===g);return c?c.name:typeof g=="object"&&g!==null?g.name??g.label??"Selected Object":String(g)}return m?Q:ie},[$,L,H,m,s,g,Q,ue,ce,oe,ie]),$e=`${j}-listbox`,Ne=n.useMemo(()=>e?.map((c,W)=>{const B=`opt-${j}-${le(c.id)}`;let K="rac-select-option";return c.className&&(K+=` ${c.className}`),s?.id===c.id&&(K+=" rac-selected"),W===ee&&(K+=" rac-highlighted"),(c.disabled||c.loading)&&(K+=" rac-disabled-option"),c.invalid&&(K+=" rac-invalid-option"),c.loadMore&&M==P&&(K+=" rac-loading-option"),typeof c.raw=="boolean"&&(K+=c.raw?" rac-true-option":" rac-false-option"),c.name==je&&(K+=" rac-invalid-option"),h.jsxs("div",{className:K,onClick:he=>{if(c.loading){he.stopPropagation();return}r(c,he)},onMouseEnter:()=>!c.disabled&&!c.loading&&Te(W),id:B,role:"option","aria-selected":s?.id===c.id,"aria-disabled":c.disabled||c.loading,"data-loading":c.loading,children:[c.jsx??c.name,c.loading&&h.jsxs("span",{className:"rac-loading-dots",children:[h.jsx("i",{}),h.jsx("i",{}),h.jsx("i",{})]})]},c.id)}),[e,r,j,s,ee]);return h.jsxs(me.Provider,{value:{registerOption:U,unregisterOption:J},children:[l,u,h.jsxs("div",{style:{"--rac-duration":`${y}ms`,...q},className:`rac-select
|
|
7
|
+
${z}
|
|
8
|
+
${!m||$?"rac-disabled-style":""}
|
|
9
|
+
${L?"rac-loading-style":""}
|
|
10
|
+
${H?"rac-error-style":""}`,tabIndex:w?0:-1,ref:X,role:"combobox","aria-haspopup":"listbox","aria-expanded":x,"aria-controls":$e,"aria-label":Q,"aria-disabled":$||!m,...w&&{onBlur:Se,onFocus:ke,onClick:Re,onKeyDown:_e},children:[h.jsxs("div",{className:`rac-select-title ${!H&&!L&&s?.type=="boolean"?s.raw?"rac-true-option":"rac-false-option":""}`,children:[h.jsx("span",{className:"rac-title-text",children:be},be),h.jsx(se,{visibility:L&&!H,duration:y,children:h.jsxs("span",{className:"rac-loading-dots",children:[h.jsx("i",{}),h.jsx("i",{}),h.jsx("i",{})]})})]}),h.jsxs("div",{className:"rac-select-buttons",children:[h.jsx(se,{visibility:ge&&m&&!$&&!L&&!H,duration:y,style:{display:"grid"},children:ve(C,{className:"rac-select-cancel",onMouseDown:c=>{c.preventDefault(),c.stopPropagation()},onClick:o})}),h.jsx(se,{visibility:w,duration:y,style:{display:"grid"},children:h.jsx("span",{className:`rac-select-arrow-wrapper ${x?"--open":""}`,children:ve(F,{className:"rac-select-arrow-wrapper"})})})]}),h.jsx(Ye,{visibility:x,selectRef:X,onAnimationDone:()=>de(!0),unmount:t,duration:y,easing:_,offset:E,animateOpacity:N,children:h.jsxs("div",{onScroll:we,tabIndex:"-1",className:"rac-select-list",role:"listbox","aria-label":"Options",children:[Ne,!S&&R?h.jsxs("div",{onClick:c=>c.stopPropagation(),onMouseEnter:c=>c.preventDefault(),className:"rac-select-option rac-disabled-option rac-loading-option",children:[h.jsx("span",{className:"rac-loading-option-title",children:"Loading"}),h.jsxs("span",{className:"rac-loading-dots",children:[h.jsx("i",{}),h.jsx("i",{}),h.jsx("i",{})]})]}):null]})})]})]})}),ae=t=>t?typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(ae).join(" ").replace(/\s+/g," ").trim():n.isValidElement(t)?ae(t.props.children):"":"";function He({value:t,id:l,className:u,children:a,disabled:p}){const d=n.useContext(me);return n.useEffect(()=>{if(!d)return;const y=ae(a),_=typeof a=="string"&&a!==""?a:y||String(t??l??""),E={id:String(l??le(String(y))),value:t!==void 0?t:y,label:_,jsx:a,className:u,disabled:!!p};return d.registerOption(E),()=>d.unregisterOption(E.id)},[l,t,a,u,p]),null}exports.Option=He;exports.Select=Ve;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}.rac-select{--rac-duration-fast: calc(var(--rac-duration) * .5);--rac-duration-base: var(--rac-duration);--rac-duration-slow: calc(var(--rac-duration) * 1.3);--rac-base-red: #e7000b;--rac-base-green: #4caf50;--rac-base-yellow: #ffc107;--rac-select-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-color: CanvasText;--rac-select-border: 2px solid color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-border-error: 2px solid color-mix(in srgb, var(--rac-base-red), CanvasText 15%);--rac-select-height: 2em;--rac-select-padding: 0em .5em;--rac-disabled-opacity: .75;--rac-title-anim-shift: 4px;--rac-title-anim-entry-ease: cubic-bezier(.34, 1.56, .64, 1);--rac-dots-height: 3px;--rac-dots-width: 3px;--rac-dots-color: currentColor;--rac-dots-gap: 3px;--rac-dots-padding-left: .25em;--rac-dots-align: end;--rac-dots-animation-duration: 1.4s;--rac-dots-animation-delay-1: 0s;--rac-dots-animation-delay-2: .2s;--rac-dots-animation-delay-3: .4s;--rac-arrow-height: 1em;--rac-arrow-width: 1em;--rac-arrow-padding: 1px 0 2px;--rac-cancel-height: .9em;--rac-cancel-width: .9em;--rac-scroll-color: color-mix(in srgb, CanvasText 10%, Canvas);--rac-scroll-track: color-mix(in srgb, CanvasText 5%, Canvas);--rac-scroll-padding-top: .5em;--rac-scroll-padding-bottom: .5em;--rac-option-hover: color-mix(in srgb, CanvasText 6%, Canvas);--rac-option-highlight: color-mix(in srgb, CanvasText 10%, Canvas);--rac-option-selected: color-mix(in srgb, CanvasText 14%, Canvas);--rac-list-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-list-color: CanvasText;--rac-list-max-height: 250px;--rac-option-padding: .5em;--rac-disabled-option-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-invalid-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-true-option-color: color-mix(in srgb, var(--rac-base-green), CanvasText 10%);--rac-false-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-warning-option-color: color-mix(in srgb, var(--rac-base-yellow), CanvasText 10%);background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);height:var(--rac-select-height);transition:border-color var(--rac-duration-base);justify-content:space-between;box-sizing:border-box;position:relative;cursor:pointer;display:flex}.rac-loading-style,.rac-disabled-style{opacity:var(--rac-disabled-opacity);transition:border-color var(--rac-duration-base),filter var(--rac-duration-base),opacity var(--rac-duration-base);cursor:wait}.rac-disabled-style{cursor:not-allowed}.rac-error-style{border:var(--rac-select-border-error);cursor:help}.rac-select-title{display:flex;align-items:center}.rac-title-text{display:block;animation:rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease)}@keyframes rac-fade-in{0%{opacity:0;transform:translateY(var(--rac-title-anim-shift))}to{opacity:1;transform:translateY(0)}}.rac-loading-dots{display:inline-flex;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);align-items:var(--rac-dots-align)}.rac-loading-dots i{width:var(--rac-dots-height);height:var(--rac-dots-width);background:var(--rac-dots-color);border-radius:50%;animation:blink var(--rac-dots-animation-duration) infinite both}.rac-loading-dots i:nth-child(1){animation-delay:var(--rac-dots-animation-delay-1)}.rac-loading-dots i:nth-child(2){animation-delay:var(--rac-dots-animation-delay-2)}.rac-loading-dots i:nth-child(3){animation-delay:var(--rac-dots-animation-delay-3)}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}.rac-select-buttons{display:flex;align-items:center}.rac-select-cancel{height:var(--rac-cancel-height);width:var(--rac-cancel-width);transition:opacity var(--rac-duration-fast),border-color var(--rac-duration-fast)}.rac-select-arrow-wrapper{display:block;height:var(--rac-arrow-height);width:var(--rac-arrow-width);padding:var(--rac-arrow-padding);will-change:transform;transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),padding var(--rac-duration-fast);transform-origin:50% 50%;transform:translateZ(0)}.rac-select-arrow-wrapper.--open{transform:rotate(180deg)}.rac-select-arrow,.rac-select-cancel{object-fit:contain}.rac-select-list{background-color:var(--rac-list-background);color:var(--rac-list-color);max-height:var(--rac-list-max-height);overflow-y:auto;scrollbar-color:var(--rac-scroll-color) var(--rac-scroll-track);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:var(--rac-scroll-padding-top);scroll-padding-bottom:var(--rac-scroll-padding-bottom);z-index:1;transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{padding:var(--rac-option-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1)}.rac-select-option:not(.rac-disabled-option):hover{background-color:var(--rac-option-hover)}.rac-select-option.rac-highlighted{background-color:var(--rac-option-highlight)}.rac-select-option.rac-selected,.rac-select-option.rac-selected.rac-highlighted{background-color:var(--rac-option-selected)}.rac-disabled-option{cursor:not-allowed;color:var(--rac-disabled-option-color)}.rac-invalid-option{color:var(--rac-invalid-option-color)}.rac-true-option{color:var(--rac-true-option-color)}.rac-false-option{color:var(--rac-false-option-color)}
|
|
1
|
+
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}.rac-select{--rac-duration-fast: calc(var(--rac-duration) * .5);--rac-duration-base: var(--rac-duration);--rac-duration-slow: calc(var(--rac-duration) * 1.3);--rac-base-red: #e7000b;--rac-base-green: #4caf50;--rac-base-yellow: #ffc107;--rac-select-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-color: CanvasText;--rac-select-border: 2px solid color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-border-error: 2px solid color-mix(in srgb, var(--rac-base-red), CanvasText 15%);--rac-select-height: 2em;--rac-select-padding: 0em .5em;--rac-disabled-opacity: .75;--rac-title-anim-shift: 4px;--rac-title-anim-entry-ease: cubic-bezier(.34, 1.56, .64, 1);--rac-dots-height: 3px;--rac-dots-width: 3px;--rac-dots-color: currentColor;--rac-dots-gap: 3px;--rac-dots-padding-left: .25em;--rac-dots-align: end;--rac-dots-animation-duration: 1.4s;--rac-dots-animation-delay-1: 0s;--rac-dots-animation-delay-2: .2s;--rac-dots-animation-delay-3: .4s;--rac-arrow-height: 1em;--rac-arrow-width: 1em;--rac-arrow-padding: 1px 0 2px;--rac-cancel-height: .9em;--rac-cancel-width: .9em;--rac-scroll-color: color-mix(in srgb, CanvasText 10%, Canvas);--rac-scroll-track: color-mix(in srgb, CanvasText 5%, Canvas);--rac-scroll-padding-top: .5em;--rac-scroll-padding-bottom: .5em;--rac-option-hover: color-mix(in srgb, CanvasText 6%, Canvas);--rac-option-highlight: color-mix(in srgb, CanvasText 10%, Canvas);--rac-option-selected: color-mix(in srgb, CanvasText 14%, Canvas);--rac-list-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-list-color: CanvasText;--rac-list-max-height: 250px;--rac-option-padding: .5em;--rac-option-min-height: 1em;--rac-disabled-option-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-invalid-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-true-option-color: color-mix(in srgb, var(--rac-base-green), CanvasText 10%);--rac-false-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-warning-option-color: color-mix(in srgb, var(--rac-base-yellow), CanvasText 10%);--rac-loading-option-opacity: .75;background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);height:var(--rac-select-height);transition:border-color var(--rac-duration-base);justify-content:space-between;box-sizing:border-box;position:relative;cursor:pointer;display:flex}.rac-loading-style,.rac-disabled-style{opacity:var(--rac-disabled-opacity);transition:border-color var(--rac-duration-base),filter var(--rac-duration-base),opacity var(--rac-duration-base);cursor:wait}.rac-disabled-style{cursor:not-allowed}.rac-error-style{border:var(--rac-select-border-error);cursor:help}.rac-select-title{display:flex;align-items:center}.rac-title-text{display:block;animation:rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease)}@keyframes rac-fade-in{0%{opacity:0;transform:translateY(var(--rac-title-anim-shift))}to{opacity:1;transform:translateY(0)}}.rac-loading-dots{display:inline-flex;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);align-items:var(--rac-dots-align)}.rac-loading-dots i{width:var(--rac-dots-height);height:var(--rac-dots-width);background:var(--rac-dots-color);border-radius:50%;animation:blink var(--rac-dots-animation-duration) infinite both}.rac-loading-dots i:nth-child(1){animation-delay:var(--rac-dots-animation-delay-1)}.rac-loading-dots i:nth-child(2){animation-delay:var(--rac-dots-animation-delay-2)}.rac-loading-dots i:nth-child(3){animation-delay:var(--rac-dots-animation-delay-3)}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}.rac-select-buttons{display:flex;align-items:center}.rac-select-cancel{height:var(--rac-cancel-height);width:var(--rac-cancel-width);transition:opacity var(--rac-duration-fast),border-color var(--rac-duration-fast)}.rac-select-arrow-wrapper{display:block;height:var(--rac-arrow-height);width:var(--rac-arrow-width);padding:var(--rac-arrow-padding);will-change:transform;transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),padding var(--rac-duration-fast);transform-origin:50% 50%;transform:translateZ(0)}.rac-select-arrow-wrapper.--open{transform:rotate(180deg)}.rac-select-arrow,.rac-select-cancel{object-fit:contain}.rac-select-list{background-color:var(--rac-list-background);color:var(--rac-list-color);max-height:var(--rac-list-max-height);overflow-y:auto;scrollbar-color:var(--rac-scroll-color) var(--rac-scroll-track);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:var(--rac-scroll-padding-top);scroll-padding-bottom:var(--rac-scroll-padding-bottom);z-index:1;transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{min-height:var(--rac-option-min-height);padding:var(--rac-option-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1)}.rac-select-option:not(.rac-disabled-option):hover{background-color:var(--rac-option-hover)}.rac-select-option.rac-highlighted{background-color:var(--rac-option-highlight)}.rac-select-option.rac-selected,.rac-select-option.rac-selected.rac-highlighted{background-color:var(--rac-option-selected)}.rac-disabled-option{cursor:not-allowed;color:var(--rac-disabled-option-color)}.rac-invalid-option{color:var(--rac-invalid-option-color)}.rac-true-option{color:var(--rac-true-option-color)}.rac-false-option{color:var(--rac-false-option-color)}.rac-loading-option{cursor:wait}
|