@oneuptime/common 12.0.5 → 12.0.6

package/UI/Components/Modal/Modal.tsx

@@ -10,9 +10,11 @@ import useTranslateValue from "../../Utils/Translation";
 import React, {
   FunctionComponent,
   ReactElement,
+  useCallback,
   useEffect,
   useId,
   useRef,
+  useState,
 } from "react";
 
 export enum ModalWidth {
@@ -21,6 +23,52 @@ export enum ModalWidth {
   Large,
 }
 
+/*
+ * The page behind a modal must not scroll, and nested modals share a single
+ * lock: a counter, rather than a boolean, is what stops the inner modal from
+ * handing scrolling back while its parent is still open.
+ */
+let openModalCount: number = 0;
+let bodyOverflowBeforeLock: string = "";
+let bodyPaddingRightBeforeLock: string = "";
+
+type PageScrollLockFunction = () => void;
+
+const lockPageScroll: PageScrollLockFunction = (): void => {
+  openModalCount++;
+
+  if (openModalCount > 1 || typeof document === "undefined") {
+    return;
+  }
+
+  bodyOverflowBeforeLock = document.body.style.overflow;
+  bodyPaddingRightBeforeLock = document.body.style.paddingRight;
+
+  /*
+   * Hiding the scrollbar reclaims its width, so the page underneath would
+   * jump sideways by exactly that much. Pad it back to hold everything still.
+   */
+  const scrollbarWidth: number =
+    window.innerWidth - document.documentElement.clientWidth;
+
+  if (scrollbarWidth > 0) {
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+  }
+
+  document.body.style.overflow = "hidden";
+};
+
+const unlockPageScroll: PageScrollLockFunction = (): void => {
+  openModalCount = Math.max(0, openModalCount - 1);
+
+  if (openModalCount > 0 || typeof document === "undefined") {
+    return;
+  }
+
+  document.body.style.overflow = bodyOverflowBeforeLock;
+  document.body.style.paddingRight = bodyPaddingRightBeforeLock;
+};
+
 export interface ComponentProps {
   title: string;
   description?: string | undefined;
@@ -39,6 +87,7 @@ export interface ComponentProps {
   rightElement?: ReactElement | undefined;
   closeButtonText?: string | undefined;
   leftFooterElement?: ReactElement | undefined;
+  disableCloseOnBackdropClick?: boolean | undefined;
 }
 
 const Modal: FunctionComponent<ComponentProps> = (
@@ -58,6 +107,10 @@ const Modal: FunctionComponent<ComponentProps> = (
   const translatedCloseLabel: string = translateString("Close") || "Close";
   const modalRef: React.RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
+  const contentRef: React.RefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>(null);
+  const contentInnerRef: React.RefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>(null);
   const previouslyFocusedElementRef: React.MutableRefObject<HTMLElement | null> =
     useRef<HTMLElement | null>(
       typeof document !== "undefined" &&
@@ -68,17 +121,126 @@ const Modal: FunctionComponent<ComponentProps> = (
   const onCloseRef: React.MutableRefObject<(() => void) | undefined> = useRef<
     (() => void) | undefined
   >(props.onClose);
+  const backdropPressStartedOutsideRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
   const titleId: string = useId();
   const descriptionId: string = useId();
 
+  /*
+   * The modal is mounted in its closed state and flipped open one frame later
+   * so the browser has something to transition from. Without that first paint
+   * the panel would simply appear.
+   */
+  const [hasEntered, setHasEntered] = useState<boolean>(false);
+
+  /*
+   * A body taller than the modal hides content above and below the fold. The
+   * header and footer grow a shadow in whichever direction that is true, which
+   * is the only cue that the body scrolls at all.
+   */
+  const [isContentHiddenAbove, setIsContentHiddenAbove] =
+    useState<boolean>(false);
+  const [isContentHiddenBelow, setIsContentHiddenBelow] =
+    useState<boolean>(false);
+
   useEffect(() => {
     onCloseRef.current = props.onClose;
   }, [props.onClose]);
 
+  useEffect(() => {
+    const open: () => void = (): void => {
+      setHasEntered(true);
+    };
+
+    const frame: number = requestAnimationFrame(open);
+
+    /*
+     * A hidden or throttled tab never runs an animation frame, and a modal that
+     * opened there would sit at zero opacity. The timer is the safety net: it
+     * skips the transition rather than the modal.
+     */
+    const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(fallbackTimer);
+    };
+  }, []);
+
+  useEffect(() => {
+    lockPageScroll();
+
+    return () => {
+      unlockPageScroll();
+    };
+  }, []);
+
+  useEffect(() => {
+    const content: HTMLDivElement | null = contentRef.current;
+
+    if (!content) {
+      return undefined;
+    }
+
+    const measure: () => void = (): void => {
+      /*
+       * A pixel of tolerance: fractional layout heights otherwise leave the
+       * bottom shadow up forever on a body that is already fully scrolled.
+       */
+      setIsContentHiddenAbove(content.scrollTop > 1);
+      setIsContentHiddenBelow(
+        content.scrollHeight - content.scrollTop - content.clientHeight > 1,
+      );
+    };
+
+    measure();
+    content.addEventListener("scroll", measure, { passive: true });
+
+    /*
+     * ResizeObserver is missing in jsdom and in older browsers. Falling back to
+     * resize events keeps the shadows roughly right there; what it cannot catch
+     * is the body growing on its own, which only matters once the modal is up.
+     */
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+
+      return () => {
+        content.removeEventListener("scroll", measure);
+        window.removeEventListener("resize", measure);
+      };
+    }
+
+    const observer: ResizeObserver = new ResizeObserver(measure);
+    observer.observe(content);
+
+    if (contentInnerRef.current) {
+      observer.observe(contentInnerRef.current);
+    }
+
+    return () => {
+      content.removeEventListener("scroll", measure);
+      observer.disconnect();
+    };
+  }, []);
+
+  const isTopmostDialog: () => boolean = useCallback((): boolean => {
+    const modal: HTMLDivElement | null = modalRef.current;
+
+    if (!modal) {
+      return false;
+    }
+
+    const openDialogs: Array<Element> = Array.from(
+      document.querySelectorAll('[role="dialog"][aria-modal="true"]'),
+    );
+
+    return openDialogs[openDialogs.length - 1] === modal;
+  }, []);
+
   useEffect(() => {
     const modal: HTMLDivElement | null = modalRef.current;
     if (!modal) {
-      return;
+      return undefined;
     }
 
     const getFocusableElements: () => Array<HTMLElement> =
@@ -88,21 +250,25 @@ const Modal: FunctionComponent<ComponentProps> = (
             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
           ),
         ).filter((element: HTMLElement) => {
+          /*
+           * Collapsed sections and closed dropdowns leave focusable elements in
+           * the DOM with no box at all, and tabbing onto one of those looks
+           * exactly like focus escaping the modal. checkVisibility does not
+           * exist in jsdom, where nothing has a box to begin with, so the
+           * fallback keeps every element in the cycle there.
+           */
+          const isRendered: boolean =
+            typeof element.checkVisibility !== "function" ||
+            element.checkVisibility();
+
           return (
             !element.hasAttribute("disabled") &&
-            element.getAttribute("aria-hidden") !== "true"
+            element.getAttribute("aria-hidden") !== "true" &&
+            isRendered
           );
         });
       };
 
-    const isTopmostDialog: () => boolean = (): boolean => {
-      const openDialogs: Array<Element> = Array.from(
-        document.querySelectorAll('[role="dialog"][aria-modal="true"]'),
-      );
-
-      return openDialogs[openDialogs.length - 1] === modal;
-    };
-
     const initialFocusElement: HTMLElement | undefined =
       getFocusableElements().find((element: HTMLElement) => {
         return element.getAttribute("data-testid") !== "close-button";
@@ -168,7 +334,51 @@ const Modal: FunctionComponent<ComponentProps> = (
         previouslyFocusedElementRef.current.focus();
       }
     };
-  }, []);
+  }, [isTopmostDialog]);
+
+  type BackdropPressHandler = (event: React.MouseEvent<HTMLDivElement>) => void;
+  type IsEventOutsideModalFunction = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ) => boolean;
+
+  const isEventOutsideModal: IsEventOutsideModalFunction = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): boolean => {
+    const modal: HTMLDivElement | null = modalRef.current;
+
+    return modal !== null && !modal.contains(event.target as Node);
+  };
+
+  const onBackdropMouseDown: BackdropPressHandler = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): void => {
+    backdropPressStartedOutsideRef.current = isEventOutsideModal(event);
+  };
+
+  const onBackdropClick: BackdropPressHandler = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): void => {
+    /*
+     * Both ends of the click have to land on the backdrop. Selecting text in
+     * the body and releasing the mouse past the edge of the panel is a drag,
+     * not a dismissal, and it used to be the fastest way to lose a filled-in
+     * form.
+     */
+    const pressStartedOutside: boolean = backdropPressStartedOutsideRef.current;
+    backdropPressStartedOutsideRef.current = false;
+
+    if (
+      props.disableCloseOnBackdropClick ||
+      !props.onClose ||
+      !pressStartedOutside ||
+      !isEventOutsideModal(event) ||
+      !isTopmostDialog()
+    ) {
+      return;
+    }
+
+    props.onClose();
+  };
 
   let modalWidthClassName: string = "sm:max-w-lg md:max-w-lg";
 
