@hi-ui/cascader 4.0.0-beta.9 → 4.0.0

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

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,11 +12,10 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-cascader__popper .hi-v4-picker__body {\n  padding-left: 0;\n  padding-right: 0; }\n.hi-v4-cascader__popper .hi-v4-picker__loading, .hi-v4-cascader__popper .hi-v4-picker__empty {\n  padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px); }\n.hi-v4-cascader-panel {\n  white-space: nowrap;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-cascader-search {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  padding: 0 10px 10px;\n  position: relative; }\n.hi-v4-cascader-search .hi-v4-input__prefix {\n    font-size: 16px;\n    padding-left: 0; }\n.hi-v4-cascader-search__empty {\n    display: inline-block;\n    margin-top: 20px;\n    font-size: 14px;\n    font-weight: 400;\n    color: #999;\n    line-height: 20px; }\n.hi-v4-cascader-menu-list {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  overflow-x: auto; }\n.hi-v4-cascader-menu-list--flatted .hi-v4-cascader-menu {\n    -ms-flex-preferred-size: 100%;\n        flex-basis: 100%; }\n.hi-v4-cascader-menu {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  vertical-align: middle;\n  list-style: none;\n  width: auto;\n  box-sizing: border-box;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  display: inline-block;\n  min-width: 140px;\n  max-height: 260px;\n  overflow: auto;\n  padding: 4px 8px;\n  border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }\n.hi-v4-cascader-menu:last-of-type {\n    border: none; }\n.hi-v4-cascader-menu-item {\n    width: 100%;\n    padding: var(--hi-v4-spacing-2, 4px) 0;\n    position: relative;\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex; }\n.hi-v4-cascader-menu-option {\n    padding: 0 var(--hi-v4-spacing-4, 8px);\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    height: 32px;\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-cascader-menu-option:hover {\n      background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected {\n      background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected .hi-v4-cascader-menu-switcher {\n        color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-cascader-menu-option--focused {\n      background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-cascader-menu-option--checked {\n      font-weight: 700; }\n.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled {\n      cursor: not-allowed;\n      color: var(--hi-v4-color-gray-500, #929aa6);\n      background: transparent; }\n.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled .hi-v4-cascader-menu-switcher {\n        color: var(--hi-v4-color-gray-400, #c9ced6); }\n.hi-v4-cascader-menu .title__text {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1; }\n.hi-v4-cascader-menu .title__text--cols {\n      display: block;\n      width: 100%;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n      border: none;\n      outline: none;\n      font-size: var(--hi-v4-text-size-normal, 0.875rem);\n      vertical-align: middle;\n      list-style: none; }\n.hi-v4-cascader-menu .title__text--col {\n      display: inline-block; }\n.hi-v4-cascader-menu .title__text--col::after {\n        content: '\\00a0/\\00a0'; }\n.hi-v4-cascader-menu .title__text--col:last-child::after {\n        content: none; }\n.hi-v4-cascader-menu .title__text--matched {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-cascader-menu-switcher {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n    font-size: 16px;\n    color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-cascader-menu-switcher--loading {\n      color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-cascader-menu-switcher--arrow {\n      -webkit-transform: rotate(-90deg);\n              transform: rotate(-90deg); }\n.hi-v4-cascader__icon--loading {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  stroke: none;\n  cursor: default;\n  fill: currentColor; }\n.hi-v4-cascader__icon--loading svg {\n    -webkit-animation-name: hi-rotate;\n            animation-name: hi-rotate;\n    -webkit-animation-duration: 2s;\n            animation-duration: 2s;\n    -webkit-animation-iteration-count: infinite;\n            animation-iteration-count: infinite; }\n@-webkit-keyframes rotate {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg); } }\n@keyframes rotate {\n  to {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg); } }\n";
+var css_248z = ".hi-v4-cascader__popper .hi-v4-picker__body {padding-left: 0;padding-right: 0;overflow-y: hidden; }.hi-v4-cascader__popper .hi-v4-picker__loading, .hi-v4-cascader__popper .hi-v4-picker__empty {padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px); }.hi-v4-cascader-panel {white-space: nowrap;-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-700, #1f2733); }.hi-v4-cascader-search {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 10px 10px;position: relative; }.hi-v4-cascader-search .hi-v4-input__prefix {font-size: 16px;padding-left: 0; }.hi-v4-cascader-search__empty {display: inline-block;margin-top: 20px;font-size: 14px;font-weight: 400;color: #999;line-height: 20px; }.hi-v4-cascader-menu-list {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-sizing: border-box;box-sizing: border-box;overflow-x: auto; }.hi-v4-cascader-menu-list--flatted .hi-v4-cascader-menu {-ms-flex-preferred-size: 100%;flex-basis: 100%; }.hi-v4-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: 260px;overflow: auto;padding: 4px 8px;border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-cascader-menu:last-of-type {border: none; }.hi-v4-cascader-menu-item {width: 100%;padding: var(--hi-v4-spacing-2, 4px) 0;position: relative;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-cascader-menu-option {padding: 0 var(--hi-v4-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: 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-cascader-menu-option:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--selected {background-color: 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-cascader-menu-option.hi-v4-cascader-menu-option--selected .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-cascader-menu-option--focused {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-cascader-menu-option--checked {font-weight: 700; }.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled {cursor: not-allowed;color: var(--hi-v4-color-gray-500, #929aa6);background: transparent; }.hi-v4-cascader-menu-option.hi-v4-cascader-menu-option--disabled .hi-v4-cascader-menu-switcher {color: var(--hi-v4-color-gray-400, #c9ced6); }.hi-v4-cascader-menu .title__text {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1; }.hi-v4-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-cascader-menu .title__text--col {display: inline-block; }.hi-v4-cascader-menu .title__text--col::after {content: '\\00a0/\\00a0'; }.hi-v4-cascader-menu .title__text--col:last-child::after {content: none; }.hi-v4-cascader-menu .title__text--matched {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-cascader-menu-switcher {-ms-flex-negative: 0;flex-shrink: 0;font-size: 16px;color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-cascader-menu-switcher--loading {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-cascader-menu-switcher--arrow {-webkit-transform: rotate(-90deg);transform: rotate(-90deg); }.hi-v4-cascader__icon--loading {display: inline-block;width: 1em;height: 1em;stroke: none;cursor: default;fill: currentColor; }.hi-v4-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('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 
 exports["default"] = css_248z;
-//# sourceMappingURL=index.scss.js.map

package/lib/cjs/use-cascader.js

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -105,12 +105,13 @@ var useCascader = function useCascader(_a) {
     var id = _ref3.id,
         depth = _ref3.depth;
     return {
+      active: value[depth] === id,
       selected: flatted ? selectedId === id : selectedIds[depth] === id,
       loading: isLoadingId(id),
       // TODO: 表示聚焦状态，添加快捷键时可以一起处理
       focused: false
     };
-  }, [flatted, selectedId, selectedIds, isLoadingId]);
+  }, [flatted, selectedId, selectedIds, isLoadingId, value]);
   var reset = React.useCallback(function () {
     setSelectedId(value[value.length - 1]);
   }, [setSelectedId, value]);
