chore: auto merge branches (#55454)

chore: sync master into feature

.dumi/hooks/useLocalStorage.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useEffectEvent } from 'react';
+import React, { useCallback, useEffect } from 'react';
 
 const ANT_SYNC_STORAGE_EVENT_KEY = 'ANT_SYNC_STORAGE_EVENT_KEY';
 
@@ -95,7 +95,7 @@ const useLocalStorage = <T>(key: string, options: Options<T> = {}) => {
     };
   }, [key, onNativeStorage, onCustomStorage]);
 
-  return [state, useEffectEvent(updateState)] as const;
+  return [state, updateState] as const;
 };
 
 export default useLocalStorage;

components/color-picker/components/ColorTrigger.tsx

@@ -79,7 +79,7 @@ const ColorTrigger = forwardRef<HTMLDivElement, ColorTriggerProps>((props, ref)
       default:
         return alpha < 100 ? `${hexString.slice(0, 7)},${alpha}%` : hexString;
     }
-  }, [color, format, showText, activeIndex]);
+  }, [color, format, showText, activeIndex, locale.transparent, colorTextCellPrefixCls]);
 
   // ============================= Render =============================
   const containerNode = useMemo<React.ReactNode>(

components/color-picker/hooks/useModeColor.ts

@@ -57,7 +57,7 @@ export default function useModeColor(
     pushOption('gradient', locale.gradientColor);
 
     return [optionList, modes];
-  }, [mode]);
+  }, [mode, locale.singleColor, locale.gradientColor]);
 
   // ======================== Post ========================
   // We need align `mode` with `color` state

components/date-picker/__tests__/utils.ts

@@ -2,14 +2,14 @@ import type { render } from '../../../tests/utils';
 import { fireEvent } from '../../../tests/utils';
 
 export function openPicker(wrapper: ReturnType<typeof render>, index = 0) {
-  const inputEle = wrapper.container?.querySelectorAll<HTMLInputElement>('input')?.[index]!;
+  const inputEle = wrapper.container?.querySelectorAll<HTMLInputElement>('input')?.[index];
   fireEvent.mouseDown(inputEle);
   fireEvent.focus(inputEle);
   fireEvent.click(inputEle);
 }
 
 export function closePicker(wrapper: ReturnType<typeof render>, index = 0) {
-  fireEvent.blur(wrapper.container?.querySelectorAll('input')[index]!);
+  fireEvent.blur(wrapper.container?.querySelectorAll('input')[index]);
 }
 
 export function selectCell(wrapper: ReturnType<typeof render>, text: string | number, index = 0) {

components/space/index.tsx

@@ -94,29 +94,34 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
     customClassNames?.item ?? contextClassNames.item,
   );
 
+  const memoizedLatestIndex = React.useMemo(() => {
+    return childNodes.reduce<number>((latest, child, i) => {
+      if (child !== null && child !== undefined) {
+        return i;
+      }
+      return latest;
+    }, 0);
+  }, [childNodes]);
+
+  const mergedItemStyle: React.CSSProperties = {
+    ...contextStyles.item,
+    ...styles?.item,
+  };
+
   // Calculate latest one
-  let latestIndex = 0;
   const nodes = childNodes.map<React.ReactNode>((child, i) => {
-    if (child !== null && child !== undefined) {
-      latestIndex = i;
-    }
-
     const key = child?.key || `${itemClassName}-${i}`;
-
     return (
-      <Item
-        className={itemClassName}
-        key={key}
-        index={i}
-        split={split}
-        style={styles?.item ?? contextStyles.item}
-      >
+      <Item className={itemClassName} key={key} index={i} split={split} style={mergedItemStyle}>
         {child}
       </Item>
     );
   });
 
-  const spaceContext = React.useMemo<SpaceContextType>(() => ({ latestIndex }), [latestIndex]);
+  const spaceContext = React.useMemo<SpaceContextType>(
+    () => ({ latestIndex: memoizedLatestIndex }),
+    [memoizedLatestIndex],
+  );
 
   // =========================== Render ===========================
   if (childNodes.length === 0) {

components/typography/Link.tsx

@@ -10,22 +10,31 @@ export interface LinkProps
   ellipsis?: boolean;
 }
 
