chore: adjust visible area (#401)

* chore: adjust visible area

* test: add test case

Author: zombieJ

src/hooks/useAlign.ts

@@ -555,43 +555,43 @@ export default function useAlign(
       const numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
-        if (nextPopupX < visibleArea.left) {
-          nextOffsetX -= nextPopupX - visibleArea.left;
+        if (nextPopupX < visibleRegionArea.left) {
+          nextOffsetX -= nextPopupX - visibleRegionArea.left;
 
-          if (targetRect.x + targetWidth < visibleArea.left + numShiftX) {
+          if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
             nextOffsetX +=
-              targetRect.x - visibleArea.left + targetWidth - numShiftX;
+              targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
           }
         }
 
         // Right
-        if (nextPopupRight > visibleArea.right) {
-          nextOffsetX -= nextPopupRight - visibleArea.right;
+        if (nextPopupRight > visibleRegionArea.right) {
+          nextOffsetX -= nextPopupRight - visibleRegionArea.right;
 
-          if (targetRect.x > visibleArea.right - numShiftX) {
-            nextOffsetX += targetRect.x - visibleArea.right + numShiftX;
+          if (targetRect.x > visibleRegionArea.right - numShiftX) {
+            nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
           }
         }
       }
 
       const numShiftY = shiftY === true ? 0 : shiftY;
       if (typeof numShiftY === 'number') {
         // Top
-        if (nextPopupY < visibleArea.top) {
-          nextOffsetY -= nextPopupY - visibleArea.top;
+        if (nextPopupY < visibleRegionArea.top) {
+          nextOffsetY -= nextPopupY - visibleRegionArea.top;
 
-          if (targetRect.y + targetHeight < visibleArea.top + numShiftY) {
+          if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
             nextOffsetY +=
-              targetRect.y - visibleArea.top + targetHeight - numShiftY;
+              targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
           }
         }
 
         // Bottom
-        if (nextPopupBottom > visibleArea.bottom) {
-          nextOffsetY -= nextPopupBottom - visibleArea.bottom;
+        if (nextPopupBottom > visibleRegionArea.bottom) {
+          nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom;
 
-          if (targetRect.y > visibleArea.bottom - numShiftY) {
-            nextOffsetY += targetRect.y - visibleArea.bottom + numShiftY;
+          if (targetRect.y > visibleRegionArea.bottom - numShiftY) {
+            nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
           }
         }
       }

tests/flipShift.test.tsx

@@ -48,6 +48,13 @@ const builtinPlacements = {
       shiftY: true,
     },
   },
+  topShift: {
+    points: ['bc', 'tc'],
+    overflow: {
+      shiftX: true,
+    },
+    htmlRegion: 'visibleFirst' as const,
+  },
   bottom: {
     points: ['tc', 'bc'],
     overflow: {
@@ -72,7 +79,24 @@ const builtinPlacements = {
 };
 
 describe('Trigger.Flip+Shift', () => {
+  let spanRect = { x: 0, y: 0, width: 0, height: 0 };
+
+  beforeEach(() => {
+    spanRect = {
+      x: 0,
+      y: 100,
+      width: 100,
+      height: 100,
+    };
+
+    document.documentElement.scrollLeft = 0;
+  });
+
   beforeAll(() => {
+    jest
+      .spyOn(document.documentElement, 'scrollWidth', 'get')
+      .mockReturnValue(1000);
+
     // Viewport size
     spyElementPrototypes(HTMLElement, {
       clientWidth: {
@@ -96,12 +120,7 @@ describe('Trigger.Flip+Shift', () => {
     });
     spyElementPrototypes(HTMLSpanElement, {
       getBoundingClientRect() {
-        return {
-          x: 0,
-          y: 100,
-          width: 100,
-          height: 100,
-        };
+        return spanRect;
       },
     });
     spyElementPrototypes(HTMLElement, {
@@ -146,4 +165,29 @@ describe('Trigger.Flip+Shift', () => {
       top: '100px',
     });
   });
+
+  it('top with visibleFirst region', async () => {
+    spanRect.x = -1000;
+    document.documentElement.scrollLeft = 500;
+
+    render(
+      <Trigger
+        popupVisible
+        popupPlacement="topShift"
+        builtinPlacements={builtinPlacements}
+        popup={<strong>trigger</strong>}
+      >
+        <span className="target" />
+      </Trigger>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    // Just need check left < 0
+    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+      left: '-900px',
+    });
+  });
 });