@rc-component/cascader 1.6.0 → 1.7.0-alpha.0

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/Checkbox.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CascaderContext from "../context";
 export default function Checkbox({
   prefixCls,
@@ -14,7 +14,7 @@ export default function Checkbox({
   } = React.useContext(CascaderContext);
   const customCheckbox = typeof checkable !== 'boolean' ? checkable : null;
   return /*#__PURE__*/React.createElement("span", {
-    className: classNames(`${prefixCls}`, {
+    className: clsx(`${prefixCls}`, {
       [`${prefixCls}-checked`]: checked,
       [`${prefixCls}-indeterminate`]: !checked && halfChecked,
       [`${prefixCls}-disabled`]: disabled || disableCheckbox

package/es/OptionList/Column.js

@@ -1,7 +1,7 @@
 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 cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
-import pickAttrs from "rc-util/es/pickAttrs";
+import pickAttrs from "@rc-component/util/es/pickAttrs";
 import CascaderContext from "../context";
 import { SEARCH_MARK } from "../hooks/useSearchOptions";
 import { isLeaf, toPathKey } from "../utils/commonUtil";
@@ -89,7 +89,7 @@ export default function Column({
 
   // ============================ Render ============================
   return /*#__PURE__*/React.createElement("ul", {
-    className: cls(menuPrefixCls, classNames?.popup?.list),
+    className: clsx(menuPrefixCls, classNames?.popup?.list),
     style: styles?.popup?.list,
     ref: menuRef,
     role: "menu"
@@ -141,7 +141,7 @@ export default function Column({
     return /*#__PURE__*/React.createElement("li", _extends({
       key: fullPathKey
     }, ariaProps, {
-      className: cls(menuItemPrefixCls, classNames?.popup?.listItem, {
+      className: clsx(menuItemPrefixCls, classNames?.popup?.listItem, {
         [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
         [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
         [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),

package/es/OptionList/List.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); }
 /* eslint-disable default-case */
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import CascaderContext from "../context";
 import { getFullPathKeys, isLeaf, scrollIntoParentView, toPathKey, toPathKeys, toPathValueStr } from "../utils/commonUtil";
@@ -202,7 +202,7 @@ const RawOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(CacheContent, {
     open: open
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${mergedPrefixCls}-menus`, {
+    className: clsx(`${mergedPrefixCls}-menus`, {
       [`${mergedPrefixCls}-menu-empty`]: isEmpty,
       [`${mergedPrefixCls}-rtl`]: rtl
     }),

package/es/Panel.js

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import { useEvent, useMergedState } from '@rc-component/util';
+import { clsx } from 'clsx';
+import { useEvent, useControlledState } from '@rc-component/util';
 import * as React from 'react';
 import CascaderContext from "./context";
 import useMissingValues from "./hooks/useMissingValues";
@@ -37,10 +37,8 @@ export default function Panel(props) {
   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 */
@@ -101,7 +99,7 @@ export default function Panel(props) {
   return /*#__PURE__*/React.createElement(CascaderContext.Provider, {
     value: cascaderContext
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(panelPrefixCls, {
+    className: clsx(panelPrefixCls, {
       [`${panelPrefixCls}-rtl`]: direction === 'rtl',
       [`${panelPrefixCls}-empty`]: isEmpty
     }, className),

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/Checkbox.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Checkbox;
 var React = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _context = _interopRequireDefault(require("../context"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -23,7 +23,7 @@ function Checkbox({
   } = React.useContext(_context.default);
   const customCheckbox = typeof checkable !== 'boolean' ? checkable : null;
   return /*#__PURE__*/React.createElement("span", {
-    className: (0, _classnames.default)(`${prefixCls}`, {
+    className: (0, _clsx.clsx)(`${prefixCls}`, {
       [`${prefixCls}-checked`]: checked,
       [`${prefixCls}-indeterminate`]: !checked && halfChecked,
       [`${prefixCls}-disabled`]: disabled || disableCheckbox

package/lib/OptionList/Column.js

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FIX_LABEL = void 0;
 exports.default = Column;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var React = _interopRequireWildcard(require("react"));
-var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
+var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
 var _context = _interopRequireDefault(require("../context"));
 var _useSearchOptions = require("../hooks/useSearchOptions");
 var _commonUtil = require("../utils/commonUtil");
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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 }; }
 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); }
 const FIX_LABEL = exports.FIX_LABEL = '__cascader_fix_label__';
 function Column({
@@ -99,7 +99,7 @@ function Column({
 
   // ============================ Render ============================
   return /*#__PURE__*/React.createElement("ul", {
-    className: (0, _classnames.default)(menuPrefixCls, classNames?.popup?.list),
+    className: (0, _clsx.clsx)(menuPrefixCls, classNames?.popup?.list),
     style: styles?.popup?.list,
     ref: menuRef,
     role: "menu"
@@ -151,7 +151,7 @@ function Column({
     return /*#__PURE__*/React.createElement("li", _extends({
       key: fullPathKey
     }, ariaProps, {
-      className: (0, _classnames.default)(menuItemPrefixCls, classNames?.popup?.listItem, {
+      className: (0, _clsx.clsx)(menuItemPrefixCls, classNames?.popup?.listItem, {
         [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
         [`${menuItemPrefixCls}-active`]: activeValue === value || activeValue === fullPathKey,
         [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(disabled),

package/lib/OptionList/List.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../context"));
 var _commonUtil = require("../utils/commonUtil");
@@ -13,9 +13,9 @@ var _CacheContent = _interopRequireDefault(require("./CacheContent"));
 var _Column = _interopRequireWildcard(require("./Column"));
 var _useActive = _interopRequireDefault(require("./useActive"));
 var _useKeyboard = _interopRequireDefault(require("./useKeyboard"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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 }; }
 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); } /* eslint-disable default-case */
 const RawOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -210,7 +210,7 @@ const RawOptionList = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(_CacheContent.default, {
     open: open
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(`${mergedPrefixCls}-menus`, {
+    className: (0, _clsx.clsx)(`${mergedPrefixCls}-menus`, {
       [`${mergedPrefixCls}-menu-empty`]: isEmpty,
       [`${mergedPrefixCls}-rtl`]: rtl
     }),

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.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Panel;
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _util = require("@rc-component/util");
 var React = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("./context"));
@@ -15,9 +15,9 @@ var _useValues = _interopRequireDefault(require("./hooks/useValues"));
 var _List = _interopRequireDefault(require("./OptionList/List"));
 var _commonUtil = require("./utils/commonUtil");
 var _treeUtil = require("./utils/treeUtil");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 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 }; }
 function noop() {}
 function Panel(props) {
   const {
@@ -46,10 +46,8 @@ function Panel(props) {
   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 */
@@ -110,7 +108,7 @@ function Panel(props) {
   return /*#__PURE__*/React.createElement(_context.default.Provider, {
     value: cascaderContext
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(panelPrefixCls, {
+    className: (0, _clsx.clsx)(panelPrefixCls, {
       [`${panelPrefixCls}-rtl`]: direction === 'rtl',
       [`${panelPrefixCls}-empty`]: isEmpty
     }, className),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/cascader",
-  "version": "1.6.0",
+  "version": "1.7.0-alpha.0",
   "description": "cascade select ui component for react",
   "keywords": [
     "react",
@@ -43,19 +43,19 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/select": "~1.1.0",
+    "@rc-component/select": "~1.2.0-alpha.2",
     "@rc-component/tree": "~1.0.0",
-    "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.1"
+    "@rc-component/util": "^1.3.0",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.3",
     "@rc-component/trigger": "^3.0.0",
     "@testing-library/react": "^12.1.5",
-    "@types/classnames": "^2.2.6",
     "@types/enzyme": "^3.1.15",
     "@types/jest": "^29.4.0",
+    "@types/node": "^24.5.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/warning": "^3.0.0",