fix: avoid rect spreads (#2850)

floating-ui · Apr 20, 2024 · a6339a7 · a6339a7
1 parent 95d9f10
commit a6339a7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/.changeset/friendly-boxes-refuse.md b/.changeset/friendly-boxes-refuse.md
@@ -0,0 +1,7 @@
+---
+"@floating-ui/utils": patch
+"@floating-ui/core": patch
+"@floating-ui/dom": patch
+---
+
+fix: avoid spreading rects to support `DOMRect` types
diff --git a/packages/core/src/detectOverflow.ts b/packages/core/src/detectOverflow.ts
@@ -82,7 +82,9 @@ export async function detectOverflow(
   );
 
   const rect =
-    elementContext === 'floating' ? {...rects.floating, x, y} : rects.reference;
+    elementContext === 'floating'
+      ? {x, y, width: rects.floating.width, height: rects.floating.height}
+      : rects.reference;
 
   const offsetParent = await platform.getOffsetParent?.(elements.floating);
   const offsetScale = (await platform.isElement?.(offsetParent))

diff --git a/packages/dom/src/platform/getElementRects.ts b/packages/dom/src/platform/getElementRects.ts
@@ -8,12 +8,19 @@ export const getElementRects: Platform['getElementRects'] = async function (
 ) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+
   return {
     reference: getRectRelativeToOffsetParent(
       data.reference,
       await getOffsetParentFn(data.floating),
       data.strategy,
     ),
-    floating: {x: 0, y: 0, ...(await getDimensionsFn(data.floating))},
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height,
+    },
   };
 };
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
@@ -187,11 +187,15 @@ export function getPaddingObject(padding: Padding): SideObject {
 }
 
 export function rectToClientRect(rect: Rect): ClientRectObject {
+  const {x, y, width, height} = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height,
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y,
   };
 }