amotify/dist/fn/Input/Autocomplete.d.ts

UI Component for React,NextJS,esbuild

/// <reference types="react" />
import { StyleTags, ReactElement } from '../../@declares';
import { KeyValueDict } from 'jmini';
import { InputTypes } from '.';
declare namespace Autocomplete {
    type Input<T = Value> = InputTypes.CoreInput<T | T[]> & React.DOMAttributes<HTMLInputElement> & {
        label?: ReactElement;
        tone?: InputTypes.BoxTone;
        tabIndex?: number;
        id?: string;
        disabled?: boolean;
        min?: number;
        max?: number;
        multiSelect?: boolean;
        value?: T | T[];
        options: Option<T>[];
        emptySelect?: boolean;
        leftIndicator?: ReactElement | false;
        rightIndicator?: ReactElement | false;
        leftIcon?: ReactElement | false;
        rightIcon?: ReactElement | false;
        SearchInput?: boolean;
        SearchInputPlaceholder?: string;
        DynamicOptionsOnSearch?: DynamicOptionsOnSearch<T>;
        SelectedComponent?: {
            (p: SelectedComponentProps<T>): JSX.Element;
        };
        SelectorComponent?: {
            (p: SelectorComponentProps<T>): JSX.Element;
        };
        SelectorStyles?: StyleTags.PropsNFreeCSS;
        SelectorPosition?: 1 | 2 | 3 | 4;
    };
    type Value<T = any> = T extends infer V ? V : string | number | boolean | KeyValueDict | void | null;
    type Option<T = Value> = {
        type?: 'selector';
        label?: ReactElement;
        value: T;
        searchValue?: string;
    } | {
        type: 'label';
        label: ReactElement;
        value?: T;
        searchValue?: string;
    };
    type OptionsDict = {
        [key: string]: Option;
    };
    type DynamicOptionsOnSearch<T = Value> = {
        (k: string): Promise<Option<T>[]>;
    };
    type SelectorComponentProps<T = Value> = {
        option: Option<T>;
        isSelected: boolean;
        isFocused: boolean;
        addCallback(): void;
    };
    type SelectedComponentProps<T = Value> = {
        value: T;
        option?: KeyValueDict;
        label: ReactElement;
        removeCallback(event: any): void;
    };
    type WrapperStates = {
        rootStates: Input & {
            value: Value[];
        };
        val_options: Option[];
        set_options: React.Dispatch<React.SetStateAction<Option[]>>;
        val_optionFocused: Value;
        set_optionFocused: React.Dispatch<React.SetStateAction<Value>>;
        val_optionsDict: OptionsDict;
        set_optionsDict: React.Dispatch<React.SetStateAction<OptionsDict>>;
        val_preventDynamicSearchOnKeywordChange: boolean;
        set_preventDynamicSearchOnKeywordChange: React.Dispatch<React.SetStateAction<boolean>>;
        val_preventOpenSelectorOnFocus: boolean;
        set_preventOpenSelectorOnFocus: React.Dispatch<React.SetStateAction<boolean>>;
        val_selectorOpen: boolean;
        set_selectorOpen: React.Dispatch<React.SetStateAction<boolean>>;
        val_keyword: string;
        set_keyword: React.Dispatch<React.SetStateAction<string>>;
        val_status: InputTypes.Status.Plain<Value[]>;
        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
        val_validate: InputTypes.Validation.Result;
        set_validate: React.Dispatch<React.SetStateAction<InputTypes.Validation.Result>>;
    };
    type Component = {
        <T = Value>(p: Input<Value<T>>): JSX.Element;
    };
}
declare const Autocomplete: Autocomplete.Component;
export { Autocomplete, Autocomplete as default };