@ant-design/pro-components 3.1.3-1 → 3.1.5-0

package/lib/form/layouts/StepsForm/index.js

@@ -148,8 +148,8 @@ function StepsForm(props) {
     });
   }, [onCurrentChangeCallback]);
   const layoutRender = (0, _react.useMemo)(() => {
-    return StepsLayoutStrategy[stepsProps?.direction || 'horizontal'];
-  }, [stepsProps?.direction]);
+    return StepsLayoutStrategy[stepsProps?.orientation || 'horizontal'];
+  }, [stepsProps?.orientation]);
   const lastStep = (0, _react.useMemo)(() => step === formArray.length - 1, [formArray.length, step]);
 
   /**
@@ -215,22 +215,13 @@ function StepsForm(props) {
         return stepItemProps;
       })
     };
-
-    // Convert deprecated direction to orientation
-    const processedStepsProps = stepsProps ? {
-      ...stepsProps
-    } : {};
-    if ('direction' in processedStepsProps) {
-      processedStepsProps.orientation = processedStepsProps.direction;
-      delete processedStepsProps.direction;
-    }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixCls}-steps-container ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-steps-container`, hashId),
       style: {
         maxWidth: Math.min(formArray.length * 320, 1160)
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Steps, {
-        ...processedStepsProps,
+        ...stepsProps,
         ...itemsProps,
         current: step,
         onChange: undefined
@@ -354,7 +345,7 @@ function StepsForm(props) {
     return stepsDom;
   }, [formArray, stepsDom, stepsRender]);
   const formContainer = (0, _react.useMemo)(() => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: `${prefixCls}-container ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-container`, hashId),
     style: containerStyle,
     children: [formDom, stepsFormRender ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
       children: submitterDom

package/lib/layout/ProLayout.d.ts

@@ -50,7 +50,7 @@ export type ProLayoutProps = GlobalTypes & {
      * @example 设置 logo 为 false 不显示 logo  logo={false}
      * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
      * */
