@aquera/nile-visualization 2.9.11 → 2.9.12

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

@@ -82,7 +82,29 @@ export interface NileChartMenuItemCustom {
     /** 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

@@ -370,7 +370,7 @@ export const styles = css `
     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));
@@ -400,6 +400,17 @@ export const styles = css `
     margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0;
   }
 
+  .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 {

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,27 @@ let NileChart = class NileChart extends NileElement {
         await this.ensureExporting();
         this._hcChart?.downloadCSV?.();
     }
+    _renderMenuItem(item, hasChart) {
+        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.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()}>${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}
+    `;
+    }
     renderActionsMenu() {
         if (!this.resolvedConfig)
             return nothing;
@@ -462,25 +483,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/package.json

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