import type { ComponentType, ReactNode, JSX } from 'react';
import { type ActionMeta, type CommonPropsAndClassName, type GroupBase, type MenuPlacement, type MenuPosition } from 'react-select';
import { type AsyncCreatableProps } from 'react-select/async-creatable';
type TCustomEvent = {
    target: {
        id?: string;
        name?: string;
        value?: unknown;
    };
    persist: () => void;
};
type ReactSelectAsyncCreatableProps = AsyncCreatableProps<unknown, boolean, GroupBase<unknown>>;
export type TAsyncCreatableSelectInputProps = {
    /**
     * Horizontal size limit of the input fields.
     */
    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
    /**
     * Indicates the input field has an error
     */
    hasError?: boolean;
    /**
     * Indicates the input field has a warning
     */
    hasWarning?: boolean;
    /**
     *  Is the select read-only
     */
    isReadOnly?: boolean;
    /**
     * Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
     */
    iconLeft?: ReactNode;
    /**
     * Aria label (for assistive tech)
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    'aria-label'?: ReactSelectAsyncCreatableProps['aria-label'];
    /**
     * HTML ID of an element that should be used as the label (for assistive tech)
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    'aria-labelledby'?: ReactSelectAsyncCreatableProps['aria-labelledby'];
    /**
     * Indicate if the value entered in the input is invalid.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    'aria-invalid'?: ReactSelectAsyncCreatableProps['aria-invalid'];
    /**
     * HTML ID of an element containing an error message related to the input.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    'aria-errormessage'?: ReactSelectAsyncCreatableProps['aria-errormessage'];
    /**
     * Focus the control when it is mounted
     */
    isAutofocussed?: boolean;
    /**
     * Remove the currently focused option when the user presses backspace
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    backspaceRemovesValue?: ReactSelectAsyncCreatableProps['backspaceRemovesValue'];
    /**
     * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    components?: ReactSelectAsyncCreatableProps['components'];
    /**
     * Custom method to filter whether an option should be displayed in the menu
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    filterOption?: ReactSelectAsyncCreatableProps['filterOption'];
    /**
     * The id of the search input
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    id?: ReactSelectAsyncCreatableProps['inputId'];
    /**
     * The value of the search input
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    inputValue?: ReactSelectAsyncCreatableProps['inputValue'];
    /**
     * The id to set on the SelectContainer component
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    containerId?: ReactSelectAsyncCreatableProps['id'];
    /**
     * Is the select value clearable
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    isClearable?: ReactSelectAsyncCreatableProps['isClearable'];
    /**
     * Use this property to reduce the paddings of the component for a ui compact variant
     */
    isCondensed?: boolean;
    /**
     * Is the select disabled
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    isDisabled?: ReactSelectAsyncCreatableProps['isDisabled'];
    /**
     * Override the built-in logic to detect whether an option is disabled
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    isOptionDisabled?: ReactSelectAsyncCreatableProps['isOptionDisabled'];
    /**
     * Support multiple selected options
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    isMulti?: ReactSelectAsyncCreatableProps['isMulti'];
    /**
     * Whether to enable search functionality
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    isSearchable?: ReactSelectAsyncCreatableProps['isSearchable'];
    /**
     * Maximum height of the menu before scrolling
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    maxMenuHeight?: ReactSelectAsyncCreatableProps['maxMenuHeight'];
    /**
     * Dom element to portal the select menu to
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    menuPortalTarget?: ReactSelectAsyncCreatableProps['menuPortalTarget'];
    /**
     * z-index value for the menu portal
     * <br>
     * Use in conjunction with `menuPortalTarget`
     */
    menuPortalZIndex?: number;
    /**
     * whether the menu should block scroll while open
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    menuShouldBlockScroll?: ReactSelectAsyncCreatableProps['menuShouldBlockScroll'];
    /**
     * Whether the menu should close after a value is selected. Defaults to `true`.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    closeMenuOnSelect?: ReactSelectAsyncCreatableProps['closeMenuOnSelect'];
    /**
     * Name of the HTML Input (optional - without this, no input will be rendered)
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    name?: ReactSelectAsyncCreatableProps['name'];
    /**
     * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    noOptionsMessage?: ReactSelectAsyncCreatableProps['noOptionsMessage'];
    /**
     * Handle blur events on the control
     */
    onBlur?: (event: TCustomEvent) => void;
    /**
     * Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
     */
    onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
    /**
     * Handle focus events on the control
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    onFocus?: ReactSelectAsyncCreatableProps['onFocus'];
    /**
     * Handle change events on the input
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    onInputChange?: ReactSelectAsyncCreatableProps['onInputChange'];
    /**
     * Placeholder text for the select value
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    placeholder?: ReactSelectAsyncCreatableProps['placeholder'];
    /**
     * Sets the tabIndex attribute on the input
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    tabIndex?: ReactSelectAsyncCreatableProps['tabIndex'];
    /**
     * Select the currently focused option when the user presses tab
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    tabSelectsValue?: ReactSelectAsyncCreatableProps['tabSelectsValue'];
    /**
     * The value of the select; reflected by the selected option
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    value?: ReactSelectAsyncCreatableProps['value'];
    /**
     * The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    defaultOptions?: ReactSelectAsyncCreatableProps['defaultOptions'];
    /**
     * Function that returns a promise, which is the set of options to be used once the promise resolves.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    loadOptions: ReactSelectAsyncCreatableProps['loadOptions'];
    /**
     * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    cacheOptions?: ReactSelectAsyncCreatableProps['cacheOptions'];
    /**
     * Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    allowCreateWhileLoading?: ReactSelectAsyncCreatableProps['allowCreateWhileLoading'];
    /**
     * Gets the label for the "create new ..." option in the menu. Is given the current input value.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    formatCreateLabel?: ReactSelectAsyncCreatableProps['formatCreateLabel'];
    /**
     * Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    isValidNewOption?: ReactSelectAsyncCreatableProps['isValidNewOption'];
    /**
     * Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    getNewOptionData?: ReactSelectAsyncCreatableProps['getNewOptionData'];
    /**
     * If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    onCreateOption?: ReactSelectAsyncCreatableProps['onCreateOption'];
    /**
     * Sets the position of the createOption element in your options list.
     * <br>
     * [Props from React select was used](https://react-select.com/props)
     */
    createOptionPosition?: ReactSelectAsyncCreatableProps['createOptionPosition'];
    /**
     * Determines if option groups will be separated by a divider
     */
    showOptionGroupDivider?: boolean;
};
declare const AsyncCreatableSelectInput: {
    ({ value, isSearchable, menuPortalZIndex, ...props }: TAsyncCreatableSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
    displayName: string;
    isTouched(touched: unknown): boolean;
    /**
     * Expose react-select components for customization purposes.
     */
    ClearIndicator: {
        (props: import("@commercetools-uikit/select-utils").TClearIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
        displayName: string;
    };
    Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
    CrossIcon: ComponentType<import("react").SVGProps<SVGSVGElement> & {
        size?: number;
    }>;
    DownChevron: ComponentType<import("react").SVGProps<SVGSVGElement> & {
        size?: number;
    }>;
    DropdownIndicator: {
        (props: import("react-select").DropdownIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
        displayName: string;
    };
    Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
    GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
    IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
    IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
    LoadingIndicator: {
        (): import("@emotion/react/jsx-runtime").JSX.Element;
        displayName: string;
    };
    LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
    MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
    MenuPortal: ComponentType<CommonPropsAndClassName<unknown, false, GroupBase<unknown>> & {
        appendTo: HTMLElement | undefined;
        children: ReactNode;
        controlElement: HTMLDivElement | null;
        innerProps: JSX.IntrinsicElements["div"];
        menuPlacement: MenuPlacement;
        menuPosition: MenuPosition;
    }>;
    MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
    MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
    MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
    MultiValueRemove: {
        (props: import("@commercetools-uikit/select-utils").TTagRemoveProps): import("@emotion/react/jsx-runtime").JSX.Element;
        displayName: string;
    };
    NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
    Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
    Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
    SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
    SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
    ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
};
export default AsyncCreatableSelectInput;