@hi-ui/check-cascader 4.5.1 → 5.0.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # @hi-ui/check-cascader
 
+## 5.0.0-alpha.0
+
+### Major Changes
+
+- 1b05b44a4: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
+
+### Minor Changes
+
+- 77ed66eac: <br>
+  - feat(picker): 下拉选择类组件增加 xs 尺寸 (5.0)
+  - feat(input): 输入框组件增加 xs 尺寸 (5.0)
+- cee645726: feat(check-cascader): 增加 checkbox 级联禁用功能和相关样式调整 (5.0)
+- 74ca77b9c: feat(check-cascader): add showOnlyShowChecked api (5.0)
+- 632dbda3a: feat: 下拉选择组件增加 showIndicator 参数 & 修改 appearance 中的 unset 样式 (5.0)
+- 1b51c1bbe: feat: 下拉选择类组件 appearance 参数增加 contained 类型 (5.0)
+- 6eac4b78b: feat: 输入框和选择器组件增加 borderless 形态 (5.0)
+
+### Patch Changes
+
+- 5de7a848b: chore: 将代码中 v4 改为 v5 (5.0)
+- eb5506b8d: style(picker): 移除 picker 组件中的 \_\_text 样式定义 (5.0)
+- 5de7a848b: fix: 修复 5.0 UI 问题 (5.0)
+- da1f63a55: feat(check-cascader): 增加全选功能
+- 958805d8b: fix(tag-input): 修复 contained 模式下 displayRender 设置无效问题 (5.0)
+- 8116f0304: fix: 修改 UI 问题 (5.0)
+- cfaf8c48d: perf: 对下拉选择类组件的 customRender 的内容增加 memoization 以优化性能 (5.0)
+- b29639844: style(cascader&check-cascader): 调整下拉框样式，增加搜索框宽度设置 (5.0)
+- 2e0eca2d3: perf(cascader): 性能优化 (5.0)
+- eaa96c960: <br>
+  - style(cascader&check-cascader): 增加 white-space: nowrap; 样式以防止文本换行 (5.0)
+  - style(cascader&check-cascader): 调整搜索框默认宽度为 100px (5.0)
+  - feat(check-cascader): 增加 flattedSearchResult 属性，用于控制搜索结果的展现形式 (5.0)
+  - fix(cascader): 修复当搜索结果为空时，下拉框没有显示空状态问题 (5.0)
+- 61d132802: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
+- e39572f8f: style(tag-input): 增加 flex-wrap 属性以优化标签换行展示 (5.0)
+- 9f2ee08cf: <br>
+  - style(tag-input): 间距调整 (5.0)
+  - style(select): 选择类组件选项圆角改为 4px (5.0)
+  - style(picker): 搜索框样式调整 (5.0)
+- 1fc825e2f: <br>
+  - fix(cascader): 处理当 value 为空时清空选项的选中态(5.0)
+  - style(cascader&check-cascader): 调整选项容器最小宽度为 160px (5.0)
+  - style(cascader&check-cascader): 优化下拉框宽度，让内容和搜索框默认宽度对齐 (5.0)
+  - perf(cascader&check-cascader): 优化 customRender 函数，支持传递选中项和当前值 (5.0)
+- 85bb84874: style: 统一调整选择类组件 hover 时的背景色 (5.0)
+- c125e4c48: fix: 修复 UI 问题 (5.0)
+- Updated dependencies [abebb5eed]
+- Updated dependencies [7bda04e64]
+- Updated dependencies [7ac9bc99a]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [ddd2acc79]
+- Updated dependencies [5de7a848b]
+- Updated dependencies [1b05b44a4]
+- Updated dependencies [0cd15438e]
+- Updated dependencies [958805d8b]
+- Updated dependencies [eb69f0baa]
+- Updated dependencies [a01771e8d]
+- Updated dependencies [67960d871]
+- Updated dependencies [cee645726]
+- Updated dependencies [de7f92b26]
+- Updated dependencies [b35327262]
+- Updated dependencies [8116f0304]
+- Updated dependencies [85bb84874]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [632dbda3a]
+- Updated dependencies [2c7c65a5a]
+- Updated dependencies [36bb992d3]
+- Updated dependencies [1b51c1bbe]
+- Updated dependencies [2e0eca2d3]
+- Updated dependencies [61d132802]
+- Updated dependencies [e39572f8f]
+- Updated dependencies [6ebf40f96]
+- Updated dependencies [9f2ee08cf]
+- Updated dependencies [6eac4b78b]
+- Updated dependencies [bcd3d08dd]
+- Updated dependencies [4fb586f6f]
+- Updated dependencies [c125e4c48]
+- Updated dependencies [b7ad460d8]
+- Updated dependencies [df25ec39b]
+  - @hi-ui/picker@5.0.0-alpha.0
+  - @hi-ui/input@5.0.0-alpha.0
+  - @hi-ui/tag-input@5.0.0-alpha.0
+  - @hi-ui/core@5.0.0-alpha.0
+  - @hi-ui/use-check@5.0.0-alpha.0
+  - @hi-ui/use-data-source@5.0.0-alpha.0
+  - @hi-ui/use-latest@5.0.0-alpha.0
+  - @hi-ui/use-merge-refs@5.0.0-alpha.0
+  - @hi-ui/use-outside-click@5.0.0-alpha.0
+  - @hi-ui/use-search-mode@5.0.0-alpha.0
+  - @hi-ui/use-toggle@5.0.0-alpha.0
+  - @hi-ui/use-uncontrolled-state@5.0.0-alpha.0
+  - @hi-ui/icons@5.0.0-alpha.0
+  - @hi-ui/checkbox@5.0.0-alpha.0
+  - @hi-ui/popper@5.0.0-alpha.0
+  - @hi-ui/spinner@5.0.0-alpha.0
+  - @hi-ui/array-utils@5.0.0-alpha.0
+  - @hi-ui/classname@5.0.0-alpha.0
+  - @hi-ui/env@5.0.0-alpha.0
+  - @hi-ui/func-utils@5.0.0-alpha.0
+  - @hi-ui/times@5.0.0-alpha.0
+  - @hi-ui/tree-utils@5.0.0-alpha.0
+  - @hi-ui/type-assertion@5.0.0-alpha.0
+
+## 4.5.2
+
+### Patch Changes
+
+- [#3336](https://github.com/XiaoMi/hiui/pull/3336) [`9356e8c`](https://github.com/XiaoMi/hiui/commit/9356e8ca43ae75f2886bd5225723ee9afad501a6) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(use-search-mode): 优化初次搜索逻辑 (#3335)
+
+- Updated dependencies [[`9356e8c`](https://github.com/XiaoMi/hiui/commit/9356e8ca43ae75f2886bd5225723ee9afad501a6)]:
+  - @hi-ui/use-search-mode@4.2.3
+
 ## 4.5.1
 
 ### Patch Changes

package/lib/cjs/CheckCascader.js

@@ -30,6 +30,7 @@ var treeUtils = require('@hi-ui/tree-utils');
 var useLatest = require('@hi-ui/use-latest');
 var typeAssertion = require('@hi-ui/type-assertion');
 var core = require('@hi-ui/core');
+var Checkbox = require('@hi-ui/checkbox');
 var funcUtils = require('@hi-ui/func-utils');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
@@ -37,6 +38,7 @@ function _interopDefaultCompat(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Checkbox__default = /*#__PURE__*/_interopDefaultCompat(Checkbox);
 var _prefix = classname.getPrefixCls('check-cascader');
 var NOOP_ARRAY = [];
 /**
@@ -73,6 +75,8 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     overlayClassName = _a.overlayClassName,
     _a$type = _a.type,
     type = _a$type === void 0 ? 'tree' : _a$type,
+    _a$flattedSearchResul = _a.flattedSearchResult,
+    flattedSearchResult = _a$flattedSearchResul === void 0 ? true : _a$flattedSearchResul,
     checkedMode = _a.checkedMode,
     visible = _a.visible,
     onOpen = _a.onOpen,
@@ -86,7 +90,13 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     dropdownColumnRender = _a.dropdownColumnRender,
     customRender = _a.customRender,
     fieldNames = _a.fieldNames,
-    rest = tslib.__rest(_a, ["prefixCls", "className", "defaultValue", "value", "onChange", "data", "placeholder", "clearable", "onClear", "onSelect", "expandTrigger", "disabled", "emptyContent", "changeOnSelect", "render", "displayRender", "checkCascaded", "searchPlaceholder", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "overlayClassName", "type", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames"]);
+    label = _a.label,
+    showOnlyShowChecked = _a.showOnlyShowChecked,
+    virtual = _a.virtual,
+    showCheckAll = _a.showCheckAll,
+    _a$showIndicator = _a.showIndicator,
+    showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
+    rest = tslib.__rest(_a, ["prefixCls", "className", "defaultValue", "value", "onChange", "data", "placeholder", "clearable", "onClear", "onSelect", "expandTrigger", "disabled", "emptyContent", "changeOnSelect", "render", "displayRender", "checkCascaded", "searchPlaceholder", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "keyword", "onSearch", "overlayClassName", "type", "flattedSearchResult", "checkedMode", "visible", "onOpen", "onClose", "tagInputProps", "size", "prefix", "suffix", "renderExtraFooter", "dropdownColumnRender", "customRender", "fieldNames", "label", "showOnlyShowChecked", "virtual", "showCheckAll", "showIndicator"]);
   var i18n = core.useLocaleContext();
   var pickerInnerRef = React.useRef(null);
   var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('checkCascader.placeholder') : placeholderProp;
@@ -99,6 +109,11 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }),
     menuVisible = _useUncontrolledToggl[0],
     menuVisibleAction = _useUncontrolledToggl[1];
+  var _useState = React.useState(null),
+    filterItems = _useState[0],
+    setFilterItems = _useState[1];
+  var expandedViewRef = React.useRef('normal');
+  var activeExpandable = showOnlyShowChecked && !!filterItems && menuVisible;
   var _useCache = index.useCache(data),
     cascaderData = _useCache[0],
     setCascaderData = _useCache[1];
@@ -115,9 +130,11 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _value = _useUncontrolledState[0],
     tryChangeValue = _useUncontrolledState[1];
   // 内部实现使用尾部 id
-  var value = _value.map(function (path) {
-    return path[path.length - 1];
-  });
+  var value = React.useMemo(function () {
+    return _value.map(function (path) {
+      return path[path.length - 1];
+    });
+  }, [_value]);
   var proxyOnChange = useLatest.useLatestCallback(function (value, item, shouldChecked) {
     var dataItemsPaths = [];
     var itemsPaths = value.map(function (lastId) {
@@ -207,7 +224,7 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [titleRender, searchValue, searchMode]);
   var shouldUseSearch = !!searchValue;
   var selectProps = {
-    data: shouldUseSearch ? stateInSearch.data : flattedData,
+    data: filterItems || (shouldUseSearch ? stateInSearch.data : flattedData),
     titleRender: proxyTitleRender
   };
   var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
@@ -216,13 +233,46 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       return flattedDataMap.get(selectedId);
     });
   }, [flattedDataMap, value]);
-  React.useEffect(function () {
+  var _useMemo2 = React.useMemo(function () {
+      if (!showCheckAll) return [];
+      var parsedCheckedIds = index$1.parseCheckDataDirty(checkedMode, value, flattedData, index$1.allowCheck);
+      return index$1.getAllCheckedStatus(flattedData, parsedCheckedIds);
+    }, [showCheckAll, value, flattedData, checkedMode]),
+    currentAllChecked = _useMemo2[0],
+    hasCheckedAll = _useMemo2[1];
+  var toggleCheckAll = React.useCallback(function () {
+    var shouldChecked = !currentAllChecked;
+    // 全选操作
+    if (!currentAllChecked && !hasCheckedAll) {
+      var checkedIds = index$1.processCheckedIds(checkedMode, flattedData.filter(function (item) {
+        return index$1.allowCheck(item);
+      }).map(function (_ref2) {
+        var id = _ref2.id;
+        return id;
+      }), flattedData, index$1.allowCheck);
+      proxyOnChange(checkedIds, null, shouldChecked);
+    } else {
+      proxyOnChange([], null, shouldChecked);
+    }
+  }, [checkedMode, flattedData, currentAllChecked, hasCheckedAll, proxyOnChange]);
+  var renderDefaultFooter = React.useCallback(function () {
+    if (!showCheckAll) return null;
+    return /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+      indeterminate: hasCheckedAll,
+      checked: currentAllChecked,
+      onChange: toggleCheckAll
+    }, i18n.get('checkSelect.checkAll'));
+  }, [i18n, showCheckAll, currentAllChecked, hasCheckedAll, toggleCheckAll]);
+  var customRenderContent = React.useMemo(function () {
+    return customRender ? typeof customRender === 'function' ? customRender(selectedItems, value) : customRender : null;
+  }, [customRender, selectedItems, value]);
+  var handleMenuListChange = React.useCallback(function () {
     var _a;
     if (menuVisible) {
       // 数据改变时更新弹窗显示位置，避免弹窗内容被遮挡
       (_a = pickerInnerRef.current) === null || _a === void 0 ? void 0 : _a.update();
     }
-  }, [menuVisible, selectProps.data]);
+  }, [menuVisible]);
   return /*#__PURE__*/React__default["default"].createElement(picker.Picker, Object.assign({
     ref: ref,
     innerRef: pickerInnerRef,
@@ -242,10 +292,14 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onClose: menuVisibleAction.off,
     searchable: searchable,
     scrollable: false,
-    footer: typeAssertion.isFunction(renderExtraFooter) && renderExtraFooter(),
+    footer: typeAssertion.isFunction(renderExtraFooter) ? renderExtraFooter() : renderDefaultFooter(),
     keyword: keywordProp,
     onSearch: funcUtils.callAllFuncs(onSearchProp, onSearch),
-    trigger: customRender ? typeof customRender === 'function' ? customRender(selectedItems) : customRender : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({}, tagInputProps, {
+    trigger: customRender ? customRenderContent : ( /*#__PURE__*/React__default["default"].createElement(tagInput.TagInputMock, Object.assign({
+      style: {
+        maxWidth: appearance === 'contained' ? '360px' : undefined
+      }
+    }, tagInputProps, {
       size: size,
       clearable: clearable,
       onClear: onClear,
@@ -253,6 +307,7 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       // @ts-ignore
       displayRender: displayRender,
       prefix: prefix,
+      showIndicator: showIndicator,
       suffix: [menuVisible ? /*#__PURE__*/React__default["default"].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.DownOutlined, null), suffix],
       focused: menuVisible,
       appearance: appearance,
@@ -260,7 +315,63 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       // @ts-ignore
       onChange: proxyOnChange,
       data: flattedData,
-      invalid: invalid
+      invalid: invalid,
+      label: label,
+      // onExpand={() => {
+      //   // setViewSelected(true)
+      //   menuVisibleAction.on()
+      // }}
+      onClick: function onClick(evt) {
+        if (!showOnlyShowChecked) return;
+        evt.preventDefault();
+        if (filterItems) {
+          setFilterItems(null);
+        }
+        if (menuVisible) {
+          if (expandedViewRef.current === 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
+        }
+        expandedViewRef.current = 'normal';
+      },
+      expandable: showOnlyShowChecked,
+      activeExpandable: activeExpandable,
+      onExpand: function onExpand(evt) {
+        if (!showOnlyShowChecked) return;
+        // 阻止冒泡触发外层 onClick
+        evt.preventDefault();
+        evt.stopPropagation();
+        // 选中数据
+        setFilterItems(function () {
+          var filterFunc = function filterFunc(node) {
+            var _a;
+            if (value.includes(node.id)) {
+              return true;
+            }
+            if (node.children && ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+              return node.children.some(function (child) {
+                return filterFunc(child);
+              });
+            }
+            return false;
+          };
+          // filterTree 过滤树结构，将不包含value中的节点分支过滤掉
+          // 返回过滤后的树结构
+          var treeData = treeUtils.filterTree(data, filterFunc);
+          return index$1.flattenTreeData(treeData, fieldNames);
+        });
+        // 展开/关闭操作
+        if (menuVisible) {
+          if (expandedViewRef.current !== 'normal') {
+            menuVisibleAction.off();
+          }
+        } else {
+          menuVisibleAction.on();
+        }
+        expandedViewRef.current = 'onlyChecked';
+      }
     })))
   }), typeAssertion.isArrayNonEmpty(selectProps.data) ? ( /*#__PURE__*/React__default["default"].createElement(CheckCascaderMenuList.CheckCascaderMenuList, {
     disabled: disabled,
@@ -273,14 +384,16 @@ var CheckCascader = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onSelect: onSelect,
     onLoadChildren: onLoadChildren,
     titleRender: proxyTitleRender,
-    flatted: flatted || !!searchValue,
+    flatted: flatted || !!searchValue && flattedSearchResult || activeExpandable,
     // @ts-ignore
     flattedData: selectProps.data,
     originalFlattedData: flattedData,
     data: cascaderData,
     onChangeData: setCascaderData,
     checkedMode: checkedMode,
-    dropdownColumnRender: dropdownColumnRender
+    dropdownColumnRender: dropdownColumnRender,
+    virtual: virtual,
+    onMenuListChange: handleMenuListChange
   })) : null);
 });
 if (env.__DEV__) {

package/lib/cjs/CheckCascaderMenu.js

@@ -20,6 +20,8 @@ var Checkbox = require('@hi-ui/checkbox');
 var context = require('./context.js');
 var index = require('./utils/index.js');
 var treeUtils = require('@hi-ui/tree-utils');
+var List = require('./ui/virtual-list/lib/esm/node_modules/rc-virtual-list/es/List.js');
+var env = require('@hi-ui/env');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -39,17 +41,59 @@ var CheckCascaderMenu = function CheckCascaderMenu(_ref) {
     menu = _ref.data,
     getCascaderItemRequiredProps = _ref.getCascaderItemRequiredProps;
   var _useCheckCascaderCont = context.useCheckCascaderContext(),
-    _useCheckCascaderCont2 = _useCheckCascaderCont.flatted,
-    flatted = _useCheckCascaderCont2 === void 0 ? false : _useCheckCascaderCont2,
-    _useCheckCascaderCont3 = _useCheckCascaderCont.changeOnSelect,
-    changeOnSelect = _useCheckCascaderCont3 === void 0 ? false : _useCheckCascaderCont3,
-    _useCheckCascaderCont4 = _useCheckCascaderCont.disabled,
-    disabledContext = _useCheckCascaderCont4 === void 0 ? false : _useCheckCascaderCont4,
-    onLoadChildren = _useCheckCascaderCont.onLoadChildren,
-    expandTrigger = _useCheckCascaderCont.expandTrigger,
-    onCheck = _useCheckCascaderCont.onCheck,
-    onSelect = _useCheckCascaderCont.onSelect,
-    titleRender = _useCheckCascaderCont.titleRender;
+    virtual = _useCheckCascaderCont.virtual;
+  var isCheckableMenu = menu.some(function (_ref2) {
+    var checkable = _ref2.checkable;
+    return checkable;
+  });
+  var cls = classname.cx(prefixCls, className, isCheckableMenu && prefixCls + "--checkable");
+  var virtualListProps = {
+    virtual: virtual,
+    data: menu,
+    height: 260,
+    itemHeight: 32
+  };
+  return /*#__PURE__*/React__default["default"].createElement("ul", {
+    className: cls,
+    style: style,
+    role: role
+  }, virtual ? ( /*#__PURE__*/React__default["default"].createElement(List["default"], Object.assign({
+    itemKey: 'id',
+    fullHeight: false
+  }, virtualListProps), function (option) {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+      key: option.id,
+      option: option,
+      prefixCls: prefixCls,
+      getCascaderItemRequiredProps: getCascaderItemRequiredProps
+    });
+  })) : menu.map(function (option) {
+    return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+      key: option.id,
+      option: option,
+      prefixCls: prefixCls,
+      getCascaderItemRequiredProps: getCascaderItemRequiredProps
+    });
+  }));
+};
+var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var option = _ref3.option,
+    _ref3$prefixCls = _ref3.prefixCls,
+    prefixCls = _ref3$prefixCls === void 0 ? _prefix : _ref3$prefixCls,
+    getCascaderItemRequiredProps = _ref3.getCascaderItemRequiredProps;
+  var _a;
+  var _useCheckCascaderCont2 = context.useCheckCascaderContext(),
+    _useCheckCascaderCont3 = _useCheckCascaderCont2.flatted,
+    flatted = _useCheckCascaderCont3 === void 0 ? false : _useCheckCascaderCont3,
+    _useCheckCascaderCont4 = _useCheckCascaderCont2.changeOnSelect,
+    changeOnSelect = _useCheckCascaderCont4 === void 0 ? false : _useCheckCascaderCont4,
+    _useCheckCascaderCont5 = _useCheckCascaderCont2.disabled,
+    disabledContext = _useCheckCascaderCont5 === void 0 ? false : _useCheckCascaderCont5,
+    onLoadChildren = _useCheckCascaderCont2.onLoadChildren,
+    expandTrigger = _useCheckCascaderCont2.expandTrigger,
+    onCheck = _useCheckCascaderCont2.onCheck,
+    onSelect = _useCheckCascaderCont2.onSelect,
+    titleRender = _useCheckCascaderCont2.titleRender;
   var renderTitle = React.useCallback(function (option) {
     // 如果 titleRender 返回 `true`，则使用默认 title
     var title = titleRender ? titleRender(option) : true;
@@ -67,63 +111,55 @@ var CheckCascaderMenu = function CheckCascaderMenu(_ref) {
       className: "title__text"
     }, option.title));
   }, [titleRender, flatted]);
