chore: rename variables merge => merged (ant-design#48048)

Author: li-jia-nan

components/alert/Alert.tsx

@@ -202,7 +202,7 @@ const Alert: React.FC<AlertProps> = (props) => {
     return alert?.closeIcon;
   }, [closeIcon, closable, closeText, alert?.closeIcon]);
 
-  const mergeAriaProps = React.useMemo(() => {
+  const mergedAriaProps = React.useMemo<React.AriaAttributes>(() => {
     const merged = closable ?? alert?.closable;
     if (typeof merged === 'object') {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -251,7 +251,7 @@ const Alert: React.FC<AlertProps> = (props) => {
             prefixCls={prefixCls}
             closeIcon={mergedCloseIcon}
             handleClose={handleClose}
-            ariaProps={mergeAriaProps}
+            ariaProps={mergedAriaProps}
           />
         </div>
       )}

components/avatar/avatar.tsx

@@ -7,12 +7,12 @@ import type { Breakpoint } from '../_util/responsiveObserver';
 import { responsiveArray } from '../_util/responsiveObserver';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { AvatarContextType, AvatarSize } from './AvatarContext';
 import AvatarContext from './AvatarContext';
 import useStyle from './style';
-import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface AvatarProps {
   /** Shape of avatar, options: `circle`, `square` */
@@ -53,7 +53,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
 
   const avatarNodeRef = React.useRef<HTMLSpanElement>(null);
   const avatarChildrenRef = React.useRef<HTMLSpanElement>(null);
-  const avatarNodeMergeRef = composeRef<HTMLSpanElement>(ref, avatarNodeRef);
+  const avatarNodeMergedRef = composeRef<HTMLSpanElement>(ref, avatarNodeRef);
 
   const { getPrefixCls, avatar } = React.useContext(ConfigContext);
 
@@ -234,7 +234,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
       {...others}
       style={{ ...sizeStyle, ...responsiveSizeStyle, ...avatar?.style, ...others.style }}
       className={classString}
-      ref={avatarNodeMergeRef}
+      ref={avatarNodeMergedRef}
     >
       {childrenToRender}
     </span>,

components/color-picker/ColorPicker.tsx

@@ -138,19 +138,19 @@ const ColorPicker: CompoundedComponent = (props) => {
   const rootCls = useCSSVarCls(prefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
   const rtlCls = { [`${prefixCls}-rtl`]: direction };
-  const mergeRootCls = classNames(rootClassName, cssVarCls, rootCls, rtlCls);
-  const mergeCls = classNames(
+  const mergedRootCls = classNames(rootClassName, cssVarCls, rootCls, rtlCls);
+  const mergedCls = classNames(
     getStatusClassNames(prefixCls, contextStatus),
     {
       [`${prefixCls}-sm`]: mergedSize === 'small',
       [`${prefixCls}-lg`]: mergedSize === 'large',
     },
     colorPicker?.className,
-    mergeRootCls,
+    mergedRootCls,
     className,
     hashId,
   );
-  const mergePopupCls = classNames(prefixCls, mergeRootCls);
+  const mergedPopupCls = classNames(prefixCls, mergedRootCls);
 
   const popupAllowCloseRef = useRef(true);
 
@@ -254,13 +254,13 @@ const ColorPicker: CompoundedComponent = (props) => {
           />
         </NoFormStyle>
       }
-      overlayClassName={mergePopupCls}
+      overlayClassName={mergedPopupCls}
       {...popoverProps}
     >
       {children || (
         <ColorTrigger
           open={popupOpen}
-          className={mergeCls}
+          className={mergedCls}
           style={mergedStyle}
           color={value ? generateColor(value) : colorValue}
           prefixCls={prefixCls}

components/color-picker/hooks/useColorState.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import type { Color } from '../color';
 import type { ColorValueType } from '../interface';
 import { generateColor } from '../util';
@@ -13,15 +14,15 @@ const useColorState = (
 ): readonly [Color, React.Dispatch<React.SetStateAction<Color>>] => {
   const { defaultValue, value } = option;
   const [colorValue, setColorValue] = useState<Color>(() => {
-    let mergeState: ColorValueType | undefined;
+    let mergedState: ColorValueType | undefined;
     if (hasValue(value)) {
-      mergeState = value;
+      mergedState = value;
     } else if (hasValue(defaultValue)) {
-      mergeState = defaultValue;
+      mergedState = defaultValue;
     } else {
-      mergeState = defaultStateValue;
+      mergedState = defaultStateValue;
     }
-    return generateColor(mergeState || '');
+    return generateColor(mergedState || '');
   });
 
   useEffect(() => {

components/float-button/BackTop.tsx

@@ -75,9 +75,15 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
 
   const groupShape = useContext<FloatButtonShape | undefined>(FloatButtonGroupContext);
 
-  const mergeShape = groupShape || shape;
-
-  const contentProps: FloatButtonProps = { prefixCls, icon, type, shape: mergeShape, ...restProps };
+  const mergedShape = groupShape || shape;
+
+  const contentProps: FloatButtonProps = {
+    prefixCls,
+    icon,
+    type,
+    shape: mergedShape,
+    ...restProps,
+  };
 
   return (
     <CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>

components/float-button/FloatButton.tsx

@@ -6,6 +6,7 @@ import { devUseWarning } from '../_util/warning';
 import Badge from '../badge';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import Tooltip from '../tooltip';
 import FloatButtonGroupContext from './context';
 import Content from './FloatButtonContent';
@@ -18,7 +19,6 @@ import type {
   FloatButtonShape,
 } from './interface';
 import useStyle from './style';
-import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export const floatButtonPrefixCls = 'float-btn';
 
@@ -41,7 +41,7 @@ const FloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((prop
   const rootCls = useCSSVarCls(prefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
-  const mergeShape = groupShape || shape;
+  const mergedShape = groupShape || shape;
 
   const classString = classNames(
     hashId,
@@ -51,7 +51,7 @@ const FloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((prop
     className,
     rootClassName,
     `${prefixCls}-${type}`,
-    `${prefixCls}-${mergeShape}`,
+    `${prefixCls}-${mergedShape}`,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },

components/grid/row.tsx

@@ -36,10 +36,13 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   wrap?: boolean;
 }
 
-function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'], screen: ScreenMap) {
+function useMergedPropByScreen(
+  oriProp: RowProps['align'] | RowProps['justify'],
+  screen: ScreenMap,
+) {
   const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');
 
-  const calcMergeAlignOrJustify = () => {
+  const calcMergedAlignOrJustify = () => {
     if (typeof oriProp === 'string') {
       setProp(oriProp);
     }
@@ -61,7 +64,7 @@ function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'],
   };
 
   React.useEffect(() => {
-    calcMergeAlignOrJustify();
+    calcMergedAlignOrJustify();
   }, [JSON.stringify(oriProp), screen]);
 
   return prop;
@@ -101,9 +104,9 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   });
 
   // ================================== calc responsive data ==================================
-  const mergeAlign = useMergePropByScreen(align, curScreens);
+  const mergedAlign = useMergedPropByScreen(align, curScreens);
 
-  const mergeJustify = useMergePropByScreen(justify, curScreens);
+  const mergedJustify = useMergedPropByScreen(justify, curScreens);
 
   const gutterRef = React.useRef<Gutter | [Gutter, Gutter]>(gutter);
 
@@ -154,8 +157,8 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     prefixCls,
     {
       [`${prefixCls}-no-wrap`]: wrap === false,
-      [`${prefixCls}-${mergeJustify}`]: mergeJustify,
-      [`${prefixCls}-${mergeAlign}`]: mergeAlign,
+      [`${prefixCls}-${mergedJustify}`]: mergedJustify,
+      [`${prefixCls}-${mergedAlign}`]: mergedAlign,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,

components/table/demo/resizable-column.tsx

@@ -108,7 +108,7 @@ const App: React.FC = () => {
       setColumns(newColumns);
     };
 
-  const mergeColumns: TableColumnsType<DataType> = columns.map((col, index) => ({
+  const mergedColumns = columns.map<TableColumnsType<DataType>[number]>((col, index) => ({
     ...col,
     onHeaderCell: (column: TableColumnsType<DataType>[number]) => ({
       width: column.width,
@@ -124,7 +124,7 @@ const App: React.FC = () => {
           cell: ResizableTitle,
         },
       }}
-      columns={mergeColumns}
+      columns={mergedColumns}
       dataSource={data}
     />
   );

components/tour/panelRender.tsx

@@ -86,12 +86,12 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
 
   const coverNode = isValidNode(cover) ? <div className={`${prefixCls}-cover`}>{cover}</div> : null;
 
-  let mergeIndicatorNode: ReactNode;
+  let mergedIndicatorNode: ReactNode;
 
   if (indicatorsRender) {
-    mergeIndicatorNode = indicatorsRender(current, total);
+    mergedIndicatorNode = indicatorsRender(current, total);
   } else {
-    mergeIndicatorNode = [...Array.from({ length: total }).keys()].map<ReactNode>(
+    mergedIndicatorNode = [...Array.from({ length: total }).keys()].map<ReactNode>(
       (stepItem, index) => (
         <span
           key={stepItem}
@@ -121,7 +121,7 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
         {headerNode}
         {descriptionNode}
         <div className={`${prefixCls}-footer`}>
-          {total > 1 && <div className={`${prefixCls}-indicators`}>{mergeIndicatorNode}</div>}
+          {total > 1 && <div className={`${prefixCls}-indicators`}>{mergedIndicatorNode}</div>}
           <div className={`${prefixCls}-buttons`}>
             {current !== 0 ? (
               <Button