@ai-matrx/design-system 0.42.1 → 0.44.0

package/dist/data-table/data-row-window.js

@@ -2,7 +2,7 @@
 "use client";
 
 // src/data-table/DataRowWindow.tsx
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 
 // src/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -124,6 +124,15 @@ function useIsMobile() {
   return isMobile;
 }
 
+// src/layer-front.ts
+var LAYER_FRONT_EVENT = "matrx:layer-front";
+function announceLayerFront(element) {
+  if (typeof document === "undefined") return;
+  document.dispatchEvent(
+    new CustomEvent(LAYER_FRONT_EVENT, { detail: { element } })
+  );
+}
+
 // src/dialog.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var DialogWindowedByDefaultContext = React4.createContext(false);
@@ -194,6 +203,8 @@ var DialogContent = React4.forwardRef(
     dismissOnOutsideClick = false,
     onInteractOutside,
     onEscapeKeyDown,
+    onPointerDownCapture,
+    onFocusCapture,
     style,
     ...props
   }, ref) => {
@@ -206,6 +217,24 @@ var DialogContent = React4.forwardRef(
     const [containerEl, setContainerEl] = React4.useState(
       null
     );
+    const stacks = windowed && windowedByDefault;
+    const [behind, setBehind] = React4.useState(false);
+    React4.useEffect(() => {
+      if (!stacks || !containerEl) return;
+      const onFront = (event) => {
+        const element = event.detail?.element ?? null;
+        if (element && (element === containerEl || containerEl.contains(element))) return;
+        setBehind(true);
+      };
+      document.addEventListener(LAYER_FRONT_EVENT, onFront);
+      announceLayerFront(containerEl);
+      return () => document.removeEventListener(LAYER_FRONT_EVENT, onFront);
+    }, [stacks, containerEl]);
+    const bringToFront = () => {
+      if (!stacks || !containerEl) return;
+      setBehind(false);
+      announceLayerFront(containerEl);
+    };
     const [offset, setOffset] = React4.useState({ x: 0, y: 0 });
     const dragRef = React4.useRef(null);
     const handle = React4.useMemo(() => {
@@ -264,10 +293,20 @@ var DialogContent = React4.forwardRef(
             // z=1000); staying below that boundary makes a newly focused window
             // usable without coupling the two systems.
             !isModal && !windowedByDefault && "z-[900]",
+            // Another layer came to the front after this window (layer-front.ts).
+            stacks && behind && "z-[999]",
             // Without an overlay the card needs its own separation from the page.
             windowed && "shadow-2xl ring-1 ring-border/60"
           ),
           style: windowed && (offset.x !== 0 || offset.y !== 0) ? { ...style, translate: `${offset.x}px ${offset.y}px` } : style,
+          onPointerDownCapture: (event) => {
+            onPointerDownCapture?.(event);
+            if (behind) bringToFront();
+          },
+          onFocusCapture: (event) => {
+            onFocusCapture?.(event);
+            if (behind) bringToFront();
+          },
           onInteractOutside: (event) => {
             onInteractOutside?.(event);
             if (windowed && !dismissOnOutsideClick) event.preventDefault();
@@ -3100,7 +3139,7 @@ function CopyButtons(props) {
 
 // src/data-table/MatrxUuidCell.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useRef as useRef5,
   useState as useState7
 } from "react";
@@ -3172,7 +3211,7 @@ function MatrxUuidCell({
   const [opening, setOpening] = useState7(false);
   const [peekOpen, setPeekOpen] = useState7(false);
   const timer = useRef5(null);
-  useEffect4(
+  useEffect5(
     () => () => {
       if (timer.current) clearTimeout(timer.current);
     },
@@ -3500,7 +3539,7 @@ function DataRowWindow({
   const hasTabs = hasEdit && children == null;
   const initialTab = defaultTab ?? (hasEdit ? "edit" : "view");
   const [tab, setTab] = useState8(initialTab);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isOpen) return;
     setTab(defaultTab ?? (hasEdit ? "edit" : "view"));
   }, [isOpen, windowId, hasEdit, defaultTab]);