diff --git a/package.json b/package.json index ce9a345..35ae2c7 100644 --- a/package.json +++ b/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" }, diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 319915c..6c9bca8 100644 --- a/src/Tooltip.tsx +++ b/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((props, ref) => { popupStyle={styles?.root} mouseEnterDelay={mouseEnterDelay} arrow={mergedArrow} + uniqueBgClassName={classNames?.uniqueBody} + uniqueBgStyle={styles?.uniqueBody} {...extraProps} > {getChildren()} diff --git a/tests/__mocks__/@rc-component/trigger.js b/tests/__mocks__/@rc-component/trigger.js index 887c966..84994d5 100644 --- a/tests/__mocks__/@rc-component/trigger.js +++ b/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 }; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index fd6511a..b189d2d 100644 --- a/tests/index.test.tsx +++ b/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(); render( @@ -353,12 +352,7 @@ describe('rc-tooltip', () => { }; const { container } = render( - Tooltip content} - visible - showArrow - > + Tooltip content} visible showArrow> , ); @@ -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( + + Tooltip content} + visible + unique + > + + + , + ); + + // 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' });