@ant-design/pro-components 3.1.12-0 → 3.1.14-0

package/lib/card/ProCard.d.ts

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import React from 'react';
 import Divider from './components/Divider';
 import type { CardProps, CardType } from './typing';
 export type ProCardProps = CardProps;
@@ -7,6 +7,6 @@ export type ProCardType = CardType & {
     Divider: typeof Divider;
     Group: typeof Group;
 };
-declare const Group: (props: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Group: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ProCard: ProCardType;
 export default ProCard;

package/lib/card/ProCard.js

@@ -5,16 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _Card = _interopRequireDefault(require("./components/Card"));
 var _Divider = _interopRequireDefault(require("./components/Divider"));
 var _jsxRuntime = require("react/jsx-runtime");
-const Group = props => {
+// 用 forwardRef 透传 ref，避免用户用 <ProCard.Group ref={...}> 时 ref 丢失。
+// 底层 Card 本身就是 forwardRef，这里保持一致。
+const Group = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     styles,
     ...rest
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
     ...rest,
+    ref: ref,
     styles: {
       ...styles,
       body: {
@@ -23,7 +27,8 @@ const Group = props => {
       }
     }
   });
-};
+});
+Group.displayName = 'ProCard.Group';
 
 // 当前不对底层 Card 做封装，仅挂载子组件，直接导出
 const ProCard = _Card.default;

package/lib/card/components/Card/index.js

@@ -11,6 +11,7 @@ var _util = require("@rc-component/util");
 var _antd = require("antd");
 var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
+var _provider = require("../../../provider");
 var _utils = require("../../../utils");
 var _Actions = _interopRequireDefault(require("../Actions"));
 var _Loading = _interopRequireDefault(require("../Loading"));
@@ -19,6 +20,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 const {
   useBreakpoint
 } = _antd.Grid;
+
+// 子卡片元素类型：props 形如 CardProps，组件类型用 React.JSXElementConstructor 收紧，
+// 比 any 安全，但仍允许 React.cloneElement / element.type?.isProCard 这类访问。
+
 const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     className,
@@ -70,6 +75,10 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     getPrefixCls
   } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  // 用于 loading 占位 padding 兜底（body padding 被显式置 0 时使用 token.paddingLG）
+  const {
+    token
+  } = _provider.proTheme.useToken();
   const screens = useBreakpoint() || {
     lg: true,
     md: true,
@@ -109,7 +118,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   /**
    * 根据响应式获取 gutter, 参考 antd 实现
    *
-   * @param gutter Gutter
+   * @param gut
    */
   const getNormalizedGutter = gut => {
     const results = [0, 0];
@@ -129,16 +138,6 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     });
     return results;
   };
-
-  /**
-   * 根据条件返回 style，负责返回空对象
-   *
-   * @param withStyle 是否符合条件
-   * @param appendStyle 如果符合条件要返回的 style 属性
-   */
-  const getStyle = (withStyle, appendStyle) => {
-    return withStyle ? appendStyle : {};
-  };
   const getColSpanStyle = colSpan => {
     let span = colSpan;
 
@@ -154,10 +153,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
 
     // 当 colSpan 为 30% 或 300px 时
-    const colSpanStyle = getStyle(typeof span === 'string' && /\d%|\dpx/i.test(span), {
+    const isPercentOrPxWidth = typeof span === 'string' && /\d%|\dpx/i.test(span);
+    const colSpanStyle = isPercentOrPxWidth ? {
       width: span,
       flexShrink: 0
-    });
+    } : {};
     return {
       span,
       colSpanStyle
@@ -190,25 +190,26 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         [`${prefixCls}-split-horizontal`]: split === 'horizontal' && index !== childrenArray.length - 1,
         [`${prefixCls}-col-${span}`]: typeof span === 'number' && span >= 0 && span <= 24
       });
