@aquera/nile-visualization 2.9.5 → 2.9.6

package/dist/src/nile-filter-chart/nile-filter-chart.css.js

@@ -490,9 +490,10 @@ export const styles = css `
     outline: none;
     background: transparent;
     border-radius: inherit;
-    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3));
+    padding: var(--nile-spacing-md, var(--ng-spacing-2)) var(--nile-spacing-xl, var(--ng-spacing-4));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-font-size-sm);
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-weight: 400;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     line-height: 1.4;
     box-sizing: border-box;
@@ -605,18 +606,14 @@ export const styles = css `
     color: transparent;
   }
 
-  /* ── Custom suggestion dropdown ─── */
-  /* Hidden by default; shown only when fc-prompt__inner has focus-within.*/
-  /* Mousedown on a suggestion preventDefaults to keep input focus, so    */
-  /* the dropdown stays open across picks. Click outside → focus-within   */
-  /* fails → dropdown hides.                                              */
-  .fc-prompt__suggestions {
-    display: none;
-    position: absolute;
-    top: calc(100% + 6px);
-    left: 0;
-    right: 0;
-    z-index: 20;
+  .fc-prompt__dropdown {
+    flex: 1;
+    min-width: 0;
+    display: block;
+  }
+
+  .fc-prompt__dropdown::part(panel) {
+    display: flex;
     flex-direction: column;
     max-height: 280px;
     overflow-y: auto;
@@ -628,10 +625,6 @@ export const styles = css `
     padding: var(--nile-spacing-4px, var(--ng-spacing-1));
   }
 
-  .fc-prompt__inner:focus-within .fc-prompt__suggestions {
-    display: flex;
-  }
-
   .fc-prompt__suggestion {
     display: flex;
     align-items: center;

package/dist/src/nile-filter-chart/nile-filter-chart.d.ts

@@ -18,6 +18,9 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     promptModes: Map<string, PromptMode>;
     /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
     promptActiveIndex: Map<string, number>;
+    /** Id of the prompt control whose input currently has focus (drives the
+     *  nile-dropdown panel open state). null when no prompt is focused. */
+    promptFocusedId: string | null;
     /** Active typewriter timers per prompt control id (so we can stop them). */
     private _promptTimers;
     /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
@@ -33,6 +36,7 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    private _syncPortalDropdowns;
     setValue(id: string, value: unknown): void;
     /**
      * Update a prompt control's value. The value lands in `selectedValues`
@@ -55,6 +59,7 @@ export declare class NileFilterChart extends NileElement implements FilterChartH
      */
     submitPrompt(ctrl: NormalizedFilterControl): void;
     setPromptActiveIndex(id: string, idx: number): void;
+    setPromptFocused(id: string, focused: boolean): void;
     private _validateOrClear;
     private _clearPromptValidation;
     private _syncPromptAnimations;

package/dist/src/nile-filter-chart/nile-filter-chart.js

@@ -34,6 +34,9 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         this.promptModes = new Map();
         /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
         this.promptActiveIndex = new Map();
+        /** Id of the prompt control whose input currently has focus (drives the
+         *  nile-dropdown panel open state). null when no prompt is focused. */
+        this.promptFocusedId = null;
         /** Active typewriter timers per prompt control id (so we can stop them). */
         this._promptTimers = new Map();
         /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
@@ -69,6 +72,20 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             this._initValues();
             this._syncPromptAnimations();
         }
+        // Keep portaled suggestion panels in sync with the latest panel content.
+        // nile-dropdown clones the panel once at open-time and never re-clones,
+        // so without this the suggestions appear frozen at the value they had
+        // when the dropdown first opened.
+        this._syncPortalDropdowns();
+    }
+    _syncPortalDropdowns() {
+        const dropdowns = this.shadowRoot?.querySelectorAll('nile-dropdown.fc-prompt__dropdown');
+        dropdowns?.forEach((dd) => {
+            const d = dd;
+            if (d.open && d.portal && d.portalManager?.clonedPanel) {
+                d.portalManager.updatePortalPanel?.();
+            }
+        });
     }
     // ── FilterChartHost surface ─────────────────────────────────────────────────
     setValue(id, value) {
@@ -127,6 +144,14 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
     setPromptActiveIndex(id, idx) {
         this.promptActiveIndex = new Map(this.promptActiveIndex).set(id, idx);
     }
+    setPromptFocused(id, focused) {
+        if (focused) {
+            this.promptFocusedId = id;
+        }
+        else if (this.promptFocusedId === id) {
+            this.promptFocusedId = null;
+        }
+    }
     _validateOrClear(ctrl, value, opts = {}) {
         const isNql = this.promptModes.get(ctrl.id) === 'nql';
         if (value.trim() === '') {
@@ -566,6 +591,9 @@ __decorate([
 __decorate([
     state()
 ], NileFilterChart.prototype, "promptActiveIndex", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "promptFocusedId", void 0);
 NileFilterChart = NileFilterChart_1 = __decorate([
     customElement('nile-filter-chart')
 ], NileFilterChart);

package/dist/src/nile-filter-chart/utils/prompt.js

@@ -264,7 +264,42 @@ function renderModeToggle(host, ctrl, mode) {
     </nile-button-toggle-group>
   `;
 }
+/**
+ * Layout-only global stylesheet for the portaled suggestion menu. The portal
+ * clones the panel into document.body, so component-scoped CSS can't reach
+ * it — these two rules use nile-menu-item's exposed `label` part to grow the
+ * label so the suffix (type pill) sticks to the row's right edge, and style
+ * the pill itself. Idempotent: bails if already injected.
+ */
+const SUGGESTION_LAYOUT_STYLE_ID = 'fc-prompt-suggestion-layout';
+function ensureSuggestionLayoutStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(SUGGESTION_LAYOUT_STYLE_ID))
+        return;
+    const el = document.createElement('style');
+    el.id = SUGGESTION_LAYOUT_STYLE_ID;
+    el.textContent = `
+    .fc-prompt__menu nile-menu-item::part(label) {
+      flex: 1;
+      min-width: 0;
+    }
+    .fc-prompt__suggestion-tag {
+      flex-shrink: 0;
+      padding: 1px 8px;
+      border-radius: 999px;
+      background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+      color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+  `;
+    document.head.appendChild(el);
+}
 export function renderPrompt(host, ctrl) {
+    ensureSuggestionLayoutStyles();
     const value = String(host.selectedValues.get(ctrl.id) ?? '');
     const animated = host.promptPlaceholder.get(ctrl.id) ?? '';
     const error = host.promptErrors.get(ctrl.id);
@@ -608,60 +643,101 @@ export function renderPrompt(host, ctrl) {
         ctrl.noAiBorder ? 'fc-prompt--no-ai-border' : '',
         error ? 'fc-prompt--error' : '',
     ].filter(Boolean).join(' ');
+    const onFocus = () => host.setPromptFocused(ctrl.id, true);
+    // Don't close on blur if focus moved into the suggestion menu (or its
+    // portaled clone) — mousedown on a nile-menu-item momentarily shifts focus
+    // because of the menu's roving tab-index. We let nile-dropdown's own
+    // outside-click / Tab / Escape handlers close the panel.
+    const onBlur = (e) => {
+        const rel = e.relatedTarget;
+        if (rel) {
+            if (rel.closest('nile-menu-item'))
+                return;
+            if (rel.closest('nile-menu'))
+                return;
+            if (rel.closest('nile-dropdown'))
+                return;
+            if (rel.closest('.nile-dropdown-portal-append'))
+                return;
+        }
+        host.setPromptFocused(ctrl.id, false);
+    };
+    const isFocused = host.promptFocusedId === ctrl.id;
+    const dropdownOpen = isFiltrexMode && isFocused && suggestionData.length > 0;
     return html `
     <div class="fc-prompt-row">
       <div class="${classes} fc-prompt--row-input" part="filter-prompt" style="${inlineStyle}">
         <div class="fc-prompt__inner">
-          <div class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}" part="filter-prompt-field">
-            ${isFiltrexMode ? html `
-              <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
+          <nile-dropdown
+            class="fc-prompt__dropdown"
+            placement="bottom-start"
+            sync="width"
+            distance="6"
+            hoist
+            portal
+            stay-open-on-select
+            ?open=${dropdownOpen}
+            .noOpenOnClick=${true}
+          >
+            <div
+              slot="trigger"
+              class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}"
+              part="filter-prompt-field"
+            >
+              ${isFiltrexMode ? html `
+                <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
         const color = TOKEN_COLOR[tok.type] ?? 'inherit';
         return html `<span style="color:${color};${tok.type === 'keyword' ? 'font-weight:600;' : ''}">${tok.text}</span>`;
     })}</div>
-            ` : nothing}
-            <input
-              type="text"
-              class="fc-prompt__input"
-              id="fc-prompt-${ctrl.id}"
-              name="${ctrl.id}"
-              part="filter-prompt-input"
-              autocomplete="off"
-              spellcheck="false"
-              aria-invalid="${error ? 'true' : 'false'}"
-              placeholder="${animated || (ctrl.placeholders?.[0] ?? '')}"
-              .value="${value}"
-              @input="${onInput}"
-              @keydown="${onKeyDown}"
-              @scroll="${onScroll}"
-            />
-          </div>
-          ${isFiltrexMode && suggestionData.length > 0 ? html `
-            <div class="fc-prompt__suggestions" part="filter-prompt-suggestions">
-              ${suggestionData.map((item, idx) => html `
-                <button
-                  type="button"
-                  class="fc-prompt__suggestion${idx === activeIdx ? ' fc-prompt__suggestion--active' : ''}"
-                  @mouseenter="${() => {
-        if (idx !== activeIdx)
-            host.setPromptActiveIndex(ctrl.id, idx);
-    }}"
-                  @mousedown="${(e) => {
-        // Prevent focus loss on the input so we can update its
-        // value imperatively after the merge.
-        e.preventDefault();
-        const inputEl = e.currentTarget
-            .closest('.fc-prompt__inner')
-            ?.querySelector('input.fc-prompt__input');
+              ` : nothing}
+              <input
+                type="text"
+                class="fc-prompt__input"
+                id="fc-prompt-${ctrl.id}"
+                name="${ctrl.id}"
+                part="filter-prompt-input"
+                autocomplete="off"
+                spellcheck="false"
+                aria-invalid="${error ? 'true' : 'false'}"
+                placeholder="${animated || (ctrl.placeholders?.[0] ?? '')}"
+                .value="${value}"
+                @input="${onInput}"
+                @keydown="${onKeyDown}"
+                @scroll="${onScroll}"
+                @focus="${onFocus}"
+                @blur="${onBlur}"
+              />
+            </div>
+            ${isFiltrexMode && suggestionData.length > 0 ? html `
+              <nile-menu
+                class="fc-prompt__menu"
+                @nile-select="${(e) => {
+        const idx = Number(e.detail?.value);
+        const item = suggestionData[idx];
+        if (!item)
+            return;
+        const inputId = `fc-prompt-${ctrl.id}`;
+        const root = e.currentTarget.getRootNode();
+        const inputEl = (root.querySelector(`#${CSS.escape(inputId)}`)
+            ?? document.getElementById(inputId));
         if (inputEl)
             pickItem(item, inputEl);
     }}"
