chore: tmp of it

Author: zombieJ

src/Popup/index.tsx

@@ -58,6 +58,8 @@ export interface PopupProps {
   autoDestroy?: boolean;
   portal: React.ComponentType<any>;
 
+  children?: React.ReactElement;
+
   // Align
   ready: boolean;
   offsetX: number;
@@ -114,6 +116,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     getPopupContainer,
     autoDestroy,
     portal: Portal,
+    children,
 
     zIndex,
 
@@ -135,7 +138,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     targetHeight,
   } = props;
 
-  const childNode = typeof popup === 'function' ? popup() : popup;
+  const popupContent = typeof popup === 'function' ? popup() : popup;
 
   // We can not remove holder only when motion finished.
   const isNodeVisible = open || keepDom;
@@ -177,6 +180,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     return null;
   }
 
+  // TODO: Move offsetStyle logic to useOffsetStyle.ts hooks
   // >>>>> Offset
   const AUTO = 'auto' as const;
 
@@ -305,7 +309,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                       />
                     )}
                     <PopupContent cache={!open && !fresh}>
-                      {childNode}
+                      {popupContent}
                     </PopupContent>
                   </div>
                 );
@@ -314,6 +318,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
           );
         }}
       </ResizeObserver>
+      {children}
     </Portal>
   );
 });

src/UniqueProvider/FloatBg.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export interface FloatBgProps {
+  prefixCls: string; // ${prefixCls}-float-bg
+  popupEle: HTMLElement;
+}
+
+const FloatBg = (props: FloatBgProps) => {
+  const { prefixCls, popupEle } = props;
+
+  // Apply className as requested in TODO
+  const className = `${prefixCls}-float-bg`;
+
+  // Remove console.log as it's for debugging only
+  // console.log('>>>', popupEle);
+
+  return <div className={className} />;
+};
+
+export default FloatBg;

src/UniqueProvider/index.tsx

@@ -12,6 +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 FloatBg from './FloatBg';
 
 export interface UniqueProviderProps {
   children: React.ReactNode;
@@ -32,7 +33,6 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
     if (isDOM(node) && popupEle !== node) {
       setPopupEle(node);
     }
-
   });
 
   // ========================== Register ==========================
@@ -153,7 +153,9 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
             motion={options.popupMotion}
             maskMotion={options.maskMotion}
             getPopupContainer={options.getPopupContainer}
-          />
+          >
+            <FloatBg prefixCls={options.prefixCls} popupEle={popupEle} />
+          </Popup>
         </TriggerContext.Provider>
       )}
     </UniqueContext.Provider>

src/hooks/useOffsetStyle.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+
+export default function useAlignStyle() {}