@lotics/ui 11.7.3 → 11.8.0

package/src/popover.tsx

@@ -13,6 +13,11 @@ import { IconButton } from "./icon_button";
 import { Portal } from "./portal";
 import { Divider } from "./divider";
 import { useOverlayScope } from "./overlay_scope";
+import {
+  hasModalLayerAbove,
+  isInLayerAbove,
+  snapshotOpenModalLayers,
+} from "./popover_layers";
 import { PopoverNavContext, type PopoverNavContextValue } from "./popover_nav";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
@@ -216,6 +221,11 @@ export function PopoverContent(props: PopoverContentProps) {
   // hover/focus — so positioning cannot rely on `triggerRef.current` still being
   // live when it runs.
   const triggerRectRef = useRef<DOMRect | null>(null);
+  // Modal layers ([aria-modal]) open at the moment this popover opened. Any
+  // aria-modal element that appears LATER was opened from within this popover
+  // (a file-preview Modal, an Alert confirm) and stacks ABOVE it — interactions
+  // inside it must not dismiss this popover. See popover_layers.ts.
+  const modalsAtOpenRef = useRef<ReadonlySet<Element> | null>(null);
 
   const handleClose = useCallback(() => {
     if (!open) return;
@@ -232,6 +242,7 @@ export function PopoverContent(props: PopoverContentProps) {
     if (triggerRef.current) {
       triggerRectRef.current = triggerRef.current.getBoundingClientRect();
     }
+    modalsAtOpenRef.current = snapshotOpenModalLayers(document);
   }, [open, small, triggerRef]);
 
   // Focus management: when the popover opens, remember what had focus and move
@@ -301,6 +312,12 @@ export function PopoverContent(props: PopoverContentProps) {
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key !== "Escape") return;
 
+      // A modal opened from within (a file preview, an Alert) is stacked above
+      // this popover: RN-web's own document keyup listener closes the topmost
+      // modal. Stopping the event here would instead close this popover and
+      // unmount that modal with it — so yield while any such layer is open.
+      if (hasModalLayerAbove(document, modalsAtOpenRef.current)) return;
+
       const allPopovers = document.querySelectorAll("[data-popover]");
       const lastPopover = allPopovers[allPopovers.length - 1];
       if (popoverRef.current !== lastPopover) return;
@@ -321,10 +338,11 @@ export function PopoverContent(props: PopoverContentProps) {
   // this popover's content AND its trigger. We listen on `click` (not pointerdown)
   // in the CAPTURE phase so that clicking ANOTHER field's trigger completes that
   // trigger's own press — the old popover dismisses AND the new one opens in a
-  // single click, instead of the press being cancelled mid-gesture. A click INSIDE
-  // a deeper (nested) popover keeps this one open — a Select opened inside a filter
-  // popover must not dismiss the filter. The bottom sheet (`small`) is modal and
-  // dismisses via its scrim, so it opts out here.
+  // single click, instead of the press being cancelled mid-gesture. A click inside
+  // a layer stacked ABOVE this popover keeps it open — a Select nested inside a
+  // filter popover, or a file-preview Modal / Alert opened from within — those are
+  // interactions WITH the popover's own flow, not a move away from it. The bottom
+  // sheet (`small`) is modal and dismisses via its scrim, so it opts out here.
   useEffect(() => {
     if (!open || small) return;
     const onOutsideClick = (e: MouseEvent) => {
@@ -332,12 +350,8 @@ export function PopoverContent(props: PopoverContentProps) {
       if (!node) return;
       if (popoverRef.current?.contains(node)) return; // inside my content
       if (triggerRef.current?.contains(node)) return; // on my trigger — its own press toggles
-      // Keep open when the click is inside a DEEPER popover (e.g. a Select opened
-      // inside this one). `data-popover-level` is the same nesting depth as z-index.
       const myLevel = Number(popoverRef.current?.getAttribute("data-popover-level") ?? "0");
-      const el = node instanceof Element ? node : node.parentElement;
-      const hit = el?.closest("[data-popover]");
-      if (hit && Number(hit.getAttribute("data-popover-level") ?? "0") > myLevel) return; // deeper popover
+      if (isInLayerAbove(node, myLevel, modalsAtOpenRef.current)) return;
       onOpenChange(false);
     };
     document.addEventListener("click", onOutsideClick, true);
@@ -476,6 +490,7 @@ export function PopoverContent(props: PopoverContentProps) {
       setPosition((previous) => (previous === null ? previous : null));
       setIsBottomSheetShown((previous) => (previous ? false : previous));
       triggerRectRef.current = null;
+      modalsAtOpenRef.current = null;
       return;
     }
 
@@ -511,9 +526,14 @@ export function PopoverContent(props: PopoverContentProps) {
     // page or any ancestor is a "moved on" signal, so we DISMISS (as native
     // <select> and most menu systems do) rather than chase the trigger and risk a
     // panel detached from an off-screen anchor. Scrolling the popover's OWN content
-    // (a long option list) must NOT close it. Capture catches nested scrollers.
+    // (a long option list) must NOT close it, and neither must a scroll inside a
+    // layer stacked above it (a nested popover's list, a file-preview Modal opened
+    // from within) — the anchor didn't move. Capture catches nested scrollers.
     const onScroll = (e: Event) => {
-      if (e.target instanceof Node && popoverRef.current?.contains(e.target)) return;
+      const node = e.target instanceof Node ? e.target : null;
+      if (node && popoverRef.current?.contains(node)) return;
+      const myLevel = Number(popoverRef.current?.getAttribute("data-popover-level") ?? "0");
+      if (node && isInLayerAbove(node, myLevel, modalsAtOpenRef.current)) return;
       onOpenChange(false);
     };
     window.addEventListener("scroll", onScroll, true);
@@ -626,6 +646,16 @@ export function PopoverContent(props: PopoverContentProps) {
             }),
         }}
         onClick={(e) => e.stopPropagation()}
+        // React synthetic events bubble through portals via the REACT tree, so a
+        // keydown inside this popover — or inside a Modal/Alert opened from it,
+        // which is a React child even though it portals to document.body — would
+        // reach the TRIGGER's ancestors (e.g. a grid cell's Escape-cancels-edit
+        // onKeyDown) and let a lower layer act on a higher layer's keys, on
+        // keydown, before any keyup layering logic runs. Keyboard sibling of the
+        // click curtain above. Keyup deliberately keeps flowing: RN-web Modal
+        // closes on a document-level keyup listener, and this popover's own
+        // Escape handling is a document capture keyup — neither must be starved.
+        onKeyDown={(e) => e.stopPropagation()}
       >
         {small && (
           <View

package/src/popover_layers.test.ts

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+import { describe, expect, test, beforeEach } from "vitest";
+import {
+  hasModalLayerAbove,
+  isInLayerAbove,
+  snapshotOpenModalLayers,
+} from "./popover_layers";
+
+function addModal(): HTMLElement {
+  const modal = document.createElement("div");
+  modal.setAttribute("aria-modal", "true");
+  const inner = document.createElement("button");
+  modal.appendChild(inner);
+  document.body.appendChild(modal);
+  return modal;
+}
+
+function addPopover(level: number): HTMLElement {
+  const popover = document.createElement("div");
+  popover.setAttribute("data-popover", "true");
+  popover.setAttribute("data-popover-level", String(level));
+  const inner = document.createElement("button");
+  popover.appendChild(inner);
+  document.body.appendChild(popover);
+  return popover;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("isInLayerAbove", () => {
+  test("plain page node is not above", () => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    expect(isInLayerAbove(el, 0, new Set())).toBe(false);
+  });
+
+  test("document itself (page scroll target) is not above", () => {
+    expect(isInLayerAbove(document, 0, new Set())).toBe(false);
+  });
+
+  test("text node resolves through its parent element", () => {
+    const modal = addModal();
+    const text = document.createTextNode("hello");
+    modal.appendChild(text);
+    expect(isInLayerAbove(text, 0, new Set())).toBe(true);
+  });
+
+  test("node inside a deeper nested popover is above", () => {
+    const nested = addPopover(1);
+    expect(isInLayerAbove(nested.firstChild as Node, 0, new Set())).toBe(true);
+  });
+
+  test("node inside a same-level popover is not above", () => {
+    const sibling = addPopover(0);
+    expect(isInLayerAbove(sibling.firstChild as Node, 0, new Set())).toBe(false);
+  });
+
+  test("node inside a modal opened AFTER the popover is above (file preview)", () => {
+    const snapshot = snapshotOpenModalLayers(document);
+    const preview = addModal();
+    expect(isInLayerAbove(preview.firstChild as Node, 0, snapshot)).toBe(true);
+  });
+
+  test("node inside the modal the popover LIVES IN is not above (drawer scroll dismisses)", () => {
+    const drawer = addModal();
+    const snapshot = snapshotOpenModalLayers(document);
+    expect(isInLayerAbove(drawer.firstChild as Node, 0, snapshot)).toBe(false);
+  });
+
+  test("stacked modals: only the one opened after the popover is above", () => {
+    const drawer = addModal();
+    const snapshot = snapshotOpenModalLayers(document);
+    const preview = addModal();
+    expect(isInLayerAbove(drawer.firstChild as Node, 0, snapshot)).toBe(false);
+    expect(isInLayerAbove(preview.firstChild as Node, 0, snapshot)).toBe(true);
+  });
+
+  test("null snapshot treats any modal ancestor as above", () => {
+    const modal = addModal();
+    expect(isInLayerAbove(modal.firstChild as Node, 0, null)).toBe(true);
+  });
+});
+
+describe("hasModalLayerAbove", () => {
+  test("false with no modals", () => {
+    expect(hasModalLayerAbove(document, new Set())).toBe(false);
+  });
+
+  test("false while only pre-existing modals are open (popover in a drawer)", () => {
+    addModal();
+    const snapshot = snapshotOpenModalLayers(document);
+    expect(hasModalLayerAbove(document, snapshot)).toBe(false);
+  });
+
+  test("true while a modal opened after the popover is open, false after it closes", () => {
+    addModal();
+    const snapshot = snapshotOpenModalLayers(document);
+    const preview = addModal();
+    expect(hasModalLayerAbove(document, snapshot)).toBe(true);
+    preview.remove();
+    expect(hasModalLayerAbove(document, snapshot)).toBe(false);
+  });
+
+  test("a reopened modal is a NEW element and counts as above", () => {
+    const snapshot = snapshotOpenModalLayers(document);
+    const first = addModal();
+    first.remove();
+    addModal();
+    expect(hasModalLayerAbove(document, snapshot)).toBe(true);
+  });
+});

package/src/popover_layers.ts

@@ -0,0 +1,57 @@
+// Layer-aware "outside" test for the non-modal anchored Popover.
+//
+// The popover dismisses on ambient signals — outside clicks, page scrolls,
+// Escape. "Outside" cannot be a DOM-containment test alone: overlays the
+// popover opens FROM WITHIN (a file-preview Modal, an Alert confirm, a nested
+// popover) are React children but DOM SIBLINGS — they portal to document.body
+// or a PortalHost — so containment misreads interactions inside them as "the
+// user moved on" and dismisses the popover, unmounting the very overlay being
+// used. Per WAI-ARIA, aria-modal content blocks interaction with everything
+// beneath it, so an event inside such a layer says nothing about the layers
+// underneath.
+//
+// A modal layer is ABOVE the popover exactly when it appeared AFTER the
+// popover opened — it can only have been opened from within. Anything already
+// open at that moment (the Dialog/Drawer the popover lives in) is part of the
+// page: scrolling a drawer body moves the popover's anchor and must still
+// dismiss. Callers snapshot the open modal set at open time and pass it in.
+
+export function snapshotOpenModalLayers(doc: Document): ReadonlySet<Element> {
+  return new Set(doc.querySelectorAll('[aria-modal="true"]'));
+}
+
+/**
+ * True when `node` sits inside an overlay stacked above the popover: a deeper
+ * nested popover, or a modal layer that opened after the popover did.
+ * `modalsAtOpen` null (no snapshot yet) is treated as "nothing was open".
+ */
+export function isInLayerAbove(
+  node: Node,
+  popoverLevel: number,
+  modalsAtOpen: ReadonlySet<Element> | null,
+): boolean {
+  const el = node instanceof Element ? node : node.parentElement;
+  if (!el) return false;
+  const popoverHit = el.closest("[data-popover]");
+  if (popoverHit && Number(popoverHit.getAttribute("data-popover-level") ?? "0") > popoverLevel) {
+    return true;
+  }
+  const modalHit = el.closest('[aria-modal="true"]');
+  return modalHit !== null && !(modalsAtOpen?.has(modalHit) ?? false);
+}
+
+/**
+ * True while any modal layer opened after the popover is still open. The
+ * popover's Escape handler yields then: RN-web's own document keyup listener
+ * closes the topmost modal, and stopping the event at the popover would
+ * instead close the popover and unmount that modal with it.
+ */
+export function hasModalLayerAbove(
+  doc: Document,
+  modalsAtOpen: ReadonlySet<Element> | null,
+): boolean {
+  for (const modal of doc.querySelectorAll('[aria-modal="true"]')) {
+    if (!(modalsAtOpen?.has(modal) ?? false)) return true;
+  }
+  return false;
+}

package/src/use_focus_ring.ts

@@ -1,4 +1,5 @@
 import { useCallback, useState } from "react";
+import { ensureModalityListeners, getInteractionModality } from "./interaction_modality";
 
 /**
  * Combine two optional event handlers into one. Either may be undefined.
@@ -17,31 +18,6 @@ export function composeHandler<E>(
   };
 }
 
-// `:focus-visible` is a MODALITY heuristic: a control shows its ring on keyboard
-// focus but not pointer focus. The kit no longer carries a global `:focus-visible`
-// CSS rule, so every control paints its own ring — and needs that same signal. One
-// focus event carries no modality, so it can only be read at the document level:
-// a single module-level tracker records the last interaction. Web-only — on native
-// / SSR there is no `document`, so it stays "pointer" and the ring is keyboard-gated
-// off (text-like inputs opt back in with `always`).
-type Modality = "keyboard" | "pointer";
-let lastModality: Modality = "pointer";
-let listenersInstalled = false;
-
-function ensureModalityListeners(): void {
-  if (listenersInstalled) return;
-  if (typeof document === "undefined") return;
-  listenersInstalled = true;
-  // Capture phase so the modality is recorded BEFORE any control's focus handler
-  // runs. Installed once for the app's lifetime (the browser's own `:focus-visible`
-  // heuristic listens the same way) — per-mount add/remove would be the bug.
-  const opts = { capture: true, passive: true } as const;
-  document.addEventListener("keydown", () => { lastModality = "keyboard"; }, opts);
-  document.addEventListener("pointerdown", () => { lastModality = "pointer"; }, opts);
-  document.addEventListener("mousedown", () => { lastModality = "pointer"; }, opts);
-  document.addEventListener("touchstart", () => { lastModality = "pointer"; }, opts);
-}
-
 export interface UseFocusRingOptions {
   /**
    * Ring on ANY focus, not just keyboard focus. For text-like inputs, which the
@@ -69,12 +45,13 @@ export interface FocusRingState {
  * Replaces the kit's removed global `:focus-visible` CSS rule: each interactive
  * primitive calls this and renders `FOCUS_RING` (`control_surface.ts`) when
  * `focusVisible`. App authors do the same for their own raw focusable elements.
+ * The keyboard-vs-pointer signal lives in `interaction_modality.ts`.
  */
 export function useFocusRing(options?: UseFocusRingOptions): FocusRingState {
   ensureModalityListeners();
   const [focused, setFocused] = useState(false);
   const onFocus = useCallback(() => setFocused(true), []);
   const onBlur = useCallback(() => setFocused(false), []);
-  const focusVisible = focused && (options?.always === true || lastModality === "keyboard");
+  const focusVisible = focused && (options?.always === true || getInteractionModality() === "keyboard");
   return { focusVisible, focused, focusProps: { onFocus, onBlur } };
 }