@aquera/nile-visualization 2.9.15 → 2.9.16

package/README.md

@@ -36,6 +36,9 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-visualization`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 2.9.16 (June 03, 2026)
+- Nile Chart: Added Portal Property in Menu. (UIF-1253)
+
 #### Version 2.9.15 (June 02, 2026)
 - Nile Filter Chart: Filter chip fixes (UIF-1250)
 

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

@@ -1,2 +1,3 @@
 export declare const tooltipCss = "\n  .nile-chart-header-tooltip {\n    position: fixed;\n    display: none;\n    transform: translate(-50%, calc(-100% - 10px));\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 1.4;\n    padding: 4px 10px;\n    border-radius: 6px;\n    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    pointer-events: none;\n    white-space: nowrap;\n    z-index: 2147483647;\n    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));\n  }\n  .nile-chart-header-tooltip::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 5px solid transparent;\n    border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n  }\n";
+export declare function injectGlobalChartMenuOverrides(): void;
 export declare const styles: import("lit").CSSResult;

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

@@ -28,6 +28,58 @@ export const tooltipCss = `
     border-top-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 `;
+const MENU_OVERRIDE_CSS = `
+  nile-menu.nile-chart-actions-menu {
+    min-width: var(--nile-width-140px, var(--ng-height-140px, 140px));
+  }
+
+  nile-menu.nile-chart-actions-menu nile-menu-item.nile-chart-actions-menu-item::part(base) {
+    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-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  nile-menu.nile-chart-actions-menu nile-menu-item.nile-chart-actions-menu-item[active]::part(label) {
+    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    font-weight: 600;
+  }
+
+  nile-menu.nile-chart-actions-menu .nile-chart-actions-menu-glyph {
+    flex-shrink: 0;
+    display: inline-flex;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+  }
+
+  nile-menu.nile-chart-actions-menu .nile-chart-actions-menu-separator {
+    height: var(--nile-border-width-1, var(--ng-stroke-width-1, 1px));
+    background: var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
+    margin: var(--nile-spacing-md, var(--ng-spacing-md, 8px));
+  }
+
+  nile-menu.nile-chart-actions-menu .nile-chart-actions-menu-group-header {
+    display: block;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md, 8px)) var(--nile-spacing-14px, var(--ng-spacing-3-5, 14px)) var(--nile-spacing-xs, var(--ng-spacing-xs, 4px));
+    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;
+  }
+`;
+export function injectGlobalChartMenuOverrides() {
+    if (typeof document === 'undefined')
+        return;
+    const STYLE_ID = 'nile-chart-actions-menu-overrides';
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = MENU_OVERRIDE_CSS;
+    document.head?.appendChild(style);
+}
+injectGlobalChartMenuOverrides();
 export const styles = css `
   :host {
     display: block;
@@ -321,7 +373,7 @@ export const styles = css `
   /* ── Actions Menu (in header) ── */
 
   .nile-chart-menu-anchor {
-    position: relative;
+    display: inline-flex;
   }
 
   .nile-chart-menu-trigger {
@@ -349,76 +401,7 @@ export const styles = css `
     outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
   }
 
