UNPKG

4.25 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';
35export type OnActiveValue = (active: RawValueType, index: number, info?: {
36 source?: 'keyboard' | 'mouse';
37}) => void;
38export type OnInternalSelect = (value: RawValueType, info: {
39 selected: boolean;
40}) => void;
41export type RawValueType = string | number;
42export interface LabelInValueType {
43 label: React.ReactNode;
44 value: RawValueType;
45 /** @deprecated `key` is useless since it should always same as `value` */
46 key?: React.Key;
47}
48export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
49export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
50export interface FieldNames {
51 value?: string;
52 label?: string;
53 groupLabel?: string;
54 options?: string;
55}
56export interface BaseOptionType {
57 disabled?: boolean;
58 [name: string]: any;
59}
60export interface DefaultOptionType extends BaseOptionType {
61 label: React.ReactNode;
62 value?: string | number | null;
63 children?: Omit<DefaultOptionType, 'children'>[];
64}
65export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
66type ArrayElementType<T> = T extends (infer E)[] ? E : T;
67export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
68 prefixCls?: string;
69 id?: string;
70 backfill?: boolean;
71 fieldNames?: FieldNames;
72 /** @deprecated Use `searchValue` instead */
73 inputValue?: string;
74 searchValue?: string;
75 onSearch?: (value: string) => void;
76 autoClearSearchValue?: boolean;
77 onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
78 onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
79 /**
80 * In Select, `false` means do nothing.
81 * In TreeSelect, `false` will highlight match item.
82 * It's by design.
83 */
84 filterOption?: boolean | FilterFunc<OptionType>;
85 filterSort?: (optionA: OptionType, optionB: OptionType) => number;
86 optionFilterProp?: string;
87 optionLabelProp?: string;
88 children?: React.ReactNode;
89 options?: OptionType[];
90 defaultActiveFirstOption?: boolean;
91 virtual?: boolean;
92 direction?: 'ltr' | 'rtl';
93 listHeight?: number;
94 listItemHeight?: number;
95 menuItemSelectedIcon?: RenderNode;
96 mode?: 'combobox' | 'multiple' | 'tags';
97 labelInValue?: boolean;
98 value?: ValueType | null;
99 defaultValue?: ValueType | null;
100 onChange?: (value: ValueType, option: OptionType | OptionType[]) => void;
101}
102declare const TypedSelect: (<ValueType = any, OptionType extends DefaultOptionType | BaseOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
103 children?: React.ReactNode;
104} & {
105 ref?: React.Ref<BaseSelectRef>;
106}) => React.ReactElement) & {
107 Option: typeof Option;
108 OptGroup: typeof OptGroup;
109};
110export default TypedSelect;