fix: DOMRect value issues

Author: consistent-k

src/hooks/useAlign.ts

@@ -212,9 +212,11 @@ export default function useAlign(
         };
       } else {
         const rect = target.getBoundingClientRect();
+        rect.x = rect.x || rect.left;
+        rect.y = rect.y || rect.top
         targetRect = {
-          x: rect.x || rect.left,
-          y: rect.y || rect.top,
+          x: rect.x,
+          y: rect.y,
           width: rect.width,
           height: rect.height,
         };

tests/align.test.tsx

@@ -26,6 +26,8 @@ describe('Trigger.Align', () => {
       getBoundingClientRect: () => ({
         x: rectX,
         y: rectY,
+        left: rectX,
+        top: rectY,
         width: rectWidth,
         height: rectHeight,
         right: 200,

tests/arrow.test.jsx

@@ -53,6 +53,8 @@ describe('Trigger.Arrow', () => {
         () => ({
           x: 200,
           y: 200,
+          left: 200,
+          top: 200,
           width: 100,
           height: 50,
         }),

tests/flip-visibleFirst.test.tsx

@@ -56,20 +56,26 @@ describe('Trigger.VisibleFirst', () => {
   let containerRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 100,
     height: 100,
   };
 
   let targetRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 1,
     height: 1,
   };
 
   let popupRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 100,
     height: 100,
   };
@@ -84,18 +90,24 @@ describe('Trigger.VisibleFirst', () => {
     containerRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 100,
       height: 100,
     };
     targetRect = {
       x: 250,
       y: 250,
+      left: 250,
+      top: 250,
       width: 1,
       height: 1,
     };
     popupRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 100,
       height: 100,
     };

tests/flip.test.tsx

@@ -58,13 +58,17 @@ describe('Trigger.Align', () => {
   let spanRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 1,
     height: 1,
   };
 
   let popupRect = {
     x: 0,
     y: 0,
+    left: 0,
+    top: 0,
     width: 100,
     height: 100,
   };
@@ -112,12 +116,16 @@ describe('Trigger.Align', () => {
     spanRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 1,
       height: 1,
     };
     popupRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 100,
       height: 100,
     };
@@ -253,6 +261,8 @@ describe('Trigger.Align', () => {
     popupRect = {
       x: 100,
       y: 1,
+      left: 100,
+      top: 1,
       width: 100,
       height: 100,
     };
@@ -339,6 +349,8 @@ describe('Trigger.Align', () => {
       ({
         x: 100,
         y: 100,
+        left: 100,
+        top: 100,
         width: 300,
         height: 300,
       } as any);
@@ -384,6 +396,8 @@ describe('Trigger.Align', () => {
     popupRect = {
       x: 0,
       y: 0,
+      left: 0,
+      top: 0,
       width: 200,
       height: 200,
     };

tests/flipShift.test.tsx

@@ -79,12 +79,14 @@ const builtinPlacements = {
 };
 
 describe('Trigger.Flip+Shift', () => {
-  let spanRect = { x: 0, y: 0, width: 0, height: 0 };
+  let spanRect = { x: 0, y: 0, left: 0, top: 0, width: 0, height: 0 };
 
   beforeEach(() => {
     spanRect = {
       x: 0,
       y: 100,
+      left: 0,
+      top: 100,
       width: 100,
       height: 100,
     };
@@ -113,6 +115,8 @@ describe('Trigger.Flip+Shift', () => {
         return {
           x: 0,
           y: 0,
+          left: 0,
+          top: 0,
           width: 100,
           height: 300,
         };