-      const wrappedElement = wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+
+      // key 直接挂在外层 div 上，避免依赖 wrapSSR 返回结构（v2 起 wrapSSR 是 identity，
+      // 但仍然不应该依赖此细节，否则 wrapSSR 行为变化会导致 key 落到错误的节点上）。
+      // element 直接放入即可，无需 React.cloneElement(element)（不传 props 是无意义调用）。
+      return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: {
           ...colSpanStyle,
-          ...getStyle(horizontalGutter > 0, {
+          ...(horizontalGutter > 0 && {
             paddingInlineEnd: horizontalGutter / 2,
             paddingInlineStart: horizontalGutter / 2
           }),
-          ...getStyle(verticalGutter > 0, {
+          ...(verticalGutter > 0 && {
             paddingBlockStart: verticalGutter / 2,
             paddingBlockEnd: verticalGutter / 2
           }),
           ...colStyle
         },
         className: columnClassName,
-        children: /*#__PURE__*/_react.default.cloneElement(element)
-      }));
-      return /*#__PURE__*/_react.default.cloneElement(wrappedElement, {
-        key: `pro-card-col-${element?.key || index}`
-      });
+        children: element
+      }, `pro-card-col-${element?.key || index}`));
     }
     return element;
   });
@@ -231,10 +232,13 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     [`${prefixCls}-body-wrap`]: wrap && containProCard
   });
   const bodyStylePadding = mergedStyles.body?.padding;
+
+  // body padding 被显式置 0 时，loading 占位需要补回默认 padding，
+  // 否则骨架屏会贴到边缘。这里对齐 body 的默认 padding（token.paddingLG）。
   const loadingDOM = /*#__PURE__*/_react.default.isValidElement(loading) ? loading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {
     prefix: prefixCls,
     style: bodyStylePadding === 0 || bodyStylePadding === '0px' ? {
-      padding: 24
+      padding: token.paddingLG
     } : undefined
   });
   const handleCollapsibleIconClick = (0, _react.useCallback)(() => {
@@ -302,14 +306,15 @@ const Card = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       className: (0, _clsx.clsx)(`${prefixCls}-cover`, hashId, classNames?.cover),
       style: mergedStyles.cover,
       children: cover
-    }), tabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _clsx.clsx)(`${prefixCls}-tabs`, hashId),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
-        onChange: tabs.onChange,
-        ...(0, _util.omit)(tabs, ['cardProps']),
-        items: ModifyTabItemsContent,
-        children: loading ? loadingDOM : children
-      })
+    }), tabs ? loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: bodyCls,
+      style: mergedStyles.body,
+      children: loadingDOM
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
+      onChange: tabs.onChange,
+      ...(0, _util.omit)(tabs, ['cardProps']),
+      items: ModifyTabItemsContent,
+      className: (0, _clsx.clsx)(`${prefixCls}-tabs`, hashId)
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: bodyCls,
       style: mergedStyles.body,

package/lib/card/components/Card/style.js

