@react-md/autocomplete/lib/utils.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 { ReactNode } from "react";
import type { AutoCompleteData, AutoCompleteFilterFunction, FilterFunction } from "./types";
/**
 * Generates an id for each result in the autocomplete's listbox.
 *
 * @param id - The listbox's id
 * @param index - The index of the result in the list
 * @returns an id string
 */
export declare function getResultId(id: string, index: number): string;
/**
 * Gets a renderable label for each result in the autocomplete's listbox. This
 * will be applied as the `children` for the `Option` element.
 *
 * @param datum - The current result datum to get a label for
 * @param labelKey - The key to extract a label from if the datum is an object
 * @param _query - The current search query. This is useful if you want to
 * implement text "highlighting" (bold) of all the letters that match in the
 * item.
 * @returns a renderable node to display
 */
export declare function getResultLabel(datum: Readonly<AutoCompleteData>, labelKey: string, _query: string): ReactNode;
/**
 * Gets a value string from each result that can be searched.
 *
 * @param datum - The current result datum that should have a string extracted
 * @param valueKey - The key to use to extract a string value from if the datum
 * is an object
 * @returns a searchable string.
 */
export declare function getResultValue(datum: Readonly<AutoCompleteData>, valueKey: string): string;
/**
 * This is used to disable filtering and just return the data list immediately.
 * Useful when the filtering is done somewhere else like a server/API
 * @internal
 */
export declare const noFilter: FilterFunction;
/**
 * Gets the filter function to use within the Autocomplete based on the provided
 * filter prop
 *
 * @internal
 */
export declare function getFilterFunction<O extends {} = {}>(filter: AutoCompleteFilterFunction<O>): FilterFunction<O>;
/**
 * This is an extremely simple type guard that is useful when using the
 * `onAutoComplete` handler since I'm terrible at typescript types. This will
 * ensure that if the result is an object, it will match the provided data type
 * of your data list.
 *
 * Example:
 *
 * ```ts
 * interface Example {
 *   name: string;
 *   value: string;
 * }
 *
 *
 * const [example, setExample] = useState<Example | null>(null);
 * const onAutoComplete = useCallback<AuoCompleteHandler>((_name, example) => {
 *   if (isResultOf<Example>(example)) {
 *     setExample(example);
 *   }
 * }, [])
 * ```
 *
 * @param datum - The result data to type guard against.
 */
export declare function isResultOf<T extends {}>(datum: Readonly<AutoCompleteData>): datum is T;