@hi-ui/menu 4.3.2 → 5.0.0-alpha.0

package/lib/cjs/util.js

@@ -13,7 +13,39 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 var treeUtils = require('@hi-ui/tree-utils');
-
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
 // 寻找某一节点的父节点
 var getParentId = function getParentId(id, data) {
   var parentId = '';
@@ -90,8 +122,70 @@ var transformTreeData = function transformTreeData(data, fieldNames) {
   };
   return data.map(traverseTreeNode);
 };
+/**
+ * 增强版搜索函数，返回包含路径信息的结果
+ */
+function searchMenuWithPath(data, keyword) {
+  if (!keyword || !data || data.length === 0) {
+    return [];
+  }
+  var results = [];
+  var processedIds = new Set();
+  function searchInTree(nodes, currentPath) {
+    if (currentPath === void 0) {
+      currentPath = [];
+    }
+    var _a;
+    for (var _iterator3 = _createForOfIteratorHelperLoose(nodes), _step3; !(_step3 = _iterator3()).done;) {
+      var node = _step3.value;
+      var nodePath = [].concat(currentPath, [node]);
+      var isMatched = (_a = node.title) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().includes(keyword.toLowerCase());
+      if (isMatched) {
+        if (!node.children || node.children.length === 0) {
+          // 叶子节点
+          if (!processedIds.has(node.id)) {
+            results.push({
+              node: node,
+              path: nodePath,
+              level: nodePath.length - 1
+            });
+            processedIds.add(node.id);
+          }
+        } else {
+          // 父节点，添加所有子节点
+          addAllDescendantsWithPath(node.children, nodePath);
+        }
+      } else {
+        // 继续搜索子节点
+        if (node.children && node.children.length > 0) {
+          searchInTree(node.children, nodePath);
+        }
+      }
+    }
+  }
+  function addAllDescendantsWithPath(children, parentPath) {
+    for (var _iterator4 = _createForOfIteratorHelperLoose(children), _step4; !(_step4 = _iterator4()).done;) {
+      var child = _step4.value;
+      var childPath = [].concat(parentPath, [child]);
+      if (!processedIds.has(child.id)) {
+        results.push({
+          node: child,
+          path: childPath,
+          level: childPath.length - 1
+        });
+        processedIds.add(child.id);
+      }
+      if (child.children && child.children.length > 0) {
+        addAllDescendantsWithPath(child.children, childPath);
+      }
+    }
+  }
+  searchInTree(data);
+  return results;
+}
 exports.filterTreeData = filterTreeData;
 exports.getAncestorIds = getAncestorIds;
 exports.getIdsWithChildren = getIdsWithChildren;
 exports.getParentId = getParentId;
+exports.searchMenuWithPath = searchMenuWithPath;
 exports.transformTreeData = transformTreeData;

package/lib/esm/EnterIcon.js

@@ -0,0 +1,32 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#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 React from 'react';
+var EnterIcon = function EnterIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4 9L2 7L4 5",
+    stroke: "#91959e",
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10 3L10 6.25C10 6.66422 9.66423 7 9.25 7L2 7",
+    stroke: "#91959e",
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+export { EnterIcon };

package/lib/esm/GroupMenu.js

