@zag-js/dismissable 1.22.1 → 1.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +6 -1
  2. package/dist/index.d.ts +6 -1
  3. package/dist/index.js +33 -6
  4. package/dist/index.mjs +33 -6
  5. package/package.json +4 -4
package/dist/index.d.mts CHANGED
@@ -2,6 +2,7 @@ import { InteractOutsideHandlers } from '@zag-js/interact-outside';
2
2
  export { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from '@zag-js/interact-outside';
3
3
  import { MaybeFunction } from '@zag-js/utils';
4
4
 
5
+ type LayerType = "dialog" | "popover" | "menu" | "listbox" | (string & {});
5
6
  type LayerDismissEventDetail = {
6
7
  originalLayer: HTMLElement;
7
8
  targetLayer: HTMLElement | undefined;
@@ -56,10 +57,14 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
56
57
  * Whether to warn when the node is `null` or `undefined`
57
58
  */
58
59
  warnOnMissingNode?: boolean | undefined;
60
+ /**
61
+ * The type of layer being tracked
62
+ */
63
+ type?: LayerType | undefined;
59
64
  }
60
65
  declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
61
66
  declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
62
67
  defer?: boolean | undefined;
63
68
  }): () => void;
64
69
 
65
- export { type DismissableElementHandlers, type DismissableElementOptions, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };
70
+ export { type DismissableElementHandlers, type DismissableElementOptions, type LayerType, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };
package/dist/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { InteractOutsideHandlers } from '@zag-js/interact-outside';
2
2
  export { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from '@zag-js/interact-outside';
3
3
  import { MaybeFunction } from '@zag-js/utils';
4
4
 
5
+ type LayerType = "dialog" | "popover" | "menu" | "listbox" | (string & {});
5
6
  type LayerDismissEventDetail = {
6
7
  originalLayer: HTMLElement;
7
8
  targetLayer: HTMLElement | undefined;
@@ -56,10 +57,14 @@ interface DismissableElementOptions extends DismissableElementHandlers, Persiste
56
57
  * Whether to warn when the node is `null` or `undefined`
57
58
  */
58
59
  warnOnMissingNode?: boolean | undefined;
60
+ /**
61
+ * The type of layer being tracked
62
+ */
63
+ type?: LayerType | undefined;
59
64
  }
60
65
  declare function trackDismissableElement(nodeOrFn: NodeOrFn, options: DismissableElementOptions): () => void;
61
66
  declare function trackDismissableBranch(nodeOrFn: NodeOrFn, options?: {
62
67
  defer?: boolean | undefined;
63
68
  }): () => void;
64
69
 
65
- export { type DismissableElementHandlers, type DismissableElementOptions, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };
70
+ export { type DismissableElementHandlers, type DismissableElementOptions, type LayerType, type PersistentElementOptions, trackDismissableBranch, trackDismissableElement };
package/dist/index.js CHANGED
@@ -41,6 +41,22 @@ var layerStack = {
41
41
  getNestedLayers(node) {
42
42
  return Array.from(this.layers).slice(this.indexOf(node) + 1);
43
43
  },
44
+ getLayersByType(type) {
45
+ return this.layers.filter((layer) => layer.type === type);
46
+ },
47
+ getNestedLayersByType(node, type) {
48
+ const index = this.indexOf(node);
49
+ if (index === -1) return [];
50
+ return this.layers.slice(index + 1).filter((layer) => layer.type === type);
51
+ },
52
+ getParentLayerOfType(node, type) {
53
+ const index = this.indexOf(node);
54
+ if (index <= 0) return void 0;
55
+ return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
56
+ },
57
+ countNestedLayersOfType(node, type) {
58
+ return this.getNestedLayersByType(node, type).length;
59
+ },
44
60
  isInNestedLayer(node, target) {
45
61
  return this.getNestedLayers(node).some((layer) => domQuery.contains(layer.node, target));
46
62
  },
@@ -49,7 +65,7 @@ var layerStack = {
49
65
  },
50
66
  add(layer) {
51
67
  this.layers.push(layer);
52
- this.syncLayerIndex();
68
+ this.syncLayers();
53
69
  },
54
70
  addBranch(node) {
55
71
  this.branches.push(node);
@@ -62,15 +78,26 @@ var layerStack = {
62
78
  _layers.forEach((layer) => layerStack.dismiss(layer.node, node));
63
79
  }
64
80
  this.layers.splice(index, 1);
65
- this.syncLayerIndex();
81
+ this.syncLayers();
66
82
  },
67
83
  removeBranch(node) {
68
84
  const index = this.branches.indexOf(node);
69
85
  if (index >= 0) this.branches.splice(index, 1);
70
86
  },
71
- syncLayerIndex() {
87
+ syncLayers() {
72
88
  this.layers.forEach((layer, index) => {
73
89
  layer.node.style.setProperty("--layer-index", `${index}`);
90
+ layer.node.removeAttribute("data-nested");
91
+ layer.node.removeAttribute("data-has-nested");
92
+ const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
93
+ if (parentOfSameType) {
94
+ layer.node.setAttribute("data-nested", layer.type);
95
+ }
96
+ const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
97
+ if (nestedCount > 0) {
98
+ layer.node.setAttribute("data-has-nested", layer.type);
99
+ }
100
+ layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
74
101
  });
75
102
  },
76
103
  indexOf(node) {
@@ -92,7 +119,7 @@ var layerStack = {
92
119
  originalIndex: index,
93
120
  targetIndex: parent ? this.indexOf(parent) : -1
94
121
  });
95
- this.syncLayerIndex();
122
+ this.syncLayers();
96
123
  },
97
124
  clear() {
98
125
  this.remove(this.layers[0].node);
@@ -157,8 +184,8 @@ function trackDismissableElementImpl(node, options) {
157
184
  if (!node) {
158
185
  return;
159
186
  }
160
- const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
161
- const layer = { dismiss: onDismiss, node, pointerBlocking, requestDismiss: onRequestDismiss };
187
+ const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
188
+ const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
162
189
  layerStack.add(layer);
163
190
  assignPointerEventToLayers();
164
191
  function onPointerDownOutside(event) {
package/dist/index.mjs CHANGED
@@ -39,6 +39,22 @@ var layerStack = {
39
39
  getNestedLayers(node) {
40
40
  return Array.from(this.layers).slice(this.indexOf(node) + 1);
41
41
  },
42
+ getLayersByType(type) {
43
+ return this.layers.filter((layer) => layer.type === type);
44
+ },
45
+ getNestedLayersByType(node, type) {
46
+ const index = this.indexOf(node);
47
+ if (index === -1) return [];
48
+ return this.layers.slice(index + 1).filter((layer) => layer.type === type);
49
+ },
50
+ getParentLayerOfType(node, type) {
51
+ const index = this.indexOf(node);
52
+ if (index <= 0) return void 0;
53
+ return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
54
+ },
55
+ countNestedLayersOfType(node, type) {
56
+ return this.getNestedLayersByType(node, type).length;
57
+ },
42
58
  isInNestedLayer(node, target) {
43
59
  return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
44
60
  },
@@ -47,7 +63,7 @@ var layerStack = {
47
63
  },
48
64
  add(layer) {
49
65
  this.layers.push(layer);
50
- this.syncLayerIndex();
66
+ this.syncLayers();
51
67
  },
52
68
  addBranch(node) {
53
69
  this.branches.push(node);
@@ -60,15 +76,26 @@ var layerStack = {
60
76
  _layers.forEach((layer) => layerStack.dismiss(layer.node, node));
61
77
  }
62
78
  this.layers.splice(index, 1);
63
- this.syncLayerIndex();
79
+ this.syncLayers();
64
80
  },
65
81
  removeBranch(node) {
66
82
  const index = this.branches.indexOf(node);
67
83
  if (index >= 0) this.branches.splice(index, 1);
68
84
  },
69
- syncLayerIndex() {
85
+ syncLayers() {
70
86
  this.layers.forEach((layer, index) => {
71
87
  layer.node.style.setProperty("--layer-index", `${index}`);
88
+ layer.node.removeAttribute("data-nested");
89
+ layer.node.removeAttribute("data-has-nested");
90
+ const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
91
+ if (parentOfSameType) {
92
+ layer.node.setAttribute("data-nested", layer.type);
93
+ }
94
+ const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
95
+ if (nestedCount > 0) {
96
+ layer.node.setAttribute("data-has-nested", layer.type);
97
+ }
98
+ layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
72
99
  });
73
100
  },
74
101
  indexOf(node) {
@@ -90,7 +117,7 @@ var layerStack = {
90
117
  originalIndex: index,
91
118
  targetIndex: parent ? this.indexOf(parent) : -1
92
119
  });
93
- this.syncLayerIndex();
120
+ this.syncLayers();
94
121
  },
95
122
  clear() {
96
123
  this.remove(this.layers[0].node);
@@ -155,8 +182,8 @@ function trackDismissableElementImpl(node, options) {
155
182
  if (!node) {
156
183
  return;
157
184
  }
158
- const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
159
- const layer = { dismiss: onDismiss, node, pointerBlocking, requestDismiss: onRequestDismiss };
185
+ const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
186
+ const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
160
187
  layerStack.add(layer);
161
188
  assignPointerEventToLayers();
162
189
  function onPointerDownOutside(event) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/dismissable",
3
- "version": "1.22.1",
3
+ "version": "1.23.0",
4
4
  "description": "Dismissable layer utilities for the DOM",
5
5
  "keywords": [
6
6
  "js",
@@ -23,9 +23,9 @@
23
23
  "access": "public"
24
24
  },
25
25
  "dependencies": {
26
- "@zag-js/interact-outside": "1.22.1",
27
- "@zag-js/dom-query": "1.22.1",
28
- "@zag-js/utils": "1.22.1"
26
+ "@zag-js/interact-outside": "1.23.0",
27
+ "@zag-js/dom-query": "1.23.0",
28
+ "@zag-js/utils": "1.23.0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "clean-package": "2.2.0"