GOOD-94: migrate popperjs to floating-ui

package.json

@@ -40,10 +40,10 @@
   },
   "homepage": "https://github.com/reaviz/rdk#readme",
   "dependencies": {
+    "@floating-ui/dom": "^1.5.4",
     "body-scroll-lock": "^4.0.0-beta.0",
     "classnames": "^2.3.2",
-    "framer-motion": "^10.16.16",
-    "popper.js": "^1.16.1"
+    "framer-motion": "^10.16.16"
   },
   "peerDependencies": {
     "react": ">=16",

src/Overlay/ConnectedOverlay/ConnectedOverlay.tsx

@@ -4,18 +4,13 @@ import React, {
   useEffect,
   Fragment,
   forwardRef,
-  Ref,
-  useImperativeHandle,
   useMemo
 } from 'react';
 import { TriggerTypes, OverlayTrigger } from '../OverlayTrigger';
 import { Placement, ReferenceProp } from '../../Position';
 import { AnimatePresence } from 'framer-motion';
 import { OverlayContext } from '../../Overlay/OverlayContext';
-import {
-  ConnectedOverlayContent,
-  ConnectedOverlayContentRef
-} from './ConnectedOverlayContent';
+import { ConnectedOverlayContent } from './ConnectedOverlayContent';
 
 export interface OverlayEvent {
   /**
@@ -116,11 +111,7 @@ export interface ConnectedOverlayProps {
   onClose?: (event?: any) => void;
 }
 
-export const ConnectedOverlay: FC<
-  ConnectedOverlayProps & {
-    ref?: Ref<ConnectedOverlayContentRef>;
-  }
-> = forwardRef(
+export const ConnectedOverlay: FC<ConnectedOverlayProps> = forwardRef(
   (
     {
       reference,
@@ -134,19 +125,12 @@ export const ConnectedOverlay: FC<
       onClose,
       ...rest
     },
-    ref
+    _ref
   ) => {
     const mounted = useRef<boolean>(false);
     const overlayTriggerRef = useRef<any | null>(null);
-    const contentRef = useRef<any | null>(null);
     const triggerRef = reference || overlayTriggerRef;
 
-    useImperativeHandle(ref, () => ({
-      updatePosition: () => {
-        contentRef.current?.updatePosition();
-      }
-    }));
-
     useEffect(() => {
       if (mounted.current) {
         if (!open) {
@@ -194,7 +178,6 @@ export const ConnectedOverlay: FC<
           {open && (
             <ConnectedOverlayContent
               {...rest}
-              ref={contentRef}
               triggerRef={triggerRef}
               onClose={onClose}
             >

src/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx

@@ -1,8 +1,6 @@
 import React, {
   FC,
   forwardRef,
-  Ref,
-  useImperativeHandle,
   RefObject,
   useEffect,
   useState,
@@ -31,100 +29,92 @@ export interface ConnectedOverlayContentProps {
   onClose?: (event?: any) => void;
 }
 
-export const ConnectedOverlayContent: FC<
-  ConnectedOverlayContentProps & {
-    ref?: Ref<ConnectedOverlayContentRef>;
-  }
-> = forwardRef(
-  (
-    {
-      triggerRef,
-      children,
-      portalClassName,
-      closeOnBodyClick,
-      closeOnEscape,
-      elementType,
-      appendToBody,
-      followCursor,
-      modifiers,
-      placement,
-      onClose
-    },
-    ref
-  ) => {
-    const id = useId();
-    const [overlayIndex, setOverlayIndex] = useState<number | null>(null);
-    const [positionRef, popperRef] = usePosition(triggerRef, {
-      followCursor,
-      modifiers,
-      placement
-    });
-
-    useImperativeHandle(ref, () => ({
-      updatePosition: () => {
-        popperRef?.current?.scheduleUpdate();
-      }
-    }));
+export const ConnectedOverlayContent: FC<ConnectedOverlayContentProps> =
+  forwardRef(
+    (
+      {
+        triggerRef,
+        children,
+        portalClassName,
+        closeOnBodyClick,
+        closeOnEscape,
+        elementType,
+        appendToBody,
+        followCursor,
+        modifiers,
+        placement,
+        onClose
+      },
+      _ref
+    ) => {
+      const id = useId();
+      const [overlayIndex, setOverlayIndex] = useState<number | null>(null);
+      const positionRef = usePosition(triggerRef, {
+        followCursor,
+        modifiers,
+        placement
+      });
 
-    const onClickOutside = useCallback(
-      (event: any) => {
-        if (closeOnBodyClick) {
-          // don't fire if i click the clicker
-          let ref: HTMLElement | null = null;
-          if ((triggerRef as RefObject<HTMLElement>).current) {
-            ref = (triggerRef as RefObject<HTMLElement>).current as HTMLElement;
-          } else if ((triggerRef as HTMLElement).contains !== undefined) {
-            ref = triggerRef as HTMLElement;
-          }
+      const onClickOutside = useCallback(
+        (event: any) => {
+          if (closeOnBodyClick) {
+            // don't fire if i click the clicker
+            let ref: HTMLElement | null = null;
+            if ((triggerRef as RefObject<HTMLElement>).current) {
+              ref = (triggerRef as RefObject<HTMLElement>)
+                .current as HTMLElement;
+            } else if ((triggerRef as HTMLElement).contains !== undefined) {
+              ref = triggerRef as HTMLElement;
+            }
 
-          // Handle parent click containers
-          const container = event.target.closest('.rdk-portal');
+            // Handle parent click containers
+            const container = event.target.closest('.rdk-portal');
 
-          // Only close the last one
-          const isLast = portals.indexOf(id) === portals.length - 1;
+            // Only close the last one
+            const isLast = portals.indexOf(id) === portals.length - 1;
 
-          if (!ref?.contains(event.target) && (isLast || !container)) {
-            onClose?.(event);
+            if (!ref?.contains(event.target) && (isLast || !container)) {
+              onClose?.(event);
+            }
           }
-        }
-      },
-      [closeOnBodyClick, onClose]
-    );
+        },
+        [closeOnBodyClick, onClose]
+      );
 
-    const onEscape = useCallback(() => {
-      if (closeOnEscape) {
-        onClose?.();
-      }
-    }, [closeOnEscape, onClose]);
+      const onEscape = useCallback(() => {
+        if (closeOnEscape) {
+          onClose?.();
+        }
+      }, [closeOnEscape, onClose]);
 
-    useExitListener({
-      open: true,
-      ref: positionRef,
-      onClickOutside,
-      onEscape
-    });
+      useExitListener({
+        open: true,
+        ref: positionRef,
+        onClickOutside,
+        onEscape
+      });
 
-    useEffect(() => {
-      if (positionRef && overlayIndex) {
-        positionRef.current.style.zIndex = overlayIndex;
-      }
-    }, [positionRef.current, overlayIndex]);
+      useEffect(() => {
+        if (positionRef && overlayIndex) {
+          positionRef.current.style.zIndex = overlayIndex;
+        }
+      }, [positionRef.current, overlayIndex]);
 
-    return (
-      <OverlayPortal
-        id={id}
-        ref={positionRef}
-        className={portalClassName}
-        elementType={elementType}
-        appendToBody={appendToBody}
-        onMount={event => setOverlayIndex(event.overlayIndex)}
-        onUnmount={() => setOverlayIndex(null)}
-      >
-        {children}
-      </OverlayPortal>
-    );
-  }
-);
+      return (
+        <OverlayPortal
+          id={id}
+          ref={positionRef}
+          className={portalClassName}
+          elementType={elementType}
+          appendToBody={appendToBody}
+          onMount={event => setOverlayIndex(event.overlayIndex)}
+          onUnmount={() => setOverlayIndex(null)}
+        >
+          {children}
+        </OverlayPortal>
+      );
+    }
+  );
 
 ConnectedOverlayContent.defaultProps = {
   closeOnBodyClick: true,

src/Position/Position.story.tsx

@@ -9,7 +9,7 @@ const meta: Meta = {
 export const Simple = {
   render: () => {
     const anchorRef = useRef<HTMLDivElement | null>(null);
-    const [positionRef] = usePosition(anchorRef, { placement: 'bottom' });
+    const positionRef = usePosition(anchorRef, { placement: 'bottom' });
 
     return (
       <div