Issue 1500: allows useOverlayPosition to take a prop maxHeight (#2673)

Author: sttwarrior

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

@@ -58,7 +58,8 @@ interface PositionOpts {
   shouldFlip: boolean,
   boundaryElement: HTMLElement,
   offset: number,
-  crossOffset: number
+  crossOffset: number,
+  maxHeight?: number
 }
 
 export interface PositionResult {
@@ -284,7 +285,8 @@ export function calculatePositionInternal(
   containerOffsetWithBoundary: Offset,
   offset: number,
   crossOffset: number,
-  isContainerPositioned: boolean
+  isContainerPositioned: boolean,
+  userSetMaxHeight?: number
 ): PositionResult {
   let placementInfo = parsePlacement(placementInput);
   let {size, crossAxis, crossSize, placement, crossPlacement} = placementInfo;
@@ -332,6 +334,10 @@ export function calculatePositionInternal(
     padding
   );
 
+  if (userSetMaxHeight && userSetMaxHeight < maxHeight) {
+    maxHeight = userSetMaxHeight;
+  }
+
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
 
   position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
@@ -363,7 +369,8 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     shouldFlip,
     boundaryElement,
     offset,
-    crossOffset
+    crossOffset,
+    maxHeight
   } = opts;
 
   let container = overlayNode.offsetParent || document.body;
@@ -398,6 +405,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     containerOffsetWithBoundary,
     offset,
     crossOffset,
-    isContainerPositioned
+    isContainerPositioned,
+    maxHeight
   );
 }

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

@@ -42,7 +42,12 @@ interface AriaPositionProps extends PositionProps {
    */
   shouldUpdatePosition?: boolean,
   /** Handler that is called when the overlay should close. */
-  onClose?: () => void
+  onClose?: () => void,
+  /**
+   * The maxHeight specified for the overlay element. 
+   * By default, it will take all space up to the current viewport height.
+   */
+  maxHeight?: number
 }
 
 interface PositionAria {
@@ -77,7 +82,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     crossOffset = 0,
     shouldUpdatePosition = true,
     isOpen = true,
-    onClose
+    onClose,
+    maxHeight
   } = props;
   let [position, setPosition] = useState<PositionResult>({
     position: {},
@@ -99,7 +105,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     offset,
     crossOffset,
     isOpen,
-    direction
+    direction,
+    maxHeight
   ];
 
   let updatePosition = useCallback(() => {
@@ -117,7 +124,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         shouldFlip,
         boundaryElement,
         offset,
-        crossOffset
+        crossOffset,
+        maxHeight
       })
     );
   }, deps);

packages/@react-aria/overlays/stories/UseOverlayPosition.stories.tsx

@@ -20,9 +20,10 @@ import {useOverlayTriggerState} from '@react-stately/overlays';
 
 function Trigger(props: {
   withPortal: boolean,
-  placement: Placement
+  placement: Placement,
+  maxHeight?: number
 }) {
-  const {withPortal, placement} = props;
+  const {withPortal, placement, maxHeight} = props;
   const targetRef = React.useRef<HTMLButtonElement>(null);
   const overlayRef = React.useRef<HTMLDivElement>(null);
   const state = useOverlayTriggerState({
@@ -37,7 +38,8 @@ function Trigger(props: {
     shouldFlip: false,
     isOpen: state.isOpen,
     offset: 10,
-    placement
+    placement,
+    maxHeight
   });
 
   let overlay = (
@@ -56,11 +58,10 @@ function Trigger(props: {
           margin: 0,
           listStyleType: 'none'
         }}>
-        <li>Hello</li>
-        <li>Hello</li>
-        <li>Hello</li>
-        <li>Hello</li>
-        <li>Hello</li>
+        {maxHeight
+          ? [...Array(20)].map((_, i) => <li>Hello {i}</li>)
+          : [...Array(5)].map((_, i) => <li>Hello {i}</li>)
+        }
       </ul>
     </div>
   );
@@ -80,4 +81,6 @@ storiesOf('UseOverlayPosition', module)
   .add('document.body container bottom', () => <Trigger withPortal placement="bottom" />)
   .add('document.body container top', () => <Trigger withPortal placement="top" />)
   .add('positioned container bottom', () => <Trigger withPortal={false} placement="bottom" />)
-  .add('positioned container top', () => <Trigger withPortal={false} placement="top" />);
+  .add('positioned container top', () => <Trigger withPortal={false} placement="top" />)
+  .add('maxHeight=200 container bottom', () => <Trigger withPortal maxHeight={200} placement="bottom" />)
+  .add('maxHeight=200 container top', () => <Trigger withPortal maxHeight={200} placement="top" />);

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

@@ -129,6 +129,25 @@ describe('useOverlayPosition', function () {
     `);
   });
 
+  it('should update the overlay\'s maxHeight by the given one if it\'s smaller than available viewport height.', function () {
+    let res = render(<Example maxHeight={450} />);
+    let overlay = res.getByTestId('overlay');
+
+    expect(overlay).toHaveStyle(`
+      left: 12px;
+      top: 350px;
+      max-height: 406px;
+    `);
+
+    res.rerender(<Example maxHeight={150} />);
+
+    expect(overlay).toHaveStyle(`
+      left: 12px;
+      top: 350px;
+      max-height: 150px;
+    `);
+  });
+
   it('should close the overlay when the trigger scrolls', function () {
     let onClose = jest.fn();
     let res = render(