fix: not revert when oos (#353)

Author: zombieJ

src/hooks/useAlign.ts

@@ -248,7 +248,7 @@ export default function useAlign(
         const visibleR = Math.min(r, visibleArea.right);
         const visibleB = Math.min(b, visibleArea.bottom);
 
-        return (visibleR - visibleL) * (visibleB - visibleT);
+        return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
       }
 
       const originIntersectionVisibleArea = getIntersectionVisibleArea(
@@ -307,7 +307,7 @@ export default function useAlign(
         }
 
         if (
-          getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >
+          getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >=
           originIntersectionVisibleArea
         ) {
           nextOffsetY = tmpNextOffsetY;
@@ -335,7 +335,7 @@ export default function useAlign(
         }
 
         if (
-          getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >
+          getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY) >=
           originIntersectionVisibleArea
         ) {
           nextOffsetY = tmpNextOffsetY;
@@ -369,7 +369,7 @@ export default function useAlign(
         }
 
         if (
-          getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >
+          getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >=
           originIntersectionVisibleArea
         ) {
           nextOffsetX = tmpNextOffsetX;
@@ -397,7 +397,7 @@ export default function useAlign(
         }
 
         if (
-          getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >
+          getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY) >=
           originIntersectionVisibleArea
         ) {
           nextOffsetX = tmpNextOffsetX;

tests/flip.test.tsx

@@ -359,4 +359,73 @@ describe('Trigger.Align', () => {
       bottom: 400,
     });
   });
+
+  // e.g. adjustY + shiftX may make popup out but push back in screen
+  // which should keep flip
+  /*
+
+  *************      Screen
+  *   Popup   ********************
+  *************                  *
+     * Target *                  *
+     **********                  *
+              *                  *
+              ********************
+
+  To:
+
+                    Screen
+              ********************
+     **********                  *
+     * Target *                  *
+     ******************          *
+          *   Popup   *          *
+          ************************
+
+  */
+  it('out of screen should keep flip', async () => {
+    spanRect.x = -200;
+    spanRect.y = 0;
+
+    popupRect = {
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 200,
+    };
+
+    render(
+      <Trigger
+        popupVisible
+        popupPlacement="top"
+        builtinPlacements={{
+          top: {
+            points: ['bc', 'tc'],
+            overflow: {
+              shiftX: true,
+              adjustY: true,
+            },
+          },
+          bottom: {
+            points: ['tc', 'bc'],
+            overflow: {
+              shiftX: true,
+              adjustY: true,
+            },
+          },
+        }}
+        popup={<strong>trigger</strong>}
+      >
+        <span className="target" />
+      </Trigger>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(
+      document.querySelector('.rc-trigger-popup-placement-bottom'),
+    ).toBeTruthy();
+  });
 });