-  var isCheckableMenu = menu.some(function (_ref2) {
-    var checkable = _ref2.checkable;
-    return checkable;
-  });
-  var cls = classname.cx(prefixCls, className, isCheckableMenu && prefixCls + "--checkable");
-  return /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: cls,
-    style: style,
-    role: role
-  }, menu.map(function (option) {
-    var _a;
-    var eventOption = index.getCascaderItemEventData(option, getCascaderItemRequiredProps(option));
-    var selected = eventOption.selected,
-      checked = eventOption.checked,
-      loading = eventOption.loading,
-      semiChecked = eventOption.semiChecked;
-    var disabled = disabledContext || option.disabled;
-    var optionCls = classname.cx(prefixCls + "-option", option.checkable && checked && prefixCls + "-option--checked",
-    // 此处 option.children?.length || !option.checkable 的含义是
-    // 如果存在子节点，则可以展现选择态
-    // 不存在子节点，如不是可勾选item，则可以展现勾选态
-    selected && (((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) || !option.checkable) && prefixCls + "-option--selected", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled");
-    return /*#__PURE__*/React__default["default"].createElement("li", {
-      role: "menu-item",
-      className: prefixCls + "-item",
-      key: option.id
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: optionCls,
-      onClick: function onClick(evt) {
-        if (disabled) return;
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventOption);
-        if (changeOnSelect) {
-          onCheck === null || onCheck === void 0 ? void 0 : onCheck(eventOption, !checked);
-        }
-      },
-      onMouseEnter: function onMouseEnter(evt) {
-        if (expandTrigger === 'hover') {
-          onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventOption);
-        }
-      }
-    }, option.checkable ? ( /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
-      className: prefixCls + "-checkbox",
-      indeterminate: semiChecked,
-      checked: checked,
-      disabled: disabled || option.disabledCheckbox,
-      onClick: function onClick(evt) {
-        return evt.stopPropagation();
-      },
-      // 当前是半选时，点击将设置为全选，
-      // 又因子节点某个选项未选中但是禁用，当前态将一直是半选，那操作将一直是设置全选操作
-      onChange: function onChange(evt) {
+  var eventOption = index.getCascaderItemEventData(option, getCascaderItemRequiredProps(option));
+  var selected = eventOption.selected,
+    checked = eventOption.checked,
+    loading = eventOption.loading,
+    semiChecked = eventOption.semiChecked;
+  var disabled = disabledContext || option.disabled;
+  var optionCls = classname.cx(prefixCls + "-option", option.checkable && checked && prefixCls + "-option--checked",
+  // 此处 option.children?.length || !option.checkable 的含义是
+  // 如果存在子节点，则可以展现选择态
+  // 不存在子节点，如不是可勾选item，则可以展现勾选态
+  selected && (((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) || !option.checkable) && prefixCls + "-option--selected", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled");
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    ref: ref,
+    role: "menu-item",
+    className: prefixCls + "-item",
+    key: option.id
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: optionCls,
+    onClick: function onClick(evt) {
+      if (disabled) return;
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventOption);
+      if (changeOnSelect) {
         onCheck === null || onCheck === void 0 ? void 0 : onCheck(eventOption, !checked);
+      }
+    },
+    onMouseEnter: function onMouseEnter(evt) {
+      if (expandTrigger === 'hover') {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventOption);
       }
-    })) : null, renderTitle(eventOption), flatted ? null : renderSuffix(prefixCls, option, loading, onLoadChildren)));
-  }));
-};
+    }
+  }, option.checkable ? ( /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+    className: prefixCls + "-checkbox",
+    indeterminate: semiChecked,
+    checked: checked,
+    disabled: disabled || option.disabledCheckbox || option.disabledCheckboxCascaded,
+    onClick: function onClick(evt) {
+      return evt.stopPropagation();
+    },
+    // 当前是半选时，点击将设置为全选，
+    // 又因子节点某个选项未选中但是禁用，当前态将一直是半选，那操作将一直是设置全选操作
+    onChange: function onChange(evt) {
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck(eventOption, !checked);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventOption);
+    }
+  })) : null, renderTitle(eventOption), flatted ? null : renderSuffix(prefixCls, option, loading, onLoadChildren)));
+});
+if (env.__DEV__) {
+  MenuItem.displayName = 'MenuItem';
+}
 /**
  * 渲染菜单子项的展开提示图标
  */

