@aquera/nile-visualization 2.9.11 → 2.9.13

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

@@ -59,6 +59,8 @@ export interface NileChartMenuItemDefault {
     type: 'default';
     /** Override the default label (e.g. "Download PNG"). */
     label?: string;
+    /** Optional nile-glyph icon name shown as a leading prefix (e.g. `'download'`). */
+    glyph?: string;
     /** Show a divider line above this item. */
     divider?: boolean;
     fullscreen?: true;
@@ -79,10 +81,34 @@ export interface NileChartMenuItemCustom {
     label: string;
     /** Identifier emitted in the `nile-menu-change` event when clicked. */
     id: string;
+    /** Optional nile-glyph icon name shown as a leading prefix (e.g. `'share-07'`). */
+    glyph?: string;
     /** Show a divider line above this item. */
     divider?: boolean;
 }
-export type NileChartMenuItem = NileChartMenuItemDefault | NileChartMenuItemCustom;
+/**
+ * A group that renders a section header followed by its child items.
+ *
+ * @example
+ * {
+ *   type: 'group',
+ *   label: 'Export',
+ *   items: [
+ *     { type: 'default', downloadPng: true },
+ *     { type: 'default', downloadCsv: true },
+ *   ]
+ * }
+ */
+export interface NileChartMenuItemGroup {
+    type: 'group';
+    /** Text shown as the section header. */
+    label: string;
+    /** Items rendered under this group header. */
+    items: Array<NileChartMenuItemDefault | NileChartMenuItemCustom>;
+    /** Show a divider line above the group header. */
+    divider?: boolean;
+}
+export type NileChartMenuItem = NileChartMenuItemDefault | NileChartMenuItemCustom | NileChartMenuItemGroup;
 /**
  * Controls the chart's actions menu.
  *

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

@@ -365,12 +365,14 @@ export const styles = css `
   }
 
   .nile-chart-menu-item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-sm));
     width: 100%;
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
     border: none;
     background: none;
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
@@ -379,6 +381,11 @@ export const styles = css `
     transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
   }
 
+  .nile-chart-menu-item-glyph {
+    flex-shrink: 0;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+  }
+
   .nile-chart-menu-item:hover {
     background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
@@ -397,7 +404,18 @@ export const styles = css `
   .nile-chart-menu-separator {
     height: var(--nile-border-width-1, var(--ng-stroke-width-1));
     background: var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
-    margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0;
+    margin: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .nile-chart-menu-group-header {
+    display: block;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5)) var(--nile-spacing-xs, var(--ng-spacing-xs));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
+    pointer-events: none;
+    user-select: none;
   }
 
   /* ── AI Chat Trigger (in header) ── */

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

@@ -132,6 +132,7 @@ export declare class NileChart extends NileElement {
     private printChart;
     private exportChart;
     private downloadCsv;
+    private _renderMenuItem;
     private renderActionsMenu;
     private renderAiTrigger;
     private _showHeaderTip;

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

@@ -426,6 +426,30 @@ let NileChart = class NileChart extends NileElement {
         await this.ensureExporting();
         this._hcChart?.downloadCSV?.();
     }
+    _renderMenuItem(item, hasChart) {
+        const glyph = item.glyph
+            ? html `<nile-glyph class="nile-chart-menu-item-glyph" name=${item.glyph} size="16"></nile-glyph>`
+            : nothing;
+        if (item.type === 'custom') {
+            return html `
+        ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+        <button type="button" class="nile-chart-menu-item" role="menuitem"
+          @click=${() => { this.menuOpen = false; this.emit('nile-menu-change', { id: item.id }); }}>
+          ${glyph}${item.label}
+        </button>
+      `;
+        }
+        if (!hasChart)
+            return nothing;
+        return html `
+      ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
+      ${item.fullscreen ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.viewFullscreen()}>${glyph}${item.label ?? 'Fullscreen'}</button>` : nothing}
+      ${item.print ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.printChart()}>${glyph}${item.label ?? 'Print'}</button>` : nothing}
+      ${item.downloadPng ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/png')}>${glyph}${item.label ?? 'Download PNG'}</button>` : nothing}
+      ${item.downloadSvg ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/svg+xml')}>${glyph}${item.label ?? 'Download SVG'}</button>` : nothing}
+      ${item.downloadCsv ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.downloadCsv()}>${glyph}${item.label ?? 'Download CSV'}</button>` : nothing}
+    `;
+    }
     renderActionsMenu() {
         if (!this.resolvedConfig)
             return nothing;
@@ -462,25 +486,14 @@ let NileChart = class NileChart extends NileElement {
               ${allItems.length ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
             ` : nothing}
             ${allItems.map(item => {
-            if (item.type === 'custom') {
+            if (item.type === 'group') {
                 return html `
                   ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-                  <button type="button" class="nile-chart-menu-item" role="menuitem"
-                    @click=${() => { this.menuOpen = false; this.emit('nile-menu-change', { id: item.id }); }}>
-                    ${item.label}
-                  </button>
+                  <span class="nile-chart-menu-group-header" role="presentation">${item.label}</span>
+                  ${item.items.map(child => this._renderMenuItem(child, hasChart))}
                 `;
             }
-            if (!hasChart)
-                return nothing;
-            return html `
-                ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-                ${item.fullscreen ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.viewFullscreen()}>${item.label ?? 'Fullscreen'}</button>` : nothing}
-                ${item.print ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.printChart()}>${item.label ?? 'Print'}</button>` : nothing}
-                ${item.downloadPng ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/png')}>${item.label ?? 'Download PNG'}</button>` : nothing}
-                ${item.downloadSvg ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.exportChart('image/svg+xml')}>${item.label ?? 'Download SVG'}</button>` : nothing}
-                ${item.downloadCsv ? html `<button type="button" class="nile-chart-menu-item" role="menuitem" @click=${() => this.downloadCsv()}>${item.label ?? 'Download CSV'}</button>` : nothing}
-              `;
+            return this._renderMenuItem(item, hasChart);
         })}
           </div>
         ` : nothing}

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

@@ -609,9 +609,10 @@ export const styles = css `
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     overflow-x: auto;
     overflow-y: hidden;
-    scrollbar-width: none; 
+    scrollbar-width: none;
+    z-index: 1;
   }
