@rentnerkev/select 3.0.0 → 3.1.0
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 +96 -30
- package/dist/Components/SelectView.d.ts +1 -1
- package/dist/Components/SelectView.d.ts.map +1 -1
- package/dist/Components/SelectView.js +31 -17
- package/dist/Components/SelectView.js.map +1 -1
- package/dist/Hooks/useSelect.logic.d.ts +2 -1
- package/dist/Hooks/useSelect.logic.d.ts.map +1 -1
- package/dist/Hooks/useSelect.logic.js +10 -4
- package/dist/Hooks/useSelect.logic.js.map +1 -1
- package/dist/SelectProvider.d.ts +16 -0
- package/dist/SelectProvider.d.ts.map +1 -0
- package/dist/SelectProvider.js +10 -0
- package/dist/SelectProvider.js.map +1 -0
- package/dist/i18n.d.ts +1 -1
- package/dist/i18n.d.ts.map +1 -1
- package/dist/i18n.js +20 -0
- package/dist/i18n.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +23 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/tailwind.css +19 -0
package/README.md
CHANGED
|
@@ -154,7 +154,7 @@ export function DepartmentForm() {
|
|
|
154
154
|
|
|
155
155
|
## Localization
|
|
156
156
|
|
|
157
|
-
German messages remain the default for backward compatibility. Set `locale
|
|
157
|
+
German messages remain the default for backward compatibility. Set `locale` to `de`, `en`, `es`, or `fr`, or override individual messages with a typed `Partial<SelectMessages>`. The catalog and resolver are available as `selectMessageCatalog` and `resolveSelectMessages`.
|
|
158
158
|
|
|
159
159
|
```tsx
|
|
160
160
|
import { CustomSelect, type SelectMessages } from '@rentnerkev/select'
|
|
@@ -181,38 +181,90 @@ export function LocalizedSelect() {
|
|
|
181
181
|
}
|
|
182
182
|
```
|
|
183
183
|
|
|
184
|
+
## Project-wide defaults
|
|
185
|
+
|
|
186
|
+
Use `SelectProvider` once near the root of your app to set locale, messages, search behavior, styling slots, and a CSP nonce. Any prop passed to an individual select overrides the corresponding provider default; `messages` and `classNames` are merged by key.
|
|
187
|
+
|
|
188
|
+
```tsx
|
|
189
|
+
import { CustomSelect, SelectProvider } from '@rentnerkev/select'
|
|
190
|
+
|
|
191
|
+
export function App({ cspNonce }: { cspNonce?: string }) {
|
|
192
|
+
return (
|
|
193
|
+
<SelectProvider
|
|
194
|
+
locale="en"
|
|
195
|
+
searchable={false}
|
|
196
|
+
nonce={cspNonce}
|
|
197
|
+
classNames={{ trigger: 'w-full', content: 'shadow-xl' }}
|
|
198
|
+
>
|
|
199
|
+
<CustomSelect
|
|
200
|
+
value=""
|
|
201
|
+
onValueChange={() => undefined}
|
|
202
|
+
options={[{ value: 'one', label: 'One' }]}
|
|
203
|
+
placeholder="Choose"
|
|
204
|
+
/>
|
|
205
|
+
</SelectProvider>
|
|
206
|
+
)
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
The nonce is forwarded to Radix's viewport style tag. The package CSS also contains the viewport scrollbar rules, so the scrollbar remains styled under strict CSP. Search is enabled by default for compatibility; set `searchable={false}` globally or per select for short menus.
|
|
211
|
+
|
|
212
|
+
## Custom option content
|
|
213
|
+
|
|
214
|
+
`renderOption` and `renderValue` allow icons, flags, or project-specific layouts without replacing the select's interaction logic. Keep decorative content `aria-hidden`; the plain `label` remains the searchable, accessible text. Individual options can be disabled.
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
<CustomSelect
|
|
218
|
+
value={language}
|
|
219
|
+
onValueChange={setLanguage}
|
|
220
|
+
options={[
|
|
221
|
+
{ value: 'de', label: 'Deutsch' },
|
|
222
|
+
{ value: 'en', label: 'English', disabled: true },
|
|
223
|
+
]}
|
|
224
|
+
renderOption={(option) => <span>{option.label}</span>}
|
|
225
|
+
renderValue={(selected) => <span>{selected[0]?.label}</span>}
|
|
226
|
+
onBlur={handleBlur}
|
|
227
|
+
/>
|
|
228
|
+
```
|
|
229
|
+
|
|
184
230
|
## API
|
|
185
231
|
|
|
186
232
|
### `CustomSelect` props
|
|
187
233
|
|
|
188
|
-
| Prop | Type | Description
|
|
189
|
-
| ---------------------- | -------------------------------------------------------- |
|
|
190
|
-
| `id` | `string` | ID for the visible trigger and associated labels.
|
|
191
|
-
| `name` | `string` | Native form field name.
|
|
192
|
-
| `value` | `TValue \| null \| undefined` or `ReadonlyArray<TValue>` | Controlled single or multiple value.
|
|
193
|
-
| `onValueChange` | `(value: TValue) => void` or `(value: TValue[]) => void` | Typed callback for the selected mode.
|
|
194
|
-
| `options` | `ReadonlyArray<Option<TValue>>` | Available options.
|
|
195
|
-
| `required` | `boolean` | Enables required-field validation. Defaults to `false`.
|
|
196
|
-
| `label` | `ReactNode` | Visible label linked to the trigger.
|
|
197
|
-
| `description` | `ReactNode` | Supporting text linked through `aria-describedby`.
|
|
198
|
-
| `error` | `string \| null` | External validation message; `null` clears external and native errors.
|
|
199
|
-
| `disabled` | `boolean` | Disables interaction and validation.
|
|
200
|
-
| `readOnly` | `boolean` | Prevents changes while retaining the form value.
|
|
201
|
-
| `className` | `string` | Additional Tailwind classes for the visible trigger.
|
|
202
|
-
| `
|
|
203
|
-
| `
|
|
204
|
-
| `
|
|
205
|
-
| `
|
|
206
|
-
| `
|
|
207
|
-
| `
|
|
208
|
-
| `
|
|
209
|
-
| `
|
|
210
|
-
| `
|
|
211
|
-
| `
|
|
212
|
-
| `
|
|
213
|
-
| `
|
|
214
|
-
| `
|
|
215
|
-
| `
|
|
234
|
+
| Prop | Type | Description |
|
|
235
|
+
| ---------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
|
|
236
|
+
| `id` | `string` | ID for the visible trigger and associated labels. |
|
|
237
|
+
| `name` | `string` | Native form field name. |
|
|
238
|
+
| `value` | `TValue \| null \| undefined` or `ReadonlyArray<TValue>` | Controlled single or multiple value. |
|
|
239
|
+
| `onValueChange` | `(value: TValue) => void` or `(value: TValue[]) => void` | Typed callback for the selected mode. |
|
|
240
|
+
| `options` | `ReadonlyArray<Option<TValue>>` | Available options. |
|
|
241
|
+
| `required` | `boolean` | Enables required-field validation. Defaults to `false`. |
|
|
242
|
+
| `label` | `ReactNode` | Visible label linked to the trigger. |
|
|
243
|
+
| `description` | `ReactNode` | Supporting text linked through `aria-describedby`. |
|
|
244
|
+
| `error` | `string \| null` | External validation message; `null` clears external and native errors. |
|
|
245
|
+
| `disabled` | `boolean` | Disables interaction and validation. |
|
|
246
|
+
| `readOnly` | `boolean` | Prevents changes while retaining the form value. |
|
|
247
|
+
| `className` | `string` | Additional Tailwind classes for the visible trigger. |
|
|
248
|
+
| `classNames` | `SelectClassNames` | Classes for root, trigger, content, search, viewport, option, empty state, label, and description. |
|
|
249
|
+
| `searchable` | `boolean` | Show the search field. Defaults to `true`. |
|
|
250
|
+
| `nonce` | `string` | CSP nonce for Radix's generated viewport style. |
|
|
251
|
+
| `onBlur` | `FocusEventHandler<HTMLButtonElement>` | Blur handler on the visible trigger. |
|
|
252
|
+
| `renderOption` | `(option, state) => ReactNode` | Custom content for each menu item; `state` includes selected/disabled. |
|
|
253
|
+
| `renderValue` | `(selectedOptions) => ReactNode` | Custom content for the closed trigger. |
|
|
254
|
+
| `placeholder` | `string` | Text shown while no value is selected. |
|
|
255
|
+
| `icon` | `ReactNode` | Icon rendered at the start of the trigger. |
|
|
256
|
+
| `fallbackOption` | `string` | Message shown when no options are available. |
|
|
257
|
+
| `multiple` | `true` | Enables array-based multiple selection. |
|
|
258
|
+
| `minSelection` | `number` | Minimum number of selected options. |
|
|
259
|
+
| `maxSelection` | `number` | Maximum number of selected options. |
|
|
260
|
+
| `isOptionEqualToValue` | `(optionValue, value) => boolean` | Compares option and selected values. |
|
|
261
|
+
| `getFormValue` | `(value: TValue) => string` | Serializes a value for native form submission. |
|
|
262
|
+
| `locale` | `'de' \| 'en' \| 'es' \| 'fr'` | Selects the default message catalog. Defaults to `'de'`. |
|
|
263
|
+
| `messages` | `Partial<SelectMessages>` | Overrides individual messages and ARIA text. |
|
|
264
|
+
| `aria-label` | `string` | Accessible name for the visible trigger. |
|
|
265
|
+
| `aria-labelledby` | `string` | External accessible-label IDs. |
|
|
266
|
+
| `aria-describedby` | `string` | External description IDs combined with internal text. |
|
|
267
|
+
| `triggerRef` | `Ref<HTMLButtonElement>` | Ref for the visible, focusable trigger. |
|
|
216
268
|
|
|
217
269
|
Additional React `aria-*` attributes are forwarded to the visible trigger.
|
|
218
270
|
|
|
@@ -223,6 +275,7 @@ interface Option<TValue = string> {
|
|
|
223
275
|
value: TValue
|
|
224
276
|
label: string
|
|
225
277
|
subOption?: string
|
|
278
|
+
disabled?: boolean
|
|
226
279
|
}
|
|
227
280
|
```
|
|
228
281
|
|
|
@@ -237,7 +290,20 @@ Import the package entry after Tailwind CSS in your application stylesheet:
|
|
|
237
290
|
@import '@rentnerkev/select/tailwind.css';
|
|
238
291
|
```
|
|
239
292
|
|
|
240
|
-
The package entry scans only the published JavaScript under `dist
|
|
293
|
+
The package entry scans only the published JavaScript under `dist`. Select styling uses `--color-select-control`, `--color-select-surface`, `--color-select-hover`, `--color-select-border`, `--color-select-border-strong`, `--color-select-foreground`, `--color-select-muted`, and `--color-select-accent`. Override these tokens with a later `@theme inline` block to map them to your app's light/dark tokens. The older shared theme tokens remain available for compatibility.
|
|
294
|
+
|
|
295
|
+
```css
|
|
296
|
+
@theme inline {
|
|
297
|
+
--color-select-control: var(--app-input);
|
|
298
|
+
--color-select-surface: var(--app-panel);
|
|
299
|
+
--color-select-hover: var(--app-hover);
|
|
300
|
+
--color-select-border: var(--app-border);
|
|
301
|
+
--color-select-border-strong: var(--app-border-strong);
|
|
302
|
+
--color-select-foreground: var(--app-text);
|
|
303
|
+
--color-select-muted: var(--app-muted);
|
|
304
|
+
--color-select-accent: var(--app-accent);
|
|
305
|
+
}
|
|
306
|
+
```
|
|
241
307
|
|
|
242
308
|
## Public entry points
|
|
243
309
|
|
|
@@ -8,5 +8,5 @@ export type SelectViewProps<TValue> = Omit<SingleSelectProps<TValue>, 'value' |
|
|
|
8
8
|
multiple: boolean;
|
|
9
9
|
onSelectValue: (value: TValue) => void;
|
|
10
10
|
};
|
|
11
|
-
export default function SelectView<TValue>({ id, name, options, selectedValues, formEntries, onSelectValue, required, label, description, error: externalError, disabled, readOnly, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, triggerRef, icon, placeholder, className, fallbackOption, multiple, minSelection, maxSelection, locale, messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, ...ariaProps }: SelectViewProps<TValue>): import("react").JSX.Element;
|
|
11
|
+
export default function SelectView<TValue>({ id, name, options, selectedValues, formEntries, onSelectValue, required, label, description, error: externalError, disabled, readOnly, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, triggerRef, onBlur, icon, placeholder, className, classNames: providedClassNames, searchable: providedSearchable, nonce: providedNonce, renderOption, renderValue, fallbackOption, multiple, minSelection, maxSelection, locale: providedLocale, messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, ...ariaProps }: SelectViewProps<TValue>): import("react").JSX.Element;
|
|
12
12
|
//# sourceMappingURL=SelectView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectView.d.ts","sourceRoot":"","sources":["../../src/Components/SelectView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SelectView.d.ts","sourceRoot":"","sources":["../../src/Components/SelectView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEpD,MAAM,MAAM,eAAe,CAAC,MAAM,IAAI,IAAI,CACtC,iBAAiB,CAAC,MAAM,CAAC,EACzB,OAAO,GAAG,eAAe,GAAG,UAAU,GAAG,cAAc,CAC1D,GAAG;IACA,cAAc,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACrC,WAAW,EAAE,aAAa,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC1D,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC,CAAA;AAUD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,MAAM,EAAE,EACvC,EAAE,EACF,IAAI,EACJ,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EAAE,aAAa,EACpB,QAAgB,EAChB,QAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,UAAU,EACV,MAAM,EACN,IAAI,EACJ,WAAW,EACX,SAAS,EACT,UAAU,EAAE,kBAAkB,EAC9B,UAAU,EAAE,kBAAkB,EAC9B,KAAK,EAAE,aAAa,EACpB,YAAY,EACZ,WAAW,EACX,cAAc,EACd,QAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,gBAAgB,EAC1B,oBAAoB,EAAE,wBAAwB,EAC9C,GAAG,SAAS,EACf,EAAE,eAAe,CAAC,MAAM,CAAC,+BA+WzB"}
|
|
@@ -1,13 +1,20 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
3
3
|
import { CustomTooltip } from '@rentnerkev/tooltips';
|
|
4
4
|
import { AlertCircle, Check, ChevronDown } from 'lucide-react';
|
|
5
|
+
import { useSelectDefaults } from '../SelectProvider.js';
|
|
5
6
|
import useSelectLogic from '../Hooks/useSelect.logic.js';
|
|
6
7
|
function mergeAriaIds(...values) {
|
|
7
8
|
const ids = values.flatMap((value) => value?.split(/\s+/).filter(Boolean) ?? []);
|
|
8
9
|
return [...new Set(ids)].join(' ') || undefined;
|
|
9
10
|
}
|
|
10
|
-
export default function SelectView({ id, name, options, selectedValues, formEntries, onSelectValue, required = false, label, description, error: externalError, disabled = false, readOnly = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, triggerRef, icon, placeholder, className, fallbackOption, multiple = false, minSelection, maxSelection, locale
|
|
11
|
+
export default function SelectView({ id, name, options, selectedValues, formEntries, onSelectValue, required = false, label, description, error: externalError, disabled = false, readOnly = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, triggerRef, onBlur, icon, placeholder, className, classNames: providedClassNames, searchable: providedSearchable, nonce: providedNonce, renderOption, renderValue, fallbackOption, multiple = false, minSelection, maxSelection, locale: providedLocale, messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, ...ariaProps }) {
|
|
12
|
+
const defaults = useSelectDefaults();
|
|
13
|
+
const locale = providedLocale ?? defaults.locale ?? 'de';
|
|
14
|
+
const searchable = providedSearchable ?? defaults.searchable ?? true;
|
|
15
|
+
const nonce = providedNonce ?? defaults.nonce;
|
|
16
|
+
const classNames = { ...defaults.classNames, ...providedClassNames };
|
|
17
|
+
const messages = { ...defaults.messages, ...providedMessages };
|
|
11
18
|
const logic = useSelectLogic({
|
|
12
19
|
id,
|
|
13
20
|
options,
|
|
@@ -17,15 +24,16 @@ export default function SelectView({ id, name, options, selectedValues, formEntr
|
|
|
17
24
|
externalError,
|
|
18
25
|
disabled,
|
|
19
26
|
readOnly,
|
|
27
|
+
searchable,
|
|
20
28
|
triggerRef,
|
|
21
29
|
minSelection,
|
|
22
30
|
maxSelection,
|
|
23
31
|
locale,
|
|
24
|
-
messages
|
|
32
|
+
messages,
|
|
25
33
|
isOptionEqualToValue: isOptionEqualToValueProp,
|
|
26
34
|
onSelectValue,
|
|
27
35
|
});
|
|
28
|
-
const { triggerId, labelId, descriptionId, errorId, messages, open, searchValue, filteredOptions, selectedEntries, selectedRadixValue, hasError, resolvedError, isOptionEqualToValue, } = logic.state;
|
|
36
|
+
const { triggerId, labelId, descriptionId, errorId, messages: resolvedMessages, open, searchValue, filteredOptions, selectedEntries, selectedRadixValue, hasError, resolvedError, isOptionEqualToValue, } = logic.state;
|
|
29
37
|
const { trigger, validationInput, searchInput } = logic.ref;
|
|
30
38
|
const { handleInvalid, handleValueChange, handleOpenChange, handleContentKeyDownCapture, setSearchValue, } = logic.handler;
|
|
31
39
|
const { shouldKeepOpen } = logic.setter;
|
|
@@ -34,13 +42,13 @@ export default function SelectView({ id, name, options, selectedValues, formEntr
|
|
|
34
42
|
? descriptionId
|
|
35
43
|
: undefined, hasError ? errorId : undefined);
|
|
36
44
|
const labelledBy = mergeAriaIds(ariaLabelledBy, label !== undefined && label !== null ? labelId : undefined);
|
|
37
|
-
return (_jsxs(SelectPrimitive.Root, { open: open, onOpenChange: handleOpenChange, value: selectedRadixValue, onValueChange: handleValueChange, children: [_jsxs("div", { className:
|
|
45
|
+
return (_jsxs(SelectPrimitive.Root, { open: open, onOpenChange: handleOpenChange, value: selectedRadixValue, onValueChange: handleValueChange, children: [_jsxs("div", { className: `group relative ${classNames.root || ''}`, children: [label !== undefined && label !== null && (_jsx("label", { id: labelId, htmlFor: triggerId, className: `mb-1 block text-sm font-medium text-select-foreground ${classNames.label || ''}`, children: label })), _jsx("input", { ref: validationInput, name: name, value: formEntries[0]?.value ?? '', onChange: () => undefined, onInvalid: handleInvalid, required: required &&
|
|
38
46
|
selectedValues.length === 0 &&
|
|
39
47
|
!disabled &&
|
|
40
48
|
externalError === undefined, disabled: disabled, readOnly: readOnly, tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute left-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0" }), multiple &&
|
|
41
49
|
formEntries
|
|
42
50
|
.slice(1)
|
|
43
|
-
.map((formEntry) => (_jsx("input", { type: "hidden", name: name, value: formEntry.value, disabled: disabled, readOnly: readOnly }, formEntry.key))), hasLeftIcon && (_jsx("div", { className: "absolute left-
|
|
51
|
+
.map((formEntry) => (_jsx("input", { type: "hidden", name: name, value: formEntry.value, disabled: disabled, readOnly: readOnly }, formEntry.key))), hasLeftIcon && (_jsx("div", { className: "absolute left-3 top-1/2 z-10 -translate-y-1/2 text-select-muted", children: hasError ? (_jsx(CustomTooltip, { content: resolvedError || '', side: "bottom", children: _jsx(AlertCircle, { className: "h-4 w-4 text-red-500" }) })) : (_jsx("span", { className: "pointer-events-none flex items-center transition-colors group-focus-within:text-primary [&>svg]:h-4 [&>svg]:w-4", children: icon })) })), _jsxs(SelectPrimitive.Trigger, { ref: trigger, id: triggerId, disabled: disabled, onBlur: onBlur, ...ariaProps, "aria-invalid": hasError || ariaProps['aria-invalid'] || undefined, "aria-required": disabled
|
|
44
52
|
? undefined
|
|
45
53
|
: externalError === undefined
|
|
46
54
|
? required ||
|
|
@@ -59,13 +67,14 @@ export default function SelectView({ id, name, options, selectedValues, formEntr
|
|
|
59
67
|
event.key === 'ArrowUp')) {
|
|
60
68
|
event.preventDefault();
|
|
61
69
|
}
|
|
62
|
-
}, className: `
|
|
63
|
-
? 'border-red-500 focus
|
|
64
|
-
: 'border-border
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
70
|
+
}, className: `box-border flex h-12 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-xl border bg-select-control pr-9 text-left text-sm font-medium tracking-normal normal-case text-select-foreground outline-none transition-[border-color,box-shadow,background-color] hover:border-select-border-strong focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none ${hasLeftIcon ? 'pl-9' : 'pl-3'} ${hasError
|
|
71
|
+
? 'border-red-500 focus-visible:ring-red-500/20 data-[state=open]:border-red-500'
|
|
72
|
+
: 'border-select-border focus-visible:border-select-accent focus-visible:ring-select-accent/20 data-[state=open]:border-select-accent'} ${classNames.trigger || ''} ${className || ''}`, children: [_jsx("span", { className: "min-w-0 flex-1 text-left", children: selectedEntries.length > 0 ? (_jsx("span", { className: "flex min-w-0 flex-col gap-0.5", children: renderValue ? (renderValue(selectedEntries.map(({ option }) => option))) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate leading-5", children: selectedEntries
|
|
73
|
+
.map(({ option }) => option.label)
|
|
74
|
+
.join(', ') }), selectedEntries.length === 1 &&
|
|
75
|
+
selectedEntries[0].option
|
|
76
|
+
.subOption && (_jsx("span", { className: "truncate text-xs leading-4 text-select-muted", children: selectedEntries[0]
|
|
77
|
+
.option.subOption }))] })) })) : (_jsx(SelectPrimitive.Value, { placeholder: placeholder })) }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-select-muted" }) })] })] }), description !== undefined && description !== null && (_jsx("div", { id: descriptionId, className: `mt-1 text-xs text-select-muted ${classNames.description || ''}`, children: description })), hasError && (_jsx("span", { id: errorId, className: "sr-only", "aria-live": "polite", children: resolvedError })), _jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { position: "popper", sideOffset: 4, onKeyDownCapture: handleContentKeyDownCapture, className: `z-9998 w-(--radix-select-trigger-width) min-w-45 overflow-hidden rounded-xl border border-select-border bg-select-surface text-select-foreground shadow-xl motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ${classNames.content || ''}`, children: [searchable && (_jsx("div", { className: "border-b border-select-border p-2", children: _jsx("input", { ref: searchInput, "aria-label": resolvedMessages.searchOptions, value: searchValue, onChange: (event) => setSearchValue(event.target.value), onPointerDownCapture: (event) => event.stopPropagation(), onKeyDownCapture: (event) => {
|
|
69
78
|
if (event.key !== 'Escape') {
|
|
70
79
|
event.stopPropagation();
|
|
71
80
|
}
|
|
@@ -73,7 +82,7 @@ export default function SelectView({ id, name, options, selectedValues, formEntr
|
|
|
73
82
|
if (event.key !== 'Escape') {
|
|
74
83
|
event.stopPropagation();
|
|
75
84
|
}
|
|
76
|
-
}, placeholder:
|
|
85
|
+
}, placeholder: resolvedMessages.searchPlaceholder, className: `h-10 w-full rounded-lg border border-select-border bg-select-control px-3 text-sm font-normal tracking-normal normal-case text-select-foreground placeholder:text-select-muted outline-none focus-visible:border-select-accent focus-visible:ring-2 focus-visible:ring-select-accent/20 ${classNames.search || ''}` }) })), _jsx("div", { className: "rentnerselect-scrollbar max-h-[min(var(--radix-select-content-available-height),16rem)] overflow-y-scroll scrollbar-gutter-stable", children: _jsx(SelectPrimitive.Viewport, { nonce: nonce, className: `p-1.5 ${classNames.viewport || ''}`, children: filteredOptions.length > 0 ? (filteredOptions.map(({ option, radixValue }) => (_jsxs(SelectPrimitive.Item, { value: radixValue, textValue: option.label, disabled: option.disabled, onPointerDown: () => {
|
|
77
86
|
if (multiple) {
|
|
78
87
|
shouldKeepOpen.current = true;
|
|
79
88
|
}
|
|
@@ -83,8 +92,13 @@ export default function SelectView({ id, name, options, selectedValues, formEntr
|
|
|
83
92
|
event.key === ' ')) {
|
|
84
93
|
shouldKeepOpen.current = true;
|
|
85
94
|
}
|
|
86
|
-
}, className:
|
|
87
|
-
|
|
88
|
-
|
|
95
|
+
}, className: `relative flex min-h-11 w-full cursor-pointer select-none items-center rounded-lg py-2 pl-9 pr-3 text-sm font-medium tracking-normal normal-case text-select-foreground outline-none transition-colors data-[highlighted]:bg-select-hover data-[highlighted]:text-select-foreground data-[state=checked]:bg-select-hover data-disabled:cursor-not-allowed data-disabled:opacity-40 ${classNames.option || ''}`, children: [_jsx("span", { className: "absolute left-3 flex h-3.5 w-3.5 items-center justify-center", children: multiple ? (selectedValues.some((value) => isOptionEqualToValue(option.value, value)) && (_jsx(Check, { className: "h-4 w-4" }))) : (_jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) })) }), _jsx(SelectPrimitive.ItemText, { children: renderOption ? (renderOption(option, {
|
|
96
|
+
selected: selectedValues.some((value) => isOptionEqualToValue(option.value, value)),
|
|
97
|
+
disabled: option.disabled ??
|
|
98
|
+
false,
|
|
99
|
+
})) : (_jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "truncate leading-5", children: option.label }), option.subOption && (_jsx("span", { className: "truncate text-xs leading-4 text-select-muted", children: option.subOption }))] })) })] }, radixValue)))) : (_jsx("div", { className: `relative flex w-full select-none items-center rounded-lg py-2 pl-9 pr-3 text-sm text-select-muted ${classNames.empty || ''}`, children: searchable && searchValue.trim()
|
|
100
|
+
? resolvedMessages.noResults
|
|
101
|
+
: fallbackOption ||
|
|
102
|
+
resolvedMessages.noOptions })) }) })] }) })] }));
|
|
89
103
|
}
|
|
90
104
|
//# sourceMappingURL=SelectView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectView.js","sourceRoot":"","sources":["../../src/Components/SelectView.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,cAAc,MAAM,6BAA6B,CAAA;AAaxD,SAAS,YAAY,CAAC,GAAG,MAAiC;IACtD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CACtB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CACvD,CAAA;IAED,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAA;AACnD,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAS,EACvC,EAAE,EACF,IAAI,EACJ,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EAAE,aAAa,EACpB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,UAAU,EACV,IAAI,EACJ,WAAW,EACX,SAAS,EACT,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,YAAY,EACZ,YAAY,EACZ,MAAM,
|
|
1
|
+
{"version":3,"file":"SelectView.js","sourceRoot":"","sources":["../../src/Components/SelectView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ export interface UseSelectLogicOptions<TValue> {
|
|
|
11
11
|
externalError?: string | null;
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
readOnly?: boolean;
|
|
14
|
+
searchable?: boolean;
|
|
14
15
|
triggerRef?: Ref<HTMLButtonElement>;
|
|
15
16
|
minSelection?: number;
|
|
16
17
|
maxSelection?: number;
|
|
@@ -19,7 +20,7 @@ export interface UseSelectLogicOptions<TValue> {
|
|
|
19
20
|
isOptionEqualToValue?: (optionValue: TValue, value: TValue) => boolean;
|
|
20
21
|
onSelectValue: (value: TValue) => void;
|
|
21
22
|
}
|
|
22
|
-
export default function useSelectLogic<TValue>({ id, options, selectedValues, multiple, required, externalError, disabled, readOnly, triggerRef, minSelection, maxSelection, locale, messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, onSelectValue, }: UseSelectLogicOptions<TValue>): {
|
|
23
|
+
export default function useSelectLogic<TValue>({ id, options, selectedValues, multiple, required, externalError, disabled, readOnly, searchable, triggerRef, minSelection, maxSelection, locale, messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, onSelectValue, }: UseSelectLogicOptions<TValue>): {
|
|
23
24
|
ref: {
|
|
24
25
|
trigger: (node: HTMLButtonElement | null) => void;
|
|
25
26
|
searchInput: import("react").RefObject<HTMLInputElement | null>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelect.logic.d.ts","sourceRoot":"","sources":["../../src/Hooks/useSelect.logic.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAEH,KAAK,YAAY,EACjB,KAAK,cAAc,EACtB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,WAAW,qBAAqB,CAAC,MAAM;IACzC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;IACtC,cAAc,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACnC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IAClC,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACtE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,MAAM,EAAE,EAC3C,EAAE,EACF,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAgB,EAChB,aAAa,EACb,QAAgB,EAChB,QAAgB,EAChB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,MAAa,EACb,QAAQ,EAAE,gBAAgB,EAC1B,oBAAoB,EAAE,wBAAwB,EAC9C,aAAa,GAChB,EAAE,qBAAqB,CAAC,MAAM,CAAC;;
|
|
1
|
+
{"version":3,"file":"useSelect.logic.d.ts","sourceRoot":"","sources":["../../src/Hooks/useSelect.logic.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,EAEH,KAAK,YAAY,EACjB,KAAK,cAAc,EACtB,MAAM,YAAY,CAAA;AACnB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,WAAW,qBAAqB,CAAC,MAAM;IACzC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;IACtC,cAAc,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACnC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IAClC,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACtE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,MAAM,EAAE,EAC3C,EAAE,EACF,OAAO,EACP,cAAc,EACd,QAAQ,EACR,QAAgB,EAChB,aAAa,EACb,QAAgB,EAChB,QAAgB,EAChB,UAAiB,EACjB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,MAAa,EACb,QAAQ,EAAE,gBAAgB,EAC1B,oBAAoB,EAAE,wBAAwB,EAC9C,aAAa,GAChB,EAAE,qBAAqB,CAAC,MAAM,CAAC;;QAkNpB,OAAO,SAvHJ,iBAAiB,GAAG,IAAI;QAwH3B,WAAW;QACX,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAvEO,YAAY,CAAC,gBAAgB,CAAC;4CAMjB,MAAM;qCAUb,OAAO;6CAcC,aAAa,CAAC,cAAc,CAAC;;;;;;;;;EA0E5E;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
|
|
2
2
|
import { resolveSelectMessages, } from '../i18n.js';
|
|
3
|
-
export default function useSelectLogic({ id, options, selectedValues, multiple, required = false, externalError, disabled = false, readOnly = false, triggerRef, minSelection, maxSelection, locale = 'de', messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, onSelectValue, }) {
|
|
3
|
+
export default function useSelectLogic({ id, options, selectedValues, multiple, required = false, externalError, disabled = false, readOnly = false, searchable = true, triggerRef, minSelection, maxSelection, locale = 'de', messages: providedMessages, isOptionEqualToValue: isOptionEqualToValueProp, onSelectValue, }) {
|
|
4
4
|
const messages = resolveSelectMessages(locale, providedMessages);
|
|
5
5
|
const [open, setOpen] = useState(false);
|
|
6
6
|
const interactionDisabled = disabled || readOnly;
|
|
@@ -22,7 +22,9 @@ export default function useSelectLogic({ id, options, selectedValues, multiple,
|
|
|
22
22
|
radixValue: `option-${index}`,
|
|
23
23
|
})), [options]);
|
|
24
24
|
const filteredOptions = useMemo(() => {
|
|
25
|
-
const normalizedSearch = searchValue
|
|
25
|
+
const normalizedSearch = (searchable ? searchValue : '')
|
|
26
|
+
.trim()
|
|
27
|
+
.toLowerCase();
|
|
26
28
|
if (!normalizedSearch)
|
|
27
29
|
return optionEntries;
|
|
28
30
|
return optionEntries.filter(({ option }) => {
|
|
@@ -33,7 +35,7 @@ export default function useSelectLogic({ id, options, selectedValues, multiple,
|
|
|
33
35
|
optionValue.includes(normalizedSearch) ||
|
|
34
36
|
subOption.includes(normalizedSearch));
|
|
35
37
|
});
|
|
36
|
-
}, [optionEntries, searchValue]);
|
|
38
|
+
}, [optionEntries, searchValue, searchable]);
|
|
37
39
|
const selectedEntries = useMemo(() => optionEntries.filter(({ option }) => selectedValues.some((value) => isOptionEqualToValue(option.value, value))), [isOptionEqualToValue, optionEntries, selectedValues]);
|
|
38
40
|
const selectedRadixValue = multiple
|
|
39
41
|
? ''
|
|
@@ -71,9 +73,11 @@ export default function useSelectLogic({ id, options, selectedValues, multiple,
|
|
|
71
73
|
}, [triggerRef]);
|
|
72
74
|
useImperativeHandle(typeof triggerRef === 'object' ? triggerRef : null, () => internalTriggerRef.current);
|
|
73
75
|
const focusSearchInput = useCallback(() => {
|
|
76
|
+
if (!searchable)
|
|
77
|
+
return;
|
|
74
78
|
requestAnimationFrame(() => searchInputRef.current?.focus());
|
|
75
79
|
window.setTimeout(() => searchInputRef.current?.focus(), 0);
|
|
76
|
-
}, []);
|
|
80
|
+
}, [searchable]);
|
|
77
81
|
useEffect(() => {
|
|
78
82
|
if (open)
|
|
79
83
|
focusSearchInput();
|
|
@@ -131,6 +135,8 @@ export default function useSelectLogic({ id, options, selectedValues, multiple,
|
|
|
131
135
|
setSearchValue('');
|
|
132
136
|
}
|
|
133
137
|
function handleContentKeyDownCapture(event) {
|
|
138
|
+
if (!searchable)
|
|
139
|
+
return;
|
|
134
140
|
if (event.target === searchInputRef.current) {
|
|
135
141
|
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
|
|
136
142
|
const focusableOptions = Array.from(event.currentTarget.querySelectorAll('[role="option"]:not([data-disabled])'));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelect.logic.js","sourceRoot":"","sources":["../../src/Hooks/useSelect.logic.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,WAAW,EACX,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EACH,qBAAqB,GAGxB,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"useSelect.logic.js","sourceRoot":"","sources":["../../src/Hooks/useSelect.logic.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { SelectLocale, SelectMessages } from './i18n.js';
|
|
3
|
+
import type { SelectClassNames } from './types.js';
|
|
4
|
+
export interface SelectProviderProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
locale?: SelectLocale;
|
|
7
|
+
messages?: Partial<SelectMessages>;
|
|
8
|
+
classNames?: SelectClassNames;
|
|
9
|
+
searchable?: boolean;
|
|
10
|
+
nonce?: string;
|
|
11
|
+
}
|
|
12
|
+
type SelectDefaults = Omit<SelectProviderProps, 'children'>;
|
|
13
|
+
export declare function SelectProvider({ children, ...defaults }: SelectProviderProps): import("react").JSX.Element;
|
|
14
|
+
export declare function useSelectDefaults(): SelectDefaults;
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=SelectProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectProvider.d.ts","sourceRoot":"","sources":["../src/SelectProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;IAClC,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,cAAc,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAA;AAI3D,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,EAAE,mBAAmB,+BAM5E;AAED,wBAAgB,iBAAiB,IAAI,cAAc,CAElD"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
|
+
const SelectContext = createContext(null);
|
|
4
|
+
export function SelectProvider({ children, ...defaults }) {
|
|
5
|
+
return (_jsx(SelectContext.Provider, { value: defaults, children: children }));
|
|
6
|
+
}
|
|
7
|
+
export function useSelectDefaults() {
|
|
8
|
+
return useContext(SelectContext) ?? {};
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=SelectProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectProvider.js","sourceRoot":"","sources":["../src/SelectProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAgBjD,MAAM,aAAa,GAAG,aAAa,CAAwB,IAAI,CAAC,CAAA;AAEhE,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAuB;IACzE,OAAO,CACH,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAClC,QAAQ,GACY,CAC5B,CAAA;AACL,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;AAC1C,CAAC"}
|
package/dist/i18n.d.ts
CHANGED
package/dist/i18n.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpD,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,aAAa,EAAE,MAAM,CAAA;IACrB,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CACpB;AA0CD,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAKrE,CAAA;AAED,wBAAgB,qBAAqB,CACjC,MAAM,GAAE,YAAmB,EAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GACnC,cAAc,CAKhB"}
|
package/dist/i18n.js
CHANGED
|
@@ -16,9 +16,29 @@ const englishMessages = {
|
|
|
16
16
|
noResults: 'No results',
|
|
17
17
|
noOptions: 'No options',
|
|
18
18
|
};
|
|
19
|
+
const spanishMessages = {
|
|
20
|
+
required: 'Este campo es obligatorio',
|
|
21
|
+
minSelection: (count) => `Selecciona al menos ${count} opciones`,
|
|
22
|
+
maxSelection: (count) => `Selecciona como máximo ${count} opciones`,
|
|
23
|
+
searchOptions: 'Buscar opciones',
|
|
24
|
+
searchPlaceholder: 'Buscar…',
|
|
25
|
+
noResults: 'Sin resultados',
|
|
26
|
+
noOptions: 'No hay opciones',
|
|
27
|
+
};
|
|
28
|
+
const frenchMessages = {
|
|
29
|
+
required: 'Ce champ est obligatoire',
|
|
30
|
+
minSelection: (count) => `Sélectionnez au moins ${count} options`,
|
|
31
|
+
maxSelection: (count) => `Sélectionnez au maximum ${count} options`,
|
|
32
|
+
searchOptions: 'Rechercher des options',
|
|
33
|
+
searchPlaceholder: 'Rechercher…',
|
|
34
|
+
noResults: 'Aucun résultat',
|
|
35
|
+
noOptions: 'Aucune option',
|
|
36
|
+
};
|
|
19
37
|
export const selectMessageCatalog = {
|
|
20
38
|
de: germanMessages,
|
|
21
39
|
en: englishMessages,
|
|
40
|
+
es: spanishMessages,
|
|
41
|
+
fr: frenchMessages,
|
|
22
42
|
};
|
|
23
43
|
export function resolveSelectMessages(locale = 'de', messages) {
|
|
24
44
|
return {
|
package/dist/i18n.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAYA,MAAM,cAAc,GAAmB;IACnC,QAAQ,EAAE,8BAA8B;IACxC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,KAAK,qBAAqB;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,KAAK,qBAAqB;IAC9D,aAAa,EAAE,iBAAiB;IAChC,iBAAiB,EAAE,SAAS;IAC5B,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,gBAAgB;CAC9B,CAAA;AAED,MAAM,eAAe,GAAmB;IACpC,QAAQ,EAAE,wBAAwB;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,KAAK,UAAU;IAC3D,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,KAAK,UAAU;IAC1D,aAAa,EAAE,gBAAgB;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;CAC1B,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,eAAe;
|
|
1
|
+
{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAYA,MAAM,cAAc,GAAmB;IACnC,QAAQ,EAAE,8BAA8B;IACxC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,KAAK,qBAAqB;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,KAAK,qBAAqB;IAC9D,aAAa,EAAE,iBAAiB;IAChC,iBAAiB,EAAE,SAAS;IAC5B,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,gBAAgB;CAC9B,CAAA;AAED,MAAM,eAAe,GAAmB;IACpC,QAAQ,EAAE,wBAAwB;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,KAAK,UAAU;IAC3D,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,KAAK,UAAU;IAC1D,aAAa,EAAE,gBAAgB;IAC/B,iBAAiB,EAAE,SAAS;IAC5B,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;CAC1B,CAAA;AAED,MAAM,eAAe,GAAmB;IACpC,QAAQ,EAAE,2BAA2B;IACrC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAuB,KAAK,WAAW;IAChE,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,0BAA0B,KAAK,WAAW;IACnE,aAAa,EAAE,iBAAiB;IAChC,iBAAiB,EAAE,SAAS;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,SAAS,EAAE,iBAAiB;CAC/B,CAAA;AAED,MAAM,cAAc,GAAmB;IACnC,QAAQ,EAAE,0BAA0B;IACpC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,yBAAyB,KAAK,UAAU;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,2BAA2B,KAAK,UAAU;IACnE,aAAa,EAAE,wBAAwB;IACvC,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,gBAAgB;IAC3B,SAAS,EAAE,eAAe;CAC7B,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,EAAE,EAAE,cAAc;IAClB,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,cAAc;CACrB,CAAA;AAED,MAAM,UAAU,qBAAqB,CACjC,MAAM,GAAiB,IAAI,EAC3B,QAAkC;IAElC,OAAO;QACH,GAAG,oBAAoB,CAAC,MAAM,CAAC;QAC/B,GAAG,QAAQ;KACd,CAAA;AACL,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export { CustomSelect } from './Select.js';
|
|
2
|
+
export { SelectProvider } from './SelectProvider.js';
|
|
2
3
|
export { resolveSelectMessages, selectMessageCatalog } from './i18n.js';
|
|
3
|
-
export type { CustomSelectProps, MultipleSelectProps, Option, SingleSelectProps, } from './types.js';
|
|
4
|
+
export type { CustomSelectProps, MultipleSelectProps, Option, SelectClassNames, SelectOptionState, SingleSelectProps, } from './types.js';
|
|
5
|
+
export type { SelectProviderProps } from './SelectProvider.js';
|
|
4
6
|
export type { SelectLocale, SelectMessages } from './types.js';
|
|
5
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AACvE,YAAY,EACR,iBAAiB,EACjB,mBAAmB,EACnB,MAAM,EACN,iBAAiB,GACpB,MAAM,YAAY,CAAA;AACnB,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AACvE,YAAY,EACR,iBAAiB,EACjB,mBAAmB,EACnB,MAAM,EACN,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GACpB,MAAM,YAAY,CAAA;AACnB,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,9 +1,25 @@
|
|
|
1
|
-
import type { AriaAttributes, ReactNode, Ref } from 'react';
|
|
1
|
+
import type { AriaAttributes, FocusEventHandler, ReactNode, Ref } from 'react';
|
|
2
2
|
import type { SelectLocale, SelectMessages } from './i18n.js';
|
|
3
3
|
export interface Option<TValue = string> {
|
|
4
4
|
value: TValue;
|
|
5
5
|
label: string;
|
|
6
6
|
subOption?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface SelectClassNames {
|
|
10
|
+
root?: string;
|
|
11
|
+
trigger?: string;
|
|
12
|
+
content?: string;
|
|
13
|
+
search?: string;
|
|
14
|
+
viewport?: string;
|
|
15
|
+
option?: string;
|
|
16
|
+
empty?: string;
|
|
17
|
+
label?: string;
|
|
18
|
+
description?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface SelectOptionState {
|
|
21
|
+
selected: boolean;
|
|
22
|
+
disabled: boolean;
|
|
7
23
|
}
|
|
8
24
|
interface SharedCustomSelectProps<TValue> extends AriaAttributes {
|
|
9
25
|
id?: string;
|
|
@@ -16,9 +32,15 @@ interface SharedCustomSelectProps<TValue> extends AriaAttributes {
|
|
|
16
32
|
disabled?: boolean;
|
|
17
33
|
readOnly?: boolean;
|
|
18
34
|
triggerRef?: Ref<HTMLButtonElement>;
|
|
35
|
+
onBlur?: FocusEventHandler<HTMLButtonElement>;
|
|
19
36
|
icon?: ReactNode;
|
|
20
37
|
placeholder?: string;
|
|
21
38
|
className?: string;
|
|
39
|
+
classNames?: SelectClassNames;
|
|
40
|
+
searchable?: boolean;
|
|
41
|
+
nonce?: string;
|
|
42
|
+
renderOption?: (option: Option<TValue>, state: SelectOptionState) => ReactNode;
|
|
43
|
+
renderValue?: (options: ReadonlyArray<Option<TValue>>) => ReactNode;
|
|
22
44
|
fallbackOption?: string;
|
|
23
45
|
minSelection?: number;
|
|
24
46
|
maxSelection?: number;
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/tailwind.css
CHANGED
|
@@ -11,4 +11,23 @@
|
|
|
11
11
|
--color-border-dark: #2e323b;
|
|
12
12
|
--color-secondary-text: #9ca3af;
|
|
13
13
|
--color-muted-foreground: #9ca3af;
|
|
14
|
+
--color-select-control: #22252b;
|
|
15
|
+
--color-select-surface: #181a1f;
|
|
16
|
+
--color-select-hover: #2b3038;
|
|
17
|
+
--color-select-border: #2e323b;
|
|
18
|
+
--color-select-border-strong: #515965;
|
|
19
|
+
--color-select-foreground: #e5e7eb;
|
|
20
|
+
--color-select-muted: #9ca3af;
|
|
21
|
+
--color-select-accent: #8586f4;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Radix normally injects these rules. Shipping them here also works with strict CSP. */
|
|
25
|
+
[data-radix-select-viewport] {
|
|
26
|
+
scrollbar-width: none;
|
|
27
|
+
-ms-overflow-style: none;
|
|
28
|
+
-webkit-overflow-scrolling: touch;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
[data-radix-select-viewport]::-webkit-scrollbar {
|
|
32
|
+
display: none;
|
|
14
33
|
}
|