diff --git a/package.json b/package.json index 161040678..3caffdf7b 100644 --- a/package.json +++ b/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", diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx index db555e226..920eb5a8b 100644 --- a/src/components/profile-hover-card.tsx +++ b/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 = ({ 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 = ({ visible = true } 'opacity-0 pointer-events-none': !visible, })} ref={setPopperElement} - style={styles.popper} - {...attributes.popper} + style={floatingStyles} onMouseEnter={handleMouseEnter(dispatch)} onMouseLeave={handleMouseLeave(dispatch)} > diff --git a/src/components/status-hover-card.tsx b/src/components/status-hover-card.tsx index 08359c61a..dbf1d8bd2 100644 --- a/src/components/status-hover-card.tsx +++ b/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 = ({ 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 = ({ visible = true }) 'opacity-0 pointer-events-none': !visible, })} ref={setPopperElement} - style={styles.popper} - {...attributes.popper} + style={floatingStyles} onMouseEnter={handleMouseEnter()} onMouseLeave={handleMouseLeave()} > diff --git a/yarn.lock b/yarn.lock index b99c52e77..cae89f7ac 100644 --- a/yarn.lock +++ b/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==