-                >
-                  <span class="fc-prompt__suggestion-label">${item.label}</span>
-                  ${item.type ? html `<span class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
-                </button>
-              `)}
-            </div>
-          ` : nothing}
+              >
+                ${suggestionData.map((item, idx) => html `
+                  <nile-menu-item
+                    class="fc-prompt__suggestion"
+                    part="filter-prompt-suggestion${idx === activeIdx ? ' filter-prompt-suggestion-active' : ''}"
+                    value="${idx}"
+                    ?active="${idx === activeIdx}"
+                  >
+                    ${item.label}
+                    ${item.type ? html `<span slot="suffix" class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
+                  </nile-menu-item>
+                `)}
+              </nile-menu>
+            ` : nothing}
+          </nile-dropdown>
           ${showToggle ? renderModeToggle(host, ctrl, mode) : nothing}
         </div>
         ${error ? html `

package/dist/src/nile-filter-chart/utils/types.d.ts

@@ -321,6 +321,8 @@ export interface FilterChartHost {
     readonly promptModes: Map<string, PromptMode>;
     /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
     readonly promptActiveIndex: Map<string, number>;
+    /** Id of the focused prompt control (drives the suggestion dropdown's open state). */
+    readonly promptFocusedId: string | null;
     setValue(id: string, value: unknown): void;
     emit(name: string, detail?: unknown): void;
     /** Update a prompt's value and (when in NQL mode) re-validate it. */
@@ -331,4 +333,6 @@ export interface FilterChartHost {
     submitPrompt(ctrl: NormalizedFilterControl): void;
     /** Set the highlighted suggestion index. Use -1 to clear the highlight. */
     setPromptActiveIndex(id: string, idx: number): void;
+    /** Mark a prompt control's input as focused / unfocused. */
+    setPromptFocused(id: string, focused: boolean): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "2.9.5",
+  "version": "2.9.6",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",