its-just-ui/dist/components/Autocomplete/Autocomplete.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface AutocompleteOption {
    value: string;
    label: string;
    disabled?: boolean;
    group?: string;
    icon?: React.ReactNode;
    description?: string;
    [key: string]: unknown;
}
export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    options: AutocompleteOption[];
    value?: AutocompleteOption | AutocompleteOption[] | null;
    onChange?: (value: AutocompleteOption | AutocompleteOption[] | null) => void;
    onInputChange?: (value: string) => void;
    placeholder?: string;
    disabled?: boolean;
    loading?: boolean;
    multiple?: boolean;
    clearable?: boolean;
    searchable?: boolean;
    creatable?: boolean;
    onCreate?: (inputValue: string) => void;
    variant?: 'default' | 'filled' | 'outlined' | 'underlined';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error';
    helperText?: string;
    label?: string;
    required?: boolean;
    filterOption?: (option: AutocompleteOption, inputValue: string) => boolean;
    renderOption?: (option: AutocompleteOption, isSelected: boolean) => React.ReactNode;
    renderValue?: (value: AutocompleteOption | AutocompleteOption[]) => React.ReactNode;
    groupBy?: (option: AutocompleteOption) => string;
    maxHeight?: number;
    transition?: 'none' | 'fade' | 'slide' | 'scale' | 'flip';
    transitionDuration?: number;
    placement?: 'top' | 'bottom';
    offset?: number;
    flip?: boolean;
    preventOverflow?: boolean;
    emptyMessage?: string;
    loadingMessage?: string;
    createMessage?: (inputValue: string) => string;
    clearIcon?: React.ReactNode;
    dropdownIcon?: React.ReactNode;
    loadingIcon?: React.ReactNode;
    children?: React.ReactNode;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    backgroundColor?: string;
    textColor?: string;
    placeholderColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    dropdownBackgroundColor?: string;
    dropdownBorderColor?: string;
    dropdownBorderWidth?: string;
    dropdownBorderRadius?: string;
    dropdownBoxShadow?: string;
    dropdownZIndex?: string;
    itemPadding?: string;
    itemHoverBackgroundColor?: string;
    itemSelectedBackgroundColor?: string;
    itemSelectedTextColor?: string;
    itemHighlightedBackgroundColor?: string;
    itemDisabledOpacity?: string;
    iconColor?: string;
    clearIconColor?: string;
    dropdownIconColor?: string;
    loadingIconColor?: string;
    labelFontSize?: string;
    labelFontWeight?: string;
    labelColor?: string;
    labelMarginBottom?: string;
    helperTextFontSize?: string;
    helperTextColor?: string;
    helperTextMarginTop?: string;
    requiredColor?: string;
}
interface AutocompleteContextValue {
    open: boolean;
    setOpen: (open: boolean) => void;
    value: AutocompleteOption | AutocompleteOption[] | null;
    onChange: (value: AutocompleteOption | AutocompleteOption[] | null) => void;
    inputValue: string;
    setInputValue: (value: string) => void;
    options: AutocompleteOption[];
    filteredOptions: AutocompleteOption[];
    highlightedIndex: number;
    setHighlightedIndex: (index: number) => void;
    multiple: boolean;
    disabled?: boolean;
    loading?: boolean;
    searchable?: boolean;
    variant?: 'default' | 'filled' | 'outlined' | 'underlined';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error';
    transition?: 'none' | 'fade' | 'slide' | 'scale' | 'flip';
    transitionDuration?: number;
    placement?: 'top' | 'bottom';
    renderOption?: (option: AutocompleteOption, isSelected: boolean) => React.ReactNode;
    emptyMessage?: string;
    loadingMessage?: string;
    createMessage?: (inputValue: string) => string;
    creatable?: boolean;
    onCreate?: (inputValue: string) => void;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    backgroundColor?: string;
    textColor?: string;
    placeholderColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    dropdownBackgroundColor?: string;
    dropdownBorderColor?: string;
    dropdownBorderWidth?: string;
    dropdownBorderRadius?: string;
    dropdownBoxShadow?: string;
    dropdownZIndex?: string;
    itemPadding?: string;
    itemHoverBackgroundColor?: string;
    itemSelectedBackgroundColor?: string;
    itemSelectedTextColor?: string;
    itemHighlightedBackgroundColor?: string;
    itemDisabledOpacity?: string;
    iconColor?: string;
    clearIconColor?: string;
    dropdownIconColor?: string;
    loadingIconColor?: string;
}
export declare const useAutocomplete: () => AutocompleteContextValue;
declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLDivElement>>;
export interface AutocompleteInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    clearable?: boolean;
    clearIcon?: React.ReactNode;
    dropdownIcon?: React.ReactNode;
    loadingIcon?: React.ReactNode;
    renderValue?: (value: AutocompleteOption | AutocompleteOption[]) => React.ReactNode;
}
declare const AutocompleteInput: React.ForwardRefExoticComponent<AutocompleteInputProps & React.RefAttributes<HTMLInputElement>>;
export interface AutocompleteListProps extends React.HTMLAttributes<HTMLUListElement> {
    maxHeight?: number;
    offset?: number;
}
declare const AutocompleteList: React.ForwardRefExoticComponent<AutocompleteListProps & React.RefAttributes<HTMLUListElement>>;
export interface AutocompleteItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
    option: AutocompleteOption;
    index: number;
}
declare const AutocompleteItem: React.ForwardRefExoticComponent<AutocompleteItemProps & React.RefAttributes<HTMLLIElement>>;
export interface AutocompleteEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const AutocompleteEmpty: React.ForwardRefExoticComponent<AutocompleteEmptyProps & React.RefAttributes<HTMLDivElement>>;
export { Autocomplete, AutocompleteInput, AutocompleteList, AutocompleteItem, AutocompleteEmpty };