import React from 'react';
import { type BoxProps } from '../Box/Box';
import { type BaseActiveDropdownItemProps } from './BaseActiveDropdownItem';
import './BaseDropdownAnimation.css';
import { type BaseDropdownGroup, type BaseDropdownOption } from './BaseDropdown.utils';
export type { BaseDropdownGroup, BaseDropdownOption, } from './BaseDropdown.utils';
export { NO_SELECTION_VALUE } from './BaseDropdown.utils';
/** gap between the icon and the label of the item */
export declare const HORIZONTAL_ICON_GAP = "4";
/** safe spacing, ie. padding, on the left & right of the active item and dropdown item */
export declare const HORIZONTAL_OUTER_PADDING_X = "12";
export interface BaseDropdownProps<T = string, G extends string = never> {
    value: string;
    activeItemProps?: Partial<Pick<BaseActiveDropdownItemProps, 'iconComponent' | 'label' | 'color' | 'alwaysVisibleLabel' | 'tagComponent' | 'tagPosition' | 'background' | 'labelStyle' | 'compactIcon'>>;
    /**
     * List of groups to show and the corresponding labels, in the expected order.
     *
     * _Defaults to ungrouped dropdown behavior_
     */
    groups?: BaseDropdownGroup<T, G>[];
    /**
     * Additional group displayed after configured groups (only if there are non-empty groups).
     * - "all": display all options (grouped options will effectively be shown twice in total)
     * - "others": display only ungrouped options
     *
     * _Defaults to "others"_
     */
    additionalGroup?: 'all' | 'others';
    /**
     * Label for the {@link additionalGroup}.
     *
     * Shows only if the additional group is not empty.
     */
    additionalGroupLabel?: string;
    /**
     * If specified, show an "Unselect" option with value {@link NO_SELECTION_VALUE} above other options/groups
     *
     * _Defaults to `false`_
     */
    allowUnselect?: boolean;
    /**
     * Label for {@link allowUnselect}
     */
    unselectLabel?: string;
    options: BaseDropdownOption<T>[];
    onOpen?: () => void;
    onOptionSelected?: (item: BaseDropdownOption<T>) => void;
    renderDropdownOption: (item: BaseDropdownOption<T>, isSelected: boolean) => React.ReactNode;
    searchableOptions?: boolean;
    searchPlaceholder?: string;
    placeholder?: string;
    resetSearchOnClose?: boolean;
    openToTopOnMobile?: boolean;
    alwaysOpenToTop?: boolean;
    openDropdownFullWidth?: boolean;
    preloadIconUrls?: string[];
    horizontalIconGap?: BoxProps['gap'];
    openDropdownBackgroundColor?: BoxProps['background'];
    size?: BaseActiveDropdownItemProps['size'];
    isLoading?: boolean;
    label?: string;
    /**
     * If provided, the dropdown will be scrollable and the max height will be set to the provided value.
     * This is useful for dropdowns that have a lot of options and normally would be too tall to fit in the modal and overflow beyond the modal is not supported right now.
     * This values should be set so that the last dropdown item is partially visible to indicate that there are more options.
     */
    maxDropdownHeight?: number;
    dropdownWidth?: number;
    dropdownAlign?: 'start' | 'center' | 'end';
    testId?: string;
}
declare function BaseDropdown<T extends string = string, G extends string = never>({ activeItemProps, value, options, groups, additionalGroup, additionalGroupLabel, allowUnselect, unselectLabel, onOptionSelected, onOpen, renderDropdownOption, searchableOptions, searchPlaceholder, placeholder, resetSearchOnClose, openToTopOnMobile, alwaysOpenToTop, openDropdownFullWidth, isLoading, preloadIconUrls, horizontalIconGap, openDropdownBackgroundColor, size, label, maxDropdownHeight, dropdownWidth, dropdownAlign, testId, }: BaseDropdownProps<T, G>): React.JSX.Element;
export default BaseDropdown;