chore: auto merge branches (#52372)

chore: merge master into feature

.dumi/theme/layouts/GlobalLayout.tsx

@@ -1,4 +1,5 @@
 import React, { Suspense, useCallback, useEffect } from 'react';
+import { Monitoring } from 'react-scan/monitoring';
 import {
   createCache,
   extractStyle,
@@ -12,7 +13,13 @@ import { getSandpackCssText } from '@codesandbox/sandpack-react';
 import { theme as antdTheme, App } from 'antd';
 import type { MappingAlgorithm } from 'antd';
 import type { DirectionType, ThemeConfig } from 'antd/es/config-provider';
-import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
+import {
+  createSearchParams,
+  useOutlet,
+  useParams,
+  useSearchParams,
+  useServerInsertedHTML,
+} from 'dumi';
 
 import { DarkContext } from '../../hooks/useDark';
 import useLayoutState from '../../hooks/useLayoutState';
@@ -63,6 +70,7 @@ const getAlgorithm = (themes: ThemeName[] = []) =>
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
   const { pathname } = useLocation();
+  const params = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const [{ theme = [], direction, isMobile, bannerVisible = false }, setSiteState] =
     useLayoutState<SiteState>({
@@ -225,7 +233,17 @@ const GlobalLayout: React.FC = () => {
       >
         <SiteContext.Provider value={siteContextValue}>
           <SiteThemeProvider theme={themeConfig}>
-            <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>
+            <HappyProvider disabled={!theme.includes('happy-work')}>
+              {content}
+              <Monitoring
+                apiKey="GhrCCNrHZHXlf4P6E03ntrFwhRLxJL30" // Safe to expose publically
+                url="https://monitoring.react-scan.com/api/v1/ingest"
+                commit={process.env.COMMIT_HASH}
+                branch={process.env.BRANCH}
+                params={params as Record<string, string>}
+                path={pathname}
+              />
+            </HappyProvider>
           </SiteThemeProvider>
         </SiteContext.Provider>
       </StyleProvider>

CHANGELOG.en-US.md

@@ -17,7 +17,7 @@ tag: vVERSION
 
 ## 5.23.0
 
-`2024-01-06`
+`2025-01-06`
 
 - 🔥 TreeSelect support `maxCount` to limit the maximum number of selections. [#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
 - 🔥 Modal `width` support responsive size. [#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)

CHANGELOG.zh-CN.md

@@ -17,7 +17,7 @@ tag: vVERSION
 
 ## 5.23.0
 
-`2024-01-06`
+`2025-01-06`
 
 - 🔥 TreeSelect 新增 `maxCount` 属性以限制最大选择数量。[#51759](https://github.com/ant-design/ant-design/pull/51759) [@aojunhao123](https://github.com/aojunhao123)
 - 🔥 Modal `width` 支持响应式尺寸。[#51653](https://github.com/ant-design/ant-design/pull/51653) [@zombieJ](https://github.com/zombieJ)

components/button/style/index.ts

@@ -698,7 +698,6 @@ const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation =>
 
           [iconCls]: {
             fontSize: buttonIconOnlyFontSize,
-            verticalAlign: 'calc(-0.125em - 1px)',
           },
         },
       },

components/button/style/token.ts

@@ -160,17 +160,17 @@ export interface ComponentToken {
    * @desc 只有图标的按钮图标尺寸
    * @descEN Icon size of button which only contains icon
    */
-  onlyIconSize: number;
+  onlyIconSize: number | string;
   /**
    * @desc 大号只有图标的按钮图标尺寸
    * @descEN Icon size of large button which only contains icon
    */
-  onlyIconSizeLG: number;
+  onlyIconSizeLG: number | string;
   /**
    * @desc 小号只有图标的按钮图标尺寸
    * @descEN Icon size of small button which only contains icon
    */
-  onlyIconSizeSM: number;
+  onlyIconSizeSM: number | string;
   /**
    * @desc 按钮组边框颜色
    * @descEN Border color of button group
@@ -233,7 +233,7 @@ export interface ButtonToken extends FullToken<'Button'> {
    * @desc 只有图标的按钮图标尺寸
    * @descEN Icon size of button which only contains icon
    */
-  buttonIconOnlyFontSize: number;
+  buttonIconOnlyFontSize: number | string;
 }
 
 export const prepareToken: (token: Parameters<GenStyleFn<'Button'>>[0]) => ButtonToken = (
@@ -275,9 +275,9 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
     paddingInline: token.paddingContentHorizontal - token.lineWidth,
     paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
     paddingInlineSM: 8 - token.lineWidth,
-    onlyIconSize: token.fontSizeLG,
+    onlyIconSize: 'inherit',
-    onlyIconSizeSM: token.fontSizeLG - 2,
+    onlyIconSizeSM: 'inherit',
-    onlyIconSizeLG: token.fontSizeLG + 2,
+    onlyIconSizeLG: 'inherit',
     groupBorderColor: token.colorPrimaryHover,
     linkHoverBg: 'transparent',
     textTextColor: token.colorText,

components/date-picker/style/panel.ts

@@ -265,6 +265,10 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
           display: 'inline-flex',
           alignItems: 'center',
           justifyContent: 'center',
+
+          '&:empty': {
+            display: 'none',
+          },
         },
 
         '> button': {

components/drawer/index.tsx

@@ -149,7 +149,7 @@ const Drawer: React.FC<DrawerProps> & {
   });
 
   // ============================ Refs ============================
-  // Select `ant-modal-content` by `panelRef`
+  // Select `ant-drawer-content` by `panelRef`
   const panelRef = usePanelRef();
 
   // ============================ zIndex ============================

components/table/__tests__/Table.rowSelection.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { TableProps } from '..';
 import Table from '..';
 import { resetWarned } from '../../_util/warning';
-import { act, fireEvent, render } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import type { TableRowSelection } from '../interface';
 
@@ -1977,4 +1977,127 @@ describe('Table.rowSelection', () => {
     expect(changeEvent).toHaveProperty('target');
     expect(changeEvent.target).toHaveProperty('checked');
   });
+
+  it('work with pagination and checkStrictly false', async () => {
+    const treeDataColumns = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+      },
+      {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+      },
+      {
+        title: 'Address',
+        dataIndex: 'address',
+        key: 'address',
+      },
+    ];
+    const treeData = [
+      {
+        key: 1,
+        name: 'John Brown sr.',
+        age: 60,
+        children: [
+          {
+            key: 12,
+            name: 'John Brown jr.',
+            age: 9,
+          },
+          {
+            key: 121,
+            name: 'Jimmy Brown',
+            age: 16,
+          },
+        ],
+      },
+      {
+        key: 2,
+        name: 'Joe Black',
+        age: 32,
+      },
+      {
+        key: 11,
+        name: 'John Brown',
+        age: 42,
+        children: [
+          {
+            key: 1311,
+            name: 'Jim Green jr.',
+            age: 25,
+          },
+          {
+            key: 1312,
+            name: 'Jimmy Green sr.',
+            age: 18,
+          },
+        ],
+      },
+      {
+        key: 13,
+        name: 'Jim Green sr.',
+        age: 72,
+        children: [
+          {
+            key: 131,
+            name: 'Jim Green',
+            age: 42,
+          },
+        ],
+      },
+    ];
+    const rowSelection = {
+      getCheckboxProps: (record: { age: number }) => {
+        return 'children' in record
+          ? {
+              disabled: false,
+            }
+          : {
+              disabled: record.age <= 10,
+            };
+      },
+      checkStrictly: false,
+    };
+    const { container } = render(
+      <Table
+        rowSelection={rowSelection}
+        columns={treeDataColumns}
+        dataSource={treeData}
+        pagination={{ pageSize: 2 }}
+      />,
+    );
+
+    let firstRowCheckbox = container.querySelector('tbody tr:first-child input.ant-checkbox-input');
+    let secondRowCheckbox = container.querySelector(
+      'tbody tr:nth-child(2) input.ant-checkbox-input',
+    );
+    const nextPageBtn = container.querySelector('.ant-pagination-next .ant-pagination-item-link');
+    const prevPageBtn = container.querySelector('.ant-pagination-prev .ant-pagination-item-link');
+    // Check the first row and the second row, then click the next page.
+    fireEvent.click(firstRowCheckbox!);
+    fireEvent.click(secondRowCheckbox!);
+    fireEvent.click(nextPageBtn!);
+    // update row checkbox element.
+    firstRowCheckbox = container.querySelector('tbody tr:first-child input.ant-checkbox-input');
+    secondRowCheckbox = container.querySelector('tbody tr:nth-child(2) input.ant-checkbox-input');
+    // Check the first row and the second row again, then click the previous page.
+    fireEvent.click(firstRowCheckbox!);
+    fireEvent.click(secondRowCheckbox!);
+    fireEvent.click(prevPageBtn!);
+
+    const firstRowExpandBtn = container?.querySelector(
+      'tbody tr:first-child .ant-table-cell-with-append .ant-table-row-expand-icon',
+    );
+    fireEvent.click(firstRowExpandBtn!);
+    await waitFakeTimer();
+    const checkboxOfRowWithKey12 = container.querySelector(
+      'tbody tr[data-row-key="12"] input.ant-checkbox-input',
+    ) as HTMLInputElement;
+
+    expect(checkboxOfRowWithKey12).toBeTruthy();
+    expect(checkboxOfRowWithKey12!.checked).toBeFalsy();
+  });
 });

components/table/hooks/useSelection.tsx

@@ -197,7 +197,16 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
   }, [flattedData, getRowKey, getCheckboxProps]);
 
   const isCheckboxDisabled: GetCheckDisabled<RecordType> = useCallback(
-    (r: RecordType) => !!checkboxPropsMap.get(getRowKey(r))?.disabled,
+    (r: RecordType) => {
+      const rowKey = getRowKey(r);
+      let checkboxProps: Partial<CheckboxProps> | undefined;
+      if (checkboxPropsMap.has(rowKey)) {
+        checkboxProps = checkboxPropsMap.get(getRowKey(r));
+      } else {
+        checkboxProps = getCheckboxProps ? getCheckboxProps(r) : undefined;
+      }
+      return !!checkboxProps?.disabled;
+    },
     [checkboxPropsMap, getRowKey],
   );
 

docs/blog/visual-regression.zh-CN.md

@@ -20,7 +20,7 @@ npm run test:image # 截图将会保存在 imageSnapshots 目录下, 指定组
 
 ### Argos
 
-早期使用我们使用 [Argos](https://argos-ci.com/) 作为视觉回归测试的方案，但是 Argos 修改了收费策略，antd 在每次 PR 中都会触发视觉回归测试，每次对比将近 6,000 张截图，这样的费用是我们无法承受的。
+早期我们使用 [Argos](https://argos-ci.com/) 作为视觉回归测试的方案，但是 Argos 修改了收费策略，antd 在每次 PR 中都会触发视觉回归测试，每次对比将近 6,000 张截图，这样的费用是我们无法承受的。
 
 ### Self-hosted
 

package.json

@@ -74,7 +74,7 @@
     "pub": "echo 'Please use `npm publish` instead.'",
     "postpublish": "tsx scripts/post-publish.ts",
     "presite": "npm run prestart",
-    "site": "npm i --no-save --legacy-peer-deps react@18.3.0-canary-c3048aab4-20240326 react-dom@18.3.0-canary-c3048aab4-20240326 && dumi build && cp .surgeignore _site",
+    "site": "npm i --no-save --legacy-peer-deps react@19.0.0 react-dom@19.0.0 && dumi build && cp .surgeignore _site",
     "size-limit": "size-limit",
     "sort:api-table": "antd-tools run sort-api-table",
     "sort:package-json": "npx sort-package-json",
@@ -282,7 +282,7 @@
     "prettier": "^3.4.1",
     "pretty-format": "^29.7.0",
     "prismjs": "^1.29.0",
-    "puppeteer": "^23.9.0",
+    "puppeteer": "^24.0.0",
     "qs": "^6.13.0",
     "rc-footer": "^0.6.8",
     "rc-tween-one": "^3.0.6",
@@ -299,6 +299,7 @@
     "react-intersection-observer": "^9.13.1",
     "react-resizable": "^3.0.5",
     "react-router-dom": "^7.0.1",
+    "react-scan": "^0.0.54",
     "react-sticky-box": "^2.0.5",
     "regenerator-runtime": "^0.14.1",
     "rehype-stringify": "^10.0.1",