chore: align the case

Author: zombieJ

src/Popup.tsx

@@ -1,24 +1,23 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
+import type { TooltipProps } from './Tooltip';
 
 export interface ContentProps {
   prefixCls?: string;
   children: (() => React.ReactNode) | React.ReactNode;
   id?: string;
-  overlayInnerStyle?: React.CSSProperties;
-  className?: string;
-  style?: React.CSSProperties;
-  bodyClassName?: string;
+  classNames?: TooltipProps['classNames'];
+  styles?: TooltipProps['styles'];
 }
 
 const Popup: React.FC<ContentProps> = (props) => {
-  const { children, prefixCls, id, className, style, bodyClassName, overlayInnerStyle } = props;
+  const { children, prefixCls, id, classNames, styles } = props;
 
   return (
     <div
       id={id}
-      className={classNames(`${prefixCls}-body`, className, bodyClassName)}
-      style={{ ...overlayInnerStyle, ...style }}
+      className={cls(`${prefixCls}-body`, classNames?.body)}
+      style={styles.body}
       role="tooltip"
     >
       {typeof children === 'function' ? children() : children}

src/Tooltip.tsx

@@ -2,7 +2,7 @@ import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger'
 import Trigger from '@rc-component/trigger';
 import type { ActionType, AlignType } from '@rc-component/trigger/lib/interface';
 import useId from '@rc-component/util/lib/hooks/useId';
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import { useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
@@ -30,13 +30,6 @@ export interface TooltipProps
   /** Config popup motion */
   motion?: TriggerProps['popupMotion'];
 
-  /** @deprecated Please use `styles={{ root: {} }}` */
-  overlayStyle?: React.CSSProperties;
-  /** @deprecated Please use `classNames={{ root: '' }}` */
-  overlayClassName?: string;
-  /** @deprecated Please use `styles={{ body: {} }}` */
-  overlayInnerStyle?: React.CSSProperties;
-
   // Rest
   trigger?: ActionType | ActionType[];
   defaultVisible?: boolean;
@@ -67,11 +60,9 @@ export interface TooltipRef extends TriggerRef {}
 
 const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
   const {
-    overlayClassName,
     trigger = ['hover'],
     mouseEnterDelay = 0,
     mouseLeaveDelay = 0.1,
-    overlayStyle,
     prefixCls = 'rc-tooltip',
     children,
     onVisibleChange,
@@ -82,13 +73,12 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     destroyOnHidden = false,
     defaultVisible,
     getTooltipContainer,
-    overlayInnerStyle,
     arrowContent,
     overlay,
     id,
     showArrow = true,
-    classNames: tooltipClassNames,
-    styles: tooltipStyles,
+    classNames,
+    styles,
     ...restProps
   } = props;
 
@@ -103,31 +93,9 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     extraProps.popupVisible = props.visible;
   }
 
-  const getPopupElement = () => (
-    <Popup
-      key="content"
-      prefixCls={prefixCls}
-      id={mergedId}
-      bodyClassName={tooltipClassNames?.body}
-      overlayInnerStyle={overlayInnerStyle}
-      style={tooltipStyles?.body}
-    >
-      {overlay}
-    </Popup>
-  );
-
-  const getChildren = () => {
-    const child = React.Children.only(children);
-    const originalProps = child?.props || {};
-    const childProps = {
-      ...originalProps,
-      'aria-describedby': overlay ? mergedId : null,
-    };
-    return React.cloneElement<any>(children, childProps) as any;
-  };
-
+  // ========================= Arrow ==========================
   // Process arrow configuration
-  const getArrowConfig = () => {
+  const mergedArrow = React.useMemo(() => {
     if (!showArrow) {
       return false;
     }
@@ -138,16 +106,38 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     // Apply semantic styles with unified logic
     return {
       ...arrowConfig,
-      className: classNames(arrowConfig.className, tooltipClassNames?.arrow),
+      className: cls(arrowConfig.className, classNames?.arrow),
       content: arrowConfig.content || arrowContent,
     };
+  }, [showArrow, classNames?.arrow, arrowContent]);
+
+  // ======================== Children ========================
+  const getChildren = () => {
+    const child = React.Children.only(children);
+    const originalProps = child?.props || {};
+    const childProps = {
+      ...originalProps,
+      'aria-describedby': overlay ? mergedId : null,
+    };
+    return React.cloneElement<any>(children, childProps) as any;
   };
 
+  // ========================= Render =========================
   return (
     <Trigger
-      popupClassName={classNames(overlayClassName, tooltipClassNames?.root)}
+      popupClassName={classNames?.root}
       prefixCls={prefixCls}
-      popup={getPopupElement}
+      popup={
+        <Popup
+          key="content"
+          prefixCls={prefixCls}
+          id={mergedId}
+          classNames={classNames}
+          styles={styles}
+        >
+          {overlay}
+        </Popup>
+      }
       action={trigger}
       builtinPlacements={placements}
       popupPlacement={placement}
@@ -160,9 +150,9 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       defaultPopupVisible={defaultVisible}
       autoDestroy={destroyOnHidden}
       mouseLeaveDelay={mouseLeaveDelay}
-      popupStyle={{ ...overlayStyle, ...tooltipStyles?.root }}
+      popupStyle={styles?.root}
       mouseEnterDelay={mouseEnterDelay}
-      arrow={getArrowConfig()}
+      arrow={mergedArrow}
       {...extraProps}
     >
       {getChildren()}