@tensor_1/react 2.31.0 → 2.33.0

package/dist/components/Select.d.ts

@@ -1,9 +1,73 @@
 import * as react from 'react';
-import { SelectHTMLAttributes } from 'react';
+import { SelectHTMLAttributes, ReactNode } from 'react';
+import { Placement } from '../overlay-position.js';
+import { SelectOption, SelectGroup } from '../select-model.js';
 
+/** Chrome strings of `Select`; `{count}` is replaced where noted. */
+interface SelectLabels {
+    /** Accessible name of the filter field when the Select has no label of its own. */
+    search: string;
+    /** Placeholder of the filter field. */
+    searchPlaceholder: string;
+    loading: string;
+    /** No options at all. */
+    empty: string;
+    /** A filter matched nothing. */
+    noMatches: string;
+    /** Async `loadOptions` failed. */
+    error: string;
+    retry: string;
+    /** Multi-select: clears every value. */
+    clear: string;
+    /** Multi-select on a phone: closes the sheet. */
+    done: string;
+    /** Multi-select trigger, spoken after the "+N". `{count}` = how many are selected. */
+    selectedCount: string;
+    /** Announced after filtering. `{count}`. */
+    results: string;
+}
 interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     size?: 'sm' | 'md';
+    /** The options as data, instead of `<option>` / `<optgroup>` children. */
+    options?: readonly (SelectOption | SelectGroup)[];
+    /**
+     * Called with the new value: a string, or every selected value with `multiple`. `option` is the
+     * option that was chosen or toggled. `onChange(e)` still fires as on a native select.
+     */
+    onValueChange?: (value: string | string[], option?: SelectOption) => void;
+    /** Shown while nothing is selected. Also makes "nothing" the starting value (and `required` checks it). */
+    placeholder?: string;
+    /** Marks the control invalid (`aria-invalid`), e.g. from your own validation. */
+    invalid?: boolean;
+    /** Shows and submits the value, but does not open. */
+    readOnly?: boolean;
+    /** A filter field at the top of the list. `'auto'` adds it for more than 12 options. Default `false`. */
+    searchable?: boolean | 'auto';
+    /**
+     * Load the options when the list opens (and, when `searchable`, as the filter changes). The
+     * previous request's `signal` is aborted when a newer one starts or the list closes. Pass the
+     * selected option in `options` so its label shows before the first load.
+     */
+    loadOptions?: (query: string, signal: AbortSignal) => Promise<readonly (SelectOption | SelectGroup)[]>;
+    /** Draw an option's content (the check mark for the selected state is drawn for you). */
+    renderOption?: (option: SelectOption, state: {
+        selected: boolean;
+        active: boolean;
+    }) => ReactNode;
+    /** Draw the trigger's content for the selected option(s). */
+    renderValue?: (selected: readonly SelectOption[]) => ReactNode;
+    /** Preferred side of the list. Default `'bottom-start'`; it flips when there is no room. */
+    placement?: Placement;
+    labels?: Partial<SelectLabels>;
 }
+/**
+ * A select that draws its own list (HAR-1572): the WAI-ARIA APG select-only combobox — focus
+ * stays on the trigger, `aria-activedescendant` marks the active option — in a top-layer popover
+ * placed with `useAnchoredPosition`, or a bottom sheet on a phone. A visually hidden native
+ * `<select>` carries `name`, `required`, `form`, `multiple` and the value, so `<option>` children,
+ * `onChange(e)` with `e.target.value`, FormData, `form.reset()`, `ref` and react-hook-form keep
+ * working; `ref` points at that select.
+ */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
 
-export { Select, type SelectProps };
+export { Select, SelectGroup, type SelectLabels, SelectOption, type SelectProps };