@hi-ui/cascader 4.0.0-alpha.6 → 4.0.0-beta.0

package/README.md

@@ -1,11 +1,112 @@
-# `@hi-ui/cascader`
+# Cascader 级联选择
 
-> TODO: description
+一种接收数据的容器，为用户提供选择一部分数据的能力
 
-## Usage
+## 何时使用
 
-```
-const Cascader = require('@hi-ui/cascader');
+需要从大量的离散型数据中选择一部分时使用
 
-// TODO: DEMONSTRATE API
-```
+备选项数量 5 个以上时
+
+不需要将全部备选项都展示给用户时
+
+## 使用示例
+
+<!-- Inject Stories -->
+
+## Props
+
+| 参数              | 说明                                                                                                                       | 类型                                                      | 可选值             | 默认值                                                  |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ------------------ | ------------------------------------------------------- |
+| disabled          | 是否禁止使用                                                                                                               | boolean                                                   | true \| false      | false                                                   |
+| placeholder       | 输入框占位                                                                                                                 | string                                                    | -                  | '请选择'                                                |
+| searchPlaceholder | 搜索输入框占位                                                                                                             | string                                                    | -                  | '搜索'                                                  |
+| emptyContent      | 设置选项为空时展示的内容                                                                                                   | ReactNode                                                 | -                  | '无匹配数据'                                            |
+| loadingContent    | 设置加载中时展示的内容                                                                                                     | ReactNode                                                 | -                  | '数据加载中...'                                         |
+| overlayClassName  | 下拉根元素的类名称                                                                                                         | string                                                    | -                  | -                                                       |
+| searchable        | 是否可搜索                                                                                                                 | boolean                                                   | true \| false      | false                                                   |
+| clearable         | 是否可清空                                                                                                                 | boolean                                                   | true \| false      | true                                                    |
+| overlay           | 自定义控制弹出层 popper 行为                                                                                               | PopperOverlayProps                                        | -                  | -                                                       |
+| fieldNames        | 设置 data 中 label, value, children 对应的 key                                                                             | object                                                    | -                  | { label: 'label', value: 'value', children: 'children'} |
+| data              | 设置选择项数据源                                                                                                           | CascaderDataItem[]                                        | -                  | -                                                       |
+| value             | 设置当前选中值                                                                                                             | ReactText[]                                               | -                  | []                                                      |
+| defaultValue      | 设置当前选中值默认值                                                                                                       | ReactText[]                                               | -                  | []                                                      |
+| displayRender     | 自定义选择后展示的内容                                                                                                     | (value: string[]) => string                               | -                  | -                                                       |
+| expandTrigger     | 次级菜单的展开方式，可选 'click' 和 'hover'                                                                                | string                                                    | 'click' \| 'hover' | 'click'                                                 |
+| filterOption      | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效                   | (keyword: string, item: DataItem) => boolean              | -                  | -                                                       |
+| changeOnSelect    | 是否启用选择即改变功能                                                                                                     | boolean                                                   | true \| false      | false                                                   |
+| flatted           | 将选项拍平展示，不支持 `onLoadChildren` 异步加载交互                                                                       | true \| false                                             | false              |
+| upMatch           | 开启全量搜索，默认只对开启对可选的选项进行搜索，不向上查找路径                                                             | true \| false                                             | false              |
+| render            | 自定义渲染节点的 title 内容径                                                                                              | (item: CascaderItemEventData) => React.ReactNode          | -                  |
+| filterOption      | 自定义搜索过滤器，仅在 searchable 为 true 时有效。第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项 | (keyword: string, item: CascaderItemEventData) => boolean | -                  |
+| appearance        | 设置展现形式                                                                                                               | 'line' \| 'unset' \| 'filled'                             | 'line'             |
+
+## Events
+
+| 名称               | 说明               | 类型                                                                       | 参数               | 返回值 |
+| ------------------ | ------------------ | -------------------------------------------------------------------------- | ------------------ | ------ |
+| onChange           | 选择后的回调       | (values: ReactText[]) => void                                              | values: 选中项集合 | -      |
+| onActiveItemChange | 选中项改变时的回调 | (values: string[]) => void                                                 | values: 选中项集合 | -      |
+| onOpen             | 下拉菜单打开时回调 | () => void                                                                 | -                  | -      |
+| onClose            | 下拉菜单关闭时回调 | () => void                                                                 | -                  | -      |
+| onLoadChildren     | 异步请求更新数据   | (item: CascaderItemEventData) => Promise\<CascaderItem[] \| void\> \| void | -                  | -      |
+
+## Type
+
+### CascaderDataItem
+
+| 参数     | 说明             | 类型      | 可选值        | 默认值 |
+| -------- | ---------------- | --------- | ------------- | ------ |
+| id       | 下拉选择项唯一值 | ReactText | -             | -      |
+| title    | 下拉选择项标题   | string    | -             | -      |
+| disabled | 是否禁用         | boolean   | true \| false | false  |
+
+### CascaderItemEventData
+
+| 参数     | 说明                             | 类型     | 可选值        | 默认值 |
+| -------- | -------------------------------- | -------- | ------------- | ------ |
+| id       | 选择项值                         | string   | -             | -      |
+| title    | 选择项                           | string   | -             | -      |
+| disabled | 是否禁用                         | boolean  | true \| false | false  |
+| depth    | 选项的层级，根节点层级为 0       | number   | -             | -      |
+| raw      | 原始数据，包括约定模型之外的数据 | object   | -             | -      |
+| parent   | 选项的父级节点数据               | object   | -             | -      |
+| children | 选项的孩子节点列表数据           | object[] | -             | -      |
+| selected | 节点是否被选中                   | boolean  | true \| false | -      |
+| loading  | 节点是否在异步加载子项数据中     | boolean  | true \| false | -      |
+
+### DataSource
+
+> 继承 [Axios](https://www.kancloud.cn/yunye/axios/234845) 的 api
+
+| 参数              | 说明                               | 类型                             | 可选值        | 默认值 |
+| ----------------- | ---------------------------------- | -------------------------------- | ------------- | ------ |
+| url               | 请求的 url                         | string                           | -             | -      |
+| method            | 请求方法                           | string                           | get \| post   | get    |
+| data              | post 请求时请求体参数              | object                           | -             | -      |
+| params            | url 查询参数                       | object                           | -             | -      |
+| headers           | 请求头                             | object                           | -             | -      |
+| withCredentials   | 上传请求时是否携带 cookie          | boolean                          | true \| false | false  |
+| transformResponse | 成功时的回调，用于对数据进行预处理 | (response: object) => DataItem[] | -             | -      |
+| error             | 请求发生异常的回调方法             | (error: object) => void          | -             | -      |
+
+## CHANGELOG
+
+| 参数               | 变更类型                        | 变更内容                                                                                                        | 解决的问题                                                                           |
+| ------------------ | ------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| propName           | feature \| deprecated \| update | 变更了什么                                                                                                      | 之前是什么样子，解决什么问题                                                         |
+| ----               | ----                            | ----                                                                                                            | ----                                                                                 |
+| value              | update                          | 类型 string[] => string[] \| number[]                                                                           | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持）       |
+| defaultValue       | update                          | 类型 string[] => string[] \| number[]                                                                           | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持）       |
+| id                 | update                          | 类型 string => string \| number                                                                                 | 对于表单控件 id 值的控制，均使用 React.ReactText（即 string 和 number 都支持）       |
+| bordered           | deprecated                      | 字段 `bordered` => `appearance`                                                                                 | 对于 Picker 类型的组件，统一使用 appearance 设置外形（线\面\无边框）值               |
+| content            | deprecated                      | 字段 `content` => `title`                                                                                       | 对于 DataItem 模型数据，统一使用 title                                               |
+| searchPlaceholder  | feature                         | -                                                                                                               | Picker 类型组件统一支持                                                              |
+| loadingContent     | feature                         | -                                                                                                               | Picker 类型组件统一支持，适配新 UI                                                   |
+| overlay            | feature                         | -                                                                                                               | Picker 类型组件统一支持，聚合管理。比如： placement，之前有的加了有的没加            |
+| onLoadChildren     | feature                         | -                                                                                                               | 树形数据懒加载统一方案，并强化返回值 Promise 功能，保持一致，替代 onActiveItemChange |
+| onActiveItemChange | deprecated                      | -                                                                                                               | 使用 onLoadChildren 替代                                                             |
+| render             | feature                         | (item: CascaderItemEventData) => React.ReactNode                                                                | 统一支持自定义渲染每一项                                                             |
+| filterOption       | feature                         | (keyword: string, item: CascaderItemEventData) => boolean                                                       | 统一支持自定义过滤                                                                   |
+| appearance         | feature                         | 'line' \| 'unset' \| 'filled'                                                                                   | 统一支持：线性\面性\无边框                                                           |
+| displayRender      | feature                         | (value: string[]) => string -> (item: CascaderItemEventData, items: CascaderItemEventData[]) => React.ReactNode | 支持自定义节点渲染                                                                   |

package/lib/cjs/Cascader.js

@@ -27,24 +27,30 @@ var useToggle = require('@hi-ui/use-toggle');
 
 var useCascader = require('./use-cascader.js');
 
-var typeAssertion = require('@hi-ui/type-assertion');
-
-var Input = require('@hi-ui/input');
-
-var popper = require('@hi-ui/popper');
+var input = require('@hi-ui/input');
 
 var icons = require('@hi-ui/icons');
 
-var index$1 = require('./icons/index.js');
+var index$2 = require('./icons/index.js');
 
-var index = require('./utils/index.js');
+var index$1 = require('./utils/index.js');
 
 var context = require('./context.js');
 
-var useLatest = require('@hi-ui/use-latest');
-
 var treeUtils = require('@hi-ui/tree-utils');
 
+var typeAssertion = require('@hi-ui/type-assertion');
+
+var picker = require('@hi-ui/picker');
+
+var useSearchMode = require('@hi-ui/use-search-mode');
+
+var lodash = require('lodash');
+
+var index = require('./hooks/use-cache/lib/esm/index.js');
+
+var localeContext = require('@hi-ui/locale-context');
+
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
@@ -53,156 +59,240 @@ function _interopDefaultLegacy(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
-
-var _role = 'cascader';
+var _prefix = classname.getPrefixCls('cascader');
 
-var _prefix = classname.getPrefixCls(_role);
+var NOOP_ARRAY = [];
 /**
  * TODO: What is Cascader
  * Trigger + MenuList + Search
  */
 
-
 var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$prefixCls = props.prefixCls,
       prefixCls = _props$prefixCls === void 0 ? _prefix : _props$prefixCls,
-      _props$role = props.role,
-      role = _props$role === void 0 ? _role : _props$role,
       className = props.className,
-      popper$1 = props.popper,
-      placeholder = props.placeholder,
-      _props$searchable = props.searchable,
-      searchable = _props$searchable === void 0 ? true : _props$searchable,
+      placeholderProp = props.placeholder,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$clearable = props.clearable,
       clearable = _props$clearable === void 0 ? true : _props$clearable,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'tree' : _props$type,
+      fieldNames = props.fieldNames,
+      _props$expandTrigger = props.expandTrigger,
+      expandTrigger = _props$expandTrigger === void 0 ? 'click' : _props$expandTrigger,
       displayRenderProp = props.displayRender,
       onSelectProp = props.onSelect,
-      rest = tslib.__rest(props, ["prefixCls", "role", "className", "popper", "placeholder", "searchable", "clearable", "displayRender", "onSelect", "titleRender"]);
+      onLoadChildren = props.onLoadChildren,
+      appearance = props.appearance,
+      invalid = props.invalid,
+      filterOption = props.filterOption,
+      searchableProp = props.searchable,
+      titleRender = props.render,
+      overlayClassName = props.overlayClassName,
+      _props$data = props.data,
+      data = _props$data === void 0 ? NOOP_ARRAY : _props$data,
+      onOpen = props.onOpen,
+      onClose = props.onClose,
+      rest = tslib.__rest(props, ["prefixCls", "className", "placeholder", "disabled", "clearable", "type", "fieldNames", "expandTrigger", "displayRender", "onSelect", "onLoadChildren", "appearance", "invalid", "filterOption", "searchable", "render", "overlayClassName", "data", "onOpen", "onClose"]);
+
+  var i18n = localeContext.useLocaleContext();
+  var placeholder = typeAssertion.isUndef(placeholderProp) ? i18n.get('cascader.placeholder') : placeholderProp;
+  var flatted = type === 'flatted';
+
+  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
+    disabled: disabled,
+    onOpen: onOpen,
+    onClose: onClose
+  }),
+      menuVisible = _useUncontrolledToggl[0],
+      menuVisibleAction = _useUncontrolledToggl[1]; // 搜索时临时选中缓存数据
 
