@rc-component/cascader 1.5.0 → 1.6.1

package/es/Cascader.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { BaseSelect } from '@rc-component/select';
 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 useControlledState from "@rc-component/util/es/hooks/useControlledState";
 import * as React from 'react';
 import CascaderContext from "./context";
 import useDisplayValues from "./hooks/useDisplayValues";
@@ -60,10 +60,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const multiple = !!checkable;
 
   // =========================== Values ===========================
-  const [rawValues, setRawValues] = useMergedState(defaultValue, {
-    value,
-    postState: toRawValues
-  });
+  const [interanlRawValues, setRawValues] = useControlledState(defaultValue, value);
+  const rawValues = toRawValues(interanlRawValues);
 
   // ========================= FieldNames =========================
   const mergedFieldNames = React.useMemo(() => fillFieldNames(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
@@ -80,10 +78,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     searchValue,
     onSearch
   } = searchConfig;
-  const [mergedSearchValue, setSearchValue] = useMergedState('', {
-    value: searchValue,
-    postState: search => search || ''
-  });
+  const [internalSearchValue, setSearchValue] = useControlledState('', searchValue);
+  const mergedSearchValue = internalSearchValue || '';
   const onInternalSearch = (searchText, info) => {
     setSearchValue(searchText);
     if (info.source !== 'blur' && onSearch) {

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?: "rtl" | "ltr" | undefined;
+    direction?: "ltr" | "rtl" | undefined;
     searchValue: string;
     toggleOpen: (open?: boolean) => void;
     open?: boolean | undefined;

package/es/Panel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import type { CascaderProps, DefaultOptionType } from './Cascader';
-export type PickType = 'value' | 'defaultValue' | 'changeOnSelect' | 'onChange' | 'options' | 'prefixCls' | 'checkable' | 'fieldNames' | 'showCheckedStrategy' | 'loadData' | 'expandTrigger' | 'expandIcon' | 'loadingIcon' | 'className' | 'style' | 'direction' | 'notFoundContent' | 'disabled';
+export type PickType = 'value' | 'defaultValue' | 'changeOnSelect' | 'onChange' | 'options' | 'prefixCls' | 'checkable' | 'fieldNames' | 'showCheckedStrategy' | 'loadData' | 'expandTrigger' | 'expandIcon' | 'loadingIcon' | 'className' | 'style' | 'direction' | 'notFoundContent' | 'disabled' | 'optionRender';
 export type PanelProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = Pick<CascaderProps<OptionType, ValueField, Multiple>, PickType>;
 export default function Panel<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false>(props: PanelProps<OptionType, ValueField, Multiple>): React.JSX.Element;

package/es/Panel.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useEvent, useMergedState } from '@rc-component/util';
+import { useEvent, useControlledState } from '@rc-component/util';
 import * as React from 'react';
 import CascaderContext from "./context";
 import useMissingValues from "./hooks/useMissingValues";
@@ -29,17 +29,16 @@ export default function Panel(props) {
     loadingIcon,
     direction,
     notFoundContent = 'Not Found',
-    disabled
+    disabled,
+    optionRender
   } = props;
 
   // ======================== Multiple ========================
   const multiple = !!checkable;
 
   // ========================= Values =========================
-  const [rawValues, setRawValues] = useMergedState(defaultValue, {
-    value,
-    postState: toRawValues
-  });
+  const [interanlRawValues, setRawValues] = useControlledState(defaultValue, value);
+  const rawValues = toRawValues(interanlRawValues);
 
   // ========================= FieldNames =========================
   const mergedFieldNames = React.useMemo(() => fillFieldNames(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
@@ -90,8 +89,9 @@ export default function Panel(props) {
     expandTrigger,
     expandIcon,
     loadingIcon,
-    popupMenuColumnStyle: undefined
-  }), [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, loadData, expandTrigger, expandIcon, loadingIcon]);
+    popupMenuColumnStyle: undefined,
+    optionRender
+  }), [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, loadData, expandTrigger, expandIcon, loadingIcon, optionRender]);
 
   // ========================= Render =========================
   const panelPrefixCls = `${prefixCls}-panel`;

package/lib/Cascader.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _select = require("@rc-component/select");
 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 _useControlledState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useControlledState"));
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
 var _useDisplayValues = _interopRequireDefault(require("./hooks/useDisplayValues"));
