react-animated-select 0.2.5 → 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 +39 -25
- package/dist/index.cjs.js +9 -8
- package/dist/index.css +1 -1
- package/dist/index.es.js +452 -426
- package/index.d.ts +7 -4
- package/package.json +1 -1
- package/src/icons.jsx +18 -16
- package/src/select.css +24 -1
- package/src/select.jsx +61 -16
- package/src/slideLeft.jsx +4 -3
package/README.md
CHANGED
|
@@ -73,7 +73,7 @@ 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
79
|
| `onChange` | `function` | `undefined` | Callback called when an option is selected. Arguments: (data, id). |
|
|
@@ -81,6 +81,10 @@ function App() {
|
|
|
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. |,
|
|
84
88
|
|
|
85
89
|
---
|
|
86
90
|
|
|
@@ -163,17 +167,33 @@ The component uses CSS variables for deep styling. These are based on system col
|
|
|
163
167
|
| `--rac-select-height` | `2em` | Fixed height of the select. |
|
|
164
168
|
| `--rac-select-padding` | `0em 0.5em` | Internal horizontal padding. |
|
|
165
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. |
|
|
166
172
|
| **Loading Dots** | | |
|
|
167
173
|
| `--rac-dots-color` | `currentColor` | Color of the loader dots. |
|
|
168
174
|
| `--rac-dots-animation-duration`| `1.4s` | Full cycle of the dots animation. |
|
|
169
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. |
|
|
170
183
|
| **Icons & Buttons** | | |
|
|
171
|
-
| `--rac-arrow-height` | `1em` | Dropdown arrow size. |
|
|
172
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. |
|
|
173
189
|
| **Dropdown & Scroll** | | |
|
|
174
190
|
| `--rac-list-background` | `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Dropdown list background. |
|
|
175
191
|
| `--rac-list-max-height` | `250px` | Maximum height before scrolling. |
|
|
176
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. |
|
|
177
197
|
| **Options State** | | |
|
|
178
198
|
| `--rac-option-hover` | `color-mix(...)` | Background on mouse hover. |
|
|
179
199
|
| `--rac-option-highlight` | `color-mix(...)` | Background when keyboard navigating. |
|
|
@@ -181,6 +201,9 @@ The component uses CSS variables for deep styling. These are based on system col
|
|
|
181
201
|
| `--rac-disabled-option-color`| `color-mix(...)` | Text color for disabled items. |
|
|
182
202
|
| `--rac-true-option-color` | `color-mix(...)` | Text color for "Boolean True" items. |
|
|
183
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. |
|
|
184
207
|
|
|
185
208
|
---
|
|
186
209
|
|
|
@@ -190,6 +213,7 @@ The component uses CSS variables for deep styling. These are based on system col
|
|
|
190
213
|
|:---|:---|:---|
|
|
191
214
|
| `.rac-select` | **Main Wrapper** | The primary container of the select. |
|
|
192
215
|
| `.rac-select-title` | **Value Display** | The area showing the selected option or placeholder. |
|
|
216
|
+
| `.rac-title-text` | **Title text itself** | The container for the title text itself. |
|
|
193
217
|
| `.rac-loading-dots` | **Loader** | Wrapper for the loading animation. |
|
|
194
218
|
| `.rac-loading-dots i` | **Loader Point** | Directly target animated points for styling. |
|
|
195
219
|
| `.rac-select-buttons` | **Action Group** | Wrapper for the Clear (X) and Arrow icons. |
|
|
@@ -211,6 +235,7 @@ The select and its options react to internal states by applying the following cl
|
|
|
211
235
|
- `.rac-error-style`: Applied when `error={true}`.
|
|
212
236
|
|
|
213
237
|
#### Option States (applied to `.rac-select-option`)
|
|
238
|
+
- `.rac-selected`: Indicates the currently selected item.
|
|
214
239
|
- `.rac-highlighted`: The option currently focused via keyboard or mouse hover.
|
|
215
240
|
- `.rac-disabled-option`: Applied to options that have their own `disabled: true` property.
|
|
216
241
|
- `.rac-invalid-option`: Applied to items that are not valid data types (e.g., functions).
|
|
@@ -221,29 +246,18 @@ The select and its options react to internal states by applying the following cl
|
|
|
221
246
|
- `.rac-select-arrow-wrapper.--open`: Applied to the arrow icon when the dropdown is expanded.
|
|
222
247
|
|
|
223
248
|
## Change log
|
|
224
|
-
### 0.2.
|
|
225
|
-
**
|
|
226
|
-
-
|
|
227
|
-
|
|
228
|
-
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
-
|
|
233
|
-
|
|
234
|
-
**
|
|
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.
|
|
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.
|
|
247
261
|
|
|
248
262
|
## License
|
|
249
263
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const o=require("react"),
|
|
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} />`,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
|
|
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
|
-
${
|
|
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
|
-
@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);
|
|
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)}
|