import React, { ReactNode } from 'react'; import PropTypes from 'prop-types'; import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/es/autoComplete/foundation'; import BaseComponent, { ValidateStatus } from '../_base/baseComponent'; import { Position } from '../tooltip'; import Option from './option'; import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css'; /** * AutoComplete is an enhanced Input (candidates suggest that users can choose or not), * and the Select positioning that supports Search is still a selector. * 1. When you click to expand, Select will clear all input values, but AutoComplete will not * 2. AutoComplete's renderSelectedItem only supports simple string returns, while Select's renderSelectedItem can return ReactNode * 3. Select props.value supports incoming object, but autoComplete only supports string (because the value needs to be displayed in Input) */ export interface BaseDataItem extends DataItem { label?: React.ReactNode; } export type AutoCompleteItems = BaseDataItem | string | number; export interface AutoCompleteProps { 'aria-describedby'?: React.AriaAttributes['aria-describedby']; 'aria-errormessage'?: React.AriaAttributes['aria-errormessage']; 'aria-invalid'?: React.AriaAttributes['aria-invalid']; 'aria-label'?: React.AriaAttributes['aria-label']; 'aria-labelledby'?: React.AriaAttributes['aria-labelledby']; 'aria-required'?: React.AriaAttributes['aria-required']; autoAdjustOverflow?: boolean; autoFocus?: boolean; className?: string; clearIcon?: ReactNode; children?: ReactNode; data?: T[]; disabled?: boolean; defaultOpen?: boolean; defaultValue?: T; defaultActiveFirstOption?: boolean; dropdownMatchSelectWidth?: boolean; dropdownClassName?: string; dropdownStyle?: React.CSSProperties; emptyContent?: React.ReactNode; getPopupContainer?: () => HTMLElement; insetLabel?: React.ReactNode; insetLabelId?: string; id?: string; loading?: boolean; motion?: boolean; maxHeight?: string | number; mouseEnterDelay?: number; mouseLeaveDelay?: number; onFocus?: (e: React.FocusEvent) => void; onBlur?: (e: React.FocusEvent) => void; onChange?: (value: string | number) => void; onSearch?: (inputValue: string) => void; onSelect?: (value: T) => void; onClear?: () => void; onChangeWithObject?: boolean; onSelectWithObject?: boolean; onDropdownVisibleChange?: (visible: boolean) => void; onKeyDown?: (e: React.KeyboardEvent) => void; prefix?: React.ReactNode; placeholder?: string; position?: Position; renderItem?: (option: T) => React.ReactNode; renderSelectedItem?: (option: T) => string; size?: 'small' | 'default' | 'large'; style?: React.CSSProperties; suffix?: React.ReactNode; showClear?: boolean; triggerRender?: (props?: any) => React.ReactNode; stopPropagation?: boolean | string; value?: string | number; validateStatus?: ValidateStatus; zIndex?: number; } interface KeyboardEventType { onKeyDown?: React.KeyboardEventHandler; } interface AutoCompleteState { dropdownMinWidth: null | number; inputValue: string | undefined | number; options: StateOptionItem[]; visible: boolean; focusIndex: number; selection: Map; rePosKey: number; keyboardEventSet?: KeyboardEventType; } declare class AutoComplete extends BaseComponent, AutoCompleteState> { static propTypes: { 'aria-label': PropTypes.Requireable; 'aria-labelledby': PropTypes.Requireable; 'aria-invalid': PropTypes.Requireable; 'aria-errormessage': PropTypes.Requireable; 'aria-describedby': PropTypes.Requireable; 'aria-required': PropTypes.Requireable; autoFocus: PropTypes.Requireable; autoAdjustOverflow: PropTypes.Requireable; className: PropTypes.Requireable; clearIcon: PropTypes.Requireable; children: PropTypes.Requireable; data: PropTypes.Requireable; defaultOpen: PropTypes.Requireable; defaultValue: PropTypes.Requireable>; defaultActiveFirstOption: PropTypes.Requireable; disabled: PropTypes.Requireable; dropdownMatchSelectWidth: PropTypes.Requireable; dropdownClassName: PropTypes.Requireable; dropdownStyle: PropTypes.Requireable; emptyContent: PropTypes.Requireable; id: PropTypes.Requireable; insetLabel: PropTypes.Requireable; insetLabelId: PropTypes.Requireable; onSearch: PropTypes.Requireable<(...args: any[]) => any>; onSelect: PropTypes.Requireable<(...args: any[]) => any>; onClear: PropTypes.Requireable<(...args: any[]) => any>; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; onChange: PropTypes.Requireable<(...args: any[]) => any>; onKeyDown: PropTypes.Requireable<(...args: any[]) => any>; position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">; placeholder: PropTypes.Requireable; prefix: PropTypes.Requireable; onChangeWithObject: PropTypes.Requireable; onSelectWithObject: PropTypes.Requireable; renderItem: PropTypes.Requireable<(...args: any[]) => any>; renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>; suffix: PropTypes.Requireable; showClear: PropTypes.Requireable; size: PropTypes.Requireable<"default" | "small" | "large">; style: PropTypes.Requireable; stopPropagation: PropTypes.Requireable>; maxHeight: PropTypes.Requireable>; mouseEnterDelay: PropTypes.Requireable; mouseLeaveDelay: PropTypes.Requireable; motion: PropTypes.Requireable>; getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>; triggerRender: PropTypes.Requireable<(...args: any[]) => any>; value: PropTypes.Requireable>; validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">; zIndex: PropTypes.Requireable; }; static Option: typeof Option; static __SemiComponentName__: string; static defaultProps: any; triggerRef: React.RefObject | null; optionsRef: React.RefObject | null; optionContainerEl: React.RefObject | null; optionListId: string; private clickOutsideHandler; constructor(props: AutoCompleteProps); get adapter(): AutoCompleteAdapter, AutoCompleteState>; componentDidMount(): void; componentWillUnmount(): void; componentDidUpdate(prevProps: AutoCompleteProps, prevState: AutoCompleteState): void; onSelect: (option: StateOptionItem, optionIndex: number, e: React.MouseEvent | React.KeyboardEvent) => void; onSearch: (value: string) => void; onBlur: (e: React.FocusEvent) => void; onFocus: (e: React.FocusEvent) => void; onInputClear: () => void; handleInputClick: (e: React.MouseEvent) => void; renderInput(): React.ReactNode; renderLoading(): React.JSX.Element; renderOption(option: StateOptionItem, optionIndex: number): React.ReactNode; renderOptionList(): React.ReactNode; render(): React.ReactNode; } export default AutoComplete;