@@ -69,10 +69,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const multiple = !!checkable;
 
   // =========================== Values ===========================
-  const [rawValues, setRawValues] = (0, _useMergedState.default)(defaultValue, {
-    value,
-    postState: _commonUtil.toRawValues
-  });
+  const [interanlRawValues, setRawValues] = (0, _useControlledState.default)(defaultValue, value);
+  const rawValues = (0, _commonUtil.toRawValues)(interanlRawValues);
 
   // ========================= FieldNames =========================
   const mergedFieldNames = React.useMemo(() => (0, _commonUtil.fillFieldNames)(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
@@ -89,10 +87,8 @@ const Cascader = /*#__PURE__*/React.forwardRef((props, ref) => {
     searchValue,
     onSearch
   } = searchConfig;
-  const [mergedSearchValue, setSearchValue] = (0, _useMergedState.default)('', {
-    value: searchValue,
-    postState: search => search || ''
-  });
+  const [internalSearchValue, setSearchValue] = (0, _useControlledState.default)('', searchValue);
+  const mergedSearchValue = internalSearchValue || '';
   const onInternalSearch = (searchText, info) => {
     setSearchValue(searchText);
     if (info.source !== 'blur' && onSearch) {

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?: "rtl" | "ltr" | undefined;
+    direction?: "ltr" | "rtl" | undefined;
     searchValue: string;
     toggleOpen: (open?: boolean) => void;
     open?: boolean | undefined;

package/lib/Panel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import type { CascaderProps, DefaultOptionType } from './Cascader';
-export type PickType = 'value' | 'defaultValue' | 'changeOnSelect' | 'onChange' | 'options' | 'prefixCls' | 'checkable' | 'fieldNames' | 'showCheckedStrategy' | 'loadData' | 'expandTrigger' | 'expandIcon' | 'loadingIcon' | 'className' | 'style' | 'direction' | 'notFoundContent' | 'disabled';
+export type PickType = 'value' | 'defaultValue' | 'changeOnSelect' | 'onChange' | 'options' | 'prefixCls' | 'checkable' | 'fieldNames' | 'showCheckedStrategy' | 'loadData' | 'expandTrigger' | 'expandIcon' | 'loadingIcon' | 'className' | 'style' | 'direction' | 'notFoundContent' | 'disabled' | 'optionRender';
 export type PanelProps<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false> = Pick<CascaderProps<OptionType, ValueField, Multiple>, PickType>;
 export default function Panel<OptionType extends DefaultOptionType = DefaultOptionType, ValueField extends keyof OptionType = keyof OptionType, Multiple extends boolean | React.ReactNode = false>(props: PanelProps<OptionType, ValueField, Multiple>): React.JSX.Element;

package/lib/Panel.js

@@ -38,17 +38,16 @@ function Panel(props) {
     loadingIcon,
     direction,
     notFoundContent = 'Not Found',
-    disabled
+    disabled,
+    optionRender
   } = props;
 
   // ======================== Multiple ========================
   const multiple = !!checkable;
 
   // ========================= Values =========================
-  const [rawValues, setRawValues] = (0, _util.useMergedState)(defaultValue, {
-    value,
-    postState: _commonUtil.toRawValues
-  });
+  const [interanlRawValues, setRawValues] = (0, _util.useControlledState)(defaultValue, value);
+  const rawValues = (0, _commonUtil.toRawValues)(interanlRawValues);
 
   // ========================= FieldNames =========================
   const mergedFieldNames = React.useMemo(() => (0, _commonUtil.fillFieldNames)(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
@@ -99,8 +98,9 @@ function Panel(props) {
     expandTrigger,
     expandIcon,
     loadingIcon,
-    popupMenuColumnStyle: undefined
-  }), [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, loadData, expandTrigger, expandIcon, loadingIcon]);
+    popupMenuColumnStyle: undefined,
+    optionRender
+  }), [mergedOptions, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, checkable, loadData, expandTrigger, expandIcon, loadingIcon, optionRender]);
 
   // ========================= Render =========================
   const panelPrefixCls = `${prefixCls}-panel`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/cascader",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "cascade select ui component for react",
   "keywords": [
     "react",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@rc-component/select": "~1.1.0",
     "@rc-component/tree": "~1.0.0",
-    "@rc-component/util": "^1.2.1",
+    "@rc-component/util": "^1.3.0",
     "classnames": "^2.3.1"
   },
   "devDependencies": {