Revert "Repositioning the popover and arrow position when the trigger is at the window edge (#2842)" (#3445)

This reverts commit b88d367.

Author: LFDanLu

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -313,27 +313,6 @@ export function calculatePositionInternal(
     }
   }
 
-  let boundaryLimits = {
-    top: boundaryDimensions.top + boundaryDimensions.scroll.top,
-    bottom: boundaryDimensions.top + boundaryDimensions.scroll.top + boundaryDimensions.height,
-    left: boundaryDimensions.left + boundaryDimensions.scroll.left,
-    right: boundaryDimensions.left + boundaryDimensions.scroll.left + boundaryDimensions.width
-  };
-
-  // for popover triggers close to the edge decrease the padding
-  if (placementInfo.placement === 'left' || placementInfo.placement === 'right') {
-    let centerOfButtonVertical = childOffset.top + childOffset.height / 2;
-    // Really it should be center of button center + padding + half of arrow width > boundary but we don't have access to arrow dimensions
-    if (centerOfButtonVertical + padding * 2 > boundaryLimits.bottom || centerOfButtonVertical - padding * 2 < boundaryLimits.top) {
-      padding = 6; // setting the padding to 6px as defined by Spectrum for this case
-    }
-  } else if (placementInfo.placement === 'top' || placementInfo.placement === 'bottom') {
-    let centerOfButtonHorizontal = childOffset.left + childOffset.width / 2;
-    if (centerOfButtonHorizontal + padding * 2 > boundaryLimits.right || centerOfButtonHorizontal - padding * 2 < boundaryLimits.left) {
-      padding = 6; // setting the padding to 6px as defined by Spectrum for this case
-    }
-  }
-
   let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
   position[crossAxis] += delta;
 

packages/@react-aria/overlays/src/index.ts

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-export {DEFAULT_MODAL_PADDING, useOverlayPosition} from './useOverlayPosition';
+export {useOverlayPosition} from './useOverlayPosition';
 export {useOverlay} from './useOverlay';
 export {useOverlayTrigger} from './useOverlayTrigger';
 export {usePreventScroll} from './usePreventScroll';

packages/@react-aria/overlays/src/useOverlayPosition.ts

