import { ReactElement } from 'react';
import { DropdownInputPosition, DropdownItemSharedProps, DropdownLoadingPosition, DropdownOption, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
import { ButtonProps } from '../Button';
import { InputProps } from '../Input';
import { PopperPlacement } from '../Popper';
import { IconDefinition } from '@mezzanine-ui/icons';
export interface DropdownProps extends DropdownItemSharedProps {
    /**
     * The text of the cancel button.
     */
    actionCancelText?: string;
    /**
     * The text of the clear button.
     */
    actionClearText?: string;
    /**
     * The text of the confirm button.
     */
    actionConfirmText?: string;
    /**
     * The custom action button props of the dropdown.
     */
    actionCustomButtonProps?: ButtonProps;
    /**
     * The text of the custom action button.
     */
    actionText?: string;
    /**
     * The active option index for hover/focus state and Enter selection.
     * Can be set by both keyboard navigation and mouse hover (e.g. in AutoComplete).
     */
    activeIndex?: number | null;
    /**
     * The keyboard-only active index.
     * When provided, only this index triggers the focus ring (`--keyboard-active` CSS class).
     * Mouse hover updates `activeIndex` for Enter selection but should not update this.
     * When omitted, falls back to the internal uncontrolled index (set only by built-in keyboard navigation).
     */
    keyboardActiveIndex?: number | null;
    /**
     * The children of the dropdown.
     * This can be a button or an input.
     */
    children: ReactElement<ButtonProps> | ReactElement<InputProps>;
    /**
     * Whether the dropdown is disabled.
     */
    disabled?: boolean;
    /**
     * The id of the dropdown.
     */
    id?: string;
    /**
     * The position of the input.
     * @default 'outside'
     */
    inputPosition?: DropdownInputPosition;
    /**
     * Whether to match the input value.
     * @default false
     */
    isMatchInputValue?: boolean;
    /**
     * The text to follow for highlighting in dropdown options.
     * If provided, this will be used instead of auto-extracting from children props.
     */
    followText?: string;
    /**
     * The listbox id of the dropdown.
     */
    listboxId?: string;
    /**
     * The aria-label for the listbox.
     * If not provided, a default label will be used when there are no options.
     */
    listboxLabel?: string;
    /**
     * The max height of the dropdown list.
     */
    maxHeight?: number | string;
    /**
     * Override the default `min-width` of the dropdown list.
     * Accepts a number (pixels) or any valid CSS length string.
     * Pass `0` to remove the minimum width constraint entirely — useful when `sameWidth` controls the width.
     * @default spacing token `size-container-tiny`
     */
    minWidth?: number | string;
    /**
     * Whether the dropdown is open (controlled).
     */
    open?: boolean;
    /**
     * Callback fired when the action cancel is clicked.
     */
    onActionCancel?: () => void;
    /**
     * Callback fired when the action clear is clicked.
     */
    onActionClear?: () => void;
    /**
     * Callback fired when the action confirm is clicked.
     */
    onActionConfirm?: () => void;
    /**
     * Callback fired when the action custom is clicked.
     */
    onActionCustom?: () => void;
    /**
     * Callback fired when the dropdown is closed.
     */
    onClose?: () => void;
    /**
     * Callback fired when the item is hovered.
     */
    onItemHover?: (index: number) => void;
    /**
     * Callback fired when the dropdown is opened.
     */
    onOpen?: () => void;
    /**
     * Callback fired when the dropdown visibility changes.
     */
    onVisibilityChange?: (open: boolean) => void;
    /**
     * Callback fired when the item is selected.
     */
    onSelect?: (option: DropdownOption) => void;
    /**
     * The options of the dropdown.
     */
    options: DropdownOption[];
    /**
     * The placement of the dropdown.
     */
    placement?: PopperPlacement;
    /**
     * Custom width for the dropdown.
     * Can be a number (pixels) or a string (e.g., '200px', '50%').
     * If provided, this takes precedence over `sameWidth`.
     */
    customWidth?: number | string;
    /**
     * Whether to set the same width as its anchor element.
     * @default false
     */
    sameWidth?: boolean;
    /**
     * If true, display a bar at the top of the dropdown action area.
     * @default false
     */
    showActionShowTopBar?: boolean;
    /**
     * Whether to show the actions.
     */
    showDropdownActions?: boolean;
    /**
     * The type of the dropdown.
     */
    type?: DropdownType;
    /**
     * Whether clicking an option row should toggle checked state in multiple mode.
     * Passed through to `DropdownItem`.
     */
    toggleCheckedOnClick?: boolean;
    /**
     * The z-index of the dropdown.
     */
    zIndex?: number | string;
    /**
     * The status of the dropdown (loading or empty).
     */
    status?: DropdownStatusType;
    /**
     * The text of the dropdown loading status.
     */
    loadingText?: string;
    /**
     * The text of the dropdown empty status.
     */
    emptyText?: string;
    /**
     * The icon of the dropdown empty status.
     */
    emptyIcon?: IconDefinition;
    /**
     * The position to display the loading status.
     * Only takes effect when `status === 'loading'`.
     * @default 'full'
     */
    loadingPosition?: DropdownLoadingPosition;
    /**
     * Whether to enable portal.
     * This prop is only relevant when `inputPosition` is set to 'outside'.
     * Controls whether the dropdown content is rendered within the current hierarchy or portaled to the body.
     * @default true
     */
    globalPortal?: boolean;
    /**
     * Callback fired when the dropdown list reaches the bottom.
     * Only fires when `maxHeight` is set and the list is scrollable.
     */
    onReachBottom?: () => void;
    /**
     * Callback fired when the dropdown list leaves the bottom.
     * Only fires when `maxHeight` is set and the list is scrollable.
     */
    onLeaveBottom?: () => void;
    /**
     * Callback fired when the dropdown list is scrolled.
     * Receives the scroll event and computed scroll information.
     */
    onScroll?: (computed: {
        scrollTop: number;
        maxScrollTop: number;
    }, target: HTMLDivElement) => void;
    /**
     * Whether to defer the initialization of OverlayScrollbars.
     * This can improve initial render performance.
     * @default true
     */
    scrollbarDefer?: boolean | object;
    /**
     * Whether to disable the custom scrollbar component.
     * When false (default), Scrollbar component will be used when maxHeight is set.
     * When true, falls back to native div scrolling (backward compatible).
     * @default false
     */
    scrollbarDisabled?: boolean;
    /**
     * The maximum width of the scrollable container.
     * Can be a CSS value string (e.g., '500px', '100%') or a number (treated as pixels).
     */
    scrollbarMaxWidth?: number | string;
    /**
     * Additional options to pass to OverlayScrollbars.
     * @see https://kingsora.github.io/OverlayScrollbars/#!documentation/options
     */
    scrollbarOptions?: import('overlayscrollbars').PartialOptions;
}
/**
 * 下拉選單元件，以 `Button` 或 `Input` 作為觸發元素，點擊後展開選項列表。
 *
 * 支援受控（`open`）與非受控兩種開關模式，可透過 `type` 切換單選或多選行為，
 * 並透過 `inputPosition` 選擇彈出（outside）或內嵌（inside）的輸入框位置。
 * 可搭配 `showDropdownActions` 顯示確認／取消操作列，以及 `status` 設定
 * 載入中或空狀態的顯示內容。
 *
 * @example
 * ```tsx
 * import Dropdown from '@mezzanine-ui/react/Dropdown';
 * import Button from '@mezzanine-ui/react/Button';
 * import Input from '@mezzanine-ui/react/Input';
 *
 * // 以 Button 為觸發元素
 * <Dropdown
 *   options={[{ label: '選項一', value: '1' }, { label: '選項二', value: '2' }]}
 *   onSelect={(option) => console.log(option)}
 * >
 *   <Button>請選擇</Button>
 * </Dropdown>
 *
 * // 以 Input 為觸發元素，同寬展開
 * <Dropdown
 *   options={[{ label: '台北', value: 'tpe' }, { label: '台中', value: 'txg' }]}
 *   sameWidth
 *   onSelect={(opt) => setValue(opt.value)}
 * >
 *   <Input placeholder="搜尋城市" />
 * </Dropdown>
 *
 * // 多選模式搭配操作列
 * <Dropdown
 *   type="multiple"
 *   options={options}
 *   showDropdownActions
 *   actionConfirmText="確認"
 *   actionCancelText="取消"
 *   onActionConfirm={handleConfirm}
 * >
 *   <Button>多選</Button>
 * </Dropdown>
 * ```
 *
 * @see {@link Select} 封裝好選取邏輯的選擇器元件
 * @see {@link AutoComplete} 具備自動補全功能的輸入元件
 */
export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;