@kouji-ui/core 0.6.1 → 0.6.3

package/fesm2022/kouji-ui-core.mjs

@@ -2438,10 +2438,22 @@ class KjListNavigator {
                 this.moveBy(-this.kjPageSize());
                 return;
             case 'Enter':
-            case ' ':
                 // Only preventDefault when we actually activate. Lets consumers
-                // (e.g. combobox free-text Enter) fall through when nothing is
-                // active, and lets Space type a literal space in a combobox input.
+                // (e.g. combobox free-text Enter) fall through when nothing is active.
+                if (this.activeItem()) {
+                    e.preventDefault();
+                    this.activateCurrent();
+                }
+                return;
+            case ' ':
+                // Space activates a LIST — but in a text field it is a character the
+                // user is typing, and the field owns it. A command palette highlights
+                // a row for every query, so treating Space as activation there made
+                // multi-word queries impossible: the space ran the highlighted command
+                // instead of reaching the input. Enter remains the activation key from
+                // a text field.
+                if (isTextEntry(e.target))
+                    return;
                 if (this.activeItem()) {
                     e.preventDefault();
                     this.activateCurrent();
@@ -2488,6 +2500,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { kjOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOrientation", required: false }] }], kjWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjWrap", required: false }] }], kjPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPageSize", required: false }] }], kjActivateOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjActivateOnHover", required: false }] }], kjFocusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFocusMode", required: false }] }], kjActiveChange: [{ type: i0.Output, args: ["kjActiveChange"] }] } });
+/** Types of `<input>` that hold text the user types (Space is a character). */
+const NON_TEXT_INPUT_TYPES = new Set([
+    'button',
+    'checkbox',
+    'color',
+    'file',
+    'image',
+    'radio',
+    'range',
+    'reset',
+    'submit',
+]);
+/** Whether a key event landed in a field where Space types a character. */
+function isTextEntry(target) {
+    const el = target;
+    if (!el || typeof el.tagName !== 'string')
+        return false;
+    if (el.isContentEditable)
+        return true;
+    if (el.tagName === 'TEXTAREA')
+        return true;
+    if (el.tagName !== 'INPUT')
+        return false;
+    const type = el.type?.toLowerCase() ?? 'text';
+    return !NON_TEXT_INPUT_TYPES.has(type);
+}
 
 // packages/core/src/primitives/list/selection.ts
 /**
@@ -13522,8 +13560,23 @@ function nextConfirmPopupMessageId() {
  * @doc-category Core/Overlay
  */
 class KjConfirmPopup {
-    /** The overlay controller provided by the trigger directive on the same element. */
-    controller = inject(KjOverlayController, { optional: true });
+    /** The overlay controller, when the trigger sits on this very element. */
+    selfController = inject(KjOverlayController, { optional: true });
+    /**
+     * The controller of a nested `[kjConfirmPopupTrigger]`. The documented
+     * composition puts the trigger on a CHILD of `[kjConfirmPopup]` (see every
+     * example), so the controller is NOT in this element's injector — without
+     * this registration `close()` bailed out and `(kjConfirmed)` never fired.
+     */
+    registered = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "registered" }] : /* istanbul ignore next */ []));
+    /** @internal — called by a nested `[kjConfirmPopupTrigger]`. */
+    _registerController(c) {
+        this.registered.set(c);
+    }
+    controllerOf() {
+        return this.selfController ?? this.registered();
+    }
     /** When `true`, the confirm action renders with destructive intent. */
     kjDestructive = input(false, { ...(ngDevMode ? { debugName: "kjDestructive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Where to place initial focus. Default `'cancel'`. */
@@ -13537,10 +13590,8 @@ class KjConfirmPopup {
     kjResult = output();
     // ── KjConfirmPopupContext ──────────────────────────────────────────
     /** Open state forwarded from the underlying controller. */
-    open = (() => {
-        const ctrl = this.controller;
-        return ctrl ? ctrl.isOpen : (() => false);
-    })();
+    open = computed(() => this.controllerOf()?.isOpen() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /** Whether the confirm action should render destructively. */
     destructive = this.kjDestructive;
     /** Resolved default focus target. */
@@ -13552,7 +13603,7 @@ class KjConfirmPopup {
     constructor() {
         // Bridge the controller's open signal into the resolution contract.
         effect(() => {
-            const isOpen = this.controller?.isOpen() ?? false;
+            const isOpen = this.controllerOf()?.isOpen() ?? false;
             if (isOpen && !this.wasOpen) {
                 this.resolved = false;
             }
@@ -13568,7 +13619,8 @@ class KjConfirmPopup {
      * Close the popup with the given result. `true` confirms, `false` cancels.
      */
     close(result) {
-        if (!this.controller || !this.controller.isOpen())
+        const controller = this.controllerOf();
+        if (!controller || !controller.isOpen())
             return;
         this.resolved = true;
         if (result)
@@ -13576,7 +13628,7 @@ class KjConfirmPopup {
         else
             this.kjCancelled.emit();
         this.kjResult.emit(result);
-        this.controller.close('programmatic');
+        controller.close('programmatic');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjConfirmPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjConfirmPopup, isStandalone: true, selector: "[kjConfirmPopup]", inputs: { kjDestructive: { classPropertyName: "kjDestructive", publicName: "kjDestructive", isSignal: true, isRequired: false, transformFunction: null }, kjDefaultFocus: { classPropertyName: "kjDefaultFocus", publicName: "kjDefaultFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjConfirmed: "kjConfirmed", kjCancelled: "kjCancelled", kjResult: "kjResult" }, providers: [
@@ -13604,6 +13656,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class KjConfirmPopupTrigger {
     _overlayTrigger = inject(KjOverlayTrigger, { self: true });
+    constructor() {
+        // The trigger normally sits on a CHILD of `[kjConfirmPopup]`, so the root
+        // cannot see this controller through its own injector. Hand it over, or
+        // the confirm/cancel slots resolve nothing.
+        inject(KJ_CONFIRM_POPUP, { optional: true })?._registerController?.(this._overlayTrigger.controller);
+    }
     /** Forwarded controller for sibling `[kjFor]` panels. */
     get controller() {
         return this._overlayTrigger.controller;
@@ -13622,7 +13680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     exportAs: 'kjConfirmPopupTrigger',
                     hostDirectives: [KjPopoverTrigger],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * The floating confirm popup panel. Composes `kj-popover-content` (a
@@ -15576,12 +15634,20 @@ class KjCommandPalette {
                 }
             });
         });
-        // When items register asynchronously (same query), pick first if nothing highlighted.
+        // Re-seed when the visible set changes under the active item: items may
+        // register asynchronously (nothing highlighted yet), and with
+        // `[kjShouldFilter]="false"` the consumer re-renders the list AFTER the
+        // query effect above ran — so that effect highlighted an item that is
+        // already gone. Without the `some()` check the palette kept a stale value,
+        // no row was active, and Enter did nothing (reproducible by typing fast
+        // or pasting a query).
         effect(() => {
             const visible = this.visibleItems();
             const active = this.kjValue();
             const autoFirst = this.kjAutoActivateFirst();
-            if (!autoFirst || visible.length === 0 || active !== null)
+            if (!autoFirst || visible.length === 0)
+                return;
+            if (active !== null && visible.some(i => i.value() === active))
                 return;
             untracked(() => {
                 const nav = this._nav();