react-animated-select 0.1.5 → 0.2.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 +84 -18
- package/dist/index.cjs.js +9 -9
- package/dist/index.css +1 -1
- package/dist/index.es.js +420 -395
- package/package.json +1 -1
- package/src/getText.jsx +11 -0
- package/src/option.jsx +6 -3
- package/src/select.css +2 -2
- package/src/select.jsx +6 -4
- package/src/slideLeft.jsx +1 -1
- package/src/useSelect.jsx +21 -11
- package/src/useSelectLogic.jsx +262 -241
package/README.md
CHANGED
|
@@ -53,19 +53,19 @@ Built-in “Clear” button and intelligent state handling (loading, error, empt
|
|
|
53
53
|
```
|
|
54
54
|
### Advanced Usage (JSX Children)
|
|
55
55
|
```jsx
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
56
|
+
import {Select, Option} from 'react-animated-select'
|
|
57
|
+
|
|
58
|
+
function App() {
|
|
59
|
+
return (
|
|
60
|
+
<Select defaultValue='react'>
|
|
61
|
+
<Option id='react'>React</Option>
|
|
62
|
+
<Option id='vue' disabled>Vue (Coming soon)</Option>
|
|
63
|
+
<Option id='svelte' className='custom-svelte-style'>
|
|
64
|
+
<b>Svelte</b> - The compiler
|
|
65
|
+
</Option>
|
|
66
|
+
</Select>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
69
|
```
|
|
70
70
|
## Props API
|
|
71
71
|
|
|
@@ -73,15 +73,14 @@ Built-in “Clear” button and intelligent state handling (loading, error, empt
|
|
|
73
73
|
|
|
74
74
|
| Prop | Type | Default | Description |
|
|
75
75
|
|------|------|---------|-------------|
|
|
76
|
-
| `options` | Array \| Object | `[]` | Data source for options.
|
|
76
|
+
| `options` | Array \| Object | `[]` | Data source for options. The recommended format is an array of objects with `id`, `name`, and optional `disabled`. For compatibility, `value` may be used instead of `id`, and `label` instead of `name` (lower priority). |
|
|
77
77
|
| `value` | `any` | `undefined` | The current value for a controlled component. |
|
|
78
78
|
| `defaultValue` | `any` | `undefined` | Initial value for an uncontrolled component. |
|
|
79
|
-
| `onChange` | `function` | `undefined` | Callback:
|
|
79
|
+
| `onChange` | `function` | `undefined` | Callback called when an option is selected. Arguments: (data, id). data is the original object/value, id is the primary key. |
|
|
80
80
|
| `placeholder` | `string` | `"Choose option"` | Text shown when no option is selected. |
|
|
81
81
|
| `disabled` | `boolean` | `false` | Disables the entire component. |
|
|
82
82
|
| `loading` | `boolean` | `false` | Shows a loading animation and disables interaction. |
|
|
83
83
|
| `error` | `boolean` | `false` | Shows the error state and `errorText`. |
|
|
84
|
-
| `duration` | `number` | `300` | Animation duration in milliseconds. |
|
|
85
84
|
|
|
86
85
|
---
|
|
87
86
|
|
|
@@ -100,8 +99,7 @@ Built-in “Clear” button and intelligent state handling (loading, error, empt
|
|
|
100
99
|
|
|
101
100
|
| Prop | Type | Description |
|
|
102
101
|
|------|------|-------------|
|
|
103
|
-
| `
|
|
104
|
-
| `id` | `string` | Optional unique ID (generated automatically if not provided). |
|
|
102
|
+
| `id` | `string` | Optional unique ID (generated automatically if not provided). value may be used instead of id (lower priority)|
|
|
105
103
|
| `disabled` | `boolean` | If true, this option cannot be selected or highlighted. |
|
|
106
104
|
| `className` | `string` | Custom class for individual option styling. |
|
|
107
105
|
|
|
@@ -117,6 +115,74 @@ Built-in “Clear” button and intelligent state handling (loading, error, empt
|
|
|
117
115
|
| `Escape` | Close dropdown. |
|
|
118
116
|
| `Tab` | Close dropdown and move focus to next element. |
|
|
119
117
|
|
|
118
|
+
## Custom Styling
|
|
119
|
+
|
|
120
|
+
The component is built with a consistent BEM-like naming convention using the `rac-` prefix. You can easily override these classes in your CSS.
|
|
121
|
+
|
|
122
|
+
### CSS Class Hierarchy
|
|
123
|
+
|
|
124
|
+
| Class Name | Target Element | Description |
|
|
125
|
+
|:---|:---|:---|
|
|
126
|
+
| `.rac-select` | **Main Wrapper** | The primary container of the select. |
|
|
127
|
+
| `.rac-select-title` | **Value Display** | The area showing the selected option or placeholder. |
|
|
128
|
+
| `.rac-loading-dots` | **Loader** | Wrapper for the loading animation (contains 3 `<i>` elements); each point is customized through `.rac-loading-dots i`. |
|
|
129
|
+
| `.rac-loading-dots i` | **Loader** | To customize directly animated points. |
|
|
130
|
+
| `.rac-select-buttons` | **Action Group** | Wrapper for the Clear (X) and Arrow icons |
|
|
131
|
+
| `.rac-select-cancel` | **Clear Button** | The "X" icon for clearing the selection.|
|
|
132
|
+
| `.rac-select-arrow-wrapper` | **Arrow Icon** | Container for the dropdown arrow. |
|
|
133
|
+
| `.rac-select-list` | **Dropdown List** | The `listbox` container that holds all options. |
|
|
134
|
+
| `.rac-select-option` | **Option Item** | Individual item within the dropdown list. |
|
|
135
|
+
|
|
136
|
+
**Note on Animation:** The Clear button and Dropdown List are wrapped in `react-transition-group`.
|
|
137
|
+
*Clear button* uses: `rac-slide-left-enter`, `-active`, `-done` and `rac-slide-left-exit`, `-active`.
|
|
138
|
+
*Dropdown list* uses: `rac-slide-down-enter`, `-active`, `-done` and `rac-slide-down-exit`, `-active`.
|
|
139
|
+
**Edit with caution**, as overriding these may break the smooth transition behavior.
|
|
140
|
+
|
|
141
|
+
### Component States
|
|
142
|
+
|
|
143
|
+
The select and its options react to internal states by applying the following classes:
|
|
144
|
+
|
|
145
|
+
#### Main Select States (applied to `.rac-select`)
|
|
146
|
+
- `.rac-disabled-style`: Applied when `disabled={true}` or when the options list is empty.
|
|
147
|
+
- `.rac-loading-style`: Applied during the `loading={true}` state.
|
|
148
|
+
- `.rac-error-style`: Applied when `error={true}`.
|
|
149
|
+
|
|
150
|
+
#### Option States (applied to `.rac-select-option`)
|
|
151
|
+
- `.rac-highlighted`: The option currently focused via keyboard or mouse hover.
|
|
152
|
+
- `.rac-disabled-option`: Applied to options that have their own `disabled: true` property.
|
|
153
|
+
- `.rac-invalid-option`: Applied to items that are not valid data types (e.g., functions).
|
|
154
|
+
- `.rac-true-option`: Specialized styling when the option's raw value is exactly `true`.
|
|
155
|
+
- `.rac-false-option`: Specialized styling when the option's raw value is exactly `false`.
|
|
156
|
+
|
|
157
|
+
#### Trigger States
|
|
158
|
+
- `.rac-select-arrow-wrapper.--open`: Applied to the arrow icon when the dropdown is expanded.
|
|
159
|
+
|
|
160
|
+
## Change log
|
|
161
|
+
### 0.2
|
|
162
|
+
**Core Improvements**
|
|
163
|
+
|
|
164
|
+
- **Smart Normalization:** Enhanced handling of diverse data types (`number`, `boolean`, `string`, `object`, `null`, `function`).
|
|
165
|
+
|
|
166
|
+
- **Stable IDs:** Implemented unique ID generation for JSX children and Boolean values (e.g., `true-0`, `false-1`) to prevent rendering conflicts and handle identical values.
|
|
167
|
+
|
|
168
|
+
- **Smart Highlighting:** On open, the selector now automatically highlights the already selected item or the first **available** (non-disabled) option.
|
|
169
|
+
|
|
170
|
+
- **Refined Keyboard Navigation:** Up/Down arrows now skip disabled items and cycle correctly. Navigation is disabled if no options are available.
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
**API & Logic Changes**
|
|
174
|
+
|
|
175
|
+
- **`onChange` arguments:** Swapped for better DX. First argument: **Original user data**; Second argument: **Unique ID**.
|
|
176
|
+
|
|
177
|
+
- **Visual States:** Fixed "Hover vs. Selection" conflict. Hovering no longer clears the selection highlight; keyboard and mouse focus now coexist smoothly with polished CSS transitions.
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
**Bug Fixes**
|
|
181
|
+
|
|
182
|
+
- **A11y & UI:** Added `scrollIntoView` support for keyboard navigation—the active option always remains visible.
|
|
183
|
+
|
|
184
|
+
- **Empty State:** Improved stability when receiving empty, null, or undefined option arrays.
|
|
185
|
+
|
|
120
186
|
## License
|
|
121
187
|
|
|
122
188
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,16 +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 a=require("react"),ae=require("react-transition-group");var Z={exports:{}},X={};var te;function ie(){if(te)return X;te=1;var n=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function d(c,s,f){var x=null;if(f!==void 0&&(x=""+f),s.key!==void 0&&(x=""+s.key),"key"in s){f={};for(var g in s)g!=="key"&&(f[g]=s[g])}else f=s;return s=f.ref,{$$typeof:n,type:c,key:x,ref:s!==void 0?s:null,props:f}}return X.Fragment=i,X.jsx=d,X.jsxs=d,X}var K={};var ne;function ce(){return ne||(ne=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===W?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case h:return"Fragment";case E:return"Profiler";case R:return"StrictMode";case z:return"Suspense";case U:return"SuspenseList";case D:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case o:return"Portal";case O:return e.displayName||"Context";case $:return(e._context.displayName||"Context")+".Consumer";case C:var u=e.render;return e=e.displayName,e||(e=u.displayName||u.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case M:return u=e.displayName||null,u!==null?u:n(e.type)||"Memo";case I:u=e._payload,e=e._init;try{return n(e(u))}catch{}}return null}function i(e){return""+e}function d(e){try{i(e);var u=!1}catch{u=!0}if(u){u=console;var y=u.error,w=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return y.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",w),i(e)}}function c(e){if(e===h)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===I)return"<...>";try{var u=n(e);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function s(){var e=F.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function x(e){if(V.call(e,"key")){var u=Object.getOwnPropertyDescriptor(e,"key").get;if(u&&u.isReactWarning)return!1}return e.key!==void 0}function g(e,u){function y(){j||(j=!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))}y.isReactWarning=!0,Object.defineProperty(e,"key",{get:y,configurable:!0})}function _(){var e=n(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function P(e,u,y,w,B,G){var k=y.ref;return e={$$typeof:p,type:e,key:u,props:y,_owner:w},(k!==void 0?k:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:_}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:B}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:G}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function S(e,u,y,w,B,G){var k=u.children;if(k!==void 0)if(w)if(H(k)){for(w=0;w<k.length;w++)A(k[w]);Object.freeze&&Object.freeze(k)}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 A(k);if(V.call(u,"key")){k=n(e);var b=Object.keys(u).filter(function(Y){return Y!=="key"});w=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",l[k+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} />`,v,k,b,k),f[k+v]=!0)}if(k=null,g!==void 0&&(c(g),k=""+g),y(i)&&(c(i.key),k=""+i.key),"key"in i){g={};for(var N in i)N!=="key"&&(g[N]=i[N])}else g=i;return k&&x(g,typeof e=="function"?e.displayName||e.name||"Unknown":e),P(e,k,g,l(),J,G)}function $(e){j(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===I&&(e._payload.status==="fulfilled"?j(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function j(e){return typeof e=="object"&&e!==null&&e.$$typeof===p}var w=n,p=Symbol.for("react.transitional.element"),r=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),O=Symbol.for("react.context"),C=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),U=Symbol.for("react.suspense_list"),D=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),F=Symbol.for("react.activity"),W=Symbol.for("react.client.reference"),L=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,H=Array.isArray,t=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(e){return e()}};var R,M={},q=w.react_stack_bottom_frame.bind(w,d)(),o=t(u(d)),f={};K.Fragment=h,K.jsx=function(e,i,g){var v=1e4>L.recentlyCreatedOwnerStacks++;return S(e,i,g,!1,v?Error("react-stack-top-frame"):q,v?t(u(e)):o)},K.jsxs=function(e,i,g){var v=1e4>L.recentlyCreatedOwnerStacks++;return S(e,i,g,!0,v?Error("react-stack-top-frame"):q,v?t(u(e)):o)}})()),K}var ne;function ce(){return ne||(ne=1,process.env.NODE_ENV==="production"?Z.exports=se():Z.exports=ie()),Z.exports}var m=ce();const ue=({className:a="",...s})=>m.jsx("svg",{className:a,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...s,children:m.jsx("path",{d:"M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z"})}),fe=({className:a="",...s})=>m.jsx("svg",{className:a,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...s,children:m.jsx("path",{d:"M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"})}),ae=n.createContext(null);function de({disabled:a,isOpen:s,setIsOpen:c,options:u,selectOption:l,selected:d}){const y=n.useRef(!1),[x,_]=n.useState(-1);n.useEffect(()=>{if(s){const p=d?u.findIndex(r=>r.id==d.id):-1;_(p>=0?p:0)}else _(-1)},[s,d]);const P=n.useCallback(p=>{p.currentTarget.contains(p.relatedTarget)||c(!1,"force rerender if its in object")},[c]),S=n.useCallback(()=>{a||document.hidden||!document.hasFocus()||s||(c(!0),y.current=!0,setTimeout(()=>{y.current=!1},200))},[a,s,c]),$=n.useCallback(p=>{a||p.target.closest(".rac-select-cancel")||y.current||c(!s)},[a,s,c]),j=(p,r)=>{let h=p+r;h<0&&(h=u.length-1),h>=u.length&&(h=0);let A=0;for(;u[h]?.disabled&&A<u.length;)h+=r,h<0&&(h=u.length-1),h>=u.length&&(h=0),A++;return h},w=n.useCallback(p=>{if(!a)switch(p.key){case"Enter":case" ":p.preventDefault(),s?x!==-1&&u[x]&&l(u[x],p):c(!0);break;case"Escape":p.preventDefault(),c(!1);break;case"ArrowDown":p.preventDefault(),s?_(r=>j(r,1)):c(!0);break;case"ArrowUp":p.preventDefault(),s?_(r=>j(r,-1)):c(!0);break;case"Tab":s&&c(!1);break}},[a,s,c,x,u,l]);return n.useMemo(()=>({handleBlur:P,handleFocus:S,handleToggle:$,handleKeyDown:w,highlightedIndex:x,setHighlightedIndex:_}),[P,S,$,w,x,_])}const Q=(a,s="invalid-option",c="")=>{const u=c?c.replace(/:/g,""):"";if(typeof a!="string"||!a.trim())return u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`;const l=a.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return l?l||`${s}-${Math.random().toString(36).slice(2,8)}`:u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`};function be({options:a=[],jsxOptions:s=[],value:c,defaultValue:u=void 0,onChange:l,disabled:d=!1,loading:y=!1,error:x=!1,placeholder:_="Choose option",emptyText:P="No options",disabledText:S="Disabled",loadingText:$="Loading",errorText:j="Failed to load",disabledOption:w="Disabled option",emptyOption:p="Empty option",invalidOption:r="Invalid option",setVisibility:h}){const A=n.useId(),E=c!==void 0,[T,O]=n.useState(u),C=E?c:T,z=t=>!t||typeof t!="object"||Array.isArray(t)?!1:"id"in t||"value"in t||"name"in t||"label"in t||"disabled"in t,U=n.useMemo(()=>{if(!a)return[];const t=[],R=(o,f)=>{if(typeof f=="number"&&f===0){t.push({key:"0",value:0,label:"0"});return}if(typeof f=="boolean"){t.push({key:`bool-${t.length}`,value:f,label:String(f),type:"boolean"});return}if(f==""||f==null||f==null){t.push({key:`empty-${t.length}`,value:null,disabled:!0,label:p});return}if(typeof f=="function"){t.push({key:`invalid-${t.length}`,value:null,disabled:!0,label:r});return}f&&typeof f=="object"&&!Array.isArray(f)?t.push({key:o,value:f,disabled:!!f.disabled,label:f.name??f.label??o}):t.push({key:o,value:f,label:String(f??o)})};if(Array.isArray(a))for(const o of a){if(o&&typeof o=="object"&&!Array.isArray(o)&&Object.keys(o).length==1&&o.disabled==!0){t.push({key:`disabled-${t.length}`,value:null,disabled:!0,label:w});continue}if(z(o))t.push({key:o.id??o.value??o.name??`opt-${t.length}`,value:o.value??o.id??o,disabled:!!o.disabled,label:o.name??o.label??String(o.id??o.value)});else if(o&&typeof o=="object")for(const[f,e]of Object.entries(o))R(f,e);else R(o,o)}else if(typeof a=="object")for(const[o,f]of Object.entries(a))R(o,f);const M=new Map,q=o=>{const f=M.get(o)||0;return M.set(o,f+1),f==0?o:`${o}-${f}`};return t.map((o,f)=>{const e=Q(o.key??o.label??f,"invalid-option",A);return{id:q(e),name:String(o.label),raw:o.value,disabled:o.disabled,type:typeof o.value=="boolean"?"boolean":"normal"}})},[a,A]),D=n.useMemo(()=>s.map(t=>({id:String(t.id),name:String(t.label),raw:t.value,disabled:t.disabled,className:t.className,jsx:t.jsx,type:typeof t.value=="boolean"?"boolean":"normal"})),[s]),I=n.useMemo(()=>[...U,...D],[U,D]),F=I.length>0,W=n.useMemo(()=>!x&&!y&&!d&&F,[x,y,d,F]),L=n.useMemo(()=>{const t=E?c:T;return t==null?null:I.find(R=>R.id===String(t)||R.raw===t||typeof t=="object"&&t!==null&&R.id===String(t.id||t.value))??null},[E,c,T,I]),V=n.useCallback((t,R)=>{if(t.disabled){R.stopPropagation(),R.preventDefault();return}const M=t.raw!==void 0?t.raw:t.id;E||O(M),l?.(M,t),h(!1)},[E,l,h]),H=n.useCallback(t=>{t.preventDefault(),t.stopPropagation(),E||O(null),l?.(null,null)},[E,l]);return{normalizedOptions:I,selected:L,selectOption:V,clear:H,hasOptions:F,active:W,selectedValue:C,placeholder:_,emptyText:P,disabledText:S,loadingText:$,errorText:j,disabledOption:w,emptyOption:p,invalidOption:r,disabled:d,loading:y,error:x}}function he({visibility:a,children:s,duration:c=300,selectRef:u,onAnimationDone:l}){const d=n.useRef(null),[y,x]=n.useState(0);n.useEffect(()=>{u?.current&&x(u.current.offsetHeight);const r=new ResizeObserver(h=>{for(let A of h)x(A.target.offsetHeight)});return r.observe(u.current),x(u.current.offsetHeight),()=>r.disconnect()},[u]),n.useEffect(()=>{d.current&&(d.current.style.top=`${y}px`)},[y]);const _=n.useCallback(r=>{r.style.position="absolute",r.style.top=`${y}px`,r.style.left="0",r.style.width="100%",r.style.overflow="hidden",r.style.zIndex="1"},[y]),P=n.useCallback(()=>{const r=d.current;r&&(_(r),r.style.height="0px",r.style.transition="")},[_]),S=n.useCallback(()=>{const r=d.current;r&&(r.style.transition=`height ${c}ms ease`,r.style.height=`${r.scrollHeight}px`)},[c]),$=n.useCallback(()=>{const r=d.current;r&&(r.style.height="auto",r.style.transition="",l&&l())},[l]),j=n.useCallback(()=>{const r=d.current;r&&(r.style.height=`${r.scrollHeight}px`,r.style.transition=`height ${c}ms ease`)},[c]),w=n.useCallback(()=>{const r=d.current;r&&(r.style.height="0px")},[]),p=n.useCallback(()=>{const r=d.current;r&&(r.style.transition="")},[]);return m.jsx(oe.CSSTransition,{in:a,timeout:c,classNames:"rac-options",unmountOnExit:!0,nodeRef:d,onEnter:P,onEntering:S,onEntered:$,onExit:j,onExiting:w,onExited:p,children:m.jsx("div",{ref:d,children:s})})}const pe=n.memo(he,(a,s)=>a.visibility===s.visibility&&a.duration===s.duration&&a.selectRef===s.selectRef&&a.children===s.children);function ee({visibility:a,children:s,duration:c=300,unmount:u}){const l=n.useRef(null);return m.jsx(oe.CSSTransition,{in:a,timeout:c,classNames:"slide-left",unmountOnExit:!0,nodeRef:l,onEnter:()=>l.current.style.width="0px",onEntering:()=>l.current.style.width=l.current.scrollWidth+"px",onEntered:()=>l.current.style.width="auto",onExit:()=>l.current.style.width=l.current.scrollWidth+"px",onExiting:()=>l.current.style.width="0px",onExited:()=>u?.(),children:m.jsx("div",{ref:l,style:{overflow:"hidden",transition:`width ${c}ms ease`,display:"grid",height:"100%"},children:s})})}function ge({children:a,renderedDropdown:s,...c}){const u=n.useId(),l=n.useMemo(()=>u.replace(/:/g,""),[u]),[d,y]=n.useState([]),x=n.useCallback(b=>{y(N=>[...N,b])},[]),_=n.useCallback(b=>{y(N=>N.filter(Y=>Y.id!==b))},[]),P=n.useRef(null),[S,$]=n.useState(!1),{normalizedOptions:j,selected:w,selectOption:p,clear:r,hasOptions:h,active:A,selectedValue:E,disabled:T,loading:O,error:C,placeholder:z,invalidOption:U,options:D,value:I,defaultValue:F,isControlled:W,emptyText:L,disabledText:V,loadingText:H,errorText:t}=be({...c,setVisibility:$,jsxOptions:d}),{handleBlur:R,handleFocus:M,handleToggle:q,handleKeyDown:o,highlightedIndex:f,setHighlightedIndex:e}=de({disabled:T,isOpen:S,setIsOpen:$,options:j,selectOption:p,selected:w}),[i,g]=n.useState(!1);n.useEffect(()=>{S||g(!1)},[S]),n.useEffect(()=>{(C||T||O||!h)&&$(!1)},[C,T,O,h]),n.useEffect(()=>{if(S&&i&&f!==-1){const b=j[f];if(b){const N=`option-${Q(b.name)}-${l}`,Y=document.getElementById(N);Y&&Y.scrollIntoView({block:"nearest"})}}},[f,S,i,j,l]);const v=E!=null&&!(Array.isArray(E)&&E.length===0)&&!(typeof E=="object"&&Object.keys(E).length===0),J=n.useMemo(()=>C?t:O?H:T?V:w?w.name:v?typeof E=="object"?E.name??E.label??String(E):String(E):h?z:L,[T,O,C,h,w,E,z,t,H,V,L]),G=`${l}-listbox`,k=n.useMemo(()=>j?.map((b,N)=>{const Y=`option-${Q(b.name)}-${l}`;let B="rac-select-option";return b.className&&(B+=` ${b.className}`),N===f&&(B+=" rac-highlighted"),b.disabled&&(B+=" rac-disabled-option"),typeof b.raw=="boolean"&&(B+=b.raw?" rac-true-option":" rac-false-option"),b.name==U&&(B+=" rac-invalid-option"),m.jsx("div",{className:B,onClick:le=>p(b,le),onMouseEnter:()=>!b.disabled&&e(N),id:Y,role:"option","aria-selected":w?.id===b.id,"aria-disabled":b.disabled,children:b.jsx??b.name},b.id)}),[j,p,l,w,f]);return n.useEffect(()=>{process.env.NODE_ENV!=="production"&&(D&&typeof D!="object"&&console.error(`%c[Select Library]:%c Invalid prop %coptions%c.
|
|
7
|
-
Expected %cArray%c or %cObject%c, but received %c${typeof
|
|
8
|
-
`,"color: #ff4d4f; font-weight: bold;","color: default;","color: #1890ff; font-weight: bold;","color: default;","color: #52c41a; font-weight: bold;","color: default;","color: #52c41a; font-weight: bold;","color: default;","color: #ff4d4f; font-weight: bold;","color: default;"),W&&
|
|
9
|
-
`,"color: #faad14; font-weight: bold;","color: default;"))},[
|
|
10
|
-
${!h
|
|
6
|
+
<%s key={someKey} {...props} />`,w,k,b,k),l[k+w]=!0)}if(k=null,y!==void 0&&(d(y),k=""+y),x(u)&&(d(u.key),k=""+u.key),"key"in u){y={};for(var N in u)N!=="key"&&(y[N]=u[N])}else y=u;return k&&g(y,typeof e=="function"?e.displayName||e.name||"Unknown":e),P(e,k,y,s(),B,G)}function A(e){T(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===I&&(e._payload.status==="fulfilled"?T(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function T(e){return typeof e=="object"&&e!==null&&e.$$typeof===p}var v=a,p=Symbol.for("react.transitional.element"),o=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),R=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),O=Symbol.for("react.context"),C=Symbol.for("react.forward_ref"),z=Symbol.for("react.suspense"),U=Symbol.for("react.suspense_list"),M=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),D=Symbol.for("react.activity"),W=Symbol.for("react.client.reference"),F=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,V=Object.prototype.hasOwnProperty,H=Array.isArray,r=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var j,L={},J=v.react_stack_bottom_frame.bind(v,f)(),t=r(c(f)),l={};K.Fragment=h,K.jsx=function(e,u,y){var w=1e4>F.recentlyCreatedOwnerStacks++;return S(e,u,y,!1,w?Error("react-stack-top-frame"):J,w?r(c(e)):t)},K.jsxs=function(e,u,y){var w=1e4>F.recentlyCreatedOwnerStacks++;return S(e,u,y,!0,w?Error("react-stack-top-frame"):J,w?r(c(e)):t)}})()),K}var oe;function ue(){return oe||(oe=1,process.env.NODE_ENV==="production"?Z.exports=ie():Z.exports=ce()),Z.exports}var m=ue();const de=({className:n="",...i})=>m.jsx("svg",{className:n,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...i,children:m.jsx("path",{d:"M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z"})}),fe=({className:n="",...i})=>m.jsx("svg",{className:n,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...i,children:m.jsx("path",{d:"M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"})}),se=a.createContext(null);function be({disabled:n,isOpen:i,setIsOpen:d,options:c,selectOption:s,selected:f}){const x=a.useRef(!1),[g,_]=a.useState(-1);a.useEffect(()=>{if(i){let p=-1;if(f){const o=c.findIndex(h=>h.id===f.id&&!h.disabled);o>=0&&(p=o)}p===-1&&(p=c.findIndex(o=>!o.disabled)),_(p)}else _(-1)},[i,f,c]);const P=a.useCallback(p=>{p.currentTarget.contains(p.relatedTarget)||d(!1,"force rerender if its in object")},[d]),S=a.useCallback(()=>{n||document.hidden||!document.hasFocus()||i||(d(!0),x.current=!0,setTimeout(()=>{x.current=!1},200))},[n,i,d]),A=a.useCallback(p=>{n||p.target.closest(".rac-select-cancel")||x.current||d(!i)},[n,i,d]),T=(p,o)=>{if(c.every(E=>E.disabled))return-1;let h=p,R=0;do h+=o,h<0&&(h=c.length-1),h>=c.length&&(h=0),R++;while(c[h]?.disabled&&R<=c.length);return h},v=a.useCallback(p=>{if(!n)switch(p.key){case"Enter":case" ":p.preventDefault(),i?g!==-1&&c[g]&&s(c[g],p):d(!0);break;case"Escape":p.preventDefault(),d(!1);break;case"ArrowDown":p.preventDefault(),i?_(o=>T(o,1)):d(!0);break;case"ArrowUp":p.preventDefault(),i?_(o=>T(o,-1)):d(!0);break;case"Tab":i&&d(!1);break}},[n,i,d,g,c,s]);return a.useMemo(()=>({handleBlur:P,handleFocus:S,handleToggle:A,handleKeyDown:v,highlightedIndex:g,setHighlightedIndex:_}),[P,S,A,v,g,_])}const Q=(n,i="invalid-option",d="")=>{const c=d?d.replace(/:/g,""):"";if(typeof n!="string"||!n.trim())return c?`${i}-${c}`:`${i}-${Math.random().toString(36).slice(2,8)}`;const s=n.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return s?s||`${i}-${Math.random().toString(36).slice(2,8)}`:c?`${i}-${c}`:`${i}-${Math.random().toString(36).slice(2,8)}`};function pe({options:n=[],jsxOptions:i=[],value:d,defaultValue:c=void 0,onChange:s,disabled:f=!1,loading:x=!1,error:g=!1,placeholder:_="Choose option",emptyText:P="No options",disabledText:S="Disabled",loadingText:A="Loading",errorText:T="Failed to load",disabledOption:v="Disabled option",emptyOption:p="Empty option",invalidOption:o="Invalid option",setVisibility:h}){const R=a.useId(),E=d!==void 0,[$,O]=a.useState(c),C=E?d:$,z=r=>!r||typeof r!="object"||Array.isArray(r)?!1:"id"in r||"value"in r||"name"in r||"label"in r||"disabled"in r,U=a.useMemo(()=>{if(!n)return[];const r=[],j=(t,l,e)=>{if(typeof l=="number"&&l===0){r.push({key:"0",value:0,userId:e?.id??0,label:"0",original:e});return}if(typeof l=="boolean"){r.push({key:`bool-${r.length}`,value:l,userId:e?.id??`bool-${r.length}`,label:String(l),type:"boolean",original:e});return}if(l===""||l===null||l===void 0){r.push({key:`empty-${r.length}`,value:null,userId:e?.id??`empty-${r.length}`,disabled:!0,label:p,original:e});return}if(typeof l=="function"){r.push({key:`invalid-${r.length}`,value:null,userId:e?.id??`invalid-${r.length}`,disabled:!0,label:o,original:e});return}l&&typeof l=="object"&&!Array.isArray(l)?r.push({key:l.id??l.value??l.name??t,value:l,userId:l.id??l.value??l.name??t,disabled:!!l.disabled,label:l.name??l.label??t,original:e}):r.push({key:t,value:l,userId:t,label:String(l??t),original:e})};if(Array.isArray(n))for(const t of n){if(t&&typeof t=="object"&&!Array.isArray(t)&&Object.keys(t).length==1&&t.disabled==!0){r.push({key:`disabled-${r.length}`,value:null,userId:t?.id??t??null,disabled:!0,label:v,original:t});continue}if(z(t))r.push({key:t.id??t.value??t.name??`opt-${r.length}`,value:t.value??t.id??t,userId:t?.id??t?.value??t?.name??t?.label??t??null,disabled:!!t.disabled,label:t.name??t.label??String(t.id??t.value),original:t});else if(t&&typeof t=="object")for(const[l,e]of Object.entries(t))j(l,e,e);else j(t,t,t)}else if(typeof n=="object")for(const[t,l]of Object.entries(n))j(t,l,l);const L=new Map,J=t=>{const l=L.get(t)||0;return L.set(t,l+1),l==0?t:`${t}-${l}`};return r.map((t,l)=>{const e=Q(t.key??t.label??l,"invalid-option",R);return{id:J(e),userId:t.userId??t.key??l,name:String(t.label),raw:t.value,original:t.original,disabled:t.disabled,type:typeof t.value=="boolean"?"boolean":"normal"}})},[n,R]),M=a.useMemo(()=>i.map((r,j)=>({id:`jsx-${R.replace(/:/g,"")}-${r.id}`,userId:r.id,value:r.value,raw:r.value,original:r.value,name:r.label,jsx:r.jsx,disabled:r.disabled,className:r.className,type:typeof r.value=="boolean"?"boolean":"normal"})),[i,R]),I=a.useMemo(()=>[...U,...M],[U,M]),D=I.length>0,W=a.useMemo(()=>!g&&!x&&!f&&D,[g,x,f,D]),F=a.useMemo(()=>{const r=E?d:$;return r==null?null:I.find(j=>j.id===String(r)||j.userId===String(r)||j.raw===r||j.original===r||typeof r=="object"&&r!==null&&j.id===String(r.id||r.value))??null},[E,d,$,I]),V=a.useCallback((r,j)=>{if(r.disabled){j.stopPropagation(),j.preventDefault();return}E||O(r?.original),s?.(r?.original,r?.userId),h(!1)},[E,s,h]),H=a.useCallback(r=>{r.preventDefault(),r.stopPropagation(),E||O(null),s?.(null,null)},[E,s]);return{normalizedOptions:I,selected:F,selectOption:V,clear:H,hasOptions:D,active:W,selectedValue:C,placeholder:_,emptyText:P,disabledText:S,loadingText:A,errorText:T,disabledOption:v,emptyOption:p,invalidOption:o,disabled:f,loading:x,error:g}}function he({visibility:n,children:i,duration:d=300,selectRef:c,onAnimationDone:s}){const f=a.useRef(null),[x,g]=a.useState(0);a.useEffect(()=>{c?.current&&g(c.current.offsetHeight);const o=new ResizeObserver(h=>{for(let R of h)g(R.target.offsetHeight)});return o.observe(c.current),g(c.current.offsetHeight),()=>o.disconnect()},[c]),a.useEffect(()=>{f.current&&(f.current.style.top=`${x}px`)},[x]);const _=a.useCallback(o=>{o.style.position="absolute",o.style.top=`${x}px`,o.style.left="0",o.style.width="100%",o.style.overflow="hidden",o.style.zIndex="1"},[x]),P=a.useCallback(()=>{const o=f.current;o&&(_(o),o.style.height="0px",o.style.transition="")},[_]),S=a.useCallback(()=>{const o=f.current;o&&(o.style.transition=`height ${d}ms ease`,o.style.height=`${o.scrollHeight}px`)},[d]),A=a.useCallback(()=>{const o=f.current;o&&(o.style.height="auto",o.style.transition="",s&&s())},[s]),T=a.useCallback(()=>{const o=f.current;o&&(o.style.height=`${o.scrollHeight}px`,o.style.transition=`height ${d}ms ease`)},[d]),v=a.useCallback(()=>{const o=f.current;o&&(o.style.height="0px")},[]),p=a.useCallback(()=>{const o=f.current;o&&(o.style.transition="")},[]);return m.jsx(ae.CSSTransition,{in:n,timeout:d,classNames:"rac-options",unmountOnExit:!0,nodeRef:f,onEnter:P,onEntering:S,onEntered:A,onExit:T,onExiting:v,onExited:p,children:m.jsx("div",{ref:f,children:i})})}const ge=a.memo(he,(n,i)=>n.visibility===i.visibility&&n.duration===i.duration&&n.selectRef===i.selectRef&&n.children===i.children);function ee({visibility:n,children:i,duration:d=300,unmount:c}){const s=a.useRef(null);return m.jsx(ae.CSSTransition,{in:n,timeout:d,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:()=>c?.(),children:m.jsx("div",{ref:s,style:{overflow:"hidden",transition:`width ${d}ms ease`,display:"grid",height:"100%"},children:i})})}function ye({children:n,renderedDropdown:i,...d}){const c=a.useId(),s=a.useMemo(()=>c.replace(/:/g,""),[c]),[f,x]=a.useState([]),g=a.useCallback(b=>{x(N=>[...N,b])},[]),_=a.useCallback(b=>{x(N=>N.filter(Y=>Y.id!==b))},[]),P=a.useRef(null),[S,A]=a.useState(!1),{normalizedOptions:T,selected:v,selectOption:p,clear:o,hasOptions:h,active:R,selectedValue:E,disabled:$,loading:O,error:C,placeholder:z,invalidOption:U,options:M,value:I,defaultValue:D,isControlled:W,emptyText:F,disabledText:V,loadingText:H,errorText:r}=pe({...d,setVisibility:A,jsxOptions:f}),{handleBlur:j,handleFocus:L,handleToggle:J,handleKeyDown:t,highlightedIndex:l,setHighlightedIndex:e}=be({disabled:$,isOpen:S,setIsOpen:A,options:T,selectOption:p,selected:v}),[u,y]=a.useState(!1);a.useEffect(()=>{S||y(!1)},[S]),a.useEffect(()=>{(C||$||O||!h)&&A(!1)},[C,$,O,h]),a.useEffect(()=>{if(S&&u&&l!==-1){const b=T[l];if(b){const N=`opt-${s}-${Q(b.id)}`,Y=document.getElementById(N);Y&&Y.scrollIntoView({block:"nearest"})}}},[l,S,u,T,s]);const w=E!=null&&!(Array.isArray(E)&&E.length===0)&&!(typeof E=="object"&&Object.keys(E).length===0),B=a.useMemo(()=>C?r:O?H:$?V:v?v.jsx??v.name:w?typeof E=="object"?E.name??E.label??String(E):String(E):h?z:F,[$,O,C,h,v,E,z,r,H,V,F]),G=`${s}-listbox`,k=a.useMemo(()=>T?.map((b,N)=>{const Y=`opt-${s}-${Q(b.id)}`;let q="rac-select-option";return b.className&&(q+=` ${b.className}`),v?.id===b.id&&(q+=" rac-selected"),N===l&&(q+=" rac-highlighted"),b.disabled&&(q+=" rac-disabled-option"),typeof b.raw=="boolean"&&(q+=b.raw?" rac-true-option":" rac-false-option"),b.name==U&&(q+=" rac-invalid-option"),m.jsx("div",{className:q,onClick:le=>p(b,le),onMouseEnter:()=>!b.disabled&&e(N),id:Y,role:"option","aria-selected":v?.id===b.id,"aria-disabled":b.disabled,children:b.jsx??b.name},b.id)}),[T,p,s,v,l]);return a.useEffect(()=>{process.env.NODE_ENV!=="production"&&(M&&typeof M!="object"&&console.error(`%c[Select Library]:%c Invalid prop %coptions%c.
|
|
7
|
+
Expected %cArray%c or %cObject%c, but received %c${typeof M}%c.
|
|
8
|
+
`,"color: #ff4d4f; font-weight: bold;","color: default;","color: #1890ff; font-weight: bold;","color: default;","color: #52c41a; font-weight: bold;","color: default;","color: #52c41a; font-weight: bold;","color: default;","color: #ff4d4f; font-weight: bold;","color: default;"),W&&D!==void 0&&console.warn(`%c[Select Library]:%c .
|
|
9
|
+
`,"color: #faad14; font-weight: bold;","color: default;"))},[M,I,D,W]),m.jsxs(se.Provider,{value:{registerOption:g,unregisterOption:_},children:[n,i,m.jsxs("div",{className:`rac-select
|
|
10
|
+
${!h||$?"rac-disabled-style":""}
|
|
11
11
|
${O?"rac-loading-style":""}
|
|
12
|
-
${C?"rac-error-style":""}`,tabIndex:
|
|
12
|
+
${C?"rac-error-style":""}`,tabIndex:R?0:-1,ref:P,role:"combobox","aria-haspopup":"listbox","aria-expanded":S,"aria-controls":G,"aria-label":z,"aria-disabled":$||!h,...R&&{onBlur:j,onFocus:L,onClick:J,onKeyDown:t},children:[m.jsxs("div",{className:`rac-select-title ${v?.type=="boolean"?v.raw?"rac-true-option":"rac-false-option":""}`,children:[B,m.jsx(ee,{visibility:O&&!C,children:m.jsxs("span",{className:"rac-loading-dots",children:[m.jsx("i",{}),m.jsx("i",{}),m.jsx("i",{})]})})]}),m.jsxs("div",{className:"rac-select-buttons",children:[m.jsx(ee,{visibility:w&&h&&!$&&!O&&!C,children:m.jsx(de,{className:"rac-select-cancel",role:"button","aria-label":"Clear selection",onClick:b=>o(b)})}),m.jsx(ee,{visibility:R,children:m.jsx("span",{className:`rac-select-arrow-wrapper
|
|
13
13
|
${S?"--open":""}
|
|
14
|
-
${!h
|
|
14
|
+
${!h||$?"rac-disabled-style":""}
|
|
15
15
|
${O?"rac-loading-style":""}
|
|
16
|
-
${C?"rac-error-style":""}`,children:m.jsx(fe,{className:"rac-select-arrow-wrapper"})})})]}),m.jsx(
|
|
16
|
+
${C?"rac-error-style":""}`,children:m.jsx(fe,{className:"rac-select-arrow-wrapper"})})})]}),m.jsx(ge,{visibility:S,selectRef:P,onAnimationDone:()=>y(!0),children:m.jsx("div",{className:"rac-select-list",role:"listbox","aria-label":"Options",style:{"--select-background":S?"#1f1f1f":"transparent","--opacity":S?1:0},children:k})})]})]})}const re=n=>n?typeof n=="string"||typeof n=="number"?String(n):Array.isArray(n)?n.map(re).join(" ").replace(/\s+/g," ").trim():a.isValidElement(n)?re(n.props.children):"":"";function me({value:n,id:i,className:d,children:c,disabled:s}){const f=a.useContext(se);return a.useEffect(()=>{if(!f)return;const x=re(c),g={id:String(i??Q(String(x))),value:n!==void 0?n:x,label:typeof c=="string"?c:String(n??i),jsx:c,className:d,disabled:!!s};return f.registerOption(g),()=>f.unregisterOption(g.id)},[i,n,c,d,s]),null}exports.Option=me;exports.Select=ye;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--select-white: white;--select-almost-black: #252525ff;--select-active: #5ea500;--select-inactive: #e7000b;--select-black: #151515;--rac-hover: color-mix(in srgb, CanvasText 6%, Canvas);--rac-highlight: color-mix(in srgb, CanvasText 10%, Canvas);--rac-selected: color-mix(in srgb, CanvasText 14%, Canvas)}.rac-select{position:relative;min-width:10em;justify-content:space-between;display:flex;background:color-mix(in srgb,Canvas 98%,CanvasText 2%);--rac-border: color-mix(in srgb, Canvas 98%, CanvasText 2%);border:2px solid var(--rac-border);color:CanvasText;transition:.3s border-color,.3s font-size,.3s width;cursor:pointer;padding:.5em}.rac-loading-style,.rac-disabled-style{opacity:.75;filter:grayscale(.6) saturate(.8);cursor:not-allowed;transition:.3s border,.3s filter,.3s opacity;cursor:wait}.rac-disabled-style{cursor:not-allowed}.rac-error-style{border-color:var(--select-inactive);cursor:help}.rac-error-style:hover{border-color:var(--select-inactive)}.rac-select-title{display:flex;align-items:center}@media(max-width:1024px){.rac-select-title{gap:1vw}}.rac-loading-dots{display:inline-flex;gap:3px;padding-left:.25em;padding-bottom:.1em;height:100%;align-items:end;transition:.3s opacity}.rac-loading-dots i{width:.25em;height:.25em;background:currentColor;border-radius:50%;animation:blink 1.4s infinite both}.rac-loading-dots i:nth-child(1){animation-delay:0s}.rac-loading-dots i:nth-child(2){animation-delay:.2s}.rac-loading-dots i:nth-child(3){animation-delay:.4s}.rac-select-buttons{display:flex}.rac-select-cancel{transition:.3s opacity,.3s border;opacity:var(--opacity)}.rac-select-arrow-wrapper{height:1em;width:1em;display:inline-flex;align-items:center;justify-content:center;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1);transform-origin:50% 50%}.rac-select-arrow-wrapper.--open{transform:rotate(180deg)}.rac-select-arrow{display:block;transform:translateZ(0)}.rac-select-list{background:color-mix(in srgb,Canvas 98%,CanvasText 2%);color:CanvasText;max-height:250px;overflow-y:auto;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:.5em;scroll-padding-bottom:.5em;z-index:1;transition:.3s border,.3s background-color,.3s opacity,.3s padding,.3s height;opacity:var(--opacity)}.rac-select-option{padding:.5em;transition:background-color .3s,border-radius .3s,font-size .3s,.3s height}.rac-select-option:not(.rac-disabled-option):hover{background-color:var(--rac-hover)}.rac-select-option.rac-highlighted{background-color:var(--rac-highlight)}.rac-select-option.rac-selected{background-color:var(--rac-selected)}.rac-select-option.rac-selected.rac-highlighted{background-color:color-mix(in srgb,var(--rac-selected) 60%,CanvasText 40%)}.rac-disabled-option{cursor:not-allowed;color:gray}.rac-invalid-option{color:red}.rac-true-option{color:#4caf50}.rac-false-option{color:#f44336}
|
|
1
|
+
:root{--select-white: white;--select-almost-black: #252525ff;--select-active: #5ea500;--select-inactive: #e7000b;--select-black: #151515;--rac-hover: color-mix(in srgb, CanvasText 6%, Canvas);--rac-highlight: color-mix(in srgb, CanvasText 10%, Canvas);--rac-selected: color-mix(in srgb, CanvasText 14%, Canvas)}.rac-select{position:relative;min-width:10em;justify-content:space-between;display:flex;background:color-mix(in srgb,Canvas 98%,CanvasText 2%);--rac-border: color-mix(in srgb, Canvas 98%, CanvasText 2%);border:2px solid var(--rac-border);color:CanvasText;transition:.3s border-color,.3s font-size,.3s width;cursor:pointer;padding:.5em}.rac-loading-style,.rac-disabled-style{opacity:.75;filter:grayscale(.6) saturate(.8);cursor:not-allowed;transition:.3s border,.3s filter,.3s opacity;cursor:wait}.rac-disabled-style{cursor:not-allowed}.rac-error-style{border-color:var(--select-inactive);cursor:help}.rac-error-style:hover{border-color:var(--select-inactive)}.rac-select-title{display:flex;align-items:center}@media(max-width:1024px){.rac-select-title{gap:1vw}}.rac-loading-dots{display:inline-flex;gap:3px;padding-left:.25em;padding-bottom:.1em;height:100%;align-items:end;transition:.3s opacity}.rac-loading-dots i{width:.25em;height:.25em;background:currentColor;border-radius:50%;animation:blink 1.4s infinite both}.rac-loading-dots i:nth-child(1){animation-delay:0s}.rac-loading-dots i:nth-child(2){animation-delay:.2s}.rac-loading-dots i:nth-child(3){animation-delay:.4s}.rac-select-buttons{display:flex}.rac-select-cancel{transition:.3s opacity,.3s border;opacity:var(--opacity)}.rac-select-arrow-wrapper{height:1em;width:1em;display:inline-flex;align-items:center;justify-content:center;will-change:transform;transition:transform .3s cubic-bezier(.4,0,.2,1);transform-origin:50% 50%}.rac-select-arrow-wrapper.--open{transform:rotate(180deg)}.rac-select-arrow{display:block;transform:translateZ(0)}.rac-select-list{background:color-mix(in srgb,Canvas 98%,CanvasText 2%);color:CanvasText;max-height:250px;overflow-y:auto;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:.5em;scroll-padding-bottom:.5em;z-index:1;transition:.3s border,.3s background-color,.3s opacity,.3s padding,.3s height;opacity:var(--opacity)}.rac-select-option{padding:.5em;transition:background-color .3s cubic-bezier(.4,0,.2,1),border-radius .3s,font-size .3s,.3s height;background-color:transparent}.rac-select-option:not(.rac-disabled-option):hover{background-color:var(--rac-hover)}.rac-select-option.rac-highlighted{background-color:var(--rac-highlight)}.rac-select-option.rac-selected{background-color:var(--rac-selected)}.rac-select-option.rac-selected.rac-highlighted{background-color:color-mix(in srgb,var(--rac-selected) 60%,CanvasText 40%)}.rac-disabled-option{cursor:not-allowed;color:gray}.rac-invalid-option{color:red}.rac-true-option{color:#4caf50}.rac-false-option{color:#f44336}
|