@hi-ui/cascader 5.0.0-experimental.2 → 5.0.0-rc.0

package/CHANGELOG.md

@@ -1,44 +1,6 @@
 # @hi-ui/cascader
 
-## 5.0.0-experimental.2
-
-### Minor Changes
-
-- 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
-
-### Patch Changes
-
-- eb17c4697: style: 修复 UI/样式问题 (5.0)
-- Updated dependencies [7f204c892]
-- Updated dependencies [eb17c4697]
-- Updated dependencies [eb17c4697]
-- Updated dependencies [c407744fe]
-- Updated dependencies [59cef699f]
-  - @hi-ui/icons@5.0.0-experimental.1
-  - @hi-ui/core@5.0.0-experimental.1
-  - @hi-ui/highlighter@5.0.0-experimental.1
-  - @hi-ui/input@5.0.0-experimental.2
-  - @hi-ui/picker@5.0.0-experimental.2
-  - @hi-ui/popper@5.0.0-experimental.1
-  - @hi-ui/virtual-list@5.0.0-experimental.1
-  - @hi-ui/use-merge-semantic@5.0.0-experimental.0
-  - @hi-ui/spinner@5.0.0-experimental.1
-
-## 5.0.0-experimental.1
-
-### Patch Changes
-
-- 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
-- 发布 hiui experimental 版本
-- 8561492d5: fix(cascader): 在平铺搜索模式下，当设置了 changeOnSelect 则搜索结果中展示父节点 (5.0)
-- Updated dependencies [8f23e9322]
-- Updated dependencies [b27483796]
-- Updated dependencies [900c6c2f0]
-- Updated dependencies
-  - @hi-ui/input@5.0.0-experimental.1
-  - @hi-ui/picker@5.0.0-experimental.1
-
-## 5.0.0-experimental.0
+## 5.0.0-rc.0
 
 ### Major Changes
 
@@ -53,19 +15,20 @@
 - 3e1d3608f: feat(cascader): add onItemClick api (5.0)
 - 6dca7795c: feat: 下拉选择组件增加 showIndicator 参数 & 修改 appearance 中的 unset 样式 (5.0)
 - 77d969c2e: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
+- bf1174ed8: feat(cascader): 每次打开选择面板时自动定位到已选节点位置 (5.0)
 - 58ad82e94: feat: 输入框和选择器组件增加 borderless 形态 (5.0)
+- 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
 
 ### Patch Changes
 
-- 6fb223e3a: style: fix ui bug (5.0)
-- 1662753e0: style: fix ui bug (5.0)
 - cf89262c7: style(picker): 移除 picker 组件中的 \_\_text 样式定义 (5.0)
 - 9b34d99bc: fix: 修复 5.0 UI 问题 (5.0)
-- be5a59325: style: 修改样式问题 (5.0)
 - 79ea480f3: feat(global-context): 增加 size api 全局配置 (5.0)
 - 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
 - eb718e940: fix: 修改组件问题 (5.0)
 - 95abba983: fix: 修改 UI 问题 (5.0)
+- 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
+- eb17c4697: style: 修复 UI/样式问题 (5.0)
 - f3bf08f27: fix(cascader): 平铺搜索结果时不再展示不可点击的父节点 (5.0)
 - de8d058dc: perf: 对下拉选择类组件的 customRender 的内容增加 memoization 以优化性能 (5.0)
 - 5210770d9: feat(picker): add header api (5.0)
@@ -76,7 +39,6 @@
   - feat(check-cascader): 增加 flattedSearchResult 属性，用于控制搜索结果的展现形式 (5.0)
   - fix(cascader): 修复当搜索结果为空时，下拉框没有显示空状态问题 (5.0)
 - 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
-- 7f3abee55: style: fix ui bug (5.0)
 - 0a4e90dbd: <br>
   - style(tag-input): 间距调整 (5.0)
   - style(select): 选择类组件选项圆角改为 4px (5.0)
@@ -86,70 +48,75 @@
   - style(cascader&check-cascader): 调整选项容器最小宽度为 160px (5.0)
   - style(cascader&check-cascader): 优化下拉框宽度，让内容和搜索框默认宽度对齐 (5.0)
   - perf(cascader&check-cascader): 优化 customRender 函数，支持传递选中项和当前值 (5.0)
+- 8561492d5: fix(cascader): 在平铺搜索模式下，当设置了 changeOnSelect 则搜索结果中展示父节点 (5.0)
 - 4a31cea53: style: 统一调整选择类组件 hover 时的背景色 (5.0)
 - 99801c2d1: fix: 修复 UI 问题 (5.0)
 - Updated dependencies [0b34e1c15]
 - Updated dependencies [da2e63a14]
 - Updated dependencies [1e226cd66]
 - Updated dependencies [b9989e482]
-- Updated dependencies [1662753e0]
+- Updated dependencies [7f204c892]
 - Updated dependencies [122d1d859]
 - Updated dependencies [f1ab51725]
 - Updated dependencies [41552be0b]
+- Updated dependencies [eb17c4697]
 - Updated dependencies [8c0ee78f0]
 - Updated dependencies [9b34d99bc]
 - Updated dependencies [8f3aa85e4]
-- Updated dependencies [f4fc0ef30]
 - Updated dependencies [ec4c7faa2]
 - Updated dependencies [29cae09ea]
 - Updated dependencies [fd4c20bbd]
