@rc-component/cascader 1.3.0 → 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">
@@ -298,3 +311,9 @@ $ npm run coverage
 ## License
 
 rc-cascader is released under the MIT license.
+
+## 🤝 Contributing 
+
+<a href="https://openomy.app/github/react-component/cascader" target="_blank" style="display: block; width: 100%;" align="center">
+  <img src="https://www.openomy.app/svg?repo=react-component/cascader&chart=bubble&latestMonth=24" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" />
+</a>

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[];
@@ -81,10 +87,8 @@ export type InternalCascaderProps = Omit<CascaderProps, 'onChange' | 'value' | '
     onChange?: (value: InternalValueType, selectOptions: BaseOptionType[] | BaseOptionType[][]) => void;
 };
 export type CascaderRef = Omit<BaseSelectRef, 'scrollTo'>;
-declare const Cascader: (<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends React.ReactNode = false>(props: CascaderProps<OptionType, ValueField, Multiple> & {
-    children?: React.ReactNode;
-} & {
-    ref?: React.Ref<CascaderRef> | undefined;
+declare const Cascader: (<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends React.ReactNode = false>(props: React.PropsWithChildren<CascaderProps<OptionType, ValueField, Multiple>> & {
+    ref?: React.Ref<CascaderRef>;
 }) => React.ReactElement) & {
     displayName?: string | undefined;
     SHOW_PARENT: typeof SHOW_PARENT;

package/es/Cascader.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { BaseSelect } from '@rc-component/select';
-import useId from "@rc-component/select/es/hooks/useId";
+import useId from "@rc-component/util/es/hooks/useId";
 import useEvent from "@rc-component/util/es/hooks/useEvent";
 import useMergedState from "@rc-component/util/es/hooks/useMergedState";
 import * as React from 'react';
@@ -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/List.js

@@ -155,7 +155,6 @@ const RawOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
       const cellKeyPath = toPathKey(cellPath);
       const ele = containerRef.current?.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]` // matches unescaped double quotes
       );
-
       if (ele) {
         scrollIntoParentView(ele);
       }

package/es/OptionList/useActive.js

@@ -19,7 +19,6 @@ const useActive = (multiple, open) => {
   }, /* eslint-disable react-hooks/exhaustive-deps */
   [open, firstValueCells]
   /* eslint-enable react-hooks/exhaustive-deps */);
-
   return [activeValueCells, setActiveValueCells];
 };
 export default useActive;

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[];
@@ -81,10 +87,8 @@ export type InternalCascaderProps = Omit<CascaderProps, 'onChange' | 'value' | '
     onChange?: (value: InternalValueType, selectOptions: BaseOptionType[] | BaseOptionType[][]) => void;
 };
 export type CascaderRef = Omit<BaseSelectRef, 'scrollTo'>;
-declare const Cascader: (<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends React.ReactNode = false>(props: CascaderProps<OptionType, ValueField, Multiple> & {
-    children?: React.ReactNode;
-} & {
-    ref?: React.Ref<CascaderRef> | undefined;
+declare const Cascader: (<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends React.ReactNode = false>(props: React.PropsWithChildren<CascaderProps<OptionType, ValueField, Multiple>> & {
+    ref?: React.Ref<CascaderRef>;
 }) => React.ReactElement) & {
     displayName?: string | undefined;
     SHOW_PARENT: typeof SHOW_PARENT;

package/lib/Cascader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _select = require("@rc-component/select");
-var _useId = _interopRequireDefault(require("@rc-component/select/lib/hooks/useId"));
+var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
 var _useEvent = _interopRequireDefault(require("@rc-component/util/lib/hooks/useEvent"));
 var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
 var React = _interopRequireWildcard(require("react"));
@@ -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/List.js

@@ -163,7 +163,6 @@ const RawOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
       const cellKeyPath = (0, _commonUtil.toPathKey)(cellPath);
       const ele = containerRef.current?.querySelector(`li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]` // matches unescaped double quotes
       );
-
       if (ele) {
         (0, _commonUtil.scrollIntoParentView)(ele);
       }

package/lib/OptionList/useActive.js

@@ -28,7 +28,6 @@ const useActive = (multiple, open) => {
   }, /* eslint-disable react-hooks/exhaustive-deps */
   [open, firstValueCells]
   /* eslint-enable react-hooks/exhaustive-deps */);
-
   return [activeValueCells, setActiveValueCells];
 };
 var _default = exports.default = useActive;

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.0",
+  "version": "1.4.0",
   "description": "cascade select ui component for react",
   "keywords": [
     "react",
@@ -43,7 +43,7 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/select": "~1.0.0",
+    "@rc-component/select": "~1.0.7",
     "@rc-component/tree": "~1.0.0",
     "@rc-component/util": "^1.2.1",
     "classnames": "^2.3.1"