Remove react-popper

package.json

@@ -56,7 +56,6 @@
     "@lexical/utils": "^0.14.2",
     "@mkljczk/react-hotkeys": "^1.2.2",
     "@nostrify/nostrify": "npm:@jsr/nostrify__nostrify",
-    "@popperjs/core": "^2.11.5",
     "@reach/combobox": "^0.18.0",
     "@reach/menu-button": "^0.18.0",
     "@reach/popover": "^0.18.0",
@@ -138,7 +137,6 @@
     "react-intl": "^6.0.0",
     "react-motion": "^0.5.2",
     "react-overlays": "^0.9.0",
-    "react-popper": "^2.3.0",
     "react-redux": "^9.0.4",
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.6.2",

src/components/profile-hover-card.tsx

@@ -1,7 +1,7 @@
+import { useFloating } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
-import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
@@ -87,7 +87,12 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
     };
   }, []);
 
-  const { styles, attributes } = usePopper(targetRef, popperElement);
+  const { floatingStyles } = useFloating({
+    elements: {
+      floating: popperElement,
+      reference: targetRef,
+    },
+  });
 
   if (!account) return null;
   const accountBio = { __html: account.note_emojified };
@@ -102,8 +107,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
         'opacity-0 pointer-events-none': !visible,
       })}
       ref={setPopperElement}
-      style={styles.popper}
-      {...attributes.popper}
+      style={floatingStyles}
       onMouseEnter={handleMouseEnter(dispatch)}
       onMouseLeave={handleMouseLeave(dispatch)}
     >

src/components/status-hover-card.tsx

@@ -1,6 +1,6 @@
+import { useFloating } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect, useState, useCallback } from 'react';
-import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
 
 import {
@@ -46,8 +46,12 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
     };
   }, []);
 
-  const { styles, attributes } = usePopper(targetRef, popperElement, {
+  const { floatingStyles } = useFloating({
     placement: 'top',
+    elements: {
+      floating: popperElement,
+      reference: targetRef,
+    },
   });
 
   const handleMouseEnter = useCallback((): React.MouseEventHandler => {
@@ -85,8 +89,7 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
         'opacity-0 pointer-events-none': !visible,
       })}
       ref={setPopperElement}
-      style={styles.popper}
-      {...attributes.popper}
+      style={floatingStyles}
       onMouseEnter={handleMouseEnter()}
       onMouseLeave={handleMouseLeave()}
     >

yarn.lock

@@ -1812,7 +1812,7 @@
     websocket-ts "^2.1.5"
     zod "^3.23.4"
 
-"@popperjs/core@^2.11.5", "@popperjs/core@^2.9.2":
+"@popperjs/core@^2.9.2":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@@ -7213,7 +7213,7 @@ react-overlays@^0.9.0:
     react-transition-group "^2.2.1"
     warning "^3.0.0"
 
-react-popper@^2.2.5, react-popper@^2.3.0:
+react-popper@^2.2.5:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
   integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==