-- Updated dependencies [be5a59325]
-- Updated dependencies [71fc15e5c]
 - Updated dependencies [79ea480f3]
 - Updated dependencies [2e56529f7]
+- Updated dependencies [3a7186e4b]
 - Updated dependencies [277c5033a]
 - Updated dependencies [95abba983]
+- Updated dependencies [8f23e9322]
 - Updated dependencies [4a31cea53]
+- Updated dependencies [b27483796]
+- Updated dependencies [eb17c4697]
 - Updated dependencies [976ec929d]
 - Updated dependencies [f1ab51725]
 - Updated dependencies [6dca7795c]
+- Updated dependencies [900c6c2f0]
 - Updated dependencies [7b956b1eb]
 - Updated dependencies [5210770d9]
-- Updated dependencies [e2d184e74]
 - Updated dependencies [4006b2c8c]
+- Updated dependencies [c407744fe]
+- Updated dependencies [d91a8bb0f]
 - Updated dependencies [77d969c2e]
 - Updated dependencies [e42e2badf]
 - Updated dependencies [33da3144e]
-- Updated dependencies [7f3abee55]
 - Updated dependencies [6fcda9bf2]
 - Updated dependencies [0a4e90dbd]
 - Updated dependencies [58ad82e94]
-- Updated dependencies [a0f0c9d6b]
+- Updated dependencies [95d930354]
 - Updated dependencies [f2be367e9]
 - Updated dependencies [1972fd16a]
+- Updated dependencies [59cef699f]
 - Updated dependencies [99801c2d1]
-- Updated dependencies [86910f5e2]
 - Updated dependencies [cb7b794d0]
-  - @hi-ui/picker@5.0.0-experimental.0
-  - @hi-ui/input@5.0.0-experimental.0
-  - @hi-ui/popper@5.0.0-experimental.0
-  - @hi-ui/icons@5.0.0-experimental.0
-  - @hi-ui/virtual-list@5.0.0-experimental.0
-  - @hi-ui/core@5.0.0-experimental.0
-  - @hi-ui/use-check-state@5.0.0-experimental.0
-  - @hi-ui/use-data-source@5.0.0-experimental.0
-  - @hi-ui/use-latest@5.0.0-experimental.0
-  - @hi-ui/use-search-mode@5.0.0-experimental.0
-  - @hi-ui/use-toggle@5.0.0-experimental.0
-  - @hi-ui/use-uncontrolled-state@5.0.0-experimental.0
-  - @hi-ui/highlighter@5.0.0-experimental.0
-  - @hi-ui/spinner@5.0.0-experimental.0
-  - @hi-ui/array-utils@5.0.0-experimental.0
-  - @hi-ui/classname@5.0.0-experimental.0
-  - @hi-ui/env@5.0.0-experimental.0
-  - @hi-ui/func-utils@5.0.0-experimental.0
-  - @hi-ui/tree-utils@5.0.0-experimental.0
-  - @hi-ui/type-assertion@5.0.0-experimental.0
+  - @hi-ui/picker@5.0.0-rc.0
+  - @hi-ui/input@5.0.0-rc.0
+  - @hi-ui/popper@5.0.0-rc.0
+  - @hi-ui/icons@5.0.0-rc.0
+  - @hi-ui/core@5.0.0-rc.0
+  - @hi-ui/use-check-state@5.0.0-rc.0
+  - @hi-ui/use-data-source@5.0.0-rc.0
+  - @hi-ui/use-latest@5.0.0-rc.0
+  - @hi-ui/use-search-mode@5.0.0-rc.0
+  - @hi-ui/use-toggle@5.0.0-rc.0
+  - @hi-ui/use-uncontrolled-state@5.0.0-rc.0
+  - @hi-ui/highlighter@5.0.0-rc.0
+  - @hi-ui/spinner@5.0.0-rc.0
+  - @hi-ui/virtual-list@5.0.0-rc.0
+  - @hi-ui/array-utils@5.0.0-rc.0
+  - @hi-ui/classname@5.0.0-rc.0
+  - @hi-ui/env@5.0.0-rc.0
+  - @hi-ui/func-utils@5.0.0-rc.0
+  - @hi-ui/tree-utils@5.0.0-rc.0
+  - @hi-ui/type-assertion@5.0.0-rc.0
+  - @hi-ui/use-merge-semantic@5.0.0-rc.0
 
 ## 4.5.2
 

package/lib/cjs/CascaderMenuList.js

@@ -22,6 +22,7 @@ var index = require('./utils/index.js');
 var context = require('./context.js');
 var treeUtils = require('@hi-ui/tree-utils');
 var typeAssertion = require('@hi-ui/type-assertion');
+var scrollIntoView = require('scroll-into-view-if-needed');
 var VirtualList = require('@hi-ui/virtual-list');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
@@ -29,6 +30,7 @@ function _interopDefaultCompat(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var scrollIntoView__default = /*#__PURE__*/_interopDefaultCompat(scrollIntoView);
 var VirtualList__default = /*#__PURE__*/_interopDefaultCompat(VirtualList);
 var menuListPrefix = classname.getPrefixCls('cascader-menu-list');
 var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -82,6 +84,26 @@ var CascaderMenu = function CascaderMenu(_ref) {
     height: 260,
     itemHeight: 32
   };
+  var activeNodeRef = React.useRef();
+  var _useState = React.useState(null),
+    activeNode = _useState[0],
+    setActiveNode = _useState[1];
+  var timeoutId = React.useRef(null);
+  React.useEffect(function () {
+    if (activeNode) {
+      timeoutId.current = setTimeout(function () {
+        scrollIntoView__default["default"](activeNode, {
+          scrollMode: 'if-needed',
+          block: 'center'
+        });
+      }, 100);
+    }
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, [activeNode, activeNodeRef, virtual]);
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: cls,
     style: menuStyle,
@@ -99,13 +121,15 @@ var CascaderMenu = function CascaderMenu(_ref) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
       key: option.id,
       option: option,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      setActiveNode: setActiveNode
     });
   }) : null);
 };
 var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var option = _ref2.option,