@@ -65,8 +65,6 @@ export interface PositionAria {
 // @ts-ignore
 let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 
-export const DEFAULT_MODAL_PADDING = 12;
-
 /**
  * Handles positioning overlays like popovers and menus relative to a trigger
  * element, and updating the position when the window resizes.
@@ -78,7 +76,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     overlayRef,
     scrollRef = overlayRef,
     placement = 'bottom' as Placement,
-    containerPadding = DEFAULT_MODAL_PADDING,
+    containerPadding = 12,
     shouldFlip = true,
     boundaryElement = typeof document !== 'undefined' ? document.body : null,
     offset = 0,

packages/@react-aria/overlays/test/calculatePosition.test.js

@@ -192,96 +192,96 @@ describe('calculatePosition', function () {
     {
       placement: 'left',
       noOffset: [50, 200, undefined, 100, 350],
-      offsetBefore: [-200, 6, undefined, 44, 588],
-      offsetAfter: [300, 394, undefined, 156, 200],
+      offsetBefore: [-200, 50, undefined, 0, 500],
+      offsetAfter: [300, 350, undefined, 200, 200],
       crossAxisOffset: [50, 210, undefined, 90, 340],
       mainAxisOffset: [40, 200, undefined, 100, 350]
     },
     {
       placement: 'left top',
       noOffset: [50, 250, undefined, 50, 300],
-      offsetBefore: [-200, 6, undefined, 44, 588],
-      offsetAfter: [300, 394, undefined, 156, 200],
+      offsetBefore: [-200, 50, undefined, 0, 500],
+      offsetAfter: [300, 350, undefined, 200, 200],
       crossAxisOffset: [50, 260, undefined, 40, 290],
       mainAxisOffset: [40, 250, undefined, 50, 300]
     },
     {
       placement: 'left bottom',
       noOffset: [50, 150, undefined, 150, 400],
-      offsetBefore: [-200, 6, undefined, 44, 588],
-      offsetAfter: [300, 394, undefined, 156, 200],
+      offsetBefore: [-200, 50, undefined, 0, 500],
+      offsetAfter: [300, 350, undefined, 200, 200],
       crossAxisOffset: [50, 160, undefined, 140, 390],
       mainAxisOffset: [40, 150, undefined, 150, 400]
     },
     {
       placement: 'top',
       noOffset: [200, 50, 100, undefined, 200],
-      offsetBefore: [6, -200, 44, undefined, 0],
-      offsetAfter: [394, 300, 156, undefined, 494],
+      offsetBefore: [50, -200, 0, undefined, 0],
+      offsetAfter: [350, 300, 200, undefined, 450],
       mainAxisOffset: [200, 40, 100, undefined, 200],
       crossAxisOffset: [210, 50, 90, undefined, 200]
     },
     {
       placement: 'top left',
       noOffset: [250, 50, 50, undefined, 200],
-      offsetBefore: [6, -200, 44, undefined, 0],
-      offsetAfter: [394, 300, 156, undefined, 494],
+      offsetBefore: [50, -200, 0, undefined, 0],
+      offsetAfter: [350, 300, 200, undefined, 450],
       mainAxisOffset: [250, 40, 50, undefined, 200],
       crossAxisOffset: [260, 50, 40, undefined, 200]
     },
     {
       placement: 'top right',
       noOffset: [150, 50, 150, undefined, 200],
-      offsetBefore: [6, -200, 44, undefined, 0],
-      offsetAfter: [394, 300, 156, undefined, 494],
+      offsetBefore: [50, -200, 0, undefined, 0],
+      offsetAfter: [350, 300, 200, undefined, 450],
       mainAxisOffset: [150, 40, 150, undefined, 200],
       crossAxisOffset: [160, 50, 140, undefined, 200]
     },
     {
       placement: 'bottom',
       noOffset: [200, 350, 100, undefined, 200],
-      offsetBefore: [6, 100, 44, undefined, 494],
-      offsetAfter: [394, 600, 156, undefined, 0],
+      offsetBefore: [50, 100, 0, undefined, 450],
+      offsetAfter: [350, 600, 200, undefined, 0],
       mainAxisOffset: [200, 360, 100, undefined, 190],
       crossAxisOffset: [210, 350, 90, undefined, 200]
     },
     {
       placement: 'bottom left',
       noOffset: [250, 350, 50, undefined, 200],
-      offsetBefore: [6, 100, 44, undefined, 494],
-      offsetAfter: [394, 600, 156, undefined, 0],
+      offsetBefore: [50, 100, 0, undefined, 450],
+      offsetAfter: [350, 600, 200, undefined, 0],
       mainAxisOffset: [250, 360, 50, undefined, 190],
       crossAxisOffset: [260, 350, 40, undefined, 200]
     },
     {
       placement: 'bottom right',
       noOffset: [150, 350, 150, undefined, 200],
-      offsetBefore: [6, 100, 44, undefined, 494],
-      offsetAfter: [394, 600, 156, undefined, 0],
+      offsetBefore: [50, 100, 0, undefined, 450],
+      offsetAfter: [350, 600, 200, undefined, 0],
       mainAxisOffset: [150, 360, 150, undefined, 190],
       crossAxisOffset: [160, 350, 140, undefined, 200]
     },
     {
       placement: 'right',
       noOffset: [350, 200, undefined, 100, 350],
-      offsetBefore: [100, 6, undefined, 44, 588],
-      offsetAfter: [600, 394, undefined, 156, 200],
+      offsetBefore: [100, 50, undefined, 0, 500],
+      offsetAfter: [600, 350, undefined, 200, 200],
       crossAxisOffset: [350, 210, undefined, 90, 340],
       mainAxisOffset: [360, 200, undefined, 100, 350]
     },
     {
       placement: 'right top',
       noOffset: [350, 250, undefined, 50, 300],
-      offsetBefore: [100, 6, undefined, 44, 588],
-      offsetAfter: [600, 394, undefined, 156, 200],
+      offsetBefore: [100, 50, undefined, 0, 500],
+      offsetAfter: [600, 350, undefined, 200, 200],
       crossAxisOffset: [350, 260, undefined, 40, 290],
       mainAxisOffset: [360, 250, undefined, 50, 300]
     },
     {
       placement: 'right bottom',
       noOffset: [350, 150, undefined, 150, 400],
-      offsetBefore: [100, 6, undefined, 44, 588],
-      offsetAfter: [600, 394, undefined, 156, 200],
+      offsetBefore: [100, 50, undefined, 0, 500],
+      offsetAfter: [600, 350, undefined, 200, 200],
       crossAxisOffset: [350, 160, undefined, 140, 390],
       mainAxisOffset: [360, 150, undefined, 150, 400]
     }
@@ -373,93 +373,4 @@ describe('calculatePosition', function () {
       document.body.removeChild(target);
     });
   });
-
-  describe('moves popover arrow', () => {
-    it('checks if popover positioned within padding and has popover arrow', () => {
-      const target = createElementWithDimensions('div', {top: 50, left: 50, width: 50, height: 25});
-      const overlayNode = createElementWithDimensions('div', overlaySize);
-      const container = createElementWithDimensions('div', containerDimensions);
-
-      document.documentElement.appendChild(target);
-      document.documentElement.appendChild(container);
-      document.documentElement.appendChild(overlayNode);
-
-      let {position: {top: positionTop}, arrowOffsetLeft, arrowOffsetTop} = calculatePosition({
-        placement: 'right',
-        targetNode: target,
-        overlayNode,
-        scrollNode: overlayNode,
-        padding: 12,
-        shouldFlip: false,
-        boundaryElement: container,
-        offset: 0,
-        crossOffset: 0
-      });
-      expect(positionTop).toBe(12);
-      expect(arrowOffsetTop).toBe(50.5);
-      expect(arrowOffsetLeft).toBe(undefined);
-
-      document.documentElement.removeChild(target);
-      document.documentElement.removeChild(container);
-      document.documentElement.removeChild(overlayNode);
-    });
-
-    it('checks if popover moves to padding 6 and arrow at popover edge', () => {
-      const target = createElementWithDimensions('div', {top: 0, left: 50, width: 50, height: 25});
-      const overlayNode = createElementWithDimensions('div', overlaySize);
-      const container = createElementWithDimensions('div', containerDimensions);
-
-      document.documentElement.appendChild(target);
-      document.documentElement.appendChild(overlayNode);
-      document.documentElement.appendChild(container);
-
-      let {position: {top: positionTop}, arrowOffsetLeft, arrowOffsetTop} = calculatePosition({
-        placement: 'right',
-        targetNode: target,
-        overlayNode,
-        scrollNode: overlayNode,
-        padding: 12,
-        shouldFlip: false,
-        boundaryElement: container,
-        offset: 0,
-        crossOffset: 0
-      });
-      expect(positionTop).toBe(6);
-      expect(arrowOffsetTop).toBe(6.5);
-      expect(arrowOffsetLeft).toBe(undefined);
-
-      document.documentElement.removeChild(target);
-      document.documentElement.removeChild(container);
-      document.documentElement.removeChild(overlayNode);
-    });
-
-    it('checks if popover moves to padding 6 and popover arrow is removed', () => {
-      const target = createElementWithDimensions('div', {top: -10, left: 50, width: 50, height: 25});
-      const overlayNode = createElementWithDimensions('div', overlaySize);
-      const container = createElementWithDimensions('div', containerDimensions);
-
-      document.documentElement.appendChild(target);
-      document.documentElement.appendChild(overlayNode);
-      document.documentElement.appendChild(container);
-
-      let {position: {top: positionTop}, arrowOffsetLeft, arrowOffsetTop} = calculatePosition({
-        placement: 'left',
-        targetNode: target,
-        overlayNode,
-        scrollNode: overlayNode,
-        padding: 12,
-        shouldFlip: false,
-        boundaryElement: container,
-        offset: 0,
-        crossOffset: 0
-      });
-      expect(positionTop).toBe(6);
-      expect(arrowOffsetTop).toBe(-3.5);
-      expect(arrowOffsetLeft).toBe(undefined);
-
-      document.documentElement.removeChild(target);
-      document.documentElement.removeChild(container);
-      document.documentElement.removeChild(overlayNode);
-    });
-  });
 });