@oneuptime/common 14.0.8 → 14.0.9

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -5,11 +5,15 @@ import React, {
   useEffect,
   useId,
   useImperativeHandle,
+  useLayoutEffect,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 import IconProp from "../../../Types/Icon/IconProp";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
+import { consumePressForAnchoredPopup } from "../../Types/LayeredDismissal";
 import Button, { ButtonStyleType } from "../Button/Button";
+import DROPDOWN_MENU_Z_INDEX from "../Dropdown/DropdownMenuZIndex";
 
 export interface ComponentProps {
   children: Array<ReactElement>;
@@ -41,8 +45,54 @@ export interface ComponentProps {
    * know they are at the bottom say so; everything else keeps opening down.
    */
   isOpeningUpwards?: boolean | undefined;
+  /*
+   * Render the open menu into document.body, `fixed` against its trigger,
+   * instead of absolutely inside the trigger's wrapper. For triggers that live
+   * inside a clipping container - a table row sits in an `overflow-x-auto`
+   * scroller, so an absolute menu under its last row is cut off or scrolls the
+   * table instead of showing. Placement follows the other portalled popups:
+   * below the trigger and right-aligned to it, flipped above when there is not
+   * room below, clamped to the viewport.
+   */
+  isMenuPortaled?: boolean | undefined;
+}
+
+// Matches the mt-2 / mb-2 gap the in-place menu keeps from its trigger.
+const PORTALED_MENU_GAP_PX: number = 8;
+const PORTALED_MENU_VIEWPORT_PADDING_PX: number = 8;
+// w-56, for the first measurement before the menu has a width of its own.
+const PORTALED_MENU_FALLBACK_WIDTH_PX: number = 224;
+
+/*
+ * Exactly one of left / right is set, and exactly one of top / bottom. Right
+ * is the usual anchor: it lines the menu's right edge up with the trigger's
+ * whatever width the menu turns out to have.
+ */
+interface PortaledMenuPosition {
+  top: number | undefined;
+  bottom: number | undefined;
+  left: number | undefined;
+  right: number | undefined;
+  isAbove: boolean;
 }
 
+/*
+ * A fullscreen element hides everything outside it, so a menu opened from
+ * inside one has to be portalled into it rather than into the body.
+ */
+const getMenuPortalTarget: () => HTMLElement | null =
+  (): HTMLElement | null => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+
+    const fullscreenElement: Element | null = document.fullscreenElement;
+
+    return fullscreenElement instanceof HTMLElement
+      ? fullscreenElement
+      : document.body;
+  };
+
 const isMenuItemDisabled: (item: HTMLElement) => boolean = (
   item: HTMLElement,
 ): boolean => {
@@ -67,6 +117,9 @@ const MoreMenu: React.ForwardRefExoticComponent<
     const { ref, isComponentVisible, setIsComponentVisible } =
       useComponentOutsideClick(false);
     const [focusedIndex, setFocusedIndex] = useState<number>(-1);
+    const isMenuPortaled: boolean = Boolean(props.isMenuPortaled);
+    const [portaledMenuPosition, setPortaledMenuPosition] =
+      useState<PortaledMenuPosition | null>(null);
 
     /*
      * Menu sections and dividers are valid top-level children, so the list of
@@ -103,7 +156,15 @@ const MoreMenu: React.ForwardRefExoticComponent<
         return Array.from(
           menuElement.querySelectorAll<HTMLElement>('[role="menuitem"]'),
         ).filter((item: HTMLElement) => {
-          return !isMenuItemDisabled(item);
+          /*
+           * A locked item that explains itself (MoreMenuItem with a tooltip)
+           * stays in the roving focus so its reason can be reached from the
+           * keyboard; activating it is still refused below.
+           */
+          return (
+            !isMenuItemDisabled(item) ||
+            item.getAttribute("data-focusable-when-disabled") === "true"
+          );
         });
       }, [ref]);
 
