UNPKG

4.59 kBTypeScriptView Raw
1/**
2 * To match accessibility requirement, we always provide an input in the component.
3 * Other element will not set `tabIndex` to avoid `onBlur` sequence problem.
4 * For focused select, we set `aria-live="polite"` to update the accessibility content.
5 *
6 * ref:
7 * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
8 *
9 * New api:
10 * - listHeight
11 * - listItemHeight
12 * - component
13 *
14 * Remove deprecated api:
15 * - multiple
16 * - tags
17 * - combobox
18 * - firstActiveValue
19 * - dropdownMenuStyle
20 * - openClassName (Not list in api)
21 *
22 * Update:
23 * - `backfill` only support `combobox` mode
24 * - `combobox` mode not support `labelInValue` since it's meaningless
25 * - `getInputElement` only support `combobox` mode
26 * - `onChange` return OptionData instead of ReactNode
27 * - `filterOption` `onChange` `onSelect` accept OptionData instead of ReactNode
28 * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
29 * - `combobox` mode not support `optionLabelProp`
30 */
31import * as React from 'react';
32import type { BaseSelectPropsWithoutPrivate, BaseSelectRef, DisplayValueType, RenderNode } from './BaseSelect';
33import OptGroup from './OptGroup';
34import Option from './Option';
35import type { FlattenOptionData } from './interface';
36export type OnActiveValue = (active: RawValueType, index: number, info?: {
37 source?: 'keyboard' | 'mouse';
38}) => void;
39export type OnInternalSelect = (value: RawValueType, info: {
40 selected: boolean;
41}) => void;
42export type RawValueType = string | number;
43export interface LabelInValueType {
44 label: React.ReactNode;
45 value: RawValueType;
46 /** @deprecated `key` is useless since it should always same as `value` */
47 key?: React.Key;
48}
49export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
50export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
51export interface FieldNames {
52 value?: string;
53 label?: string;
54 groupLabel?: string;
55 options?: string;
56}
57export interface BaseOptionType {
58 disabled?: boolean;
59 className?: string;
60 title?: string;
61 [name: string]: any;
62}
63export interface DefaultOptionType extends BaseOptionType {
64 label?: React.ReactNode;
65 value?: string | number | null;
66 children?: Omit<DefaultOptionType, 'children'>[];
67}
68export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
69type ArrayElementType<T> = T extends (infer E)[] ? E : T;
70export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
71 prefixCls?: string;
72 id?: string;
73 backfill?: boolean;
74 fieldNames?: FieldNames;
75 /** @deprecated Use `searchValue` instead */
76 inputValue?: string;
77 searchValue?: string;
78 onSearch?: (value: string) => void;
79 autoClearSearchValue?: boolean;
80 onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
81 onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
82 /**
83 * In Select, `false` means do nothing.
84 * In TreeSelect, `false` will highlight match item.
85 * It's by design.
86 */
87 filterOption?: boolean | FilterFunc<OptionType>;
88 filterSort?: (optionA: OptionType, optionB: OptionType, info: {
89 searchValue: string;
90 }) => number;
91 optionFilterProp?: string;
92 optionLabelProp?: string;
93 children?: React.ReactNode;
94 options?: OptionType[];
95 optionRender?: (oriOption: FlattenOptionData<OptionType>, info: {
96 index: number;
97 }) => React.ReactNode;
98 defaultActiveFirstOption?: boolean;
99 virtual?: boolean;
100 direction?: 'ltr' | 'rtl';
101 listHeight?: number;
102 listItemHeight?: number;
103 labelRender?: (props: LabelInValueType) => React.ReactNode;
104 menuItemSelectedIcon?: RenderNode;
105 mode?: 'combobox' | 'multiple' | 'tags';
106 labelInValue?: boolean;
107 value?: ValueType | null;
108 defaultValue?: ValueType | null;
109 maxCount?: number;
110 onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
111}
112declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
113 children?: React.ReactNode;
114} & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
115 Option: typeof Option;
116 OptGroup: typeof OptGroup;
117};
118export default TypedSelect;