import { AriaButtonProps } from "@react-types/button"; import { AriaListBoxOptions } from "@react-aria/listbox"; import { AriaSearchAutocompleteProps } from "@react-types/autocomplete"; import { ComboBoxState } from "@react-stately/combobox"; import { DOMAttributes, KeyboardDelegate, LayoutDelegate, RefObject, ValidationResult, AriaLabelingProps, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, ValueBase } from "@react-types/shared"; import { InputHTMLAttributes } from "react"; import { AriaTextFieldProps } from "@react-aria/textfield"; import { AutocompleteProps, AutocompleteState } from "@react-stately/autocomplete"; export interface SearchAutocompleteAria extends ValidationResult { /** Props for the label element. */ labelProps: DOMAttributes; /** Props for the search input element. */ inputProps: InputHTMLAttributes; /** Props for the list box, to be passed to `useListBox`. */ listBoxProps: AriaListBoxOptions; /** Props for the search input's clear button. */ clearButtonProps: AriaButtonProps; /** Props for the search autocomplete description element, if any. */ descriptionProps: DOMAttributes; /** Props for the search autocomplete error message element, if any. */ errorMessageProps: DOMAttributes; } export interface AriaSearchAutocompleteOptions extends AriaSearchAutocompleteProps { /** The ref for the input element. */ inputRef: RefObject; /** The ref for the list box popover. */ popoverRef: RefObject; /** The ref for the list box. */ listBoxRef: RefObject; /** An optional keyboard delegate implementation, to override the default. */ keyboardDelegate?: KeyboardDelegate; /** * A delegate object that provides layout information for items in the collection. * By default this uses the DOM, but this can be overridden to implement things like * virtualized scrolling. */ layoutDelegate?: LayoutDelegate; } /** * Provides the behavior and accessibility implementation for a search autocomplete component. * A search autocomplete combines a combobox with a searchfield, allowing users to filter a list of options to items matching a query. * @param props - Props for the search autocomplete. * @param state - State for the search autocomplete, as returned by `useSearchAutocomplete`. */ export function useSearchAutocomplete(props: AriaSearchAutocompleteOptions, state: ComboBoxState): SearchAutocompleteAria; export interface CollectionOptions extends DOMProps, AriaLabelingProps { /** Whether the collection items should use virtual focus instead of being focused directly. */ shouldUseVirtualFocus: boolean; /** Whether typeahead is disabled. */ disallowTypeAhead: boolean; } export interface InputProps extends DOMProps, FocusEvents, KeyboardEvents, Pick, 'onChange' | 'value'>, Pick { } export interface AriaAutocompleteProps extends AutocompleteProps { /** * An optional filter function used to determine if a option should be included in the autocomplete list. * Include this if the items you are providing to your wrapped collection aren't filtered by default. */ filter?: (textValue: string, inputValue: string, node: Node) => boolean; /** * Whether or not to focus the first item in the collection after a filter is performed. Note this is only applicable * if virtual focus behavior is not turned off via `disableVirtualFocus`. * @default false */ disableAutoFocusFirst?: boolean; /** * Whether the autocomplete should disable virtual focus, instead making the wrapped collection directly tabbable. * @default false */ disableVirtualFocus?: boolean; } export interface AriaAutocompleteOptions extends Omit, 'children'> { /** The ref for the wrapped collection element. */ inputRef: RefObject; /** The ref for the wrapped collection element. */ collectionRef: RefObject; } export interface AutocompleteAria { /** Props for the autocomplete input element. These should be passed to the input's aria hooks (e.g. useTextField/useSearchField/etc) respectively. */ inputProps: InputProps; /** Props for the collection, to be passed to collection's respective aria hook (e.g. useMenu). */ collectionProps: CollectionOptions; /** Ref to attach to the wrapped collection. */ collectionRef: RefObject; /** A filter function that returns if the provided collection node should be filtered out of the collection. */ filter?: (nodeTextValue: string, node: Node) => boolean; } /** * Provides the behavior and accessibility implementation for an autocomplete component. * An autocomplete combines a text input with a collection, allowing users to filter the collection's contents match a query. * @param props - Props for the autocomplete. * @param state - State for the autocomplete, as returned by `useAutocompleteState`. */ export function useAutocomplete(props: AriaAutocompleteOptions, state: AutocompleteState): AutocompleteAria; export type { AriaSearchAutocompleteProps } from '@react-types/autocomplete'; //# sourceMappingURL=types.d.ts.map