@@ -169,6 +230,195 @@ const MoreMenu: React.ForwardRefExoticComponent<
       }
     }, [props.isDisabled, isComponentVisible, setIsComponentVisible]);
 
+    const updatePortaledMenuPosition: () => void = useCallback((): void => {
+      if (typeof window === "undefined") {
+        return;
+      }
+
+      const trigger: HTMLElement | null = document.getElementById(buttonId);
+
+      if (!trigger) {
+        return;
+      }
+
+      const menuElement: HTMLElement | null = ref.current as HTMLElement | null;
+      const triggerRect: DOMRect = trigger.getBoundingClientRect();
+      const menuWidth: number =
+        menuElement?.offsetWidth || PORTALED_MENU_FALLBACK_WIDTH_PX;
+      const menuHeight: number = menuElement?.offsetHeight || 0;
+
+      /*
+       * `right` on a fixed element is measured from the edge of the layout
+       * viewport, which stops short of a classic vertical scrollbar - so the
+       * width that matters is clientWidth, not innerWidth.
+       */
+      const viewportWidth: number =
+        document.documentElement.clientWidth || window.innerWidth;
+      // The same holds for `bottom` and a classic horizontal scrollbar.
+      const viewportHeight: number =
+        document.documentElement.clientHeight || window.innerHeight;
+
+      /*
+       * Right edge to right edge, like the in-place menu's `right-0`, and
+       * anchored by that right edge rather than by a left computed from the
+       * menu's width. The width is not settled at first measurement: the
+       * Tailwind runtime the dashboards load generates the rule for a class
+       * the page has not used yet a moment AFTER the element carrying it
+       * mounts, so the first width read is the unstyled one. A left-anchored
+       * menu then grew rightwards off the screen; a right-anchored one just
+       * grows leftwards into place.
+       */
+      const isOverflowingLeft: boolean =
+        triggerRect.right - menuWidth < PORTALED_MENU_VIEWPORT_PADDING_PX;
+
+      const right: number | undefined = isOverflowingLeft
+        ? undefined
+        : Math.max(
+            viewportWidth - triggerRect.right,
+            PORTALED_MENU_VIEWPORT_PADDING_PX,
+          );
+      /*
+       * Without room to hang leftwards - a trigger near the left edge, as on
+       * the mobile cards - the menu hangs rightwards from the trigger's own
+       * left edge instead, still kept inside the viewport.
+       */
+      const left: number | undefined = isOverflowingLeft
+        ? Math.max(
+            Math.min(
+              triggerRect.left,
+              viewportWidth - PORTALED_MENU_VIEWPORT_PADDING_PX - menuWidth,
+            ),
+            PORTALED_MENU_VIEWPORT_PADDING_PX,
+          )
+        : undefined;
+
+      const spaceBelow: number =
+        viewportHeight -
+        triggerRect.bottom -
+        PORTALED_MENU_GAP_PX -
+        PORTALED_MENU_VIEWPORT_PADDING_PX;
+      const spaceAbove: number =
+        triggerRect.top -
+        PORTALED_MENU_GAP_PX -
+        PORTALED_MENU_VIEWPORT_PADDING_PX;
+      const isAbove: boolean = props.isOpeningUpwards
+        ? spaceAbove >= menuHeight || spaceAbove > spaceBelow
+        : menuHeight > spaceBelow && spaceAbove > spaceBelow;
+
+      setPortaledMenuPosition({
+        top: isAbove ? undefined : triggerRect.bottom + PORTALED_MENU_GAP_PX,
+        bottom: isAbove
+          ? viewportHeight - triggerRect.top + PORTALED_MENU_GAP_PX
+          : undefined,
+        left,
+        right,
+        isAbove,
+      });
+    }, [buttonId, props.isOpeningUpwards, ref]);
+
+    /*
+     * Measured before paint, so the menu never flashes at the corner of the
+     * viewport; until then it is mounted `visibility: hidden`. Repositioned on
+     * every scroll (captured, because the table's own scroller does not bubble
+     * one to window) so it stays attached to its trigger.
+     */
+    useLayoutEffect(() => {
+      if (!isMenuPortaled || !isComponentVisible) {
+        setPortaledMenuPosition(null);
+        return undefined;
+      }
+
+      let animationFrame: number | null = null;
+
+      const schedulePositionUpdate: () => void = (): void => {
+        if (animationFrame !== null) {
+          return;
+        }
+
+        animationFrame = window.requestAnimationFrame((): void => {
+          animationFrame = null;
+          updatePortaledMenuPosition();
+        });
+      };
+
+      updatePortaledMenuPosition();
+
+      window.addEventListener("resize", schedulePositionUpdate);
+      document.addEventListener("scroll", schedulePositionUpdate, true);
+
+      /*
+       * The menu's own size decides whether it fits below its trigger, and
+       * that size can change after it opens - its styles arriving late (see
+       * updatePortaledMenuPosition), or its items changing. Place it again
+       * whenever it does.
+       */
+      const menuElement: HTMLElement | null = ref.current as HTMLElement | null;
+      const resizeObserver: ResizeObserver | null =
+        menuElement && typeof ResizeObserver !== "undefined"
+          ? new ResizeObserver(schedulePositionUpdate)
+          : null;
+
+      if (menuElement && resizeObserver) {
+        resizeObserver.observe(menuElement);
+      }
+
+      return () => {
+        window.removeEventListener("resize", schedulePositionUpdate);
+        document.removeEventListener("scroll", schedulePositionUpdate, true);
+        resizeObserver?.disconnect();
+        if (animationFrame !== null) {
+          window.cancelAnimationFrame(animationFrame);
+        }
+      };
+    }, [isMenuPortaled, isComponentVisible, ref, updatePortaledMenuPosition]);
+
+    /*
+     * A portalled menu is not inside the Modal it was opened from, so a press
+     * outside it could also read as a press on that Modal's backdrop. The press
+     * is spent on closing the menu; claim it so the dialog behind survives.
+     */
+    useEffect(() => {
+      if (!isMenuPortaled || !isComponentVisible) {
+        return undefined;
+      }
+
+      const handlePointerDown: (event: MouseEvent) => void = (
+        event: MouseEvent,
+      ): void => {
+        const target: EventTarget | null = event.target;
+
+        if (!(target instanceof Node)) {
+          return;
+        }
+
+        const menuElement: HTMLElement | null =
+          ref.current as HTMLElement | null;
+
+        if (
+          menuElement?.contains(target) ||
+          document.getElementById(buttonId)?.contains(target)
+        ) {
+          return;
+        }
+
+        consumePressForAnchoredPopup(event);
+      };
+
+      document.addEventListener("mousedown", handlePointerDown, true);
+
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown, true);
+      };
+    }, [buttonId, isMenuPortaled, isComponentVisible, ref]);
+
+    /*
+     * A portalled menu is `visibility: hidden` until it has been measured, and
+     * a hidden element refuses focus - so the first item is focused once the
+     * menu has a position, not merely once it is open.
+     */
+    const isMenuPlaced: boolean =
+      !isMenuPortaled || portaledMenuPosition !== null;
+
     useEffect(() => {
       const menuItems: Array<HTMLElement> = getMenuItems();
 
@@ -176,6 +426,10 @@ const MoreMenu: React.ForwardRefExoticComponent<
         item.tabIndex = index === focusedIndex ? 0 : -1;
       });
 
