refactor: use Container instead (#582)

zombieJ · web-flow · commit 250a7c6d2baa · 2025-09-26T17:15:22.000+08:00
diff --git a/assets/index.less b/assets/index.less
@@ -74,8 +74,8 @@
     }
   }
 
-  // =============== Unique Body ===============
-  &-unique-body {
+  // =============== Unique Container ===============
+  &-unique-container {
     position: absolute;
     z-index: 0;
     box-sizing: border-box;
diff --git a/src/UniqueProvider/UniqueContainer.tsx b/src/UniqueProvider/UniqueContainer.tsx
@@ -5,8 +5,8 @@ import CSSMotion from '@rc-component/motion';
 import type { CSSMotionProps } from '@rc-component/motion';
 import type { AlignType, ArrowPos } from '../interface';
 
-export interface UniqueBodyProps {
-  prefixCls: string; // ${prefixCls}-unique-body
+export interface UniqueContainerProps {
+  prefixCls: string; // ${prefixCls}-unique-container
   isMobile: boolean;
   ready: boolean;
   open: boolean;
@@ -18,11 +18,11 @@ export interface UniqueBodyProps {
   arrowPos?: ArrowPos;
   popupSize?: { width: number; height: number };
   motion?: CSSMotionProps;
-  uniqueBgClassName?: string;
-  uniqueBgStyle?: React.CSSProperties;
+  uniqueContainerClassName?: string;
+  uniqueContainerStyle?: React.CSSProperties;
 }
 
-const UniqueBody = (props: UniqueBodyProps) => {
+const UniqueContainer = (props: UniqueContainerProps) => {
   const {
     prefixCls,
     isMobile,
@@ -36,11 +36,11 @@ const UniqueBody = (props: UniqueBodyProps) => {
     arrowPos,
     popupSize,
     motion,
-    uniqueBgClassName,
-    uniqueBgStyle,
+    uniqueContainerClassName,
+    uniqueContainerStyle,
   } = props;
 
-  const bodyCls = `${prefixCls}-unique-body`;
+  const containerCls = `${prefixCls}-unique-container`;
 
   const [motionVisible, setMotionVisible] = React.useState(false);
 
@@ -78,16 +78,16 @@ const UniqueBody = (props: UniqueBodyProps) => {
       motionEnter
       motionLeave
       removeOnLeave={false}
-      leavedClassName={`${bodyCls}-hidden`}
+      leavedClassName={`${containerCls}-hidden`}
       {...motion}
       visible={open}
       onVisibleChanged={(nextVisible) => {
         setMotionVisible(nextVisible);
       }}
     >
       {({ className: motionClassName, style: motionStyle }) => {
-        const cls = classNames(bodyCls, motionClassName, uniqueBgClassName, {
-          [`${bodyCls}-visible`]: motionVisible,
+        const cls = classNames(containerCls, motionClassName, uniqueContainerClassName, {
+          [`${containerCls}-visible`]: motionVisible,
         });
 
         return (
@@ -100,7 +100,7 @@ const UniqueBody = (props: UniqueBodyProps) => {
                 ...cachedOffsetStyleRef.current,
                 ...sizeStyle,
                 ...motionStyle,
-                ...uniqueBgStyle,
+                ...uniqueContainerStyle,
               } as React.CSSProperties
             }
           />
@@ -110,4 +110,4 @@ const UniqueBody = (props: UniqueBodyProps) => {
   );
 };
 
-export default UniqueBody;
+export default UniqueContainer;
diff --git a/src/UniqueProvider/index.tsx b/src/UniqueProvider/index.tsx
@@ -12,7 +12,7 @@ import Popup from '../Popup';
 import { useEvent } from '@rc-component/util';
 import useTargetState from './useTargetState';
 import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
-import UniqueBody from './UniqueBody';
+import UniqueContainer from './UniqueContainer';
 import classNames from 'classnames';
 import { getAlignPopupClassName } from '../util';
 
@@ -223,7 +223,7 @@ const UniqueProvider = ({
             maskMotion={mergedOptions.maskMotion}
             getPopupContainer={mergedOptions.getPopupContainer}
           >
-            <UniqueBody
+            <UniqueContainer
               prefixCls={prefixCls}
               isMobile={false}
               ready={ready}
@@ -239,11 +239,11 @@ const UniqueProvider = ({
               }}
               popupSize={popupSize}
               motion={mergedOptions.popupMotion}
-              uniqueBgClassName={classNames(
-                mergedOptions.uniqueBgClassName,
+              uniqueContainerClassName={classNames(
+                mergedOptions.uniqueContainerClassName,
                 alignedClassName,
               )}
-              uniqueBgStyle={mergedOptions.uniqueBgStyle}
+              uniqueContainerStyle={mergedOptions.uniqueContainerStyle}
             />
           </Popup>
         </TriggerContext.Provider>
diff --git a/src/context.ts b/src/context.ts
@@ -20,8 +20,8 @@ export interface UniqueShowOptions {
   delay: number;
   prefixCls?: string;
   popupClassName?: string;
-  uniqueBgClassName?: string;
-  uniqueBgStyle?: React.CSSProperties;
+  uniqueContainerClassName?: string;
+  uniqueContainerStyle?: React.CSSProperties;
   popupStyle?: React.CSSProperties;
   popupPlacement?: string;
   builtinPlacements?: BuildInPlacements;
diff --git a/src/index.tsx b/src/index.tsx
@@ -101,10 +101,10 @@ export interface TriggerProps {
   builtinPlacements?: BuildInPlacements;
   popupAlign?: AlignType;
   popupClassName?: string;
-  /** Pass to `UniqueProvider` FloatBg */
-  uniqueBgClassName?: string;
-  /** Pass to `UniqueProvider` FloatBg */
-  uniqueBgStyle?: React.CSSProperties;
+  /** Pass to `UniqueProvider` UniqueContainer */
+  uniqueContainerClassName?: string;
+  /** Pass to `UniqueProvider` UniqueContainer */
+  uniqueContainerStyle?: React.CSSProperties;
   popupStyle?: React.CSSProperties;
   getPopupClassNameFromAlign?: (align: AlignType) => string;
   onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -176,8 +176,8 @@ export function generateTrigger(
       // Popup
       popup,
       popupClassName,
-      uniqueBgClassName,
-      uniqueBgStyle,
+      uniqueContainerClassName,
+      uniqueContainerStyle,
       popupStyle,
 
       popupPlacement,
@@ -332,8 +332,8 @@ export function generateTrigger(
       delay,
       prefixCls,
       popupClassName,
-      uniqueBgClassName,
-      uniqueBgStyle,
+      uniqueContainerClassName,
+      uniqueContainerStyle,
       popupStyle,
       popupPlacement,
       builtinPlacements,
diff --git a/tests/unique.test.tsx b/tests/unique.test.tsx
@@ -5,12 +5,12 @@ import { awaitFakeTimer } from './util';
 import type { TriggerProps } from '../src';
 import classNames from 'classnames';
 
-// Mock UniqueBody to check if open props changed
+// Mock UniqueContainer to check if open props changed
 global.openChangeLog = [];
 
-jest.mock('../src/UniqueProvider/UniqueBody', () => {
-  const OriginalUniqueBody = jest.requireActual(
-    '../src/UniqueProvider/UniqueBody',
+jest.mock('../src/UniqueProvider/UniqueContainer', () => {
+  const OriginalUniqueContainer = jest.requireActual(
+    '../src/UniqueProvider/UniqueContainer',
   ).default;
   const OriginReact = jest.requireActual('react');
 
@@ -25,7 +25,7 @@ jest.mock('../src/UniqueProvider/UniqueBody', () => {
       }
     }, [open]);
 
-    return OriginReact.createElement(OriginalUniqueBody, props);
+    return OriginReact.createElement(OriginalUniqueContainer, props);
   };
 });
 
@@ -105,7 +105,7 @@ describe('Trigger.Unique', () => {
       '-hidden',
     );
     expect(
-      document.querySelector('.rc-trigger-popup-unique-body').className,
+      document.querySelector('.rc-trigger-popup-unique-container').className,
     ).not.toContain('-hidden');
 
     // Move from first to second trigger - popup should not hide, but content should change
@@ -122,13 +122,13 @@ describe('Trigger.Unique', () => {
       '-hidden',
     );
     expect(
-      document.querySelector('.rc-trigger-popup-unique-body').className,
+      document.querySelector('.rc-trigger-popup-unique-container').className,
     ).not.toContain('-hidden');
 
     // There should only be one popup element
     expect(document.querySelectorAll('.rc-trigger-popup').length).toBe(1);
     expect(
-      document.querySelectorAll('.rc-trigger-popup-unique-body').length,
+      document.querySelectorAll('.rc-trigger-popup-unique-container').length,
     ).toBe(1);
 
     // FloatBg open prop should not have changed during transition (no close animation)
@@ -184,36 +184,36 @@ describe('Trigger.Unique', () => {
     expect(popup.className).toContain('rc-trigger-popup-unique-controlled');
   });
 
-  it('should apply uniqueBgClassName to UniqueBody component', async () => {
-    await setupAndOpenPopup({ uniqueBgClassName: 'custom-bg-class' });
+  it('should apply uniqueContainerClassName to UniqueContainer component', async () => {
+    await setupAndOpenPopup({ uniqueContainerClassName: 'custom-container-class' });
 
-    // Check that UniqueBody has the custom background className
-    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
-    expect(uniqueBody).toBeTruthy();
-    expect(uniqueBody.className).toContain('custom-bg-class');
+    // Check that UniqueContainer has the custom container className
+    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    expect(uniqueContainer).toBeTruthy();
+    expect(uniqueContainer.className).toContain('custom-container-class');
   });
 
-  it('should apply uniqueBgStyle to UniqueBody component', async () => {
+  it('should apply uniqueContainerStyle to UniqueContainer component', async () => {
     await setupAndOpenPopup({
-      uniqueBgStyle: { backgroundColor: 'red', border: '1px solid blue' },
+      uniqueContainerStyle: { backgroundColor: 'red', border: '1px solid blue' },
     });
 
-    // Check that UniqueBody has the custom background style
-    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
-    expect(uniqueBody).toBeTruthy();
-    expect(uniqueBody).toHaveStyle({
+    // Check that UniqueContainer has the custom container style
+    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    expect(uniqueContainer).toBeTruthy();
+    expect(uniqueContainer).toHaveStyle({
       backgroundColor: 'red',
       border: '1px solid blue',
     });
   });
 
-  it('should not apply any additional className to UniqueBody when uniqueBgClassName is not provided', async () => {
+  it('should not apply any additional className to UniqueContainer when uniqueContainerClassName is not provided', async () => {
     await setupAndOpenPopup();
 
-    // Check that UniqueBody exists but does not have custom background className
-    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
-    expect(uniqueBody).toBeTruthy();
-    expect(uniqueBody.className).not.toContain('undefined');
+    // Check that UniqueContainer exists but does not have custom container className
+    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    expect(uniqueContainer).toBeTruthy();
+    expect(uniqueContainer.className).not.toContain('undefined');
   });
 
   it('should pass alignedClassName on unique body', async () => {
@@ -246,13 +246,13 @@ describe('Trigger.Unique', () => {
     );
 
     expect(document.querySelector('.rc-trigger-popup')).toHaveClass('bamboo');
-    expect(document.querySelector('.rc-trigger-popup-unique-body')).toHaveClass(
+    expect(document.querySelector('.rc-trigger-popup-unique-container')).toHaveClass(
       'bamboo',
     );
 
     // Check that arrow position CSS variables are set
-    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
-    const computedStyle = getComputedStyle(uniqueBody);
+    const uniqueContainer = document.querySelector('.rc-trigger-popup-unique-container');
+    const computedStyle = getComputedStyle(uniqueContainer);
     expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe('');
     expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe('');
   });

Original file line number	Diff line number	Diff line change
`@@ -74,8 +74,8 @@`
`74`	`74`	`}`
`75`	`75`	`}`
`76`	`76`
`77`		`- // =============== Unique Body ===============`
`78`		`- &-unique-body {`
	`77`	`+ // =============== Unique Container ===============`
	`78`	`+ &-unique-container {`
`79`	`79`	`position: absolute;`
`80`	`80`	`z-index: 0;`
`81`	`81`	`box-sizing: border-box;`