-    prefixCls = _ref2.prefixCls;
+    prefixCls = _ref2.prefixCls,
+    setActiveNode = _ref2.setActiveNode;
   var _useCascaderContext3 = context.useCascaderContext(),
     flatted = _useCascaderContext3.flatted,
     disabledContext = _useCascaderContext3.disabled,
@@ -125,7 +149,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var disabled = disabledContext || option.disabled;
   var optionCls = classname.cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected", classNames === null || classNames === void 0 ? void 0 : classNames.option);
   return /*#__PURE__*/React__default["default"].createElement("li", {
-    ref: ref,
+    ref: function ref(node) {
+      if (node && active) {
+        setActiveNode === null || setActiveNode === void 0 ? void 0 : setActiveNode(node);
+      }
+    },
     key: option.id,
     role: "menu-item",
     className: prefixCls + "-item",
@@ -162,7 +190,7 @@ var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildre
   if (canLoadChildren) {
     return /*#__PURE__*/React__default["default"].createElement("span", {
       className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
-    }, index$1.defaultSuffixIcon);
+    }, /*#__PURE__*/React__default["default"].createElement(index$1.DefaultSuffixIcon, null));
   }
   return /*#__PURE__*/React__default["default"].createElement("span", {
     className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")

package/lib/cjs/hooks/use-async-switch.js

@@ -62,56 +62,53 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
     addLoadingIds = _useCheckState.add,
     removeLoadingIds = _useCheckState.remove;
   var onExpandLatest = useLatest.useLatestCallback(onExpand);
-  var onNodeSwitch = React.useCallback(function (node_1) {
-    for (var _len = arguments.length, args_1 = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args_1[_key - 1] = arguments[_key];
+  var onNodeSwitch = React.useCallback(function (node, onlyExpand) {
+    if (onlyExpand === void 0) {
+      onlyExpand = false;
     }
-    return tslib.__awaiter(void 0, [node_1].concat(args_1), void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2(node, onlyExpand) {
+    return tslib.__awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2() {
       var id, children, isLeaf;
       return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              if (onlyExpand === void 0) {
-                onlyExpand = false;
-              }
               // 直接触发选中该节点
               onExpandLatest(node, onlyExpand);
               id = node.id, children = node.children, isLeaf = node.isLeaf;
               if (!children) {
-                _context2.next = 5;
+                _context2.next = 4;
                 break;
               }
               return _context2.abrupt("return");
-            case 5:
+            case 4:
               if (!isLeaf) {
-                _context2.next = 7;
+                _context2.next = 6;
                 break;
               }
               return _context2.abrupt("return");
-            case 7:
+            case 6:
               if (!onLoadChildren) {
-                _context2.next = 18;
+                _context2.next = 17;
                 break;
               }
               addLoadingIds(id);
-              _context2.prev = 9;
-              _context2.next = 12;
+              _context2.prev = 8;
+              _context2.next = 11;
               return loadChildren(node);
-            case 12:
+            case 11:
               removeLoadingIds(id);
-              _context2.next = 18;
+              _context2.next = 17;
               break;
-            case 15:
-              _context2.prev = 15;
-              _context2.t0 = _context2["catch"](9);
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](8);
               removeLoadingIds(id);
-            case 18:
+            case 17:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[9, 15]]);
+      }, _callee2, null, [[8, 14]]);
     }));
   }, [loadChildren, onLoadChildren, onExpandLatest, addLoadingIds, removeLoadingIds]);
   return [isLoadingId, onNodeSwitch];

package/lib/cjs/icons/index.js

@@ -16,17 +16,22 @@ Object.defineProperty(exports, '__esModule', {
 var React = require('react');
 var icons = require('@hi-ui/icons');
 var spinner = require('@hi-ui/spinner');
+var core = require('@hi-ui/core');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
   };
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var defaultSuffixIcon = /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null);
+var DefaultSuffixIcon = function DefaultSuffixIcon() {
+  var _useGlobalContext = core.useGlobalContext(),
+    direction = _useGlobalContext.direction;
+  return direction === 'rtl' ? /*#__PURE__*/React__default["default"].createElement(icons.LeftOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null);
+};
 var defaultLeafIcon = null;
 var defaultLoadingIcon = /*#__PURE__*/React__default["default"].createElement(spinner.Spinner, {
   size: "sm"
 });
+exports.DefaultSuffixIcon = DefaultSuffixIcon;
 exports.defaultLeafIcon = defaultLeafIcon;
 exports.defaultLoadingIcon = defaultLoadingIcon;
-exports.defaultSuffixIcon = defaultSuffixIcon;