package/lib/cjs/CheckCascaderMenuList.js

@@ -61,7 +61,9 @@ var CheckCascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     flatted = _a.flatted,
     _a$checkedMode = _a.checkedMode,
     checkedMode = _a$checkedMode === void 0 ? 'ALL' : _a$checkedMode,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "flattedData", "originalFlattedData", "onChangeData", "value", "defaultValue", "disabled", "expandTrigger", "changeOnSelect", "checkCascaded", "onLoadChildren", "onChange", "onSelect", "titleRender", "dropdownColumnRender", "flatted", "checkedMode"]);
+    virtual = _a.virtual,
+    onMenuListChange = _a.onMenuListChange,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "data", "flattedData", "originalFlattedData", "onChangeData", "value", "defaultValue", "disabled", "expandTrigger", "changeOnSelect", "checkCascaded", "onLoadChildren", "onChange", "onSelect", "titleRender", "dropdownColumnRender", "flatted", "checkedMode", "virtual", "onMenuListChange"]);
   if (checkCascaded === false) {
     checkedMode = 'SEPARATE';
   }
@@ -101,10 +103,17 @@ var CheckCascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       changeOnSelect: changeOnSelect,
       titleRender: titleRender,
       onLoadChildren: onLoadChildren,
-      disabled: disabled
+      disabled: disabled,
+      virtual: virtual
     };
