@dynatrace/strato-components 3.5.2 → 3.6.0

package/navigation/menu/hooks/useMenuAutoClose.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useMenuAutoClose_exports = {};
+__export(useMenuAutoClose_exports, {
+  useMenuAutoClose: () => useMenuAutoClose
+});
+module.exports = __toCommonJS(useMenuAutoClose_exports);
+var import_react = require("react");
+var import_isBrowser = require("../../../core/utils/isBrowser.js");
+var import_useOverlay = require("../../../overlays/hooks/useOverlay.js");
+function useMenuAutoClose(open, setOpen) {
+  (0, import_react.useEffect)(() => {
+    if (!import_isBrowser.isBrowser) {
+      return void 0;
+    }
+    const onWindowBlur = () => setOpen(false);
+    window.addEventListener("blur", onWindowBlur);
+    return () => {
+      window.removeEventListener("blur", onWindowBlur);
+    };
+  }, [setOpen]);
+  (0, import_react.useEffect)(() => {
+    if (!open) {
+      return void 0;
+    }
+    const stackSizeAtOpen = (0, import_useOverlay.getOverlayStackSize)();
+    return (0, import_useOverlay.subscribeToOverlayStack)(() => {
+      if ((0, import_useOverlay.getOverlayStackSize)() > stackSizeAtOpen) {
+        setOpen(false);
+      }
+    });
+  }, [open, setOpen]);
+}

