feat: Pagination showSizeChanger accepts SelectProps now (#50952)

components/pagination/Pagination.tsx

@@ -11,6 +11,7 @@ import enUS from 'rc-pagination/lib/locale/en_US';
 import { ConfigContext } from '../config-provider';
 import useSize from '../config-provider/hooks/useSize';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
+import type { SelectProps } from '../select';
 import { useLocale } from '../locale';
 import { useToken } from '../theme/internal';
 import { MiddleSelect, MiniSelect } from './Select';
@@ -24,6 +25,7 @@ export interface PaginationProps extends RcPaginationProps {
   role?: string;
   totalBoundaryShowSizeChanger?: number;
   rootClassName?: string;
+  showSizeChanger?: boolean | SelectProps;
 }
 
 export type PaginationPosition = 'top' | 'bottom' | 'both';

components/pagination/__tests__/type.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Pagination from '..';
+
+describe('Pagination types', () => {
+  it('Pagination showSizeChanger could accept SelectProps', () => {
+    const Demo = () => (
+      <Pagination
+        showSizeChanger={{
+          notFoundContent: <div />,
+          className: 'cls',
+          popupMatchSelectWidth: true,
+          onChange: (value) => {
+            console.log(value);
+          },
+        }}
+      />
+    );
+    expect(Demo).toBeTruthy();
+  });
+});

components/pagination/index.en-US.md

@@ -51,7 +51,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - |  |
 | showLessItems | Show less page items | boolean | false |  |
 | showQuickJumper | Determine whether you can jump to pages directly | boolean \| { goButton: ReactNode } | false |  |
-| showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean | - |  |
+| showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean \| [SelectProps](/components/select#api) | - | SelectProps: 5.21.0 |
 | showTitle | Show page item's title | boolean | true |  |
 | showTotal | To display the total number and range | function(total, range) | - |  |
 | simple | Whether to use simple mode | boolean \| { readOnly?: boolean } | - |  |

components/pagination/index.zh-CN.md

@@ -52,7 +52,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
 | responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - |  |
 | showLessItems | 是否显示较少页面内容 | boolean | false |  |
 | showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false |  |
-| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean | - |  |
+| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean \| [SelectProps](/components/select-cn#api) | - | SelectProps: 5.21.0 |
 | showTitle | 是否显示原生 tooltip 页码提示 | boolean | true |  |
 | showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - |  |
 | simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - |  |

package.json

@@ -130,7 +130,7 @@
     "rc-menu": "~9.15.1",
     "rc-motion": "^2.9.2",
     "rc-notification": "~5.6.1",
-    "rc-pagination": "~4.2.0",
+    "rc-pagination": "~4.3.0",
     "rc-picker": "~4.6.14",
     "rc-progress": "~4.0.0",
     "rc-rate": "~2.13.0",