-  }, [expandTrigger, onOptionCheck, onItemExpand, flatted, changeOnSelect, titleRender, onLoadChildren, disabled]);
-  var menus = flatted ? index.getFlattedMenus(flattedData) : index.getActiveMenus(flattedData, selectedId);
+  }, [expandTrigger, onOptionCheck, onItemExpand, flatted, changeOnSelect, titleRender, onLoadChildren, disabled, virtual]);
+  var filteredMenus = React.useMemo(function () {
+    var menus = flatted ? index.getFlattedMenus(originalFlattedData) : index.getActiveMenus(originalFlattedData, selectedId);
+    return index.getFilteredMenuList(menus, flattedData);
+  }, [flatted, flattedData, originalFlattedData, selectedId]);
+  React.useEffect(function () {
+    onMenuListChange === null || onMenuListChange === void 0 ? void 0 : onMenuListChange(filteredMenus);
+  }, [filteredMenus, onMenuListChange]);
   var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted", changeOnSelect && prefixCls + "--selectchange");
   return /*#__PURE__*/React__default["default"].createElement(context.CheckCascaderProvider, {
     value: providedValue
@@ -112,7 +121,7 @@ var CheckCascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     role: role,
     className: cls
-  }, rest), menus.map(function (menu, menuIndex) {
+  }, rest), filteredMenus.map(function (menu, menuIndex) {
     var menuContent = /*#__PURE__*/React__default["default"].createElement(CheckCascaderMenu.CheckCascaderMenu, {
       key: menuIndex,
       data: menu,

package/lib/cjs/hooks/use-check.js

@@ -30,7 +30,7 @@ var useCheck = function useCheck(checkedMode, disabled, flattedData, defaultChec
     checkedIds = _useUncontrolledState[0],
     trySetCheckedIds = _useUncontrolledState[1];
   // 入口数据处理
-  var parsedCheckedIds = index.parseCheckDataDirty(checkedMode, checkedIds, flattedData, allowCheck);
+  var parsedCheckedIds = index.parseCheckDataDirty(checkedMode, checkedIds, flattedData, index.allowCheck);
   // 合并 checkedIds，防止部分模式(PARENT和CHILD)在搜索场景下 id 丢失 (https://github.com/XiaoMi/hiui/issues/2750)
   var mergedCheckedIds = Array.from(new Set([].concat(parsedCheckedIds, checkedIds)));
   var cascaded = checkedMode !== 'SEPARATE';
@@ -41,16 +41,10 @@ var useCheck = function useCheck(checkedMode, disabled, flattedData, defaultChec
     checkedIds: mergedCheckedIds,
     onCheck: function onCheck(checkedIds, checkedNode, shouldChecked, semiCheckedIds) {
       // 出口数据处理
-      var processedIds = index.processCheckedIds(checkedMode, checkedIds, flattedData, allowCheck);
+      var processedIds = index.processCheckedIds(checkedMode, checkedIds, flattedData, index.allowCheck);
       trySetCheckedIds(processedIds, checkedNode, shouldChecked, semiCheckedIds);
     },
-    allowCheck: allowCheck
+    allowCheck: index.allowCheck
   });
 };
-var allowCheck = function allowCheck(targetItem) {
-  if (targetItem.disabled || targetItem.disabledCheckbox || targetItem.checkable === false) {
-    return false;
-  }
-  return true;
-};
 exports.useCheck = useCheck;

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

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@charset \"UTF-8\";.hi-v4-check-cascader__popper .hi-v4-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v4-check-cascader__popper .hi-v4-picker__loading, .hi-v4-check-cascader__popper .hi-v4-picker__empty {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);}.hi-v4-check-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-check-cascader-panel-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v4-check-cascader-panel-search .hi-v4-input__prefix {font-size: 16px;padding-left: 0;}.hi-v4-check-cascader-panel-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v4-check-cascader-menus {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v4-check-cascader-menus--flatted .hi-v4-check-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v4-check-cascader-menu {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;border: none;outline: none;font-size: var(--hi-v4-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: 140px;max-height: 256px;overflow: auto;padding: 0 var(--hi-v4-spacing-4, 8px);border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-check-cascader-menu:last-of-type {border: none;}.hi-v4-check-cascader-menu--checkable .hi-v4-check-cascader-menu-checkbox + .title__text {padding-left: 8px;}.hi-v4-check-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-check-cascader-menu-checkbox {position: relative;}.hi-v4-check-cascader-menu-checkbox::after {right: 0;top: -8px;bottom: -8px;left: -8px;content: \"\";position: absolute;display: block;}.hi-v4-check-cascader-menu-option {padding: var(--hi-v4-spacing-1, 2px) var(--hi-v4-spacing-3, 6px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v4-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-v4-border-radius-md, 4px);}.hi-v4-check-cascader-menu-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-check-cascader-menus--selectchange .hi-v4-check-cascader-menu-option:hover .hi-v4-checkbox__icon {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-check-cascader-menu-option.hi-v4-check-cascader-menu-option--selected {background: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-check-cascader-menu-option.hi-v4-check-cascader-menu-option--selected .hi-v4-check-cascader-menu-switcher {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-check-cascader-menu-option--focused {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-check-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background: transparent;}.hi-v4-check-cascader-menu-option--disabled .hi-v4-check-cascader-menu-switcher {color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-check-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v4-check-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-v4-text-size-md, 0.875rem);vertical-align: middle;list-style: none;}.hi-v4-check-cascader-menu .title__text--col {display: inline-block;}.hi-v4-check-cascader-menu .title__text--col::after {content: \" / \";}.hi-v4-check-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v4-check-cascader-menu .title__text--matched {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-check-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-check-cascader-menu-switcher--loading {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tree--icon-loading {-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 hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
+var css_248z = "@charset \"UTF-8\";.hi-v5-check-cascader__popper .hi-v5-picker__panel {-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 160px;}.hi-v5-check-cascader__popper .hi-v5-picker__search .hi-v5-input__text {width: 100px;}.hi-v5-check-cascader__popper .hi-v5-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden;}.hi-v5-check-cascader__popper .hi-v5-picker__loading, .hi-v5-check-cascader__popper .hi-v5-picker__empty {padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);}.hi-v5-check-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-check-cascader-panel-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative;}.hi-v5-check-cascader-panel-search .hi-v5-input__prefix {font-size: 16px;padding-left: 0;}.hi-v5-check-cascader-panel-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px;}.hi-v5-check-cascader-menus {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto;}.hi-v5-check-cascader-menus--flatted .hi-v5-check-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%;}.hi-v5-check-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: 0 var(--hi-v5-spacing-2, 4px);border-right: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-check-cascader-menu:last-of-type {border: none;}.hi-v5-check-cascader-menu--checkable .hi-v5-check-cascader-menu-checkbox + .title__text {padding-left: 8px;}.hi-v5-check-cascader-menu-item {width: 100%;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-check-cascader-menu-checkbox {position: relative;}.hi-v5-check-cascader-menu-checkbox::after {right: 0;top: -8px;bottom: -8px;left: -8px;content: \"\";position: absolute;display: block;}.hi-v5-check-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-check-cascader-menu-option:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-check-cascader-menus--selectchange .hi-v5-check-cascader-menu-option:hover .hi-v5-checkbox__icon {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected {background: 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-check-cascader-menu-option.hi-v5-check-cascader-menu-option--selected .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-option--focused {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-check-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v5-color-gray-500, #91959e);background: transparent;}.hi-v5-check-cascader-menu-option--disabled .hi-v5-check-cascader-menu-switcher {color: var(--hi-v5-color-gray-400, #babcc2);}.hi-v5-check-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-check-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-check-cascader-menu .title__text--col {display: inline-block;}.hi-v5-check-cascader-menu .title__text--col::after {content: \" / \";}.hi-v5-check-cascader-menu .title__text--col:last-child::after {content: none;}.hi-v5-check-cascader-menu .title__text--matched {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-check-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-check-cascader-menu-switcher--loading {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tree--icon-loading {-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 hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes hi-rotate {from {-webkit-transform: rotate(0);transform: rotate(0);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}";
 var __styleInject__ = require('@hi-ui/style-inject')["default"];
 __styleInject__(css_248z);
 exports["default"] = css_248z;