@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/es/layout/components/TopNavHeader/index.js

@@ -1,7 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { ConfigProvider } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useMemo, useRef } from 'react';
 import { isNeedOpenHash, ProProvider } from "../../../provider";
 import { AppsLogoComponents } from "../AppsLogoComponents";
@@ -11,38 +9,43 @@ import { renderLogoAndTitle } from "../SiderMenu/SiderMenu";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var TopNavHeader = function TopNavHeader(props) {
-  var _token$layout12, _token$layout13, _token$layout14, _token$layout15, _token$layout16, _token$layout17, _token$layout18;
-  var ref = useRef(null);
-  var onMenuHeaderClick = props.onMenuHeaderClick,
-    contentWidth = props.contentWidth,
-    propsClassName = props.className,
-    style = props.style,
-    headerContentRender = props.headerContentRender,
-    layout = props.layout,
-    actionsRender = props.actionsRender;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var _useContext2 = useContext(ProProvider),
-    dark = _useContext2.dark;
-  var prefixCls = "".concat(props.prefixCls || getPrefixCls('pro'), "-top-nav-header");
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var renderKey = undefined;
+const TopNavHeader = props => {
+  const ref = useRef(null);
+  const {
+    onMenuHeaderClick,
+    contentWidth,
+    className: propsClassName,
+    style,
+    headerContentRender,
+    layout,
+    actionsRender
+  } = props;
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const {
+    dark
+  } = useContext(ProProvider);
+  const prefixCls = `${props.prefixCls || getPrefixCls('pro')}-top-nav-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  let renderKey = undefined;
   if (props.menuHeaderRender !== undefined) {
     renderKey = 'menuHeaderRender';
   } else if (layout === 'mix' || layout === 'top') {
     renderKey = 'headerTitleRender';
   }
-  var headerDom = renderLogoAndTitle(_objectSpread(_objectSpread({}, props), {}, {
+  const headerDom = renderLogoAndTitle({
+    ...props,
     collapsed: false
-  }), renderKey);
-  var _useContext3 = useContext(ProProvider),
-    token = _useContext3.token;
-  var contentDom = useMemo(function () {
-    var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _props$menuProps;
-    var defaultDom = /*#__PURE__*/_jsx(ConfigProvider // @ts-ignore
+  }, renderKey);
+  const {
+    token
+  } = useContext(ProProvider);
+  const contentDom = useMemo(() => {
+    const defaultDom = /*#__PURE__*/_jsx(ConfigProvider // @ts-ignore
     , {
       theme: {
         hashed: isNeedOpenHash(),
@@ -52,59 +55,66 @@ var TopNavHeader = function TopNavHeader(props) {
             bodyBg: 'transparent'
           },
           Menu: {
-            itemBg: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.colorBgHeader) || 'transparent',
-            subMenuItemBg: ((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgHeader) || 'transparent',
+            itemBg: token.layout?.header?.colorBgHeader || 'transparent',
+            subMenuItemBg: token.layout?.header?.colorBgHeader || 'transparent',
             itemBorderRadius: token.borderRadius,
-            itemSelectedBg: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
-            horizontalItemSelectedBg: ((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorBgMenuItemSelected) || (token === null || token === void 0 ? void 0 : token.colorBgTextHover),
+            itemSelectedBg: token.layout?.header?.colorBgMenuItemSelected || token?.colorBgTextHover,
+            horizontalItemSelectedBg: token.layout?.header?.colorBgMenuItemSelected || token?.colorBgTextHover,
             activeBarWidth: 0,
             activeBarHeight: 0,
             activeBarBorderWidth: 0,
-            itemColor: ((_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.header) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenu) || (token === null || token === void 0 ? void 0 : token.colorTextSecondary),
-            horizontalItemHoverColor: ((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.header) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorTextMenuActive) || (token === null || token === void 0 ? void 0 : token.colorText),
-            horizontalItemSelectedColor: ((_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.header) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorTextMenuSelected) || (token === null || token === void 0 ? void 0 : token.colorTextBase),
+            itemColor: token.layout?.header?.colorTextMenu || token?.colorTextSecondary,
+            horizontalItemHoverColor: token.layout?.header?.colorTextMenuActive || token?.colorText,
+            horizontalItemSelectedColor: token.layout?.header?.colorTextMenuSelected || token?.colorTextBase,
             horizontalItemBorderRadius: 4,
-            itemHoverColor: ((_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.header) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorTextMenuActive) || 'rgba(0, 0, 0, 0.85)',
-            horizontalItemHoverBg: ((_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.header) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorBgMenuItemHover) || 'rgba(0, 0, 0, 0.04)',
-            itemSelectedColor: ((_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.header) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuSelected) || 'rgba(0, 0, 0, 1)',
-            popupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated,
+            itemHoverColor: token.layout?.header?.colorTextMenuActive || 'rgba(0, 0, 0, 0.85)',
+            horizontalItemHoverBg: token.layout?.header?.colorBgMenuItemHover || 'rgba(0, 0, 0, 0.04)',
+            itemSelectedColor: token.layout?.header?.colorTextMenuSelected || 'rgba(0, 0, 0, 1)',
+            popupBg: token?.colorBgElevated,
             darkSubMenuItemBg: 'transparent',
-            darkPopupBg: token === null || token === void 0 ? void 0 : token.colorBgElevated
+            darkPopupBg: token?.colorBgElevated
           }
         },
         token: {
-          colorBgElevated: ((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.header) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.colorBgHeader) || 'transparent'
+          colorBgElevated: token.layout?.header?.colorBgHeader || 'transparent'
         }
       },
-      children: /*#__PURE__*/_jsx(BaseMenu, _objectSpread(_objectSpread(_objectSpread({
-        theme: dark ? 'dark' : 'light'
-      }, props), {}, {
-        className: "".concat(prefixCls, "-base-menu ").concat(hashId).trim()
-      }, props.menuProps), {}, {
-        style: _objectSpread({
-          width: '100%'
-        }, (_props$menuProps = props.menuProps) === null || _props$menuProps === void 0 ? void 0 : _props$menuProps.style),
+      children: /*#__PURE__*/_jsx(BaseMenu, {
+        theme: dark ? 'dark' : 'light',
+        ...props,
+        className: `${prefixCls}-base-menu ${hashId}`.trim(),
+        ...props.menuProps,
+        style: {
+          width: '100%',
+          ...props.menuProps?.style
+        },
         collapsed: false,
         menuRenderType: "header",
         mode: "horizontal"
-      }))
+      })
     });
     if (headerContentRender) {
       return headerContentRender(props, defaultDom);
     }
     return defaultDom;
-  }, [(_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.header) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.colorBgHeader, (_token$layout13 = token.layout) === null || _token$layout13 === void 0 || (_token$layout13 = _token$layout13.header) === null || _token$layout13 === void 0 ? void 0 : _token$layout13.colorBgMenuItemSelected, (_token$layout14 = token.layout) === null || _token$layout14 === void 0 || (_token$layout14 = _token$layout14.header) === null || _token$layout14 === void 0 ? void 0 : _token$layout14.colorBgMenuItemHover, (_token$layout15 = token.layout) === null || _token$layout15 === void 0 || (_token$layout15 = _token$layout15.header) === null || _token$layout15 === void 0 ? void 0 : _token$layout15.colorTextMenu, (_token$layout16 = token.layout) === null || _token$layout16 === void 0 || (_token$layout16 = _token$layout16.header) === null || _token$layout16 === void 0 ? void 0 : _token$layout16.colorTextMenuActive, (_token$layout17 = token.layout) === null || _token$layout17 === void 0 || (_token$layout17 = _token$layout17.header) === null || _token$layout17 === void 0 ? void 0 : _token$layout17.colorTextMenuSelected, (_token$layout18 = token.layout) === null || _token$layout18 === void 0 || (_token$layout18 = _token$layout18.header) === null || _token$layout18 === void 0 ? void 0 : _token$layout18.colorBgMenuElevated, token.borderRadius, token === null || token === void 0 ? void 0 : token.colorBgTextHover, token === null || token === void 0 ? void 0 : token.colorTextSecondary, token === null || token === void 0 ? void 0 : token.colorText, token === null || token === void 0 ? void 0 : token.colorTextBase, token.colorBgElevated, dark, props, prefixCls, hashId, headerContentRender]);
+  }, [token.layout?.header?.colorBgHeader, token.layout?.header?.colorBgMenuItemSelected, token.layout?.header?.colorBgMenuItemHover, token.layout?.header?.colorTextMenu, token.layout?.header?.colorTextMenuActive, token.layout?.header?.colorTextMenuSelected, token.layout?.header?.colorBgMenuElevated, token.borderRadius, token?.colorBgTextHover, token?.colorTextSecondary, token?.colorText, token?.colorTextBase, token.colorBgElevated, dark, props, prefixCls, hashId, headerContentRender]);
   return wrapSSR( /*#__PURE__*/_jsx("div", {
-    className: classNames(prefixCls, hashId, propsClassName, _defineProperty({}, "".concat(prefixCls, "-light"), true)),
+    className: clsx(prefixCls, hashId, propsClassName, {
+      [`${prefixCls}-light`]: true
+    }),
     style: style,
     children: /*#__PURE__*/_jsxs("div", {
       ref: ref,
-      className: classNames("".concat(prefixCls, "-main"), hashId, _defineProperty({}, "".concat(prefixCls, "-wide"), contentWidth === 'Fixed' && layout === 'top')),
+      className: clsx(`${prefixCls}-main`, hashId, {
+        [`${prefixCls}-wide`]: contentWidth === 'Fixed' && layout === 'top'
+      }),
       children: [headerDom && /*#__PURE__*/_jsxs("div", {
-        className: classNames("".concat(prefixCls, "-main-left ").concat(hashId)),
+        className: clsx(`${prefixCls}-main-left ${hashId}`),
         onClick: onMenuHeaderClick,
-        children: [/*#__PURE__*/_jsx(AppsLogoComponents, _objectSpread({}, props)), /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefixCls, "-logo ").concat(hashId).trim(),
+        children: [/*#__PURE__*/_jsx(AppsLogoComponents, {
+          ...props
+        }), /*#__PURE__*/_jsx("div", {
+          className: `${prefixCls}-logo ${hashId}`.trim(),
           id: "logo",
           children: headerDom
         }, "logo")]
@@ -112,11 +122,12 @@ var TopNavHeader = function TopNavHeader(props) {
         style: {
           flex: 1
         },
-        className: "".concat(prefixCls, "-menu ").concat(hashId).trim(),
+        className: `${prefixCls}-menu ${hashId}`.trim(),
         children: contentDom
-      }), (actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, _objectSpread(_objectSpread({}, props), {}, {
+      }), (actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, {
+        ...props,
         prefixCls: prefixCls
-      }))]
+      })]
     })
   }));
 };

package/es/layout/components/TopNavHeader/style.d.ts

@@ -4,6 +4,6 @@ export interface TopNavHeaderToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/es/layout/components/TopNavHeader/style.js

@@ -1,76 +1,77 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genTopNavHeaderStyle = function genTopNavHeaderStyle(token) {
-  var _token$layout, _token$layout2;
-  return _defineProperty({}, token.componentCls, {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'transparent',
-    '.anticon': {
-      color: 'inherit'
-    },
-    '&-main': {
-      display: 'flex',
-      height: '100%',
-      paddingInlineStart: '16px',
-      '&-left': _defineProperty({
-        display: 'flex',
-        alignItems: 'center'
-      }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
-        marginInlineEnd: 16,
-        marginInlineStart: -8
-      })
-    },
-    '&-wide': {
-      maxWidth: 1152,
-      margin: '0 auto'
-    },
-    '&-logo': {
+const genTopNavHeaderStyle = token => {
+  return {
+    [token.componentCls]: {
       position: 'relative',
-      display: 'flex',
+      width: '100%',
       height: '100%',
-      alignItems: 'center',
-      overflow: 'hidden',
-      '> *:first-child': {
+      backgroundColor: 'transparent',
+      '.anticon': {
+        color: 'inherit'
+      },
+      '&-main': {
         display: 'flex',
-        alignItems: 'center',
-        minHeight: '22px',
-        fontSize: '22px'
+        height: '100%',
+        paddingInlineStart: '16px',
+        '&-left': {
+          display: 'flex',
+          alignItems: 'center',
+          [`${token.proComponentsCls}-layout-apps-icon`]: {
+            marginInlineEnd: 16,
+            marginInlineStart: -8
+          }
+        }
+      },
+      '&-wide': {
+        maxWidth: 1152,
+        margin: '0 auto'
       },
-      '> *:first-child > img': {
-        display: 'inline-block',
-        height: '32px',
-        verticalAlign: 'middle'
+      '&-logo': {
+        position: 'relative',
+        display: 'flex',
+        height: '100%',
+        alignItems: 'center',
+        overflow: 'hidden',
+        '> *:first-child': {
+          display: 'flex',
+          alignItems: 'center',
+          minHeight: '22px',
+          fontSize: '22px'
+        },
+        '> *:first-child > img': {
+          display: 'inline-block',
+          height: '32px',
+          verticalAlign: 'middle'
+        },
+        '> *:first-child > h1': {
+          display: 'inline-block',
+          marginBlock: 0,
+          marginInline: 0,
+          lineHeight: '24px',
+          marginInlineStart: 6,
+          fontWeight: '600',
+          fontSize: '16px',
+          color: token.layout?.header?.colorHeaderTitle,
+          verticalAlign: 'top'
+        }
       },
-      '> *:first-child > h1': {
-        display: 'inline-block',
-        marginBlock: 0,
-        marginInline: 0,
-        lineHeight: '24px',
-        marginInlineStart: 6,
-        fontWeight: '600',
-        fontSize: '16px',
-        color: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.colorHeaderTitle,
-        verticalAlign: 'top'
+      '&-menu': {
+        minWidth: 0,
+        display: 'flex',
+        alignItems: 'center',
+        paddingInline: 6,
+        paddingBlock: 6,
+        lineHeight: `${Math.max((token.layout?.header?.heightLayoutHeader || 56) - 12, 40)}px`
       }
-    },
-    '&-menu': {
-      minWidth: 0,
-      display: 'flex',
-      alignItems: 'center',
-      paddingInline: 6,
-      paddingBlock: 6,
-      lineHeight: "".concat(Math.max((((_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.heightLayoutHeader) || 56) - 12, 40), "px")
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayoutTopNavHeader', function (token) {
-    var topNavHeaderToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutTopNavHeader', token => {
+    const topNavHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genTopNavHeaderStyle(topNavHeaderToken)];
   });
 }

package/es/layout/context/RouteContext.js

@@ -1,2 +1,2 @@
 import { createContext } from 'react';
-export var RouteContext = /*#__PURE__*/createContext({});
+export const RouteContext = /*#__PURE__*/createContext({});

package/es/layout/defaultSettings.d.ts

@@ -86,6 +86,12 @@ export type PureSettings = {
          * @name 取消自动关闭菜单
          */
         autoClose?: false;
+        /**
+         * @name 菜单收起时的宽度
+         *
+         * @example 设置收起宽度为 80px menu={{ collapsedWidth: 80 }}
+         */
+        collapsedWidth?: number;
     };
     /**
      * 设置为 false，在 layout 中只展示 pageName，而不是 pageName - title

package/es/layout/defaultSettings.js

@@ -1,4 +1,4 @@
-var defaultSettings = {
+const defaultSettings = {
   navTheme: 'light',
   layout: 'side',
   contentWidth: 'Fluid',

package/es/layout/getPageTitle.js

@@ -1,10 +1,9 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { match } from 'path-to-regexp';
-export var matchParamsPath = function matchParamsPath(pathname, breadcrumb, breadcrumbMap) {
+export const matchParamsPath = (pathname, breadcrumb, breadcrumbMap) => {
   // Internal logic use breadcrumbMap to ensure the order
   // 内部逻辑使用 breadcrumbMap 来确保查询顺序
   if (breadcrumbMap) {
-    var pathKey = _toConsumableArray(breadcrumbMap.keys()).find(function (key) {
+    const pathKey = [...breadcrumbMap.keys()].find(key => {
       try {
         if (key.startsWith('http')) {
           return false;
@@ -23,9 +22,9 @@ export var matchParamsPath = function matchParamsPath(pathname, breadcrumb, brea
   // External uses use breadcrumb
   // 外部用户使用 breadcrumb 参数
   if (breadcrumb) {
-    var _pathKey = Object.keys(breadcrumb).find(function (key) {
+    const pathKey = Object.keys(breadcrumb).find(key => {
       try {
-        if (key !== null && key !== void 0 && key.startsWith('http')) {
+        if (key?.startsWith('http')) {
           return false;
         }
         return match(key)(pathname);
@@ -34,8 +33,8 @@ export var matchParamsPath = function matchParamsPath(pathname, breadcrumb, brea
         return false;
       }
     });
-    if (_pathKey) {
-      return breadcrumb[_pathKey];
+    if (pathKey) {
+      return breadcrumb[pathKey];
     }
   }
   return {
@@ -48,19 +47,19 @@ export var matchParamsPath = function matchParamsPath(pathname, breadcrumb, brea
  * @param props
  * @param ignoreTitle
  */
-export var getPageTitleInfo = function getPageTitleInfo(props, ignoreTitle) {
-  var _props$pathname = props.pathname,
-    pathname = _props$pathname === void 0 ? '/' : _props$pathname,
-    breadcrumb = props.breadcrumb,
-    breadcrumbMap = props.breadcrumbMap,
-    formatMessage = props.formatMessage,
-    title = props.title,
-    _props$menu = props.menu,
-    menu = _props$menu === void 0 ? {
+export const getPageTitleInfo = (props, ignoreTitle) => {
+  const {
+    pathname = '/',
+    breadcrumb,
+    breadcrumbMap,
+    formatMessage,
+    title,
+    menu = {
       locale: false
-    } : _props$menu;
-  var pageTitle = ignoreTitle ? '' : title || '';
-  var currRouterData = matchParamsPath(pathname, breadcrumb, breadcrumbMap);
+    }
+  } = props;
+  const pageTitle = ignoreTitle ? '' : title || '';
+  const currRouterData = matchParamsPath(pathname, breadcrumb, breadcrumbMap);
   if (!currRouterData) {
     return {
       title: pageTitle,
@@ -68,7 +67,7 @@ export var getPageTitleInfo = function getPageTitleInfo(props, ignoreTitle) {
       pageName: pageTitle
     };
   }
-  var pageName = currRouterData.name;
+  let pageName = currRouterData.name;
   if (menu.locale !== false && currRouterData.locale && formatMessage) {
     pageName = formatMessage({
       id: currRouterData.locale || '',
@@ -86,15 +85,15 @@ export var getPageTitleInfo = function getPageTitleInfo(props, ignoreTitle) {
     return {
       title: pageName,
       id: currRouterData.locale || '',
-      pageName: pageName
+      pageName
     };
   }
   return {
-    title: "".concat(pageName, " - ").concat(title),
+    title: `${pageName} - ${title}`,
     id: currRouterData.locale || '',
-    pageName: pageName
+    pageName
   };
 };
-export var getPageTitle = function getPageTitle(props, ignoreTitle) {
+export const getPageTitle = (props, ignoreTitle) => {
   return getPageTitleInfo(props, ignoreTitle).title;
 };

package/es/layout/locales/en-US.js

@@ -1,3 +1,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import settingDrawer from "./en-US/settingDrawer";
-export default _objectSpread({}, settingDrawer);
+export default {
+  ...settingDrawer
+};

package/es/layout/locales/index.js

@@ -4,20 +4,20 @@ import itITLocal from "./it-IT";
 import koKRLocal from "./ko-KR";
 import zhLocal from "./zh-CN";
 import zhTWLocal from "./zh-TW";
-var locales = {
+const locales = {
   'zh-CN': zhLocal,
   'zh-TW': zhTWLocal,
   'en-US': enUSLocal,
   'it-IT': itITLocal,
   'ko-KR': koKRLocal
 };
-export var getLanguage = function getLanguage() {
+export const getLanguage = () => {
   // support ssr
   if (!isBrowser()) return 'zh-CN';
-  var lang = window.localStorage.getItem('umi_locale');
+  const lang = window.localStorage.getItem('umi_locale');
   return lang || window.g_locale || navigator.language;
 };
-export var gLocaleObject = function gLocaleObject() {
-  var gLocale = getLanguage();
+export const gLocaleObject = () => {
+  const gLocale = getLanguage();
   return locales[gLocale] || locales['zh-CN'];
 };

package/es/layout/locales/it-IT.js

@@ -1,3 +1,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import settingDrawer from "./it-IT/settingDrawer";
-export default _objectSpread({}, settingDrawer);
+export default {
+  ...settingDrawer
+};

package/es/layout/locales/ko-KR.js

@@ -1,3 +1,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import settingDrawer from "./ko-KR/settingDrawer";
-export default _objectSpread({}, settingDrawer);
+export default {
+  ...settingDrawer
+};

package/es/layout/locales/zh-CN.js

@@ -1,3 +1,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import settingDrawer from "./zh-CN/settingDrawer";
-export default _objectSpread({}, settingDrawer);
+export default {
+  ...settingDrawer
+};

package/es/layout/locales/zh-TW.js

@@ -1,3 +1,4 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import settingDrawer from "./zh-TW/settingDrawer";
-export default _objectSpread({}, settingDrawer);
+export default {
+  ...settingDrawer
+};

package/es/layout/style/index.d.ts

@@ -4,6 +4,6 @@ export interface ProLayoutToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/es/layout/style/index.js

@@ -1,49 +1,55 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../provider";
-var genProLayoutStyle = function genProLayoutStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4;
-  return _defineProperty(_defineProperty({}, "".concat(token.antCls, "-layout"), {
-    backgroundColor: 'transparent !important'
-  }), token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& ".concat(token.antCls, "-layout"), {
-    display: 'flex',
-    backgroundColor: 'transparent',
-    width: '100%'
-  }), "".concat(token.componentCls, "-content"), {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    backgroundColor: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.pageContainer) === null || _token$layout === void 0 ? void 0 : _token$layout.colorBgPageContainer) || 'transparent',
-    position: 'relative',
-    paddingBlock: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.pageContainer) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingBlockPageContainerContent,
-    paddingInline: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.pageContainer) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingInlinePageContainerContent,
-    '&-has-page-container': {
-      padding: 0
+const genProLayoutStyle = token => {
+  return {
+    [`${token.antCls}-layout`]: {
+      backgroundColor: 'transparent !important'
+    },
+    [token.componentCls]: {
+      [`& ${token.antCls}-layout`]: {
+        display: 'flex',
+        backgroundColor: 'transparent',
+        width: '100%'
+      },
+      [`${token.componentCls}-content`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        backgroundColor: token.layout?.pageContainer?.colorBgPageContainer || 'transparent',
+        position: 'relative',
+        paddingBlock: token.layout?.pageContainer?.paddingBlockPageContainerContent,
+        paddingInline: token.layout?.pageContainer?.paddingInlinePageContainerContent,
+        '&-has-page-container': {
+          padding: 0
+        }
+      },
+      [`${token.componentCls}-container`]: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 0,
+        minHeight: 0,
+        backgroundColor: 'transparent'
+      },
+      [`${token.componentCls}-bg-list`]: {
+        pointerEvents: 'none',
+        position: 'fixed',
+        overflow: 'hidden',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        zIndex: 0,
+        height: '100%',
+        width: '100%',
+        background: token.layout?.bgLayout
+      }
     }
-  }), "".concat(token.componentCls, "-container"), {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    minWidth: 0,
-    minHeight: 0,
-    backgroundColor: 'transparent'
-  }), "".concat(token.componentCls, "-bg-list"), {
-    pointerEvents: 'none',
-    position: 'fixed',
-    overflow: 'hidden',
-    insetBlockStart: 0,
-    insetInlineStart: 0,
-    zIndex: 0,
-    height: '100%',
-    width: '100%',
-    background: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.bgLayout
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ProLayout', function (token) {
-    var proLayoutToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayout', token => {
+    const proLayoutToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProLayoutStyle(proLayoutToken)];
   });
 }