package/lib/cjs/styles/index.scss.js

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@charset \"UTF-8\";.hi-v5-cascader__popper .hi-v5-picker__panel {-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 160px;}.hi-v5-cascader__popper .hi-v5-picker__search .hi-v5-input__text {width: 100px;}.hi-v5-cascader__popper .hi-v5-picker__body {padding: 0;overflow-y: hidden;}.hi-v5-cascader__popper .hi-v5-picker__loading, .hi-v5-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-5, 10px);position: relative;}.hi-v5-cascader-search .hi-v5-input__prefix {font-size: var(--hi-v5-text-size-lg, 1rem);-webkit-padding-start: 0;padding-inline-start: 0;}.hi-v5-cascader-search__empty {display: inline-block;-webkit-margin-before: var(--hi-v5-spacing-10, 20px);margin-block-start: var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-cascader-menu-list--flatted .hi-v5-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 160px;max-height: 260px;overflow: auto;padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-cascader-menu:not(:last-of-type) {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-md, 4px);white-space: nowrap;}.hi-v5-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-cascader-menu-option--checked {font-weight: var(--hi-v5-text-weight-bold, 700);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-600, #91959e);background: transparent;}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-cascader-menu .title__text--col {display: inline-block;}.hi-v5-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-switcher--arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v5-cascader__icon--loading {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor;}.hi-v5-cascader__icon--loading svg {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
+var css_248z = "@charset \"UTF-8\";.hi-v5-cascader__popper .hi-v5-picker__panel {-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 160px;}.hi-v5-cascader__popper .hi-v5-picker__search .hi-v5-input__text {width: 100px;}.hi-v5-cascader__popper .hi-v5-picker__body {padding: 0;overflow-y: hidden;}.hi-v5-cascader__popper .hi-v5-picker__loading, .hi-v5-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-5, 10px);position: relative;}.hi-v5-cascader-search .hi-v5-input__prefix {font-size: var(--hi-v5-text-size-lg, 1rem);-webkit-padding-start: 0;padding-inline-start: 0;}.hi-v5-cascader-search__empty {display: inline-block;-webkit-margin-before: var(--hi-v5-spacing-10, 20px);margin-block-start: var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-cascader-menu-list--flatted .hi-v5-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 160px;max-height: 260px;overflow: auto;padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-cascader-menu:not(:last-of-type) {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-md, 4px);white-space: nowrap;}.hi-v5-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-cascader-menu-option--checked {font-weight: var(--hi-v5-text-weight-bold, 700);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-600, #91959e);background: transparent;}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-cascader-menu .title__text--col {display: inline-block;}.hi-v5-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader__icon--loading {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor;}.hi-v5-cascader__icon--loading svg {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
 var __styleInject__ = require('@hi-ui/style-inject')["default"];
 __styleInject__(css_248z);
 exports["default"] = css_248z;

package/lib/esm/CascaderMenuList.js

@@ -8,14 +8,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
-import { defaultLoadingIcon, defaultSuffixIcon, defaultLeafIcon } from './icons/index.js';
+import { defaultLoadingIcon, DefaultSuffixIcon, defaultLeafIcon } from './icons/index.js';
 import { getItemEventData, checkCanLoadChildren } from './utils/index.js';
 import { useCascaderContext } from './context.js';
 import { getTopDownAncestors } from '@hi-ui/tree-utils';
 import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
+import scrollIntoView from 'scroll-into-view-if-needed';
 import VirtualList from '@hi-ui/virtual-list';
 var menuListPrefix = getPrefixCls('cascader-menu-list');
 var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -69,6 +70,26 @@ var CascaderMenu = function CascaderMenu(_ref) {
     height: 260,
     itemHeight: 32
   };
+  var activeNodeRef = useRef();
+  var _useState = useState(null),
+    activeNode = _useState[0],
+    setActiveNode = _useState[1];
+  var timeoutId = useRef(null);
+  useEffect(function () {
+    if (activeNode) {
+      timeoutId.current = setTimeout(function () {
+        scrollIntoView(activeNode, {
+          scrollMode: 'if-needed',
+          block: 'center'
+        });
+      }, 100);
+    }
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, [activeNode, activeNodeRef, virtual]);
   return /*#__PURE__*/React.createElement("ul", {
     className: cls,
     style: menuStyle,
@@ -86,13 +107,15 @@ var CascaderMenu = function CascaderMenu(_ref) {
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: option.id,
       option: option,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      setActiveNode: setActiveNode
     });
   }) : null);
 };
 var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var option = _ref2.option,
-    prefixCls = _ref2.prefixCls;
+    prefixCls = _ref2.prefixCls,
+    setActiveNode = _ref2.setActiveNode;
   var _useCascaderContext3 = useCascaderContext(),
     flatted = _useCascaderContext3.flatted,
     disabledContext = _useCascaderContext3.disabled,