-  var _useToggle = useToggle.useToggle(),
-      menuVisible = _useToggle[0],
-      menuVisibleAction = _useToggle[1];
 
   var _useState = React.useState(null),
-      targetElRef = _useState[0],
-      setTargetElRef = _useState[1];
+      selectedItem = _useState[0],
+      setSelectedItem = _useState[1];
 
-  var onSelectLatest = useLatest.useLatestCallback(onSelectProp);
-  var onSelect = React.useCallback(function (value, item, itemPaths) {
-    onSelectLatest(value, item, itemPaths); // 关闭弹窗
+  var onSelect = function onSelect(value, item, itemPaths) {
+    onSelectProp === null || onSelectProp === void 0 ? void 0 : onSelectProp(value, item, itemPaths);
+    setSelectedItem(item); // 关闭弹窗
 
     menuVisibleAction.off();
-  }, [menuVisibleAction, onSelectLatest]);
+  }; // 拦截 titleRender，自定义高亮展示
+
+
+  var proxyTitleRender = function proxyTitleRender(node) {
+    // 本地搜索执行默认高亮规则
+    var highlight = !!searchValue && searchMode === 'upMatch';
+
+    if (highlight) {
+      return renderHighlightTitle(searchValue, node, titleRender);
+    }
+
+    return typeAssertion.isFunction(titleRender) ? titleRender(node) : true;
+  };
+
+  var _useCache = index.useCache(data),
+      cascaderData = _useCache[0],
+      setCascaderData = _useCache[1];
+
+  var flattedData = React.useMemo(function () {
+    return index$1.flattenTreeData(cascaderData, fieldNames);
+  }, [cascaderData, fieldNames]); // ************************** 异步搜索 ************************* //
+  // TODO: 支持对 Item 传入 状态
+
+  var customSearchStrategy = useSearchMode.useTreeCustomSearch({
+    data: flattedData,
+    filterOption: filterOption
+  });
+  var upMatchSearchStrategy = useSearchMode.useTreeUpMatchSearch({
+    data: cascaderData,
+    flattedData: flattedData,
+    enabled: searchableProp,
+    exclude: function exclude(option) {
+      return index$1.checkCanLoadChildren(option, onLoadChildren);
+    }
+  });
+
+  var _useSearchMode = useSearchMode.useSearchMode({
+    searchable: searchableProp,
+    strategies: [customSearchStrategy, upMatchSearchStrategy]
+  }),
+      stateInSearch = _useSearchMode.state,
+      searchable = _useSearchMode.searchable,
+      searchMode = _useSearchMode.searchMode,
+      onSearch = _useSearchMode.onSearch,
+      searchValue = _useSearchMode.keyword;
+
+  var displayRender = function displayRender(item) {
+    var itemPaths = treeUtils.getTopDownAncestors(item);
+
+    if (displayRenderProp) {
+      var eventOption = index$1.getItemEventData(item, getItemRequiredProps(item));
+      return displayRenderProp(eventOption, itemPaths.map(function (item) {
+        return index$1.getItemEventData(item, getItemRequiredProps(item));
+      }));
+    }
+
+    var mergedTitle = itemPaths.reduce(function (acc, item, index, _ref) {
+      var length = _ref.length;
+      acc.push(item.title);
+
+      if (length - 1 !== index) {
+        acc.push('/');
+      }
+
+      return acc;
+    }, []);
+    return /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "title__text"
+    }, mergedTitle);
+  };
 
   var _a = useCascader.useCascader(Object.assign(Object.assign({}, rest), {
-    onSelect: onSelect
+    disabled: disabled,
+    fieldNames: fieldNames,
+    // 搜索的结果列表也采用 flatted 模式进行展示
+    flatted: flatted || !!searchValue,
+    onSelect: onSelect,
+    onLoadChildren: onLoadChildren,
+    data: data,
+    // @ts-ignore
+    cascaderData: cascaderData,
+    setCascaderData: setCascaderData,
+    flattedData: flattedData
   })),
       rootProps = _a.rootProps,
       context$1 = tslib.__rest(_a, ["rootProps"]);
 
