react-animated-select 0.5.6 → 0.6.6
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 +21 -279
- package/dist/index.cjs.js +12 -10
- package/dist/index.css +1 -1
- package/dist/index.es.js +1400 -1167
- package/index.d.ts +15 -5
- package/package.json +12 -5
- package/.github/workflows/publish.yml +0 -32
- package/demo/README.md +0 -16
- package/demo/eslint.config.js +0 -29
- package/demo/index.html +0 -13
- package/demo/package-lock.json +0 -3619
- package/demo/package.json +0 -35
- package/demo/public/vite.svg +0 -1
- package/demo/src/App.tsx +0 -437
- package/demo/src/main.jsx +0 -9
- package/demo/src/rac.css +0 -746
- package/demo/src/shake.js +0 -11
- package/demo/src/slideDown.jsx +0 -35
- package/demo/vite.config.js +0 -7
- package/src/SelectJSX.jsx +0 -300
- package/src/animated.jsx +0 -80
- package/src/getText.jsx +0 -11
- package/src/icons.jsx +0 -43
- package/src/index.js +0 -5
- package/src/makeId.jsx +0 -21
- package/src/optgroup.jsx +0 -36
- package/src/option.jsx +0 -50
- package/src/options.jsx +0 -222
- package/src/select.css +0 -367
- package/src/select.jsx +0 -343
- package/src/selectContext.js +0 -3
- package/src/slideDown.jsx +0 -36
- package/src/slideLeft.jsx +0 -41
- package/src/useSelect.jsx +0 -198
- package/src/useSelectLogic.jsx +0 -415
- package/vite.config.js +0 -27
package/README.md
CHANGED
|
@@ -2,297 +2,39 @@
|
|
|
2
2
|
|
|
3
3
|
A lightweight, high-performance, and fully customizable Select component for React. Featuring smooth CSS animations, accessible keyboard navigation, and flexible option rendering.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[](https://l1nway.github.io/react-animated-select/)
|
|
8
|
-
|
|
9
|
-
## Features
|
|
10
|
-
|
|
11
|
-
- **Smooth Animations**
|
|
12
|
-
Powered by `react-transition-group` with height-expanding dropdowns and sliding side-elements.
|
|
13
|
-
|
|
14
|
-
- **Accessible**
|
|
15
|
-
Full keyboard support (Arrow keys, Enter, Space, Escape, Tab) and ARIA attributes built-in.
|
|
16
|
-
|
|
17
|
-
- **Flexible Data**
|
|
18
|
-
Supports simple arrays, objects, or declarative JSX children (`<Option />`). **Smart deep parsing** extracts labels from any available object key.
|
|
19
|
-
|
|
20
|
-
- **Smart Auto-Positioning**
|
|
21
|
-
Recalculates dropdown position using `ResizeObserver`.
|
|
22
|
-
|
|
23
|
-
- **Zero-Config Styles**
|
|
24
|
-
The minimum styles required for the select to work are built into the project, but you can add your own on top of the basic ones.
|
|
25
|
-
|
|
26
|
-
- **Search & Clear**
|
|
27
|
-
Built-in “Clear” button and intelligent state handling (loading, error, empty, disabled).
|
|
5
|
+
[](https://l1nway.github.io/react-animated-select-docs/)
|
|
28
6
|
|
|
29
7
|
## Installation
|
|
30
8
|
```jsx
|
|
31
|
-
|
|
9
|
+
npm install react-animated-select
|
|
32
10
|
```
|
|
33
|
-
### Basic Usage (Array of Strings)
|
|
34
11
|
|
|
12
|
+
### Basic Usage
|
|
35
13
|
```jsx
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
const options = ['
|
|
14
|
+
import {Select, Option} from 'react-animated-select'
|
|
15
|
+
import {useState} from 'react'
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
const options = ['Option 1', {name: 'Option 2', id: 2}, 'Option 3']
|
|
41
19
|
const [value, setValue] = useState('')
|
|
42
20
|
|
|
43
21
|
return (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
return (
|
|
58
|
-
<Select defaultValue='react'>
|
|
59
|
-
<Option id='react'>React</Option>
|
|
60
|
-
<Option id='vue' disabled>Vue (Coming soon)</Option>
|
|
61
|
-
<Option id='svelte' className='custom-svelte-style'>
|
|
62
|
-
<b>Svelte</b> - The compiler
|
|
63
|
-
</Option>
|
|
64
|
-
</Select>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
22
|
+
<Select
|
|
23
|
+
placeholder='Pick a option'
|
|
24
|
+
onChange={setValue}
|
|
25
|
+
options={options}
|
|
26
|
+
value={value}
|
|
27
|
+
>
|
|
28
|
+
<Option id='4'>Option 4</Option>
|
|
29
|
+
<Option id='5' disabled>Option 5</Option>
|
|
30
|
+
<Option id='6' className='custom-style'>
|
|
31
|
+
<b>Option 6</b> - Custom JSX
|
|
32
|
+
</Option>
|
|
33
|
+
</Select>
|
|
34
|
+
)}
|
|
67
35
|
```
|
|
68
|
-
## Props API
|
|
69
|
-
|
|
70
|
-
### `<Select />`
|
|
71
|
-
|
|
72
|
-
| Prop | Type | Default | Description |
|
|
73
|
-
|------|------|---------|-------------|
|
|
74
|
-
| `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`. |
|
|
75
|
-
| `value` | `any` | `undefined` | The current value for a controlled component. |
|
|
76
|
-
| `defaultValue` | `any` | `undefined` | Initial value for an uncontrolled component. |
|
|
77
|
-
| `onChange` | `function` | `undefined` | Callback called when an option is selected. Arguments: (data, id). |
|
|
78
|
-
| `multiple` | `boolean` | `false` | Allows select multiple options. |
|
|
79
|
-
| `placeholder` | `string` | `"Choose option"` | Text shown when no option is selected. |
|
|
80
|
-
| `disabled` | `boolean` | `false` | Disables the entire component. |
|
|
81
|
-
| `loading` | `boolean` | `false` | Shows a loading animation and disables interaction. |
|
|
82
|
-
| `error` | `boolean` | `false` | Shows the error state and `errorText`. |
|
|
83
|
-
| `style` | `object` | `{}` | Inline styles for the root container. |
|
|
84
|
-
| `className` | `string` | '' | Additional CSS class for the root container .rac-select. |
|
|
85
|
-
| `ArrowIcon` | `ElementType \ string \ JSX` | Default icon | Custom arrow icon. Accepts a component, image path, or JSX. |
|
|
86
|
-
| `ClearIcon` | `ElementType \ string \ JSX` | Default icon | Custom clear icon. Accepts a component, image path, or JSX. |
|
|
87
|
-
|
|
88
|
-
---
|
|
89
|
-
|
|
90
|
-
### Animation Controls
|
|
91
|
-
|
|
92
|
-
| Prop | Type | Default | Description |
|
|
93
|
-
|------|------|---------|-------------|
|
|
94
|
-
| `duration` | `number` | `300` | Speed of all transitions in milliseconds (mapped to CSS variable `--rac-duration`). |
|
|
95
|
-
| `easing` | `string` | `'ease-out'` | CSS transition timing function (e.g., `cubic-bezier(.4,0,.2,1)`). |
|
|
96
|
-
| `offset` | `number` | `2` | Vertical gap (in pixels) between the select trigger and the dropdown list. |
|
|
97
|
-
| `animateOpacity` | `boolean` | `true` | Enables or disables the fade effect during opening and closing. |
|
|
98
|
-
|
|
99
|
-
---
|
|
100
|
-
|
|
101
|
-
### Behavioral Props
|
|
102
|
-
|
|
103
|
-
| Prop | Type | Default | Description |
|
|
104
|
-
| --------------- | ---------- | ---------- | ------------------------------------------------------------------------------------------------------- |
|
|
105
|
-
| `visibility` | `boolean` | `false` | Manually controls the visibility of the list (used with `ownBehavior`). |
|
|
106
|
-
| `ownBehavior` | `boolean` | `false` | If `true`, the component stops managing its own open/close state and relies on the `visibility` prop. |
|
|
107
|
-
| `alwaysOpen` | `boolean` | `false` | Keeps the list permanently visible. Primarily used for debugging or specific UI layouts. |
|
|
108
|
-
| `unmount` | `boolean` | `true` | When `true`, the list is removed from the DOM when closed. When `false`, it stays invisible in the DOM. |
|
|
109
|
-
| `hasMore` | `boolean` | `false` | Indicates whether more options are available for loading (used for infinite loading). |
|
|
110
|
-
| `loadMore` | `function` | `() => {}` | Callback triggered when more options need to be loaded. |
|
|
111
|
-
| `loadMoreText` | `string` | `'Loading'` | Text displayed inside the options list during loading. |
|
|
112
|
-
| `loadOffset` | `number` | `100` | Distance (in pixels) from the bottom of the list that triggers `loadMore`. |
|
|
113
|
-
| `loadAhead` | `number` | `3` | Number of remaining options before the end at which loading is triggered during keyboard navigation. |
|
|
114
|
-
| `loadButton` | `boolean` | `false` | Enables a manual “Load more” button instead of automatic loading. |
|
|
115
|
-
| `loadButtonText` | `string` | `'Load more'` | Text displayed on the load button. |
|
|
116
|
-
| `childrenFirst` | `boolean` | `false` | Determines priority of JSX `<Option />` children over options passed via props. |
|
|
117
|
-
| `groupsClosed` | `boolean` | `false` | Default open status of groups. |
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
### Text Customization
|
|
122
|
-
|
|
123
|
-
| Prop | Default | Description |
|
|
124
|
-
|------|---------|-------------|
|
|
125
|
-
| `emptyText` | `'No options'` | Text shown when the list is empty. |
|
|
126
|
-
| `loadingText` | `'Loading'` | Text shown in the title during the loading state. |
|
|
127
|
-
| `errorText` | `'Failed to load'` | Text shown when `error={true}`. |
|
|
128
|
-
| `disabledText` | `'Disabled'` | Text shown when `disabled={true}`. |
|
|
129
|
-
|
|
130
|
-
---
|
|
131
|
-
|
|
132
|
-
### `<Option />`
|
|
133
|
-
|
|
134
|
-
| Prop | Type | Description |
|
|
135
|
-
|------|------|-------------|
|
|
136
|
-
| `id` | `string` | Optional unique ID (generated automatically if not provided). value may be used instead of id (lower priority). |
|
|
137
|
-
| `disabled` | `boolean` | If true, this option cannot be selected or highlighted. |
|
|
138
|
-
| `className` | `string` | Custom class for individual option styling. |
|
|
139
|
-
|
|
140
|
-
---
|
|
141
|
-
|
|
142
|
-
### `<OptGroup />`
|
|
143
|
-
|
|
144
|
-
| Prop | Type | Description |
|
|
145
|
-
|------|------|-------------|
|
|
146
|
-
| `id` | `string` | Optional unique ID (generated automatically if not provided). value may be used instead of id (lower priority). |
|
|
147
|
-
| `name` | `string` | OptGroup title. label may be used instead of id (lower priority). |
|
|
148
|
-
|
|
149
|
-
---
|
|
150
|
-
|
|
151
|
-
## Keyboard Support
|
|
152
|
-
|
|
153
|
-
| Key | Action |
|
|
154
|
-
|-----|--------|
|
|
155
|
-
| `ArrowDown` | Open dropdown / Move highlight down. |
|
|
156
|
-
| `ArrowUp` | Open dropdown / Move highlight up. |
|
|
157
|
-
| `Enter` / `Space` | Select highlighted option / Open dropdown. |
|
|
158
|
-
| `Escape` | Close dropdown. |
|
|
159
|
-
| `Tab` | Close dropdown and move focus to next element. |
|
|
160
|
-
|
|
161
|
-
## Custom Styling
|
|
162
|
-
|
|
163
|
-
The component is built with a consistent BEM-like naming convention using the `rac-` prefix. You can easily override these classes in your CSS.
|
|
164
|
-
|
|
165
|
-
### CSS Variables (Theming)
|
|
166
|
-
|
|
167
|
-
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.
|
|
168
|
-
|
|
169
|
-
| Variable | Default Value / Calculation | Description |
|
|
170
|
-
|:---|:---|:---|
|
|
171
|
-
| **Durations** | | |
|
|
172
|
-
| `--rac-duration-fast` | `calc(var(--rac-duration) * 0.5)` | Used for micro-interactions. |
|
|
173
|
-
| `--rac-duration-base` | `var(--rac-duration)` | Main transition speed. |
|
|
174
|
-
| `--rac-duration-slow` | `calc(var(--rac-duration) * 1.3)` | Used for larger list transitions. |
|
|
175
|
-
| **Colors** | | |
|
|
176
|
-
| `--rac-base-red` | `#e7000b` | Base semantic red. |
|
|
177
|
-
| `--rac-base-green` | `#4caf50` | Base semantic green. |
|
|
178
|
-
| `--rac-base-yellow` | `#ffc107` | Base semantic yellow. |
|
|
179
|
-
| **Select Trigger** | | |
|
|
180
|
-
| `--rac-select-background`| `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Main background. |
|
|
181
|
-
| `--rac-select-color` | `CanvasText` | Title text color. |
|
|
182
|
-
| `--rac-select-border` | `2px solid ...` | Default border style. |
|
|
183
|
-
| `--rac-select-border-error`| `2px solid ...` | Border style in error state. |
|
|
184
|
-
| `--rac-select-height` | `2em` | Fixed height of the select. |
|
|
185
|
-
| `--rac-select-padding` | `0em 0.5em` | Internal horizontal padding. |
|
|
186
|
-
| `--rac-disabled-opacity` | `0.75` | Opacity when `disabled={true}`. |
|
|
187
|
-
| `--rac-title-anim-shift` | 4px | Vertical offset for title change animation. |
|
|
188
|
-
| `--rac-title-anim-entry-ease` | cubic-bezier(0.34, 1.56, 0.64, 1) | Easing function for text entry. |
|
|
189
|
-
| **Loading Dots** | | |
|
|
190
|
-
| `--rac-dots-color` | `currentColor` | Color of the loader dots. |
|
|
191
|
-
| `--rac-dots-animation-duration`| `1.4s` | Full cycle of the dots animation. |
|
|
192
|
-
| `--rac-dots-gap` | `3px` | Space between points. |
|
|
193
|
-
| `--rac-dots-height` | `3px` | Diameter of the loader dots. |
|
|
194
|
-
| `--rac-dots-width` | `3px` | Width of the loader dots. |
|
|
195
|
-
| `--rac-dots-padding-left` | `0.25em` | Space between the title text and the dots. |
|
|
196
|
-
| `--rac-dots-align` | `end` | Vertical alignment of the dots. |
|
|
197
|
-
| `--rac-dots-animation-delay-1`| `0s` | Start delay for the first dot. |
|
|
198
|
-
| `--rac-dots-animation-delay-2`| `0.2s` | Start delay for the second dot. |
|
|
199
|
-
| `--rac-dots-animation-delay-3`| `0.4s` | Start delay for the third dot. |
|
|
200
|
-
| **Icons & Buttons** | | |
|
|
201
|
-
| `--rac-cancel-height` | `0.9em` | Clear icon size. |
|
|
202
|
-
| `--rac-cancel-width` | `0.9em` | Clear icon width. |
|
|
203
|
-
| `--rac-arrow-height` | `1em` | Dropdown arrow size. |
|
|
204
|
-
| `--rac-arrow-width` | `1em` | Dropdown arrow width. |
|
|
205
|
-
| `--rac-arrow-padding` | `1px 0 2px` | Internal padding for arrow alignment. |
|
|
206
|
-
| **Dropdown & Scroll** | | |
|
|
207
|
-
| `--rac-list-background` | `color-mix(in srgb, Canvas 98%, CanvasText 2%)` | Dropdown list background. |
|
|
208
|
-
| `--rac-list-max-height` | `250px` | Maximum height before scrolling. |
|
|
209
|
-
| `--rac-scroll-color` | `color-mix(...)` | Scrollbar thumb color. |
|
|
210
|
-
| `--rac-scroll-track` | `color-mix(...)` | Background color of the scrollbar track. |
|
|
211
|
-
| `--rac-scroll-padding-top` | `0.5em` | Internal top padding of the list. |
|
|
212
|
-
| `--rac-scroll-padding-bottom` | `0.5em` | Internal bottom padding of the list. |
|
|
213
|
-
| `--rac-list-color` | `CanvasText` | Text color inside the dropdown list. |
|
|
214
|
-
| **Options State** | | |
|
|
215
|
-
| `--rac-option-hover` | `color-mix(...)` | Background on mouse hover. |
|
|
216
|
-
| `--rac-option-highlight` | `color-mix(...)` | Background when keyboard navigating. |
|
|
217
|
-
| `--rac-option-selected` | `color-mix(...)` | Background of the active option. |
|
|
218
|
-
| `--rac-disabled-option-color`| `color-mix(...)` | Text color for disabled items. |
|
|
219
|
-
| `--rac-true-option-color` | `color-mix(...)` | Text color for "Boolean True" items. |
|
|
220
|
-
| `--rac-false-option-color` | `color-mix(...)` | Text color for "Boolean False" items. |
|
|
221
|
-
| `--rac-option-padding` | `0.5em` | Internal padding for each option item. |
|
|
222
|
-
| `--rac-option-min-height` | `1em` | Minimum option height. |
|
|
223
|
-
| `--rac-invalid-option-color` | `color-mix(...)` | Text color for invalid options. |
|
|
224
|
-
| `--rac-warning-option-color` | `color-mix(...)` | Text color for warning/caution options. |
|
|
225
|
-
| **Group Headers** | | |
|
|
226
|
-
| `--rac-group-header-font-size` | `1.25em` | Font size of the group header label. |
|
|
227
|
-
| `--rac-group-header-font-weight` | `bold` | Font weight of the group header text. |
|
|
228
|
-
| `--rac-group-header-min-height` | `1em` | Minimum height of the group header item. |
|
|
229
|
-
| `--rac-group-header-padding` | `0.5em` | Internal padding for the group header. |
|
|
230
|
-
| `--rac-group-arrow-height` | `1em` | Height of the group expand/collapse arrow icon. |
|
|
231
|
-
| `--rac-group-arrow-width` | `1em` | Width of the group expand/collapse arrow icon. |
|
|
232
|
-
| `--rac-group-arrow-padding` | `1px 0 2px` | Padding applied to the group arrow icon. |
|
|
233
|
-
|
|
234
|
-
---
|
|
235
|
-
|
|
236
|
-
### CSS Class Hierarchy
|
|
237
|
-
|
|
238
|
-
| Class Name | Target Element | Description |
|
|
239
|
-
|:---|:---|:---|
|
|
240
|
-
| `.rac-select` | **Main Wrapper** | The primary container of the select. |
|
|
241
|
-
| `.rac-select-title` | **Value Display** | The area showing the selected option or placeholder. |
|
|
242
|
-
| `.rac-title-text` | **Title text itself** | The container for the title text itself. |
|
|
243
|
-
| `.rac-loading-dots` | **Loader** | Wrapper for the loading animation. |
|
|
244
|
-
| `.rac-loading-dots i` | **Loader Point** | Directly target animated points for styling. |
|
|
245
|
-
| `.rac-select-buttons` | **Action Group** | Wrapper for the Clear (X) and Arrow icons. |
|
|
246
|
-
| `.rac-select-cancel` | **Clear Button** | The "X" icon for clearing the selection. |
|
|
247
|
-
| `.rac-select-arrow-wrapper` | **Arrow Icon** | Container for the dropdown arrow. |
|
|
248
|
-
| `.rac-select-list` | **Dropdown List** | The `listbox` container that holds all options. |
|
|
249
|
-
| `.rac-select-option` | **Option Item** | Individual item within the dropdown list. |
|
|
250
|
-
|
|
251
|
-
**Note on Animation:** The Clear button and Dropdown List use `react-transition-group`.
|
|
252
|
-
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.
|
|
253
|
-
|
|
254
|
-
### Component States
|
|
255
|
-
|
|
256
|
-
The select and its options react to internal states by applying the following classes:
|
|
257
|
-
|
|
258
|
-
#### Main Select States (applied to `.rac-select`)
|
|
259
|
-
- `.rac-disabled-style`: Applied when `disabled={true}` or when the options list is empty.
|
|
260
|
-
- `.rac-loading-style`: Applied during the `loading={true}` state.
|
|
261
|
-
- `.rac-error-style`: Applied when `error={true}`.
|
|
262
|
-
|
|
263
|
-
#### Option States (applied to `.rac-select-option`)
|
|
264
|
-
- `.rac-selected`: Indicates the currently selected item.
|
|
265
|
-
- `.rac-highlighted`: The option currently focused via keyboard or mouse hover.
|
|
266
|
-
- `.rac-disabled-option`: Applied to options that have their own `disabled: true` property.
|
|
267
|
-
- `.rac-invalid-option`: Applied to items that are not valid data types (e.g., functions).
|
|
268
|
-
- `.rac-true-option`: Specialized styling when the option's raw value is exactly `true`.
|
|
269
|
-
- `.rac-false-option`: Specialized styling when the option's raw value is exactly `false`.
|
|
270
|
-
#### Group Header States (applied to group-related elements)
|
|
271
|
-
- `.rac-group-header`: Base class for the group header container.
|
|
272
|
-
- `.rac-group-title-text`: Applied to the text/label inside the group header.
|
|
273
|
-
- `.rac-group-arrow-wrapper`: Wrapper class for the group expand/collapse arrow icon.
|
|
274
|
-
|
|
275
|
-
#### Trigger States
|
|
276
|
-
- `.rac-select-arrow-wrapper.--open`: Applied to the arrow icon when the dropdown is expanded.
|
|
277
|
-
|
|
278
|
-
## Change log
|
|
279
|
-
### 0.5.5
|
|
280
|
-
### New Features
|
|
281
|
-
- **Dynamic Content Normalization**: Rewrote the "Virtual Options" engine to ensure selected values are correctly displayed even if they aren't present in the current paginated list.
|
|
282
|
-
- **Smart Width Calculation**: Implemented an auto-sizing mechanism where the select height animatedly adapts to the minimum height required by options lenght.
|
|
283
|
-
- **Enhanced UI Structure**: Wrapped option labels in internal `<span>` elements for better text truncation control and CSS styling flexibility.
|
|
284
|
-
|
|
285
|
-
### Bug Fixes
|
|
286
|
-
- **Infinite Loop Protection**: Fixed a `Maximum update depth exceeded` error that occurred when the component was initialized without an `options` array.
|
|
287
|
-
- **Intelligent Selection Highlighting**: Resolved an issue where the first option was always highlighted in multi-select mode; the hook now correctly identifies and focuses the first _selected_ item in the list.
|
|
288
|
-
- **Z-Index Layering**: Elevated the dropdown portal's `z-index` to `2147483647`, ensuring the options list remains globally visible over any other UI layer.
|
|
289
|
-
- **Selection State Stability**: Fixed a bug where incorrect dependency tracking in `useEffect` caused redundant parsing of options, which previously led to broken multi-selection states.
|
|
290
|
-
- **Single-Option Swap Animation**: Corrected the transition logic when switching between single options to prevent flickering or abrupt layout shifts.
|
|
291
|
-
### Type Safety
|
|
292
|
-
- **Prop Type Definitions**: Finalized the TypeScript definitions for the select component, covering all optional and mandatory props for better developer experience.
|
|
293
36
|
|
|
294
37
|
## License
|
|
295
|
-
|
|
296
38
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
297
39
|
|
|
298
40
|
Copyright (c) 2026 l1nway
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const t=require("react"),Me=require("react-transition-group"),ct=require("react-dom");var De={exports:{}},Ie={};var Ke;function ut(){if(Ke)return Ie;Ke=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function s(c,l,x){var b=null;if(x!==void 0&&(b=""+x),l.key!==void 0&&(b=""+l.key),"key"in l){x={};for(var g in l)g!=="key"&&(x[g]=l[g])}else x=l;return l=x.ref,{$$typeof:e,type:c,key:b,ref:l!==void 0?l:null,props:x}}return Ie.Fragment=n,Ie.jsx=s,Ie.jsxs=s,Ie}var He={};var Ze;function dt(){return Ze||(Ze=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===le?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case C:return"Fragment";case L:return"Profiler";case O:return"StrictMode";case Q:return"Suspense";case G:return"SuspenseList";case D:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case _:return"Portal";case H:return r.displayName||"Context";case I:return(r._context.displayName||"Context")+".Consumer";case Z:var o=r.render;return r=r.displayName,r||(r=o.displayName||o.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case U:return o=r.displayName||null,o!==null?o:e(r.type)||"Memo";case u:o=r._payload,r=r._init;try{return e(r(o))}catch{}}return null}function n(r){return""+r}function s(r){try{n(r);var o=!1}catch{o=!0}if(o){o=console;var m=o.error,S=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return m.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",S),n(r)}}function c(r){if(r===C)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===u)return"<...>";try{var o=e(r);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function l(){var r=F.A;return r===null?null:r.getOwner()}function x(){return Error("react-stack-top-frame")}function b(r){if(q.call(r,"key")){var o=Object.getOwnPropertyDescriptor(r,"key").get;if(o&&o.isReactWarning)return!1}return r.key!==void 0}function g(r,o){function m(){re||(re=!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)",o))}m.isReactWarning=!0,Object.defineProperty(r,"key",{get:m,configurable:!0})}function j(){var r=e(this.type);return P[r]||(P[r]=!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.")),r=this.props.ref,r!==void 0?r:null}function i(r,o,m,S,ce,a){var y=m.ref;return r={$$typeof:N,type:r,key:o,props:m,_owner:S},(y!==void 0?y:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:j}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:ce}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function v(r,o,m,S,ce,a){var y=o.children;if(y!==void 0)if(S)if(fe(y)){for(S=0;S<y.length;S++)k(y[S]);Object.freeze&&Object.freeze(y)}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 k(y);if(q.call(o,"key")){y=e(r);var p=Object.keys(o).filter(function(T){return T!=="key"});S=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",W[y+S]||(p=0<p.length?"{"+p.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} />`,O,t,g,t),ae[t+O]=!0)}if(t=null,j!==void 0&&(o(j),t=""+j),v(p)&&(o(p.key),t=""+p.key),"key"in p){j={};for(var l in p)l!=="key"&&(j[l]=p[l])}else j=p;return t&&k(j,typeof r=="function"?r.displayName||r.name||"Unknown":r),R(r,t,j,u(),te,ne)}function w(r){K(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===q&&(r._payload.status==="fulfilled"?K(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function K(r){return typeof r=="object"&&r!==null&&r.$$typeof===N}var V=n,N=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),D=Symbol.for("react.fragment"),P=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),U=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),f=Symbol.for("react.activity"),F=Symbol.for("react.client.reference"),h=V.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,m=Array.isArray,S=console.createTask?console.createTask:function(){return null};V={react_stack_bottom_frame:function(r){return r()}};var M,G={},re=V.react_stack_bottom_frame.bind(V,s)(),ce=S(a(s)),ae={};we.Fragment=D,we.jsx=function(r,p,j){var O=1e4>h.recentlyCreatedOwnerStacks++;return C(r,p,j,!1,O?Error("react-stack-top-frame"):re,O?S(a(r)):ce)},we.jsxs=function(r,p,j){var O=1e4>h.recentlyCreatedOwnerStacks++;return C(r,p,j,!0,O?Error("react-stack-top-frame"):re,O?S(a(r)):ce)}})()),we}var Ie;function sr(){return Ie||(Ie=1,process.env.NODE_ENV==="production"?je.exports=tr():je.exports=nr()),je.exports}var d=sr();const Ye=({className:e="",...i})=>d.jsx("svg",{className:e,role:"button","aria-label":"Clear selection",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...i,children:d.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"})}),ir=({className:e="",...i})=>d.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...i,children:d.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"})}),ze=({className:e="",...i})=>d.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",...i,children:d.jsx("path",{d:"M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z"})}),Fe=(e,i="invalid-option",o="")=>{const a=o?o.replace(/:/g,""):"";if(typeof e!="string"||!e.trim())return a?`${i}-${a}`:`${i}-${Math.random().toString(36).slice(2,8)}`;const u=e.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return u?u||`${i}-${Math.random().toString(36).slice(2,8)}`:a?`${i}-${a}`:`${i}-${Math.random().toString(36).slice(2,8)}`},We=n.createContext(null);function ar({visibility:e,children:i,selectRef:o,onAnimationDone:a,unmount:u=!0,duration:s,easing:v,offset:k,animateOpacity:b,style:R,className:C}){const w=n.useRef(null),[K,V]=n.useState(0),[N,H]=n.useState({top:0,left:0,width:0}),D=n.useRef(N);n.useEffect(()=>{D.current=N},[N]);const P=n.useCallback(()=>{if(o?.current){const f=o.current.getBoundingClientRect(),F=window.innerHeight,h=w.current?.scrollHeight||250,x=F-f.bottom,m=x<h&&f.top>x;H({top:f.top,bottom:f.bottom,left:f.left,width:f.width,isUpward:m})}},[o]);n.useEffect(()=>{if(e)return P(),window.addEventListener("scroll",P,!0),window.addEventListener("resize",P),()=>{window.removeEventListener("scroll",P,!0),window.removeEventListener("resize",P)}},[e,P]);const z=`height var(--rac-duration) ${v}${b?`, opacity var(--rac-duration) ${v}`:""}`;n.useLayoutEffect(()=>{if(!o?.current)return;V(o.current.offsetHeight);const F=new ResizeObserver(h=>{for(let x of h)if(V(x.target.offsetHeight),e&&w.current&&o.current){const m=o.current.getBoundingClientRect(),{isUpward:S}=D.current;w.current.style.width=`${m.width}px`,w.current.style.left=`${m.left}px`,S?w.current.style.bottom=`${window.innerHeight-m.top+k}px`:w.current.style.top=`${m.bottom+k}px`}});return F.observe(o.current),()=>F.disconnect()},[o,e,k]);const T={position:"fixed","--rac-duration":`${s}ms`,"--rac-easing":v,left:`${N.left}px`,width:`${N.width}px`,overflow:"hidden",zIndex:"2147483647",height:e?"auto":"0px",opacity:b?e?1:0:1,pointerEvents:e?"all":"none",visibility:K?"visible":"hidden",boxSizing:"border-box",transformOrigin:N.isUpward?"bottom":"top",...N.isUpward?{bottom:`${window.innerHeight-N.top+k}px`,top:"auto"}:{top:`${N.bottom+k}px`,bottom:"auto"},...Object.fromEntries(Object.entries(R||{}).map(([f,F])=>[f.startsWith("--")?f:`--rac-${f.replace(/([A-Z])/g,"-$1").toLowerCase()}`,F]))},U=n.useCallback(()=>{const f=w.current;f&&(f.style.height="0px",b&&(f.style.opacity="0"),f.style.transition="")},[b]),Z=n.useCallback(()=>{const f=w.current;f&&(f.style.transition=z,f.style.height=`${f.scrollHeight}px`,b&&(f.style.opacity="1"))},[z,b]),ee=n.useCallback(()=>{const f=w.current;f&&(f.style.height="auto",f.style.transition="",a&&a())},[a]),se=n.useCallback(()=>{const f=w.current;f&&(f.style.height=`${f.scrollHeight}px`,b&&(f.style.opacity="1"),f.offsetHeight,f.style.transition=z)},[z,b]),ie=n.useCallback(()=>{const f=w.current;f&&(f.style.height="0px",b&&(f.style.opacity="0"))},[b]),q=n.useCallback(()=>{const f=w.current;f&&(f.style.transition="")},[]);return rr.createPortal(d.jsx(ve.CSSTransition,{in:e,timeout:s,classNames:"rac-options",unmountOnExit:u,nodeRef:w,onEnter:U,onEntering:Z,onEntered:ee,onExit:se,onExiting:ie,onExited:q,children:d.jsx("div",{ref:w,className:`rac-options ${C||""}`,style:{...T,"--rac-duration":`${s}ms`,"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-base":"var(--rac-duration)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)"},onMouseDown:f=>{f.preventDefault()},children:i})}),document.body)}const or=n.memo(ar,(e,i)=>e.visibility===i.visibility&&e.duration===i.duration&&e.easing===i.easing&&e.offset===i.offset&&e.animateOpacity===i.animateOpacity&&e.selectRef===i.selectRef&&e.children===i.children&&JSON.stringify(e.style)===JSON.stringify(i.style));function Re({visibility:e,children:i,duration:o=300,unmount:a,style:u}){const s=n.useRef(null);return d.jsx(ve.CSSTransition,{in:e,timeout:o,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:()=>a?.(),children:d.jsx("div",{ref:s,style:{...u,overflow:"hidden",transition:`width ${o}ms ease`},children:i})})}const Me=({children:e,duration:i,widthMode:o=!1,...a})=>{const u=n.useRef(null);return d.jsx(ve.CSSTransition,{nodeRef:u,timeout:i,classNames:"rac-slide-left",...a,onEnter:()=>{const s=u.current;o?s.style.width="0px":(s.style.height="0px",s.style.transform="translateY(-10px)"),s.style.opacity="0"},onEntering:()=>{const s=u.current;s.offsetHeight,o?s.style.width=s.scrollWidth+"px":(s.style.height=s.scrollHeight+"px",s.style.transform="translateY(0)"),s.style.opacity="1"},onEntered:()=>{const s=u.current;s.style.width=o?"auto":"",s.style.height=o?"":"auto",s.style.opacity="1",s.style.transform=""},onExit:()=>{const s=u.current;o?s.style.width=s.offsetWidth+"px":(s.style.height=s.offsetHeight+"px",s.style.position="absolute"),s.style.opacity="1"},onExiting:()=>{const s=u.current;o?s.style.width="0px":(s.style.height="0px",s.style.transform="translateY(10px)"),s.style.opacity="0"},children:d.jsx("div",{ref:u,style:{display:"flex",alignItems:"center",height:"100%",overflow:"hidden",whiteSpace:"nowrap",transition:`all ${i}ms ease`,top:0,left:0},children:e})})},lr=n.memo(({element:e,index:i,remove:o,renderIcon:a,DelIcon:u,normalizedOptions:s})=>{let v=null;if(e?.jsx)v=e.jsx;else if(e?.name)v=e.name;else if(e?.raw!==void 0){const R=s.find(C=>C.raw===e.raw||C.original===e.raw||C.userId===e.raw);R&&(v=R.jsx??R.name)}v==null&&(v=typeof e=="object"?e.label??e.name??e.value??"Selected item":String(e));const k=n.useCallback(R=>{R.stopPropagation(),R.preventDefault(),o(e.id)},[e.id,o]),b=n.useCallback(R=>{R.stopPropagation(),R.preventDefault()},[]);return d.jsxs("div",{className:"rac-multiple-selected-option",children:[v,a(u,{onClick:k,onMouseDown:b})]})}),cr=n.memo(({selectRef:e,selectId:i,removeOption:o,renderOptions:a,selected:u,selectedIDs:s,setSelectedIds:v,normalizedOptions:k,title:b,visibility:R,active:C,hasOptions:w,hasActualValue:K,optionsClassName:V,selectedText:N,disabled:H,loading:D,error:P,registerOption:z,unregisterOption:T,handleBlur:U,handleFocus:Z,handleToggle:ee,handleKeyDown:se,handleListScroll:ie,setAnimationFinished:q,clear:f,children:F,placeholder:h,className:x,style:m,duration:S,easing:M,offset:G,animateOpacity:re,unmount:ce,ArrowIcon:ae,ClearIcon:r,DelIcon:p,renderIcon:j,hasMore:O,loadButton:te})=>{const ne=n.useRef(null),[t,g]=n.useState(null),l=n.useRef(null);n.useLayoutEffect(()=>{const _=l.current;if(!_)return;const Q=new ResizeObserver(W=>{window.requestAnimationFrame(()=>{if(!Array.isArray(W)||!W.length)return;const fe=W[0].contentRect.height;g(fe)})});return Q.observe(_),()=>{Q.disconnect()}},[]),n.useEffect(()=>{e&&(typeof e=="function"?e(ne.current):e.current=ne.current)},[e]);const y=n.useCallback(_=>{o?o(_):v(Q=>Q.filter(W=>W.id!==_))},[o,v]),$=s?.map((_,Q)=>d.jsx(Me,{duration:S,widthMode:!0,children:d.jsx(lr,{element:_,index:Q,remove:y,renderIcon:j,DelIcon:p,normalizedOptions:k},_.id??Q)},_.id??Q));return d.jsxs(We.Provider,{value:{registerOption:z,unregisterOption:T},children:[F,d.jsxs("div",{ref:ne,style:{...m,"--rac-duration":`${S}ms`,"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-base":"var(--rac-duration)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)"},className:`rac-select
|
|
7
|
-
${
|
|
8
|
-
${
|
|
9
|
-
${
|
|
10
|
-
${
|
|
11
|
-
|
|
12
|
-
`,style:{height:t?`${t}px`:"auto",boxSizing:"content-box",overflow:"hidden"},children:d.jsx("div",{className:"rac-select-title",ref:l,children:d.jsx(ve.TransitionGroup,{component:null,children:s?.length&&!N?$:d.jsxs(Me,{duration:S,widthMode:!0,children:[d.jsx("span",{className:"rac-title-text",children:b}),d.jsx(Re,{visibility:D&&!P,duration:S,children:d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]})})]},b)})})}),d.jsxs("div",{className:"rac-select-buttons",children:[d.jsx(Re,{visibility:K&&w&&!H&&!D&&!P,duration:S,style:{display:"grid"},children:j(r,{className:"rac-select-cancel",onMouseDown:_=>{_.preventDefault(),_.stopPropagation()},onClick:f})}),d.jsx(Re,{visibility:C,duration:S,style:{display:"grid"},children:d.jsx("span",{className:`rac-select-arrow-wrapper ${R?"--open":""}`,children:j(ae,{className:"rac-select-arrow-wrapper"})})})]}),d.jsx(or,{className:V,visibility:R,selectRef:e,onAnimationDone:()=>q(!0),unmount:ce,duration:S,easing:M,offset:G,animateOpacity:re,style:{...m,"--rac-duration":`${S}ms`},children:d.jsxs("div",{onScroll:ie,tabIndex:"-1",className:"rac-select-list",role:"listbox","aria-label":"Options",children:[a,!te&&O&&d.jsxs("div",{className:"rac-select-option rac-disabled-option rac-loading-option",onClick:_=>_.stopPropagation(),children:[d.jsx("span",{className:"rac-loading-option-title",children:"Loading"}),d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]})]})]})})]})]})});function ur({disabled:e,open:i,setOpen:o,options:a=[],selectOption:u,selected:s,selectedIDs:v,multiple:k,hasMore:b,loadMore:R,loadButton:C,loadButtonText:w,setLoadingTitle:K,loadOffset:V,loadAhead:N,expandedGroups:H}){const D=n.useRef(!1),P=n.useRef(0),z=n.useRef(!1),[T,U]=n.useState(-1);n.useEffect(()=>{z.current=!1,C&&K(w)},[a.length,b,C,w,K]);const Z=n.useCallback(()=>{!b||z.current||(z.current=!0,R())},[b,R]),ee=n.useCallback(h=>{if(C||!b||z.current)return;const{scrollTop:x,scrollHeight:m,clientHeight:S}=h.currentTarget;m-x<=S+V&&Z()},[C,b,V,Z]);n.useEffect(()=>{!C&&i&&b&&T>=a.length-N&&Z()},[T,i,b,a.length,N,C,Z]),n.useEffect(()=>{const h=()=>{P.current=Date.now()};return window.addEventListener("focus",h),()=>window.removeEventListener("focus",h)},[]),n.useEffect(()=>{if(!i){U(-1);return}if(T>=0&&T<a.length&&!(!a[T]||a[T].hidden||a[T].groupHeader))return;let h=-1;if(s&&!k){const x=k?s[0]:s;x&&(h=a.findIndex(m=>m.id===x.id&&!m.disabled&&!m.hidden&&!m.groupHeader))}if(k&&v.length){const x=new Set(v.map(m=>m.id));h=a.findIndex(m=>x.has(m.id)&&!m.disabled&&!m.hidden&&!m.groupHeader)}h===-1&&(h=a.findIndex(x=>!x.disabled&&!x.hidden&&!x.groupHeader)),U(h)},[i,a,s]);const se=n.useCallback((h,x)=>{const m=G=>G&&!G?.groupHeader&&(!G?.group||H?.has(G?.group))&&!G?.disabled&&!G?.loading,S=a.length;if(S===0)return-1;let M=h;for(let G=0;G<S;G++){if(M=(M+x+S)%S,!C&&b&&(x>0&&M===0||x<0&&M===S-1))return h;if(m(a[M]))return M}return h},[a,b,C,H]),ie=n.useCallback(h=>{const x=h.relatedTarget?.closest(".rac-options");!h.currentTarget.contains(h.relatedTarget)&&!x&&o(!1)},[o]),q=n.useCallback(()=>{e||document.hidden||Date.now()-P.current<100||i||(o(!0),D.current=!0,setTimeout(()=>{D.current=!1},200))},[e,i,o]),f=n.useCallback(h=>{e||h.target.closest(".rac-select-cancel")||D.current||o(!i)},[e,i,o]),F=n.useCallback(h=>{if(!e)switch(h.key){case"Enter":case" ":h.preventDefault(),i?T!==-1&&a[T]&&u(a[T],h):o(!0);break;case"Escape":h.preventDefault(),o(!1);break;case"ArrowDown":h.preventDefault(),i?U(x=>se(x,1)):o(!0);break;case"ArrowUp":h.preventDefault(),i?U(x=>se(x,-1)):o(!0);break;case"Tab":i&&o(!1);break}},[e,i,o,T,a,u,se]);return n.useMemo(()=>({handleBlur:ie,handleFocus:q,handleToggle:f,handleKeyDown:F,highlightedIndex:T,setHighlightedIndex:U,handleListScroll:ee}),[ie,q,f,F,T,ee])}const dr=["group","disabled","options","items","children"],Ae=["name","label","id","value"],Ge=[],ke=(e,i=!1)=>{if(i&&typeof e.group=="string")return e.group;const o=Ae.find(u=>e[u]!=null&&e[u]!=="");if(o)return String(e[o]);const a=Object.entries(e).find(([u,s])=>!dr.includes(u)&&s!=null&&s!=="");return a?String(a[1]):null};function fr({options:e=Ge,jsxOptions:i=Ge,value:o,defaultValue:a,onChange:u,disabled:s=!1,loading:v=!1,error:k=!1,multiple:b=!1,placeholder:R="Choose option",emptyText:C="No options",disabledText:w="Disabled",loadingText:K="Loading",errorText:V="Failed to load",disabledOption:N="Disabled option",emptyOption:H="Empty option",invalidOption:D="Invalid option",setVisibility:P,hasMore:z,loadButton:T,setLoadingTitle:U,loadingTitle:Z,loadMoreText:ee,loadMore:se,childrenFirst:ie,groupsClosed:q}){const f=n.useId(),F=o!==void 0,[h,x]=n.useState(null),[m,S]=n.useState([]),[M,G]=n.useState(new Set),re=n.useRef(null),ce=n.useCallback(t=>{G(g=>{const l=new Set(g);return l.has(t)?l.delete(t):l.add(t),l})},[]),ae=n.useCallback((t,g,l="n",y=null,$=!1)=>{const _=`${f}-${l}-${g}`;if(t==null||t==="")return{id:_,userId:null,name:H,raw:null,disabled:!0,type:"normal",group:y,groupDisabled:$};if(typeof t=="function")return{id:_,userId:null,name:D,raw:t,disabled:!0,invalid:!0,type:"normal",group:y};if(typeof t=="object"&&!Array.isArray(t)){const Q=y||t.group||null,W=$||t.disabled===!0,fe=t.id??t.value??t.name??t.label,L=t.value!==void 0?t.value:t.id!==void 0?t.id:t;let c=ke(t)||(W?N:H);return{id:_,userId:fe,name:c,raw:L,original:t,disabled:W||c===H&&!W,type:typeof L=="boolean"?"boolean":"normal",group:Q,groupDisabled:$}}return{id:_,userId:t,name:String(t),raw:t,original:t,disabled:$,type:typeof t=="boolean"?"boolean":"normal",group:y}},[f,H,D,N]),r=n.useMemo(()=>{const t=new Map,g=[],l=i.map((c,A)=>{if(c.isGroupMarker)return{...c,type:"group-marker"};const J=!c.label&&!c.userId&&!c.value&&(c.value===void 0||c.value===null||c.value==="")&&!c.hasJsx;return{...c,id:`jsx-${c.id}`,index:A,userId:c.userId,raw:c.value,original:c.value,name:J?H:c.label||c.userId||String(c.value||""),disabled:!!c.disabled||J,type:typeof c.value=="boolean"?"boolean":"normal",group:c.group||null}});let y=0;const $=(c,A=null,J=!1,oe="0")=>{Array.isArray(c)||(c=[c]),c.forEach((Y,pe)=>{if(!Y)return;const ge=`${oe}-${pe}`,ye=typeof Y=="object"&&!Array.isArray(Y);if(ye&&("options"in Y||"group"in Y&&!Ae.some(X=>X in Y))){const X=ke(Y,!0)||"Empty group";t.has(X)||t.set(X,{disabled:!!Y.disabled,closedByDefault:!!Y.disabled||q,items:[]}),Y.options?$(Y.options,X,J||!!Y.disabled,ge):g.push({id:`empty-${X}-${ge}`,name:X,group:X,isPlaceholder:!0,type:"group-marker",index:y++})}else if(ye&&!Ae.some(X=>X in Y)&&!Y.group)Object.entries(Y).forEach(([X,be],_e)=>{const Ce=ae(be,`${ge}-${_e}`,"normal",A,J);g.push({...Ce,index:y++})});else{const X=ae(Y,ge,"normal",A,J);g.push({...X,index:y++})}})};$(e);const _=ie?[...l,...g]:[...g,...l];if(!re.current)re.current=new Map(_.map((c,A)=>[c.id,A]));else{let c=!1;if(_.forEach(A=>{re.current.has(A.id)||(c=!0)}),c){const A=new Map;_.forEach((J,oe)=>{A.set(J.id,oe)}),re.current=A}}const Q=[..._].sort((c,A)=>{const J=re.current.get(c.id)??999999,oe=re.current.get(A.id)??999999;return J-oe}),W=[],fe=new Set;Q.forEach(c=>{if(!c.group)W.push({type:"item",data:c});else if(fe.has(c.group)||(fe.add(c.group),W.push({type:"group",name:c.group})),!c.isPlaceholder&&!c.isGroupMarker){const A=t.get(c.group)||{items:[]};t.has(c.group)||t.set(c.group,A),A.items.push(c)}});const L=[];return W.forEach(c=>{if(c.type==="item")L.push(c.data);else{const A=c.name,J=t.get(A),oe=M.has(A);L.push({id:`group-header-${A}`,name:A,disabled:!!J?.disabled,groupHeader:!0,expanded:oe,type:"group",hidden:!1}),J?.items.forEach(Y=>{const pe=M.size>0?!oe:!!q;L.push({...Y,hidden:pe})})}}),z&&T&&L.push({id:"special-load-more-id",name:Z,loadMore:!0,loading:Z===ee,type:"special"}),L},[e,i,f,ae,ie,z,T,Z,ee,q,M,H]);n.useEffect(()=>{if(!r||r.length===0||M.size>0||q)return;const t=new Set;r.forEach(g=>{g.groupHeader&&!g.disabled&&t.add(g.name)}),t.size>0&&G(t)},[r,q]);const p=n.useCallback(t=>{if(t==null)return null;const g=r.find(l=>l.original===t);if(g)return g.id;if(typeof t=="object")try{const l=JSON.stringify(t);return r.find(y=>y.original&&typeof y.original=="object"&&JSON.stringify(y.original)===l)?.id??null}catch{return null}return null},[r]);n.useEffect(()=>{const t=F?o:a;if(t==null||Array.isArray(t)&&t.length===0){x(null),S([]);return}const g=l=>{const y=p(l),$=r.find(Q=>Q.id===y);if($)return $;const _=typeof l=="object"?l.id||l.value||JSON.stringify(l):String(l);return typeof l=="object"&&l!==null?{id:`virtual-${_}`,name:ke(l)||String(l.id||"Selected Object"),raw:l.value??l.id??l,original:l,userId:l.id??l.value??null,virtual:!0}:{id:`virtual-${_}`,name:String(l),raw:l,original:l,userId:l,virtual:!0}};if(b){const y=(Array.isArray(t)?t:[t]).map(g);S(y)}else{const l=Array.isArray(t)?t[0]:t,y=g(l);x($=>$===y.id?$:y.id)}},[]);const j=n.useMemo(()=>{const t=r.find(g=>g.id===h);if(t)return t;if(!b&&h?.startsWith("virtual-")){const g=F?o:a,l=Array.isArray(g)?g[0]:g;if(l)return{id:h,name:typeof l=="object"?ke(l):String(l),original:l}}return null},[h,r,b,F,o,a]),O=n.useCallback((t,g)=>{if(t.groupHeader){g?.stopPropagation(),g?.preventDefault(),t.disabled||ce(t.name);return}if(t.disabled||t.loadMore){g?.stopPropagation(),g?.preventDefault(),t.loadMore&&!t.loading&&(U(ee),se());return}if(b){if(t.disabled||t.groupHeader||t.loadMore){g?.stopPropagation(),g?.preventDefault();return}g?.stopPropagation(),g?.preventDefault();const y=m?.some($=>$.id===t.id)?m.filter($=>$.id!==t.id):[...m,t];S(y),u?.(y.map($=>$.original),y.map($=>$.userId));return}x(t.id),u?.(t.original,t.userId),P(!1)},[u,P,se,ee,U,ce]),te=n.useCallback(()=>{x(null),S([]),u?.(null,null)},[u]),ne=n.useCallback(t=>{const g=m.filter(l=>l.id!==t);S(g),u?.(g.map(l=>l.original),g.map(l=>l.userId))},[m,u]);return{normalizedOptions:r,selected:j,selectOption:O,clear:te,removeOption:ne,hasOptions:r.length>0,active:!k&&!v&&!s&&r.length>0,selectedValue:o??a,placeholder:R,emptyText:C,disabledText:w,loadingText:K,errorText:V,disabledOption:N,emptyOption:H,invalidOption:D,disabled:s,loading:v,error:k,expandedGroups:M,toggleGroup:ce,selectedIDs:m,multiple:b,setSelectedIds:S}}function gr({visibility:e,children:i,duration:o=300}){const a=n.useRef(null);return d.jsx(ve.CSSTransition,{in:e,timeout:300,classNames:"slideDown",unmountOnExit:!0,nodeRef:a,onEnter:()=>a.current.style.height="0px",onEntering:()=>a.current.style.height=a.current.scrollHeight+"px",onEntered:()=>a.current.style.height="auto",onExit:()=>a.current.style.height=a.current.scrollHeight+"px",onExiting:()=>a.current.style.height="0px",children:d.jsx("div",{ref:a,style:{overflow:"hidden",transition:`height ${o}ms ease`,paddingLeft:"1em"},className:"slideDown-enter-done",tabIndex:-1,children:i})})}const Te=(e,i)=>{if(!e)return null;if(typeof e=="string")return d.jsx("img",{src:e,...i,alt:""});if(n.isValidElement(e))return n.cloneElement(e,i);if(typeof e=="function"||typeof e=="object"&&e.$$typeof){const o=e;return d.jsx(o,{...i})}return null},hr=(e,i,o,a,u,s,v,k)=>{const b=k?.some(R=>R.id===e.id);return e.groupHeader?"rac-select-option rac-group-option":["rac-select-option",e.className,(b||a===e.id)&&"rac-selected",i===o&&"rac-highlighted",(e.disabled||e.loading)&&"rac-disabled-option",(e.invalid||e.name===v)&&"rac-invalid-option",e.loadMore&&u===s&&"rac-loading-option",typeof e.raw=="boolean"&&(e.raw?"rac-true-option":"rac-false-option")].filter(Boolean).join(" ")},pr=n.forwardRef(({unmount:e,children:i,visibility:o,ownBehavior:a=!1,alwaysOpen:u=!1,duration:s=300,easing:v="ease-out",offset:k=0,animateOpacity:b=!0,style:R={},className:C="",ArrowIcon:w=ir,ClearIcon:K=Ye,DelIcon:V=Ye,CheckIcon:N=ze,hasMore:H=!1,loadMore:D=()=>{console.warn("loadMore not implemented")},loadButton:P=!1,loadButtonText:z="Load more",loadMoreText:T="Loading",selectedText:U=void 0,loadOffset:Z=100,loadAhead:ee=3,childrenFirst:se=!1,groupsClosed:ie=!1,optionsClassName:q="",...f},F)=>{const h=n.useId(),x=n.useMemo(()=>h.replace(/:/g,""),[h]),[m,S]=n.useState([]),[M,G]=n.useState(!1),[re,ce]=n.useState(P?z:T),[ae,r]=n.useState(!1),p=n.useRef(null),j=n.useCallback(I=>{S(B=>{const le=B.findIndex(ue=>ue.id===I.id);if(le!==-1){const ue=B[le];if(ue.label===I.label&&ue.value===I.value&&ue.disabled===I.disabled&&ue.group===I.group)return B;const me=[...B];return me[le]=I,me}return[...B,I]})},[]),O=n.useCallback(I=>{S(B=>{const le=B.filter(ue=>ue.id!==I);return le.length===B.length?B:le})},[]),te=u?!0:a?!!o:M,ne=n.useCallback(I=>{u||a||G(I)},[u,a]),t=fr({...f,setVisibility:ne,jsxOptions:m,hasMore:H,loadButton:P,loadingTitle:re,loadMore:D,loadMoreText:T,setLoadingTitle:ce,childrenFirst:se,groupsClosed:ie}),{multiple:g,normalizedOptions:l,selected:y,selectOption:$,clear:_,removeOption:Q,hasOptions:W,active:fe,selectedValue:L,disabled:c,loading:A,error:J,placeholder:oe,invalidOption:Y,emptyText:pe,disabledText:ge,loadingText:ye,errorText:$e,expandedGroups:X,selectedIDs:be,setSelectedIds:_e}=t,Ce=ur({setLoadingTitle:ce,loadButton:P,loadButtonText:z,hasMore:H,loadMore:D,disabled:c,multiple:g,open:te,setOpen:ne,options:l,selectOption:$,selected:y,loadOffset:Z,loadAhead:ee,expandedGroups:X,selectedIDs:be}),{handleListScroll:Je,handleBlur:Ve,handleFocus:Ue,handleToggle:qe,handleKeyDown:Xe,highlightedIndex:xe,setHighlightedIndex:Ne}=Ce;n.useImperativeHandle(F,()=>p.current),n.useEffect(()=>{te||r(!1)},[te]),n.useEffect(()=>{(J||c||A||!W)&&ne(!1)},[J,c,A,W,ne]),n.useEffect(()=>{if(te&&ae&&xe!==-1){const I=l[xe];I&&document.getElementById(`opt-${x}-${Fe(I.id)}`)?.scrollIntoView({block:"nearest"})}},[xe,te,ae,l,x]);const Se=n.useMemo(()=>L!=null&&!(Array.isArray(L)&&L.length===0)&&!(typeof L=="object"&&Object.keys(L).length===0),[L]),Ke=n.useMemo(()=>{if(J)return $e;if(A)return ye;if(c)return ge;if(Se&&U)return U;if(y)return y.jsx??y.name;if(Se){const I=l.find(B=>B.raw===L);return I?I.name:typeof L=="object"&&L!==null?L.name??L.label??"Selected Object":String(L)}return W?oe:pe},[c,A,J,W,y,L,oe,$e,ye,ge,pe,Se,l]),Be=n.useMemo(()=>{const I=[];let B=[],le=null;const ue=l.reduce((E,de)=>(de.group&&(E[de.group]=(E[de.group]||0)+1),E),{}),me=E=>{E===null||B.length===0||(I.push(d.jsx(gr,{visibility:X.has(E),children:B},`slide-${E}`)),B=[])},Pe=(E,de)=>d.jsxs("div",{id:`opt-${x}-${Fe(E.id)}`,role:"option","aria-selected":y?.id===E.id,"aria-disabled":E.disabled||E.loading,className:hr(E,de,xe,y?.id,re,T,Y,be),onClick:he=>!E.loading&&$(E,he),onMouseEnter:()=>!E.disabled&&!E.loading&&Ne(de),children:[E.jsx??d.jsx("span",{className:"rac-option-title",children:E.name}),E.loading&&d.jsxs("span",{className:"rac-loading-dots",children:[d.jsx("i",{}),d.jsx("i",{}),d.jsx("i",{})]}),g&&!E.disabled?d.jsx("div",{className:"rac-checkbox",children:Te(ze,{className:`
|
|
13
|
-
|
|
14
|
-
${be?.some(he=>he.id===E.id)?"--checked":""}`})}):null]},E.id);return l.forEach((E,de)=>{const he=E.groupHeader,He=!!E.group;if((he||!He&&le!==null)&&(me(le),he||(le=null)),he){le=E.name;const Ze=X.has(E.name),Qe=ue[E.name]>0;I.push(d.jsxs("div",{className:["rac-group-header",E.disabled&&"rac-disabled-group"].filter(Boolean).join(" "),onClick:er=>$(E,er),children:[d.jsx("span",{className:"rac-group-title-text",children:E.name}),d.jsx(Re,{visibility:Qe&&!E.disabled,duration:s,children:d.jsx("span",{className:`rac-group-arrow-wrapper ${Ze?"--open":""}`,children:Te(w,{className:"rac-select-arrow-wrapper"})})})]},E.id))}else He?B.push(Pe(E,de)):I.push(Pe(E,de))}),me(le),I},[l,$,x,y,xe,re,T,Y,Ne,X,w]);return d.jsx(cr,{selectedText:U,selectRef:p,selectId:x,selectedIDs:be,setSelectedIds:_e,multiple:g,removeOption:Q,optionsClassName:q,renderIcon:Te,normalizedOptions:l,renderOptions:Be,selected:y,title:Ke,visibility:te,active:fe,hasOptions:W,hasActualValue:Se,highlightedIndex:xe,animationFinished:ae,disabled:c,loading:A,error:J,setVisibility:ne,setHighlightedIndex:Ne,setAnimationFinished:r,handleBlur:Ve,handleFocus:Ue,handleToggle:qe,handleKeyDown:Xe,handleListScroll:Je,selectOption:$,clear:_,registerOption:j,unregisterOption:O,children:i,placeholder:oe,className:C,style:R,duration:s,easing:v,offset:k,animateOpacity:b,unmount:e,ArrowIcon:w,ClearIcon:K,DelIcon:V,hasMore:H,loadButton:P})}),br=n.createContext(null),Oe=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(Oe).join(" ").replace(/\s+/g," ").trim():n.isValidElement(e)?Oe(e.props.children):"":"";function xr({value:e,id:i,className:o,children:a,disabled:u,group:s}){const v=n.useContext(We),k=n.useContext(br),b=v?.registerOption,R=v?.unregisterOption,C=n.useId(),w=n.useMemo(()=>i?String(i):C.replace(/:/g,""),[i,C]);return n.useEffect(()=>{if(!b)return;const K=Oe(a),V=a!=null;let N="";return K?N=K:i!=null&&i!==""?N=String(i):e!=null&&e!==""&&(N=String(e)),b({id:w,value:e!==void 0?e:K,label:N,jsx:a,hasJsx:V,className:o,disabled:!!u,group:s||k||null}),()=>R(w)},[w,e,a,o,u,s,k,b,R]),null}exports.Option=xr;exports.Select=pr;
|
|
6
|
+
<%s key={someKey} {...props} />`,S,y,p,y),W[y+S]=!0)}if(y=null,m!==void 0&&(s(m),y=""+m),b(o)&&(s(o.key),y=""+o.key),"key"in o){m={};for(var $ in o)$!=="key"&&(m[$]=o[$])}else m=o;return y&&g(m,typeof r=="function"?r.displayName||r.name||"Unknown":r),i(r,y,m,l(),ce,a)}function k(r){d(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===u&&(r._payload.status==="fulfilled"?d(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function d(r){return typeof r=="object"&&r!==null&&r.$$typeof===N}var R=t,N=Symbol.for("react.transitional.element"),_=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),H=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),Q=Symbol.for("react.suspense"),G=Symbol.for("react.suspense_list"),U=Symbol.for("react.memo"),u=Symbol.for("react.lazy"),D=Symbol.for("react.activity"),le=Symbol.for("react.client.reference"),F=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,q=Object.prototype.hasOwnProperty,fe=Array.isArray,V=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(r){return r()}};var re,P={},ie=R.react_stack_bottom_frame.bind(R,x)(),E=V(c(x)),W={};He.Fragment=C,He.jsx=function(r,o,m){var S=1e4>F.recentlyCreatedOwnerStacks++;return v(r,o,m,!1,S?Error("react-stack-top-frame"):ie,S?V(c(r)):E)},He.jsxs=function(r,o,m){var S=1e4>F.recentlyCreatedOwnerStacks++;return v(r,o,m,!0,S?Error("react-stack-top-frame"):ie,S?V(c(r)):E)}})()),He}var Qe;function ft(){return Qe||(Qe=1,process.env.NODE_ENV==="production"?De.exports=ut():De.exports=dt()),De.exports}var h=ft();const et=({className:e="",...n})=>h.jsx("svg",{className:e,role:"button","aria-label":"Clear selection",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"1em",height:"1em",fill:"currentColor",...n,children:h.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"})}),gt=({className:e="",...n})=>h.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",width:"1em",height:"1em",fill:"currentColor",...n,children:h.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"})}),pt=({className:e="",...n})=>h.jsx("svg",{className:e,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"1em",height:"1em",fill:"currentColor",...n,children:h.jsx("path",{d:"M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z"})}),Ve=t.createContext(null),Ae=t.forwardRef(({className:e="",visibility:n=void 0,setLeaving:s,setEntering:c,setSpacer:l,children:x,duration:b=300,unmount:g,style:j,exit:i=!0,...v},k)=>{const d=t.useRef(null),R=n!==void 0?n:v.in;t.useImperativeHandle(k,()=>d.current),t.useEffect(()=>{!R&&d.current&&(d.current.style.width="0px")},[]);const N=t.useCallback(()=>{if(!d.current)return{left:"0px",right:"0px"};const _=window.getComputedStyle(d.current);return{left:_.marginLeft,right:_.marginRight}},[]);return h.jsx(Me.CSSTransition,{onEnter:()=>{d.current.style.transition="none",d.current.style.marginRight="0px",d.current.style.marginLeft="0px",d.current.style.width="0px",c?.(!0)},onEntering:()=>{const{left:_,right:C}=N();requestAnimationFrame(()=>{requestAnimationFrame(()=>{d.current&&(d.current.style.transition=`width ${b}ms, color ${b}ms, background-color ${b}ms, margin ${b}ms ease`,d.current.style.width=d.current.scrollWidth+"px",d.current.style.marginRight=C,d.current.style.marginLeft=_)})})},onEntered:()=>{d.current.style.width="auto",l?.(!1),c?.(!1)},onExit:()=>{const{left:_,right:C}=N();d.current.style.width=d.current.scrollWidth+"px",d.current.style.marginRight=C,d.current.style.marginLeft=_,d.current.offsetHeight,s?.(!0)},onExiting:()=>{d.current.style.marginRight="0px",d.current.style.marginLeft="0px",d.current.style.width="0px"},onExited:()=>{g?.(),s?.(!1),l?.(!1)},classNames:"rac-slide-left",unmountOnExit:i,timeout:b,nodeRef:d,in:R,...v,children:h.jsx("div",{className:e,ref:d,style:{transition:`width ${b}ms, color ${b}ms, background-color ${b}ms, margin ${b}ms ease`,willChange:"width",overflow:"hidden",...j},children:x})})}),ht=t.memo(({element:e,index:n,setEntering:s,leaving:c,setLeaving:l,setSpacer:x,selectRef:b,spacer:g,delSpacer:j,setVisibility:i,setActiveHoverId:v,activeHoverId:k,swipedId:d,deleteInline:R,remove:N,renderIcon:_,DelIcon:C,normalizedOptions:O,swiped:L,onSwipe:I,deleting:H,setDeleting:Z,onRender:Q,duration:G,showDelete:U})=>{const u=t.useRef(null),D=t.useRef(!1),le=t.useRef(!1),F=t.useRef(0),q=t.useRef(null),fe=t.useCallback(o=>{F.current=o.touches[0].clientX,D.current=!1,u.current&&clearTimeout(u.current),u.current=setTimeout(()=>{Z(!0),D.current=!0,b.current?.focus(),i(!1),window.navigator.vibrate&&window.navigator.vibrate(50)},600),o.preventDefault()},[]),V=t.useCallback(o=>{u.current&&clearTimeout(u.current);const m=o.touches[0].clientX,S=F.current-m;Math.abs(S)>10&&(le.current=!0,S>30&&!L?(v(null),I(e.id)):S<-30&&L&&I(null))},[e.id,L,I]),re=t.useCallback(o=>{u.current&&clearTimeout(u.current),D.current&&o.preventDefault()},[]);let P=null;if(e?.jsx)P=e.jsx;else if(e?.name)P=e.name;else if(e?.raw!==void 0){const o=O.find(m=>m.raw===e.raw||m.original===e.raw||m.userId===e.raw);o&&(P=o.jsx??o.name)}P==null&&(P=typeof e=="object"?e.label??e.name??e.value??"Selected item":String(e));const ie=t.useCallback(o=>{o.stopPropagation(),o.preventDefault()},[]),E=t.useCallback(o=>{ie(o),N(e.id),I(null)},[e.id,N,I]),W=t.useCallback(o=>{if(ie(o),D.current){D.current=!1;return}if(H){E(o);return}},[H,E]);t.useLayoutEffect(()=>{if(q.current&&Q){const o=q.current.offsetWidth;Q(o)}},[Q,P]);const r=U?!0:k===e.id||d===e.id||H;return h.jsxs(t.Fragment,{children:[h.jsxs("div",{className:`rac-multiple-selected-option ${H?"--deleting-shake":""}`,onMouseEnter:()=>{v(e.id),I(null)},onMouseLeave:()=>v(null),onTouchStart:fe,onTouchMove:V,onTouchEnd:re,onClick:W,ref:q,children:[P,h.jsx(Ae,{style:{backgroundColor:H||R?"transparent":"--rac-multiple-del-bg",position:H||R?"relative":"absolute"},className:"rac-multiple-del",visibility:r,setEntering:s,setLeaving:l,setSpacer:x,duration:G,children:_(C,{onClick:E,onMouseDown:ie})})]}),h.jsx(Ae,{visibility:!c&&!g?.state&&!k&&!d&&!H&&R&&j,className:"rac-multiple-option",style:{visibility:"hidden"},children:h.jsx("div",{style:{padding:0,marginRight:0,marginLeft:0},className:"rac-multiple-selected-option",children:_(C)})})]})}),st=({children:e,setLeaving:n,duration:s,setSpacer:c,id:l=null,widthMode:x=!1,...b})=>{const g=t.useRef(null),j=t.useCallback(()=>{if(!g.current)return{t:0,b:0,l:0,r:0};const i=window.getComputedStyle(g.current);return{t:i.marginTop,b:i.marginBottom,l:i.marginLeft,r:i.marginRight}},[]);return h.jsx(Me.CSSTransition,{classNames:"rac-slide-left",timeout:s,nodeRef:g,unmountOnExit:!0,...b,onEnter:()=>{const i=g.current;i&&(x?(i.style.width="0px",i.style.marginLeft="0px",i.style.marginRight="0px"):(i.style.height="0px",i.style.marginTop="0px",i.style.marginBottom="0px",i.style.transform="translateY(-10px)"),i.style.opacity="0")},onEntering:()=>{const i=g.current,v=j();i.offsetHeight,x?(i.style.width=i.scrollWidth+"px",i.style.marginRight=v.r,i.style.marginLeft=v.l):(i.style.height=i.scrollHeight+"px",i.style.transform="translateY(0)",i.style.marginBottom=v.b,i.style.marginTop=v.t),i.style.opacity="1"},onEntered:()=>{const i=g.current;i.style.width=x?"auto":"",i.style.height=x?"":"100%",i.style.opacity="1",i.style.transform="",c?.(!1)},onExit:()=>{const i=g.current,v=j();x?(i.style.width=i.offsetWidth+"px",i.style.marginRight=v.r,i.style.marginLeft=v.l):(i.style.height=i.offsetHeight+"px",i.style.position="absolute",i.style.marginBottom=v.b,i.style.marginTop=v.t),i.style.opacity="1",n?.(!0)},onExiting:()=>{const i=g.current;x?(i.style.marginRight="0px",i.style.marginLeft="0px",i.style.width="0px"):(i.style.transform="translateY(10px)",i.style.marginBottom="0px",i.style.marginTop="0px",i.style.height="0px"),i.style.opacity="0"},onExited:()=>{c?.(!1),n?.(!1)},children:h.jsx("div",{ref:g,id:l,style:{transition:`all ${s}ms ease`,alignItems:"center",whiteSpace:"nowrap",overflow:"hidden",display:"flex",left:0,top:0},children:e})})},mt=t.memo(({element:e,index:n,setEntering:s,leaving:c,setLeaving:l,selectRef:x,setVisibility:b,setActiveHoverId:g,delSpacer:j,swiped:i,swipedId:v,onSwipe:k,activeHoverId:d,deleteInline:R,spacer:N,duration:_,normalizedOptions:C,setDeleting:O,renderIcon:L,deleting:I,DelIcon:H,remove:Z,registerItemWidth:Q,setSpacer:G,showDelete:U,...u})=>h.jsxs(t.Fragment,{children:[h.jsx(st,{className:"rac-multiple-option",onEnter:u.onEnter,setLeaving:l,setSpacer:G,onExit:u.onExit,duration:_,id:e.id,in:u.in,widthMode:!0,children:h.jsx(ht,{onRender:D=>Q(e.id,D),normalizedOptions:C,setActiveHoverId:g,activeHoverId:d,setVisibility:b,deleteInline:R,setDeleting:O,setEntering:s,setLeaving:l,renderIcon:L,showDelete:U,setSpacer:G,selectRef:x,delSpacer:j,duration:_,deleting:I,swipedId:v,onSwipe:k,element:e,DelIcon:H,leaving:c,swiped:i,remove:Z,spacer:N,index:n},e.id??n)}),N.state&&N.id===e.id&&h.jsx("div",{style:{width:N.width-2},className:"rac-spacer"})]}));function yt({visibility:e,children:n,selectRef:s,onAnimationDone:c,unmount:l=!0,duration:x,easing:b,offset:g,animateOpacity:j,style:i,className:v,setBottomDirection:k=()=>{}}){const d=t.useRef(null),[R,N]=t.useState({top:0,left:0,width:0}),_=t.useRef(R);t.useLayoutEffect(()=>{_.current=R},[R]);const C=t.useCallback(()=>{if(s?.current){const u=s.current.getBoundingClientRect(),D=window.innerHeight,le=d.current?.scrollHeight||250,F=D-u.bottom,q=F<le&&u.top>F;k(q),N({top:u.top,bottom:u.bottom,left:u.left,width:u.width,isUpward:q})}},[s]);t.useLayoutEffect(()=>{if(e)return C(),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C),()=>{window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C)}},[e,C]);const O=`height var(--rac-duration) ${b}${j?`, opacity var(--rac-duration) ${b}`:""}`;t.useLayoutEffect(()=>{if(!s?.current)return;const u=new ResizeObserver(D=>{for(let le of D)if(e&&d.current&&s.current){const F=s.current.getBoundingClientRect(),{isUpward:q}=_.current;d.current.style.width=`${F.width}px`,d.current.style.left=`${F.left}px`,q?d.current.style.bottom=`${window.innerHeight-F.top+g}px`:d.current.style.top=`${F.bottom+g}px`}});return u.observe(s.current),()=>u.disconnect()},[s,e,g]);const L={position:"fixed","--rac-duration":`${x}ms`,"--rac-easing":b,left:`${R.left}px`,width:`${R.width}px`,overflow:"hidden",zIndex:"2147483647",height:e?"auto":"0px",opacity:j?e?1:0:1,pointerEvents:e?"all":"none",boxSizing:"border-box",transformOrigin:R.isUpward?"bottom":"top",...R.isUpward?{bottom:`${window.innerHeight-R.top+g}px`,top:"auto"}:{top:`${R.bottom+g}px`,bottom:"auto"},...Object.fromEntries(Object.entries(i||{}).map(([u,D])=>[u.startsWith("--")?u:`--rac-${u.replace(/([A-Z])/g,"-$1").toLowerCase()}`,D]))},I=t.useCallback(()=>{const u=d.current;u&&(u.style.height="0px",j&&(u.style.opacity="0"),u.style.transition="")},[j]),H=t.useCallback(()=>{const u=d.current;u&&(u.style.transition=O,u.style.height=`${u.scrollHeight}px`,j&&(u.style.opacity="1"))},[O,j]),Z=t.useCallback(()=>{const u=d.current;u&&(u.style.height="auto",u.style.transition="",c&&c())},[c]),Q=t.useCallback(()=>{const u=d.current;u&&(u.style.height=`${u.scrollHeight}px`,j&&(u.style.opacity="1"),u.offsetHeight,u.style.transition=O)},[O,j]),G=t.useCallback(()=>{const u=d.current;u&&(u.style.height="0px",j&&(u.style.opacity="0"))},[j]),U=t.useCallback(()=>{const u=d.current;u&&(u.style.transition="")},[]);return ct.createPortal(h.jsx(Me.CSSTransition,{in:e,timeout:x,classNames:"rac-options",unmountOnExit:l,nodeRef:d,onEnter:I,onEntering:H,onEntered:Z,onExit:Q,onExiting:G,onExited:U,children:h.jsx("div",{ref:d,className:`rac-options ${v||""}`,style:{...L,"--rac-duration":`${x}ms`,"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-base":"var(--rac-duration)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)"},onMouseDown:u=>u.preventDefault(),children:n})}),document.body)}const bt=t.memo(yt,(e,n)=>e.visibility===n.visibility&&e.duration===n.duration&&e.easing===n.easing&&e.offset===n.offset&&e.animateOpacity===n.animateOpacity&&e.selectRef===n.selectRef&&e.children===n.children&&JSON.stringify(e.style)===JSON.stringify(n.style)),tt=e=>{const n=window.getComputedStyle(e);return parseFloat(n.marginLeft)+parseFloat(n.marginRight)},rt=e=>e.reduce((n,s)=>{const c=s.offsetTop,l=s.getBoundingClientRect().width;return n[c]=(n[c]||0)+l,n},{}),xt=t.memo(({deleteInline:e,selectRef:n,setVisibility:s,selectId:c,removeOption:l,renderOptions:x,selected:b,selectedIDs:g,setSelectedIds:j,normalizedOptions:i,title:v,visibility:k,active:d,hasOptions:R,hasActualValue:N,optionsClassName:_,selectedText:C,disabled:O,loading:L,error:I,registerOption:H,unregisterOption:Z,handleBlur:Q,handleFocus:G,toggleVisibility:U,handleKeyDown:u,handleListScroll:D,setAnimationFinished:le,clear:F,children:q,placeholder:fe,className:V,style:re,duration:P,easing:ie,offset:E,animateOpacity:W,unmount:r,OpenIcon:o,ClearIcon:m,DelIcon:S,renderIcon:ce,hasMore:a,loadButton:y,deleting:p,setDeleting:$,showDelete:T})=>{const[Y,ue]=t.useState(!1),[oe,xe]=t.useState(null),[ee,f]=t.useState(!1),[A,ne]=t.useState({}),[he,z]=t.useState(null),[ke,X]=t.useState(null),[be,ve]=t.useState(!1),[te,Re]=t.useState(!1),$e=t.useRef(!0),Se=t.useRef(null),We=t.useCallback(J=>{l?l(J):j(B=>B.filter(ae=>ae.id!==J))},[l,j]),Ye=t.useCallback(J=>{if(p){J.stopPropagation(),J.preventDefault(),$(!1);return}U(J)},[p,U]),Ge=t.useCallback((J,B)=>{ne(ae=>ae[J]===B?ae:{...ae,[J]:B})},[]);t.useLayoutEffect(()=>{const J=Se.current;if(!J)return;const B=new ResizeObserver(ae=>{window.requestAnimationFrame(()=>{if(!Array.isArray(ae)||!ae.length)return;const Oe=ae[0].contentRect.height;xe(Oe)})});return B.observe(J),()=>B.disconnect()},[]),t.useEffect(()=>{$e.current=!1,n&&(typeof n=="function"?n(n.current):n.current=n.current)},[n]),t.useEffect(()=>{p&&k&&U()&&U?.()(p&&g?.length===0)&&$(!1),X(null)},[g?.length,p]),t.useLayoutEffect(()=>{const J=Se.current;if(!J||!g?.length||p){g?.length||f({state:!1,id:null,width:0});return}const B=Array.from(J.children).filter(ye=>ye.classList.contains("rac-multiple-option")),ae=J.clientWidth;if(B.length>g.length){const ye=new Set(g.map(me=>me.id)),Ee=B.findIndex(me=>!ye.has(me.id));if(Ee===-1)return;const de=B[Ee],ge=B[Ee-1];if(!(ge&&de.offsetTop!==ge.offsetTop)){f({state:!1,id:null,width:0});return}const Le=rt(B),Pe=Object.keys(Le).map(Number).sort((me,je)=>me-je),M=Pe.indexOf(de.offsetTop);if(M<=0){f({state:!1,id:null,width:0});return}const K=Pe[M-1],se=Le[K],pe=ae-se;Oe(ge?.id||null,!0,pe)}else if(B.length===g.length){const ye=B[B.length-1],Ee=g[g.length-1]?.id,de=A[Ee];if(!de)return;const ge=ye?.firstElementChild||ye,Ne=tt(ge),Le=tt(ye),Pe=B.slice(0,-1),M=rt(Pe),K=Object.keys(M).map(Number).sort((je,w)=>je-w);let se=ae;if(K.length>0){const je=Math.max(...K);se=ae-(M[je]||0)}const pe=de+Ne+Le>se,me=g[g.length-2]?.id;Oe(me,pe,se)}function Oe(ye,Ee,de){f(ge=>ge.id===ye&&ge.state===Ee&&ge.width===de?ge:{state:Ee,id:ye,width:de})}},[g,A,p]);const Ce=m&&N&&R&&!O&&!L&&!I&&!p,Te=o&&d&&!p,Ue=g?.map((J,B)=>{const ae=B===g.length-1;return h.jsx(mt,{normalizedOptions:i,registerItemWidth:Ge,setActiveHoverId:X,swiped:he===J.id,activeHoverId:ke,setVisibility:s,deleteInline:e,setDeleting:$,setEntering:Re,setLeaving:ve,renderIcon:ce,showDelete:T,selectRef:n,setSpacer:f,onSwipe:z,delSpacer:ae,duration:P,deleting:p,swipedId:he,leaving:be,element:J,DelIcon:S,spacer:ee,remove:We,index:B},J.id??B)});return h.jsxs(Ve.Provider,{value:{registerOption:H,unregisterOption:Z},children:[q,h.jsxs("div",{ref:n,style:{"--rac-duration-fast":"calc(var(--rac-duration) * 0.5)","--rac-duration-slow":"calc(var(--rac-duration) * 1.3)","--rac-duration-base":"var(--rac-duration)","--rac-duration":`${P}ms`,...re},className:`
|
|
7
|
+
${!R||O?"rac-disabled-style":""}
|
|
8
|
+
${L?"rac-loading-style":""}
|
|
9
|
+
${I?"rac-error-style":""}
|
|
10
|
+
${V}
|
|
11
|
+
rac-select
|
|
12
|
+
`,...d&&{onKeyDown:u,onFocus:G,onClick:Ye,onBlur:Q},"aria-disabled":O||!R,"aria-controls":`${c}-listbox`,tabIndex:d?0:-1,"aria-expanded":k,"aria-label":fe,"aria-haspopup":"listbox",role:"combobox",children:[h.jsx("div",{className:`rac-select-title-wrapper
|
|
13
|
+
${!I&&!L&&b?.type==="boolean"?b.raw?"rac-true-option":"rac-false-option":""}
|
|
14
|
+
`,style:{alignItems:g?.length&&!C?"flex-start":"center",height:oe?`${oe}px`:"auto"},children:h.jsx("div",{style:{alignItems:g?.length&&!C?"flex-start":"center",height:L?"100%":"auto"},className:"rac-select-title",ref:Se,children:h.jsx(Me.TransitionGroup,{enter:!$e.current,component:null,appear:!1,children:g?.length&&!C&&!L?Ue:h.jsxs(st,{className:"rac-title-container",duration:P,widthMode:!0,children:[h.jsx("span",{className:"rac-title-text",children:v}),h.jsx(Ae,{className:"rac-loading-container",visibility:L&&!I,duration:P,children:h.jsxs("span",{className:"rac-loading-dots",children:[h.jsx("i",{}),h.jsx("i",{}),h.jsx("i",{})]})})]},v)})})}),h.jsx(Ae,{visibility:Ce||Te,className:"rac-select-buttons",children:h.jsxs(Me.TransitionGroup,{component:null,children:[Ce&&h.jsx(Ae,{style:{display:"grid"},duration:P,children:ce(m,{className:"rac-select-cancel",onMouseDown:J=>{J.preventDefault(),J.stopPropagation()},onClick:F})},"clear-icon")," ",Te&&h.jsx(Ae,{style:{display:"grid"},duration:P,children:ce(o,{className:`rac-select-arrow ${k?"--open":""} ${Y?"":"--up"}`})},"open-button")]})}),h.jsx(bt,{style:{"--rac-duration":`${P}ms`,...re},visibility:k&&i.length,onAnimationDone:()=>le(!0),setBottomDirection:ue,animateOpacity:W,className:_,selectRef:n,duration:P,unmount:r,easing:ie,offset:E,children:h.jsxs("div",{onScroll:D,className:"rac-select-list","aria-label":"Options",role:"listbox",tabIndex:"-1",children:[x,!y&&a&&h.jsxs("div",{className:"rac-select-option rac-disabled-option rac-loading-option",style:{justifyContent:"initial",alignItems:"end",gap:0},onClick:J=>J.stopPropagation(),children:[h.jsx("span",{className:"rac-loading-option-title",children:"Loading"}),h.jsx("div",{className:"rac-loading-container",children:h.jsxs("span",{style:{paddingBottom:"0.1em"},className:"rac-loading-dots",children:[h.jsx("i",{}),h.jsx("i",{}),h.jsx("i",{})]})})]})]})})]})]})}),Et=["group","disabled","options","items","children"],Je=["name","label","id","value"],nt=[],Fe=(e,n=!1)=>{if(n&&typeof e.group=="string")return e.group;const s=Je.find(l=>e[l]!=null&&e[l]!=="");if(s)return String(e[s]);const c=Object.entries(e).find(([l,x])=>!Et.includes(l)&&x!=null&&x!=="");return c?String(c[1]):null};function wt({options:e=nt,jsxOptions:n=nt,value:s,onChange:c,disabled:l=!1,loading:x=!1,error:b=!1,multiple:g=!1,placeholder:j="Choose option",emptyText:i="No options",disabledText:v="Disabled",loadingText:k="Loading",errorText:d="Failed to load",disabledOption:R="Disabled option",emptyOption:N="Empty option",invalidOption:_="Invalid option",setVisibility:C,hasMore:O,loadButton:L,setLoadingTitle:I,loadingTitle:H,loadMoreText:Z,loadMore:Q,childrenFirst:G=!1,groupsClosed:U=!1}){const u=s!==void 0,[D,le]=t.useState(()=>{const a=new Set;if(U)return a;const y=p=>{Array.isArray(p)&&p.forEach($=>{if($&&typeof $=="object"){if(("options"in $||"group"in $&&!Je.some(Y=>Y in $))&&!$.disabled){const Y=Fe($,!0)||"Empty group";a.add(Y)}$.options&&y($.options)}})};return y(e),a}),F=t.useRef(null),q=t.useCallback(a=>{le(y=>{const p=new Set(y);return p.has(a)?p.delete(a):p.add(a),p})},[]),fe=t.useCallback((a,y,p="n",$=null,T=!1)=>{const Y=`${p}-${y}`;if(a==null||a===""||a===void 0)return{name:N,disabled:!0,type:"normal",groupDisabled:T,userId:null,raw:a,group:$,id:Y};if(typeof a=="function")return{id:Y,userId:null,name:_,raw:a,disabled:!0,invalid:!0,type:"normal",group:$};if(typeof a=="object"&&!Array.isArray(a)){const ue=$||a.group||null,oe=T||a.disabled===!0,xe=a.id??a.value??a.name??a.label,ee=a.value!==void 0?a.value:a.id!==void 0?a.id:a;let f=Fe(a)||(oe?R:N);return{id:Y,userId:xe,name:f,raw:ee,original:a,disabled:oe||f===N&&!oe,type:typeof ee=="boolean"?"boolean":"normal",group:ue,groupDisabled:T}}return{id:Y,userId:a,name:String(a),raw:a,original:a,disabled:T,type:typeof a=="boolean"?"boolean":"normal",group:$}},[N,_,R]),V=t.useMemo(()=>{const a=new Map,y=[],p=n.map((f,A)=>{if(f.isGroupMarker)return{...f,type:"group-marker"};const ne=!f.label&&!f.userId&&!f.value&&(f.value===void 0||f.value===null||f.value==="")&&!f.hasJsx;return{...f,id:`jsx-${f.id}`,index:A,userId:f.userId,raw:f.value,original:f.value,name:ne?N:f.label||f.userId||String(f.value||""),disabled:!!f.disabled||ne,type:typeof f.value=="boolean"?"boolean":"normal",group:f.group||null}});let $=0;const T=(f,A=null,ne=!1,he="0")=>{Array.isArray(f)||(f=[f]),f.forEach((z,ke)=>{const X=`${he}-${ke}`,be=z!=null&&typeof z=="object"&&!Array.isArray(z);if(be&&("options"in z||"group"in z&&!Je.some(te=>te in z))){const te=Fe(z,!0)||"Empty group";a.has(te)||a.set(te,{disabled:!!z.disabled,closedByDefault:!!z.disabled||U,items:[]}),z.options?T(z.options,te,ne||!!z.disabled,X):y.push({id:`empty-${te}-${X}`,name:te,group:te,isPlaceholder:!0,type:"group-marker",index:$++})}else if(be&&!Je.some(te=>te in z)&&!z.group)Object.entries(z).forEach(([te,Re],$e)=>{const Se=fe(Re,`${X}-${$e}`,"default",A,ne);y.push({...Se,index:$++})});else{const te=fe(z,X,"default",A,ne);y.push({...te,index:$++})}})};T(e);const Y=G?[...p,...y]:[...y,...p];if(!F.current)F.current=new Map(Y.map((f,A)=>[f.id,A]));else{let f=!1;if(Y.forEach(A=>{F.current.has(A.id)||(f=!0)}),f){const A=new Map;Y.forEach((ne,he)=>{A.set(ne.id,he)}),F.current=A}}const ue=[...Y].sort((f,A)=>{const ne=F.current.get(f.id)??999999,he=F.current.get(A.id)??999999;return ne-he}),oe=[],xe=new Set;ue.forEach(f=>{if(!f.group)oe.push({type:"item",data:f});else{xe.has(f.group)||(xe.add(f.group),oe.push({type:"group",name:f.group}));const A=a.get(f.group)||{items:[]};a.has(f.group)||a.set(f.group,A),f.isGroupMarker?(A.className=f.className,A.style=f.style,f.disabled&&(A.disabled=!0)):f.isPlaceholder||A.items.push(f)}});const ee=[];return oe.forEach(f=>{if(f.type==="item")ee.push(f.data);else{const A=f.name,ne=a.get(A),he=D.has(A);ee.push({className:ne?.className||"",id:`group-header-${A}`,disabled:!!ne?.disabled,style:ne?.style||{},groupHeader:!0,name:A,type:"group",hidden:!1,expanded:he}),ne?.items.forEach(z=>{const ke=D.size>0?!he:!!U;ee.push({...z,hidden:ke})})}}),O&&L&&ee.push({id:"special-load-more-id",name:H,loadMore:!0,loading:H===Z,type:"special"}),ee},[e,n,fe,G,O,L,H,Z,U,D,N]),re=t.useCallback(()=>{if(s==null||Array.isArray(s)&&s.length===0)return{initialId:null,initialIDs:[]};const a=new Set,y=(p,$)=>{let T=V.find(ue=>ue.original===p&&!a.has(ue.id));if(!T&&typeof p=="object")try{const ue=JSON.stringify(p);T=V.find(oe=>oe.original&&typeof oe.original=="object"&&JSON.stringify(oe.original)===ue&&!a.has(oe.id))}catch{}if(T)return a.add(T.id),T;const Y=typeof p=="object"?p.id||p.value||JSON.stringify(p):String(p);return typeof p=="object"&&p!==null?{id:`virtual-${Y}-${$}`,name:Fe(p)||String(p.id||"Selected Object"),raw:p.value??p.id??p,original:p,userId:p.id??p.value??null,virtual:!0}:{id:`virtual-${Y}-${$}`,name:String(p),raw:p,original:p,userId:p,virtual:!0}};if(g)return{initialId:null,initialIDs:(Array.isArray(s)?s:[s]).map((T,Y)=>y(T,Y))};{const p=Array.isArray(s)?s[0]:s;return{initialId:y(p,0).id,initialIDs:[]}}},[u,s,V,g]),[P,ie]=t.useState(()=>re().initialId),[E,W]=t.useState(()=>re().initialIDs),r=t.useMemo(()=>{const a=V.find(y=>y.id===P);if(a)return a;if(!g&&P?.startsWith("virtual-")){const y=Array.isArray(s)?s[0]:s;if(y)return{id:P,name:typeof y=="object"?Fe(y):String(y),original:y}}return null},[P,V,g,u,s]),o=t.useCallback((a,y)=>{if(a.groupHeader){m(y),a.disabled||q(a.name);return}if(a.disabled||a.loadMore){m(y),a.loadMore&&!a.loading&&(I(Z),Q());return}if(g){if(a.disabled||a.groupHeader||a.loadMore){m(y);return}m(y);const $=E?.some(T=>T.id===a.id)?E.filter(T=>T.id!==a.id):[...E,a];W($),c?.($.map(T=>T.original),$.map(T=>T.userId));return}ie(a.id),c?.(a.original,a.userId),C(!1)},[c,C,Q,Z,I,q,g,E]),m=t.useCallback(a=>{a?.stopPropagation(),a?.preventDefault()},[]),S=t.useCallback(()=>{c?.(null,null),ie(null),W([])},[c]),ce=t.useCallback(a=>{const y=E.filter(p=>p.id!==a);W(y),c?.(y.map(p=>p.original),y.map(p=>p.userId))},[E,c]);return{normalizedOptions:V,selected:r,selectOption:o,clear:S,removeOption:ce,hasOptions:V.length>0,active:!b&&!x&&!l&&V.length>0,selectedValue:s,placeholder:j,emptyText:i,disabledText:v,loadingText:k,errorText:d,disabledOption:R,emptyOption:N,invalidOption:_,disabled:l,loading:x,error:b,expandedGroups:D,toggleGroup:q,selectedIDs:E,multiple:g,setSelectedIds:W}}function vt({disabled:e,open:n,setOpen:s,options:c=[],selectOption:l,setDeleting:x,selected:b,selectedIDs:g,multiple:j,hasMore:i,loadMore:v,loadButton:k,loadButtonText:d,setLoadingTitle:R,loadOffset:N,loadAhead:_,expandedGroups:C,onOpen:O,onClose:L,deleting:I}){const H=t.useRef(!1),Z=t.useRef(0),Q=t.useRef(!1),[G,U]=t.useState(-1);t.useEffect(()=>{Q.current=!1,k&&R(d)},[c.length,i,k,d,R]);const u=t.useCallback(()=>{!i||Q.current||(Q.current=!0,v())},[i,v]),D=t.useCallback(E=>{if(k||!i||Q.current)return;const{scrollTop:W,scrollHeight:r,clientHeight:o}=E.currentTarget(r-W<=o+N)&&u()},[k,i,N,u]);t.useEffect(()=>{!k&&n&&i&&G>=c.length-_&&u()},[G,n,i,c.length,_,k,u]),t.useEffect(()=>{const E=()=>{Z.current=Date.now()};return window.addEventListener("focus",E),()=>window.removeEventListener("focus",E)},[]),t.useEffect(()=>{if(!n){U(-1);return}const E=c[G],W=E&&!E.hidden&&!E.groupHeader;if(G>=0&&G<c.length&&W)return;let r=-1;if(b&&!j){const o=j?b[0]:b;o&&(r=c.findIndex(m=>m.id===o.id&&!m.disabled&&!m.hidden&&!m.groupHeader))}if(j&&g.length){const o=new Set(g.map(m=>m.id));r=c.findIndex(m=>o.has(m.id)&&!m.disabled&&!m.hidden&&!m.groupHeader)}r===-1&&(r=c.findIndex(o=>!o.disabled&&!o.hidden&&!o.groupHeader)),U(r)},[n,c,b]);const le=t.useCallback((E,W)=>{const r=S=>S&&!S?.groupHeader&&(!S?.group||C?.has(S?.group))&&!S?.disabled&&!S?.loading,o=c.length;if(o===0)return-1;let m=E;for(let S=0;S<o;S++){if(m=(m+W+o)%o,!k&&i&&(W>0&&m===0||W<0&&m===o-1))return E;if(r(c[m]))return m}return E},[c,i,k,C]),F=t.useCallback(E=>{const W=E.relatedTarget?.closest(".rac-options");!E.currentTarget.contains(E.relatedTarget)&&!W&&(s(!1),x(!1))},[s]),q=t.useCallback(()=>{e||I||document.hidden||Date.now()-Z.current<100||n||(s(!0),H.current=!0,setTimeout(()=>H.current=!1,200))},[e,n,s,I]),fe=t.useRef(n),V=t.useRef(O),re=t.useRef(L);t.useEffect(()=>{V.current=O,re.current=L},[O,L]),t.useEffect(()=>{fe.current!==n&&(n?V.current?.():re.current?.(),fe.current=n)},[n]);const P=t.useCallback(E=>{e||I||E?.target?.closest(".rac-select-cancel")||H.current||s(!n)},[e,n,s,O,L,I]),ie=t.useCallback(E=>{if(!e)switch(E.key){case"Enter":case" ":E.preventDefault(),n?G!==-1&&c[G]&&l(c[G],E):s(!0);break;case"Escape":E.preventDefault(),s(!1);break;case"ArrowDown":E.preventDefault(),n?U(W=>le(W,1)):s(!0);break;case"ArrowUp":E.preventDefault(),n?U(W=>le(W,-1)):s(!0);break;case"Tab":n&&s(!1);break}},[e,n,s,G,c,l,le]);return t.useMemo(()=>({handleBlur:F,handleFocus:q,toggleVisibility:P,handleKeyDown:ie,highlightedIndex:G,setHighlightedIndex:U,handleListScroll:D}),[F,q,P,ie,G,D])}function St({visibility:e,children:n,duration:s=300,className:c}){const l=t.useRef(null),x=t.useCallback(()=>{if(!l.current)return{top:"0px",bottom:"0px"};const b=window.getComputedStyle(l.current);return{top:b.marginTop,bottom:b.marginBottom}},[]);return h.jsx(Me.CSSTransition,{onEnter:()=>{l.current.style.height="0px",l.current.style.marginTop="0px",l.current.style.marginBottom="0px"},onEntering:()=>{const{top:b,bottom:g}=x();l.current.style.height=l.current.scrollHeight+"px",l.current.style.marginBottom=g,l.current.style.marginTop=b},onEntered:()=>l.current.style.height="auto",onExit:()=>{const{top:b,bottom:g}=x();l.current.style.height=l.current.scrollHeight+"px",l.current.style.marginBottom=g,l.current.style.marginTop=b,l.current.offsetHeight},onExiting:()=>{l.current.style.height="0px",l.current.style.marginTop="0px",l.current.style.marginBottom="0px"},classNames:"rac-slide-down",timeout:s,nodeRef:l,in:e,unmountOnExit:!0,children:h.jsx("div",{style:{transition:`height ${s}ms ease, margin ${s}ms ease`,overflow:"hidden"},className:`${c} rac-slide-down-enter-done`,ref:l,tabIndex:-1,children:n})})}const Be=(e,n="invalid-option",s="")=>{const c=s?s.replace(/:/g,""):"";if(typeof e!="string"||!e.trim())return c?`${n}-${c}`:`${n}-${Math.random().toString(36).slice(2,8)}`;const l=e.normalize("NFKD").replace(/[\u0300-\u036f]/g,"").replace(/\s+/g,"-").replace(/[^\p{L}\p{N}-]+/gu,"").toLowerCase();return l?l||`${n}-${Math.random().toString(36).slice(2,8)}`:c?`${n}-${c}`:`${n}-${Math.random().toString(36).slice(2,8)}`},ze=(e,n)=>{if(!e)return null;const s=(c={})=>({...n,...c,style:{...n?.style,...c?.style}});if(typeof e=="string")return h.jsx("img",{src:e,...s(),alt:""});if(t.isValidElement(e))return t.cloneElement(e,s(e.props));if(typeof e=="function"||typeof e=="object"&&e.$$typeof){const c=e;return h.jsx(c,{...s()})}return null},jt=(e,n,s,c,l,x,b,g)=>{const j=g?.some(i=>i.id===e.id);return e.groupHeader?"rac-select-option rac-group-option":["rac-select-option",e.className,(j||c===e.id)&&"rac-selected",n===s&&"rac-highlighted",(e.disabled||e.loading)&&"rac-disabled-option",(e.invalid||e.name===b)&&"rac-invalid-option",e.loadMore&&l===x&&"rac-loading-option",typeof e.raw=="boolean"&&(e.raw?"rac-true-option":"rac-false-option")].filter(Boolean).join(" ")},kt=t.forwardRef(({unmount:e,children:n,visibility:s,setVisibility:c=()=>{},ownBehavior:l=!1,duration:x=300,easing:b="ease-in",offset:g=1,animateOpacity:j=!0,style:i={},className:v="",OpenIcon:k=gt,ClearIcon:d=et,DelIcon:R=et,Checkmark:N=pt,Checkbox:_=void 0,hasMore:C=!1,loadMore:O=()=>console.warn("loadMore not implemented"),loadButton:L=!1,loadButtonText:I="Load more",loadMoreText:H="Loading",selectedText:Z=void 0,loadOffset:Q=100,loadAhead:G=3,optionsClassName:U="",onOpen:u=()=>{},onClose:D=()=>{},deleteInline:le=!1,showDelete:F=!1,...q},fe)=>{const V=t.useId(),re=t.useMemo(()=>V.replace(/:/g,""),[V]),[P,ie]=t.useState([]),[E,W]=t.useState(!1),[r,o]=t.useState(L?I:H),[m,S]=t.useState(!1),ce=t.useRef(null),[a,y]=t.useState(!1),p=t.useCallback(M=>{ie(K=>{const se=K.findIndex(pe=>pe.id===M.id);if(se!==-1){const pe=K[se];if(pe.label===M.label&&pe.value===M.value&&pe.disabled===M.disabled&&pe.group===M.group)return K;const me=[...K];return me[se]=M,me}return[...K,M]})},[]),$=t.useCallback(M=>{ie(K=>{const se=K.filter(pe=>pe.id!==M);return se.length===K.length?K:se})},[]),T=s!==void 0,Y=t.useMemo(()=>l||T?!!s:E,[l,T,s,E]),ue=t.useCallback(M=>{l||(!T&&W(M),c?.(M))},[l,T,c]),oe=wt({...q,setVisibility:ue,jsxOptions:P,hasMore:C,loadButton:L,loadingTitle:r,loadMore:O,loadMoreText:H,setLoadingTitle:o}),{multiple:xe,normalizedOptions:ee,selected:f,selectOption:A,clear:ne,removeOption:he,hasOptions:z,active:ke,selectedValue:X,disabled:be,loading:ve,error:te,placeholder:Re,invalidOption:$e,emptyText:Se,disabledText:We,loadingText:Ye,errorText:Ge,expandedGroups:Ce,selectedIDs:Te,setSelectedIds:Ue}=oe,J=vt({setDeleting:y,setLoadingTitle:o,loadButton:L,loadButtonText:I,hasMore:C,loadMore:O,disabled:be,multiple:xe,open:Y,setOpen:ue,options:ee,selectOption:A,selected:f,loadOffset:Q,loadAhead:G,expandedGroups:Ce,selectedIDs:Te,onOpen:u,onClose:D,deleting:a}),{handleListScroll:B,handleBlur:ae,handleFocus:Oe,toggleVisibility:ye,handleKeyDown:Ee,highlightedIndex:de,setHighlightedIndex:ge}=J;t.useImperativeHandle(fe,()=>ce.current),t.useEffect(()=>{if(!Y){S(!1);return}Y&&ce.current&&document.activeElement!==ce.current&&ce.current.focus()},[Y]),t.useEffect(()=>{(te||be||ve||!z)&&ue(!1)},[te,be,ve,z,ue]),t.useEffect(()=>{T&&W(!!s)},[s,T]),t.useEffect(()=>{if(Y&&m&&de!==-1){const M=ee[de];M&&document.getElementById(`${re}-${Be(M.id)}`)?.scrollIntoView({block:"nearest"})}},[de,Y,m,ee,re]);const Ne=t.useMemo(()=>X!=null&&!(Array.isArray(X)&&X.length===0)&&!(typeof X=="object"&&Object.keys(X).length===0),[X]),Le=t.useMemo(()=>{if(te)return Ge;if(ve)return Ye;if(be)return We;if(Ne&&Z)return Z;if(f)return f.jsx??f.name;if(Ne){const M=ee.find(K=>K.raw===X);return M?M.name:typeof X=="object"&&X!==null?X.name??X.label??"Selected Object":String(X)}return z?Re:Se},[be,ve,te,z,f,X,Re,Ge,Ye,We,Se,Ne,ee]),Pe=t.useMemo(()=>{const M=[];let K=[],se=null;const pe=ee.reduce((w,we)=>(we.group&&(w[we.group]=(w[we.group]||0)+1),w),{}),me=w=>{w===null||K.length===0||(M.push(h.jsx(St,{visibility:Ce.has(w),className:"rac-group-container",children:K},`slide-${w}`)),K=[])},je=(w,we)=>h.jsxs("div",{className:jt(w,we,de,f?.id,r,H,$e,Te),style:{...w.style,...w.loading?{justifyContent:"initial",alignItems:"end",gap:0}:{}},onMouseEnter:()=>!w.disabled&&!w.loading&&ge(we),onClick:_e=>!w.loading&&A(w,_e),"aria-disabled":w.disabled||w.loading,"aria-selected":f?.id===w.id,id:`${re}-${Be(w.id)}`,role:"option",children:[w.jsx?h.jsx("div",{className:"rac-jsx-option",children:w.jsx}):h.jsx("span",{className:"rac-option-title",children:w.name}),w.loading&&h.jsxs("span",{style:{paddingBottom:"0.1em"},className:"rac-loading-dots",children:[h.jsx("i",{}),h.jsx("i",{}),h.jsx("i",{})]}),xe&&!w.disabled&&h.jsxs("div",{className:`rac-checkbox${_?"":"-default"}`,children:[ze(N,{style:{position:_?"":"relative"},className:`
|
|
15
|
+
rac-checkmark
|
|
16
|
+
${Te?.some(_e=>_e.id===w.id)?"--checked":""}`}),ze(_,{className:"rac-check-box"})]})]},w.id);return ee.forEach((w,we)=>{const _e=w.groupHeader,Xe=!!w.group;if((_e||!Xe&&se!==null)&&(me(se),_e||(se=null)),_e){se=w.name;const ot=Ce.has(w.name),at=pe[w.name]>0;M.push(h.jsxs("div",{className:["rac-group-header",w.disabled&&"rac-disabled-group",w.className].filter(Boolean).join(" "),onClick:lt=>A(w,lt),style:w.style,id:w.id,children:[h.jsx("span",{className:"rac-group-title-text",children:w.name}),h.jsx(Ae,{visibility:at&&!w.disabled,style:{display:"grid"},duration:x,children:ze(k,{className:`rac-group-arrow ${ot?"--open":""}`})})]},w.id))}else Xe?K.push(je(w,we)):M.push(je(w,we))}),me(se),M},[ee,A,re,f,de,r,H,$e,ge,Ce,k]);return h.jsx(xt,{setDeleting:y,deleting:a,selectedText:Z,selectRef:ce,selectId:re,selectedIDs:Te,setSelectedIds:Ue,multiple:xe,removeOption:he,optionsClassName:U,renderIcon:ze,normalizedOptions:ee,renderOptions:Pe,selected:f,title:Le,visibility:Y,active:ke,hasOptions:z,hasActualValue:Ne,highlightedIndex:de,animationFinished:m,disabled:be,loading:ve,error:te,setVisibility:ue,setHighlightedIndex:ge,setAnimationFinished:S,handleBlur:ae,handleFocus:Oe,toggleVisibility:ye,handleKeyDown:Ee,handleListScroll:B,selectOption:A,clear:ne,registerOption:p,unregisterOption:$,children:n,placeholder:Re,className:v,style:i,duration:x,easing:b,offset:g,animateOpacity:j,unmount:e,OpenIcon:k,ClearIcon:d,DelIcon:R,hasMore:C,loadButton:L,deleteInline:le,showDelete:F})}),it=t.createContext(null);function Rt({children:e,name:n,label:s,value:c,id:l,disabled:x,emptyGroupText:b="Empty group",className:g="",style:j={}}){const i=t.useContext(Ve),v=t.useMemo(()=>{const d=n??s??l??c;return d!=null&&d!==""?String(d):b},[n,s,c,l,b]),k=t.useMemo(()=>`group-marker-${Be(v)}`,[v]);return t.useEffect(()=>{if(!i)return;const d={disabled:!!x,isGroupMarker:!0,group:v,id:k,className:g,style:j};return i.registerOption(d),()=>i.unregisterOption(k)},[i.registerOption,i.unregisterOption,k,v]),h.jsx(it.Provider,{value:v,children:e})}const qe=e=>e?typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(qe).join(" ").replace(/\s+/g," ").trim():t.isValidElement(e)?qe(e.props.children):"":"";function $t({name:e,label:n,id:s,value:c,className:l,style:x,children:b,disabled:g,group:j}){const i=t.useContext(Ve),v=t.useContext(it),k=i?.registerOption,d=i?.unregisterOption,R=t.useId(),N=t.useMemo(()=>s?String(s):R.replace(/:/g,""),[s,R]);return t.useEffect(()=>{if(!k)return;const _=qe(b),C=b!=null;let O="";return n!=null&&n!==""?O=String(n):e!=null&&e!==""?O=String(e):_?O=_:s!=null&&s!==""&&(O=String(s)),k({id:N,value:c!==void 0?c:_,label:O,jsx:b,hasJsx:C,className:l,style:x,disabled:!!g,group:j||v||null}),()=>d(N)},[N,e,n,c,b,l,x,g,j,v,k,d]),null}exports.OptGroup=Rt;exports.Option=$t;exports.Select=kt;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}:root{--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-title-font-size: 1em;--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-option-min-height: 1em;--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%);--rac-group-header-font-size: 1.25em;--rac-group-header-font-weight: bold;--rac-group-header-min-height: 1em;--rac-group-header-padding: .5em;--rac-group-arrow-height: 1em;--rac-group-arrow-width: 1em;--rac-group-arrow-padding: 1px 0 2px;--rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-multiple-selected-border: .1em solid gray;--rac-multiple-selected-radius: 5px;--rac-checkbox-border: 1px solid gray;--rac-multiple-selected-padding: 0em .25em;--rac-multiple-selected-margin: .25em .25em;--rac-multiple-selected-gap: .5em 0;--rac-checkbox-margin-right: .2em;--rac-multiple-selected-min-height: 1.5em;--rac-checkbox-size: var(--rac-option-min-height);--rac-options-z-index: 1}.rac-select{background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);min-height:var(--rac-select-height);interpolate-size:allow-keywords;transition:border-color var(--rac-duration-base) ease,height var(--rac-duration-base) ease;justify-content:space-between;box-sizing:border-box;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-wrapper{transition:height .3s cubic-bezier(.4,0,.2,1)}.rac-select-title{display:flex;align-items:center;flex-wrap:wrap;gap:var(--rac-multiple-selected-gap)}.rac-title-text{margin:.5em 0;display:block;animation:rac-fade-in var(--rac-duration-base) var(--rac-title-anim-entry-ease);height:100%;align-content:center;font-size:var(--rac-title-font-size)}@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{transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);min-height:var(--rac-option-min-height);padding:var(--rac-option-padding);justify-content:space-between;align-items:center;display:flex;cursor:pointer}.rac-select-option:not(.rac-disabled-option):not(.rac-group-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-option-title{text-overflow:ellipsis;overflow:hidden;text-wrap:wrap}.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)}.rac-loading-option{cursor:wait}.rac-group-header{cursor:pointer;min-height:var(--rac-group-header-min-height);padding:var(--rac-group-header-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center;font-weight:var(--rac-group-header-font-weight);font-size:var(--rac-group-header-font-size)}.rac-group-arrow-wrapper{display:block;height:var(--rac-group-arrow-height);width:var(--rac-group-arrow-width);padding:var(--rac-group-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-group-arrow-wrapper.--open{transform:rotate(180deg)}.rac-disabled-group{cursor:not-allowed;color:var(--rac-disabled-group-color)}.rac-select-selected{display:flex;align-items:center}.rac-multiple-selected-option{border:var(--rac-multiple-selected-border);border-radius:var(--rac-multiple-selected-radius);min-height:var(--rac-multiple-selected-min-height);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;vertical-align:middle;line-height:normal;padding:var(--rac-multiple-selected-padding);margin:var(--rac-multiple-selected-margin);white-space:nowrap}.rac-multiple-selected-option:hover{background-color:color-mix(in srgb,CanvasText 6%,Canvas)}.rac-checkbox{min-height:var(--rac-option-min-height);min-width:var(--rac-option-min-height);border:var(--rac-checkbox-border);justify-content:center;align-items:center;display:flex;height:100%;margin-right:var(--rac-checkbox-margin-right)}.rac-checkmark{color:var(--rac-base-green);opacity:0;max-width:0;max-height:0;transition:opacity var(--rac-duration-base),max-height var(--rac-duration-base),max-width var(--rac-duration-base)}.rac-checkmark.--checked{opacity:1;max-height:var(--rac-option-min-height);max-width:var(--rac-option-min-height)}
|
|
1
|
+
@media(prefers-reduced-motion:reduce){.rac-select{--rac-duration: 1ms}}:root{--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-hover: color-mix(in srgb, Canvas 95%, CanvasText 5%);--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-padding: 0em .5em;--rac-select-min-height: 2em;--rac-disabled-opacity: .75;--rac-title-anim-shift: 4px;--rac-title-anim-entry-ease: cubic-bezier(.34, 1.56, .64, 1);--rac-title-font-size: 1em;--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-option-min-height: 1em;--rac-option-gap: .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%);--rac-group-header-font-size: 1.25em;--rac-group-header-font-weight: bold;--rac-group-header-min-height: 1em;--rac-group-header-padding: .5em;--rac-group-arrow-height: 1em;--rac-group-arrow-width: 1em;--rac-group-arrow-padding: 1px 0 2px;--rac-group-container-padding-left: 1em;--rac-disabled-group-color: color-mix(in srgb, GrayText, CanvasText 20%);--rac-multiple-selected-border: .1em solid gray;--rac-multiple-selected-radius: 5px;--rac-checkbox-border: 1px solid gray;--rac-multiple-selected-padding: 0em .25em;--rac-multiple-selected-margin: .25em .5em .25em 0;--rac-multiple-selected-gap: .5em 0;--rac-multiple-deleting-bg: color-mix(in srgb, var(--rac-base-red) 15%, Canvas);--rac-checkbox-margin-right: .2em;--rac-multiple-selected-min-height: 1.5em;--rac-checkbox-size: var(--rac-option-min-height);--rac-multiple-del-bg: color-mix(in srgb, var(--rac-base-red) 30%, Canvas);--rac-multiple-del-hover-color: var(--rac-base-red)}.rac-select{background:var(--rac-select-background);padding:var(--rac-select-padding);border:var(--rac-select-border);color:var(--rac-select-color);min-height:var(--rac-select-min-height);interpolate-size:allow-keywords;transition:background-color var(--rac-duration-base) ease,border-color var(--rac-duration-base) ease,height var(--rac-duration-base) ease;justify-content:space-between;box-sizing:border-box;cursor:pointer;display:flex}.rac-select:hover{background-color:var(--rac-select-hover);border-color:var(--rac-select-hover)}.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-wrapper{transition:height var(--rac-duration-base) cubic-bezier(.4,0,.2,1);display:flex;width:100%}.rac-select-title{min-height:var(--rac-select-min-height);position:relative;flex-wrap:wrap;display:flex;width:100%}.rac-spacer{min-height:var(--rac-select-min-height)}.rac-title-container{height:100%}.rac-title-text{font-size:var(--rac-title-font-size);align-content:center;display:block;height:100%}@keyframes rac-fade-in{0%{opacity:0;transform:translateY(var(--rac-title-anim-shift))}to{opacity:1;transform:translateY(0)}}.rac-loading-container{align-items:end;display:grid;height:100%}.rac-loading-dots{display:inline-flex;--rac-dots-size: calc(var(--rac-title-font-size) / 4);--rac-dots-gap: calc(var(--rac-title-font-size) / 6);--rac-dots-padding-left: calc(var(--rac-title-font-size) / 4);--rac-dots-padding-bottom: .5em;gap:var(--rac-dots-gap);padding-left:var(--rac-dots-padding-left);padding-bottom:var(--rac-dots-padding-bottom)}.rac-loading-dots i{width:var(--rac-dots-size);height:var(--rac-dots-size);background:var(--rac-dots-color, currentColor);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{transition:transform var(--rac-duration-base) cubic-bezier(.4,0,.2,1);transform-origin:50% 50%;transform:rotate(0);will-change:transform;display:block}.rac-select-arrow.--up,.rac-select-arrow.--open{transform:rotate(180deg)}.rac-select-arrow.--up.--open{transform:rotate(0)}.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-x:hidden;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);transition:border-color var(--rac-duration-fast),background-color var(--rac-duration-fast),opacity var(--rac-duration-base)}.rac-select-option{transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);min-height:var(--rac-option-min-height);padding:var(--rac-option-padding);justify-content:space-between;gap:var(--rac-option-gap);overflow-wrap:anywhere;word-break:break-all;scrollbar-width:thin;align-items:center;overflow-x:auto;cursor:pointer;display:flex}.rac-select-option:not(.rac-disabled-option):not(.rac-group-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-option-title{text-overflow:ellipsis;overflow-wrap:anywhere;word-break:break-all;text-wrap:wrap}.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)}.rac-loading-option{cursor:wait}.rac-group-header{cursor:pointer;min-height:var(--rac-group-header-min-height);padding:var(--rac-group-header-padding);transition:background-color var(--rac-duration-fast) cubic-bezier(.4,0,.2,1);display:flex;justify-content:space-between;align-items:center;font-weight:var(--rac-group-header-font-weight);font-size:var(--rac-group-header-font-size)}.rac-group-container{padding-left:var(--rac-group-container-padding-left)}.rac-group-arrow{display:block;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-group-arrow.--open{transform:rotate(180deg)}.rac-disabled-group{cursor:not-allowed;color:var(--rac-disabled-group-color)}.rac-select-selected{display:flex;align-items:center}.rac-multiple-selected-option{transition:background-color var(--rac-duration-fast, --rac-duration) cubic-bezier(.4,0,.2,1),transform var(--rac-duration) ease;background-color:color-mix(in srgb,CanvasText 10%,Canvas);min-height:var(--rac-multiple-selected-min-height);position:relative;display:inline-flex;align-items:center;vertical-align:middle;line-height:normal;padding:var(--rac-multiple-selected-padding);margin:var(--rac-multiple-selected-margin);white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}@media(hover:hover){.rac-multiple-selected-option:hover{background-color:color-mix(in srgb,CanvasText 25%,Canvas)}}.rac-multiple-del{background-color:var(--rac-multiple-del-bg);-webkit-tap-highlight-color:transparent;align-items:center;position:absolute;-webkit-user-select:none;user-select:none;display:grid;height:100%;right:0}.rac-multiple-del:hover{color:var(--rac-multiple-del-hover-color)}.rac-multiple-option{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.rac-multiple-selected-option.--deleting-shake{background-color:var(--rac-multiple-deleting-bg);animation:rac-shake .3s infinite}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}.rac-checkbox-default{margin-right:var(--rac-checkbox-margin-right);min-height:var(--rac-option-min-height);min-width:var(--rac-option-min-height);border:var(--rac-checkbox-border);justify-content:center;align-items:center;position:relative;display:flex;height:100%}.rac-checkbox{margin-right:var(--rac-checkbox-margin-right);justify-content:center;align-items:center;position:relative;display:flex}.rac-checkmark{transition:max-height var(--rac-duration-base),max-width var(--rac-duration-base),opacity var(--rac-duration-base);position:absolute;max-height:0;opacity:0}.rac-checkmark.--checked{max-height:var(--rac-option-min-height);opacity:1}
|