@kouji-ui/core 0.13.0 → 0.13.1

package/fesm2022/kouji-ui-core.mjs

@@ -1254,9 +1254,13 @@ class KjOverlayStack {
         if (e.key !== 'Escape')
             return;
         const top = this.topmost();
-        if (!top || !top.opts.closeOnEsc)
+        if (!top)
             return;
-        top.opts.onClose('escape');
+        // Handled (closed, or swallowed by an overlay that must be answered):
+        // app-level Escape listeners must not also close what sits behind it.
+        e.preventDefault();
+        if (top.opts.closeOnEsc)
+            top.opts.onClose('escape');
     }
     /** Is `target` a press outside `entry`'s content — a candidate dismissal? */
     isOutside(entry, target) {
@@ -26999,6 +27003,15 @@ class KjCombobox {
     /** Filter-aware visible items, exposed for KjListNavigatorConfig. */
     visibleItems = computed(() => this.filter.visibleItems(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Text the user typed since the list last closed or a value was picked —
+     * the only text that filters the list. `kjQuery` also carries the picked
+     * row's name (so the field reads as a picker), and filtering by it would
+     * list nothing but the picked row on every later open.
+     */
+    _typed = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_typed" }] : /* istanbul ignore next */ []));
+    filterQuery = this._typed.asReadonly();
     /** Public surface read by children. */
     query = this.kjQuery.asReadonly();
     open = this.controller.isOpen;
@@ -27053,7 +27066,7 @@ class KjCombobox {
     constructor() {
         this.filter.bind({
             items: this.items,
-            query: this.kjQuery,
+            query: this._typed,
             filterFn: this.adaptedFilter,
             // A windowed wrapper has already filtered the DATA; every rendered
             // row is a match by construction.
@@ -27067,55 +27080,69 @@ class KjCombobox {
             compareBy: this.compareBy,
         });
         effect(() => this.kjQueryChange.emit(this.kjQuery()));
-        // Auto-activate first visible item on query change so Enter can
-        // commit it without an explicit ArrowDown press. APG combobox 1.2
-        // discoverability pattern.
+        // Typed text lasts until the list closes (a pick closes it too).
         effect(() => {
-            this.kjQuery();
-            const autoFirst = this.kjAutoActivateFirst();
-            const nav = this._nav();
-            if (!autoFirst || !nav || this._virtual() !== null)
-                return;
-            untracked(() => {
-                const visible = this.filter.visibleItems();
-                nav.setActive(visible.length ? visible[0].id : null);
-            });
+            if (!this.open())
+                untracked(() => this._typed.set(''));
         });
-        // Seed the active item once the navigator attaches (input mounts).
+        // Place the cursor on open, on typing and once the navigator attaches.
+        // Typed text: the first match, so Enter commits it without an ArrowDown
+        // (APG combobox 1.2). No typed text: the picked row when it is listed,
+        // else the first — never the first row while another one is picked, or
+        // two rows read as chosen.
         effect(() => {
+            const typed = this._typed();
+            this.open();
             const nav = this._nav();
-            if (!nav || !this.kjAutoActivateFirst() || this._virtual() !== null)
-                return;
-            if (nav.activeId() !== null)
+            if (!this.kjAutoActivateFirst() || !nav || this._virtual() !== null)
                 return;
             untracked(() => {
                 const visible = this.filter.visibleItems();
-                if (visible.length > 0)
-                    nav.setActive(visible[0].id);
+                const picked = typed === '' ? visible.find(i => this.isPicked(i)) : undefined;
+                nav.setActive((picked ?? visible[0])?.id ?? null);
             });
         });
-        // Seed `kjQuery` from the selected item's label whenever the input
-        // would otherwise render blank. Covers the case where `kjValue` is
-        // bound up-front (preset) but no query text has been typed yet.
-        // A windowed wrapper owns this too: `items()` is a window, so a preset
-        // value whose row is scrolled out would never be found here.
+        // Write the picked row's name into the field when the VALUE changes, or
+        // when that row's text first renders (`label()` falls back to the row's
+        // text after its first render). Never because the user emptied the
+        // field: an empty field lists every option. A windowed wrapper owns this
+        // too: `items()` is a window, so a value whose row is scrolled out would
+        // never be found here.
+        let shown = null;
+        let seeded = false;
         effect(() => {
-            const items = this.items();
             const v = this.kjValue();
-            if (v === null || v === undefined || this._virtual() !== null)
+            if (v === null || v === undefined) {
+                shown = null;
+                return;
+            }
+            if (this._virtual() !== null)
                 return;
-            if (this.kjQuery() !== '')
+            const label = this.items().find(i => i.value() === v)?.label();
+            if (!label)
                 return;
+            if (shown && Object.is(shown.value, v) && shown.label === label)
+                return;
+            shown = { value: v, label };
+            const first = !seeded;
+            seeded = true;
             untracked(() => {
-                const match = items.find(i => i.value() === v);
-                if (match)
-                    this.kjQuery.set(match.label());
+                // A consumer-bound `kjQuery` beats the preset value's name on first render.
+                if (first && this.kjQuery() !== '')
+                    return;
+                this.kjQuery.set(label);
             });
         });
     }
+    isPicked(item) {
+        const v = item.value();
+        return v !== undefined && this._selection.isSelected(v);
+    }
+    /** Text typed into the input: sets the query, filters the list by it and opens it. */
     setQuery(value) {
         if (this.kjQuery() !== value)
             this.kjQuery.set(value);
+        this._typed.set(value);
         this.controller.open();
     }
     /**
@@ -27349,6 +27376,17 @@ class KjComboboxListbox {
             offset: this.kjOffset,
             matchTriggerWidth: 'min',
         });
+        // Keep the cursor's row in view: `aria-activedescendant` never moves DOM
+        // focus, so nothing else scrolls the list to it (a picked row far down the
+        // list on open, ArrowDown past the last visible row).
+        const doc = inject(DOCUMENT);
+        const injector = inject(Injector);
+        effect(() => {
+            const id = this.ctx.activeId();
+            if (!id || !this.ctx.open())
+                return;
+            afterNextRender(() => doc.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }), { injector });
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjComboboxListbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjComboboxListbox, isStandalone: true, selector: "[kjComboboxListbox]", inputs: { kjSide: { classPropertyName: "kjSide", publicName: "kjSide", isSignal: true, isRequired: false, transformFunction: null }, kjAlign: { classPropertyName: "kjAlign", publicName: "kjAlign", isSignal: true, isRequired: false, transformFunction: null }, kjOffset: { classPropertyName: "kjOffset", publicName: "kjOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "$event.preventDefault()" } }, providers: [