feat: Support uniqueBgXXX for additional passing

.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

@@ -152,4 +152,98 @@ 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 () => {
+    const { container } = render(
+      <UniqueProvider>
+        <Trigger
+          action={['click']}
+          popup={<strong className="x-content">tooltip</strong>}
+          unique
+          uniqueBgClassName="custom-bg-class"
+        >
+          <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();
+
+    // 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 () => {
+    const { container } = render(
+      <UniqueProvider>
+        <Trigger
+          action={['click']}
+          popup={<strong className="x-content">tooltip</strong>}
+          unique
+          uniqueBgStyle={{ backgroundColor: 'red', border: '1px solid blue' }}
+        >
+          <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();
+
+    // Check that FloatBg has the custom background style
+    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
+    expect(floatBg).toBeTruthy();
+    const computedStyle = window.getComputedStyle(floatBg);
+    expect(computedStyle.backgroundColor).toBe('red');
+    expect(computedStyle.border).toContain('1px solid blue');
+  });
+
+  it('should not apply any additional className to FloatBg when uniqueBgClassName is not provided', async () => {
+    const { container } = render(
+      <UniqueProvider>
+        <Trigger
+          action={['click']}
+          popup={<strong className="x-content">tooltip</strong>}
+          unique
+        >
+          <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();
+
+    // 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');
+  });
 });