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

package/lib/cjs/SideMenu.js

@@ -0,0 +1,202 @@
+/** @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 classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+var core = require('@hi-ui/core');
+var useMergeSemantic = require('@hi-ui/use-merge-semantic');
+var Tooltip = require('@hi-ui/tooltip');
+var useLatest = require('@hi-ui/use-latest');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var Scrollbar = require('@hi-ui/scrollbar');
+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 Tooltip__default = /*#__PURE__*/_interopDefaultCompat(Tooltip);
+var Scrollbar__default = /*#__PURE__*/_interopDefaultCompat(Scrollbar);
+var SIDE_MENU_PREFIX = classname.getPrefixCls('side-menu');
+/**
+ * 侧边菜单组件
+ */
+var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _cx;
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? SIDE_MENU_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'side-menu' : _a$role,
+    className = _a.className,
+    style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
+    _a$defaultActiveId = _a.defaultActiveId,
+    defaultActiveId = _a$defaultActiveId === void 0 ? null : _a$defaultActiveId,
+    activeIdProp = _a.activeId,
+    selectedIdProp = _a.selectedId,
+    _a$data = _a.data,
+    data = _a$data === void 0 ? [] : _a$data,
+    mini = _a.mini,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    onMouseLeave = _a.onMouseLeave,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
+  var _useGlobalContext = core.useGlobalContext(),
+    sideMenuConfig = _useGlobalContext.sideMenu;
+  var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
+      classNamesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.classNames, classNamesProp],
+      stylesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          mini: mini,
+          defaultActiveId: defaultActiveId,
+          activeId: activeIdProp,
+          selectedId: selectedIdProp
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
+  var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp),
+    activeId = _useUncontrolledState[0],
+    tryChangeActiveId = _useUncontrolledState[1];
+  var handleClick = useLatest.useLatestCallback(function (event, id, item) {
+    tryChangeActiveId(id);
+    onClick === null || onClick === void 0 ? void 0 : onClick(event, id, item);
+  });
+  var handleMouseEnter = useLatest.useLatestCallback(function (event, id, item) {
+    event.stopPropagation();
+    onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event, id, item);
+  });
+  var handleMouseLeave = useLatest.useLatestCallback(function (event, id, item) {
+    event.stopPropagation();
+    onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event, id, item);
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls,
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], {
+    onlyScrollVisible: true,
+    axes: "y",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
+    style: styles === null || styles === void 0 ? void 0 : styles.wrapper
+  }, data.map(function (item) {
+    var _cx2;
+    var id = item.id,
+      title = item.title,
+      icon = item.icon;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: id,
+      className: classname.cx(prefixCls + "-item-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.itemWrapper),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemWrapper,
+      onClick: function onClick(evt) {
+        return handleClick(evt, id, item);
+      },
+      onMouseEnter: function onMouseEnter(evt) {
+        var currentTarget = evt.currentTarget;
+        var titleElement = currentTarget.querySelector("." + prefixCls + "-item__title");
+        if (!titleElement) {
+          handleMouseEnter(evt, id, item);
+          return;
+        }
+        var scrollWidth = titleElement.scrollWidth,
+          clientWidth = titleElement.clientWidth,
+          scrollHeight = titleElement.scrollHeight,
+          clientHeight = titleElement.clientHeight;
+        // 单行溢出：scrollWidth > clientWidth；多行（如 mini 2 行）溢出：scrollHeight > clientHeight
+        var isOverflow = scrollWidth > clientWidth || scrollHeight > clientHeight;
+        if (isOverflow) {
+          Tooltip__default["default"].open(currentTarget, {
+            key: "side-menu-tooltip-" + id,
+            title: title,
+            placement: 'right',
+            zIndex: 2001
+          });
+        }
+        handleMouseEnter(evt, id, item);
+      },
+      onMouseLeave: function onMouseLeave(evt) {
+        Tooltip__default["default"].close("side-menu-tooltip-" + id);
+        handleMouseLeave(evt, id, item);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.item),
+      style: styles === null || styles === void 0 ? void 0 : styles.item
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
+    }, icon), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemTitle,
+      ref: function ref(el) {
+        if (el) {
+          if (mini) {
+            if (el.clientHeight > 28) {
+              el.style.marginBlockEnd = '-28px';
+            } else {
+              el.style.marginBlockEnd = '';
+            }
+          } else {
+            el.style.marginBlockEnd = '';
+          }
+        }
+      }
+    }, title)));
+  })));
+});
+if (env.__DEV__) {
+  SideMenu.displayName = 'SideMenu';
+}
+var useSideMenuCascade = function useSideMenuCascade(_ref) {
+  var data = _ref.data,
+    selectId = _ref.selectId,
+    activeId = _ref.activeId;
+  var activeParents = React__default["default"].useMemo(function () {
+    return util.getAncestorIds(activeId, data);
+  }, [activeId, data]);
+  var selectParents = React__default["default"].useMemo(function () {
+    return util.getAncestorIds(selectId, data);
+  }, [selectId, data]);
+  var selectParentId = React__default["default"].useMemo(function () {
+    var _a;
+    return (_a = selectParents[selectParents.length - 1]) !== null && _a !== void 0 ? _a : selectId;
+  }, [selectId, selectParents]);
+  var activeParentId = React__default["default"].useMemo(function () {
+    var _a;
+    return (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
+  }, [activeId, activeParents]);
+  var submenuData = React__default["default"].useMemo(function () {
+    var _a;
+    var parentId = selectParentId || activeParentId;
+    return ((_a = data.find(function (item) {
+      return item.id === parentId;
+    })) === null || _a === void 0 ? void 0 : _a.children) || [];
+  }, [selectParentId, activeParentId, data]);
+  return {
+    submenuData: submenuData,
+    selectParentId: selectParentId,
+    activeParentId: activeParentId
+  };
+};
+exports.SideMenu = SideMenu;
+exports.useSideMenuCascade = useSideMenuCascade;

package/lib/cjs/index.js

@@ -15,10 +15,18 @@ Object.defineProperty(exports, '__esModule', {
 require('./styles/index.scss.js');
 var Menu = require('./Menu.js');
 var Sidebar = require('./Sidebar.js');
+var MenuSearch = require('./MenuSearch.js');
+var GroupMenu = require('./GroupMenu.js');
+var SideMenu = require('./SideMenu.js');
 var util = require('./util.js');
 exports.Menu = Menu.Menu;
 exports["default"] = Menu.Menu;
 exports.Sidebar = Sidebar.Sidebar;
+exports.MenuSearch = MenuSearch.MenuSearch;
+exports.MenuSearchInput = MenuSearch.MenuSearchInput;
+exports.GroupMenu = GroupMenu.GroupMenu;
+exports.SideMenu = SideMenu.SideMenu;
+exports.useSideMenuCascade = SideMenu.useSideMenuCascade;
 exports.filterTreeData = util.filterTreeData;
 exports.getAncestorIds = util.getAncestorIds;
 exports.getParentId = util.getParentId;

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

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v5-menu-fat-menu {background-color: var(--hi-v5-color-static-white, #fff);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v5-color-gray-700, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v5-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v5-spacing-18, 36px);}.hi-v5-menu-fat-menu .hi-v5-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-6, 12px);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-menu-fat-menu .hi-v5-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-menu-fat-menu .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-fat-menu .hi-v5-menu-item:not(.hi-v5-menu-item--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-fat-menu .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v5-menu-fat-menu ul li {list-style-type: none;}.hi-v5-menu-popmenu {background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-700, #1a1d26);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu-popmenu .hi-v5-menu-item {height: 40px;margin: 0;}.hi-v5-menu-popmenu .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu-popmenu .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu {background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu ul {margin: 0;padding: 0;}.hi-v5-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-500, #91959e);-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__arrow {color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu__wrapper {padding: 0;margin: 0;}.hi-v5-menu--horizontal {width: 100%;overflow: hidden;}.hi-v5-menu--horizontal .hi-v5-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu--horizontal .hi-v5-menu-item {padding: 0 var(--hi-v5-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu--horizontal .hi-v5-menu-item__arrow {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--horizontal .hi-v5-menu-item:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item:hover .hi-v5-menu-item__inner {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__inner {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent;}.hi-v5-menu--horizontal .hi-v5-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled:hover .hi-v5-menu-item__inner {border-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled .hi-v5-menu-item__content {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-menu--vertical .hi-v5-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-menu--vertical.hi-v5-menu--mini {width: 56px;overflow-x: hidden;}.hi-v5-menu--vertical.hi-v5-menu--popup .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical.hi-v5-menu--popup:not(.hi-v5-menu--mini) .hi-v5-menu__wrapper > .hi-v5-menu-item:last-child .hi-v5-menu-item__inner {margin-bottom: 0;}.hi-v5-menu--vertical .hi-v5-menu__toggle {width: var(--hi-v5-height-10, 40px);height: var(--hi-v5-height-10, 40px);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v5-border-radius-lg, 6px);color: var(--hi-v5-color-gray-500, #91959e);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v5-menu--vertical .hi-v5-menu__toggle:hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v5-menu--vertical .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu--vertical.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);margin-bottom: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu--vertical.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);margin-bottom: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);margin-bottom: var(--hi-v5-spacing-1, 2px);}.hi-v5-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper-showMenuArrow) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__arrow {display: none;}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper--collapsible) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v5-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v5-color-gray-300, #dbdde0);background-color: #fff;}.hi-v5-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v5-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-sidebar-item:first-child {margin-top: 0;}.hi-v5-sidebar-item:hover {cursor: pointer;}.hi-v5-sidebar-item:not(.hi-v5-sidebar-item--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-sidebar-item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-sidebar-item--active .hi-v5-sidebar-item__icon, .hi-v5-sidebar-item--active .hi-v5-sidebar-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-sidebar-item__icon {height: 20px;color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-sidebar-item__icon svg[class^=hi-v5-icon] {width: 20px;height: 20px;}.hi-v5-sidebar-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner--hasIcon + div .hi-v5-menu-submenu .hi-v5-menu-item__indent {width: 20px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-600, #60636b);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__indent {width: 14px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__content {font-weight: 550;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-submenu .hi-v5-menu-item__inner .hi-v5-menu-item__content {font-size: var(--hi-v5-text-size-sm, 0.75rem);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item {margin-top: var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item:first-child {margin-top: 0;}.hi-v5-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;right: -11px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v5-color-gray-300, #dbdde0);border-left: none;cursor: pointer;color: var(--hi-v5-color-gray-600, #60636b);background-color: #fff;}.hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {margin-left: -4px;}";
+var css_248z = ".hi-v5-menu-fat-menu {background-color: var(--hi-v5-color-static-white, #fff);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v5-menu-fat-menu__group:not(:last-of-type) {-webkit-margin-end: var(--hi-v5-spacing-18, 36px);margin-inline-end: var(--hi-v5-spacing-18, 36px);}.hi-v5-menu-fat-menu .hi-v5-menu-group-item {height: var(--hi-v5-height-10, 40px);margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-6, 12px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-fat-menu .hi-v5-menu-item {height: var(--hi-v5-height-10, 40px);margin: 0;border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-menu-fat-menu .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-fat-menu .hi-v5-menu-item:not(.hi-v5-menu-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-fat-menu .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v5-menu-fat-menu ul li {list-style-type: none;}.hi-v5-menu-popmenu {background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-xl, 8px);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-800, #1a1d26);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu-popmenu .hi-v5-menu-item {margin: 0;}.hi-v5-menu-popmenu .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-popmenu .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;-webkit-padding-end: var(--hi-v5-spacing-4, 8px);padding-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-popmenu.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);}.hi-v5-menu-popmenu.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);}.hi-v5-menu-popmenu.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);}.hi-v5-menu {background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu ul {margin: 0;padding: 0;}.hi-v5-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu__wrapper {padding: 0;margin: 0;}.hi-v5-menu--horizontal {width: 100%;overflow: hidden;}.hi-v5-menu--horizontal .hi-v5-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu--horizontal .hi-v5-menu-item {padding: 0 var(--hi-v5-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu--horizontal .hi-v5-menu-item__arrow {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--horizontal .hi-v5-menu-item:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item:hover .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-border-after: 2px solid transparent;border-block-end: 2px solid transparent;}.hi-v5-menu--horizontal .hi-v5-menu-item__inner--expanded {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled:hover .hi-v5-menu-item__inner {border-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled .hi-v5-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-menu--vertical .hi-v5-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-menu--vertical.hi-v5-menu--mini {width: 56px;overflow-x: hidden;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {-webkit-padding-start: var(--hi-v5-spacing-2, 4px);padding-inline-start: var(--hi-v5-spacing-2, 4px);-webkit-padding-end: var(--hi-v5-spacing-2, 4px);padding-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--popup .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical.hi-v5-menu--popup:not(.hi-v5-menu--mini) .hi-v5-menu__wrapper > .hi-v5-menu-item:last-child .hi-v5-menu-item__inner {-webkit-margin-after: 0;margin-block-end: 0;}.hi-v5-menu--vertical .hi-v5-menu__toggle {height: var(--hi-v5-height-10, 40px);line-height: var(--hi-v5-height-10, 40px);padding: 0 var(--hi-v5-spacing-6, 12px);cursor: pointer;border-radius: var(--hi-v5-border-radius-lg, 6px);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-lg, 1rem);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v5-menu--vertical .hi-v5-menu__toggle:hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px;}.hi-v5-menu--vertical .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {width: 60px;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 52px;height: 48px;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-3, 6px) 0;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__content {-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;font-size: calc(var(--hi-v5-text-size-xl, 1.125rem) + 2px);text-align: center;text-indent: 0;}.hi-v5-menu--vertical.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);-webkit-margin-after: var(--hi-v5-spacing-4, 8px);margin-block-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu--vertical.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);-webkit-margin-after: var(--hi-v5-spacing-2, 4px);margin-block-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper-showMenuArrow) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__arrow {display: none;}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-menu-wrapper {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper--collapsible) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v5-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;overflow: auto;-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);background-color: #fff;}.hi-v5-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v5-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-sidebar-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-sidebar-item:hover {cursor: pointer;}.hi-v5-sidebar-item:not(.hi-v5-sidebar-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-sidebar-item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-sidebar-item--active .hi-v5-sidebar-item__icon, .hi-v5-sidebar-item--active .hi-v5-sidebar-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-sidebar-item__icon {height: 20px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-item__icon svg[class^=hi-v5-icon] {width: 20px;height: 20px;}.hi-v5-sidebar-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-sidebar-menu-wrapper {width: 0;-webkit-border-end: none;border-inline-end: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: 0;margin-block-end: 0;padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner--hasIcon + div .hi-v5-menu-submenu .hi-v5-menu-item__indent {width: 20px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__indent {width: 14px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__content {font-weight: 550;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-submenu .hi-v5-menu-item__inner .hi-v5-menu-item__content {font-size: var(--hi-v5-text-size-sm, 0.75rem);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 12px;height: 60px;inset-inline-end: -11px;inset-block-start: 50%;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);-webkit-border-start: none;border-inline-start: none;cursor: pointer;color: var(--hi-v5-color-gray-700, #60636b);background-color: #fff;}.hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-margin-start: -4px;margin-inline-start: -4px;}.hi-v5-menu-search {min-width: 360px;border-radius: var(--hi-v5-border-radius-xl, 8px);overflow: hidden;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu-search__input-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-8, 16px) 0 calc(var(--hi-v5-spacing-2, 4px) + 1px);height: var(--hi-v5-height-12, 48px);}.hi-v5-menu-search--open .hi-v5-menu-search__input-wrapper {border-end-start-radius: 0;border-end-end-radius: 0;}.hi-v5-menu-search__input .hi-v5-input__inner:hover {background-color: transparent !important;}.hi-v5-menu-search__input-prefix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-menu-search__input-clear {font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-menu-search__close {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: var(--hi-v5-height-4, 16px);-webkit-padding-start: var(--hi-v5-spacing-5, 10px);padding-inline-start: var(--hi-v5-spacing-5, 10px);-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-menu-search__content {-webkit-box-sizing: border-box;box-sizing: border-box;display: none;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);max-height: 550px;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__content--visible {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-menu-search__header {padding: 0 var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__header-count {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-search__list {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow-y: auto;position: relative;outline: none;}.hi-v5-menu-search__list:focus {outline: none;}.hi-v5-menu-search__list-item {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-10, 40px);padding: calc(var(--hi-v5-spacing-4, 8px) + 1px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-search__list-item__title {font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-menu-search__list-item--selected, .hi-v5-menu-search__list-item:hover {cursor: pointer;background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__empty {padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-menu-search__footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: #f5f7fa;}.hi-v5-menu-search__footer-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-margin-end: var(--hi-v5-spacing-8, 16px);margin-inline-end: var(--hi-v5-spacing-8, 16px);font-size: var(--hi-v5-text-size-sm, 0.75rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__footer-item__icon {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: var(--hi-v5-spacing-1, 2px);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);padding: 0 var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-5, 20px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-radius: var(--hi-v5-border-radius-md, 4px);}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-container {min-width: 360px;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-panel {border-top: none;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-body {max-height: 544px;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-footer {-webkit-box-shadow: none;box-shadow: none;background-color: #f5f7fa;}.hi-v5-group-menu {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;}.hi-v5-group-menu-item:not(:first-child) {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-group-menu-item__content {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-4, 8px);margin: 0 var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, rgba(26, 29, 38, 0.8));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled) {cursor: pointer;}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled):hover .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active > .hi-v5-group-menu-item__content {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active:hover > .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item--disabled > .hi-v5-group-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-group-menu-item--empty > .hi-v5-group-menu-item__content {display: none;}.hi-v5-group-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-group-menu-parent-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content {height: var(--hi-v5-height-7, 28px);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content .hi-v5-group-menu-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-group-menu-parent-item:not(:first-child) > .hi-v5-group-menu-item__content {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-group-menu-parent-item + .hi-v5-group-menu-item {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-side-menu {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-2, 4px) 0;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-side-menu-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;position: relative;}.hi-v5-side-menu-item:hover, .hi-v5-side-menu-item--selected {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-side-menu-item:not(.hi-v5-side-menu-item--mini) {height: var(--hi-v5-height-8, 32px);}.hi-v5-side-menu-item:not(.hi-v5-side-menu-item--mini) .hi-v5-side-menu-item__title {min-width: 1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-4, 8px);}.hi-v5-side-menu-item--active {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active:hover {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active .hi-v5-side-menu-item__icon,.hi-v5-side-menu-item--active .hi-v5-side-menu-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-side-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: #7c87a6;}.hi-v5-side-menu-item--mini {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;padding: var(--hi-v5-spacing-3, 6px);width: 52px;max-height: 64px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: var(--hi-v5-spacing-3, 6px);margin-block-end: var(--hi-v5-spacing-3, 6px);font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__title {font-size: 20px;line-height: 28px;text-align: center;text-indent: 0;-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;-webkit-margin-after: -14px;margin-block-end: -14px;-webkit-transform-origin: top;transform-origin: top;white-space: normal;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-clamp: 2;word-break: break-word;overflow: hidden;text-overflow: ellipsis;}.hi-v5-side-menu--mini .hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-side-menu .hi-v5-scrollbar__wrapper {width: 100%;}";
 var __styleInject__ = require('@hi-ui/style-inject')["default"];
 __styleInject__(css_248z);
 exports["default"] = css_248z;

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/Expander.js

@@ -16,12 +16,17 @@ var Expander = function Expander(_ref) {
   var _useState = useState(visible ? 'auto' : 0),
     height = _useState[0],
     setHeight = _useState[1];
+  var innerRef = React.useRef(null);
   return /*#__PURE__*/React.createElement(CSSTransition, {
     "in": visible,
     timeout: 200,
     classNames: className,
     unmountOnExit: false,
-    onEnter: function onEnter(element) {
+    // 参考：https://github.com/reactjs/react-transition-group/issues/918
+    nodeRef: innerRef,
+    onEnter: function onEnter() {
+      var element = innerRef.current;
+      if (!element) return;
       setHeight(0);
       setTimeout(function () {
         setHeight(element.scrollHeight);
@@ -30,7 +35,9 @@ var Expander = function Expander(_ref) {
     onEntered: function onEntered() {
       setHeight('auto');
     },
-    onExit: function onExit(element) {
+    onExit: function onExit() {
+      var element = innerRef.current;
+      if (!element) return;
       setHeight(element.scrollHeight);
       setTimeout(function () {
         setHeight(0);
@@ -41,7 +48,8 @@ var Expander = function Expander(_ref) {
       height: height,
       overflow: 'hidden',
       transition: 'all 0.3s'
-    }
+    },
+    ref: innerRef
   }, children));
 };
 export { Expander };

package/lib/esm/GroupMenu.js

@@ -0,0 +1,111 @@
+/** @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 { useGlobalContext } from '@hi-ui/core';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
+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,
+    style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
+    _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", "style", "classNames", "styles", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
+  var _useGlobalContext = useGlobalContext(),
+    groupMenuConfig = _useGlobalContext.groupMenu;
+  var _useMergeSemantic = useMergeSemantic({
+      classNamesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.classNames, classNamesProp],
+      stylesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          defaultActiveId: defaultActiveId,
+          activeId: activeIdProp,
+          titleRender: titleRender
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
+  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), classNames === null || classNames === void 0 ? void 0 : classNames.item),
+        style: styles === null || styles === void 0 ? void 0 : styles.item,
+        onClick: function onClick(evt) {
+          if (disabled || isParent) return;
+          evt.stopPropagation();
+          handleClick(evt, id, item);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx(prefixCls + "-item__content", classNames === null || classNames === void 0 ? void 0 : classNames.itemContent),
+        style: styles === null || styles === void 0 ? void 0 : styles.itemContent
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
+        style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
+        style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
+      }, typeof titleRender === 'function' ? titleRender(item) : title)), isParent && renderItem(children));
+    });
+  }, [activeId, handleClick, prefixCls, titleRender, classNames, styles]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    ref: ref,
+    role: role
+  }, rest), /*#__PURE__*/React.createElement(Scrollbar, {
+    onlyScrollVisible: true,
+    axes: "y",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
+    style: styles === null || styles === void 0 ? void 0 : styles.wrapper
+  }, renderItem(data)));
+});
+if (__DEV__) {
+  GroupMenu.displayName = 'GroupMenu';
+}
+export { GroupMenu };