@rc-component/cascader 1.3.1 → 1.4.0

package/README.md

@@ -114,12 +114,6 @@ React.render(
   </tr>
   </thead>
   <tbody>
-    <tr>
-      <td>autoClearSearchValue</td>
-      <td>boolean</td>
-      <td>true</td>
-      <td>Whether the current search will be cleared on selecting an item. Only applies when checkable</td>
-    </tr>
     <tr>
       <td>options</td>
       <td>Object</td>
@@ -234,9 +228,28 @@ React.render(
       <td>>true</td>
       <td>hide popup on select</td>
     </tr>
+     <tr>
+      <td>showSearch</td>
+      <td>boolean | object</td>
+      <td>false</td>
+      <td>Whether show search input in single mode</td>
+    </tr>
   </tbody>
 </table>
 
+### showSearch
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when checkable| boolean | true |
+| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - |  |
+| limit | Set the count of filtered items | number \| false | 50 |  |
+| matchInputWidth | Whether the width of list matches input, ([how it looks](https://github.com/ant-design/ant-design/issues/25779)) | boolean | true |  |
+| render | Used to render filtered options | function(inputValue, path): ReactNode | - |  |
+| sort | Used to sort filtered options | function(a, b, inputValue) | - |  |
+| searchValue | The current input "search" text | string | - | - |
+| onSearch | called when input changed | function | - | - |
+
 ### option
 
 <table class="table table-bordered table-striped">

package/es/Cascader.d.ts

@@ -12,12 +12,15 @@ export interface BaseOptionType {
     children?: DefaultOptionType[];
 }
 export type DefaultOptionType = BaseOptionType & Record<string, any>;
-export interface ShowSearchType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> {
+export interface SearchConfig<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> {
     filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames<OptionType, ValueField>) => boolean;
     render?: (inputValue: string, path: OptionType[], prefixCls: string, fieldNames: FieldNames<OptionType, ValueField>) => React.ReactNode;
     sort?: (a: OptionType[], b: OptionType[], inputValue: string, fieldNames: FieldNames<OptionType, ValueField>) => number;
     matchInputWidth?: boolean;
     limit?: number | false;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
 }
 export type ShowCheckedStrategy = typeof SHOW_PARENT | typeof SHOW_CHILD;
 interface BaseCascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> extends Omit<BaseSelectPropsWithoutPrivate, 'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'> {
@@ -30,9 +33,12 @@ interface BaseCascaderProps<OptionType extends DefaultOptionType = DefaultOption
     displayRender?: (label: string[], selectedOptions?: OptionType[]) => React.ReactNode;
     checkable?: boolean | React.ReactNode;
     showCheckedStrategy?: ShowCheckedStrategy;
+    /** @deprecated please use showSearch.autoClearSearchValue */
     autoClearSearchValue?: boolean;
-    showSearch?: boolean | ShowSearchType<OptionType>;
+    showSearch?: boolean | SearchConfig<OptionType>;
+    /** @deprecated please use showSearch.searchValue */
     searchValue?: string;
+    /** @deprecated please use showSearch.onSearch */
     onSearch?: (value: string) => void;
     expandTrigger?: 'hover' | 'click';
     options?: OptionType[];

package/es/Cascader.js

@@ -31,9 +31,6 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     displayRender,
     checkable,
     // Search
-    autoClearSearchValue = true,
-    searchValue,
-    onSearch,
     showSearch,
     // Trigger
     expandTrigger,
@@ -77,6 +74,12 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = useOptions(mergedFieldNames, options);
 
   // =========================== Search ===========================
+  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch, props);
+  const {
+    autoClearSearchValue = true,
+    searchValue,
+    onSearch
+  } = searchConfig;
   const [mergedSearchValue, setSearchValue] = useMergedState('', {
     value: searchValue,
     postState: search => search || ''
@@ -87,7 +90,6 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
       onSearch(searchText);
     }
   };
-  const [mergedShowSearch, searchConfig] = useSearchConfig(showSearch);
   const searchOptions = useSearchOptions(mergedSearchValue, mergedOptions, mergedFieldNames, popupPrefixCls || prefixCls, searchConfig, changeOnSelect || multiple);
 
   // =========================== Values ===========================

package/es/OptionList/useKeyboard.d.ts

@@ -2,7 +2,7 @@ import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
 import * as React from 'react';
 import type { DefaultOptionType, InternalFieldNames, LegacyKey, SingleValueType } from '../Cascader';
 declare const _default: (ref: React.Ref<RefOptionListProps>, options: DefaultOptionType[], fieldNames: InternalFieldNames, activeValueCells: LegacyKey[], setActiveValueCells: (activeValueCells: LegacyKey[]) => void, onKeyBoardSelect: (valueCells: SingleValueType, option: DefaultOptionType) => void, contextProps: {
-    direction?: "ltr" | "rtl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
     searchValue: string;
     toggleOpen: (open?: boolean) => void;
     open?: boolean | undefined;

package/es/hooks/useSearchConfig.d.ts

@@ -1,2 +1,2 @@
-import type { CascaderProps, ShowSearchType } from '../Cascader';
-export default function useSearchConfig(showSearch?: CascaderProps['showSearch']): [boolean, ShowSearchType<import("../Cascader").DefaultOptionType, string>];
+import type { CascaderProps, SearchConfig } from '../Cascader';
+export default function useSearchConfig(showSearch?: CascaderProps['showSearch'], props?: any): [boolean, SearchConfig<import("../Cascader").DefaultOptionType, string>];

package/es/hooks/useSearchConfig.js

@@ -1,14 +1,22 @@
 import warning from "@rc-component/util/es/warning";
 import * as React from 'react';
 // Convert `showSearch` to unique config
-export default function useSearchConfig(showSearch) {
+export default function useSearchConfig(showSearch, props) {
+  const {
+    autoClearSearchValue,
+    searchValue,
+    onSearch
+  } = props;
   return React.useMemo(() => {
     if (!showSearch) {
       return [false, {}];
     }
     let searchConfig = {
       matchInputWidth: true,
-      limit: 50
+      limit: 50,
+      autoClearSearchValue,
+      searchValue,
+      onSearch
     };
     if (showSearch && typeof showSearch === 'object') {
       searchConfig = {
@@ -23,5 +31,5 @@ export default function useSearchConfig(showSearch) {
       }
     }
     return [true, searchConfig];
-  }, [showSearch]);
+  }, [showSearch, autoClearSearchValue, searchValue, onSearch]);
 }

package/es/hooks/useSearchOptions.d.ts

@@ -1,4 +1,4 @@
-import type { DefaultOptionType, InternalFieldNames, ShowSearchType } from '../Cascader';
+import type { DefaultOptionType, InternalFieldNames, SearchConfig } from '../Cascader';
 export declare const SEARCH_MARK = "__rc_cascader_search_mark__";
-declare const useSearchOptions: (search: string, options: DefaultOptionType[], fieldNames: InternalFieldNames, prefixCls: string, config: ShowSearchType, enableHalfPath?: boolean) => DefaultOptionType[];
+declare const useSearchOptions: (search: string, options: DefaultOptionType[], fieldNames: InternalFieldNames, prefixCls: string, config: SearchConfig, enableHalfPath?: boolean) => DefaultOptionType[];
 export default useSearchOptions;

package/es/index.d.ts

@@ -1,5 +1,5 @@
 import Cascader from './Cascader';
 import Panel from './Panel';
-export type { BaseOptionType, DefaultOptionType, CascaderProps, FieldNames, ShowSearchType, CascaderRef, } from './Cascader';
+export type { BaseOptionType, DefaultOptionType, CascaderProps, FieldNames, SearchConfig, CascaderRef, } from './Cascader';
 export { Panel };
 export default Cascader;

package/lib/Cascader.d.ts

@@ -12,12 +12,15 @@ export interface BaseOptionType {
     children?: DefaultOptionType[];
 }
 export type DefaultOptionType = BaseOptionType & Record<string, any>;
-export interface ShowSearchType<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> {
+export interface SearchConfig<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> {
     filter?: (inputValue: string, options: OptionType[], fieldNames: FieldNames<OptionType, ValueField>) => boolean;
     render?: (inputValue: string, path: OptionType[], prefixCls: string, fieldNames: FieldNames<OptionType, ValueField>) => React.ReactNode;
     sort?: (a: OptionType[], b: OptionType[], inputValue: string, fieldNames: FieldNames<OptionType, ValueField>) => number;
     matchInputWidth?: boolean;
     limit?: number | false;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
 }
 export type ShowCheckedStrategy = typeof SHOW_PARENT | typeof SHOW_CHILD;
 interface BaseCascaderProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType> extends Omit<BaseSelectPropsWithoutPrivate, 'tokenSeparators' | 'labelInValue' | 'mode' | 'showSearch'> {
@@ -30,9 +33,12 @@ interface BaseCascaderProps<OptionType extends DefaultOptionType = DefaultOption
     displayRender?: (label: string[], selectedOptions?: OptionType[]) => React.ReactNode;
     checkable?: boolean | React.ReactNode;
     showCheckedStrategy?: ShowCheckedStrategy;
+    /** @deprecated please use showSearch.autoClearSearchValue */
     autoClearSearchValue?: boolean;
-    showSearch?: boolean | ShowSearchType<OptionType>;
+    showSearch?: boolean | SearchConfig<OptionType>;
+    /** @deprecated please use showSearch.searchValue */
     searchValue?: string;
+    /** @deprecated please use showSearch.onSearch */
     onSearch?: (value: string) => void;
     expandTrigger?: 'hover' | 'click';
     options?: OptionType[];

package/lib/Cascader.js

@@ -40,9 +40,6 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     displayRender,
     checkable,
     // Search
-    autoClearSearchValue = true,
-    searchValue,
-    onSearch,
     showSearch,
     // Trigger
     expandTrigger,
@@ -86,6 +83,12 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [mergedOptions, getPathKeyEntities, getValueByKeyPath] = (0, _useOptions.default)(mergedFieldNames, options);
 
   // =========================== Search ===========================
+  const [mergedShowSearch, searchConfig] = (0, _useSearchConfig.default)(showSearch, props);
+  const {
+    autoClearSearchValue = true,
+    searchValue,
+    onSearch
+  } = searchConfig;
   const [mergedSearchValue, setSearchValue] = (0, _useMergedState.default)('', {
     value: searchValue,
     postState: search => search || ''
@@ -96,7 +99,6 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
       onSearch(searchText);
     }
   };
-  const [mergedShowSearch, searchConfig] = (0, _useSearchConfig.default)(showSearch);
   const searchOptions = (0, _useSearchOptions.default)(mergedSearchValue, mergedOptions, mergedFieldNames, popupPrefixCls || prefixCls, searchConfig, changeOnSelect || multiple);
 
   // =========================== Values ===========================

package/lib/OptionList/useKeyboard.d.ts

@@ -2,7 +2,7 @@ import type { RefOptionListProps } from '@rc-component/select/lib/OptionList';
 import * as React from 'react';
 import type { DefaultOptionType, InternalFieldNames, LegacyKey, SingleValueType } from '../Cascader';
 declare const _default: (ref: React.Ref<RefOptionListProps>, options: DefaultOptionType[], fieldNames: InternalFieldNames, activeValueCells: LegacyKey[], setActiveValueCells: (activeValueCells: LegacyKey[]) => void, onKeyBoardSelect: (valueCells: SingleValueType, option: DefaultOptionType) => void, contextProps: {
-    direction?: "ltr" | "rtl" | undefined;
+    direction?: "rtl" | "ltr" | undefined;
     searchValue: string;
     toggleOpen: (open?: boolean) => void;
     open?: boolean | undefined;

package/lib/hooks/useSearchConfig.d.ts

@@ -1,2 +1,2 @@
-import type { CascaderProps, ShowSearchType } from '../Cascader';
-export default function useSearchConfig(showSearch?: CascaderProps['showSearch']): [boolean, ShowSearchType<import("../Cascader").DefaultOptionType, string>];
+import type { CascaderProps, SearchConfig } from '../Cascader';
+export default function useSearchConfig(showSearch?: CascaderProps['showSearch'], props?: any): [boolean, SearchConfig<import("../Cascader").DefaultOptionType, string>];

package/lib/hooks/useSearchConfig.js

@@ -10,14 +10,22 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Convert `showSearch` to unique config
-function useSearchConfig(showSearch) {
+function useSearchConfig(showSearch, props) {
+  const {
+    autoClearSearchValue,
+    searchValue,
+    onSearch
+  } = props;
   return React.useMemo(() => {
     if (!showSearch) {
       return [false, {}];
     }
     let searchConfig = {
       matchInputWidth: true,
-      limit: 50
+      limit: 50,
+      autoClearSearchValue,
+      searchValue,
+      onSearch
     };
     if (showSearch && typeof showSearch === 'object') {
       searchConfig = {
@@ -32,5 +40,5 @@ function useSearchConfig(showSearch) {
       }
     }
     return [true, searchConfig];
-  }, [showSearch]);
+  }, [showSearch, autoClearSearchValue, searchValue, onSearch]);
 }

package/lib/hooks/useSearchOptions.d.ts

@@ -1,4 +1,4 @@
-import type { DefaultOptionType, InternalFieldNames, ShowSearchType } from '../Cascader';
+import type { DefaultOptionType, InternalFieldNames, SearchConfig } from '../Cascader';
 export declare const SEARCH_MARK = "__rc_cascader_search_mark__";
-declare const useSearchOptions: (search: string, options: DefaultOptionType[], fieldNames: InternalFieldNames, prefixCls: string, config: ShowSearchType, enableHalfPath?: boolean) => DefaultOptionType[];
+declare const useSearchOptions: (search: string, options: DefaultOptionType[], fieldNames: InternalFieldNames, prefixCls: string, config: SearchConfig, enableHalfPath?: boolean) => DefaultOptionType[];
 export default useSearchOptions;

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import Cascader from './Cascader';
 import Panel from './Panel';
-export type { BaseOptionType, DefaultOptionType, CascaderProps, FieldNames, ShowSearchType, CascaderRef, } from './Cascader';
+export type { BaseOptionType, DefaultOptionType, CascaderProps, FieldNames, SearchConfig, CascaderRef, } from './Cascader';
 export { Panel };
 export default Cascader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/cascader",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "cascade select ui component for react",
   "keywords": [
     "react",