@@ -28,11 +28,15 @@ const genProCardStyle = token => {
       paddingBlock: 0,
       paddingInline: 0,
       backgroundColor: token.colorBgContainer,
-      borderRadius: token.borderRadius,
+      borderRadius: token.borderRadiusLG,
       transition: 'all 0.3s',
       ...(0, _utils.resetComponent)?.(token),
+      // 对齐 antd v6 Card：variant='borderless' 默认就有 boxShadowTertiary 浅阴影。
+      '&&:not(&-border):not(&-box-shadow)': {
+        boxShadow: token.boxShadowTertiary
+      },
       '&-box-shadow': {
-        boxShadow: '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',
+        boxShadow: token.boxShadowTertiary,
         borderColor: 'transparent'
       },
       '&-col': {
@@ -62,14 +66,14 @@ const genProCardStyle = token => {
         }
       },
       '&-border': {
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`
       },
       '&-hoverable': {
         cursor: 'pointer',
         transition: 'box-shadow 0.3s, border-color 0.3s',
         '&:hover': {
           borderColor: 'transparent',
-          boxShadow: '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017'
+          boxShadow: token.boxShadowTertiary
         },
         [`&${componentCls}-checked:hover`]: {
           borderColor: token.controlOutline
@@ -97,6 +101,8 @@ const genProCardStyle = token => {
       },
       '&&-ghost': {
         backgroundColor: 'transparent',
+        border: 'none',
+        boxShadow: 'none',
         [`> ${componentCls}`]: {
           '&-header': {
             paddingInlineEnd: 0,
@@ -141,11 +147,12 @@ const genProCardStyle = token => {
         paddingInline: token.paddingLG,
         paddingBlock: token.padding,
         paddingBlockEnd: 0,
+        borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
         '&-border': {
           '&': {
             paddingBlockEnd: token.padding
           },
-          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`
         },
         '&-collapsible': {
           cursor: 'pointer'
@@ -177,7 +184,7 @@ const genProCardStyle = token => {
       },
       [`${componentCls}-cover`]: {
         overflow: 'hidden',
-        borderRadius: `${token.borderRadius}px ${token.borderRadius}px 0 0`,
+        borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
         '& > *': {
           width: '100%',
           display: 'block'
@@ -192,6 +199,7 @@ const genProCardStyle = token => {
         height: '100%',
         paddingInline: token.paddingLG,
         paddingBlock: token.padding,
+        borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
         '&-center': {
           display: 'flex',
           alignItems: 'center',
@@ -230,57 +238,67 @@ const genProCardStyle = token => {
       }
     },
     [`${componentCls}-tabs`]: {
-      [`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          marginBlockStart: token.marginXS,
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-bottom > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-left`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
+      [`&${token.antCls}-tabs-top`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginBlockEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingInlineStart: token.paddingLG
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
           [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
+            padding: token.paddingLG
           }
         }
       },
-      // 这里是为了保证 tabs 的高度和左侧的一致
-      [`${token.antCls}-tabs-left > ${token.antCls}-tabs-nav`]: {
-        marginInlineEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
+      [`&${token.antCls}-tabs-bottom`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginBlockEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingInlineStart: token.paddingLG
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            padding: token.paddingLG
+          }
         }
       },
-      [`${token.antCls}-tabs-right`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
+      [`&${token.antCls}-tabs-left`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          marginInlineEnd: 0,
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingBlockStart: token.padding
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
           [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
+            padding: token.paddingLG
           }
         }
       },
-      [`${token.antCls}-tabs-right > ${token.antCls}-tabs-nav`]: {
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
+      [`&${token.antCls}-tabs-right`]: {
+        [`> ${token.antCls}-tabs-nav`]: {
+          [`${token.antCls}-tabs-nav-list`]: {
+            paddingBlockStart: token.padding
+          }
+        },
+        [`> ${token.antCls}-tabs-body-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            padding: token.paddingLG
+          }
         }
       }
     }
   };
 };
 const GRID_COLUMNS = 24;
-const genColStyle = (index, token) => {
-  const {
-    componentCls
-  } = token;
+
+/**
+ * 生成单列的栅格样式。仅依赖 componentCls（前缀类名），不依赖任何 token 数值，
+ * 因此入参从完整 token 简化为字符串，函数本身可被缓存或在编译期推导。
+ */
+const genColStyle = (index, componentCls) => {
   if (index === 0) {
     return {
       [`${componentCls}-col-0`]: {
@@ -295,8 +313,20 @@ const genColStyle = (index, token) => {
     }
   };
 };
-const genGridStyle = token => {
-  return Array(GRID_COLUMNS + 1).fill(1).map((_, index) => genColStyle(index, token));
+
+/**
+ * 25 个列宽规则与 token 数值无关，按 prefixCls 缓存，避免每个 useStyle
+ * 实例重复构造数组与对象。绝大多数应用 prefixCls 唯一，命中缓存稳定。
+ */
+const gridStyleCache = new Map();
+const getGridStyleByCls = componentCls => {
+  const cached = gridStyleCache.get(componentCls);
+  if (cached) return cached;
+  const result = Array.from({
+    length: GRID_COLUMNS + 1
+  }, (_, index) => genColStyle(index, componentCls));
+  gridStyleCache.set(componentCls, result);
+  return result;
 };
 function useStyle(prefixCls) {
   return (0, _utils.useStyle)('ProCard', token => {
@@ -304,6 +334,6 @@ function useStyle(prefixCls) {
       ...token,
       componentCls: `.${prefixCls}`
     };
-    return [genProCardStyle(proCardToken), genGridStyle(proCardToken)];
+    return [genProCardStyle(proCardToken), getGridStyleByCls(proCardToken.componentCls)];
   });
 }

package/lib/card/components/CheckCard/Group.d.ts

@@ -135,49 +135,29 @@ export interface CheckCardGroupState {
     registeredValues: CheckCardValueType[];
 }
 /**
- * Represents the props for the CheckCardGroup component.
+ * CheckCardGroup 内部 context 的类型定义。
+ * 由 Group 组件向下传递，CheckCard 子组件通过 useContext 消费。
  */
-export type CheckCardGroupConnextType = {
-    /**
-     * A function to toggle the selected option.
-     * @param option - The option to toggle.
-     */
+export type CheckCardGroupContextType = {
+    /** 切换选项选中状态 */
     toggleOption?: (option: CheckCardOptionType) => void;
-    /**
-     * The currently selected value.
-     */
-    value?: any;
-    /**
-     * Specifies whether the component is disabled.
-     */
+    /** 当前选中值（单选为单值，多选为数组） */
+    value?: CheckGroupValueType;
+    /** 是否整组失效 */
     disabled?: boolean;
-    /**
-     * The size of the component.
-     */
-    size?: any;
-    /**
-     * Specifies whether the component is in a loading state.
-     */
-    loading?: any;
-    /**
-     * Specifies whether the component has a border.
-     */
-    bordered?: any;
-    /**
-     * Specifies whether multiple options can be selected.
-     */
-    multiple?: any;
-    /**
-     * A function to register a value.
-     * @param value - The value to register.
-     */
-    registerValue?: (value: any) => void;
-    /**
-     * A function to cancel a value.
-     * @param value - The value to cancel.
-     */
-    cancelValue?: (value: any) => void;
+    /** 组件尺寸 */
+    size?: 'large' | 'default' | 'small';
+    /** 是否处于 loading 状态 */
+    loading?: boolean;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 注册一个值（子卡片挂载时调用） */
+    registerValue?: (value: CheckCardValueType) => void;
+    /** 注销一个值（子卡片卸载时调用） */
+    cancelValue?: (value: CheckCardValueType) => void;
 };
-export declare const CheckCardGroupConnext: React.Context<CheckCardGroupConnextType | null>;
-declare const _default: (props: CheckCardGroupProps) => import("react/jsx-runtime").JSX.Element;
-export default _default;
+export declare const CheckCardGroupContext: React.Context<CheckCardGroupContextType | null>;
+declare const CheckCardGroupWithProvider: React.FC<CheckCardGroupProps>;
+export default CheckCardGroupWithProvider;

package/lib/card/components/CheckCard/Group.js

@@ -5,13 +5,14 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CheckCardGroupConnext = exports.CardLoading = void 0;
+exports.default = exports.CheckCardGroupContext = exports.CardLoading = 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 _utils = require("../../../utils");
 var _index = _interopRequireDefault(require("./index"));
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -46,10 +47,11 @@ const CardLoading = ({
  */
 
 /**
- * Represents the props for the CheckCardGroup component.
+ * CheckCardGroup 内部 context 的类型定义。
+ * 由 Group 组件向下传递，CheckCard 子组件通过 useContext 消费。
  */
 exports.CardLoading = CardLoading;
-const CheckCardGroupConnext = exports.CheckCardGroupConnext = /*#__PURE__*/(0, _react.createContext)(null);
+const CheckCardGroupContext = exports.CheckCardGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
 
 /**
  * SubCheckCardGroup component.
@@ -119,13 +121,26 @@ const CheckCardGroup = props => {
   const groupPrefixCls = `${prefixCls}-group`;
   const domProps = (0, _util.omit)(restProps, ['children', 'defaultValue', 'value', 'disabled', 'size']);
   const [stateValue, setStateValueInner] = (0, _util.useControlledState)(props.defaultValue, props.value);
+
+  // 使用 useRefFunction 锁住最新的 onChange 引用，避免每次外部 onChange 变化都重建 setStateValue。
+  const onChangeCallback = (0, _utils.useRefFunction)(next => {
+    onChange?.(next);
+  });
+
+  /**
+   * 使用 queueMicrotask 延迟回调调用，避免在渲染阶段触发外部回调导致的 React 警告
+   * "Cannot update a component while rendering a different component"。
+   * 与 ProCard 的 setCollapsed 模式保持一致。
+   */
   const setStateValue = (0, _react.useCallback)(updater => {
     setStateValueInner(prev => {
       const next = typeof updater === 'function' ? updater(prev) : updater;
-      onChange?.(next);
+      queueMicrotask(() => {
+        onChangeCallback(next);
+      });
       return next;
     });
-  }, [onChange]);
+  }, [onChangeCallback, setStateValueInner]);
   const registerValueMap = (0, _react.useRef)(new Map());
   const registerValue = value => {
     registerValueMap.current?.set(value, true);
@@ -134,36 +149,24 @@ const CheckCardGroup = props => {
     registerValueMap.current?.delete(value);
   };
   const toggleOption = option => {
+    // 单选模式：再次点击当前选中项时清空，否则切到新值
     if (!multiple) {
-      let changeValue;
-      changeValue = stateValue;
-      // 单选模式
-      if (changeValue === option.value) {
-        changeValue = undefined;
-      } else {
-        changeValue = option.value;
-      }
-      setStateValue?.(changeValue);
-    }
-    if (multiple) {
-      let changeValue = [];
-      const stateValues = stateValue;
-      const hasOption = stateValues?.includes(option.value);
-      changeValue = [...(stateValues || [])];
-      if (!hasOption) {
-        changeValue.push(option.value);
-      }
-      if (hasOption) {
-        changeValue = changeValue.filter(itemValue => itemValue !== option.value);
-      }
-      const newOptions = getOptions();
-      const newValue = changeValue?.filter(val => registerValueMap.current.has(val))?.sort((a, b) => {
-        const indexA = newOptions.findIndex(opt => opt.value === a);
-        const indexB = newOptions.findIndex(opt => opt.value === b);
-        return indexA - indexB;
-      });
-      setStateValue(newValue);
+      const nextValue = stateValue === option.value ? undefined : option.value;
+      setStateValue(nextValue);
+      return;
     }
+
+    // 多选模式：toggle option.value，并按选项原始顺序排序
+    const stateValues = stateValue ?? [];
+    const hasOption = stateValues.includes(option.value);
+    const toggled = hasOption ? stateValues.filter(itemValue => itemValue !== option.value) : [...stateValues, option.value];
+    const newOptions = getOptions();
+    const newValue = toggled.filter(val => registerValueMap.current.has(val)).sort((a, b) => {
+      const indexA = newOptions.findIndex(opt => opt.value === a);
+      const indexB = newOptions.findIndex(opt => opt.value === b);
+      return indexA - indexB;
+    });
+    setStateValue(newValue);
   };
   const children = (0, _react.useMemo)(() => {
     if (loading) {
@@ -200,19 +203,24 @@ const CheckCardGroup = props => {
     return props.children;
   }, [getOptions, loading, multiple, options, props.children, props.size, stateValue]);
   const classString = (0, _clsx.clsx)(groupPrefixCls, className, hashId);
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCardGroupConnext.Provider, {
-    value: {
-      toggleOption,
-      bordered,
-      value: stateValue,
-      disabled: props.disabled,
-      size: props.size,
-      loading: props.loading,
-      multiple: props.multiple,
-      // https://github.com/ant-design/ant-design/issues/16376
-      registerValue,
-      cancelValue
-    },
+
+  // useMemo 锁住 Provider value 的引用，避免 Group 重渲染时所有 CheckCard 子组件无脑重渲染。
+  // 注意：toggleOption / register / cancel 当前每次都是新函数，理论上还应进一步用 useRefFunction 锁住，
+  // 但当前已比 inline 对象字面量好得多，且不破坏现有行为。
+  const contextValue = (0, _react.useMemo)(() => ({
+    toggleOption,
+    bordered,
+    value: stateValue,
+    disabled: props.disabled,
+    size: props.size,
+    loading: props.loading,
+    multiple: props.multiple,
+    // https://github.com/ant-design/ant-design/issues/16376
+    registerValue,
+    cancelValue
+  }), [bordered, stateValue, props.disabled, props.size, props.loading, props.multiple]);
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCardGroupContext.Provider, {
+    value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classString,
       style: style,
@@ -221,10 +229,11 @@ const CheckCardGroup = props => {
     })
   }));
 };
-var _default = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
+const CheckCardGroupWithProvider = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_provider.ProConfigProvider, {
   needDeps: true,
   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckCardGroup, {
     ...props
   })
 });
-exports.default = _default;
+CheckCardGroupWithProvider.displayName = 'CheckCardGroup';
+var _default = exports.default = CheckCardGroupWithProvider;

package/lib/card/components/CheckCard/index.d.ts

@@ -1,7 +1,6 @@
 import type { MouseEventHandler } from 'react';
 import React from 'react';
 import type { CheckCardGroupProps } from './Group';
-import CheckCardGroup from './Group';
 /**
  * Props for the CheckCard component.
  */
@@ -158,8 +157,8 @@ interface CheckCardProps {
 export interface CheckCardState {
     checked: boolean;
 }
-declare const CheckCard: React.FC<CheckCardProps> & {
-    Group: typeof CheckCardGroup;
+declare const CheckCardWithGroup: React.FC<CheckCardProps> & {
+    Group: React.FC<CheckCardGroupProps>;
 };
 export type { CheckCardGroupProps, CheckCardProps };
-export default CheckCard;
+export default CheckCardWithGroup;