feat: support both overflow & shift

docs/demos/large-popup.md

@@ -0,0 +1,8 @@
+---
+title: Large Popup
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/large-popup.tsx"></code>

docs/examples/large-popup.tsx

@@ -0,0 +1,103 @@
+/* eslint no-console:0 */
+import Trigger from 'rc-trigger';
+import React from 'react';
+import '../../assets/index.less';
+
+const builtinPlacements = {
+  top: {
+    points: ['bc', 'tc'],
+    overflow: {
+      shiftY: true,
+      adjustY: true,
+    },
+    offset: [0, -10],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+    overflow: {
+      shiftY: true,
+      adjustY: true,
+    },
+    offset: [0, 10],
+    htmlRegion: 'scroll' as const,
+  },
+};
+
+export default () => {
+  const containerRef = React.useRef<HTMLDivElement>();
+
+  React.useEffect(() => {
+    console.clear();
+    containerRef.current.scrollTop = document.defaultView.innerHeight * 0.75;
+  }, []);
+
+  return (
+    <React.StrictMode>
+      <div
+        id="demo-root"
+        style={{ background: 'rgba(0, 0, 255, 0.1)', padding: 16 }}
+      >
+        <div
+          ref={containerRef}
+          style={{
+            border: '1px solid red',
+            padding: 10,
+            height: '100vh',
+            background: '#FFF',
+            position: 'relative',
+            overflow: 'auto',
+          }}
+        >
+          <div
+            style={{
+              height: '200vh',
+              paddingTop: `100vh`,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'start',
+            }}
+          >
+            <Trigger
+              arrow
+              // forceRender
+              action="click"
+              popup={
+                <div
+                  style={{
+                    background: 'yellow',
+                    border: '1px solid blue',
+                    width: 200,
+                    height: '75vh',
+                    opacity: 0.9,
+                  }}
+                >
+                  Popup 75vh
+                </div>
+              }
+              popupStyle={{ boxShadow: '0 0 5px red' }}
+              popupVisible
+              popupPlacement="top"
+              builtinPlacements={builtinPlacements}
+            >
+              <span
+                style={{
+                  background: 'green',
+                  color: '#FFF',
+                  paddingBlock: 30,
+                  paddingInline: 70,
+                  opacity: 0.9,
+                  transform: 'scale(0.6)',
+                  display: 'inline-block',
+                }}
+              >
+                Target
+              </span>
+            </Trigger>
+          </div>
+        </div>
+      </div>
+
+      {/* <div style={{ height: '100vh' }} /> */}
+    </React.StrictMode>
+  );
+};

src/hooks/useAlign.ts

@@ -286,7 +286,7 @@ export default function useAlign(
         nextOffsetY,
       );
 
-      // ================ Overflow =================
+      // ========================== Overflow ===========================
       const targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
       const popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
       const targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
@@ -302,10 +302,21 @@ export default function useAlign(
         return val >= 0;
       };
 
-      // >>>>>>>>>> Top & Bottom
-      const nextPopupY = popupRect.y + nextOffsetY;
-      const nextPopupBottom = nextPopupY + popupHeight;
+      // Prepare position
+      let nextPopupY: number;
+      let nextPopupBottom: number;
+      let nextPopupX: number;
+      let nextPopupRight: number;
+
+      function syncNextPopupPosition() {
+        nextPopupY = popupRect.y + nextOffsetY;
+        nextPopupBottom = nextPopupY + popupHeight;
+        nextPopupX = popupRect.x + nextOffsetX;
+        nextPopupRight = nextPopupX + popupWidth;
+      }
+      syncNextPopupPosition();
 
+      // >>>>>>>>>> Top & Bottom
       const needAdjustY = supportAdjust(adjustY);
 
       const sameTB = popupPoints[0] === targetPoints[0];
@@ -367,9 +378,6 @@ export default function useAlign(
       }
 
       // >>>>>>>>>> Left & Right
