/** * To match accessibility requirement, we always provide an input in the component. * Other element will not set `tabIndex` to avoid `onBlur` sequence problem. * For focused select, we set `aria-live="polite"` to update the accessibility content. * * ref: * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions */ import * as React from 'react'; import type { ScrollTo } from 'rc-virtual-list/lib/List'; import type { RenderNode, Mode, RenderDOMFunc, FieldNames } from './interface'; import type { GetLabeledValue, FilterOptions, FilterFunc, DefaultValueType, RawValueType, LabelValueType, Key, DisplayLabelValueType, FlattenOptionsType, SingleType, OnClear, SelectSource, CustomTagProps } from './interface/generator'; import type { OptionListProps, RefOptionListProps } from './OptionList'; export interface RefSelectProps { focus: () => void; blur: () => void; scrollTo?: ScrollTo; } export interface AdjustOverflow { adjustX?: 0 | 1; adjustY?: 0 | 1; } export declare type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; export declare type EllipsisType = { placement?: string; mouseEnterDelay?: number; mouseLeaveDelay?: number; getPopupContainer?: (triggerNode: React.ReactNode) => void; } | boolean; export declare type RestTooltipType = { placement?: string; mouseEnterDelay?: number; mouseLeaveDelay?: number; getPopupContainer?: (triggerNode: React.ReactNode) => void; } | boolean; export declare type disabledTipType = { title: React.ReactNode; placement?: string; mouseEnterDelay?: number; mouseLeaveDelay?: number; getPopupContainer?: (triggerNode: React.ReactNode) => void; } | string; export interface SelectProps extends React.AriaAttributes { prefixCls?: string; id?: string; className?: string; style?: React.CSSProperties; options?: OptionsType; children?: React.ReactNode; mode?: Mode; value?: ValueType; defaultValue?: ValueType; labelInValue?: boolean; /** Config max length of input. This is only work when `mode` is `combobox` */ maxLength?: number; fieldNames?: FieldNames; inputValue?: string; searchValue?: string; optionFilterProp?: string; /** * In Select, `false` means do nothing. * In TreeSelect, `false` will highlight match item. * It's by design. */ filterOption?: boolean | FilterFunc; filterSort?: (optionA: OptionsType[number], optionB: OptionsType[number]) => number; fullMatchTop?: boolean; showSearch?: boolean; autoClearSearchValue?: boolean; onSearch?: (value: string) => void; onClear?: OnClear; allowClear?: boolean; clearIcon?: React.ReactNode; showArrow?: boolean; inputIcon?: RenderNode; removeIcon?: React.ReactNode; menuItemSelectedIcon?: RenderNode; open?: boolean; defaultOpen?: boolean; listHeight?: number; listItemHeight?: number; dropdownStyle?: React.CSSProperties; dropdownClassName?: string; dropdownMatchSelectWidth?: boolean | number; placement?: Placement; virtual?: boolean; dropdownRender?: (menu: React.ReactElement) => React.ReactElement; dropdownAlign?: any; animation?: string; transitionName?: string; getPopupContainer?: RenderDOMFunc; direction?: 'ltr' | 'rtl'; autoAdjustOverflow?: boolean | AdjustOverflow; disabled?: boolean; disabledTip?: disabledTipType; loading?: boolean; autoFocus?: boolean; defaultActiveFirstOption?: boolean; notFoundContent?: React.ReactNode; showAll?: boolean; disabledShowAll?: boolean; selectAllIcon?: React.ComponentType; selectAllText?: React.ReactNode; isSelectAll?: boolean; placeholder?: React.ReactNode; backfill?: boolean; /** @private Internal usage. Do not use in your production. */ getInputElement?: () => JSX.Element; /** @private Internal usage. Do not use in your production. */ getRawInputElement?: () => JSX.Element; optionLabelProp?: string; maxTagTextLength?: number; maxTagCount?: number | 'responsive'; maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode); tokenSeparators?: string[]; tagRender?: (props: CustomTagProps) => React.ReactElement; showAction?: ('focus' | 'click')[]; tabIndex?: number; onKeyUp?: React.KeyboardEventHandler; onKeyDown?: React.KeyboardEventHandler; onPopupScroll?: React.UIEventHandler; onDropdownVisibleChange?: (open: boolean) => void; onSelect?: (value: SingleType, option: OptionsType[number]) => void; onDeselect?: (value: SingleType, option: OptionsType[number]) => void; onInputKeyDown?: React.KeyboardEventHandler; onClick?: React.MouseEventHandler; onChange?: (value: ValueType, option: OptionsType[number] | OptionsType, hasSelectedAll: boolean) => void; onBlur?: React.FocusEventHandler; onFocus?: React.FocusEventHandler; onMouseDown?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; onMouseLeave?: React.MouseEventHandler; choiceTransitionName?: string; autoEllipsis?: EllipsisType; restTooltip?: RestTooltipType; tooltip?: React.ElementType; /** * Only used in current version for internal event process. * Do not use in production environment. */ internalProps?: { mark?: string; onClear?: OnClear; skipTriggerChange?: boolean; skipTriggerSelect?: boolean; onRawSelect?: (value: RawValueType, option: OptionsType[number], source: SelectSource) => void; onRawDeselect?: (value: RawValueType, option: OptionsType[number], source: SelectSource) => void; onRawSelectAll?: (values: RawValueType[], option: { selected: boolean; triggerValue: string; }, source: SelectSource) => void; }; } export interface GenerateConfig { prefixCls: string; components: { optionList: React.ForwardRefExoticComponent, 'options'> & { options: OptionsType; }> & React.RefAttributes>; }; /** Convert jsx tree into `OptionsType` */ convertChildrenToData: (children: React.ReactNode) => OptionsType; /** Flatten nest options into raw option list */ flattenOptions: (options: OptionsType, props: any) => FlattenOptionsType; /** Convert single raw value into { label, value } format. Will be called by each value */ getLabeledValue: GetLabeledValue>; filterOptions: FilterOptions; findValueOption: ((values: RawValueType[], options: FlattenOptionsType) => OptionsType) | ((values: RawValueType[], options: FlattenOptionsType, info?: { prevValueOptions?: OptionsType[]; props?: any; }) => OptionsType); /** Check if a value is disabled */ isValueDisabled: (value: RawValueType, options: FlattenOptionsType) => boolean; warningProps?: (props: any) => void; fillOptionsWithMissingValue?: (options: OptionsType, value: DefaultValueType, optionLabelProp: string, labelInValue: boolean) => OptionsType; omitDOMProps?: (props: object) => object; customDisplayValues?: (tmpValues?: DisplayLabelValueType[], flattenOptions?: FlattenOptionsType, isMultiple?: boolean, showAll?: boolean, isSelectAll?: boolean, displayAllValue?: DisplayLabelValueType) => DisplayLabelValueType[] | undefined; } /** * This function is in internal usage. * Do not use it in your prod env since we may refactor this. */ export default function generateSelector(config: GenerateConfig): React.ForwardRefExoticComponent & React.RefAttributes>;