@lotics/ui 11.7.2 → 11.7.4

package/docs/catalog.md

@@ -676,10 +676,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   own scroll, like `OptionList`): the anchored floating surface. **NON-MODAL**: the anchored
   popover has NO blocking overlay — the rest of the page stays interactive, and clicking another
   control both dismisses this popover AND activates that control in one click; clicking outside,
-  scrolling an ancestor, or Escape dismisses. Only the `small` (bottom-sheet) presentation is
-  modal (scrim). `PopoverContent` already insets its body 12px — put content directly in it,
-  NEVER add your own padding `View` (that double-pads); title/actions go in `PopoverHeader` /
-  `PopoverFooter`.
+  scrolling an ancestor, or Escape dismisses. Interactions inside a layer the popover opened
+  from within (a nested popover, an `Alert` confirm, a full-screen Modal like the file preview)
+  never dismiss it — clicks, scrolls, and Escape belong to that layer until it closes. Only the
+  `small` (bottom-sheet) presentation is modal (scrim). `PopoverContent` already insets its
+  body 12px — put content directly in it, NEVER add your own padding `View` (that double-pads);
+  title/actions go in `PopoverHeader` / `PopoverFooter`.
 - **`popover_nav`** — `usePopoverNav` + `PopoverScreen` + `PopoverNavHeader` — the popover's
   built-in mini-router: EVERY `Popover` provides the nav context (`navigate(route)` pushes,
   `goBack`, `currentRoute`, `canGoBack`; resets on close), `PopoverScreen route=""` is the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.7.2",
+  "version": "11.7.4",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/combobox.tsx

@@ -511,7 +511,6 @@ export function ComboboxContent(props: ComboboxContentProps) {
                 const label = opt.label ?? opt.value;
                 const content = !isCustom ? renderOptionContent?.(opt) : undefined;
                 const shared = {
-                  key: `${row.kind}-${opt.value}`,
                   nativeID: row.nativeID,
                   testID: isCustom ? "combobox-custom-option" : `combobox-option-${opt.value}`,
                   role: "option" as const,
@@ -526,9 +525,10 @@ export function ComboboxContent(props: ComboboxContentProps) {
                 // Rich row (custom content, or a label over its description) → the growing
                 // `MenuListItem`; a plain option stays the fixed-height `MenuButton`.
                 return content || desc ? (
-                  <MenuListItem {...shared} title={content ?? label} description={content ? undefined : desc} />
+                  <MenuListItem key={`${row.kind}-${opt.value}`} {...shared} title={content ?? label} description={content ? undefined : desc} />
                 ) : (
                   <MenuButton
+                    key={`${row.kind}-${opt.value}`}
                     {...shared}
                     title={
                       <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>

package/src/file_gallery_modal.tsx

@@ -115,6 +115,7 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
   // additionally can't hold filename + every action inline (the close button gets
   // pushed off-screen), so the remaining actions collapse into a ⋯ menu.
   const { small } = useScreenSize();
+  const locale = useLoticsLocale();
 
   const close = useCallback(() => onIndexChange(null), [onIndexChange]);
   const next = useCallback(() => {
@@ -154,7 +155,7 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
   const file = files[activeIndex];
   if (!file) return null;
 
-  const l = { ...useLoticsLocale().gallery, ...labels };
+  const l = { ...locale.gallery, ...labels };
   const isImage = isImageMimeType(file.mimeType);
   const total = files.length;
   const rotated = rot.rotationFor(file.id) !== 0;

package/src/option_list.tsx

@@ -122,7 +122,6 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
             const label = opt.label ?? opt.value;
             const content = row.kind === "option" ? renderOptionContent?.(opt) : undefined;
             const shared = {
-              key: `${row.kind}-${opt.value}`,
               nativeID: row.nativeID,
               testID: isCustom ? "option-list-custom" : opt.testID || `picker-option-${opt.value}`,
               role: "option" as const,
@@ -146,9 +145,10 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
             // description — is `MenuListItem`: the listbox row that GROWS. `MenuButton` is
             // the fixed-height single-line menu row, and stays that for plain options.
             return content || desc ? (
-              <MenuListItem {...shared} title={content ?? label} description={content ? undefined : desc} />
+              <MenuListItem key={`${row.kind}-${opt.value}`} {...shared} title={content ?? label} description={content ? undefined : desc} />
             ) : (
               <MenuButton
+                key={`${row.kind}-${opt.value}`}
                 {...shared}
                 title={
                   <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>

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;
+}