+      if (!isMenuPlaced) {
+        return;
+      }
+
       if (focusedIndex >= 0 && menuItems.length > 0) {
         const safeFocusedIndex: number = Math.min(
           focusedIndex,
@@ -188,7 +442,13 @@ const MoreMenu: React.ForwardRefExoticComponent<
           menuItems[safeFocusedIndex]?.focus();
         }
       }
-    }, [focusedIndex, getMenuItems, isComponentVisible, props.children]);
+    }, [
+      focusedIndex,
+      getMenuItems,
+      isComponentVisible,
+      isMenuPlaced,
+      props.children,
+    ]);
 
     const restoreFocusToTrigger: () => void = useCallback((): void => {
       /*
@@ -231,6 +491,16 @@ const MoreMenu: React.ForwardRefExoticComponent<
 
         if (event.key === "Tab") {
           setIsComponentVisible(false);
+
+          /*
+           * A portalled menu sits at the end of the body, so the browser's own
+           * Tab would carry focus from it to whatever follows the body - out
+           * of the table, and out of any dialog it is in. Hand focus back to
+           * the trigger first and let the same Tab move on from there.
+           */
+          if (isMenuPortaled) {
+            focusTrigger();
+          }
           return;
         }
 
@@ -311,6 +581,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
         focusTrigger,
         getMenuItems,
         isComponentVisible,
+        isMenuPortaled,
         setIsComponentVisible,
       ],
     );
