react-animated-select 0.5.6 → 0.6.0
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 +17 -15
- package/dist/index.cjs.js +12 -10
- package/dist/index.css +1 -1
- package/dist/index.es.js +1265 -1121
- package/index.d.ts +3 -0
- package/package.json +8 -4
- package/.github/workflows/publish.yml +0 -32
- package/demo/README.md +0 -16
- package/demo/eslint.config.js +0 -29
- package/demo/index.html +0 -13
- package/demo/package-lock.json +0 -3619
- package/demo/package.json +0 -35
- package/demo/public/vite.svg +0 -1
- package/demo/src/App.tsx +0 -437
- package/demo/src/main.jsx +0 -9
- package/demo/src/rac.css +0 -746
- package/demo/src/shake.js +0 -11
- package/demo/src/slideDown.jsx +0 -35
- package/demo/vite.config.js +0 -7
- package/src/SelectJSX.jsx +0 -300
- package/src/animated.jsx +0 -80
- package/src/getText.jsx +0 -11
- package/src/icons.jsx +0 -43
- package/src/index.js +0 -5
- package/src/makeId.jsx +0 -21
- package/src/optgroup.jsx +0 -36
- package/src/option.jsx +0 -50
- package/src/options.jsx +0 -222
- package/src/select.css +0 -367
- package/src/select.jsx +0 -343
- package/src/selectContext.js +0 -3
- package/src/slideDown.jsx +0 -36
- package/src/slideLeft.jsx +0 -41
- package/src/useSelect.jsx +0 -198
- package/src/useSelectLogic.jsx +0 -415
- package/vite.config.js +0 -27
package/README.md
CHANGED
|
@@ -93,7 +93,7 @@ function App() {
|
|
|
93
93
|
|------|------|---------|-------------|
|
|
94
94
|
| `duration` | `number` | `300` | Speed of all transitions in milliseconds (mapped to CSS variable `--rac-duration`). |
|
|
95
95
|
| `easing` | `string` | `'ease-out'` | CSS transition timing function (e.g., `cubic-bezier(.4,0,.2,1)`). |
|
|
96
|
-
| `offset` | `number` | `
|
|
96
|
+
| `offset` | `number` | `1` | Vertical gap (in pixels) between the select trigger and the dropdown list. |
|
|
97
97
|
| `animateOpacity` | `boolean` | `true` | Enables or disables the fade effect during opening and closing. |
|
|
98
98
|
|
|
99
99
|
---
|
|
@@ -115,6 +115,9 @@ function App() {
|
|
|
115
115
|
| `loadButtonText` | `string` | `'Load more'` | Text displayed on the load button. |
|
|
116
116
|
| `childrenFirst` | `boolean` | `false` | Determines priority of JSX `<Option />` children over options passed via props. |
|
|
117
117
|
| `groupsClosed` | `boolean` | `false` | Default open status of groups. |
|
|
118
|
+
| `deleteInline` | `boolean` | `false` | Determines whether the delete button takes up space in the layout or overlays the option content. |
|
|
119
|
+
| `onClose` | `function` | `() => {}` | Callback triggered when select opened. |
|
|
120
|
+
| `onOpen` | `function` | `() => {}` | Callback triggered when select closed. |
|
|
118
121
|
|
|
119
122
|
---
|
|
120
123
|
|
|
@@ -179,9 +182,10 @@ The component uses CSS variables for deep styling. These are based on system col
|
|
|
179
182
|
| **Select Trigger** | | |
|
|
180
183
|
| `--rac-select-background`| `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Main background. |
|
|
181
184
|
| `--rac-select-color` | `CanvasText` | Title text color. |
|
|
185
|
+
| `--rac-select-hover| `color-mix` | Color of select hover. |
|
|
182
186
|
| `--rac-select-border` | `2px solid ...` | Default border style. |
|
|
183
187
|
| `--rac-select-border-error`| `2px solid ...` | Border style in error state. |
|
|
184
|
-
| `--rac-select-height` | `2em` | Fixed height of the select. |
|
|
188
|
+
| `--rac-select-min-height` | `2em` | Fixed minimal height of the select. |
|
|
185
189
|
| `--rac-select-padding` | `0em 0.5em` | Internal horizontal padding. |
|
|
186
190
|
| `--rac-disabled-opacity` | `0.75` | Opacity when `disabled={true}`. |
|
|
187
191
|
| `--rac-title-anim-shift` | 4px | Vertical offset for title change animation. |
|
|
@@ -230,6 +234,7 @@ The component uses CSS variables for deep styling. These are based on system col
|
|
|
230
234
|
| `--rac-group-arrow-height` | `1em` | Height of the group expand/collapse arrow icon. |
|
|
231
235
|
| `--rac-group-arrow-width` | `1em` | Width of the group expand/collapse arrow icon. |
|
|
232
236
|
| `--rac-group-arrow-padding` | `1px 0 2px` | Padding applied to the group arrow icon. |
|
|
237
|
+
| `--rac-group-container-padding-left | `1em` | Left padding for container of options in group. |
|
|
233
238
|
|
|
234
239
|
---
|
|
235
240
|
|
|
@@ -276,20 +281,17 @@ The select and its options react to internal states by applying the following cl
|
|
|
276
281
|
- `.rac-select-arrow-wrapper.--open`: Applied to the arrow icon when the dropdown is expanded.
|
|
277
282
|
|
|
278
283
|
## Change log
|
|
279
|
-
### 0.
|
|
284
|
+
### 0.6.0
|
|
280
285
|
### New Features
|
|
281
|
-
-
|
|
282
|
-
|
|
283
|
-
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
-
|
|
288
|
-
|
|
289
|
-
-
|
|
290
|
-
- **Single-Option Swap Animation**: Corrected the transition logic when switching between single options to prevent flickering or abrupt layout shifts.
|
|
291
|
-
### Type Safety
|
|
292
|
-
- **Prop Type Definitions**: Finalized the TypeScript definitions for the select component, covering all optional and mandatory props for better developer experience.
|
|
286
|
+
- **Swipe-to-Action**: You can now reveal the delete button by simply swiping an option left or right.
|
|
287
|
+
|
|
288
|
+
- **Long-Press Interaction**: A sustained press on any option triggers the Global Delete Mode, activating a shake animation and allowing for quick cleanup.
|
|
289
|
+
|
|
290
|
+
- **Layout Stability**: We’ve introduced Spacer Logic to mitigate layout shifts. This ensures that when actions are triggered, the surrounding elements remain stable.
|
|
291
|
+
|
|
292
|
+
- **Precision Sizing**: Fixed several bugs related to unstable element dimensions, ensuring consistent rendering across different screen sizes and orientations.
|
|
293
|
+
|
|
294
|
+
- **New Configuration Props**: deleteInline, onOpen and onClose.
|
|
293
295
|
|
|
294
296
|
## License
|
|
295
297
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
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 t=require("react"),We=require("react-transition-group"),cr=require("react-dom");var Ge={exports:{}},He={};var Ke;function ur(){if(Ke)return He;Ke=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function a(i,c,p){var y=null;if(p!==void 0&&(y=""+p),c.key!==void 0&&(y=""+c.key),"key"in c){p={};for(var f in c)f!=="key"&&(p[f]=c[f])}else p=c;return c=p.ref,{$$typeof:e,type:i,key:y,ref:c!==void 0?c:null,props:p}}return He.Fragment=n,He.jsx=a,He.jsxs=a,He}var Me={};var Be;function dr(){return Be||(Be=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===re?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case O:return"Fragment";case W:return"Profiler";case F:return"StrictMode";case X:return"Suspense";case Y:return"SuspenseList";case ee:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case I:return"Portal";case G:return r.displayName||"Context";case P:return(r._context.displayName||"Context")+".Consumer";case se:var u=r.render;return r=r.displayName,r||(r=u.displayName||u.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case T:return u=r.displayName||null,u!==null?u:e(r.type)||"Memo";case l:u=r._payload,r=r._init;try{return e(r(u))}catch{}}return null}function n(r){return""+r}function a(r){try{n(r);var u=!1}catch{u=!0}if(u){u=console;var x=u.error,w=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return x.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",w),n(r)}}function i(r){if(r===O)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===l)return"<...>";try{var u=e(r);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function c(){var r=q.A;return r===null?null:r.getOwner()}function p(){return Error("react-stack-top-frame")}function y(r){if(K.call(r,"key")){var u=Object.getOwnPropertyDescriptor(r,"key").get;if(u&&u.isReactWarning)return!1}return r.key!==void 0}function f(r,u){function 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)",u))}x.isReactWarning=!0,Object.defineProperty(r,"key",{get:x,configurable:!0})}function o(){var r=e(this.type);return B[r]||(B[r]=!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.")),r=this.props.ref,r!==void 0?r:null}function v(r,u,x,w,de,ye){var s=x.ref;return r={$$typeof:M,type:r,key:u,props:x,_owner:w},(s!==void 0?s:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:o}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:de}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:ye}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function E(r,u,x,w,de,ye){var s=u.children;if(s!==void 0)if(w)if(le(s)){for(w=0;w<s.length;w++)C(s[w]);Object.freeze&&Object.freeze(s)}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 C(s);if(K.call(u,"key")){s=e(r);var b=Object.keys(u).filter(function(h){return h!=="key"});w=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",m[s+w]||(b=0<b.length?"{"+b.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} />`,O,t,g,t),ae[t+O]=!0)}if(t=null,j!==void 0&&(o(j),t=""+j),v(p)&&(o(p.key),t=""+p.key),"key"in p){j={};for(var l in p)l!=="key"&&(j[l]=p[l])}else j=p;return t&&k(j,typeof r=="function"?r.displayName||r.name||"Unknown":r),R(r,t,j,u(),te,ne)}function w(r){K(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===q&&(r._payload.status==="fulfilled"?K(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function K(r){return typeof r=="object"&&r!==null&&r.$$typeof===N}var V=n,N=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),D=Symbol.for("react.fragment"),P=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),U=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),f=Symbol.for("react.activity"),F=Symbol.for("react.client.reference"),h=V.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,m=Array.isArray,S=console.createTask?console.createTask:function(){return null};V={react_stack_bottom_frame:function(r){return r()}};var M,G={},re=V.react_stack_bottom_frame.bind(V,s)(),ce=S(a(s)),ae={};we.Fragment=D,we.jsx=function(r,p,j){var O=1e4>h.recentlyCreatedOwnerStacks++;return C(r,p,j,!1,O?Error("react-stack-top-frame"):re,O?S(a(r)):ce)},we.jsxs=function(r,p,j){var O=1e4>h.recentlyCreatedOwnerStacks++;return C(r,p,j,!0,O?Error("react-stack-top-frame"):re,O?S(a(r)):ce)}})()),we}var Ie;function sr(){return Ie||(Ie=1,process.env.NODE_ENV==="production"?je.exports=tr():je.exports=nr()),je.exports}var d=sr();const Ye=({className:e="",...i})=>d.jsx("svg",{className:e,role:"button","aria-label":"Clear selection",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...i,children:d.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"})}),ir=({className:e="",...i})=>d.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...i,children:d.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"})}),ze=({className:e="",...i})=>d.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",...i,children:d.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"})}),Fe=(e,i="invalid-option",o="")=>{const a=o?o.replace(/:/g,""):"";if(typeof e!="string"||!e.trim())return a?`${i}-${a}`:`${i}-${Math.random().toString(36).slice(2,8)}`;const u=e.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return u?u||`${i}-${Math.random().toString(36).slice(2,8)}`:a?`${i}-${a}`:`${i}-${Math.random().toString(36).slice(2,8)}`},We=n.createContext(null);function ar({visibility:e,children:i,selectRef:o,onAnimationDone:a,unmount:u=!0,duration:s,easing:v,offset:k,animateOpacity:b,style:R,className:C}){const w=n.useRef(null),[K,V]=n.useState(0),[N,H]=n.useState({top:0,left:0,width:0}),D=n.useRef(N);n.useEffect(()=>{D.current=N},[N]);const P=n.useCallback(()=>{if(o?.current){const f=o.current.getBoundingClientRect(),F=window.innerHeight,h=w.current?.scrollHeight||250,x=F-f.bottom,m=x<h&&f.top>x;H({top:f.top,bottom:f.bottom,left:f.left,width:f.width,isUpward:m})}},[o]);n.useEffect(()=>{if(e)return P(),window.addEventListener("scroll",P,!0),window.addEventListener("resize",P),()=>{window.removeEventListener("scroll",P,!0),window.removeEventListener("resize",P)}},[e,P]);const z=`height var(--rac-duration) ${v}${b?`, opacity var(--rac-duration) ${v}`:""}`;n.useLayoutEffect(()=>{if(!o?.current)return;V(o.current.offsetHeight);const F=new ResizeObserver(h=>{for(let x of h)if(V(x.target.offsetHeight),e&&w.current&&o.current){const m=o.current.getBoundingClientRect(),{isUpward:S}=D.current;w.current.style.width=`${m.width}px`,w.current.style.left=`${m.left}px`,S?w.current.style.bottom=`${window.innerHeight-m.top+k}px`:w.current.style.top=`${m.bottom+k}px`}});return F.observe(o.current),()=>F.disconnect()},[o,e,k]);const T={position:"fixed","--rac-duration":`${s}ms`,"--rac-easing":v,left:`${N.left}px`,width:`${N.width}px`,overflow:"hidden",zIndex:"2147483647",height:e?"auto":"0px",opacity:b?e?1:0:1,pointerEvents:e?"all":"none",visibility:K?"visible":"hidden",boxSizing:"border-box",transformOrigin:N.isUpward?"bottom":"top",...N.isUpward?{bottom:`${window.innerHeight-N.top+k}px`,top:"auto"}:{top:`${N.bottom+k}px`,bottom:"auto"},...Object.fromEntries(Object.entries(R||{}).map(([f,F])=>[f.startsWith("--")?f:`--rac-${f.replace(/([A-Z])/g,"-$1").toLowerCase()}`,F]))},U=n.useCallback(()=>{const f=w.current;f&&(f.style.height="0px",b&&(f.style.opacity="0"),f.style.transition="")},[b]),Z=n.useCallback(()=>{const f=w.current;f&&(f.style.transition=z,f.style.height=`${f.scrollHeight}px`,b&&(f.style.opacity="1"))},[z,b]),ee=n.useCallback(()=>{const f=w.current;f&&(f.style.height="auto",f.style.transition="",a&&a())},[a]),se=n.useCallback(()=>{const f=w.current;f&&(f.style.height=`${f.scrollHeight}px`,b&&(f.style.opacity="1"),f.offsetHeight,f.style.transition=z)},[z,b]),ie=n.useCallback(()=>{const f=w.current;f&&(f.style.height="0px",b&&(f.style.opacity="0"))},[b]),q=n.useCallback(()=>{const f=w.current;f&&(f.style.transition="")},[]);return rr.createPortal(d.jsx(ve.CSSTransition,{in:e,timeout:s,classNames:"rac-options",unmountOnExit:u,nodeRef:w,onEnter:U,onEntering:Z,onEntered:ee,onExit:se,onExiting:ie,onExited:q,children:d.jsx("div",{ref:w,className:`rac-options ${C||""}`,style:{...T,"--rac-duration":`${s}ms`,"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-base":"var(--rac-duration)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)"},onMouseDown:f=>{f.preventDefault()},children:i})}),document.body)}const or=n.memo(ar,(e,i)=>e.visibility===i.visibility&&e.duration===i.duration&&e.easing===i.easing&&e.offset===i.offset&&e.animateOpacity===i.animateOpacity&&e.selectRef===i.selectRef&&e.children===i.children&&JSON.stringify(e.style)===JSON.stringify(i.style));function Re({visibility:e,children:i,duration:o=300,unmount:a,style:u}){const s=n.useRef(null);return d.jsx(ve.CSSTransition,{in:e,timeout:o,classNames:"rac-slide-left",unmountOnExit:!0,nodeRef:s,onEnter:()=>s.current.style.width="0px",onEntering:()=>s.current.style.width=s.current.scrollWidth+"px",onEntered:()=>s.current.style.width="auto",onExit:()=>s.current.style.width=s.current.scrollWidth+"px",onExiting:()=>s.current.style.width="0px",onExited:()=>a?.(),children:d.jsx("div",{ref:s,style:{...u,overflow:"hidden",transition:`width ${o}ms ease`},children:i})})}const Me=({children:e,duration:i,widthMode:o=!1,...a})=>{const u=n.useRef(null);return d.jsx(ve.CSSTransition,{nodeRef:u,timeout:i,classNames:"rac-slide-left",...a,onEnter:()=>{const s=u.current;o?s.style.width="0px":(s.style.height="0px",s.style.transform="translateY(-10px)"),s.style.opacity="0"},onEntering:()=>{const s=u.current;s.offsetHeight,o?s.style.width=s.scrollWidth+"px":(s.style.height=s.scrollHeight+"px",s.style.transform="translateY(0)"),s.style.opacity="1"},onEntered:()=>{const s=u.current;s.style.width=o?"auto":"",s.style.height=o?"":"auto",s.style.opacity="1",s.style.transform=""},onExit:()=>{const s=u.current;o?s.style.width=s.offsetWidth+"px":(s.style.height=s.offsetHeight+"px",s.style.position="absolute"),s.style.opacity="1"},onExiting:()=>{const s=u.current;o?s.style.width="0px":(s.style.height="0px",s.style.transform="translateY(10px)"),s.style.opacity="0"},children:d.jsx("div",{ref:u,style:{display:"flex",alignItems:"center",height:"100%",overflow:"hidden",whiteSpace:"nowrap",transition:`all ${i}ms ease`,top:0,left:0},children:e})})},lr=n.memo(({element:e,index:i,remove:o,renderIcon:a,DelIcon:u,normalizedOptions:s})=>{let v=null;if(e?.jsx)v=e.jsx;else if(e?.name)v=e.name;else if(e?.raw!==void 0){const R=s.find(C=>C.raw===e.raw||C.original===e.raw||C.userId===e.raw);R&&(v=R.jsx??R.name)}v==null&&(v=typeof e=="object"?e.label??e.name??e.value??"Selected item":String(e));const k=n.useCallback(R=>{R.stopPropagation(),R.preventDefault(),o(e.id)},[e.id,o]),b=n.useCallback(R=>{R.stopPropagation(),R.preventDefault()},[]);return d.jsxs("div",{className:"rac-multiple-selected-option",children:[v,a(u,{onClick:k,onMouseDown:b})]})}),cr=n.memo(({selectRef:e,selectId:i,removeOption:o,renderOptions:a,selected:u,selectedIDs:s,setSelectedIds:v,normalizedOptions:k,title:b,visibility:R,active:C,hasOptions:w,hasActualValue:K,optionsClassName:V,selectedText:N,disabled:H,loading:D,error:P,registerOption:z,unregisterOption:T,handleBlur:U,handleFocus:Z,handleToggle:ee,handleKeyDown:se,handleListScroll:ie,setAnimationFinished:q,clear:f,children:F,placeholder:h,className:x,style:m,duration:S,easing:M,offset:G,animateOpacity:re,unmount:ce,ArrowIcon:ae,ClearIcon:r,DelIcon:p,renderIcon:j,hasMore:O,loadButton:te})=>{const ne=n.useRef(null),[t,g]=n.useState(null),l=n.useRef(null);n.useLayoutEffect(()=>{const _=l.current;if(!_)return;const Q=new ResizeObserver(W=>{window.requestAnimationFrame(()=>{if(!Array.isArray(W)||!W.length)return;const fe=W[0].contentRect.height;g(fe)})});return Q.observe(_),()=>{Q.disconnect()}},[]),n.useEffect(()=>{e&&(typeof e=="function"?e(ne.current):e.current=ne.current)},[e]);const y=n.useCallback(_=>{o?o(_):v(Q=>Q.filter(W=>W.id!==_))},[o,v]),$=s?.map((_,Q)=>d.jsx(Me,{duration:S,widthMode:!0,children:d.jsx(lr,{element:_,index:Q,remove:y,renderIcon:j,DelIcon:p,normalizedOptions:k},_.id??Q)},_.id??Q));return d.jsxs(We.Provider,{value:{registerOption:z,unregisterOption:T},children:[F,d.jsxs("div",{ref:ne,style:{...m,"--rac-duration":`${S}ms`,"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-base":"var(--rac-duration)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)"},className:`rac-select
|
|
7
|
-
${
|
|
8
|
-
${
|
|
9
|
-
${
|
|
10
|
-
${
|
|
11
|
-
|
|
12
|
-
`,style:{height:t?`${t}px`:"auto",boxSizing:"content-box",overflow:"hidden"},children:d.jsx("div",{className:"rac-select-title",ref:l,children:d.jsx(ve.TransitionGroup,{component:null,children:s?.length&&!N?$:d.jsxs(Me,{duration:S,widthMode:!0,children:[d.jsx("span",{className:"rac-title-text",children:b}),d.jsx(Re,{visibility:D&&!P,duration:S,children:d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]})})]},b)})})}),d.jsxs("div",{className:"rac-select-buttons",children:[d.jsx(Re,{visibility:K&&w&&!H&&!D&&!P,duration:S,style:{display:"grid"},children:j(r,{className:"rac-select-cancel",onMouseDown:_=>{_.preventDefault(),_.stopPropagation()},onClick:f})}),d.jsx(Re,{visibility:C,duration:S,style:{display:"grid"},children:d.jsx("span",{className:`rac-select-arrow-wrapper ${R?"--open":""}`,children:j(ae,{className:"rac-select-arrow-wrapper"})})})]}),d.jsx(or,{className:V,visibility:R,selectRef:e,onAnimationDone:()=>q(!0),unmount:ce,duration:S,easing:M,offset:G,animateOpacity:re,style:{...m,"--rac-duration":`${S}ms`},children:d.jsxs("div",{onScroll:ie,tabIndex:"-1",className:"rac-select-list",role:"listbox","aria-label":"Options",children:[a,!te&&O&&d.jsxs("div",{className:"rac-select-option rac-disabled-option rac-loading-option",onClick:_=>_.stopPropagation(),children:[d.jsx("span",{className:"rac-loading-option-title",children:"Loading"}),d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]})]})]})})]})]})});function ur({disabled:e,open:i,setOpen:o,options:a=[],selectOption:u,selected:s,selectedIDs:v,multiple:k,hasMore:b,loadMore:R,loadButton:C,loadButtonText:w,setLoadingTitle:K,loadOffset:V,loadAhead:N,expandedGroups:H}){const D=n.useRef(!1),P=n.useRef(0),z=n.useRef(!1),[T,U]=n.useState(-1);n.useEffect(()=>{z.current=!1,C&&K(w)},[a.length,b,C,w,K]);const Z=n.useCallback(()=>{!b||z.current||(z.current=!0,R())},[b,R]),ee=n.useCallback(h=>{if(C||!b||z.current)return;const{scrollTop:x,scrollHeight:m,clientHeight:S}=h.currentTarget;m-x<=S+V&&Z()},[C,b,V,Z]);n.useEffect(()=>{!C&&i&&b&&T>=a.length-N&&Z()},[T,i,b,a.length,N,C,Z]),n.useEffect(()=>{const h=()=>{P.current=Date.now()};return window.addEventListener("focus",h),()=>window.removeEventListener("focus",h)},[]),n.useEffect(()=>{if(!i){U(-1);return}if(T>=0&&T<a.length&&!(!a[T]||a[T].hidden||a[T].groupHeader))return;let h=-1;if(s&&!k){const x=k?s[0]:s;x&&(h=a.findIndex(m=>m.id===x.id&&!m.disabled&&!m.hidden&&!m.groupHeader))}if(k&&v.length){const x=new Set(v.map(m=>m.id));h=a.findIndex(m=>x.has(m.id)&&!m.disabled&&!m.hidden&&!m.groupHeader)}h===-1&&(h=a.findIndex(x=>!x.disabled&&!x.hidden&&!x.groupHeader)),U(h)},[i,a,s]);const se=n.useCallback((h,x)=>{const m=G=>G&&!G?.groupHeader&&(!G?.group||H?.has(G?.group))&&!G?.disabled&&!G?.loading,S=a.length;if(S===0)return-1;let M=h;for(let G=0;G<S;G++){if(M=(M+x+S)%S,!C&&b&&(x>0&&M===0||x<0&&M===S-1))return h;if(m(a[M]))return M}return h},[a,b,C,H]),ie=n.useCallback(h=>{const x=h.relatedTarget?.closest(".rac-options");!h.currentTarget.contains(h.relatedTarget)&&!x&&o(!1)},[o]),q=n.useCallback(()=>{e||document.hidden||Date.now()-P.current<100||i||(o(!0),D.current=!0,setTimeout(()=>{D.current=!1},200))},[e,i,o]),f=n.useCallback(h=>{e||h.target.closest(".rac-select-cancel")||D.current||o(!i)},[e,i,o]),F=n.useCallback(h=>{if(!e)switch(h.key){case"Enter":case" ":h.preventDefault(),i?T!==-1&&a[T]&&u(a[T],h):o(!0);break;case"Escape":h.preventDefault(),o(!1);break;case"ArrowDown":h.preventDefault(),i?U(x=>se(x,1)):o(!0);break;case"ArrowUp":h.preventDefault(),i?U(x=>se(x,-1)):o(!0);break;case"Tab":i&&o(!1);break}},[e,i,o,T,a,u,se]);return n.useMemo(()=>({handleBlur:ie,handleFocus:q,handleToggle:f,handleKeyDown:F,highlightedIndex:T,setHighlightedIndex:U,handleListScroll:ee}),[ie,q,f,F,T,ee])}const dr=["group","disabled","options","items","children"],Ae=["name","label","id","value"],Ge=[],ke=(e,i=!1)=>{if(i&&typeof e.group=="string")return e.group;const o=Ae.find(u=>e[u]!=null&&e[u]!=="");if(o)return String(e[o]);const a=Object.entries(e).find(([u,s])=>!dr.includes(u)&&s!=null&&s!=="");return a?String(a[1]):null};function fr({options:e=Ge,jsxOptions:i=Ge,value:o,defaultValue:a,onChange:u,disabled:s=!1,loading:v=!1,error:k=!1,multiple:b=!1,placeholder:R="Choose option",emptyText:C="No options",disabledText:w="Disabled",loadingText:K="Loading",errorText:V="Failed to load",disabledOption:N="Disabled option",emptyOption:H="Empty option",invalidOption:D="Invalid option",setVisibility:P,hasMore:z,loadButton:T,setLoadingTitle:U,loadingTitle:Z,loadMoreText:ee,loadMore:se,childrenFirst:ie,groupsClosed:q}){const f=n.useId(),F=o!==void 0,[h,x]=n.useState(null),[m,S]=n.useState([]),[M,G]=n.useState(new Set),re=n.useRef(null),ce=n.useCallback(t=>{G(g=>{const l=new Set(g);return l.has(t)?l.delete(t):l.add(t),l})},[]),ae=n.useCallback((t,g,l="n",y=null,$=!1)=>{const _=`${f}-${l}-${g}`;if(t==null||t==="")return{id:_,userId:null,name:H,raw:null,disabled:!0,type:"normal",group:y,groupDisabled:$};if(typeof t=="function")return{id:_,userId:null,name:D,raw:t,disabled:!0,invalid:!0,type:"normal",group:y};if(typeof t=="object"&&!Array.isArray(t)){const Q=y||t.group||null,W=$||t.disabled===!0,fe=t.id??t.value??t.name??t.label,L=t.value!==void 0?t.value:t.id!==void 0?t.id:t;let c=ke(t)||(W?N:H);return{id:_,userId:fe,name:c,raw:L,original:t,disabled:W||c===H&&!W,type:typeof L=="boolean"?"boolean":"normal",group:Q,groupDisabled:$}}return{id:_,userId:t,name:String(t),raw:t,original:t,disabled:$,type:typeof t=="boolean"?"boolean":"normal",group:y}},[f,H,D,N]),r=n.useMemo(()=>{const t=new Map,g=[],l=i.map((c,A)=>{if(c.isGroupMarker)return{...c,type:"group-marker"};const J=!c.label&&!c.userId&&!c.value&&(c.value===void 0||c.value===null||c.value==="")&&!c.hasJsx;return{...c,id:`jsx-${c.id}`,index:A,userId:c.userId,raw:c.value,original:c.value,name:J?H:c.label||c.userId||String(c.value||""),disabled:!!c.disabled||J,type:typeof c.value=="boolean"?"boolean":"normal",group:c.group||null}});let y=0;const $=(c,A=null,J=!1,oe="0")=>{Array.isArray(c)||(c=[c]),c.forEach((Y,pe)=>{if(!Y)return;const ge=`${oe}-${pe}`,ye=typeof Y=="object"&&!Array.isArray(Y);if(ye&&("options"in Y||"group"in Y&&!Ae.some(X=>X in Y))){const X=ke(Y,!0)||"Empty group";t.has(X)||t.set(X,{disabled:!!Y.disabled,closedByDefault:!!Y.disabled||q,items:[]}),Y.options?$(Y.options,X,J||!!Y.disabled,ge):g.push({id:`empty-${X}-${ge}`,name:X,group:X,isPlaceholder:!0,type:"group-marker",index:y++})}else if(ye&&!Ae.some(X=>X in Y)&&!Y.group)Object.entries(Y).forEach(([X,be],_e)=>{const Ce=ae(be,`${ge}-${_e}`,"normal",A,J);g.push({...Ce,index:y++})});else{const X=ae(Y,ge,"normal",A,J);g.push({...X,index:y++})}})};$(e);const _=ie?[...l,...g]:[...g,...l];if(!re.current)re.current=new Map(_.map((c,A)=>[c.id,A]));else{let c=!1;if(_.forEach(A=>{re.current.has(A.id)||(c=!0)}),c){const A=new Map;_.forEach((J,oe)=>{A.set(J.id,oe)}),re.current=A}}const Q=[..._].sort((c,A)=>{const J=re.current.get(c.id)??999999,oe=re.current.get(A.id)??999999;return J-oe}),W=[],fe=new Set;Q.forEach(c=>{if(!c.group)W.push({type:"item",data:c});else if(fe.has(c.group)||(fe.add(c.group),W.push({type:"group",name:c.group})),!c.isPlaceholder&&!c.isGroupMarker){const A=t.get(c.group)||{items:[]};t.has(c.group)||t.set(c.group,A),A.items.push(c)}});const L=[];return W.forEach(c=>{if(c.type==="item")L.push(c.data);else{const A=c.name,J=t.get(A),oe=M.has(A);L.push({id:`group-header-${A}`,name:A,disabled:!!J?.disabled,groupHeader:!0,expanded:oe,type:"group",hidden:!1}),J?.items.forEach(Y=>{const pe=M.size>0?!oe:!!q;L.push({...Y,hidden:pe})})}}),z&&T&&L.push({id:"special-load-more-id",name:Z,loadMore:!0,loading:Z===ee,type:"special"}),L},[e,i,f,ae,ie,z,T,Z,ee,q,M,H]);n.useEffect(()=>{if(!r||r.length===0||M.size>0||q)return;const t=new Set;r.forEach(g=>{g.groupHeader&&!g.disabled&&t.add(g.name)}),t.size>0&&G(t)},[r,q]);const p=n.useCallback(t=>{if(t==null)return null;const g=r.find(l=>l.original===t);if(g)return g.id;if(typeof t=="object")try{const l=JSON.stringify(t);return r.find(y=>y.original&&typeof y.original=="object"&&JSON.stringify(y.original)===l)?.id??null}catch{return null}return null},[r]);n.useEffect(()=>{const t=F?o:a;if(t==null||Array.isArray(t)&&t.length===0){x(null),S([]);return}const g=l=>{const y=p(l),$=r.find(Q=>Q.id===y);if($)return $;const _=typeof l=="object"?l.id||l.value||JSON.stringify(l):String(l);return typeof l=="object"&&l!==null?{id:`virtual-${_}`,name:ke(l)||String(l.id||"Selected Object"),raw:l.value??l.id??l,original:l,userId:l.id??l.value??null,virtual:!0}:{id:`virtual-${_}`,name:String(l),raw:l,original:l,userId:l,virtual:!0}};if(b){const y=(Array.isArray(t)?t:[t]).map(g);S(y)}else{const l=Array.isArray(t)?t[0]:t,y=g(l);x($=>$===y.id?$:y.id)}},[]);const j=n.useMemo(()=>{const t=r.find(g=>g.id===h);if(t)return t;if(!b&&h?.startsWith("virtual-")){const g=F?o:a,l=Array.isArray(g)?g[0]:g;if(l)return{id:h,name:typeof l=="object"?ke(l):String(l),original:l}}return null},[h,r,b,F,o,a]),O=n.useCallback((t,g)=>{if(t.groupHeader){g?.stopPropagation(),g?.preventDefault(),t.disabled||ce(t.name);return}if(t.disabled||t.loadMore){g?.stopPropagation(),g?.preventDefault(),t.loadMore&&!t.loading&&(U(ee),se());return}if(b){if(t.disabled||t.groupHeader||t.loadMore){g?.stopPropagation(),g?.preventDefault();return}g?.stopPropagation(),g?.preventDefault();const y=m?.some($=>$.id===t.id)?m.filter($=>$.id!==t.id):[...m,t];S(y),u?.(y.map($=>$.original),y.map($=>$.userId));return}x(t.id),u?.(t.original,t.userId),P(!1)},[u,P,se,ee,U,ce]),te=n.useCallback(()=>{x(null),S([]),u?.(null,null)},[u]),ne=n.useCallback(t=>{const g=m.filter(l=>l.id!==t);S(g),u?.(g.map(l=>l.original),g.map(l=>l.userId))},[m,u]);return{normalizedOptions:r,selected:j,selectOption:O,clear:te,removeOption:ne,hasOptions:r.length>0,active:!k&&!v&&!s&&r.length>0,selectedValue:o??a,placeholder:R,emptyText:C,disabledText:w,loadingText:K,errorText:V,disabledOption:N,emptyOption:H,invalidOption:D,disabled:s,loading:v,error:k,expandedGroups:M,toggleGroup:ce,selectedIDs:m,multiple:b,setSelectedIds:S}}function gr({visibility:e,children:i,duration:o=300}){const a=n.useRef(null);return d.jsx(ve.CSSTransition,{in:e,timeout:300,classNames:"slideDown",unmountOnExit:!0,nodeRef:a,onEnter:()=>a.current.style.height="0px",onEntering:()=>a.current.style.height=a.current.scrollHeight+"px",onEntered:()=>a.current.style.height="auto",onExit:()=>a.current.style.height=a.current.scrollHeight+"px",onExiting:()=>a.current.style.height="0px",children:d.jsx("div",{ref:a,style:{overflow:"hidden",transition:`height ${o}ms ease`,paddingLeft:"1em"},className:"slideDown-enter-done",tabIndex:-1,children:i})})}const Te=(e,i)=>{if(!e)return null;if(typeof e=="string")return d.jsx("img",{src:e,...i,alt:""});if(n.isValidElement(e))return n.cloneElement(e,i);if(typeof e=="function"||typeof e=="object"&&e.$$typeof){const o=e;return d.jsx(o,{...i})}return null},hr=(e,i,o,a,u,s,v,k)=>{const b=k?.some(R=>R.id===e.id);return e.groupHeader?"rac-select-option rac-group-option":["rac-select-option",e.className,(b||a===e.id)&&"rac-selected",i===o&&"rac-highlighted",(e.disabled||e.loading)&&"rac-disabled-option",(e.invalid||e.name===v)&&"rac-invalid-option",e.loadMore&&u===s&&"rac-loading-option",typeof e.raw=="boolean"&&(e.raw?"rac-true-option":"rac-false-option")].filter(Boolean).join(" ")},pr=n.forwardRef(({unmount:e,children:i,visibility:o,ownBehavior:a=!1,alwaysOpen:u=!1,duration:s=300,easing:v="ease-out",offset:k=0,animateOpacity:b=!0,style:R={},className:C="",ArrowIcon:w=ir,ClearIcon:K=Ye,DelIcon:V=Ye,CheckIcon:N=ze,hasMore:H=!1,loadMore:D=()=>{console.warn("loadMore not implemented")},loadButton:P=!1,loadButtonText:z="Load more",loadMoreText:T="Loading",selectedText:U=void 0,loadOffset:Z=100,loadAhead:ee=3,childrenFirst:se=!1,groupsClosed:ie=!1,optionsClassName:q="",...f},F)=>{const h=n.useId(),x=n.useMemo(()=>h.replace(/:/g,""),[h]),[m,S]=n.useState([]),[M,G]=n.useState(!1),[re,ce]=n.useState(P?z:T),[ae,r]=n.useState(!1),p=n.useRef(null),j=n.useCallback(I=>{S(B=>{const le=B.findIndex(ue=>ue.id===I.id);if(le!==-1){const ue=B[le];if(ue.label===I.label&&ue.value===I.value&&ue.disabled===I.disabled&&ue.group===I.group)return B;const me=[...B];return me[le]=I,me}return[...B,I]})},[]),O=n.useCallback(I=>{S(B=>{const le=B.filter(ue=>ue.id!==I);return le.length===B.length?B:le})},[]),te=u?!0:a?!!o:M,ne=n.useCallback(I=>{u||a||G(I)},[u,a]),t=fr({...f,setVisibility:ne,jsxOptions:m,hasMore:H,loadButton:P,loadingTitle:re,loadMore:D,loadMoreText:T,setLoadingTitle:ce,childrenFirst:se,groupsClosed:ie}),{multiple:g,normalizedOptions:l,selected:y,selectOption:$,clear:_,removeOption:Q,hasOptions:W,active:fe,selectedValue:L,disabled:c,loading:A,error:J,placeholder:oe,invalidOption:Y,emptyText:pe,disabledText:ge,loadingText:ye,errorText:$e,expandedGroups:X,selectedIDs:be,setSelectedIds:_e}=t,Ce=ur({setLoadingTitle:ce,loadButton:P,loadButtonText:z,hasMore:H,loadMore:D,disabled:c,multiple:g,open:te,setOpen:ne,options:l,selectOption:$,selected:y,loadOffset:Z,loadAhead:ee,expandedGroups:X,selectedIDs:be}),{handleListScroll:Je,handleBlur:Ve,handleFocus:Ue,handleToggle:qe,handleKeyDown:Xe,highlightedIndex:xe,setHighlightedIndex:Ne}=Ce;n.useImperativeHandle(F,()=>p.current),n.useEffect(()=>{te||r(!1)},[te]),n.useEffect(()=>{(J||c||A||!W)&&ne(!1)},[J,c,A,W,ne]),n.useEffect(()=>{if(te&&ae&&xe!==-1){const I=l[xe];I&&document.getElementById(`opt-${x}-${Fe(I.id)}`)?.scrollIntoView({block:"nearest"})}},[xe,te,ae,l,x]);const Se=n.useMemo(()=>L!=null&&!(Array.isArray(L)&&L.length===0)&&!(typeof L=="object"&&Object.keys(L).length===0),[L]),Ke=n.useMemo(()=>{if(J)return $e;if(A)return ye;if(c)return ge;if(Se&&U)return U;if(y)return y.jsx??y.name;if(Se){const I=l.find(B=>B.raw===L);return I?I.name:typeof L=="object"&&L!==null?L.name??L.label??"Selected Object":String(L)}return W?oe:pe},[c,A,J,W,y,L,oe,$e,ye,ge,pe,Se,l]),Be=n.useMemo(()=>{const I=[];let B=[],le=null;const ue=l.reduce((E,de)=>(de.group&&(E[de.group]=(E[de.group]||0)+1),E),{}),me=E=>{E===null||B.length===0||(I.push(d.jsx(gr,{visibility:X.has(E),children:B},`slide-${E}`)),B=[])},Pe=(E,de)=>d.jsxs("div",{id:`opt-${x}-${Fe(E.id)}`,role:"option","aria-selected":y?.id===E.id,"aria-disabled":E.disabled||E.loading,className:hr(E,de,xe,y?.id,re,T,Y,be),onClick:he=>!E.loading&&$(E,he),onMouseEnter:()=>!E.disabled&&!E.loading&&Ne(de),children:[E.jsx??d.jsx("span",{className:"rac-option-title",children:E.name}),E.loading&&d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]}),g&&!E.disabled?d.jsx("div",{className:"rac-checkbox",children:Te(ze,{className:`
|
|
13
|
-
|
|
14
|
-
${be?.some(he=>he.id===E.id)?"--checked":""}`})}):null]},E.id);return l.forEach((E,de)=>{const he=E.groupHeader,He=!!E.group;if((he||!He&&le!==null)&&(me(le),he||(le=null)),he){le=E.name;const Ze=X.has(E.name),Qe=ue[E.name]>0;I.push(d.jsxs("div",{className:["rac-group-header",E.disabled&&"rac-disabled-group"].filter(Boolean).join(" "),onClick:er=>$(E,er),children:[d.jsx("span",{className:"rac-group-title-text",children:E.name}),d.jsx(Re,{visibility:Qe&&!E.disabled,duration:s,children:d.jsx("span",{className:`rac-group-arrow-wrapper ${Ze?"--open":""}`,children:Te(w,{className:"rac-select-arrow-wrapper"})})})]},E.id))}else He?B.push(Pe(E,de)):I.push(Pe(E,de))}),me(le),I},[l,$,x,y,xe,re,T,Y,Ne,X,w]);return d.jsx(cr,{selectedText:U,selectRef:p,selectId:x,selectedIDs:be,setSelectedIds:_e,multiple:g,removeOption:Q,optionsClassName:q,renderIcon:Te,normalizedOptions:l,renderOptions:Be,selected:y,title:Ke,visibility:te,active:fe,hasOptions:W,hasActualValue:Se,highlightedIndex:xe,animationFinished:ae,disabled:c,loading:A,error:J,setVisibility:ne,setHighlightedIndex:Ne,setAnimationFinished:r,handleBlur:Ve,handleFocus:Ue,handleToggle:qe,handleKeyDown:Xe,handleListScroll:Je,selectOption:$,clear:_,registerOption:j,unregisterOption:O,children:i,placeholder:oe,className:C,style:R,duration:s,easing:v,offset:k,animateOpacity:b,unmount:e,ArrowIcon:w,ClearIcon:K,DelIcon:V,hasMore:H,loadButton:P})}),br=n.createContext(null),Oe=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(Oe).join(" ").replace(/\s+/g," ").trim():n.isValidElement(e)?Oe(e.props.children):"":"";function xr({value:e,id:i,className:o,children:a,disabled:u,group:s}){const v=n.useContext(We),k=n.useContext(br),b=v?.registerOption,R=v?.unregisterOption,C=n.useId(),w=n.useMemo(()=>i?String(i):C.replace(/:/g,""),[i,C]);return n.useEffect(()=>{if(!b)return;const K=Oe(a),V=a!=null;let N="";return K?N=K:i!=null&&i!==""?N=String(i):e!=null&&e!==""&&(N=String(e)),b({id:w,value:e!==void 0?e:K,label:N,jsx:a,hasJsx:V,className:o,disabled:!!u,group:s||k||null}),()=>R(w)},[w,e,a,o,u,s,k,b,R]),null}exports.Option=xr;exports.Select=pr;
|
|
6
|
+
<%s key={someKey} {...props} />`,w,s,b,s),m[s+w]=!0)}if(s=null,x!==void 0&&(a(x),s=""+x),y(u)&&(a(u.key),s=""+u.key),"key"in u){x={};for(var j in u)j!=="key"&&(x[j]=u[j])}else x=u;return s&&f(x,typeof r=="function"?r.displayName||r.name||"Unknown":r),v(r,s,x,c(),de,ye)}function C(r){$(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===l&&(r._payload.status==="fulfilled"?$(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function $(r){return typeof r=="object"&&r!==null&&r.$$typeof===M}var N=t,M=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),W=Symbol.for("react.profiler"),P=Symbol.for("react.consumer"),G=Symbol.for("react.context"),se=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),l=Symbol.for("react.lazy"),ee=Symbol.for("react.activity"),re=Symbol.for("react.client.reference"),q=N.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,K=Object.prototype.hasOwnProperty,le=Array.isArray,oe=console.createTask?console.createTask:function(){return null};N={react_stack_bottom_frame:function(r){return r()}};var _,B={},ne=N.react_stack_bottom_frame.bind(N,p)(),S=oe(i(p)),m={};Me.Fragment=O,Me.jsx=function(r,u,x){var w=1e4>q.recentlyCreatedOwnerStacks++;return E(r,u,x,!1,w?Error("react-stack-top-frame"):ne,w?oe(i(r)):S)},Me.jsxs=function(r,u,x){var w=1e4>q.recentlyCreatedOwnerStacks++;return E(r,u,x,!0,w?Error("react-stack-top-frame"):ne,w?oe(i(r)):S)}})()),Me}var Ze;function fr(){return Ze||(Ze=1,process.env.NODE_ENV==="production"?Ge.exports=ur():Ge.exports=dr()),Ge.exports}var d=fr();const Qe=({className:e="",...n})=>d.jsx("svg",{className:e,role:"button","aria-label":"Clear selection",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...n,children:d.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"})}),hr=({className:e="",...n})=>d.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...n,children:d.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"})}),er=({className:e="",...n})=>d.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",...n,children:d.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"})}),Je=(e,n="invalid-option",a="")=>{const i=a?a.replace(/:/g,""):"";if(typeof e!="string"||!e.trim())return i?`${n}-${i}`:`${n}-${Math.random().toString(36).slice(2,8)}`;const c=e.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return c?c||`${n}-${Math.random().toString(36).slice(2,8)}`:i?`${n}-${i}`:`${n}-${Math.random().toString(36).slice(2,8)}`},qe=t.createContext(null),Pe=t.forwardRef(({className:e="",visibility:n,setLeaving:a,setSpacer:i,children:c,duration:p=300,unmount:y,style:f,exit:o=!0},v)=>{const E=t.useRef(null);return t.useImperativeHandle(v,()=>E.current),t.useEffect(()=>{!n&&E.current&&(E.current.style.width="0px")},[]),d.jsx(We.CSSTransition,{onEnter:()=>{E.current.style.transition="none",E.current.style.width="0px"},onEntering:()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{E.current&&(E.current.style.transition=`width ${p}ms, color ${p}ms, background-color ${p}ms`,E.current.style.width=E.current.scrollWidth+"px")})})},onEntered:()=>{E.current.style.width="auto",i?.(!1)},onExit:()=>{E.current.style.width=E.current.scrollWidth+"px",E.current.offsetHeight,a?.(!0)},onExiting:()=>E.current.style.width="0px",onExited:()=>{y?.(),a?.(!1),i?.(!1)},classNames:"rac-slide-left",unmountOnExit:o,timeout:p,nodeRef:E,in:n,children:d.jsx("div",{className:e,ref:E,style:{transition:`width ${p}ms, color ${p}ms, background-color ${p}ms`,willChange:"width",overflow:"hidden",...f},children:c})})}),gr=t.memo(({element:e,index:n,leaving:a,setLeaving:i,setSpacer:c,selectRef:p,spacer:y,delSpacer:f,setVisibility:o,setActiveHoverId:v,activeHoverId:E,swipedId:C,setSwipedId:$,deleteInline:N,remove:M,renderIcon:I,DelIcon:O,normalizedOptions:F,swiped:W,onSwipe:P,deleting:G,setDeleting:se,onRender:X,duration:Y})=>{const T=t.useRef(null),l=t.useRef(!1),ee=t.useRef(!1),re=t.useRef(0),q=t.useRef(null),K=t.useCallback(m=>{re.current=m.touches[0].clientX,l.current=!1,T.current&&clearTimeout(T.current),T.current=setTimeout(()=>{se(!0),l.current=!0,p.current?.focus(),o(!1),window.navigator.vibrate&&window.navigator.vibrate(50)},600),m.preventDefault()},[]),le=t.useCallback(m=>{T.current&&clearTimeout(T.current);const r=m.touches[0].clientX,u=re.current-r;Math.abs(u)>10&&(ee.current=!0,u>30&&!W?P(e.id):u<-30&&W&&P(null))},[e.id,W,P]),oe=t.useCallback(m=>{T.current&&clearTimeout(T.current),l.current&&m.preventDefault()},[]);let _=null;if(e?.jsx)_=e.jsx;else if(e?.name)_=e.name;else if(e?.raw!==void 0){const m=F.find(r=>r.raw===e.raw||r.original===e.raw||r.userId===e.raw);m&&(_=m.jsx??m.name)}_==null&&(_=typeof e=="object"?e.label??e.name??e.value??"Selected item":String(e));const B=t.useCallback(m=>{m.stopPropagation(),m.preventDefault()},[]),ne=t.useCallback(m=>{B(m),M(e.id),P(null)},[e.id,M,P]),S=t.useCallback(m=>{if(B(m),l.current){l.current=!1;return}if(G){ne(m);return}},[G,ne]);return t.useLayoutEffect(()=>{if(q.current&&X){const m=q.current.offsetWidth;X(m)}},[X,_]),d.jsxs(t.Fragment,{children:[d.jsxs("div",{className:`rac-multiple-selected-option ${G?"--deleting-shake":""}`,onMouseEnter:()=>v(e.id),onMouseLeave:()=>v(null),onTouchStart:K,onTouchMove:le,onTouchEnd:oe,onClick:S,ref:q,children:[_,d.jsx(Pe,{style:{backgroundColor:G||N?"transparent":"--rac-multiple-del-bg",position:G||N?"relative":"absolute"},visibility:E===e.id||C===e.id||G,className:"rac-multiple-del",setLeaving:i,setSpacer:c,duration:Y,children:I(O,{onClick:ne,onMouseDown:B})})]}),d.jsx(Pe,{visibility:!a&&!y?.state&&!E&&!C&&!G&&N&&f,className:"rac-multiple-option",style:{visibility:"hidden"},children:d.jsx("div",{style:{padding:0,marginRight:0,marginLeft:0},className:"rac-multiple-selected-option",children:I(O)})})]})}),sr=({children:e,setLeaving:n,duration:a,setSpacer:i,id:c=null,widthMode:p=!1,...y})=>{const f=t.useRef(null);return d.jsx(We.CSSTransition,{classNames:"rac-slide-left",timeout:a,nodeRef:f,unmountOnExit:!0,...y,onEnter:()=>{const o=f.current;o&&(p?o.style.width="0px":(o.style.height="0px",o.style.transform="translateY(-10px)"),o.style.opacity="0")},onEntering:()=>{const o=f.current;o.offsetHeight,p?o.style.width=o.scrollWidth+"px":(o.style.height=o.scrollHeight+"px",o.style.transform="translateY(0)"),o.style.opacity="1"},onEntered:()=>{const o=f.current;o.style.width=p?"auto":"",o.style.height=p?"":"100%",o.style.opacity="1",o.style.transform="",i?.(!1)},onExit:()=>{const o=f.current;p?o.style.width=o.offsetWidth+"px":(o.style.height=o.offsetHeight+"px",o.style.position="absolute"),o.style.opacity="1",n?.(!0)},onExiting:()=>{const o=f.current;p?o.style.width="0px":(o.style.height="0px",o.style.transform="translateY(10px)"),o.style.opacity="0"},onExited:()=>{i?.(!1),n?.(!1)},children:d.jsx("div",{ref:f,id:c,style:{transition:`all ${a}ms ease`,alignItems:"center",whiteSpace:"nowrap",overflow:"hidden",display:"flex",left:0,top:0},children:e})})},pr=t.memo(({element:e,index:n,leaving:a,setLeaving:i,selectRef:c,setVisibility:p,setActiveHoverId:y,delSpacer:f,swiped:o,swipedId:v,setSwipedId:E,onSwipe:C,activeHoverId:$,deleteInline:N,spacer:M,duration:I,normalizedOptions:O,setDeleting:F,renderIcon:W,deleting:P,DelIcon:G,remove:se,registerItemWidth:X,setSpacer:Y,...T})=>d.jsxs(t.Fragment,{children:[d.jsx(sr,{className:"rac-multiple-option",onEnter:T.onEnter,setLeaving:i,setSpacer:Y,onExit:T.onExit,duration:I,in:T.in,id:e.id,widthMode:!0,children:d.jsx(gr,{onRender:l=>X(e.id,l),normalizedOptions:O,setActiveHoverId:y,activeHoverId:$,setVisibility:p,deleteInline:N,setDeleting:F,setSwipedId:E,setLeaving:i,renderIcon:W,setSpacer:Y,selectRef:c,delSpacer:f,duration:I,deleting:P,swipedId:v,onSwipe:C,element:e,DelIcon:G,leaving:a,swiped:o,remove:se,spacer:M,index:n},e.id??n)}),M.state&&M.id===e.id&&d.jsx("div",{style:{width:M.width-2},className:"rac-spacer"})]}));function br({visibility:e,children:n,selectRef:a,onAnimationDone:i,unmount:c=!0,duration:p,easing:y,offset:f,animateOpacity:o,style:v,className:E,setBottomDirection:C=()=>{}}){const $=t.useRef(null),[N,M]=t.useState({top:0,left:0,width:0}),I=t.useRef(N);t.useEffect(()=>{I.current=N},[N]);const O=t.useCallback(()=>{if(a?.current){const l=a.current.getBoundingClientRect(),ee=window.innerHeight,re=$.current?.scrollHeight||250,q=ee-l.bottom,K=q<re&&l.top>q;C(K),M({top:l.top,bottom:l.bottom,left:l.left,width:l.width,isUpward:K})}},[a]);t.useEffect(()=>{if(e)return O(),window.addEventListener("scroll",O,!0),window.addEventListener("resize",O),()=>{window.removeEventListener("scroll",O,!0),window.removeEventListener("resize",O)}},[e,O]);const F=`height var(--rac-duration) ${y}${o?`, opacity var(--rac-duration) ${y}`:""}`;t.useLayoutEffect(()=>{if(!a?.current)return;const l=new ResizeObserver(ee=>{for(let re of ee)if(e&&$.current&&a.current){const q=a.current.getBoundingClientRect(),{isUpward:K}=I.current;$.current.style.width=`${q.width}px`,$.current.style.left=`${q.left}px`,K?$.current.style.bottom=`${window.innerHeight-q.top+f}px`:$.current.style.top=`${q.bottom+f}px`}});return l.observe(a.current),()=>l.disconnect()},[a,e,f]);const W={position:"fixed","--rac-duration":`${p}ms`,"--rac-easing":y,left:`${N.left}px`,width:`${N.width}px`,overflow:"hidden",zIndex:"2147483647",height:e?"auto":"0px",opacity:o?e?1:0:1,pointerEvents:e?"all":"none",boxSizing:"border-box",transformOrigin:N.isUpward?"bottom":"top",...N.isUpward?{bottom:`${window.innerHeight-N.top+f}px`,top:"auto"}:{top:`${N.bottom+f}px`,bottom:"auto"},...Object.fromEntries(Object.entries(v||{}).map(([l,ee])=>[l.startsWith("--")?l:`--rac-${l.replace(/([A-Z])/g,"-$1").toLowerCase()}`,ee]))},P=t.useCallback(()=>{const l=$.current;l&&(l.style.height="0px",o&&(l.style.opacity="0"),l.style.transition="")},[o]),G=t.useCallback(()=>{const l=$.current;l&&(l.style.transition=F,l.style.height=`${l.scrollHeight}px`,o&&(l.style.opacity="1"))},[F,o]),se=t.useCallback(()=>{const l=$.current;l&&(l.style.height="auto",l.style.transition="",i&&i())},[i]),X=t.useCallback(()=>{const l=$.current;l&&(l.style.height=`${l.scrollHeight}px`,o&&(l.style.opacity="1"),l.offsetHeight,l.style.transition=F)},[F,o]),Y=t.useCallback(()=>{const l=$.current;l&&(l.style.height="0px",o&&(l.style.opacity="0"))},[o]),T=t.useCallback(()=>{const l=$.current;l&&(l.style.transition="")},[]);return cr.createPortal(d.jsx(We.CSSTransition,{in:e,timeout:p,classNames:"rac-options",unmountOnExit:c,nodeRef:$,onEnter:P,onEntering:G,onEntered:se,onExit:X,onExiting:Y,onExited:T,children:d.jsx("div",{ref:$,className:`rac-options ${E||""}`,style:{...W,"--rac-duration":`${p}ms`,"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-base":"var(--rac-duration)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)"},onMouseDown:l=>l.preventDefault(),children:n})}),document.body)}const mr=t.memo(br,(e,n)=>e.visibility===n.visibility&&e.duration===n.duration&&e.easing===n.easing&&e.offset===n.offset&&e.animateOpacity===n.animateOpacity&&e.selectRef===n.selectRef&&e.children===n.children&&JSON.stringify(e.style)===JSON.stringify(n.style)),rr=e=>{const n=window.getComputedStyle(e);return parseFloat(n.marginLeft)+parseFloat(n.marginRight)},tr=e=>e.reduce((n,a)=>{const i=a.offsetTop,c=a.getBoundingClientRect().width;return n[i]=(n[i]||0)+c,n},{}),xr=t.memo(({deleteInline:e,selectRef:n,setVisibility:a,selectId:i,removeOption:c,renderOptions:p,selected:y,selectedIDs:f,setSelectedIds:o,normalizedOptions:v,title:E,visibility:C,active:$,hasOptions:N,hasActualValue:M,optionsClassName:I,selectedText:O,disabled:F,loading:W,error:P,registerOption:G,unregisterOption:se,handleBlur:X,handleFocus:Y,toggleVisibility:T,handleKeyDown:l,handleListScroll:ee,setAnimationFinished:re,clear:q,children:K,placeholder:le,className:oe,style:_,duration:B,easing:ne,offset:S,animateOpacity:m,unmount:r,ArrowIcon:u,ClearIcon:x,DelIcon:w,renderIcon:de,hasMore:ye,loadButton:s,deleting:b,setDeleting:j})=>{const[h,L]=t.useState(!1),[D,ce]=t.useState(null),[V,U]=t.useState(!1),[ae,g]=t.useState({}),[z,Q]=t.useState(null),[fe,R]=t.useState(null),[he,ge]=t.useState(!1),me=t.useRef(!0),Re=t.useRef(null),ie=t.useCallback(H=>{c?c(H):o(J=>J.filter(te=>te.id!==H))},[c,o]),Ne=t.useCallback(H=>{if(b){H.stopPropagation(),H.preventDefault(),j(!1);return}T(H)},[b,T]),Te=t.useCallback((H,J)=>{g(te=>te[H]===J?te:{...te,[H]:J})},[]);t.useLayoutEffect(()=>{const H=Re.current;if(!H)return;const J=new ResizeObserver(te=>{window.requestAnimationFrame(()=>{if(!Array.isArray(te)||!te.length)return;const Ae=te[0].contentRect.height;ce(Ae)})});return J.observe(H),()=>J.disconnect()},[]),t.useEffect(()=>{me.current=!1,n&&(typeof n=="function"?n(n.current):n.current=n.current)},[n]),t.useEffect(()=>{b&&C&&T()&&T?.()(b&&f?.length===0)&&j(!1),R(null)},[f?.length,b]),t.useLayoutEffect(()=>{const H=Re.current;if(!H||!f?.length||b){f?.length||U({state:!1,id:null,width:0});return}const J=Array.from(H.children).filter(pe=>pe.classList.contains("rac-multiple-option")),te=H.clientWidth;if(J.length>f.length){const pe=new Set(f.map(A=>A.id)),Ee=J.findIndex(A=>!pe.has(A.id));if(Ee===-1)return;const we=J[Ee],be=J[Ee-1];if(!(be&&we.offsetTop!==be.offsetTop)){U({state:!1,id:null,width:0});return}const Oe=tr(J),xe=Object.keys(Oe).map(Number).sort((A,Z)=>A-Z),Se=xe.indexOf(we.offsetTop);if(Se<=0){U({state:!1,id:null,width:0});return}const je=xe[Se-1],$e=Oe[je],Le=te-$e;Ae(be?.id||null,!0,Le)}else if(J.length===f.length){const pe=J[J.length-1],Ee=f[f.length-1]?.id,we=ae[Ee];if(!we)return;const be=pe?.firstElementChild||pe,Ye=rr(be),Oe=rr(pe),xe=J.slice(0,-1),Se=tr(xe),je=Object.keys(Se).map(Number).sort((Z,ue)=>Z-ue);let $e=te;if(je.length>0){const Z=Math.max(...je);$e=te-(Se[Z]||0)}const Le=we+Ye+Oe>$e,A=f[f.length-2]?.id;Ae(A,Le,$e)}function Ae(pe,Ee,we){U(be=>be.id===pe&&be.state===Ee&&be.width===we?be:{state:Ee,id:pe,width:we})}},[f,ae,b]);const _e=f?.map((H,J)=>{const te=J===f.length-1;return d.jsx(pr,{normalizedOptions:v,registerItemWidth:Te,setActiveHoverId:R,swiped:z===H.id,activeHoverId:fe,setVisibility:a,deleteInline:e,setDeleting:j,setSwipedId:Q,setLeaving:ge,renderIcon:de,selectRef:n,setSpacer:U,onSwipe:Q,delSpacer:te,duration:B,deleting:b,swipedId:z,leaving:he,element:H,DelIcon:w,spacer:V,remove:ie,index:J},H.id??J)});return d.jsxs(qe.Provider,{value:{registerOption:G,unregisterOption:se},children:[K,d.jsxs("div",{ref:n,style:{"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)","--rac-duration-base":"var(--rac-duration)","--rac-duration":`${B}ms`,..._},className:`
|
|
7
|
+
${!N||F?"rac-disabled-style":""}
|
|
8
|
+
${W?"rac-loading-style":""}
|
|
9
|
+
${P?"rac-error-style":""}
|
|
10
|
+
${oe}
|
|
11
|
+
rac-select
|
|
12
|
+
`,...$&&{onKeyDown:l,onFocus:Y,onClick:Ne,onBlur:X},"aria-disabled":F||!N,"aria-controls":`${i}-listbox`,tabIndex:$?0:-1,"aria-expanded":C,"aria-label":le,"aria-haspopup":"listbox",role:"combobox",children:[d.jsx("div",{className:`rac-select-title-wrapper
|
|
13
|
+
${!P&&!W&&y?.type==="boolean"?y.raw?"rac-true-option":"rac-false-option":""}
|
|
14
|
+
`,style:{alignItems:f?.length&&!O?"flex-start":"center",height:D?`${D}px`:"auto"},children:d.jsx("div",{style:{alignItems:f?.length&&!O?"flex-start":"center",height:W?"100%":"auto"},className:"rac-select-title",ref:Re,children:d.jsx(We.TransitionGroup,{enter:!me.current,component:null,appear:!1,children:f?.length&&!O&&!W?_e:d.jsxs(sr,{className:"rac-title-container",duration:B,widthMode:!0,children:[d.jsx("span",{className:"rac-title-text",children:E}),d.jsx(Pe,{className:"rac-loading-container",visibility:W&&!P,duration:B,children:d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]})})]},E)})})}),d.jsxs("div",{className:"rac-select-buttons",children:[d.jsx(Pe,{visibility:M&&N&&!F&&!W&&!P&&!b,style:{display:"grid"},duration:B,children:de(x,{className:"rac-select-cancel",onMouseDown:H=>{H.preventDefault(),H.stopPropagation()},onClick:q})}),d.jsx(Pe,{visibility:$&&!b,style:{display:"grid"},duration:B,children:d.jsx("span",{className:`rac-select-arrow-wrapper ${C?"--open":""}`,children:de(u,{className:"rac-select-arrow-wrapper"})})})]}),d.jsx(mr,{style:{"--rac-duration":`${B}ms`,..._},onAnimationDone:()=>re(!0),setBottomDirection:L,animateOpacity:m,className:I,visibility:C,selectRef:n,duration:B,unmount:r,easing:ne,offset:S,children:d.jsxs("div",{onScroll:ee,className:"rac-select-list","aria-label":"Options",role:"listbox",tabIndex:"-1",children:[p,!s&&ye&&d.jsxs("div",{className:"rac-select-option rac-disabled-option rac-loading-option",onClick:H=>H.stopPropagation(),children:[d.jsx("span",{className:"rac-loading-option-title",children:"Loading"}),d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]})]})]})})]})]})}),yr=["group","disabled","options","items","children"],De=["name","label","id","value"],nr=[],Fe=(e,n=!1)=>{if(n&&typeof e.group=="string")return e.group;const a=De.find(c=>e[c]!=null&&e[c]!=="");if(a)return String(e[a]);const i=Object.entries(e).find(([c,p])=>!yr.includes(c)&&p!=null&&p!=="");return i?String(i[1]):null};function Er({options:e=nr,jsxOptions:n=nr,value:a,defaultValue:i,onChange:c,disabled:p=!1,loading:y=!1,error:f=!1,multiple:o=!1,placeholder:v="Choose option",emptyText:E="No options",disabledText:C="Disabled",loadingText:$="Loading",errorText:N="Failed to load",disabledOption:M="Disabled option",emptyOption:I="Empty option",invalidOption:O="Invalid option",setVisibility:F,hasMore:W,loadButton:P,setLoadingTitle:G,loadingTitle:se,loadMoreText:X,loadMore:Y,childrenFirst:T,groupsClosed:l}){const ee=a!==void 0,[re,q]=t.useState(()=>{const s=new Set;if(l)return s;const b=j=>{Array.isArray(j)&&j.forEach(h=>{if(h&&typeof h=="object"){if(("options"in h||"group"in h&&!De.some(D=>D in h))&&!h.disabled){const D=Fe(h,!0)||"Empty group";s.add(D)}h.options&&b(h.options)}})};return b(e),s}),K=t.useRef(null),le=t.useCallback(s=>{q(b=>{const j=new Set(b);return j.has(s)?j.delete(s):j.add(s),j})},[]),oe=t.useCallback((s,b,j="n",h=null,L=!1)=>{const D=`${j}-${b}`;if(s==null||s==="")return{id:D,userId:null,name:I,raw:null,disabled:!0,type:"normal",group:h,groupDisabled:L};if(typeof s=="function")return{id:D,userId:null,name:O,raw:s,disabled:!0,invalid:!0,type:"normal",group:h};if(typeof s=="object"&&!Array.isArray(s)){const ce=h||s.group||null,V=L||s.disabled===!0,U=s.id??s.value??s.name??s.label,ae=s.value!==void 0?s.value:s.id!==void 0?s.id:s;let g=Fe(s)||(V?M:I);return{id:D,userId:U,name:g,raw:ae,original:s,disabled:V||g===I&&!V,type:typeof ae=="boolean"?"boolean":"normal",group:ce,groupDisabled:L}}return{id:D,userId:s,name:String(s),raw:s,original:s,disabled:L,type:typeof s=="boolean"?"boolean":"normal",group:h}},[I,O,M]),_=t.useMemo(()=>{const s=new Map,b=[],j=n.map((g,z)=>{if(g.isGroupMarker)return{...g,type:"group-marker"};const Q=!g.label&&!g.userId&&!g.value&&(g.value===void 0||g.value===null||g.value==="")&&!g.hasJsx;return{...g,id:`jsx-${g.id}`,index:z,userId:g.userId,raw:g.value,original:g.value,name:Q?I:g.label||g.userId||String(g.value||""),disabled:!!g.disabled||Q,type:typeof g.value=="boolean"?"boolean":"normal",group:g.group||null}});let h=0;const L=(g,z=null,Q=!1,fe="0")=>{Array.isArray(g)||(g=[g]),g.forEach((R,he)=>{if(!R)return;const ge=`${fe}-${he}`,me=typeof R=="object"&&!Array.isArray(R);if(me&&("options"in R||"group"in R&&!De.some(ie=>ie in R))){const ie=Fe(R,!0)||"Empty group";s.has(ie)||s.set(ie,{disabled:!!R.disabled,closedByDefault:!!R.disabled||l,items:[]}),R.options?L(R.options,ie,Q||!!R.disabled,ge):b.push({id:`empty-${ie}-${ge}`,name:ie,group:ie,isPlaceholder:!0,type:"group-marker",index:h++})}else if(me&&!De.some(ie=>ie in R)&&!R.group)Object.entries(R).forEach(([ie,Ne],Te)=>{const _e=oe(Ne,`${ge}-${Te}`,"default",z,Q);b.push({..._e,index:h++})});else{const ie=oe(R,ge,"default",z,Q);b.push({...ie,index:h++})}})};L(e);const D=T?[...j,...b]:[...b,...j];if(!K.current)K.current=new Map(D.map((g,z)=>[g.id,z]));else{let g=!1;if(D.forEach(z=>{K.current.has(z.id)||(g=!0)}),g){const z=new Map;D.forEach((Q,fe)=>{z.set(Q.id,fe)}),K.current=z}}const ce=[...D].sort((g,z)=>{const Q=K.current.get(g.id)??999999,fe=K.current.get(z.id)??999999;return Q-fe}),V=[],U=new Set;ce.forEach(g=>{if(!g.group)V.push({type:"item",data:g});else if(U.has(g.group)||(U.add(g.group),V.push({type:"group",name:g.group})),!g.isPlaceholder&&!g.isGroupMarker){const z=s.get(g.group)||{items:[]};s.has(g.group)||s.set(g.group,z),z.items.push(g)}});const ae=[];return V.forEach(g=>{if(g.type==="item")ae.push(g.data);else{const z=g.name,Q=s.get(z),fe=re.has(z);ae.push({id:`group-header-${z}`,name:z,disabled:!!Q?.disabled,groupHeader:!0,expanded:fe,type:"group",hidden:!1}),Q?.items.forEach(R=>{const he=re.size>0?!fe:!!l;ae.push({...R,hidden:he})})}}),W&&P&&ae.push({id:"special-load-more-id",name:se,loadMore:!0,loading:se===X,type:"special"}),ae},[e,n,oe,T,W,P,se,X,l,re,I]),B=t.useCallback(()=>{const s=ee?a:i;if(s==null||Array.isArray(s)&&s.length===0)return{initialId:null,initialIDs:[]};const b=new Set,j=(h,L)=>{let D=_.find(V=>V.original===h&&!b.has(V.id));if(!D&&typeof h=="object")try{const V=JSON.stringify(h);D=_.find(U=>U.original&&typeof U.original=="object"&&JSON.stringify(U.original)===V&&!b.has(U.id))}catch{}if(D)return b.add(D.id),D;const ce=typeof h=="object"?h.id||h.value||JSON.stringify(h):String(h);return typeof h=="object"&&h!==null?{id:`virtual-${ce}-${L}`,name:Fe(h)||String(h.id||"Selected Object"),raw:h.value??h.id??h,original:h,userId:h.id??h.value??null,virtual:!0}:{id:`virtual-${ce}-${L}`,name:String(h),raw:h,original:h,userId:h,virtual:!0}};if(o)return{initialId:null,initialIDs:(Array.isArray(s)?s:[s]).map((D,ce)=>j(D,ce))};{const h=Array.isArray(s)?s[0]:s;return{initialId:j(h,0).id,initialIDs:[]}}},[ee,a,i,_,o]),[ne,S]=t.useState(()=>B().initialId),[m,r]=t.useState(()=>B().initialIDs),u=t.useMemo(()=>{const s=_.find(b=>b.id===ne);if(s)return s;if(!o&&ne?.startsWith("virtual-")){const b=ee?a:i,j=Array.isArray(b)?b[0]:b;if(j)return{id:ne,name:typeof j=="object"?Fe(j):String(j),original:j}}return null},[ne,_,o,ee,a,i]),x=t.useCallback((s,b)=>{if(s.groupHeader){w(b),s.disabled||le(s.name);return}if(s.disabled||s.loadMore){w(b),s.loadMore&&!s.loading&&(G(X),Y());return}if(o){if(s.disabled||s.groupHeader||s.loadMore){w(b);return}w(b);const h=m?.some(L=>L.id===s.id)?m.filter(L=>L.id!==s.id):[...m,s];r(h),c?.(h.map(L=>L.original),h.map(L=>L.userId));return}S(s.id),c?.(s.original,s.userId),F(!1)},[c,F,Y,X,G,le,o,m]),w=t.useCallback(s=>{s?.stopPropagation(),s?.preventDefault()},[]),de=t.useCallback(()=>{c?.(null,null),S(null),r([])},[c]),ye=t.useCallback(s=>{const b=m.filter(j=>j.id!==s);r(b),c?.(b.map(j=>j.original),b.map(j=>j.userId))},[m,c]);return{normalizedOptions:_,selected:u,selectOption:x,clear:de,removeOption:ye,hasOptions:_.length>0,active:!f&&!y&&!p&&_.length>0,selectedValue:a??i,placeholder:v,emptyText:E,disabledText:C,loadingText:$,errorText:N,disabledOption:M,emptyOption:I,invalidOption:O,disabled:p,loading:y,error:f,expandedGroups:re,toggleGroup:le,selectedIDs:m,multiple:o,setSelectedIds:r}}function wr({disabled:e,open:n,setOpen:a,options:i=[],selectOption:c,setDeleting:p,selected:y,selectedIDs:f,multiple:o,hasMore:v,loadMore:E,loadButton:C,loadButtonText:$,setLoadingTitle:N,loadOffset:M,loadAhead:I,expandedGroups:O,onOpen:F,onClose:W,deleting:P}){const G=t.useRef(!1),se=t.useRef(0),X=t.useRef(!1),[Y,T]=t.useState(-1);t.useEffect(()=>{X.current=!1,C&&N($)},[i.length,v,C,$,N]);const l=t.useCallback(()=>{!v||X.current||(X.current=!0,E())},[v,E]),ee=t.useCallback(S=>{if(C||!v||X.current)return;const{scrollTop:m,scrollHeight:r,clientHeight:u}=S.currentTarget(r-m<=u+M)&&l()},[C,v,M,l]);t.useEffect(()=>{!C&&n&&v&&Y>=i.length-I&&l()},[Y,n,v,i.length,I,C,l]),t.useEffect(()=>{const S=()=>{se.current=Date.now()};return window.addEventListener("focus",S),()=>window.removeEventListener("focus",S)},[]),t.useEffect(()=>{if(!n){T(-1);return}const S=i[Y],m=S&&!S.hidden&&!S.groupHeader;if(Y>=0&&Y<i.length&&m)return;let r=-1;if(y&&!o){const u=o?y[0]:y;u&&(r=i.findIndex(x=>x.id===u.id&&!x.disabled&&!x.hidden&&!x.groupHeader))}if(o&&f.length){const u=new Set(f.map(x=>x.id));r=i.findIndex(x=>u.has(x.id)&&!x.disabled&&!x.hidden&&!x.groupHeader)}r===-1&&(r=i.findIndex(u=>!u.disabled&&!u.hidden&&!u.groupHeader)),T(r)},[n,i,y]);const re=t.useCallback((S,m)=>{const r=w=>w&&!w?.groupHeader&&(!w?.group||O?.has(w?.group))&&!w?.disabled&&!w?.loading,u=i.length;if(u===0)return-1;let x=S;for(let w=0;w<u;w++){if(x=(x+m+u)%u,!C&&v&&(m>0&&x===0||m<0&&x===u-1))return S;if(r(i[x]))return x}return S},[i,v,C,O]),q=t.useCallback(S=>{const m=S.relatedTarget?.closest(".rac-options");!S.currentTarget.contains(S.relatedTarget)&&!m&&(a(!1),p(!1))},[a]),K=t.useCallback(()=>{e||P||document.hidden||Date.now()-se.current<100||n||(a(!0),G.current=!0,setTimeout(()=>G.current=!1,200))},[e,n,a,P]),le=t.useRef(n),oe=t.useRef(F),_=t.useRef(W);t.useEffect(()=>{oe.current=F,_.current=W},[F,W]),t.useEffect(()=>{le.current!==n&&(n?oe.current?.():_.current?.(),le.current=n)},[n]);const B=t.useCallback(S=>{e||P||S?.target?.closest(".rac-select-cancel")||G.current||a(!n)},[e,n,a,F,W,P]),ne=t.useCallback(S=>{if(!e)switch(S.key){case"Enter":case" ":S.preventDefault(),n?Y!==-1&&i[Y]&&c(i[Y],S):a(!0);break;case"Escape":S.preventDefault(),a(!1);break;case"ArrowDown":S.preventDefault(),n?T(m=>re(m,1)):a(!0);break;case"ArrowUp":S.preventDefault(),n?T(m=>re(m,-1)):a(!0);break;case"Tab":n&&a(!1);break}},[e,n,a,Y,i,c,re]);return t.useMemo(()=>({handleBlur:q,handleFocus:K,toggleVisibility:B,handleKeyDown:ne,highlightedIndex:Y,setHighlightedIndex:T,handleListScroll:ee}),[q,K,B,ne,Y,ee])}function vr({visibility:e,children:n,duration:a=300,className:i}){const c=t.useRef(null);return d.jsx(We.CSSTransition,{onEntering:()=>c.current.style.height=c.current.scrollHeight+"px",onExit:()=>c.current.style.height=c.current.scrollHeight+"px",onEntered:()=>c.current.style.height="auto",onExiting:()=>c.current.style.height="0px",onEnter:()=>c.current.style.height="0px",classNames:"rac-slide-down",timeout:a,nodeRef:c,in:e,unmountOnExit:!0,children:d.jsx("div",{style:{transition:`height ${a}ms ease`,overflow:"hidden"},className:`${i} rac-slide-down-enter-done`,ref:c,tabIndex:-1,children:n})})}const ze=(e,n)=>{if(!e)return null;const a=(i={})=>({...n,...i,style:{...n?.style,...i?.style}});if(typeof e=="string")return d.jsx("img",{src:e,...a(),alt:""});if(t.isValidElement(e))return t.cloneElement(e,a(e.props));if(typeof e=="function"||typeof e=="object"&&e.$$typeof){const i=e;return d.jsx(i,{...a()})}return null},Sr=(e,n,a,i,c,p,y,f)=>{const o=f?.some(v=>v.id===e.id);return e.groupHeader?"rac-select-option rac-group-option":["rac-select-option",e.className,(o||i===e.id)&&"rac-selected",n===a&&"rac-highlighted",(e.disabled||e.loading)&&"rac-disabled-option",(e.invalid||e.name===y)&&"rac-invalid-option",e.loadMore&&c===p&&"rac-loading-option",typeof e.raw=="boolean"&&(e.raw?"rac-true-option":"rac-false-option")].filter(Boolean).join(" ")},jr=t.forwardRef(({unmount:e,children:n,visibility:a,ownBehavior:i=!1,alwaysOpen:c=!1,duration:p=300,easing:y="ease-out",offset:f=1,animateOpacity:o=!0,style:v={},className:E="",ArrowIcon:C=hr,ClearIcon:$=Qe,DelIcon:N=Qe,CheckIcon:M=er,hasMore:I=!1,loadMore:O=()=>{console.warn("loadMore not implemented")},loadButton:F=!1,loadButtonText:W="Load more",loadMoreText:P="Loading",selectedText:G=void 0,loadOffset:se=100,loadAhead:X=3,childrenFirst:Y=!1,groupsClosed:T=!1,optionsClassName:l="",onOpen:ee=()=>{},onClose:re=()=>{},deleteInline:q=!1,...K},le)=>{const oe=t.useId(),_=t.useMemo(()=>oe.replace(/:/g,""),[oe]),[B,ne]=t.useState([]),[S,m]=t.useState(!1),[r,u]=t.useState(F?W:P),[x,w]=t.useState(!1),de=t.useRef(null),[ye,s]=t.useState(!1),b=t.useCallback(A=>{ne(Z=>{const ue=Z.findIndex(ve=>ve.id===A.id);if(ue!==-1){const ve=Z[ue];if(ve.label===A.label&&ve.value===A.value&&ve.disabled===A.disabled&&ve.group===A.group)return Z;const Ie=[...Z];return Ie[ue]=A,Ie}return[...Z,A]})},[]),j=t.useCallback(A=>{ne(Z=>{const ue=Z.filter(ve=>ve.id!==A);return ue.length===Z.length?Z:ue})},[]),h=c?!0:i?!!a:S,L=t.useCallback(A=>{c||i||m(A)},[c,i]),D=Er({...K,setVisibility:L,jsxOptions:B,hasMore:I,loadButton:F,loadingTitle:r,loadMore:O,loadMoreText:P,setLoadingTitle:u,childrenFirst:Y,groupsClosed:T}),{multiple:ce,normalizedOptions:V,selected:U,selectOption:ae,clear:g,removeOption:z,hasOptions:Q,active:fe,selectedValue:R,disabled:he,loading:ge,error:me,placeholder:Re,invalidOption:ie,emptyText:Ne,disabledText:Te,loadingText:_e,errorText:H,expandedGroups:J,selectedIDs:te,setSelectedIds:Ae}=D,pe=wr({setDeleting:s,setLoadingTitle:u,loadButton:F,loadButtonText:W,hasMore:I,loadMore:O,disabled:he,multiple:ce,open:h,setOpen:L,options:V,selectOption:ae,selected:U,loadOffset:se,loadAhead:X,expandedGroups:J,selectedIDs:te,onOpen:ee,onClose:re,deleting:ye}),{handleListScroll:Ee,handleBlur:we,handleFocus:be,toggleVisibility:Ye,handleKeyDown:Oe,highlightedIndex:xe,setHighlightedIndex:Se}=pe;t.useImperativeHandle(le,()=>de.current),t.useEffect(()=>{!h&&w(!1)},[h]),t.useEffect(()=>{(me||he||ge||!Q)&&L(!1)},[me,he,ge,Q,L]),t.useEffect(()=>{if(h&&x&&xe!==-1){const A=V[xe];A&&document.getElementById(`${_}-${Je(A.id)}`)?.scrollIntoView({block:"nearest"})}},[xe,h,x,V,_]);const je=t.useMemo(()=>R!=null&&!(Array.isArray(R)&&R.length===0)&&!(typeof R=="object"&&Object.keys(R).length===0),[R]),$e=t.useMemo(()=>{if(me)return H;if(ge)return _e;if(he)return Te;if(je&&G)return G;if(U)return U.jsx??U.name;if(je){const A=V.find(Z=>Z.raw===R);return A?A.name:typeof R=="object"&&R!==null?R.name??R.label??"Selected Object":String(R)}return Q?Re:Ne},[he,ge,me,Q,U,R,Re,H,_e,Te,Ne,je,V]),Le=t.useMemo(()=>{const A=[];let Z=[],ue=null;const ve=V.reduce((k,ke)=>(ke.group&&(k[ke.group]=(k[ke.group]||0)+1),k),{}),Ie=k=>{k===null||Z.length===0||(A.push(d.jsx(vr,{visibility:J.has(k),className:"rac-group-container",children:Z},`slide-${k}`)),Z=[])},Ve=(k,ke)=>d.jsxs("div",{className:Sr(k,ke,xe,U?.id,r,P,ie,te),onMouseEnter:()=>!k.disabled&&!k.loading&&Se(ke),onClick:Ce=>!k.loading&&ae(k,Ce),"aria-disabled":k.disabled||k.loading,"aria-selected":U?.id===k.id,id:`${_}-${Je(k.id)}`,role:"option",children:[k.jsx??d.jsx("span",{className:"rac-option-title",children:k.name}),k.loading&&d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]}),ce&&!k.disabled&&d.jsx("div",{className:"rac-checkbox",children:ze(er,{className:`
|
|
15
|
+
rac-checkmark
|
|
16
|
+
${te?.some(Ce=>Ce.id===k.id)?"--checked":""}`})})]},k.id);return V.forEach((k,ke)=>{const Ce=k.groupHeader,Xe=!!k.group;if((Ce||!Xe&&ue!==null)&&(Ie(ue),Ce||(ue=null)),Ce){ue=k.name;const or=J.has(k.name),ar=ve[k.name]>0;A.push(d.jsxs("div",{id:k.id,className:["rac-group-header",k.disabled&&"rac-disabled-group"].filter(Boolean).join(" "),onClick:lr=>ae(k,lr),children:[d.jsx("span",{className:"rac-group-title-text",children:k.name}),d.jsx(Pe,{visibility:ar&&!k.disabled,style:{display:"grid"},duration:p,children:d.jsx("span",{className:`rac-group-arrow-wrapper ${or?"open":""}`,children:ze(C,{className:"rac-select-arrow-wrapper"})})})]},k.id))}else Xe?Z.push(Ve(k,ke)):A.push(Ve(k,ke))}),Ie(ue),A},[V,ae,_,U,xe,r,P,ie,Se,J,C]);return d.jsx(xr,{setDeleting:s,deleting:ye,selectedText:G,selectRef:de,selectId:_,selectedIDs:te,setSelectedIds:Ae,multiple:ce,removeOption:z,optionsClassName:l,renderIcon:ze,normalizedOptions:V,renderOptions:Le,selected:U,title:$e,visibility:h,active:fe,hasOptions:Q,hasActualValue:je,highlightedIndex:xe,animationFinished:x,disabled:he,loading:ge,error:me,setVisibility:L,setHighlightedIndex:Se,setAnimationFinished:w,handleBlur:we,handleFocus:be,toggleVisibility:Ye,handleKeyDown:Oe,handleListScroll:Ee,selectOption:ae,clear:g,registerOption:b,unregisterOption:j,children:n,placeholder:Re,className:E,style:v,duration:p,easing:y,offset:f,animateOpacity:o,unmount:e,ArrowIcon:C,ClearIcon:$,DelIcon:N,hasMore:I,loadButton:F,deleteInline:q})}),ir=t.createContext(null);function kr({children:e,name:n,label:a,value:i,id:c,emptyGroupText:p="Empty group"}){const y=t.useContext(qe),f=t.useMemo(()=>{const v=n??a??i??c;return v!=null&&v!==""?String(v):p},[n,a,i,c,p]),o=t.useMemo(()=>`group-marker-${Je(f)}`,[f]);return t.useEffect(()=>{if(!y)return;const v={id:o,group:f,isGroupMarker:!0,disabled:!0};return y.registerOption(v),()=>y.unregisterOption(o)},[y.registerOption,y.unregisterOption,o,f]),d.jsx(ir.Provider,{value:f,children:e})}const Ue=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(Ue).join(" ").replace(/\s+/g," ").trim():t.isValidElement(e)?Ue(e.props.children):"":"";function Rr({value:e,id:n,className:a,children:i,disabled:c,group:p}){const y=t.useContext(qe),f=t.useContext(ir),o=y?.registerOption,v=y?.unregisterOption,E=t.useId(),C=t.useMemo(()=>n?String(n):E.replace(/:/g,""),[n,E]);return t.useEffect(()=>{if(!o)return;const $=Ue(i),N=i!=null;let M="";return $?M=$:n!=null&&n!==""?M=String(n):e!=null&&e!==""&&(M=String(e)),o({id:C,value:e!==void 0?e:$,label:M,jsx:i,hasJsx:N,className:a,disabled:!!c,group:p||f||null}),()=>v(C)},[C,e,i,a,c,p,f,o,v]),null}exports.OptGroup=kr;exports.Option=Rr;exports.Select=jr;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}:root{--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-title-font-size: 1em;--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-group-header-font-size: 1.25em;--rac-group-header-font-weight: bold;--rac-group-header-min-height: 1em;--rac-group-header-padding: .5em;--rac-group-arrow-height: 1em;--rac-group-arrow-width: 1em;--rac-group-arrow-padding: 1px 0 2px;--rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-multiple-selected-border: .1em solid gray;--rac-multiple-selected-radius: 5px;--rac-checkbox-border: 1px solid gray;--rac-multiple-selected-padding: 0em .25em;--rac-multiple-selected-margin: .25em .25em;--rac-multiple-selected-gap: .5em 0;--rac-checkbox-margin-right: .2em;--rac-multiple-selected-min-height: 1.5em;--rac-checkbox-size: var(--rac-option-min-height);--rac-options-z-index: 1}.rac-select{background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);min-height:var(--rac-select-height);interpolate-size:allow-keywords;transition:border-color var(--rac-duration-base) ease,height var(--rac-duration-base) ease;justify-content:space-between;box-sizing:border-box;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-wrapper{transition:height .3s cubic-bezier(.4,0,.2,1)}.rac-select-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--rac-multiple-selected-gap)}.rac-title-text{margin:.5em 0;display:block;animation:rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease);height:100%;align-content:center;font-size:var(--rac-title-font-size)}@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{transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);min-height:var(--rac-option-min-height);padding:var(--rac-option-padding);justify-content:space-between;align-items:center;display:flex;cursor:pointer}.rac-select-option:not(.rac-disabled-option):not(.rac-group-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-option-title{text-overflow:ellipsis;overflow:hidden;text-wrap:wrap}.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}.rac-group-header{cursor:pointer;min-height:var(--rac-group-header-min-height);padding:var(--rac-group-header-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center;font-weight:var(--rac-group-header-font-weight);font-size:var(--rac-group-header-font-size)}.rac-group-arrow-wrapper{display:block;height:var(--rac-group-arrow-height);width:var(--rac-group-arrow-width);padding:var(--rac-group-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-group-arrow-wrapper.--open{transform:rotate(180deg)}.rac-disabled-group{cursor:not-allowed;color:var(--rac-disabled-group-color)}.rac-select-selected{display:flex;align-items:center}.rac-multiple-selected-option{border:var(--rac-multiple-selected-border);border-radius:var(--rac-multiple-selected-radius);min-height:var(--rac-multiple-selected-min-height);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;vertical-align:middle;line-height:normal;padding:var(--rac-multiple-selected-padding);margin:var(--rac-multiple-selected-margin);white-space:nowrap}.rac-multiple-selected-option:hover{background-color:color-mix(in srgb,CanvasText 6%,Canvas)}.rac-checkbox{min-height:var(--rac-option-min-height);min-width:var(--rac-option-min-height);border:var(--rac-checkbox-border);justify-content:center;align-items:center;display:flex;height:100%;margin-right:var(--rac-checkbox-margin-right)}.rac-checkmark{color:var(--rac-base-green);opacity:0;max-width:0;max-height:0;transition:opacity var(--rac-duration-base),max-height var(--rac-duration-base),max-width var(--rac-duration-base)}.rac-checkmark.--checked{opacity:1;max-height:var(--rac-option-min-height);max-width:var(--rac-option-min-height)}
|
|
1
|
+
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}:root{--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-hover: color-mix(in srgb, Canvas 95%, CanvasText 5%);--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-padding: 0em .5em;--rac-select-min-height: 2em;--rac-disabled-opacity: .75;--rac-title-anim-shift: 4px;--rac-title-anim-entry-ease: cubic-bezier(.34, 1.56, .64, 1);--rac-title-font-size: 1em;--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-option-gap: .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%);--rac-group-header-font-size: 1.25em;--rac-group-header-font-weight: bold;--rac-group-header-min-height: 1em;--rac-group-header-padding: .5em;--rac-group-arrow-height: 1em;--rac-group-arrow-width: 1em;--rac-group-arrow-padding: 1px 0 2px;--rac-group-container-padding-left: 1em;--rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-multiple-selected-border: .1em solid gray;--rac-multiple-selected-radius: 5px;--rac-checkbox-border: 1px solid gray;--rac-multiple-selected-padding: 0em .25em;--rac-multiple-selected-margin: .25em .5em .25em 0;--rac-multiple-selected-gap: .5em 0;--rac-multiple-deleting-bg: color-mix(in srgb, var(--rac-base-red) 15%, Canvas);--rac-checkbox-margin-right: .2em;--rac-multiple-selected-min-height: 1.5em;--rac-checkbox-size: var(--rac-option-min-height);--rac-multiple-del-bg: color-mix(in srgb, var(--rac-base-red) 30%, Canvas);--rac-multiple-del-hover-color: var(--rac-base-red)}.rac-select{background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);min-height:var(--rac-select-min-height);interpolate-size:allow-keywords;transition:background-color var(--rac-duration-base) ease,border-color var(--rac-duration-base) ease,height var(--rac-duration-base) ease;justify-content:space-between;box-sizing:border-box;cursor:pointer;display:flex}.rac-select:hover{background-color:var(--rac-select-hover);border-color:var(--rac-select-hover)}.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-wrapper{transition:height var(--rac-duration-base) cubic-bezier(.4,0,.2,1);display:flex;width:100%}.rac-select-title{min-height:var(--rac-select-min-height);position:relative;flex-wrap:wrap;display:flex;width:100%}.rac-spacer{min-height:var(--rac-select-min-height)}.rac-title-container{height:100%}.rac-title-text{font-size:var(--rac-title-font-size);align-content:center;display:block;height:100%}@keyframes rac-fade-in{0%{opacity:0;transform:translateY(var(--rac-title-anim-shift))}to{opacity:1;transform:translateY(0)}}.rac-loading-container{align-items:end;display:grid;height:100%}.rac-loading-dots{display:inline-flex;--rac-dots-size: calc(var(--rac-title-font-size) / 4);--rac-dots-gap: calc(var(--rac-title-font-size) / 6);--rac-dots-padding-left: calc(var(--rac-title-font-size) / 4);--rac-dots-padding-bottom: .5em;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);padding-bottom:var(--rac-dots-padding-bottom)}.rac-loading-dots i{width:var(--rac-dots-size);height:var(--rac-dots-size);background:var(--rac-dots-color, currentColor);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{padding:var(--rac-arrow-padding);height:var(--rac-arrow-height);width:var(--rac-arrow-width);will-change:transform;display:block;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-x:hidden;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);transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);min-height:var(--rac-option-min-height);padding:var(--rac-option-padding);justify-content:space-between;gap:var(--rac-option-gap);overflow-wrap:anywhere;word-break:break-all;scrollbar-width:thin;align-items:center;overflow-x:auto;cursor:pointer;display:flex}.rac-select-option:not(.rac-disabled-option):not(.rac-group-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-option-title{text-overflow:ellipsis;overflow-wrap:anywhere;word-break:break-all;text-wrap:wrap}.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}.rac-group-header{cursor:pointer;min-height:var(--rac-group-header-min-height);padding:var(--rac-group-header-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center;font-weight:var(--rac-group-header-font-weight);font-size:var(--rac-group-header-font-size)}.rac-group-container{padding-left:var(--rac-group-container-padding-left)}.rac-group-arrow-wrapper{display:block;height:var(--rac-group-arrow-height);width:var(--rac-group-arrow-width);padding:var(--rac-group-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-group-arrow-wrapper.--open{transform:rotate(180deg)}.rac-disabled-group{cursor:not-allowed;color:var(--rac-disabled-group-color)}.rac-select-selected{display:flex;align-items:center}.rac-multiple-selected-option{transition:background-color var(--rac-duration-fast, --rac-duration) cubic-bezier(.4,0,.2,1),transform var(--rac-duration) ease;background-color:color-mix(in srgb,CanvasText 10%,Canvas);min-height:var(--rac-multiple-selected-min-height);position:relative;display:inline-flex;align-items:center;vertical-align:middle;line-height:normal;padding:var(--rac-multiple-selected-padding);margin:var(--rac-multiple-selected-margin);white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}@media(hover:hover){.rac-multiple-selected-option:hover{background-color:color-mix(in srgb,CanvasText 25%,Canvas)}}.rac-multiple-del{background-color:var(--rac-multiple-del-bg);-webkit-tap-highlight-color:transparent;align-items:center;position:absolute;-webkit-user-select:none;user-select:none;display:grid;height:100%;right:0}.rac-multiple-del:hover{color:var(--rac-multiple-del-hover-color)}.rac-multiple-option{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.rac-multiple-selected-option.--deleting-shake{background-color:var(--rac-multiple-deleting-bg);animation:rac-shake .3s infinite}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}.rac-checkbox{margin-right:var(--rac-checkbox-margin-right);min-height:var(--rac-option-min-height);min-width:var(--rac-option-min-height);border:var(--rac-checkbox-border);justify-content:center;align-items:center;display:flex;height:100%}.rac-checkmark{color:var(--rac-base-green);opacity:0;max-width:0;max-height:0;transition:max-height var(--rac-duration-base),max-width var(--rac-duration-base),opacity var(--rac-duration-base)}.rac-checkmark.--checked{max-height:var(--rac-option-min-height);max-width:var(--rac-option-min-height);opacity:1}
|