-    logo?: React.ReactNode | JSX.Element | WithFalse<() => React.ReactNode | JSX.Element>;
+    logo?: React.ReactNode | React.JSX.Element | WithFalse<() => React.ReactNode | React.JSX.Element>;
     /**
      * @name 页面切换的时候触发
      *

package/lib/layout/ProLayout.js

@@ -234,7 +234,6 @@ const BaseProLayout = props => {
   });
   (0, _react.useEffect)(() => {
     setMenuLoading(isLoading);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
   const {
     cache
@@ -243,7 +242,6 @@ const BaseProLayout = props => {
     return () => {
       if (cache instanceof Map) cache.delete(defaultId);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const menuInfoData = (0, _react.useMemo)(() => (0, _getMenuData.getMenuData)(data || route?.children || route?.routes || [], menu, formatMessage, menuDataRender), [formatMessage, menu, menuDataRender, data, route?.children]);
   const {
@@ -406,7 +404,6 @@ const BaseProLayout = props => {
   /** 页面切换的时候触发 */
   (0, _react.useEffect)(() => {
     props.onPageChange?.(props.location);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname, location.pathname?.search]);
   const [hasFooterToolbar, setHasFooterToolbar] = (0, _react.useState)(false);
   /**
@@ -467,9 +464,7 @@ const BaseProLayout = props => {
           flexDirection: siderMenuDom ? 'row' : undefined,
           ...style
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider
-        // @ts-ignore
-        , {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
           theme: {
             hashed: (0, _provider.isNeedOpenHash)(),
             token: {
@@ -500,7 +495,7 @@ const BaseProLayout = props => {
           children: siderMenuDom
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           style: genLayoutStyle,
-          className: `${proLayoutClassName}-container ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${proLayoutClassName}-container`, hashId),
           children: [headerDom, /*#__PURE__*/(0, _jsxRuntime.jsx)(_WrapContent.WrapContent, {
             hasPageContainer: hasPageContainer,
             isChildrenLayout: isChildrenLayout,

package/lib/layout/components/AppsLogoComponents/DefaultContent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultContent = void 0;
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _index = require("./index");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,15 +17,15 @@ const DefaultContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultContent, {
               hashId: hashId,
@@ -35,7 +36,7 @@ const DefaultContent = props => {
           }, index);
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

package/lib/layout/components/AppsLogoComponents/SimpleContent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderLogo = exports.SimpleContent = void 0;
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -49,15 +50,15 @@ const SimpleContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: (0, _clsx.clsx)(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SimpleContent, {
               hashId: hashId,
@@ -68,7 +69,7 @@ const SimpleContent = props => {
           }, index);
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

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

@@ -10,6 +10,10 @@ var _simple = require("./simple");
 const genAppsLogoComponentsStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       '&-icon': {
         display: 'inline-flex',
         alignItems: 'center',

package/lib/layout/components/FooterToolbar/index.d.ts

@@ -9,7 +9,7 @@ export type FooterToolbarProps = {
     className?: string;
     renderContent?: (props: FooterToolbarProps & RouteContextType & {
         leftWidth?: string;
-    }, dom: JSX.Element) => ReactNode;
+    }, dom: React.JSX.Element) => ReactNode;
     prefixCls?: string;
     stylish?: GenerateStyle<FooterToolBarToken>;
     children?: React.ReactNode;

package/lib/layout/components/FooterToolbar/index.js

@@ -15,8 +15,6 @@ var _index = require("../../index");
 var _style = require("./style");
 var _stylish = require("./style/stylish");
 var _jsxRuntime = require("react/jsx-runtime");
-/* eslint-disable react-hooks/exhaustive-deps */
-
 const FooterToolbar = props => {
   const {
     children,
@@ -52,7 +50,6 @@ const FooterToolbar = props => {
       return '100%';
     }
     return isMobile ? '100%' : `calc(100% - ${siderWidth}px)`;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value.collapsed, value.hasSiderMenu, value.isMobile, value.siderWidth]);
   const containerDom = (0, _react.useMemo)(() => {
     if (typeof window === 'undefined' || typeof document === 'undefined') return null;
@@ -64,10 +61,10 @@ const FooterToolbar = props => {
   });
   const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${baseClassName}-left ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-left`, hashId),
       children: extra
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${baseClassName}-right ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-right`, hashId),
       children: children
     })]
   });
@@ -81,7 +78,6 @@ const FooterToolbar = props => {
     return () => {
       value?.setHasFooterToolbar?.(false);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const renderDom = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _clsx.clsx)(className, hashId, baseClassName, {

package/lib/layout/components/GlobalFooter/index.js

@@ -30,9 +30,9 @@ const GlobalFooter = ({
     className: (0, _clsx.clsx)(baseClassName, hashId, className),
     style: style,
     children: [links && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${baseClassName}-list ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-list`, hashId),
       children: links.map(link => /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        className: `${baseClassName}-list-link ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${baseClassName}-list-link`, hashId),
         title: link.key,
         target: link.blankTarget ? '_blank' : '_self',
         href: link.href,
@@ -40,7 +40,7 @@ const GlobalFooter = ({
         children: link.title
       }, link.key))
     }), copyright && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${baseClassName}-copyright ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-copyright`, hashId),
       children: copyright
     })]
   }));

package/lib/layout/components/GlobalHeader/ActionsContent.js

