import { ReactNode } from 'react';
import { SelectComponentsConfig, Styles } from 'react-select';
import { AsyncProps as ReactSelectAsyncProps } from 'react-select/src/Async';
import { CreatableProps as ReactSelectCreatableProps } from 'react-select/src/Creatable';
import { NamedProps as ReactSelectProps } from 'react-select/src/Select';
import { DefaultTheme } from 'styled-components';
import { BoxStylingProps } from '../Box';
import { FieldVariantName } from '../theme/variants/field';
interface VariantProp {
    /**
     * Unfortunately, `react-select` leverages `emotion` so our tx prop doesn't function within it's context. For that
     * reason alone, we cannot provide responsive variants.
     *
     * The control is disabled for this prop in this story. Instead, we map every story against every variation.
     */
    variant?: FieldVariantName;
}
export declare type SelectOption = {
    label: string;
    value: string;
    leftAdornment?: ReactNode;
    description?: string;
    ['data-testid']?: string;
};
declare type CanHaveMultipleSelections = false;
/**
 * We don't want all of the props that react-select provides. Firstly, wee don't want form control props since those come
 * from the Formik hooks. Other props, like `isClearable` are not an option we want to allow in our design system for this
 * component.
 */
declare type DesiredReactSelectProps = 'className' | 'classNamePrefix' | 'closeMenuOnScroll' | 'components' | 'controlShouldRenderValue' | 'delimiter' | 'escapeClearsValue' | 'filterOption' | 'formatGroupLabel' | 'formatOptionLabel' | 'getOptionLabel' | 'getOptionValue' | 'id' | 'inputId' | 'instanceId' | 'isOptionDisabled' | 'isOptionSelected' | 'isSearchable' | 'minMenuHeight' | 'maxMenuHeight' | 'menuIsOpen' | 'menuPlacement' | 'menuPosition' | 'menuShouldBlockScroll' | 'menuShouldScrollIntoView' | 'onMenuOpen' | 'onMenuClose' | 'onMenuScrollToTop' | 'onMenuScrollToBottom' | 'placeholder' | 'styles' | 'theme';
export interface SingleSelectProps extends Partial<Pick<ReactSelectProps<SelectOption, CanHaveMultipleSelections>, DesiredReactSelectProps>>, Pick<BoxStylingProps, 'tx'>, VariantProp {
    /**
     * TODO: Not yet best to allow, given limited functionality.
     * @see https://github.com/JedWatson/react-select/issues/1397
     */
    /**
     * The content of the label. No need for * when required - it's added automatically.
     */
    label: string;
    /**
     * An input must always have a label, but design may want it visually hidden.
     */
    isLabelHidden?: boolean;
    /**
     * Used to offer a "subtitle" to a label, where you can expand on an input's needs. You can also use this to provide
     * helpful context to people using screen readers.
     */
    description?: {
        isHidden: boolean;
        component: ReactNode;
    };
    /**
     * Should match the relevant key name inside the Formik schema.
     */
    name: string;
    /**
     * The items rendered in the menu list
     */
    options?: SelectOption[];
    /**
     * We want developers to be conscious of many things when dealing with initially asynchronously loaded options. It's
     * not as simple as: "is it loading?". For example, the component is not wholly in a loading state when leveraging a
     * searchable, [async react-select](https://react-select.com/async) because the field should not be disabled and options
     * may already be renderable.
     */
    initialLoadingState?: {
        isLoading: boolean;
        optionsListLoadingText: string;
    };
    /**
     * Leverages a ["CreatableSelect"](https://react-select.com/creatable) from [`react-select`](https://react-select.com/)
     * if defined. `onCreateOption` is a required key if the object is defined, but other, optional properties are outlined
     * [here](https://react-select.com/props#creatable-props). Note: If both `creatableConfig` and `asyncConfig` are defined,
     * `react-select/AsyncCreatable` will be used.
     */
    creatableConfig?: {
        onCreateOption: NonNullable<ReactSelectCreatableProps<SelectOption, CanHaveMultipleSelections>['onCreateOption']>;
    } & Omit<ReactSelectCreatableProps<SelectOption, CanHaveMultipleSelections>, 'onCreateOption'>;
    /**
     * Leverages an ["AsyncSelect"](https://react-select.com/async) from [`react-select`](https://react-select.com/)
     * if defined. The optional properties for async react-select components are banned in favor of universal defaults.
     * Note: If both `creatableConfig` and `loadOptions` are defined, `react-select/AsyncCreatable` will be used. Regardless
     * of the initial set of options being asynchronously defined, this prop is NOT required if the available options remain
     * static over one use (for example, a SingleSelect whose options are defined via a CMS).
     */
    loadOptions?: ReactSelectAsyncProps<SelectOption>['loadOptions'];
    /**
     * This will eventually be an optional parameter, but must be required until [this Formik issue](https://github.com/formium/formik/issues/2092#issuecomment-738606844)
     * is resolved.
     */
    required: boolean;
    /**
     * `react-select` calls this prop "isDisabled", but we're going to maintain consistency across form controls for this.
     */
    disabled?: boolean;
    readOnly?: boolean;
    'data-testid'?: string;
}
/**
 * From Kyle, with love:
 * Styling is defined in many places, and I am sorry for that. Most of the styles are defined in this exportable method
 * which can be used to define the `style` prop in combination with custom stylings at an implementation level. There are
 * two areas where stylings are not defined in this manner.
 *
 * 1. If a component is wholly custom, the styles are defined there.
 * 2. Top-level `:hover` styles didn't work 🤷‍♂️, so they've been applied to the <Box> which wraps <ReactSelect />
 */
export declare const getBaseSelectStylesWithTheme: ({ theme, hasError, variant, }: {
    theme: DefaultTheme;
    hasError: boolean;
} & Required<VariantProp>) => Partial<Styles>;
export declare const AirReactSelectComponents: SelectComponentsConfig<SelectOption, CanHaveMultipleSelections>;
export declare const SingleSelect: {
    ({ className, components, creatableConfig, description, "data-testid": topLevelTestID, disabled, id, isLabelHidden, isSearchable, label, loadOptions, initialLoadingState, name, options, placeholder, readOnly, required, styles, tx, variant, ...restOfProps }: SingleSelectProps): JSX.Element;
    displayName: string;
};
export {};