@@ -178,19 +388,35 @@ const Modal: FunctionComponent<ComponentProps> = (
     modalWidthClassName = "sm:max-w-7xl md:max-w-7xl";
   }
 
+  /*
+   * Once the panel has settled it carries no transform at all. A lingering
+   * `scale-100` would make it the containing block for `position: fixed`, and
+   * a modal opened from inside this one would be laid out against the panel
+   * instead of the viewport.
+   */
+  const panelTransitionClassName: string = hasEntered
+    ? "opacity-100"
+    : "translate-y-6 opacity-0 sm:translate-y-0 sm:scale-95";
+
   return (
     <div className="relative z-50">
       <div
-        className="fixed inset-0 bg-gray-950/45 backdrop-blur-[2px]"
+        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out motion-reduce:transition-none ${
+          hasEntered ? "opacity-100" : "opacity-0"
+        }`}
         data-testid="modal-backdrop"
         aria-hidden="true"
       />
 
-      <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div
+        className="fixed inset-0 z-50 overflow-y-auto"
+        onMouseDown={onBackdropMouseDown}
+        onClick={onBackdropClick}
+      >
         <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">
           <div
             ref={modalRef}
-            className={`relative flex max-h-[calc(100vh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 sm:my-8 sm:max-h-[calc(100vh-3rem)] sm:rounded-xl ${modalWidthClassName}`}
+            className={`relative flex max-h-[calc(100dvh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 transition duration-200 ease-out focus:outline-none motion-reduce:transition-none sm:my-8 sm:max-h-[calc(100dvh-4rem)] sm:rounded-xl ${modalWidthClassName} ${panelTransitionClassName}`}
             data-testid="modal"
             aria-labelledby={titleId}
             aria-describedby={translatedDescription ? descriptionId : undefined}
@@ -198,12 +424,14 @@ const Modal: FunctionComponent<ComponentProps> = (
             aria-modal="true"
             tabIndex={-1}
           >
-            <div className="relative flex shrink-0 flex-col gap-4 rounded-t-2xl border-b border-gray-100 bg-white px-5 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6 sm:rounded-t-xl sm:px-6">
-              <div
-                className={`min-w-0 flex-1 ${
-                  props.onClose ? "pr-9 sm:pr-0" : ""
-                }`}
-              >
+            <div
+              className={`relative z-10 flex shrink-0 items-start gap-3 rounded-t-2xl border-b border-gray-100 bg-white px-5 py-4 transition-shadow duration-200 sm:gap-4 sm:rounded-t-xl sm:px-6 ${
+                isContentHiddenAbove
+                  ? "shadow-[0_6px_10px_-10px_var(--ou-modal-scroll-shadow,rgb(15_23_42_/_0.35))]"
+                  : ""
+              }`}
+            >
+              <div className="min-w-0 flex-1">
                 <h3
                   data-testid="modal-title"
                   className="text-base font-semibold leading-6 tracking-tight text-gray-900"
@@ -224,7 +452,7 @@ const Modal: FunctionComponent<ComponentProps> = (
               {props.rightElement && (
                 <div
                   data-testid="right-element"
-                  className={`flex-shrink-0 ${props.onClose ? "pr-9" : ""}`}
+                  className="flex shrink-0 items-center"
                 >
                   {props.rightElement}
                 </div>
@@ -236,7 +464,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                   aria-label={translatedCloseLabel}
                   data-testid="close-button"
                   onClick={props.onClose}
-                  className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                  className="-mr-1.5 -mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
                 >
                   <Icon icon={IconProp.Close} className="h-4 w-4" />
                 </button>
@@ -244,22 +472,25 @@ const Modal: FunctionComponent<ComponentProps> = (
             </div>
 
             <div
+              ref={contentRef}
               className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-6"
               data-testid="modal-content"
             >
-              <ModalBody error={props.error}>
-                {!props.isBodyLoading ? (
-                  props.children
-                ) : (
-                  <div className="modal-body flex justify-center py-16">
-                    <Loader
-                      loaderType={LoaderType.Bar}
-                      color={VeryLightGray}
-                      size={200}
-                    />
-                  </div>
-                )}
-              </ModalBody>
+              <div ref={contentInnerRef}>
+                <ModalBody error={props.error}>
+                  {!props.isBodyLoading ? (
+                    props.children
+                  ) : (
+                    <div className="modal-body flex justify-center py-16">
+                      <Loader
+                        loaderType={LoaderType.Bar}
+                        color={VeryLightGray}
+                        size={200}
+                      />
+                    </div>
+                  )}
+                </ModalBody>
+              </div>
             </div>
             <ModalFooter
               submitButtonType={
@@ -294,6 +525,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                 props.isBodyLoading || props.disableSubmitButton
               }
               leftFooterElement={props.leftFooterElement}
+              hasContentHiddenBelow={isContentHiddenBelow}
             />
           </div>
         </div>

package/UI/Components/Modal/ModalFooter.tsx

@@ -13,6 +13,7 @@ export interface ComponentProps {
   disableSubmitButton?: undefined | boolean;
   closeButtonText?: undefined | string;
   leftFooterElement?: ReactElement | undefined;
+  hasContentHiddenBelow?: boolean | undefined;
 }
 
 const ModalFooter: FunctionComponent<ComponentProps> = (
@@ -24,7 +25,11 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
 
   return (
     <div
-      className="flex shrink-0 flex-col gap-3 rounded-b-2xl border-t border-gray-100 bg-gray-50/70 px-5 py-3 sm:flex-row sm:items-center sm:justify-between sm:rounded-b-xl sm:px-6"
+      className={`relative z-10 flex shrink-0 flex-col gap-3 rounded-b-2xl border-t border-gray-100 bg-gray-50/70 px-5 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 transition-shadow duration-200 sm:flex-row sm:items-center sm:justify-between sm:rounded-b-xl sm:px-6 sm:pb-3 ${
+        props.hasContentHiddenBelow
+          ? "shadow-[0_-6px_10px_-10px_var(--ou-modal-scroll-shadow,rgb(15_23_42_/_0.35))]"
+          : ""
+      }`}
       data-testid="modal-footer"
     >
       {props.leftFooterElement ? (

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -22,6 +22,15 @@ export interface ComponentProps {
   triggerClassName?: string | undefined;
   menuIcon?: IconProp | undefined;
   text?: string | undefined;
+  /*
+   * The trigger's accessible name, separately from `text`. The default trigger
+   * renders `text` as a visible label beside the icon, so an icon-only overflow
+   * menu has to pass `text=""` — which would otherwise leave every one of them
+   * called "More options" and tell a screen reader user nothing about which
+   * thing the menu belongs to.
+   */
+  ariaLabel?: string | undefined;
+  dataTestId?: string | undefined;
   isDisabled?: boolean | undefined;
 }
 
@@ -312,7 +321,10 @@ const MoreMenu: React.ForwardRefExoticComponent<
           disabled: isTriggerDisabled,
           "aria-disabled": isTriggerDisabled,
           "aria-label":
-            trigger.props["aria-label"] || props.text || "More options",
+            trigger.props["aria-label"] ||
+            props.ariaLabel ||
+            props.text ||
+            "More options",
           "aria-haspopup": "menu",
           "aria-expanded": isComponentVisible,
           "aria-controls": isComponentVisible ? menuId : undefined,
@@ -338,10 +350,11 @@ const MoreMenu: React.ForwardRefExoticComponent<
             title={props.text || ""}
             buttonStyle={ButtonStyleType.OUTLINE}
             disabled={props.isDisabled}
+            dataTestId={props.dataTestId}
             onClick={() => {
               setIsComponentVisible(!isDropdownVisible);
             }}
-            ariaLabel={props.text || "More options"}
+            ariaLabel={props.ariaLabel || props.text || "More options"}
             ariaExpanded={isComponentVisible}
             ariaHaspopup="menu"
             ariaControls={isComponentVisible ? menuId : undefined}
@@ -358,10 +371,11 @@ const MoreMenu: React.ForwardRefExoticComponent<
               type="button"
               className={props.triggerClassName}
               disabled={props.isDisabled}
+              data-testid={props.dataTestId}
               onClick={() => {
                 setIsComponentVisible(!isDropdownVisible);
               }}
-              aria-label={props.text || "More options"}
+              aria-label={props.ariaLabel || props.text || "More options"}
               aria-haspopup="menu"
               aria-expanded={isComponentVisible}
               aria-controls={isComponentVisible ? menuId : undefined}
@@ -383,7 +397,8 @@ const MoreMenu: React.ForwardRefExoticComponent<
               id={buttonId}
               role="button"
               tabIndex={props.isDisabled ? -1 : 0}
-              aria-label={props.text || undefined}
+              data-testid={props.dataTestId}
+              aria-label={props.ariaLabel || props.text || undefined}
               aria-haspopup="menu"
               aria-expanded={isComponentVisible}
               aria-controls={isComponentVisible ? menuId : undefined}

package/UI/Components/MoreMenu/MoreMenuItem.tsx

@@ -16,9 +16,14 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
+    /*
+     * A button shrink-wraps its content whatever its display type, so the width
+     * has to be set explicitly or the hover background stops at the end of the
+     * label instead of spanning the menu. 100% less the mx-1 on either side.
+     */
     <button
       type="button"
-      className={`group mx-1 flex 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 ${props.className || ""}`}
+      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 ${props.className || ""}`}
       role="menuitem"
       tabIndex={-1}
       disabled={props.isDisabled}