feat: uniqueBgStyle

Author: zombieJ

src/UniqueProvider/FloatBg.tsx

@@ -18,6 +18,7 @@ export interface FloatBgProps {
   popupSize?: { width: number; height: number };
   motion?: CSSMotionProps;
   uniqueBgClassName?: string;
+  uniqueBgStyle?: React.CSSProperties;
 }
 
 const FloatBg = (props: FloatBgProps) => {
@@ -34,6 +35,7 @@ const FloatBg = (props: FloatBgProps) => {
     popupSize,
     motion,
     uniqueBgClassName,
+    uniqueBgStyle,
   } = props;
 
   const floatBgCls = `${prefixCls}-float-bg`;
@@ -85,6 +87,7 @@ const FloatBg = (props: FloatBgProps) => {
               ...offsetStyle,
               ...sizeStyle,
               ...motionStyle,
+              ...uniqueBgStyle,
             }}
           />
         );

src/UniqueProvider/index.tsx

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

src/context.ts

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

src/index.tsx

@@ -100,6 +100,8 @@ export interface TriggerProps {
   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>;
@@ -172,6 +174,7 @@ export function generateTrigger(
       popup,
       popupClassName,
       uniqueBgClassName,
+      uniqueBgStyle,
       popupStyle,
 
       popupPlacement,
@@ -327,6 +330,7 @@ export function generateTrigger(
       prefixCls,
       popupClassName,
       uniqueBgClassName,
+      uniqueBgStyle,
       popupStyle,
       popupPlacement,
       builtinPlacements,

tests/unique.test.tsx

@@ -161,18 +161,89 @@ describe('Trigger.Unique', () => {
           popup={<strong className="x-content">tooltip</strong>}
           unique
           uniqueBgClassName="custom-bg-class"
-          popupVisible
         >
           <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).toHaveClass('custom-bg-class');
+    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');
   });
 });