chore: auto merge branches (#46232)

merge feature into master
ant-design · Dec 4, 2023 · d019521 · d019521
2 parents 83f969b + f97cbff
commit d019521
Show file tree

Hide file tree

Showing 298 changed files with 5,688 additions and 3,758 deletions.
diff --git a/.dumi/hooks/useThemeAnimation.ts b/.dumi/hooks/useThemeAnimation.ts
@@ -68,6 +68,7 @@ const useThemeAnimation = () => {
     if (!(event && typeof document.startViewTransition === 'function')) {
       return;
     }
+    const time = Date.now();
     const x = event.clientX;
     const y = event.clientY;
     const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
@@ -98,6 +99,7 @@ const useThemeAnimation = () => {
         root.classList.add(isDark ? 'light' : 'dark');
       })
       .ready.then(() => {
+        console.log(`Theme transition finished in ${Date.now() - time}ms`);
         const clipPath = [
           `circle(0px at ${x}px ${y}px)`,
           `circle(${endRadius}px at ${x}px ${y}px)`,

diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
@@ -403,7 +403,6 @@ export default function Theme() {
           ...themeToken,
           colorPrimary: colorPrimaryValue,
         },
-        hashed: true,
         algorithm: algorithmFn,
         components: {
           Layout: isLight

diff --git a/.dumi/theme/builtins/DemoWrapper/index.tsx b/.dumi/theme/builtins/DemoWrapper/index.tsx
@@ -1,15 +1,36 @@
 import React, { useContext } from 'react';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
-import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons';
+import {
+  BugFilled,
+  BugOutlined,
+  CodeFilled,
+  CodeOutlined,
+  ExperimentFilled,
+  ExperimentOutlined,
+} from '@ant-design/icons';
 import classNames from 'classnames';
-import { Tooltip } from 'antd';
+import { ConfigProvider, Tooltip } from 'antd';
 import DemoContext from '../../slots/DemoContext';
 import useLayoutState from '../../../hooks/useLayoutState';
+import useLocale from '../../../hooks/useLocale';
+
+const locales = {
+  cn: {
+    enableCssVar: '启用 CSS 变量',
+    disableCssVar: '禁用 CSS 变量',
+  },
+  en: {
+    enableCssVar: 'Enable CSS Var',
+    disableCssVar: 'Disable CSS Var',
+  },
+};
 
 const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
   const { showDebug, setShowDebug } = useContext(DemoContext);
+  const [locale] = useLocale(locales);
 
   const [expandAll, setExpandAll] = useLayoutState(false);
+  const [enableCssVar, setEnableCssVar] = useLayoutState(true);
 
   const expandTriggerClass = classNames('code-box-expand-trigger', {
     'code-box-expand-trigger-active': expandAll,
@@ -23,29 +44,36 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
     setExpandAll(!expandAll);
   };
 
+  const handleCssVarToggle = () => {
+    setEnableCssVar((v) => !v);
+  };
+
   const demos = React.useMemo(
     () =>
-      items.reduce((acc, item) => {
-        const { previewerProps } = item;
-        const { debug } = previewerProps;
+      items.reduce(
+        (acc, item) => {
+          const { previewerProps } = item;
+          const { debug } = previewerProps;
 
-        if (debug && !showDebug) return acc;
+          if (debug && !showDebug) return acc;
 
-        return acc.concat({
-          ...item,
-          previewerProps: {
-            ...previewerProps,
-            expand: expandAll,
-            // always override debug property, because dumi will hide debug demo in production
-            debug: false,
-            /**
-             * antd extra marker for the original debug
-             * @see https://github.com/ant-design/ant-design/pull/40130#issuecomment-1380208762
-             */
-            originDebug: debug,
-          },
-        });
-      }, [] as typeof items),
+          return acc.concat({
+            ...item,
+            previewerProps: {
+              ...previewerProps,
+              expand: expandAll,
+              // always override debug property, because dumi will hide debug demo in production
+              debug: false,
+              /**
+               * antd extra marker for the original debug
+               * @see https://github.com/ant-design/ant-design/pull/40130#issuecomment-1380208762
+               */
+              originDebug: debug,
+            },
+          });
+        },
+        [] as typeof items,
+      ),
     [expandAll, showDebug],
   );
 
@@ -74,8 +102,17 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
             <BugOutlined className={expandTriggerClass} onClick={handleVisibleToggle} />
           )}
         </Tooltip>
+        <Tooltip title={enableCssVar ? locale.disableCssVar : locale.enableCssVar}>
+          {enableCssVar ? (
+            <ExperimentFilled className={expandTriggerClass} onClick={handleCssVarToggle} />
+          ) : (
+            <ExperimentOutlined className={expandTriggerClass} onClick={handleCssVarToggle} />
+          )}
+        </Tooltip>
       </span>
-      <DumiDemoGrid items={demos} />
+      <ConfigProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
+        <DumiDemoGrid items={demos} />
+      </ConfigProvider>
     </div>
   );
 };

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -5,7 +5,7 @@ import stackblitzSdk from '@stackblitz/sdk';
 import { Alert, Badge, Space, Tooltip } from 'antd';
 import { createStyles, css } from 'antd-style';
 import classNames from 'classnames';
-import { FormattedMessage, useSiteData, LiveContext } from 'dumi';
+import { FormattedMessage, LiveContext, useSiteData } from 'dumi';
 import LZString from 'lz-string';
 
 import type { AntdPreviewerProps } from './Previewer';

diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -4,7 +4,7 @@ import {
   createCache,
   extractStyle,
   legacyNotSelectorLinter,
-  logicalPropertiesLinter,
+  NaNLinter,
   parentSelectorLinter,
   StyleProvider,
 } from '@ant-design/cssinjs';
@@ -45,7 +45,7 @@ const getAlgorithm = (themes: ThemeName[] = []) =>
       }
       return null;
     })