@@ -63,14 +63,14 @@ const ActionsContent = ({
     const doms = actionsRender && actionsRender?.(restParams);
     if (!doms && !avatarDom) return null;
     if (!Array.isArray(doms)) return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-header-actions`, hashId),
       children: [doms, avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
     return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-header-actions`, hashId),
       children: [doms.filter(Boolean).map((dom, index) => {
         let hideHover = false;
         // 如果配置了 hideHover 就不展示 hover 效果了
@@ -78,13 +78,13 @@ const ActionsContent = ({
           hideHover = !!dom?.props?.['aria-hidden'];
         }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx.clsx)(`${prefixCls}-header-actions-item ${hashId}`, {
+          className: (0, _clsx.clsx)(`${prefixCls}-header-actions-item`, hashId, {
             [`${prefixCls}-header-actions-hover`]: !hideHover
           }),
           children: dom
         }, index);
       }), avatarDom && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
@@ -95,7 +95,7 @@ const ActionsContent = ({
   }, 160);
   const contentRender = rightActionsRender;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${prefixCls}-right-content ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-right-content`, hashId),
     style: {
       minWidth: rightSize,
       height: '100%'
@@ -121,7 +121,6 @@ const ActionsContent = ({
           children: contentRender ? contentRender({
             ...props,
             // 测试专用
-            //@ts-ignore
             rightContentSize: rightSize
           }) : null
         })

package/lib/layout/components/GlobalHeader/index.js

@@ -82,7 +82,7 @@ const GlobalHeader = props => {
       ...style
     },
     children: [isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: `${baseClassName}-collapsed-button ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-collapsed-button`, hashId),
       onClick: () => {
         onCollapse?.(!collapsed);
       },

package/lib/layout/components/GridContent/index.js

@@ -42,7 +42,7 @@ const GridContent = props => {
     }),
     style: style,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixCls}-grid-content-children ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-grid-content-children`, hashId),
       children: children
     })
   }));

package/lib/layout/components/Header/index.js

