react-animated-select 0.2.0 → 0.2.5
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 +95 -33
- package/dist/index.cjs.js +8 -12
- package/dist/index.css +1 -1
- package/dist/index.es.js +557 -501
- package/index.d.ts +11 -0
- package/package.json +1 -1
- package/src/options.jsx +53 -34
- package/src/select.css +127 -78
- package/src/select.jsx +50 -18
- package/src/slideLeft.jsx +8 -6
- package/src/useSelect.jsx +26 -16
- package/src/useSelectLogic.jsx +52 -47
package/README.md
CHANGED
|
@@ -36,11 +36,11 @@ Built-in “Clear” button and intelligent state handling (loading, error, empt
|
|
|
36
36
|
|
|
37
37
|
```jsx
|
|
38
38
|
import {Select} from 'react-animated-select'
|
|
39
|
-
import
|
|
39
|
+
import {useState} from 'react'
|
|
40
40
|
|
|
41
|
-
function
|
|
42
|
-
const
|
|
43
|
-
const [value, setValue]
|
|
41
|
+
function App() {
|
|
42
|
+
const options = ['Apple', 'Banana', 'Orange']
|
|
43
|
+
const [value, setValue] = useState('')
|
|
44
44
|
|
|
45
45
|
return (
|
|
46
46
|
<Select
|
|
@@ -73,10 +73,10 @@ function App() {
|
|
|
73
73
|
|
|
74
74
|
| Prop | Type | Default | Description |
|
|
75
75
|
|------|------|---------|-------------|
|
|
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
|
|
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`. |
|
|
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 called when an option is selected. Arguments: (data, id).
|
|
79
|
+
| `onChange` | `function` | `undefined` | Callback called when an option is selected. Arguments: (data, id). |
|
|
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. |
|
|
@@ -84,6 +84,28 @@ function App() {
|
|
|
84
84
|
|
|
85
85
|
---
|
|
86
86
|
|
|
87
|
+
### Animation Controls
|
|
88
|
+
|
|
89
|
+
| Prop | Type | Default | Description |
|
|
90
|
+
|------|------|---------|-------------|
|
|
91
|
+
| `duration` | `number` | `300` | Speed of all transitions in milliseconds (mapped to CSS variable `--rac-duration`). |
|
|
92
|
+
| `easing` | `string` | `'ease-out'` | CSS transition timing function (e.g., `cubic-bezier(.4,0,.2,1)`). |
|
|
93
|
+
| `offset` | `number` | `2` | Vertical gap (in pixels) between the select trigger and the dropdown list. |
|
|
94
|
+
| `animateOpacity` | `boolean` | `true` | Enables or disables the fade effect during opening and closing. |
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
### Behavioral Props
|
|
99
|
+
|
|
100
|
+
| Prop | Type | Default | Description |
|
|
101
|
+
|------|------|---------|-------------|
|
|
102
|
+
| `visibility` | `boolean` | `false` | Manually controls the visibility of the list (used with `ownBehavior`). |
|
|
103
|
+
| `ownBehavior` | `boolean` | `false` | If `true`, the component stops managing its own open/close state and relies on the `visibility` prop. |
|
|
104
|
+
| `alwaysOpen` | `boolean` | `false` | Keeps the list permanently visible. Primarily used for debugging or specific UI layouts. |
|
|
105
|
+
| `unmount` | `boolean` | `true` | When `true`, the list is removed from the DOM when closed. When `false`, it stays invisible in the DOM. |
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
87
109
|
### Text Customization
|
|
88
110
|
|
|
89
111
|
| Prop | Default | Description |
|
|
@@ -119,24 +141,65 @@ function App() {
|
|
|
119
141
|
|
|
120
142
|
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
143
|
|
|
144
|
+
### CSS Variables (Theming)
|
|
145
|
+
|
|
146
|
+
The component uses CSS variables for deep styling. These are based on system colors and `color-mix` for automatic theme adaptation. You can override these in your `:root` or on a specific `.rac-select` instance.
|
|
147
|
+
|
|
148
|
+
| Variable | Default Value / Calculation | Description |
|
|
149
|
+
|:---|:---|:---|
|
|
150
|
+
| **Durations** | | |
|
|
151
|
+
| `--rac-duration-fast` | `calc(var(--rac-duration) * 0.5)` | Used for micro-interactions. |
|
|
152
|
+
| `--rac-duration-base` | `var(--rac-duration)` | Main transition speed. |
|
|
153
|
+
| `--rac-duration-slow` | `calc(var(--rac-duration) * 1.3)` | Used for larger list transitions. |
|
|
154
|
+
| **Colors** | | |
|
|
155
|
+
| `--rac-base-red` | `#e7000b` | Base semantic red. |
|
|
156
|
+
| `--rac-base-green` | `#4caf50` | Base semantic green. |
|
|
157
|
+
| `--rac-base-yellow` | `#ffc107` | Base semantic yellow. |
|
|
158
|
+
| **Select Trigger** | | |
|
|
159
|
+
| `--rac-select-background`| `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Main background. |
|
|
160
|
+
| `--rac-select-color` | `CanvasText` | Title text color. |
|
|
161
|
+
| `--rac-select-border` | `2px solid ...` | Default border style. |
|
|
162
|
+
| `--rac-select-border-error`| `2px solid ...` | Border style in error state. |
|
|
163
|
+
| `--rac-select-height` | `2em` | Fixed height of the select. |
|
|
164
|
+
| `--rac-select-padding` | `0em 0.5em` | Internal horizontal padding. |
|
|
165
|
+
| `--rac-disabled-opacity` | `0.75` | Opacity when `disabled={true}`. |
|
|
166
|
+
| **Loading Dots** | | |
|
|
167
|
+
| `--rac-dots-color` | `currentColor` | Color of the loader dots. |
|
|
168
|
+
| `--rac-dots-animation-duration`| `1.4s` | Full cycle of the dots animation. |
|
|
169
|
+
| `--rac-dots-gap` | `3px` | Space between points. |
|
|
170
|
+
| **Icons & Buttons** | | |
|
|
171
|
+
| `--rac-arrow-height` | `1em` | Dropdown arrow size. |
|
|
172
|
+
| `--rac-cancel-height` | `0.9em` | Clear icon size. |
|
|
173
|
+
| **Dropdown & Scroll** | | |
|
|
174
|
+
| `--rac-list-background` | `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Dropdown list background. |
|
|
175
|
+
| `--rac-list-max-height` | `250px` | Maximum height before scrolling. |
|
|
176
|
+
| `--rac-scroll-color` | `color-mix(...)` | Scrollbar thumb color. |
|
|
177
|
+
| **Options State** | | |
|
|
178
|
+
| `--rac-option-hover` | `color-mix(...)` | Background on mouse hover. |
|
|
179
|
+
| `--rac-option-highlight` | `color-mix(...)` | Background when keyboard navigating. |
|
|
180
|
+
| `--rac-option-selected` | `color-mix(...)` | Background of the active option. |
|
|
181
|
+
| `--rac-disabled-option-color`| `color-mix(...)` | Text color for disabled items. |
|
|
182
|
+
| `--rac-true-option-color` | `color-mix(...)` | Text color for "Boolean True" items. |
|
|
183
|
+
| `--rac-false-option-color` | `color-mix(...)` | Text color for "Boolean False" items. |
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
122
187
|
### CSS Class Hierarchy
|
|
123
188
|
|
|
124
189
|
| Class Name | Target Element | Description |
|
|
125
190
|
|:---|:---|:---|
|
|
126
191
|
| `.rac-select` | **Main Wrapper** | The primary container of the select. |
|
|
127
192
|
| `.rac-select-title` | **Value Display** | The area showing the selected option or placeholder. |
|
|
128
|
-
| `.rac-loading-dots` | **Loader** | Wrapper for the loading animation
|
|
129
|
-
| `.rac-loading-dots i` | **Loader** |
|
|
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
|
|
193
|
+
| `.rac-loading-dots` | **Loader** | Wrapper for the loading animation. |
|
|
194
|
+
| `.rac-loading-dots i` | **Loader Point** | Directly target animated points for styling. |
|
|
195
|
+
| `.rac-select-buttons` | **Action Group** | Wrapper for the Clear (X) and Arrow icons. |
|
|
196
|
+
| `.rac-select-cancel` | **Clear Button** | The "X" icon for clearing the selection. |
|
|
132
197
|
| `.rac-select-arrow-wrapper` | **Arrow Icon** | Container for the dropdown arrow. |
|
|
133
198
|
| `.rac-select-list` | **Dropdown List** | The `listbox` container that holds all options. |
|
|
134
199
|
| `.rac-select-option` | **Option Item** | Individual item within the dropdown list. |
|
|
135
200
|
|
|
136
|
-
**Note on Animation:** The Clear button and Dropdown List
|
|
137
|
-
|
|
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.
|
|
201
|
+
**Note on Animation:** The Clear button and Dropdown List use `react-transition-group`.
|
|
202
|
+
Customizing `rac-slide-left-*` (Clear button) and `rac-options-*` (Dropdown) classes is possible, but do so with caution to maintain sync with the JS logic.
|
|
140
203
|
|
|
141
204
|
### Component States
|
|
142
205
|
|
|
@@ -158,30 +221,29 @@ The select and its options react to internal states by applying the following cl
|
|
|
158
221
|
- `.rac-select-arrow-wrapper.--open`: Applied to the arrow icon when the dropdown is expanded.
|
|
159
222
|
|
|
160
223
|
## Change log
|
|
161
|
-
### 0.2
|
|
162
|
-
**
|
|
163
|
-
|
|
164
|
-
- **Smart Normalization:** Enhanced handling of diverse data types (`number`, `boolean`, `string`, `object`, `null`, `function`).
|
|
224
|
+
### 0.2.5
|
|
225
|
+
**Added**
|
|
226
|
+
- System-Driven Theming: Implemented color-mix() utilizing CSS system colors (Canvas, CanvasText, AccentColor). This ensures the component is natively adaptive to Light/Dark modes and High Contrast accessibility settings.
|
|
165
227
|
|
|
166
|
-
-
|
|
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
|
-
|
|
228
|
+
- Advanced UX Logic: Added a window-focus protection mechanism to prevent the dropdown from auto-opening when switching back to the browser tab (Alt+Tab).
|
|
172
229
|
|
|
173
|
-
**
|
|
230
|
+
**Fixed**
|
|
174
231
|
|
|
175
|
-
-
|
|
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.
|
|
232
|
+
- Duplicate ID Conflict: Resolved a critical bug where multiple options with identical IDs caused the highlighter to "stuck" on the first match. Now, every option receives a unique internal React ID while maintaining the user-provided ID for logic.
|
|
178
233
|
|
|
234
|
+
**Customization & Props**
|
|
179
235
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
-
|
|
183
|
-
|
|
184
|
-
-
|
|
236
|
+
- Total Styling Freedom: Exposed a full set of CSS variables (--rac-*) for durations, colors, offsets, and dimensions.
|
|
237
|
+
- Animation Controls: Added new props:
|
|
238
|
+
- - duration: Control the speed of all transitions.
|
|
239
|
+
- - easing: Set custom cubic-bezier or ease functions.
|
|
240
|
+
- - offset: Adjust the gap between the trigger and the dropdown.
|
|
241
|
+
- - animateOpacity: Toggle fade effects on/off.
|
|
242
|
+
- Behavioral Props:
|
|
243
|
+
- - ownBehavior: Allows external control of the open/closed state.
|
|
244
|
+
- - alwaysOpen: Debug/Special use mode where the list is permanently visible.
|
|
245
|
+
- - unmount: Toggle between display: none and full DOM removal on close.
|
|
246
|
+
- - visibility: Allows manually control the visibility of the list.
|
|
185
247
|
|
|
186
248
|
## License
|
|
187
249
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
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 o=require("react"),fe=require("react-transition-group");var te={exports:{}},Q={};var ie;function ye(){if(ie)return Q;ie=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function c(u,a,b){var h=null;if(b!==void 0&&(h=""+b),a.key!==void 0&&(h=""+a.key),"key"in a){b={};for(var T in a)T!=="key"&&(b[T]=a[T])}else b=a;return a=b.ref,{$$typeof:t,type:u,key:h,ref:a!==void 0?a:null,props:b}}return Q.Fragment=s,Q.jsx=c,Q.jsxs=c,Q}var ee={};var ce;function xe(){return ce||(ce=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case A:return"Profiler";case x:return"StrictMode";case L:return"Suspense";case R:return"SuspenseList";case M: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 p:return"Portal";case l:return e.displayName||"Context";case C:return(e._context.displayName||"Context")+".Consumer";case W:var i=e.render;return e=e.displayName,e||(e=i.displayName||i.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case H:return i=e.displayName||null,i!==null?i:t(e.type)||"Memo";case P:i=e._payload,e=e._init;try{return t(e(i))}catch{}}return null}function s(e){return""+e}function c(e){try{s(e);var i=!1}catch{i=!0}if(i){i=console;var g=i.error,E=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return g.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",E),s(e)}}function u(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var i=t(e);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function a(){var e=k.A;return e===null?null:e.getOwner()}function b(){return Error("react-stack-top-frame")}function h(e){if(D.call(e,"key")){var i=Object.getOwnPropertyDescriptor(e,"key").get;if(i&&i.isReactWarning)return!1}return e.key!==void 0}function T(e,i){function g(){r||(r=!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)",i))}g.isReactWarning=!0,Object.defineProperty(e,"key",{get:g,configurable:!0})}function y(){var e=t(this.type);return $[e]||($[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 v(e,i,g,E,J,K){var j=g.ref;return e={$$typeof:O,type:e,key:i,props:g,_owner:E},(j!==void 0?j:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):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:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:K}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function V(e,i,g,E,J,K){var j=i.children;if(j!==void 0)if(E)if(z(j)){for(E=0;E<j.length;E++)I(j[E]);Object.freeze&&Object.freeze(j)}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 I(j);if(D.call(i,"key")){j=t(e);var U=Object.keys(i).filter(function(G){return G!=="key"});E=0<U.length?"{key: someKey, "+U.join(": ..., ")+": ...}":"{key: someKey}",S[j+E]||(U=0<U.length?"{"+U.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} />`,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
|
|
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;"),
|
|
9
|
-
`,"color: #faad14; font-weight: bold;","color: default;"))},[
|
|
10
|
-
${!
|
|
11
|
-
${
|
|
12
|
-
${
|
|
13
|
-
${S?"--open":""}
|
|
14
|
-
${!h||$?"rac-disabled-style":""}
|
|
15
|
-
${O?"rac-loading-style":""}
|
|
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;
|
|
6
|
+
<%s key={someKey} {...props} />`,E,j,U,j),S[j+E]=!0)}if(j=null,g!==void 0&&(c(g),j=""+g),h(i)&&(c(i.key),j=""+i.key),"key"in i){g={};for(var Z in i)Z!=="key"&&(g[Z]=i[Z])}else g=i;return j&&T(g,typeof e=="function"?e.displayName||e.name||"Unknown":e),v(e,j,g,a(),J,K)}function I(e){_(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===P&&(e._payload.status==="fulfilled"?_(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function _(e){return typeof e=="object"&&e!==null&&e.$$typeof===O}var N=o,O=Symbol.for("react.transitional.element"),p=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),C=Symbol.for("react.consumer"),l=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),L=Symbol.for("react.suspense"),R=Symbol.for("react.suspense_list"),H=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),M=Symbol.for("react.activity"),q=Symbol.for("react.client.reference"),k=N.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,z=Array.isArray,F=console.createTask?console.createTask:function(){return null};N={react_stack_bottom_frame:function(e){return e()}};var r,$={},n=N.react_stack_bottom_frame.bind(N,b)(),f=F(u(b)),S={};ee.Fragment=w,ee.jsx=function(e,i,g){var E=1e4>k.recentlyCreatedOwnerStacks++;return V(e,i,g,!1,E?Error("react-stack-top-frame"):n,E?F(u(e)):f)},ee.jsxs=function(e,i,g){var E=1e4>k.recentlyCreatedOwnerStacks++;return V(e,i,g,!0,E?Error("react-stack-top-frame"):n,E?F(u(e)):f)}})()),ee}var ue;function Ee(){return ue||(ue=1,process.env.NODE_ENV==="production"?te.exports=ye():te.exports=xe()),te.exports}var m=Ee();const ve=({className:t="",...s})=>m.jsx("svg",{className:t,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"})}),we=({className:t="",...s})=>m.jsx("svg",{className:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...s,children:m.jsx("path",{d:"M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z"})}),de=o.createContext(null);function je({disabled:t,isOpen:s,setIsOpen:c,options:u,selectOption:a,selected:b}){const h=o.useRef(!1),T=o.useRef(0),[y,v]=o.useState(-1);o.useEffect(()=>{const p=()=>{T.current=Date.now()};return window.addEventListener("focus",p),()=>window.removeEventListener("focus",p)},[]),o.useEffect(()=>{if(s){let p=-1;if(b){const w=u.findIndex(x=>x.id===b.id&&!x.disabled);w>=0&&(p=w)}p===-1&&(p=u.findIndex(w=>!w.disabled)),v(p)}else v(-1)},[s,b,u]);const V=o.useCallback(p=>{p.currentTarget.contains(p.relatedTarget)||c(!1)},[c]),I=o.useCallback(()=>{t||document.hidden||Date.now()-T.current<100||s||(c(!0),h.current=!0,setTimeout(()=>{h.current=!1},200))},[t,s,c]),_=o.useCallback(p=>{t||p.target.closest(".rac-select-cancel")||h.current||c(!s)},[t,s,c]),N=(p,w)=>{if(u.every(C=>C.disabled))return-1;let x=p,A=0;do x+=w,x<0&&(x=u.length-1),x>=u.length&&(x=0),A++;while(u[x]?.disabled&&A<=u.length);return x},O=o.useCallback(p=>{if(!t)switch(p.key){case"Enter":case" ":p.preventDefault(),s?y!==-1&&u[y]&&a(u[y],p):c(!0);break;case"Escape":p.preventDefault(),c(!1);break;case"ArrowDown":p.preventDefault(),s?v(w=>N(w,1)):c(!0);break;case"ArrowUp":p.preventDefault(),s?v(w=>N(w,-1)):c(!0);break;case"Tab":s&&c(!1);break}},[t,s,c,y,u,a]);return o.useMemo(()=>({handleBlur:V,handleFocus:I,handleToggle:_,handleKeyDown:O,highlightedIndex:y,setHighlightedIndex:v}),[V,I,_,O,y,v])}function ke({options:t=[],jsxOptions:s=[],value:c,defaultValue:u=void 0,onChange:a,disabled:b=!1,loading:h=!1,error:T=!1,placeholder:y="Choose option",emptyText:v="No options",disabledText:V="Disabled",loadingText:I="Loading",errorText:_="Failed to load",disabledOption:N="Disabled option",emptyOption:O="Empty option",invalidOption:p="Invalid option",setVisibility:w}){const x=o.useId(),A=c!==void 0,[C,l]=o.useState(u),W=A?c:C,L=r=>!r||typeof r!="object"||Array.isArray(r)?!1:"id"in r||"value"in r||"name"in r||"label"in r||"disabled"in r,R=o.useMemo(()=>{if(!t)return[];const r=[],$=(n,f,S)=>{let e=S?.id??S?.value;if(e==null&&(e=f??n),typeof f=="number"&&f===0){r.push({key:"0",value:0,userId:0,label:"0",original:S});return}if(typeof f=="boolean"){r.push({key:`bool-${r.length}`,value:f,userId:e,label:String(f),type:"boolean",original:S});return}if(f===""||f===null||f===void 0){r.push({key:`empty-${r.length}`,value:null,userId:e??`empty-${r.length}`,disabled:!0,label:O,original:S});return}if(typeof f=="function"){r.push({key:`invalid-${r.length}`,value:null,userId:e??`invalid-${r.length}`,disabled:!0,label:p,original:S});return}f&&typeof f=="object"&&!Array.isArray(f)?r.push({key:f.id??f.value??f.name??n,value:f,userId:e,disabled:!!f.disabled,label:f.name??f.label??n,original:S}):r.push({key:n,value:f,userId:e,label:String(f??n),original:S})};if(Array.isArray(t))for(const n of t){if(n&&typeof n=="object"&&!Array.isArray(n)&&Object.keys(n).length==1&&n.disabled==!0){r.push({key:`disabled-${r.length}`,value:null,userId:null,disabled:!0,label:N,original:n});continue}if(L(n)){const f=n.id??(typeof n.value!="object"?n.value:n.label??n.name??n.value);r.push({key:n.id??n.value??n.name??`opt-${r.length}`,value:n.value??n.id??n,userId:f,disabled:!!n.disabled,label:n.name??n.label??String(n.id??n.value),original:n})}else if(n&&typeof n=="object")for(const[f,S]of Object.entries(n))$(f,S,S);else $(n,n,n)}else if(typeof t=="object")for(const[n,f]of Object.entries(t))$(n,f,f);return r.map((n,f)=>({id:`${x}-opt-${f}`,userId:n.userId,name:String(n.label),raw:n.value,original:n.original,disabled:n.disabled,type:typeof n.value=="boolean"?"boolean":"normal"}))},[t,x]),H=o.useMemo(()=>s.map((r,$)=>({id:`jsx-${x.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"})),[s,x]),P=o.useMemo(()=>[...R,...H],[R,H]),M=P.length>0,q=o.useMemo(()=>!T&&!h&&!b&&M,[T,h,b,M]),k=o.useMemo(()=>{if(!A)return null;if(C){const r=P.find($=>$.id===C);if(r&&r.userId===c)return C}return P.find(r=>r.userId===c)?.id??null},[A,c,P,C]),D=o.useMemo(()=>{const r=A?k:C;return r?P.find($=>$.id===r)??null:null},[A,k,C,P]),z=o.useCallback((r,$)=>{if(r.disabled){$.stopPropagation(),$.preventDefault();return}l(r.id),a?.(r?.original,r?.userId),w(!1)},[a,w]),F=o.useCallback(r=>{r.preventDefault(),r.stopPropagation(),l(null),a?.(null,null)},[a]);return{normalizedOptions:P,selected:D,selectOption:z,clear:F,hasOptions:M,active:q,selectedValue:W,placeholder:y,emptyText:v,disabledText:V,loadingText:I,errorText:_,disabledOption:N,emptyOption:O,invalidOption:p,disabled:b,loading:h,error:T}}const ne=(t,s="invalid-option",c="")=>{const u=c?c.replace(/:/g,""):"";if(typeof t!="string"||!t.trim())return u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`;const a=t.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return a?a||`${s}-${Math.random().toString(36).slice(2,8)}`:u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`};function Te({visibility:t,children:s,selectRef:c,onAnimationDone:u,unmount:a=!0,duration:b,easing:h,offset:T,animateOpacity:y}){const v=o.useRef(null),[V,I]=o.useState(0);o.useEffect(()=>{if(!c?.current)return;I(c.current.offsetHeight);const W=new ResizeObserver(L=>{for(let R of L)I(R.target.offsetHeight)});return W.observe(c.current),()=>W.disconnect()},[c]);const _=`height ${b}ms ${h}${y?`, opacity ${b}ms ${h}`:""}`,N={position:"absolute",top:`calc(100% + ${T}px)`,left:"0",width:"100%",overflow:"hidden",marginTop:"2px",zIndex:"1",height:t?"auto":"0px",opacity:t?1:0,pointerEvents:t?"all":"none",visibility:V?"visible":"hidden"},O=o.useCallback(()=>{const l=v.current;l&&(l.style.height="0px",y&&(l.style.opacity="0"),l.style.transition="")},[y]),p=o.useCallback(()=>{const l=v.current;l&&(l.style.transition=_,l.style.height=`${l.scrollHeight}px`,y&&(l.style.opacity="1"))},[_,y]),w=o.useCallback(()=>{const l=v.current;l&&(l.style.height="auto",l.style.transition="",u&&u())},[u]),x=o.useCallback(()=>{const l=v.current;l&&(l.style.height=`${l.scrollHeight}px`,y&&(l.style.opacity="1"),l.offsetHeight,l.style.transition=_)},[_,y]),A=o.useCallback(()=>{const l=v.current;l&&(l.style.height="0px",y&&(l.style.opacity="0"))},[y]),C=o.useCallback(()=>{const l=v.current;l&&(l.style.transition="")},[]);return m.jsx(fe.CSSTransition,{in:t,timeout:b,classNames:"rac-options",unmountOnExit:a,nodeRef:v,onEnter:O,onEntering:p,onEntered:w,onExit:x,onExiting:A,onExited:C,children:m.jsx("div",{ref:v,className:"rac-options",style:N,children:s})})}const _e=o.memo(Te,(t,s)=>t.visibility===s.visibility&&t.duration===s.duration&&t.easing===s.easing&&t.offset===s.offset&&t.animateOpacity===s.animateOpacity&&t.selectRef===s.selectRef&&t.children===s.children);function re({visibility:t,children:s,duration:c,unmount:u}){const a=o.useRef(null);return m.jsx(fe.CSSTransition,{in:t,timeout:c,classNames:"rac-slide-left",unmountOnExit:!0,nodeRef:a,onEnter:()=>a.current.style.width="0px",onEntering:()=>a.current.style.width=a.current.scrollWidth+"px",onEntered:()=>a.current.style.width="auto",onExit:()=>a.current.style.width=a.current.scrollWidth+"px",onExiting:()=>a.current.style.width="0px",onExited:()=>u?.(),children:m.jsx("div",{ref:a,style:{display:"grid",overflow:"hidden",transition:`width ${c}ms ease`},children:s})})}function Se({unmount:t,children:s,renderedDropdown:c,visibility:u,ownBehavior:a=!1,alwaysOpen:b=!1,duration:h=300,easing:T="ease-out",offset:y=2,animateOpacity:v=!0,...V}){const I=o.useId(),_=o.useMemo(()=>I.replace(/:/g,""),[I]),[N,O]=o.useState([]),p=o.useCallback(d=>{O(Y=>[...Y,d])},[]),w=o.useCallback(d=>{O(Y=>Y.filter(X=>X.id!==d))},[]),x=o.useRef(null),[A,C]=o.useState(!1),l=o.useMemo(()=>b?!0:a?!!u:A,[b,a,u,A]),W=o.useCallback(d=>{b||a||C(Y=>typeof d=="function"?d(Y):d)},[b,a]),{normalizedOptions:L,selected:R,selectOption:H,clear:P,hasOptions:M,active:q,selectedValue:k,disabled:D,loading:z,error:F,placeholder:r,invalidOption:$,options:n,value:f,defaultValue:S,isControlled:e,emptyText:i,disabledText:g,loadingText:E,errorText:J}=ke({...V,setVisibility:W,jsxOptions:N}),{handleBlur:K,handleFocus:j,handleToggle:U,handleKeyDown:Z,highlightedIndex:G,setHighlightedIndex:be}=je({disabled:D,isOpen:l,setIsOpen:W,options:L,selectOption:H,selected:R}),[se,le]=o.useState(!1);o.useEffect(()=>{l||le(!1)},[l]),o.useEffect(()=>{(F||D||z||!M)&&W(!1)},[F,D,z,M]),o.useEffect(()=>{if(l&&se&&G!==-1){const d=L[G];if(d){const Y=`opt-${_}-${ne(d.id)}`,X=document.getElementById(Y);X&&X.scrollIntoView({block:"nearest"})}}},[G,l,se,L,_]);const ae=k!=null&&!(Array.isArray(k)&&k.length===0)&&!(typeof k=="object"&&Object.keys(k).length===0),pe=o.useMemo(()=>{if(F)return J;if(z)return E;if(D)return g;if(R)return R.jsx??R.name;if(ae){const d=L.find(Y=>Y.raw===k);return d?d.name:typeof k=="object"&&k!==null?k.name??k.label??"Selected Object":String(k)}return M?r:i},[D,z,F,M,R,k,r,J,E,g,i]),he=`${_}-listbox`,ge=o.useMemo(()=>L?.map((d,Y)=>{const X=`opt-${_}-${ne(d.id)}`;let B="rac-select-option";return d.className&&(B+=` ${d.className}`),R?.id===d.id&&(B+=" rac-selected"),Y===G&&(B+=" rac-highlighted"),d.disabled&&(B+=" rac-disabled-option"),typeof d.raw=="boolean"&&(B+=d.raw?" rac-true-option":" rac-false-option"),d.name==$&&(B+=" rac-invalid-option"),m.jsx("div",{className:B,onClick:me=>H(d,me),onMouseEnter:()=>!d.disabled&&be(Y),id:X,role:"option","aria-selected":R?.id===d.id,"aria-disabled":d.disabled,children:d.jsx??d.name},d.id)}),[L,H,_,R,G]);return o.useEffect(()=>{process.env.NODE_ENV!=="production"&&(n&&typeof n!="object"&&console.error(`%c[Select Library]:%c Invalid prop %coptions%c.
|
|
7
|
+
Expected %cArray%c or %cObject%c, but received %c${typeof n}%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;"),e&&S!==void 0&&console.warn(`%c[Select Library]:%c .
|
|
9
|
+
`,"color: #faad14; font-weight: bold;","color: default;"))},[n,f,S,e]),m.jsxs(de.Provider,{value:{registerOption:p,unregisterOption:w},children:[s,c,m.jsxs("div",{style:{"--rac-duration":`${h}ms`},className:`rac-select
|
|
10
|
+
${!M||D?"rac-disabled-style":""}
|
|
11
|
+
${z?"rac-loading-style":""}
|
|
12
|
+
${F?"rac-error-style":""}`,tabIndex:q?0:-1,ref:x,role:"combobox","aria-haspopup":"listbox","aria-expanded":l,"aria-controls":he,"aria-label":r,"aria-disabled":D||!M,...q&&{onBlur:K,onFocus:j,onClick:U,onKeyDown:Z},children:[m.jsxs("div",{className:`rac-select-title ${R?.type=="boolean"?R.raw?"rac-true-option":"rac-false-option":""}`,children:[pe,m.jsx(re,{visibility:z&&!F,duration:h,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(re,{visibility:ae&&M&&!D&&!z&&!F,duration:h,children:m.jsx(ve,{className:"rac-select-cancel",role:"button","aria-label":"Clear selection",onClick:d=>P(d)})}),m.jsx(re,{visibility:q,duration:h,children:m.jsx("span",{className:`rac-select-arrow-wrapper ${l?"--open":""}`,children:m.jsx(we,{className:"rac-select-arrow-wrapper"})})})]}),m.jsx(_e,{visibility:l,selectRef:x,onAnimationDone:()=>le(!0),unmount:t,duration:h,easing:T,offset:y,animateOpacity:v,children:m.jsx("div",{className:"rac-select-list",role:"listbox","aria-label":"Options",children:ge})})]})]})}const oe=t=>t?typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(oe).join(" ").replace(/\s+/g," ").trim():o.isValidElement(t)?oe(t.props.children):"":"";function Re({value:t,id:s,className:c,children:u,disabled:a}){const b=o.useContext(de);return o.useEffect(()=>{if(!b)return;const h=oe(u),T={id:String(s??ne(String(h))),value:t!==void 0?t:h,label:typeof u=="string"?u:String(t??s),jsx:u,className:c,disabled:!!a};return b.registerOption(T),()=>b.unregisterOption(T.id)},[s,t,u,c,a]),null}exports.Option=Re;exports.Select=Se;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:
|
|
1
|
+
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}.rac-select{--rac-duration-fast: calc(var(--rac-duration) * .5);--rac-duration-base: var(--rac-duration);--rac-duration-slow: calc(var(--rac-duration) * 1.3);--rac-base-red: #e7000b;--rac-base-green: #4caf50;--rac-base-yellow: #ffc107;--rac-select-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-color: CanvasText;--rac-select-border: 2px solid color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-select-border-error: 2px solid color-mix(in srgb, var(--rac-base-red), CanvasText 15%);--rac-select-height: 2em;--rac-select-padding: 0em .5em;--rac-disabled-opacity: .75;--rac-dots-height: 3px;--rac-dots-width: 3px;--rac-dots-color: currentColor;--rac-dots-gap: 3px;--rac-dots-padding-left: .25em;--rac-dots-align: end;--rac-dots-animation-duration: 1.4s;--rac-dots-animation-delay-1: 0s;--rac-dots-animation-delay-2: .2s;--rac-dots-animation-delay-3: .4s;--rac-arrow-height: 1em;--rac-arrow-width: 1em;--rac-arrow-padding: 1px 0 2px;--rac-cancel-height: .9em;--rac-cancel-width: .9em;--rac-scroll-color: color-mix(in srgb, CanvasText 10%, Canvas);--rac-scroll-track: color-mix(in srgb, CanvasText 5%, Canvas);--rac-scroll-padding-top: .5em;--rac-scroll-padding-bottom: .5em;--rac-option-hover: color-mix(in srgb, CanvasText 6%, Canvas);--rac-option-highlight: color-mix(in srgb, CanvasText 10%, Canvas);--rac-option-selected: color-mix(in srgb, CanvasText 14%, Canvas);--rac-list-background: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-list-color: CanvasText;--rac-list-max-height: 250px;--rac-option-padding: .5em;--rac-disabled-option-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-invalid-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-true-option-color: color-mix(in srgb, var(--rac-base-green), CanvasText 10%);--rac-false-option-color: color-mix(in srgb, var(--rac-base-red), CanvasText 10%);--rac-warning-option-color: color-mix(in srgb, var(--rac-base-yellow), CanvasText 10%);background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);height:var(--rac-select-height);transition:border-color var(--rac-duration-base);justify-content:space-between;box-sizing:border-box;position:relative;cursor:pointer;display:flex}.rac-loading-style,.rac-disabled-style{opacity:var(--rac-disabled-opacity);transition:border-color var(--rac-duration-base),filter var(--rac-duration-base),opacity var(--rac-duration-base);cursor:wait}.rac-disabled-style{cursor:not-allowed}.rac-error-style{border:var(--rac-select-border-error);cursor:help}.rac-select-title{display:flex;align-items:center}.rac-loading-dots{display:inline-flex;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);height:90%;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-list{background-color:var(--rac-list-background);color:var(--rac-list-color);max-height:var(--rac-list-max-height);overflow-y:auto;scrollbar-color:var(--rac-scroll-color) var(--rac-scroll-track);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:var(--rac-scroll-padding-top);scroll-padding-bottom:var(--rac-scroll-padding-bottom);z-index:1;transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{padding:var(--rac-option-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1)}.rac-select-option:not(.rac-disabled-option):hover{background-color:var(--rac-option-hover)}.rac-select-option.rac-highlighted{background-color:var(--rac-option-highlight)}.rac-select-option.rac-selected,.rac-select-option.rac-selected.rac-highlighted{background-color:var(--rac-option-selected)}.rac-disabled-option{cursor:not-allowed;color:var(--rac-disabled-option-color)}.rac-invalid-option{color:var(--rac-invalid-option-color)}.rac-true-option{color:var(--rac-true-option-color)}.rac-false-option{color:var(--rac-false-option-color)}
|