@@ -112,7 +135,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var disabled = disabledContext || option.disabled;
   var optionCls = cx(prefixCls + "-option", active && prefixCls + "-option--active", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected", classNames === null || classNames === void 0 ? void 0 : classNames.option);
   return /*#__PURE__*/React.createElement("li", {
-    ref: ref,
+    ref: function ref(node) {
+      if (node && active) {
+        setActiveNode === null || setActiveNode === void 0 ? void 0 : setActiveNode(node);
+      }
+    },
     key: option.id,
     role: "menu-item",
     className: prefixCls + "-item",
@@ -149,7 +176,7 @@ var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildre
   if (canLoadChildren) {
     return /*#__PURE__*/React.createElement("span", {
       className: cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
-    }, defaultSuffixIcon);
+    }, /*#__PURE__*/React.createElement(DefaultSuffixIcon, null));
   }
   return /*#__PURE__*/React.createElement("span", {
     className: cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")

package/lib/esm/hooks/use-async-switch.js

@@ -50,56 +50,53 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
     addLoadingIds = _useCheckState.add,
     removeLoadingIds = _useCheckState.remove;
   var onExpandLatest = useLatestCallback(onExpand);
-  var onNodeSwitch = useCallback(function (node_1) {
-    for (var _len = arguments.length, args_1 = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args_1[_key - 1] = arguments[_key];
+  var onNodeSwitch = useCallback(function (node, onlyExpand) {
+    if (onlyExpand === void 0) {
+      onlyExpand = false;
     }
-    return __awaiter(void 0, [node_1].concat(args_1), void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(node, onlyExpand) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var id, children, isLeaf;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              if (onlyExpand === void 0) {
-                onlyExpand = false;
-              }
               // 直接触发选中该节点
               onExpandLatest(node, onlyExpand);
               id = node.id, children = node.children, isLeaf = node.isLeaf;
               if (!children) {
-                _context2.next = 5;
+                _context2.next = 4;
                 break;
               }
               return _context2.abrupt("return");
-            case 5:
+            case 4:
               if (!isLeaf) {
-                _context2.next = 7;
+                _context2.next = 6;
                 break;
               }
               return _context2.abrupt("return");
-            case 7:
+            case 6:
               if (!onLoadChildren) {
-                _context2.next = 18;
+                _context2.next = 17;
                 break;
               }
               addLoadingIds(id);
-              _context2.prev = 9;
-              _context2.next = 12;
+              _context2.prev = 8;
+              _context2.next = 11;
               return loadChildren(node);
-            case 12:
+            case 11:
               removeLoadingIds(id);
-              _context2.next = 18;
+              _context2.next = 17;
               break;
-            case 15:
-              _context2.prev = 15;
-              _context2.t0 = _context2["catch"](9);
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](8);
               removeLoadingIds(id);
-            case 18:
+            case 17:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[9, 15]]);
+      }, _callee2, null, [[8, 14]]);
     }));
   }, [loadChildren, onLoadChildren, onExpandLatest, addLoadingIds, removeLoadingIds]);
   return [isLoadingId, onNodeSwitch];

package/lib/esm/icons/index.js

@@ -8,11 +8,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { DownOutlined } from '@hi-ui/icons';
+import { LeftOutlined, RightOutlined } from '@hi-ui/icons';
 import { Spinner } from '@hi-ui/spinner';
-var defaultSuffixIcon = /*#__PURE__*/React.createElement(DownOutlined, null);
+import { useGlobalContext } from '@hi-ui/core';
+var DefaultSuffixIcon = function DefaultSuffixIcon() {
+  var _useGlobalContext = useGlobalContext(),
+    direction = _useGlobalContext.direction;
+  return direction === 'rtl' ? /*#__PURE__*/React.createElement(LeftOutlined, null) : /*#__PURE__*/React.createElement(RightOutlined, null);
+};
 var defaultLeafIcon = null;
 var defaultLoadingIcon = /*#__PURE__*/React.createElement(Spinner, {
   size: "sm"
 });
-export { defaultLeafIcon, defaultLoadingIcon, defaultSuffixIcon };
+export { DefaultSuffixIcon, defaultLeafIcon, defaultLoadingIcon };

package/lib/esm/styles/index.scss.js

@@ -8,6 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from '@hi-ui/style-inject';
-var css_248z = "@charset \"UTF-8\";.hi-v5-cascader__popper .hi-v5-picker__panel {-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 160px;}.hi-v5-cascader__popper .hi-v5-picker__search .hi-v5-input__text {width: 100px;}.hi-v5-cascader__popper .hi-v5-picker__body {padding: 0;overflow-y: hidden;}.hi-v5-cascader__popper .hi-v5-picker__loading, .hi-v5-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-5, 10px);position: relative;}.hi-v5-cascader-search .hi-v5-input__prefix {font-size: var(--hi-v5-text-size-lg, 1rem);-webkit-padding-start: 0;padding-inline-start: 0;}.hi-v5-cascader-search__empty {display: inline-block;-webkit-margin-before: var(--hi-v5-spacing-10, 20px);margin-block-start: var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-cascader-menu-list--flatted .hi-v5-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 160px;max-height: 260px;overflow: auto;padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-cascader-menu:not(:last-of-type) {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-md, 4px);white-space: nowrap;}.hi-v5-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-cascader-menu-option--checked {font-weight: var(--hi-v5-text-weight-bold, 700);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-600, #91959e);background: transparent;}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-cascader-menu .title__text--col {display: inline-block;}.hi-v5-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-switcher--arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);}.hi-v5-cascader__icon--loading {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor;}.hi-v5-cascader__icon--loading svg {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
+var css_248z = "@charset \"UTF-8\";.hi-v5-cascader__popper .hi-v5-picker__panel {-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 160px;}.hi-v5-cascader__popper .hi-v5-picker__search .hi-v5-input__text {width: 100px;}.hi-v5-cascader__popper .hi-v5-picker__body {padding: 0;overflow-y: hidden;}.hi-v5-cascader__popper .hi-v5-picker__loading, .hi-v5-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-5, 10px);position: relative;}.hi-v5-cascader-search .hi-v5-input__prefix {font-size: var(--hi-v5-text-size-lg, 1rem);-webkit-padding-start: 0;padding-inline-start: 0;}.hi-v5-cascader-search__empty {display: inline-block;-webkit-margin-before: var(--hi-v5-spacing-10, 20px);margin-block-start: var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-cascader-menu-list--flatted .hi-v5-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;width: auto;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;display: inline-block;min-width: 160px;max-height: 260px;overflow: auto;padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-cascader-menu:not(:last-of-type) {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-cascader-menu-option {padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: var(--hi-v5-border-radius-md, 4px);white-space: nowrap;}.hi-v5-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--selected .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-cascader-menu-option--checked {font-weight: var(--hi-v5-text-weight-bold, 700);}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-600, #91959e);background: transparent;}.hi-v5-cascader-menu-option.hi-v5-cascader-menu-option--disabled .hi-v5-cascader-menu-switcher {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-cascader-menu .title__text--cols {display: block;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v5-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v5-cascader-menu .title__text--col {display: inline-block;}.hi-v5-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-cascader__icon--loading {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor;}.hi-v5-cascader__icon--loading svg {-webkit-animation-name: hi-rotate;animation-name: hi-rotate;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}@-webkit-keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes rotate {to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
 __styleInject__(css_248z);
 export { css_248z as default };

