Merge pull request #48383 from ant-design/master

chore: merge master into feature

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -41,7 +41,7 @@ const useStyle = createStyles(({ token }) => ({
     position: relative;
     display: inline-flex;
     align-items: center;
-    column-gap: 4px;
+    column-gap: ${token.paddingXXS}px;
     border-radius: ${token.borderRadiusSM}px;
     padding-inline: ${token.paddingXS}px;
     transition: all ${token.motionDurationSlow} !important;

.dumi/theme/builtins/IconSearch/index.tsx

@@ -7,7 +7,7 @@ const IconSearch = React.lazy(() => import('./IconSearch'));
 const useStyle = createStyles(({ token, css }) => ({
   searchWrapper: css`
     display: flex;
-    gap: 16px;
+    gap: ${token.padding}px;
     > *:first-child {
       flex: 0 0 328px;
     }

.dumi/theme/builtins/ResourceCards/index.tsx

@@ -45,7 +45,7 @@ const useStyle = createStyles(({ token, css }) => {
       border-radius: ${token.borderRadiusXS}px;
       box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
       display: inline-flex;
-      column-gap: 4px;
+      column-gap: ${token.paddingXXS}px;
     `,
     title: css`
       margin: ${token.margin}px ${token.marginMD}px ${token.marginXS}px;

.dumi/theme/slots/Header/index.tsx

@@ -101,7 +101,7 @@ const useStyle = createStyles(({ token, css }) => {
       display: flex;
       align-items: center;
       margin: 0;
-      column-gap: 12px;
+      column-gap: ${token.paddingSM}px;
       > * {
         flex: none;
         margin: 0;

.github/workflows/site-deploy.yml

@@ -83,7 +83,7 @@ jobs:
         run: echo "VERSION=$(echo ${{ github.ref_name }} | sed 's/\./-/g')" >> $GITHUB_OUTPUT
 
       - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./_site

BUG_VERSIONS.json

@@ -52,5 +52,6 @@
   "5.12.6": ["https://github.com/ant-design/ant-design/issues/46719"],
   "5.13.0": ["https://github.com/ant-design/ant-design/pull/46962"],
   "5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"],
-  "5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"]
+  "5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"],
+  ">= 5.16.0 <= 5.16.1": ["https://github.com/ant-design/ant-design/issues/48200"]
 }

components/alert/__tests__/index.test.tsx

@@ -5,7 +5,7 @@ import { resetWarned } from 'rc-util/lib/warning';
 import Alert from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { act, render, screen } from '../../../tests/utils';
+import { act, render, screen, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
@@ -108,11 +108,9 @@ describe('Alert', () => {
 
     await userEvent.hover(screen.getByRole('alert'));
 
-    act(() => {
-      jest.runAllTimers();
-    });
+    await waitFakeTimer();
 
-    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+    expect(document.querySelector<HTMLDivElement>('.ant-tooltip')).toBeInTheDocument();
   });
 
   it('could be used with Popconfirm', async () => {

components/avatar/index.ts

@@ -1,16 +1,11 @@
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-
-import type { AvatarProps } from './avatar';
 import InternalAvatar from './avatar';
 import Group from './group';
 
 export type { AvatarProps } from './avatar';
 export type { GroupProps } from './group';
 export { Group };
 
-type CompoundedComponent = ForwardRefExoticComponent<
-  AvatarProps & RefAttributes<HTMLSpanElement>
-> & {
+type CompoundedComponent = typeof InternalAvatar & {
   Group: typeof Group;
 };
 

components/badge/__tests__/index.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
+import type { GetRef } from '../../_util/type';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Tooltip from '../../tooltip';
@@ -75,7 +76,7 @@ describe('Badge', () => {
 
   // https://github.com/ant-design/ant-design/issues/10626
   it('should be composable with Tooltip', () => {
-    const ref = React.createRef<typeof Tooltip>();
+    const ref = React.createRef<GetRef<typeof Tooltip>>();
     const { container } = render(
       <Tooltip title="Fix the error" ref={ref}>
         <Badge status="error" />

components/badge/index.tsx

@@ -15,12 +15,6 @@ import useStyle from './style';
 
 export type { ScrollNumberProps } from './ScrollNumber';
 
-type CompoundedComponent = React.ForwardRefExoticComponent<
-  BadgeProps & React.RefAttributes<HTMLSpanElement>
-> & {
-  Ribbon: typeof Ribbon;
-};
-
 export interface BadgeProps {
   /** Number to show in badge */
   count?: React.ReactNode;
@@ -51,7 +45,7 @@ export interface BadgeProps {
   };
 }
 
-const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps> = (props, ref) => {
+const InternalBadge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
@@ -271,9 +265,13 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
       {statusTextNode}
     </span>,
   );
+});
+
+type CompoundedComponent = typeof InternalBadge & {
+  Ribbon: typeof Ribbon;
 };
 
-const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(InternalBadge) as CompoundedComponent;
+const Badge = InternalBadge as CompoundedComponent;
 
 Badge.Ribbon = Ribbon;
 

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -2,15 +2,14 @@ import * as React from 'react';
 
 import { ConfigContext } from '../config-provider';
 
-type CompoundedComponent = React.FC<{ children?: React.ReactNode }> & {
+type CompoundedComponent = React.FC<React.PropsWithChildren> & {
   /** @internal */
   __ANT_BREADCRUMB_SEPARATOR: boolean;
 };
 
 const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('breadcrumb');
-
   return (
     <li className={`${prefixCls}-separator`} aria-hidden="true">
       {children === '' ? children : children || '/'}

components/button/__tests__/index.test.tsx

@@ -4,6 +4,7 @@ import { resetWarned } from 'rc-util/lib/warning';
 import { act } from 'react-dom/test-utils';
 
 import Button from '..';
+import type { GetRef } from '../../_util/type';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
@@ -292,7 +293,7 @@ describe('Button', () => {
   });
 
   it('skip check 2 words when ConfigProvider disable this', () => {
-    const buttonInstance = React.createRef<HTMLElement>();
+    const buttonInstance = React.createRef<GetRef<typeof Button>>();
     render(
       <ConfigProvider autoInsertSpaceInButton={false}>
         <Button ref={buttonInstance}>test</Button>
@@ -369,13 +370,13 @@ describe('Button', () => {
       />
     );
 
-    const btnRef = React.createRef<HTMLButtonElement>();
+    const btnRef = React.createRef<GetRef<typeof Button>>();
     const refBtn = <Button ref={btnRef} />;
 
-    const anchorRef = React.createRef<HTMLAnchorElement>();
+    const anchorRef = React.createRef<GetRef<typeof Button>>();
     const refAnchor = <Button ref={anchorRef} />;
 
-    const htmlRef = React.createRef<HTMLElement>();
+    const htmlRef = React.createRef<GetRef<typeof Button>>();
     const refHtml = <Button ref={htmlRef} />;
 
     const btnAttr = <Button name="hello" />;

components/button/button.tsx

@@ -1,13 +1,5 @@
 /* eslint-disable react/button-has-type */
-import React, {
-  Children,
-  createRef,
-  forwardRef,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { Children, createRef, useContext, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import { composeRef } from 'rc-util/lib/ref';
@@ -61,14 +53,6 @@ export interface ButtonProps extends BaseButtonProps, MergedHTMLAttributes {
   htmlType?: ButtonHTMLType;
 }
 
-type CompoundedComponent = React.ForwardRefExoticComponent<
-  ButtonProps & React.RefAttributes<HTMLElement>
-> & {
-  Group: typeof Group;
-  /** @internal */
-  __ANT_BUTTON: boolean;
-};
-
 type LoadingConfigType = {
   loading: boolean;
   delay: number;
@@ -90,10 +74,10 @@ function getLoadingConfig(loading: BaseButtonProps['loading']): LoadingConfigTyp
   };
 }
 
-const InternalButton: React.ForwardRefRenderFunction<
+const InternalCompoundedButton = React.forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
   ButtonProps
-> = (props, ref) => {
+>((props, ref) => {
   const {
     loading = false,
     prefixCls: customizePrefixCls,
@@ -324,19 +308,22 @@ const InternalButton: React.ForwardRefRenderFunction<
       </Wave>
     );
   }
-
   return wrapCSSVar(buttonNode);
+});
+
+type CompoundedComponent = typeof InternalCompoundedButton & {
+  Group: typeof Group;
+  /** @internal */
+  __ANT_BUTTON: boolean;
 };
 
-const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
-  InternalButton,
-) as CompoundedComponent;
+const Button = InternalCompoundedButton as CompoundedComponent;
+
+Button.Group = Group;
+Button.__ANT_BUTTON = true;
 
 if (process.env.NODE_ENV !== 'production') {
   Button.displayName = 'Button';
 }
 
-Button.Group = Group;
-Button.__ANT_BUTTON = true;
-
 export default Button;

components/checkbox/index.ts

@@ -1,17 +1,13 @@
-import type * as React from 'react';
 import type { CheckboxRef } from 'rc-checkbox';
 
-import type { CheckboxProps } from './Checkbox';
 import InternalCheckbox from './Checkbox';
 import Group from './Group';
 
 export type { CheckboxChangeEvent, CheckboxProps } from './Checkbox';
 export type { CheckboxGroupProps, CheckboxOptionType } from './Group';
 export type { CheckboxRef };
 
-type CompoundedComponent = React.ForwardRefExoticComponent<
-  CheckboxProps & React.RefAttributes<CheckboxRef>
-> & {
+type CompoundedComponent = typeof InternalCheckbox & {
   Group: typeof Group;
   /** @internal */
   __ANT_CHECKBOX: boolean;

components/date-picker/style/panel.ts

@@ -471,7 +471,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
 
           [`&-range-start td,
             &-range-end td,
-            &-selected td`]: {
+            &-selected td,
+            &-hover td`]: {
             // Rise priority to override hover style
             [`&${pickerCellCls}`]: {
               '&:before': {

components/float-button/FloatButton.tsx

@@ -8,21 +8,23 @@ import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import Tooltip from '../tooltip';
+import type BackTop from './BackTop';
 import FloatButtonGroupContext from './context';
 import Content from './FloatButtonContent';
+import type FloatButtonGroup from './FloatButtonGroup';
 import type {
-  CompoundedComponent,
   FloatButtonBadgeProps,
   FloatButtonContentProps,
   FloatButtonElement,
   FloatButtonProps,
   FloatButtonShape,
 } from './interface';
+import type PurePanel from './PurePanel';
 import useStyle from './style';
 
 export const floatButtonPrefixCls = 'float-btn';
 
-const FloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((props, ref) => {
+const InternalFloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -107,7 +109,15 @@ const FloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((prop
       </button>
     ),
   );
-}) as CompoundedComponent;
+});
+
+type CompoundedComponent = typeof InternalFloatButton & {
+  Group: typeof FloatButtonGroup;
+  BackTop: typeof BackTop;
+  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+};
+
+const FloatButton = InternalFloatButton as CompoundedComponent;
 
 if (process.env.NODE_ENV !== 'production') {
   FloatButton.displayName = 'FloatButton';

components/float-button/interface.ts

@@ -2,9 +2,6 @@ import type React from 'react';
 
 import type { BadgeProps } from '../badge';
 import type { TooltipProps } from '../tooltip';
-import type BackTop from './BackTop';
-import type Group from './FloatButtonGroup';
-import type PurePanel from './PurePanel';
 
 export type FloatButtonElement = HTMLAnchorElement & HTMLButtonElement;
 
@@ -67,11 +64,3 @@ export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
   style?: React.CSSProperties;
   duration?: number;
 }
-
-export type CompoundedComponent = React.ForwardRefExoticComponent<
-  FloatButtonProps & React.RefAttributes<FloatButtonElement>
-> & {
-  Group: typeof Group;
-  BackTop: typeof BackTop;
-  _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
-};

components/input/index.ts

@@ -1,7 +1,4 @@
-import type * as React from 'react';
-
 import Group from './Group';
-import type { InputProps, InputRef } from './Input';
 import InternalInput from './Input';
 import OTP from './OTP';
 import Password from './Password';
@@ -14,9 +11,7 @@ export type { PasswordProps } from './Password';
 export type { SearchProps } from './Search';
 export type { TextAreaProps } from './TextArea';
 
-type CompoundedComponent = React.ForwardRefExoticComponent<
-  InputProps & React.RefAttributes<InputRef>
-> & {
+type CompoundedComponent = typeof InternalInput & {
   Group: typeof Group;
   Search: typeof Search;
   TextArea: typeof TextArea;