@rentnerkev/select 2.0.0 → 3.1.0

package/README.md

@@ -114,7 +114,7 @@ export function RegionSelect() {
 
 When `name` is set, each selected array item is submitted under the same field name. Read all values with `new FormData(form).getAll('regions')`.
 
-The legacy combination of `multiple`, a comma-separated string value, and a string callback remains compatible in version 1 but is deprecated. It cannot represent values containing commas unambiguously and will be removed in version 2.
+Multiple selection uses a typed array value and submits one native form entry per selected option. Values containing commas remain unambiguous.
 
 ## Forms and accessibility
 
@@ -154,7 +154,7 @@ export function DepartmentForm() {
 
 ## Localization
 
-German messages remain the default for backward compatibility. Set `locale="en"` for the complete English catalog, or override individual messages with a typed `Partial<SelectMessages>`. The catalog and resolver are available as `selectMessageCatalog` and `resolveSelectMessages`.
+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`.
 
 ```tsx
 import { CustomSelect, type SelectMessages } from '@rentnerkev/select'
@@ -181,38 +181,90 @@ export function LocalizedSelect() {
 }
 ```
 
+## Project-wide defaults
+
+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.
+
+```tsx
+import { CustomSelect, SelectProvider } from '@rentnerkev/select'
+
+export function App({ cspNonce }: { cspNonce?: string }) {
+    return (
+        <SelectProvider
+            locale="en"
+            searchable={false}
+            nonce={cspNonce}
+            classNames={{ trigger: 'w-full', content: 'shadow-xl' }}
+        >
+            <CustomSelect
+                value=""
+                onValueChange={() => undefined}
+                options={[{ value: 'one', label: 'One' }]}
+                placeholder="Choose"
+            />
+        </SelectProvider>
+    )
+}
+```
+
+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.
+
+## Custom option content
+
+`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.
+
+```tsx
+<CustomSelect
+    value={language}
+    onValueChange={setLanguage}
+    options={[
+        { value: 'de', label: 'Deutsch' },
+        { value: 'en', label: 'English', disabled: true },
+    ]}
+    renderOption={(option) => <span>{option.label}</span>}
+    renderValue={(selected) => <span>{selected[0]?.label}</span>}
+    onBlur={handleBlur}
+/>
+```
+
 ## API
 
 ### `CustomSelect` props
 
-| Prop                   | Type                                                     | Description                                                            |
-| ---------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------- |
-| `id`                   | `string`                                                 | ID for the visible trigger and associated labels.                      |
-| `name`                 | `string`                                                 | Native form field name.                                                |
-| `value`                | `TValue \| null \| undefined` or `ReadonlyArray<TValue>` | Controlled single or multiple value.                                   |
-| `onValueChange`        | `(value: TValue) => void` or `(value: TValue[]) => void` | Typed callback for the selected mode.                                  |
-| `options`              | `ReadonlyArray<Option<TValue>>`                          | Available options.                                                     |
-| `required`             | `boolean`                                                | Enables required-field validation. Defaults to `false`.                |
-| `label`                | `ReactNode`                                              | Visible label linked to the trigger.                                   |
-| `description`          | `ReactNode`                                              | Supporting text linked through `aria-describedby`.                     |
-| `error`                | `string \| null`                                         | External validation message; `null` clears external and native errors. |
-| `disabled`             | `boolean`                                                | Disables interaction and validation.                                   |
-| `readOnly`             | `boolean`                                                | Prevents changes while retaining the form value.                       |
-| `className`            | `string`                                                 | Additional Tailwind classes for the visible trigger.                   |
-| `placeholder`          | `string`                                                 | Text shown while no value is selected.                                 |
-| `icon`                 | `ReactNode`                                              | Icon rendered at the start of the trigger.                             |
-| `fallbackOption`       | `string`                                                 | Message shown when no options are available.                           |
-| `multiple`             | `true`                                                   | Enables array-based multiple selection.                                |
-| `minSelection`         | `number`                                                 | Minimum number of selected options.                                    |
-| `maxSelection`         | `number`                                                 | Maximum number of selected options.                                    |
-| `isOptionEqualToValue` | `(optionValue, value) => boolean`                        | Compares option and selected values.                                   |
-| `getFormValue`         | `(value: TValue) => string`                              | Serializes a value for native form submission.                         |
-| `locale`               | `'de' \| 'en'`                                           | Selects the default message catalog. Defaults to `'de'`.               |
-| `messages`             | `Partial<SelectMessages>`                                | Overrides individual messages and ARIA text.                           |
-| `aria-label`           | `string`                                                 | Accessible name for the visible trigger.                               |
-| `aria-labelledby`      | `string`                                                 | External accessible-label IDs.                                         |
-| `aria-describedby`     | `string`                                                 | External description IDs combined with internal text.                  |
-| `triggerRef`           | `Ref<HTMLButtonElement>`                                 | Ref for the visible, focusable trigger.                                |
+| Prop                   | Type                                                     | Description                                                                                        |
+| ---------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `id`                   | `string`                                                 | ID for the visible trigger and associated labels.                                                  |
+| `name`                 | `string`                                                 | Native form field name.                                                                            |
+| `value`                | `TValue \| null \| undefined` or `ReadonlyArray<TValue>` | Controlled single or multiple value.                                                               |
+| `onValueChange`        | `(value: TValue) => void` or `(value: TValue[]) => void` | Typed callback for the selected mode.                                                              |
+| `options`              | `ReadonlyArray<Option<TValue>>`                          | Available options.                                                                                 |
+| `required`             | `boolean`                                                | Enables required-field validation. Defaults to `false`.                                            |
+| `label`                | `ReactNode`                                              | Visible label linked to the trigger.                                                               |
+| `description`          | `ReactNode`                                              | Supporting text linked through `aria-describedby`.                                                 |
+| `error`                | `string \| null`                                         | External validation message; `null` clears external and native errors.                             |
+| `disabled`             | `boolean`                                                | Disables interaction and validation.                                                               |
+| `readOnly`             | `boolean`                                                | Prevents changes while retaining the form value.                                                   |
+| `className`            | `string`                                                 | Additional Tailwind classes for the visible trigger.                                               |
+| `classNames`           | `SelectClassNames`                                       | Classes for root, trigger, content, search, viewport, option, empty state, label, and description. |
+| `searchable`           | `boolean`                                                | Show the search field. Defaults to `true`.                                                         |
+| `nonce`                | `string`                                                 | CSP nonce for Radix's generated viewport style.                                                    |
+| `onBlur`               | `FocusEventHandler<HTMLButtonElement>`                   | Blur handler on the visible trigger.                                                               |
+| `renderOption`         | `(option, state) => ReactNode`                           | Custom content for each menu item; `state` includes selected/disabled.                             |
+| `renderValue`          | `(selectedOptions) => ReactNode`                         | Custom content for the closed trigger.                                                             |
+| `placeholder`          | `string`                                                 | Text shown while no value is selected.                                                             |
+| `icon`                 | `ReactNode`                                              | Icon rendered at the start of the trigger.                                                         |
+| `fallbackOption`       | `string`                                                 | Message shown when no options are available.                                                       |
+| `multiple`             | `true`                                                   | Enables array-based multiple selection.                                                            |
+| `minSelection`         | `number`                                                 | Minimum number of selected options.                                                                |
+| `maxSelection`         | `number`                                                 | Maximum number of selected options.                                                                |
+| `isOptionEqualToValue` | `(optionValue, value) => boolean`                        | Compares option and selected values.                                                               |
+| `getFormValue`         | `(value: TValue) => string`                              | Serializes a value for native form submission.                                                     |
+| `locale`               | `'de' \| 'en' \| 'es' \| 'fr'`                           | Selects the default message catalog. Defaults to `'de'`.                                           |
+| `messages`             | `Partial<SelectMessages>`                                | Overrides individual messages and ARIA text.                                                       |
+| `aria-label`           | `string`                                                 | Accessible name for the visible trigger.                                                           |
+| `aria-labelledby`      | `string`                                                 | External accessible-label IDs.                                                                     |
+| `aria-describedby`     | `string`                                                 | External description IDs combined with internal text.                                              |
+| `triggerRef`           | `Ref<HTMLButtonElement>`                                 | Ref for the visible, focusable trigger.                                                            |
 
 Additional React `aria-*` attributes are forwarded to the visible trigger.
 
@@ -223,6 +275,7 @@ interface Option<TValue = string> {
     value: TValue
     label: string
     subOption?: string
+    disabled?: boolean
 }
 ```
 
@@ -237,19 +290,32 @@ Import the package entry after Tailwind CSS in your application stylesheet:
 @import '@rentnerkev/select/tailwind.css';
 ```
 
-The package entry scans only the published JavaScript under `dist` and provides the shared theme tokens `primary`, `primary-hover`, `background-dark`, `surface-dark`, `input-dark`, `border-dark`, `secondary-text`, and `muted-foreground`. Override them with a later `@theme` block when needed.
+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.
+
+```css
+@theme inline {
+    --color-select-control: var(--app-input);
+    --color-select-surface: var(--app-panel);
+    --color-select-hover: var(--app-hover);
+    --color-select-border: var(--app-border);
+    --color-select-border-strong: var(--app-border-strong);
+    --color-select-foreground: var(--app-text);
+    --color-select-muted: var(--app-muted);
+    --color-select-accent: var(--app-accent);
+}
+```
 
 ## Public entry points
 
-| Entry point                       | Purpose                                        |
-| --------------------------------- | ---------------------------------------------- |
-| `@rentnerkev/select`              | Component, messages, and public types.         |
-| `@rentnerkev/select/select`       | `CustomSelect` component module.               |
-| `@rentnerkev/select/value`        | Value parsing, comparison, and toggle helpers. |
-| `@rentnerkev/select/messages`     | Locale catalog, resolver, and message types.   |
-| `@rentnerkev/select/types`        | Component and option types.                    |
-| `@rentnerkev/select/tailwind.css` | Tailwind source and shared theme tokens.       |
-| `@rentnerkev/select/package.json` | Package metadata.                              |
+| Entry point                       | Purpose                                      |
+| --------------------------------- | -------------------------------------------- |
+| `@rentnerkev/select`              | Component, messages, and public types.       |
+| `@rentnerkev/select/select`       | `CustomSelect` component module.             |
+| `@rentnerkev/select/value`        | Value comparison and toggle helpers.         |
+| `@rentnerkev/select/messages`     | Locale catalog, resolver, and message types. |
+| `@rentnerkev/select/types`        | Component and option types.                  |
+| `@rentnerkev/select/tailwind.css` | Tailwind source and shared theme tokens.     |
+| `@rentnerkev/select/package.json` | Package metadata.                            |
 
 ## Development
 

package/dist/Components/SelectView.d.ts

@@ -0,0 +1,12 @@
+import type { SingleSelectProps } from '../types.js';
+export type SelectViewProps<TValue> = Omit<SingleSelectProps<TValue>, 'value' | 'onValueChange' | 'multiple' | 'getFormValue'> & {
+    selectedValues: ReadonlyArray<TValue>;
+    formEntries: ReadonlyArray<{
+        key: string;
+        value: string;
+    }>;
+    multiple: boolean;
+    onSelectValue: (value: TValue) => void;
+};
+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;
+//# sourceMappingURL=SelectView.d.ts.map

package/dist/Components/SelectView.d.ts.map

@@ -0,0 +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"}

package/dist/Components/SelectView.js

@@ -0,0 +1,104 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CustomTooltip } from '@rentnerkev/tooltips';
+import { AlertCircle, Check, ChevronDown } from 'lucide-react';
+import { useSelectDefaults } from '../SelectProvider.js';
+import useSelectLogic from '../Hooks/useSelect.logic.js';
+function mergeAriaIds(...values) {
+    const ids = values.flatMap((value) => value?.split(/\s+/).filter(Boolean) ?? []);
+    return [...new Set(ids)].join(' ') || undefined;
+}
+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 }) {
+    const defaults = useSelectDefaults();
+    const locale = providedLocale ?? defaults.locale ?? 'de';
+    const searchable = providedSearchable ?? defaults.searchable ?? true;
+    const nonce = providedNonce ?? defaults.nonce;
+    const classNames = { ...defaults.classNames, ...providedClassNames };
+    const messages = { ...defaults.messages, ...providedMessages };
+    const logic = useSelectLogic({
+        id,
+        options,
+        selectedValues,
+        multiple,
+        required,
+        externalError,
+        disabled,
+        readOnly,
+        searchable,
+        triggerRef,
+        minSelection,
+        maxSelection,
+        locale,
+        messages,
+        isOptionEqualToValue: isOptionEqualToValueProp,
+        onSelectValue,
+    });
+    const { triggerId, labelId, descriptionId, errorId, messages: resolvedMessages, open, searchValue, filteredOptions, selectedEntries, selectedRadixValue, hasError, resolvedError, isOptionEqualToValue, } = logic.state;
+    const { trigger, validationInput, searchInput } = logic.ref;
+    const { handleInvalid, handleValueChange, handleOpenChange, handleContentKeyDownCapture, setSearchValue, } = logic.handler;
+    const { shouldKeepOpen } = logic.setter;
+    const hasLeftIcon = Boolean(icon || hasError);
+    const describedBy = mergeAriaIds(ariaDescribedBy, description !== undefined && description !== null
+        ? descriptionId
+        : undefined, hasError ? errorId : undefined);
+    const labelledBy = mergeAriaIds(ariaLabelledBy, label !== undefined && label !== null ? labelId : undefined);
+    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 &&
+                            selectedValues.length === 0 &&
+                            !disabled &&
+                            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 &&
+                        formEntries
+                            .slice(1)
+                            .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
+                            ? undefined
+                            : externalError === undefined
+                                ? required ||
+                                    ariaProps['aria-required'] ||
+                                    undefined
+                                : ariaProps['aria-required'], "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-errormessage": hasError ? errorId : ariaProps['aria-errormessage'], "aria-readonly": readOnly || ariaProps['aria-readonly'] || undefined, "aria-disabled": disabled || ariaProps['aria-disabled'] || undefined, onPointerDown: (event) => {
+                            if (readOnly) {
+                                event.preventDefault();
+                                event.currentTarget.focus();
+                            }
+                        }, onKeyDown: (event) => {
+                            if (readOnly &&
+                                (event.key === 'Enter' ||
+                                    event.key === ' ' ||
+                                    event.key === 'ArrowDown' ||
+                                    event.key === 'ArrowUp')) {
+                                event.preventDefault();
+                            }
+                        }, 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
+                            ? 'border-red-500 focus-visible:ring-red-500/20 data-[state=open]:border-red-500'
+                            : '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
+                                                    .map(({ option }) => option.label)
+                                                    .join(', ') }), selectedEntries.length === 1 &&
+                                                selectedEntries[0].option
+                                                    .subOption && (_jsx("span", { className: "truncate text-xs leading-4 text-select-muted", children: selectedEntries[0]
+                                                    .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) => {
+                                    if (event.key !== 'Escape') {
+                                        event.stopPropagation();
+                                    }
+                                }, onKeyDown: (event) => {
+                                    if (event.key !== 'Escape') {
+                                        event.stopPropagation();
+                                    }
+                                }, 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: () => {
+                                        if (multiple) {
+                                            shouldKeepOpen.current = true;
+                                        }
+                                    }, onKeyDown: (event) => {
+                                        if (multiple &&
+                                            (event.key === 'Enter' ||
+                                                event.key === ' ')) {
+                                            shouldKeepOpen.current = true;
+                                        }
+                                    }, 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, {
+                                                selected: selectedValues.some((value) => isOptionEqualToValue(option.value, value)),
+                                                disabled: option.disabled ??
+                                                    false,
+                                            })) : (_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()
+                                        ? resolvedMessages.noResults
+                                        : fallbackOption ||
+                                            resolvedMessages.noOptions })) }) })] }) })] }));
+}
+//# sourceMappingURL=SelectView.js.map