@@ -337,6 +608,36 @@ const MoreMenu: React.ForwardRefExoticComponent<
       }
     };
 
+    /*
+     * Hand focus back to the trigger BEFORE the chosen item's own handler runs.
+     * Most items open a dialog (Edit, Delete, Show ID), and Modal remembers
+     * whatever held focus when it first rendered so it can return focus there
+     * on close. Left alone, that is the menu item - which the same update
+     * unmounts - so closing the dialog dropped focus to <body>. With the
+     * trigger focused first, the dialog remembers the trigger instead; an item
+     * that moves focus somewhere itself still wins, because it runs after.
+     */
+    const handleMenuClickCapture: (
+      event: React.MouseEvent<HTMLDivElement>,
+    ) => void = (event: React.MouseEvent<HTMLDivElement>): void => {
+      const eventTarget: EventTarget = event.target;
+
+      if (!(eventTarget instanceof Element)) {
+        return;
+      }
+
+      const menuItem: Element | null = eventTarget.closest('[role="menuitem"]');
+
+      if (
+        menuItem instanceof HTMLElement &&
+        event.currentTarget.contains(menuItem) &&
+        !isMenuItemDisabled(menuItem) &&
+        isComponentVisible
+      ) {
+        focusTrigger();
+      }
+    };
+
     const getNativeButtonTrigger: () => ReactElement | null =
       (): ReactElement | null => {
         if (!customTrigger || !isNativeButtonTrigger) {
@@ -378,6 +679,63 @@ const MoreMenu: React.ForwardRefExoticComponent<
         });
       };
 
+    const isMenuAbove: boolean = isMenuPortaled
+      ? Boolean(portaledMenuPosition?.isAbove)
+      : Boolean(props.isOpeningUpwards);
+
+    const menuPortalTarget: HTMLElement | null = isMenuPortaled
+      ? getMenuPortalTarget()
+      : null;
+
+    const menu: ReactElement = (
+      <div
+        ref={ref}
+        id={menuId}
+        /*
+         * Once settled the menu carries no transform class at all: a
+         * lingering scale would make it the containing block for any
+         * position:fixed descendant (the Modal invariant).
+         */
+        className={`${
+          /*
+           * The portalled menu takes its place and layer from the inline
+           * style below instead.
+           */
+          isMenuPortaled
+            ? "w-56 rounded-lg"
+            : "absolute right-0 z-50 w-56 rounded-lg"
+        } bg-white text-left shadow-xl ring-1 ring-gray-200 focus:outline-none py-1 transition duration-150 ease-out motion-reduce:transition-none ${
+          isMenuAbove
+            ? `${isMenuPortaled ? "" : "bottom-full mb-2 "}origin-bottom-right`
+            : `${isMenuPortaled ? "" : "mt-2 "}origin-top-right`
+        } ${hasMenuEntered ? "opacity-100" : "opacity-0 scale-95"}`}
+        style={
+          isMenuPortaled
+            ? {
+                position: "fixed",
+                top: portaledMenuPosition?.top,
+                bottom: portaledMenuPosition?.bottom,
+                left: portaledMenuPosition ? portaledMenuPosition.left : 0,
+                right: portaledMenuPosition?.right,
+                zIndex: DROPDOWN_MENU_Z_INDEX,
+                visibility: portaledMenuPosition ? "visible" : "hidden",
+              }
+            : undefined
+        }
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby={buttonId}
+        onClickCapture={handleMenuClickCapture}
+        onClick={handleMenuClick}
+      >
+        {props.children.map((child: ReactElement, index: number) => {
+          return (
+            <React.Fragment key={child.key || index}>{child}</React.Fragment>
+          );
+        })}
+      </div>
+    );
+
     return (
       <div
         className="relative inline-block text-left"
@@ -463,34 +821,11 @@ const MoreMenu: React.ForwardRefExoticComponent<
             </div>
           )}
 
