@ant-design/pro-components 3.1.4-0 → 3.1.5-0

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

@@ -208,7 +208,7 @@ function StepsForm(props) {
       })
     };
     return /*#__PURE__*/_jsx("div", {
-      className: `${prefixCls}-steps-container ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-steps-container`, hashId),
       style: {
         maxWidth: Math.min(formArray.length * 320, 1160)
       },
@@ -337,7 +337,7 @@ function StepsForm(props) {
     return stepsDom;
   }, [formArray, stepsDom, stepsRender]);
   const formContainer = useMemo(() => /*#__PURE__*/_jsxs("div", {
-    className: `${prefixCls}-container ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-container`, hashId),
     style: containerStyle,
     children: [formDom, stepsFormRender ? null : /*#__PURE__*/_jsx(Space, {
       children: submitterDom

package/es/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/es/layout/ProLayout.js

@@ -490,7 +490,7 @@ const BaseProLayout = props => {
           children: siderMenuDom
         }), /*#__PURE__*/_jsxs("div", {
           style: genLayoutStyle,
-          className: `${proLayoutClassName}-container ${hashId}`.trim(),
+          className: clsx(`${proLayoutClassName}-container`, hashId),
           children: [headerDom, /*#__PURE__*/_jsx(WrapContent, {
             hasPageContainer: hasPageContainer,
             isChildrenLayout: isChildrenLayout,

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

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { defaultRenderLogo } from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,15 +11,15 @@ export const DefaultContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/_jsx("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: clsx(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/_jsx("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: clsx(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: clsx(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/_jsx(DefaultContent, {
               hashId: hashId,
@@ -29,7 +30,7 @@ export const DefaultContent = props => {
           }, index);
         }
         return /*#__PURE__*/_jsx("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

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

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import React from 'react';
 import { isUrl } from "../../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,15 +43,15 @@ export const SimpleContent = props => {
     itemClick
   } = props;
   return /*#__PURE__*/_jsx("div", {
-    className: `${baseClassName}-content ${hashId}`.trim(),
+    className: clsx(`${baseClassName}-content`, hashId),
     children: /*#__PURE__*/_jsx("ul", {
-      className: `${baseClassName}-content-list ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-content-list`, hashId),
       children: appList?.map((app, index) => {
         if (app?.children?.length) {
           return /*#__PURE__*/_jsxs("div", {
-            className: `${baseClassName}-content-list-item-group ${hashId}`.trim(),
+            className: clsx(`${baseClassName}-content-list-item-group`, hashId),
             children: [/*#__PURE__*/_jsx("div", {
-              className: `${baseClassName}-content-list-item-group-title ${hashId}`.trim(),
+              className: clsx(`${baseClassName}-content-list-item-group-title`, hashId),
               children: app.title
             }), /*#__PURE__*/_jsx(SimpleContent, {
               hashId: hashId,
@@ -61,7 +62,7 @@ export const SimpleContent = props => {
           }, index);
         }
         return /*#__PURE__*/_jsx("li", {
-          className: `${baseClassName}-content-list-item ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-content-list-item`, hashId),
           onClick: e => {
             e.stopPropagation();
             itemClick?.(app);

package/es/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/es/layout/components/FooterToolbar/index.js

@@ -56,10 +56,10 @@ const FooterToolbar = props => {
   });
   const dom = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-left ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-left`, hashId),
       children: extra
     }), /*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-right ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-right`, hashId),
       children: children
     })]
   });

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

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

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

@@ -58,14 +58,14 @@ export const ActionsContent = ({
     const doms = actionsRender && actionsRender?.(restParams);
     if (!doms && !avatarDom) return null;
     if (!Array.isArray(doms)) return wrapSSR( /*#__PURE__*/_jsxs("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-header-actions`, hashId),
       children: [doms, avatarDom && /*#__PURE__*/_jsx("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
     return wrapSSR( /*#__PURE__*/_jsxs("div", {
-      className: `${prefixCls}-header-actions ${hashId}`.trim(),
+      className: clsx(`${prefixCls}-header-actions`, hashId),
       children: [doms.filter(Boolean).map((dom, index) => {
         let hideHover = false;
         // 如果配置了 hideHover 就不展示 hover 效果了
@@ -73,13 +73,13 @@ export const ActionsContent = ({
           hideHover = !!dom?.props?.['aria-hidden'];
         }
         return /*#__PURE__*/_jsx("div", {
-          className: clsx(`${prefixCls}-header-actions-item ${hashId}`, {
+          className: clsx(`${prefixCls}-header-actions-item`, hashId, {
             [`${prefixCls}-header-actions-hover`]: !hideHover
           }),
           children: dom
         }, index);
       }), avatarDom && /*#__PURE__*/_jsx("span", {
-        className: `${prefixCls}-header-actions-avatar ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-header-actions-avatar`, hashId),
         children: avatarDom
       })]
     }));
@@ -90,7 +90,7 @@ export const ActionsContent = ({
   }, 160);
   const contentRender = rightActionsRender;
   return /*#__PURE__*/_jsx("div", {
-    className: `${prefixCls}-right-content ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-right-content`, hashId),
     style: {
       minWidth: rightSize,
       height: '100%'

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

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

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

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

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

@@ -1,6 +1,7 @@
 import { CloseOutlined, ProfileOutlined } from '@ant-design/icons';
 import { useControlledState } from '@rc-component/util';
 import { Card, ConfigProvider, Menu } from 'antd';
+import { clsx } from 'clsx';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { ProProvider, isNeedOpenHash } from "../../../provider";
 import { ProHelpProvide } from "./HelpProvide";
@@ -77,7 +78,7 @@ export const ProHelpPanel = ({
   const parentKey = useMemo(() => dataSourceKeyMap.get(selectedKey)?.parentKey, [dataSourceKeyMap, selectedKey]);
   const defaultExtraActions = {
     collapsePanelAction: /*#__PURE__*/_jsx("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: clsx(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/_jsx(ProfileOutlined, {
         title: "collapse panel",
         onClick: () => {
@@ -86,8 +87,8 @@ export const ProHelpPanel = ({
       })
     }),
     helpSelectAction: /*#__PURE__*/_jsx(ProHelpSelect, {
-      iconClassName: `${className}-actions-item`,
-      className: `${hashId} ${className}-actions-input`,
+      iconClassName: clsx(`${className}-actions-item`, hashId),
+      className: clsx(hashId, `${className}-actions-input`),
       value: selectedKey,
       onChange: (value, item) => {
         setSelectedKey(value);
@@ -95,7 +96,7 @@ export const ProHelpPanel = ({
       }
     }),
     closeAction: /*#__PURE__*/_jsx("div", {
-      className: `${className}-actions-item ${hashId}`.trim(),
+      className: clsx(`${className}-actions-item`, hashId),
       children: /*#__PURE__*/_jsx(CloseOutlined, {
         title: "close panel",
         onClick: () => {
@@ -106,7 +107,7 @@ export const ProHelpPanel = ({
   };
   const extraDomList = () => {
     return /*#__PURE__*/_jsx("div", {
-      className: `${className}-actions ${hashId}`.trim(),
+      className: clsx(`${className}-actions`, hashId),
       children: extraRender ? extraRender(defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, defaultExtraActions.closeAction) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [defaultExtraActions.collapsePanelAction, defaultExtraActions.helpSelectAction, onClose ? defaultExtraActions.closeAction : null]
       })
@@ -132,7 +133,7 @@ export const ProHelpPanel = ({
       size: "small",
       extra: extraDomList(),
       children: [showLeftPanel ? /*#__PURE__*/_jsx("div", {
-        className: `${hashId} ${className}-left-panel `,
+        className: clsx(hashId, `${className}-left-panel`),
         style: {
           height
         },
@@ -162,7 +163,7 @@ export const ProHelpPanel = ({
             }
           },
           children: /*#__PURE__*/_jsx(Menu, {
-            className: `${hashId} ${className}-left-panel-menu`,
+            className: clsx(hashId, `${className}-left-panel-menu`),
             openKeys: [parentKey, openKey],
             onOpenChange: keys => {
               setOpenKey(keys.at(-1) || '');
@@ -189,17 +190,17 @@ export const ProHelpPanel = ({
           })
         })
       }) : null, /*#__PURE__*/_jsxs("div", {
-        className: `${hashId} ${className}-content-panel`,
+        className: clsx(hashId, `${className}-content-panel`),
         style: {
           height
         },
         children: [selectedKey ? /*#__PURE__*/_jsx(ProHelpContentPanel, {
           parentItem: dataSourceKeyMap.get(parentKey),
-          className: `${className}-content-render`,
+          className: clsx(`${className}-content-render`, hashId),
           selectedKey: selectedKey,
           onScroll: key => setSelectedKey(key)
         }) : null, footer ? /*#__PURE__*/_jsx("div", {
-          className: `${hashId} ${className}-footer`,
+          className: clsx(hashId, `${className}-footer`),
           children: footer
         }) : null]
       })]

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

@@ -36,7 +36,7 @@ const renderFooter = ({
 }) => {
   if (Array.isArray(tabList) || tabBarExtraContent) {
     return /*#__PURE__*/_jsx(Tabs, {
-      className: `${prefixedClassName}-tabs ${hashId}`.trim(),
+      className: clsx(`${prefixedClassName}-tabs`, hashId),
       activeKey: tabActiveKey,
       onChange: key => {
         if (onTabChange) {
@@ -59,16 +59,16 @@ const renderPageHeader = (content, extraContent, prefixedClassName, hashId) => {
     return null;
   }
   return /*#__PURE__*/_jsx("div", {
-    className: `${prefixedClassName}-detail ${hashId}`.trim(),
+    className: clsx(`${prefixedClassName}-detail`, hashId),
     children: /*#__PURE__*/_jsx("div", {
-      className: `${prefixedClassName}-main ${hashId}`.trim(),
+      className: clsx(`${prefixedClassName}-main`, hashId),
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${prefixedClassName}-row ${hashId}`.trim(),
+        className: clsx(`${prefixedClassName}-row`, hashId),
         children: [content && /*#__PURE__*/_jsx("div", {
-          className: `${prefixedClassName}-content ${hashId}`.trim(),
+          className: clsx(`${prefixedClassName}-content`, hashId),
           children: content
         }), extraContent && /*#__PURE__*/_jsx("div", {
-          className: `${prefixedClassName}-extraContent ${hashId}`.trim(),
+          className: clsx(`${prefixedClassName}-extraContent`, hashId),
           children: extraContent
         })]
       })
@@ -155,7 +155,7 @@ const memoRenderPageHeader = props => {
   }
   return /*#__PURE__*/_jsx(PageHeader, {
     ...pageHeaderProps,
-    className: `${prefixedClassName}-warp-page-header ${hashId}`.trim(),
+    className: clsx(`${prefixedClassName}-warp-page-header`, hashId),
     breadcrumb: breadcrumbRender === false ? undefined : {
       ...pageHeaderProps.breadcrumb,
       ...value.breadcrumbProps
@@ -276,9 +276,9 @@ const PageContainerBase = props => {
       _jsx(Affix, {
         offsetTop: value.hasHeader && value.fixedHeader ? token.layout?.header?.heightLayoutHeader : 1,
         ...affixProps,
-        className: `${basePageContainer}-affix ${hashId}`.trim(),
+        className: clsx(`${basePageContainer}-affix`, hashId),
         children: /*#__PURE__*/_jsx("div", {
-          className: `${basePageContainer}-warp ${hashId}`.trim(),
+          className: clsx(`${basePageContainer}-warp`, hashId),
           children: pageHeaderDom
         })
       }) : pageHeaderDom, renderContentDom && /*#__PURE__*/_jsx(GridContent, {

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

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

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

@@ -20,12 +20,12 @@ const BlockCheckbox = ({
         className: clsx(hashId, `${baseClassName}-item`, `${baseClassName}-item-${item.key}`, `${baseClassName}-${configType}-item`),
         onClick: () => onChange(item.key),
         children: [/*#__PURE__*/_jsx(CheckOutlined, {
-          className: `${baseClassName}-selectIcon ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-selectIcon`, hashId),
           style: {
             display: value === item.key ? 'block' : 'none'
           }
         }), item?.icon ? /*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}-icon ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-icon`, hashId),
           children: item.icon
         }) : null]
       })

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

@@ -1,4 +1,5 @@
 import { List, Select, Switch, Tooltip } from 'antd';
+import { clsx } from 'clsx';
 import React from 'react';
 import { defaultSettings } from "../../defaultSettings";
 import { getFormatMessage } from "./index";
@@ -37,7 +38,7 @@ const LayoutSetting = ({
     fixSiderbar
   } = settings || defaultSettings;
   return /*#__PURE__*/_jsx(List, {
-    className: `${prefixCls}-list ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-list`, hashId),
     split: false,
     dataSource: [{
       title: formatMessage({
@@ -47,7 +48,7 @@ const LayoutSetting = ({
       action: /*#__PURE__*/_jsxs(Select, {
         value: contentWidth || 'Fixed',
         size: "small",
-        className: `content-width ${hashId}`.trim(),
+        className: clsx('content-width', hashId),
         onSelect: value => {
           changeSetting('contentWidth', value);
         },

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

@@ -1,4 +1,5 @@
 import { List, Switch } from 'antd';
+import { clsx } from 'clsx';
 import React from 'react';
 import { getFormatMessage } from "./index";
 import { renderLayoutSettingItem } from "./LayoutChange";
@@ -12,7 +13,7 @@ const RegionalSetting = ({
   const formatMessage = getFormatMessage();
   const regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
   return /*#__PURE__*/_jsx(List, {
-    className: `${prefixCls}-list ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-list`, hashId),
     split: false,
     renderItem: renderLayoutSettingItem,
     dataSource: regionalSetting.map(key => {
@@ -22,7 +23,7 @@ const RegionalSetting = ({
         }),
         action: /*#__PURE__*/_jsx(Switch, {
           size: "small",
-          className: `regional-${key} ${hashId}`.trim(),
+          className: clsx(`regional-${key}`, hashId),
           checked: settings[`${key}Render`] || settings[`${key}Render`] === undefined,
           onChange: checked => changeSetting(`${key}Render`, checked === true ? undefined : false)
         })

package/es/layout/components/SettingDrawer/ThemeColor.js

@@ -1,5 +1,6 @@
 import { CheckOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
+import { clsx } from 'clsx';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Tag = /*#__PURE__*/React.forwardRef(({
@@ -27,7 +28,7 @@ const ThemeColor = ({
   }
   const baseClassName = `${prefixCls}-theme-color`;
   return /*#__PURE__*/_jsx("div", {
-    className: `${baseClassName} ${hashId}`.trim(),
+    className: clsx(baseClassName, hashId),
     children: colorList?.map(({
       key,
       color,
@@ -39,7 +40,7 @@ const ThemeColor = ({
           id: `app.setting.themecolor.${key}`
         }),
         children: /*#__PURE__*/_jsx(Tag, {
-          className: `${baseClassName}-block ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-block`, hashId),
           color: color,
           check: value === color,
           onClick: () => onChange && onChange(color)

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

@@ -2,6 +2,7 @@ import { CloseOutlined, CopyOutlined, NotificationOutlined, SettingOutlined } fr
 import { omit, useControlledState } from '@rc-component/util';
 import { useUrlSearchParams } from '@umijs/use-params';
 import { Alert, Button, Divider, Drawer, List, Switch, message } from 'antd';
+import { clsx } from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { isBrowser, merge, useRefFunction } from "../../../utils";
 import { defaultSettings } from "../../defaultSettings";
@@ -27,7 +28,7 @@ const Body = ({
     marginBlockEnd: 12
   },
   children: [/*#__PURE__*/_jsx("h3", {
-    className: `${prefixCls}-body-title ${hashId}`.trim(),
+    className: clsx(`${prefixCls}-body-title`, hashId),
     children: title
   }), children]
 });
@@ -288,7 +289,7 @@ export const SettingDrawer = props => {
   } = useStyle(baseClassName);
   return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: `${baseClassName}-handle ${hashId}`.trim(),
+      className: clsx(`${baseClassName}-handle`, hashId),
       onClick: () => setOpen(!open),
       style: {
         width: 48,
@@ -317,7 +318,7 @@ export const SettingDrawer = props => {
       },
       ...drawerProps,
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClassName}-drawer-content ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-drawer-content`, hashId),
         children: [/*#__PURE__*/_jsx(Body, {
           title: formatMessage({
             id: 'app.setting.pagestyle',
@@ -444,7 +445,7 @@ export const SettingDrawer = props => {
               id: 'app.setting.othersettings'
             }),
             children: /*#__PURE__*/_jsx(List, {
-              className: `${baseClassName}-list ${hashId}`.trim(),
+              className: clsx(`${baseClassName}-list`, hashId),
               split: false,
               size: "small",
               renderItem: renderLayoutSettingItem,

package/es/layout/components/SiderMenu/BaseMenu.js

@@ -107,7 +107,7 @@ class MenuUtil {
           [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
         }),
         children: [menuType === 'group' && collapsed ? null : shouldHasIcon && iconDom ? /*#__PURE__*/_jsx("span", {
-          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+          className: clsx(`${baseClassName}-item-icon`, this.props?.hashId),
           children: iconDom
         }) : defaultIcon, /*#__PURE__*/_jsx("span", {
           className: clsx(`${baseClassName}-item-text`, this.props?.hashId, {
@@ -221,7 +221,7 @@ class MenuUtil {
         [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
       }),
       children: [/*#__PURE__*/_jsx("span", {
-        className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+        className: clsx(`${baseClassName}-item-icon`, this.props?.hashId),
         style: {
           display: defaultIcon === null && !icon ? 'none' : ''
         },
@@ -251,7 +251,7 @@ class MenuUtil {
           [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
         }),
         children: [/*#__PURE__*/_jsx("span", {
-          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+          className: clsx(`${baseClassName}-item-icon`, this.props?.hashId),
           style: {
             display: defaultIcon === null && !icon ? 'none' : ''
           },

package/es/layout/components/SiderMenu/SiderMenu.js

@@ -125,7 +125,7 @@ const SiderMenu = props => {
     style: {
       width: '100%'
     },
-    className: `${baseClassName}-menu ${hashId}`.trim()
+    className: clsx(`${baseClassName}-menu`, hashId)
   }), [baseClassName, hashId, menuContentRender, onOpenChange, props]);
   const linksMenuItems = (links || []).map((node, index) => ({
     className: `${baseClassName}-link`,
@@ -165,7 +165,7 @@ const SiderMenu = props => {
       className: clsx([`${baseClassName}-actions-list`, collapsed && `${baseClassName}-actions-list-collapsed`, hashId]),
       children: [actionsRender?.(props)].flat(1).map((item, index) => {
         return /*#__PURE__*/_jsx("div", {
-          className: `${baseClassName}-actions-list-item ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-actions-list-item`, hashId),
           children: item
         }, index);
       })
@@ -233,10 +233,10 @@ const SiderMenu = props => {
     }), /*#__PURE__*/_jsxs(SiderContext.Provider, {
       value: {},
       children: [links ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}-links ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-links`, hashId),
         children: /*#__PURE__*/_jsx(Menu, {
           inlineIndent: 16,
-          className: `${baseClassName}-link-menu ${hashId}`.trim(),
+          className: clsx(`${baseClassName}-link-menu`, hashId),
           selectedKeys: [],
           openKeys: [],
           theme: theme,
@@ -279,7 +279,7 @@ const SiderMenu = props => {
       width: siderWidth,
       className: clsx(siderClassName, hashId, hideMenuWhenCollapsedClassName),
       children: [hideMenuWhenCollapsedClassName ? /*#__PURE__*/_jsx("div", {
-        className: `${baseClassName}-hide-when-collapsed ${hashId}`.trim(),
+        className: clsx(`${baseClassName}-hide-when-collapsed`, hashId),
         style: {
           height: '100%',
           width: '100%',

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

@@ -81,7 +81,7 @@ const TopNavHeader = props => {
       children: /*#__PURE__*/_jsx(BaseMenu, {
         theme: dark ? 'dark' : 'light',
         ...props,
-        className: `${prefixCls}-base-menu ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-base-menu`, hashId),
         ...props.menuProps,
         style: {
           width: '100%',
@@ -113,7 +113,7 @@ const TopNavHeader = props => {
         children: [/*#__PURE__*/_jsx(AppsLogoComponents, {
           ...props
         }), /*#__PURE__*/_jsx("div", {
-          className: `${prefixCls}-logo ${hashId}`.trim(),
+          className: clsx(`${prefixCls}-logo`, hashId),
           id: "logo",
           children: headerDom
         }, "logo")]
@@ -121,7 +121,7 @@ const TopNavHeader = props => {
         style: {
           flex: 1
         },
-        className: `${prefixCls}-menu ${hashId}`.trim(),
+        className: clsx(`${prefixCls}-menu`, hashId),
         children: contentDom
       }), (actionsRender || props.avatarProps) && /*#__PURE__*/_jsx(ActionsContent, {
         ...props,