@kouji-ui/core 0.9.0 → 0.9.1

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);
@@ -3105,7 +3108,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 +3122,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 +3144,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 +3166,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 +4534,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 +4564,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 +4608,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 +4627,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 +4662,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 +4680,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 +22545,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 +22583,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 +22710,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