Update popper.js to floating ui

package.json

@@ -61,6 +61,7 @@
   },
   "homepage": "https://github.com/reaviz/reablocks#readme",
   "dependencies": {
+    "@floating-ui/react": "^0.26.16",
     "@marko19907/string-to-color": "^1.0.0",
     "@reaviz/react-use-fuzzy": "^1.0.3",
     "body-scroll-lock-upgrade": "^1.1.0",
@@ -77,7 +78,6 @@
     "human-format": "^1.2.0",
     "name-initials": "^0.1.3",
     "pluralize": "^8.0.0",
-    "popper.js": "^1.16.1",
     "react-fast-compare": "^3.2.2",
     "react-highlight-words": "^0.20.0",
     "react-textarea-autosize": "^8.5.3",

src/form/Select/SelectInput/SelectInput.tsx

@@ -538,7 +538,6 @@ export const SelectInput: FC<SelectInputProps> = ({
             onFocus={onInputFocus}
             onBlur={onBlur}
             onPaste={onPaste}
-            placeholderIsMinWidth={false}
           />
         </div>
         <div className={theme.suffix?.container}>

src/form/Select/utils/useWidth.ts

@@ -1,4 +1,10 @@
-import { RefObject, useCallback, useEffect, useState } from 'react';
+import {
+  RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState
+} from 'react';
 import { ConnectedOverlayContentRef } from '@/utils/Overlay';
 
 export const useWidth = (
@@ -21,12 +27,18 @@ export const useWidth = (
     updateWidthInternal();
   }, [updateWidthInternal]);
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', updateWidthInternal);
-      return () => window.removeEventListener('resize', updateWidthInternal);
+  useLayoutEffect(() => {
+    if (!ref?.current) {
+      return;
     }
-  }, [updateWidthInternal]);
+    const resizeObserver = new ResizeObserver(() => {
+      const { width } = ref.current.getBoundingClientRect();
+      setMenuWidth(width);
+    });
+    resizeObserver.observe(ref.current);
+
+    return () => resizeObserver.disconnect();
+  }, [ref]);
 
   const updateWidth = useCallback(() => {
     if (updateWidthInternal()) {

src/layers/Menu/Menu.story.tsx

@@ -149,7 +149,17 @@ export const AutoWidthModifiers = () => {
       <MenuComponent
         style={{ background: 'var(--slate-500)' }}
         autoWidth
-        modifiers={{ offset: { offset: '-100, 25' } }}
+        modifiers={[
+          {
+            name: 'offset',
+            fn({ x, y }) {
+              return {
+                x: x - 100,
+                y: y + 25
+              };
+            }
+          }
+        ]}
       >
         <Card disablePadding>
           <List>

src/layers/Menu/Menu.tsx

@@ -1,9 +1,9 @@
 import React, { FC, forwardRef, LegacyRef, useMemo } from 'react';
 import FocusTrap from 'focus-trap-react';
+import { MiddlewareState, size } from '@floating-ui/react';
 import { ConnectedOverlay, OverlayEvent } from '@/utils/Overlay';
-import { Placement } from '@/utils/Position';
+import { Modifiers, Placement } from '@/utils/Position';
 import { useId } from '@/utils';
-import { Modifiers } from 'popper.js';
 import { motion } from 'framer-motion';
 import { twMerge } from 'tailwind-merge';
 import { MenuTheme } from './MenuTheme';
@@ -41,7 +41,7 @@ export interface MenuProps {
   closeOnEscape?: boolean;
 
   /**
-   * Popper placement type.
+   * floating-ui placement type.
    */
   placement?: Placement;
 
@@ -66,7 +66,7 @@ export interface MenuProps {
   maxHeight?: string;
 
   /**
-   * Popper.js Position modifiers.
+   * floating-ui Position modifiers.
    */
   modifiers?: Modifiers;
 
@@ -146,12 +146,9 @@ export const Menu: FC<MenuProps & MenuRef> = forwardRef<
     const internalModifiers = useMemo(() => {
       if (autoWidth) {
         const sameWidth = {
-          enabled: true,
-          order: 840,
-          fn: data => {
-            const { width, left, right } = data.offsets.reference;
-            const passedOffset = modifiers?.offset?.offset;
-            let passedXOffset = 0;
+          name: 'sameWidth',
+          fn: (state: MiddlewareState) => {
+            const { width } = state.rects.reference;
             let menuWidth = width;
 
             if (maxWidth && menuWidth > maxWidth) {
@@ -160,25 +157,19 @@ export const Menu: FC<MenuProps & MenuRef> = forwardRef<
               menuWidth = minWidth;
             }
 
-            if (passedOffset) {
-              if (typeof passedOffset === 'number') {
-                passedXOffset = passedOffset;
-              } else {
-                const [skidding] = passedOffset.split(',');
-                passedXOffset = parseInt(skidding.trim(), 10);
-              }
-            }
-
-            data.styles.width = menuWidth;
-            data.offsets.popper.width = menuWidth;
-            data.offsets.popper.left = left + passedXOffset;
-            data.offsets.popper.right = right + passedXOffset;
-
-            return data;
+            return { data: { menuWidth } };
           }
         };
 
-        return modifiers ? { ...modifiers, sameWidth } : { sameWidth };
+        const sizeModifier = size({
+          apply({ middlewareData, elements }) {
+            elements.floating.style.width = `${middlewareData?.sameWidth?.menuWidth ?? 0}px`;
+          }
+        });
+
+        return modifiers
+          ? [...(modifiers ?? []), sameWidth, sizeModifier]
+          : [sameWidth, sizeModifier];
       }
 
       return modifiers;

src/layers/Menu/NestedMenu.tsx

@@ -16,7 +16,7 @@ export interface NestedMenuProps {
   label: any;
 
   /**
-   * Popper placement type.
+   * floating-ui placement type.
    */
   placement?: Placement;
 

src/layers/Tooltip/Tooltip.story.tsx

@@ -53,6 +53,34 @@ export const CustomTheme = () => {
   );
 };
 
+export const FollowCursor = () => (
+  <div
+    style={{
+      textAlign: 'center',
+      width: '100%',
+      margin: '50px',
+      color: 'green'
+    }}
+  >
+    <Tooltip visible content="I'm following, wait me" followCursor />
+  </div>
+);
+
+export const FollowScroll = () => (
+  <div
+    style={{
+      textAlign: 'center',
+      width: '100%',
+      height: '200vh',
+      margin: '50px',
+      color: 'green'
+    }}
+  >
+    <div className="mb-[200px]"></div>
+    <Tooltip content="Hi there">Hover me</Tooltip>
+  </div>
+);
+
 export const Disabled = () => (
   <div style={{ textAlign: 'center', width: '100%', margin: '50px' }}>
     <Tooltip content="Hi there" disabled={true}>

src/layers/Tooltip/Tooltip.tsx

@@ -39,7 +39,7 @@ export interface TooltipProps {
   reference?: ReferenceObject | HTMLElement | any;
 
   /**
-   * Popperjs placement.
+   * floating-ui placement.
    */
   placement?: Placement;
 
@@ -54,7 +54,7 @@ export interface TooltipProps {
   leaveDelay?: number;
 
   /**
-   * Popperjs modifiers.
+   * floating-ui modifiers.
    */
   modifiers?: any;
 

src/utils/ExitListener/useExitListener.tsx

@@ -1,11 +1,11 @@
-import { RefObject, useEffect } from 'react';
+import { MutableRefObject, RefObject, useEffect } from 'react';
 
 interface ExitListenerOptions {
   /**
    * A ref object pointing to the target element that the hook should
    * observe for click outside and escape key events.
    */
-  ref: RefObject<HTMLElement | null>;
+  ref: RefObject<HTMLElement | null> | MutableRefObject<HTMLElement>;
 
   /**
    * An optional boolean to enable or disable the event listeners.

src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx

@@ -97,15 +97,16 @@ export const ConnectedOverlayContent: FC<
   ) => {
     const id = useId();
     const [overlayIndex, setOverlayIndex] = useState<number | null>(null);
-    const [positionRef, popperRef] = usePosition(triggerRef, {
+    const { refs, floatingStyles, update } = usePosition({
+      reference: triggerRef.current,
       followCursor,
       modifiers,
       placement
     });
 
     useImperativeHandle(ref, () => ({
       updatePosition: () => {
-        popperRef?.current?.scheduleUpdate();
+        update();
       }
     }));
 
@@ -143,22 +144,26 @@ export const ConnectedOverlayContent: FC<
 
     useExitListener({
       open: true,
-      ref: positionRef,
+      ref: refs.floating,
       onClickOutside,
       onEscape
     });
 
     useEffect(() => {
-      if (positionRef && overlayIndex) {
-        positionRef.current.style.zIndex = overlayIndex;
+      if (refs.reference && refs.reference.current && overlayIndex) {
+        (refs.reference.current as HTMLElement).style?.setProperty(
+          'zIndex',
+          overlayIndex.toString()
+        );
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [positionRef.current, overlayIndex]);
+    }, [refs.reference.current, overlayIndex]);
 
     return (
       <OverlayPortal
         id={id}
-        ref={positionRef}
+        ref={refs.setFloating}
+        style={floatingStyles}
         className={portalClassName}
         elementType={elementType}
         appendToBody={appendToBody}