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

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ThemeColor = void 0;
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 const Tag = /*#__PURE__*/_react.default.forwardRef(({
@@ -34,7 +35,7 @@ const ThemeColor = ({
   }
   const baseClassName = `${prefixCls}-theme-color`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: `${baseClassName} ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(baseClassName, hashId),
     children: colorList?.map(({
       key,
       color,
@@ -46,7 +47,7 @@ const ThemeColor = ({
           id: `app.setting.themecolor.${key}`
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
-          className: `${baseClassName}-block ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-block`, hashId),
           color: color,
           check: value === color,
           onClick: () => onChange && onChange(color)

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

@@ -9,6 +9,7 @@ var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _useParams = require("@umijs/use-params");
 var _antd = require("antd");
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../../../utils");
 var _defaultSettings = require("../../defaultSettings");
@@ -32,7 +33,7 @@ const Body = ({
     marginBlockEnd: 12
   },
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-    className: `${prefixCls}-body-title ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${prefixCls}-body-title`, hashId),
     children: title
   }), children]
 });
@@ -219,7 +220,6 @@ const SettingDrawer = props => {
       passive: true
     });
     return () => window.document.removeEventListener('languagechange', onLanguageChange);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -295,7 +295,7 @@ const SettingDrawer = props => {
   } = (0, _index.useStyle)(baseClassName);
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${baseClassName}-handle ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${baseClassName}-handle`, hashId),
       onClick: () => setOpen(!open),
       style: {
         width: 48,
@@ -324,7 +324,7 @@ const SettingDrawer = props => {
       },
       ...drawerProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${baseClassName}-drawer-content ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${baseClassName}-drawer-content`, hashId),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
           title: formatMessage({
             id: 'app.setting.pagestyle',
@@ -451,7 +451,7 @@ const SettingDrawer = props => {
               id: 'app.setting.othersettings'
             }),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
-              className: `${baseClassName}-list ${hashId}`.trim(),
+              className: (0, _clsx.clsx)(`${baseClassName}-list`, hashId),
               split: false,
               size: "small",
               renderItem: _LayoutChange.renderLayoutSettingItem,

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

@@ -8,6 +8,10 @@ var _provider = require("../../../../provider");
 const genSettingDrawerStyle = token => {
   return {
     [`${token.componentCls}-handle`]: {
+      boxSizing: 'border-box',
+      '*, *::before, *::after': {
+        boxSizing: 'border-box'
+      },
       position: 'fixed',
       insetBlockStart: '240px',
       insetInlineEnd: '0px',

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

@@ -112,7 +112,7 @@ class MenuUtil {
           [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
         }),
         children: [menuType === 'group' && collapsed ? null : shouldHasIcon && iconDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-item-icon`, this.props?.hashId),
           children: iconDom
         }) : defaultIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: (0, _clsx.clsx)(`${baseClassName}-item-text`, this.props?.hashId, {
@@ -163,7 +163,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)
     };
   };
