react-animated-select 0.1.5 → 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 +150 -22
- package/dist/index.cjs.js +8 -12
- package/dist/index.css +1 -1
- package/dist/index.es.js +498 -417
- package/index.d.ts +11 -0
- package/package.json +1 -1
- package/src/getText.jsx +11 -0
- package/src/option.jsx +6 -3
- package/src/options.jsx +53 -34
- package/src/select.css +127 -78
- package/src/select.jsx +56 -22
- package/src/slideLeft.jsx +9 -7
- package/src/useSelect.jsx +40 -20
- package/src/useSelectLogic.jsx +267 -241
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
|
|
@@ -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,36 @@ 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`. |
|
|
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). |
|
|
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
|
-
|
|
84
|
+
|
|
85
|
+
---
|
|
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. |
|
|
85
106
|
|
|
86
107
|
---
|
|
87
108
|
|
|
@@ -100,8 +121,7 @@ Built-in “Clear” button and intelligent state handling (loading, error, empt
|
|
|
100
121
|
|
|
101
122
|
| Prop | Type | Description |
|
|
102
123
|
|------|------|-------------|
|
|
103
|
-
| `
|
|
104
|
-
| `id` | `string` | Optional unique ID (generated automatically if not provided). |
|
|
124
|
+
| `id` | `string` | Optional unique ID (generated automatically if not provided). value may be used instead of id (lower priority)|
|
|
105
125
|
| `disabled` | `boolean` | If true, this option cannot be selected or highlighted. |
|
|
106
126
|
| `className` | `string` | Custom class for individual option styling. |
|
|
107
127
|
|
|
@@ -117,6 +137,114 @@ Built-in “Clear” button and intelligent state handling (loading, error, empt
|
|
|
117
137
|
| `Escape` | Close dropdown. |
|
|
118
138
|
| `Tab` | Close dropdown and move focus to next element. |
|
|
119
139
|
|
|
140
|
+
## Custom Styling
|
|
141
|
+
|
|
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.
|
|
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
|
+
|
|
187
|
+
### CSS Class Hierarchy
|
|
188
|
+
|
|
189
|
+
| Class Name | Target Element | Description |
|
|
190
|
+
|:---|:---|:---|
|
|
191
|
+
| `.rac-select` | **Main Wrapper** | The primary container of the select. |
|
|
192
|
+
| `.rac-select-title` | **Value Display** | The area showing the selected option or placeholder. |
|
|
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. |
|
|
197
|
+
| `.rac-select-arrow-wrapper` | **Arrow Icon** | Container for the dropdown arrow. |
|
|
198
|
+
| `.rac-select-list` | **Dropdown List** | The `listbox` container that holds all options. |
|
|
199
|
+
| `.rac-select-option` | **Option Item** | Individual item within the dropdown list. |
|
|
200
|
+
|
|
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.
|
|
203
|
+
|
|
204
|
+
### Component States
|
|
205
|
+
|
|
206
|
+
The select and its options react to internal states by applying the following classes:
|
|
207
|
+
|
|
208
|
+
#### Main Select States (applied to `.rac-select`)
|
|
209
|
+
- `.rac-disabled-style`: Applied when `disabled={true}` or when the options list is empty.
|
|
210
|
+
- `.rac-loading-style`: Applied during the `loading={true}` state.
|
|
211
|
+
- `.rac-error-style`: Applied when `error={true}`.
|
|
212
|
+
|
|
213
|
+
#### Option States (applied to `.rac-select-option`)
|
|
214
|
+
- `.rac-highlighted`: The option currently focused via keyboard or mouse hover.
|
|
215
|
+
- `.rac-disabled-option`: Applied to options that have their own `disabled: true` property.
|
|
216
|
+
- `.rac-invalid-option`: Applied to items that are not valid data types (e.g., functions).
|
|
217
|
+
- `.rac-true-option`: Specialized styling when the option's raw value is exactly `true`.
|
|
218
|
+
- `.rac-false-option`: Specialized styling when the option's raw value is exactly `false`.
|
|
219
|
+
|
|
220
|
+
#### Trigger States
|
|
221
|
+
- `.rac-select-arrow-wrapper.--open`: Applied to the arrow icon when the dropdown is expanded.
|
|
222
|
+
|
|
223
|
+
## Change log
|
|
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.
|
|
227
|
+
|
|
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).
|
|
229
|
+
|
|
230
|
+
**Fixed**
|
|
231
|
+
|
|
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.
|
|
233
|
+
|
|
234
|
+
**Customization & Props**
|
|
235
|
+
|
|
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.
|
|
247
|
+
|
|
120
248
|
## License
|
|
121
249
|
|
|
122
250
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
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} />`,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;"),
|
|
9
|
-
`,"color: #faad14; font-weight: bold;","color: default;"))},[
|
|
10
|
-
${!
|
|
11
|
-
${
|
|
12
|
-
${
|
|
13
|
-
${S?"--open":""}
|
|
14
|
-
${!h||T?"rac-disabled-style":""}
|
|
15
|
-
${O?"rac-loading-style":""}
|
|
16
|
-
${C?"rac-error-style":""}`,children:m.jsx(fe,{className:"rac-select-arrow-wrapper"})})})]}),m.jsx(pe,{visibility:S,selectRef:P,onAnimationDone:()=>g(!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})})]})]})}function me({value:a,id:s,className:c,children:u,disabled:l}){const d=n.useContext(ae);return n.useEffect(()=>{if(!d)return;const y={id:s??Q(String(a??u)),value:a,label:typeof u=="string"?u:String(a??s),jsx:u,className:c,disabled:!!l};return d.registerOption(y),()=>d.unregisterOption(y.id)},[s,a,u,c,l]),null}exports.Option=me;exports.Select=ge;
|
|
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)}
|