Select.d.ts 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. */
  31. import * as React from 'react';
  32. import type { BaseSelectPropsWithoutPrivate, BaseSelectRef, DisplayValueType, RenderNode } from './BaseSelect';
  33. import OptGroup from './OptGroup';
  34. import Option from './Option';
  35. import type { FlattenOptionData } from './interface';
  36. export type OnActiveValue = (active: RawValueType, index: number, info?: {
  37. source?: 'keyboard' | 'mouse';
  38. }) => void;
  39. export type OnInternalSelect = (value: RawValueType, info: {
  40. selected: boolean;
  41. }) => void;
  42. export type RawValueType = string | number;
  43. export 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. }
  49. export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
  50. export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
  51. export interface FieldNames {
  52. value?: string;
  53. label?: string;
  54. groupLabel?: string;
  55. options?: string;
  56. }
  57. export interface BaseOptionType {
  58. disabled?: boolean;
  59. className?: string;
  60. title?: string;
  61. [name: string]: any;
  62. }
  63. export interface DefaultOptionType extends BaseOptionType {
  64. label?: React.ReactNode;
  65. value?: string | number | null;
  66. children?: Omit<DefaultOptionType, 'children'>[];
  67. }
  68. export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
  69. type ArrayElementType<T> = T extends (infer E)[] ? E : T;
  70. export 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. }
  112. declare 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. };
  118. export default TypedSelect;