UNPKG

@payfit/unity-components

Version:

88 lines (87 loc) 2.79 kB
import { VariantProps } from '@payfit/unity-themes'; import { LoadingState } from '@react-types/shared'; import { ForwardedRef, ReactNode } from 'react'; import { ComboBoxProps, ListBoxProps } from 'react-aria-components/ComboBox'; declare const autocomplete: import('tailwind-variants').TVReturnType<{ isReadOnly: { true: { base: string; icon: string; input: string; }; false: { base: string[]; icon: string; input: string; }; }; }, { base: string[]; input: string[]; icon: string[]; invalidIcon: string[]; wrapperState: string[]; }, undefined, { isReadOnly: { true: { base: string; icon: string; input: string; }; false: { base: string[]; icon: string; input: string; }; }; }, { base: string[]; input: string[]; icon: string[]; invalidIcon: string[]; wrapperState: string[]; }, import('tailwind-variants').TVReturnType<{ isReadOnly: { true: { base: string; icon: string; input: string; }; false: { base: string[]; icon: string; input: string; }; }; }, { base: string[]; input: string[]; icon: string[]; invalidIcon: string[]; wrapperState: string[]; }, undefined, unknown, unknown, undefined>>; export interface AutocompleteProps<T extends object> extends Omit<ComboBoxProps<T>, 'className' | 'style' | 'children' | 'onSelectionChange'>, VariantProps<typeof autocomplete> { /** Custom placeholder text for the search input */ placeholder?: string; /** In dynamic mode, contains the items to display in the search results */ items?: ListBoxProps<T>['items']; /** In static mode, contains <AutocompleteItem /> components, in dynamic mode, contains a function to render items passed to the component */ children: ListBoxProps<T>['children']; /** Whether the search is currently loading results */ loadingState?: LoadingState; /** The name of the search field, used for form submission */ name: string; /** Feedback text to display below the autocomplete field. */ feedbackText?: ReactNode; } type AutocompleteComponent = (<TItems extends object>(props: AutocompleteProps<TItems> & { ref?: ForwardedRef<HTMLDivElement>; }) => JSX.Element) & { displayName?: string; }; /** * The `Autocomplete` component is used to create a searchable input field with a dropdown list of results. * It allows users to search through a collection of items and select one. */ declare const Autocomplete: AutocompleteComponent; export { Autocomplete };