feat: uniqueBgClassName

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,7 @@ export interface FloatBgProps {
   offsetY: number;
   popupSize?: { width: number; height: number };
   motion?: CSSMotionProps;
+  uniqueBgClassName?: string;
 }
 
 const FloatBg = (props: FloatBgProps) => {
@@ -32,6 +33,7 @@ const FloatBg = (props: FloatBgProps) => {
     offsetY,
     popupSize,
     motion,
+    uniqueBgClassName,
   } = props;
 
   const floatBgCls = `${prefixCls}-float-bg`;
@@ -72,7 +74,7 @@ const FloatBg = (props: FloatBgProps) => {
       }}
     >
       {({ className: motionClassName, style: motionStyle }) => {
-        const cls = classNames(floatBgCls, motionClassName, {
+        const cls = classNames(floatBgCls, motionClassName, uniqueBgClassName, {
           [`${floatBgCls}-visible`]: motionVisible,
         });
 

src/UniqueProvider/index.tsx

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

src/context.ts

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

src/index.tsx

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

tests/unique.test.tsx

@@ -152,4 +152,27 @@ 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"
+          popupVisible
+        >
+          <div className="target">click me</div>
+        </Trigger>
+      </UniqueProvider>,
+    );
+
+    await awaitFakeTimer();
+
+    // Check that FloatBg has the custom background className
+    const floatBg = document.querySelector('.rc-trigger-popup-float-bg');
+    expect(floatBg).toBeTruthy();
+    expect(floatBg).toHaveClass('custom-bg-class');
+  });
 });