@@ -227,7 +226,7 @@ class MenuUtil {
         [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
       }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${baseClassName}-item-icon`, this.props?.hashId),
         style: {
           display: defaultIcon === null && !icon ? 'none' : ''
         },
@@ -257,7 +256,7 @@ class MenuUtil {
           [`${baseClassName}-item-collapsed-show-title`]: menu?.collapsedShowTitle && collapsed
         }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: `${baseClassName}-item-icon ${this.props?.hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-item-icon`, this.props?.hashId),
           style: {
             display: defaultIcon === null && !icon ? 'none' : ''
           },
@@ -381,7 +380,6 @@ const BaseMenu = props => {
       setOpenKeys(matchMenuKeys);
       setSelectedKeys(matchMenuKeys);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [matchMenuKeys.join('-')]);
   (0, _react.useEffect)(() => {
     // reset IconFont
@@ -413,9 +411,7 @@ const BaseMenu = props => {
   },
   // 依赖项加上 props.collapsed，保证折叠时能正确响应
   [matchMenuKeys.join('-'), props.collapsed]);
-  const openKeysProps = (0, _react.useMemo)(() => getOpenKeysProps(openKeys, props),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [openKeys && openKeys.join(','), props.layout, props.collapsed]);
+  const openKeysProps = (0, _react.useMemo)(() => getOpenKeysProps(openKeys, props), [openKeys && openKeys.join(','), props.layout, props.collapsed]);
   const {
     wrapSSR,
     hashId
@@ -458,7 +454,7 @@ const BaseMenu = props => {
   }
   return wrapSSR( /*#__PURE__*/(0, _react.createElement)(_antd.Menu, {
     ...openKeysProps,
-    _internalDisableMenuItemTitleTooltip: true,
+    tooltip: false,
     key: "Menu",
     mode: mode,
     inlineIndent: 16,

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

@@ -130,7 +130,7 @@ const SiderMenu = props => {
     style: {
       width: '100%'
     },
-    className: `${baseClassName}-menu ${hashId}`.trim()
+    className: (0, _clsx.clsx)(`${baseClassName}-menu`, hashId)
   }), [baseClassName, hashId, menuContentRender, onOpenChange, props]);
   const linksMenuItems = (links || []).map((node, index) => ({
     className: `${baseClassName}-link`,
@@ -170,14 +170,12 @@ const SiderMenu = props => {
       className: (0, _clsx.clsx)([`${baseClassName}-actions-list`, collapsed && `${baseClassName}-actions-list-collapsed`, hashId]),
       children: [actionsRender?.(props)].flat(1).map((item, index) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${baseClassName}-actions-list-item ${hashId}`.trim(),
+          className: (0, _clsx.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 = (0, _react.useMemo)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, {
       onItemClick: props.itemClick,
@@ -240,10 +238,10 @@ const SiderMenu = props => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(SiderContext.Provider, {
       value: {},
       children: [links ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}-links ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${baseClassName}-links`, hashId),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
           inlineIndent: 16,
-          className: `${baseClassName}-link-menu ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${baseClassName}-link-menu`, hashId),
           selectedKeys: [],
           openKeys: [],
           theme: theme,
@@ -286,7 +284,7 @@ const SiderMenu = props => {
       width: siderWidth,
       className: (0, _clsx.clsx)(siderClassName, hashId, hideMenuWhenCollapsedClassName),
       children: [hideMenuWhenCollapsedClassName ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: `${baseClassName}-hide-when-collapsed ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${baseClassName}-hide-when-collapsed`, hashId),
         style: {
           height: '100%',
           width: '100%',

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

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

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

@@ -51,8 +51,7 @@ const TopNavHeader = props => {
     token
   } = (0, _react.useContext)(_provider.ProProvider);
   const contentDom = (0, _react.useMemo)(() => {
-    const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider // @ts-ignore
-    , {
+    const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
       theme: {
         hashed: (0, _provider.isNeedOpenHash)(),
         components: {
@@ -88,7 +87,7 @@ const TopNavHeader = props => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseMenu.BaseMenu, {
         theme: dark ? 'dark' : 'light',
         ...props,
-        className: `${prefixCls}-base-menu ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixCls}-base-menu`, hashId),
         ...props.menuProps,
         style: {
           width: '100%',
@@ -120,7 +119,7 @@ const TopNavHeader = props => {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppsLogoComponents.AppsLogoComponents, {
           ...props
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: `${prefixCls}-logo ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${prefixCls}-logo`, hashId),
           id: "logo",
           children: headerDom
         }, "logo")]
@@ -128,7 +127,7 @@ const TopNavHeader = props => {
         style: {
           flex: 1
         },
-        className: `${prefixCls}-menu ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${prefixCls}-menu`, hashId),
         children: contentDom
       }), (actionsRender || props.avatarProps) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionsContent.ActionsContent, {
         ...props,

package/lib/layout/style/index.js

@@ -11,6 +11,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/lib/layout/utils/getBreadcrumbProps.js

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

package/lib/layout/utils/getMenuData.js

@@ -7,7 +7,6 @@ exports.getMenuData = void 0;
 var _routeUtils = require("@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/lib/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;

package/lib/list/Item.js

@@ -13,6 +13,7 @@ var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _card = require("../card");
 var _provider = require("../provider");
+var _ProListBase = require("./ProListBase");
 var _jsxRuntime = require("react/jsx-runtime");
 function renderExpandIcon({
   prefixCls,
@@ -45,26 +46,26 @@ function renderExpandIcon({
   });
 }
 function ProListItem(props) {
-  const {
-    prefixCls: customizePrefixCls
-  } = props;
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
   const {
     hashId
   } = (0, _react.useContext)(_provider.ProProvider);
-  const prefixCls = getPrefixCls('pro-list', customizePrefixCls);
+  const prefixCls = getPrefixCls('pro-list', props.prefixCls);
   const defaultClassName = `${prefixCls}-row`;
   const {
     title,
     subTitle,
     content,
     itemTitleRender,
-    prefixCls: restPrefixCls,
+    prefixCls: _prefixCls,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     actions,
-    item,
-    recordKey,
+    item: _item,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    recordKey: _recordKey,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
     avatar,
     cardProps,
     description,
@@ -77,8 +78,6 @@ function ProListItem(props) {
     onExpand: propsOnExpand,
     expandable: expandableConfig,
     rowSupportExpand,
-    showActions,
-    showExtra,
     type,
     style,
     className: propsClassName = defaultClassName,
@@ -86,7 +85,6 @@ function ProListItem(props) {
     onRow,
     onItem,
     itemHeaderRender,
-    cardActionProps,
     extra,
     ...rest
   } = props;
@@ -107,37 +105,14 @@ function ProListItem(props) {
   }, [propsOnExpand]);
   const className = (0, _clsx.clsx)({
     [`${defaultClassName}-selected`]: !cardProps && selected,
-    [`${defaultClassName}-show-action-hover`]: showActions === 'hover',
     [`${defaultClassName}-type-${type}`]: !!type,
-    [`${defaultClassName}-editable`]: isEditable,
-    [`${defaultClassName}-show-extra-hover`]: showExtra === 'hover'
+    [`${defaultClassName}-editable`]: isEditable
   }, hashId, defaultClassName);
-  const extraClassName = (0, _clsx.clsx)(hashId, {
-    [`${propsClassName}-extra`]: showExtra === 'hover'
-  });
   const needExpanded = expanded || Object.values(expandableConfig || {}).length === 0;
   const expandedRowDom = expandedRowRender && expandedRowRender(record, index, indentSize, expanded);
-  const extraDom = (0, _react.useMemo)(() => {
-    if (!actions || cardActionProps === 'actions') {
-      return undefined;
-    }
-    return [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      onClick: e => e.stopPropagation(),
-      children: actions
-    }, "action")];
-  }, [actions, cardActionProps]);
-  const actionsDom = (0, _react.useMemo)(() => {
-    if (!actions || !cardActionProps || cardActionProps === 'extra') {
-      return undefined;
-    }
-    return [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${defaultClassName}-actions ${hashId}`.trim(),
-      onClick: e => e.stopPropagation(),
-      children: actions
-    }, "action")];
-  }, [actions, cardActionProps, defaultClassName, hashId]);
+  const actionsArray = (0, _react.useMemo)(() => actions ? _react.default.Children.toArray(actions) : undefined, [actions]);
   const titleDom = title || subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: `${defaultClassName}-header-container ${hashId}`.trim(),
