react-animated-select 0.2.0 → 0.2.7
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 +114 -38
- package/dist/index.cjs.js +9 -12
- package/dist/index.css +1 -1
- package/dist/index.es.js +587 -505
- package/index.d.ts +18 -4
- package/package.json +1 -1
- package/src/icons.jsx +18 -16
- package/src/options.jsx +53 -34
- package/src/select.css +146 -74
- package/src/select.jsx +108 -31
- package/src/slideLeft.jsx +9 -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,14 +73,40 @@ 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. |
|
|
83
83
|
| `error` | `boolean` | `false` | Shows the error state and `errorText`. |
|
|
84
|
+
| `style` | `object` | `{}` | Inline styles for the root container. |,
|
|
85
|
+
| `className` | `string` | '' | Additional CSS class for the root container .rac-select. |,
|
|
86
|
+
| `ArrowIcon` | `ElementType \ string \ JSX` | Default icon | Custom arrow icon. Accepts a component, image path, or JSX. |
|
|
87
|
+
| `ClearIcon` | `ElementType \ string \ JSX` | Default icon | Custom clear icon. Accepts a component, image path, or JSX. |,
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
### Animation Controls
|
|
92
|
+
|
|
93
|
+
| Prop | Type | Default | Description |
|
|
94
|
+
|------|------|---------|-------------|
|
|
95
|
+
| `duration` | `number` | `300` | Speed of all transitions in milliseconds (mapped to CSS variable `--rac-duration`). |
|
|
96
|
+
| `easing` | `string` | `'ease-out'` | CSS transition timing function (e.g., `cubic-bezier(.4,0,.2,1)`). |
|
|
97
|
+
| `offset` | `number` | `2` | Vertical gap (in pixels) between the select trigger and the dropdown list. |
|
|
98
|
+
| `animateOpacity` | `boolean` | `true` | Enables or disables the fade effect during opening and closing. |
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
### Behavioral Props
|
|
103
|
+
|
|
104
|
+
| Prop | Type | Default | Description |
|
|
105
|
+
|------|------|---------|-------------|
|
|
106
|
+
| `visibility` | `boolean` | `false` | Manually controls the visibility of the list (used with `ownBehavior`). |
|
|
107
|
+
| `ownBehavior` | `boolean` | `false` | If `true`, the component stops managing its own open/close state and relies on the `visibility` prop. |
|
|
108
|
+
| `alwaysOpen` | `boolean` | `false` | Keeps the list permanently visible. Primarily used for debugging or specific UI layouts. |
|
|
109
|
+
| `unmount` | `boolean` | `true` | When `true`, the list is removed from the DOM when closed. When `false`, it stays invisible in the DOM. |
|
|
84
110
|
|
|
85
111
|
---
|
|
86
112
|
|
|
@@ -119,24 +145,85 @@ function App() {
|
|
|
119
145
|
|
|
120
146
|
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
147
|
|
|
148
|
+
### CSS Variables (Theming)
|
|
149
|
+
|
|
150
|
+
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.
|
|
151
|
+
|
|
152
|
+
| Variable | Default Value / Calculation | Description |
|
|
153
|
+
|:---|:---|:---|
|
|
154
|
+
| **Durations** | | |
|
|
155
|
+
| `--rac-duration-fast` | `calc(var(--rac-duration) * 0.5)` | Used for micro-interactions. |
|
|
156
|
+
| `--rac-duration-base` | `var(--rac-duration)` | Main transition speed. |
|
|
157
|
+
| `--rac-duration-slow` | `calc(var(--rac-duration) * 1.3)` | Used for larger list transitions. |
|
|
158
|
+
| **Colors** | | |
|
|
159
|
+
| `--rac-base-red` | `#e7000b` | Base semantic red. |
|
|
160
|
+
| `--rac-base-green` | `#4caf50` | Base semantic green. |
|
|
161
|
+
| `--rac-base-yellow` | `#ffc107` | Base semantic yellow. |
|
|
162
|
+
| **Select Trigger** | | |
|
|
163
|
+
| `--rac-select-background`| `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Main background. |
|
|
164
|
+
| `--rac-select-color` | `CanvasText` | Title text color. |
|
|
165
|
+
| `--rac-select-border` | `2px solid ...` | Default border style. |
|
|
166
|
+
| `--rac-select-border-error`| `2px solid ...` | Border style in error state. |
|
|
167
|
+
| `--rac-select-height` | `2em` | Fixed height of the select. |
|
|
168
|
+
| `--rac-select-padding` | `0em 0.5em` | Internal horizontal padding. |
|
|
169
|
+
| `--rac-disabled-opacity` | `0.75` | Opacity when `disabled={true}`. |
|
|
170
|
+
| `--rac-title-anim-shift` | 4px | Vertical offset for title change animation. |
|
|
171
|
+
| `--rac-title-anim-entry-ease` | cubic-bezier(0.34, 1.56, 0.64, 1) | Easing function for text entry. |
|
|
172
|
+
| **Loading Dots** | | |
|
|
173
|
+
| `--rac-dots-color` | `currentColor` | Color of the loader dots. |
|
|
174
|
+
| `--rac-dots-animation-duration`| `1.4s` | Full cycle of the dots animation. |
|
|
175
|
+
| `--rac-dots-gap` | `3px` | Space between points. |
|
|
176
|
+
| `--rac-dots-height` | `3px` | Diameter of the loader dots. |
|
|
177
|
+
| `--rac-dots-width` | `3px` | Width of the loader dots. |
|
|
178
|
+
| `--rac-dots-padding-left` | `0.25em` | Space between the title text and the dots. |
|
|
179
|
+
| `--rac-dots-align` | `end` | Vertical alignment of the dots. |
|
|
180
|
+
| `--rac-dots-animation-delay-1`| `0s` | Start delay for the first dot. |
|
|
181
|
+
| `--rac-dots-animation-delay-2`| `0.2s` | Start delay for the second dot. |
|
|
182
|
+
| `--rac-dots-animation-delay-3`| `0.4s` | Start delay for the third dot. |
|
|
183
|
+
| **Icons & Buttons** | | |
|
|
184
|
+
| `--rac-cancel-height` | `0.9em` | Clear icon size. |
|
|
185
|
+
| `--rac-cancel-width` | `0.9em` | Clear icon width. |
|
|
186
|
+
| `--rac-arrow-height` | `1em` | Dropdown arrow size. |
|
|
187
|
+
| `--rac-arrow-width` | `1em` | Dropdown arrow width. |
|
|
188
|
+
| `--rac-arrow-padding` | `1px 0 2px` | Internal padding for arrow alignment. |
|
|
189
|
+
| **Dropdown & Scroll** | | |
|
|
190
|
+
| `--rac-list-background` | `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Dropdown list background. |
|
|
191
|
+
| `--rac-list-max-height` | `250px` | Maximum height before scrolling. |
|
|
192
|
+
| `--rac-scroll-color` | `color-mix(...)` | Scrollbar thumb color. |
|
|
193
|
+
| `--rac-scroll-track` | `color-mix(...)` | Background color of the scrollbar track. |
|
|
194
|
+
| `--rac-scroll-padding-top` | `0.5em` | Internal top padding of the list. |
|
|
195
|
+
| `--rac-scroll-padding-bottom` | `0.5em` | Internal bottom padding of the list. |
|
|
196
|
+
| `--rac-list-color` | `CanvasText` | Text color inside the dropdown list. |
|
|
197
|
+
| **Options State** | | |
|
|
198
|
+
| `--rac-option-hover` | `color-mix(...)` | Background on mouse hover. |
|
|
199
|
+
| `--rac-option-highlight` | `color-mix(...)` | Background when keyboard navigating. |
|
|
200
|
+
| `--rac-option-selected` | `color-mix(...)` | Background of the active option. |
|
|
201
|
+
| `--rac-disabled-option-color`| `color-mix(...)` | Text color for disabled items. |
|
|
202
|
+
| `--rac-true-option-color` | `color-mix(...)` | Text color for "Boolean True" items. |
|
|
203
|
+
| `--rac-false-option-color` | `color-mix(...)` | Text color for "Boolean False" items. |
|
|
204
|
+
| `--rac-option-padding` | `0.5em` | Internal padding for each option item. |
|
|
205
|
+
| `--rac-invalid-option-color` | `color-mix(...)` | Text color for invalid options. |
|
|
206
|
+
| `--rac-warning-option-color` | `color-mix(...)` | Text color for warning/caution options. |
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
122
210
|
### CSS Class Hierarchy
|
|
123
211
|
|
|
124
212
|
| Class Name | Target Element | Description |
|
|
125
213
|
|:---|:---|:---|
|
|
126
214
|
| `.rac-select` | **Main Wrapper** | The primary container of the select. |
|
|
127
215
|
| `.rac-select-title` | **Value Display** | The area showing the selected option or placeholder. |
|
|
128
|
-
| `.rac-
|
|
129
|
-
| `.rac-loading-dots
|
|
130
|
-
| `.rac-
|
|
131
|
-
| `.rac-select-
|
|
216
|
+
| `.rac-title-text` | **Title text itself** | The container for the title text itself. |
|
|
217
|
+
| `.rac-loading-dots` | **Loader** | Wrapper for the loading animation. |
|
|
218
|
+
| `.rac-loading-dots i` | **Loader Point** | Directly target animated points for styling. |
|
|
219
|
+
| `.rac-select-buttons` | **Action Group** | Wrapper for the Clear (X) and Arrow icons. |
|
|
220
|
+
| `.rac-select-cancel` | **Clear Button** | The "X" icon for clearing the selection. |
|
|
132
221
|
| `.rac-select-arrow-wrapper` | **Arrow Icon** | Container for the dropdown arrow. |
|
|
133
222
|
| `.rac-select-list` | **Dropdown List** | The `listbox` container that holds all options. |
|
|
134
223
|
| `.rac-select-option` | **Option Item** | Individual item within the dropdown list. |
|
|
135
224
|
|
|
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.
|
|
225
|
+
**Note on Animation:** The Clear button and Dropdown List use `react-transition-group`.
|
|
226
|
+
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
227
|
|
|
141
228
|
### Component States
|
|
142
229
|
|
|
@@ -148,6 +235,7 @@ The select and its options react to internal states by applying the following cl
|
|
|
148
235
|
- `.rac-error-style`: Applied when `error={true}`.
|
|
149
236
|
|
|
150
237
|
#### Option States (applied to `.rac-select-option`)
|
|
238
|
+
- `.rac-selected`: Indicates the currently selected item.
|
|
151
239
|
- `.rac-highlighted`: The option currently focused via keyboard or mouse hover.
|
|
152
240
|
- `.rac-disabled-option`: Applied to options that have their own `disabled: true` property.
|
|
153
241
|
- `.rac-invalid-option`: Applied to items that are not valid data types (e.g., functions).
|
|
@@ -158,30 +246,18 @@ The select and its options react to internal states by applying the following cl
|
|
|
158
246
|
- `.rac-select-arrow-wrapper.--open`: Applied to the arrow icon when the dropdown is expanded.
|
|
159
247
|
|
|
160
248
|
## Change log
|
|
161
|
-
### 0.2
|
|
162
|
-
**
|
|
163
|
-
|
|
164
|
-
-
|
|
165
|
-
|
|
166
|
-
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
**API & Logic Changes**
|
|
174
|
-
|
|
175
|
-
- **`onChange` arguments:** Swapped for better DX. First argument: **Original user data**; Second argument: **Unique ID**.
|
|
176
|
-
|
|
177
|
-
- **Visual States:** Fixed "Hover vs. Selection" conflict. Hovering no longer clears the selection highlight; keyboard and mouse focus now coexist smoothly with polished CSS transitions.
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
**Bug Fixes**
|
|
181
|
-
|
|
182
|
-
- **A11y & UI:** Added `scrollIntoView` support for keyboard navigation—the active option always remains visible.
|
|
183
|
-
|
|
184
|
-
- **Empty State:** Improved stability when receiving empty, null, or undefined option arrays.
|
|
249
|
+
### 0.2.7
|
|
250
|
+
#### **New Features**
|
|
251
|
+
- **Custom Icons Support:** Added `ArrowIcon` and `ClearIcon` props. Users can now pass their own SVG components, image paths, or JSX elements to customize the interface.
|
|
252
|
+
- **Ref Forwarding:** Implemented access to the internal ref. This enables manual focus management and integration with third-party libraries.
|
|
253
|
+
- **Enhanced Styling:** Added `className` and `style` prop to the root `.rac-select` container for easier layout integration and style overrides.
|
|
254
|
+
- **Animated Title Transitions:** Introduced a smooth "fade-and-slide" animation for the `title` element when the value changes.
|
|
255
|
+
|
|
256
|
+
#### **Architecture & CSS**
|
|
257
|
+
- **CSS Variable Injection:** Refactored animation parameters into CSS custom properties (`--rac-title-anim-shift`, `--rac-title-anim-entry-ease`
|
|
258
|
+
|
|
259
|
+
#### **Bug Fixes**
|
|
260
|
+
- **Opacity Animation:** Resolved an issue where the optional opacity transition for the dropdown list was not triggering correctly during the enter/exit phases.
|
|
185
261
|
|
|
186
262
|
## License
|
|
187
263
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
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"),pe=require("react-transition-group");var re={exports:{}},Q={};var ue;function ke(){if(ue)return Q;ue=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function i(u,b,a){var y=null;if(a!==void 0&&(y=""+a),b.key!==void 0&&(y=""+b.key),"key"in b){a={};for(var R in b)R!=="key"&&(a[R]=b[R])}else a=b;return b=a.ref,{$$typeof:t,type:u,key:y,ref:b!==void 0?b:null,props:a}}return Q.Fragment=s,Q.jsx=i,Q.jsxs=i,Q}var ee={};var fe;function Te(){return fe||(fe=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===L?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case N:return"Profiler";case x:return"StrictMode";case F:return"Suspense";case Y:return"SuspenseList";case V: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 f:return"Portal";case d:return e.displayName||"Context";case $:return(e._context.displayName||"Context")+".Consumer";case W:var c=e.render;return e=e.displayName,e||(e=c.displayName||c.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case G:return c=e.displayName||null,c!==null?c:t(e.type)||"Memo";case _:c=e._payload,e=e._init;try{return t(e(c))}catch{}}return null}function s(e){return""+e}function i(e){try{s(e);var c=!1}catch{c=!0}if(c){c=console;var g=c.error,T=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return g.call(c,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",T),s(e)}}function u(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var c=t(e);return c?"<"+c+">":"<...>"}catch{return"<...>"}}function b(){var e=S.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function y(e){if(H.call(e,"key")){var c=Object.getOwnPropertyDescriptor(e,"key").get;if(c&&c.isReactWarning)return!1}return e.key!==void 0}function R(e,c){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)",c))}g.isReactWarning=!0,Object.defineProperty(e,"key",{get:g,configurable:!0})}function v(){var e=t(this.type);return h[e]||(h[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 k(e,c,g,T,U,X){var j=g.ref;return e={$$typeof:P,type:e,key:c,props:g,_owner:T},(j!==void 0?j:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:v}):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:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function D(e,c,g,T,U,X){var j=c.children;if(j!==void 0)if(T)if(K(j)){for(T=0;T<j.length;T++)I(j[T]);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(H.call(c,"key")){j=t(e);var z=Object.keys(c).filter(function(te){return te!=="key"});T=0<z.length?"{key: someKey, "+z.join(": ..., ")+": ...}":"{key: someKey}",E[j+T]||(z=0<z.length?"{"+z.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
|
-
${O?"rac-
|
|
12
|
-
${
|
|
13
|
-
|
|
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} />`,T,j,z,j),E[j+T]=!0)}if(j=null,g!==void 0&&(i(g),j=""+g),y(c)&&(i(c.key),j=""+c.key),"key"in c){g={};for(var B in c)B!=="key"&&(g[B]=c[B])}else g=c;return j&&R(g,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,j,g,b(),U,X)}function I(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}var C=o,P=Symbol.for("react.transitional.element"),f=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),$=Symbol.for("react.consumer"),d=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),G=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),V=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),S=C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,K=Array.isArray,O=console.createTask?console.createTask:function(){return null};C={react_stack_bottom_frame:function(e){return e()}};var r,h={},n=C.react_stack_bottom_frame.bind(C,a)(),l=O(u(a)),E={};ee.Fragment=w,ee.jsx=function(e,c,g){var T=1e4>S.recentlyCreatedOwnerStacks++;return D(e,c,g,!1,T?Error("react-stack-top-frame"):n,T?O(u(e)):l)},ee.jsxs=function(e,c,g){var T=1e4>S.recentlyCreatedOwnerStacks++;return D(e,c,g,!0,T?Error("react-stack-top-frame"):n,T?O(u(e)):l)}})()),ee}var de;function _e(){return de||(de=1,process.env.NODE_ENV==="production"?re.exports=ke():re.exports=Te()),re.exports}var m=_e();const Re=({className:t="",...s})=>m.jsx("svg",{className:t,role:"button","aria-label":"Clear selection",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"})}),Se=({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"})}),he=o.createContext(null);function $e({disabled:t,isOpen:s,setIsOpen:i,options:u,selectOption:b,selected:a}){const y=o.useRef(!1),R=o.useRef(0),[v,k]=o.useState(-1);o.useEffect(()=>{const f=()=>{R.current=Date.now()};return window.addEventListener("focus",f),()=>window.removeEventListener("focus",f)},[]),o.useEffect(()=>{if(s){let f=-1;if(a){const w=u.findIndex(x=>x.id===a.id&&!x.disabled);w>=0&&(f=w)}f===-1&&(f=u.findIndex(w=>!w.disabled)),k(f)}else k(-1)},[s,a,u]);const D=o.useCallback(f=>{f.currentTarget.contains(f.relatedTarget)||i(!1)},[i]),I=o.useCallback(()=>{t||document.hidden||Date.now()-R.current<100||s||(i(!0),y.current=!0,setTimeout(()=>{y.current=!1},200))},[t,s,i]),A=o.useCallback(f=>{t||f.target.closest(".rac-select-cancel")||y.current||i(!s)},[t,s,i]),C=(f,w)=>{if(u.every($=>$.disabled))return-1;let x=f,N=0;do x+=w,x<0&&(x=u.length-1),x>=u.length&&(x=0),N++;while(u[x]?.disabled&&N<=u.length);return x},P=o.useCallback(f=>{if(!t)switch(f.key){case"Enter":case" ":f.preventDefault(),s?v!==-1&&u[v]&&b(u[v],f):i(!0);break;case"Escape":f.preventDefault(),i(!1);break;case"ArrowDown":f.preventDefault(),s?k(w=>C(w,1)):i(!0);break;case"ArrowUp":f.preventDefault(),s?k(w=>C(w,-1)):i(!0);break;case"Tab":s&&i(!1);break}},[t,s,i,v,u,b]);return o.useMemo(()=>({handleBlur:D,handleFocus:I,handleToggle:A,handleKeyDown:P,highlightedIndex:v,setHighlightedIndex:k}),[D,I,A,P,v,k])}function Ae({options:t=[],jsxOptions:s=[],value:i,defaultValue:u=void 0,onChange:b,disabled:a=!1,loading:y=!1,error:R=!1,placeholder:v="Choose option",emptyText:k="No options",disabledText:D="Disabled",loadingText:I="Loading",errorText:A="Failed to load",disabledOption:C="Disabled option",emptyOption:P="Empty option",invalidOption:f="Invalid option",setVisibility:w}){const x=o.useId(),N=i!==void 0,[$,d]=o.useState(u),W=N?i:$,F=r=>!r||typeof r!="object"||Array.isArray(r)?!1:"id"in r||"value"in r||"name"in r||"label"in r||"disabled"in r,Y=o.useMemo(()=>{if(!t)return[];const r=[],h=(n,l,E)=>{let e=E?.id??E?.value;if(e==null&&(e=l??n),typeof l=="number"&&l===0){r.push({key:"0",value:0,userId:0,label:"0",original:E});return}if(typeof l=="boolean"){r.push({key:`bool-${r.length}`,value:l,userId:e,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??`empty-${r.length}`,disabled:!0,label:P,original:E});return}if(typeof l=="function"){r.push({key:`invalid-${r.length}`,value:null,userId:e??`invalid-${r.length}`,disabled:!0,label:f,original:E});return}l&&typeof l=="object"&&!Array.isArray(l)?r.push({key:l.id??l.value??l.name??n,value:l,userId:e,disabled:!!l.disabled,label:l.name??l.label??n,original:E}):r.push({key:n,value:l,userId:e,label:String(l??n),original:E})};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:C,original:n});continue}if(F(n)){const l=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:l,disabled:!!n.disabled,label:n.name??n.label??String(n.id??n.value),original:n})}else if(n&&typeof n=="object")for(const[l,E]of Object.entries(n))h(l,E,E);else h(n,n,n)}else if(typeof t=="object")for(const[n,l]of Object.entries(t))h(n,l,l);return r.map((n,l)=>({id:`${x}-opt-${l}`,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]),G=o.useMemo(()=>s.map((r,h)=>({id:`jsx-${x.replace(/:/g,"")}-${r.id}-${h}`,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]),_=o.useMemo(()=>[...Y,...G],[Y,G]),V=_.length>0,L=o.useMemo(()=>!R&&!y&&!a&&V,[R,y,a,V]),S=o.useMemo(()=>{if(!N)return null;if($){const r=_.find(h=>h.id===$);if(r&&r.userId===i)return $}return _.find(r=>r.userId===i)?.id??null},[N,i,_,$]),H=o.useMemo(()=>{const r=N?S:$;return r?_.find(h=>h.id===r)??null:null},[N,S,$,_]),K=o.useCallback((r,h)=>{if(r.disabled){h.stopPropagation(),h.preventDefault();return}d(r.id),b?.(r?.original,r?.userId),w(!1)},[b,w]),O=o.useCallback(r=>{r.preventDefault(),r.stopPropagation(),d(null),b?.(null,null)},[b]);return{normalizedOptions:_,selected:H,selectOption:K,clear:O,hasOptions:V,active:L,selectedValue:W,placeholder:v,emptyText:k,disabledText:D,loadingText:I,errorText:A,disabledOption:C,emptyOption:P,invalidOption:f,disabled:a,loading:y,error:R}}const oe=(t,s="invalid-option",i="")=>{const u=i?i.replace(/:/g,""):"";if(typeof t!="string"||!t.trim())return u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`;const b=t.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return b?b||`${s}-${Math.random().toString(36).slice(2,8)}`:u?`${s}-${u}`:`${s}-${Math.random().toString(36).slice(2,8)}`};function Ce({visibility:t,children:s,selectRef:i,onAnimationDone:u,unmount:b=!0,duration:a,easing:y,offset:R,animateOpacity:v}){const k=o.useRef(null),[D,I]=o.useState(0);o.useEffect(()=>{if(!i?.current)return;I(i.current.offsetHeight);const W=new ResizeObserver(F=>{for(let Y of F)I(Y.target.offsetHeight)});return W.observe(i.current),()=>W.disconnect()},[i]);const A=`height ${a}ms ${y}${v?`, opacity ${a}ms ${y}`:""}`,C={position:"absolute",top:`calc(100% + ${R}px)`,left:"0",width:"100%",overflow:"hidden",marginTop:"2px",zIndex:"1",height:t?"auto":"0px",opacity:t?1:0,pointerEvents:t?"all":"none",visibility:D?"visible":"hidden"},P=o.useCallback(()=>{const d=k.current;d&&(d.style.height="0px",v&&(d.style.opacity="0"),d.style.transition="")},[v]),f=o.useCallback(()=>{const d=k.current;d&&(d.style.transition=A,d.style.height=`${d.scrollHeight}px`,v&&(d.style.opacity="1"))},[A,v]),w=o.useCallback(()=>{const d=k.current;d&&(d.style.height="auto",d.style.transition="",u&&u())},[u]),x=o.useCallback(()=>{const d=k.current;d&&(d.style.height=`${d.scrollHeight}px`,v&&(d.style.opacity="1"),d.offsetHeight,d.style.transition=A)},[A,v]),N=o.useCallback(()=>{const d=k.current;d&&(d.style.height="0px",v&&(d.style.opacity="0"))},[v]),$=o.useCallback(()=>{const d=k.current;d&&(d.style.transition="")},[]);return m.jsx(pe.CSSTransition,{in:t,timeout:a,classNames:"rac-options",unmountOnExit:b,nodeRef:k,onEnter:P,onEntering:f,onEntered:w,onExit:x,onExiting:N,onExited:$,children:m.jsx("div",{ref:k,className:"rac-options",style:C,children:s})})}const Ne=o.memo(Ce,(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 ne({visibility:t,children:s,duration:i=300,unmount:u,style:b}){const a=o.useRef(null);return m.jsx(pe.CSSTransition,{in:t,timeout:i,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:{...b,overflow:"hidden",transition:`width ${i}ms ease`},children:s})})}const be=(t,s)=>{if(!t)return null;if(typeof t=="string")return m.jsx("img",{src:t,...s,alt:""});if(o.isValidElement(t))return o.cloneElement(t,s);if(typeof t=="function"||typeof t=="object"&&t.$$typeof){const i=t;return m.jsx(i,{...s})}return null},Oe=o.forwardRef(({unmount:t,children:s,renderedDropdown:i,visibility:u,ownBehavior:b=!1,alwaysOpen:a=!1,duration:y=300,easing:R="ease-out",offset:v=2,animateOpacity:k=!0,style:D={},className:I="",ArrowIcon:A=Se,ClearIcon:C=Re,...P},f)=>{const w=o.useId(),x=o.useMemo(()=>w.replace(/:/g,""),[w]),[N,$]=o.useState([]),d=o.useCallback(p=>{$(M=>[...M,p])},[]),W=o.useCallback(p=>{$(M=>M.filter(q=>q.id!==p))},[]),F=o.useRef(null);o.useEffect(()=>{f&&(typeof f=="function"?f(F.current):f.current=F.current)},[f]),o.useImperativeHandle(f,()=>F.current);const[Y,G]=o.useState(!1),_=o.useMemo(()=>a?!0:b?!!u:Y,[a,b,u,Y]),V=o.useCallback(p=>{a||b||G(M=>typeof p=="function"?p(M):p)},[a,b]),{normalizedOptions:L,selected:S,selectOption:H,clear:K,hasOptions:O,active:r,selectedValue:h,disabled:n,loading:l,error:E,placeholder:e,invalidOption:c,options:g,value:T,defaultValue:U,isControlled:X,emptyText:j,disabledText:z,loadingText:B,errorText:te}=Ae({...P,setVisibility:V,jsxOptions:N}),{handleBlur:ge,handleFocus:me,handleToggle:ye,handleKeyDown:xe,highlightedIndex:Z,setHighlightedIndex:Ee}=$e({disabled:n,isOpen:_,setIsOpen:V,options:L,selectOption:H,selected:S}),[le,ie]=o.useState(!1);o.useEffect(()=>{_||ie(!1)},[_]),o.useEffect(()=>{(E||n||l||!O)&&V(!1)},[E,n,l,O]),o.useEffect(()=>{if(_&&le&&Z!==-1){const p=L[Z];if(p){const M=`opt-${x}-${oe(p.id)}`,q=document.getElementById(M);q&&q.scrollIntoView({block:"nearest"})}}},[Z,_,le,L,x]);const ae=h!=null&&!(Array.isArray(h)&&h.length===0)&&!(typeof h=="object"&&Object.keys(h).length===0),ce=o.useMemo(()=>{if(E)return te;if(l)return B;if(n)return z;if(S)return S.jsx??S.name;if(ae){const p=L.find(M=>M.raw===h);return p?p.name:typeof h=="object"&&h!==null?h.name??h.label??"Selected Object":String(h)}return O?e:j},[n,l,E,O,S,h,e,te,B,z,j]),ve=`${x}-listbox`,we=o.useMemo(()=>L?.map((p,M)=>{const q=`opt-${x}-${oe(p.id)}`;let J="rac-select-option";return p.className&&(J+=` ${p.className}`),S?.id===p.id&&(J+=" rac-selected"),M===Z&&(J+=" rac-highlighted"),p.disabled&&(J+=" rac-disabled-option"),typeof p.raw=="boolean"&&(J+=p.raw?" rac-true-option":" rac-false-option"),p.name==c&&(J+=" rac-invalid-option"),m.jsx("div",{className:J,onClick:je=>H(p,je),onMouseEnter:()=>!p.disabled&&Ee(M),id:q,role:"option","aria-selected":S?.id===p.id,"aria-disabled":p.disabled,children:p.jsx??p.name},p.id)}),[L,H,x,S,Z]);return o.useEffect(()=>{process.env.NODE_ENV!=="production"&&(g&&typeof g!="object"&&console.error(`%c[Select Library]:%c Invalid prop %coptions%c.
|
|
7
|
+
Expected %cArray%c or %cObject%c, but received %c${typeof g}%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;"),X&&U!==void 0&&console.warn(`%c[Select Library]:%c .
|
|
9
|
+
`,"color: #faad14; font-weight: bold;","color: default;"))},[g,T,U,X]),m.jsxs(he.Provider,{value:{registerOption:d,unregisterOption:W},children:[s,i,m.jsxs("div",{style:{"--rac-duration":`${y}ms`,...D},className:`rac-select
|
|
10
|
+
${I}
|
|
11
|
+
${!O||n?"rac-disabled-style":""}
|
|
12
|
+
${l?"rac-loading-style":""}
|
|
13
|
+
${E?"rac-error-style":""}`,tabIndex:r?0:-1,ref:F,role:"combobox","aria-haspopup":"listbox","aria-expanded":_,"aria-controls":ve,"aria-label":e,"aria-disabled":n||!O,...r&&{onBlur:ge,onFocus:me,onClick:ye,onKeyDown:xe},children:[m.jsxs("div",{className:`rac-select-title ${!E&&!l&&S?.type=="boolean"?S.raw?"rac-true-option":"rac-false-option":""}`,children:[m.jsx("span",{className:"rac-title-text",children:ce},ce),m.jsx(ne,{visibility:l&&!E,duration:y,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(ne,{visibility:ae&&O&&!n&&!l&&!E,duration:y,style:{display:"grid"},children:be(C,{className:"rac-select-cancel",onClick:p=>K(p)})}),m.jsx(ne,{visibility:r,duration:y,style:{display:"grid"},children:m.jsx("span",{className:`rac-select-arrow-wrapper ${_?"--open":""}`,children:be(A,{className:"rac-select-arrow-wrapper"})})})]}),m.jsx(Ne,{visibility:_,selectRef:F,onAnimationDone:()=>ie(!0),unmount:t,duration:y,easing:R,offset:v,animateOpacity:k,children:m.jsx("div",{className:"rac-select-list",role:"listbox","aria-label":"Options",children:we})})]})]})}),se=t=>t?typeof t=="string"||typeof t=="number"?String(t):Array.isArray(t)?t.map(se).join(" ").replace(/\s+/g," ").trim():o.isValidElement(t)?se(t.props.children):"":"";function Ie({value:t,id:s,className:i,children:u,disabled:b}){const a=o.useContext(he);return o.useEffect(()=>{if(!a)return;const y=se(u),R={id:String(s??oe(String(y))),value:t!==void 0?t:y,label:typeof u=="string"?u:String(t??s),jsx:u,className:i,disabled:!!b};return a.registerOption(R),()=>a.unregisterOption(R.id)},[s,t,u,i,b]),null}exports.Option=Ie;exports.Select=Oe;
|
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-title-anim-shift: 4px;--rac-title-anim-entry-ease: cubic-bezier(.34, 1.56, .64, 1);--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-title-text{display:block;animation:rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease)}@keyframes rac-fade-in{0%{opacity:0;transform:translateY(var(--rac-title-anim-shift))}to{opacity:1;transform:translateY(0)}}.rac-loading-dots{display:inline-flex;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);align-items:var(--rac-dots-align)}.rac-loading-dots i{width:var(--rac-dots-height);height:var(--rac-dots-width);background:var(--rac-dots-color);border-radius:50%;animation:blink var(--rac-dots-animation-duration) infinite both}.rac-loading-dots i:nth-child(1){animation-delay:var(--rac-dots-animation-delay-1)}.rac-loading-dots i:nth-child(2){animation-delay:var(--rac-dots-animation-delay-2)}.rac-loading-dots i:nth-child(3){animation-delay:var(--rac-dots-animation-delay-3)}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}.rac-select-buttons{display:flex;align-items:center}.rac-select-cancel{height:var(--rac-cancel-height);width:var(--rac-cancel-width);transition:opacity var(--rac-duration-fast),border-color var(--rac-duration-fast)}.rac-select-arrow-wrapper{display:block;height:var(--rac-arrow-height);width:var(--rac-arrow-width);padding:var(--rac-arrow-padding);will-change:transform;transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1),padding var(--rac-duration-fast);transform-origin:50% 50%;transform:translateZ(0)}.rac-select-arrow-wrapper.--open{transform:rotate(180deg)}.rac-select-arrow,.rac-select-cancel{object-fit:contain}.rac-select-list{background-color:var(--rac-list-background);color:var(--rac-list-color);max-height:var(--rac-list-max-height);overflow-y:auto;scrollbar-color:var(--rac-scroll-color) var(--rac-scroll-track);scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:var(--rac-scroll-padding-top);scroll-padding-bottom:var(--rac-scroll-padding-bottom);z-index:1;transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{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)}
|