package/dist/Components/SelectView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectView.js","sourceRoot":"","sources":["../../src/Components/SelectView.tsx"],"names":[],"mappings":"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"}

package/dist/Hooks/useSelect.logic.d.ts

@@ -0,0 +1,70 @@
+import type { InvalidEvent, KeyboardEvent, Ref } from 'react';
+import { type SelectLocale, type SelectMessages } from '../i18n.js';
+import type { Option } from '../types.js';
+export interface UseSelectLogicOptions<TValue> {
+    id?: string;
+    name?: string;
+    options: ReadonlyArray<Option<TValue>>;
+    selectedValues: ReadonlyArray<TValue>;
+    multiple: boolean;
+    required?: boolean;
+    externalError?: string | null;
+    disabled?: boolean;
+    readOnly?: boolean;
+    searchable?: boolean;
+    triggerRef?: Ref<HTMLButtonElement>;
+    minSelection?: number;
+    maxSelection?: number;
+    locale?: SelectLocale;
+    messages?: Partial<SelectMessages>;
+    isOptionEqualToValue?: (optionValue: TValue, value: TValue) => boolean;
+    onSelectValue: (value: TValue) => void;
+}
+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>): {
+    ref: {
+        trigger: (node: HTMLButtonElement | null) => void;
+        searchInput: import("react").RefObject<HTMLInputElement | null>;
+        validationInput: import("react").RefObject<HTMLInputElement | null>;
+    };
+    state: {
+        messages: SelectMessages;
+        triggerId: string;
+        labelId: string;
+        descriptionId: string;
+        errorId: string;
+        open: boolean;
+        searchValue: string;
+        optionEntries: {
+            option: Option<TValue>;
+            radixValue: string;
+        }[];
+        filteredOptions: {
+            option: Option<TValue>;
+            radixValue: string;
+        }[];
+        selectedEntries: {
+            option: Option<TValue>;
+            radixValue: string;
+        }[];
+        selectedRadixValue: string;
+        hasError: boolean;
+        resolvedError: string | null;
+        hasLeftIcon: boolean;
+        isOptionEqualToValue: (value1: any, value2: any) => boolean;
+    };
+    handler: {
+        handleInvalid: (event: InvalidEvent<HTMLInputElement>) => void;
+        handleValueChange: (nextRadixValue: string) => void;
+        handleOpenChange: (nextOpen: boolean) => void;
+        handleContentKeyDownCapture: (event: KeyboardEvent<HTMLDivElement>) => void;
+        setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    };
+    setter: {
+        setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+        setIsTouched: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        shouldKeepOpen: import("react").RefObject<boolean>;
+    };
+};
+export type SelectLogic = ReturnType<typeof useSelectLogic>;
+//# sourceMappingURL=useSelect.logic.d.ts.map

