chore: next merge feature

2025-01-18 14:13:37 +08:00 · 2022-05-27 16:40:17 +08:00 · 2022-05-27 16:40:17 +08:00 · 461b605555
commit 461b605555
parent 024d5cfad9 7a2a4e2a71
27 changed files with 433 additions and 305 deletions
--- a/components/alert/tests/index.test.tsx
+++ b/components/alert/tests/index.test.tsx
@ -1,13 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import Button from '../../button';
-import Tooltip from '../../tooltip';
-import Popconfirm from '../../popconfirm';
-import rtlTest from '../../../tests/shared/rtlTest';
-import accessibilityTest from '../../../tests/shared/accessibilityTest';
-import { sleep } from '../../../tests/utils';
 import Alert from '..';
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+import { fireEvent, render, sleep } from '../../../tests/utils';
+import Button from '../../button';
+import Popconfirm from '../../popconfirm';
+import Tooltip from '../../tooltip';

 const { ErrorBoundary } = Alert;

@ -25,7 +24,7 @@ describe('Alert', () => {

  it('could be closed', () => {
    const onClose = jest.fn();
-    const wrapper = mount(
+    const { container } = render(
      <Alert
        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
        type="warning"
@ -33,9 +32,10 @@ describe('Alert', () => {
        onClose={onClose}
      />,
    );
+
    act(() => {
      jest.useFakeTimers();
-      wrapper.find('.ant-alert-close-icon').simulate('click');
+      fireEvent.click(container.querySelector('.ant-alert-close-icon')!);
      jest.runAllTimers();
      jest.useRealTimers();
    });
@ -44,7 +44,7 @@ describe('Alert', () => {

  describe('action of Alert', () => {
    it('custom action', () => {
-      const wrapper = mount(
+      const { container } = render(
        <Alert
          message="Success Tips"
          type="success"
@ -57,12 +57,12 @@ describe('Alert', () => {
          closable
        />,
      );
-      expect(wrapper.render()).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
    });
  });

  it('support closeIcon', () => {
-    const wrapper = mount(
+    const { container } = render(
      <Alert
        closable
        closeIcon={<span>close</span>}
@ -70,26 +70,26 @@ describe('Alert', () => {
        type="warning"
      />,
    );
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
  });

  describe('data and aria props', () => {
    it('sets data attributes on input', () => {
-      const wrapper = mount(<Alert data-test="test-id" data-id="12345" message={null} />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
+      const { container } = render(<Alert data-test="test-id" data-id="12345" message={null} />);
+      const input = container.querySelector('.ant-alert')!;
      expect(input.getAttribute('data-test')).toBe('test-id');
      expect(input.getAttribute('data-id')).toBe('12345');
    });

    it('sets aria attributes on input', () => {
-      const wrapper = mount(<Alert aria-describedby="some-label" message={null} />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
+      const { container } = render(<Alert aria-describedby="some-label" message={null} />);
+      const input = container.querySelector('.ant-alert')!;
      expect(input.getAttribute('aria-describedby')).toBe('some-label');
    });

    it('sets role attribute on input', () => {
-      const wrapper = mount(<Alert role="status" message={null} />);
-      const input = wrapper.find('.ant-alert').getDOMNode();
+      const { container } = render(<Alert role="status" message={null} />);
+      const input = container.querySelector('.ant-alert')!;
      expect(input.getAttribute('role')).toBe('status');
    });
  });
@ -101,13 +101,13 @@ describe('Alert', () => {
    // @ts-expect-error
    // eslint-disable-next-line react/jsx-no-undef
    const ThrowError = () => <NotExisted />;
-    const wrapper = mount(
+    const { container } = render(
      <ErrorBoundary>
        <ThrowError />
      </ErrorBoundary>,
    );
    // eslint-disable-next-line jest/no-standalone-expect
-    expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined');
+    expect(container.textContent).toContain('ReferenceError: NotExisted is not defined');
    // eslint-disable-next-line no-console
    (console.error as any).mockRestore();
  });
@ -115,7 +115,7 @@ describe('Alert', () => {
  it('could be used with Tooltip', async () => {
    const ref = React.createRef<any>();
    jest.useRealTimers();
-    const wrapper = mount(
+    const { container } = render(
      <Tooltip title="xxx" mouseEnterDelay={0} ref={ref}>
        <Alert
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@ -123,7 +123,8 @@ describe('Alert', () => {
        />
      </Tooltip>,
    );
-    wrapper.find('.ant-alert').simulate('mouseenter');
+    // wrapper.find('.ant-alert').simulate('mouseenter');
+    fireEvent.mouseEnter(container.querySelector('.ant-alert')!);
    await sleep(0);
    expect(ref.current.getPopupDomNode()).toBeTruthy();
    jest.useFakeTimers();
@ -132,7 +133,7 @@ describe('Alert', () => {
  it('could be used with Popconfirm', async () => {
    const ref = React.createRef<any>();
    jest.useRealTimers();
-    const wrapper = mount(
+    const { container } = render(
      <Popconfirm ref={ref} title="xxx">
        <Alert
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@ -140,19 +141,21 @@ describe('Alert', () => {
        />
      </Popconfirm>,
    );
-    wrapper.find('.ant-alert').simulate('click');
+    fireEvent.click(container.querySelector('.ant-alert')!);
    await sleep(0);
    expect(ref.current.getPopupDomNode()).toBeTruthy();
    jest.useFakeTimers();
  });

  it('could accept none react element icon', () => {
-    const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const { container } = render(
+      <Alert message="Success Tips" type="success" showIcon icon="icon" />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
  });

  it('should not render message div when no message', () => {
-    const wrapper = mount(<Alert description="description" />);
-    expect(wrapper.exists('.ant-alert-message')).toBe(false);
+    const { container } = render(<Alert description="description" />);
+    expect(!!container.querySelector('.ant-alert-message')).toBe(false);
  });
 });
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@ -0,0 +1,178 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import Tabs from '../tabs';
+import Grid from './Grid';
+import { ConfigContext } from '../config-provider';
+import SizeContext from '../config-provider/SizeContext';
+import type { TabsProps } from '../tabs';
+import Skeleton from '../skeleton';
+import useStyle from './style';
+
+export type CardType = 'inner';
+export type CardSize = 'default' | 'small';
+
+export interface CardTabListType {
+  key: string;
+  tab: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  prefixCls?: string;
+  title?: React.ReactNode;
+  extra?: React.ReactNode;
+  bordered?: boolean;
+  headStyle?: React.CSSProperties;
+  bodyStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  loading?: boolean;
+  hoverable?: boolean;
+  children?: React.ReactNode;
+  id?: string;
+  className?: string;
+  size?: CardSize;
+  type?: CardType;
+  cover?: React.ReactNode;
+  actions?: React.ReactNode[];
+  tabList?: CardTabListType[];
+  tabBarExtraContent?: React.ReactNode;
+  onTabChange?: (key: string) => void;
+  activeTabKey?: string;
+  defaultActiveTabKey?: string;
+  tabProps?: TabsProps;
+}
+
+function getAction(actions: React.ReactNode[]) {
+  const actionList = actions.map((action, index) => (
+    // eslint-disable-next-line react/no-array-index-key
+    <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
+      <span>{action}</span>
+    </li>
+  ));
+  return actionList;
+}
+
+const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>) => {
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const size = React.useContext(SizeContext);
+
+  const onTabChange = (key: string) => {
+    props.onTabChange?.(key);
+  };
+
+  const isContainGrid = () => {
+    let containGrid;
+    React.Children.forEach(props.children, (element: JSX.Element) => {
+      if (element && element.type && element.type === Grid) {
+        containGrid = true;
+      }
+    });
+    return containGrid;
+  };
+
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    extra,
+    headStyle = {},
+    bodyStyle = {},
+    title,
+    loading,
+    bordered = true,
+    size: customizeSize,
+    type,
+    cover,
+    actions,
+    tabList,
+    children,
+    activeTabKey,
+    defaultActiveTabKey,
+    tabBarExtraContent,
+    hoverable,
+    tabProps = {},
+    ...others
+  } = props;
+
+  const prefixCls = getPrefixCls('card', customizePrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const loadingBlock = (
+    <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
+      {children}
+    </Skeleton>
+  );
+
+  const hasActiveTabKey = activeTabKey !== undefined;
+  const extraProps = {
+    ...tabProps,
+    [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
+      ? activeTabKey
+      : defaultActiveTabKey,
+    tabBarExtraContent,
+  };
+
+  let head: React.ReactNode;
+  const tabs =
+    tabList && tabList.length ? (
+      <Tabs
+        size="large"
+        {...extraProps}
+        className={`${prefixCls}-head-tabs`}
+        onChange={onTabChange}
+      >
+        {tabList.map(item => (
+          <Tabs.TabPane tab={item.tab} disabled={item.disabled} key={item.key} />
+        ))}
+      </Tabs>
+    ) : null;
+  if (title || extra || tabs) {
+    head = (
+      <div className={`${prefixCls}-head`} style={headStyle}>
+        <div className={`${prefixCls}-head-wrapper`}>
+          {title && <div className={`${prefixCls}-head-title`}>{title}</div>}
+          {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
+        </div>
+        {tabs}
+      </div>
+    );
+  }
+  const coverDom = cover ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
+  const body = (
+    <div className={`${prefixCls}-body`} style={bodyStyle}>
+      {loading ? loadingBlock : children}
+    </div>
+  );
+  const actionDom =
+    actions && actions.length ? (
+      <ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
+    ) : null;
+  const divProps = omit(others, ['onTabChange']);
+  const mergedSize = customizeSize || size;
+  const classString = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-hoverable`]: hoverable,
+      [`${prefixCls}-contain-grid`]: isContainGrid(),
+      [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
+      [`${prefixCls}-${mergedSize}`]: mergedSize,
+      [`${prefixCls}-type-${type}`]: !!type,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+    hashId,
+  );
+
+  return wrapSSR(
+    <div ref={ref} {...divProps} className={classString}>
+      {head}
+      {coverDom}
+      {body}
+      {actionDom}
+    </div>,
+  );
+});
+
+export default Card;
--- a/components/card/tests/type.test.tsx
+++ b/components/card/tests/type.test.tsx
@ -0,0 +1,14 @@
+import * as React from 'react';
+import Card from '../index';
+
+describe('Card.typescript', () => {
+  it('ref', () => {
+    function Demo() {
+      const cardRef = React.useRef<HTMLDivElement>(null);
+
+      return <Card ref={cardRef} />;
+    }
+
+    expect(Demo).toBeTruthy();
+  });
+});
--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@ -1,188 +1,19 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import omit from 'rc-util/lib/omit';
 import Grid from './Grid';
 import Meta from './Meta';
-import type { TabsProps } from '../tabs';
-import Tabs from '../tabs';
-import { ConfigContext } from '../config-provider';
-import SizeContext from '../config-provider/SizeContext';
-import useStyle from './style';
-import Skeleton from '../skeleton';
-
-function getAction(actions: React.ReactNode[]) {
-  const actionList = actions.map((action, index) => (
-    // eslint-disable-next-line react/no-array-index-key
-    <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
-      <span>{action}</span>
-    </li>
-  ));
-  return actionList;
-}
+import InternalCard from './Card';

 export { CardGridProps } from './Grid';
 export { CardMetaProps } from './Meta';
+export { CardProps, CardTabListType } from './Card';

-export type CardType = 'inner';
-export type CardSize = 'default' | 'small';
+type InternalCardType = typeof InternalCard;

-export interface CardTabListType {
-  key: string;
-  tab: React.ReactNode;
-  disabled?: boolean;
-}
-
-export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  prefixCls?: string;
-  title?: React.ReactNode;
-  extra?: React.ReactNode;
-  bordered?: boolean;
-  headStyle?: React.CSSProperties;
-  bodyStyle?: React.CSSProperties;
-  style?: React.CSSProperties;
-  loading?: boolean;
-  hoverable?: boolean;
-  children?: React.ReactNode;
-  id?: string;
-  className?: string;
-  size?: CardSize;
-  type?: CardType;
-  cover?: React.ReactNode;
-  actions?: React.ReactNode[];
-  tabList?: CardTabListType[];
-  tabBarExtraContent?: React.ReactNode;
-  onTabChange?: (key: string) => void;
-  activeTabKey?: string;
-  defaultActiveTabKey?: string;
-  tabProps?: TabsProps;
-}
-
-export interface CardInterface extends React.ForwardRefExoticComponent<CardProps> {
+export interface CardInterface extends InternalCardType {
  Grid: typeof Grid;
  Meta: typeof Meta;
 }

-const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>) => {
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
-  const size = React.useContext(SizeContext);
-
-  const onTabChange = (key: string) => {
-    props.onTabChange?.(key);
-  };
-
-  const isContainGrid = () => {
-    let containGrid;
-    React.Children.forEach(props.children, (element: JSX.Element) => {
-      if (element && element.type && element.type === Grid) {
-        containGrid = true;
-      }
-    });
-    return containGrid;
-  };
-
-  const {
-    prefixCls: customizePrefixCls,
-    className,
-    extra,
-    headStyle = {},
-    bodyStyle = {},
-    title,
-    loading,
-    bordered = true,
-    size: customizeSize,
-    type,
-    cover,
-    actions,
-    tabList,
-    children,
-    activeTabKey,
-    defaultActiveTabKey,
-    tabBarExtraContent,
-    hoverable,
-    tabProps = {},
-    ...others
-  } = props;
-
-  const prefixCls = getPrefixCls('card', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
-
-  const loadingBlock = (
-    <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
-      {children}
-    </Skeleton>
-  );
-
-  const hasActiveTabKey = activeTabKey !== undefined;
-  const extraProps = {
-    ...tabProps,
-    [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
-      ? activeTabKey
-      : defaultActiveTabKey,
-    tabBarExtraContent,
-  };
-
-  let head: React.ReactNode;
-  const tabs =
-    tabList && tabList.length ? (
-      <Tabs
-        size="large"
-        {...extraProps}
-        className={`${prefixCls}-head-tabs`}
-        onChange={onTabChange}
-      >
-        {tabList.map(item => (
-          <Tabs.TabPane tab={item.tab} disabled={item.disabled} key={item.key} />
-        ))}
-      </Tabs>
-    ) : null;
-  if (title || extra || tabs) {
-    head = (
-      <div className={`${prefixCls}-head`} style={headStyle}>
-        <div className={`${prefixCls}-head-wrapper`}>
-          {title && <div className={`${prefixCls}-head-title`}>{title}</div>}
-          {extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
-        </div>
-        {tabs}
-      </div>
-    );
-  }
-  const coverDom = cover ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
-  const body = (
-    <div className={`${prefixCls}-body`} style={bodyStyle}>
-      {loading ? loadingBlock : children}
-    </div>
-  );
-  const actionDom =
-    actions && actions.length ? (
-      <ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
-    ) : null;
-  const divProps = omit(others, ['onTabChange']);
-  const mergedSize = customizeSize || size;
-  const classString = classNames(
-    prefixCls,
-    {
-      [`${prefixCls}-loading`]: loading,
-      [`${prefixCls}-bordered`]: bordered,
-      [`${prefixCls}-hoverable`]: hoverable,
-      [`${prefixCls}-contain-grid`]: isContainGrid(),
-      [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
-      [`${prefixCls}-${mergedSize}`]: mergedSize,
-      [`${prefixCls}-type-${type}`]: !!type,
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    },
-    className,
-    hashId,
-  );
-
-  return wrapSSR(
-    <div ref={ref} {...divProps} className={classString}>
-      {head}
-      {coverDom}
-      {body}
-      {actionDom}
-    </div>,
-  );
-}) as CardInterface;
+const Card = InternalCard as CardInterface;

 Card.Grid = Grid;
 Card.Meta = Meta;
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@ -11,9 +11,12 @@ import CollapsePanel from './CollapsePanel';
 import { ConfigContext } from '../config-provider';
 import collapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';
+import warning from '../_util/warning';
 import useStyle from './style';

-export type ExpandIconPosition = 'left' | 'right' | undefined;
+/** @deprecated Please use `start` | `end` instead */
+type ExpandIconPositionLegacy = 'left' | 'right';
+export type ExpandIconPosition = 'start' | 'end' | ExpandIconPositionLegacy | undefined;

 export interface CollapseProps {
  activeKey?: Array<string | number> | string | number;
@ -52,17 +55,30 @@ interface CollapseInterface extends React.FC<CollapseProps> {

 const Collapse: CollapseInterface = props => {
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
-  const { prefixCls: customizePrefixCls, className = '', bordered = true, ghost } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    className = '',
+    bordered = true,
+    ghost,
+    expandIconPosition = 'start',
+  } = props;
  const prefixCls = getPrefixCls('collapse', customizePrefixCls);
  const [wrapSSR, hashId] = useStyle(prefixCls);

-  const getIconPosition = () => {
-    const { expandIconPosition } = props;
-    if (expandIconPosition !== undefined) {
-      return expandIconPosition;
+  // Warning if use legacy type `expandIconPosition`
+  warning(
+    expandIconPosition !== 'left' && expandIconPosition !== 'right',
+    'Collapse',
+    '`expandIconPosition` with `left` or `right` is deprecated. Please use `start` or `end` instead.',
+  );
+
+  // Align with logic position
+  const mergedExpandIconPosition = React.useMemo(() => {
+    if (expandIconPosition === 'left') {
+      return 'start';
    }
-    return direction === 'rtl' ? 'right' : 'left';
-  };
+    return expandIconPosition === 'right' ? 'end' : expandIconPosition;
+  }, [expandIconPosition]);

  const renderExpandIcon = (panelProps: PanelProps = {}) => {
    const { expandIcon } = props;
@ -84,11 +100,10 @@ const Collapse: CollapseInterface = props => {
    );
  };

-  const iconPosition = getIconPosition();
  const collapseClassName = classNames(
+    `${prefixCls}-icon-position-${mergedExpandIconPosition}`,
    {
      [`${prefixCls}-borderless`]: !bordered,
-      [`${prefixCls}-icon-position-${iconPosition}`]: true,
      [`${prefixCls}-rtl`]: direction === 'rtl',
      [`${prefixCls}-ghost`]: !!ghost,
    },
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@ -2,7 +2,7 @@

 exports[`renders ./components/collapse/demo/accordion.md extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
  role="tablist"
 >
  <div
@ -109,7 +109,7 @@ exports[`renders ./components/collapse/demo/accordion.md extend context correctl

 exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -231,7 +231,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`

 exports[`renders ./components/collapse/demo/borderless.md extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -358,7 +358,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
    style="margin-bottom:8px"
  >
    <div
-      class="ant-collapse ant-collapse-icon-position-left"
+      class="ant-collapse ant-collapse-icon-position-start"
    >
      <div
        class="ant-collapse-item ant-collapse-item-active"
@ -419,7 +419,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
    class="ant-space-item"
  >
    <div
-      class="ant-collapse ant-collapse-icon-position-left"
+      class="ant-collapse ant-collapse-icon-position-start"
    >
      <div
        class="ant-collapse-item ant-collapse-item-disabled"
@ -461,7 +461,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc

 exports[`renders ./components/collapse/demo/custom.md extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left site-collapse-custom-collapse"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless site-collapse-custom-collapse"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
@ -584,7 +584,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
 exports[`renders ./components/collapse/demo/extra.md extend context correctly 1`] = `
 Array [
  <div
-    class="ant-collapse ant-collapse-icon-position-left"
+    class="ant-collapse ant-collapse-icon-position-start"
  >
    <div
      class="ant-collapse-item ant-collapse-item-active"
@ -806,9 +806,9 @@ Array [
      </span>
      <span
        class="ant-select-selection-item"
-        title="left"
+        title="start"
      >
-        left
+        start
      </span>
    </div>
    <div>
@ -823,20 +823,20 @@ Array [
            style="height:0;width:0;overflow:hidden"
          >
            <div
-              aria-label="left"
+              aria-label="start"
              aria-selected="true"
              id="undefined_list_0"
              role="option"
            >
-              left
+              start
            </div>
            <div
-              aria-label="right"
+              aria-label="end"
              aria-selected="false"
              id="undefined_list_1"
              role="option"
            >
-              right
+              end
            </div>
          </div>
          <div
@ -855,12 +855,12 @@ Array [
                  <div
                    aria-selected="true"
                    class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                    title="left"
+                    title="start"
                  >
                    <div
                      class="ant-select-item-option-content"
                    >
-                      left
+                      start
                    </div>
                    <span
                      aria-hidden="true"
@ -872,12 +872,12 @@ Array [
                  <div
                    aria-selected="false"
                    class="ant-select-item ant-select-item-option"
-                    title="right"
+                    title="end"
                  >
                    <div
                      class="ant-select-item-option-content"
                    >
-                      right
+                      end
                    </div>
                    <span
                      aria-hidden="true"
@ -925,7 +925,7 @@ Array [

 exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left ant-collapse-ghost"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-ghost"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -1047,7 +1047,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`

 exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item"
@ -1153,7 +1153,7 @@ exports[`renders ./components/collapse/demo/mix.md extend context correctly 1`]

 exports[`renders ./components/collapse/demo/noarrow.md extend context correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
--- a/components/collapse/tests/snapshots/demo.test.js.snap
+++ b/components/collapse/tests/snapshots/demo.test.js.snap
@ -2,7 +2,7 @@

 exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
  role="tablist"
 >
  <div
@ -109,7 +109,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -231,7 +231,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -358,7 +358,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
    style="margin-bottom:8px"
  >
    <div
-      class="ant-collapse ant-collapse-icon-position-left"
+      class="ant-collapse ant-collapse-icon-position-start"
    >
      <div
        class="ant-collapse-item ant-collapse-item-active"
@ -419,7 +419,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
    class="ant-space-item"
  >
    <div
-      class="ant-collapse ant-collapse-icon-position-left"
+      class="ant-collapse ant-collapse-icon-position-start"
    >
      <div
        class="ant-collapse-item ant-collapse-item-disabled"
@ -461,7 +461,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left site-collapse-custom-collapse"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless site-collapse-custom-collapse"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active site-collapse-custom-panel"
@ -584,7 +584,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
 Array [
  <div
-    class="ant-collapse ant-collapse-icon-position-left"
+    class="ant-collapse ant-collapse-icon-position-start"
  >
    <div
      class="ant-collapse-item ant-collapse-item-active"
@ -806,9 +806,9 @@ Array [
      </span>
      <span
        class="ant-select-selection-item"
-        title="left"
+        title="start"
      >
-        left
+        start
      </span>
    </div>
    <span
@ -843,7 +843,7 @@ Array [

 exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left ant-collapse-ghost"
+  class="ant-collapse ant-collapse-icon-position-start ant-collapse-ghost"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -965,7 +965,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item"
@ -1071,7 +1071,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
--- a/components/collapse/tests/snapshots/index.test.js.snap
+++ b/components/collapse/tests/snapshots/index.test.js.snap
@ -2,7 +2,7 @@

 exports[`Collapse could override default openMotion 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -52,7 +52,7 @@ exports[`Collapse could override default openMotion 1`] = `

 exports[`Collapse should render extra node of panel 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item"
@ -143,7 +143,7 @@ exports[`Collapse should render extra node of panel 1`] = `

 exports[`Collapse should support remove expandIcon 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item"
--- a/components/collapse/tests/index.test.js
+++ b/components/collapse/tests/index.test.js
@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { sleep } from '../../../tests/utils';
+import { sleep, render } from '../../../tests/utils';
 import { resetWarned } from '../../_util/warning';

 describe('Collapse', () => {
@ -10,6 +10,10 @@ describe('Collapse', () => {

  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

+  beforeEach(() => {
+    resetWarned();
+  });
+
  afterEach(() => {
    errorSpy.mockReset();
  });
@ -82,7 +86,6 @@ describe('Collapse', () => {
  });

  it('should trigger warning and keep compatibility when using disabled in Panel', () => {
-    resetWarned();
    const wrapper = mount(
      <Collapse>
        <Collapse.Panel disabled header="This is panel header 1" key="1">
@ -137,4 +140,30 @@ describe('Collapse', () => {
    window.requestAnimationFrame.mockRestore();
    jest.useRealTimers();
  });
+
+  describe('expandIconPosition', () => {
+    ['left', 'right'].forEach(pos => {
+      it(`warning for legacy '${pos}'`, () => {
+        render(
+          <Collapse expandIconPosition={pos}>
+            <Collapse.Panel header="header" key="1" />
+          </Collapse>,
+        );
+
+        expect(errorSpy).toHaveBeenCalledWith(
+          'Warning: [antd: Collapse] `expandIconPosition` with `left` or `right` is deprecated. Please use `start` or `end` instead.',
+        );
+      });
+
+      it('position end', () => {
+        const { container } = render(
+          <Collapse expandIconPosition="end">
+            <Collapse.Panel header="header" key="1" />
+          </Collapse>,
+        );
+
+        expect(container.querySelector('.ant-collapse-icon-position-end')).toBeTruthy();
+      });
+    });
+  });
 });
--- a/components/collapse/demo/extra.md
+++ b/components/collapse/demo/extra.md
@ -16,7 +16,6 @@ More than one panel can be expanded at a time, the first panel is initialized to
 ```tsx
 import { SettingOutlined } from '@ant-design/icons';
 import { Collapse, Select } from 'antd';
-import type { ExpandIconPosition } from 'antd/lib/collapse/Collapse';
 import React, { useState } from 'react';

 const { Panel } = Collapse;
@ -28,8 +27,10 @@ const text = `
  it can be found as a welcome guest in many households across the world.
 `;

+type ExpandIconPosition = 'start' | 'end';
+
 const App: React.FC = () => {
-  const [expandIconPosition, setExpandIconPosition] = useState<ExpandIconPosition>('left');
+  const [expandIconPosition, setExpandIconPosition] = useState<ExpandIconPosition>('start');

  const onPositionChange = (newExpandIconPosition: ExpandIconPosition) => {
    setExpandIconPosition(newExpandIconPosition);
@ -68,8 +69,8 @@ const App: React.FC = () => {
      <br />
      <span>Expand Icon Position: </span>
      <Select value={expandIconPosition} style={{ margin: '0 8px' }} onChange={onPositionChange}>
-        <Option value="left">left</Option>
-        <Option value="right">right</Option>
+        <Option value="start">start</Option>
+        <Option value="end">end</Option>
      </Select>
    </>
  );
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -26,7 +26,7 @@ A content area which can be collapsed and expanded.
 | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
 | destroyInactivePanel | Destroy Inactive Panel | boolean | false |  |
 | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - |  |
-| expandIconPosition | Set expand icon position | `left` \| `right` | - |  |
+| expandIconPosition | Set expand icon position | `start` \| `end` | - | 4.21.0 |
 | ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
 | onChange | Callback function executed when active panel is changed | function | - |  |

--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -27,17 +27,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
 | defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - |  |
 | destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false |  |
 | expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |  |
-| expandIconPosition | 设置图标位置 | `left` \| `right` | - |  |
+| expandIconPosition | 设置图标位置 | `start` \| `end` | - | 4.21.0 |
 | ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
 | onChange | 切换面板的回调 | function | - |  |

 ### Collapse.Panel

-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 |
-| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |  |
-| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
-| header | 面板头内容 | ReactNode | - |  |
-| key | 对应 activeKey | string \| number | - |  |
-| showArrow | 是否展示当前面板上的箭头 | boolean | true |  |
+| 参数        | 说明                           | 类型                   | 默认值 | 版本  |
+| ----------- | ------------------------------ | ---------------------- | ------ | ----- |
+| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | -      | 4.9.0 |
+| extra       | 自定义渲染每个面板右上角的内容 | ReactNode              | -      |       |
+| forceRender | 被隐藏时是否渲染 DOM 结构      | boolean                | false  |       |
+| header      | 面板头内容                     | ReactNode              | -      |       |
+| key         | 对应 activeKey                 | string \| number       | -      |       |
+| showArrow   | 是否展示当前面板上的箭头       | boolean                | true   |       |
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@ -66,8 +66,8 @@
 //     }
 //   }

-//   // Expand Icon right
-//   &-icon-position-right {
+//   // Expand Icon end
+//   &-icon-position-end {
 //     & > .@{collapse-prefix-cls}-item {
 //       > .@{collapse-prefix-cls}-header {
 //         position: relative;
--- a/components/collapse/style/rtl.less
+++ b/components/collapse/style/rtl.less
@ -6,6 +6,26 @@
 .@{collapse-prefix-cls} {
  &-rtl {
    direction: rtl;
+
+    // Expand Icon end
+    &.@{collapse-prefix-cls}.@{collapse-prefix-cls}-icon-position-end {
+      & > .@{collapse-prefix-cls}-item {
+        > .@{collapse-prefix-cls}-header {
+          position: relative;
+          padding: @collapse-header-padding;
+          padding-left: @collapse-header-padding-extra;
+
+          .@{collapse-prefix-cls}-arrow {
+            position: absolute;
+            top: 50%;
+            right: auto;
+            left: @padding-md;
+            margin: 0;
+            transform: translateY(-50%);
+          }
+        }
+      }
+    }
  }

  & > &-item {
--- a/components/config-provider/tests/snapshots/components.test.js.snap
+++ b/components/config-provider/tests/snapshots/components.test.js.snap
@ -12220,7 +12220,7 @@ exports[`ConfigProvider components Checkbox prefixCls 1`] = `

 exports[`ConfigProvider components Collapse configProvider 1`] = `
 <div
-  class="config-collapse config-collapse-icon-position-left"
+  class="config-collapse config-collapse-icon-position-start"
 >
  <div
    class="config-collapse-item"
@ -12260,7 +12260,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `

 exports[`ConfigProvider components Collapse configProvider componentDisabled 1`] = `
 <div
-  class="config-collapse config-collapse-icon-position-left"
+  class="config-collapse config-collapse-icon-position-start"
 >
  <div
    class="config-collapse-item"
@ -12300,7 +12300,7 @@ exports[`ConfigProvider components Collapse configProvider componentDisabled 1`]

 exports[`ConfigProvider components Collapse configProvider componentSize large 1`] = `
 <div
-  class="config-collapse config-collapse-icon-position-left"
+  class="config-collapse config-collapse-icon-position-start"
 >
  <div
    class="config-collapse-item"
@ -12340,7 +12340,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize large 1

 exports[`ConfigProvider components Collapse configProvider componentSize middle 1`] = `
 <div
-  class="config-collapse config-collapse-icon-position-left"
+  class="config-collapse config-collapse-icon-position-start"
 >
  <div
    class="config-collapse-item"
@ -12380,7 +12380,7 @@ exports[`ConfigProvider components Collapse configProvider componentSize middle

 exports[`ConfigProvider components Collapse configProvider virtual and dropdownMatchSelectWidth 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item"
@ -12420,7 +12420,7 @@ exports[`ConfigProvider components Collapse configProvider virtual and dropdownM

 exports[`ConfigProvider components Collapse normal 1`] = `
 <div
-  class="ant-collapse ant-collapse-icon-position-left"
+  class="ant-collapse ant-collapse-icon-position-start"
 >
  <div
    class="ant-collapse-item"
@ -12460,7 +12460,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `

 exports[`ConfigProvider components Collapse prefixCls 1`] = `
 <div
-  class="prefix-Collapse prefix-Collapse-icon-position-left"
+  class="prefix-Collapse prefix-Collapse-icon-position-start"
 >
  <div
    class="prefix-Collapse-item"
--- a/components/config-provider/tests/pagination.test.tsx
+++ b/components/config-provider/tests/pagination.test.tsx
@ -0,0 +1,18 @@
+import React from 'react';
+import ConfigProvider from '..';
+import { render } from '../../../tests/utils';
+import Pagination from '../../pagination';
+
+describe('ConfigProvider.Pagination', () => {
+  it('showSizeChanger', () => {
+    // Default have
+    const sharedNode = <Pagination total={1000} />;
+    const { container: rawContainer } = render(sharedNode);
+    expect(rawContainer.querySelector('.ant-pagination-options-size-changer')).toBeTruthy();
+
+    const { container } = render(
+      <ConfigProvider pagination={{ showSizeChanger: false }}>{sharedNode}</ConfigProvider>,
+    );
+    expect(container.querySelector('.ant-pagination-options-size-changer')).toBeFalsy();
+  });
+});
--- a/components/config-provider/context.tsx
+++ b/components/config-provider/context.tsx
@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { SeedToken } from '../_util/theme';
 import type { OverrideToken } from '../_util/theme/interface';
-import type { RenderEmptyHandler } from './defaultRenderEmpty';
-import type { Locale } from '../locale-provider';
-import type { SizeType } from './SizeContext';
 import type { RequiredMark } from '../form/Form';
+import type { Locale } from '../locale-provider';
+import type { RenderEmptyHandler } from './defaultRenderEmpty';
+import type { SizeType } from './SizeContext';

 export const defaultIconPrefixCls = 'anticon';

@ -41,6 +41,9 @@ export interface ConfigConsumerProps {
  input?: {
    autoComplete?: string;
  };
+  pagination?: {
+    showSizeChanger?: boolean;
+  };
  locale?: Locale;
  pageHeader?: {
    ghost: boolean;
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -39,7 +39,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true |  |
-| componentDisabled | Config antd component `disabled` | boolean | - |  |
+| componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
 | direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -48,6 +48,7 @@ const PASSED_PROPS: Exclude<keyof ConfigConsumerProps, 'rootPrefixCls' | 'getPre
  'renderEmpty',
  'pageHeader',
  'input',
+  'pagination',
  'form',
 ];

@ -68,6 +69,9 @@ export interface ConfigProviderProps {
  input?: {
    autoComplete?: string;
  };
+  pagination?: {
+    showSizeChanger?: boolean;
+  };
  locale?: Locale;
  pageHeader?: {
    ghost: boolean;
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -40,7 +40,7 @@ export default () => (
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |  |
-| componentDisabled | 设置 antd 组件禁用状态 | boolean | - |  |
+| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
--- a/components/pagination/Pagination.tsx
+++ b/components/pagination/Pagination.tsx
@ -1,16 +1,16 @@
-import * as React from 'react';
+import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
+import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
+import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import RightOutlined from '@ant-design/icons/RightOutlined';
+import classNames from 'classnames';
 import type { PaginationProps as RcPaginationProps } from 'rc-pagination';
 import RcPagination, { PaginationLocale } from 'rc-pagination';
 import enUS from 'rc-pagination/lib/locale/en_US';
-import classNames from 'classnames';
-import LeftOutlined from '@ant-design/icons/LeftOutlined';
-import RightOutlined from '@ant-design/icons/RightOutlined';
-import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
-import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
-import { MiniSelect, MiddleSelect } from './Select';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { MiddleSelect, MiniSelect } from './Select';
 import useStyle from './style';

 export interface PaginationProps extends RcPaginationProps {
@ -37,16 +37,19 @@ const Pagination: React.FC<PaginationProps> = ({
  locale: customLocale,
  selectComponentClass,
  responsive,
+  showSizeChanger,
  ...restProps
 }) => {
  const { xs } = useBreakpoint(responsive);

-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, pagination = {} } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('pagination', customizePrefixCls);

  // Style
  const [wrapSSR, hashId] = useStyle(prefixCls);

+  const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger;
+
  const getIconsProps = () => {
    const ellipsis = <span className={`${prefixCls}-item-ellipsis`}>•••</span>;
    let prevIcon = (
@ -112,6 +115,7 @@ const Pagination: React.FC<PaginationProps> = ({
        className={extendedClassName}
        selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
        locale={locale}
+        showSizeChanger={mergedShowSizeChanger}
      />,
    );
  };
--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@ -3,7 +3,7 @@

 // @popover-prefix-cls: ~'@{ant-prefix}-popover';

-// @popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+// @popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) + 6px;

 // @popover-arrow-offset-vertical: 12px;
 // @popover-arrow-offset-horizontal: 16px;
@ -21,6 +21,10 @@
 //   cursor: auto;
 //   user-select: text;

+//   &-content {
+//     position: relative;
+//   }
+
 //   &::after {
 //     position: absolute;
 //     background: fade(@white, 1%);
@ -144,7 +148,8 @@
 //   &-placement-top &-arrow,
 //   &-placement-topLeft &-arrow,
 //   &-placement-topRight &-arrow {
-//     bottom: @popover-distance - @popover-arrow-rotate-width;
+//     bottom: 0;
+//     transform: translateY(100%);

 //     &-content {
 //       box-shadow: 3px 3px 7px fade(@black, 7%);
@ -154,7 +159,7 @@

 //   &-placement-top &-arrow {
 //     left: 50%;
-//     transform: translateX(-50%);
+//     transform: translateY(100%) translateX(-50%);
 //   }

 //   &-placement-topLeft &-arrow {
@ -168,7 +173,8 @@
 //   &-placement-right &-arrow,
 //   &-placement-rightTop &-arrow,
 //   &-placement-rightBottom &-arrow {
-//     left: @popover-distance - @popover-arrow-rotate-width;
+//     left: 0;
+//     transform: translateX(-100%);

 //     &-content {
 //       box-shadow: 3px 3px 7px fade(@black, 7%);
@ -178,7 +184,7 @@

 //   &-placement-right &-arrow {
 //     top: 50%;
-//     transform: translateY(-50%);
+//     transform: translateX(-100%) translateY(-50%);
 //   }

 //   &-placement-rightTop &-arrow {
@ -192,7 +198,8 @@
 //   &-placement-bottom &-arrow,
 //   &-placement-bottomLeft &-arrow,
 //   &-placement-bottomRight &-arrow {
-//     top: @popover-distance - @popover-arrow-rotate-width;
+//     top: 0;
+//     transform: translateY(-100%);

 //     &-content {
 //       box-shadow: 2px 2px 5px fade(@black, 6%);
@ -202,7 +209,7 @@

 //   &-placement-bottom &-arrow {
 //     left: 50%;
-//     transform: translateX(-50%);
+//     transform: translateY(-100%) translateX(-50%);
 //   }

 //   &-placement-bottomLeft &-arrow {
@ -216,7 +223,8 @@
 //   &-placement-left &-arrow,
 //   &-placement-leftTop &-arrow,
 //   &-placement-leftBottom &-arrow {
-//     right: @popover-distance - @popover-arrow-rotate-width;
+//     right: 0;
+//     transform: translateX(100%);

 //     &-content {
 //       box-shadow: 3px 3px 7px fade(@black, 7%);
@ -226,7 +234,7 @@

 //   &-placement-left &-arrow {
 //     top: 50%;
-//     transform: translateY(-50%);
+//     transform: translateX(100%) translateY(-50%);
 //   }

 //   &-placement-leftTop &-arrow {
--- a/components/select/demo/select-users.md
+++ b/components/select/demo/select-users.md
@ -20,14 +20,14 @@ import debounce from 'lodash/debounce';
 import React, { useMemo, useRef, useState } from 'react';

 export interface DebounceSelectProps<ValueType = any>
-  extends Omit<SelectProps<ValueType>, 'options' | 'children'> {
+  extends Omit<SelectProps<ValueType | ValueType[]>, 'options' | 'children'> {
  fetchOptions: (search: string) => Promise<ValueType[]>;
  debounceTimeout?: number;
 }

 function DebounceSelect<
  ValueType extends { key?: string; label: React.ReactNode; value: string | number } = any,
->({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps) {
+>({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps<ValueType>) {
  const [fetching, setFetching] = useState(false);
  const [options, setOptions] = useState<ValueType[]>([]);
  const fetchRef = useRef(0);
@ -54,7 +54,7 @@ function DebounceSelect<
  }, [fetchOptions, debounceTimeout]);

  return (
-    <Select<ValueType>
+    <Select
      labelInValue
      filterOption={false}
      onSearch={debounceFetcher}
@ -96,7 +96,7 @@ const App: React.FC = () => {
      placeholder="Select users"
      fetchOptions={fetchUserList}
      onChange={newValue => {
-        setValue(newValue);
+        setValue(newValue as UserValue[]);
      }}
      style={{ width: '100%' }}
    />
--- a/components/skeleton/demo/list.md
+++ b/components/skeleton/demo/list.md
@ -45,7 +45,7 @@ const App: React.FC = () => {
  const [loading, setLoading] = useState(true);

  const onChange = (checked: boolean) => {
-    setLoading(checked);
+    setLoading(!checked);
  };
  return (
    <>
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@ -40,7 +40,7 @@ title: Third-Party Libraries
 | Page Footer | [rc-footer](https://github.com/react-component/footer) |
 | Water Mark | [WaterMark](https://procomponents.ant.design/components/water-mark) |
 | Currency | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
-| Application Frameworks | [refine](https://github.com/pankod/refine) |
+| Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |

 ## Products we are using ✨

--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@ -40,7 +40,7 @@ title: 社区精选组件
 | 页脚 | [rc-footer](https://github.com/react-component/footer) |
 | 水印 | [WaterMark](https://procomponents.ant.design/components/water-mark) |
 | 金额格式化 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) |
-| 应用程序框架 | [refine](https://github.com/pankod/refine) |
+| 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) |

 ## 推荐产品 ✨

--- a/package.json
+++ b/package.json
@ -120,7 +120,6 @@
    "@ant-design/react-slick": "~0.28.1",
    "@babel/runtime": "^7.12.5",
    "@ctrl/tinycolor": "^3.4.0",
-    "@types/qs": "^6.9.7",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.2.0",
    "dayjs": "^1.11.1",
@ -179,6 +178,7 @@
    "@types/jest-image-snapshot": "^4.1.0",
    "@types/lodash": "^4.14.139",
    "@types/puppeteer": "^5.4.0",
+    "@types/qs": "^6.9.7",
    "@types/react": "^18.0.0",
    "@types/react-color": "^3.0.1",
    "@types/react-copy-to-clipboard": "^5.0.0",
@ -295,7 +295,7 @@
    "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
    "stylelint-order": "^5.0.0",
    "theme-switcher": "^1.0.2",
-    "typescript": "~4.6.2",
+    "typescript": "~4.7.2",
    "webpack-bundle-analyzer": "^4.1.0",
    "xhr-mock": "^2.4.1",
    "yaml-front-matter": "^4.0.0"