chore: replace react-popper with @floating-ui/react (#2856)

Author: MartinCupela

examples/vite/yarn.lock

@@ -176,6 +176,42 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@floating-ui/core@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.3.tgz#462d722f001e23e46d86fd2bd0d21b7693ccb8b7"
+  integrity sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==
+  dependencies:
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/dom@^1.7.4":
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.4.tgz#ee667549998745c9c3e3e84683b909c31d6c9a77"
+  integrity sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==
+  dependencies:
+    "@floating-ui/core" "^1.7.3"
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/react-dom@^2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.6.tgz#189f681043c1400561f62972f461b93f01bf2231"
+  integrity sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==
+  dependencies:
+    "@floating-ui/dom" "^1.7.4"
+
+"@floating-ui/react@^0.27.2":
+  version "0.27.16"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.27.16.tgz#6e485b5270b7a3296fdc4d0faf2ac9abf955a2f7"
+  integrity sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.6"
+    "@floating-ui/utils" "^0.2.10"
+    tabbable "^6.0.0"
+
+"@floating-ui/utils@^0.2.10":
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c"
+  integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -216,11 +252,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@popperjs/core@^2.11.5":
-  version "2.11.8"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 "@react-aria/focus@^3":
   version "3.16.2"
   resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.16.2.tgz#2285bc19e091233b4d52399c506ac8fa60345b44"
@@ -1409,10 +1440,10 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-linkifyjs@^4.1.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.3.tgz#0edbc346428a7390a23ea2e5939f76112c9ae07f"
-  integrity sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg==
+linkifyjs@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.3.2.tgz#d97eb45419aabf97ceb4b05a7adeb7b8c8ade2b1"
+  integrity sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==
 
 load-script@^1.0.0:
   version "1.0.0"
@@ -1466,7 +1497,7 @@ longest-streak@^3.0.0:
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
   integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==
 
-loose-envify@^1.0.0, loose-envify@^1.4.0:
+loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2175,14 +2206,6 @@ react-player@2.10.1:
     prop-types "^15.7.2"
     react-fast-compare "^3.0.1"
 
-react-popper@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
-  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
-  dependencies:
-    react-fast-compare "^3.0.1"
-    warning "^4.0.2"
-
 react-textarea-autosize@^8.3.0:
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz#d1e9fe760178413891484847d3378706052dd409"
@@ -2407,6 +2430,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -2581,13 +2609,6 @@ vite@^6.3.5:
   optionalDependencies:
     fsevents "~2.3.3"
 
-warning@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"

package.json

@@ -102,7 +102,7 @@
   ],
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.4",
-    "@popperjs/core": "^2.11.5",
+    "@floating-ui/react": "^0.27.2",
     "@react-aria/focus": "^3",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
@@ -122,7 +122,6 @@
     "react-image-gallery": "1.2.12",
     "react-markdown": "^9.0.3",
     "react-player": "2.10.1",
-    "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.3.0",
     "react-virtuoso": "^2.16.5",
     "remark-gfm": "^4.0.1",

src/components/Dialog/ButtonWithSubmenu.tsx

@@ -3,11 +3,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDialog, useDialogIsOpen } from './hooks';
 import { useDialogAnchor } from './DialogAnchor';
 import type { ComponentProps, ComponentType } from 'react';
-import type { Placement } from '@popperjs/core';
+import type { PopperLikePlacement } from './hooks';
 
 type ButtonWithSubmenu = ComponentProps<'button'> & {
   children: React.ReactNode;
-  placement: Placement;
+  placement: PopperLikePlacement;
   Submenu: ComponentType;
   submenuContainerProps?: ComponentProps<'div'>;
 };