@@ -132,4 +133,3 @@ var useCascader = function useCascader(_a) {
 };
 
 exports.useCascader = useCascader;
-//# sourceMappingURL=use-cascader.js.map

package/lib/cjs/utils/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -110,10 +110,38 @@ function getItemEventData(node, requiredProps) {
   return Object.assign(Object.assign({}, node), requiredProps);
 }
 
+var getFilteredMenuList = function getFilteredMenuList(menuList, searchedData) {
+  var result = [];
+  searchedData.forEach(function (item) {
+    while (item && item.depth >= 0) {
+      var depth = item.depth;
+      var depthResult = result[depth];
+
+      if (!depthResult) {
+        depthResult = new Map();
+        result[depth] = depthResult;
+      }
+
+      depthResult.set(item.id, item);
+      item = item.parent;
+    }
+  });
+  return menuList.map(function (depthItems, depth) {
+    var depthSavedMp = result[depth];
+    if (!depthSavedMp) return depthItems;
+    return depthItems.filter(function (item) {
+      var depthSavedMp = result[item.depth];
+      if (!depthSavedMp) return true;
+      if (depthSavedMp.has(item.id)) return true;
+      return false;
+    });
+  });
+};
+
 exports.checkCanLoadChildren = checkCanLoadChildren;
 exports.flattenTreeData = flattenTreeData;
 exports.getActiveMenus = getActiveMenus;
 exports.getActiveNodePaths = getActiveNodePaths;
