@kouji-ui/core 0.9.1 → 0.9.2

package/fesm2022/kouji-ui-core.mjs

@@ -1974,6 +1974,21 @@ function longestRunMs(durations, delays) {
 }
 /** The strategy slots of a bundle, in attach order. */
 const STRATEGY_SLOTS = ['mount', 'position', 'backdrop', 'scrollLock', 'focusTrap', 'liveAnnouncer', 'trigger'];
+/**
+ * The controller each attached strategy instance serves. A strategy is
+ * stateful (it holds one overlay's context and its inert / scroll-lock
+ * release handles), so one instance must never run two overlays at once.
+ */
+const strategyOwners = new WeakMap();
+/**
+ * @internal The controller `strategy` is attached to, if any. `KjOverlayPanel`
+ * uses it to drop strategies it inherited from an enclosing overlay (a
+ * select inside a modal dialog must not run the dialog's scrim, inert and
+ * focus trap as its own).
+ */
+function overlayStrategyOwner(strategy) {
+    return strategyOwners.get(strategy);
+}
 /**
  * Owns the overlay's open/closed state machine plus the rAF/transition
  * orchestration. Strategies (mount/position/backdrop/focus-trap/scroll-lock/
@@ -2125,13 +2140,21 @@ class KjOverlayController {
             }
             for (const slot of STRATEGY_SLOTS) {
                 const old = prev[slot];
-                if (old && old !== next[slot])
+                if (old && old !== next[slot]) {
                     old.detach();
+                    if (strategyOwners.get(old) === this)
+                        strategyOwners.delete(old);
+                }
             }
         }
         this.strategies = next;
-        for (const slot of STRATEGY_SLOTS)
-            next[slot]?.attach(this.context);
+        for (const slot of STRATEGY_SLOTS) {
+            const strategy = next[slot];
+            if (!strategy)
+                continue;
+            strategyOwners.set(strategy, this);
+            strategy.attach(this.context);
+        }
     }
     open() {
         const cur = this._state();
@@ -2198,7 +2221,12 @@ class KjOverlayController {
             return;
         const s = this.strategies;
         for (const slot of [...STRATEGY_SLOTS].reverse()) {
-            s[slot]?.detach();
+            const strategy = s[slot];
+            if (!strategy)
+                continue;
+            strategy.detach();
+            if (strategyOwners.get(strategy) === this)
+                strategyOwners.delete(strategy);
         }
         this.strategies = null;
     }
@@ -2911,6 +2939,36 @@ function resolveTokens(self) {
         role: inject(KJ_OVERLAY_PANEL_ROLE, opts),
     };
 }
+/**
+ * `tokens` minus every strategy already attached to a controller other than
+ * `controller`. Strategies are resolved through the injector chain, so an
+ * overlay rendered inside another one (a select, combobox or date picker in
+ * a service-launched dialog) would otherwise find the enclosing overlay's
+ * own instances for every slot it does not provide itself — and run the
+ * dialog's scrim, `inert` and focus trap as if the dropdown were a second
+ * modal, freezing the dialog it belongs to. Those instances belong to the
+ * enclosing overlay; the nested one falls back to "none" for that slot.
+ */
+function withoutForeign(tokens, controller) {
+    if (!controller)
+        return tokens;
+    const mine = (s) => {
+        if (!s)
+            return s;
+        const owner = overlayStrategyOwner(s);
+        return owner && owner !== controller ? null : s;
+    };
+    return {
+        ...tokens,
+        mount: mine(tokens.mount),
+        position: mine(tokens.position),
+        backdrop: mine(tokens.backdrop),
+        focusTrap: mine(tokens.focusTrap),
+        scrollLock: mine(tokens.scrollLock),
+        liveAnnouncer: mine(tokens.liveAnnouncer),
+        trigger: mine(tokens.trigger),
+    };
+}
 /**
  * Marks an element as the overlay's panel — wires it to the controller,
  * resolves the panel role/aria-modal, and binds DOM state attributes
@@ -2925,7 +2983,10 @@ function resolveTokens(self) {
  * must not inherit the dialog's scroll lock, scrim or `alertdialog` role.
  * A panel whose controller is on its host chain (a builder-launched body,
  * or the root pattern where one directive provides controller and
- * strategies for the whole subtree) reads them from that chain as before.
+ * strategies for the whole subtree) reads them from that chain, minus any
+ * strategy instance an enclosing overlay is already running: a select inside
+ * a service-launched dialog finds the dialog's scrim, focus trap and scroll
+ * lock up the chain, and must not adopt them.
  *
  * A portalled panel whose scope provides a backdrop strategy also gets a
  * real `<kj-backdrop>` scrim (created next to the panel, moved into the
@@ -2980,8 +3041,11 @@ class KjOverlayPanel {
         return !!t && t.controller !== this.hostController;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scoped" }] : /* istanbul ignore next */ []));
-    /** The tokens that apply to this panel. */
-    tokens = computed(() => (this.scoped() ? this.own : this.inherited), /* @ts-ignore */
+    /**
+     * The tokens that apply to this panel. Inherited ones exclude strategies an
+     * enclosing overlay already runs (see {@link withoutForeign}).
+     */
+    tokens = computed(() => this.scoped() ? this.own : withoutForeign(this.inherited, this.hostController), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tokens" }] : /* istanbul ignore next */ []));
     role = computed(() => this.tokens().role ?? 'dialog', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));