@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/lib/menu/menu.js

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _rcMenu = _interopRequireDefault(require("rc-menu"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+
+var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _EllipsisOutlined = _interopRequireDefault(require("@ant-design/icons/EllipsisOutlined"));
+
+var _warning = _interopRequireDefault(require("../_util/warning"));
+
+var _motion = _interopRequireDefault(require("../_util/motion"));
+
+var _reactNode = require("../_util/reactNode");
+
+var _configProvider = require("../config-provider");
+
+var _style = _interopRequireDefault(require("./style"));
+
+var _OverrideContext = _interopRequireDefault(require("./OverrideContext"));
+
+var _useItems = _interopRequireDefault(require("./hooks/useItems"));
+
+var _MenuContext = _interopRequireDefault(require("./MenuContext"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var InternalMenu = /*#__PURE__*/(0, React.forwardRef)(function (props, ref) {
+  var _a;
+
+  var override = React.useContext(_OverrideContext["default"]);
+  var overrideObj = override || {};
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      getPopupContainer = _React$useContext.getPopupContainer,
+      direction = _React$useContext.direction;
+
+  var rootPrefixCls = getPrefixCls();
+
+  var customizePrefixCls = props.prefixCls,
+      className = props.className,
+      _props$theme = props.theme,
+      theme = _props$theme === void 0 ? 'light' : _props$theme,
+      expandIcon = props.expandIcon,
+      _internalDisableMenuItemTitleTooltip = props._internalDisableMenuItemTitleTooltip,
+      inlineCollapsed = props.inlineCollapsed,
+      siderCollapsed = props.siderCollapsed,
+      items = props.items,
+      children = props.children,
+      rootClassName = props.rootClassName,
+      mode = props.mode,
+      selectable = props.selectable,
+      onClick = props.onClick,
+      restProps = __rest(props, ["prefixCls", "className", "theme", "expandIcon", "_internalDisableMenuItemTitleTooltip", "inlineCollapsed", "siderCollapsed", "items", "children", "rootClassName", "mode", "selectable", "onClick"]);
+
+  var passedProps = (0, _omit["default"])(restProps, ['collapsedWidth']); // ========================= Items ===========================
+
+  var mergedChildren = (0, _useItems["default"])(items) || children; // ======================== Warning ==========================
+
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!('inlineCollapsed' in props && mode !== 'inline'), 'Menu', '`inlineCollapsed` should only be used when `mode` is inline.') : void 0;
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])(!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props), 'Menu', '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.') : void 0;
+  process.env.NODE_ENV !== "production" ? (0, _warning["default"])('items' in props && !children, 'Menu', '`children` will be removed in next major version. Please use `items` instead.') : void 0;
+  (_a = overrideObj.validator) === null || _a === void 0 ? void 0 : _a.call(overrideObj, {
+    mode: mode
+  }); // ========================== Click ==========================
+  // Tell dropdown that item clicked
+
+  var onItemClick = (0, _useEvent["default"])(function () {
+    var _a;
+
+    onClick === null || onClick === void 0 ? void 0 : onClick.apply(void 0, arguments);
+    (_a = overrideObj.onClick) === null || _a === void 0 ? void 0 : _a.call(overrideObj);
+  }); // ========================== Mode ===========================
+
+  var mergedMode = overrideObj.mode || mode; // ======================= Selectable ========================
+
+  var mergedSelectable = selectable !== null && selectable !== void 0 ? selectable : overrideObj.selectable; // ======================== Collapsed ========================
+  // Inline Collapsed
+
+  var mergedInlineCollapsed = React.useMemo(function () {
+    if (siderCollapsed !== undefined) {
+      return siderCollapsed;
+    }
+
+    return inlineCollapsed;
+  }, [inlineCollapsed, siderCollapsed]);
+  var defaultMotions = {
+    horizontal: {
+      motionName: rootPrefixCls + "-slide-up"
+    },
+    inline: (0, _motion["default"])(rootPrefixCls),
+    other: {
+      motionName: rootPrefixCls + "-zoom-big"
+    }
+  };
+  var prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
+
+  var _useStyle = (0, _style["default"])(prefixCls, !override),
+      _useStyle2 = (0, _slicedToArray2["default"])(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var menuClassName = (0, _classnames["default"])(prefixCls + "-" + theme, className); // ====================== Expand Icon ========================
+
+  var mergedExpandIcon;
+
+  if (typeof expandIcon === 'function') {
+    mergedExpandIcon = expandIcon;
+  } else {
+    mergedExpandIcon = (0, _reactNode.cloneElement)(expandIcon || overrideObj.expandIcon, {
+      className: prefixCls + "-submenu-expand-icon"
+    });
+  } // ======================== Context ==========================
+
+
+  var contextValue = React.useMemo(function () {
+    return {
+      prefixCls: prefixCls,
+      inlineCollapsed: mergedInlineCollapsed || false,
+      direction: direction,
+      firstLevel: true,
+      theme: theme,
+      mode: mergedMode,
+      disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip
+    };
+  }, [prefixCls, mergedInlineCollapsed, direction, _internalDisableMenuItemTitleTooltip, theme]); // ========================= Render ==========================
+
+  return wrapSSR( /*#__PURE__*/React.createElement(_OverrideContext["default"].Provider, {
+    value: null
+  }, /*#__PURE__*/React.createElement(_MenuContext["default"].Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(_rcMenu["default"], (0, _extends2["default"])({
+    getPopupContainer: getPopupContainer,
+    overflowedIndicator: /*#__PURE__*/React.createElement(_EllipsisOutlined["default"], null),
+    overflowedIndicatorPopupClassName: prefixCls + "-" + theme,
+    mode: mergedMode,
+    selectable: mergedSelectable,
+    onClick: onItemClick
+  }, passedProps, {
+    inlineCollapsed: mergedInlineCollapsed,
+    className: menuClassName,
+    prefixCls: prefixCls,
+    direction: direction,
+    defaultMotions: defaultMotions,
+    expandIcon: mergedExpandIcon,
+    ref: ref,
+    rootClassName: (0, _classnames["default"])(rootClassName, hashId)
+  }), mergedChildren))));
+});
+var _default = InternalMenu;
+exports["default"] = _default;

package/lib/menu/style/horizontal.d.ts

@@ -0,0 +1,4 @@
+import type { MenuToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const getHorizontalStyle: GenerateStyle<MenuToken>;
+export default getHorizontalStyle;

package/lib/menu/style/horizontal.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var getHorizontalStyle = function getHorizontalStyle(token) {
+  var _ref;
+
+  var componentCls = token.componentCls,
+      motionDurationSlow = token.motionDurationSlow,
+      menuHorizontalHeight = token.menuHorizontalHeight,
+      colorSplit = token.colorSplit,
+      lineWidth = token.lineWidth,
+      lineType = token.lineType,
+      menuItemPaddingInline = token.menuItemPaddingInline;
+  return (0, _defineProperty2["default"])({}, componentCls + "-horizontal", (_ref = {
+    lineHeight: menuHorizontalHeight + "px",
+    border: 0,
+    borderBottom: lineWidth + "px " + lineType + " " + colorSplit,
+    boxShadow: 'none',
+    '&::after': {
+      display: 'block',
+      clear: 'both',
+      height: 0,
+      content: '"\\20"'
+    }
+  }, (0, _defineProperty2["default"])(_ref, componentCls + "-item, " + componentCls + "-submenu", {
+    position: 'relative',
+    display: 'inline-block',
+    verticalAlign: 'bottom',
+    paddingInline: menuItemPaddingInline
+  }), (0, _defineProperty2["default"])(_ref, "> " + componentCls + "-item:hover,\n        > " + componentCls + "-item-active,\n        > " + componentCls + "-submenu " + componentCls + "-submenu-title:hover", {
+    backgroundColor: 'transparent'
+  }), (0, _defineProperty2["default"])(_ref, componentCls + "-item, " + componentCls + "-submenu-title", {
+    transition: ["border-color " + motionDurationSlow, "background " + motionDurationSlow].join(',')
+  }), (0, _defineProperty2["default"])(_ref, componentCls + "-submenu-arrow", {
+    display: 'none'
+  }), _ref));
+};
+
+var _default = getHorizontalStyle;
+exports["default"] = _default;

package/lib/menu/style/index.d.ts

@@ -1,3 +1,41 @@
-import '../../style/default.less';
-import './index.less';
-import '../../tooltip/style';
+import type { FullToken, UseComponentStyleResult } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    dropdownWidth: number;
+    zIndexPopup: number;
+    colorGroupTitle: string;
+    radiusItem: number;
+    radiusSubMenuItem: number;
+    colorItemText: string;
+    colorItemTextHover: string;
+    colorItemTextHoverHorizontal: string;
+    colorItemTextSelected: string;
+    colorItemTextSelectedHorizontal: string;
+    colorItemTextDisabled: string;
+    colorDangerItemText: string;
+    colorDangerItemTextHover: string;
+    colorDangerItemTextSelected: string;
+    colorDangerItemBgActive: string;
+    colorDangerItemBgSelected: string;
+    colorItemBg: string;
+    colorItemBgHover: string;
+    colorSubItemBg: string;
+    colorItemBgActive: string;
+    colorItemBgSelected: string;
+    colorItemBgSelectedHorizontal: string;
+    colorActiveBarWidth: number;
+    colorActiveBarHeight: number;
+    colorActiveBarBorderSize: number;
+    itemMarginInline: number;
+}
+export interface MenuToken extends FullToken<'Menu'> {
+    menuItemHeight: number;
+    menuHorizontalHeight: number;
+    menuItemPaddingInline: number;
+    menuArrowSize: number;
+    menuArrowOffset: string;
+    menuPanelMaskInset: number;
+    menuSubMenuBg: string;
+}
+declare const _default: (prefixCls: string, injectStyle: boolean) => UseComponentStyleResult;
+export default _default;

package/lib/menu/style/index.js

@@ -1,7 +1,355 @@
 "use strict";
 
-require("../../style/default.less");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
-require("./index.less");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-require("../../tooltip/style");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends7 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _tinycolor = require("@ctrl/tinycolor");
+
+var _motion = require("../../style/motion");
+
+var _internal = require("../../theme/internal");
+
+var _horizontal = _interopRequireDefault(require("./horizontal"));
+
+var _rtl = _interopRequireDefault(require("./rtl"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _vertical = _interopRequireDefault(require("./vertical"));
+
+var _style = require("../../style");
+
+var genMenuItemStyle = function genMenuItemStyle(token) {
+  var _ref2, _ref4;
+
+  var componentCls = token.componentCls,
+      fontSize = token.fontSize,
+      motionDurationSlow = token.motionDurationSlow,
+      motionDurationMid = token.motionDurationMid,
+      motionEaseInOut = token.motionEaseInOut,
+      motionEaseOut = token.motionEaseOut,
+      iconCls = token.iconCls,
+      controlHeightSM = token.controlHeightSM;
+  return _ref4 = {}, (0, _defineProperty2["default"])(_ref4, componentCls + "-item, " + componentCls + "-submenu-title", (_ref2 = {
+    position: 'relative',
+    display: 'block',
+    margin: 0,
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+    transition: ["border-color " + motionDurationSlow, "background " + motionDurationSlow, "padding " + motionDurationSlow + " " + motionEaseInOut].join(',')
+  }, (0, _defineProperty2["default"])(_ref2, componentCls + "-item-icon, " + iconCls, {
+    minWidth: fontSize,
+    fontSize: fontSize,
+    transition: ["font-size " + motionDurationMid + " " + motionEaseOut, "margin " + motionDurationSlow + " " + motionEaseInOut, "color " + motionDurationSlow].join(','),
+    '+ span': {
+      marginInlineStart: controlHeightSM - fontSize,
+      opacity: 1,
+      transition: ["opacity " + motionDurationSlow + " " + motionEaseInOut, "margin " + motionDurationSlow, "color " + motionDurationSlow].join(',')
+    }
+  }), (0, _defineProperty2["default"])(_ref2, componentCls + "-item-icon", (0, _extends7["default"])({}, (0, _style.resetIcon)())), (0, _defineProperty2["default"])(_ref2, "&" + componentCls + "-item-only-child", (0, _defineProperty2["default"])({}, "> " + iconCls + ", > " + componentCls + "-item-icon", {
+    marginInlineEnd: 0
+  })), _ref2)), (0, _defineProperty2["default"])(_ref4, componentCls + "-item-disabled, " + componentCls + "-submenu-disabled", (0, _defineProperty2["default"])({
+    background: 'none !important',
+    cursor: 'not-allowed',
+    '&::after': {
+      borderColor: 'transparent !important'
+    },
+    a: {
+      color: 'inherit !important'
+    }
+  }, "> " + componentCls + "-submenu-title", {
+    color: 'inherit !important',
+    cursor: 'not-allowed'
+  })), _ref4;
+};
+
+var genSubMenuArrowStyle = function genSubMenuArrowStyle(token) {
+  var _ref5;
+
+  var componentCls = token.componentCls,
+      motionDurationSlow = token.motionDurationSlow,
+      motionEaseInOut = token.motionEaseInOut,
+      borderRadius = token.borderRadius,
+      menuArrowSize = token.menuArrowSize,
+      menuArrowOffset = token.menuArrowOffset;
+  return (0, _defineProperty2["default"])({}, componentCls + "-submenu", (_ref5 = {}, (0, _defineProperty2["default"])(_ref5, "&-expand-icon, &-arrow", {
+    position: 'absolute',
+    top: '50%',
+    insetInlineEnd: token.margin,
+    width: menuArrowSize,
+    color: 'currentcolor',
+    transform: 'translateY(-50%)',
+    transition: "transform " + motionDurationSlow + " " + motionEaseInOut
+  }), (0, _defineProperty2["default"])(_ref5, '&-arrow', {
+    // →
+    '&::before, &::after': {
+      position: 'absolute',
+      width: menuArrowSize * 0.6,
+      height: menuArrowSize * 0.15,
+      backgroundColor: 'currentcolor',
+      borderRadius: borderRadius,
+      transition: ["background " + motionDurationSlow + " " + motionEaseInOut, "transform " + motionDurationSlow + " " + motionEaseInOut, "top " + motionDurationSlow + " " + motionEaseInOut, "color " + motionDurationSlow + " " + motionEaseInOut].join(','),
+      content: '""'
+    },
+    '&::before': {
+      transform: "rotate(45deg) translateY(-" + menuArrowOffset + ")"
+    },
+    '&::after': {
+      transform: "rotate(-45deg) translateY(" + menuArrowOffset + ")"
+    }
+  }), _ref5));
+}; // =============================== Base ===============================
+
+
+var getBaseStyle = function getBaseStyle(token) {
+  var _extends3, _extends4, _extends5, _extends6;
+
+  var antCls = token.antCls,
+      componentCls = token.componentCls,
+      fontSize = token.fontSize,
+      motionDurationSlow = token.motionDurationSlow,
+      motionDurationMid = token.motionDurationMid,
+      motionEaseInOut = token.motionEaseInOut,
+      lineHeight = token.lineHeight,
+      paddingXS = token.paddingXS,
+      padding = token.padding,
+      colorSplit = token.colorSplit,
+      lineWidth = token.lineWidth,
+      zIndexPopup = token.zIndexPopup,
+      borderRadiusLG = token.borderRadiusLG,
+      radiusSubMenuItem = token.radiusSubMenuItem,
+      menuArrowSize = token.menuArrowSize,
+      menuArrowOffset = token.menuArrowOffset,
+      lineType = token.lineType,
+      menuPanelMaskInset = token.menuPanelMaskInset;
+  return [// Misc
+  (0, _defineProperty2["default"])({
+    '': (0, _defineProperty2["default"])({}, "" + componentCls, (0, _extends7["default"])((0, _extends7["default"])({}, (0, _style.clearFix)()), (0, _defineProperty2["default"])({}, "&-hidden", {
+      display: 'none'
+    })))
+  }, componentCls + "-submenu-hidden", {
+    display: 'none'
+  }), (0, _defineProperty2["default"])({}, componentCls, (0, _extends7["default"])((0, _extends7["default"])((0, _extends7["default"])((0, _extends7["default"])((0, _extends7["default"])((0, _extends7["default"])((0, _extends7["default"])({}, (0, _style.resetComponent)(token)), (0, _style.clearFix)()), (_extends3 = {
+    marginBottom: 0,
+    paddingInlineStart: 0,
+    // Override default ul/ol
+    fontSize: fontSize,
+    lineHeight: 0,
+    listStyle: 'none',
+    outline: 'none',
+    transition: ["background " + motionDurationSlow, // Magic cubic here but smooth transition
+    "width " + motionDurationSlow + " cubic-bezier(0.2, 0, 0, 1) 0s"].join(',')
+  }, (0, _defineProperty2["default"])(_extends3, "ul, ol", {
+    margin: 0,
+    padding: 0,
+    listStyle: 'none'
+  }), (0, _defineProperty2["default"])(_extends3, "&-overflow", (0, _defineProperty2["default"])({
+    display: 'flex'
+  }, componentCls + "-item", {
+    flex: 'none'
+  })), (0, _defineProperty2["default"])(_extends3, componentCls + "-item, " + componentCls + "-submenu, " + componentCls + "-submenu-title", {
+    borderRadius: token.radiusItem
+  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-item-group-title", {
+    padding: paddingXS + "px " + padding + "px",
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    transition: "all " + motionDurationSlow
+  }), (0, _defineProperty2["default"])(_extends3, "&-horizontal " + componentCls + "-submenu", {
+    transition: ["border-color " + motionDurationSlow + " " + motionEaseInOut, "background " + motionDurationSlow + " " + motionEaseInOut].join(',')
+  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-submenu, " + componentCls + "-submenu-inline", {
+    transition: ["border-color " + motionDurationSlow + " " + motionEaseInOut, "background " + motionDurationSlow + " " + motionEaseInOut, "padding " + motionDurationMid + " " + motionEaseInOut].join(',')
+  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-submenu " + componentCls + "-sub", {
+    cursor: 'initial',
+    transition: ["background " + motionDurationSlow + " " + motionEaseInOut, "padding " + motionDurationSlow + " " + motionEaseInOut]
+  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-title-content", {
+    transition: "color " + motionDurationSlow
+  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-item a", {
+    '&::before': {
+      position: 'absolute',
+      inset: 0,
+      backgroundColor: 'transparent',
+      content: '""'
+    }
+  }), (0, _defineProperty2["default"])(_extends3, componentCls + "-item-divider", {
+    overflow: 'hidden',
+    lineHeight: 0,
+    borderColor: colorSplit,
+    borderStyle: lineType,
+    borderTopWidth: lineWidth,
+    marginBlock: lineWidth,
+    padding: 0,
+    '&-dashed': {
+      borderStyle: 'dashed'
+    }
+  }), _extends3)), genMenuItemStyle(token)), (_extends5 = {}, (0, _defineProperty2["default"])(_extends5, componentCls + "-item-group", (0, _defineProperty2["default"])({}, componentCls + "-item-group-list", (0, _defineProperty2["default"])({
+    margin: 0,
+    padding: 0
+  }, componentCls + "-item, " + componentCls + "-submenu-title", {
+    paddingInline: fontSize * 2 + "px " + padding + "px"
+  }))), (0, _defineProperty2["default"])(_extends5, '&-submenu', (0, _defineProperty2["default"])({
+    '&-popup': {
+      position: 'absolute',
+      zIndex: zIndexPopup,
+      background: 'transparent',
+      borderRadius: borderRadiusLG,
+      boxShadow: 'none',
+      transformOrigin: '0 0',
+      // https://github.com/ant-design/ant-design/issues/13955
+      '&::before': {
+        position: 'absolute',
+        inset: menuPanelMaskInset + "px 0 0",
+        zIndex: -1,
+        width: '100%',
+        height: '100%',
+        opacity: 0,
+        content: '""'
+      }
+    },
+    // https://github.com/ant-design/ant-design/issues/13955
+    '&-placement-rightTop::before': {
+      top: 0,
+      insetInlineStart: menuPanelMaskInset
+    }
+  }, "> " + componentCls, (0, _extends7["default"])((0, _extends7["default"])((0, _extends7["default"])({
+    borderRadius: borderRadiusLG
+  }, genMenuItemStyle(token)), genSubMenuArrowStyle(token)), (_extends4 = {}, (0, _defineProperty2["default"])(_extends4, componentCls + "-item, " + componentCls + "-submenu > " + componentCls + "-submenu-title", {
+    borderRadius: radiusSubMenuItem
+  }), (0, _defineProperty2["default"])(_extends4, componentCls + "-submenu-title::after", {
+    transition: "transform " + motionDurationSlow + " " + motionEaseInOut
+  }), _extends4)))), _extends5)), genSubMenuArrowStyle(token)), (_extends6 = {}, (0, _defineProperty2["default"])(_extends6, "&-inline-collapsed " + componentCls + "-submenu-arrow,\n        &-inline " + componentCls + "-submenu-arrow", {
+    // ↓
+    '&::before': {
+      transform: "rotate(-45deg) translateX(" + menuArrowOffset + ")"
+    },
+    '&::after': {
+      transform: "rotate(45deg) translateX(-" + menuArrowOffset + ")"
+    }
+  }), (0, _defineProperty2["default"])(_extends6, componentCls + "-submenu-open" + componentCls + "-submenu-inline > " + componentCls + "-submenu-title > " + componentCls + "-submenu-arrow", {
+    // ↑
+    transform: "translateY(-" + menuArrowSize * 0.2 + "px)",
+    '&::after': {
+      transform: "rotate(-45deg) translateX(-" + menuArrowOffset + ")"
+    },
+    '&::before': {
+      transform: "rotate(45deg) translateX(" + menuArrowOffset + ")"
+    }
+  }), _extends6))), // Integration with header element so menu items have the same height
+  (0, _defineProperty2["default"])({}, antCls + "-layout-header", (0, _defineProperty2["default"])({}, componentCls, {
+    lineHeight: 'inherit'
+  }))];
+}; // ============================== Export ==============================
+
+
+var _default = function _default(prefixCls, injectStyle) {
+  var useOriginHook = (0, _internal.genComponentStyleHook)('Menu', function (token, _ref14) {
+    var overrideComponentToken = _ref14.overrideComponentToken; // Dropdown will handle menu style self. We do not need to handle this.
+
+    if (injectStyle === false) {
+      return [];
+    }
+
+    var colorBgElevated = token.colorBgElevated,
+        colorPrimary = token.colorPrimary,
+        colorError = token.colorError,
+        colorErrorHover = token.colorErrorHover,
+        colorTextLightSolid = token.colorTextLightSolid,
+        colorTextSecondary = token.colorTextSecondary;
+    var controlHeightLG = token.controlHeightLG,
+        fontSize = token.fontSize;
+    var menuArrowSize = fontSize / 7 * 5; // Menu Token
+
+    var menuToken = (0, _internal.mergeToken)(token, {
+      menuItemHeight: controlHeightLG,
+      menuItemPaddingInline: token.margin,
+      menuArrowSize: menuArrowSize,
+      menuHorizontalHeight: controlHeightLG * 1.15,
+      menuArrowOffset: menuArrowSize * 0.25 + "px",
+      menuPanelMaskInset: -7,
+      menuSubMenuBg: colorBgElevated
+    });
+    var menuDarkToken = (0, _internal.mergeToken)(menuToken, {
+      colorItemText: new _tinycolor.TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
+      colorItemTextHover: colorTextLightSolid,
+      colorGroupTitle: colorTextSecondary,
+      colorItemTextSelected: colorTextLightSolid,
+      colorItemBg: '#001529',
+      colorSubItemBg: '#000c17',
+      colorItemBgActive: 'transparent',
+      colorItemBgSelected: colorPrimary,
+      colorActiveBarWidth: 0,
+      colorActiveBarHeight: 0,
+      colorActiveBarBorderSize: 0,
+      // Disabled
+      colorItemTextDisabled: new _tinycolor.TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      // Danger
+      colorDangerItemText: colorError,
+      colorDangerItemTextHover: colorErrorHover,
+      colorDangerItemTextSelected: colorTextLightSolid,
+      colorDangerItemBgActive: colorError,
+      colorDangerItemBgSelected: colorError,
+      menuSubMenuBg: '#001529'
+    }, (0, _extends7["default"])({}, overrideComponentToken));
+    return [// Basic
+    getBaseStyle(menuToken), // Horizontal
+    (0, _horizontal["default"])(menuToken), // Vertical
+    (0, _vertical["default"])(menuToken), // Theme
+    (0, _theme["default"])(menuToken, 'light'), (0, _theme["default"])(menuDarkToken, 'dark'), // RTL
+    (0, _rtl["default"])(menuToken), // Motion
+    (0, _motion.genCollapseMotion)(menuToken), (0, _motion.initSlideMotion)(menuToken, 'slide-up'), (0, _motion.initSlideMotion)(menuToken, 'slide-down'), (0, _motion.initZoomMotion)(menuToken, 'zoom-big')];
+  }, function (token) {
+    var colorPrimary = token.colorPrimary,
+        colorError = token.colorError,
+        colorTextDisabled = token.colorTextDisabled,
+        colorErrorBg = token.colorErrorBg,
+        colorText = token.colorText,
+        colorTextDescription = token.colorTextDescription,
+        colorBgContainer = token.colorBgContainer,
+        colorFillAlter = token.colorFillAlter,
+        colorFillContent = token.colorFillContent,
+        lineWidth = token.lineWidth,
+        lineWidthBold = token.lineWidthBold,
+        controlItemBgActiveHover = token.controlItemBgActiveHover,
+        colorBgTextHover = token.colorBgTextHover;
+    return {
+      dropdownWidth: 160,
+      zIndexPopup: token.zIndexPopupBase + 50,
+      radiusItem: token.borderRadiusLG,
+      radiusSubMenuItem: token.borderRadiusSM,
+      colorItemText: colorText,
+      colorItemTextHover: colorText,
+      colorItemTextHoverHorizontal: colorPrimary,
+      colorGroupTitle: colorTextDescription,
+      colorItemTextSelected: colorText,
+      colorItemTextSelectedHorizontal: colorPrimary,
+      colorItemBg: colorBgContainer,
+      colorItemBgHover: colorBgTextHover,
+      colorItemBgActive: colorFillContent,
+      colorSubItemBg: colorFillAlter,
+      colorItemBgSelected: controlItemBgActiveHover,
+      colorItemBgSelectedHorizontal: 'transparent',
+      colorActiveBarWidth: 0,
+      colorActiveBarHeight: lineWidthBold,
+      colorActiveBarBorderSize: lineWidth,
+      // Disabled
+      colorItemTextDisabled: colorTextDisabled,
+      // Danger
+      colorDangerItemText: colorError,
+      colorDangerItemTextHover: colorError,
+      colorDangerItemTextSelected: colorError,
+      colorDangerItemBgActive: colorErrorBg,
+      colorDangerItemBgSelected: colorErrorBg,
+      itemMarginInline: token.marginXXS
+    };
+  });
+  return useOriginHook(prefixCls);
+};
+
+exports["default"] = _default;

package/lib/menu/style/rtl.d.ts

@@ -0,0 +1,4 @@
+import type { MenuToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const getRTLStyle: GenerateStyle<MenuToken>;
+export default getRTLStyle;

package/lib/menu/style/rtl.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var getRTLStyle = function getRTLStyle(_ref) {
+  var _ref3;
+
+  var componentCls = _ref.componentCls,
+      menuArrowOffset = _ref.menuArrowOffset;
+  return _ref3 = {}, (0, _defineProperty2["default"])(_ref3, componentCls + "-rtl", {
+    direction: 'rtl'
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-submenu-rtl", {
+    transformOrigin: '100% 0'
+  }), (0, _defineProperty2["default"])(_ref3, componentCls + "-rtl" + componentCls + "-vertical,\n    " + componentCls + "-submenu-rtl " + componentCls + "-vertical", (0, _defineProperty2["default"])({}, componentCls + "-submenu-arrow", {
+    '&::before': {
+      transform: "rotate(-45deg) translateY(-" + menuArrowOffset + ")"
+    },
+    '&::after': {
+      transform: "rotate(45deg) translateY(" + menuArrowOffset + ")"
+    }
+  })), _ref3;
+};
+
+var _default = getRTLStyle;
+exports["default"] = _default;