+exports.getFilteredMenuList = getFilteredMenuList;
 exports.getFlattedMenus = getFlattedMenus;
 exports.getItemEventData = getItemEventData;
-//# sourceMappingURL=index.js.map

package/lib/esm/Cascader.js

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15,17 +15,18 @@ import { useUncontrolledToggle } from '@hi-ui/use-toggle';
 import { useCascader } from './use-cascader.js';
 import { MockInput } from '@hi-ui/input';
 import { UpOutlined, DownOutlined } from '@hi-ui/icons';
-import { defaultLoadingIcon, defaultSuffixIcon, defaultLeafIcon } from './icons/index.js';
-import { flattenTreeData, checkCanLoadChildren, getItemEventData } from './utils/index.js';
-import { CascaderProvider, useCascaderContext } from './context.js';
+import { flattenTreeData, getFilteredMenuList, getItemEventData } from './utils/index.js';
+import { CascaderProvider } from './context.js';
 import { getTopDownAncestors, getNodeAncestorsWithMe } from '@hi-ui/tree-utils';
 import { isUndef, isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
 import { Picker } from '@hi-ui/picker';
 import { useTreeCustomSearch, useTreeUpMatchSearch, useSearchMode } from '@hi-ui/use-search-mode';
 import { uniqBy } from '@hi-ui/array-utils';
 import { useCache } from './hooks/use-cache/lib/esm/index.js';
-import { useLocaleContext } from '@hi-ui/locale-context';
+import { useLocaleContext } from '@hi-ui/core';
 import { callAllFuncs } from '@hi-ui/func-utils';
+import { CascaderMenuList } from './CascaderMenuList.js';
+import Highlighter from '@hi-ui/highlighter';
 
 var _prefix = getPrefixCls('cascader');
 
@@ -61,15 +62,18 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
       overlayClassName = props.overlayClassName,
       _props$data = props.data,
       data = _props$data === void 0 ? NOOP_ARRAY : _props$data,
+      _props$flattedSearchR = props.flattedSearchResult,
+      flattedSearchResult = _props$flattedSearchR === void 0 ? true : _props$flattedSearchR,
+      visible = props.visible,
       onOpen = props.onOpen,
       onClose = props.onClose,
-      rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "onOpen", "onClose"]);
+      rest = __rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "onSearch", "render", "overlayClassName", "data", "flattedSearchResult", "visible", "onOpen", "onClose"]);
 
   var i18n = useLocaleContext();
   var placeholder = isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
-  var flatted = type === 'flatted';
 
   var _useUncontrolledToggl = useUncontrolledToggle({
+    visible: visible,
     disabled: disabled,
     onOpen: onOpen,
     onClose: onClose
@@ -95,7 +99,7 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     var highlight = !!searchValue && searchMode === 'upMatch';
 
     if (highlight) {
-      return renderHighlightTitle(searchValue, node, titleRender);
+      return flattedSearchResult ? renderHighlightTitles(searchValue, node, titleRender) : renderHighlightTitle(searchValue, node, titleRender);
     }
 
     return isFunction(titleRender) ? titleRender(node) : true;
@@ -118,9 +122,12 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     data: cascaderData,
     flattedData: flattedData,
     enabled: searchableProp,
-    exclude: function exclude(option) {
-      return checkCanLoadChildren(option, onLoadChildren);
-    }
+    exclude: function exclude(node) {
+      return node.disabled;
+    } // exclude: (option: FlattedCascaderDataItem) => {
+    //   return checkCanLoadChildren(option, onLoadChildren)
+    // },
+
   });
 
   var _useSearchMode = useSearchMode({
@@ -158,11 +165,14 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
     }, mergedTitle);
   };
 