+    className: (0, _clsx.clsx)(`${defaultClassName}-header-container`, hashId),
     children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _clsx.clsx)(`${defaultClassName}-title`, hashId, {
         [`${defaultClassName}-title-editable`]: isEditable
@@ -151,41 +126,77 @@ function ProListItem(props) {
     })]
   }) : null;
   const metaTitle = (itemTitleRender && itemTitleRender?.(record, index, titleDom)) ?? titleDom;
-  const metaDom = metaTitle || avatar || subTitle || description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List.Item.Meta, {
+  const metaDom = metaTitle || avatar || subTitle || description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProListBase.ProListItemMeta, {
     avatar: avatar,
     title: metaTitle,
     description: description && needExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: `${className}-description ${hashId}`.trim(),
+      className: (0, _clsx.clsx)(`${className}-description`, hashId),
       children: description
     })
   }) : null;
+  const itemProps = onItem?.(record, index);
+  const hasExpandableConfig = Object.keys(expandableConfig || {}).length > 0;
+  const expandedRowClassStr = typeof expandedRowClassName === 'function' ? expandedRowClassName(record, index, indentSize) : expandedRowClassName;
+  const headerDom = typeof itemHeaderRender === 'function' ? itemHeaderRender(record, index, metaDom) : metaDom;
+
+  // 卡片模式渲染
+  if (cardProps) {
+    const cardTitleDom = avatar || title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [avatar, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _clsx.clsx)(`${prefixCls}-item-meta-title`, hashId),
+        children: title
+      })]
+    }) : null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _clsx.clsx)(hashId, `${className}-card-container`, {
+        [propsClassName]: propsClassName !== defaultClassName
+      }),
+      style: style,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.CheckCard, {
+        bordered: true,
+        style: {
+          width: '100%'
+        },
+        className: (0, _clsx.clsx)(`${defaultClassName}-card`, hashId),
+        ...cardProps,
+        title: cardTitleDom,
+        subTitle: subTitle,
+        extra: actionsArray,
+        bodyStyle: {
+          padding: 24,
+          ...cardProps.bodyStyle
+        },
+        ...itemProps,
+        onClick: e => {
+          cardProps?.onClick?.(e);
+          itemProps?.onClick?.(e);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
+          avatar: true,
+          title: false,
+          loading: loading,
+          active: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _clsx.clsx)(`${className}-header`, hashId),
+            children: [typeof itemTitleRender === 'function' && itemTitleRender(record, index, titleDom), content]
+          })
+        })
+      })
+    });
+  }
+
+  // 列表模式渲染
   const rowClassName = (0, _clsx.clsx)(hashId, {
     [`${defaultClassName}-item-has-checkbox`]: checkbox,
     [`${defaultClassName}-item-has-avatar`]: avatar,
     [className]: className
   });
