liber-salti/build/Autocomplete/Autocomplete.types.d.ts

Saltí - Liber Design System

/// <reference types="react" />
export declare type AutocompleteOption = {
    title: string;
    disabled?: boolean;
    [key: string]: any;
};
export declare type AutocompleteChangeReason = 'createOption' | 'selectOption' | 'removeOption' | 'clear' | 'blur';
export interface AutocompleteChangeDetails<T = string> {
    option: T;
}
export interface AutocompleteProps {
    /**
     * The size of the text field.
     */
    size?: 'large' | 'medium';
    /**
     * The label of the text field.
     */
    label?: string;
    /**
     * Allows multiple selection or not.
     */
    multiple?: boolean;
    /**
     * Options to be displayed.
     */
    options: AutocompleteOption[];
    /**
     * Default value for the input when using uncontrolled version.
     */
    defaultValue?: AutocompleteOption | AutocompleteOption[];
    /**
     * Value of the input when using controlled version.
     */
    value?: AutocompleteOption | AutocompleteOption[] | null;
    /**
     * Callback fired when the value changes.
     *
     * @param {React.SyntheticEvent} event The event source of the callback.
     * @param {T|T[]} value The new value of the component.
     * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
     * @param {string} [details]
     */
    onChange?: (event: React.SyntheticEvent, value: AutocompleteOption | AutocompleteOption[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<AutocompleteOption | AutocompleteOption[]>) => void;
    /**
     * Used to determine if the option represents the given value.
     * Uses strict equality by default.
     * ⚠️ Both arguments need to be handled, an option can only match with one value.
     *
     * @param {T} option The option to test.
     * @param {T} value The value to test against.
     * @returns {boolean}
     */
    isOptionEqualToValue?: (...args: any[]) => any;
    /**
     * Should open menu when focused.
     */
    openOnFocus?: boolean;
    /**
     * Width of the input
     */
    width?: string | number;
    /**
     * Width of input will be its parent width.
     * This will override `width` prop.
     */
    fullWidth?: boolean;
    /**
     * If `true`, the component is in a loading state.
     */
    loading?: boolean;
    /**
     * If `true`, the label will be displayed in an error state.
     */
    error?: boolean;
    /**
     * If `true`, the label is displayed as required and the `input` element` will be required.
     */
    required?: boolean;
    /**
     * If `true`, the `input` element will be disabled.
     */
    disabled?: boolean;
    /**
     * The helper text content.
     */
    helperText?: string;
    /**
     * The callback fired when the menu is closed.
     */
    onMenuClose?: () => void;
    /**
     * Returns filtered options based on the inputValue.
     */
    filterOptions?: (options: AutocompleteOption[], state: {
        inputValue: string;
        [key: string]: any;
    }) => AutocompleteOption[];
}