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

package/lib/esm/Menu.js

@@ -8,11 +8,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useState, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
+import React, { forwardRef, useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
 import { __DEV__ } from '@hi-ui/env';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { useLocaleContext, useGlobalContext } from '@hi-ui/core';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
 import Tooltip from '@hi-ui/tooltip';
 import { useUncontrolledToggle } from '@hi-ui/use-toggle';
 import { getTreeNodesWithChildren } from '@hi-ui/tree-utils';
@@ -32,11 +34,15 @@ var MENU_MORE_ID = "MENU_MORE_" + uuid();
  * 菜单
  */
 var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b, _c;
   var _a$prefixCls = _a.prefixCls,
     prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
     _a$role = _a.role,
     role = _a$role === void 0 ? 'menu' : _a$role,
     className = _a.className,
+    style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
     _a$data = _a.data,
     data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
     fieldNames = _a.fieldNames,
@@ -67,12 +73,41 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     render = _a.render,
     extraHeader = _a.extraHeader,
     onClick = _a.onClick,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? 'lg' : _a$size,
-    rest = __rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
+    sizeProp = _a.size,
+    _a$showTitleOnMini = _a.showTitleOnMini,
+    showTitleOnMini = _a$showTitleOnMini === void 0 ? false : _a$showTitleOnMini,
+    rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size", "showTitleOnMini"]);
+  var i18n = useLocaleContext();
   var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
     activeId = _useUncontrolledState[0],
     updateActiveId = _useUncontrolledState[1];
+  var _useGlobalContext = useGlobalContext(),
+    globalSize = _useGlobalContext.size,
+    menuConfig = _useGlobalContext.menu;
+  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'lg';
+  if (size === 'xs') {
+    size = 'sm';
+  }
+  var _useMergeSemantic = useMergeSemantic({
+      classNamesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.classNames, classNamesProp],
+      stylesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          placement: placement,
+          size: (_c = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _c !== void 0 ? _c : 'lg',
+          showCollapse: showCollapse,
+          expandedType: expandedType,
+          showAllSubMenus: showAllSubMenus,
+          defaultExpandAll: defaultExpandAll,
+          defaultCollapsed: defaultCollapsed,
+          collapsed: collapsed,
+          showTitleOnMini: showTitleOnMini
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   var _useState = useState(function () {
       return getAncestorIds(activeId, data);
     }),
@@ -91,6 +126,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, expandedIdsProp, onExpand),
     expandedIds = _useUncontrolledState2[0],
     updateExpandedIds = _useUncontrolledState2[1];
+  var expandedIdsRef = useRef(expandedIds);
   var clickMenu = useCallback(function (id, raw) {
     updateActiveId(id, raw);
   }, [updateActiveId]);
@@ -99,14 +135,17 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       return expandedId !== id;
     }) : expandedIds.concat(id);
     updateExpandedIds(nextExpandedIds);
+    expandedIdsRef.current = nextExpandedIds;
     if (onClickSubMenu) {
       onClickSubMenu(id, nextExpandedIds);
     }
   }, [onClickSubMenu, expandedIds, updateExpandedIds]);
   var closePopper = useCallback(function (id) {
-    updateExpandedIds(expandedIds.filter(function (expandedId) {
+    var nextExpandedIds = expandedIds.filter(function (expandedId) {
       return expandedId !== id;
-    }));
+    });
+    updateExpandedIds(nextExpandedIds);
+    expandedIdsRef.current = nextExpandedIds;
   }, [expandedIds, updateExpandedIds]);
   var closeAllPopper = useCallback(function () {
     updateExpandedIds([]);
@@ -139,6 +178,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       setContainerWidth(width);
     }
   });
+  useEffect(function () {
+    if (mini) {
+      updateExpandedIds([]);
+    } else {
+      updateExpandedIds(expandedIdsRef.current);
+    }
+  }, [mini, updateExpandedIds]);
   var _useState4 = useState(0),
     tagMaxCount = _useState4[0],
     setTagMaxCount = _useState4[1];
