@hi-ui/menu 5.0.0-experimental.1 → 5.0.0-experimental.3

package/lib/esm/MenuItem.js

@@ -57,16 +57,19 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     closeAllPopper = _useContext.closeAllPopper,
     activeParents = _useContext.activeParents,
     overlayClassName = _useContext.overlayClassName,
-    showTitleOnMini = _useContext.showTitleOnMini;
+    showTitleOnMini = _useContext.showTitleOnMini,
+    semanticClassNames = _useContext.semanticClassNames,
+    semanticStyles = _useContext.semanticStyles;
   var _parentIds = (parentIds || []).concat(id);
   var hasChildren = isArrayNonEmpty(children);
   var mergedRef = useMergeRefs(itemRef, ref);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
     ref: mergedRef,
-    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: 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.createElement("div", {
-    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: 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 (isArrayNonEmpty(children)) {
         !disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
@@ -80,36 +83,53 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
     prefixCls: prefixCls + "-item",
     depth: level - 1
-  }) : null, icon ? /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "-item__icon"
-  }, icon) : null, /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "-item__content"
+  }) : null, icon ? ( /*#__PURE__*/React.createElement("span", {
+    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.createElement("span", {
+    className: cx(prefixCls + "-item__content", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemContent),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemContent
   }, 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.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.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.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.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.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.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.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.createElement(Expander, {
     visible: !disabled && !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-submenu"
+    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.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -129,7 +149,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    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.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -150,7 +171,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    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.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -170,7 +192,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    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.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -191,7 +214,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    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.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -241,7 +265,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    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.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -262,7 +287,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
+    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.createElement(MenuItem, Object.assign({}, child, {
       key: child.id,
@@ -309,7 +335,9 @@ if (__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':
@@ -322,7 +350,8 @@ var Arrow = function Arrow(_ref2) {
       icon = /*#__PURE__*/React.createElement(RightOutlined, null);
   }
   return /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__arrow"
+    className: cx(prefixCls + "__arrow", className),
+    style: style
   }, icon);
 };
 /**

package/lib/esm/MenuSearch.js

@@ -9,7 +9,8 @@
  */
 import { __rest } from 'tslib';
 import React, { forwardRef, useState, useRef, useLayoutEffect, useCallback, useEffect, useImperativeHandle } from 'react';
-import { useLocaleContext } from '@hi-ui/core';
+import { useLocaleContext, useGlobalContext } from '@hi-ui/core';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
 import { __DEV__ } from '@hi-ui/env';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { ArrowUpOutlined, ArrowDownOutlined, SearchOutlined, CloseOutlined } from '@hi-ui/icons';
@@ -31,6 +32,8 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     _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,
@@ -43,9 +46,27 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     onSelect = _a.onSelect,
     onClear = _a.onClear,
     onClose = _a.onClose,
-    onEsc = _a.onEsc;
-  __rest(_a, ["innerRef", "prefixCls", "className", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
+    onEsc = _a.onEsc,
+    rest = __rest(_a, ["innerRef", "prefixCls", "className", "classNames", "styles", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
   var i18n = useLocaleContext();
+  var _useGlobalContext = useGlobalContext(),
+    menuSearchConfig = _useGlobalContext.menuSearch;
+  var _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 = useUncontrolledToggle({
       visible: visibleProp
     }),
@@ -177,10 +198,10 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
       }
     };
   });
-  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
   return /*#__PURE__*/React.createElement("div", {
     className: cls,
-    style: style
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, /*#__PURE__*/React.createElement(MenuSearchInput, {
     width: width,
     prefixCls: prefixCls,
@@ -190,18 +211,23 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClear: handleClear,
     onClose: handleClose,
     onKeyDown: handleKeyDown,
-    inputRef: setInputRef
+    inputRef: setInputRef,
+    semanticClassNames: classNames,
+    semanticStyles: styles
   }), /*#__PURE__*/React.createElement("div", {
-    className: cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2))
+    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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__header"
+    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.createElement(Highlighter, {
     keyword: String((_b = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _b !== void 0 ? _b : 0)
   }, i18n.get('menuSearch.searchResult', {
     count: (_c = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _c !== void 0 ? _c : 0,
     keyword: value
   }))), /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__list",
+    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
@@ -209,12 +235,14 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     var _cx3;
     return /*#__PURE__*/React.createElement("div", {
       key: item.id,
-      className: cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3)),
+      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.createElement("div", {
-      className: prefixCls + "__list-item__title"
+      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.createElement(EllipsisTooltip, {
       tooltipProps: {
         style: {
@@ -225,27 +253,38 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
       keyword: value
     }, item.pathTitles.join('/')))));
   })))) : ( /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__empty"
+    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.createElement("div", null, i18n.menuSearch.searchEmptyResult)))), (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 && ( /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer"
+    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.createElement("div", {
-    className: prefixCls + "__footer-item"
+    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.createElement("div", {
-    className: prefixCls + "__footer-item__icon"
+    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.createElement(ArrowUpOutlined, null), /*#__PURE__*/React.createElement(ArrowDownOutlined, null)), /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__footer-item__text"
+    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.createElement("div", {
-    className: prefixCls + "__footer-item"
+    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.createElement("div", {
-    className: prefixCls + "__footer-item__icon"
+    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.createElement(EnterIcon, null)), /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__footer-item__text"
+    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.createElement("div", {
-    className: prefixCls + "__footer-item"
+    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.createElement("div", {
-    className: prefixCls + "__footer-item__icon"
+    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.createElement("span", {
-    className: prefixCls + "__footer-item__text"
+    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 (__DEV__) {
@@ -261,17 +300,20 @@ var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClose = _a.onClose,
     onKeyDown = _a.onKeyDown,
     inputRef = _a.inputRef,
-    rest = __rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef"]);
+    semanticClassNames = _a.semanticClassNames,
+    semanticStyles = _a.semanticStyles,
+    rest = __rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef", "semanticClassNames", "semanticStyles"]);
   var i18n = useLocaleContext();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: prefixCls + "__input-wrapper",
-    style: {
+    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.createElement(Input, Object.assign({
     ref: inputRef,
-    className: prefixCls + "__input",
+    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"
     },
@@ -279,7 +321,8 @@ var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     placeholder: placeholder,
     prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
     suffix: /*#__PURE__*/React.createElement(Button, {
-      className: prefixCls + "__input-clear",
+      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
@@ -290,7 +333,8 @@ var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     },
     onKeyDown: onKeyDown
   }, rest)), /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__close"
+    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.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
     effect: true,

package/lib/esm/SideMenu.js

@@ -11,6 +11,8 @@ import { __rest } from 'tslib';
 import React, { forwardRef } 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 Tooltip from '@hi-ui/tooltip';
 import { useLatestCallback } from '@hi-ui/use-latest';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
@@ -27,6 +29,9 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
     _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,
@@ -37,8 +42,25 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClick = _a.onClick,
     onMouseEnter = _a.onMouseEnter,
     onMouseLeave = _a.onMouseLeave,
-    rest = __rest(_a, ["prefixCls", "role", "className", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
-  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
+    rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
+  var _useGlobalContext = useGlobalContext(),
+    sideMenuConfig = _useGlobalContext.sideMenu;
+  var _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 = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
   var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp),
     activeId = _useUncontrolledState[0],
     tryChangeActiveId = _useUncontrolledState[1];
@@ -57,10 +79,13 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     role: role,
-    className: cls
+    className: cls,
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, rest), /*#__PURE__*/React.createElement(Scrollbar, {
     onlyScrollVisible: true,
-    axes: "y"
+    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,
@@ -68,16 +93,25 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
       icon = item.icon;
     return /*#__PURE__*/React.createElement("div", {
       key: id,
-      className: cx(prefixCls + "-item-wrapper"),
+      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;
-        if (scrollWidth > clientWidth) {
+          clientWidth = titleElement.clientWidth,
+          scrollHeight = titleElement.scrollHeight,
+          clientHeight = titleElement.clientHeight;
+        // 单行溢出：scrollWidth > clientWidth；多行（如 mini 2 行）溢出：scrollHeight > clientHeight
+        var isOverflow = scrollWidth > clientWidth || scrollHeight > clientHeight;
+        if (isOverflow) {
           Tooltip.open(currentTarget, {
             key: "side-menu-tooltip-" + id,
             title: title,
@@ -92,11 +126,27 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
         handleMouseLeave(evt, id, item);
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2))
+      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.createElement("div", {
-      className: cx(prefixCls + "-item__icon")
+      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")
+      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)));
   })));
 });