@wallarm-org/design-system 2.1.2-rc-fix-filter-cascade-tooltip.1 → 2.1.3

package/dist/components/Drawer/DrawerContent.d.ts

@@ -1,4 +1,4 @@
-import type { FC, ReactNode, Ref } from 'react';
+import { type FC, type ReactNode, type Ref } from 'react';
 export interface DrawerContentProps {
     children: ReactNode;
     asChild?: boolean;

package/dist/components/Drawer/DrawerContent.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { useContext } from "react";
 import { Dialog } from "@ark-ui/react/dialog";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
@@ -9,11 +10,13 @@ import { useNestedSameKindCount } from "./DrawerNestingContext.js";
 import { DrawerOverlay } from "./DrawerOverlay.js";
 import { DrawerPortal } from "./DrawerPortal.js";
 import { DrawerPositioner } from "./DrawerPositioner.js";
+import { DrawerAncestorIdsContext } from "./DrawerRoot.js";
 const DrawerContent = (t0)=>{
-    const $ = c(21);
+    const $ = c(27);
     const { children, asChild, ref } = t0;
     const testId = useTestId("content");
-    const { width, isResizing, overlay } = useDrawerContext();
+    const { width, isResizing, overlay, contentId } = useDrawerContext();
+    const ancestorIds = useContext(DrawerAncestorIdsContext);
     const nestedSameKindCount = useNestedSameKindCount();
     let t1;
     if ($[0] !== overlay) {
@@ -42,48 +45,68 @@ const DrawerContent = (t0)=>{
     } else t4 = $[6];
     const t5 = t4;
     let t6;
-    if ($[7] !== asChild || $[8] !== children || $[9] !== ref || $[10] !== t2 || $[11] !== t3 || $[12] !== t5 || $[13] !== testId) {
-        t6 = /*#__PURE__*/ jsx(Dialog.Content, {
+    if ($[7] !== ancestorIds || $[8] !== contentId) {
+        t6 = [
+            ...ancestorIds,
+            contentId
+        ];
+        $[7] = ancestorIds;
+        $[8] = contentId;
+        $[9] = t6;
+    } else t6 = $[9];
+    let t7;
+    if ($[10] !== children || $[11] !== t6) {
+        t7 = /*#__PURE__*/ jsx(DrawerAncestorIdsContext.Provider, {
+            value: t6,
+            children: children
+        });
+        $[10] = children;
+        $[11] = t6;
+        $[12] = t7;
+    } else t7 = $[12];
+    let t8;
+    if ($[13] !== asChild || $[14] !== ref || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t7 || $[19] !== testId) {
+        t8 = /*#__PURE__*/ jsx(Dialog.Content, {
             ref: ref,
             "data-testid": testId,
             "data-has-nested-same": t2,
             className: t3,
             style: t5,
             asChild: asChild,
-            children: children
+            children: t7
         });
-        $[7] = asChild;
-        $[8] = children;
-        $[9] = ref;
-        $[10] = t2;
-        $[11] = t3;
-        $[12] = t5;
-        $[13] = testId;
-        $[14] = t6;
-    } else t6 = $[14];
-    let t7;
-    if ($[15] !== isResizing || $[16] !== t6) {
-        t7 = /*#__PURE__*/ jsx(DrawerPositioner, {
+        $[13] = asChild;
+        $[14] = ref;
+        $[15] = t2;
+        $[16] = t3;
+        $[17] = t5;
+        $[18] = t7;
+        $[19] = testId;
+        $[20] = t8;
+    } else t8 = $[20];
+    let t9;
+    if ($[21] !== isResizing || $[22] !== t8) {
+        t9 = /*#__PURE__*/ jsx(DrawerPositioner, {
             isResizing: isResizing,
-            children: t6
+            children: t8
         });
-        $[15] = isResizing;
-        $[16] = t6;
-        $[17] = t7;
-    } else t7 = $[17];
-    let t8;
-    if ($[18] !== t1 || $[19] !== t7) {
-        t8 = /*#__PURE__*/ jsxs(DrawerPortal, {
+        $[21] = isResizing;
+        $[22] = t8;
+        $[23] = t9;
+    } else t9 = $[23];
+    let t10;
+    if ($[24] !== t1 || $[25] !== t9) {
+        t10 = /*#__PURE__*/ jsxs(DrawerPortal, {
             children: [
                 t1,
-                t7
+                t9
             ]
         });
-        $[18] = t1;
-        $[19] = t7;
-        $[20] = t8;
-    } else t8 = $[20];
-    return t8;
+        $[24] = t1;
+        $[25] = t9;
+        $[26] = t10;
+    } else t10 = $[26];
+    return t10;
 };
 DrawerContent.displayName = "DrawerContent";
 export { DrawerContent };

package/dist/components/Drawer/DrawerContext/DrawerProvider.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { useControlled } from "../../../hooks/index.js";
 import { DRAWER_SIZES, DRAWER_WIDTH_CONSTRAINTS } from "../constants.js";
 import { DrawerNestingProvider } from "../DrawerNestingContext.js";
 import { DrawerContext } from "./DrawerContext.js";
 const DrawerProvider = (t0)=>{
-    const $ = c(22);
+    const $ = c(23);
     const { children, kind, open, onOpenChange, closeOnEscape, overlay, modal, width: t1, minWidth: t2, maxWidth: t3 } = t0;
     const initialWidth = void 0 === t1 ? DRAWER_SIZES.small : t1;
     const minWidth = void 0 === t2 ? DRAWER_WIDTH_CONSTRAINTS.min : t2;
@@ -22,6 +22,7 @@ const DrawerProvider = (t0)=>{
     } else t4 = $[1];
     const [t5, setIsOpenUncontrolled] = useControlled(t4);
     const isOpen = void 0 === t5 ? false : t5;
+    const contentId = useId();
     const [width, setWidth] = useState(initialWidth);
     const [isResizing, setIsResizing] = useState(false);
     let t6;
@@ -36,13 +37,14 @@ const DrawerProvider = (t0)=>{
     } else t6 = $[4];
     const handleOpenChange = t6;
     let t7;
-    if ($[5] !== closeOnEscape || $[6] !== handleOpenChange || $[7] !== isOpen || $[8] !== isResizing || $[9] !== maxWidth || $[10] !== minWidth || $[11] !== modal || $[12] !== overlay || $[13] !== width) {
+    if ($[5] !== closeOnEscape || $[6] !== contentId || $[7] !== handleOpenChange || $[8] !== isOpen || $[9] !== isResizing || $[10] !== maxWidth || $[11] !== minWidth || $[12] !== modal || $[13] !== overlay || $[14] !== width) {
         t7 = {
             isOpen,
             onOpenChange: handleOpenChange,
             closeOnEscape,
             overlay,
             modal,
+            contentId,
             width,
             setWidth,
             isResizing,
@@ -51,39 +53,40 @@ const DrawerProvider = (t0)=>{
             maxWidth
         };
         $[5] = closeOnEscape;
-        $[6] = handleOpenChange;
-        $[7] = isOpen;
-        $[8] = isResizing;
-        $[9] = maxWidth;
-        $[10] = minWidth;
-        $[11] = modal;
-        $[12] = overlay;
-        $[13] = width;
-        $[14] = t7;
-    } else t7 = $[14];
+        $[6] = contentId;
+        $[7] = handleOpenChange;
+        $[8] = isOpen;
+        $[9] = isResizing;
+        $[10] = maxWidth;
+        $[11] = minWidth;
+        $[12] = modal;
+        $[13] = overlay;
+        $[14] = width;
+        $[15] = t7;
+    } else t7 = $[15];
     const contextValue = t7;
     let t8;
-    if ($[15] !== children || $[16] !== isOpen || $[17] !== kind) {
+    if ($[16] !== children || $[17] !== isOpen || $[18] !== kind) {
         t8 = /*#__PURE__*/ jsx(DrawerNestingProvider, {
             kind: kind,
             open: isOpen,
             children: children
         });
-        $[15] = children;
-        $[16] = isOpen;
-        $[17] = kind;
-        $[18] = t8;
-    } else t8 = $[18];
+        $[16] = children;
+        $[17] = isOpen;
+        $[18] = kind;
+        $[19] = t8;
+    } else t8 = $[19];
     let t9;
-    if ($[19] !== contextValue || $[20] !== t8) {
+    if ($[20] !== contextValue || $[21] !== t8) {
         t9 = /*#__PURE__*/ jsx(DrawerContext.Provider, {
             value: contextValue,
             children: t8
         });
-        $[19] = contextValue;
-        $[20] = t8;
-        $[21] = t9;
-    } else t9 = $[21];
+        $[20] = contextValue;
+        $[21] = t8;
+        $[22] = t9;
+    } else t9 = $[22];
     return t9;
 };
 export { DrawerProvider };

package/dist/components/Drawer/DrawerContext/types.d.ts

@@ -4,6 +4,8 @@ export interface DrawerContextValue {
     closeOnEscape: boolean;
     overlay: boolean;
     modal: boolean;
+    /** Id of the Ark dialog content node — this overlay's layer in zag's layer stack */
+    contentId: string;
     width: number | string;
     setWidth: (value: number | string) => void;
     isResizing: boolean;

package/dist/components/Drawer/DrawerRoot.d.ts

@@ -1,5 +1,19 @@
-import type { FC, ReactNode } from 'react';
-import { type DialogInteractOutsideEvent as DrawerInteractOutsideEvent } from '@ark-ui/react/dialog';
+import { type FC, type ReactNode } from 'react';
+import { Dialog, type DialogInteractOutsideEvent as DrawerInteractOutsideEvent } from '@ark-ui/react/dialog';
+type LayerDismissRequest = Parameters<NonNullable<Dialog.RootProps['onRequestDismiss']>>[0];
+/**
+ * Content ids of the Drawer/Dialog contents this one is rendered inside (React tree, not DOM —
+ * Ark portals every content to <body>). Provided by DrawerContent, not the root: Ark's Dialog.Root
+ * renders no DOM, so a sibling of the content is not a descendant of the layer.
+ */
+export declare const DrawerAncestorIdsContext: import("react").Context<readonly string[]>;
+/**
+ * Since zag-js 1.43.1 a dialog that mounts while its content node exists registers its layer
+ * synchronously. When a Dialog closes in the same commit a sibling Drawer opens (Create → Continue),
+ * the new drawer lands above the closing layer, and removing that layer dismisses every layer above
+ * it. Only a React-ancestor Drawer/Dialog may dismiss this one; unrelated layers can't.
+ */
+export declare const keepOpenUnlessAncestorCloses: (ancestorIds: readonly string[]) => (event: LayerDismissRequest) => void;
 interface DrawerRootProps {
     children: ReactNode;
     closeOnEscape: boolean;

package/dist/components/Drawer/DrawerRoot.js

@@ -1,11 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
 import { Dialog } from "@ark-ui/react/dialog";
 import { useDrawerContext } from "./DrawerContext/index.js";
+const DrawerAncestorIdsContext = /*#__PURE__*/ createContext([]);
+const EXITING_DIALOG_LAYER = '[data-scope="dialog"][data-part="content"][data-state="closed"]';
+const keepOpenUnlessAncestorCloses = (ancestorIds)=>(event)=>{
+        const targetId = event.detail.targetLayer?.id;
+        if (!targetId || !ancestorIds.includes(targetId)) event.preventDefault();
+    };
+const ignoreProgrammaticFocusOutside = (modal)=>(event)=>{
+        const target = event.detail.originalEvent.target;
+        if (modal || target instanceof Element && target.closest(EXITING_DIALOG_LAYER)) event.preventDefault();
+    };
 const DrawerRoot = (t0)=>{
-    const $ = c(11);
+    const $ = c(20);
     const { children, closeOnEscape, closeOnOutsideClick, modal, onInteractOutside, onEscapeKeyDown } = t0;
-    const { isOpen, onOpenChange } = useDrawerContext();
+    const { isOpen, onOpenChange, contentId } = useDrawerContext();
+    const ancestorIds = useContext(DrawerAncestorIdsContext);
     let t1;
     if ($[0] !== onOpenChange) {
         t1 = (t2)=>{
@@ -17,30 +29,56 @@ const DrawerRoot = (t0)=>{
     } else t1 = $[1];
     const handleOpenChange = t1;
     let t2;
-    if ($[2] !== children || $[3] !== closeOnEscape || $[4] !== closeOnOutsideClick || $[5] !== handleOpenChange || $[6] !== isOpen || $[7] !== modal || $[8] !== onEscapeKeyDown || $[9] !== onInteractOutside) {
-        t2 = /*#__PURE__*/ jsx(Dialog.Root, {
+    if ($[2] !== contentId) {
+        t2 = {
+            content: contentId
+        };
+        $[2] = contentId;
+        $[3] = t2;
+    } else t2 = $[3];
+    let t3;
+    if ($[4] !== ancestorIds) {
+        t3 = keepOpenUnlessAncestorCloses(ancestorIds);
+        $[4] = ancestorIds;
+        $[5] = t3;
+    } else t3 = $[5];
+    let t4;
+    if ($[6] !== modal) {
+        t4 = ignoreProgrammaticFocusOutside(modal);
+        $[6] = modal;
+        $[7] = t4;
+    } else t4 = $[7];
+    let t5;
+    if ($[8] !== children || $[9] !== closeOnEscape || $[10] !== closeOnOutsideClick || $[11] !== handleOpenChange || $[12] !== isOpen || $[13] !== modal || $[14] !== onEscapeKeyDown || $[15] !== onInteractOutside || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+        t5 = /*#__PURE__*/ jsx(Dialog.Root, {
+            ids: t2,
             open: isOpen,
             onOpenChange: handleOpenChange,
             closeOnEscape: closeOnEscape,
             closeOnInteractOutside: closeOnOutsideClick,
             modal: modal,
+            onRequestDismiss: t3,
+            onFocusOutside: t4,
             onInteractOutside: onInteractOutside,
             onEscapeKeyDown: onEscapeKeyDown,
             lazyMount: true,
             unmountOnExit: true,
             children: children
         });
-        $[2] = children;
-        $[3] = closeOnEscape;
-        $[4] = closeOnOutsideClick;
-        $[5] = handleOpenChange;
-        $[6] = isOpen;
-        $[7] = modal;
-        $[8] = onEscapeKeyDown;
-        $[9] = onInteractOutside;
-        $[10] = t2;
-    } else t2 = $[10];
-    return t2;
+        $[8] = children;
+        $[9] = closeOnEscape;
+        $[10] = closeOnOutsideClick;
+        $[11] = handleOpenChange;
+        $[12] = isOpen;
+        $[13] = modal;
+        $[14] = onEscapeKeyDown;
+        $[15] = onInteractOutside;
+        $[16] = t2;
+        $[17] = t3;
+        $[18] = t4;
+        $[19] = t5;
+    } else t5 = $[19];
+    return t5;
 };
 DrawerRoot.displayName = "DrawerRoot";
-export { DrawerRoot };
+export { DrawerAncestorIdsContext, DrawerRoot, keepOpenUnlessAncestorCloses };

package/dist/components/Table/hooks/useMasterCell.js

@@ -8,6 +8,7 @@ const useMasterCell = (columnId, rowId)=>{
     let t0;
     if ($[0] !== onMasterCellClick || $[1] !== rowId) {
         t0 = (e)=>{
+            if (!e.currentTarget.contains(e.target)) return;
             if (e.target.closest("[data-master-cell-action]")) return;
             onMasterCellClick?.(rowId);
         };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.1.1",
-  "generatedAt": "2026-10-08T07:30:13.430Z",
+  "version": "2.1.2",
+  "generatedAt": "2026-10-08T08:49:41.082Z",
   "components": [
     {
       "name": "Accordion",
@@ -28693,6 +28693,7 @@
     },
     {
       "name": "Drawer",
+      "description": "Content ids of the Drawer/Dialog contents this one is rendered inside (React tree, not DOM —\nArk portals every content to <body>). Provided by DrawerContent, not the root: Ark's Dialog.Root\nrenders no DOM, so a sibling of the content is not a descendant of the layer.",
       "importPath": "@wallarm-org/design-system/Drawer",
       "props": [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "2.1.2-rc-fix-filter-cascade-tooltip.1",
+  "version": "2.1.3",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",