@react-md/autocomplete/types/useAutoComplete.d.ts

Create an accessible autocomplete component that allows a user to get real-time suggestions as they type within an input. This component can also be hooked up to a backend API that handles additional filtering or sorting.

import type { ChangeEventHandler, CSSProperties, FocusEventHandler, HTMLAttributes, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
import type { ListElement } from "@react-md/list";
import type { FixedPositioningTransitionCallbacks } from "@react-md/transition";
import type { ItemRefList } from "@react-md/utils";
import type { AutoCompleteData, AutoCompleteListboxPositionOptions, AutoCompleteProps } from "./types";
declare type EventHandlers = Pick<HTMLAttributes<HTMLInputElement>, "onBlur" | "onFocus" | "onChange" | "onClick" | "onKeyDown">;
export declare type RequiredAutoCompleteProps = Required<Pick<AutoCompleteProps, "data" | "filter" | "filterOptions" | "filterOnNoValue" | "valueKey" | "getResultId" | "getResultValue" | "clearOnAutoComplete">>;
export declare type OptionalAutoCompleteProps = Pick<AutoCompleteProps, "onAutoComplete" | "disableShowOnFocus">;
export interface AutoCompleteOptions extends EventHandlers, OptionalAutoCompleteProps, RequiredAutoCompleteProps, AutoCompleteListboxPositionOptions {
    isListAutocomplete: boolean;
    isInlineAutocomplete: boolean;
    forwardedRef?: Ref<HTMLInputElement>;
    suggestionsId: string;
    propValue?: string;
    defaultValue?: string;
}
export interface AutoCompleteReturnValue {
    ref: (instance: HTMLInputElement | null) => void;
    match: string;
    value: string;
    visible: boolean;
    activeId: string;
    itemRefs: ItemRefList<HTMLLIElement>;
    filteredData: readonly AutoCompleteData[];
    listboxRef: Ref<ListElement>;
    handleBlur: FocusEventHandler<HTMLInputElement>;
    handleFocus: FocusEventHandler<HTMLInputElement>;
    handleClick: MouseEventHandler<HTMLInputElement>;
    handleChange: ChangeEventHandler<HTMLInputElement>;
    handleKeyDown: KeyboardEventHandler<HTMLInputElement>;
    handleAutoComplete: (index: number) => void;
    fixedStyle: CSSProperties | undefined;
    transitionHooks: Required<FixedPositioningTransitionCallbacks>;
}
/**
 * This hook handles all the autocomplete's "logic" and behavior.
 *
 * @internal
 */
export declare function useAutoComplete({ suggestionsId, data, propValue, defaultValue, filter: filterFn, filterOptions, filterOnNoValue, valueKey, getResultId, getResultValue, onBlur, onFocus, onClick, onChange, onKeyDown, forwardedRef, onAutoComplete, clearOnAutoComplete, anchor, xMargin, yMargin, vwMargin, vhMargin, transformOrigin, listboxWidth, listboxStyle, preventOverlap, disableSwapping, disableVHBounds, closeOnResize, closeOnScroll, disableShowOnFocus: propDisableShowOnFocus, isListAutocomplete, isInlineAutocomplete, }: AutoCompleteOptions): AutoCompleteReturnValue;
export {};