@kouji-ui/core 0.9.0 → 0.9.2

package/fesm2022/kouji-ui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, Directive, PLATFORM_ID, signal, DestroyRef, Injectable, ElementRef, afterNextRender, forwardRef, InjectionToken, Injector, computed, effect, untracked, viewChild, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, model, isSignal, DOCUMENT as DOCUMENT$1, output, numberAttribute, afterRenderEffect, contentChildren, makeEnvironmentProviders, LOCALE_ID, provideEnvironmentInitializer, contentChild, linkedSignal, PendingTasks, TemplateRef, runInInjectionContext, resource } from '@angular/core';
+import { inject, input, booleanAttribute, Directive, PLATFORM_ID, signal, DestroyRef, Injectable, ElementRef, afterNextRender, untracked, forwardRef, InjectionToken, Injector, computed, effect, viewChild, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, model, isSignal, DOCUMENT as DOCUMENT$1, output, numberAttribute, afterRenderEffect, contentChildren, makeEnvironmentProviders, LOCALE_ID, provideEnvironmentInitializer, contentChild, linkedSignal, PendingTasks, TemplateRef, runInInjectionContext, resource } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, FormGroupDirective, FormGroup, FormArray } from '@angular/forms';
 import { Subject } from 'rxjs';
@@ -282,10 +282,13 @@ class KjFocusRing {
         afterNextRender(() => {
             if (!isPlatformBrowser(this.platformId))
                 return;
-            const onFocus = () => {
-                this._focusVisible.set(this.inputModality.modality() === 'keyboard');
-            };
-            const onBlur = () => { this._focusVisible.set(false); };
+            // `focus` / `blur` can fire synchronously while Angular renders — a
+            // focused element that a binding disables or removes blurs at once in
+            // Chromium — and a raw listener inherits the template's reactive
+            // context, where a signal write throws NG0600. `untracked` runs the
+            // handlers outside it (Angular's own listeners do the same).
+            const onFocus = () => untracked(() => this._focusVisible.set(this.inputModality.modality() === 'keyboard'));
+            const onBlur = () => untracked(() => this._focusVisible.set(false));
             const releaseModality = this.inputModality.retain();
             this.el.nativeElement.addEventListener('focus', onFocus);
             this.el.nativeElement.addEventListener('blur', onBlur);
@@ -1971,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/
@@ -2122,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();
@@ -2195,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;
     }
@@ -2908,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
@@ -2922,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
@@ -2977,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 */ []));
@@ -3105,7 +3172,9 @@ function releaseInert(el) {
  * Makes everything behind a modal `panel` inert: every child of `<body>`
  * outside the overlay container (except script/style nodes and live
  * regions), plus every overlay wrapper opened before the panel's own — a
- * dialog stacked on a dialog freezes the one below. A body child that
+ * dialog stacked on a dialog freezes the one below. The container itself is
+ * never inerted, even for a panel mounted outside it, so overlays the modal
+ * opens afterwards (dropdowns, pickers) stay usable. A body child that
  * contains the panel (an inline-mounted modal) is left alone, because
  * inerting it would inert the panel itself.
  *
@@ -3117,10 +3186,19 @@ function inertSiblingsOf(panel) {
     const body = panel.ownerDocument?.body;
     if (!body)
         return () => { };
-    const container = panel.closest('.kj-overlay-container');
+    // Overlay roots are never inerted, whether or not the panel lives in one.
+    // An inline-mounted (`inPlace`) modal sits outside the root, yet the
+    // overlays it opens — a select, combobox or date picker dropdown — mount
+    // into it after the modal opened: inerting the root would freeze them. The
+    // wrappers open at this point (below the modal) are frozen one by one
+    // instead; later ones stay live.
+    const containers = Array.from(body.children).filter(isOverlayContainer);
+    const own = panel.closest('.kj-overlay-container');
+    if (own && !containers.includes(own))
+        containers.push(own);
     const targets = [];
     for (const child of Array.from(body.children)) {
-        if (child === container)
+        if (isOverlayContainer(child))
             continue;
         if (child.contains(panel))
             continue;
@@ -3130,12 +3208,13 @@ function inertSiblingsOf(panel) {
             continue;
         targets.push(child);
     }
-    if (container) {
-        const own = Array.from(container.children).find((w) => w.contains(panel));
+    for (const container of containers) {
+        const ownWrapper = Array.from(container.children).find((w) => w.contains(panel));
         for (const wrapper of Array.from(container.children)) {
-            if (wrapper === own)
+            if (wrapper === ownWrapper)
                 continue;
-            const below = !own || !!(wrapper.compareDocumentPosition(own) & Node.DOCUMENT_POSITION_FOLLOWING);
+            const below = !ownWrapper ||
+                !!(wrapper.compareDocumentPosition(ownWrapper) & Node.DOCUMENT_POSITION_FOLLOWING);
             if (below)
                 targets.push(wrapper);
         }
@@ -3151,6 +3230,10 @@ function inertSiblingsOf(panel) {
             releaseInert(el);
     };
 }
+/** Whether `el` is an overlay root (`getOverlayContainer()`'s element, or a look-alike). */
+function isOverlayContainer(el) {
+    return (el.hasAttribute('data-kj-overlay-container') || el.classList.contains('kj-overlay-container'));
+}
 
 /**
  * Mount strategy for declarative overlays whose panel is rendered inline
@@ -4515,6 +4598,9 @@ const read$2 = (v, fallback) => {
  * do not bubble, and elements with `display: contents` (e.g. `<kj-button>`)
  * never receive these events because they have no rendered box. Walk to the
  * first descendant with a layout box.
+ *
+ * Measures, so it forces a layout: call it only on a hover, never on attach —
+ * a table with a hover trigger per row would otherwise lay out once per row.
  */
 const effectiveHoverTarget = (el) => {
     if (!el.ownerDocument?.defaultView)
@@ -4542,7 +4628,9 @@ function onHover(initialOpts = {}) {
     let openTimer = 0, closeTimer = 0;
     let onEnter = null;
     let onLeave = null;
-    let listenTarget = null;
+    let onFirstOver = null;
+    let triggerTarget = null;
+    let boxTarget = null;
     let panelTarget = null;
     const cancelClose = () => {
         if (closeTimer) {
@@ -4584,11 +4672,12 @@ function onHover(initialOpts = {}) {
         const trigger = ctx.triggerEl();
         if (!trigger || onEnter)
             return;
-        listenTarget = effectiveHoverTarget(trigger);
         onEnter = () => {
             cancelClose();
             wirePanel();
-            if (ctx?.isOpen())
+            // The first hover can reach here twice (the bubbled `pointerover` that
+            // resolves the box target, then that target's own `pointerenter`).
+            if (ctx?.isOpen() || openTimer)
                 return;
             openTimer = setTimeout(() => {
                 openTimer = 0;
@@ -4602,8 +4691,27 @@ function onHover(initialOpts = {}) {
             wirePanel();
             scheduleClose();
         };
-        listenTarget.addEventListener('pointerenter', onEnter);
-        listenTarget.addEventListener('pointerleave', onLeave);
+        // Nothing is measured here. The trigger listens directly (enough when it
+        // has a box); a `display: contents` trigger only sees the bubbled
+        // `pointerover` of a descendant, so the first one resolves — and measures,
+        // once — the descendant that actually receives enter / leave.
+        onFirstOver = () => {
+            if (!onEnter || !onLeave || !triggerTarget)
+                return;
+            triggerTarget.removeEventListener('pointerover', onFirstOver);
+            onFirstOver = null;
+            const target = effectiveHoverTarget(triggerTarget);
+            if (target !== triggerTarget) {
+                boxTarget = target;
+                target.addEventListener('pointerenter', onEnter);
+                target.addEventListener('pointerleave', onLeave);
+            }
+            onEnter();
+        };
+        triggerTarget = trigger;
+        trigger.addEventListener('pointerenter', onEnter);
+        trigger.addEventListener('pointerleave', onLeave);
+        trigger.addEventListener('pointerover', onFirstOver);
     };
     return {
         ariaHasPopup: null,
@@ -4618,10 +4726,16 @@ function onHover(initialOpts = {}) {
         onOpen() { },
         onClose() { },
         detach() {
-            if (listenTarget && onEnter)
-                listenTarget.removeEventListener('pointerenter', onEnter);
-            if (listenTarget && onLeave)
-                listenTarget.removeEventListener('pointerleave', onLeave);
+            for (const el of [triggerTarget, boxTarget]) {
+                if (!el)
+                    continue;
+                if (onEnter)
+                    el.removeEventListener('pointerenter', onEnter);
+                if (onLeave)
+                    el.removeEventListener('pointerleave', onLeave);
+            }
+            if (triggerTarget && onFirstOver)
+                triggerTarget.removeEventListener('pointerover', onFirstOver);
             if (panelTarget) {
                 panelTarget.removeEventListener('pointerenter', cancelClose);
                 panelTarget.removeEventListener('pointerleave', scheduleClose);
@@ -4630,8 +4744,8 @@ function onHover(initialOpts = {}) {
                 clearTimeout(openTimer);
             if (closeTimer)
                 clearTimeout(closeTimer);
-            onEnter = onLeave = null;
-            listenTarget = null;
+            onEnter = onLeave = onFirstOver = null;
+            triggerTarget = boxTarget = null;
             panelTarget = null;
             openTimer = closeTimer = 0;
             toggle = null;
@@ -22495,7 +22609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { kjCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCell", required: true }] }] } });
 
-/** `Node.DOCUMENT_POSITION_PRECEDING` — inlined so the DOM-order sort also runs on the server. */
+/** `Node.DOCUMENT_POSITION_PRECEDING`, inlined so the module never touches the `Node` global. */
 const DOCUMENT_POSITION_PRECEDING = 2;
 /** Text-entry controls whose own arrow / Home / End handling must win over grid navigation. */
 const TEXT_ENTRY_SELECTOR = 'input:not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]), textarea, select, [contenteditable]:not([contenteditable="false"])';
@@ -22533,23 +22647,32 @@ class KjTableKeyboardNav {
     /** Id of the cell the user focused last; survives the cell leaving the DOM. */
     activeId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /** Tab stop resolved after the last render (see {@link tabStopId}). */
+    resolvedStopId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStopId" }] : /* istanbul ignore next */ []));
     /**
      * Id of the cell that owns `tabindex="0"`: the last focused cell while it
      * is rendered, else the first rendered cell in DOM order.
+     *
+     * Every cell reads this, so it must not touch the `cells` query: each
+     * stamped cell view dirties the query, and a per-cell read would re-collect
+     * it and re-sort the DOM once per cell — O(n²) for an n-cell body. It is
+     * resolved once per render instead, after the cells are in the DOM. Until
+     * then (and on the server) no cell is a Tab stop.
      */
-    tabStopId = computed(() => {
-        const cells = this.cells();
-        if (cells.length === 0)
-            return null;
-        const active = this.activeId();
-        if (active !== null && cells.some((c) => c.cellId() === active))
-            return active;
-        return firstInDomOrder(cells).cellId();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabStopId" }] : /* istanbul ignore next */ []));
+    tabStopId = this.resolvedStopId.asReadonly();
+    constructor() {
+        afterRenderEffect(() => {
+            const cells = this.cells();
+            const active = this.activeId();
+            this.resolvedStopId.set(resolveTabStop(cells, active));
+        });
+    }
     /** Record `cellId` as the last focused cell. @param cellId TanStack `cell.id`. */
     setActive(cellId) {
         this.activeId.set(cellId);
+        // A cell that just took focus is rendered: it is the Tab stop right away.
+        this.resolvedStopId.set(cellId);
     }
     onKeyDown(event) {
         if (event.defaultPrevented)
@@ -22651,7 +22774,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     providers: [{ provide: KJ_TABLE_KEYBOARD_NAV, useExisting: KjTableKeyboardNav }],
                     host: { '(keydown)': 'onKeyDown($event)' },
                 }]
-        }], propDecorators: { cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjTableCell), { ...{ descendants: true }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjTableCell), { ...{ descendants: true }, isSignal: true }] }] } });
+/** The active cell while it is rendered, else the first rendered cell in DOM order. */
+function resolveTabStop(cells, active) {
+    if (cells.length === 0)
+        return null;
+    if (active !== null && cells.some((c) => c.cellId() === active))
+        return active;
+    return firstInDomOrder(cells).cellId();
+}
 /**
  * The first cell in DOM order. Query results follow declaration order, which
  * a row template stamped into several bodies (pinned top, centre, pinned