feat: semantic add uniqueBody (#503)

* feat: semantic add uniqueBody

* chore: clean up

Author: zombieJ

package.json

@@ -41,7 +41,7 @@
     "test": "rc-test"
   },
   "dependencies": {
-    "@rc-component/trigger": "^3.6.4",
+    "@rc-component/trigger": "^3.6.7",
     "@rc-component/util": "^1.3.0",
     "classnames": "^2.3.1"
   },

src/Tooltip.tsx

@@ -8,7 +8,7 @@ import { useImperativeHandle, useRef } from 'react';
 import { placements } from './placements';
 import Popup from './Popup';
 
-export type SemanticName = 'root' | 'arrow' | 'body';
+export type SemanticName = 'root' | 'arrow' | 'body' | 'uniqueBody';
 
 export interface TooltipProps
   extends Pick<
@@ -154,6 +154,8 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       popupStyle={styles?.root}
       mouseEnterDelay={mouseEnterDelay}
       arrow={mergedArrow}
+      uniqueBgClassName={classNames?.uniqueBody}
+      uniqueBgStyle={styles?.uniqueBody}
       {...extraProps}
     >
       {getChildren()}

tests/__mocks__/@rc-component/trigger.js

@@ -1,3 +1,4 @@
-import Trigger from '@rc-component/trigger/lib/mock';
+import Trigger, { UniqueProvider } from '@rc-component/trigger/lib/mock';
 
 export default Trigger;
+export { UniqueProvider };

tests/index.test.tsx

@@ -1,3 +1,4 @@
+import { UniqueProvider } from '@rc-component/trigger';
 import { act, fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import Tooltip, { type TooltipRef } from '../src';
@@ -59,8 +60,6 @@ describe('rc-tooltip', () => {
       verifyContent(container, 'Tooltip content');
     });
 
-
-
     it('access of ref', () => {
       const domRef = React.createRef<TooltipRef>();
       render(
@@ -353,12 +352,7 @@ describe('rc-tooltip', () => {
       };
 
       const { container } = render(
-        <Tooltip
-          styles={customStyles}
-          overlay={<div>Tooltip content</div>}
-          visible
-          showArrow
-        >
+        <Tooltip styles={customStyles} overlay={<div>Tooltip content</div>} visible showArrow>
           <button>Trigger</button>
         </Tooltip>,
       );
@@ -439,12 +433,34 @@ describe('rc-tooltip', () => {
       // Verify partial configuration takes effect
       expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });
       expect(tooltipBodyElement).toHaveClass('custom-body');
-      
+
       // Verify that unconfigured elements don't have custom class names or styles
       expect(tooltipElement).not.toHaveClass('custom-root');
       expect(tooltipArrowElement).not.toHaveClass('custom-arrow');
     });
 
+    it('should pass uniqueBody to Trigger as uniqueBgClassName and uniqueBgStyle', () => {
+      // Test that the component renders without errors when uniqueBody is provided
+      render(
+        <UniqueProvider>
+          <Tooltip
+            classNames={{ uniqueBody: 'unique-body-class' }}
+            styles={{ uniqueBody: { color: 'red' } }}
+            overlay={<div>Tooltip content</div>}
+            visible
+            unique
+          >
+            <button>Trigger</button>
+          </Tooltip>
+        </UniqueProvider>,
+      );
+
+      // Test that uniqueBody doesn't break the normal tooltip functionality
+      expect(document.querySelector('.unique-body-class')).toHaveStyle({
+        color: 'red',
+      });
+    });
+
     it('should not break when showArrow is false', () => {
       const customClassNames = {
         root: 'custom-root',
@@ -476,7 +492,7 @@ describe('rc-tooltip', () => {
 
       // Verify when arrow is not shown
       expect(tooltipArrowElement).toBeFalsy();
-      
+
       // Other styles still take effect
       expect(tooltipElement).toHaveClass('custom-root');
       expect(tooltipElement).toHaveStyle({ backgroundColor: 'blue' });