design-zystem 1.0.433 → 1.0.434

package/dist/ui/index.js

@@ -2266,6 +2266,7 @@ var Tabs = ({
 // src/ui/components/ui/Modal.tsx
 var import_react23 = require("react");
 var RadixDialog = __toESM(require("@radix-ui/react-dialog"));
+var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
 
 // src/ui/lib/layers.ts
 var MODAL_LAYER = "z-[1000]";
@@ -2369,6 +2370,8 @@ var Modal = ({
   const lastPointRef = (0, import_react23.useRef)({ x: 0, y: 0 });
   const contentRef = (0, import_react23.useRef)(null);
   const overlayRef = (0, import_react23.useRef)(null);
+  const markOverlaySurface = (0, import_react_dismissable_layer.useDismissableLayerSurface)();
+  const markContentSurface = (0, import_react_dismissable_layer.useDismissableLayerSurface)();
   useAllowPortalScroll(open, contentRef, overlayRef);
   useKeepLayersAboveUsable(open, contentRef);
   (0, import_react23.useEffect)(() => {
@@ -2406,7 +2409,10 @@ var Modal = ({
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       RadixDialog.Overlay,
       {
-        ref: overlayRef,
+        ref: (node) => {
+          overlayRef.current = node;
+          markOverlaySurface(node);
+        },
         "data-drawer-keep-open": true,
         onClick: (event) => event.stopPropagation(),
         className: cn(
@@ -2420,7 +2426,10 @@ var Modal = ({
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       RadixDialog.Content,
       {
-        ref: contentRef,
+        ref: (node) => {
+          contentRef.current = node;
+          markContentSurface(node);
+        },
         onOpenAutoFocus,
         onInteractOutside: (event) => {
           if (isMountedAbove(event.target, contentRef.current))
@@ -5323,6 +5332,7 @@ var CollapsibleContent = (_a) => {
 var import_react33 = require("react");
 var import_vaul = require("vaul");
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_react_dismissable_layer2 = require("@radix-ui/react-dismissable-layer");
 
 // src/ui/lib/drawer/nestedDrawerAttributes.ts
 var NESTED_DRAWER_ATTRIBUTES = {
@@ -5413,6 +5423,8 @@ var Drawer = ({
   const contentRef = (0, import_react33.useRef)(null);
   const [panel, setPanel] = (0, import_react33.useState)(null);
   const overlayRef = (0, import_react33.useRef)(null);
+  const markOverlaySurface = (0, import_react_dismissable_layer2.useDismissableLayerSurface)();
+  const markContentSurface = (0, import_react_dismissable_layer2.useDismissableLayerSurface)();
   useAllowPortalScroll(modal && open, contentRef, overlayRef);
   useKeepLayersAboveUsable(modal && open, contentRef);
   (0, import_react33.useEffect)(() => {
@@ -5461,7 +5473,10 @@ var Drawer = ({
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       import_vaul.Drawer.Overlay,
       {
-        ref: overlayRef,
+        ref: (node) => {
+          overlayRef.current = node;
+          markOverlaySurface(node);
+        },
         onClick: (event) => event.stopPropagation(),
         className: cn(
           MODAL_LAYER,
@@ -5476,6 +5491,7 @@ var Drawer = ({
         ref: (node) => {
           contentRef.current = node;
           setPanel(node);
+          markContentSurface(node);
         }
       }, { [NESTED_DRAWER_ATTRIBUTES.panel]: "" }), {
         onPointerDownOutside: (event) => {

package/dist/ui/index.mjs

@@ -2058,6 +2058,7 @@ import {
   useState as useState3
 } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
+import { useDismissableLayerSurface } from "@radix-ui/react-dismissable-layer";
 
 // src/ui/lib/layers.ts
 var MODAL_LAYER = "z-[1000]";
@@ -2161,6 +2162,8 @@ var Modal = ({
   const lastPointRef = useRef3({ x: 0, y: 0 });
   const contentRef = useRef3(null);
   const overlayRef = useRef3(null);
+  const markOverlaySurface = useDismissableLayerSurface();
+  const markContentSurface = useDismissableLayerSurface();
   useAllowPortalScroll(open, contentRef, overlayRef);
   useKeepLayersAboveUsable(open, contentRef);
   useEffect5(() => {
@@ -2198,7 +2201,10 @@ var Modal = ({
     /* @__PURE__ */ jsx28(
       RadixDialog.Overlay,
       {
-        ref: overlayRef,
+        ref: (node) => {
+          overlayRef.current = node;
+          markOverlaySurface(node);
+        },
         "data-drawer-keep-open": true,
         onClick: (event) => event.stopPropagation(),
         className: cn(
@@ -2212,7 +2218,10 @@ var Modal = ({
     /* @__PURE__ */ jsx28(
       RadixDialog.Content,
       {
-        ref: contentRef,
+        ref: (node) => {
+          contentRef.current = node;
+          markContentSurface(node);
+        },
         onOpenAutoFocus,
         onInteractOutside: (event) => {
           if (isMountedAbove(event.target, contentRef.current))
@@ -5126,6 +5135,7 @@ var CollapsibleContent = (_a) => {
 import { useEffect as useEffect7, useRef as useRef9, useState as useState9 } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { useDismissableLayerSurface as useDismissableLayerSurface2 } from "@radix-ui/react-dismissable-layer";
 
 // src/ui/lib/drawer/nestedDrawerAttributes.ts
 var NESTED_DRAWER_ATTRIBUTES = {
@@ -5216,6 +5226,8 @@ var Drawer = ({
   const contentRef = useRef9(null);
   const [panel, setPanel] = useState9(null);
   const overlayRef = useRef9(null);
+  const markOverlaySurface = useDismissableLayerSurface2();
+  const markContentSurface = useDismissableLayerSurface2();
   useAllowPortalScroll(modal && open, contentRef, overlayRef);
   useKeepLayersAboveUsable(modal && open, contentRef);
   useEffect7(() => {
@@ -5264,7 +5276,10 @@ var Drawer = ({
     /* @__PURE__ */ jsx67(
       VaulDrawer.Overlay,
       {
-        ref: overlayRef,
+        ref: (node) => {
+          overlayRef.current = node;
+          markOverlaySurface(node);
+        },
         onClick: (event) => event.stopPropagation(),
         className: cn(
           MODAL_LAYER,
@@ -5279,6 +5294,7 @@ var Drawer = ({
         ref: (node) => {
           contentRef.current = node;
           setPanel(node);
+          markContentSurface(node);
         }
       }, { [NESTED_DRAWER_ATTRIBUTES.panel]: "" }), {
         onPointerDownOutside: (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.433",
+  "version": "1.0.434",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -44,6 +44,7 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dismissable-layer": "^1.1.19",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.5",
     "@radix-ui/react-progress": "^1.1.1",