package/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-5-2 {
+._39c1kf0-3-6-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
   background-color: inherit;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -11,7 +11,7 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._39c1kf0-3-5-2::after {
+._39c1kf0-3-6-0::after {
   content: " ";
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
@@ -23,46 +23,46 @@
   padding-top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
 }
-._39c1kf1-3-5-2 {
+._39c1kf1-3-6-0 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-5-2 {
+._39c1kf2-3-6-0 {
   cursor: pointer;
 }
-._39c1kf2-3-5-2:hover {
+._39c1kf2-3-6-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-5-2:active {
+._39c1kf2-3-6-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-5-2 {
+._39c1kf5-3-6-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-5-2:hover {
+._39c1kf5-3-6-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-5-2:active {
+._39c1kf5-3-6-0:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-5-2::after {
+._39c1kf5-3-6-0::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-5-2 {
+._39c1kf6-3-6-0 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-5-2 {
+._39c1kf7-3-6-0 {
   cursor: not-allowed;
 }
-._39c1kf0-3-5-2 .text-content {
+._39c1kf0-3-6-0 .text-content {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   white-space: nowrap;
   overflow: hidden;
@@ -71,6 +71,6 @@
   justify-content: center;
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._39c1kf0-3-5-2 svg + .text-content {
+._39c1kf0-3-6-0 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

package/navigation/tabs/RenderTab.sty.js

@@ -24,6 +24,6 @@ __export(RenderTab_css_exports, {
 module.exports = __toCommonJS(RenderTab_css_exports);
 var import_RenderTab_css_ts_vanilla = require("./RenderTab.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var disabledTabWrapperCSS = "_39c1kf7-3-5-2";
-var tabButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_39c1kf0-3-5-2", variantClassNames: { disabled: { true: "_39c1kf1-3-5-2", false: "_39c1kf2-3-5-2" }, selected: { true: "_39c1kf3-3-5-2", false: "_39c1kf4-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-5-2"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-5-2";
+var disabledTabWrapperCSS = "_39c1kf7-3-6-0";
+var tabButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_39c1kf0-3-6-0", variantClassNames: { disabled: { true: "_39c1kf1-3-6-0", false: "_39c1kf2-3-6-0" }, selected: { true: "_39c1kf3-3-6-0", false: "_39c1kf4-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-6-0"]] });
+var tabContentWrapperCSS = "_39c1kf6-3-6-0";

package/navigation/tabs/TabPanel.css

@@ -1,12 +1,12 @@
-._b4irt10-3-5-2 {
+._b4irt10-3-6-0 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-5-2 {
+._b4irt11-3-6-0 {
   overflow: hidden;
 }
-._b4irt12-3-5-2 {
+._b4irt12-3-6-0 {
   overflow-y: auto;
 }

package/navigation/tabs/TabPanel.sty.js

@@ -22,5 +22,5 @@ __export(TabPanel_css_exports, {
 });
 module.exports = __toCommonJS(TabPanel_css_exports);
 var import_TabPanel_css_ts_vanilla = require("./TabPanel.css");
-var tabPanelCSS = "_b4irt10-3-5-2";
-var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-5-2", "scroll-y": "_b4irt12-3-5-2" };
+var tabPanelCSS = "_b4irt10-3-6-0";
+var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-6-0", "scroll-y": "_b4irt12-3-6-0" };

package/navigation/tabs/Tabs.css

@@ -1,9 +1,9 @@
-._1tfbrxp0-3-5-2 {
+._1tfbrxp0-3-6-0 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-5-2 {
+._1tfbrxp1-3-6-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
@@ -14,29 +14,29 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._1tfbrxp1-3-5-2::-webkit-scrollbar {
+._1tfbrxp1-3-6-0::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-5-2 {
+._1tfbrxp2-3-6-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp3-3-5-2 {
+._1tfbrxp3-3-6-0 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp4-3-5-2 {
+._1tfbrxp4-3-6-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp5-3-5-2 {
+._1tfbrxp5-3-6-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-5-2:after {
+._1tfbrxp5-3-6-0:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-5-2 {
+._1tfbrxp6-3-6-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);

package/navigation/tabs/Tabs.sty.js

@@ -25,8 +25,8 @@ __export(Tabs_css_exports, {
 });
 module.exports = __toCommonJS(Tabs_css_exports);
 var import_Tabs_css_ts_vanilla = require("./Tabs.css");
-var tabsArrowButtonCSS = "_1tfbrxp6-3-5-2";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-5-2";
-var tabsCSS = "_1tfbrxp0-3-5-2";
-var tabsWrapperCSS = "_1tfbrxp1-3-5-2";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-5-2", right: "_1tfbrxp3-3-5-2", both: "_1tfbrxp4-3-5-2" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-6-0";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-6-0";
+var tabsCSS = "_1tfbrxp0-3-6-0";
+var tabsWrapperCSS = "_1tfbrxp1-3-6-0";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-6-0", right: "_1tfbrxp3-3-6-0", both: "_1tfbrxp4-3-6-0" };

package/notifications/notification-settings/NotificationSettings.css

@@ -1,3 +1,3 @@
-._1cohdty0-3-5-2 {
+._1cohdty0-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/notifications/notification-settings/NotificationSettings.sty.js

@@ -21,4 +21,4 @@ __export(NotificationSettings_css_exports, {
 });
 module.exports = __toCommonJS(NotificationSettings_css_exports);
 var import_NotificationSettings_css_ts_vanilla = require("./NotificationSettings.css");
-var overlayText = "_1cohdty0-3-5-2";
+var overlayText = "_1cohdty0-3-6-0";

package/notifications/toast/Toast.css

@@ -1,8 +1,8 @@
-._yjszxq0-3-5-2 {
+._yjszxq0-3-6-0 {
   display: flex;
   overflow: hidden;
 }
-._yjszxq1-3-5-2 {
+._yjszxq1-3-6-0 {
   display: flex;
   border: 0;
   border-radius: 0;
@@ -11,14 +11,14 @@
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._yjszxq2-3-5-2 {
+._yjszxq2-3-6-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._yjszxq3-3-5-2 {
+._yjszxq3-3-6-0 {
   max-width: 100%;
 }
-._yjszxq3-3-5-2._yjszxq3-3-5-2 {
+._yjszxq3-3-6-0._yjszxq3-3-6-0 {
   overflow-wrap: anywhere;
 }

package/notifications/toast/Toast.sty.js

@@ -24,7 +24,7 @@ __export(Toast_css_exports, {
 });
 module.exports = __toCommonJS(Toast_css_exports);
 var import_Toast_css_ts_vanilla = require("./Toast.css");
-var toastCSS = "_yjszxq0-3-5-2";
-var toastFlexContainerCSS = "_yjszxq2-3-5-2";
-var toastIconCSS = "_yjszxq1-3-5-2";
-var toastTextCSS = "_yjszxq3-3-5-2";
+var toastCSS = "_yjszxq0-3-6-0";
+var toastFlexContainerCSS = "_yjszxq2-3-6-0";
+var toastIconCSS = "_yjszxq1-3-6-0";
+var toastTextCSS = "_yjszxq3-3-6-0";

package/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-5-2 {
+@keyframes _rxr5810-3-6-0 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-5-2 {
+@keyframes _rxr5811-3-6-0 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-5-2 {
+@keyframes _rxr5812-3-6-0 {
   0% {
     transform: scaleX(1);
   }
@@ -22,34 +22,34 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-5-2 {
+._rxr5813-3-6-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._rxr5813-3-5-2 .Toastify__toast-container {
+._rxr5813-3-6-0 .Toastify__toast-container {
   z-index: 9999;
   position: fixed;
   max-width: 400px;
   width: calc(100% - var(--dt-spacings-size-32, 32px));
   box-sizing: border-box;
 }
-._rxr5813-3-5-2 .Toastify__toast-container--bottom-left {
+._rxr5813-3-6-0 .Toastify__toast-container--bottom-left {
   bottom: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
   right: auto;
 }
-._rxr5813-3-5-2 .Toastify__toast-container--bottom-right {
+._rxr5813-3-6-0 .Toastify__toast-container--bottom-right {
   bottom: var(--dt-spacings-size-16, 16px);
   left: auto;
   right: var(--dt-spacings-size-16, 16px);
 }
-._rxr5813-3-5-2 .Toastify__toast-container--bottom-center {
+._rxr5813-3-6-0 .Toastify__toast-container--bottom-center {
   bottom: var(--dt-spacings-size-16, 16px);
   left: 50%;
   transform: translateX(-50%);
 }
-._rxr5813-3-5-2 .Toastify__toast {
+._rxr5813-3-6-0 .Toastify__toast {
   margin: 0;
   align-items: start;
   border: none;
@@ -72,24 +72,24 @@
   margin-top: var(--dt-spacings-size-8, 8px);
   max-width: 100%;
 }
-._rxr5813-3-5-2 .Toastify__toast-body {
+._rxr5813-3-6-0 .Toastify__toast-body {
   margin: auto 0;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-._rxr5813-3-5-2 .Toastify__toast-body > div {
+._rxr5813-3-6-0 .Toastify__toast-body > div {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._rxr5813-3-5-2 .Toastify__toast-icon {
+._rxr5813-3-6-0 .Toastify__toast-icon {
   margin-inline-end: 10px;
   width: 20px;
   flex-shrink: 0;
   display: flex;
 }
-._rxr5813-3-5-2 .Toastify__progress-bar {
+._rxr5813-3-6-0 .Toastify__progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -98,17 +98,17 @@
   z-index: var(--toastify-z-index);
   opacity: 0;
 }
-._rxr5813-3-5-2 .Toastify__progress-bar--animated {
-  animation: _rxr5812-3-5-2 1 forwards;
+._rxr5813-3-6-0 .Toastify__progress-bar--animated {
+  animation: _rxr5812-3-6-0 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-5-2;
+  animation-name: _rxr5810-3-6-0;
   animation-duration: var(--dt-animations-slide-in-duration-fast, 200ms);
   animation-timing-function: var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
   animation-fill-mode: both;
 }
 .strato__toast__exit {
-  animation-name: _rxr5811-3-5-2;
+  animation-name: _rxr5811-3-6-0;
   animation-duration: var(--dt-animations-slide-out-duration-fast, 150ms);
   animation-timing-function: var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
   animation-fill-mode: both;

package/notifications/toast/ToastContainer.sty.js

@@ -21,4 +21,4 @@ __export(ToastContainer_css_exports, {
 });
 module.exports = __toCommonJS(ToastContainer_css_exports);
 var import_ToastContainer_css_ts_vanilla = require("./ToastContainer.css");
-var root = "_rxr5813-3-5-2";
+var root = "_rxr5813-3-6-0";

package/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-5-2 {
+._14971970-3-6-0 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -7,40 +7,40 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._14971971-3-5-2 {
+._14971971-3-6-0 {
   left: 0;
   right: auto;
   border-radius: 0 var(--dt-borders-radius-surface-default, 12px) var(--dt-borders-radius-surface-default, 12px) 0;
 }
-._14971972-3-5-2 {
+._14971972-3-6-0 {
   left: auto;
   right: 0;
   border-radius: var(--dt-borders-radius-surface-default, 12px) 0 0 var(--dt-borders-radius-surface-default, 12px);
 }
-._14971973-3-5-2 {
+._14971973-3-6-0 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-5-2 {
+._14971974-3-6-0 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-5-2 {
+._14971975-3-6-0 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-5-2 {
+._14971976-3-6-0 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-5-2 {
+._14971977-3-6-0 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-5-2 {
+._14971978-3-6-0 {
   width: 100%;
   height: 100%;
 }

package/overlays/drawer/Drawer.sty.js

@@ -25,8 +25,8 @@ __export(Drawer_css_exports, {
 });
 module.exports = __toCommonJS(Drawer_css_exports);
 var import_Drawer_css_ts_vanilla = require("./Drawer.css");
-var DrawerBackdropCSS = "_14971977-3-5-2";
-var DrawerCSS = "_14971970-3-5-2";
-var DrawerContentCSS = "_14971978-3-5-2";
-var DrawerPlacementCSS = { left: "_14971971-3-5-2", right: "_14971972-3-5-2" };
-var DrawerWidthStyles = { narrow: "_14971973-3-5-2", medium: "_14971974-3-5-2", wide: "_14971975-3-5-2", full: "_14971976-3-5-2" };
+var DrawerBackdropCSS = "_14971977-3-6-0";
+var DrawerCSS = "_14971970-3-6-0";
+var DrawerContentCSS = "_14971978-3-6-0";
+var DrawerPlacementCSS = { left: "_14971971-3-6-0", right: "_14971972-3-6-0" };
+var DrawerWidthStyles = { narrow: "_14971973-3-6-0", medium: "_14971974-3-6-0", wide: "_14971975-3-6-0", full: "_14971976-3-6-0" };

package/overlays/hooks/useOverlay.d.ts

@@ -12,6 +12,24 @@ export interface OverlayTriggerState {
     /** Toggles the overlay's visibility. */
     toggle(): void;
 }
+/**
+ * Subscribe to changes in the `visibleOverlays` stack. The listener is
+ * invoked whenever an overlay using `useOverlay` is pushed onto or removed
+ * from the stack. Returns a function that unsubscribes the listener.
+ *
+ * Used by components that are not part of the `useOverlay` stack themselves
+ * (e.g. Radix-backed Menus) but still need to react when something is layered
+ * on top of them — so that, for example, opening a Modal from a Menu item
+ * closes the underlying Menu before the user has to dismiss two layers.
+ * @internal
+ */
+export declare function subscribeToOverlayStack(listener: () => void): () => void;
+/**
+ * Current size of the visible-overlay stack. Pair with `subscribeToOverlayStack`
+ * to detect pushes/pops.
+ * @internal
+ */
+export declare function getOverlayStackSize(): number;
 /**
  * Close all overlays with a stacking level equal to or higher than the
  * provided level, defaulting to 0 (close all other overlays).

package/overlays/hooks/useOverlay.js

@@ -19,6 +19,8 @@ var useOverlay_exports = {};
 __export(useOverlay_exports, {
   DismissButton: () => DismissButton,
   closeAllOverlays: () => closeAllOverlays,
+  getOverlayStackSize: () => getOverlayStackSize,
+  subscribeToOverlayStack: () => subscribeToOverlayStack,
   useOverlay: () => useOverlay,
   useOverlayTriggerState: () => useOverlayTriggerState
 });
@@ -29,6 +31,20 @@ var import_VisuallyHidden = require("../../core/components/visually-hidden/Visua
 var import_OverlayStacking = require("../../core/contexts/OverlayStacking.js");
 var import_useControllableState = require("../../core/hooks/useControllableState.js");
 const visibleOverlays = [];
+const RADIX_MENU_CONTENT_SELECTOR = "[data-radix-menu-content]";
+const overlayStackListeners = /* @__PURE__ */ new Set();
+function notifyOverlayStackListeners() {
+  overlayStackListeners.forEach((listener) => listener());
+}
+function subscribeToOverlayStack(listener) {
+  overlayStackListeners.add(listener);
+  return () => {
+    overlayStackListeners.delete(listener);
+  };
+}
+function getOverlayStackSize() {
+  return visibleOverlays.length;
+}
 function closeAllOverlays(level = 0) {
   if (visibleOverlays.length === 0) {
     return;
@@ -86,10 +102,12 @@ function useOverlay(props, ref) {
         close: () => requestClose("programmatic", false)
       };
       visibleOverlays.push(entry);
+      notifyOverlayStackListeners();
       return () => {
         const index = visibleOverlays.findIndex((e) => e.ref === ref);
         if (index >= 0) {
           visibleOverlays.splice(index, 1);
+          notifyOverlayStackListeners();
         }
       };
     }
@@ -234,6 +252,9 @@ function isValidEvent(event, ref) {
       return false;
     }
   }
+  if (event.target instanceof Element && event.target.closest(RADIX_MENU_CONTENT_SELECTOR)) {
+    return false;
+  }
   return !!ref.current && !ref.current.contains(event.target);
 }
 function useFocusWithin(props) {

package/overlays/modal/Modal.css

@@ -1,4 +1,4 @@
-._dmotjm0-3-5-2 {
+._dmotjm0-3-6-0 {
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -11,16 +11,16 @@
   background: var(--dt-colors-background-surface-default, #fff);
   overflow-y: auto;
 }
-._dmotjm1-3-5-2 {
+._dmotjm1-3-6-0 {
   max-width: 576px;
 }
-._dmotjm2-3-5-2 {
+._dmotjm2-3-6-0 {
   max-width: 768px;
 }
-._dmotjm3-3-5-2 {
+._dmotjm3-3-6-0 {
   max-width: 1280px;
 }
-._dmotjm4-3-5-2 {
+._dmotjm4-3-6-0 {
   position: fixed;
   top: 0;
   left: 0;
@@ -32,7 +32,7 @@
   background: var(--dt-colors-background-surface-backdrop, #f9f9facc);
   z-index: var(--dt-elevations-default, 1);
 }
-._dmotjm5-3-5-2 {
+._dmotjm5-3-6-0 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -40,7 +40,7 @@
   padding: var(--dt-spacings-size-16, 16px) var(--dt-spacings-size-24, 24px) var(--dt-spacings-size-8, 8px);
 }
 @supports not (height: 1dvh) {
-  ._dmotjm0-3-5-2 {
+  ._dmotjm0-3-6-0 {
     max-height: 96vh;
   }
 }

package/overlays/modal/Modal.sty.js

@@ -24,7 +24,7 @@ __export(Modal_css_exports, {
 });
 module.exports = __toCommonJS(Modal_css_exports);
 var import_Modal_css_ts_vanilla = require("./Modal.css");
-var backdrop = "_dmotjm4-3-5-2";
-var base = "_dmotjm0-3-5-2";
-var header = "_dmotjm5-3-5-2";
-var sizes = { small: "_dmotjm1-3-5-2", medium: "_dmotjm2-3-5-2", large: "_dmotjm3-3-5-2" };
+var backdrop = "_dmotjm4-3-6-0";
+var base = "_dmotjm0-3-6-0";
+var header = "_dmotjm5-3-6-0";
+var sizes = { small: "_dmotjm1-3-6-0", medium: "_dmotjm2-3-6-0", large: "_dmotjm3-3-6-0" };

package/overlays/overlay/Overlay.css

@@ -1,4 +1,4 @@
-._1dhu6810-3-5-2 {
+._1dhu6810-3-6-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);

package/overlays/overlay/Overlay.sty.js

@@ -21,4 +21,4 @@ __export(Overlay_css_exports, {
 });
 module.exports = __toCommonJS(Overlay_css_exports);
 var import_Overlay_css_ts_vanilla = require("./Overlay.css");
-var overlayCSS = "_1dhu6810-3-5-2";
+var overlayCSS = "_1dhu6810-3-6-0";