-  var disabled = context$1.disabled,
-      value = context$1.value,
-      flattedData = context$1.flattedData,
+  var value = context$1.value,
       tryChangeValue = context$1.tryChangeValue,
-      reset = context$1.reset;
+      reset = context$1.reset,
+      menuList = context$1.menuList,
+      getItemRequiredProps = context$1.getItemRequiredProps;
+  var shouldUseSearch = !!searchValue;
+  var showData = React.useMemo(function () {
+    if (shouldUseSearch) {
+      return typeAssertion.isArrayNonEmpty(stateInSearch.data) ? [stateInSearch.data] : [];
+    }
+
+    return menuList;
+  }, [shouldUseSearch, stateInSearch.data, menuList]);
   React.useEffect(function () {
-    // 关闭展示时，重置搜索值和展开选项
+    // 关闭展示后，重置展开要高亮的选项
     if (!menuVisible) {
       reset();
     }
-  }, [menuVisible, reset]);
-  var openMenu = React.useCallback(function () {
-    if (disabled) return;
-    menuVisibleAction.on();
-  }, [disabled, menuVisibleAction]);
-  var displayRender = React.useCallback(function (item) {
-    var itemPaths = index.getTopDownAncestors(item);
+  }, [menuVisible, reset]); // 下拉菜单不能合并（因为树形数据，不知道是第几级）
 