package/dist/Hooks/useSelect.logic.d.ts.map

@@ -0,0 +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"}

package/dist/Hooks/useSelect.logic.js

@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { resolveSelectMessages, } from '../i18n.js';
+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, }) {
+    const messages = resolveSelectMessages(locale, providedMessages);
+    const [open, setOpen] = useState(false);
+    const interactionDisabled = disabled || readOnly;
+    const [previousInteractionDisabled, setPreviousInteractionDisabled] = useState(interactionDisabled);
+    const [searchValue, setSearchValue] = useState('');
+    const [isTouched, setIsTouched] = useState(false);
+    const searchInputRef = useRef(null);
+    const validationInputRef = useRef(null);
+    const internalTriggerRef = useRef(null);
+    const shouldKeepOpen = useRef(false);
+    const generatedId = useId();
+    const triggerId = id ?? `select-${generatedId}`;
+    const labelId = `${triggerId}-label`;
+    const descriptionId = `${triggerId}-description`;
+    const errorId = `${triggerId}-error`;
+    const isOptionEqualToValue = isOptionEqualToValueProp ?? Object.is;
+    const optionEntries = useMemo(() => options.map((option, index) => ({
+        option,
+        radixValue: `option-${index}`,
+    })), [options]);
+    const filteredOptions = useMemo(() => {
+        const normalizedSearch = (searchable ? searchValue : '')
+            .trim()
+            .toLowerCase();
+        if (!normalizedSearch)
+            return optionEntries;
+        return optionEntries.filter(({ option }) => {
+            const optionLabel = option.label.toLowerCase();
+            const optionValue = String(option.value).toLowerCase();
+            const subOption = option.subOption?.toLowerCase() || '';
+            return (optionLabel.includes(normalizedSearch) ||
+                optionValue.includes(normalizedSearch) ||
+                subOption.includes(normalizedSearch));
+        });
+    }, [optionEntries, searchValue, searchable]);
+    const selectedEntries = useMemo(() => optionEntries.filter(({ option }) => selectedValues.some((value) => isOptionEqualToValue(option.value, value))), [isOptionEqualToValue, optionEntries, selectedValues]);
+    const selectedRadixValue = multiple
+        ? ''
+        : (selectedEntries[0]?.radixValue ?? '');
+    const internalError = useMemo(() => {
+        if (required && selectedValues.length === 0)
+            return messages.required;
+        if (multiple &&
+            minSelection !== undefined &&
+            selectedValues.length < minSelection) {
+            return messages.minSelection(minSelection);
+        }
+        if (multiple &&
+            maxSelection !== undefined &&
+            selectedValues.length > maxSelection) {
+            return messages.maxSelection(maxSelection);
+        }
+        return null;
+    }, [
+        maxSelection,
+        messages,
+        minSelection,
+        multiple,
+        required,
+        selectedValues,
+    ]);
+    const resolvedError = externalError !== undefined ? externalError : internalError;
+    const hasError = externalError !== undefined
+        ? Boolean(resolvedError)
+        : isTouched && Boolean(resolvedError);
+    const setTriggerRef = useCallback((node) => {
+        internalTriggerRef.current = node;
+        if (typeof triggerRef === 'function')
+            triggerRef(node);
+    }, [triggerRef]);
+    useImperativeHandle(typeof triggerRef === 'object' ? triggerRef : null, () => internalTriggerRef.current);
+    const focusSearchInput = useCallback(() => {
+        if (!searchable)
+            return;
+        requestAnimationFrame(() => searchInputRef.current?.focus());
+        window.setTimeout(() => searchInputRef.current?.focus(), 0);
+    }, [searchable]);
+    useEffect(() => {
+        if (open)
+            focusSearchInput();
+    }, [focusSearchInput, open]);
+    if (previousInteractionDisabled !== interactionDisabled) {
+        setPreviousInteractionDisabled(interactionDisabled);
+        if (interactionDisabled && open) {
+            setOpen(false);
+        }
+    }
+    useEffect(() => {
+        validationInputRef.current?.setCustomValidity(disabled ? '' : resolvedError || '');
+    }, [disabled, resolvedError]);
+    useEffect(() => {
+        const input = validationInputRef.current;
+        const form = input?.form;
+        if (!input || !form)
+            return;
+        const currentInput = input;
+        function handleFormSubmit() {
+            if (currentInput.validity.valid)
+                setIsTouched(false);
+        }
+        form.addEventListener('submit', handleFormSubmit);
+        return () => form.removeEventListener('submit', handleFormSubmit);
+    }, []);
+    function handleInvalid(event) {
+        event.preventDefault();
+        setIsTouched(true);
+        internalTriggerRef.current?.focus();
+    }
+    function handleValueChange(nextRadixValue) {
+        if (disabled || readOnly)
+            return;
+        const entry = optionEntries.find(({ radixValue }) => radixValue === nextRadixValue);
+        if (!entry)
+            return;
+        if (!multiple)
+            setSearchValue('');
+        onSelectValue(entry.option.value);
+    }
+    function handleOpenChange(nextOpen) {
+        if (disabled || readOnly) {
+            setOpen(false);
+            return;
+        }
+        if (multiple && !nextOpen && shouldKeepOpen.current) {
+            shouldKeepOpen.current = false;
+            return;
+        }
+        setOpen(nextOpen);
+        if (nextOpen)
+            focusSearchInput();
+        else
+            setSearchValue('');
+    }
+    function handleContentKeyDownCapture(event) {
+        if (!searchable)
+            return;
+        if (event.target === searchInputRef.current) {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                const focusableOptions = Array.from(event.currentTarget.querySelectorAll('[role="option"]:not([data-disabled])'));
+                const option = event.key === 'ArrowDown'
+                    ? focusableOptions[0]
+                    : focusableOptions[focusableOptions.length - 1];
+                if (option) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    option.focus();
+                }
+            }
+            return;
+        }
+        if (event.ctrlKey ||
+            event.altKey ||
+            event.metaKey ||
+            event.key.length !== 1) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setSearchValue((current) => `${current}${event.key}`);
+        focusSearchInput();
+    }
+    return {
+        ref: {
+            trigger: setTriggerRef,
+            searchInput: searchInputRef,
+            validationInput: validationInputRef,
+        },
+        state: {
+            messages,
+            triggerId,
+            labelId,
+            descriptionId,
+            errorId,
+            open: open && !disabled && !readOnly,
+            searchValue,
+            optionEntries,
+            filteredOptions,
+            selectedEntries,
+            selectedRadixValue,
+            hasError,
+            resolvedError,
+            hasLeftIcon: Boolean(hasError),
+            isOptionEqualToValue,
+        },
+        handler: {
+            handleInvalid,
+            handleValueChange,
+            handleOpenChange,
+            handleContentKeyDownCapture,
+            setSearchValue,
+        },
+        setter: {
+            setOpen,
+            setSearchValue,
+            setIsTouched,
+            shouldKeepOpen,
+        },
+    };
+}
+//# sourceMappingURL=useSelect.logic.js.map