import { ReactNode, Ref, RefCallback } from 'react';
import { ComponentMetadata, OutlineVariant, noop } from '@highlight-ui/utils-commons';
import { PaletteTypes } from '@highlight-ui/color-picker';
import { TextInputProps } from '@highlight-ui/input';
export declare type Side = 'top' | 'right' | 'bottom' | 'left';
export declare type SideObject = {
    [key in Side]: number;
};
export declare type Padding = number | Partial<SideObject>;
export declare type SelectOptionType = 'single-line' | 'colored' | 'multi-line' | 'avatar';
export declare type SelectOption = {
    color?: string;
    disabled?: boolean;
    group?: string;
    label: string;
    metadata?: ComponentMetadata;
    subLabel?: string;
    value: string | number;
    avatar?: string;
    imageLoading?: React.ImgHTMLAttributes<HTMLImageElement>['loading'];
};
export declare type OldSelectTriggerProps<T extends SelectOption> = {
    selectRef: Ref<HTMLElement>;
    disabled: boolean;
    variant: SelectVariant;
    label: string;
    multiple: boolean;
    onClick: typeof noop;
    selectedOptions: T[];
    visible: boolean;
    triggerId?: string;
    setListVisibility: (visible: boolean) => void;
    onClear?: (evt: React.MouseEvent | React.KeyboardEvent) => void;
} & Pick<SelectProps<T>, 'outline' | 'autoFocus'>;
export declare type AddOptionsFooterProps = {
    createButtonProps: CreateButtonProps;
    inputProps?: Pick<TextInputProps, 'placeholder' | 'metadata'>;
    onCreate: (option: Pick<SelectOption, 'value' | 'color'>) => void;
    colorPickerOptions?: ColorPickerOptions;
    multiple?: boolean;
};
export declare type CreateButtonProps = {
    label: string;
    loading?: boolean;
    metadata?: ComponentMetadata;
};
export declare type SelectOptionLabelProps<T extends SelectOption> = {
    option: T;
    highlightedText: string;
    selected: boolean;
    disabled?: boolean;
    enableSubLabelSearch?: boolean;
};
export declare type ColorPickerOptions = {
    initialColor: string;
    metadata?: ComponentMetadata;
    palette?: PaletteTypes;
    title: string;
};
export declare type SelectVariant = 'inline' | 'full-width';
export declare type SubmitFooterProps<T extends SelectOption> = {
    /**
     * Gets called when Submit button pressed
     */
    onSubmit: (options: T[]) => void;
    /**
     * Gets called when Cancel button pressed or visibility of the list options changed to false
     */
    onCancel: typeof noop;
    /**
     * Label for `Submit` button
     */
    submitLabel?: string;
    /**
     * Label for `Cancel` button
     */
    cancelLabel?: string;
};
export declare type SelectProps<T extends SelectOption> = {
    /**
     * Class name to apply to the element
     */
    className?: string;
    /**
     * Use new flow triggers and disable custom trigger
     */
    enableFlowTriggers?: boolean;
    /**
     * Use new atomized search input component (`false` by default)
     */
    enableNewSearchInput?: boolean;
    /**
     * On new Multi select trigger limit visibility to two rows when dropdown visible (`true` by default)
     */
    limitTwoRows?: boolean;
    /**
     * Class name to apply to the List element
     */
    listClassName?: string;
    /**
     * Should the options list disappear by each selection?
     */
    closeOnSelect?: boolean;
    /**
     * Should component be enabled or disabled
     */
    disabled?: boolean;
    /**
     * `inline` when used outside forms and `full-width` when used inside forms.
     */
    variant?: SelectVariant;
    /**
     * Label for `Select all` functionality when `multiple` prop is true
     */
    selectAllLabel?: string;
    metadata?: ComponentMetadata;
    /**
     * Set to `true` when you have a `multi-select` scenario
     */
    multiple?: boolean;
    /**
     * Gets called on each key input inside list's search input field
     */
    onSearchChange?: (search: string) => void;
    /**
     * Gets called each time an option is selected
     */
    onSelect?: (e: T[]) => void;
    /**
     * Gets called whenever the visibility of the select's list has changed
     */
    onListVisibilityChange?: (visible: boolean) => void;
    /**
     * String specifying the option type that should be rendered. Allowed values are `'single-line'`, `'multi-line'`, `'colored'` and `'avatar'`.
     */
    optionType?: SelectOptionType;
    /**
     * List of objects of generic type `T` extending `SelectOption`
     */
    options: T[];
    /**
     * Initial or "controlled component" mode's selected options
     */
    selectedOptions?: T[];
    /**
     * Label for displaying the empty state of the Select list
     */
    emptyStateLabel?: string;
    /**
     * Function to return custom empty options list message
     */
    renderEmptyState?: () => ReactNode;
    /**
     * ⚠️ _Consult a designer before using this prop, in most cases it shouldn't be used._
     * Determines whether or not a search input should be rendered in the select list. If set to true, the search input will only render if there are more than 7 options.
     */
    searchable?: boolean;
    /**
     * If Select is searchable search input will render if the number of options is more or equal to this number.
     */
    minOptionsToDisplaySearch?: number;
    /**
     * Whether or not the search field should get the focus automatically each time the list opens up
     */
    searchAutofocus?: boolean;
    /**
     * Initial search field value
     */
    searchInitialValue?: string;
    /**
     * Function to return a custom trigger
     */
    renderTrigger?: (e: OldSelectTriggerProps<T> & {
        ref: RefCallback<HTMLElement>;
    }) => JSX.Element;
    /**
     * Label being shown by default on the trigger button
     */
    triggerLabel?: string;
    /**
     * No search results message
     */
    searchNoResultsLabel?: string;
    /**
     * No search results message
     */
    searchPlaceholder?: string;
    outline?: OutlineVariant;
    /**
     * Automatically focus the Select's trigger on mount
     */
    autoFocus?: boolean;
    triggerId?: string;
    /**
     * Sets the options for the AddOptionsFooter. It's not mandatory and it works both for single and multiple select. For the multiple select, the default footer is always removed and the AddOptionsFooter is always visible when the `creatableOptions` prop has a value.
     */
    creatableOptions?: AddOptionsFooterProps;
    /**
     * Defines wether to render the clearing x button. Will only work with the default trigger.
     */
    isClearable?: boolean;
    /**
     * Highlights this text in the options list only when the Select is not searchable.
     */
    highlightedText?: string;
    /**
     * Display the loading state of the list.
     */
    isLoading?: boolean;
    /**
     * Enable the submit button
     */
    submitOptions?: SubmitFooterProps<T>;
    /**
     * Search in subLabel text when `optionType` is `multi-line` (default value `false`)
     */
    enableSubLabelSearch?: boolean;
    /**
     * If Select contains groups, the group name will be displayed when the number of groups is more or equal to this number (default 2).
     */
    minGroupsToDisplayHeader?: number;
    /**
     * Reset search input when the popover closes
     */
    resetSearchOnClose?: boolean;
    /**
     * Additional padding to use when detecting collisions of the popover list of select options
     */
    popoverCollisionPadding?: Padding;
};