nuvox 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project are documented here.
 Format loosely follows [Keep a Changelog](https://keepachangelog.com/).
 
+## [0.1.4]
+
+### Fixed
+- The `[data-nuvox-portal]` exemption added in 0.1.3 fixed a nested
+  overlay closing its own container, but was too broad: it exempted
+  a click inside ANY portal, including one belonging to a completely
+  unrelated SIBLING overlay that merely shares a common enclosing
+  overlay. Two `DropdownMenu`s both living inside the same `Popover`
+  are siblings of each other, not nested in each other — opening one
+  while the other was open left both on screen at once, only closing
+  on a re-click or a selection. `useClickOutside` now walks the real
+  relationship instead of doing a blanket portal check: it follows
+  "which portal contains this click" → "whose trigger opened that
+  portal" → "is that trigger contained in my own refs, or itself
+  inside another portal" (repeating for arbitrarily deep nesting) —
+  which correctly tells "genuinely nested inside me" apart from
+  "elsewhere inside a shared ancestor," however many levels deep.
+  `ThemedPortal` now tracks each portal's own anchor element for this
+  to walk. See the "Sibling overlays" and first two "Nested overlay"
+  cases in `tests/nested-overlays.test.tsx`.
+- A `DropdownMenu` (or `Select`/`Combobox`/`ColorPicker`) nested
+  inside an open `Popover` rendered BEHIND it: each component's CSS
+  sets a fixed z-index tier (`Popover` 1060, `DropdownMenu`/`Select`/
+  `Combobox` 1050, `Tooltip` 1100, `Toast` 1200, ...), correct for
+  independent, non-nested overlays but backwards for this one
+  relationship — the nested overlay needs to paint above its own
+  container regardless of which tier either belongs to. `ThemedPortal`
+  now detects when an overlay's own trigger sits inside another,
+  already-open overlay's portaled content, and in that case only,
+  assigns it an inline z-index above the shared 1150 base (below
+  `Toast`'s 1200, which stays on top of everything as a global
+  notification regardless of nesting) via `position: relative` on the
+  portal wrapper itself — not the component's own CSS class, so
+  ordinary non-nested overlays are completely untouched. Verified safe
+  for `Popover`/`DropdownMenu` specifically: both position their
+  content with inline `position: fixed` (`useFloatingPosition`), which
+  isn't affected by an ancestor's `position: relative` — only
+  `transform`/`filter`/etc. would change a fixed descendant's
+  containing block. Not verified against every possible pairing (e.g.
+  a `position: absolute` `Tooltip` ending up as the nested one) — this
+  covers the reported and tested composition, not every combination.
+
 ## [0.1.3]
 
 ### Fixed

package/dist/react/index.cjs

@@ -1448,6 +1448,12 @@ function withAccentOverride(color, children) {
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var TRACKED_ATTRIBUTES = ["data-theme", "data-accent"];
+var portalAnchors = /* @__PURE__ */ new WeakMap();
+function getPortalAnchor(portalNode) {
+  return portalAnchors.get(portalNode) ?? null;
+}
+var nextNestedStackOffset = 0;
+var NESTED_OVERRIDE_BASE_Z_INDEX = 1150;
 function ThemedPortal({ anchorRef, children, container }) {
   const portalElRef = (0, import_react.useRef)(null);
   if (!portalElRef.current && typeof document !== "undefined") {
@@ -1459,6 +1465,14 @@ function ThemedPortal({ anchorRef, children, container }) {
     const portalEl = portalElRef.current;
     if (!portalEl) return;
     target.appendChild(portalEl);
+    if (anchorRef.current) {
+      portalAnchors.set(portalEl, anchorRef.current);
+      const enclosingPortal = anchorRef.current.closest("[data-nuvox-portal]");
+      if (enclosingPortal) {
+        portalEl.style.position = "relative";
+        portalEl.style.zIndex = String(NESTED_OVERRIDE_BASE_Z_INDEX + nextNestedStackOffset++);
+      }
+    }
     function syncAttribute(attr) {
       const anchor2 = anchorRef.current;
       if (!anchor2 || !portalEl) return;
@@ -16529,6 +16543,19 @@ function getOpenIntent(key) {
 
 // src/theme-engine/useClickOutside.ts
 var import_react25 = require("react");
+function isNestedWithinRefs(target, refs) {
+  if (!(target instanceof Element)) return false;
+  let current = target;
+  for (let depth = 0; depth < 20; depth++) {
+    const portalNode = current.closest("[data-nuvox-portal]");
+    if (!portalNode) return false;
+    const anchor = getPortalAnchor(portalNode);
+    if (!anchor) return false;
+    if (refs.some((ref) => ref.current?.contains(anchor))) return true;
+    current = anchor;
+  }
+  return false;
+}
 function useClickOutside(isOpen, refs, onOutsideClick) {
   (0, import_react25.useEffect)(() => {
     if (!isOpen) return;
@@ -16536,7 +16563,7 @@ function useClickOutside(isOpen, refs, onOutsideClick) {
       const target = e.target;
       const isInside = refs.some((ref) => ref.current?.contains(target));
       if (isInside) return;
-      if (target instanceof Element && target.closest("[data-nuvox-portal]")) return;
+      if (isNestedWithinRefs(target, refs)) return;
       onOutsideClick();
     }
     document.addEventListener("pointerdown", onPointerDown, true);