-    if (displayRenderProp) {
-      return displayRenderProp(item, itemPaths);
+  var mergedData = React.useMemo(function () {
+    if (selectedItem) {
+      var nextData = [selectedItem].concat(flattedData);
+      return lodash.uniqBy(nextData, 'id');
     }
 
-    return itemPaths.map(function (item) {
-      return item.title;
-    }).join(' / ');
-  }, [displayRenderProp]);
+    return flattedData;
+  }, [selectedItem, flattedData]);
   var cls = classname.cx(prefixCls, className, prefixCls + "--" + (menuVisible ? 'open' : 'closed'));
   return /*#__PURE__*/React__default['default'].createElement(context.CascaderProvider, {
-    value: context$1
-  }, /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
+    value: Object.assign(Object.assign({}, context$1), {
+      expandTrigger: expandTrigger,
+      titleRender: proxyTitleRender,
+      menuList: showData
+    })
+  }, /*#__PURE__*/React__default['default'].createElement(picker.Picker, Object.assign({
     ref: ref,
-    role: role,
-    className: cls
-  }, rootProps), /*#__PURE__*/React__default['default'].createElement(Input.MockInput, {
-    ref: setTargetElRef,
-    onClick: openMenu,
-    disabled: disabled,
-    clearable: clearable,
-    placeholder: placeholder,
-    value: value,
-    data: flattedData,
-    onChange: tryChangeValue,
-    // @ts-ignore
-    displayRender: displayRender,
-    suffix: /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null)
-  }), /*#__PURE__*/React__default['default'].createElement(popper.Popper, Object.assign({}, popper$1, {
-    attachEl: targetElRef,
+    className: cls,
+    overlayClassName: classname.cx(prefixCls + "__popper", overlayClassName)
+  }, rootProps, {
+    // 这种展现形式宽度是不固定的，关掉宽度匹配策略
+    overlay: Object.assign({
+      matchWidth: false
+    }, rest.overlay),
     visible: menuVisible,
-    onClose: menuVisibleAction.off
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: prefixCls + "-panel"
-  }, searchable ? /*#__PURE__*/React__default['default'].createElement(CascaderSearch, null) : null, /*#__PURE__*/React__default['default'].createElement(CascaderMenuList, null)))));
+    disabled: disabled,
+    onOpen: menuVisibleAction.on,
+    onClose: menuVisibleAction.off,
+    searchable: searchable,
+    onSearch: onSearch,
+    trigger: /*#__PURE__*/React__default['default'].createElement(input.MockInput, {
+      clearable: clearable,
+      placeholder: placeholder,
+      displayRender: displayRender,
+      suffix: menuVisible ? /*#__PURE__*/React__default['default'].createElement(icons.UpOutlined, null) : /*#__PURE__*/React__default['default'].createElement(icons.DownOutlined, null),
+      focused: menuVisible,
+      value: value[value.length - 1],
+      onChange: function onChange() {
+        tryChangeValue([]);
+      },
+      data: mergedData,
+      invalid: invalid,
+      appearance: appearance
+    })
+  }), typeAssertion.isArrayNonEmpty(showData) ? /*#__PURE__*/React__default['default'].createElement(CascaderMenuList, null) : null));
 });
 
 if (env.__DEV__) {
   Cascader.displayName = 'Cascader';
 }
 