-const Link = React.forwardRef<HTMLElement, LinkProps>(({ ellipsis, rel, ...restProps }, ref) => {
+const Link = React.forwardRef<HTMLElement, LinkProps>((props, ref) => {
+  const {
+    ellipsis,
+    rel,
+    children,
+    // @ts-expect-error: https://github.com/ant-design/ant-design/issues/26622
+    navigate: _navigate,
+    ...restProps
+  } = props;
+
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Typography.Link');
-
     warning(typeof ellipsis !== 'object', 'usage', '`ellipsis` only supports boolean value.');
   }
 
-  const mergedProps = {
+  const mergedProps: LinkProps = {
     ...restProps,
     rel: rel === undefined && restProps.target === '_blank' ? 'noopener noreferrer' : rel,
   };
 
-  // @ts-expect-error: https://github.com/ant-design/ant-design/issues/26622
-  delete mergedProps.navigate;
-
-  return <Base {...mergedProps} ref={ref} ellipsis={!!ellipsis} component="a" />;
+  return (
+    <Base {...mergedProps} ref={ref} ellipsis={!!ellipsis} component="a">
+      {children}
+    </Base>
+  );
 });
 
 export default Link;

components/typography/Paragraph.tsx

@@ -7,8 +7,13 @@ export interface ParagraphProps
   extends BlockProps<'div'>,
     Omit<React.HTMLAttributes<HTMLDivElement>, 'type' | keyof BlockProps<'div'>> {}
 
-const Paragraph = React.forwardRef<HTMLElement, ParagraphProps>((props, ref) => (
-  <Base ref={ref} {...props} component="div" />
-));
+const Paragraph = React.forwardRef<HTMLElement, ParagraphProps>((props, ref) => {
+  const { children, ...restProps } = props;
+  return (
+    <Base ref={ref} {...restProps} component="div">
+      {children}
+    </Base>
+  );
+});
 
 export default Paragraph;

components/typography/Text.tsx

@@ -11,10 +11,8 @@ export interface TextProps
   ellipsis?: boolean | Omit<EllipsisConfig, 'expandable' | 'rows' | 'onExpand'>;
 }
 
-const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
-  { ellipsis, ...restProps },
-  ref,
-) => {
+const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (props, ref) => {
+  const { ellipsis, children, ...restProps } = props;
   const mergedEllipsis = React.useMemo(() => {
     if (ellipsis && typeof ellipsis === 'object') {
       return omit(ellipsis as EllipsisConfig, ['expandable', 'rows']);
@@ -34,7 +32,11 @@ const Text: React.ForwardRefRenderFunction<HTMLSpanElement, TextProps> = (
     );
   }
 
-  return <Base ref={ref} {...restProps} ellipsis={mergedEllipsis} component="span" />;
+  return (
+    <Base ref={ref} {...restProps} ellipsis={mergedEllipsis} component="span">
+      {children}
+    </Base>
+  );
 };
 
 export default React.forwardRef(Text);

components/typography/Title.tsx

@@ -17,7 +17,7 @@ export interface TitleProps
 }
 
 const Title = React.forwardRef<HTMLElement, TitleProps>((props, ref) => {
-  const { level = 1, ...restProps } = props;
+  const { level = 1, children, ...restProps } = props;
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Typography.Title');
 
@@ -30,7 +30,11 @@ const Title = React.forwardRef<HTMLElement, TitleProps>((props, ref) => {
   const component: keyof JSX.IntrinsicElements = TITLE_ELE_LIST.includes(level)
     ? `h${level}`
     : `h1`;
-  return <Base ref={ref} {...restProps} component={component} />;
+  return (
+    <Base ref={ref} {...restProps} component={component}>
+      {children}
+    </Base>
+  );
 });
 
 export default Title;

components/upload/Dragger.tsx

@@ -6,17 +6,21 @@ import Upload from './Upload';
 
 export type DraggerProps<T = any> = UploadProps<T> & { height?: number };
 
-const Dragger = React.forwardRef<UploadRef, DraggerProps>(
-  ({ style, height, hasControlInside = false, ...restProps }, ref) => (
+const Dragger = React.forwardRef<UploadRef, DraggerProps<any>>((props, ref) => {
+  const { style, height, hasControlInside = false, children, ...restProps } = props;
+  const mergedStyle: React.CSSProperties = { ...style, height };
+  return (
     <Upload
       ref={ref}
       hasControlInside={hasControlInside}
       {...restProps}
+      style={mergedStyle}
       type="drag"
-      style={{ ...style, height }}
-    />
-  ),
-);
+    >
+      {children}
+    </Upload>
+  );
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Dragger.displayName = 'Dragger';

components/upload/Upload.tsx

@@ -104,8 +104,8 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
 
   // Control mode will auto fill file uid if not provided
   React.useMemo(() => {
+    // eslint-disable-next-line react-hooks/purity
     const timestamp = Date.now();
-
     (fileList || []).forEach((file, index) => {
       if (!file.uid && !Object.isFrozen(file)) {
         file.uid = `__AUTO__${timestamp}_${index}__`;