import { DropdownLoadingPosition, DropdownOption, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
import { SelectInputSize } from '@mezzanine-ui/core/select';
import { FormElementFocusHandlers } from '../Form';
import { SelectTriggerInputProps, SelectTriggerProps, SelectValue } from './typings';
export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'type' | 'renderValue' | 'value'>, FormElementFocusHandlers {
    /**
     * Direct options array for dropdown (supports tree structure).
     * If provided, `type` will be automatically set.
     */
    options?: DropdownOption[];
    /**
     * The type of dropdown.
     * @default 'default'
     */
    type?: DropdownType;
    /**
     * The other native props for input element.
     */
    inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
    /**
     * The max height of the dropdown list.
     */
    menuMaxHeight?: number | string;
    /**
     * Popup menu scroll listener
     */
    onScroll?: (computed: {
        scrollTop: number;
        maxScrollTop: number;
    }, target: HTMLDivElement) => void;
    /**
     * select input placeholder
     */
    placeholder?: string;
    /**
     * Whether the input is readonly.
     * @default false
     */
    readOnly?: boolean;
    /**
     * To customize rendering select input value
     */
    renderValue?(values: SelectValue[] | SelectValue | null): string;
    /**
     * Whether the selection is required.
     * @default false
     */
    required?: boolean;
    /**
     * The size of input.
     */
    size?: SelectInputSize;
    /**
     * The z-index of the dropdown.
     */
    dropdownZIndex?: number | string;
    /**
     * Whether to enable portal for the dropdown.
     * @default true
     */
    globalPortal?: boolean;
    /**
     * Whether the dropdown is in a loading state.
     * @default false
     */
    loading?: boolean;
    /**
     * The position of the loading indicator.
     * @default 'bottom'
     */
    loadingPosition?: DropdownLoadingPosition;
    /**
     * The text displayed while loading.
     */
    loadingText?: string;
    /**
     * Callback fired when the dropdown list leaves the bottom.
     */
    onLeaveBottom?: () => void;
    /**
     * Callback fired when the dropdown list reaches the bottom.
     */
    onReachBottom?: () => void;
}
export type SelectMultipleProps = SelectBaseProps & {
    /**
     * The default selection
     */
    defaultValue?: SelectValue[];
    /**
     * Controls the layout of trigger.
     */
    mode: 'multiple';
    /**
     * The change event handler of input element.
     */
    onChange?(newOptions: SelectValue[]): void;
    /**
     * To customize rendering select input value
     */
    renderValue?(values: SelectValue[]): string;
    /**
     * The value of selection.
     * @default undefined
     */
    value?: SelectValue[];
};
export type SelectSingleProps = SelectBaseProps & {
    /**
     * The default selection
     */
    defaultValue?: SelectValue;
    /**
     * Controls the layout of trigger.
     */
    mode?: 'single';
    /**
     * The change event handler of input element.
     */
    onChange?(newOptions: SelectValue | null): void;
    /**
     * To customize rendering select input value
     */
    renderValue?(values: SelectValue | null): string;
    /**
     * The value of selection.
     * @default undefined
     */
    value?: SelectValue | null;
};
export type SelectProps = SelectMultipleProps | SelectSingleProps;
/**
 * 下拉選擇元件，支援單選與多選兩種模式。
 *
 * 透過 `mode` 切換 `single`（單選，預設）或 `multiple`（多選，以標籤呈現已選項目）。
 * 傳入 `options` 陣列即可自動建立下拉選單；多選模式下若 options 含有 `children` 巢狀結構，
 * 會自動切換為樹狀選取（`type: 'tree'`）並為所有選項加上勾選框。
 * 支援 `clearable`、`readOnly`、`loading` 狀態，以及透過 `renderValue` 自訂顯示文字。
 *
 * @example
 * ```tsx
 * import Select from '@mezzanine-ui/react/Select';
 *
 * const options = [
 *   { id: '1', name: '選項一' },
 *   { id: '2', name: '選項二' },
 *   { id: '3', name: '選項三' },
 * ];
 *
 * // 單選
 * <Select options={options} placeholder="請選擇" onChange={(val) => console.log(val)} />
 *
 * // 多選
 * <Select mode="multiple" options={options} placeholder="可多選" onChange={(vals) => console.log(vals)} />
 *
 * // 帶搜尋功能（搭配 AutoComplete）
 * <Select options={options} clearable placeholder="選擇或搜尋" />
 * ```
 *
 * @see {@link AutoComplete} 支援自由輸入文字的搜尋下拉元件
 * @see {@link Dropdown} Select 底層使用的下拉清單容器元件
 * @see {@link useSelectValueControl} 用於在受控模式下管理選取值的 Hook
 */
declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
export default Select;