chore: floating

Author: zombieJ

assets/index.less

@@ -73,6 +73,23 @@
       opacity: 0;
     }
   }
+
+  // =============== Float BG ===============
+  &-float-bg {
+    position: absolute;
+    z-index: 0;
+    box-sizing: border-box;
+    border: 1px solid red;
+    background: green;
+    transition: all 0.3s;
+  }
+
+  // Debug
+  &-unique-controlled {
+    border-color: rgba(0, 0, 0, 0.01) !important;
+    background: transparent !important;
+    z-index: 1;
+  }
 }
 
 @import './index/Mask';

src/Popup/index.tsx

@@ -1,7 +1,9 @@
 import classNames from 'classnames';
 import type { CSSMotionProps } from '@rc-component/motion';
 import CSSMotion from '@rc-component/motion';
-import ResizeObserver from '@rc-component/resize-observer';
+import ResizeObserver, {
+  type ResizeObserverProps,
+} from '@rc-component/resize-observer';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import { composeRef } from '@rc-component/util/lib/ref';
 import * as React from 'react';
@@ -11,6 +13,7 @@ import Arrow from './Arrow';
 import Mask from './Mask';
 import PopupContent from './PopupContent';
 import useOffsetStyle from '../hooks/useOffsetStyle';
+import { useEvent } from '@rc-component/util';
 
 export interface MobileConfig {
   mask?: boolean;
@@ -75,6 +78,9 @@ export interface PopupProps {
   targetWidth?: number;
   targetHeight?: number;
 
+  // Resize
+  onResize?: ResizeObserverProps['onResize'];
+
   // Mobile
   mobile?: MobileConfig;
 }
@@ -134,6 +140,9 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     onAlign,
     onPrepare,
 
+    // Resize
+    onResize,
+
     stretch,
     targetWidth,
     targetHeight,
@@ -176,6 +185,12 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     }
   }, [show, getPopupContainerNeedParams, target]);
 
+  // ========================= Resize =========================
+  const onInternalResize: ResizeObserverProps['onResize'] = useEvent((size) => {
+    onResize?.(size);
+    onAlign();
+  });
+
   // ========================= Styles =========================
   const offsetStyle = useOffsetStyle(
     isMobile,
@@ -226,7 +241,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
         motion={mergedMaskMotion}
         mobile={isMobile}
       />
-      <ResizeObserver onResize={onAlign} disabled={!open}>
+      <ResizeObserver onResize={onInternalResize} disabled={!open}>
         {(resizeObserverRef) => {
           return (
             <CSSMotion

src/UniqueProvider/FloatBg.tsx

@@ -1,20 +1,60 @@
 import React from 'react';
+import useOffsetStyle from '../hooks/useOffsetStyle';
 
 export interface FloatBgProps {
   prefixCls: string; // ${prefixCls}-float-bg
   popupEle: HTMLElement;
+  isMobile: boolean;
+  ready: boolean;
+  open: boolean;
+  align: any;
+  offsetR: number;
+  offsetB: number;
+  offsetX: number;
+  offsetY: number;
+  popupSize?: { width: number; height: number };
 }
 
 const FloatBg = (props: FloatBgProps) => {
-  const { prefixCls, popupEle } = props;
+  const {
+    prefixCls,
+    popupEle,
+    isMobile,
+    ready,
+    open,
+    align,
+    offsetR,
+    offsetB,
+    offsetX,
+    offsetY,
+    popupSize,
+  } = props;
 
   // Apply className as requested in TODO
   const className = `${prefixCls}-float-bg`;
 
+  const offsetStyle = useOffsetStyle(
+    isMobile,
+    ready,
+    open,
+    align,
+    offsetR,
+    offsetB,
+    offsetX,
+    offsetY,
+  );
+
+  // Apply popup size if available
+  const sizeStyle: React.CSSProperties = {};
+  if (popupSize) {
+    sizeStyle.width = popupSize.width;
+    sizeStyle.height = popupSize.height;
+  }
+
   // Remove console.log as it's for debugging only
   // console.log('>>>', popupEle);
 
-  return <div className={className} />;
+  return <div className={className} style={{ ...offsetStyle, ...sizeStyle }} />;
 };
 
 export default FloatBg;

src/UniqueProvider/index.tsx

@@ -13,6 +13,7 @@ import { useEvent } from '@rc-component/util';
 import useTargetState from './useTargetState';
 import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import FloatBg from './FloatBg';
+import classNames from 'classnames';
 
 export interface UniqueProviderProps {
   children: React.ReactNode;
@@ -23,6 +24,10 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
 
   // =========================== Popup ============================
   const [popupEle, setPopupEle] = React.useState<HTMLDivElement>(null);
+  const [popupSize, setPopupSize] = React.useState<{
+    width: number;
+    height: number;
+  }>(null);
 
   // Used for forwardRef popup. Not use internal
   const externalPopupRef = React.useRef<HTMLDivElement>(null);
@@ -117,6 +122,8 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
   );
 
   // =========================== Render ===========================
+  const prefixCls = options?.prefixCls;
+
   return (
     <UniqueContext.Provider value={contextValue}>
       {children}
@@ -125,9 +132,12 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
           <Popup
             ref={setPopupRef}
             portal={Portal}
-            prefixCls={options.prefixCls}
+            prefixCls={prefixCls}
             popup={options.popup}
-            className={options.popupClassName}
+            className={classNames(
+              options.popupClassName,
+              `${prefixCls}-unique-controlled`,
+            )}
             style={options.popupStyle}
             target={options.target}
             open={open}
@@ -142,6 +152,12 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
             offsetB={offsetB}
             onAlign={onAlign}
             onPrepare={onPrepare}
+            onResize={(size) =>
+              setPopupSize({
+                width: size.offsetWidth,
+                height: size.offsetHeight,
+              })
+            }
             arrowPos={{
               x: arrowX,
               y: arrowY,
@@ -154,7 +170,19 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
             maskMotion={options.maskMotion}
             getPopupContainer={options.getPopupContainer}
           >
-            <FloatBg prefixCls={options.prefixCls} popupEle={popupEle} />
+            <FloatBg
+              prefixCls={prefixCls}
+              popupEle={popupEle}
+              isMobile={false}
+              ready={ready}
+              open={open}
+              align={alignInfo}
+              offsetR={offsetR}
+              offsetB={offsetB}
+              offsetX={offsetX}
+              offsetY={offsetY}
+              popupSize={popupSize}
+            />
           </Popup>
         </TriggerContext.Provider>
       )}