ropav 0.14.0 → 0.15.0

package/dist/utils/aria-hide-outside.d.ts

@@ -1,5 +1,8 @@
 export interface AriaHideOutsideOptions {
-    /** Nothing above this element is hidden. @default document.body */
+    /**
+     * Nothing outside this element is hidden, and only this element is watched for content added
+     * later. @default document.body
+     */
     root?: Element;
     /**
      * Uses `inert` instead of `aria-hidden`, which also blocks pointer interaction and focus

package/dist/utils/aria-hide-outside.js

@@ -1,3 +1,4 @@
+import { regionsOverlap } from "./region.js";
 import { TOP_LAYER_SELECTOR } from "./top-layer.js";
 //#region src/utils/aria-hide-outside.ts
 var supportsInert = typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
@@ -9,8 +10,19 @@ var supportsInert = typeof HTMLElement !== "undefined" && "inert" in HTMLElement
 * itself keeps a count of zero, so it is never un-hidden by this.
 */
 var refCounts = /* @__PURE__ */ new WeakMap();
-/** Active layers, innermost last. Only the innermost watches the DOM for new content. */
+/**
+* Active layers, innermost last. Only the innermost of the layers whose roots overlap watches the
+* DOM for new content: two modals open in two apps' windows side by side each keep watching their
+* own, while two nested in one place hand watching to the inner one.
+*/
 var layers = [];
+/** Whether a later layer covers this one's root, so this one leaves the watching to it. */
+var isShadowed = (layer) => layers.slice(layers.indexOf(layer) + 1).some((later) => regionsOverlap(later.root, layer.root));
+/** Watch with exactly the layers nothing later covers. */
+var syncObservers = () => {
+	for (const layer of layers) if (isShadowed(layer)) layer.disconnect();
+	else layer.observe();
+};
 /** Content that must never be hidden, however deep in the page it sits. */
 var ALWAYS_VISIBLE_SELECTOR = `[data-live-announcer], ${TOP_LAYER_SELECTOR}`;
 var isAlwaysVisible = (node) => node instanceof HTMLElement && node.matches(ALWAYS_VISIBLE_SELECTOR);
@@ -67,7 +79,6 @@ var ariaHideOutside = (targets, options = {}) => {
 			node = walker.nextNode();
 		}
 	};
-	layers.at(-1)?.disconnect();
 	walk(root);
 	const observer = new MutationObserver((changes) => {
 		for (const change of changes) {
@@ -88,10 +99,11 @@ var ariaHideOutside = (targets, options = {}) => {
 			childList: true,
 			subtree: true
 		}),
+		root,
 		visibleNodes
 	};
-	layer.observe();
 	layers.push(layer);
+	syncObservers();
 	return () => {
 		observer.disconnect();
 		for (const node of hiddenNodes) {
@@ -104,7 +116,7 @@ var ariaHideOutside = (targets, options = {}) => {
 		}
 		const index = layers.indexOf(layer);
 		if (index >= 0) layers.splice(index, 1);
-		layers.at(-1)?.observe();
+		syncObservers();
 	};
 };
 /**
@@ -116,7 +128,7 @@ var ariaHideOutside = (targets, options = {}) => {
 * @returns A function withdrawing the exemption, or `undefined` if nothing is hiding anything.
 */
 var keepVisible = (element) => {
-	const layer = layers.at(-1);
+	const layer = layers.findLast((candidate) => candidate.root.contains(element)) ?? layers.at(-1);
 	if (!layer || layer.visibleNodes.has(element)) return void 0;
 	layer.visibleNodes.add(element);
 	return () => {

package/dist/utils/region.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Whether two parts of the page can see each other's overlays.
+ *
+ * An overlay belongs to a region: the root its `PortalProvider` names, or the whole document
+ * (`null`) without one. The page-wide stacks — which overlay is innermost, which one watches the
+ * DOM, which one holds focus — are only shared between overlays whose regions overlap. Two apps'
+ * windows side by side are separate regions, so a modal in one is not stacked over a modal in the
+ * other; the whole document overlaps everything, so without a provider nothing changes.
+ */
+export declare const regionsOverlap: (a: Element | null, b: Element | null) => boolean;

package/dist/utils/region.js

@@ -0,0 +1,13 @@
+//#region src/utils/region.ts
+/**
+* Whether two parts of the page can see each other's overlays.
+*
+* An overlay belongs to a region: the root its `PortalProvider` names, or the whole document
+* (`null`) without one. The page-wide stacks — which overlay is innermost, which one watches the
+* DOM, which one holds focus — are only shared between overlays whose regions overlap. Two apps'
+* windows side by side are separate regions, so a modal in one is not stacked over a modal in the
+* other; the whole document overlaps everything, so without a provider nothing changes.
+*/
+var regionsOverlap = (a, b) => a == null || b == null || a.contains(b) || b.contains(a);
+//#endregion
+export { regionsOverlap };

package/dist/version.js

@@ -1,4 +1,4 @@
 //#region src/version.ts
-var ROPAV_VERSION = "0.14.0";
+var ROPAV_VERSION = "0.15.0";
 //#endregion
 export { ROPAV_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Vapor-native Vue 3 component library — accessible by default, styled with framework-agnostic CSS.",
   "keywords": [
     "components",
@@ -277,6 +277,10 @@
       "import": "./dist/components/popover/index.js",
       "types": "./dist/components/popover/index.d.ts"
     },
+    "./portal-provider": {
+      "import": "./dist/components/portal-provider/index.js",
+      "types": "./dist/components/portal-provider/index.d.ts"
+    },
     "./progress-bar": {
       "import": "./dist/components/progress-bar/index.js",
       "types": "./dist/components/progress-bar/index.d.ts"
@@ -417,7 +421,7 @@
     "@internationalized/date": "3.12.4",
     "@internationalized/number": "3.6.8",
     "@internationalized/string": "3.2.10",
-    "@ropav/styles": "0.14.0"
+    "@ropav/styles": "0.15.0"
   },
   "peerDependencies": {
     "vue": "^3.6.0-rc.8"