-        {isComponentVisible && (
-          <div
-            ref={ref}
-            id={menuId}
-            /*
-             * Once settled the menu carries no transform class at all: a
-             * lingering scale would make it the containing block for any
-             * position:fixed descendant (the Modal invariant).
-             */
-            className={`absolute right-0 z-50 w-56 rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1 transition duration-150 ease-out motion-reduce:transition-none ${
-              props.isOpeningUpwards
-                ? "bottom-full mb-2 origin-bottom-right"
-                : "mt-2 origin-top-right"
-            } ${hasMenuEntered ? "opacity-100" : "opacity-0 scale-95"}`}
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby={buttonId}
-            onClick={handleMenuClick}
-          >
-            {props.children.map((child: ReactElement, index: number) => {
-              return (
-                <React.Fragment key={child.key || index}>
-                  {child}
-                </React.Fragment>
-              );
-            })}
-          </div>
-        )}
+        {isComponentVisible && !isMenuPortaled && menu}
+        {isComponentVisible &&
+          isMenuPortaled &&
+          menuPortalTarget &&
+          createPortal(menu, menuPortalTarget)}
       </div>
     );
   },

package/UI/Components/MoreMenu/MoreMenuItem.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useId } from "react";
 import IconProp from "../../../Types/Icon/IconProp";
 import Icon from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
@@ -15,12 +15,51 @@ export interface ComponentProps {
    * Shown on hover - the place a locked menu item says why it is locked.
    */
   tooltip?: string | undefined;
+  /*
+   * Red text and a red hover, for the items that delete or remove something.
+   * The menu is where a table puts those, so they need to read as dangerous
+   * without a button border to say so.
+   */
+  isDestructive?: boolean | undefined;
+  /*
+   * Keep the icon's gutter even when this item has no icon, so its label lines
+   * up with the labels of the items around it that do.
+   */
+  isIconSpaceReserved?: boolean | undefined;
 }
 
 const MoreMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const isDisabled: boolean = Boolean(props.isDisabled);