-  const cardTitleDom = (0, _react.useMemo)(() => {
-    if (avatar || title) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [avatar, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: `${getPrefixCls('list-item-meta-title')} ${hashId}`.trim(),
-          children: title
-        })]
-      });
-    }
-    return null;
-  }, [avatar, getPrefixCls, hashId, title]);
-  const itemProps = onItem?.(record, index);
-  const defaultDom = !cardProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List.Item, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProListBase.ProListItem, {
     className: (0, _clsx.clsx)(rowClassName, hashId, {
       [propsClassName]: propsClassName !== defaultClassName
     }),
     ...rest,
-    actions: extraDom,
-    extra: !!extra && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: extraClassName,
-      children: extra
-    }),
+    extra: extra,
     ...onRow?.(record, index),
     ...itemProps,
     onClick: e => {
@@ -201,13 +212,13 @@ function ProListItem(props) {
       loading: loading,
       active: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${className}-header ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${className}-header`, hashId),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: `${className}-header-option ${hashId}`.trim(),
+          className: (0, _clsx.clsx)(`${className}-header-option`, hashId),
           children: [!!checkbox && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: `${className}-checkbox ${hashId}`.trim(),
+            className: (0, _clsx.clsx)(`${className}-checkbox`, hashId),
             children: checkbox
-          }), Object.values(expandableConfig || {}).length > 0 && rowSupportExpand && renderExpandIcon({
+          }), hasExpandableConfig && rowSupportExpand && renderExpandIcon({
             prefixCls,
             hashId,
             expandIcon,
@@ -215,55 +226,22 @@ function ProListItem(props) {
             expanded,
             record
           })]
-        }), (itemHeaderRender && itemHeaderRender?.(record, index, metaDom)) ?? metaDom]
+        }), headerDom, actionsArray && actionsArray.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _clsx.clsx)(`${prefixCls}-item-action`, hashId),
+          onClick: e => e.stopPropagation(),
+          children: actionsArray.map((action, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _clsx.clsx)(`${prefixCls}-item-action-item`, hashId),
+            children: action
+          }, i))
+        }) : null]
       }), needExpanded && (content || expandedRowDom) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${className}-content ${hashId}`.trim(),
+        className: (0, _clsx.clsx)(`${className}-content`, hashId),
         children: [content, expandedRowRender && rowSupportExpand && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: expandedRowClassName && typeof expandedRowClassName !== 'string' ? expandedRowClassName(record, index, indentSize) : expandedRowClassName,
+          className: expandedRowClassStr,
           children: expandedRowDom
         })]
       })]
     })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.CheckCard, {
-    bordered: true,
-    style: {
-      width: '100%'
-    },
-    ...cardProps,
-    title: cardTitleDom,
-    subTitle: subTitle,
-    extra: extraDom,
-    actions: actionsDom,
-    bodyStyle: {
-      padding: 24,
-      ...cardProps.bodyStyle
-    },
-    ...itemProps,
-    onClick: e => {
-      cardProps?.onClick?.(e);
-      itemProps?.onClick?.(e);
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Skeleton, {
-      avatar: true,
-      title: false,
-      loading: loading,
-      active: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: `${className}-header ${hashId}`.trim(),
-        children: [itemTitleRender && itemTitleRender?.(record, index, titleDom), content]
-      })
-    })
-  });
-  if (!cardProps) {
-    return defaultDom;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _clsx.clsx)(hashId, {
-      [`${className}-card`]: cardProps,
-      [propsClassName]: propsClassName !== defaultClassName
-    }),
-    style: style,
-    children: defaultDom
   });
 }
 var _default = exports.default = ProListItem;

