import { CommonProps } from "@trackunit/react-components";
import { MappedOmit } from "@trackunit/shared-utils";
import { ReactNode } from "react";
import { GroupBase, OptionsOrGroups, Props as ReactSelectProps } from "react-select";
import { FormComponentSizes } from "../../types";
import { LockedForReasons } from "../BaseInput/InputLockReasonTooltip";
export interface AsyncSelect<TOption, TGroup extends GroupBase<TOption> = GroupBase<TOption>> {
    loadOptions: (input: string) => void | Promise<OptionsOrGroups<TOption, TGroup>>;
    defaultOptions?: OptionsOrGroups<TOption, TGroup>;
    cacheOptions: boolean;
}
export type SelectProps<TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = CommonProps & MappedOmit<ReactSelectProps<TOption, TIsMulti, TGroup>, "isDisabled" | "styles" | "unstyled" | "components" | "menuIsOpen" | "classNames" | "maxMenuHeight" | "minMenuHeight" | "theme"> & {
    /**
     * An React element to render before the text in the select.
     * This is typically used to render an icon.
     *
     * @memberof SelectProps
     */
    prefix?: ReactNode;
    /**
     * Text to display when no value is selected.
     * Can be used as a description, example, or a hint.
     *
     * @memberof SelectProps
     */
    placeholder?: string;
    /**
     * Whether the select is disabled.
     *
     * @memberof SelectProps
     */
    disabled?: boolean | LockedForReasons;
    /**
     * Whether the select is read-only.
     *
     * @memberof SelectProps
     */
    readOnly?: boolean | LockedForReasons;
    /**
     * An field id
     *
     * @memberof SelectProps
     */
    id?: string;
    /**
     * An boolean flag to set select into async mode
     * This is typically used when data is fetched after render
     *
     * @memberof SelectProps
     */
    async?: TIsAsync extends true ? AsyncSelect<TOption, TGroup> : undefined;
    /**
     * A label to be used as a aria-label
     * This is typically used for accessibility
     *
     * @memberof SelectProps
     */
    label?: string;
    /**
     * A boolean prop to set select into invalid mode
     * typically used when selected value is not compliant with field requirement
     * ex if it breaks validation rules
     *
     * @memberof SelectProps
     */
    hasError?: boolean;
    /**
     * A boolean flag to display loading indicator
     *
     * @memberof SelectProps
     */
    isLoading?: boolean;
    /**
     * A custom handler for menu open event
     * use if you want to trigger custom logic or fetch data
     *
     * @memberof SelectProps
     */
    onMenuOpen?: () => void;
    /**
     * A custom handler for menu close event
     * use if you want to trigger custom logic
     *
     * @memberof SelectProps
     */
    onMenuClose?: () => void;
    /**
     * A flag to allow user to clear value once selected
     * default value is true
     *
     * @memberof SelectProps
     */
    isClearable?: boolean;
    /**
     * A flag to allow user to filter option list by key from the text input
     *
     * @memberof SelectProps
     */
    isSearchable?: boolean;
    /**
     * A handler for menu close event
     * use if you want to trigger custom logic
     *
     * @memberof SelectProps
     */
    hideSelectedOptions?: boolean;
    /**
     * Resolves option data to a string to be displayed as a description for that option. The
     * option description is only shown in the menu list, not in the selected value.
     *
     * @memberof SelectProps
     */
    getOptionLabelDescription?: (option: TOption) => string | undefined;
    /**
     * Resolves option data to an element to be displayed as a prefix for that option.
     *
     * @memberof SelectProps
     */
    getOptionPrefix?: (option: TOption) => ReactNode;
    /**
     *  The size of the select component.
     *  Large = 40px, Medium = 32px, Small = 28px.
     *  Default is Medium.
     */
    fieldSize?: FormComponentSizes;
    /**
     * The autocomplete attribute value for the input element.
     * Use "off" or "no" to disable browser autocomplete.
     */
    autoComplete?: "off" | "on" | "no";
};
/**
 * A hook used by selects to share the common code
 *
 * @param {SelectProps} props - The props for the Select component
 * @returns {ReactSelectProps} Props for react-select component
 */
export declare const useSelect: <TOption, TIsAsync extends boolean = false, TIsMulti extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>(props: SelectProps<TOption, TIsAsync, TIsMulti, TGroup>) => ReactSelectProps<TOption, TIsMulti, TGroup>;