feat: Upgrade components 6️⃣ [UFO-1987] [UFO-1988] [UFO-1989] [UFO-1992] #3186

Lelith · 2025-10-01T16:22:41Z

Summary

This PR replaces the deprecated react-popper package with its actively maintained successor, @floating-ui/react.
floating-ui provides improved flexibility, performance, and more robust positioning behavior for UI elements.

Also contains react 19 upgrades for the following other components

Modal
Notification
Tabs

Affected Components

The following components previously relied directly on react-popper and have been refactored to use floating-ui:

Popover
Menu
Tooltip

Additionally, several components that indirectly depend on these were updated or tested to ensure compatibility:

Autocomplete
Avatar
IconButton
Card
CopyButton
Datepicker
EntityList
Multiselect
Navbar
Pill
UsageCard

Changes

Removed react-popper dependency.
Added and configured @floating-ui/react.
Refactored Popover, Menu, and Tooltip to use floating-ui.
Updated positioning logic and event handling for better consistency and performance.
Adjusted tests and stories where necessary to reflect the new implementation.

Breaking Changes

Placement Property

The placement prop for Popover, Menu, and Tooltip has changed to match the floating-ui API.
- Old placement values (e.g. "auto-start", "auto-end") need to be updated.
- Refer to the migration guide for the full list of valid placement options.

changeset-bot · 2025-10-01T16:22:46Z

⚠️ No Changeset found

Latest commit: 102def6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@contentful/f36-website" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

vercel · 2025-10-01T16:22:47Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
forma-36	Error		Oct 14, 2025 0:15am

wiz-inc-38d59fb8d7 · 2025-10-08T13:46:47Z

Wiz Scan Summary

Scanner	Findings
Vulnerabilities	-
Sensitive Data	-
SAST Findings	4

Total	4

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try using Wiz Code VS Code Extension.

* feat: revive tooltip * feat: refactor using floatingUI * docs: update migration guidelines for tooltip, popover and menu * feat: update tooltip in pill component * fix: fix auto position of arrow and offset * test: disable class name tests until emotion/jest is avilable for jest 30 * fix: merge refs and add props in correct order * feat: re-enable tooltip on IconButton * feat: re-enable tooltip for clear-all icon * feat: re-enable menu for card actions * feat: re-implement tooltip for copy button * feat: simplify implementation using IconButton * feat: re-implement tooltip for inline entry card * feat: implement fallback for rendering tooltip trigger * feat: re-implement tooltip in UsageCardHeader * docs: improve story with tooltip * feat: re-add exports to react-components package * feat: re-enable entity list and entitylistitem * feat: export entity-list from react-components package * feat: re-enable Avatar component * feat: export Avatar from components package * docs: update Avatar storybook stories * fix: fix ability to set individual test-id for Icon with as property * feat: re-enable card for UsageCard component * feat: update emotion imports * feat: rerfactor BaseCard styles * feat: update emotion imports * feat: re-enable navbar

…3194) * feat: update modal component package to use react 19 * feat: update notification to use react 19

veu · 2025-10-16T05:36:58Z

packages/components/tooltip/src/useTooltip.tsx

+
+  if (
+    sanitizedPlacement.startsWith('right') ||
+    sanitizedPlacement.toString().startsWith('left') ||


Suggested change

sanitizedPlacement.toString().startsWith('left') ||

sanitizedPlacement.startsWith('left') ||

veu · 2025-10-16T05:54:15Z

packages/components/tooltip/src/useTooltip.tsx

+  const [isOpen, setIsOpen] = React.useState(isVisible);
+
+  let sanitizedPlacement: Placement = 'top';
+  const middleware = [];


This should be wrapped in useMemo to prevent constant rerendering due to the newly created array.

veu · 2025-10-16T06:27:23Z

packages/components/tooltip/src/useTooltip.tsx

+  const context = data.context;
+
+  const hover = useHover(context, {
+    delay: { open: showDelay, close: hideDelay },


Let’s make a lot of friends and use the safe polygon while we’re at it.

handleClose: safePolygon({ requireIntent: false }),

Note: requireIntent should be false to not punish people who are (sometimes) slow with the mouse.

veu · 2025-10-16T06:40:31Z

packages/components/tooltip/src/TooltipTrigger.tsx

+  const baseRef = useMergeRefs([propRef, context.refs.setReference]);
+  const ref = useMergeRefs([childRef, baseRef]);
+
+  if (React.isValidElement(children)) {


Should we log an error at least in dev mode rather than silently hiding the element?

veu · 2025-10-16T07:06:34Z

packages/components/tooltip/src/Tooltip.test.tsx

-      ).toBe('left'),
-    );
-  });
+  // Enable again once emotion/jest is compatible again


