@hi-ui/menu 5.0.0-canary.2 → 5.0.0-canary.21

package/lib/cjs/MenuItem.js

@@ -69,16 +69,20 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     clickSubMenu = _useContext.clickSubMenu,
     closeAllPopper = _useContext.closeAllPopper,
     activeParents = _useContext.activeParents,
-    overlayClassName = _useContext.overlayClassName;
+    overlayClassName = _useContext.overlayClassName,
+    showTitleOnMini = _useContext.showTitleOnMini,
+    semanticClassNames = _useContext.semanticClassNames,
+    semanticStyles = _useContext.semanticStyles;
   var _parentIds = (parentIds || []).concat(id);
   var hasChildren = typeAssertion.isArrayNonEmpty(children);
   var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", {
     ref: mergedRef,
-    className: classname.cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className),
-    style: hidden ? hiddenStyle : undefined
+    className: classname.cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.item),
+    style: Object.assign(Object.assign({}, hidden ? hiddenStyle : undefined), semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.item)
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2)),
+    className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2), semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemInner),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemInner,
     onClick: function onClick() {
       if (typeAssertion.isArrayNonEmpty(children)) {
         !disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
@@ -92,36 +96,53 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
     prefixCls: prefixCls + "-item",
     depth: level - 1
-  }) : null, icon ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: prefixCls + "-item__icon"
-  }, icon) : null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: prefixCls + "-item__content"
+  }) : null, icon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "-item__icon", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemIcon),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemIcon
+  }, icon)) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "-item__content", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemContent),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemContent
   }, typeAssertion.isFunction(render) ? render(Object.assign(Object.assign({}, raw), {
     id: id,
     icon: icon,
     title: title
   }), level) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item",
-    direction: "up"
+    direction: "up",
+    className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
   })) : ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item",
-    direction: "down"
+    direction: "down",
+    className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
   }))), hasChildren && mini && level > 1 && placement === 'vertical' ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
-    prefixCls: prefixCls + "-item"
+    prefixCls: prefixCls + "-item",
+    className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
   })) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
-    prefixCls: prefixCls + "-item"
+    prefixCls: prefixCls + "-item",
+    className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
   })) : null, hasChildren && placement === 'horizontal' && level > 1 ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
-    prefixCls: prefixCls + "-item"
+    prefixCls: prefixCls + "-item",
+    className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
   })) : null, hasChildren && placement === 'horizontal' && level === 1 && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item",
-    direction: "up"
+    direction: "up",
+    className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
   })) : ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
     prefixCls: prefixCls + "-item",