-var searchPrefix = classname.getPrefixCls('cascader-search');
-var CascaderSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _a$prefixCls = _a.prefixCls,
-      prefixCls = _a$prefixCls === void 0 ? searchPrefix : _a$prefixCls,
-      className = _a.className,
-      rest = tslib.__rest(_a, ["prefixCls", "className"]);
-
-  var _useCascaderContext = context.useCascaderContext(),
-      isEmpty = _useCascaderContext.isEmpty,
-      emptyContent = _useCascaderContext.emptyContent,
-      getSearchInputProps = _useCascaderContext.getSearchInputProps;
-
-  return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
-    ref: ref,
-    className: classname.cx(prefixCls, className)
-  }, rest), /*#__PURE__*/React__default['default'].createElement(Input__default['default'], Object.assign({
-    appearance: "underline",
-    prefix: /*#__PURE__*/React__default['default'].createElement(icons.SearchOutlined, null)
-  }, getSearchInputProps())), isEmpty ? /*#__PURE__*/React__default['default'].createElement("span", {
-    className: prefixCls + "__empty"
-  }, emptyContent) : null);
-});
-
-if (env.__DEV__) {
-  CascaderSearch.displayName = 'CascaderSearch';
-}
-
 var menuListPrefix = classname.getPrefixCls('cascader-menu-list');
 var CascaderMenuList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _a$prefixCls2 = _a.prefixCls,