Let’s mark this as an explicit TODO to make sure we find it again.

veu · 2025-10-16T08:52:10Z

packages/components/card/examples/EntryCard/EntryCardActionsExample.tsx

-        </MenuItem>,
+        <li>Copy</li>,
+        <li>Delete</li>,
+        // <MenuItem key="copy" onClick={() => alert('copy')}>


Let’s add an explicit TODO to fix this.

veu · 2025-10-16T08:52:33Z

packages/components/card/examples/InlineEntryCard/BasicInlineEntryCardExample.tsx

-          <MenuItem key="copy">Copy</MenuItem>,
-          <MenuItem key="delete">Delete</MenuItem>,
-        ]}
+        actions={[<li key="copy">Copy</li>, <li key="delete">Delete</li>]}


veu · 2025-10-16T08:52:42Z

packages/components/card/examples/InlineEntryCard/InlineEntryCardInTextExample.tsx

-          <MenuItem key="copy">Copy</MenuItem>,
-          <MenuItem key="delete">Delete</MenuItem>,
-        ]}
+        actions={[<li key="copy">Copy</li>, <li key="delete">Delete</li>]}


veu · 2025-10-16T08:56:15Z

packages/components/card/examples/InlineEntryCard/InlineEntryCardWithActionsExample.tsx

    <InlineEntryCard
      actions={[
-        <MenuItem key="edit" onClick={handleEditAction}>
+        <li key="edit" onClick={handleEditAction}>


vercel bot had a problem deploying to Preview October 1, 2025 17:20 Failure

vercel bot had a problem deploying to Preview October 1, 2025 17:25 Failure

vercel bot had a problem deploying to Preview October 1, 2025 17:42 Failure

vercel bot had a problem deploying to Preview October 2, 2025 08:01 Failure

vercel bot had a problem deploying to Preview October 7, 2025 07:43 Failure

Lelith force-pushed the feat/upgrade_react_popper_UFO-1987 branch from 88690c4 to 4038ab6 Compare October 7, 2025 08:04

vercel bot had a problem deploying to Preview October 7, 2025 08:05 Failure

Lelith marked this pull request as ready for review October 7, 2025 10:00

Lelith requested review from a team and damann as code owners October 7, 2025 10:00

Lelith force-pushed the fix/eslint_setup_UFO-2005 branch from f7c9817 to d157100 Compare October 8, 2025 11:19

Lelith force-pushed the feat/upgrade_react_popper_UFO-1987 branch from 4038ab6 to d4b0e0c Compare October 8, 2025 13:33

vercel bot had a problem deploying to Preview October 8, 2025 13:33 Failure

Lelith force-pushed the feat/upgrade_react_popper_UFO-1987 branch from d4b0e0c to 0e26a0b Compare October 8, 2025 13:45

vercel bot had a problem deploying to Preview October 8, 2025 13:45 Failure

Lelith force-pushed the fix/eslint_setup_UFO-2005 branch from 08465e1 to f9e8493 Compare October 8, 2025 14:48

Lelith force-pushed the feat/upgrade_react_popper_UFO-1987 branch from 0e26a0b to ed0b5a2 Compare October 8, 2025 14:57

vercel bot had a problem deploying to Preview October 8, 2025 14:57 Failure

vercel bot had a problem deploying to Preview October 9, 2025 06:00 Failure

Lelith changed the title ~~feat: replace react-popper with floating-ui~~ feat: migrate react-popper to floating-ui Oct 9, 2025

Lelith mentioned this pull request Oct 9, 2025

breaking: React 19 Update 6️⃣ [UFO-1081] #3171

Draft

9 tasks

vercel bot had a problem deploying to Preview October 10, 2025 13:29 Failure

Lelith force-pushed the feat/upgrade_react_popper_UFO-1987 branch from 376fe92 to 6d86360 Compare October 10, 2025 13:35

vercel bot had a problem deploying to Preview October 10, 2025 13:35 Failure

Lelith changed the title ~~feat: migrate react-popper to floating-ui~~ feat: migrate react-popper to floating-ui [UFO-1987] Oct 10, 2025

vercel bot had a problem deploying to Preview October 13, 2025 05:31 Failure

vercel bot had a problem deploying to Preview October 13, 2025 06:30 Failure

Lelith and others added 15 commits October 14, 2025 14:09

feat: upgrade autocomplete

b97b77f

docs: fix autocomplete stories

9b3c360

feat: upgrade Autocomplete component

3f44120

fix: trying to fix babel config

6efdbd7

feat: fix autocomplete tests

29399f1

chore: rebase

19f7d88

chore: update dependencies

da495f0

chore: still allow direct import of Submenu and SubmenuTrigger

19b8d82

feat: update modal & notification component package to use react 19 (#…

c41459c

…3194) * feat: update modal component package to use react 19 * feat: update notification to use react 19

chore: update packges

51f5630

chore: remove unneeded estlint disable

2d254b2

chore: upgrade modal examples

6efc18d

chore: upgrade Submenu Example

b175a5b

feat: export notification from react-components package

102def6

Lelith force-pushed the feat/upgrade_react_popper_UFO-1987 branch from ff02d91 to 102def6 Compare October 14, 2025 12:15

vercel bot had a problem deploying to Preview October 14, 2025 12:15 Failure

Lelith changed the title ~~feat: migrate react-popper to floating-ui [UFO-1987]~~ 6️⃣ feat: migrate react-popper to floating-ui [UFO-1987] Oct 14, 2025

Lelith changed the title ~~6️⃣ feat: migrate react-popper to floating-ui [UFO-1987]~~ 6️⃣ feat: Upgrade components [UFO-1987] [UFO-1988] [UFO-1989] [UFO-1992] Oct 14, 2025

Lelith changed the title ~~6️⃣ feat: Upgrade components [UFO-1987] [UFO-1988] [UFO-1989] [UFO-1992]~~ feat: Upgrade components 6️⃣ [UFO-1987] [UFO-1988] [UFO-1989] [UFO-1992] Oct 14, 2025

Lelith force-pushed the fix/eslint_setup_UFO-2005 branch from f9e8493 to dc55cf8 Compare October 15, 2025 06:42

veu reviewed Oct 16, 2025

View reviewed changes

	sanitizedPlacement.toString().startsWith('left') \|\|
	sanitizedPlacement.startsWith('left') \|\|

feat: Upgrade components 6️⃣ [UFO-1987] [UFO-1988] [UFO-1989] [UFO-1992] #3186

Are you sure you want to change the base?

feat: Upgrade components 6️⃣ [UFO-1987] [UFO-1988] [UFO-1989] [UFO-1992] #3186

Uh oh!

Conversation

Lelith commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Affected Components

Changes

Breaking Changes

Menu

Placement Property

Uh oh!

changeset-bot bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wiz-inc-38d59fb8d7 bot commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Wiz Scan Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Lelith commented Oct 1, 2025 •

edited

Loading

changeset-bot bot commented Oct 1, 2025 •

edited

Loading

vercel bot commented Oct 1, 2025 •

edited

Loading

wiz-inc-38d59fb8d7 bot commented Oct 8, 2025 •

edited

Loading