package/lib/types/Cascader.d.ts

@@ -10,10 +10,10 @@ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } fr
  * Trigger + MenuList + Search
  */
 export declare const Cascader: React.ForwardRefExoticComponent<CascaderProps & React.RefAttributes<HTMLDivElement | null>>;
-export type CascaderSemanticName = PickerSemanticName | 'menuList' | 'menu' | 'option';
-export type CascaderSemanticClassNames = SemanticClassNamesType<CascaderProps, CascaderSemanticName>;
-export type CascaderSemanticStyles = SemanticStylesType<CascaderProps, CascaderSemanticName>;
-export type CascaderSemantic = ComponentSemantic<CascaderSemanticClassNames, CascaderSemanticStyles>;
+export declare type CascaderSemanticName = PickerSemanticName | 'menuList' | 'menu' | 'option';
+export declare type CascaderSemanticClassNames = SemanticClassNamesType<CascaderProps, CascaderSemanticName>;
+export declare type CascaderSemanticStyles = SemanticStylesType<CascaderProps, CascaderSemanticName>;
+export declare type CascaderSemantic = ComponentSemantic<CascaderSemanticClassNames, CascaderSemanticStyles>;
 export interface CascaderProps extends Omit<PickerProps, 'data' | 'onChange' | 'trigger' | 'scrollable' | 'header' | 'footer' | 'classNames' | 'styles'>, UseCascaderProps, CascaderSemantic {
     /**
      * 将 check 子项拍平展示。暂不对外暴露

package/lib/types/CascaderMenuList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { HiBaseHTMLProps } from '@hi-ui/core';
 import { FlattedCascaderDataItem } from './types';
-export declare const CascaderMenuList: React.ForwardRefExoticComponent<Pick<CascaderMenuListProps, keyof CascaderMenuListProps> & React.RefAttributes<HTMLDivElement | null>>;
+export declare const CascaderMenuList: React.ForwardRefExoticComponent<Pick<CascaderMenuListProps, string | number> & React.RefAttributes<HTMLDivElement | null>>;
 export interface CascaderMenuListProps extends HiBaseHTMLProps {
 }
 export declare const CascaderMenu: ({ prefixCls, role, className, style, data: menu, }: CascaderMenuProps) => JSX.Element;

package/lib/types/context.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { CascaderItemEventData, CascaderExpandTriggerEnum } from './types';
 export declare const CascaderProvider: React.Provider<(Omit<{
     rootProps: {
-        closeOnSelect?: boolean;
+        closeOnSelect?: boolean | undefined;
     };
     reset: () => void;
     clear: () => void;
@@ -14,21 +14,21 @@ export declare const CascaderProvider: React.Provider<(Omit<{
     onItemClick: (node: CascaderItemEventData, onlyExpand?: any) => Promise<void>;
     onItemHover: (option: any) => void;
     changeOnSelect: boolean;
-    onLoadChildren: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => Promise<import("./types").CascaderDataItem[] | void> | void) | undefined;
+    onLoadChildren: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => void | Promise<void | import("./types").CascaderDataItem[]>) | undefined;
     disabled: boolean;
     menuList: import("./types").FlattedCascaderDataItem[][];
 }, "rootProps"> & {
     expandTrigger: CascaderExpandTriggerEnum;
     titleRender: (item: CascaderItemEventData) => React.ReactNode;
-    dropdownColumnRender?: (menu: React.ReactElement, level: number) => React.ReactNode;
-    virtual?: boolean;
-    onItemClickProp?: (event: React.MouseEvent<HTMLDivElement>, option: CascaderItemEventData) => void;
-    classNames?: Partial<Record<string, string>>;
-    styles?: Partial<Record<string, React.CSSProperties>>;
+    dropdownColumnRender?: ((menu: React.ReactElement, level: number) => React.ReactNode) | undefined;
+    virtual?: boolean | undefined;
+    onItemClickProp?: ((event: React.MouseEvent<HTMLDivElement>, option: CascaderItemEventData) => void) | undefined;
+    classNames?: Partial<Record<string, string>> | undefined;
+    styles?: Partial<Record<string, React.CSSProperties>> | undefined;
 }) | null>;
 export declare const useCascaderContext: () => Omit<{
     rootProps: {
-        closeOnSelect?: boolean;
+        closeOnSelect?: boolean | undefined;
     };
     reset: () => void;
     clear: () => void;
@@ -40,15 +40,15 @@ export declare const useCascaderContext: () => Omit<{
     onItemClick: (node: CascaderItemEventData, onlyExpand?: any) => Promise<void>;
     onItemHover: (option: any) => void;
     changeOnSelect: boolean;
-    onLoadChildren: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => Promise<import("./types").CascaderDataItem[] | void> | void) | undefined;
+    onLoadChildren: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => void | Promise<void | import("./types").CascaderDataItem[]>) | undefined;
     disabled: boolean;
     menuList: import("./types").FlattedCascaderDataItem[][];
 }, "rootProps"> & {
     expandTrigger: CascaderExpandTriggerEnum;
     titleRender: (item: CascaderItemEventData) => React.ReactNode;
-    dropdownColumnRender?: (menu: React.ReactElement, level: number) => React.ReactNode;
-    virtual?: boolean;
-    onItemClickProp?: (event: React.MouseEvent<HTMLDivElement>, option: CascaderItemEventData) => void;
-    classNames?: Partial<Record<string, string>>;
-    styles?: Partial<Record<string, React.CSSProperties>>;
+    dropdownColumnRender?: ((menu: React.ReactElement, level: number) => React.ReactNode) | undefined;
+    virtual?: boolean | undefined;
+    onItemClickProp?: ((event: React.MouseEvent<HTMLDivElement>, option: CascaderItemEventData) => void) | undefined;
+    classNames?: Partial<Record<string, string>> | undefined;
+    styles?: Partial<Record<string, React.CSSProperties>> | undefined;
 };

package/lib/types/hooks/use-async-switch.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CascaderDataItem, CascaderItemEventData } from '../types';
-export declare const useAsyncSwitch: (setCascaderData: React.Dispatch<React.SetStateAction<CascaderDataItem[]>>, onExpand?: (selectedOption: CascaderItemEventData, onlyExpand: boolean) => void, onLoadChildren?: (item: CascaderItemEventData, idPaths: React.ReactText[]) => Promise<CascaderDataItem[] | void> | void) => readonly [(targetKey: unknown) => boolean, (node: CascaderItemEventData, onlyExpand?: any) => Promise<void>];
+export declare const useAsyncSwitch: (setCascaderData: React.Dispatch<React.SetStateAction<CascaderDataItem[]>>, onExpand?: ((selectedOption: CascaderItemEventData, onlyExpand: boolean) => void) | undefined, onLoadChildren?: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => Promise<CascaderDataItem[] | void> | void) | undefined) => readonly [(targetKey: unknown) => boolean, (node: CascaderItemEventData, onlyExpand?: any) => Promise<void>];

package/lib/types/hooks/use-select.d.ts

@@ -3,4 +3,4 @@ import { CascaderItemEventData, FlattedCascaderDataItem } from '../types';
 /**
  * 用于选中的 hook
  */
-export declare const useSelect: (disabled: boolean, onSelect: (value: React.ReactText, item: CascaderItemEventData, itemPaths: FlattedCascaderDataItem[]) => void, changeOnSelect: boolean, onLoadChildren?: (item: CascaderItemEventData, idPaths: React.ReactText[]) => void, value?: React.ReactText) => readonly [React.ReactText, (targetItem: CascaderItemEventData, onlyExpand: boolean) => void, React.Dispatch<React.SetStateAction<React.ReactText>>];
+export declare const useSelect: (disabled: boolean, onSelect: (value: React.ReactText, item: CascaderItemEventData, itemPaths: FlattedCascaderDataItem[]) => void, changeOnSelect: boolean, onLoadChildren?: ((item: CascaderItemEventData, idPaths: React.ReactText[]) => void) | undefined, value?: React.ReactText | undefined) => readonly [React.ReactText, (targetItem: CascaderItemEventData, onlyExpand: boolean) => void, React.Dispatch<React.SetStateAction<React.ReactText>>];

package/lib/types/icons/index.d.ts

@@ -1,3 +1,3 @@
-export declare const defaultSuffixIcon: JSX.Element;
+export declare const DefaultSuffixIcon: () => JSX.Element;
 export declare const defaultLeafIcon: null;
 export declare const defaultLoadingIcon: JSX.Element;

package/lib/types/types.d.ts

@@ -59,5 +59,5 @@ export interface CascaderItemRequiredProps {
 }
 export interface CascaderItemEventData extends FlattedCascaderDataItem, CascaderItemRequiredProps {
 }
-export type CascaderExpandTriggerEnum = 'click' | 'hover';
-export type CascaderAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;
+export declare type CascaderExpandTriggerEnum = 'click' | 'hover';
+export declare type CascaderAppearanceEnum = HiBaseAppearanceEnum | 'contained' | undefined;

package/lib/types/use-cascader.d.ts

@@ -6,7 +6,7 @@ export declare const useCascader: ({ defaultValue, value: valueProp, onChange: o
          * 是否启用选择即关闭（用于 changeOnSelect 模式下控制父节点点击交互）
          * @default true
          */
-        closeOnSelect?: boolean;
+        closeOnSelect?: boolean | undefined;
     };
     reset: () => void;
     clear: () => void;
@@ -71,4 +71,4 @@ export interface UseCascaderProps {
      */
     onLoadChildren?: (item: CascaderItemEventData, idPaths: React.ReactText[]) => Promise<CascaderDataItem[] | void> | void;
 }
-export type UseCascaderReturn = ReturnType<typeof useCascader>;
+export declare type UseCascaderReturn = ReturnType<typeof useCascader>;

package/lib/types/utils/index.d.ts

@@ -4,15 +4,15 @@ import { CascaderItemRequiredProps, CascaderItemEventData, CascaderDataItem, Fla
 /**
  * 扁平化树数据结构，基于前序遍历
  */
-export declare const flattenTreeData: (treeData: CascaderDataItem[], fieldNames?: HiBaseFieldNames) => FlattedCascaderDataItem[];
+export declare const flattenTreeData: (treeData: CascaderDataItem[], fieldNames?: HiBaseFieldNames | undefined) => FlattedCascaderDataItem[];
 /**
  * 获取选中节点的节点路径，包含选中节点
  */
-export declare const getActiveNodePaths: (flattedData: FlattedCascaderDataItem[], selectedId?: React.ReactText) => FlattedCascaderDataItem[];
+export declare const getActiveNodePaths: (flattedData: FlattedCascaderDataItem[], selectedId?: React.ReactText | undefined) => FlattedCascaderDataItem[];
 /**
  * 获取自顶向下的兄弟节点列表菜单
  */
-export declare const getActiveMenus: (flattedData: FlattedCascaderDataItem[], selectedId?: React.ReactText) => FlattedCascaderDataItem[][];
+export declare const getActiveMenus: (flattedData: FlattedCascaderDataItem[], selectedId?: React.ReactText | undefined) => FlattedCascaderDataItem[][];
 export declare const getFlattedMenus: (data: FlattedCascaderDataItem[], filter: (option: FlattedCascaderDataItem) => boolean) => FlattedCascaderDataItem[][];
 export declare const checkCanLoadChildren: (node: FlattedCascaderDataItem, onLoadChildren?: any) => any;
 export declare function getItemEventData(node: FlattedCascaderDataItem, requiredProps: CascaderItemRequiredProps): CascaderItemEventData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/cascader",
-  "version": "5.0.0-experimental.2",
+  "version": "5.0.0-rc.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,36 +44,36 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^5.0.0-experimental.0",
-    "@hi-ui/classname": "^5.0.0-experimental.0",
-    "@hi-ui/env": "^5.0.0-experimental.0",
-    "@hi-ui/func-utils": "^5.0.0-experimental.0",
-    "@hi-ui/highlighter": "^5.0.0-experimental.1",
-    "@hi-ui/icons": "^5.0.0-experimental.1",
-    "@hi-ui/input": "^5.0.0-experimental.2",
-    "@hi-ui/picker": "^5.0.0-experimental.2",
-    "@hi-ui/popper": "^5.0.0-experimental.1",
-    "@hi-ui/spinner": "^5.0.0-experimental.1",
-    "@hi-ui/tree-utils": "^5.0.0-experimental.0",
-    "@hi-ui/type-assertion": "^5.0.0-experimental.0",
-    "@hi-ui/use-check-state": "^5.0.0-experimental.0",
-    "@hi-ui/use-data-source": "^5.0.0-experimental.0",
-    "@hi-ui/use-latest": "^5.0.0-experimental.0",
-    "@hi-ui/use-search-mode": "^5.0.0-experimental.0",
-    "@hi-ui/use-toggle": "^5.0.0-experimental.0",
-    "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
-    "@hi-ui/virtual-list": "^5.0.0-experimental.1",
-    "scroll-into-view-if-needed": "^3.1.0",
-    "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
+    "@hi-ui/array-utils": "^5.0.0-rc.0",
+    "@hi-ui/classname": "^5.0.0-rc.0",
+    "@hi-ui/env": "^5.0.0-rc.0",
+    "@hi-ui/func-utils": "^5.0.0-rc.0",
+    "@hi-ui/highlighter": "^5.0.0-rc.0",
+    "@hi-ui/icons": "^5.0.0-rc.0",
+    "@hi-ui/input": "^5.0.0-rc.0",
+    "@hi-ui/picker": "^5.0.0-rc.0",
+    "@hi-ui/popper": "^5.0.0-rc.0",
+    "@hi-ui/spinner": "^5.0.0-rc.0",
+    "@hi-ui/tree-utils": "^5.0.0-rc.0",
+    "@hi-ui/type-assertion": "^5.0.0-rc.0",
+    "@hi-ui/use-check-state": "^5.0.0-rc.0",
+    "@hi-ui/use-data-source": "^5.0.0-rc.0",
+    "@hi-ui/use-latest": "^5.0.0-rc.0",
+    "@hi-ui/use-merge-semantic": "^5.0.0-rc.0",
+    "@hi-ui/use-search-mode": "^5.0.0-rc.0",
+    "@hi-ui/use-toggle": "^5.0.0-rc.0",
+    "@hi-ui/use-uncontrolled-state": "^5.0.0-rc.0",
+    "@hi-ui/virtual-list": "^5.0.0-rc.0",
+    "scroll-into-view-if-needed": "^3.1.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=5.0.0-experimental.1",
+    "@hi-ui/core": ">=5.0.0-rc.0",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^5.0.0-experimental.1",
-    "@hi-ui/core-css": "^5.0.0-experimental.2",
+    "@hi-ui/core": "^5.0.0-rc.0",
+    "@hi-ui/core-css": "^5.0.0-rc.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }