chore(clerk-js): Bump floating-ui packages to latest (#5341)

Co-authored-by: Lennart <lekoarts@gmail.com>

Author: alexcarpenter

.changeset/neat-hotels-brush.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Update floating-ui packages to latest.

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "572kB" },
+    { "path": "./dist/clerk.js", "maxSize": "573kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "78kB" },
     { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
-    { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
+    { "path": "./dist/vendors*.js", "maxSize": "28.5KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },

packages/clerk-js/package.json

@@ -60,8 +60,8 @@
     "@coinbase/wallet-sdk": "4.3.0",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
-    "@floating-ui/react": "0.25.4",
-    "@floating-ui/react-dom": "^2.0.2",
+    "@floating-ui/react": "0.27.5",
+    "@floating-ui/react-dom": "^2.1.2",
     "@formkit/auto-animate": "^0.8.1",
     "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.6.0",

packages/clerk-js/src/ui/elements/Popover.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 type PopoverProps = PropsWithChildren<{
   context: FloatingContext<ReferenceType>;
-  nodeId: string;
+  nodeId?: string;
   isOpen?: boolean;
   initialFocus?: number | React.MutableRefObject<HTMLElement | null>;
   order?: Array<'reference' | 'floating' | 'content'>;

packages/clerk-js/src/ui/hooks/usePopover.ts

@@ -56,10 +56,6 @@ export const usePopover = (props: UsePopoverProps = {}) => {
       }),
     ],
   });
-  // Names are aliased because in @floating-ui/react-dom@2.0.0 the top-level elements were removed
-  // This keeps the API shape for consumers of usePopover
-  // @see https://github.com/floating-ui/floating-ui/releases/tag/%40floating-ui%2Freact-dom%402.0.0
-  const { setReference: reference, setFloating: floating } = refs;
 
   useDismiss(context, {
     enabled: canCloseModal !== false,
@@ -78,8 +74,8 @@ export const usePopover = (props: UsePopoverProps = {}) => {
   const close = React.useCallback(() => setIsOpen(false), [setIsOpen]);
 
   return {
-    reference,
-    floating,
+    reference: refs.setReference,
+    floating: refs.setFloating,
     toggle,
     open,
     nodeId,