@@ -102,9 +102,7 @@ const DefaultHeader = props => {
   });
   if (layout === 'side' && !isMobile) return null;
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.ConfigProvider
-    // @ts-ignore
-    , {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.ConfigProvider, {
       theme: {
         hashed: (0, _provider.isNeedOpenHash)(),
         components: {

package/lib/layout/components/Help/ProHelpPanel.js

@@ -8,6 +8,7 @@ exports.SelectKeyProvide = exports.ProHelpPanel = void 0;
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _HelpProvide = require("./HelpProvide");
@@ -82,7 +83,7 @@ const ProHelpPanel = ({
   const parentKey = (0, _react.useMemo)(() => dataSourceKeyMap.get(selectedKey)?.parentKey, [dataSourceKeyMap, selectedKey]);
   const defaultExtraActions = {
     collapsePanelAction: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ProfileOutlined, {
         title: "collapse panel",
         onClick: () => {
@@ -91,8 +92,8 @@ const ProHelpPanel = ({
       })
     }),
     helpSelectAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.ProHelpSelect, {
-      iconClassName: `${className}-actions-item`,
-      className: `${hashId} ${className}-actions-input`,
+      iconClassName: (0, _clsx.clsx)(`${className}-actions-item`, hashId),
+      className: (0, _clsx.clsx)(hashId, `${className}-actions-input`),
       value: selectedKey,
       onChange: (value, item) => {
         setSelectedKey(value);
@@ -100,7 +101,7 @@ const ProHelpPanel = ({
       }
     }),
     closeAction: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {
         title: "close panel",
         onClick: () => {
@@ -111,7 +112,7 @@ const ProHelpPanel = ({
   };
   const extraDomList = () => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-actions ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-actions`, hashId),
       children: extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, defaultExtraActions.closeAction) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null]
       })
@@ -137,7 +138,7 @@ const ProHelpPanel = ({
       size: "small",
       extra: extraDomList(),
       children: [showLeftPanel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${hashId} ${className}-left-panel `,
+        className: (0, _clsx.clsx)(hashId, `${className}-left-panel`),
         style: {
           height
         },
@@ -167,7 +168,7 @@ const ProHelpPanel = ({
             }
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
-            className: `${hashId} ${className}-left-panel-menu`,
+            className: (0, _clsx.clsx)(hashId, `${className}-left-panel-menu`),
             openKeys: [parentKey, openKey],
             onOpenChange: keys => {
               setOpenKey(keys.at(-1) || '');
@@ -194,17 +195,17 @@ const ProHelpPanel = ({
           })
         })
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${hashId} ${className}-content-panel`,
+        className: (0, _clsx.clsx)(hashId, `${className}-content-panel`),
         style: {
           height
         },
         children: [selectedKey ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProHelpContentPanel.ProHelpContentPanel, {
           parentItem: dataSourceKeyMap.get(parentKey),
-          className: `${className}-content-render`,
+          className: (0, _clsx.clsx)(`${className}-content-render`, hashId),
           selectedKey: selectedKey,
           onScroll: key => setSelectedKey(key)
         }) : null, footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${hashId} ${className}-footer`,
+          className: (0, _clsx.clsx)(hashId, `${className}-footer`),
           children: footer
         }) : null]
       })]

package/lib/layout/components/PageContainer/index.js

@@ -41,7 +41,7 @@ const renderFooter = ({
 }) => {
   if (Array.isArray(tabList) || tabBarExtraContent) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
-      className: `${prefixedClassName}-tabs ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixedClassName}-tabs`, hashId),
       activeKey: tabActiveKey,
       onChange: key => {
         if (onTabChange) {
@@ -64,16 +64,16 @@ const renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${prefixedClassName}-detail ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixedClassName}-detail`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixedClassName}-main ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixedClassName}-main`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${prefixedClassName}-row ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixedClassName}-row`, hashId),
         children: [content && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${prefixedClassName}-content ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${prefixedClassName}-content`, hashId),
           children: content
         }), extraContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${prefixedClassName}-extraContent ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${prefixedClassName}-extraContent`, hashId),
           children: extraContent
         })]
       })
@@ -161,7 +161,7 @@ const memoRenderPageHeader = props => {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageHeader.PageHeader, {
     ...pageHeaderProps,
-    className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixedClassName}-warp-page-header`, hashId),
     breadcrumb: breadcrumbRender === false ? undefined : {
       ...pageHeaderProps.breadcrumb,
       ...value.breadcrumbProps
@@ -196,7 +196,6 @@ const PageContainerBase = props => {
     return () => {
       value?.setHasPageContainer?.(num => num - 1);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const {
     token
@@ -283,9 +282,9 @@ const PageContainerBase = props => {
       (0, _jsxRuntime.jsx)(_antd.Affix, {
         offsetTop: value.hasHeader && value.fixedHeader ? token.layout?.header?.heightLayoutHeader : 1,
         ...affixProps,
-        className: `${basePageContainer}-affix ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${basePageContainer}-affix`, hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${basePageContainer}-warp ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${basePageContainer}-warp`, hashId),
           children: pageHeaderDom
         })
       }) : pageHeaderDom, renderContentDom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContent.GridContent, {

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

@@ -9,6 +9,10 @@ const [sm, md, lg, xl] = [576, 768, 992, 1200].map(bp => `@media (max-width: ${b
 const genPageContainerStyle = token => {
   return {
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       position: 'relative',
       '&-children-container': {
         paddingBlockStart: 0,

package/lib/layout/components/PageHeader/index.js

@@ -17,13 +17,13 @@ const renderBack = (prefixCls, hashId, backIcon, onBack) => {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${prefixCls}-back ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-back`, hashId),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "button",
       onClick: e => {
         onBack?.(e);
       },
-      className: `${prefixCls}-back-button ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-back-button`, hashId),
       "aria-label": "back",
       children: backIcon
     })
@@ -61,26 +61,26 @@ const renderTitle = (prefixCls, props, direction = 'ltr', hashId) => {
   const backIconDom = renderBack(prefixCls, hashId, backIcon, onBack);
   const hasTitle = backIconDom || avatar || hasHeading;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: headingPrefixCls + ' ' + hashId,
+    className: (0, _clsx.clsx)(headingPrefixCls, hashId),
     children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: `${headingPrefixCls}-left ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${headingPrefixCls}-left`, hashId),
       children: [backIconDom, avatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
         className: (0, _clsx.clsx)(`${headingPrefixCls}-avatar`, hashId, avatar.className),
         ...avatar
       }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${headingPrefixCls}-title ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${headingPrefixCls}-title`, hashId),
         title: typeof title === 'string' ? title : undefined,
         children: title
       }), subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${headingPrefixCls}-sub-title ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${headingPrefixCls}-sub-title`, hashId),
         title: typeof subTitle === 'string' ? subTitle : undefined,
         children: subTitle
       }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${headingPrefixCls}-tags ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${headingPrefixCls}-tags`, hashId),
         children: tags
       })]
     }), extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: `${headingPrefixCls}-extra ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${headingPrefixCls}-extra`, hashId),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
         children: extra
       })
@@ -90,14 +90,14 @@ const renderTitle = (prefixCls, props, direction = 'ltr', hashId) => {
 const renderFooter = (prefixCls, footer, hashId) => {
   if (footer) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${prefixCls}-footer ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${prefixCls}-footer`, hashId),
       children: footer
     });
   }
   return null;
 };
 const renderChildren = (prefixCls, children, hashId) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  className: `${prefixCls}-content ${hashId}`.trim(),
+  className: (0, _clsx.clsx)(`${prefixCls}-content`, hashId),
   children: children
 });
 const PageHeader = props => {

package/lib/layout/components/SettingDrawer/BlockCheckbox.js

@@ -25,18 +25,17 @@ const BlockCheckbox = ({
         className: (0, _clsx.clsx)(hashId, `${baseClassName}-item`, `${baseClassName}-item-${item.key}`, `${baseClassName}-${configType}-item`),
         onClick: () => onChange(item.key),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckOutlined, {
-          className: `${baseClassName}-selectIcon ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-selectIcon`, hashId),
           style: {
             display: value === item.key ? 'block' : 'none'
           }
         }), item?.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}-icon ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-icon`, hashId),
           children: item.icon
         }) : null]
       })
     }, item.key));
     return domList;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, list?.length, onChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _clsx.clsx)(baseClassName, hashId),