-    .filter((item) => item) as typeof antdTheme.darkAlgorithm[];
+    .filter((item) => item) as (typeof antdTheme.darkAlgorithm)[];
 
 const GlobalLayout: React.FC = () => {
   const outlet = useOutlet();
@@ -168,7 +168,7 @@ const GlobalLayout: React.FC = () => {
     <DarkContext.Provider value={theme.includes('dark')}>
       <StyleProvider
         cache={styleCache}
-        linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
+        linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]}
       >
         <SiteContext.Provider value={siteContextValue}>
           <SiteThemeProvider
@@ -177,6 +177,8 @@ const GlobalLayout: React.FC = () => {
               token: {
                 motion: !theme.includes('motion-off'),
               },
+              cssVar: true,
+              hashed: false,
             }}
           >
             <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>

diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts
@@ -166,7 +166,7 @@ const RoutesPlugin = (api: IApi) => {
         });
 
         // Insert antd style to head
-        const matchRegex = /<style data-type="antd-cssinjs">(.*?)<\/style>/;
+        const matchRegex = /<style data-type="antd-cssinjs">([\S\s]+?)<\/style>/;
         const matchList = file.content.match(matchRegex) || [];
 
         let antdStyle = '';

diff --git a/README.md b/README.md
@@ -41,7 +41,6 @@ An enterprise-class UI design language and React UI library.
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 [dumi-url]: https://github.com/umijs/dumi
 
-
 <!-- Copy-paste in your Readme.md file -->
 
 <a href="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats?repo_id=34526884" target="_blank" style="display: block" align="center">

diff --git a/antd-image-snapshots-main/README.md b/antd-image-snapshots-main/README.md
@@ -0,0 +1 @@
+# antd-image-snapshots
diff --git a/components/_util/placements.ts b/components/_util/placements.ts
@@ -1,7 +1,7 @@
 /* eslint-disable default-case */
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger';
 
