[AP-5625] Add optional popover and tooltip adjustment to viewport size (#751)

* add popover adjustment to viewport

* fix knip

* add functionality to tooltip

* add description to properties

* attach listener only when option enabled

* some refactoring

* pass props in navigation bar

Author: mmolis1

README.md

@@ -105,8 +105,8 @@ When you create a PR against the `master` branch, Amplify creates a new deployme
 Below versions of Node & npm are required:
 
 ```bash
-  "node": ">=18.12.0",
-  "npm": ">=8.19.2"
+  "node": ">=22.14.0",
+  "npm": ">=10.9.2"
 ```
 
 Run `nvm use` to use supported version.

src/components/extendedPopover/ExtendedPopover.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import styled from "styled-components";
-import { useDisclosure, useEvent } from "../../hooks";
+import { useDisclosure, useEvent, useViewportDimensions } from "../../hooks";
 import theme from "../../theme";
 import {
   Placement,
@@ -24,6 +24,7 @@ type Props = {
   clickOutsideToClose?: boolean;
   triggerOn?: ExtendedPopoverAction;
   closeOn?: ExtendedPopoverAction;
+  adjustPositionToViewportSize?: boolean;
 };
 
 export function ExtendedPopover({
@@ -39,6 +40,7 @@ export function ExtendedPopover({
   margin = DEFAULT_MARGIN,
   triggerOn = "click",
   closeOn = "click",
+  adjustPositionToViewportSize = false,
 }: Props) {
   const triggerRef = React.useRef<HTMLDivElement>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -49,6 +51,10 @@ export function ExtendedPopover({
   const [triggerDimensions, setTriggerDimensions] =
     React.useState<DOMRect | null>(null);
 
+  const viewportDimensions = useViewportDimensions(
+    adjustPositionToViewportSize
+  );
+
   React.useEffect(() => {
     if (
       isOpen &&
@@ -107,8 +113,10 @@ export function ExtendedPopover({
   const style = getStyle({
     wrapperDimensions: triggerDimensions,
     tooltipDimensions: contentDimensions,
+    viewportDimensions,
     placement,
     position,
+    adjustPositionToViewportSize,
   });
 
   return (

src/components/extendedPopover/Props.md

@@ -4,3 +4,4 @@
 > - `position`: `start | end | center` {optional} relative shift of popover placement compared to parent element, defaults to `start`
 > - `margin`: `{ top?: number, bottom?: number, left?: number, right?: number }` {optional} margin around popover, defaults to `5px` for all properties
 > - `clickOutsideToClose`: `boolean` {optional} should popover be closed when clicked outside, defaults to `true`
+> - `adjustPositionToViewportSize`: `boolean` {optional} should popover position be adjusted to viewport size if calculated position is outside of viewport dimensions, defaults to `false`

src/components/extendedTooltip/ExtendedTooltip.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import styled, { css } from "styled-components";
-import { useEvent } from "../../hooks";
+import { useEvent, useViewportDimensions } from "../../hooks";
 import theme from "../../theme";
 import {
   DEFAULT_MARGIN,
@@ -29,6 +29,7 @@ export type ExtendedTooltipProps = Timeout & {
   status?: Status;
   zIndex?: number;
   display?: Display;
+  adjustPositionToViewportSize?: boolean;
 };
 
 export function ExtendedTooltip({
@@ -42,10 +43,15 @@ export function ExtendedTooltip({
   margin = DEFAULT_MARGIN,
   zIndex = theme.zindex.sticky,
   display,
+  adjustPositionToViewportSize = false,
 }: ExtendedTooltipProps) {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
   const tooltipRef = React.useRef<HTMLDivElement>(null);
 
+  const viewportDimensions = useViewportDimensions(
+    adjustPositionToViewportSize
+  );
+
   const { isHovered, updateIsHovered } = useTooltipHover();
 
   const [tooltipDimensions, setTooltipDimensions] =
@@ -78,9 +84,11 @@ export function ExtendedTooltip({
     ...getStyle({
       wrapperDimensions,
       tooltipDimensions,
+      viewportDimensions,
       placement,
       position,
       margin,
+      adjustPositionToViewportSize,
     }),
     zIndex,
   };

src/components/extendedTooltip/Props.md

@@ -6,3 +6,4 @@
 > - `showTimeout`: `number` {optional} delay time in miliseconds for opening of tooltip
 > - `hideTimeout`: `number` {optional} delay time in miliseconds for closing of tooltip
 > - `zIndex`: `number` {optional} z-index of the tooltip (default is whatever theme.zindex.sticky is set to)
+> - `adjustPositionToViewportSize`: `boolean` {optional} should popover position be adjusted to viewport size if calculated position is outside of viewport dimensions, defaults to `false`

src/components/navigationBar/types.ts

@@ -28,6 +28,7 @@ export type PopoverConfig = {
   triggerOn: ExtendedPopoverAction;
   closeOn: ExtendedPopoverAction;
   position: Position;
+  adjustPositionToViewportSize?: boolean;
 };
 
 export type ExpandableConfig = {

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from "./useClickOutside";
 export * from "./useEvent";
 export * from "./useDisclosure";
+export * from "./useViewportDimensions";

src/hooks/useViewportDimensions.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { getViewportDimensions } from "../utils/position";
+
+export function useViewportDimensions(addResizeListener: boolean) {
+  const [viewportDimensions, setViewportDimensions] = useState(
+    getViewportDimensions
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setViewportDimensions(getViewportDimensions());
+    }
+    if (addResizeListener) {
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+
+    return () => {};
+  }, [addResizeListener]);
+  return viewportDimensions;
+}

src/utils/position.ts

@@ -11,12 +11,19 @@ export type Margin = {
   right?: number;
 };
 
+type ViewportDimensions = {
+  width: number;
+  height: number;
+};
+
 type StyleProps = {
   wrapperDimensions: DOMRect | null;
   tooltipDimensions: DOMRect | null;
+  viewportDimensions: ViewportDimensions;
   placement: Placement;
   position: Position;
   margin?: Margin;
+  adjustPositionToViewportSize?: boolean;
 };
 
 type ReqiuredStyleProps = StyleProps & {
@@ -27,26 +34,43 @@ type ReqiuredStyleProps = StyleProps & {
 export function getStyle({
   wrapperDimensions,
   tooltipDimensions,
+  viewportDimensions,
   placement,
   position,
   margin,
+  adjustPositionToViewportSize,
 }: StyleProps) {
   if (wrapperDimensions != null && tooltipDimensions != null) {
     const top = getTop({
       wrapperDimensions,
       tooltipDimensions,
+      viewportDimensions,
       placement,
       position,
       margin,
     });
     const left = getLeft({
       wrapperDimensions,
       tooltipDimensions,
+      viewportDimensions,
       placement,
       position,
       margin,
     });
 
+    if (adjustPositionToViewportSize) {
+      const adjustToViewport = adjustPositionToViewportDimensions(
+        { top, left },
+        tooltipDimensions,
+        viewportDimensions
+      );
+
+      const adjustedTop = top + adjustToViewport.top;
+      const adjustedLeft = left + adjustToViewport.left;
+
+      return { top: adjustedTop, left: adjustedLeft };
+    }
+
     return { top, left };
   }
 
@@ -155,6 +179,68 @@ function getVerticalAlignmentToEnd(
   );
 }
 
+function adjustPositionToViewportDimensions(
+  style: { top: number; left: number },
+  tooltipDimensions: DOMRect,
+  viewportDimensions: ViewportDimensions
+) {
+  const adjustTop = adjustTopToViewportDimensions(
+    style,
+    tooltipDimensions,
+    viewportDimensions
+  );
+  const adjustLeft = adjustLeftToViewportDimensions(
+    style,
+    tooltipDimensions,
+    viewportDimensions
+  );
+
+  return { top: adjustTop, left: adjustLeft };
+}
+
+function adjustTopToViewportDimensions(
+  style: { top: number; left: number },
+  tooltipDimensions: DOMRect,
+  viewportDimensions: ViewportDimensions
+) {
+  if (style.top < 0) {
+    return 0 - style.top;
+  }
+
+  const tooltipBottom = style.top + tooltipDimensions.height;
+
+  if (tooltipBottom > viewportDimensions.height) {
+    return viewportDimensions.height - tooltipBottom;
+  }
+
+  return 0;
+}
+
+function adjustLeftToViewportDimensions(
+  style: { top: number; left: number },
+  tooltipDimensions: DOMRect,
+  viewportDimensions: ViewportDimensions
+) {
+  if (style.left < 0) {
+    return 0 - style.left;
+  }
+
+  const tooltipRight = style.left + tooltipDimensions.width;
+
+  if (tooltipRight > viewportDimensions.width) {
+    return viewportDimensions.width - tooltipRight;
+  }
+
+  return 0;
+}
+
+export function getViewportDimensions() {
+  return {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight,
+  };
+}
+
 export const DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,