@furystack/shades-common-components/esm/components/inputs/select.d.ts

Common UI components for FuryStack Shades

import type { PartialElement } from '@furystack/shades';
import type { Palette } from '../../services/theme-provider-service.js';
import type { ComponentSize } from '../component-size.js';
import type { InputValidationResult } from './input.js';
export type SelectOption = {
    value: string;
    label: string;
    disabled?: boolean;
};
export type SelectOptionGroup = {
    label: string;
    options: SelectOption[];
};
export type SelectState = {
    value: string | string[];
    isOpen: boolean;
    highlightedIndex: number;
    searchText: string;
};
export type SelectProps = {
    /** The list of options available in the select */
    options?: SelectOption[];
    /** Grouped options (alternative to flat options) */
    optionGroups?: SelectOptionGroup[];
    /** The selection mode: 'single' (default) or 'multiple' */
    mode?: 'single' | 'multiple';
    /** The currently selected value (string for single, string[] for multiple) */
    value?: string | string[];
    /** Placeholder text shown when no option is selected */
    placeholder?: string;
    /** Whether the select is disabled */
    disabled?: boolean;
    /** Whether a value is required */
    required?: boolean;
    /** An optional label title */
    labelTitle?: JSX.Element | string;
    /** Optional props for the label element */
    labelProps?: PartialElement<HTMLLabelElement>;
    /** The visual variant of the select */
    variant?: 'contained' | 'outlined';
    /**
     * The size of the select.
     * @default 'medium'
     */
    size?: ComponentSize;
    /** The default color of the select */
    defaultColor?: keyof Palette;
    /** The name attribute for form integration */
    name?: string;
    /** Whether to show a search/filter input */
    showSearch?: boolean;
    /** Custom filter function for search (defaults to case-insensitive label match) */
    filterOption?: (searchText: string, option: SelectOption) => boolean;
    /** Callback when the selected value changes (single mode) */
    onValueChange?: (value: string) => void;
    /** Callback when the selected values change (multiple mode) */
    onMultiValueChange?: (values: string[]) => void;
    /** Callback for retrieving the custom validation result */
    getValidationResult?: (options: {
        state: SelectState;
    }) => InputValidationResult;
    /** Optional callback for the helper text */
    getHelperText?: (options: {
        state: SelectState;
        validationResult?: InputValidationResult;
    }) => JSX.Element | string;
};
export declare const Select: (props: SelectProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=select.d.ts.map