@oneuptime/common 12.0.13 → 12.0.14

package/UI/Components/List/List.tsx

@@ -1,6 +1,5 @@
 import { GetReactElementFunction } from "../../Types/FunctionTypes";
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import Field from "../Detail/Field";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import FilterViewer from "../Filters/FilterViewer";
@@ -8,6 +7,7 @@ import FilterType from "../Filters/Types/Filter";
 import FilterData from "../Filters/Types/FilterData";
 import Pagination from "../Pagination/Pagination";
 import ListBody from "./ListBody";
+import ListSkeleton from "./ListSkeleton";
 import { ListDetailProps } from "./ListRow";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement } from "react";
@@ -67,12 +67,30 @@ type ListFunction = <T extends GenericObject>(
 const List: ListFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
+  /*
+   * A refetch with cards already on screen (pagination, sort, refresh - the
+   * parent never clears `data` while fetching) keeps those cards visible and
+   * dims them; skeletons are only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    props.isLoading && props.data.length > 0;
+
   const getListbody: GetReactElementFunction = (): ReactElement => {
-    if (props.isLoading) {
-      return <ComponentLoader />;
+    if (props.isLoading && props.data.length === 0) {
+      return (
+        <ListSkeleton
+          fieldsCount={props.fields.length}
+          itemsOnPage={props.itemsOnPage}
+        />
+      );
     }
 
-    if (props.error) {
+    /*
+     * Loading still wins over error and empty (same priority as before the
+     * skeletons): while a refetch is in flight the stale cards render, never
+     * a stale error or a premature "no items".
+     */
+    if (!props.isLoading && props.error) {
       return (
         <div className="p-6">
           <ErrorMessage
@@ -145,7 +163,21 @@ const List: ListFunction = <T extends GenericObject>(
               }
             }}
           >
-            {getListbody()}
+            {/*
+             * Dims the stale cards while a refetch is in flight and blocks
+             * clicks on them - actions against data about to be replaced
+             * are a race.
+             */}
+            <div
+              data-testid="list-content"
+              className={
+                isRefetchingWithData
+                  ? "opacity-60 pointer-events-none transition-opacity duration-150"
+                  : "transition-opacity duration-150"
+              }
+            >
+              {getListbody()}
+            </div>
           </DragDropContext>
           {!props.disablePagination && (
             <div className="mt-5 -mb-6">

package/UI/Components/List/ListSkeleton.tsx

@@ -0,0 +1,54 @@
+import Skeleton from "../Skeleton/Skeleton";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  /*
+   * One placeholder line per field the real ListRow will render, so the
+   * cards are the right height before the data arrives.
+   */
+  fieldsCount: number;
+  itemsOnPage: number;
+}
+
+/*
+ * Card-shaped placeholders for the list's first load, matching ListBody's
+ * wrapper (space-y-6 p-6 border-t) so nothing shifts when real rows land.
+ */
+const ListSkeleton: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  // Enough cards to look like a page without painting offscreen ones.
+  const cardCount: number = Math.max(1, Math.min(props.itemsOnPage || 0, 6));
+  const cardIndexes: Array<number> = Array.from(Array(cardCount).keys());
+  const lineIndexes: Array<number> = Array.from(
+    Array(Math.max(1, props.fieldsCount)).keys(),
+  );
+
+  return (
+    <div
+      data-testid="list-skeleton-loader"
+      role="status"
+      aria-live="polite"
+      className="space-y-6 p-6 border-t border-gray-200"
+    >
+      <span className="sr-only">Loading...</span>
+      {cardIndexes.map((cardIndex: number) => {
+        return (
+          <div key={cardIndex} className="space-y-3">
+            {lineIndexes.map((lineIndex: number) => {
+              return (
+                <Skeleton
+                  key={lineIndex}
+                  className="h-4"
+                  widthVariantIndex={cardIndex + lineIndex}
+                />
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ListSkeleton;

package/UI/Components/Markdown.tsx/LazyMarkdownViewer.tsx

@@ -1,4 +1,9 @@
-import { ComponentProps } from "./MarkdownViewer";
+/*
+ * Type-only on purpose: the sole static edge to MarkdownViewer must be
+ * erasable, so the viewer (and the mermaid chunk it lazily pulls) stays out
+ * of every eager bundle that imports this wrapper.
+ */
+import type { ComponentProps } from "./MarkdownViewer";
 import React, {
   FunctionComponent,
   LazyExoticComponent,

package/UI/Components/Markdown.tsx/MarkdownViewer.tsx

@@ -76,7 +76,6 @@ SyntaxHighlighter.registerLanguage("ruby", ruby);
 SyntaxHighlighter.registerLanguage("php", php);
 SyntaxHighlighter.registerLanguage("graphql", graphql);
 SyntaxHighlighter.registerLanguage("http", http);
-import mermaid from "mermaid";
 import DOMPurify from "dompurify";
 import OneUptimeDate from "../../../Types/Date";
 import { Theme, useTheme } from "../../Utils/Theme";
@@ -90,7 +89,48 @@ import { Theme, useTheme } from "../../Utils/Theme";
 const ISO_8601_REGEX: RegExp =
   /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,6})?Z$/;
 
-const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
+/*
+ * mermaid's pre-bundled build is ~4.5MB — by far the heaviest dependency of
+ * this component — so it is loaded on demand the first time a mermaid fence
+ * actually renders. Plain markdown (the overwhelmingly common case) never
+ * pays for it: there is no static import and no module-scope initialization.
+ * The promise is cached module-wide so multiple diagrams share one load, and
+ * theme setup runs only after the load resolves.
+ */
+type MermaidApi = typeof import("mermaid").default;
+
+let mermaidLoadPromise: Promise<MermaidApi> | null = null;
+
+const loadMermaid: () => Promise<MermaidApi> = (): Promise<MermaidApi> => {
+  if (!mermaidLoadPromise) {
+    const loadPromise: Promise<MermaidApi> = import("mermaid").then(
+      (mermaidModule: { default: MermaidApi }): MermaidApi => {
+        return mermaidModule.default;
+      },
+    );
+
+    mermaidLoadPromise = loadPromise;
+
+    /*
+     * A failed chunk load (flaky network, deploy rotating hashed chunk
+     * names) must not be cached forever — clear the slot so the next
+     * diagram retries the import. The reset rides a side branch of the
+     * promise: the original is still returned below, so the caller that
+     * triggered this load sees the rejection through its own error path.
+     */
+    loadPromise.catch((): void => {
+      if (mermaidLoadPromise === loadPromise) {
+        mermaidLoadPromise = null;
+      }
+    });
+  }
+  return mermaidLoadPromise;
+};
+
+const initializeMermaid: (mermaid: MermaidApi, theme: Theme) => void = (
+  mermaid: MermaidApi,
+  theme: Theme,
+): void => {
   const isDark: boolean = theme === Theme.Dark;
 
   mermaid.initialize({
@@ -120,10 +160,8 @@ const initializeMermaid: (theme: Theme) => void = (theme: Theme): void => {
   });
 };
 
-initializeMermaid(Theme.Light);
-
-// Mermaid diagram component
-const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
+// Mermaid diagram component (exported so tests can exercise the lazy load directly)
+export const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
   chart,
 }: {
   chart: string;
@@ -136,27 +174,34 @@ const MermaidDiagram: FunctionComponent<{ chart: string }> = ({
     let isCancelled: boolean = false;
 
     const renderDiagram: () => Promise<void> = async (): Promise<void> => {
-      if (containerRef.current) {
+      try {
+        /*
+         * Dynamic load first; a failed chunk load surfaces through the same
+         * error path as a failed render. Theme setup MUST follow the load —
+         * there is deliberately no module-scope initialization any more.
+         */
+        const mermaid: MermaidApi = await loadMermaid();
+        if (!containerRef.current || isCancelled) {
+          return;
+        }
         containerRef.current.innerHTML = "";
-        try {
-          initializeMermaid(theme);
-          const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-          const { svg } = await mermaid.render(id, chart);
-          if (containerRef.current && !isCancelled) {
-            containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
-              USE_PROFILES: { svg: true, svgFilters: true },
-              ADD_TAGS: ["foreignObject"],
-            });
-          }
-        } catch (error) {
-          if (containerRef.current && !isCancelled) {
-            const errorMessage: string = String(error);
-            const errorEl: HTMLPreElement = document.createElement("pre");
-            errorEl.className = "text-red-500";
-            errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
-            containerRef.current.innerHTML = "";
-            containerRef.current.appendChild(errorEl);
-          }
+        initializeMermaid(mermaid, theme);
+        const id: string = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+        const { svg } = await mermaid.render(id, chart);
+        if (containerRef.current && !isCancelled) {
+          containerRef.current.innerHTML = DOMPurify.sanitize(svg, {
+            USE_PROFILES: { svg: true, svgFilters: true },
+            ADD_TAGS: ["foreignObject"],
+          });
+        }
+      } catch (error) {
+        if (containerRef.current && !isCancelled) {
+          const errorMessage: string = String(error);
+          const errorEl: HTMLPreElement = document.createElement("pre");
+          errorEl.className = "text-red-500";
+          errorEl.textContent = `Error rendering diagram: ${errorMessage}`;
+          containerRef.current.innerHTML = "";
+          containerRef.current.appendChild(errorEl);
         }
       }
     };

package/UI/Components/Modal/Modal.tsx

@@ -413,7 +413,7 @@ const Modal: FunctionComponent<ComponentProps> = (
   return (
     <div className="relative z-50">
       <div
-        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out motion-reduce:transition-none ${
+        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-150 ease-out motion-reduce:transition-none ${
           hasEntered ? "opacity-100" : "opacity-0"
         }`}
         data-testid="modal-backdrop"
@@ -429,7 +429,7 @@ const Modal: FunctionComponent<ComponentProps> = (
         <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(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}`}
+            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-150 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}

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -47,7 +47,7 @@ import List from "../List/List";
 import { ListDetailProps } from "../List/ListRow";
 import ConfirmModal from "../Modal/ConfirmModal";
 import Modal, { ModalWidth } from "../Modal/Modal";
-import MarkdownViewer from "../Markdown.tsx/MarkdownViewer";
+import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
 import Icon from "../Icon/Icon";
 import Filter from "../ModelFilter/Filter";
 import { DropdownOption, DropdownOptionLabel } from "../Dropdown/Dropdown";

package/UI/Components/ModelTable/useCustomFieldColumns.ts

@@ -4,7 +4,7 @@ import {
   getCustomFieldColumns,
   getCustomFieldDefinitions,
 } from "./CustomFieldColumns";
-import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import ModelListCache from "../../Utils/ModelListCache";
 import ProjectUtil from "../../Utils/Project";
 import { Logger } from "../../Utils/Logger";
 import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
@@ -96,8 +96,14 @@ const useCustomFieldColumns: UseCustomFieldColumnsFunction = <
       setError("");
 
       try {
-        const result: ListResult<BaseModel> = await ModelAPI.getList<BaseModel>(
-          {
+        /*
+         * Through ModelListCache rather than ModelAPI: a table mounts two
+         * instances of this hook (the facet bar and the column set), and both
+         * want the same definition list - the cache turns that into one
+         * request, shared for the next minute.
+         */
+        const result: ListResult<BaseModel> =
+          await ModelListCache.getList<BaseModel>({
             modelType: customFieldsModelType,
             query: {
               projectId: projectId,
@@ -113,8 +119,8 @@ const useCustomFieldColumns: UseCustomFieldColumnsFunction = <
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
             } as any,
             sort: {},
-          },
-        );
+            projectId: projectId,
+          });
 
         if (isCancelled) {
           return;

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -114,6 +114,13 @@ const MoreMenu: React.ForwardRefExoticComponent<
 
     const [isDropdownVisible, setDropdownVisible] = useState<boolean>(false);
 
+    /*
+     * The menu is mounted in its closed state (faded, slightly shrunk towards
+     * origin-top-right) and flipped open one frame later so the browser has
+     * something to transition from — the same pattern Modal uses.
+     */
+    const [hasMenuEntered, setHasMenuEntered] = useState<boolean>(false);
+
     useEffect(() => {
       setDropdownVisible(isComponentVisible);
       if (isComponentVisible) {
@@ -123,6 +130,30 @@ const MoreMenu: React.ForwardRefExoticComponent<
       }
     }, [isComponentVisible]);
 
+    useEffect(() => {
+      if (!isComponentVisible) {
+        setHasMenuEntered(false);
+        return undefined;
+      }
+
+      const open: () => void = (): void => {
+        setHasMenuEntered(true);
+      };
+
+      const frame: number = requestAnimationFrame(open);
+
+      /*
+       * A hidden or throttled tab never runs an animation frame; the timer
+       * skips the transition rather than leaving the menu at zero opacity.
+       */
+      const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+      return () => {
+        cancelAnimationFrame(frame);
+        clearTimeout(fallbackTimer);
+      };
+    }, [isComponentVisible]);
+
     useEffect(() => {
       if (props.isDisabled && isComponentVisible) {
         setIsComponentVisible(false);
@@ -427,7 +458,14 @@ const MoreMenu: React.ForwardRefExoticComponent<
           <div
             ref={ref}
             id={menuId}
-            className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg bg-white shadow-xl ring-1 ring-gray-200 focus:outline-none py-1"
+            /*
+             * 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 mt-2 w-56 origin-top-right 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 ${
+              hasMenuEntered ? "opacity-100" : "opacity-0 scale-95"
+            }`}
             role="menu"
             aria-orientation="vertical"
             aria-labelledby={buttonId}

package/UI/Components/Navbar/NavBar.tsx

@@ -65,6 +65,14 @@ export interface ComponentProps {
     description: string;
     link: URL;
   };
+  /*
+   * When true, the document-level Cmd/Ctrl+K shortcut that toggles the
+   * products menu is not registered — for apps where another surface (e.g. a
+   * command palette) owns that shortcut. The menu itself stays fully usable
+   * via its trigger button. Defaults to false: existing consumers keep the
+   * shortcut.
+   */
+  disableCommandKShortcut?: boolean | undefined;
   className?: string;
   // Legacy support for children-based usage
   children?: ReactElement | Array<ReactElement>;
@@ -165,6 +173,11 @@ const Navbar: FunctionComponent<ComponentProps> = (
 
   // Open/close the products menu with Cmd/Ctrl + K from anywhere.
   useEffect(() => {
+    if (props.disableCommandKShortcut) {
+      // Another surface (e.g. a command palette) owns Cmd/Ctrl+K.
+      return;
+    }
+
     const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
       event: KeyboardEvent,
     ): void => {
@@ -180,7 +193,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
     return () => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
     };
-  }, []);
+  }, [props.disableCommandKShortcut]);
 
   // More menu open/close.
   const openMoreMenu: () => void = (): void => {

package/UI/Components/OrderedStatesList/OrderedStatesList.tsx

@@ -1,8 +1,8 @@
 import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
-import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon, { SizeProp } from "../Icon/Icon";
 import Item from "./Item";
+import Skeleton from "../Skeleton/Skeleton";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { ReactElement } from "react";
@@ -33,11 +33,49 @@ type OrderedStatesListFunction = <T extends GenericObject>(
 const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
   props: ComponentProps<T>,
 ): ReactElement => {
-  if (props.isLoading) {
-    return <ComponentLoader />;
+  /*
+   * A refetch with states already on screen keeps them visible and dims
+   * them; the skeleton stack is only for a load with nothing to show yet.
+   */
+  const isRefetchingWithData: boolean =
+    Boolean(props.isLoading) && props.data.length > 0;
+
+  if (props.isLoading && props.data.length === 0) {
+    /*
+     * Three card-shaped placeholders where the ordered state cards will
+     * land (matching Item's rounded bordered card), so the page keeps its
+     * shape instead of collapsing to a centered spinner.
+     */
+    return (
+      <div
+        data-testid="ordered-states-list-skeleton-loader"
+        role="status"
+        aria-live="polite"
+        className="m-32 text-center"
+      >
+        <span className="sr-only">Loading...</span>
+        {[0, 1, 2].map((index: number) => {
+          return (
+            <div key={index} className="w-fit m-auto">
+              <Skeleton className="h-32 w-64 rounded p-10" />
+              {index < 2 && (
+                <div className="items-center m-10">
+                  <Skeleton className="m-auto h-5 w-5" />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
   }
 
-  if (props.error) {
+  /*
+   * Loading still wins over error and empty (same priority as before the
+   * skeletons): while a refetch is in flight the stale states render, never
+   * a stale error or a premature "no items".
+   */
+  if (!props.isLoading && props.error) {
     return (
       <ErrorMessage
         message={props.error}
@@ -82,7 +120,14 @@ const OrderedStatesList: OrderedStatesListFunction = <T extends GenericObject>(
   }
 
   return (
-    <div className="m-32 text-center">
+    <div
+      data-testid="ordered-states-list-content"
+      className={`m-32 text-center${
+        isRefetchingWithData
+          ? " opacity-60 pointer-events-none transition-opacity duration-150"
+          : " transition-opacity duration-150"
+      }`}
+    >
       {props.error && <p>{props.error}</p>}
       {!props.error &&
         props.data &&

package/UI/Components/SideMenu/CountModelSideMenuItem.tsx

@@ -7,7 +7,14 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import IconProp from "../../../Types/Icon/IconProp";
 import Link from "../../../Types/Link";
-import React, { ReactElement, useEffect, useState, useCallback } from "react";
+import React, {
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
 import GlobalEvents from "../../Utils/GlobalEvents";
 
 export const REFRESH_SIDEBAR_COUNT_EVENT: string = "REFRESH_SIDEBAR_COUNTS";
@@ -70,7 +77,39 @@ const CountModelSideMenuItem: <TBaseModel extends BaseModel>(
       props.onCountFetchInit,
     ]);
 
+  /*
+   * Side menus rebuild `countQuery` / `requestOptions` as fresh object
+   * literals on every render, so their identity changes on every parent
+   * re-render (which happens on every in-section navigation). Guard the fetch
+   * with a value-level compare - the same JSON.stringify-in-a-ref pattern
+   * BaseModelTable uses for its `props.query` - so only a real change
+   * re-issues the count request. The global refresh event below still forces
+   * a refetch regardless of this guard.
+   */
+  const lastFetchedModelTypeRef: MutableRefObject<
+    { new (): TBaseModel } | undefined
+  > = useRef<{ new (): TBaseModel } | undefined>(undefined);
+  const lastFetchedQueryJsonRef: MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
+
   useEffect(() => {
+    const queryJson: string = JSON.stringify({
+      countQuery: props.countQuery || null,
+      requestOptions: props.requestOptions || null,
+    });
+
+    // only fetch if the query has changed by value (or on first mount).
+    if (
+      lastFetchedModelTypeRef.current === props.modelType &&
+      lastFetchedQueryJsonRef.current === queryJson
+    ) {
+      return;
+    }
+
+    lastFetchedModelTypeRef.current = props.modelType;
+    lastFetchedQueryJsonRef.current = queryJson;
+
     fetchCount().catch((err: Error) => {
       setError(API.getFriendlyMessage(err));
     });

package/UI/Components/SideOver/SideOver.tsx

@@ -80,6 +80,32 @@ const SideOver: FunctionComponent<ComponentProps> = (
   const titleId: string = useId();
   const descriptionId: string = useId();
 
+  /*
+   * The panel is mounted parked off the right edge and flipped into place one
+   * frame later so the browser has something to transition from — the same
+   * pattern Modal uses for its entrance.
+   */
+  const [hasEntered, setHasEntered] = useState<boolean>(false);
+
+  useEffect(() => {
+    const open: () => void = (): void => {
+      setHasEntered(true);
+    };
+
+    const frame: number = requestAnimationFrame(open);
+
+    /*
+     * A hidden or throttled tab never runs an animation frame; the timer
+     * skips the transition rather than leaving the panel offscreen.
+     */
+    const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(fallbackTimer);
+    };
+  }, []);
+
   const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(
     getPortalTarget,
   );
@@ -148,7 +174,16 @@ const SideOver: FunctionComponent<ComponentProps> = (
         className="pointer-events-none fixed inset-0 flex justify-end"
         data-testid="side-over-layer"
       >
-        <div className={`pointer-events-auto w-full ${widthClass}`}>
+        {/*
+         * Settled state carries no transform class at all: a lingering
+         * translate would make the panel the containing block for
+         * position:fixed descendants (the Modal invariant).
+         */}
+        <div
+          className={`pointer-events-auto w-full ${widthClass} transition-transform duration-200 ease-out motion-reduce:transition-none ${
+            hasEntered ? "" : "translate-x-full"
+          }`}
+        >
           <div className="flex h-full flex-col bg-white shadow-xl">
             <div className="flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6">
               <div className="flex items-start justify-between space-x-3">
@@ -176,7 +211,7 @@ const SideOver: FunctionComponent<ComponentProps> = (
                     type="button"
                     title="Close panel"
                     data-testid="close-button"
-                    className="text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-gray-400 transition-colors duration-150 ease-out hover:text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
                   >
                     <span className="sr-only">Close panel</span>