chore: auto merge branches (#44502)

chore: Feature merge master

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   CheckOutlined,
@@ -542,7 +541,12 @@ createRoot(document.getElementById('container')).render(<Demo />);
             styleCode={style}
             onCodeTypeChange={setCodeType}
           />
-          <div tabIndex={0} className={styles.codeHideBtn} onClick={() => setCodeExpand(false)}>
+          <div
+            tabIndex={0}
+            role="button"
+            className={styles.codeHideBtn}
+            onClick={() => setCodeExpand(false)}
+          >
             <UpOutlined />
             <FormattedMessage id="app.demo.code.hide.simplify" />
           </div>

.eslintrc.js

@@ -126,6 +126,12 @@ module.exports = {
         'comma-dangle': 0,
       },
     },
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+      rules: {
+        'compat/compat': 0,
+      },
+    },
   ],
   rules: {
     'react/jsx-one-expression-per-line': 0,

components/button/index.en-US.md

@@ -20,7 +20,7 @@ In Ant Design we provide 5 types of button.
 
 - Primary button: indicate the main action, one primary button at most in one section.
 - Default button: indicate a series of actions without priority.
-- Dashed button: used for adding action commonly.
+- Dashed button: commonly used for adding more actions.
 - Text button: used for the most secondary action.
 - Link button: used for external links.
 

components/form/FormItemInput.tsx

@@ -1,10 +1,12 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { ColProps } from '../grid/col';
 import Col from '../grid/col';
 import { FormContext, FormItemPrefixContext } from './context';
 import ErrorList from './ErrorList';
 import type { ValidateStatus } from './FormItem';
+import FallbackCmp from './style/fallbackCmp';
 
 interface FormItemInputMiscProps {
   prefixCls: string;
@@ -116,6 +118,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
       <Col {...mergedWrapperCol} className={className}>
         {dom}
       </Col>
+      <FallbackCmp prefixCls={prefixCls} />
     </FormContext.Provider>
   );
 };

components/form/style/fallbackCmp.ts