-      prefixCls = _a$prefixCls2 === void 0 ? menuListPrefix : _a$prefixCls2,
+  var _a$prefixCls = _a.prefixCls,
+      prefixCls = _a$prefixCls === void 0 ? menuListPrefix : _a$prefixCls,
       className = _a.className,
       rest = tslib.__rest(_a, ["prefixCls", "className"]);
 
-  var _useCascaderContext2 = context.useCascaderContext(),
-      flatted = _useCascaderContext2.flatted,
-      menuList = _useCascaderContext2.menuList,
-      changeOnSelect = _useCascaderContext2.changeOnSelect;
+  var _useCascaderContext = context.useCascaderContext(),
+      flatted = _useCascaderContext.flatted,
+      menuList = _useCascaderContext.menuList;
 
-  var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted", changeOnSelect && prefixCls + "--selectchange");
+  var cls = classname.cx(prefixCls, className, flatted && prefixCls + "--flatted");
   return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
     ref: ref,
     className: cls
   }, rest), menuList.map(function (menu, menuIndex) {
+    // @ts-ignore
     return typeAssertion.isArrayNonEmpty(menu) ? /*#__PURE__*/React__default['default'].createElement(CascaderMenu, {
       key: menuIndex,
       data: menu
@@ -216,31 +306,30 @@ if (env.__DEV__) {
 
 var menuPrefix = classname.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 _useCascaderContext3 = context.useCascaderContext(),
-      flatted = _useCascaderContext3.flatted,
-      disabledContext = _useCascaderContext3.disabled,
-      expandTrigger = _useCascaderContext3.expandTrigger,
-      onItemClick = _useCascaderContext3.onItemClick,
-      onItemHover = _useCascaderContext3.onItemHover,
-      titleRender = _useCascaderContext3.titleRender,
-      onLoadChildren = _useCascaderContext3.onLoadChildren,
-      getCascaderItemRequiredProps = _useCascaderContext3.getCascaderItemRequiredProps,
-      keyword = _useCascaderContext3.keyword;
+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 = context.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 = classname.cx(prefixCls, className);
   return /*#__PURE__*/React__default['default'].createElement("ul", {
     className: cls,
     role: role
   }, menu.map(function (option) {
-    var eventOption = index.getCascaderItemEventData(option, getCascaderItemRequiredProps(option));
+    var eventOption = index$1.getItemEventData(option, getItemRequiredProps(option));
     var selected = eventOption.selected,
         loading = eventOption.loading;
     var disabled = disabledContext || option.disabled;
@@ -262,7 +351,7 @@ var CascaderMenu = function CascaderMenu(_ref) {
           onItemHover(eventOption);
         }
       }
-    }, keyword ? renderHighlightTitle(keyword, eventOption, titleRender) : flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
+    }, flatted ? renderFlattedTitle(eventOption, titleRender) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderDefaultTitle(eventOption, titleRender), renderSuffix(prefixCls, option, loading, onLoadChildren))));
   }));
 };
 /**
@@ -274,29 +363,29 @@ var renderSuffix = function renderSuffix(prefixCls, item, loading, onLoadChildre
   if (loading) {
     return /*#__PURE__*/React__default['default'].createElement("span", {
       className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--loading")
-    }, index$1.defaultLoadingIcon);
+    }, index$2.defaultLoadingIcon);
   }
 
