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

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,18 +20,17 @@ 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]
       })
     }, item.key));
     return domList;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, list?.length, onChange]);
   return /*#__PURE__*/_jsx("div", {
     className: clsx(baseClassName, hashId),

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]
 });
@@ -213,7 +214,6 @@ export const SettingDrawer = props => {
       passive: true
     });
     return () => window.document.removeEventListener('languagechange', onLanguageChange);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -289,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,
@@ -318,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',
@@ -445,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/SettingDrawer/style/index.js

@@ -2,6 +2,10 @@ import { useStyle as useAntdStyle } from "../../../../provider";
 const genSettingDrawerStyle = token => {
   return {
     [`${token.componentCls}-handle`]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       position: 'fixed',
       insetBlockStart: '240px',
       insetInlineEnd: '0px',

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, {
@@ -158,7 +158,6 @@ class MenuUtil {
       disabled: item.disabled,
       key: item.key || item.path,
       onClick: item.onTitleClick,
-      // eslint-disable-next-line react/no-is-mounted
       label: this.getMenuItemPath(item, level, noGroupLevel)
     };
   };
@@ -222,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' : ''
         },
@@ -252,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' : ''
           },
@@ -376,7 +375,6 @@ const BaseMenu = props => {
       setOpenKeys(matchMenuKeys);
       setSelectedKeys(matchMenuKeys);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [matchMenuKeys.join('-')]);
   useEffect(() => {
     // reset IconFont
@@ -408,9 +406,7 @@ const BaseMenu = props => {
   },
   // 依赖项加上 props.collapsed，保证折叠时能正确响应
   [matchMenuKeys.join('-'), props.collapsed]);
-  const openKeysProps = useMemo(() => getOpenKeysProps(openKeys, props),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [openKeys && openKeys.join(','), props.layout, props.collapsed]);
+  const openKeysProps = useMemo(() => getOpenKeysProps(openKeys, props), [openKeys && openKeys.join(','), props.layout, props.collapsed]);
   const {
     wrapSSR,
     hashId
@@ -453,7 +449,7 @@ const BaseMenu = props => {
   }
   return wrapSSR( /*#__PURE__*/_createElement(Menu, {
     ...openKeysProps,
-    _internalDisableMenuItemTitleTooltip: true,
+    tooltip: false,
     key: "Menu",
     mode: mode,
     inlineIndent: 16,

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,14 +165,12 @@ 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);
       })
     });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [actionsRender, baseClassName, collapsed]);
+  }, [actionsRender, baseClassName, collapsed]);
   const appsDom = useMemo(() => {
     return /*#__PURE__*/_jsx(AppsLogoComponents, {
       onItemClick: props.itemClick,
@@ -235,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,
@@ -281,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/SiderMenu/index.js

@@ -25,7 +25,6 @@ const SiderMenuWrapper = props => {
     if (isMobile === true) {
       onCollapse?.(true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMobile]);
   const omitProps = omit(props, ['className', 'style']);
   const {

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

@@ -45,8 +45,7 @@ const TopNavHeader = props => {
     token
   } = useContext(ProProvider);
   const contentDom = useMemo(() => {
-    const defaultDom = /*#__PURE__*/_jsx(ConfigProvider // @ts-ignore
-    , {
+    const defaultDom = /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         hashed: isNeedOpenHash(),
         components: {
@@ -82,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%',
@@ -114,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")]
@@ -122,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,

package/es/layout/style/index.js

@@ -5,6 +5,10 @@ const genProLayoutStyle = token => {
       backgroundColor: 'transparent !important'
     },
     [token.componentCls]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       [`& ${token.antCls}-layout`]: {
         display: 'flex',
         backgroundColor: 'transparent',

package/es/layout/utils/getBreadcrumbProps.js

@@ -42,7 +42,7 @@ export const getBreadcrumb = (breadcrumbMap, url) => {
       try {
         if (path?.startsWith('http')) return false;
         return match(path.replace('?', ''))(url);
-      } catch (error) {
+      } catch (_error) {
         return false;
       }
     }

package/es/layout/utils/getMenuData.js

@@ -1,7 +1,6 @@
 import { transformRoute } from '@umijs/route-utils';
 function fromEntries(iterable) {
   return [...iterable].reduce((obj, [key, val]) => {
-    // eslint-disable-next-line no-param-reassign
     obj[key] = val;
     return obj;
   }, {});

package/es/list/Item.d.ts

@@ -1,12 +1,12 @@
-import type { ListGridType } from 'antd/lib/list';
 import type { ExpandableConfig } from 'antd/lib/table/interface';
 import React from 'react';
 import type { CheckCardProps } from '../card';
 import type { GetComponentProps } from './index';
+import type { ListGridType } from './ProListBase';
 export type RenderExpandIconProps<RecordType> = {
     prefixCls: string;
     expanded: boolean;
-    expandIcon: React.ReactNode | JSX.Element | ((props: {
+    expandIcon: React.ReactNode | React.JSX.Element | ((props: {
         onExpand: (expanded: boolean) => void;
         expanded: boolean;
         record: RecordType;
@@ -39,11 +39,8 @@ export type ItemProps<RecordType> = {
     grid?: ListGridType;
     expand?: boolean;
     rowSupportExpand?: boolean;
-    cardActionProps?: 'actions' | 'extra';
     onExpand?: (expand: boolean) => void;
     expandable?: ExpandableConfig<any>;
-    showActions?: 'hover' | 'always';
-    showExtra?: 'hover' | 'always';
     type?: 'new' | 'top' | 'inline' | 'subheader';
     isEditable: boolean;
     recordKey: string | number | undefined;
@@ -51,8 +48,8 @@ export type ItemProps<RecordType> = {
     record: RecordType;
     onRow?: GetComponentProps<RecordType>;
     onItem?: GetComponentProps<RecordType>;
-    itemHeaderRender?: ((item: RecordType, index: number, defaultDom: JSX.Element | null) => React.ReactNode) | false;
-    itemTitleRender?: ((item: RecordType, index: number, defaultDom: JSX.Element | null) => React.ReactNode) | false;
+    itemHeaderRender?: ((item: RecordType, index: number, defaultDom: React.JSX.Element | null) => React.ReactNode) | false;
+    itemTitleRender?: ((item: RecordType, index: number, defaultDom: React.JSX.Element | null) => React.ReactNode) | false;
 };
 declare function ProListItem<RecordType>(props: ItemProps<RecordType>): import("react/jsx-runtime").JSX.Element;
 export default ProListItem;