+  var shouldUseSearch = !!searchValue; // 搜索的结果列表也采用 flatted 模式进行展示
+
+  var flatted = shouldUseSearch ? flattedSearchResult : type === 'flatted';
+
   var _a = useCascader(Object.assign(Object.assign({}, rest), {
     disabled: disabled,
     fieldNames: fieldNames,
-    // 搜索的结果列表也采用 flatted 模式进行展示
-    flatted: flatted || !!searchValue,
+    flatted: flatted,
     onSelect: onSelect,
     onLoadChildren: onLoadChildren,
     data: data,
@@ -179,14 +189,17 @@ var Cascader = /*#__PURE__*/forwardRef(function (props, ref) {
       reset = context.reset,
       menuList = context.menuList,
       getItemRequiredProps = context.getItemRequiredProps;
-  var shouldUseSearch = !!searchValue;
   var showData = useMemo(function () {
     if (shouldUseSearch) {
+      if (!flattedSearchResult) {
+        return getFilteredMenuList(menuList, stateInSearch.data);
+      }
+
       return isArrayNonEmpty(stateInSearch.data) ? [stateInSearch.data] : [];
     }
 
     return menuList;
-  }, [shouldUseSearch, stateInSearch.data, menuList]);
+  }, [shouldUseSearch, flattedSearchResult, stateInSearch.data, menuList]);
   useEffect(function () {
     // 关闭展示后，重置展开要高亮的选项
     if (!menuVisible) {
@@ -245,133 +258,17 @@ if (__DEV__) {
   Cascader.displayName = 'Cascader';
 }
 
-var menuListPrefix = getPrefixCls('cascader-menu-list');
-var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
-      className = _a.className,
-      rest = __rest(_a, ["prefixCls", "className"]);
-
-  var _useCascaderContext = useCascaderContext(),
-      flatted = _useCascaderContext.flatted,
-      menuList = _useCascaderContext.menuList;
-
-  var cls = cx(prefixCls, className, flatted && prefixCls + "--flatted");
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: ref,
-    className: cls
-  }, rest), menuList.map(function (menu, menuIndex) {
-    // @ts-ignore
-    return isArrayNonEmpty(menu) ? /*#__PURE__*/React.createElement(CascaderMenu, {
-      key: menuIndex,
-      data: menu
-    }) : null;
-  }));
-});
-
-if (__DEV__) {
-  CascaderMenuList.displayName = 'CascaderMenuList';
-}
-
-var menuPrefix = getPrefixCls('cascader-menu');
-
-var CascaderMenu = function CascaderMenu(_ref2) {
-  var _ref2$prefixCls = _ref2.prefixCls,
-      prefixCls = _ref2$prefixCls === void 0 ? menuPrefix : _ref2$prefixCls,
-      _ref2$role = _ref2.role,
-      role = _ref2$role === void 0 ? 'menu' : _ref2$role,
-      className = _ref2.className,
-      menu = _ref2.data;
-
-  var _useCascaderContext2 = useCascaderContext(),
-      flatted = _useCascaderContext2.flatted,
-      disabledContext = _useCascaderContext2.disabled,
-      expandTrigger = _useCascaderContext2.expandTrigger,
-      onItemClick = _useCascaderContext2.onItemClick,
-      onItemHover = _useCascaderContext2.onItemHover,
-      titleRender = _useCascaderContext2.titleRender,
-      onLoadChildren = _useCascaderContext2.onLoadChildren,
-      getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
-
-  var cls = cx(prefixCls, className);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: cls,
-    role: role
-  }, menu.map(function (option) {
-    var eventOption = getItemEventData(option, getItemRequiredProps(option));
-    var selected = eventOption.selected,
-        loading = eventOption.loading;
-    var disabled = disabledContext || option.disabled;
-    var optionCls = cx(prefixCls + "-option", loading && prefixCls + "-option--loading", disabled && prefixCls + "-option--disabled", selected && prefixCls + "-option--selected");
-    return /*#__PURE__*/React.createElement("li", {
-      key: option.id,
-      role: "menu-item",
-      className: prefixCls + "-item"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: optionCls,
-      onClick: function onClick() {
-        if (disabled) return;
-        onItemClick(eventOption);
-      },
-      onMouseEnter: function onMouseEnter() {
-        if (disabled) return;
-
-        if (expandTrigger === 'hover') {
-          onItemHover(eventOption);
-        }
-      }
-    }, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
-  }));
-};
-/**
- * 渲染菜单子项的展开提示图标
- */
-
-
-var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildren) {
-  if (loading) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: cx(prefixCls + "-switcher", prefixCls + "-switcher--loading")
-    }, defaultLoadingIcon);
-  }
-
-  var canLoadChildren = checkCanLoadChildren(item, onLoadChildren);
-
-  if (canLoadChildren) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
-    }, defaultSuffixIcon);
-  }
-
-  return /*#__PURE__*/React.createElement("span", {
-    className: cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")
-  }, defaultLeafIcon);
-};
-
-var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
-  // 如果 titleRender 返回 `true`，则使用默认 title
-  var title = titleRender ? titleRender(option) : true;
-  if (title !== true) return title;
-  return /*#__PURE__*/React.createElement("span", {
-    className: "title__text title__text--cols"
-  }, getTopDownAncestors(option).map(function (item) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: item.id,
-      className: "title__text--col"
-    }, item.title);
-  }));
-};
-
-var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
+var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
   // 如果 titleRender 返回 `true`，则使用默认 title