+  const isDestructive: boolean = Boolean(props.isDestructive);
+  const reasonId: string = useId();
+
+  /*
+   * A locked item that says why it is locked stays reachable. Table rows now
+   * keep their permission-locked actions in the ⋯ menu ("You need the Delete
+   * permission"), and a natively disabled button can neither take focus nor
+   * show a tooltip on focus - so the explanation would exist for the mouse
+   * only. Such an item is aria-disabled instead: MoreMenu's roving focus
+   * lands on it, the reason is announced through aria-describedby and shown
+   * by the tooltip, and activating it does nothing. A locked item with nothing
+   * to say stays natively disabled and is skipped, as before.
+   */
+  const isExplainedLock: boolean = isDisabled && Boolean(props.tooltip);
+
+  const colorClassName: string = isDestructive
+    ? "text-red-600"
+    : "text-gray-700";
+
+  /*
+   * Keyboard focus gets the same highlight as the pointer's hover, so an item
+   * reached with the arrow keys looks exactly as active as one under the mouse.
+   */
+  const stateClassName: string = isDisabled
+    ? "cursor-not-allowed opacity-50 focus-visible:outline-none focus-visible:bg-gray-100"
+    : isDestructive
+      ? "cursor-pointer hover:bg-red-50 hover:text-red-700 focus-visible:outline-none focus-visible:bg-red-50 focus-visible:text-red-700"
+      : "cursor-pointer hover:bg-indigo-50 hover:text-gray-900 focus-visible:outline-none focus-visible:bg-indigo-50 focus-visible:text-gray-900";
 
   const menuItem: ReactElement = (
     /*
@@ -30,23 +69,36 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
      */
     <button
       type="button"
-      className={`group mx-1 flex w-[calc(100%-0.5rem)] items-center rounded-md px-3 py-2 text-left text-sm text-gray-700 transition-colors duration-100 enabled:cursor-pointer enabled:hover:bg-indigo-50 enabled:hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-50 ${
-        isDisabled && props.tooltip ? "pointer-events-none " : ""
-      }${props.className || ""}`}
+      className={`group mx-1 flex w-[calc(100%-0.5rem)] items-center rounded-md px-3 py-2 text-left text-sm transition-colors duration-100 ${colorClassName} ${stateClassName} ${
+        props.className || ""
+      }`}
       role="menuitem"
       tabIndex={-1}
-      disabled={isDisabled}
+      disabled={isDisabled && !isExplainedLock}
       aria-disabled={isDisabled}
+      aria-describedby={isExplainedLock ? reasonId : undefined}
+      data-focusable-when-disabled={isExplainedLock ? "true" : undefined}
       onClick={() => {
+        if (isDisabled) {
+          return;
+        }
+
         props.onClick();
       }}
     >
       {props.icon && (
         <Icon
           icon={props.icon}
-          className={`mr-2.5 h-4 w-4 text-gray-400 group-hover:text-indigo-500 transition-colors duration-100 ${props.iconClassName}`}
+          className={`mr-2.5 h-4 w-4 shrink-0 transition-colors duration-100 ${
+            isDestructive
+              ? `text-red-500 ${isDisabled ? "" : "group-hover:text-red-600"}`
+              : `text-gray-400 ${isDisabled ? "" : "group-hover:text-indigo-500"}`
+          } ${props.iconClassName || ""}`}
         />
       )}
+      {!props.icon && props.isIconSpaceReserved && (
+        <span className="mr-2.5 h-4 w-4 shrink-0" aria-hidden="true"></span>
+      )}
       <div className="flex w-full justify-between items-center">
         <div className="font-medium">{props.text}</div>
         <div>{props.rightElement}</div>
@@ -58,20 +110,21 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
     return menuItem;
   }
 
-  /*
-   * A disabled control dispatches no pointer events, so the tooltip has to
-   * hang off a wrapper that still receives them. Matches what Button does for
-   * the same reason - but tabIndex stays -1 here, because MoreMenu drives
-   * focus itself with a roving tabindex and a tabbable wrapper would add a
-   * stop it does not know about.
-   */
-  if (isDisabled) {
+  if (isExplainedLock) {
+    /*
+     * The reason sits outside the button so it describes the item without
+     * becoming part of its name - the item is still "Delete", not "Delete You
+     * do not have permission to delete this Monitor.".
+     */
     return (
-      <Tooltip text={props.tooltip}>
-        <span className="flex w-full" tabIndex={-1}>
+      <>
+        <Tooltip text={props.tooltip} isTriggerAlreadyDescribed={true}>
           {menuItem}
+        </Tooltip>
+        <span id={reasonId} className="sr-only">
+          {props.tooltip}
         </span>
-      </Tooltip>
+      </>
     );
   }