@yamada-ui/autocomplete/dist/use-autocomplete.d.mts

Yamada UI autocomplete component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, PropGetter } from '@yamada-ui/core';
import * as _yamada_ui_use_descendant from '@yamada-ui/use-descendant';
import * as react from 'react';
import { ChangeEvent, ReactElement, FocusEvent, DOMAttributes, MouseEvent } from 'react';
import { FormControlOptions } from '@yamada-ui/form-control';
import { ComboBoxProps, PopoverProps } from '@yamada-ui/popover';
import { Union } from '@yamada-ui/utils';
import { AutocompleteOptionProps } from './autocomplete-option.mjs';
import { AutocompleteOptionGroupProps } from './autocomplete-option-group.mjs';
import './use-autocomplete-option.mjs';
import './use-autocomplete-option-group.mjs';

interface AutocompleteItemWithValue extends AutocompleteOptionProps {
    label?: string;
    value?: string;
}
interface AutocompleteItemWithItems extends AutocompleteOptionGroupProps, Pick<AutocompleteOptionProps, "disabled" | "focusable" | "isDisabled" | "isFocusable"> {
    items?: AutocompleteItemWithValue[];
}
type AutocompleteItem = AutocompleteItemWithItems | AutocompleteItemWithValue;
type MaybeValue = string | string[];
interface UseAutocompleteBaseProps<T extends MaybeValue = string> extends ComboBoxProps, FormControlOptions {
    /**
     * If `true`, enables the creation of autocomplete option.
     *
     * @default false
     */
    allowCreate?: boolean;
    /**
     * If `true`, enables the free input.
     */
    allowFree?: boolean;
    /**
     * If `true`, the list element will be closed when value is selected.
     *
     * @default true
     */
    closeOnSelect?: boolean;
    /**
     * The initial value of the autocomplete.
     */
    defaultValue?: T;
    /**
     * The message displayed when the search yields no hits.
     *
     * @default 'No results found'
     */
    emptyMessage?: string;
    /**
     * Function to format text when search input.
     */
    format?: (value: string) => string;
    /**
     * The position to be inserted when the autocomplete option is created.
     *
     * @default 'first'
     */
    insertPositionItem?: [string, "first" | "last"] | Union<"first" | "last">;
    /**
     * If provided, generate options based on items.
     */
    items?: AutocompleteItem[];
    /**
     * The maximum selectable value.
     */
    maxSelectValues?: number;
    /**
     * If `true`, the selected item(s) will be excluded from the list.
     *
     * @default false
     */
    omitSelectedValues?: boolean;
    /**
     * The value of the autocomplete.
     */
    value?: T;
    /**
     * Props for select option element.
     */
    optionProps?: Omit<AutocompleteOptionProps, "children" | "value">;
    /**
     * The callback invoked when value state changes.
     */
    onChange?: (value: T) => void;
    /**
     * The callback invoked when autocomplete option created.
     */
    onCreate?: (newItem: AutocompleteItem, newItems: AutocompleteItem[]) => void;
    /**
     * The callback invoked when search input.
     */
    onSearch?: (ev: ChangeEvent<HTMLInputElement>) => void;
}
interface UseAutocompleteProps<T extends MaybeValue = string> extends Omit<HTMLUIProps<"input">, "disabled" | "list" | "readOnly" | "required" | "size" | keyof UseAutocompleteBaseProps>, UseAutocompleteBaseProps<T> {
}
declare const useAutocomplete: <T extends MaybeValue = string>(props: UseAutocompleteProps<T>) => {
    allowCreate: boolean;
    allowFree: boolean;
    allSelected: boolean;
    children: string | number | boolean | ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | undefined;
    closeOnSelect: boolean;
    descendants: {
        count: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => number;
        destroy: () => void;
        enabledCount: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => number;
        enabledFirstValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        enabledIndexOf: (node?: HTMLElement | null | undefined, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => number;
        enabledLastValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        enabledNextValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        enabledPrevValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        enabledValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        enabledValues: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}>[];
        firstValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        indexOf: (node?: HTMLElement | null | undefined) => number;
        lastValue: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        nextValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        prevValue: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined, loop?: boolean) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        register: (nodeOrOptions?: HTMLElement | {
            id?: string;
            disabled?: boolean;
            filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined;
        } | null | undefined) => void | ((node: HTMLElement | null) => void);
        unregister: (node?: HTMLElement | undefined) => void;
        value: (index: number, filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}> | undefined;
        values: (filter?: _yamada_ui_use_descendant.FilterDescendant<HTMLElement, {}> | undefined) => _yamada_ui_use_descendant.Descendant<HTMLElement, {}>[];
    };
    empty: boolean;
    emptyMessage: string;
    focusedIndex: number;
    hit: boolean;
    inputRef: react.RefObject<HTMLInputElement>;
    inputValue: string;
    label: T | undefined;
    omitSelectedValues: boolean;
    open: boolean;
    pickOptions: (value: string) => void;
    rebirthOptions: (runFocus?: boolean) => void;
    setFocusedIndex: react.Dispatch<react.SetStateAction<number>>;
    value: T;
    formControlProps: {
        _active?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _focus?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _focusVisible?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _hover?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        _invalid?: ({} & _yamada_ui_core.CSSUIObject) | undefined;
        disabled: boolean | undefined;
        readOnly: boolean | undefined;
        required: boolean | undefined;
        "aria-disabled": boolean | undefined;
        "aria-invalid": boolean | undefined;
        "aria-required": boolean | undefined;
        onBlur: (event: FocusEvent<HTMLInputElement, Element>) => void;
        "data-readonly": boolean | "false" | "true";
    };
    getContainerProps: PropGetter<"div", undefined>;
    getFieldProps: PropGetter<"div", undefined>;
    getPopoverProps: (props?: PopoverProps) => PopoverProps;
    inputProps: DOMAttributes<HTMLInputElement>;
    optionProps: Omit<AutocompleteOptionProps, "value" | "children"> | undefined;
    onChange: (newValue: string, runRebirth?: boolean) => void;
    onClear: (ev: MouseEvent<HTMLDivElement>) => void;
    onClose: () => void;
    onCompositionEnd: () => void;
    onCompositionStart: () => void;
    onCreate: () => void;
    onFocusFirst: () => void;
    onFocusLast: () => void;
    onFocusNext: (index?: number) => void;
    onFocusPrev: (index?: number) => void;
    onFocusSelected: () => void;
    onOpen: () => void;
    onSearch: (ev: ChangeEvent<HTMLInputElement>) => void;
};
type UseAutocompleteReturn = ReturnType<typeof useAutocomplete>;
declare const useAutocompleteInput: () => {
    getInputProps: PropGetter<"input", undefined>;
};
type UseAutocompleteInputReturn = ReturnType<typeof useAutocompleteInput>;

export { type AutocompleteItem, type UseAutocompleteInputReturn, type UseAutocompleteProps, type UseAutocompleteReturn, useAutocomplete, useAutocompleteInput };