-  var title = titleRender ? titleRender(option) : true;
+  var title = titleRender ? titleRender(option, keyword) : true;
   if (title !== true) return title;
-  return /*#__PURE__*/React.createElement("span", {
-    className: "title__text"
+  return /*#__PURE__*/React.createElement(Highlighter, {
+    key: option.id,
+    keyword: keyword
   }, option.title);
 };
 
-var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
+var renderHighlightTitles = function renderHighlightTitles(keyword, option, titleRender) {
   // 如果 titleRender 返回 `true`，则使用默认 title
   var title = titleRender ? titleRender(option, keyword) : true;
   if (title !== true) return title;
@@ -407,5 +304,4 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
   }).reverse());
 };
 
-export { Cascader, CascaderMenu, CascaderMenuList };
-//# sourceMappingURL=Cascader.js.map
+export { Cascader };

package/lib/esm/CascaderMenuList.js

@@ -0,0 +1,146 @@
+/** @LICENSE
+ * @hi-ui/cascader
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+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 } from '@hi-ui/type-assertion';
+var menuListPrefix = getPrefixCls('cascader-menu-list');
+var CascaderMenuList = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
+      className = _a.className,
+      rest = __rest(_a, ["prefixCls", "className"]);
+
+  var _useCascaderContext = useCascaderContext(),
+      flatted = _useCascaderContext.flatted,
+      menuList = _useCascaderContext.menuList;
+
+  var cls = cx(prefixCls, className, flatted && prefixCls + "--flatted");
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    className: cls
+  }, rest), menuList.map(function (menu, menuIndex) {
+    // @ts-ignore
+    return isArrayNonEmpty(menu) ? /*#__PURE__*/React.createElement(CascaderMenu, {
+      key: menuIndex,
+      data: menu
+    }) : null;
+  }));
+});
+
+if (__DEV__) {
+  CascaderMenuList.displayName = 'CascaderMenuList';
+}
+
+var menuPrefix = getPrefixCls('cascader-menu');
+
+var CascaderMenu = function CascaderMenu(_ref) {
+  var _ref$prefixCls = _ref.prefixCls,
+      prefixCls = _ref$prefixCls === void 0 ? menuPrefix : _ref$prefixCls,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'menu' : _ref$role,
+      className = _ref.className,
+      menu = _ref.data;
+
+  var _useCascaderContext2 = useCascaderContext(),
+      flatted = _useCascaderContext2.flatted,
+      disabledContext = _useCascaderContext2.disabled,
+      expandTrigger = _useCascaderContext2.expandTrigger,
+      onItemClick = _useCascaderContext2.onItemClick,
+      onItemHover = _useCascaderContext2.onItemHover,
+      titleRender = _useCascaderContext2.titleRender,
+      onLoadChildren = _useCascaderContext2.onLoadChildren,
+      getItemRequiredProps = _useCascaderContext2.getItemRequiredProps;
+
+  var cls = cx(prefixCls, className);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: cls,
+    role: role
+  }, menu.map(function (option) {
+    var eventOption = getItemEventData(option, getItemRequiredProps(option));
+    var selected = eventOption.selected,
+        loading = eventOption.loading,
+        active = eventOption.active;
+    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");
+    return /*#__PURE__*/React.createElement("li", {
+      key: option.id,
+      role: "menu-item",
+      className: prefixCls + "-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: optionCls,
+      onClick: function onClick() {
+        if (disabled) return;
+        onItemClick(eventOption);
+      },
+      onMouseEnter: function onMouseEnter() {
+        if (disabled) return;
+
+        if (expandTrigger === 'hover') {
+          onItemHover(eventOption);
+        }
+      }
+    }, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
+  }));
+};
+/**
+ * 渲染菜单子项的展开提示图标
+ */
+
+
+var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildren) {
+  if (loading) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: cx(prefixCls + "-switcher", prefixCls + "-switcher--loading")
+    }, defaultLoadingIcon);
+  }
+
+  var canLoadChildren = checkCanLoadChildren(item, onLoadChildren);
+
+  if (canLoadChildren) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
+    }, defaultSuffixIcon);
+  }
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")
+  }, defaultLeafIcon);
+};
+
+var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
+  // 如果 titleRender 返回 `true`，则使用默认 title
+  var title = titleRender ? titleRender(option) : true;
+  if (title !== true) return title;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "title__text title__text--cols"
+  }, getTopDownAncestors(option).map(function (item) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: item.id,
+      className: "title__text--col"
+    }, item.title);
+  }));
+};
+
+var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
+  // 如果 titleRender 返回 `true`，则使用默认 title
+  var title = titleRender ? titleRender(option) : true;
+  if (title !== true) return title;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "title__text"
+  }, option.title);
+};
+
+export { CascaderMenu, CascaderMenuList };

