import { ReactNode, SyntheticEvent, FC, RefObject, KeyboardEvent, MutableRefObject } from 'react';
import { SelectMarker } from '../theme';
import { PopOverProps } from '../PopOver';
import { SelectVariant } from './BaseSelectSelector';
export declare type DirectionType = 'auto' | 'up' | 'down';
export interface SelectPopoverProps<V extends string = string> extends Required<Pick<BaseSelectProps, 'direction' | 'align' | 'compact'>>, PopOverProps {
    readonly anchorEl: HTMLDivElement | null;
    readonly onKeyDown: (event: KeyboardEvent) => void;
    readonly isOpen: boolean;
    readonly listRef: RefObject<HTMLUListElement>;
    readonly itemRefs: MutableRefObject<Map<number, HTMLLIElement>>;
    readonly valueIndex: number | null;
    readonly optionHandlers: ReadonlyArray<(event: SyntheticEvent) => void>;
    readonly options: ReadonlyArray<BaseOption<V>>;
    readonly noOptionsLabel?: string;
    readonly onScroll: VoidFunction;
    readonly selectMarker: SelectMarker;
}
export declare const SelectPopover: FC<SelectPopoverProps>;
export declare enum SelectKeys {
    Space = " ",
    ArrowUp = "ArrowUp",
    ArrowDown = "ArrowDown",
    Enter = "Enter",
    Escape = "Escape",
    Esc = "Esc"
}
export interface BaseOption<V extends string = string> {
    readonly value: V;
    readonly component: ReactNode;
    readonly disabled?: boolean;
}
export declare type SelectHandler<V extends string = string> = (value: V) => void;
export interface BaseSelectProps<V extends string = string> extends Omit<PopOverProps, 'anchorEl' | 'value' | 'onChange' | 'onBlur' | 'onKeyDown'> {
    /**
     * Selects an item in the dropdown menu.
     * Must pre-exist in the dropdown menu and written in lowercase.
     * Otherwise no value is selected.
     */
    readonly value: V;
    /**
     * Used to create an array of selectable options.
     */
    readonly options: ReadonlyArray<BaseOption<V>>;
    /**
     * Executes a JavaScript when a user changes the selected option of an element.
     */
    readonly onChange?: (value: V) => void;
    /**
     * Executes a JavaScript when a user leaves an input field.
     */
    readonly onBlur?: (value: boolean) => void;
    /**
     * Used to determine the width of a dropdown menu.
     */
    readonly width?: 'small' | 'medium' | 'large' | 'full';
    /**
     * Override theme's default setting for `compact` if set.
     */
    readonly compact?: boolean;
    /**
     * Override theme's default setting for `selectMarker` if set.
     * Used to choose between `background` or `check`.
     */
    readonly selectMarker?: SelectMarker;
    /**
     * Used to choose between `filled` or `transparent` or`framed` variant.
     * Default: `filled`
     */
    readonly variant?: SelectVariant;
    /**
     * Placeholder text when no value has been selected.
     */
    readonly component: ReactNode;
    /**
     * If `true`, select will be disabled.
     */
    readonly disabled?: boolean;
    /**
     * Used to determine which direction the menu pops out in.
     * Default: `auto`
     */
    readonly direction?: DirectionType;
    /**
     * Aligns the menu either left or right.
     * Default: `left`
     */
    readonly align?: 'left' | 'right';
    /**
     * Displays an error if something is at fault.
     */
    readonly error?: string;
    /**
     * Text that is shown when all available options are selected
     * in the dropdown list
     */
    readonly noOptionsLabel?: string;
}
export declare function BaseSelect<V extends string = string>({ value, options, onChange, onBlur, width, compact: compactFromProps, selectMarker: selectMarkerFromProps, variant, component, disabled, direction, align, error, noOptionsLabel, inline, ...props }: BaseSelectProps<V>): JSX.Element;