⬆️ Update floating-ui (#2922)

* update floating-ui * update floating-ui again * fix breaking changes: popover * fix breaking changes: tooltip * fix breaking changes: menu * fix breaking changes: autocomplete * fix breaking changes: dialog * update pnpm-lock * 📸 update popover snapshot * 📸 Update snapshots * remove console.log
equinor · Jun 21, 2023 · c65e3de · c65e3de
1 parent 4c62e94
commit c65e3de
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 50 deletions.
diff --git a/packages/eds-core-react/package.json b/packages/eds-core-react/package.json
@@ -95,7 +95,7 @@
     "@equinor/eds-icons": "workspace:*",
     "@equinor/eds-tokens": "workspace:*",
     "@equinor/eds-utils": "workspace:*",
-    "@floating-ui/react": "^0.23.0",
+    "@floating-ui/react": "^0.24.3",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "downshift": "^7.6.0"
   },

diff --git a/packages/eds-core-react/pnpm-lock.yaml b/packages/eds-core-react/pnpm-lock.yaml
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -44,6 +44,7 @@ import {
   useFloating,
   useInteractions,
   FloatingPortal,
+  MiddlewareState,
 } from '@floating-ui/react'
 
 const Container = styled.div`
@@ -554,11 +555,10 @@ function AutocompleteInner<T>(
       flip(),
       shift({ padding: 8 }),
       size({
-        apply({ rects, availableHeight, elements }) {
+        apply({ rects, elements }: MiddlewareState) {
           const anchorWidth = `${rects.reference.width}px`
           Object.assign(elements.floating.style, {
             width: `${autoWidth ? anchorWidth : 'auto'}`,
-            maxHeight: `${availableHeight}px`,
           })
         },
         padding: 10,

diff --git a/packages/eds-core-react/src/components/Dialog/Dialog.tsx b/packages/eds-core-react/src/components/Dialog/Dialog.tsx
@@ -60,14 +60,14 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
 ) {
   const { density } = useEds()
   const token = useToken({ density }, dialogToken)
-  const { floating, context } = useFloating()
+  const { refs, context } = useFloating()
   const handleDismiss = () => {
     onClose && onClose()
   }
 
   const dialogRef = useMemo(
-    () => mergeRefs<HTMLDivElement>(floating, ref),
-    [floating, ref],
+    () => mergeRefs<HTMLDivElement>(refs.setFloating, ref),
+    [refs.setFloating, ref],
   )
 
   const rest = {

diff --git a/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -88,7 +88,7 @@ exports[`Dialog Matches snapshot 1`] = `
   data-testid="dialog"
   open=""
   role="dialog"
-  tabindex="0"
+  tabindex="-1"
 >
   <div
     class="c2"

diff --git a/packages/eds-core-react/src/components/Menu/Menu.tsx b/packages/eds-core-react/src/components/Menu/Menu.tsx
@@ -24,6 +24,7 @@ import {
   FloatingPortal,
   size,
   Middleware,
+  MiddlewareState,
 } from '@floating-ui/react'
 
 type MenuPaperProps = {
@@ -160,7 +161,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
     floatingMiddleware = [
       ...floatingMiddleware,
       size({
-        apply({ rects, elements }) {
+        apply({ rects, elements }: MiddlewareState) {
           Object.assign(elements.floating.style, {
             width: `${rects.reference.width}px`,
           })
@@ -169,21 +170,19 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
     ]
   }
 
-  const { x, y, reference, floating, refs, update, strategy, context } =
-    useFloating({
-      placement,
-      open,
-      onOpenChange: onClose,
-      middleware: floatingMiddleware,
-    })
-
-  useEffect(() => {
-    reference(anchorEl)
-  }, [anchorEl, reference])
+  const { x, y, refs, update, strategy, context } = useFloating({
+    elements: {
+      reference: anchorEl,
+    },
+    placement,
+    open,
+    onOpenChange: onClose,
+    middleware: floatingMiddleware,
+  })
 
   const popoverRef = useMemo(
-    () => mergeRefs<HTMLDivElement>(floating, ref),
-    [floating, ref],
+    () => mergeRefs<HTMLDivElement>(refs.setFloating, ref),
+    [refs.setFloating, ref],
   )
   useIsomorphicLayoutEffect(() => {
     if (refs.reference.current && refs.floating.current && open) {

diff --git a/packages/eds-core-react/src/components/Popover/Popover.tsx b/packages/eds-core-react/src/components/Popover/Popover.tsx
@@ -117,13 +117,15 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const {
       x,
       y,
-      reference,
-      floating,
+      refs,
       strategy,
       context,
       middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
       placement: finalPlacement,
     } = useFloating({
+      elements: {
+        reference: anchorEl,
+      },
       placement,
       open,
       onOpenChange: onClose,
@@ -136,13 +138,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       whileElementsMounted: autoUpdate,
     })
 
-    useEffect(() => {
-      reference(anchorEl)
-    }, [anchorEl, reference])
-
     const popoverRef = useMemo(
-      () => mergeRefs<HTMLDivElement>(floating, ref),
-      [floating, ref],
+      () => mergeRefs<HTMLDivElement>(refs.setFloating, ref),
+      [refs.setFloating, ref],
     )
 
     const { getFloatingProps } = useInteractions([useDismiss(context)])

diff --git a/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/packages/eds-core-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -64,7 +64,7 @@ exports[`Popover Matches snapshot 1`] = `
 >
   <div
     class="c3 arrow"
-    style="top: -6px; transform: rotate(90deg); left: 0px;"
+    style="top: -6px; transform: rotate(90deg); left: -1px;"
   >
     <svg
       class="c4 arrowSvg"

diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
@@ -94,8 +94,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     const {
       x,
       y,
-      reference,
-      floating,
+      refs,
       strategy,
       context,
       middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
@@ -113,12 +112,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       whileElementsMounted: autoUpdate,
     })
     const anchorRef = useMemo(
-      () => mergeRefs<HTMLElement>(reference, children?.ref),
-      [reference, children?.ref],
+      () => mergeRefs<HTMLElement>(refs.setReference, children?.ref),
+      [refs.setReference, children?.ref],
     )
     const tooltipRef = useMemo(
-      () => mergeRefs<HTMLDivElement>(floating, ref),
-      [floating, ref],
+      () => mergeRefs<HTMLDivElement>(refs.setFloating, ref),
+      [refs.setFloating, ref],
     )
 
     const { getReferenceProps, getFloatingProps } = useInteractions([

diff --git a/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/eds-core-react/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`Tooltip Matches snapshot 1`] = `
   Tooltip
   <div
     class="c1"
-    style="top: -6px; transform: rotate(90deg); left: 0px;"
+    style="top: -6px; transform: rotate(90deg); left: -1px;"
   >
     <svg
       class="c2 arrowSvg"