react-animated-select 0.3.6 → 0.5.2
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 +8 -7
- package/demo/package-lock.json +3619 -3436
- package/demo/package.json +35 -38
- package/demo/src/App.tsx +16 -4
- package/demo/src/rac.css +13 -2
- package/dist/index.cjs.js +10 -6
- package/dist/index.css +1 -1
- package/dist/index.es.js +1205 -885
- package/index.d.ts +7 -1
- package/package.json +1 -1
- package/src/animated.jsx +80 -0
- package/src/icons.jsx +14 -0
- package/src/option.jsx +7 -5
- package/src/options.jsx +80 -14
- package/src/select.css +87 -10
- package/src/select.jsx +46 -16
- package/src/selectJSX.jsx +129 -12
- package/src/useSelect.jsx +24 -7
- package/src/useSelectLogic.jsx +274 -163
package/demo/package.json
CHANGED
|
@@ -1,38 +1,35 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "demo",
|
|
3
|
-
"private": true,
|
|
4
|
-
"version": "0.0.0",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "vite",
|
|
8
|
-
"build": "vite build",
|
|
9
|
-
"predeploy": "npm run build",
|
|
10
|
-
"deploy": "gh-pages -d dist",
|
|
11
|
-
"lint": "eslint .",
|
|
12
|
-
"preview": "vite preview"
|
|
13
|
-
},
|
|
14
|
-
"dependencies": {
|
|
15
|
-
"@fortawesome/fontawesome-svg-core": "^7.1.0",
|
|
16
|
-
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
|
17
|
-
"@fortawesome/react-fontawesome": "^3.1.1",
|
|
18
|
-
"framer-motion": "^12.
|
|
19
|
-
"react": "^19.2.
|
|
20
|
-
"react-animated-select": "^0.
|
|
21
|
-
"react-dom": "^19.2.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"@
|
|
26
|
-
"@types/react
|
|
27
|
-
"@
|
|
28
|
-
"
|
|
29
|
-
"eslint
|
|
30
|
-
"eslint-plugin-react-
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
"vite": "npm:rolldown-vite@7.2.5"
|
|
37
|
-
}
|
|
38
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "demo",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"predeploy": "npm run build",
|
|
10
|
+
"deploy": "gh-pages -d dist",
|
|
11
|
+
"lint": "eslint .",
|
|
12
|
+
"preview": "vite preview"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"@fortawesome/fontawesome-svg-core": "^7.1.0",
|
|
16
|
+
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
|
17
|
+
"@fortawesome/react-fontawesome": "^3.1.1",
|
|
18
|
+
"framer-motion": "^12.29.0",
|
|
19
|
+
"react": "^19.2.3",
|
|
20
|
+
"react-animated-select": "^0.4.0",
|
|
21
|
+
"react-dom": "^19.2.3",
|
|
22
|
+
"vite": "^7.3.1"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@eslint/js": "^9.39.1",
|
|
26
|
+
"@types/react": "^19.2.5",
|
|
27
|
+
"@types/react-dom": "^19.2.3",
|
|
28
|
+
"@vitejs/plugin-react": "^5.1.1",
|
|
29
|
+
"eslint": "^9.39.1",
|
|
30
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
31
|
+
"eslint-plugin-react-refresh": "^0.4.24",
|
|
32
|
+
"gh-pages": "^6.3.0",
|
|
33
|
+
"globals": "^16.5.0"
|
|
34
|
+
}
|
|
35
|
+
}
|
package/demo/src/App.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {JSX, useEffect, useRef, useState} from 'react'
|
|
2
|
-
import {Select} from 'react-animated-select'
|
|
2
|
+
import {Select, Option, OptGroup} from 'react-animated-select'
|
|
3
3
|
import SlideDown from './slideDown'
|
|
4
4
|
import {motion, useInView} from 'framer-motion'
|
|
5
5
|
import {shake, clearShake} from './shake'
|
|
@@ -25,7 +25,7 @@ function App() {
|
|
|
25
25
|
|
|
26
26
|
type SelectOption = Primitive | ObjectOption
|
|
27
27
|
|
|
28
|
-
const [options, setOptions] = useState<SelectOption[]>(['Option 1', true, false, undefined, console.log, {name: 'Option 6', disabled: true}, 'Option 7', {name: 'Option 8'}, {disabled: true}, {name: 'Option 10', id: 2}, 'Option 11', 'Option 12', 'Option 13', 'Option 14', 'Option 15'])
|
|
28
|
+
const [options, setOptions] = useState<SelectOption[]>(['Option 1', true, false, undefined, console.log, {name: 'Option 6', disabled: true}, 'Option 7', {name: 'Option 8'}, {disabled: true}, {name: 'Option 10', id: 2, group: 2}, 'Option 11', 'Option 12', 'Option 13', 'Option 14', 'Option 15'])
|
|
29
29
|
|
|
30
30
|
const [value, setValue] = useState<Primitive>()
|
|
31
31
|
const [placeholder, setPlaceholder] = useState<string>('Choose option')
|
|
@@ -44,6 +44,9 @@ function App() {
|
|
|
44
44
|
const [loadMoreText, setLoadMoreText] = useState<string>('Loading')
|
|
45
45
|
const [loadOffset, setLoadOffset] = useState<number>(100)
|
|
46
46
|
const [loadAhead, setLoadAhead] = useState<number>(3)
|
|
47
|
+
const [gropValue, setGroupValue] = useState<string>('')
|
|
48
|
+
const [group, setGroup] = useState<boolean>(false)
|
|
49
|
+
const [multiple, setMultiple] = useState<boolean>(false)
|
|
47
50
|
|
|
48
51
|
type SettingItem = {
|
|
49
52
|
label: string
|
|
@@ -86,6 +89,7 @@ function App() {
|
|
|
86
89
|
))
|
|
87
90
|
|
|
88
91
|
const settings: SettingItem[] = [
|
|
92
|
+
{label: 'multiple', state: multiple, setState: setMultiple},
|
|
89
93
|
{label: 'loading', state: loading, setState: setLoading},
|
|
90
94
|
{label: 'disabled', state: disabled, setState: setDisabled},
|
|
91
95
|
{label: 'error', state: error, setState: setError},
|
|
@@ -153,10 +157,11 @@ function App() {
|
|
|
153
157
|
|
|
154
158
|
const addOption = (disabled: boolean) => {
|
|
155
159
|
!inputValue && shake(buttonRef.current)
|
|
156
|
-
const newOption = {name: inputValue, disabled: disabled}
|
|
160
|
+
const newOption = {name: inputValue, disabled: disabled, group: gropValue}
|
|
157
161
|
|
|
158
162
|
setOptions((prev) => [newOption, ...prev])
|
|
159
163
|
setInputValue('')
|
|
164
|
+
setGroupValue('')
|
|
160
165
|
}
|
|
161
166
|
|
|
162
167
|
|
|
@@ -320,7 +325,7 @@ function App() {
|
|
|
320
325
|
react-animated-select overview
|
|
321
326
|
</h3>
|
|
322
327
|
<Select
|
|
323
|
-
|
|
328
|
+
multiple={multiple}
|
|
324
329
|
hasMore={hasMore}
|
|
325
330
|
loadButton={loadButton}
|
|
326
331
|
loadButtonText={loadButtonText}
|
|
@@ -374,6 +379,13 @@ function App() {
|
|
|
374
379
|
Disabled
|
|
375
380
|
</span>
|
|
376
381
|
</label>
|
|
382
|
+
<input
|
|
383
|
+
className='rac-add-option'
|
|
384
|
+
type='text'
|
|
385
|
+
value={gropValue}
|
|
386
|
+
placeholder='group'
|
|
387
|
+
onChange={(e) => setGroupValue(e.target.value)}
|
|
388
|
+
/>
|
|
377
389
|
<button
|
|
378
390
|
ref={buttonRef}
|
|
379
391
|
onClick={() => {
|
package/demo/src/rac.css
CHANGED
|
@@ -209,6 +209,8 @@
|
|
|
209
209
|
--rac-arrow-padding: 0;
|
|
210
210
|
--rac-arrow-height: 1.5em;
|
|
211
211
|
--rac-arrow-width: 1.5em;
|
|
212
|
+
--rac-group-arrow-height: 1.5em;
|
|
213
|
+
--rac-group-arrow-width: 1.5em;
|
|
212
214
|
--rac-cancel-height: 1.5em;
|
|
213
215
|
--rac-cancel-width: 1.5em;
|
|
214
216
|
|
|
@@ -235,6 +237,11 @@
|
|
|
235
237
|
}
|
|
236
238
|
}
|
|
237
239
|
|
|
240
|
+
.rac-group-header {
|
|
241
|
+
background-color: #1e1e1e;
|
|
242
|
+
border-radius: 10px;
|
|
243
|
+
}
|
|
244
|
+
|
|
238
245
|
.rac-error-style {
|
|
239
246
|
border-color: red;
|
|
240
247
|
}
|
|
@@ -369,7 +376,9 @@
|
|
|
369
376
|
min-height: 100%;
|
|
370
377
|
|
|
371
378
|
@media (max-width: 1024px) {
|
|
372
|
-
|
|
379
|
+
min-height: auto;
|
|
380
|
+
height: fit-content;
|
|
381
|
+
overflow: visible;
|
|
373
382
|
}
|
|
374
383
|
}
|
|
375
384
|
|
|
@@ -388,7 +397,10 @@
|
|
|
388
397
|
@media (max-width: 1024px) {
|
|
389
398
|
border: none;
|
|
390
399
|
background-color: initial;
|
|
400
|
+
min-height: auto;
|
|
401
|
+
height: fit-content;
|
|
391
402
|
}
|
|
403
|
+
|
|
392
404
|
}
|
|
393
405
|
|
|
394
406
|
.rac-option-title {
|
|
@@ -728,7 +740,6 @@
|
|
|
728
740
|
}
|
|
729
741
|
|
|
730
742
|
.rac-select-option {
|
|
731
|
-
padding: 0.4vw 0.5vw;
|
|
732
743
|
border-radius: 1vw;
|
|
733
744
|
text-overflow: ellipsis;
|
|
734
745
|
overflow: hidden;
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const n=require("react"),we=require("react-transition-group"),rr=require("react-dom");var je={exports:{}},Ee={};var He;function tr(){if(He)return Ee;He=1;var e=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function l(a,c,s){var E=null;if(s!==void 0&&(E=""+s),c.key!==void 0&&(E=""+c.key),"key"in c){s={};for(var m in c)m!=="key"&&(s[m]=c[m])}else s=c;return c=s.ref,{$$typeof:e,type:a,key:E,ref:c!==void 0?c:null,props:s}}return Ee.Fragment=o,Ee.jsx=l,Ee.jsxs=l,Ee}var ve={};var Me;function nr(){return Me||(Me=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===b?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case C:return"Fragment";case N:return"Profiler";case P:return"StrictMode";case X:return"Suspense";case re:return"SuspenseList";case z: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 O:return"Portal";case U:return r.displayName||"Context";case F:return(r._context.displayName||"Context")+".Consumer";case Q:var p=r.render;return r=r.displayName,r||(r=p.displayName||p.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case te:return p=r.displayName||null,p!==null?p:e(r.type)||"Memo";case u:p=r._payload,r=r._init;try{return e(r(p))}catch{}}return null}function o(r){return""+r}function l(r){try{o(r);var p=!1}catch{p=!0}if(p){p=console;var S=p.error,T=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return S.call(p,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",T),o(r)}}function a(r){if(r===C)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===u)return"<...>";try{var p=e(r);return p?"<"+p+">":"<...>"}catch{return"<...>"}}function c(){var r=v.A;return r===null?null:r.getOwner()}function s(){return Error("react-stack-top-frame")}function E(r){if($.call(r,"key")){var p=Object.getOwnPropertyDescriptor(r,"key").get;if(p&&p.isReactWarning)return!1}return r.key!==void 0}function m(r,p){function S(){L||(L=!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)",p))}S.isReactWarning=!0,Object.defineProperty(r,"key",{get:S,configurable:!0})}function y(){var r=e(this.type);return ce[r]||(ce[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 h(r,p,S,T,B,Z){var t=S.ref;return r={$$typeof:A,type:r,key:p,props:S,_owner:T},(t!==void 0?t:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:y}):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:B}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function I(r,p,S,T,B,Z){var t=p.children;if(t!==void 0)if(T)if(M(t)){for(T=0;T<t.length;T++)j(t[T]);Object.freeze&&Object.freeze(t)}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 j(t);if($.call(p,"key")){t=e(r);var g=Object.keys(p).filter(function(x){return x!=="key"});T=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",se[t+T]||(g=0<g.length?"{"+g.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} />`,
|
|
7
|
-
${
|
|
8
|
-
${!j||
|
|
9
|
-
${
|
|
10
|
-
${T?"rac-error-style":""}`,tabIndex:h?0:-1,role:"combobox","aria-haspopup":"listbox","aria-expanded":u,"aria-controls":`${s}-listbox`,"aria-label":U,"aria-disabled":E||!j,...h&&{onBlur:$,onFocus:F,onClick:k,onKeyDown:M},children:[f.jsxs("div",{className:`rac-select-title ${!T&&!P&&i?.type==="boolean"?i.raw?"rac-true-option":"rac-false-option":""}`,children:[f.jsx("span",{className:"rac-title-text",children:g},g),f.jsx(be,{visibility:P&&!T,duration:v,children:f.jsxs("span",{className:"rac-loading-dots",children:[f.jsx("i",{}),f.jsx("i",{}),f.jsx("i",{})]})})]}),f.jsxs("div",{className:"rac-select-buttons",children:[f.jsx(be,{visibility:b&&j&&!E&&!P&&!T,duration:v,style:{display:"grid"},children:O(X,{className:"rac-select-cancel",onMouseDown:K=>{K.preventDefault(),K.stopPropagation()},onClick:d})}),f.jsx(be,{visibility:h,duration:v,style:{display:"grid"},children:f.jsx("span",{className:`rac-select-arrow-wrapper ${u?"--open":""}`,children:O(B,{className:"rac-select-arrow-wrapper"})})})]}),f.jsx(Xe,{visibility:u,selectRef:t,onAnimationDone:()=>W(!0),unmount:L,duration:v,easing:z,offset:A,animateOpacity:H,children:f.jsxs("div",{onScroll:D,tabIndex:"-1",className:"rac-select-list",role:"listbox","aria-label":"Options",children:[a,!se&&ee&&f.jsxs("div",{className:"rac-select-option rac-disabled-option rac-loading-option",onClick:K=>K.stopPropagation(),children:[f.jsx("span",{className:"rac-loading-option-title",children:"Loading"}),f.jsxs("span",{className:"rac-loading-dots",children:[f.jsx("i",{}),f.jsx("i",{}),f.jsx("i",{})]})]})]})})]})]}));function Ze({disabled:t,open:s,setOpen:a,options:i=[],selectOption:g,selected:u,hasMore:h,loadMore:j,loadButton:b,loadButtonText:E,setLoadingTitle:P,loadOffset:T,loadAhead:_}){const R=n.useRef(!1),$=n.useRef(0),F=n.useRef(!1),[k,M]=n.useState(-1);n.useEffect(()=>{F.current=!1,b&&P(E)},[i.length,h,b,E,P]);const D=n.useCallback(()=>{!h||F.current||(F.current=!0,j())},[h,j]),W=n.useCallback(p=>{if(b||!h||F.current)return;const{scrollTop:v,scrollHeight:z,clientHeight:A}=p.currentTarget;z-v<=A+T&&D()},[b,h,T,D]);n.useEffect(()=>{!b&&s&&h&&k>=i.length-_&&D()},[k,s,h,i.length,_,b,D]),n.useEffect(()=>{const p=()=>{$.current=Date.now()};return window.addEventListener("focus",p),()=>window.removeEventListener("focus",p)},[]),n.useEffect(()=>{if(!s){M(-1);return}if(k>=0&&k<i.length)return;let p=-1;u&&(p=i.findIndex(v=>v.id===u.id&&!v.disabled)),p===-1&&(p=i.findIndex(v=>!v.disabled)),M(p)},[s,i,u]);const d=n.useCallback((p,v)=>{const z=L=>L&&!L.disabled&&!L.loading,A=i.length;if(A===0)return-1;let H=p;for(let L=0;L<A;L++){if(H=(H+v+A)%A,!b&&h&&(v>0&&H===0||v<0&&H===A-1))return p;if(z(i[H]))return H}return p},[i,h,b]),Y=n.useCallback(p=>{p.currentTarget.contains(p.relatedTarget)||a(!1)},[a]),J=n.useCallback(()=>{t||document.hidden||Date.now()-$.current<100||s||(a(!0),R.current=!0,setTimeout(()=>{R.current=!1},200))},[t,s,a]),U=n.useCallback(p=>{t||p.target.closest(".rac-select-cancel")||R.current||a(!s)},[t,s,a]),V=n.useCallback(p=>{if(!t)switch(p.key){case"Enter":case" ":p.preventDefault(),s?k!==-1&&i[k]&&g(i[k],p):a(!0);break;case"Escape":p.preventDefault(),a(!1);break;case"ArrowDown":p.preventDefault(),s?M(v=>d(v,1)):a(!0);break;case"ArrowUp":p.preventDefault(),s?M(v=>d(v,-1)):a(!0);break;case"Tab":s&&a(!1);break}},[t,s,a,k,i,g,d]);return n.useMemo(()=>({handleBlur:Y,handleFocus:J,handleToggle:U,handleKeyDown:V,highlightedIndex:k,setHighlightedIndex:M,handleListScroll:W}),[Y,J,U,V,k,W])}const Qe=["group","disabled","options","items","children"],Ce=["name","label","id","value"];function Be({options:t=[],jsxOptions:s=[],value:a,defaultValue:i=void 0,onChange:g,disabled:u=!1,loading:h=!1,error:j=!1,placeholder:b="Choose option",emptyText:E="No options",disabledText:P="Disabled",loadingText:T="Loading",errorText:_="Failed to load",disabledOption:R="Disabled option",emptyOption:$="Empty option",invalidOption:F="Invalid option",setVisibility:k,hasMore:M,loadButton:D,setLoadingTitle:W,loadingTitle:d,loadMoreText:Y,loadMore:J,childrenFirst:U}){const V=n.useId(),p=a!==void 0,[v,z]=n.useState(null),A=n.useCallback((r,o=!1)=>{const c=Ce.find(w=>r[w]!==void 0&&r[w]!==null&&r[w]!=="");if(c)return String(r[c]);const S=Object.entries(r).find(([w,x])=>!Qe.includes(w)&&x!=null&&x!=="");return S?String(S[1]):o},[]),H=n.useCallback((r,o,c="normal",S=null,w=!1)=>{let x="",N=r,l=w,m=null,G=S;return r==null||r===""?{id:`${V}-${c}-${o}`,userId:null,name:$,raw:null,disabled:!0,type:"normal",group:G}:typeof r=="function"?{id:`${V}-inv-${o}`,userId:null,name:F,raw:r,disabled:!0,invalid:!0,type:"normal",group:G}:(typeof r=="object"&&!Array.isArray(r)?(G||(G=r.group||null),l=l||!!r.disabled,m=r.id??r.value??r.name??r.label,N=r.value!==void 0?r.value:r.id!==void 0?r.id:r,x=A(r,l?R:$),x===$&&!l&&(l=!0)):(x=String(r),m=r,N=r),{id:`${V}-${c}-${o}`,userId:m,name:x,raw:N,original:r,disabled:l,type:typeof N=="boolean"?"boolean":"normal",group:G})},[V,$,F,R,A]),[L,B]=n.useState(new Set),X=n.useCallback(r=>{B(o=>{const c=new Set(o);return c.has(r)?c.delete(r):c.add(r),c})},[]),O=n.useMemo(()=>{const r=[],o=(l,m,G=null,Z=!1)=>{if(l&&typeof l=="object"&&!Array.isArray(l)&&"options"in l){const re=A(l,"Empty group",!0),ie=Z||!!l.disabled,Q=l.options;Array.isArray(Q)?Q.forEach((ce,ae)=>o(ce,`${m}-${ae}`,re,ie)):Q&&typeof Q=="object"?Object.entries(Q).forEach(([ce,ae],pe)=>o(ae,`${m}-${pe}`,re,ie)):o(Q,`${m}-0`,re,ie);return}if(l&&typeof l=="object"&&!Array.isArray(l)&&!Ce.some(re=>re in l)&&!("group"in l)){Object.entries(l).forEach(([re,ie],Q)=>{r.push(H(ie,`${m}-${Q}`,"normal",G,Z))});return}r.push(H(l,m,"normal",G,Z))};Array.isArray(t)&&t.forEach((l,m)=>o(l,m));const c=s.map(l=>{if(l.isGroupMarker)return{...l,type:"group-marker"};const m=(l.value==null||l.value==="")&&!l.label;return{...l,id:`jsx-${l.id}`,userId:l.id,raw:l.value,original:l.value,name:m?$:l.label,disabled:!!l.disabled||m,type:typeof l.value=="boolean"?"boolean":"normal",group:l.group||null}}),S=U?[...c,...r]:[...r,...c],w=[],x=new Map,N=[];return S.forEach(l=>{if(!l.group)N.push({type:"item",data:l});else if(x.has(l.group)||(x.set(l.group,[]),N.push({type:"group",name:l.group})),!l.isGroupMarker){const m=L.has(l.group);x.get(l.group).push({...l,hidden:!m})}}),N.forEach((l,m)=>{if(l.type==="item")w.push(l.data);else{const G=L.has(l.name);w.push({id:`group-header-${l.name}-${m}`,name:l.name,disabled:!1,groupHeader:!0,expanded:G,type:"group"});const Z=x.get(l.name);w.push(...Z)}}),M&&D&&w.push({id:"special-load-more-id",name:d,loadMore:!0,loading:d===Y,type:"special"}),w},[t,s,V,H,U,M,D,d,Y,E,$,A]),ee=n.useCallback(r=>{if(r==null)return null;const o=O.find(c=>c.original===r||c.raw===r||c.userId===r);if(o)return o.id;if(typeof r=="object")try{const c=JSON.stringify(r);return O.find(S=>S.original&&typeof S.original=="object"&&JSON.stringify(S.original)===c)?.id??null}catch{return null}return null},[O]);n.useEffect(()=>{const r=p?a:i,o=O.find(S=>S.id===v);o&&(o.original===r||o.raw===r||o.userId===r)||z(ee(r))},[a,i,p,O,ee,v]);const se=n.useMemo(()=>O.find(r=>r.id===v)??null,[v,O]),K=n.useCallback((r,o)=>{if(r.groupHeader){o?.stopPropagation(),o?.preventDefault(),X(r.name);return}if(r.disabled||r.loadMore){o?.stopPropagation(),o?.preventDefault(),r.loadMore&&(W(Y),J());return}z(r.id),g?.(r.original,r.userId),k(!1)},[g,k,J,Y,W]),e=n.useCallback(()=>{z(null),g?.(null,null)},[g]);return{normalizedOptions:O,selected:se,selectOption:K,clear:e,hasOptions:O.length>0,active:!j&&!h&&!u&&O.length>0,selectedValue:a??i,placeholder:b,emptyText:E,disabledText:P,loadingText:T,errorText:_,disabledOption:R,emptyOption:$,invalidOption:F,disabled:u,loading:h,error:j,expandedGroups:L,toggleGroup:X,visibleOptions:O.filter(r=>!r.hidden)}}function er({visibility:t,children:s,duration:a=300}){const i=n.useRef(null);return f.jsx(je.CSSTransition,{in:t,timeout:300,classNames:"slideDown",unmountOnExit:!0,nodeRef:i,onEnter:()=>i.current.style.height="0px",onEntering:()=>i.current.style.height=i.current.scrollHeight+"px",onEntered:()=>i.current.style.height="auto",onExit:()=>i.current.style.height=i.current.scrollHeight+"px",onExiting:()=>i.current.style.height="0px",children:f.jsx("div",{ref:i,style:{overflow:"hidden",transition:`height ${a}ms ease`,paddingLeft:"1em"},className:"slideDown-enter-done",tabIndex:-1,children:s})})}const Te=(t,s)=>{if(!t)return null;if(typeof t=="string")return f.jsx("img",{src:t,...s,alt:""});if(n.isValidElement(t))return n.cloneElement(t,s);if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const a=t;return f.jsx(a,{...s})}return null},rr=(t,s,a,i,g,u,h)=>t.groupHeader?"rac-select-option rac-group-option":["rac-select-option",t.className,i===t.id&&"rac-selected",s===a&&"rac-highlighted",(t.disabled||t.loading)&&"rac-disabled-option",(t.invalid||t.name===h)&&"rac-invalid-option",t.loadMore&&g===u&&"rac-loading-option",typeof t.raw=="boolean"&&(t.raw?"rac-true-option":"rac-false-option")].filter(Boolean).join(" "),tr=n.forwardRef(({unmount:t,children:s,renderedDropdown:a,visibility:i,ownBehavior:g=!1,alwaysOpen:u=!1,duration:h=300,easing:j="ease-out",offset:b=2,animateOpacity:E=!0,style:P={},className:T="",ArrowIcon:_=Ue,ClearIcon:R=Je,hasMore:$=!1,loadMore:F=()=>{console.warn("loadMore not implemented")},loadButton:k=!1,loadButtonText:M="Load more",loadMoreText:D="Loading",loadOffset:W=100,loadAhead:d=3,childrenFirst:Y=!1,...J},U)=>{const V=n.useId(),p=n.useMemo(()=>V.replace(/:/g,""),[V]),[v,z]=n.useState([]),[A,H]=n.useState(!1),[L,B]=n.useState(k?M:D),[X,O]=n.useState(!1),ee=n.useRef(null),se=n.useCallback(C=>{z(I=>{const q=I.findIndex(te=>te.id===C.id);if(q!==-1){const te=I[q];if(te.label===C.label&&te.value===C.value&&te.disabled===C.disabled&&te.group===C.group)return I;const ue=[...I];return ue[q]=C,ue}return[...I,C]})},[]),K=n.useCallback(C=>{z(I=>{const q=I.filter(te=>te.id!==C);return q.length===I.length?I:q})},[]),e=u?!0:g?!!i:A,r=n.useCallback(C=>{u||g||H(C)},[u,g]),o=Be({...J,setVisibility:r,jsxOptions:v,hasMore:$,loadButton:k,loadingTitle:L,loadMore:F,loadMoreText:D,setLoadingTitle:B,childrenFirst:Y}),{normalizedOptions:c,selected:S,selectOption:w,clear:x,hasOptions:N,active:l,selectedValue:m,disabled:G,loading:Z,error:le,placeholder:re,invalidOption:ie,emptyText:Q,disabledText:ce,loadingText:ae,errorText:pe,expandedGroups:me}=o,Ae=Ze({setLoadingTitle:B,loadButton:k,loadButtonText:M,hasMore:$,loadMore:F,disabled:G,open:e,setOpen:r,options:c,selectOption:w,selected:S,loadOffset:W,loadAhead:d}),{handleListScroll:Oe,handleBlur:Pe,handleFocus:De,handleToggle:Le,handleKeyDown:Fe,highlightedIndex:oe,setHighlightedIndex:xe}=Ae;n.useImperativeHandle(U,()=>ee.current),n.useEffect(()=>{e||O(!1)},[e]),n.useEffect(()=>{(le||G||Z||!N)&&r(!1)},[le,G,Z,N,r]),n.useEffect(()=>{if(e&&X&&oe!==-1){const C=c[oe];C&&document.getElementById(`opt-${p}-${ye(C.id)}`)?.scrollIntoView({block:"nearest"})}},[oe,e,X,c,p]);const Ee=n.useMemo(()=>m!=null&&!(Array.isArray(m)&&m.length===0)&&!(typeof m=="object"&&Object.keys(m).length===0),[m]),Me=n.useMemo(()=>{if(le)return pe;if(Z)return ae;if(G)return ce;if(S)return S.jsx??S.name;if(Ee){const C=c.find(I=>I.raw===m);return C?C.name:typeof m=="object"&&m!==null?m.name??m.label??"Selected Object":String(m)}return N?re:Q},[G,Z,le,N,S,m,re,pe,ae,ce,Q,Ee,c]),He=n.useMemo(()=>{const C=[];let I=[],q=null;const te=c.reduce((y,ne)=>(ne.group&&(y[ne.group]=(y[ne.group]||0)+1),y),{}),ue=y=>{y===null||I.length===0||(C.push(f.jsx(er,{visibility:me.has(y),children:I},`slide-${y}`)),I=[])},ke=(y,ne)=>f.jsxs("div",{id:`opt-${p}-${ye(y.id)}`,role:"option","aria-selected":S?.id===y.id,"aria-disabled":y.disabled||y.loading,className:rr(y,ne,oe,S?.id,L,D,ie),onClick:fe=>!y.loading&&w(y,fe),onMouseEnter:()=>!y.disabled&&!y.loading&&xe(ne),children:[y.jsx??y.name,y.loading&&f.jsxs("span",{className:"rac-loading-dots",children:[f.jsx("i",{}),f.jsx("i",{}),f.jsx("i",{})]})]},y.id);return c.forEach((y,ne)=>{const fe=y.groupHeader,Re=!!y.group;if((fe||!Re&&q!==null)&&(ue(q),fe||(q=null)),fe){q=y.name;const Ge=me.has(y.name),Ie=te[y.name]>0;C.push(f.jsxs("div",{className:"rac-group-header",onClick:Ye=>w(y,Ye),children:[f.jsx("span",{className:"rac-group-title-text",children:y.name}),f.jsx(be,{visibility:Ie,duration:h,style:{display:"grid"},children:f.jsx("span",{className:`rac-group-arrow-wrapper ${Ge?"--open":""}`,children:Te(_,{className:"rac-select-arrow-wrapper"})})})]},y.id))}else Re?I.push(ke(y,ne)):C.push(ke(y,ne))}),ue(q),C},[c,w,p,S,oe,L,D,ie,xe,me,_]);return f.jsx(Ke,{selectRef:ee,selectId:p,renderIcon:Te,normalizedOptions:c,renderOptions:He,selected:S,title:Me,visibility:e,active:l,hasOptions:N,hasActualValue:Ee,highlightedIndex:oe,animationFinished:X,disabled:G,loading:Z,error:le,setVisibility:r,setHighlightedIndex:xe,setAnimationFinished:O,handleBlur:Pe,handleFocus:De,handleToggle:Le,handleKeyDown:Fe,handleListScroll:Oe,selectOption:w,clear:x,registerOption:se,unregisterOption:K,children:s,renderedDropdown:a,placeholder:re,className:T,style:P,duration:h,easing:j,offset:b,animateOpacity:E,unmount:t,ArrowIcon:_,ClearIcon:R,hasMore:$,loadButton:k})}),Ne=n.createContext(null);function nr({children:t,name:s,label:a,value:i,id:g,emptyGroupText:u="Empty group"}){const h=n.useContext(Se),j=n.useMemo(()=>{const E=s??a??i??g;return E!=null&&E!==""?String(E):u},[s,a,i,g,u]),b=n.useMemo(()=>`group-marker-${ye(j)}`,[j]);return n.useEffect(()=>{if(!h)return;const E={id:b,group:j,isGroupMarker:!0,disabled:!0};return h.registerOption(E),()=>h.unregisterOption(b)},[h.registerOption,h.unregisterOption,b,j]),f.jsx(Ne.Provider,{value:j,children:t})}const ve=t=>t?typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(ve).join(" ").replace(/\s+/g," ").trim():n.isValidElement(t)?ve(t.props.children):"":"";function sr({value:t,id:s,className:a,children:i,disabled:g,group:u}){const h=n.useContext(Se),j=n.useContext(Ne),b=h?.registerOption,E=h?.unregisterOption,P=n.useId(),T=n.useMemo(()=>s?String(s):P.replace(/:/g,""),[s,P]);return n.useEffect(()=>{if(!b)return;const _=ve(i);let R="";return typeof i=="string"&&i!==""?R=i:_?R=_:t!=null&&(R=String(t)),b({id:T,value:t!==void 0?t:_,label:R,jsx:i,className:a,disabled:!!g,group:u||j||null}),()=>E(T)},[T,t,i,a,g,u,j,b,E]),null}exports.OptGroup=nr;exports.Option=sr;exports.Select=tr;
|
|
6
|
+
<%s key={someKey} {...props} />`,T,t,g,t),se[t+T]=!0)}if(t=null,S!==void 0&&(l(S),t=""+S),E(p)&&(l(p.key),t=""+p.key),"key"in p){S={};for(var i in p)i!=="key"&&(S[i]=p[i])}else S=p;return t&&m(S,typeof r=="function"?r.displayName||r.name||"Unknown":r),h(r,t,S,c(),B,Z)}function j(r){V(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===u&&(r._payload.status==="fulfilled"?V(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function V(r){return typeof r=="object"&&r!==null&&r.$$typeof===A}var W=n,A=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),P=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),U=Symbol.for("react.context"),Q=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),te=Symbol.for("react.memo"),u=Symbol.for("react.lazy"),z=Symbol.for("react.activity"),b=Symbol.for("react.client.reference"),v=W.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,M=Array.isArray,k=console.createTask?console.createTask:function(){return null};W={react_stack_bottom_frame:function(r){return r()}};var L,ce={},K=W.react_stack_bottom_frame.bind(W,s)(),ae=k(a(s)),se={};ve.Fragment=C,ve.jsx=function(r,p,S){var T=1e4>v.recentlyCreatedOwnerStacks++;return I(r,p,S,!1,T?Error("react-stack-top-frame"):K,T?k(a(r)):ae)},ve.jsxs=function(r,p,S){var T=1e4>v.recentlyCreatedOwnerStacks++;return I(r,p,S,!0,T?Error("react-stack-top-frame"):K,T?k(a(r)):ae)}})()),ve}var Ye;function sr(){return Ye||(Ye=1,process.env.NODE_ENV==="production"?je.exports=tr():je.exports=nr()),je.exports}var f=sr();const Fe=({className:e="",...o})=>f.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",...o,children:f.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="",...o})=>f.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...o,children:f.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="",...o})=>f.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",...o,children:f.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"})}),Ae=(e,o="invalid-option",l="")=>{const a=l?l.replace(/:/g,""):"";if(typeof e!="string"||!e.trim())return a?`${o}-${a}`:`${o}-${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||`${o}-${Math.random().toString(36).slice(2,8)}`:a?`${o}-${a}`:`${o}-${Math.random().toString(36).slice(2,8)}`},De=n.createContext(null);function or({visibility:e,children:o,selectRef:l,onAnimationDone:a,unmount:c=!0,duration:s,easing:E,offset:m,animateOpacity:y,style:h,className:I}){const j=n.useRef(null),[V,W]=n.useState(0),[A,O]=n.useState({top:0,left:0,width:0}),C=n.useCallback(()=>{if(l?.current){const u=l.current.getBoundingClientRect(),z=window.innerHeight,b=j.current?.scrollHeight||250,v=z-u.bottom,$=v<b&&u.top>v;O({top:u.top,bottom:u.bottom,left:u.left,width:u.width,isUpward:$})}},[l]);n.useEffect(()=>{if(e)return C(),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C)}},[e,C]);const P=`height var(--rac-duration) ${E}${y?`, opacity var(--rac-duration) ${E}`:""}`;n.useEffect(()=>{if(!l?.current)return;W(l.current.offsetHeight);const z=new ResizeObserver(b=>{for(let v of b)W(v.target.offsetHeight)});return z.observe(l.current),()=>z.disconnect()},[l]);const N={position:"fixed","--rac-duration":`${s}ms`,"--rac-easing":E,left:`${A.left}px`,width:`${A.width}px`,overflow:"hidden",zIndex:"1",height:e?"auto":"0px",opacity:y?e?1:0:1,pointerEvents:e?"all":"none",visibility:V?"visible":"hidden",boxSizing:"border-box",transformOrigin:A.isUpward?"bottom":"top",...A.isUpward?{bottom:`${window.innerHeight-A.top+m}px`,top:"auto"}:{top:`${A.bottom+m}px`,bottom:"auto"},...Object.fromEntries(Object.entries(h||{}).map(([u,z])=>[u.startsWith("--")?u:`--rac-${u.replace(/([A-Z])/g,"-$1").toLowerCase()}`,z]))},F=n.useCallback(()=>{const u=j.current;u&&(u.style.height="0px",y&&(u.style.opacity="0"),u.style.transition="")},[y]),U=n.useCallback(()=>{const u=j.current;u&&(u.style.transition=P,u.style.height=`${u.scrollHeight}px`,y&&(u.style.opacity="1"))},[P,y]),Q=n.useCallback(()=>{const u=j.current;u&&(u.style.height="auto",u.style.transition="",a&&a())},[a]),X=n.useCallback(()=>{const u=j.current;u&&(u.style.height=`${u.scrollHeight}px`,y&&(u.style.opacity="1"),u.offsetHeight,u.style.transition=P)},[P,y]),re=n.useCallback(()=>{const u=j.current;u&&(u.style.height="0px",y&&(u.style.opacity="0"))},[y]),te=n.useCallback(()=>{const u=j.current;u&&(u.style.transition="")},[]);return rr.createPortal(f.jsx(we.CSSTransition,{in:e,timeout:s,classNames:"rac-options",unmountOnExit:c,nodeRef:j,onEnter:F,onEntering:U,onEntered:Q,onExit:X,onExiting:re,onExited:te,children:f.jsx("div",{ref:j,className:`rac-options ${I||""}`,style:{...N,"--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:u=>{u.preventDefault()},children:o})}),document.body)}const ar=n.memo(or,(e,o)=>e.visibility===o.visibility&&e.duration===o.duration&&e.easing===o.easing&&e.offset===o.offset&&e.animateOpacity===o.animateOpacity&&e.selectRef===o.selectRef&&e.children===o.children&&JSON.stringify(e.style)===JSON.stringify(o.style));function _e({visibility:e,children:o,duration:l=300,unmount:a,style:c}){const s=n.useRef(null);return f.jsx(we.CSSTransition,{in:e,timeout:l,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:f.jsx("div",{ref:s,style:{...c,overflow:"hidden",transition:`width ${l}ms ease`},children:o})})}const Ge=({children:e,duration:o,widthMode:l=!1,...a})=>{const c=n.useRef(null);return f.jsx(we.CSSTransition,{nodeRef:c,timeout:o,classNames:"rac-slide-left",...a,onEnter:()=>{const s=c.current;l?s.style.width="0px":(s.style.height="0px",s.style.transform="translateY(-10px)"),s.style.opacity="0"},onEntering:()=>{const s=c.current;s.offsetHeight,l?s.style.width=s.scrollWidth+"px":(s.style.height=s.scrollHeight+"px",s.style.transform="translateY(0)"),s.style.opacity="1"},onEntered:()=>{const s=c.current;s.style.width=l?"auto":"",s.style.height=l?"":"auto",s.style.opacity="1",s.style.transform=""},onExit:()=>{const s=c.current;l?s.style.width=s.offsetWidth+"px":(s.style.height=s.offsetHeight+"px",s.style.position="absolute"),s.style.opacity="1"},onExiting:()=>{const s=c.current;l?s.style.width="0px":(s.style.height="0px",s.style.transform="translateY(10px)"),s.style.opacity="0"},children:f.jsx("div",{ref:c,style:{display:"flex",alignItems:"center",height:"100%",overflow:"hidden",whiteSpace:"nowrap",transition:`all ${o}ms ease`,top:0,left:0},children:e})})},lr=n.memo(({element:e,index:o,remove:l,renderIcon:a,DelIcon:c,normalizedOptions:s})=>{let E=null;if(e?.jsx)E=e.jsx;else if(e?.name)E=e.name;else if(e?.raw!==void 0){const h=s.find(I=>I.raw===e.raw||I.original===e.raw||I.userId===e.raw);h&&(E=h.jsx??h.name)}E==null&&(E=typeof e=="object"?e.label??e.name??e.value??"Selected item":String(e));const m=n.useCallback(h=>{h.stopPropagation(),h.preventDefault(),l(e.id)},[e.id,l]),y=n.useCallback(h=>{h.stopPropagation(),h.preventDefault()},[]);return f.jsxs("div",{className:"rac-multiple-selected-option",children:[E,a(c,{onClick:m,onMouseDown:y})]})}),cr=n.memo(({selectRef:e,selectId:o,removeOption:l,renderOptions:a,selected:c,selectedIDs:s,setSelectedIds:E,normalizedOptions:m,title:y,visibility:h,active:I,hasOptions:j,hasActualValue:V,optionsClassName:W,selectedText:A,disabled:O,loading:C,error:P,registerOption:N,unregisterOption:F,handleBlur:U,handleFocus:Q,handleToggle:X,handleKeyDown:re,handleListScroll:te,setAnimationFinished:u,clear:z,children:b,placeholder:v,className:$,style:M,duration:k,easing:L,offset:ce,animateOpacity:K,unmount:ae,ArrowIcon:se,ClearIcon:r,DelIcon:p,renderIcon:S,hasMore:T,loadButton:B})=>{const Z=n.useRef(null);n.useEffect(()=>{e&&(typeof e=="function"?e(Z.current):e.current=Z.current)},[e]);const t=n.useCallback(i=>{l?l(i):E(x=>x.filter(_=>_.id!==i))},[l,E]),g=s?.map((i,x)=>f.jsx(Ge,{duration:k,widthMode:!0,children:f.jsx(lr,{element:i,index:x,remove:t,renderIcon:S,DelIcon:p,normalizedOptions:m},i.id??x)},i.id??x));return f.jsxs(De.Provider,{value:{registerOption:N,unregisterOption:F},children:[b,f.jsxs("div",{ref:Z,style:{...M,"--rac-duration":`${k}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
|
+
${!j||O?"rac-disabled-style":""}
|
|
9
|
+
${C?"rac-loading-style":""}
|
|
10
|
+
${P?"rac-error-style":""}`,tabIndex:I?0:-1,role:"combobox","aria-haspopup":"listbox","aria-expanded":h,"aria-controls":`${o}-listbox`,"aria-label":v,"aria-disabled":O||!j,...I&&{onBlur:U,onFocus:Q,onClick:X,onKeyDown:re},children:[f.jsx("div",{className:`rac-select-title
|
|
11
|
+
${!P&&!C&&c?.type==="boolean"?c.raw?"rac-true-option":"rac-false-option":""}
|
|
12
|
+
`,children:f.jsx(we.TransitionGroup,{component:null,children:s?.length&&!A?g:f.jsxs(Ge,{duration:k,widthMode:!0,children:[f.jsx("span",{className:"rac-title-text",children:y}),f.jsx(_e,{visibility:C&&!P,duration:k,children:f.jsxs("span",{className:"rac-loading-dots",children:[f.jsx("i",{}),f.jsx("i",{}),f.jsx("i",{})]})})]},y)})}),f.jsxs("div",{className:"rac-select-buttons",children:[f.jsx(_e,{visibility:V&&j&&!O&&!C&&!P,duration:k,style:{display:"grid"},children:S(r,{className:"rac-select-cancel",onMouseDown:i=>{i.preventDefault(),i.stopPropagation()},onClick:z})}),f.jsx(_e,{visibility:I,duration:k,style:{display:"grid"},children:f.jsx("span",{className:`rac-select-arrow-wrapper ${h?"--open":""}`,children:S(se,{className:"rac-select-arrow-wrapper"})})})]}),f.jsx(ar,{className:W,visibility:h,selectRef:e,onAnimationDone:()=>u(!0),unmount:ae,duration:k,easing:L,offset:ce,animateOpacity:K,style:{...M,"--rac-duration":`${k}ms`},children:f.jsxs("div",{onScroll:te,tabIndex:"-1",className:"rac-select-list",role:"listbox","aria-label":"Options",children:[a,!B&&T&&f.jsxs("div",{className:"rac-select-option rac-disabled-option rac-loading-option",onClick:i=>i.stopPropagation(),children:[f.jsx("span",{className:"rac-loading-option-title",children:"Loading"}),f.jsxs("span",{className:"rac-loading-dots",children:[f.jsx("i",{}),f.jsx("i",{}),f.jsx("i",{})]})]})]})})]})]})});function ur({disabled:e,open:o,setOpen:l,options:a=[],selectOption:c,selected:s,multiple:E,hasMore:m,loadMore:y,loadButton:h,loadButtonText:I,setLoadingTitle:j,loadOffset:V,loadAhead:W,expandedGroups:A}){const O=n.useRef(!1),C=n.useRef(0),P=n.useRef(!1),[N,F]=n.useState(-1);n.useEffect(()=>{P.current=!1,h&&j(I)},[a.length,m,h,I,j]);const U=n.useCallback(()=>{!m||P.current||(P.current=!0,y())},[m,y]),Q=n.useCallback(b=>{if(h||!m||P.current)return;const{scrollTop:v,scrollHeight:$,clientHeight:M}=b.currentTarget;$-v<=M+V&&U()},[h,m,V,U]);n.useEffect(()=>{!h&&o&&m&&N>=a.length-W&&U()},[N,o,m,a.length,W,h,U]),n.useEffect(()=>{const b=()=>{C.current=Date.now()};return window.addEventListener("focus",b),()=>window.removeEventListener("focus",b)},[]),n.useEffect(()=>{if(!o){F(-1);return}if(N>=0&&N<a.length&&!(!a[N]||a[N].hidden||a[N].groupHeader))return;let b=-1;if(s){const v=E?s[0]:s;v&&(b=a.findIndex($=>$.id===v.id&&!$.disabled&&!$.hidden&&!$.groupHeader))}b===-1&&(b=a.findIndex(v=>!v.disabled&&!v.hidden&&!v.groupHeader)),F(b)},[o,a,s]);const X=n.useCallback((b,v)=>{const $=L=>L&&!L?.groupHeader&&(!L?.group||A?.has(L?.group))&&!L?.disabled&&!L?.loading,M=a.length;if(M===0)return-1;let k=b;for(let L=0;L<M;L++){if(k=(k+v+M)%M,!h&&m&&(v>0&&k===0||v<0&&k===M-1))return b;if($(a[k]))return k}return b},[a,m,h,A]),re=n.useCallback(b=>{const v=b.relatedTarget?.closest(".rac-options");!b.currentTarget.contains(b.relatedTarget)&&!v&&l(!1)},[l]),te=n.useCallback(()=>{e||document.hidden||Date.now()-C.current<100||o||(l(!0),O.current=!0,setTimeout(()=>{O.current=!1},200))},[e,o,l]),u=n.useCallback(b=>{e||b.target.closest(".rac-select-cancel")||O.current||l(!o)},[e,o,l]),z=n.useCallback(b=>{if(!e)switch(b.key){case"Enter":case" ":b.preventDefault(),o?N!==-1&&a[N]&&c(a[N],b):l(!0);break;case"Escape":b.preventDefault(),l(!1);break;case"ArrowDown":b.preventDefault(),o?F(v=>X(v,1)):l(!0);break;case"ArrowUp":b.preventDefault(),o?F(v=>X(v,-1)):l(!0);break;case"Tab":o&&l(!1);break}},[e,o,l,N,a,c,X]);return n.useMemo(()=>({handleBlur:re,handleFocus:te,handleToggle:u,handleKeyDown:z,highlightedIndex:N,setHighlightedIndex:F,handleListScroll:Q}),[re,te,u,z,N,Q])}const dr=["group","disabled","options","items","children"],Oe=["name","label","id","value"],ke=(e,o=!1)=>{if(o&&typeof e.group=="string")return e.group;const l=Oe.find(c=>e[c]!=null&&e[c]!=="");if(l)return String(e[l]);const a=Object.entries(e).find(([c,s])=>!dr.includes(c)&&s!=null&&s!=="");return a?String(a[1]):null};function fr({options:e=[],jsxOptions:o=[],value:l,defaultValue:a,onChange:c,disabled:s=!1,loading:E=!1,error:m=!1,multiple:y=!1,placeholder:h="Choose option",emptyText:I="No options",disabledText:j="Disabled",loadingText:V="Loading",errorText:W="Failed to load",disabledOption:A="Disabled option",emptyOption:O="Empty option",invalidOption:C="Invalid option",setVisibility:P,hasMore:N,loadButton:F,setLoadingTitle:U,loadingTitle:Q,loadMoreText:X,loadMore:re,childrenFirst:te,groupsClosed:u}){const z=n.useId(),b=l!==void 0,[v,$]=n.useState(null),[M,k]=n.useState([]),[L,ce]=n.useState(new Set),K=n.useRef(null),ae=n.useCallback(t=>{ce(g=>{const i=new Set(g);return i.has(t)?i.delete(t):i.add(t),i})},[]),se=n.useCallback((t,g,i="n",x=null,_=!1)=>{const ee=`${z}-${i}-${g}`;if(t==null||t==="")return{id:ee,userId:null,name:O,raw:null,disabled:!0,type:"normal",group:x,groupDisabled:_};if(typeof t=="function")return{id:ee,userId:null,name:C,raw:t,disabled:!0,invalid:!0,type:"normal",group:x};if(typeof t=="object"&&!Array.isArray(t)){const de=x||t.group||null,ne=_||t.disabled===!0,pe=t.id??t.value??t.name??t.label,D=t.value!==void 0?t.value:t.id!==void 0?t.id:t;let d=ke(t)||(ne?A:O);return{id:ee,userId:pe,name:d,raw:D,original:t,disabled:ne||d===O&&!ne,type:typeof D=="boolean"?"boolean":"normal",group:de,groupDisabled:_}}return{id:ee,userId:t,name:String(t),raw:t,original:t,disabled:_,type:typeof t=="boolean"?"boolean":"normal",group:x}},[z,O,C,A]),r=n.useMemo(()=>{const t=new Map,g=[],i=o.map((d,R)=>{if(d.isGroupMarker)return{...d,type:"group-marker"};const G=!d.label&&!d.userId&&!d.value&&(d.value===void 0||d.value===null||d.value==="")&&!d.hasJsx;return{...d,id:`jsx-${d.id}`,index:R,userId:d.userId,raw:d.value,original:d.value,name:G?O:d.label||d.userId||String(d.value||""),disabled:!!d.disabled||G,type:typeof d.value=="boolean"?"boolean":"normal",group:d.group||null}});let x=0;const _=(d,R=null,G=!1,ie="0")=>{Array.isArray(d)||(d=[d]),d.forEach((Y,he)=>{if(!Y)return;const fe=`${ie}-${he}`,xe=typeof Y=="object"&&!Array.isArray(Y);if(xe&&("options"in Y||"group"in Y&&!Oe.some(J=>J in Y))){const J=ke(Y,!0)||"Empty group";t.has(J)||t.set(J,{disabled:!!Y.disabled,closedByDefault:!!Y.disabled||u,items:[]}),Y.options?_(Y.options,J,G||!!Y.disabled,fe):g.push({id:`empty-${J}-${fe}`,name:J,group:J,isPlaceholder:!0,type:"group-marker",index:x++})}else if(xe&&!Oe.some(J=>J in Y)&&!Y.group)Object.entries(Y).forEach(([J,ye],$e)=>{const Ce=se(ye,`${fe}-${$e}`,"normal",R,G);g.push({...Ce,index:x++})});else{const J=se(Y,fe,"normal",R,G);g.push({...J,index:x++})}})};_(e);const ee=te?[...i,...g]:[...g,...i];if(!K.current)K.current=new Map(ee.map((d,R)=>[d.id,R]));else{let d=!1;if(ee.forEach(R=>{K.current.has(R.id)||(d=!0)}),d){const R=new Map;ee.forEach((G,ie)=>{R.set(G.id,ie)}),K.current=R}}const de=[...ee].sort((d,R)=>{const G=K.current.get(d.id)??999999,ie=K.current.get(R.id)??999999;return G-ie}),ne=[],pe=new Set;de.forEach(d=>{if(!d.group)ne.push({type:"item",data:d});else if(pe.has(d.group)||(pe.add(d.group),ne.push({type:"group",name:d.group})),!d.isPlaceholder&&!d.isGroupMarker){const R=t.get(d.group)||{items:[]};t.has(d.group)||t.set(d.group,R),R.items.push(d)}});const D=[];return ne.forEach(d=>{if(d.type==="item")D.push(d.data);else{const R=d.name,G=t.get(R),ie=L.has(R);D.push({id:`group-header-${R}`,name:R,disabled:!!G?.disabled,groupHeader:!0,expanded:ie,type:"group",hidden:!1}),G?.items.forEach(Y=>{const he=L.size>0?!ie:!!u;D.push({...Y,hidden:he})})}}),N&&F&&D.push({id:"special-load-more-id",name:Q,loadMore:!0,loading:Q===X,type:"special"}),D},[e,o,z,se,te,N,F,Q,X,u,L,O]);n.useEffect(()=>{if(L.size>0||u)return;const t=new Set;r.forEach(g=>{g.groupHeader&&!g.disabled&&t.add(g.name)}),t.size>0&&ce(t)},[r,u]);const p=n.useCallback(t=>{if(t==null)return null;const g=r.find(i=>i.original===t);if(g)return g.id;if(typeof t=="object")try{const i=JSON.stringify(t);return r.find(x=>x.original&&typeof x.original=="object"&&JSON.stringify(x.original)===i)?.id??null}catch{return null}return null},[r]);n.useEffect(()=>{const t=b?l:a;if(t==null||Array.isArray(t)&&t.length===0){$(null),k([]);return}const g=i=>{const x=p(i),_=r.find(de=>de.id===x);if(_)return _;const ee=typeof i=="object"?i.id||i.value||JSON.stringify(i):String(i);return typeof i=="object"&&i!==null?{id:`virtual-${ee}`,name:ke(i)||String(i.id||"Selected Object"),raw:i.value??i.id??i,original:i,userId:i.id??i.value??null,virtual:!0}:{id:`virtual-${ee}`,name:String(i),raw:i,original:i,userId:i,virtual:!0}};if(y){const x=(Array.isArray(t)?t:[t]).map(g);k(x)}else{const i=Array.isArray(t)?t[0]:t,x=g(i);$(_=>_===x.id?_:x.id)}},[l,a,b,r,p,y]);const S=n.useMemo(()=>{const t=r.find(g=>g.id===v);if(t)return t;if(!y&&v?.startsWith("virtual-")){const g=b?l:a,i=Array.isArray(g)?g[0]:g;if(i)return{id:v,name:typeof i=="object"?ke(i):String(i),original:i}}return null},[v,r,y,b,l,a]),T=n.useCallback((t,g)=>{if(t.groupHeader){g?.stopPropagation(),g?.preventDefault(),t.disabled||ae(t.name);return}if(t.disabled||t.loadMore){g?.stopPropagation(),g?.preventDefault(),t.loadMore&&!t.loading&&(U(X),re());return}if(y){if(t.disabled||t.groupHeader||t.loadMore){g?.stopPropagation(),g?.preventDefault();return}g?.stopPropagation(),g?.preventDefault();const x=M?.some(_=>_.id===t.id)?M.filter(_=>_.id!==t.id):[...M,t];k(x),c?.(x.map(_=>_.original),x.map(_=>_.userId));return}$(t.id),c?.(t.original,t.userId),P(!1)},[c,P,re,X,U,ae]),B=n.useCallback(()=>{$(null),k([]),c?.(null,null)},[c]),Z=n.useCallback(t=>{const g=M.filter(i=>i.id!==t);k(g),c?.(g.map(i=>i.original),g.map(i=>i.userId))},[M,c]);return{normalizedOptions:r,selected:S,selectOption:T,clear:B,removeOption:Z,hasOptions:r.length>0,active:!m&&!E&&!s&&r.length>0,selectedValue:l??a,placeholder:h,emptyText:I,disabledText:j,loadingText:V,errorText:W,disabledOption:A,emptyOption:O,invalidOption:C,disabled:s,loading:E,error:m,expandedGroups:L,toggleGroup:ae,selectedIDs:M,multiple:y,setSelectedIds:k}}function gr({visibility:e,children:o,duration:l=300}){const a=n.useRef(null);return f.jsx(we.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:f.jsx("div",{ref:a,style:{overflow:"hidden",transition:`height ${l}ms ease`,paddingLeft:"1em"},className:"slideDown-enter-done",tabIndex:-1,children:o})})}const Te=(e,o)=>{if(!e)return null;if(typeof e=="string")return f.jsx("img",{src:e,...o,alt:""});if(n.isValidElement(e))return n.cloneElement(e,o);if(typeof e=="function"||typeof e=="object"&&e.$$typeof){const l=e;return f.jsx(l,{...o})}return null},pr=(e,o,l,a,c,s,E,m)=>{const y=m?.some(h=>h.id===e.id);return e.groupHeader?"rac-select-option rac-group-option":["rac-select-option",e.className,(y||a===e.id)&&"rac-selected",o===l&&"rac-highlighted",(e.disabled||e.loading)&&"rac-disabled-option",(e.invalid||e.name===E)&&"rac-invalid-option",e.loadMore&&c===s&&"rac-loading-option",typeof e.raw=="boolean"&&(e.raw?"rac-true-option":"rac-false-option")].filter(Boolean).join(" ")},hr=n.forwardRef(({unmount:e,children:o,visibility:l,ownBehavior:a=!1,alwaysOpen:c=!1,duration:s=300,easing:E="ease-out",offset:m=0,animateOpacity:y=!0,style:h={},className:I="",ArrowIcon:j=ir,ClearIcon:V=Fe,DelIcon:W=Fe,CheckIcon:A=ze,hasMore:O=!1,loadMore:C=()=>{console.warn("loadMore not implemented")},loadButton:P=!1,loadButtonText:N="Load more",loadMoreText:F="Loading",selectedText:U=void 0,loadOffset:Q=100,loadAhead:X=3,childrenFirst:re=!1,groupsClosed:te=!1,optionsClassName:u="",...z},b)=>{const v=n.useId(),$=n.useMemo(()=>v.replace(/:/g,""),[v]),[M,k]=n.useState([]),[L,ce]=n.useState(!1),[K,ae]=n.useState(P?N:F),[se,r]=n.useState(!1),p=n.useRef(null),S=n.useCallback(H=>{k(q=>{const oe=q.findIndex(le=>le.id===H.id);if(oe!==-1){const le=q[oe];if(le.label===H.label&&le.value===H.value&&le.disabled===H.disabled&&le.group===H.group)return q;const me=[...q];return me[oe]=H,me}return[...q,H]})},[]),T=n.useCallback(H=>{k(q=>{const oe=q.filter(le=>le.id!==H);return oe.length===q.length?q:oe})},[]),B=c?!0:a?!!l:L,Z=n.useCallback(H=>{c||a||ce(H)},[c,a]),t=fr({...z,setVisibility:Z,jsxOptions:M,hasMore:O,loadButton:P,loadingTitle:K,loadMore:C,loadMoreText:F,setLoadingTitle:ae,childrenFirst:re,groupsClosed:te}),{multiple:g,normalizedOptions:i,selected:x,selectOption:_,clear:ee,removeOption:de,hasOptions:ne,active:pe,selectedValue:D,disabled:d,loading:R,error:G,placeholder:ie,invalidOption:Y,emptyText:he,disabledText:fe,loadingText:xe,errorText:Re,expandedGroups:J,selectedIDs:ye,setSelectedIds:$e}=t,Ce=ur({setLoadingTitle:ae,loadButton:P,loadButtonText:N,hasMore:O,loadMore:C,disabled:d,multiple:g,open:B,setOpen:Z,options:i,selectOption:_,selected:x,loadOffset:Q,loadAhead:X,expandedGroups:J}),{handleListScroll:Je,handleBlur:Ve,handleFocus:Ue,handleToggle:qe,handleKeyDown:Xe,highlightedIndex:be,setHighlightedIndex:Ne}=Ce;n.useImperativeHandle(b,()=>p.current),n.useEffect(()=>{B||r(!1)},[B]),n.useEffect(()=>{(G||d||R||!ne)&&Z(!1)},[G,d,R,ne,Z]),n.useEffect(()=>{if(B&&se&&be!==-1){const H=i[be];H&&document.getElementById(`opt-${$}-${Ae(H.id)}`)?.scrollIntoView({block:"nearest"})}},[be,B,se,i,$]);const Se=n.useMemo(()=>D!=null&&!(Array.isArray(D)&&D.length===0)&&!(typeof D=="object"&&Object.keys(D).length===0),[D]),Ke=n.useMemo(()=>{if(G)return Re;if(R)return xe;if(d)return fe;if(Se&&U)return U;if(x)return x.jsx??x.name;if(Se){const H=i.find(q=>q.raw===D);return H?H.name:typeof D=="object"&&D!==null?D.name??D.label??"Selected Object":String(D)}return ne?ie:he},[d,R,G,ne,x,D,ie,Re,xe,fe,he,Se,i]),Be=n.useMemo(()=>{const H=[];let q=[],oe=null;const le=i.reduce((w,ue)=>(ue.group&&(w[ue.group]=(w[ue.group]||0)+1),w),{}),me=w=>{w===null||q.length===0||(H.push(f.jsx(gr,{visibility:J.has(w),children:q},`slide-${w}`)),q=[])},Ie=(w,ue)=>f.jsxs("div",{id:`opt-${$}-${Ae(w.id)}`,role:"option","aria-selected":x?.id===w.id,"aria-disabled":w.disabled||w.loading,className:pr(w,ue,be,x?.id,K,F,Y,ye),onClick:ge=>!w.loading&&_(w,ge),onMouseEnter:()=>!w.disabled&&!w.loading&&Ne(ue),children:[w.jsx??w.name,w.loading&&f.jsxs("span",{className:"rac-loading-dots",children:[f.jsx("i",{}),f.jsx("i",{}),f.jsx("i",{})]}),g&&!w.disabled?f.jsx("div",{className:"rac-checkbox",children:Te(ze,{className:`
|
|
13
|
+
rac-checkmark
|
|
14
|
+
${ye?.some(ge=>ge.id===w.id)?"--checked":""}`})}):null]},w.id);return i.forEach((w,ue)=>{const ge=w.groupHeader,Le=!!w.group;if((ge||!Le&&oe!==null)&&(me(oe),ge||(oe=null)),ge){oe=w.name;const Ze=J.has(w.name),Qe=le[w.name]>0;H.push(f.jsxs("div",{className:["rac-group-header",w.disabled&&"rac-disabled-group"].filter(Boolean).join(" "),onClick:er=>_(w,er),children:[f.jsx("span",{className:"rac-group-title-text",children:w.name}),f.jsx(_e,{visibility:Qe&&!w.disabled,duration:s,style:{display:"grid"},children:f.jsx("span",{className:`rac-group-arrow-wrapper ${Ze?"--open":""}`,children:Te(j,{className:"rac-select-arrow-wrapper"})})})]},w.id))}else Le?q.push(Ie(w,ue)):H.push(Ie(w,ue))}),me(oe),H},[i,_,$,x,be,K,F,Y,Ne,J,j]);return f.jsx(cr,{selectedText:U,selectRef:p,selectId:$,selectedIDs:ye,setSelectedIds:$e,multiple:g,removeOption:de,optionsClassName:u,renderIcon:Te,normalizedOptions:i,renderOptions:Be,selected:x,title:Ke,visibility:B,active:pe,hasOptions:ne,hasActualValue:Se,highlightedIndex:be,animationFinished:se,disabled:d,loading:R,error:G,setVisibility:Z,setHighlightedIndex:Ne,setAnimationFinished:r,handleBlur:Ve,handleFocus:Ue,handleToggle:qe,handleKeyDown:Xe,handleListScroll:Je,selectOption:_,clear:ee,registerOption:S,unregisterOption:T,children:o,placeholder:ie,className:I,style:h,duration:s,easing:E,offset:m,animateOpacity:y,unmount:e,ArrowIcon:j,ClearIcon:V,DelIcon:W,hasMore:O,loadButton:P})}),We=n.createContext(null);function br({children:e,name:o,label:l,value:a,id:c,emptyGroupText:s="Empty group"}){const E=n.useContext(De),m=n.useMemo(()=>{const h=o??l??a??c;return h!=null&&h!==""?String(h):s},[o,l,a,c,s]),y=n.useMemo(()=>`group-marker-${Ae(m)}`,[m]);return n.useEffect(()=>{if(!E)return;const h={id:y,group:m,isGroupMarker:!0,disabled:!0};return E.registerOption(h),()=>E.unregisterOption(y)},[E.registerOption,E.unregisterOption,y,m]),f.jsx(We.Provider,{value:m,children:e})}const Pe=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(Pe).join(" ").replace(/\s+/g," ").trim():n.isValidElement(e)?Pe(e.props.children):"":"";function xr({value:e,id:o,className:l,children:a,disabled:c,group:s}){const E=n.useContext(De),m=n.useContext(We),y=E?.registerOption,h=E?.unregisterOption,I=n.useId(),j=n.useMemo(()=>o?String(o):I.replace(/:/g,""),[o,I]);return n.useEffect(()=>{if(!y)return;const V=Pe(a),W=a!=null;let A="";return V?A=V:o!=null&&o!==""?A=String(o):e!=null&&e!==""&&(A=String(e)),y({id:j,value:e!==void 0?e:V,label:A,jsx:a,hasJsx:W,className:l,disabled:!!c,group:s||m||null}),()=>h(j)},[j,e,a,l,c,s,m,y,h]),null}exports.OptGroup=br;exports.Option=xr;exports.Select=hr;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}
|
|
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: 0em .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{display:flex;align-items:center;flex-wrap:wrap;gap:var(--rac-multiple-selected-gap)}.rac-title-text{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-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)}
|