-  .nile-chart-menu-dropdown {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
-    min-width: var(--nile-width-140px, var(--ng-height-140px));
-    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
-    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
-    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
-    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0;
-    overflow: hidden;
-    z-index: 10;
-  }
-
-  .nile-chart-menu-item {
-    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-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));
-    text-align: left;
-    cursor: pointer;
-    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));
-  }
-
-  .nile-chart-menu-item.active {
-    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
-    font-weight: 600;
-  }
-
-  .nile-chart-menu-item:focus-visible {
-    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
-    outline-offset: calc(var(--nile-spacing-2px, var(--ng-outline-offset-2)) * -1);
-  }
-
-  .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-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) ── */
+ 
 
   .nile-ai-trigger {
     display: inline-flex;

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

@@ -88,7 +88,6 @@ export declare class NileChart extends NileElement {
     menu: NileChartMenuConfig | null;
     private activeType;
     private activeConfig;
-    private menuOpen;
     private chatOpen;
     private _hcChart;
     /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
@@ -108,7 +107,7 @@ export declare class NileChart extends NileElement {
     private resolveConfig;
     private resolvedConfig;
     protected updated(changedProperties: PropertyValues): void;
-    private toggleMenu;
+    private closeMenu;
     private toggleChat;
     /** Push an AI response into the chat panel. Call this from your AI handler. */
     addAiResponse(text: string): void;

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html, nothing } from 'lit';
 import NileElement from '../internal/nile-element.js';
-import { styles, tooltipCss } from './nile-chart.css.js';
+import { styles, tooltipCss, injectGlobalChartMenuOverrides } from './nile-chart.css.js';
 import { nileChartConfig } from './nile-chart-config-builder.js';
 import { renderChartSkeleton } from './nile-chart-skeleton.js';
 import { convertConfig } from '../internal/chart-adapters.js';
@@ -158,7 +158,6 @@ let NileChart = class NileChart extends NileElement {
         this.menu = null;
         this.activeType = null;
         this.activeConfig = null;
-        this.menuOpen = false;
         this.chatOpen = false;
         this._hcChart = null;
         /** True when elements are projected into the `header` slot (default title/subtitle hidden). */
@@ -168,7 +167,6 @@ let NileChart = class NileChart extends NileElement {
         this.handleOutsideClick = (e) => {
             const path = e.composedPath();
             if (!path.includes(this)) {
-                this.menuOpen = false;
                 this.chatOpen = false;
                 return;
             }
@@ -210,6 +208,7 @@ let NileChart = class NileChart extends NileElement {
     connectedCallback() {
         super.connectedCallback();
         ensureHeaderTooltipStyles();
+        injectGlobalChartMenuOverrides();
         const tip = document.createElement('div');
         tip.className = 'nile-chart-header-tooltip';
         document.body.appendChild(tip);
@@ -262,9 +261,9 @@ let NileChart = class NileChart extends NileElement {
                 this.appearance = resolved.appearance;
         }
     }
-    toggleMenu(e) {
-        e.stopPropagation();
-        this.menuOpen = !this.menuOpen;
+    closeMenu() {
+        const dropdown = this.shadowRoot?.querySelector('.nile-chart-menu-anchor');
+        dropdown?.hide?.();
     }
     toggleChat(e) {
         e.stopPropagation();
@@ -291,7 +290,7 @@ let NileChart = class NileChart extends NileElement {
         const converted = convertConfig(this.resolvedConfig, toType);
         this.activeType = toType;
         this.activeConfig = converted;
-        this.menuOpen = false;
+        this.closeMenu();
         this.emit('nile-chart-type-change', {
             fromType,
             toType,
@@ -401,7 +400,7 @@ let NileChart = class NileChart extends NileElement {
         }
     }
     async viewFullscreen() {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         if (this._hcChart?.fullscreen?.open) {
             this._hcChart.fullscreen.open();
@@ -411,25 +410,26 @@ let NileChart = class NileChart extends NileElement {
         target.requestFullscreen?.();
     }
     async printChart() {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         this._hcChart?.print?.();
     }
     async exportChart(type) {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         const filename = (this.headerTitle || 'chart').replace(/[^a-z0-9_-]+/gi, '_');
         this._hcChart?.exportChartLocal?.({ type, filename, local: true });
     }
     async downloadCsv() {
-        this.menuOpen = false;
+        this.closeMenu();
         await this.ensureExporting();
         this._hcChart?.downloadCSV?.();
     }
     _renderMenuItem(item, hasChart) {
         const glyph = item.glyph
             ? html `<nile-glyph
-          class="nile-chart-menu-item-glyph"
+          slot="prefix"
+          class="nile-chart-actions-menu-glyph"
           name=${item.glyph}
           method=${item.method ?? 'stroke'}
           color=${item.color ?? 'var(--nile-colors-dark-500,var(--ng-colors-fg-secondary-700))'}
@@ -438,22 +438,22 @@ let NileChart = class NileChart extends NileElement {
             : 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 }); }}>
+        ${item.divider ? html `<div class="nile-chart-actions-menu-separator" role="separator"></div>` : nothing}
+        <nile-menu-item class="nile-chart-actions-menu-item" value=${`custom:${item.id}`}
+          @click=${() => { this.closeMenu(); this.emit('nile-menu-change', { id: item.id }); }}>
           ${glyph}${item.label}
-        </button>
+        </nile-menu-item>
       `;
         }
         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}
+      ${item.divider ? html `<div class="nile-chart-actions-menu-separator" role="separator"></div>` : nothing}
+      ${item.fullscreen ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="fullscreen" @click=${() => this.viewFullscreen()}>${glyph}${item.label ?? 'Fullscreen'}</nile-menu-item>` : nothing}
+      ${item.print ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="print" @click=${() => this.printChart()}>${glyph}${item.label ?? 'Print'}</nile-menu-item>` : nothing}
+      ${item.downloadPng ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="download-png" @click=${() => this.exportChart('image/png')}>${glyph}${item.label ?? 'Download PNG'}</nile-menu-item>` : nothing}
+      ${item.downloadSvg ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="download-svg" @click=${() => this.exportChart('image/svg+xml')}>${glyph}${item.label ?? 'Download SVG'}</nile-menu-item>` : nothing}
+      ${item.downloadCsv ? html `<nile-menu-item class="nile-chart-actions-menu-item" value="download-csv" @click=${() => this.downloadCsv()}>${glyph}${item.label ?? 'Download CSV'}</nile-menu-item>` : nothing}
     `;
     }
     renderActionsMenu() {
@@ -469,41 +469,44 @@ let NileChart = class NileChart extends NileElement {
         ];
         const hasChart = !!this._hcChart;
         const hasAnyItems = !!(types?.length || allItems.length);
+        if (!hasAnyItems) {
+            return html `
+        <button type="button" class="nile-chart-menu-trigger" aria-label="Chart actions">
+          <nile-glyph name="options" size="16"></nile-glyph>
+        </button>
+      `;
+        }
         return html `
-      <div class="nile-chart-menu-anchor">
+      <nile-dropdown class="nile-chart-menu-anchor" placement="bottom-end" distance="4" portal>
         <button
           type="button"
+          slot="trigger"
           class="nile-chart-menu-trigger"
-          aria-haspopup="true"
-          aria-expanded=${this.menuOpen ? 'true' : 'false'}
           aria-label="Chart actions"
-          @click=${(e) => this.toggleMenu(e)}
         >
           <nile-glyph name="options" size="16"></nile-glyph>
         </button>
-        ${this.menuOpen && hasAnyItems ? html `
-          <div class="nile-chart-menu-dropdown" role="menu">
-            ${types?.length ? html `
-              ${types.map(type => html `
-                <button type="button" class="nile-chart-menu-item ${type === this.activeType ? 'active' : ''}" role="menuitem" @click=${() => this.switchType(type)}>
-                  ${chartTypeLabel(type)}
-                </button>
-              `)}
-              ${allItems.length ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-            ` : nothing}
-            ${allItems.map(item => {
+        <nile-menu class="nile-chart-actions-menu" part="dropdown">
+          ${types?.length ? html `
+            ${types.map(type => html `
+              <nile-menu-item class="nile-chart-actions-menu-item" value=${`type:${type}`} ?active=${type === this.activeType} @click=${() => this.switchType(type)}>
+                ${chartTypeLabel(type)}
+              </nile-menu-item>
+            `)}
+            ${allItems.length ? html `<div class="nile-chart-actions-menu-separator" role="separator"></div>` : nothing}
+          ` : nothing}
+          ${allItems.map(item => {
             if (item.type === 'group') {
                 return html `
-                  ${item.divider ? html `<div class="nile-chart-menu-separator"></div>` : nothing}
-                  <span class="nile-chart-menu-group-header" role="presentation">${item.label}</span>
-                  ${item.items.map(child => this._renderMenuItem(child, hasChart))}
-                `;
+                ${item.divider ? html `<div class="nile-chart-actions-menu-separator" role="separator" part="seperator"></div>` : nothing}
+                <span class="nile-chart-actions-menu-group-header" role="presentation" part="header">${item.label}</span>
+                ${item.items.map(child => this._renderMenuItem(child, hasChart))}
+              `;
             }
             return this._renderMenuItem(item, hasChart);
         })}
-          </div>
-        ` : nothing}
-      </div>
+        </nile-menu>
+      </nile-dropdown>
     `;
     }
     renderAiTrigger() {
@@ -1805,9 +1808,6 @@ __decorate([
 __decorate([
     state()
 ], NileChart.prototype, "activeConfig", void 0);
-__decorate([
-    state()
-], NileChart.prototype, "menuOpen", void 0);
 __decorate([
     state()
 ], NileChart.prototype, "chatOpen", void 0);

package/package.json

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