@@ -26,7 +26,7 @@ export const ButtonWithSubmenu = ({
   const dialogId = useMemo(() => `submenu-${Math.random().toString(36).slice(2)}`, []);
   const dialog = useDialog({ id: dialogId });
   const dialogIsOpen = useDialogIsOpen(dialogId);
-  const { attributes, setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
+  const { setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
     open: dialogIsOpen,
     placement,
     referenceElement: buttonRef.current,
@@ -102,7 +102,6 @@ export const ButtonWithSubmenu = ({
       </button>
       {dialogIsOpen && (
         <div
-          {...attributes.popper}
           onBlur={(event) => {
             const isBlurredDescendant =
               event.relatedTarget instanceof Node &&
@@ -125,7 +124,7 @@ export const ButtonWithSubmenu = ({
             setPopperElement(element);
             setDialogContainer(element);
           }}
-          style={styles.popper}
+          style={styles}
           tabIndex={-1}
           {...submenuContainerProps}
         >

src/components/Dialog/DialogAnchor.tsx

@@ -1,15 +1,15 @@
 import clsx from 'clsx';
-import type { Placement } from '@popperjs/core';
 import type { ComponentProps, PropsWithChildren } from 'react';
 import React, { useEffect, useState } from 'react';
 import { FocusScope } from '@react-aria/focus';
-import { usePopper } from 'react-popper';
 import { DialogPortalEntry } from './DialogPortal';
 import { useDialog, useDialogIsOpen } from './hooks';
+import { usePopoverPosition } from './hooks/usePopoverPosition';
+import type { PopperLikePlacement } from './hooks';
 
 export interface DialogAnchorOptions {
   open: boolean;
-  placement: Placement;
+  placement: PopperLikePlacement;
   referenceElement: HTMLElement | null;
   allowFlip?: boolean;
 }
@@ -21,25 +21,20 @@ export function useDialogAnchor<T extends HTMLElement>({
   referenceElement,
 }: DialogAnchorOptions) {
   const [popperElement, setPopperElement] = useState<T | null>(null);
-  const { attributes, styles, update } = usePopper(referenceElement, popperElement, {
-    modifiers: [
-      {
-        enabled: !!allowFlip, // Prevent flipping
-        name: 'flip',
-      },
-      {
-        name: 'eventListeners',
-        options: {
-          // It's not safe to update popper position on resize and scroll, since popper's
-          // reference element might not be visible at the time.
-          resize: false,
-          scroll: false,
-        },
-      },
-    ],
+  const { refs, strategy, update, x, y } = usePopoverPosition({
+    allowFlip,
+    freeze: true,
     placement,
   });
 
+  useEffect(() => {
+    refs.setReference(referenceElement);
+  }, [referenceElement, refs]);
+
+  useEffect(() => {
+    refs.setFloating(popperElement);
+  }, [popperElement, refs]);
+
   useEffect(() => {
     if (open && popperElement) {
       // Since the popper's reference element might not be (and usually is not) visible
@@ -54,9 +49,12 @@ export function useDialogAnchor<T extends HTMLElement>({
   }
 
   return {
-    attributes,
     setPopperElement,
-    styles,
+    styles: {
+      left: x ?? 0,
+      position: strategy,
+      top: y ?? 0,
+    } as React.CSSProperties,
   };
 }
 
@@ -80,7 +78,7 @@ export const DialogAnchor = ({
 }: DialogAnchorProps) => {
   const dialog = useDialog({ id });
   const open = useDialogIsOpen(id);
-  const { attributes, setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
+  const { setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
     allowFlip,
     open,
     placement,
@@ -111,11 +109,10 @@ export const DialogAnchor = ({
       <FocusScope autoFocus={focus} contain={trapFocus} restoreFocus>
         <div
           {...restDivProps}
-          {...attributes.popper}
           className={clsx('str-chat__dialog-contents', className)}
           data-testid='str-chat__dialog-contents'
           ref={setPopperElement}
-          style={styles.popper}
+          style={styles}
           tabIndex={typeof tabIndex !== 'undefined' ? tabIndex : 0}
         >
           {children}

src/components/Dialog/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useDialog';
+export type { PopperLikePlacement } from './usePopoverPosition';

src/components/Dialog/hooks/usePopoverPosition.ts

@@ -0,0 +1,107 @@
+import {
+  autoPlacement,
+  autoUpdate,
+  flip as flipMw,
+  offset as offsetMw,
+  type Placement,
+  shift as shiftMw,
+  size as sizeMw,
+  useFloating,
+} from '@floating-ui/react';
+import type { AutoPlacementOptions } from '@floating-ui/core';
+
+const hasResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window;
+
+export type PopperLikePlacement = Placement | 'auto' | 'auto-start' | 'auto-end';
+
+function autoMiddlewareFor(p: PopperLikePlacement) {
+  if (!String(p).startsWith('auto')) return null;
+  const alignment: AutoPlacementOptions['alignment'] =
+    p === 'auto-start' ? 'start' : p === 'auto-end' ? 'end' : undefined;
+  return autoPlacement({ alignment });
+}
+
+type OffsetOpt =
+  | number
+  | { mainAxis?: number; crossAxis?: number; alignmentAxis?: number }
+  | [crossAxis: number, mainAxis: number]; // keep your tuple compat
+
+function toOffsetMw(opt?: OffsetOpt) {
+  if (opt == null) return null;
+  if (Array.isArray(opt)) {
+    const [crossAxis, mainAxis] = opt;
+    return offsetMw({ crossAxis, mainAxis });
+  }
+  if (typeof opt === 'number') return offsetMw(opt);
+  return offsetMw(opt);
+}
+
+export type UsePopoverParams = {
+  placement?: PopperLikePlacement;
+  /** Add flip() when placement is not 'auto*' */
+  allowFlip?: boolean;
+  /** Keep in viewport; default true to match common popper setups */
+  allowShift?: boolean;
+  /** The floating UI is fitted to the available space (by constraining its max size) instead of letting it overflow; default false */
+  fitAvailableSpace?: boolean;
+  /** Offset (number, object, or [crossAxis, mainAxis] tuple) */
+  offset?: OffsetOpt;
+  /**
+   * Freeze behavior like Popper's eventListeners: { scroll:false, resize:false }.
+   * If true → no autoUpdate (you can call `update()` manually).
+   */
+  freeze?: boolean;
+  /**
+   * Fine-grained control of autoUpdate triggers (only if freeze=false).
+   * Defaults match Popper's "disabled" example when all set to false.
+   */
+  autoUpdateOptions?: Partial<Parameters<typeof autoUpdate>[3]>;
+};
+
+export function usePopoverPosition({
+  allowFlip = true,
+  allowShift = true,
+  autoUpdateOptions,
+  fitAvailableSpace = false,
+  freeze = false,
+  offset,
+  placement = 'bottom-start',
+}: UsePopoverParams) {
+  const autoMw = autoMiddlewareFor(placement);
+  const offsetMiddleware = toOffsetMw(offset);
+
+  const middleware = [
+    // offset first (mirrors common Popper setups)
+    ...(offsetMiddleware ? [offsetMiddleware] : []),
+
+    // choose between autoPlacement (Popper's "auto*") OR flip()
+    ...(autoMw ? [autoMw] : allowFlip ? [flipMw()] : []),
+
+    // viewport collision adjustments
+    ...(allowShift ? [shiftMw({ padding: 8 })] : []),
+
+    // optional size constraining
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    ...(fitAvailableSpace ? [sizeMw({ apply: () => {} })] : []),
+  ];
+
+  // if placement is 'auto*', seed with any static placement; autoPlacement will pick the final one
+  const seedPlacement: Placement = String(placement).startsWith('auto')
+    ? 'bottom'
+    : (placement as Placement);
+
+  return useFloating({
+    middleware,
+    placement: seedPlacement,
+    whileElementsMounted: freeze
+      ? undefined
+      : (reference, floating, update) =>
+          autoUpdate(reference, floating, update, {
+            ancestorResize: true,
+            ancestorScroll: true,
+            animationFrame: false,
+            elementResize: hasResizeObserver,
+            ...autoUpdateOptions,
+          }),
+  });
+}

src/components/Form/Dropdown.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import React, { useState } from 'react';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
 import { DialogManagerProvider, useTranslationContext } from '../../context';
-import type { Placement } from '@popperjs/core';
+import type { PopperLikePlacement } from '../Dialog';
 
 type DropdownContextValue = {
   close(): void;
@@ -28,7 +28,7 @@ export const useDropdownContext = () => React.useContext(DropdownContext);
 export type DropdownProps = PropsWithChildren<{
   className?: string;
   openButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
-  placement?: Placement;
+  placement?: PopperLikePlacement;
 }>;
 
 export const Dropdown = (props: DropdownProps) => {