@@ -0,0 +1,83 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#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, useCallback } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import Scrollbar from '@hi-ui/scrollbar';
+var _role = 'group-menu';
+var GROUP_MENU_PREFIX = getPrefixCls(_role);
+/**
+ * 分组菜单
+ */
+var GroupMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? GROUP_MENU_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? _role : _a$role,
+    className = _a.className,
+    _a$data = _a.data,
+    data = _a$data === void 0 ? [] : _a$data,
+    onClick = _a.onClick,
+    _a$defaultActiveId = _a.defaultActiveId,
+    defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
+    activeIdProp = _a.activeId,
+    titleRender = _a.titleRender,
+    rest = __rest(_a, ["prefixCls", "role", "className", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
+  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp),
+    activeId = _useUncontrolledState[0],
+    tryChangeActiveId = _useUncontrolledState[1];
+  var handleClick = useLatestCallback(function (evt, id, item) {
+    tryChangeActiveId(id);
+    onClick === null || onClick === void 0 ? void 0 : onClick(evt, id, item);
+  });
+  var renderItem = useCallback(function (data) {
+    return data.map(function (item) {
+      var _cx;
+      var id = item.id,
+        icon = item.icon,
+        title = item.title,
+        _item$children = item.children,
+        children = _item$children === void 0 ? [] : _item$children,
+        disabled = item.disabled;
+      var isParent = isArrayNonEmpty(children);
+      return /*#__PURE__*/React.createElement("div", {
+        key: id,
+        className: cx(isParent ? prefixCls + "-parent-item" : prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--empty"] = !title && !icon, _cx)),
+        onClick: function onClick(evt) {
+          if (disabled || isParent) return;
+          evt.stopPropagation();
+          handleClick(evt, id, item);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx(prefixCls + "-item__content")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx(prefixCls + "-item__icon")
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: cx(prefixCls + "-item__title")
+      }, typeof titleRender === 'function' ? titleRender(item) : title)), isParent && renderItem(children));
+    });
+  }, [activeId, handleClick, prefixCls, titleRender]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: cx("" + prefixCls, className),
+    ref: ref,
+    role: role
+  }, rest), /*#__PURE__*/React.createElement(Scrollbar, {
+    onlyScrollVisible: true,
+    axes: "y"
+  }, renderItem(data)));
+});
+if (__DEV__) {
+  GroupMenu.displayName = 'GroupMenu';
+}
+export { GroupMenu };

package/lib/esm/Menu.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useState, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
+import React, { forwardRef, useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
 import { __DEV__ } from '@hi-ui/env';
@@ -70,7 +70,9 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClick = _a.onClick,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'lg' : _a$size,
-    rest = __rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
+    _a$showTitleOnMini = _a.showTitleOnMini,
+    showTitleOnMini = _a$showTitleOnMini === void 0 ? false : _a$showTitleOnMini,
+    rest = __rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size", "showTitleOnMini"]);
   var i18n = useLocaleContext();
   var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
     activeId = _useUncontrolledState[0],
@@ -93,6 +95,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, expandedIdsProp, onExpand),
     expandedIds = _useUncontrolledState2[0],
     updateExpandedIds = _useUncontrolledState2[1];
+  var expandedIdsRef = useRef(expandedIds);
   var clickMenu = useCallback(function (id, raw) {
     updateActiveId(id, raw);
   }, [updateActiveId]);
@@ -101,14 +104,17 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       return expandedId !== id;
     }) : expandedIds.concat(id);
     updateExpandedIds(nextExpandedIds);
+    expandedIdsRef.current = nextExpandedIds;
     if (onClickSubMenu) {
       onClickSubMenu(id, nextExpandedIds);
     }
   }, [onClickSubMenu, expandedIds, updateExpandedIds]);
   var closePopper = useCallback(function (id) {
-    updateExpandedIds(expandedIds.filter(function (expandedId) {
+    var nextExpandedIds = expandedIds.filter(function (expandedId) {
       return expandedId !== id;
-    }));
+    });
+    updateExpandedIds(nextExpandedIds);
+    expandedIdsRef.current = nextExpandedIds;
   }, [expandedIds, updateExpandedIds]);
   var closeAllPopper = useCallback(function () {
     updateExpandedIds([]);
@@ -141,6 +147,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       setContainerWidth(width);
     }
   });
+  useEffect(function () {
+    if (mini) {
+      updateExpandedIds([]);
+    } else {
+      updateExpandedIds(expandedIdsRef.current);
+    }
+  }, [mini, updateExpandedIds]);
   var _useState4 = useState(0),
     tagMaxCount = _useState4[0],
     setTagMaxCount = _useState4[1];
