@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/layout/components/SiderMenu/style/index.js

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.proLayoutTitleHide = void 0;
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _cssinjs = require("@ant-design/cssinjs");
 var _provider = require("../../../../provider");
-var proLayoutTitleHide = exports.proLayoutTitleHide = new _cssinjs.Keyframes('antBadgeLoadingCircle', {
+const proLayoutTitleHide = exports.proLayoutTitleHide = new _cssinjs.Keyframes('antBadgeLoadingCircle', {
   '0%': {
     display: 'none',
     opacity: 0,
@@ -24,170 +21,190 @@ var proLayoutTitleHide = exports.proLayoutTitleHide = new _cssinjs.Keyframes('an
     opacity: 1
   }
 });
-var genSiderMenuStyle = function genSiderMenuStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _token$layout12;
-  return (0, _defineProperty2.default)({}, "".concat(token.proComponentsCls, "-layout"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-layout-sider").concat(token.componentCls), {
-    background: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground) || 'transparent'
-  }), token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    position: 'relative',
-    boxSizing: 'border-box',
-    '&-menu': {
-      position: 'relative',
-      zIndex: 10,
-      minHeight: '100%'
-    }
-  }, "& ".concat(token.antCls, "-layout-sider-children"), {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlineLayoutMenu,
-    paddingBlock: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockLayoutMenu,
-    borderInlineEnd: "1px solid ".concat(token.colorSplit),
-    marginInlineEnd: -1
-  }), "".concat(token.antCls, "-menu"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item-group-title"), {
-    fontSize: token.fontSizeSM,
-    paddingBottom: 4
-  }), "".concat(token.antCls, "-menu-item:not(").concat(token.antCls, "-menu-item-selected):hover"), {
-    color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextMenuItemHover
-  })), '&-logo', {
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingInline: 12,
-    paddingBlock: 16,
-    color: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenu,
-    cursor: 'pointer',
-    borderBlockEnd: "1px solid ".concat((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.sider) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorMenuItemDivider),
-    '> a': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: 22,
-      fontSize: 22,
-      '> img': {
-        display: 'inline-block',
-        height: 22,
-        verticalAlign: 'middle'
-      },
-      '> h1': {
-        display: 'inline-block',
-        height: 22,
-        marginBlock: 0,
-        marginInlineEnd: 0,
-        marginInlineStart: 6,
-        color: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.sider) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorTextMenuTitle,
-        animationName: proLayoutTitleHide,
-        animationDuration: '.4s',
-        animationTimingFunction: 'ease',
-        fontWeight: 600,
-        fontSize: 16,
-        lineHeight: '22px',
-        verticalAlign: 'middle'
-      }
-    },
-    '&-collapsed': (0, _defineProperty2.default)({
-      flexDirection: 'column-reverse',
-      margin: 0,
-      padding: 12
-    }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
-      marginBlockEnd: 8,
-      fontSize: 16,
-      transition: 'font-size 0.2s ease-in-out,color 0.2s ease-in-out'
-    })
-  }), '&-actions', {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBlock: 4,
-    marginInline: 0,
-    color: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.sider) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorTextMenu,
-    '&-collapsed': {
-      flexDirection: 'column-reverse',
-      paddingBlock: 0,
-      paddingInline: 8,
-      fontSize: 16,
-      transition: 'font-size 0.3s ease-in-out'
-    },
-    '&-list': {
-      color: (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.sider) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorTextMenuSecondary,
-      '&-collapsed': {
-        marginBlockEnd: 8,
-        animationName: 'none'
+const genSiderMenuStyle = token => {
+  return {
+    [`${token.proComponentsCls}-layout`]: {
+      [`${token.antCls}-layout-sider${token.componentCls}`]: {
+        background: token.layout?.sider?.colorMenuBackground || 'transparent'
       },
-      '&-item': {
-        paddingInline: 6,
-        paddingBlock: 6,
-        lineHeight: '16px',
-        fontSize: 16,
-        cursor: 'pointer',
-        borderRadius: token.borderRadius,
-        '&:hover': {
-          background: token.colorBgTextHover
+      [token.componentCls]: {
+        position: 'relative',
+        boxSizing: 'border-box',
+        '&-menu': {
+          position: 'relative',
+          zIndex: 10,
+          minHeight: '100%'
+        },
+        [`& ${token.antCls}-layout-sider-children`]: {
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          paddingInline: token.layout?.sider?.paddingInlineLayoutMenu,
+          paddingBlock: token.layout?.sider?.paddingBlockLayoutMenu,
+          borderInlineEnd: `1px solid ${token.colorSplit}`,
+          marginInlineEnd: -1
+        },
+        [`${token.antCls}-menu`]: {
+          [`${token.antCls}-menu-item-group-title`]: {
+            fontSize: token.fontSizeSM,
+            paddingBottom: 4
+          },
+          [`${token.antCls}-menu-item:not(${token.antCls}-menu-item-selected):hover`]: {
+            color: token.layout?.sider?.colorTextMenuItemHover
+          }
+        },
+        '&-logo': {
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingInline: 12,
+          paddingBlock: 16,
+          color: token.layout?.sider?.colorTextMenu,
+          cursor: 'pointer',
+          borderBlockEnd: `1px solid ${token.layout?.sider?.colorMenuItemDivider}`,
+          '> a': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: 22,
+            fontSize: 22,
+            '> img': {
+              display: 'inline-block',
+              height: 22,
+              verticalAlign: 'middle'
+            },
+            '> h1': {
+              display: 'inline-block',
+              height: 22,
+              marginBlock: 0,
+              marginInlineEnd: 0,
+              marginInlineStart: 6,
+              color: token.layout?.sider?.colorTextMenuTitle,
+              animationName: proLayoutTitleHide,
+              animationDuration: '.4s',
+              animationTimingFunction: 'ease',
+              fontWeight: 600,
+              fontSize: 16,
+              lineHeight: '22px',
+              verticalAlign: 'middle'
+            }
+          },
+          '&-collapsed': {
+            flexDirection: 'column-reverse',
+            margin: 0,
+            padding: 12,
+            [`${token.proComponentsCls}-layout-apps-icon`]: {
+              marginBlockEnd: 8,
+              fontSize: 16,
+              transition: 'font-size 0.2s ease-in-out,color 0.2s ease-in-out'
+            }
+          }
+        },
+        '&-actions': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBlock: 4,
+          marginInline: 0,
+          color: token.layout?.sider?.colorTextMenu,
+          '&-collapsed': {
+            flexDirection: 'column-reverse',
+            paddingBlock: 0,
+            paddingInline: 8,
+            fontSize: 16,
+            transition: 'font-size 0.3s ease-in-out'
+          },
+          '&-list': {
+            color: token.layout?.sider?.colorTextMenuSecondary,
+            '&-collapsed': {
+              marginBlockEnd: 8,
+              animationName: 'none'
+            },
+            '&-item': {
+              paddingInline: 6,
+              paddingBlock: 6,
+              lineHeight: '16px',
+              fontSize: 16,
+              cursor: 'pointer',
+              borderRadius: token.borderRadius,
+              '&:hover': {
+                background: token.colorBgTextHover
+              }
+            }
+          },
+          '&-avatar': {
+            fontSize: 14,
+            paddingInline: 8,
+            paddingBlock: 8,
+            display: 'flex',
+            alignItems: 'center',
+            gap: token.marginXS,
+            borderRadius: token.borderRadius,
+            '& *': {
+              cursor: 'pointer'
+            },
+            '&:hover': {
+              background: token.colorBgTextHover
+            }
+          }
+        },
+        '&-hide-menu-collapsed': {
+          insetInlineStart: `-${token.proLayoutCollapsedWidth - 12}px`,
+          position: 'absolute'
+        },
+        '&-extra': {
+          marginBlockEnd: 16,
+          marginBlock: 0,
+          marginInline: 16,
+          '&-no-logo': {
+            marginBlockStart: 16
+          }
+        },
+        '&-links': {
+          width: '100%',
+          ul: {
+            height: 'auto'
+          }
+        },
+        '&-link-menu': {
+          border: 'none',
+          boxShadow: 'none',
+          background: 'transparent'
+        },
+        '&-footer': {
+          color: token.layout?.sider?.colorTextMenuSecondary,
+          paddingBlockEnd: 16,
+          fontSize: token.fontSize,
+          animationName: proLayoutTitleHide,
+          animationDuration: '.4s',
+          animationTimingFunction: 'ease'
         }
-      }
-    },
-    '&-avatar': {
-      fontSize: 14,
-      paddingInline: 8,
-      paddingBlock: 8,
-      display: 'flex',
-      alignItems: 'center',
-      gap: token.marginXS,
-      borderRadius: token.borderRadius,
-      '& *': {
-        cursor: 'pointer'
       },
-      '&:hover': {
-        background: token.colorBgTextHover
+      [`${token.componentCls}${token.componentCls}-fixed`]: {
+        position: 'fixed',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        zIndex: '100',
+        height: '100%',
+        '&-mix': {
+          height: `calc(100% - ${token.layout?.header?.heightLayoutHeader || 56}px)`,
+          insetBlockStart: `${token.layout?.header?.heightLayoutHeader || 56}px`
+        }
       }
     }
-  }), '&-hide-menu-collapsed', {
-    insetInlineStart: "-".concat(token.proLayoutCollapsedWidth - 12, "px"),
-    position: 'absolute'
-  }), '&-extra', {
-    marginBlockEnd: 16,
-    marginBlock: 0,
-    marginInline: 16,
-    '&-no-logo': {
-      marginBlockStart: 16
-    }
-  }), '&-links', {
-    width: '100%',
-    ul: {
-      height: 'auto'
-    }
-  }), '&-link-menu', {
-    border: 'none',
-    boxShadow: 'none',
-    background: 'transparent'
-  }), '&-footer', {
-    color: (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.sider) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuSecondary,
-    paddingBlockEnd: 16,
-    fontSize: token.fontSize,
-    animationName: proLayoutTitleHide,
-    animationDuration: '.4s',
-    animationTimingFunction: 'ease'
-  })), "".concat(token.componentCls).concat(token.componentCls, "-fixed"), {
-    position: 'fixed',
-    insetBlockStart: 0,
-    insetInlineStart: 0,
-    zIndex: '100',
-    height: '100%',
-    '&-mix': {
-      height: "calc(100% - ".concat(((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.header) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.heightLayoutHeader) || 56, "px)"),
-      insetBlockStart: "".concat(((_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.header) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.heightLayoutHeader) || 56, "px")
-    }
-  }));
+  };
 };
