@rockshin/tao-ui 0.0.2 → 0.0.4

package/dist/components/select/select.d.ts

@@ -1,5 +1,6 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
 import './select.css';
 export interface SelectOption {
     label: ReactNode;
@@ -9,28 +10,81 @@ export interface SelectOption {
     icon?: ReactNode;
     /** Secondary description line shown under the label in the option row. */
     description?: ReactNode;
+    /** Nested options turn this entry into a group; `label` becomes the group title. */
+    options?: SelectOption[];
 }
+export type SelectSemanticPart = 'root' | 'prefix' | 'suffix' | 'placeholder' | 'clear' | 'popup' | 'search' | 'group' | 'groupLabel' | 'item' | 'itemIcon' | 'itemLabel' | 'itemDesc' | 'empty';
+export type SelectPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 export interface SelectProps {
     options: SelectOption[];
     value?: string;
-    onChange?: (value: string) => void;
+    defaultValue?: string;
+    /** Fired on selection or clear. `option` is undefined when cleared. */
+    onChange?: (value: string, option?: SelectOption) => void;
+    /** Fired only when an option is picked (not on clear). */
+    onSelect?: (value: string, option: SelectOption) => void;
+    /** Fired when the value is cleared via the clear button. */
+    onClear?: () => void;
     placeholder?: string;
     size?: TaoSize;
     variant?: TaoVariant;
     disabled?: boolean;
+    /** Validation status. */
+    status?: 'error' | 'warning';
     /** Show search input in dropdown */
     showSearch?: boolean;
     /** Custom filter function, default matches label string */
     filterOption?: (input: string, option: SelectOption) => boolean;
-    /** Allow clearing the value */
-    allowClear?: boolean;
+    /** Controlled search text. */
+    searchValue?: string;
+    /** Fired when the search text changes. */
+    onSearch?: (value: string) => void;
+    /** Allow clearing the value; pass an object to customize the clear icon. */
+    allowClear?: boolean | {
+        clearIcon?: ReactNode;
+    };
     /** Show loading spinner */
     loading?: boolean;
+    /** Custom loading icon. */
+    loadingIcon?: ReactNode;
     /** Content when no options match */
     notFoundContent?: ReactNode;
     /** Prefix icon/element */
     prefix?: ReactNode;
+    /** Custom suffix (arrow) icon. */
+    suffixIcon?: ReactNode;
+    autoFocus?: boolean;
+    id?: string;
+    /** Name for hidden form field. */
+    name?: string;
+    /** Controlled open state of the dropdown. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Dropdown position. Defaults to `bottomLeft`. */
+    placement?: SelectPlacement;
+    /** Match popup width to trigger (true), a fixed px width (number), or fit content (false). */
+    popupMatchSelectWidth?: boolean | number;
+    /** Max height of the option list. Defaults to 256. */
+    listHeight?: number;
+    /** Parent node the popup renders into. Defaults to body. */
+    getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+    /** Customize the rendering of each dropdown option. */
+    optionRender?: (option: SelectOption, info: {
+        index: number;
+    }) => ReactNode;
+    /** Customize the selected label shown in the trigger. */
+    labelRender?: (option: SelectOption) => ReactNode;
+    /** Wrap/customize the dropdown content. */
+    popupRender?: (menu: ReactNode) => ReactNode;
     /** Force mobile mode (bottom sheet) regardless of screen size */
     mobile?: boolean;
+    /** Merged onto the trigger root; use to override width etc. */
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<SelectSemanticPart>;
+    styles?: SemanticStyles<SelectSemanticPart>;
 }
 export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+/** Double chevron (↕) for a switcher-style trigger. Pass to `suffixIcon`. */
+export declare function ChevronsUpDownIcon(): import("react/jsx-runtime").JSX.Element;