[WIP]feat: combine search props

src/Select.tsx

@@ -56,6 +56,7 @@ import type { FlattenOptionData } from './interface';
 import { hasValue, isComboNoValue, toArray } from './utils/commonUtil';
 import { fillFieldNames, flattenOptions, injectPropsWithOption } from './utils/valueUtil';
 import warningProps, { warningNullOptions } from './utils/warningPropsUtil';
+import useSearchConfig from './hooks/useSearchConfig';
 
 const OMIT_DOM_PROPS = ['inputValue'];
 
@@ -110,34 +111,52 @@ type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 
 export type SemanticName = BaseSelectSemanticName;
 export type PopupSemantic = 'listItem' | 'list';
+export interface SearchConfig<OptionType> {
+  searchValue?: string;
+  autoClearSearchValue?: boolean;
+  onSearch?: (value: string) => void;
+  tokenSeparators?: string[];
+  filterOption?: boolean | FilterFunc<OptionType>;
+  filterSort?: (optionA: OptionType, optionB: OptionType, info: { searchValue: string }) => number;
+  optionFilterProp?: string;
+  optionLabelProp?: string;
+}
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType>
-  extends BaseSelectPropsWithoutPrivate {
+  extends Omit<BaseSelectPropsWithoutPrivate, 'showSearch'> {
   prefixCls?: string;
   id?: string;
 
   backfill?: boolean;
 
   // >>> Field Names
   fieldNames?: FieldNames;
-
-  searchValue?: string;
-  onSearch?: (value: string) => void;
+  showSearch?: boolean | SearchConfig<OptionType>;
+  /**  @deprecated pleace use  SearchConfig.searchValue */
+  searchValue?: SearchConfig<OptionType>['searchValue'];
+  /**  @deprecated pleace use  SearchConfig.autoClearSearchValue */
   autoClearSearchValue?: boolean;
-
-  // >>> Select
-  onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
-  onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
-
+  /**  @deprecated pleace use  SearchConfig.onSearch */
+  onSearch?: SearchConfig<OptionType>['onSearch'];
+  /**  @deprecated pleace use  SearchConfig.tokenSeparators */
+  tokenSeparators?: string[];
   // >>> Options
   /**
    * In Select, `false` means do nothing.
    * In TreeSelect, `false` will highlight match item.
    * It's by design.
    */
-  filterOption?: boolean | FilterFunc<OptionType>;
-  filterSort?: (optionA: OptionType, optionB: OptionType, info: { searchValue: string }) => number;
+  /**  @deprecated pleace use  SearchConfig.filterOption */
+  filterOption?: SearchConfig<OptionType>['filterOption'];
+  /**  @deprecated pleace use  SearchConfig.filterSort */
+  filterSort?: SearchConfig<OptionType>['filterSort'];
+  /**  @deprecated pleace use  SearchConfig.optionFilterProp */
   optionFilterProp?: string;
+  /**  @deprecated pleace use  SearchConfig.optionLabelProp */
   optionLabelProp?: string;
+  // >>> Select
+  onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+  onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+
   children?: React.ReactNode;
   options?: OptionType[];
   optionRender?: (
@@ -176,22 +195,12 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       prefixCls = 'rc-select',
       backfill,
       fieldNames,
-
       // Search
-      searchValue,
-      onSearch,
-      autoClearSearchValue = true,
-
+      showSearch,
       // Select
       onSelect,
       onDeselect,
       popupMatchSelectWidth = true,
-
-      // Options
-      filterOption,
-      filterSort,
-      optionFilterProp,
-      optionLabelProp,
       options,
       optionRender,
       children,
@@ -214,6 +223,18 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       ...restProps
     } = props;
 
+    const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, props);
+    const {
+      filterOption,
+      searchValue,
+      optionFilterProp,
+      optionLabelProp,
+      filterSort,
+      onSearch,
+      autoClearSearchValue = true,
+      tokenSeparators,
+    } = searchConfig;
+
     const mergedId = useId(id);
     const multiple = isMultiple(mode);
     const childrenAsData = !!(!options && children);
@@ -685,10 +706,12 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
           // >>> Trigger
           direction={direction}
           // >>> Search
+          showSearch={mergedShowSearch}
           searchValue={mergedSearchValue}
           onSearch={onInternalSearch}
           autoClearSearchValue={autoClearSearchValue}
           onSearchSplit={onInternalSearchSplit}
+          tokenSeparators={tokenSeparators}
           popupMatchSelectWidth={popupMatchSelectWidth}
           // >>> OptionList
           OptionList={OptionList}

src/hooks/useSearchConfig.ts

@@ -0,0 +1,40 @@
+import type { SearchConfig, DefaultOptionType } from '@/Select';
+import * as React from 'react';
+const legacySearchProps = [
+  'filterOption',
+  'searchValue',
+  'optionFilterProp',
+  'optionLabelProp',
+  'filterSort',
+  'onSearch',
+  'autoClearSearchValue',
+  'tokenSeparators',
+];
+// Convert `showSearch` to unique config
+export default function useSearchConfig(showSearch, props) {
+  return React.useMemo<[boolean, SearchConfig<DefaultOptionType>]>(() => {
+    const legacyShowSearch: SearchConfig<DefaultOptionType> = {};
+    legacySearchProps.forEach((propsName) => {
+      legacyShowSearch[propsName] = props?.[propsName];
+    });
+    const searchConfig: SearchConfig<DefaultOptionType> =
+      typeof showSearch === 'object' ? showSearch : legacyShowSearch;
+    if (showSearch === undefined) {
+      return [undefined, searchConfig];
+    }
+    if (!showSearch) {
+      return [false, {}];
+    }
+    return [true, searchConfig];
+  }, [
+    showSearch,
+    props?.filterOption,
+    props?.searchValue,
+    props?.optionFilterProp,
+    props?.optionLabelProp,
+    props?.filterSort,
+    props?.onSearch,
+    props?.autoClearSearchValue,
+    props?.tokenSeparators,
+  ]);
+}