@rc-component/select 1.2.4 → 1.3.0

package/es/BaseSelect/index.d.ts

@@ -1,5 +1,5 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
-import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
+import type { ScrollConfig, ScrollTo } from '@rc-component/virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
 import type { ComponentsConfig } from '../hooks/useComponents';

package/es/OptionList.d.ts

@@ -1,4 +1,4 @@
-import type { ScrollConfig } from 'rc-virtual-list/lib/List';
+import type { ScrollConfig } from '@rc-component/virtual-list/lib/List';
 import * as React from 'react';
 export type OptionListProps = Record<string, never>;
 export interface RefOptionListProps {

package/es/OptionList.js

@@ -4,7 +4,7 @@ import KeyCode from "@rc-component/util/es/KeyCode";
 import useMemo from "@rc-component/util/es/hooks/useMemo";
 import omit from "@rc-component/util/es/omit";
 import pickAttrs from "@rc-component/util/es/pickAttrs";
-import List from 'rc-virtual-list';
+import List from '@rc-component/virtual-list';
 import * as React from 'react';
 import { useEffect } from 'react';
 import SelectContext from "./SelectContext";

package/es/Select.d.ts

@@ -75,7 +75,7 @@ export interface SearchConfig<OptionType> {
     filterSort?: (optionA: OptionType, optionB: OptionType, info: {
         searchValue: string;
     }) => number;
-    optionFilterProp?: string;
+    optionFilterProp?: string | string[];
 }
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends Omit<BaseSelectPropsWithoutPrivate, 'showSearch'> {
     prefixCls?: string;
@@ -102,7 +102,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     /**  @deprecated please use  showSearch.filterSort */
     filterSort?: SearchConfig<OptionType>['filterSort'];
     /**  @deprecated please use  showSearch.optionFilterProp */
-    optionFilterProp?: string;
+    optionFilterProp?: string | string[];
     optionLabelProp?: string;
     children?: React.ReactNode;
     options?: OptionType[];

package/es/Select.js

@@ -109,6 +109,10 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     onSearch,
     autoClearSearchValue = true
   } = searchConfig;
+  const normalizedOptionFilterProp = React.useMemo(() => {
+    if (!optionFilterProp) return [];
+    return Array.isArray(optionFilterProp) ? optionFilterProp : [optionFilterProp];
+  }, [optionFilterProp]);
   const mergedId = useId(id);
   const multiple = isMultiple(mode);
   const childrenAsData = !!(!options && children);
@@ -131,7 +135,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mergedSearchValue = internalSearchValue || '';
 
   // =========================== Option ===========================
-  const parsedOptions = useOptions(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
+  const parsedOptions = useOptions(options, children, mergedFieldNames, normalizedOptionFilterProp, optionLabelProp);
   const {
     valueOptions,
     labelOptions,
@@ -254,11 +258,17 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
     return cloneOptions;
   }, [createTagOption, mergedOptions, valueOptions, mergedValues, mode]);
-  const filteredOptions = useFilterOptions(filledTagOptions, mergedFieldNames, mergedSearchValue, mergedFilterOption, optionFilterProp);
+  const filteredOptions = useFilterOptions(filledTagOptions, mergedFieldNames, mergedSearchValue, mergedFilterOption, normalizedOptionFilterProp);
 
   // Fill options with search value if needed
   const filledSearchOptions = React.useMemo(() => {
-    if (mode !== 'tags' || !mergedSearchValue || filteredOptions.some(item => item[optionFilterProp || 'value'] === mergedSearchValue)) {
+    const hasItemMatchingSearch = item => {
+      if (normalizedOptionFilterProp.length) {
+        return normalizedOptionFilterProp.some(prop => item?.[prop] === mergedSearchValue);
+      }
+      return item?.value === mergedSearchValue;
+    };
+    if (mode !== 'tags' || !mergedSearchValue || filteredOptions.some(item => hasItemMatchingSearch(item))) {
       return filteredOptions;
     }
     // ignore when search value equal select input value
@@ -267,7 +277,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     // Fill search value as option
     return [createTagOption(mergedSearchValue), ...filteredOptions];
-  }, [createTagOption, optionFilterProp, mode, filteredOptions, mergedSearchValue, mergedFieldNames]);
+  }, [createTagOption, normalizedOptionFilterProp, mode, filteredOptions, mergedSearchValue, mergedFieldNames]);
   const sorter = inputOptions => {
     const sortedOptions = [...inputOptions].sort((a, b) => filterSort(a, b, {
       searchValue: mergedSearchValue

package/es/hooks/useFilterOptions.d.ts

@@ -1,3 +1,3 @@
 import type { FieldNames, DefaultOptionType, SelectProps } from '../Select';
-declare const _default: (options: DefaultOptionType[], fieldNames: FieldNames, searchValue?: string, filterOption?: SelectProps['filterOption'], optionFilterProp?: string) => DefaultOptionType[];
+declare const _default: (options: DefaultOptionType[], fieldNames: FieldNames, searchValue?: string, filterOption?: SelectProps['filterOption'], optionFilterProp?: string[]) => DefaultOptionType[];
 export default _default;

package/es/hooks/useFilterOptions.js

@@ -4,54 +4,56 @@ import { injectPropsWithOption } from "../utils/valueUtil";
 function includes(test, search) {
   return toArray(test).join('').toUpperCase().includes(search);
 }
-export default ((options, fieldNames, searchValue, filterOption, optionFilterProp) => React.useMemo(() => {
-  if (!searchValue || filterOption === false) {
-    return options;
-  }
-  const {
-    options: fieldOptions,
-    label: fieldLabel,
-    value: fieldValue
-  } = fieldNames;
-  const filteredOptions = [];
-  const customizeFilter = typeof filterOption === 'function';
-  const upperSearch = searchValue.toUpperCase();
-  const filterFunc = customizeFilter ? filterOption : (_, option) => {
-    // Use provided `optionFilterProp`
-    if (optionFilterProp) {
-      return includes(option[optionFilterProp], upperSearch);
+export default ((options, fieldNames, searchValue, filterOption, optionFilterProp) => {
+  return React.useMemo(() => {
+    if (!searchValue || filterOption === false) {
+      return options;
     }
+    const {
+      options: fieldOptions,
+      label: fieldLabel,
+      value: fieldValue
+    } = fieldNames;
+    const filteredOptions = [];
+    const customizeFilter = typeof filterOption === 'function';
+    const upperSearch = searchValue.toUpperCase();
+    const filterFunc = customizeFilter ? filterOption : (_, option) => {
+      // Use provided `optionFilterProp`
+      if (optionFilterProp && optionFilterProp.length) {
+        return optionFilterProp.some(prop => includes(option[prop], upperSearch));
+      }
 
-    // Auto select `label` or `value` by option type
-    if (option[fieldOptions]) {
-      // hack `fieldLabel` since `OptionGroup` children is not `label`
-      return includes(option[fieldLabel !== 'children' ? fieldLabel : 'label'], upperSearch);
-    }
-    return includes(option[fieldValue], upperSearch);
-  };
-  const wrapOption = customizeFilter ? opt => injectPropsWithOption(opt) : opt => opt;
-  options.forEach(item => {
-    // Group should check child options
-    if (item[fieldOptions]) {
-      // Check group first
-      const matchGroup = filterFunc(searchValue, wrapOption(item));
-      if (matchGroup) {
-        filteredOptions.push(item);
-      } else {
-        // Check option
-        const subOptions = item[fieldOptions].filter(subItem => filterFunc(searchValue, wrapOption(subItem)));
-        if (subOptions.length) {
-          filteredOptions.push({
-            ...item,
-            [fieldOptions]: subOptions
-          });
+      // Auto select `label` or `value` by option type
+      if (option[fieldOptions]) {
+        // hack `fieldLabel` since `OptionGroup` children is not `label`
+        return includes(option[fieldLabel !== 'children' ? fieldLabel : 'label'], upperSearch);
+      }
+      return includes(option[fieldValue], upperSearch);
+    };
+    const wrapOption = customizeFilter ? opt => injectPropsWithOption(opt) : opt => opt;
+    options.forEach(item => {
+      // Group should check child options
+      if (item[fieldOptions]) {
+        // Check group first
+        const matchGroup = filterFunc(searchValue, wrapOption(item));
+        if (matchGroup) {
+          filteredOptions.push(item);
+        } else {
+          // Check option
+          const subOptions = item[fieldOptions].filter(subItem => filterFunc(searchValue, wrapOption(subItem)));
+          if (subOptions.length) {
+            filteredOptions.push({
+              ...item,
+              [fieldOptions]: subOptions
+            });
+          }
         }
+        return;
       }
-      return;
-    }
-    if (filterFunc(searchValue, wrapOption(item))) {
-      filteredOptions.push(item);
-    }
-  });
-  return filteredOptions;
-}, [options, filterOption, optionFilterProp, searchValue, fieldNames]));
+      if (filterFunc(searchValue, wrapOption(item))) {
+        filteredOptions.push(item);
+      }
+    });
+    return filteredOptions;
+  }, [options, filterOption, optionFilterProp, searchValue, fieldNames]);
+});

package/es/hooks/useOptions.d.ts

@@ -4,7 +4,7 @@ import type { FieldNames, RawValueType } from '../Select';
  * Parse `children` to `options` if `options` is not provided.
  * Then flatten the `options`.
  */
-declare const useOptions: <OptionType>(options: OptionType[], children: React.ReactNode, fieldNames: FieldNames, optionFilterProp: string, optionLabelProp: string) => {
+declare const useOptions: <OptionType>(options: OptionType[], children: React.ReactNode, fieldNames: FieldNames, optionFilterProp: string[], optionLabelProp: string) => {
     options: OptionType[];
     valueOptions: Map<RawValueType, OptionType>;
     labelOptions: Map<React.ReactNode, OptionType>;

package/es/hooks/useOptions.js

@@ -27,7 +27,9 @@ const useOptions = (options, children, fieldNames, optionFilterProp, optionLabel
           valueOptions.set(option[fieldNames.value], option);
           setLabelOptions(labelOptions, option, fieldNames.label);
           // https://github.com/ant-design/ant-design/issues/35304
-          setLabelOptions(labelOptions, option, optionFilterProp);
+          optionFilterProp.forEach(prop => {
+            setLabelOptions(labelOptions, option, prop);
+          });
           setLabelOptions(labelOptions, option, optionLabelProp);
         } else {
           dig(option[fieldNames.options], true);

package/lib/BaseSelect/index.d.ts

@@ -1,5 +1,5 @@
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
-import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
+import type { ScrollConfig, ScrollTo } from '@rc-component/virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
 import type { ComponentsConfig } from '../hooks/useComponents';

package/lib/OptionList.d.ts

@@ -1,4 +1,4 @@
-import type { ScrollConfig } from 'rc-virtual-list/lib/List';
+import type { ScrollConfig } from '@rc-component/virtual-list/lib/List';
 import * as React from 'react';
 export type OptionListProps = Record<string, never>;
 export interface RefOptionListProps {

package/lib/OptionList.js

@@ -9,7 +9,7 @@ var _KeyCode = _interopRequireDefault(require("@rc-component/util/lib/KeyCode"))
 var _useMemo = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMemo"));
 var _omit = _interopRequireDefault(require("@rc-component/util/lib/omit"));
 var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
-var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));
+var _virtualList = _interopRequireDefault(require("@rc-component/virtual-list"));
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _SelectContext = _interopRequireDefault(require("./SelectContext"));
@@ -293,7 +293,7 @@ const OptionList = (_, ref) => {
       width: 0,
       overflow: 'hidden'
     }
-  }), renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(_rcVirtualList.default, {
+  }), renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(_virtualList.default, {
     itemKey: "key",
     ref: listRef,
     data: memoFlattenOptions,

package/lib/Select.d.ts

@@ -75,7 +75,7 @@ export interface SearchConfig<OptionType> {
     filterSort?: (optionA: OptionType, optionB: OptionType, info: {
         searchValue: string;
     }) => number;
-    optionFilterProp?: string;
+    optionFilterProp?: string | string[];
 }
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends Omit<BaseSelectPropsWithoutPrivate, 'showSearch'> {
     prefixCls?: string;
@@ -102,7 +102,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
     /**  @deprecated please use  showSearch.filterSort */
     filterSort?: SearchConfig<OptionType>['filterSort'];
     /**  @deprecated please use  showSearch.optionFilterProp */
-    optionFilterProp?: string;
+    optionFilterProp?: string | string[];
     optionLabelProp?: string;
     children?: React.ReactNode;
     options?: OptionType[];

package/lib/Select.js

@@ -116,6 +116,10 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     onSearch,
     autoClearSearchValue = true
   } = searchConfig;
+  const normalizedOptionFilterProp = React.useMemo(() => {
+    if (!optionFilterProp) return [];
+    return Array.isArray(optionFilterProp) ? optionFilterProp : [optionFilterProp];
+  }, [optionFilterProp]);
   const mergedId = (0, _useId.default)(id);
   const multiple = (0, _BaseSelect.isMultiple)(mode);
   const childrenAsData = !!(!options && children);
@@ -138,7 +142,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mergedSearchValue = internalSearchValue || '';
 
   // =========================== Option ===========================
-  const parsedOptions = (0, _useOptions.default)(options, children, mergedFieldNames, optionFilterProp, optionLabelProp);
+  const parsedOptions = (0, _useOptions.default)(options, children, mergedFieldNames, normalizedOptionFilterProp, optionLabelProp);
   const {
     valueOptions,
     labelOptions,
@@ -261,11 +265,17 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
     return cloneOptions;
   }, [createTagOption, mergedOptions, valueOptions, mergedValues, mode]);
-  const filteredOptions = (0, _useFilterOptions.default)(filledTagOptions, mergedFieldNames, mergedSearchValue, mergedFilterOption, optionFilterProp);
+  const filteredOptions = (0, _useFilterOptions.default)(filledTagOptions, mergedFieldNames, mergedSearchValue, mergedFilterOption, normalizedOptionFilterProp);
 
   // Fill options with search value if needed
   const filledSearchOptions = React.useMemo(() => {
-    if (mode !== 'tags' || !mergedSearchValue || filteredOptions.some(item => item[optionFilterProp || 'value'] === mergedSearchValue)) {
+    const hasItemMatchingSearch = item => {
+      if (normalizedOptionFilterProp.length) {
+        return normalizedOptionFilterProp.some(prop => item?.[prop] === mergedSearchValue);
+      }
+      return item?.value === mergedSearchValue;
+    };
+    if (mode !== 'tags' || !mergedSearchValue || filteredOptions.some(item => hasItemMatchingSearch(item))) {
       return filteredOptions;
     }
     // ignore when search value equal select input value
@@ -274,7 +284,7 @@ const Select = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
     // Fill search value as option
     return [createTagOption(mergedSearchValue), ...filteredOptions];
-  }, [createTagOption, optionFilterProp, mode, filteredOptions, mergedSearchValue, mergedFieldNames]);
+  }, [createTagOption, normalizedOptionFilterProp, mode, filteredOptions, mergedSearchValue, mergedFieldNames]);
   const sorter = inputOptions => {
     const sortedOptions = [...inputOptions].sort((a, b) => filterSort(a, b, {
       searchValue: mergedSearchValue

package/lib/hooks/useFilterOptions.d.ts

@@ -1,3 +1,3 @@
 import type { FieldNames, DefaultOptionType, SelectProps } from '../Select';
-declare const _default: (options: DefaultOptionType[], fieldNames: FieldNames, searchValue?: string, filterOption?: SelectProps['filterOption'], optionFilterProp?: string) => DefaultOptionType[];
+declare const _default: (options: DefaultOptionType[], fieldNames: FieldNames, searchValue?: string, filterOption?: SelectProps['filterOption'], optionFilterProp?: string[]) => DefaultOptionType[];
 export default _default;

package/lib/hooks/useFilterOptions.js

@@ -12,55 +12,57 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function includes(test, search) {
   return (0, _commonUtil.toArray)(test).join('').toUpperCase().includes(search);
 }
-var _default = (options, fieldNames, searchValue, filterOption, optionFilterProp) => React.useMemo(() => {
-  if (!searchValue || filterOption === false) {
-    return options;
-  }
-  const {
-    options: fieldOptions,
-    label: fieldLabel,
-    value: fieldValue
-  } = fieldNames;
-  const filteredOptions = [];
-  const customizeFilter = typeof filterOption === 'function';
-  const upperSearch = searchValue.toUpperCase();
-  const filterFunc = customizeFilter ? filterOption : (_, option) => {
-    // Use provided `optionFilterProp`
-    if (optionFilterProp) {
-      return includes(option[optionFilterProp], upperSearch);
+var _default = (options, fieldNames, searchValue, filterOption, optionFilterProp) => {
+  return React.useMemo(() => {
+    if (!searchValue || filterOption === false) {
+      return options;
     }
+    const {
+      options: fieldOptions,
+      label: fieldLabel,
+      value: fieldValue
+    } = fieldNames;
+    const filteredOptions = [];
+    const customizeFilter = typeof filterOption === 'function';
+    const upperSearch = searchValue.toUpperCase();
+    const filterFunc = customizeFilter ? filterOption : (_, option) => {
+      // Use provided `optionFilterProp`
+      if (optionFilterProp && optionFilterProp.length) {
+        return optionFilterProp.some(prop => includes(option[prop], upperSearch));
+      }
 
-    // Auto select `label` or `value` by option type
-    if (option[fieldOptions]) {
-      // hack `fieldLabel` since `OptionGroup` children is not `label`
-      return includes(option[fieldLabel !== 'children' ? fieldLabel : 'label'], upperSearch);
-    }
-    return includes(option[fieldValue], upperSearch);
-  };
-  const wrapOption = customizeFilter ? opt => (0, _valueUtil.injectPropsWithOption)(opt) : opt => opt;
-  options.forEach(item => {
-    // Group should check child options
-    if (item[fieldOptions]) {
-      // Check group first
-      const matchGroup = filterFunc(searchValue, wrapOption(item));
-      if (matchGroup) {
-        filteredOptions.push(item);
-      } else {
-        // Check option
-        const subOptions = item[fieldOptions].filter(subItem => filterFunc(searchValue, wrapOption(subItem)));
-        if (subOptions.length) {
-          filteredOptions.push({
-            ...item,
-            [fieldOptions]: subOptions
-          });
+      // Auto select `label` or `value` by option type
+      if (option[fieldOptions]) {
+        // hack `fieldLabel` since `OptionGroup` children is not `label`
+        return includes(option[fieldLabel !== 'children' ? fieldLabel : 'label'], upperSearch);
+      }
+      return includes(option[fieldValue], upperSearch);
+    };
+    const wrapOption = customizeFilter ? opt => (0, _valueUtil.injectPropsWithOption)(opt) : opt => opt;
+    options.forEach(item => {
+      // Group should check child options
+      if (item[fieldOptions]) {
+        // Check group first
+        const matchGroup = filterFunc(searchValue, wrapOption(item));
+        if (matchGroup) {
+          filteredOptions.push(item);
+        } else {
+          // Check option
+          const subOptions = item[fieldOptions].filter(subItem => filterFunc(searchValue, wrapOption(subItem)));
+          if (subOptions.length) {
+            filteredOptions.push({
+              ...item,
+              [fieldOptions]: subOptions
+            });
+          }
         }
+        return;
       }
-      return;
-    }
-    if (filterFunc(searchValue, wrapOption(item))) {
-      filteredOptions.push(item);
-    }
-  });
-  return filteredOptions;
-}, [options, filterOption, optionFilterProp, searchValue, fieldNames]);
+      if (filterFunc(searchValue, wrapOption(item))) {
+        filteredOptions.push(item);
+      }
+    });
+    return filteredOptions;
+  }, [options, filterOption, optionFilterProp, searchValue, fieldNames]);
+};
 exports.default = _default;

package/lib/hooks/useOptions.d.ts

@@ -4,7 +4,7 @@ import type { FieldNames, RawValueType } from '../Select';
  * Parse `children` to `options` if `options` is not provided.
  * Then flatten the `options`.
  */
-declare const useOptions: <OptionType>(options: OptionType[], children: React.ReactNode, fieldNames: FieldNames, optionFilterProp: string, optionLabelProp: string) => {
+declare const useOptions: <OptionType>(options: OptionType[], children: React.ReactNode, fieldNames: FieldNames, optionFilterProp: string[], optionLabelProp: string) => {
     options: OptionType[];
     valueOptions: Map<RawValueType, OptionType>;
     labelOptions: Map<React.ReactNode, OptionType>;

package/lib/hooks/useOptions.js

@@ -34,7 +34,9 @@ const useOptions = (options, children, fieldNames, optionFilterProp, optionLabel
           valueOptions.set(option[fieldNames.value], option);
           setLabelOptions(labelOptions, option, fieldNames.label);
           // https://github.com/ant-design/ant-design/issues/35304
-          setLabelOptions(labelOptions, option, optionFilterProp);
+          optionFilterProp.forEach(prop => {
+            setLabelOptions(labelOptions, option, prop);
+          });
           setLabelOptions(labelOptions, option, optionLabelProp);
         } else {
           dig(option[fieldNames.options], true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"
@@ -51,9 +51,9 @@
   "dependencies": {
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
+    "@rc-component/virtual-list": "^1.0.1",
     "clsx": "^2.1.1",
-    "rc-overflow": "^1.5.0",
-    "rc-virtual-list": "^3.5.2"
+    "rc-overflow": "^1.5.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
@@ -76,7 +76,7 @@
     "prettier": "^3.1.1",
     "querystring": "^0.2.1",
     "rc-dialog": "^9.0.0",
-    "rc-test": "^7.0.9",
+    "rc-test": "^7.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"