@@ -187,11 +233,10 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
   var renderFooter = function renderFooter() {
     var collapseNode = canToggle ? ( /*#__PURE__*/React.createElement("div", {
-      className: cx(prefixCls + "__toggle"),
+      className: cx(prefixCls + "__toggle", classNames === null || classNames === void 0 ? void 0 : classNames.toggle),
+      style: styles === null || styles === void 0 ? void 0 : styles.toggle,
       onClick: function onClick() {
-        miniToggleAction.not();
-        // 关闭所有展开的子菜单，防止切换到 mini 模式后，子菜单还是展开的
-        updateExpandedIds([]);
+        return miniToggleAction.not();
       }
     }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null))) : null;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isFunction(footerRender) ? footerRender({
@@ -201,22 +246,24 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   };
   var renderItem = useCallback(function (menuItem, level) {
     // 显示缩略内容
-    if (showMini && level === 1) {
+    if (showMini && level === 1 && !showTitleOnMini) {
       return renderMenuItemMini(menuItem);
     }
     return isFunction(render) ? render(menuItem, level) : menuItem.title;
-  }, [render, showMini]);
-  var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
+  }, [render, showMini, showTitleOnMini]);
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: useMergeRefs(ref, setContainerElement),
     role: role,
-    className: cls
+    className: cls,
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, rest), extraHeader, /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: {
       placement: placement,
       expandedType: expandedType,
       showAllSubMenus: showAllSubMenus,
       mini: mini,
+      showTitleOnMini: showTitleOnMini,
       clickMenu: clickMenu,
       clickSubMenu: clickSubMenu,
       closePopper: closePopper,
@@ -224,10 +271,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
       activeParents: activeParents,
       activeId: activeId,
       expandedIds: expandedIds,
-      overlayClassName: overlayClassName
+      overlayClassName: overlayClassName,
+      semanticClassNames: classNames,
+      semanticStyles: styles
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: cx(prefixCls + "__wrapper")
+    className: cx(prefixCls + "__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
+    style: styles === null || styles === void 0 ? void 0 : styles.wrapper
   }, mergedTagList.map(function (item, index) {
     return showMini ? ( /*#__PURE__*/React.createElement(Tooltip, {
       title: item.title,
@@ -250,10 +300,11 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   }), showVertical || restTagList.length === 0 ? null : ( /*#__PURE__*/React.createElement(MenuItem, {
     key: MENU_MORE_ID,
     id: MENU_MORE_ID,
-    title: "\u66F4\u591A",
+    title: i18n.tabs.more,
     children: restTagList
   }))), /*#__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
   }, renderFooter())));
 });
 if (__DEV__) {

package/lib/esm/MenuItem.js

@@ -56,16 +56,20 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     clickSubMenu = _useContext.clickSubMenu,
     closeAllPopper = _useContext.closeAllPopper,
     activeParents = _useContext.activeParents,
-    overlayClassName = _useContext.overlayClassName;
+    overlayClassName = _useContext.overlayClassName,
+    showTitleOnMini = _useContext.showTitleOnMini,
+    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));
@@ -79,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,
@@ -122,13 +143,14 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
-    gutterGap: 16,
+    gutterGap: showTitleOnMini ? 8 : 16,
     className: overlayClassName,
     onClose: function onClose() {
       closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
     }
   }, /*#__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,
@@ -142,14 +164,15 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
     attachEl: itemRef.current,
     placement: 'right-start',
-    gutterGap: 16,
+    gutterGap: showTitleOnMini ? 12 : 16,
     disabledPortal: true,
     className: overlayClassName,
     onClose: function onClose() {
       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,
@@ -169,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,
@@ -190,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,
@@ -240,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,
@@ -261,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,
@@ -308,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':
@@ -321,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);
 };
 /**