Merge pull request #48735 from ant-design/feature

chore: merge feature to master
ant-design · May 2, 2024 · 2f304d1 · 2f304d1
2 parents 15c7e68 + 7b30c80
commit 2f304d1
Show file tree

Hide file tree

Showing 156 changed files with 4,525 additions and 1,063 deletions.
diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -91,7 +91,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) =
   }, [value]);
 
   return (
-    <Flex gap="large" align="center" wrap="wrap">
+    <Flex gap="large" align="center" wrap>
       <Input
         value={typeof value === 'string' ? value : value?.toHexString()}
         onChange={(event) => onChange?.(event.target.value)}

diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -84,7 +84,7 @@ const ThemePicker: React.FC<ThemePickerProps> = (props) => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
-    <Flex gap="large" wrap="wrap">
+    <Flex gap="large" wrap>
       {(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
         <Flex vertical gap="small" justify="center" align="center" key={theme}>
           <label

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -404,8 +404,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
               dangerouslySetInnerHTML={{ __html: description }}
             />
           )}
-
-          <Flex wrap="wrap" gap="middle" className="code-box-actions">
+          <Flex wrap gap="middle" className="code-box-actions">
             {showOnlineUrl && (
               <Tooltip title={<FormattedMessage id="app.demo.online" />}>
                 <a

diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx
@@ -1,77 +1,86 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
 export default () => {
   const { anchorTop } = useTheme();
 
+  React.useInsertionEffect(() => {
+    updateCSS(`@layer global, antd;`, 'site-global', {
+      prepend: true,
+    });
+  }, []);
+
   return (
     <Global
       styles={css`
-      body,
-      div,
-      dl,
-      dt,
-      dd,
-      ul,
-      ol,
-      li,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      pre,
-      code,
-      form,
-      fieldset,
-      legend,
-      input,
-      textarea,
-      p,
-      blockquote,
-      th,
-      td,
-      hr,
-      button,
-      article,
-      aside,
-      details,
-      figcaption,
-      figure,
-      footer,
-      header,
-      hgroup,
-      menu,
-      nav,
-      section {
-        margin: 0;
-        padding: 0;
-      }
+        @layer global {
+          body,
+          div,
+          dl,
+          dt,
+          dd,
+          ul,
+          ol,
+          li,
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6,
+          pre,
+          code,
+          form,
+          fieldset,
+          legend,
+          input,
+          textarea,
+          p,
+          blockquote,
+          th,
+          td,
+          hr,
+          button,
+          article,
+          aside,
+          details,
+          figcaption,
+          figure,
+          footer,
+          header,
+          hgroup,
+          menu,
+          nav,
+          section {
+            margin: 0;
+            padding: 0;
+          }
 
-      ul,
-      ol {
-        list-style: none;
-      }
+          ul,
+          ol {
+            list-style: none;
+          }
 
-      img {
-        vertical-align: middle;
-        border-style: none;
-      }
+          img {
+            vertical-align: middle;
+            border-style: none;
+          }
 
-      [id] {
-        scroll-margin-top: ${anchorTop}px;
-      }
+          [id] {
+            scroll-margin-top: ${anchorTop}px;
+          }
 
-      [data-prefers-color='dark'] {
-        color-scheme: dark;
-      }
+          [data-prefers-color='dark'] {
+            color-scheme: dark;
+          }
 
-      [data-prefers-color='light'] {
-        color-scheme: light;
-      }
-    `}
+          [data-prefers-color='light'] {
+            color-scheme: light;
+          }
+        }
+      `}
     />
   );
 };
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -204,6 +204,7 @@ const GlobalLayout: React.FC = () => {
       <StyleProvider
         cache={styleCache}
         linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]}
+        layer
       >
         <SiteContext.Provider value={siteContextValue}>
           <SiteThemeProvider theme={themeConfig}>

diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts
@@ -221,7 +221,8 @@ const RoutesPlugin = (api: IApi) => {
         const matchRegex = /<style data-type="antd-cssinjs">([\S\s]+?)<\/style>/;
         const matchList = file.content.match(matchRegex) || [];
 
-        let antdStyle = '';
+        // Init to order the `@layer`
+        let antdStyle = '@layer global, antd;';
 
         matchList.forEach((text) => {
           file.content = file.content.replace(text, '');

diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx
@@ -7,10 +7,11 @@ import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 
 interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
-  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   noStyle?: boolean;
   autoFocus?: boolean;
   disabled?: boolean;
+  tabIndex?: number;
 }
 
 const inlineStyle: React.CSSProperties = {
@@ -37,7 +38,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
     }
   };
 
-  const { style, noStyle, disabled, ...restProps } = props;
+  const { style, noStyle, disabled, tabIndex = 0, ...restProps } = props;
 
   let mergedStyle: React.CSSProperties = {};
 
@@ -59,7 +60,7 @@ const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, r
   return (
     <div
       role="button"
-      tabIndex={0}
+      tabIndex={tabIndex}
       ref={ref}
       {...restProps}
       onKeyDown={onKeyDown}

diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
@@ -15,6 +15,10 @@ import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
 
+export interface AlertRef {
+  nativeElement: HTMLDivElement;
+}
+
 export interface AlertProps {
   /** Type of Alert styles, options:`success`, `info`, `warning`, `error` */
   type?: 'success' | 'info' | 'warning' | 'error';
@@ -48,6 +52,8 @@ export interface AlertProps {
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
+
+  id?: string;
 }
 
 const iconMapFilled = {
@@ -102,7 +108,7 @@ const CloseIconNode: React.FC<CloseIconProps> = (props) => {
   ) : null;
 };
 
-const Alert: React.FC<AlertProps> = (props) => {
+const Alert = React.forwardRef<AlertRef, AlertProps>((props, ref) => {
   const {
     description,
     prefixCls: customizePrefixCls,
@@ -120,6 +126,7 @@ const Alert: React.FC<AlertProps> = (props) => {
     closeText,
     closeIcon,
     action,
+    id,
     ...otherProps
   } = props;
 
@@ -130,7 +137,12 @@ const Alert: React.FC<AlertProps> = (props) => {
     warning.deprecated(!closeText, 'closeText', 'closable.closeIcon');
   }
 
-  const ref = React.useRef<HTMLDivElement>(null);
+  const internalRef = React.useRef<HTMLDivElement>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    nativeElement: internalRef.current!,
+  }));
+
   const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
@@ -224,7 +236,8 @@ const Alert: React.FC<AlertProps> = (props) => {
     >
       {({ className: motionClassName, style: motionStyle }) => (
         <div
-          ref={ref}
+          id={id}
+          ref={internalRef}
           data-show={!closed}
           className={classNames(alertCls, motionClassName)}
           style={{ ...alert?.style, ...style, ...motionStyle }}
@@ -258,7 +271,7 @@ const Alert: React.FC<AlertProps> = (props) => {
       )}
     </CSSMotion>,
   );
-};
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Alert.displayName = 'Alert';

diff --git a/components/alert/ErrorBoundary.tsx b/components/alert/ErrorBoundary.tsx
@@ -6,6 +6,7 @@ interface ErrorBoundaryProps {
   message?: React.ReactNode;
   description?: React.ReactNode;
   children?: React.ReactNode;
+  id?: string;
 }
 
 interface ErrorBoundaryStates {
@@ -28,14 +29,15 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
   }
 
   render() {
-    const { message, description, children } = this.props;
+    const { message, description, id, children } = this.props;
     const { error, info } = this.state;
     const componentStack = info && info.componentStack ? info.componentStack : null;
     const errorMessage = typeof message === 'undefined' ? (error || '').toString() : message;
     const errorDescription = typeof description === 'undefined' ? componentStack : description;
     if (error) {
       return (
         <Alert
+          id={id}
           type="error"
           message={errorMessage}
           description={

diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
@@ -9,6 +9,7 @@ import { act, render, screen, waitFakeTimer } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
+import type { AlertRef } from '../Alert';
 
 const { ErrorBoundary } = Alert;
 
@@ -192,4 +193,13 @@ describe('Alert', () => {
 
     warnSpy.mockRestore();
   });
+
+  it('should support id and ref', () => {
+    const alertRef = React.createRef<AlertRef>();
+    const { container } = render(<Alert id="test-id" ref={alertRef} />);
+    const element = container.querySelector<HTMLDivElement>('#test-id');
+    expect(element).toBeTruthy();
+    expect(alertRef.current?.nativeElement).toBeTruthy();
+    expect(alertRef.current?.nativeElement).toBe(element);
+  });
 });
diff --git a/components/alert/index.ts b/components/alert/index.ts
@@ -1,12 +1,9 @@
-import type React from 'react';
-
-import type { AlertProps } from './Alert';
 import InternalAlert from './Alert';
 import ErrorBoundary from './ErrorBoundary';
 
 export type { AlertProps } from './Alert';
 
-type CompoundedComponent = React.FC<AlertProps> & {
+type CompoundedComponent = typeof InternalAlert & {
   ErrorBoundary: typeof ErrorBoundary;
 };