@@ -0,0 +1,29 @@
+/**
+ * Fallback of IE.
+ * Safe to remove.
+ */
+
+// Style as inline component
+import { prepareToken, type FormToken } from '.';
+import { genSubStyleComponent, type GenerateStyle } from '../../theme/internal';
+
+// ============================= Fallback =============================
+const genFallbackStyle: GenerateStyle<FormToken> = (token) => {
+  const { formItemCls } = token;
+
+  return {
+    '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)': {
+      // Fallback for IE, safe to remove we not support it anymore
+      [`${formItemCls}-control`]: {
+        display: 'flex',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(['Form', 'item-item'], (token, { rootPrefixCls }) => {
+  const formToken = prepareToken(token, rootPrefixCls);
+
+  return [genFallbackStyle(formToken)];
+});

components/form/style/index.ts

@@ -1,11 +1,12 @@
+import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genFormValidateMotionStyle from './explain';
-import type { CSSProperties } from 'react';
 
 export interface ComponentToken {
   /**
@@ -210,7 +211,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Label                           =
       // ==============================================================
       [`${formItemCls}-label`]: {
-        display: 'inline-block',
         flexGrow: 0,
         overflow: 'hidden',
         whiteSpace: 'nowrap',
@@ -293,7 +293,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Input                           =
       // ==============================================================
       [`${formItemCls}-control`]: {
-        display: 'flex',
+        ['--ant-display' as any]: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
 
@@ -539,13 +539,22 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {
 };
 
 // ============================== Export ==============================
+export const prepareToken: (
+  token: Parameters<GenStyleFn<'Form'>>[0],
+  rootPrefixCls: string,
+) => FormToken = (token, rootPrefixCls) => {
+  const formToken = mergeToken<FormToken>(token, {
+    formItemCls: `${token.componentCls}-item`,
+    rootPrefixCls,
+  });
+
+  return formToken;
+};
+
 export default genComponentStyleHook(
   'Form',
   (token, { rootPrefixCls }) => {
-    const formToken = mergeToken<FormToken>(token, {
-      formItemCls: `${token.componentCls}-item`,
-      rootPrefixCls,
-    });
+    const formToken = prepareToken(token, rootPrefixCls);
 
     return [
       genFormStyle(formToken),
@@ -569,4 +578,9 @@ export default genComponentStyleHook(
     verticalLabelPadding: `0 0 ${token.paddingXS}px`,
     verticalLabelMargin: 0,
   }),
+  {
+    // Let From style before the Grid
+    // ref https://github.com/ant-design/ant-design/issues/44386
+    order: -1000,
+  },
 );

components/grid/style/index.ts

@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
@@ -114,11 +115,21 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
         order: 0,
       };
     } else {
-      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
-        display: 'block',
-        flex: `0 0 ${(i / gridColumns) * 100}%`,
-        maxWidth: `${(i / gridColumns) * 100}%`,
-      };
+      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [
+        // https://github.com/ant-design/ant-design/issues/44456
+        // Form set `display: flex` on Col which will override `display: block`.
+        // Let's get it from css variable to support override.
+        {
+          ['--ant-display' as any]: 'block',
+          // Fallback to display if variable not support
+          display: 'block',
+        },
+        {
+          display: 'var(--ant-display)',
+          flex: `0 0 ${(i / gridColumns) * 100}%`,
+          maxWidth: `${(i / gridColumns) * 100}%`,
+        },
+      ];
       gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = {
         insetInlineStart: `${(i / gridColumns) * 100}%`,
       };

components/select/index.en-US.md

@@ -14,6 +14,7 @@ Select component to select value from options.
 
 - A dropdown menu for displaying choices - an elegant alternative to the native `<select>` element.
 - Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).
+- You probably need [AutoComplete](/components/auto-complete/) if you're looking for an input box that can be typed or selected.
 
 ## Examples
 

components/select/index.zh-CN.md

@@ -15,7 +15,7 @@ demo:
 
 - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
 - 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
-- 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/autocomplete-cn/)。
+- 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/auto-complete-cn/)。
 
 ## 代码演示
 

components/theme/util/genComponentStyleHook.ts

@@ -59,9 +59,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
   componentName: ComponentName | [ComponentName, string],
   styleFn: GenStyleFn<ComponentName>,
   getDefaultToken?:
+    | null
     | OverrideTokenWithoutDerivative[ComponentName]
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
-  options?: {
+  options: {
     resetStyle?: boolean;
     // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
     deprecatedTokens?: [ComponentTokenKey<ComponentName>, ComponentTokenKey<ComponentName>][];
@@ -69,7 +70,11 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
      * Only use component style in client side. Ignore in SSR.
      */
     clientOnly?: boolean;
-  },
+    /**
+     * Set order of component style. Default is -999.
+     */
+    order?: number;
+  } = {},
 ) {
   const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
     ComponentName,
@@ -90,10 +95,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       token,
       hashId,
       nonce: () => csp?.nonce!,
-      clientOnly: options?.clientOnly,
+      clientOnly: options.clientOnly,
 
       // antd is always at top of styles
-      order: -999,
+      order: options.order || -999,
     };
 
     // Generate style for all a tags in antd component.
@@ -117,7 +122,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           const { token: proxyToken, flush } = statisticToken(token);
 
           const customComponentToken = { ...(token[component] as ComponentToken<ComponentName>) };
-          if (options?.deprecatedTokens) {
+          if (options.deprecatedTokens) {
             const { deprecatedTokens } = options;
             deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
               if (process.env.NODE_ENV !== 'production') {
@@ -165,7 +170,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           });
           flush(component, mergedComponentToken);
           return [
-            options?.resetStyle === false ? null : genCommonStyle(token, prefixCls),
+            options.resetStyle === false ? null : genCommonStyle(token, prefixCls),
             styleInterpolation,
           ];
         },