-  .fc-prompt__highlight::-webkit-scrollbar { display: none; } 
+  .fc-prompt__highlight::-webkit-scrollbar { display: none; }
 
   .fc-prompt__input {
     position: relative;
@@ -629,46 +630,31 @@ export const styles = css `
     color: transparent;
   }
 
-  .fc-prompt__field--highlight .fc-prompt__input::selection {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    color: transparent;
-  }
-  .fc-prompt__field--highlight .fc-prompt__input::-moz-selection {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
-    color: transparent;
-  }
-
-  .fc-prompt__dropdown {
+  .fc-prompt__dd {
     flex: 1;
     min-width: 0;
     display: block;
   }
 
-  .fc-prompt__inner > .fc-prompt__dropdown {
+  .fc-prompt__inner > .fc-prompt__dd {
     display: block;
     flex: 1;
     min-width: 0;
     width: 100%;
   }
-  .fc-prompt__inner > .fc-prompt__dropdown > [slot="trigger"] {
+  .fc-prompt__inner > .fc-prompt__dd > [slot="trigger"] {
     width: 100%;
   }
-  .fc-prompt__inner > .fc-prompt__dropdown::part(trigger) {
+  .fc-prompt__inner > .fc-prompt__dd::part(trigger) {
     display: block;
     width: 100%;
   }
 
-  .fc-prompt__dropdown::part(panel) {
+  .fc-prompt__dd::part(panel) {
     display: flex;
     flex-direction: column;
-    max-height: 280px;
-    overflow-y: auto;
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-md, var(--ng-radius-md));
-    box-shadow: 0 12px 24px -8px rgba(16, 24, 40, 0.12),
-                0 4px 8px -2px rgba(16, 24, 40, 0.06);
-    padding: var(--nile-spacing-4px, var(--ng-spacing-xs));
+    /* background: var(--nile-colors-white-base, var(--ng-colors-bg-primary)); */
+
   }
 
   .fc-prompt__suggestion {
@@ -677,7 +663,7 @@ export const styles = css `
     justify-content: space-between;
     gap: var(--nile-spacing-md, var(--ng-spacing-md));
     width: 100%;
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-md, var(--ng-spacing-md));
+    padding: 0 var(--nile-spacing-md, var(--ng-spacing-md));
     border: 0;
     border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
     background: transparent;
@@ -701,11 +687,23 @@ export const styles = css `
   }
 
   .fc-prompt__suggestion-label {
-    flex: 1;
+    display: block;
     min-width: 0;
-    white-space: normal;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* nile-lite-tooltip renders into its own light DOM and defaults to
+     display:inline, so it gives the label no width to truncate against.
+     Make it a transparent, width-constraining block. */
+  .fc-prompt__suggestion-tooltip {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
   }
 
   .fc-prompt__suggestion-tag {
@@ -720,6 +718,32 @@ export const styles = css `
     letter-spacing: 0.04em;
   }
 
+  /* Label and the type badge sit in separate nile-menu-item slots, so the
+     row layout is owned by the menu-item's internal flex (::part). Stretch
+     the label slot and push the suffix slot to the right edge. */
+  .fc-prompt__suggestion::part(base) {
+    width: 100%;
+  }
+  .fc-prompt__suggestion::part(label) {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+  .fc-prompt__suggestion::part(suffix) {
+    margin-left: auto;
+  }
+
+  /* nile-menu scrolls inside its own .menu__items-wrapper, capped at
+     --auto-size-available-height. That var is unset in this non-portal
+     setup, so max-height resolves to none and the host's overflow:hidden
+     just clips the list with no scrollbar. Give the wrapper a concrete cap
+     so the suggestion list actually scrolls. */
+  .fc-prompt__menu::part(menu__items-wrapper) {
+    max-height: 280px;
+  }
+
   .fc-prompt__input::placeholder {
     color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
     opacity: 0.85;

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

@@ -52,7 +52,6 @@ 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`

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

@@ -91,20 +91,6 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             if (cfgAppearance === 'minimal' || cfgAppearance === 'default')
                 this.appearance = cfgAppearance;
         }
-        // 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) {

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

@@ -751,13 +751,10 @@ export function renderPrompt(host, ctrl) {
       <div class="${classes} fc-prompt--row-input" part="filter-prompt" style="${inlineStyle}">
         <div class="fc-prompt__inner">
           <nile-dropdown
-            class="fc-prompt__dropdown"
+            class="fc-prompt__dd"
             placement="bottom-start"
             sync="width"
             distance="6"
-            hoist
-            portal
-            stay-open-on-select
             ?open=${dropdownOpen}
             .noOpenOnClick=${true}
           >

package/package.json

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