-function useStyle(prefixCls, _ref2) {
-  var proLayoutCollapsedWidth = _ref2.proLayoutCollapsedWidth;
-  return (0, _provider.useStyle)('ProLayoutSiderMenu', function (token) {
-    var siderMenuToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      proLayoutCollapsedWidth: proLayoutCollapsedWidth
-    });
+function useStyle(prefixCls, {
+  proLayoutCollapsedWidth
+}) {
+  return (0, _provider.useStyle)('ProLayoutSiderMenu', token => {
+    const siderMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      proLayoutCollapsedWidth
+    };
     return [genSiderMenuStyle(siderMenuToken)];
   });
 }

package/lib/layout/components/SiderMenu/style/menu.js

@@ -1,124 +1,161 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _provider = require("../../../../provider");
-var genProLayoutBaseMenuStyle = function genProLayoutBaseMenuStyle(token, mode) {
-  var _token$layout, _token$layout2;
-  var menuToken = mode.includes('horizontal') ? (_token$layout = token.layout) === null || _token$layout === void 0 ? void 0 : _token$layout.header : (_token$layout2 = token.layout) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.sider;
-  return (0, _objectSpread4.default)((0, _objectSpread4.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    background: 'transparent',
-    color: menuToken === null || menuToken === void 0 ? void 0 : menuToken.colorTextMenu,
-    border: 'none'
-  }, "".concat(token.componentCls, "-menu-item"), {
-    transition: 'none !important'
-  }), "".concat(token.componentCls, "-submenu-has-icon"), (0, _defineProperty2.default)({}, "> ".concat(token.antCls, "-menu-sub"), {
-    paddingInlineStart: 10
-  })), "".concat(token.antCls, "-menu-title-content"), {
-    width: '100%',
-    height: '100%',
-    display: 'inline-flex'
-  }), "".concat(token.antCls, "-menu-title-content"), {
-    '&:first-child': {
-      width: '100%'
+const genProLayoutBaseMenuStyle = (token, mode) => {
+  const menuToken = mode.includes('horizontal') ? token.layout?.header : token.layout?.sider;
+  return {
+    [`${token.componentCls}`]: {
+      background: 'transparent',
+      color: menuToken?.colorTextMenu,
+      border: 'none',
+      [`${token.componentCls}-menu-item`]: {
+        transition: 'none !important'
+      },
+      [`${token.componentCls}-submenu-has-icon`]: {
+        [`> ${token.antCls}-menu-sub`]: {
+          paddingInlineStart: 10
+        }
+      },
+      [`${token.antCls}-menu-title-content`]: {
+        width: '100%',
+        height: '100%',
+        display: 'inline-flex',
+        '&:first-child': {
+          width: '100%'
+        }
+      },
+      [`${token.componentCls}-item-icon`]: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      [`&&-collapsed`]: {
+        [`${token.antCls}-menu-item, 
+        ${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-item, 
+        ${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu > ${token.antCls}-menu-submenu-title, 
+        ${token.antCls}-menu-submenu > ${token.antCls}-menu-submenu-title`]: {
+          paddingInline: '0 !important',
+          marginBlock: '4px !important'
+        },
+        [`${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title, 
+        ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title`]: {
+          backgroundColor: menuToken?.colorBgMenuItemSelected,
+          borderRadius: token.borderRadiusLG
+        },
+        [`${token.componentCls}-group`]: {
+          [`${token.antCls}-menu-item-group-title`]: {
+            paddingInline: 0
+          }
+        }
+      },
+      '&-item-title': {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: token.marginXS,
+        width: '100%',
+        [`${token.componentCls}-item-text`]: {
+          maxWidth: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          wordBreak: 'break-all',
+          whiteSpace: 'nowrap'
+        },
+        '&-collapsed': {
+          minWidth: 40,
+          height: 40,
+          [`${token.componentCls}-item-icon`]: {
+            height: '16px',
+            width: '16px',
+            lineHeight: '16px !important',
+            '.anticon': {
+              lineHeight: '16px !important',
+              height: '16px'
+            }
+          },
+          [`${token.componentCls}-item-text-has-icon`]: {
+            display: 'none !important'
+          }
+        },
+        '&-collapsed-level-0': {
+          flexDirection: 'column',
+          justifyContent: 'center'
+        },
+        [`&${token.componentCls}-group-item-title`]: {
+          gap: token.marginXS,
+          height: 18,
+          overflow: 'hidden'
+        },
+        [`&${token.componentCls}-item-collapsed-show-title`]: {
+          lineHeight: '16px',
+          gap: 0,
+          [`&${token.componentCls}-item-title-collapsed`]: {
+            display: 'flex',
+            [`${token.componentCls}-item-icon`]: {
+              height: '16px',
+              width: '16px',
+              lineHeight: '16px !important',
+              '.anticon': {
+                lineHeight: '16px!important',
+                height: '16px'
+              }
+            },
+            [`${token.componentCls}-item-text`]: {
+              opacity: '1 !important',
+              display: 'inline !important',
+              textAlign: 'center',
+              fontSize: 12,
+              height: 12,
+              lineHeight: '12px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              width: '100%',
+              margin: 0,
+              padding: 0,
+              marginBlockStart: 4
+            }
+          }
+        }
+      },
+      '&-group': {
+        [`${token.antCls}-menu-item-group-title`]: {
+          fontSize: 12,
+          color: token.colorTextLabel,
+          '.anticon': {
+            marginInlineEnd: 8
+          }
+        }
+      },
+      '&-group-divider': {
+        color: token.colorTextSecondary,
+        fontSize: 12,
+        lineHeight: 20
+      }
+    },
+    ...(mode.includes('horizontal') ? {} : {
+      [`${token.antCls}-menu-submenu${token.antCls}-menu-submenu-popup`]: {
+        [`${token.componentCls}-item-title`]: {
+          alignItems: 'flex-start'
+        }
+      }
+    }),
+    [`${token.antCls}-menu-submenu-popup`]: {
+      backgroundColor: 'rgba(255, 255, 255, 0.42)',
+      '-webkit-backdrop-filter': 'blur(8px)',
+      backdropFilter: 'blur(8px)'
     }
-  }), "".concat(token.componentCls, "-item-icon"), {
-    display: 'flex',
-    alignItems: 'center'
-  }), "&&-collapsed", (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item, \n        ").concat(token.antCls, "-menu-item-group > ").concat(token.antCls, "-menu-item-group-list > ").concat(token.antCls, "-menu-item, \n        ").concat(token.antCls, "-menu-item-group > ").concat(token.antCls, "-menu-item-group-list > ").concat(token.antCls, "-menu-submenu > ").concat(token.antCls, "-menu-submenu-title, \n        ").concat(token.antCls, "-menu-submenu > ").concat(token.antCls, "-menu-submenu-title"), {
-    paddingInline: '0 !important',
-    marginBlock: '4px !important'
-  }), "".concat(token.antCls, "-menu-item-group > ").concat(token.antCls, "-menu-item-group-list > ").concat(token.antCls, "-menu-submenu-selected > ").concat(token.antCls, "-menu-submenu-title, \n        ").concat(token.antCls, "-menu-submenu-selected > ").concat(token.antCls, "-menu-submenu-title"), {
-    backgroundColor: menuToken === null || menuToken === void 0 ? void 0 : menuToken.colorBgMenuItemSelected,
-    borderRadius: token.borderRadiusLG
-  }), "".concat(token.componentCls, "-group"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item-group-title"), {
-    paddingInline: 0
-  }))), '&-item-title', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: token.marginXS
-  }, "".concat(token.componentCls, "-item-text"), {
-    maxWidth: '100%',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    wordBreak: 'break-all',
-    whiteSpace: 'nowrap'
-  }), '&-collapsed', (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    minWidth: 40,
-    height: 40
-  }, "".concat(token.componentCls, "-item-icon"), {
-    height: '16px',
-    width: '16px',
-    lineHeight: '16px !important',
-    '.anticon': {
-      lineHeight: '16px !important',
-      height: '16px'
-    }
-  }), "".concat(token.componentCls, "-item-text-has-icon"), {
-    display: 'none !important'
-  })), '&-collapsed-level-0', {
-    flexDirection: 'column',
-    justifyContent: 'center'
-  }), "&".concat(token.componentCls, "-group-item-title"), {
-    gap: token.marginXS,
-    height: 18,
-    overflow: 'hidden'
-  }), "&".concat(token.componentCls, "-item-collapsed-show-title"), (0, _defineProperty2.default)({
-    lineHeight: '16px',
-    gap: 0
-  }, "&".concat(token.componentCls, "-item-title-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    display: 'flex'
-  }, "".concat(token.componentCls, "-item-icon"), {
-    height: '16px',
-    width: '16px',
-    lineHeight: '16px !important',
-    '.anticon': {
-      lineHeight: '16px!important',
-      height: '16px'
-    }
-  }), "".concat(token.componentCls, "-item-text"), {
-    opacity: '1 !important',
-    display: 'inline !important',
-    textAlign: 'center',
-    fontSize: 12,
-    height: 12,
-    lineHeight: '12px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    width: '100%',
-    margin: 0,
-    padding: 0,
-    marginBlockStart: 4
-  })))), '&-group', (0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item-group-title"), {
-    fontSize: 12,
-    color: token.colorTextLabel,
-    '.anticon': {
-      marginInlineEnd: 8
-    }
-  })), '&-group-divider', {
-    color: token.colorTextSecondary,
-    fontSize: 12,
-    lineHeight: 20
-  })), mode.includes('horizontal') ? {} : (0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-submenu").concat(token.antCls, "-menu-submenu-popup"), (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-item-title"), {
-    alignItems: 'flex-start'
-  }))), {}, (0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-submenu-popup"), {
-    backgroundColor: 'rgba(255, 255, 255, 0.42)',
-    '-webkit-backdrop-filter': 'blur(8px)',
-    backdropFilter: 'blur(8px)'
-  }));
+  };
 };
 function useStyle(prefixCls, mode) {
-  return (0, _provider.useStyle)('ProLayoutBaseMenu' + mode, function (token) {
-    var proLayoutMenuToken = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutBaseMenu' + mode, token => {
+    const proLayoutMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProLayoutBaseMenuStyle(proLayoutMenuToken, mode || 'inline')];
   });
 }

package/lib/layout/components/SiderMenu/style/stylish.js

@@ -1,22 +1,25 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStylish = useStylish;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _provider = require("../../../../provider");
-function useStylish(prefixCls, _ref) {
-  var stylish = _ref.stylish,
-    proLayoutCollapsedWidth = _ref.proLayoutCollapsedWidth;
-  return (0, _provider.useStyle)('ProLayoutSiderMenuStylish', function (token) {
-    var siderMenuToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      proLayoutCollapsedWidth: proLayoutCollapsedWidth
-    });
+function useStylish(prefixCls, {
+  stylish,
+  proLayoutCollapsedWidth
+}) {
+  return (0, _provider.useStyle)('ProLayoutSiderMenuStylish', token => {
+    const siderMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      proLayoutCollapsedWidth
+    };
     if (!stylish) return [];
-    return [(0, _defineProperty2.default)({}, "div".concat(token.proComponentsCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(siderMenuToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(siderMenuToken)))];
+    return [{
+      [`div${token.proComponentsCls}-layout`]: {
+        [`${siderMenuToken.componentCls}`]: stylish?.(siderMenuToken)
+      }
+    }];
   });
 }