chore: auto merge branches (#50953)

chore: merge feature to master

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 } | - |  |

components/select/demo/component-token.tsx

@@ -20,6 +20,9 @@ const App: React.FC = () => (
             multipleItemBorderColor: 'rgba(0,0,0,0.06)',
             multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',
             optionSelectedColor: '#1677ff',
+            hoverBorderColor: 'red',
+            activeBorderColor: 'green',
+            activeOutlineColor: 'pink',
           },
         },
       }}

components/select/style/token.ts

@@ -113,6 +113,21 @@ export interface ComponentToken extends MultipleSelectorToken {
    * @descEN Inline end padding of arrow
    */
   showArrowPaddingInlineEnd: number;
+  /**
+   * @desc 悬浮态边框色
+   * @descEN Hover border color
+   */
+  hoverBorderColor: string;
+  /**
+   * @desc 激活态边框色
+   * @descEN Active border color
+   */
+  activeBorderColor: string;
+  /**
+   * @desc 激活态 outline 颜色
+   * @descEN Active outline color
+   */
+  activeOutlineColor: string;
 }
 
 export interface SelectorToken {
@@ -151,6 +166,10 @@ export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
 
     colorBgContainerDisabled,
     colorTextDisabled,
+
+    colorPrimaryHover,
+    colorPrimary,
+    controlOutline,
   } = token;
 
   // Item height default use `controlHeight - 2 * paddingXXS`,
@@ -196,5 +215,8 @@ export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
     multipleItemColorDisabled: colorTextDisabled,
     multipleItemBorderColorDisabled: 'transparent',
     showArrowPaddingInlineEnd: Math.ceil(token.fontSize * 1.25),
+    hoverBorderColor: colorPrimaryHover,
+    activeBorderColor: colorPrimary,
+    activeOutlineColor: controlOutline,
   };
 };

components/select/style/variants.ts

@@ -12,7 +12,7 @@ const genBaseOutlinedStyle = (
     borderColor: string;
     hoverBorderHover: string;
     activeBorderColor: string;
-    activeShadowColor: string;
+    activeOutlineColor: string;
   },
 ): CSSObject => {
   const { componentCls, antCls, controlOutlineWidth } = token;
@@ -30,7 +30,7 @@ const genBaseOutlinedStyle = (
 
         [`${componentCls}-focused& ${componentCls}-selector`]: {
           borderColor: options.activeBorderColor,
-          boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeShadowColor}`,
+          boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeOutlineColor}`,
           outline: 0,
         },
       },
@@ -44,7 +44,7 @@ const genOutlinedStatusStyle = (
     borderColor: string;
     hoverBorderHover: string;
     activeBorderColor: string;
-    activeShadowColor: string;
+    activeOutlineColor: string;
   },
 ): CSSObject => ({
   [`&${token.componentCls}-status-${options.status}`]: {
@@ -56,9 +56,9 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
   '&-outlined': {
     ...genBaseOutlinedStyle(token, {
       borderColor: token.colorBorder,
-      hoverBorderHover: token.colorPrimaryHover,
+      hoverBorderHover: token.hoverBorderColor,
-      activeBorderColor: token.colorPrimary,
+      activeBorderColor: token.activeBorderColor,
-      activeShadowColor: token.controlOutline,
+      activeOutlineColor: token.activeOutlineColor,
     }),
 
     ...genOutlinedStatusStyle(token, {
@@ -66,7 +66,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
       borderColor: token.colorError,
       hoverBorderHover: token.colorErrorHover,
       activeBorderColor: token.colorError,
-      activeShadowColor: token.colorErrorOutline,
+      activeOutlineColor: token.colorErrorOutline,
     }),
 
     ...genOutlinedStatusStyle(token, {
@@ -74,7 +74,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
       borderColor: token.colorWarning,
       hoverBorderHover: token.colorWarningHover,
       activeBorderColor: token.colorWarning,
-      activeShadowColor: token.colorWarningOutline,
+      activeOutlineColor: token.colorWarningOutline,
     }),
 
     [`&${token.componentCls}-disabled`]: {

package.json

@@ -130,7 +130,7 @@
     "rc-menu": "~9.15.1",
     "rc-motion": "^2.9.3",
     "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",