-      const nextPopupX = popupRect.x + nextOffsetX;
-      const nextPopupRight = nextPopupX + popupWidth;
-
       const needAdjustX = supportAdjust(adjustX);
 
       // >>>>> Flip
@@ -431,7 +439,9 @@ export default function useAlign(
         }
       }
 
-      // >>>>> Shift
+      // ============================ Shift ============================
+      syncNextPopupPosition();
+
       const numShiftX = shiftX === true ? 0 : shiftX;
       if (typeof numShiftX === 'number') {
         // Left
@@ -476,6 +486,7 @@ export default function useAlign(
         }
       }
 
+      // ============================ Arrow ============================
       // Arrow center align
       const popupLeft = popupRect.x + nextOffsetX;
       const popupRight = popupLeft + popupWidth;

tests/flipShift.test.tsx

@@ -0,0 +1,150 @@
+import { act, cleanup, render } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import Trigger from '../src';
+
+/*
+                        ***********
+    ******************  *         *
+    *   Placement    *  *  Popup  *
+    *   **********   *  *         *
+    *   * Target *   *  *         *
+    *   **********   *  ***********
+    *                *
+    *                *
+    ******************
+
+When `placement` is `top`. It will find should flip to bottom:
+
+    ******************
+    *                *
+    *   **********   *
+    *   * Target *   *
+    *   **********   *  *********** top: 200
+    *   Placement    *  *         *
+    *                *  *  Popup  *
+    ******************  *         *
+                        *         *
+                        ***********
+
+When `placement` is `bottom`. It will find should shift to show in viewport:
+
+    ******************
+    *                *
+    *   **********   *  *********** top: 100
+    *   * Target *   *  *         *
+    *   **********   *  *  Popup  *
+    *   Placement    *  *         *
+    *                *  *         *
+    ******************  ***********
+
+*/
+
+const builtinPlacements = {
+  top: {
+    points: ['bc', 'tc'],
+    overflow: {
+      adjustY: true,
+      shiftY: true,
+    },
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+    overflow: {
+      adjustY: true,
+      shiftY: true,
+    },
+  },
+  left: {
+    points: ['cr', 'cl'],
+    overflow: {
+      adjustX: true,
+      shiftX: true,
+    },
+  },
+  right: {
+    points: ['cl', 'cr'],
+    overflow: {
+      adjustX: true,
+      shiftX: true,
+    },
+  },
+};
+
+describe('Trigger.Flip+Shift', () => {
+  beforeAll(() => {
+    // Viewport size
+    spyElementPrototypes(HTMLElement, {
+      clientWidth: {
+        get: () => 400,
+      },
+      clientHeight: {
+        get: () => 400,
+      },
+    });
+
+    // Popup size
+    spyElementPrototypes(HTMLDivElement, {
+      getBoundingClientRect() {
+        return {
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 300,
+        };
+      },
+    });
+    spyElementPrototypes(HTMLSpanElement, {
+      getBoundingClientRect() {
+        return {
+          x: 0,
+          y: 100,
+          width: 100,
+          height: 100,
+        };
+      },
+    });
+    spyElementPrototypes(HTMLElement, {
+      offsetParent: {
+        get: () => document.body,
+      },
+    });
+  });
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.useRealTimers();
+  });
+
+  it('both work', async () => {
+    render(
+      <Trigger
+        popupVisible
+        popupPlacement="top"
+        builtinPlacements={builtinPlacements}
+        popup={<strong>trigger</strong>}
+      >
+        <span className="target" />
+      </Trigger>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    console.log(document.body.innerHTML);
+
+    expect(
+      document.querySelector('.rc-trigger-popup-placement-bottom'),
+    ).toBeTruthy();
+
+    expect(
+      document.querySelector('.rc-trigger-popup-placement-bottom'),
+    ).toHaveStyle({
+      top: '100px',
+    });
+  });
+});