package/lib/layout/components/SettingDrawer/LayoutChange.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderLayoutSettingItem = exports.LayoutSetting = void 0;
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _defaultSettings = require("../../defaultSettings");
 var _index = require("./index");
@@ -44,7 +45,7 @@ const LayoutSetting = ({
     fixSiderbar
   } = settings || _defaultSettings.defaultSettings;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
-    className: `${prefixCls}-list ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-list`, hashId),
     split: false,
     dataSource: [{
       title: formatMessage({
@@ -54,7 +55,7 @@ const LayoutSetting = ({
       action: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Select, {
         value: contentWidth || 'Fixed',
         size: "small",
-        className: `content-width ${hashId}`.trim(),
+        className: (0, _clsx.clsx)('content-width', hashId),
         onSelect: value => {
           changeSetting('contentWidth', value);
         },

package/lib/layout/components/SettingDrawer/RegionalChange.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RegionalSetting = void 0;
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _index = require("./index");
 var _LayoutChange = require("./LayoutChange");
@@ -19,7 +20,7 @@ const RegionalSetting = ({
   const formatMessage = (0, _index.getFormatMessage)();
   const regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
-    className: `${prefixCls}-list ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-list`, hashId),
     split: false,
     renderItem: _LayoutChange.renderLayoutSettingItem,
     dataSource: regionalSetting.map(key => {
@@ -29,7 +30,7 @@ const RegionalSetting = ({
         }),
         action: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Switch, {
           size: "small",
-          className: `regional-${key} ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`regional-${key}`, hashId),
           checked: settings[`${key}Render`] || settings[`${key}Render`] === undefined,
           onChange: checked => changeSetting(`${key}Render`, checked === true ? undefined : false)
         })