feat: Support uniqueBgXXX for additional passing (#574)

* feat: uniqueBgClassName

* feat: uniqueBgStyle

* test: update

* test: update

Author: zombieJ

.gitignore

@@ -39,4 +39,5 @@ bun.lockb
 
 # dumi
 .dumi/tmp
-.dumi/tmp-production
+.dumi/tmp-production
+dist/

src/UniqueProvider/FloatBg.tsx

@@ -17,6 +17,8 @@ export interface FloatBgProps {
   offsetY: number;
   popupSize?: { width: number; height: number };
   motion?: CSSMotionProps;
+  uniqueBgClassName?: string;
+  uniqueBgStyle?: React.CSSProperties;
 }
 
 const FloatBg = (props: FloatBgProps) => {
@@ -32,6 +34,8 @@ const FloatBg = (props: FloatBgProps) => {
     offsetY,
     popupSize,
     motion,
+    uniqueBgClassName,
+    uniqueBgStyle,
   } = props;
 
   const floatBgCls = `${prefixCls}-float-bg`;
@@ -72,7 +76,7 @@ const FloatBg = (props: FloatBgProps) => {
       }}
     >
       {({ className: motionClassName, style: motionStyle }) => {
-        const cls = classNames(floatBgCls, motionClassName, {
+        const cls = classNames(floatBgCls, motionClassName, uniqueBgClassName, {
           [`${floatBgCls}-visible`]: motionVisible,
         });
 
@@ -83,6 +87,7 @@ const FloatBg = (props: FloatBgProps) => {
               ...offsetStyle,
               ...sizeStyle,
               ...motionStyle,
+              ...uniqueBgStyle,
             }}
           />
         );

src/UniqueProvider/index.tsx

@@ -216,6 +216,8 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
               offsetY={offsetY}
               popupSize={popupSize}
               motion={options.popupMotion}
+              uniqueBgClassName={options.uniqueBgClassName}
+              uniqueBgStyle={options.uniqueBgStyle}
             />
           </Popup>
         </TriggerContext.Provider>

src/context.ts

@@ -20,6 +20,8 @@ export interface UniqueShowOptions {
   delay: number;
   prefixCls?: string;
   popupClassName?: string;
+  uniqueBgClassName?: string;
+  uniqueBgStyle?: React.CSSProperties;
   popupStyle?: React.CSSProperties;
   popupPlacement?: string;
   builtinPlacements?: BuildInPlacements;

src/index.tsx

@@ -98,6 +98,10 @@ export interface TriggerProps {
   builtinPlacements?: BuildInPlacements;
   popupAlign?: AlignType;
   popupClassName?: string;
+  /** Pass to `UniqueProvider` FloatBg */
+  uniqueBgClassName?: string;
+  /** Pass to `UniqueProvider` FloatBg */
+  uniqueBgStyle?: React.CSSProperties;
   popupStyle?: React.CSSProperties;
   getPopupClassNameFromAlign?: (align: AlignType) => string;
   onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -169,6 +173,8 @@ export function generateTrigger(
       // Popup
       popup,
       popupClassName,
+      uniqueBgClassName,
+      uniqueBgStyle,
       popupStyle,
 
       popupPlacement,
@@ -323,6 +329,8 @@ export function generateTrigger(
       delay,
       prefixCls,
       popupClassName,
+      uniqueBgClassName,
+      uniqueBgStyle,
       popupStyle,
       popupPlacement,
       builtinPlacements,

tests/unique.test.tsx

@@ -2,6 +2,7 @@ import { cleanup, fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import Trigger, { UniqueProvider } from '../src';
 import { awaitFakeTimer } from './util';
+import type { TriggerProps } from '../src';
 
 // Mock FloatBg to check if open props changed
 global.openChangeLog = [];
@@ -27,6 +28,34 @@ jest.mock('../src/UniqueProvider/FloatBg', () => {
   };
 });
 
+async function setupAndOpenPopup(triggerProps: Partial<TriggerProps> = {}) {
+  const { container } = render(
+    <UniqueProvider>
+      <Trigger
+        action={['click']}
+        popup={<strong className="x-content">tooltip</strong>}
+        unique
+        {...triggerProps}
+      >
+        <div className="target">click me</div>
+      </Trigger>
+    </UniqueProvider>,
+  );
+
+  // Initially no popup should be visible
+  expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
+
+  // Click trigger to show popup
+  fireEvent.click(container.querySelector('.target'));
+  await awaitFakeTimer();
+
+  // Check that popup exists
+  const popup = document.querySelector('.rc-trigger-popup');
+  expect(popup).toBeTruthy();
+
+  return { container, popup };
+}
+
 describe('Trigger.Unique', () => {
   beforeEach(() => {
     jest.useFakeTimers();
@@ -152,4 +181,34 @@ describe('Trigger.Unique', () => {
     expect(popup.className).toContain('custom-align');
     expect(popup.className).toContain('rc-trigger-popup-unique-controlled');
   });
+
+  it('should apply uniqueBgClassName to FloatBg component', async () => {
+    await setupAndOpenPopup({ uniqueBgClassName: 'custom-bg-class' });
+
+    // Check that FloatBg has the custom background className
+    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
+    expect(floatBg).toBeTruthy();
+    expect(floatBg.className).toContain('custom-bg-class');
+  });
+
+  it('should apply uniqueBgStyle to FloatBg component', async () => {
+    await setupAndOpenPopup({ uniqueBgStyle: { backgroundColor: 'red', border: '1px solid blue' } });
+
+    // Check that FloatBg has the custom background style
+    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
+    expect(floatBg).toBeTruthy();
+    expect(floatBg).toHaveStyle({
+      backgroundColor: 'red',
+      border: '1px solid blue',
+    });
+  });
+
+  it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => {
+    await setupAndOpenPopup();
+
+    // Check that FloatBg exists but does not have custom background className
+    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
+    expect(floatBg).toBeTruthy();
+    expect(floatBg.className).not.toContain('undefined');
+  });
 });