package/lib/list/ListView.d.ts

@@ -1,4 +1,4 @@
-import type { ListProps, TableProps } from 'antd';
+import type { TableProps } from 'antd';
 import type { AnyObject } from 'antd/lib/_util/type';
 import type { PaginationConfig } from 'antd/lib/pagination';
 import type { GetRowKey, TableRowSelection } from 'antd/lib/table/interface';
@@ -7,15 +7,16 @@ import type { CheckCardProps } from '../card';
 import type { ActionType } from '../table';
 import type { GetComponentProps } from './index';
 import type { ItemProps } from './Item';
+import type { ListProps } from './ProListBase';
 type AntdListProps<RecordType> = Omit<ListProps<RecordType>, 'rowKey'>;
+/** 自定义列表项渲染，defaultDom 为 ProList 默认渲染的列表项元素 */
+export type ProListItemRender<RecordType> = (item: RecordType, index: number, defaultDom: React.ReactElement) => React.ReactNode;
 export type ListViewProps<RecordType> = Omit<AntdListProps<RecordType>, 'renderItem'> & Pick<TableProps<RecordType>, 'columns' | 'dataSource' | 'expandable' | 'pagination'> & {
     rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
-    showActions?: 'hover' | 'always';
-    showExtra?: 'hover' | 'always';
     rowSelection?: TableRowSelection<RecordType>;
     prefixCls?: string;
     dataSource: readonly RecordType[];
-    renderItem?: (item: RecordType, index: number, defaultDom: JSX.Element) => React.ReactNode;
+    itemRender?: ProListItemRender<RecordType>;
     actionRef: React.MutableRefObject<ActionType | undefined>;
     onRow?: GetComponentProps<RecordType>;
     onItem?: GetComponentProps<RecordType>;
@@ -25,6 +26,7 @@ export type ListViewProps<RecordType> = Omit<AntdListProps<RecordType>, 'renderI
     itemTitleRender?: ItemProps<RecordType>['itemTitleRender'];
     itemCardProps?: CheckCardProps;
     pagination?: PaginationConfig;
+    hashId?: string;
 };
 declare function ListView<RecordType extends AnyObject>(props: ListViewProps<RecordType>): import("react/jsx-runtime").JSX.Element;
 export default ListView;