-import { getArrowOffset } from '../style/placementArrow';
+import { getArrowOffsetToken } from '../style/placementArrow';
 
 export interface AdjustOverflow {
   adjustX?: 0 | 1;
@@ -19,7 +19,7 @@ export interface PlacementsConfig {
 
 export function getOverflowOptions(
   placement: string,
-  arrowOffset: ReturnType<typeof getArrowOffset>,
+  arrowOffset: ReturnType<typeof getArrowOffsetToken>,
   arrowWidth: number,
   autoAdjustOverflow?: boolean | AdjustOverflow,
 ) {
@@ -38,14 +38,14 @@ export function getOverflowOptions(
   switch (placement) {
     case 'top':
     case 'bottom':
-      baseOverflow.shiftX = arrowOffset.dropdownArrowOffset * 2 + arrowWidth;
+      baseOverflow.shiftX = arrowOffset.arrowOffsetHorizontal * 2 + arrowWidth;
       baseOverflow.shiftY = true;
       baseOverflow.adjustY = true;
       break;
 
     case 'left':
     case 'right':
-      baseOverflow.shiftY = arrowOffset.dropdownArrowOffsetVertical * 2 + arrowWidth;
+      baseOverflow.shiftY = arrowOffset.arrowOffsetVertical * 2 + arrowWidth;
       baseOverflow.shiftX = true;
       baseOverflow.adjustX = true;
       break;
@@ -197,7 +197,7 @@ export default function getPlacements(config: PlacementsConfig) {
     }
 
     // Dynamic offset
-    const arrowOffset = getArrowOffset({
+    const arrowOffset = getArrowOffsetToken({
       contentRadius: borderRadius,
       limitVerticalRadius: true,
     });
@@ -206,22 +206,22 @@ export default function getPlacements(config: PlacementsConfig) {
       switch (key) {
         case 'topLeft':
         case 'bottomLeft':
-          placementInfo.offset[0] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          placementInfo.offset[0] = -arrowOffset.arrowOffsetHorizontal - halfArrowWidth;
           break;
 
         case 'topRight':
         case 'bottomRight':
-          placementInfo.offset[0] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          placementInfo.offset[0] = arrowOffset.arrowOffsetHorizontal + halfArrowWidth;
           break;
 
         case 'leftTop':
         case 'rightTop':
-          placementInfo.offset[1] = -arrowOffset.dropdownArrowOffset - halfArrowWidth;
+          placementInfo.offset[1] = -arrowOffset.arrowOffsetHorizontal - halfArrowWidth;
           break;
 
         case 'leftBottom':
         case 'rightBottom':
-          placementInfo.offset[1] = arrowOffset.dropdownArrowOffset + halfArrowWidth;
+          placementInfo.offset[1] = arrowOffset.arrowOffsetHorizontal + halfArrowWidth;
           break;
       }
     }

diff --git a/components/affix/index.tsx b/components/affix/index.tsx
@@ -243,7 +243,7 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
     updatePosition();
   }, [target, offsetTop, offsetBottom]);
 
-  const [wrapSSR, hashId] = useStyle(affixPrefixCls);
+  const [wrapCSSVar, hashId] = useStyle(affixPrefixCls);
 
   const rootCls = classNames(rootClassName, hashId, affixPrefixCls);
 
@@ -262,7 +262,7 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
     otherProps = omit(otherProps, ['onTestUpdatePosition' as any]);
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <ResizeObserver onResize={updatePosition}>
       <div style={style} className={className} ref={placeholderNodeRef} {...otherProps}>
         {affixStyle && <div style={placeholderStyle} aria-hidden="true" />}

diff --git a/components/affix/style/index.ts b/components/affix/style/index.ts
@@ -1,15 +1,19 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
-interface AffixToken extends FullToken<'Affix'> {
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks } from '../../theme/internal';
+
+export interface ComponentToken {
   zIndexPopup: number;
 }
 
+interface AffixToken extends FullToken<'Affix'> {
+  //
+}
+
 // ============================== Shared ==============================
 const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
   const { componentCls } = token;
-
   return {
     [componentCls]: {
       position: 'fixed',
@@ -18,10 +22,9 @@ const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
   };
 };
 
-// ============================== Export ==============================
-export default genComponentStyleHook('Affix', (token) => {
-  const affixToken = mergeToken<AffixToken>(token, {
-    zIndexPopup: token.zIndexBase + 10,
-  });
-  return [genSharedAffixStyle(affixToken)];
+export const prepareComponentToken: GetDefaultToken<'Affix'> = (token) => ({
+  zIndexPopup: token.zIndexBase + 10,
 });
+
+// ============================== Export ==============================
+export default genStyleHooks('Affix', genSharedAffixStyle, prepareComponentToken);
diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
@@ -12,7 +12,6 @@ import pickAttrs from 'rc-util/lib/pickAttrs';
 import { replaceElement } from '../_util/reactNode';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
-// CSSINJS
 import useStyle from './style';
 
 export interface AlertProps {
@@ -127,7 +126,8 @@ const Alert: React.FC<AlertProps> = (props) => {
   const ref = React.useRef<HTMLDivElement>(null);
   const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
 
   const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
     setClosed(true);
@@ -174,7 +174,7 @@ const Alert: React.FC<AlertProps> = (props) => {
 
   const restProps = pickAttrs(otherProps, { aria: true, data: true });
 
-  return wrapSSR(
+  return wrapCSSVar(
     <CSSMotion
       visible={!closed}
       motionName={`${prefixCls}-motion`}