@@ -155,7 +168,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [transformedData, tagMaxCount]);
   var getTagWidth = useCallback(function (index) {
     if (!containerElement) return MIN_WIDTH;
-    var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
+    var elements = containerElement.getElementsByClassName('hi-v5-menu-item');
     var element = elements && elements[index];
     if (!element) return MIN_WIDTH;
     return element.getBoundingClientRect().width;
@@ -191,9 +204,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     var collapseNode = canToggle ? ( /*#__PURE__*/React.createElement("div", {
       className: cx(prefixCls + "__toggle"),
       onClick: function onClick() {
-        miniToggleAction.not();
-        // 关闭所有展开的子菜单，防止切换到 mini 模式后，子菜单还是展开的
-        updateExpandedIds([]);
+        return miniToggleAction.not();
       }
     }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null))) : null;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isFunction(footerRender) ? footerRender({
@@ -203,12 +214,12 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   };
   var renderItem = useCallback(function (menuItem, level) {
     // 显示缩略内容
-    if (showMini && level === 1) {
+    if (showMini && level === 1 && !showTitleOnMini) {
       return renderMenuItemMini(menuItem);
     }
     return isFunction(render) ? render(menuItem, level) : menuItem.title;
-  }, [render, showMini]);
-  var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
+  }, [render, showMini, showTitleOnMini]);
+  var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: useMergeRefs(ref, setContainerElement),
     role: role,
@@ -219,6 +230,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       expandedType: expandedType,
       showAllSubMenus: showAllSubMenus,
       mini: mini,
+      showTitleOnMini: showTitleOnMini,
       clickMenu: clickMenu,
       clickSubMenu: clickSubMenu,
       closePopper: closePopper,

package/lib/esm/MenuItem.js

@@ -56,7 +56,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     clickSubMenu = _useContext.clickSubMenu,
     closeAllPopper = _useContext.closeAllPopper,
     activeParents = _useContext.activeParents,
-    overlayClassName = _useContext.overlayClassName;
+    overlayClassName = _useContext.overlayClassName,
+    showTitleOnMini = _useContext.showTitleOnMini;
   var _parentIds = (parentIds || []).concat(id);
   var hasChildren = isArrayNonEmpty(children);
   var mergedRef = useMergeRefs(itemRef, ref);
@@ -122,7 +123,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
-    gutterGap: 16,
+    gutterGap: showTitleOnMini ? 8 : 16,
     className: overlayClassName,
     onClose: function onClose() {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
@@ -142,7 +143,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
-    gutterGap: 16,
+    gutterGap: showTitleOnMini ? 12 : 16,
     disabledPortal: true,
     className: overlayClassName,
     onClose: function onClose() {

package/lib/esm/MenuSearch.js

@@ -0,0 +1,305 @@
+/** @LICENSE
+ * @hi-ui/menu
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#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, useState, useRef, useLayoutEffect, useCallback, useEffect, useImperativeHandle } from 'react';
+import { useLocaleContext } from '@hi-ui/core';
+import { __DEV__ } from '@hi-ui/env';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { ArrowUpOutlined, ArrowDownOutlined, SearchOutlined, CloseOutlined } from '@hi-ui/icons';
+import IconButton from '@hi-ui/icon-button';
+import './button/lib/esm/styles/index.scss.js';
+import { Button } from './button/lib/esm/Button.js';
+import './button/lib/esm/ButtonGroup.js';
+import Input from '@hi-ui/input';
+import Highlighter from '@hi-ui/highlighter';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { useUncontrolledToggle } from '@hi-ui/use-toggle';
+import EllipsisTooltip from '@hi-ui/ellipsis-tooltip';
+import { EnterIcon } from './EnterIcon.js';
+import { searchMenuWithPath } from './util.js';
+var _role = 'menu-search';
+var _prefix = getPrefixCls(_role);
+var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _cx, _cx2;
+  var _b, _c;
+  var innerRef = _a.innerRef,
+    _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
+    className = _a.className,
+    placeholder = _a.placeholder,
+    width = _a.width,
+    style = _a.style,
+    visibleProp = _a.visible,
+    data = _a.data,
+    _a$defaultValue = _a.defaultValue,
+    defaultValue = _a$defaultValue === void 0 ? '' : _a$defaultValue,
+    valueProp = _a.value,
+    onChange = _a.onChange,
+    onSelect = _a.onSelect,
+    onClear = _a.onClear,
+    onClose = _a.onClose,
+    onEsc = _a.onEsc;
+  __rest(_a, ["innerRef", "prefixCls", "className", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
+  var i18n = useLocaleContext();
+  var _useUncontrolledToggl = useUncontrolledToggle({
+      visible: visibleProp
+    }),
+    visible = _useUncontrolledToggl[0],
+    visibleAction = _useUncontrolledToggl[1];
+  var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
+    value = _useUncontrolledState[0],
+    tryChangeValue = _useUncontrolledState[1];
+  var _useState = useState(-1),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  var listRef = useRef(null);
+  useLayoutEffect(function () {
+    if (currentIndex === -1 || !listRef.current) return;
+    var listContainer = listRef.current;
+    var selectedItem = listContainer.children[currentIndex];
+    if (!selectedItem) return;
+    var containerScrollTop = listContainer.scrollTop;
+    var containerHeight = listContainer.clientHeight;
+    var itemTop = selectedItem.offsetTop;
+    var itemHeight = selectedItem.offsetHeight;
+    // 计算元素的可见范围
+    var itemBottom = itemTop + itemHeight;
+    var visibleTop = containerScrollTop;
+    var visibleBottom = containerScrollTop + containerHeight;
+    // 判断是否需要滚动
+    var isItemAboveViewport = itemTop < visibleTop;
+    var isItemBelowViewport = itemBottom > visibleBottom;
+    if (isItemAboveViewport) {
+      // 如果元素在可视区域上方，滚动到元素顶部
+      listContainer.scrollTop = itemTop;
+    } else if (isItemBelowViewport) {
+      // 如果元素在可视区域下方，滚动到元素底部刚好可见
+      listContainer.scrollTop = itemBottom - containerHeight;
+    }
+  }, [currentIndex]);
+  var resultMemo = React.useMemo(function () {
+    if (!data || !value) return [];
+    // 使用新的搜索算法
+    var searchResults = searchMenuWithPath(data, value);
+    return searchResults.map(function (result) {
+      return Object.assign(Object.assign({}, result.node), {
+        level: result.level,
+        path: result.path,
+        // 添加路径信息用于显示
+        pathTitles: result.path.map(function (p) {
+          var _a;
+          return (_a = p.title) === null || _a === void 0 ? void 0 : _a.toString();
+        }).filter(Boolean)
+      });
+    });
+  }, [data, value]);
+  var handleChange = useCallback(function (value) {
+    tryChangeValue(value);
+  }, [tryChangeValue]);
+  var handleSelect = useCallback(function (id, item, index) {
+    var _a;
+    setCurrentIndex(index);
+    visibleAction.off();
+    // 让列表容器获取焦点，确保键盘导航可用
+    (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(id, item);
+  }, [onSelect, visibleAction]);
+  var handleMove = useCallback(function (direction) {
+    if (!resultMemo) return;
+    setCurrentIndex(function (prev) {
+      if (direction === 'up') {
+        return prev - 1 < 0 ? (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) - 1 : prev - 1;
+      } else {
+        return prev + 1 > (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) - 1 ? 0 : prev + 1;
+      }
+    });
+  }, [resultMemo]);
+  var handleEnter = useCallback(function () {
+    if (!resultMemo) return;
+    if (currentIndex === -1) {
+      setCurrentIndex(0);
+    }
+    visibleAction.off();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(resultMemo[currentIndex].id, resultMemo[currentIndex]);
+  }, [resultMemo, currentIndex, onSelect, visibleAction]);
+  var handleClear = useCallback(function () {
+    tryChangeValue('');
+    setCurrentIndex(-1);
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+  }, [onClear, tryChangeValue]);
+  var handleClose = useCallback(function () {
+    visibleAction.off();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose, visibleAction]);
+  var handleEscape = useCallback(function () {
+    handleClose();
+    onEsc === null || onEsc === void 0 ? void 0 : onEsc();
+  }, [handleClose, onEsc]);
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'ArrowUp') {
+      handleMove('up');
+    }
+    if (e.key === 'ArrowDown') {
+      handleMove('down');
+    }
+    if (e.key === 'Enter') {
+      handleEnter();
+    }
+    if (e.key === 'Escape') {
+      handleEscape();
+    }
+  }, [handleEnter, handleMove, handleEscape]);
+  var _useState2 = useState(null),
+    inputRef = _useState2[0],
+    setInputRef = _useState2[1];
+  useEffect(function () {
+    if (!value || !inputRef) {
+      visibleAction.off();
+    } else {
+      visibleAction.on();
+    }
+  }, [inputRef, value, visibleAction]);
+  useImperativeHandle(innerRef, function () {
+    return {
+      show: function show() {
+        visibleAction.on();
+      },
+      hide: function hide() {
+        visibleAction.off();
+      },
+      focus: function focus() {
+        inputRef === null || inputRef === void 0 ? void 0 : inputRef.focus();
+      }
+    };
+  });
+  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    style: style
+  }, /*#__PURE__*/React.createElement(MenuSearchInput, {
+    width: width,
+    prefixCls: prefixCls,
+    placeholder: placeholder,
+    value: value,
+    onChange: handleChange,
+    onClear: handleClear,
+    onClose: handleClose,
+    onKeyDown: handleKeyDown,
+    inputRef: setInputRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2))
+  }, (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__header"
+  }, /*#__PURE__*/React.createElement(Highlighter, {
+    keyword: String((_b = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _b !== void 0 ? _b : 0)
+  }, i18n.get('menuSearch.searchResult', {
+    count: (_c = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _c !== void 0 ? _c : 0,
+    keyword: value
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__list",
+    ref: listRef,
+    tabIndex: -1,
+    onKeyDown: handleKeyDown
+  }, resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.map(function (item, index) {
+    var _cx3;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      className: cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3)),
+      onClick: function onClick() {
+        return handleSelect(item.id, item, index);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "__list-item__title"
+    }, /*#__PURE__*/React.createElement(EllipsisTooltip, {
+      tooltipProps: {
+        style: {
+          maxWidth: 320
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Highlighter, {
+      keyword: value
+    }, item.pathTitles.join('/')))));
+  })))) : ( /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__empty"
+  }, /*#__PURE__*/React.createElement("div", null, i18n.menuSearch.searchEmptyResult)))), (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 && ( /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer-item__icon"
+  }, /*#__PURE__*/React.createElement(ArrowUpOutlined, null), /*#__PURE__*/React.createElement(ArrowDownOutlined, null)), /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__footer-item__text"
+  }, i18n.menuSearch.moveCursor)), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer-item__icon"
+  }, /*#__PURE__*/React.createElement(EnterIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__footer-item__text"
+  }, i18n.menuSearch.confirmSelect)), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer-item__icon"
+  }, "esc"), /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__footer-item__text"
+  }, i18n.menuSearch.hideWindow)))));
+});
+if (__DEV__) {
+  MenuSearch.displayName = 'MenuSearch';
+}
+var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var prefixCls = _a.prefixCls,
+    placeholder = _a.placeholder,
+    width = _a.width,
+    value = _a.value,
+    _onChange = _a.onChange,
+    onClear = _a.onClear,
+    onClose = _a.onClose,
+    onKeyDown = _a.onKeyDown,
+    inputRef = _a.inputRef,
+    rest = __rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef"]);
+  var i18n = useLocaleContext();
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: prefixCls + "__input-wrapper",
+    style: {
+      width: width
+    }
+  }, /*#__PURE__*/React.createElement(Input, Object.assign({
+    ref: inputRef,
+    className: prefixCls + "__input",
+    classNames: {
+      prefix: prefixCls + "__input-prefix"
+    },
+    appearance: "unset",
+    placeholder: placeholder,
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+    suffix: /*#__PURE__*/React.createElement(Button, {
+      className: prefixCls + "__input-clear",
+      appearance: "link",
+      size: "xs",
+      onClick: onClear
+    }, i18n.menuSearch.clear),
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+    },
+    onKeyDown: onKeyDown
+  }, rest)), /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__close"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
+    effect: true,
+    onClick: onClose
+  })));
+});
+if (__DEV__) {
+  MenuSearchInput.displayName = 'MenuSearchInput';
+}
+export { MenuSearch, MenuSearchInput };