-  var canLoadChildren = index.checkCanLoadChildren(item, onLoadChildren);
+  var canLoadChildren = index$1.checkCanLoadChildren(item, onLoadChildren);
 
   if (canLoadChildren) {
     return /*#__PURE__*/React__default['default'].createElement("span", {
       className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--arrow")
-    }, index$1.defaultSuffixIcon);
+    }, index$2.defaultSuffixIcon);
   }
 
   return /*#__PURE__*/React__default['default'].createElement("span", {
     className: classname.cx(prefixCls + "-switcher", prefixCls + "-switcher--noop")
-  }, index$1.defaultLeafIcon);
+  }, index$2.defaultLeafIcon);
 };
 
 var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
   // 如果 titleRender 返回 `true`，则使用默认 title
-  var title = titleRender ? titleRender(option, true) : true;
+  var title = titleRender ? titleRender(option) : true;
   if (title !== true) return title;
   return /*#__PURE__*/React__default['default'].createElement("span", {
     className: "title__text title__text--cols"
-  }, index.getTopDownAncestors(option).map(function (item) {
+  }, treeUtils.getTopDownAncestors(option).map(function (item) {
     return /*#__PURE__*/React__default['default'].createElement("span", {
       key: item.id,
       className: "title__text--col"
@@ -306,7 +395,7 @@ var renderFlattedTitle = function renderFlattedTitle(option, titleRender) {
 
 var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
   // 如果 titleRender 返回 `true`，则使用默认 title
-  var title = titleRender ? titleRender(option, false) : true;
+  var title = titleRender ? titleRender(option) : true;
   if (title !== true) return title;
   return /*#__PURE__*/React__default['default'].createElement("span", {
     className: "title__text"
@@ -315,7 +404,7 @@ var renderDefaultTitle = function renderDefaultTitle(option, titleRender) {
 
 var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleRender) {
   // 如果 titleRender 返回 `true`，则使用默认 title
-  var title = titleRender ? titleRender(option, true) : true;
+  var title = titleRender ? titleRender(option, keyword) : true;
   if (title !== true) return title;
 
   if (typeof option.title !== 'string') {
@@ -352,5 +441,4 @@ var renderHighlightTitle = function renderHighlightTitle(keyword, option, titleR
 exports.Cascader = Cascader;
 exports.CascaderMenu = CascaderMenu;
 exports.CascaderMenuList = CascaderMenuList;
-exports.CascaderSearch = CascaderSearch;
 //# sourceMappingURL=Cascader.js.map