pl-fe: replace react-popper with @floating-ui/react

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

packages/pl-fe/package.json

@@ -56,7 +56,6 @@
     "@lexical/utils": "^0.18.0",
     "@mkljczk/lexical-remark": "^0.4.0",
     "@mkljczk/react-hotkeys": "^1.2.2",
-    "@popperjs/core": "^2.11.5",
     "@reach/combobox": "^0.18.0",
     "@reach/menu-button": "^0.18.0",
     "@reach/popover": "^0.18.0",
@@ -125,7 +124,6 @@
     "react-inlinesvg": "^4.0.0",
     "react-intl": "^6.0.0",
     "react-motion": "^0.5.2",
-    "react-popper": "^2.3.0",
     "react-redux": "^9.0.4",
     "react-router-dom": "^5.3.4",
     "react-router-dom-v5-compat": "^6.24.1",

packages/pl-fe/src/components/profile-hover-card.tsx

@@ -1,7 +1,7 @@
+import { useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
-import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
 
 import { fetchRelationships } from 'pl-fe/actions/accounts';
@@ -52,8 +52,6 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
   const history = useHistory();
   const intl = useIntl();
 
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-
   const me = useAppSelector(state => state.me);
   const accountId: string | undefined = useAppSelector(state => state.profile_hover_card.accountId || undefined);
   const { account } = useAccount(accountId, { withRelationship: true, withScrobble: true });
@@ -75,7 +73,23 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
     };
   }, []);
 
-  const { styles, attributes } = usePopper(targetRef, popperElement);
+  const { x, y, strategy, refs, context } = useFloating({
+    open: !!account,
+    elements: {
+      reference: targetRef,
+    },
+  });
+
+  const { styles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+      transform: 'scale(0.8)',
+    },
+    duration: {
+      open: 100,
+      close: 100,
+    },
+  });
 
   if (!account) return null;
   const accountBio = { __html: account.note_emojified };
@@ -89,9 +103,13 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
         'opacity-100': visible,
         'opacity-0 pointer-events-none': !visible,
       })}
-      ref={setPopperElement}
-      style={styles.popper}
-      {...attributes.popper}
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        ...styles,
+      }}
       onMouseEnter={handleMouseEnter(dispatch)}
       onMouseLeave={handleMouseLeave(dispatch)}
     >

packages/pl-fe/src/components/status-hover-card.tsx

@@ -1,7 +1,7 @@
+import { useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useIntl } from 'react-intl';
-import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
 
 import { closeStatusHoverCard, updateStatusHoverCard } from 'pl-fe/actions/status-hover-card';
@@ -22,8 +22,6 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
   const intl = useIntl();
   const history = useHistory();
 
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-
   const statusId: string | undefined = useAppSelector(state => state.status_hover_card.statusId || undefined);
   const status = useAppSelector(state => state.statuses.get(statusId!));
   const targetRef = useAppSelector(state => state.status_hover_card.ref?.current);
@@ -45,10 +43,26 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
     };
   }, []);
 
-  const { styles, attributes } = usePopper(targetRef, popperElement, {
+  const { x, y, strategy, refs, context } = useFloating({
+    open: !!statusId,
+    elements: {
+      reference: targetRef,
+    },
     placement: 'top',
   });
 
+  const { styles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+      transform: 'scale(0.8)',
+      transformOrigin: 'bottom',
+    },
+    duration: {
+      open: 100,
+      close: 100,
+    },
+  });
+
   const handleMouseEnter = useCallback((): React.MouseEventHandler => () => {
     dispatch(updateStatusHoverCard());
   }, []);
@@ -77,9 +91,13 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
         'opacity-100': visible,
         'opacity-0 pointer-events-none': !visible,
       })}
-      ref={setPopperElement}
-      style={styles.popper}
-      {...attributes.popper}
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        ...styles,
+      }}
       onMouseEnter={handleMouseEnter()}
       onMouseLeave={handleMouseLeave()}
     >

packages/pl-fe/yarn.lock

@@ -2103,11 +2103,6 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
-"@popperjs/core@^2.11.5":
-  version "2.11.5"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
-  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
-
 "@prettier/eslint@npm:prettier-eslint@^15.0.1":
   version "15.0.1"
   resolved "https://registry.yarnpkg.com/prettier-eslint/-/prettier-eslint-15.0.1.tgz#2543a43e9acec2a9767ad6458165ce81f353db9c"
@@ -9702,7 +9697,7 @@ react-event-listener@^0.6.0:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
-react-fast-compare@^3.0.1, react-fast-compare@^3.1.1:
+react-fast-compare@^3.1.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
@@ -9776,14 +9771,6 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-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-property@2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.2.tgz#d5ac9e244cef564880a610bc8d868bd6f60fdda6"
@@ -12067,7 +12054,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-warning@^4.0.1, warning@^4.0.2:
+warning@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==