-    direction: "down"
+    direction: "down",
+    className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
   })))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? ( /*#__PURE__*/React__default["default"].createElement(Expander.Expander, {
     visible: !disabled && !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-submenu"
+    className: classname.cx(prefixCls + "-submenu", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.submenu),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.submenu
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -135,13 +156,14 @@ var MenuItem = /*#__PURE__*/React.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);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -155,14 +177,15 @@ var MenuItem = /*#__PURE__*/React.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() {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -182,7 +205,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -203,7 +227,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -253,7 +278,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -274,7 +300,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
   }, children.map(function (child) {
     return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -321,7 +348,9 @@ if (env.__DEV__) {
 }
 var Arrow = function Arrow(_ref2) {
   var prefixCls = _ref2.prefixCls,
-    direction = _ref2.direction;
+    direction = _ref2.direction,
+    className = _ref2.className,
+    style = _ref2.style;
   var icon;
   switch (direction) {
     case 'up':
@@ -334,7 +363,8 @@ var Arrow = function Arrow(_ref2) {
       icon = /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null);
   }
   return /*#__PURE__*/React__default["default"].createElement("span", {
-    className: prefixCls + "__arrow"
+    className: classname.cx(prefixCls + "__arrow", className),
+    style: style
   }, icon);
 };
 /**

package/lib/cjs/MenuSearch.js

@@ -0,0 +1,365 @@
+/** @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.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var core = require('@hi-ui/core');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
+var env = require('@hi-ui/env');
+var classname = require('@hi-ui/classname');
+var icons = require('@hi-ui/icons');
+var IconButton = require('@hi-ui/icon-button');
+var Button = require('@hi-ui/button');
+var Input = require('@hi-ui/input');
+var Highlighter = require('@hi-ui/highlighter');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var useToggle = require('@hi-ui/use-toggle');
+var EllipsisTooltip = require('@hi-ui/ellipsis-tooltip');
+var EnterIcon = require('./EnterIcon.js');
+var util = require('./util.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var IconButton__default = /*#__PURE__*/_interopDefaultCompat(IconButton);
+var Button__default = /*#__PURE__*/_interopDefaultCompat(Button);
+var Input__default = /*#__PURE__*/_interopDefaultCompat(Input);
+var Highlighter__default = /*#__PURE__*/_interopDefaultCompat(Highlighter);
+var EllipsisTooltip__default = /*#__PURE__*/_interopDefaultCompat(EllipsisTooltip);
+var _role = 'menu-search';
+var _prefix = classname.getPrefixCls(_role);
+var MenuSearch = /*#__PURE__*/React.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,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
+    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 = tslib.__rest(_a, ["innerRef", "prefixCls", "className", "classNames", "styles", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
+  var i18n = core.useLocaleContext();
+  var _useGlobalContext = core.useGlobalContext(),
+    menuSearchConfig = _useGlobalContext.menuSearch;
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.classNames, classNamesProp],
+      stylesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          placeholder: placeholder,
+          width: width,
+          visible: visibleProp,
+          defaultValue: defaultValue,
+          value: valueProp
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
+  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
+      visible: visibleProp
+    }),
+    visible = _useUncontrolledToggl[0],
+    visibleAction = _useUncontrolledToggl[1];
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
+    value = _useUncontrolledState[0],
+    tryChangeValue = _useUncontrolledState[1];
+  var _useState = React.useState(-1),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  var listRef = React.useRef(null);
+  React.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__default["default"].useMemo(function () {
+    if (!data || !value) return [];
+    // 使用新的搜索算法
+    var searchResults = util.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 = React.useCallback(function (value) {
+    tryChangeValue(value);
+  }, [tryChangeValue]);
+  var handleSelect = React.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 = React.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 = React.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 = React.useCallback(function () {
+    tryChangeValue('');
+    setCurrentIndex(-1);
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+  }, [onClear, tryChangeValue]);
+  var handleClose = React.useCallback(function () {
+    visibleAction.off();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose, visibleAction]);
+  var handleEscape = React.useCallback(function () {
+    handleClose();
+    onEsc === null || onEsc === void 0 ? void 0 : onEsc();
+  }, [handleClose, onEsc]);
+  var handleKeyDown = React.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 = React.useState(null),
+    inputRef = _useState2[0],
+    setInputRef = _useState2[1];
+  React.useEffect(function () {
+    if (!value || !inputRef) {
+      visibleAction.off();
+    } else {
+      visibleAction.on();
+    }
+  }, [inputRef, value, visibleAction]);
+  React.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 = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: cls,
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
+  }, /*#__PURE__*/React__default["default"].createElement(MenuSearchInput, {
+    width: width,
+    prefixCls: prefixCls,
+    placeholder: placeholder,
+    value: value,
+    onChange: handleChange,
+    onClear: handleClear,
+    onClose: handleClose,
+    onKeyDown: handleKeyDown,
+    inputRef: setInputRef,
+    semanticClassNames: classNames,
+    semanticStyles: styles
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.content),
+    style: styles === null || styles === void 0 ? void 0 : styles.content
+  }, (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 ? ( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__header", classNames === null || classNames === void 0 ? void 0 : classNames.header),
+    style: styles === null || styles === void 0 ? void 0 : styles.header
+  }, /*#__PURE__*/React__default["default"].createElement(Highlighter__default["default"], {
+    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__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__list", classNames === null || classNames === void 0 ? void 0 : classNames.list),
+    style: styles === null || styles === void 0 ? void 0 : styles.list,
+    ref: listRef,
+    tabIndex: -1,
+    onKeyDown: handleKeyDown
+  }, resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.map(function (item, index) {
+    var _cx3;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: item.id,
+      className: classname.cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3), classNames === null || classNames === void 0 ? void 0 : classNames.listItem),
+      style: styles === null || styles === void 0 ? void 0 : styles.listItem,
+      onClick: function onClick() {
+        return handleSelect(item.id, item, index);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "__list-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.listItemTitle),
+      style: styles === null || styles === void 0 ? void 0 : styles.listItemTitle
+    }, /*#__PURE__*/React__default["default"].createElement(EllipsisTooltip__default["default"], {
+      tooltipProps: {
+        style: {
+          maxWidth: 320
+        }
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Highlighter__default["default"], {
+      keyword: value
+    }, item.pathTitles.join('/')))));
+  })))) : ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__empty", classNames === null || classNames === void 0 ? void 0 : classNames.empty),
+    style: styles === null || styles === void 0 ? void 0 : styles.empty
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, i18n.menuSearch.searchEmptyResult)))), (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 && ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
+    style: styles === null || styles === void 0 ? void 0 : styles.footer
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItem
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
+  }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowUpOutlined, null), /*#__PURE__*/React__default["default"].createElement(icons.ArrowDownOutlined, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
+  }, i18n.menuSearch.moveCursor)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItem
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
+  }, /*#__PURE__*/React__default["default"].createElement(EnterIcon.EnterIcon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
+  }, i18n.menuSearch.confirmSelect)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItem
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
+  }, "esc"), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
+  }, i18n.menuSearch.hideWindow)))));
+});
+if (env.__DEV__) {
+  MenuSearch.displayName = 'MenuSearch';
+}
+var MenuSearchInput = /*#__PURE__*/React.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,
+    semanticClassNames = _a.semanticClassNames,
+    semanticStyles = _a.semanticStyles,
+    rest = tslib.__rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef", "semanticClassNames", "semanticStyles"]);
+  var i18n = core.useLocaleContext();
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: ref,
+    className: classname.cx(prefixCls + "__input-wrapper", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputWrapper),
+    style: Object.assign({
+      width: width
+    }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputWrapper)
+  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], Object.assign({
+    ref: inputRef,
+    className: classname.cx(prefixCls + "__input", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.input),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.input,
+    classNames: {
+      prefix: prefixCls + "__input-prefix"
+    },
+    appearance: "unset",
+    placeholder: placeholder,
+    prefix: /*#__PURE__*/React__default["default"].createElement(icons.SearchOutlined, null),
+    suffix: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+      className: classname.cx(prefixCls + "__input-clear", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputClear),
+      style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputClear,
+      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__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "__close", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.close),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.close
+  }, /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], {
+    icon: /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null),
+    effect: true,
+    onClick: onClose
+  })));
+});
+if (env.__DEV__) {
+  MenuSearchInput.displayName = 'MenuSearchInput';
+}
+exports.MenuSearch = MenuSearch;
+exports.MenuSearchInput = MenuSearchInput;