import { CSSProperties, PropType, VNode } from 'vue'; import { type ValidateStatus } from '../_base/baseComponent'; import type { PopoverProps } from '../popover'; import Event from '@douyinfe/semi-foundation/lib/es/utils/Event'; import { InputProps } from '../input'; import type { OptionProps } from './option'; import Option from './option'; import OptionGroup from './optionGroup'; import { Subtract } from 'utility-types'; import '@douyinfe/semi-foundation/lib/es/select/select.css'; import type { Position } from '@douyinfe/semi-foundation/lib/es/tooltip/foundation'; import type { TooltipProps } from '../tooltip'; import { AriaAttributes } from '../AriaAttributes'; import { CombineProps, VueJsxNode } from '../interface'; export type { OptionProps } from './option'; export type { OptionGroupProps } from './optionGroup'; export type { VirtualRowProps } from './virtualRow'; type ExcludeInputType = { value?: InputProps['value']; onFocus?: InputProps['onFocus']; onChange?: InputProps['onChange']; }; export interface optionRenderProps { key?: any; label?: string | VNode | VNode[] | number; value?: string | number; style?: CSSProperties; className?: string; selected?: boolean; focused?: boolean; show?: boolean; disabled?: boolean; onMouseEnter?: (e: MouseEvent) => any; onClick?: (e: MouseEvent) => any; [x: string]: any; } export interface SelectedItemProps { value: OptionProps['value']; label: OptionProps['label']; _show?: boolean; _selected: boolean; _scrollIndex?: number; } export interface TriggerRenderProps { value: SelectedItemProps[]; inputValue: string; onSearch: (inputValue: string) => void; onClear: () => void; onRemove: (option: OptionProps) => void; disabled: boolean; placeholder: string; componentProps: Record; } export interface selectMethod { clearInput?: () => void; selectAll?: () => void; deselectAll?: () => void; focus?: () => void; close?: () => void; open?: () => void; } export type SelectSize = 'small' | 'large' | 'default'; export interface virtualListProps { itemSize?: number; height?: number; width?: string | number; } export type RenderSingleSelectedItemFn = (optionNode: Record) => VNode; export type RenderMultipleSelectedItemFn = (optionNode: Record, multipleProps: { index: number; disabled: boolean; onClose: (tagContent: VNode, e: MouseEvent) => void; }) => { isRenderInTag: boolean; content: VNode; }; export type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn; export type SelectProps = { 'aria-describedby'?: AriaAttributes['aria-describedby']; 'aria-errormessage'?: AriaAttributes['aria-errormessage']; 'aria-invalid'?: AriaAttributes['aria-invalid']; 'aria-label'?: AriaAttributes['aria-label']; 'aria-labelledby'?: AriaAttributes['aria-labelledby']; 'aria-required'?: AriaAttributes['aria-required']; id?: string; autoFocus?: boolean; autoClearSearchValue?: boolean; arrowIcon?: VueJsxNode; borderless?: boolean; clearIcon?: VueJsxNode; defaultValue?: string | number | any[] | Record; value?: string | number | any[] | Record; placeholder?: VNode | string; onChange?: (value: SelectProps['value']) => void; multiple?: boolean; filter?: boolean | ((inpueValue: string, option: OptionProps) => boolean); max?: number; maxTagCount?: number; maxHeight?: string | number; style?: CSSProperties; className?: string; size?: SelectSize; disabled?: boolean; emptyContent?: VNode; expandRestTagsOnClick?: boolean; onDropdownVisibleChange?: (visible: boolean) => void; zIndex?: number; position?: Position; onSearch?: (value: string, event: KeyboardEvent | MouseEvent) => void; dropdownClassName?: string; dropdownStyle?: CSSProperties; dropdownMargin?: PopoverProps['margin']; ellipsisTrigger?: boolean; outerTopSlot?: VNode; innerTopSlot?: VNode; outerBottomSlot?: VNode; innerBottomSlot?: VNode; optionList?: OptionProps[]; dropdownMatchSelectWidth?: boolean; loading?: boolean; defaultOpen?: boolean; validateStatus?: ValidateStatus; defaultActiveFirstOption?: boolean; onChangeWithObject?: boolean; suffix?: VNode | string; searchPosition?: string; searchPlaceholder?: string; prefix?: VNode | string; insetLabel?: VNode | string; insetLabelId?: string; inputProps?: Subtract; showClear?: boolean; showArrow?: boolean; renderSelectedItem?: RenderSelectedItemFn; renderCreateItem?: (inputValue: OptionProps['value'], focus: boolean, style?: CSSProperties) => VNode; renderOptionItem?: (props: optionRenderProps) => VNode; onMouseEnter?: (e: MouseEvent) => any; onMouseLeave?: (e: MouseEvent) => any; clickToHide?: boolean; onExceed?: (option: OptionProps) => void; onCreate?: (option: OptionProps) => void; remote?: boolean; onDeselect?: (value: SelectProps['value'], option: Record) => void; onSelect?: (value: SelectProps['value'], option: Record) => void; allowCreate?: boolean; triggerRender?: (props?: TriggerRenderProps) => VNode; onClear?: () => void; virtualize?: virtualListProps; onFocus?: (e: FocusEvent) => void; onBlur?: (e: FocusEvent) => void; onListScroll?: (e: Event) => void; preventScroll?: boolean; showRestTagsPopover?: boolean; restTagsPopoverProps?: PopoverProps; isInInputGroup?: boolean; } & Pick; export interface SelectState { isOpen: boolean; isFocus: boolean; options: Array; selections: Map; dropdownMinWidth: number; optionKey: number; inputValue: string; showInput: boolean; focusIndex: number; keyboardEventSet: any; optionGroups: Array; isHovering: boolean; isFocusInContainer: boolean; isFullTags: boolean; overflowItemCount: number; } export declare const vuePropsType: CombineProps; declare const Select: import("vue").DefineComponent | { type: PropType; default?: any; required?: false; }; 'aria-errormessage': PropType | { type: PropType; default?: any; required?: false; }; 'aria-invalid': PropType | { type: PropType; default?: any; required?: false; }; 'aria-label': PropType | { type: PropType; default?: any; required?: false; }; 'aria-labelledby': PropType | { type: PropType; default?: any; required?: false; }; 'aria-required': PropType | { type: PropType; default?: any; required?: false; }; id: PropType | { type: PropType; default?: any; required?: false; }; autoFocus: PropType | { type: PropType; default?: any; required?: false; }; autoClearSearchValue: PropType | { type: PropType; default?: any; required?: false; }; arrowIcon: PropType | { type: PropType; default?: any; required?: false; }; borderless: PropType | { type: PropType; default?: any; required?: false; }; clearIcon: PropType | { type: PropType; default?: any; required?: false; }; defaultValue: PropType> | { type: PropType>; default?: any; required?: false; }; value: PropType> | { type: PropType>; default?: any; required?: false; }; placeholder: PropType> | { type: PropType>; default?: any; required?: false; }; onChange: PropType<(value: SelectProps["value"]) => void> | { type: PropType<(value: SelectProps["value"]) => void>; default?: any; required?: false; }; multiple: PropType | { type: PropType; default?: any; required?: false; }; filter: PropType boolean)> | { type: PropType boolean)>; default?: any; required?: false; }; max: PropType | { type: PropType; default?: any; required?: false; }; maxTagCount: PropType | { type: PropType; default?: any; required?: false; }; maxHeight: PropType | { type: PropType; default?: any; required?: false; }; style: PropType | { type: PropType; default?: any; required?: false; }; className: PropType | { type: PropType; default?: any; required?: false; }; size: PropType | { type: PropType; default?: any; required?: false; }; disabled: PropType | { type: PropType; default?: any; required?: false; }; emptyContent: PropType> | { type: PropType>; default?: any; required?: false; }; expandRestTagsOnClick: PropType | { type: PropType; default?: any; required?: false; }; onDropdownVisibleChange: PropType<(visible: boolean) => void> | { type: PropType<(visible: boolean) => void>; default?: any; required?: false; }; zIndex: PropType | { type: PropType; default?: any; required?: false; }; position: PropType<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver"> | { type: PropType<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">; default?: any; required?: false; }; onSearch: PropType<(value: string, event: KeyboardEvent | MouseEvent) => void> | { type: PropType<(value: string, event: KeyboardEvent | MouseEvent) => void>; default?: any; required?: false; }; dropdownClassName: PropType | { type: PropType; default?: any; required?: false; }; dropdownStyle: PropType | { type: PropType; default?: any; required?: false; }; dropdownMargin: PropType | { type: PropType; default?: any; required?: false; }; ellipsisTrigger: PropType | { type: PropType; default?: any; required?: false; }; outerTopSlot: PropType> | { type: PropType>; default?: any; required?: false; }; innerTopSlot: PropType> | { type: PropType>; default?: any; required?: false; }; outerBottomSlot: PropType> | { type: PropType>; default?: any; required?: false; }; innerBottomSlot: PropType> | { type: PropType>; default?: any; required?: false; }; optionList: PropType | { type: PropType; default?: any; required?: false; }; dropdownMatchSelectWidth: PropType | { type: PropType; default?: any; required?: false; }; loading: PropType | { type: PropType; default?: any; required?: false; }; defaultOpen: PropType | { type: PropType; default?: any; required?: false; }; validateStatus: PropType<"default" | "error" | "warning" | "success"> | { type: PropType<"default" | "error" | "warning" | "success">; default?: any; required?: false; }; defaultActiveFirstOption: PropType | { type: PropType; default?: any; required?: false; }; onChangeWithObject: PropType | { type: PropType; default?: any; required?: false; }; suffix: PropType> | { type: PropType>; default?: any; required?: false; }; searchPosition: PropType | { type: PropType; default?: any; required?: false; }; searchPlaceholder: PropType | { type: PropType; default?: any; required?: false; }; prefix: PropType> | { type: PropType>; default?: any; required?: false; }; insetLabel: PropType> | { type: PropType>; default?: any; required?: false; }; insetLabelId: PropType | { type: PropType; default?: any; required?: false; }; inputProps: PropType> | { type: PropType>; default?: any; required?: false; }; showClear: PropType | { type: PropType; default?: any; required?: false; }; showArrow: PropType | { type: PropType; default?: any; required?: false; }; renderSelectedItem: PropType | { type: PropType; default?: any; required?: false; }; renderCreateItem: PropType<(inputValue: OptionProps["value"], focus: boolean, style?: CSSProperties) => VNode> | { type: PropType<(inputValue: OptionProps["value"], focus: boolean, style?: CSSProperties) => VNode>; default?: any; required?: false; }; renderOptionItem: PropType<(props: optionRenderProps) => VNode> | { type: PropType<(props: optionRenderProps) => VNode>; default?: any; required?: false; }; onMouseEnter: PropType<(e: MouseEvent) => any> | { type: PropType<(e: MouseEvent) => any>; default?: any; required?: false; }; onMouseLeave: PropType<(e: MouseEvent) => any> | { type: PropType<(e: MouseEvent) => any>; default?: any; required?: false; }; clickToHide: PropType | { type: PropType; default?: any; required?: false; }; onExceed: PropType<(option: OptionProps) => void> | { type: PropType<(option: OptionProps) => void>; default?: any; required?: false; }; onCreate: PropType<(option: OptionProps) => void> | { type: PropType<(option: OptionProps) => void>; default?: any; required?: false; }; remote: PropType | { type: PropType; default?: any; required?: false; }; onDeselect: PropType<(value: SelectProps["value"], option: Record) => void> | { type: PropType<(value: SelectProps["value"], option: Record) => void>; default?: any; required?: false; }; onSelect: PropType<(value: SelectProps["value"], option: Record) => void> | { type: PropType<(value: SelectProps["value"], option: Record) => void>; default?: any; required?: false; }; allowCreate: PropType | { type: PropType; default?: any; required?: false; }; triggerRender: PropType<(props?: TriggerRenderProps) => VNode> | { type: PropType<(props?: TriggerRenderProps) => VNode>; default?: any; required?: false; }; onClear: PropType<() => void> | { type: PropType<() => void>; default?: any; required?: false; }; virtualize: PropType | { type: PropType; default?: any; required?: false; }; onFocus: PropType<(e: FocusEvent) => void> | { type: PropType<(e: FocusEvent) => void>; default?: any; required?: false; }; onBlur: PropType<(e: FocusEvent) => void> | { type: PropType<(e: FocusEvent) => void>; default?: any; required?: false; }; onListScroll: PropType<(e: Event) => void> | { type: PropType<(e: Event) => void>; default?: any; required?: false; }; preventScroll: PropType | { type: PropType; default?: any; required?: false; }; showRestTagsPopover: PropType | { type: PropType; default?: any; required?: false; }; restTagsPopoverProps: PropType | { type: PropType; default?: any; required?: false; }; isInInputGroup: PropType | { type: PropType; default?: any; required?: false; }; stopPropagation: PropType | { type: PropType; default?: any; required?: false; }; getPopupContainer: PropType<() => HTMLElement> | { type: PropType<() => HTMLElement>; default?: any; required?: false; }; motion: PropType | { type: PropType; default?: any; required?: false; }; spacing: PropType | { type: PropType; default?: any; required?: false; }; mouseEnterDelay: PropType | { type: PropType; default?: any; required?: false; }; autoAdjustOverflow: PropType | { type: PropType; default?: any; required?: false; }; mouseLeaveDelay: PropType | { type: PropType; default?: any; required?: false; }; }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly | { type: PropType; default?: any; required?: false; }; 'aria-errormessage': PropType | { type: PropType; default?: any; required?: false; }; 'aria-invalid': PropType | { type: PropType; default?: any; required?: false; }; 'aria-label': PropType | { type: PropType; default?: any; required?: false; }; 'aria-labelledby': PropType | { type: PropType; default?: any; required?: false; }; 'aria-required': PropType | { type: PropType; default?: any; required?: false; }; id: PropType | { type: PropType; default?: any; required?: false; }; autoFocus: PropType | { type: PropType; default?: any; required?: false; }; autoClearSearchValue: PropType | { type: PropType; default?: any; required?: false; }; arrowIcon: PropType | { type: PropType; default?: any; required?: false; }; borderless: PropType | { type: PropType; default?: any; required?: false; }; clearIcon: PropType | { type: PropType; default?: any; required?: false; }; defaultValue: PropType> | { type: PropType>; default?: any; required?: false; }; value: PropType> | { type: PropType>; default?: any; required?: false; }; placeholder: PropType> | { type: PropType>; default?: any; required?: false; }; onChange: PropType<(value: SelectProps["value"]) => void> | { type: PropType<(value: SelectProps["value"]) => void>; default?: any; required?: false; }; multiple: PropType | { type: PropType; default?: any; required?: false; }; filter: PropType boolean)> | { type: PropType boolean)>; default?: any; required?: false; }; max: PropType | { type: PropType; default?: any; required?: false; }; maxTagCount: PropType | { type: PropType; default?: any; required?: false; }; maxHeight: PropType | { type: PropType; default?: any; required?: false; }; style: PropType | { type: PropType; default?: any; required?: false; }; className: PropType | { type: PropType; default?: any; required?: false; }; size: PropType | { type: PropType; default?: any; required?: false; }; disabled: PropType | { type: PropType; default?: any; required?: false; }; emptyContent: PropType> | { type: PropType>; default?: any; required?: false; }; expandRestTagsOnClick: PropType | { type: PropType; default?: any; required?: false; }; onDropdownVisibleChange: PropType<(visible: boolean) => void> | { type: PropType<(visible: boolean) => void>; default?: any; required?: false; }; zIndex: PropType | { type: PropType; default?: any; required?: false; }; position: PropType<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver"> | { type: PropType<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">; default?: any; required?: false; }; onSearch: PropType<(value: string, event: KeyboardEvent | MouseEvent) => void> | { type: PropType<(value: string, event: KeyboardEvent | MouseEvent) => void>; default?: any; required?: false; }; dropdownClassName: PropType | { type: PropType; default?: any; required?: false; }; dropdownStyle: PropType | { type: PropType; default?: any; required?: false; }; dropdownMargin: PropType | { type: PropType; default?: any; required?: false; }; ellipsisTrigger: PropType | { type: PropType; default?: any; required?: false; }; outerTopSlot: PropType> | { type: PropType>; default?: any; required?: false; }; innerTopSlot: PropType> | { type: PropType>; default?: any; required?: false; }; outerBottomSlot: PropType> | { type: PropType>; default?: any; required?: false; }; innerBottomSlot: PropType> | { type: PropType>; default?: any; required?: false; }; optionList: PropType | { type: PropType; default?: any; required?: false; }; dropdownMatchSelectWidth: PropType | { type: PropType; default?: any; required?: false; }; loading: PropType | { type: PropType; default?: any; required?: false; }; defaultOpen: PropType | { type: PropType; default?: any; required?: false; }; validateStatus: PropType<"default" | "error" | "warning" | "success"> | { type: PropType<"default" | "error" | "warning" | "success">; default?: any; required?: false; }; defaultActiveFirstOption: PropType | { type: PropType; default?: any; required?: false; }; onChangeWithObject: PropType | { type: PropType; default?: any; required?: false; }; suffix: PropType> | { type: PropType>; default?: any; required?: false; }; searchPosition: PropType | { type: PropType; default?: any; required?: false; }; searchPlaceholder: PropType | { type: PropType; default?: any; required?: false; }; prefix: PropType> | { type: PropType>; default?: any; required?: false; }; insetLabel: PropType> | { type: PropType>; default?: any; required?: false; }; insetLabelId: PropType | { type: PropType; default?: any; required?: false; }; inputProps: PropType> | { type: PropType>; default?: any; required?: false; }; showClear: PropType | { type: PropType; default?: any; required?: false; }; showArrow: PropType | { type: PropType; default?: any; required?: false; }; renderSelectedItem: PropType | { type: PropType; default?: any; required?: false; }; renderCreateItem: PropType<(inputValue: OptionProps["value"], focus: boolean, style?: CSSProperties) => VNode> | { type: PropType<(inputValue: OptionProps["value"], focus: boolean, style?: CSSProperties) => VNode>; default?: any; required?: false; }; renderOptionItem: PropType<(props: optionRenderProps) => VNode> | { type: PropType<(props: optionRenderProps) => VNode>; default?: any; required?: false; }; onMouseEnter: PropType<(e: MouseEvent) => any> | { type: PropType<(e: MouseEvent) => any>; default?: any; required?: false; }; onMouseLeave: PropType<(e: MouseEvent) => any> | { type: PropType<(e: MouseEvent) => any>; default?: any; required?: false; }; clickToHide: PropType | { type: PropType; default?: any; required?: false; }; onExceed: PropType<(option: OptionProps) => void> | { type: PropType<(option: OptionProps) => void>; default?: any; required?: false; }; onCreate: PropType<(option: OptionProps) => void> | { type: PropType<(option: OptionProps) => void>; default?: any; required?: false; }; remote: PropType | { type: PropType; default?: any; required?: false; }; onDeselect: PropType<(value: SelectProps["value"], option: Record) => void> | { type: PropType<(value: SelectProps["value"], option: Record) => void>; default?: any; required?: false; }; onSelect: PropType<(value: SelectProps["value"], option: Record) => void> | { type: PropType<(value: SelectProps["value"], option: Record) => void>; default?: any; required?: false; }; allowCreate: PropType | { type: PropType; default?: any; required?: false; }; triggerRender: PropType<(props?: TriggerRenderProps) => VNode> | { type: PropType<(props?: TriggerRenderProps) => VNode>; default?: any; required?: false; }; onClear: PropType<() => void> | { type: PropType<() => void>; default?: any; required?: false; }; virtualize: PropType | { type: PropType; default?: any; required?: false; }; onFocus: PropType<(e: FocusEvent) => void> | { type: PropType<(e: FocusEvent) => void>; default?: any; required?: false; }; onBlur: PropType<(e: FocusEvent) => void> | { type: PropType<(e: FocusEvent) => void>; default?: any; required?: false; }; onListScroll: PropType<(e: Event) => void> | { type: PropType<(e: Event) => void>; default?: any; required?: false; }; preventScroll: PropType | { type: PropType; default?: any; required?: false; }; showRestTagsPopover: PropType | { type: PropType; default?: any; required?: false; }; restTagsPopoverProps: PropType | { type: PropType; default?: any; required?: false; }; isInInputGroup: PropType | { type: PropType; default?: any; required?: false; }; stopPropagation: PropType | { type: PropType; default?: any; required?: false; }; getPopupContainer: PropType<() => HTMLElement> | { type: PropType<() => HTMLElement>; default?: any; required?: false; }; motion: PropType | { type: PropType; default?: any; required?: false; }; spacing: PropType | { type: PropType; default?: any; required?: false; }; mouseEnterDelay: PropType | { type: PropType; default?: any; required?: false; }; autoAdjustOverflow: PropType | { type: PropType; default?: any; required?: false; }; mouseLeaveDelay: PropType | { type: PropType; default?: any; required?: false; }; }>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; export type SelectType = typeof Select & { Option: typeof Option; OptGroup: typeof OptionGroup; }; declare const baseSelect: SelectType; export default baseSelect; export { Option as SelectOption, OptionGroup as SelectOptionGroup };