@wallarm-org/design-system 2.4.0 → 2.4.1-rc-fix-code-snippet-fullscreen-in-dialog.1

package/dist/components/CodeSnippet/internal/CodeSnippetFrame.js

@@ -2,10 +2,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
+import { trackDismissableElement } from "@zag-js/dismissable";
+import { trapFocus } from "@zag-js/focus-trap";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
-const FULLSCREEN_CLASSES = "fixed inset-16 z-50 m-0 w-auto h-auto min-w-0 min-h-0 max-w-[none] max-h-[none]";
-const BACKDROP_CLASSES = "fixed inset-0 z-40 backdrop-blur-xs bg-component-dialog-overlay";
+const FULLSCREEN_CLASSES = cn("fixed inset-16 m-0 w-auto h-auto min-w-0 min-h-0 max-w-[none] max-h-[none]", "z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]");
+const BACKDROP_CLASSES = cn("fixed inset-0 backdrop-blur-xs bg-component-dialog-overlay", "z-[calc(var(--drawer-overlay-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]");
 const HOST_CLASSES = "contents";
 const noop = ()=>{};
 const subscribeNoop = ()=>noop;
@@ -18,7 +20,7 @@ const createHost = ()=>{
     return host;
 };
 const CodeSnippetFrame = (t0)=>{
-    const $ = c(40);
+    const $ = c(45);
     let children;
     let className;
     let isFullscreen;
@@ -96,96 +98,129 @@ const CodeSnippetFrame = (t0)=>{
     useLayoutEffect(t3, t4);
     let t5;
     let t6;
-    if ($[15] !== isFullscreen || $[16] !== setIsFullscreen) {
+    if ($[15] !== host || $[16] !== isFullscreen || $[17] !== setIsFullscreen) {
         t5 = ()=>{
-            if (!isFullscreen) return;
-            const handleKeyDown = (event)=>{
-                if ("Escape" === event.key && !event.defaultPrevented) setIsFullscreen(false);
+            if (!isFullscreen || !host) return;
+            const options = {
+                onRequestDismiss: (event)=>{
+                    event.preventDefault();
+                    setIsFullscreen(false);
+                }
+            };
+            const untrack = trackDismissableElement(host, options);
+            const untrap = trapFocus(host);
+            return ()=>{
+                untrap();
+                untrack();
             };
-            document.addEventListener("keydown", handleKeyDown);
-            return ()=>document.removeEventListener("keydown", handleKeyDown);
         };
         t6 = [
             isFullscreen,
+            host,
             setIsFullscreen
         ];
-        $[15] = isFullscreen;
-        $[16] = setIsFullscreen;
-        $[17] = t5;
-        $[18] = t6;
+        $[15] = host;
+        $[16] = isFullscreen;
+        $[17] = setIsFullscreen;
+        $[18] = t5;
+        $[19] = t6;
     } else {
-        t5 = $[17];
-        t6 = $[18];
+        t5 = $[18];
+        t6 = $[19];
     }
     useEffect(t5, t6);
     let t7;
-    if ($[19] !== backdropTestId || $[20] !== isFullscreen || $[21] !== setIsFullscreen) {
-        t7 = isFullscreen ? /*#__PURE__*/ jsx("div", {
+    let t8;
+    if ($[20] !== isFullscreen || $[21] !== setIsFullscreen) {
+        t7 = ()=>{
+            if (!isFullscreen) return;
+            const handleKeyDown = (event_0)=>{
+                if ("Escape" === event_0.key && !event_0.defaultPrevented) setIsFullscreen(false);
+            };
+            document.addEventListener("keydown", handleKeyDown);
+            return ()=>document.removeEventListener("keydown", handleKeyDown);
+        };
+        t8 = [
+            isFullscreen,
+            setIsFullscreen
+        ];
+        $[20] = isFullscreen;
+        $[21] = setIsFullscreen;
+        $[22] = t7;
+        $[23] = t8;
+    } else {
+        t7 = $[22];
+        t8 = $[23];
+    }
+    useEffect(t7, t8);
+    let t9;
+    if ($[24] !== backdropTestId || $[25] !== isFullscreen || $[26] !== setIsFullscreen) {
+        t9 = isFullscreen ? /*#__PURE__*/ jsx("div", {
             "aria-hidden": "true",
             "data-testid": backdropTestId,
             className: BACKDROP_CLASSES,
             onClick: ()=>setIsFullscreen(false)
         }) : null;
-        $[19] = backdropTestId;
-        $[20] = isFullscreen;
-        $[21] = setIsFullscreen;
-        $[22] = t7;
-    } else t7 = $[22];
-    const t8 = isFullscreen && FULLSCREEN_CLASSES;
-    let t9;
-    if ($[23] !== className || $[24] !== t8) {
-        t9 = cn(className, t8);
-        $[23] = className;
-        $[24] = t8;
-        $[25] = t9;
-    } else t9 = $[25];
-    let t10;
-    if ($[26] !== children || $[27] !== props || $[28] !== ref || $[29] !== t9) {
-        t10 = /*#__PURE__*/ jsx("div", {
+        $[24] = backdropTestId;
+        $[25] = isFullscreen;
+        $[26] = setIsFullscreen;
+        $[27] = t9;
+    } else t9 = $[27];
+    const t10 = isFullscreen && FULLSCREEN_CLASSES;
+    let t11;
+    if ($[28] !== className || $[29] !== t10) {
+        t11 = cn(className, t10);
+        $[28] = className;
+        $[29] = t10;
+        $[30] = t11;
+    } else t11 = $[30];
+    let t12;
+    if ($[31] !== children || $[32] !== props || $[33] !== ref || $[34] !== t11) {
+        t12 = /*#__PURE__*/ jsx("div", {
             ...props,
             ref: ref,
-            className: t9,
+            className: t11,
             children: children
         });
-        $[26] = children;
-        $[27] = props;
-        $[28] = ref;
-        $[29] = t9;
-        $[30] = t10;
-    } else t10 = $[30];
-    let t11;
-    if ($[31] !== t10 || $[32] !== t7) {
-        t11 = /*#__PURE__*/ jsxs(Fragment, {
+        $[31] = children;
+        $[32] = props;
+        $[33] = ref;
+        $[34] = t11;
+        $[35] = t12;
+    } else t12 = $[35];
+    let t13;
+    if ($[36] !== t12 || $[37] !== t9) {
+        t13 = /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                t7,
-                t10
+                t9,
+                t12
             ]
         });
-        $[31] = t10;
-        $[32] = t7;
-        $[33] = t11;
-    } else t11 = $[33];
-    const frame = t11;
-    let t12;
-    if ($[34] !== frame || $[35] !== host || $[36] !== portalReady) {
-        t12 = portalReady && host ? /*#__PURE__*/ createPortal(frame, host) : frame;
-        $[34] = frame;
-        $[35] = host;
-        $[36] = portalReady;
-        $[37] = t12;
-    } else t12 = $[37];
-    let t13;
-    if ($[38] !== t12) {
-        t13 = /*#__PURE__*/ jsx("div", {
+        $[36] = t12;
+        $[37] = t9;
+        $[38] = t13;
+    } else t13 = $[38];
+    const frame = t13;
+    let t14;
+    if ($[39] !== frame || $[40] !== host || $[41] !== portalReady) {
+        t14 = portalReady && host ? /*#__PURE__*/ createPortal(frame, host) : frame;
+        $[39] = frame;
+        $[40] = host;
+        $[41] = portalReady;
+        $[42] = t14;
+    } else t14 = $[42];
+    let t15;
+    if ($[43] !== t14) {
+        t15 = /*#__PURE__*/ jsx("div", {
             ref: placeholderRef,
             "data-slot": "code-snippet-frame",
             className: HOST_CLASSES,
-            children: t12
+            children: t14
         });
-        $[38] = t12;
-        $[39] = t13;
-    } else t13 = $[39];
-    return t13;
+        $[43] = t14;
+        $[44] = t15;
+    } else t15 = $[44];
+    return t15;
 };
 CodeSnippetFrame.displayName = "CodeSnippetFrame";
 export { CodeSnippetFrame };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "2.3.3",
-  "generatedAt": "2026-10-13T07:49:15.152Z",
+  "version": "2.4.0",
+  "generatedAt": "2026-10-13T08:54:16.915Z",
   "components": [
     {
       "name": "Accordion",
@@ -20392,6 +20392,11 @@
           "name": "LongDocument",
           "code": "() => <LongDocumentDemo />",
           "description": "2 000 read-only lines clamped by `maxLines` — the top of the envelope the colour painter is\nbuilt for, where `readOnly` still lets the text be selected, searched and copied."
+        },
+        {
+          "name": "FullscreenInsideDrawer",
+          "code": "() => {\n  const [value, setValue] = useState(jsonCode);\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Open Drawer\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Rule</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <CodeEditorRoot value={value} onChange={setValue} language='json'>\n            <CodeSnippetHeader>\n              <CodeSnippetTitle>rule.json</CodeSnippetTitle>\n              <CodeSnippetActions>\n                <CodeSnippetFullscreenButton />\n                <CodeSnippetCopyButton />\n              </CodeSnippetActions>\n            </CodeSnippetHeader>\n            <CodeEditorContent lineNumbers aria-label='Rule JSON' />\n          </CodeEditorRoot>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
+          "description": "Fullscreen opened from a modal `Drawer` stacks above it: the editor and its buttons take\npointer and keyboard input, and Escape leaves fullscreen while the drawer stays open."
         }
       ]
     },
@@ -24930,6 +24935,11 @@
           "name": "WithFoldingAndShowMore",
           "code": "() => (\n  <CodeSnippetAdapterProvider adapter={loadShikiAdapter}>\n    <CodeSnippetRoot\n      code={foldableResponseCode}\n      language='http'\n      startingLineNumber={100}\n      maxLines={6}\n      folds={getHttpFolds(foldableResponseCode, { startingLineNumber: 100 })}\n    >\n      <CodeSnippetContent>\n        <CodeSnippetLineNumbers />\n        <CodeSnippetCode />\n      </CodeSnippetContent>\n    </CodeSnippetRoot>\n  </CodeSnippetAdapterProvider>\n)",
           "description": "Folds, `maxLines` and `startingLineNumber` together — fold line numbers are absolute, so\n`getHttpFolds` has to be given the same offset the gutter uses."
+        },
+        {
+          "name": "FullscreenInsideDrawer",
+          "code": "() => (\n  <Drawer>\n    <DrawerTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader>\n        <DrawerTitle>Request</DrawerTitle>\n      </DrawerHeader>\n      <DrawerBody>\n        <CodeSnippetRoot code={jsonCode} language='json'>\n          <CodeSnippetHeader>\n            <CodeSnippetTitle>package.json</CodeSnippetTitle>\n            <CodeSnippetActions>\n              <CodeSnippetFullscreenButton />\n              <CodeSnippetCopyButton />\n            </CodeSnippetActions>\n          </CodeSnippetHeader>\n          <CodeSnippetContent>\n            <CodeSnippetCode />\n          </CodeSnippetContent>\n        </CodeSnippetRoot>\n      </DrawerBody>\n    </DrawerContent>\n  </Drawer>\n)",
+          "description": "Fullscreen opened from a modal `Drawer` stacks above it as a nested layer: its buttons stay\nclickable, and Escape or a backdrop click leaves fullscreen while the drawer stays open."
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "2.4.0",
+  "version": "2.4.1-rc-fix-code-snippet-fullscreen-in-dialog.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -167,7 +167,9 @@
     "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "3.14.13",
     "@zag-js/cascade-select": "1.43.3",
+    "@zag-js/dismissable": "1.43.3",
     "@zag-js/file-utils": "1.43.3",
+    "@zag-js/focus-trap": "1.43.3",
     "@zag-js/react": "1.43.3",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",