package/lib/esm/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,4 +22,3 @@ var useCascaderContext = function useCascaderContext() {
 };
 
 export { CascaderProvider, useCascaderContext };
-//# sourceMappingURL=context.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -119,4 +119,3 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
 };
 
 export { useAsyncSwitch };
-//# sourceMappingURL=use-async-switch.js.map

package/lib/esm/hooks/use-cache/lib/esm/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,7 +12,7 @@ import { useState, useEffect } from 'react';
  * @hi-ui/use-cache
  * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-cache#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -34,4 +34,3 @@ var useCache = function useCache(data) {
 };
 
 export { useCache };
-//# sourceMappingURL=index.js.map

package/lib/esm/hooks/use-select.js

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -55,4 +55,3 @@ var useSelect = function useSelect(disabled, onSelect, changeOnSelect, onLoadChi
 };
 
 export { useSelect };
-//# sourceMappingURL=use-select.js.map

package/lib/esm/icons/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,4 +19,3 @@ var defaultLeafIcon = /*#__PURE__*/React.createElement("span", {
 });
 var defaultLoadingIcon = /*#__PURE__*/React.createElement(Spinner, null);
 export { defaultLeafIcon, defaultLoadingIcon, defaultSuffixIcon };
-//# sourceMappingURL=index.js.map

package/lib/esm/index.js

@@ -2,11 +2,10 @@
  * @hi-ui/cascader
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/cascader#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import './styles/index.scss.js';
-export { Cascader, CascaderMenu, CascaderMenuList, Cascader as default } from './Cascader.js';
-//# sourceMappingURL=index.js.map
+export { Cascader, Cascader as default } from './Cascader.js';