@zag-js/dismissable 2.0.0-next.2 → 2.0.0-next.3

package/dist/dismissable-layer.d.mts

@@ -56,6 +56,8 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
      * The type of layer being tracked
      */
     type?: LayerType | undefined;
+    /** Groups this layer with its peers, so closing one does not dismiss the other. */
+    group?: string | undefined;
 }
 declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): (args_0?: TeardownReason | undefined) => void;
 declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {

package/dist/dismissable-layer.d.ts

@@ -56,6 +56,8 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
      * The type of layer being tracked
      */
     type?: LayerType | undefined;
+    /** Groups this layer with its peers, so closing one does not dismiss the other. */
+    group?: string | undefined;
 }
 declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): (args_0?: TeardownReason | undefined) => void;
 declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {

package/dist/dismissable-layer.js

@@ -38,12 +38,14 @@ function trackDismissableElementImpl(node, options) {
     exclude: excludeContainers,
     debug,
     type = "dialog",
+    group,
     onLayerChange
   } = options;
   const layer = {
     dismiss: onDismiss,
     node,
     type,
+    group,
     pointerBlocking,
     requestDismiss: onRequestDismiss,
     onLayerChange

package/dist/dismissable-layer.mjs

@@ -18,12 +18,14 @@ function trackDismissableElementImpl(node, options) {
     exclude: excludeContainers,
     debug,
     type = "dialog",
+    group,
     onLayerChange
   } = options;
   const layer = {
     dismiss: onDismiss,
     node,
     type,
+    group,
     pointerBlocking,
     requestDismiss: onRequestDismiss,
     onLayerChange

package/dist/layer-stack.d.mts

@@ -20,6 +20,8 @@ interface Layer {
     id?: string | undefined;
     /** The layer this one opened inside. Captured once and kept across re-registration. */
     parentId?: string | undefined;
+    /** Layers sharing a group are peers, not ancestors. Used by menubar menus. */
+    group?: string | undefined;
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
@@ -46,6 +48,8 @@ declare const layerStack: {
     isBelowPointerBlockingLayer(node: HTMLElement): boolean;
     isTopMost(node: HTMLElement | null): boolean;
     layerFor(node: HTMLElement | null): Layer | undefined;
+    /** The most recently added layer in the same group, if any. */
+    peerFor(group: string): Layer | undefined;
     isDescendantOf(layer: Layer, ancestorId: string | undefined): boolean;
     depthOf(layer: Layer): number;
     /** Descendants, shallowest first, so a cascade dismisses parents before their own children. */

package/dist/layer-stack.d.ts

@@ -20,6 +20,8 @@ interface Layer {
     id?: string | undefined;
     /** The layer this one opened inside. Captured once and kept across re-registration. */
     parentId?: string | undefined;
+    /** Layers sharing a group are peers, not ancestors. Used by menubar menus. */
+    group?: string | undefined;
     dismiss: VoidFunction;
     node: HTMLElement;
     type: LayerType;
@@ -46,6 +48,8 @@ declare const layerStack: {
     isBelowPointerBlockingLayer(node: HTMLElement): boolean;
     isTopMost(node: HTMLElement | null): boolean;
     layerFor(node: HTMLElement | null): Layer | undefined;
+    /** The most recently added layer in the same group, if any. */
+    peerFor(group: string): Layer | undefined;
     isDescendantOf(layer: Layer, ancestorId: string | undefined): boolean;
     depthOf(layer: Layer): number;
     /** Descendants, shallowest first, so a cascade dismisses parents before their own children. */

package/dist/layer-stack.js

@@ -61,6 +61,13 @@ var layerStack = {
   layerFor(node) {
     return this.layers.find((layer) => layer.node === node);
   },
+  /** The most recently added layer in the same group, if any. */
+  peerFor(group) {
+    for (let i = this.count() - 1; i >= 0; i--) {
+      if (this.layers[i].group === group) return this.layers[i];
+    }
+    return void 0;
+  },
   isDescendantOf(layer, ancestorId) {
     if (!ancestorId) return false;
     const seen = /* @__PURE__ */ new Set();
@@ -131,7 +138,8 @@ var layerStack = {
       layer.parentId = pending.parentId;
     } else {
       layer.id ?? (layer.id = `layer-${++layerId}`);
-      layer.parentId ?? (layer.parentId = this.layers[this.count() - 1]?.id);
+      const peer = layer.group ? this.peerFor(layer.group) : void 0;
+      layer.parentId = peer ? peer.parentId : layer.parentId ?? this.layers[this.count() - 1]?.id;
     }
     if (existingIndex !== -1) {
       this.layers.splice(existingIndex, 1);

package/dist/layer-stack.mjs

@@ -36,6 +36,13 @@ var layerStack = {
   layerFor(node) {
     return this.layers.find((layer) => layer.node === node);
   },
+  /** The most recently added layer in the same group, if any. */
+  peerFor(group) {
+    for (let i = this.count() - 1; i >= 0; i--) {
+      if (this.layers[i].group === group) return this.layers[i];
+    }
+    return void 0;
+  },
   isDescendantOf(layer, ancestorId) {
     if (!ancestorId) return false;
     const seen = /* @__PURE__ */ new Set();
@@ -106,7 +113,8 @@ var layerStack = {
       layer.parentId = pending.parentId;
     } else {
       layer.id ?? (layer.id = `layer-${++layerId}`);
-      layer.parentId ?? (layer.parentId = this.layers[this.count() - 1]?.id);
+      const peer = layer.group ? this.peerFor(layer.group) : void 0;
+      layer.parentId = peer ? peer.parentId : layer.parentId ?? this.layers[this.count() - 1]?.id;
     }
     if (existingIndex !== -1) {
       this.layers.splice(existingIndex, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/dismissable",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.3",
   "description": "Dismissable layer utilities for the DOM",
   "keywords": [
     "js",
@@ -26,9 +26,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@zag-js/interact-outside": "2.0.0-next.2",
-    "@zag-js/utils": "2.0.0-next.2",
-    "@zag-js/dom-query": "2.0.0-next.2"
+    "@zag-js/interact-outside": "2.0.0-next.3",
+    "@zag-js/dom-query": "2.0.0-next.3",
+    "@zag-js/utils": "2.0.0-next.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0"