import { default as React } from 'react';
import { GroupBase, InputActionMeta, MenuListProps, OptionProps, OptionsOrGroups, SelectInstance } from 'react-select';
import { TextProps } from '../../../../tedi/components/base/typography/text/text';
import { FeedbackTextProps } from '../../../../tedi/components/form/feedback-text/feedback-text';
import { FormLabelProps } from '../../../../tedi/components/form/form-label/form-label';
import { TColorsBackground } from '../../commonTypes';
/**
 * Because of the next problem, inputIsHidden has to be used from select custom props.
 * For typescript they need to be declared in module
 * https://github.com/JedWatson/react-select/issues/4804#issuecomment-927223471
 */
declare module '../../../../../node_modules/react-select/dist/declarations/src/Select' {
    interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
        inputIsHidden?: boolean;
    }
}
export interface SelectProps extends FormLabelProps {
    /**
     * ID attribute.
     */
    id: string;
    /**
     * Options or grouped options for select.
     */
    options?: OptionsOrGroups<ISelectOption, IGroupedOptions<ISelectOption>>;
    /**
     * Default options for async select. Do not use without async select.
     */
    defaultOptions?: OptionsOrGroups<ISelectOption, IGroupedOptions<ISelectOption>> | boolean;
    /**
     * select field placeholder.
     */
    placeholder?: string;
    /**
     * Additional classes.
     */
    className?: string;
    /**
     * What icon to use for dropdown
     * @default arrow_drop_down
     */
    iconName?: 'arrow_drop_down' | 'search';
    /**
     * onChange callback handler.
     */
    onChange?: (value: TSelectValue) => void;
    /**
     * onChange callback handler when input changes on async/live select.
     */
    onInputChange?: (value: string, actionMeta: InputActionMeta) => void;
    /**
     * Search input value.
     */
    inputValue?: string;
    /**
     * onChange callback handler when input changes on async/live select.
     */
    loadOptions?: (inputValue: string, callback: (options: OptionsOrGroups<ISelectOption, IGroupedOptions<ISelectOption>>) => void) => void;
    /**
     * Is the select in a state of loading (async)
     */
    isLoading?: boolean;
    /**
     * Default value of select.
     */
    defaultValue?: TSelectValue;
    /**
     * Value of select to control select value from outside of component.
     * Should be an actual JS reference to one of the options.
     * Do not use with defaultValue
     */
    value?: TSelectValue;
    /**
     * If select is disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * Name attribute.
     */
    name?: string;
    /**
     * If select is invalid.
     */
    invalid?: boolean;
    /**
     * Textfield helper.
     */
    helper?: FeedbackTextProps;
    /**
     * Size of select.
     */
    size?: 'small';
    /**
     * If select should load options async
     * @default false
     */
    async?: boolean;
    /**
     * Render custom option for select
     */
    renderOption?: (props: OptionProps<ISelectOption, boolean>) => JSX.Element;
    /**
     * Text to display when there are no options.
     */
    noOptionsMessage?: (obj: {
        inputValue: string;
    }) => React.ReactNode;
    /**
     * Text to display when there are no options.
     */
    loadingMessage?: (obj: {
        inputValue: string;
    }) => React.ReactNode;
    /**
     * Custom component to display under MessageList.
     */
    renderMessageListFooter?: (props: MenuListProps<ISelectOption, boolean>) => JSX.Element;
    /**
     * If multiple option can be selected. When true, then closeMenuOnSelect is set to false by default.
     */
    multiple?: boolean;
    /**
     * How tags should position themselves
     * @default row
     */
    tagsDirection?: 'stack' | 'row';
    /**
     * If menu should open when select is focused.
     * @default false
     */
    openMenuOnFocus?: boolean;
    /**
     * If menu should open when control is clicked.
     * @default true
     */
    openMenuOnClick?: boolean;
    /**
     * If pressing tab inside menu should select currently focused option.
     * @default false
     */
    tabSelectsValue?: boolean;
    /**
     * Close menu on select
     * @default true. If multiple select then defaults to false.
     */
    closeMenuOnSelect?: boolean;
    /**
     * Blur input on select. Useful for closing the keyboard on touch devices.
     * (**NB!** Will move the focus back to the beginning of the page)
     * @default false
     */
    blurInputOnSelect?: boolean;
    /**
     * Auto focus
     */
    autoFocus?: boolean;
    /**
     * If select can be clearable
     * @default true
     */
    isClearable?: boolean;
    /**
     * If select displays an indicator to clear selected values
     * @default false
     */
    isClearIndicatorVisible?: boolean;
    /**
     * If select can be searched
     * @defaults true
     */
    isSearchable?: boolean;
    /**
     * Should tags be individually removable
     * @default false
     */
    isTagRemovable?: boolean;
    /**
     * Whether the menu is open
     */
    menuIsOpen?: boolean;
    /**
     * Handle the menu opening
     */
    onMenuOpen?: () => void;
    /**
     * Handle the menu closing
     */
    onMenuClose?: () => void;
    /**
     * Handle the on blur
     */
    onBlur?: () => void;
    /**
     * Whether the input text should be always hidden or always shown. Used for editable select results
     */
    inputIsHidden?: boolean;
    /**
     * Option group heading text modifiers. Can also be set for each option group separately inside `options` prop.
     * @default { modifiers: 'small', color: 'subtle' }
     */
    optionGroupHeadingText?: Pick<TextProps, 'modifiers' | 'color'>;
    /**
     * Option group heading background color. Can also be set for each option group separately inside `options` prop.
     */
    optionGroupBackgroundColor?: TColorsBackground;
    /**
     * If options should be cached
     * @default true
     */
    cacheOptions?: boolean;
}
export interface ISelectOption<CustomData = unknown> {
    /**
     * Option value.
     */
    value: string;
    /**
     * Option label.
     */
    label: string | React.ReactNode | React.ReactNode[];
    /**
     * If option is disabled
     */
    isDisabled?: boolean;
    /**
     * Custom
     */
    customData?: CustomData;
}
export interface IGroupedOptions<CustomOption = unknown> extends GroupBase<CustomOption> {
    text?: Pick<TextProps, 'modifiers' | 'color'>;
    backgroundColor?: TColorsBackground;
}
export type TSelectValue<CustomData = unknown> = ISelectOption<CustomData> | ReadonlyArray<ISelectOption<CustomData>> | null;
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectInstance<ISelectOption<unknown>, boolean, IGroupedOptions<ISelectOption<unknown>>>>>;
export default Select;