@xh/hoist 74.0.0-SNAPSHOT.1749232318711 → 74.0.0-SNAPSHOT.1749597895949

package/CHANGELOG.md

@@ -10,12 +10,18 @@
 * Added `ViewManagerModel.preserveUnsavedChanges` flag to opt-out of that behaviour.
 * Added `PersistOptions.settleTime` to configure time to wait for state to settle before persisting.
 * Support for gridcolumn level `onCellClicked` events.
+* General improvements to `MenuItem` api
+  * New `MenuContext` object now sent as 2nd arg to `actionFn` and `prepareFn`.
+  * Chart context menu is now fully customizable.
+    ⚠️ NOTE: if a chart's context menu is turned off with `showContextMenu: false`,
+    update to `contextMenu: false`.
 
 ### 🐞 Bug Fixes
 * Improved `ViewManagerModel.settleTime` by delegating to individual `PersistenceProviders`.
 * Fixed bug where grid column state could become unintentionally dirty when columns were hidden.
 * Improved `WebsocketService` heartbeat detection to auto-reconnect when the socket reports as open
   and heartbeats can be sent, but no heartbeat acknowledgements are being received from the server.
+* Restored zoom out with mouse right-to-left drag on Charts.
 
 ## v73.0.1 - 2025-05-19
 

package/build/types/cmp/chart/ChartModel.d.ts

@@ -1,11 +1,14 @@
+import type { ChartContextMenuSpec, ChartMenuToken } from '@xh/hoist/cmp/chart/Types';
 import { HoistModel, PlainObject, Some } from '@xh/hoist/core';
 interface ChartConfig {
     /** The initial highchartsConfig for this chart. */
     highchartsConfig: PlainObject;
     /** The initial data series to be displayed. */
     series?: Some<any>;
-    /** True to showContextMenu.  Defaults to true.  Desktop only. */
-    showContextMenu?: boolean;
+    /**
+     * True (default) to show default ContextMenu. Supported on desktop only.
+     */
+    contextMenu?: ChartContextMenuSpec;
     /** @internal */
     xhImpl?: boolean;
 }
@@ -15,7 +18,8 @@ interface ChartConfig {
 export declare class ChartModel extends HoistModel {
     highchartsConfig: PlainObject;
     series: any[];
-    showContextMenu: boolean;
+    contextMenu: ChartContextMenuSpec;
+    static defaultContextMenu: ChartMenuToken[];
     /**
      * The HighCharts instance currently being displayed. This may be used for reading
      * information about the chart, but any mutations to the chart should
@@ -44,5 +48,6 @@ export declare class ChartModel extends HoistModel {
     setSeries(series: any | any[]): void;
     /** Remove all series from this chart. */
     clear(): void;
+    private parseContextMenu;
 }
 export {};

package/build/types/cmp/chart/Types.d.ts

@@ -0,0 +1,20 @@
+import { ChartModel } from '@xh/hoist/cmp/chart/ChartModel';
+import type { ContextMenuSpec, MenuContext, MenuToken } from '@xh/hoist/core';
+/**
+ * Highcharts supported tokens {@link https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems}
+ * plus Hoist's `copyToClipboard`.
+ */
+export type ChartMenuToken = 'viewFullscreen' | 'printChart' | 'downloadJPEG' | 'downloadPNG' | 'downloadSVG' | 'downloadCSV' | 'downloadXLS' | 'downloadPDF' | 'copyToClipboard' | MenuToken;
+export interface ChartMenuContext extends MenuContext {
+    chartModel: ChartModel;
+    /**
+     * Single point is the active series point the mouse is closest to
+     */
+    point: any;
+    /**
+     * Points array is the list of points hovered over in each series. When
+     * there are multiple series and tooltip.shared = true, points.length less than 1.
+     */
+    points: any[];
+}
+export type ChartContextMenuSpec = ContextMenuSpec<ChartMenuToken, ChartMenuContext>;

package/build/types/cmp/chart/impl/ChartContextMenuItems.d.ts

@@ -0,0 +1,4 @@
+import type { ChartMenuContext, ChartMenuToken } from '@xh/hoist/cmp/chart/Types';
+import { type MenuItem, type MenuItemLike } from '@xh/hoist/core';
+/** @internal */
+export declare function getContextMenuItems(items: MenuItemLike<ChartMenuToken>[], context: ChartMenuContext): (MenuItem<ChartMenuToken, ChartMenuContext> | '-')[];

package/build/types/core/types/Interfaces.d.ts

@@ -211,12 +211,35 @@ export interface TrackOptions {
     /** Optional flag to omit sending message. */
     omit?: Thunkable<boolean>;
 }
+/**
+ * The base `MenuToken` type.  '-' is interpreted as the standard textless divider.
+ * Components will likely extend this type to support other strings like 'copyToClipboard',
+ * 'print', etc. which the component then converts into a {@link MenuItem}.
+ */
+export type MenuToken = '-';
+/**
+ * `MenuContext` is the set of contextual arguments passed to a {@link MenuItem}'s
+ * `actionFn` and `prepareFn`. `contextMenuEvent` is the right click event that opened the
+ * context menu.  It is optional because the `contextMenu` component can also be used on
+ * popover buttons, where there is no `contextMenuEvent`.
+ *
+ * Components offering a built-in {@link contextMenu} can extend `MenuContext` to add values
+ * relevant to the component.  See for example {@link ChartMenuContext}.
+ */
+export interface MenuContext {
+    contextMenuEvent?: MouseEvent | PointerEvent;
+}
+/**
+ * A context menu is specified as an array of items, a function to generate one from a click, or
+ * a full element representing a contextMenu Component.
+ */
+export type ContextMenuSpec<T = MenuToken, C = MenuContext> = MenuItemLike<T, C>[] | ((e: MouseEvent | PointerEvent, context: C) => MenuItemLike<T, C>[]) | boolean;
 /**
  *  Basic interface for a MenuItem to appear in a menu.
  *
  *  MenuItems can be displayed within a context menu, or shown when clicking on a button.
  */
-export interface MenuItem {
+export interface MenuItem<T = MenuToken, C = MenuContext> {
     /** Label to be displayed. */
     text: ReactNode;
     /** Icon to be displayed. */
@@ -226,11 +249,11 @@ export interface MenuItem {
     /** Css class name to be added when rendering the menu item. */
     className?: string;
     /** Executed when the user clicks the menu item. */
-    actionFn?: (e: MouseEvent | PointerEvent) => void;
+    actionFn?: (e: MouseEvent | PointerEvent, context?: C) => void;
     /** Executed before the item is shown.  Use to adjust properties dynamically. */
-    prepareFn?: (me: MenuItem) => void;
+    prepareFn?: (me: MenuItem<T, C>, context?: C) => void;
     /** Child menu items. */
-    items?: MenuItemLike[];
+    items?: MenuItemLike<T, C>[];
     /** True to disable this item. */
     disabled?: boolean;
     /** True to hide this item. May be set dynamically via prepareFn. */
@@ -240,12 +263,12 @@ export interface MenuItem {
 }
 /**
  * An item that can exist in a Menu.
- *
- * Allows for a ReactNode as divider.  If strings are specified, the implementations may choose
- * an appropriate default display, with '-' providing a standard textless divider that will also
- * be de-duped if appearing at the beginning, or end, or adjacent to another divider at render time.
+ * Components may accept token strings, in addition, '-' will be interpreted as the standard
+ * textless divider that will also be de-duped if appearing at the beginning, or end, or adjacent
+ * to another divider at render time. Also allows for a ReactNode for flexible display.
  */
-export type MenuItemLike = MenuItem | ReactNode;
+export type MenuItemLike<T = MenuToken, C = MenuContext> = MenuItem<T, C> | T | ReactElement;
+export declare function isMenuItem<T, C>(item: MenuItemLike<T, C>): item is MenuItem<T, C>;
 /**
  * An option to be passed to Select controls
  */

package/build/types/desktop/cmp/contextmenu/ContextMenu.d.ts

@@ -1,13 +1,8 @@
-import { HoistProps, MenuItemLike } from '@xh/hoist/core';
+import { HoistProps, MenuContext, MenuItemLike } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import { ReactElement } from 'react';
-/**
- * A context menu is specified as an array of items, a function to generate one from a click, or
- * a full element representing a contextMenu Component.
- */
-export type ContextMenuSpec = MenuItemLike[] | ((e: MouseEvent) => MenuItemLike[]) | ReactElement;
 export interface ContextMenuProps extends HoistProps {
     menuItems: MenuItemLike[];
+    context?: MenuContext;
 }
 /**
  * Component for a right-click context menu. Not typically used directly by applications - use

package/build/types/desktop/cmp/dash/canvas/impl/utils.d.ts

@@ -1,3 +1,4 @@
+import { type MenuItemLike } from '@xh/hoist/core';
 /**
  * Used to create view menu items (for adding or replacing views)
  * @internal
@@ -7,4 +8,4 @@ export declare function createViewMenuItems({ dashCanvasModel, position, viewId,
     position?: any;
     viewId?: any;
     replaceExisting?: boolean;
-}): any[];
+}): MenuItemLike[];

package/build/types/desktop/cmp/panel/Panel.d.ts

@@ -1,8 +1,7 @@
-import { BoxProps, HoistProps, Some, TaskObserver } from '@xh/hoist/core';
+import { BoxProps, HoistProps, Some, TaskObserver, type ContextMenuSpec } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import { HotkeyConfig } from '@xh/hoist/kit/blueprint';
 import { ReactElement, ReactNode } from 'react';
-import { ContextMenuSpec } from '../contextmenu/ContextMenu';
 import './Panel.scss';
 import { PanelModel } from './PanelModel';
 export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'title'> {

package/build/types/desktop/hooks/UseContextMenu.d.ts

@@ -1,4 +1,4 @@
-import { ContextMenuSpec } from '@xh/hoist/desktop/cmp/contextmenu/ContextMenu';
+import type { ContextMenuSpec } from '@xh/hoist/core';
 import { ReactElement } from 'react';
 /**
  * Hook to add a right-click context menu to a component.

package/cmp/chart/Chart.ts

@@ -19,7 +19,6 @@ import {
     XH
 } from '@xh/hoist/core';
 import {useContextMenu} from '@xh/hoist/dynamics/desktop';
-import {Icon} from '@xh/hoist/icon';
 import {Highcharts} from '@xh/hoist/kit/highcharts';
 import {runInAction} from '@xh/hoist/mobx';
 import {logError, mergeDeep} from '@xh/hoist/utils/js';
@@ -95,7 +94,8 @@ export const [Chart, chart] = hoistCmp.withFactory<ChartProps>({
             })
         });
 
-        return !XH.isMobileApp ? useContextMenu(coreContents, impl.contextMenu) : coreContents;
+        // Must check isMobileApp here because `useContextMenu` is not defined in mobile
+        return !XH.isMobileApp ? useContextMenu(coreContents, model.contextMenu) : coreContents;
     }
 });
 
@@ -106,12 +106,9 @@ class ChartLocalModel extends HoistModel {
     model: ChartModel;
 
     chartRef = createObservableRef<HTMLElement>();
-    contextMenu: any;
     prevSeriesConfig;
 
     override onLinked() {
-        this.contextMenu = this.getContextMenu();
-
         this.addReaction({
             track: () => [
                 this.componentProps.aspectRatio,
@@ -136,7 +133,7 @@ class ChartLocalModel extends HoistModel {
         return this.model.highchart;
     }
 
-    updateSeries() {
+    private updateSeries() {
         const newSeries = this.model.series,
             seriesConfig = newSeries.map(it => omit(it, 'data')),
             {prevSeriesConfig, chart} = this,
@@ -156,7 +153,7 @@ class ChartLocalModel extends HoistModel {
         this.prevSeriesConfig = seriesConfig;
     }
 
-    renderHighChart() {
+    private renderHighChart() {
         // Chart does not re-render well in fullscreen mode
         // so just close fullscreen mode if it's open.
         if (this.chart?.fullscreen?.isOpen) {
@@ -200,7 +197,7 @@ class ChartLocalModel extends HoistModel {
         }
     };
 
-    getChartDims({width, height}) {
+    private getChartDims({width, height}) {
         const {aspectRatio} = this.componentProps;
 
         if (!aspectRatio || aspectRatio <= 0) return {width, height};
@@ -208,7 +205,7 @@ class ChartLocalModel extends HoistModel {
         return this.applyAspectRatio(width, height, aspectRatio);
     }
 
-    applyAspectRatio(width, height, aspectRatio) {
+    private applyAspectRatio(width, height, aspectRatio) {
         const adjWidth = height * aspectRatio,
             adjHeight = width / aspectRatio;
 
@@ -236,7 +233,7 @@ class ChartLocalModel extends HoistModel {
         super.destroy();
     }
 
-    destroyHighChart() {
+    private destroyHighChart() {
         if (this.chart) {
             this.chart.destroy();
             this.chart = null;
@@ -246,7 +243,7 @@ class ChartLocalModel extends HoistModel {
     //----------------------
     // Highcharts Config
     //----------------------
-    getMergedConfig(): PlainObject {
+    private getMergedConfig(): PlainObject {
         const propsConf = this.getModelConfig(),
             themeConf = this.getThemeConfig(),
             defaultConf = this.getDefaultConfig();
@@ -255,7 +252,7 @@ class ChartLocalModel extends HoistModel {
         return mergeDeep(defaultConf, themeConf, propsConf);
     }
 
-    getDefaultConfig() {
+    private getDefaultConfig() {
         const exporting = {
             enabled: false,
             fallbackToExportServer: false,
@@ -329,7 +326,7 @@ class ChartLocalModel extends HoistModel {
         };
     }
 
-    mergeAxisConfigs(theme, conf) {
+    private mergeAxisConfigs(theme, conf) {
         const axisLabels = ['x', 'y', 'z'];
         axisLabels.forEach(lbl => {
             const axis = lbl + 'Axis',
@@ -341,11 +338,11 @@ class ChartLocalModel extends HoistModel {
         });
     }
 
-    getDefaultAxisConfig(axis) {
+    private getDefaultAxisConfig(axis) {
         const defaults = {
             xAxis: {
                 // Padding is ignored by setExtremes, so we default to 0 to make things less jumpy when zooming.
-                // This is especially important when Navigator shown; first reload of data can cause a surprising tiny rezoom.
+                // This is especially important when the Navigator is shown. The first reload of data can cause a surprising tiny re-zoom.
                 minPadding: 0,
                 maxPadding: 0,
                 dateTimeLabelFormats: {
@@ -365,11 +362,11 @@ class ChartLocalModel extends HoistModel {
         return defaults[axis];
     }
 
-    getThemeConfig() {
+    private getThemeConfig() {
         return XH.darkTheme ? cloneDeep(DarkTheme) : cloneDeep(LightTheme);
     }
 
-    getModelConfig() {
+    private getModelConfig() {
         return {
             ...this.model.highchartsConfig,
             series: this.model.series
@@ -380,43 +377,4 @@ class ChartLocalModel extends HoistModel {
     // Handlers
     //---------------------------
     onSetExtremes = () => {};
-
-    getContextMenu() {
-        if (!this.model.showContextMenu || !XH.isDesktop) return null;
-        return [
-            {
-                text: 'View in full screen',
-                icon: Icon.expand(),
-                actionFn: () => this.chart.fullscreen.toggle()
-            },
-            '-',
-            {
-                text: 'Copy to clipboard',
-                icon: Icon.copy(),
-                hidden: !Highcharts.isWebKit,
-                actionFn: () => this.chart.copyToClipboardAsync()
-            },
-            {
-                text: 'Print chart',
-                icon: Icon.print(),
-                actionFn: () => this.chart.print()
-            },
-            '-',
-            {
-                text: 'Download PNG image',
-                icon: Icon.fileImage(),
-                actionFn: () => this.chart.exportChartLocal()
-            },
-            {
-                text: 'Download SVG vector image',
-                icon: Icon.fileImage(),
-                actionFn: () => this.chart.exportChartLocal({type: 'image/svg+xml'})
-            },
-            {
-                text: 'Export Data',
-                icon: Icon.fileCsv(),
-                actionFn: () => this.chart.downloadCSV()
-            }
-        ];
-    }
 }

package/cmp/chart/ChartModel.ts

@@ -4,9 +4,12 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {HoistModel, PlainObject, Some} from '@xh/hoist/core';
+import {type MouseEvent} from 'react';
+import type {ChartContextMenuSpec, ChartMenuToken} from '@xh/hoist/cmp/chart/Types';
+import {getContextMenuItems} from '@xh/hoist/cmp/chart/impl/ChartContextMenuItems';
+import {HoistModel, PlainObject, Some, XH} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, cloneDeep} from 'lodash';
+import {castArray, cloneDeep, isFunction, isNil} from 'lodash';
 import {mergeDeep} from '@xh/hoist/utils/js';
 
 interface ChartConfig {
@@ -16,8 +19,10 @@ interface ChartConfig {
     /** The initial data series to be displayed. */
     series?: Some<any>;
 
-    /** True to showContextMenu.  Defaults to true.  Desktop only. */
-    showContextMenu?: boolean;
+    /**
+     * True (default) to show default ContextMenu. Supported on desktop only.
+     */
+    contextMenu?: ChartContextMenuSpec;
 
     /** @internal */
     xhImpl?: boolean;
@@ -33,7 +38,18 @@ export class ChartModel extends HoistModel {
     @observable.ref
     series: any[] = [];
 
-    showContextMenu: boolean;
+    contextMenu: ChartContextMenuSpec;
+
+    static defaultContextMenu: ChartMenuToken[] = [
+        'viewFullscreen',
+        '-',
+        'copyToClipboard',
+        'printChart',
+        '-',
+        'downloadPNG',
+        'downloadSVG',
+        'downloadCSV'
+    ];
 
     /**
      * The HighCharts instance currently being displayed. This may be used for reading
@@ -47,17 +63,12 @@ export class ChartModel extends HoistModel {
         super();
         makeObservable(this);
 
-        const {
-            highchartsConfig,
-            series = [],
-            showContextMenu = true,
-            xhImpl = false
-        } = config ?? {};
+        const {highchartsConfig, series = [], contextMenu, xhImpl = false} = config ?? {};
 
         this.xhImpl = xhImpl;
         this.highchartsConfig = highchartsConfig;
         this.series = castArray(series);
-        this.showContextMenu = showContextMenu;
+        this.contextMenu = this.parseContextMenu(contextMenu);
     }
 
     /**
@@ -95,4 +106,25 @@ export class ChartModel extends HoistModel {
     clear() {
         this.setSeries([]);
     }
+
+    private parseContextMenu(spec: ChartContextMenuSpec): ChartContextMenuSpec {
+        if (spec === false || !XH.isDesktop) return null;
+        if (isNil(spec) || spec === true) spec = ChartModel.defaultContextMenu;
+
+        return (e: MouseEvent | PointerEvent) => {
+            // Convert hoverpoints to points for use in actionFn.
+            // Hoverpoints are transient, and change/disappear as mouse moves.
+            const getPoint = pt => pt.series?.points.find(it => it.index === pt.index);
+            const {hoverPoint, hoverPoints} = this.highchart,
+                context = {
+                    contextMenuEvent: e,
+                    chartModel: this,
+                    point: hoverPoint ? getPoint(hoverPoint) : null,
+                    points: hoverPoints ? hoverPoints.map(getPoint) : []
+                },
+                items = isFunction(spec) ? spec(e, context) : spec;
+
+            return getContextMenuItems(items, context);
+        };
+    }
 }

package/cmp/chart/Types.ts

@@ -0,0 +1,33 @@
+import {ChartModel} from '@xh/hoist/cmp/chart/ChartModel';
+import type {ContextMenuSpec, MenuContext, MenuToken} from '@xh/hoist/core';
+
+/**
+ * Highcharts supported tokens {@link https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems}
+ * plus Hoist's `copyToClipboard`.
+ */
+export type ChartMenuToken =
+    | 'viewFullscreen'
+    | 'printChart'
+    | 'downloadJPEG'
+    | 'downloadPNG'
+    | 'downloadSVG'
+    | 'downloadCSV'
+    | 'downloadXLS'
+    | 'downloadPDF'
+    | 'copyToClipboard'
+    | MenuToken;
+
+export interface ChartMenuContext extends MenuContext {
+    chartModel: ChartModel;
+    /**
+     * Single point is the active series point the mouse is closest to
+     */
+    point: any;
+    /**
+     * Points array is the list of points hovered over in each series. When
+     * there are multiple series and tooltip.shared = true, points.length less than 1.
+     */
+    points: any[];
+}
+
+export type ChartContextMenuSpec = ContextMenuSpec<ChartMenuToken, ChartMenuContext>;

package/cmp/chart/impl/ChartContextMenuItems.ts

@@ -0,0 +1,129 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+import type {ChartMenuContext, ChartMenuToken} from '@xh/hoist/cmp/chart/Types';
+import {logWarn} from '@xh/hoist/utils/js';
+import {cloneDeep, isEmpty, isString} from 'lodash';
+import {ChartModel} from '@xh/hoist/cmp/chart';
+import {isMenuItem, type MenuItem, type MenuItemLike} from '@xh/hoist/core';
+import {Highcharts} from '@xh/hoist/kit/highcharts';
+import {Icon} from '@xh/hoist/icon';
+
+/** @internal */
+export function getContextMenuItems(
+    items: MenuItemLike<ChartMenuToken>[],
+    context: ChartMenuContext
+): (MenuItem<ChartMenuToken, ChartMenuContext> | '-')[] {
+    return cloneDeep(items).map(it => buildMenuItemConfig(it, context));
+}
+
+//---------------------------
+// Implementation
+//---------------------------
+function buildMenuItemConfig(
+    item: MenuItemLike<ChartMenuToken, ChartMenuContext>,
+    context: ChartMenuContext
+): MenuItem<ChartMenuToken, ChartMenuContext> | '-' {
+    if (isString(item)) return parseToken(item, context.chartModel);
+
+    // build nested menu item configs
+    if (isMenuItem(item)) {
+        if (!isEmpty(item.items)) {
+            (item.items as (MenuItem<ChartMenuToken, ChartMenuContext> | '-')[]) = item.items.map(
+                it => buildMenuItemConfig(it as MenuItemLike, context)
+            );
+        }
+        if (item.actionFn) {
+            const fn = item.actionFn;
+            item.actionFn = e => fn(e, context);
+        }
+        if (item.prepareFn) {
+            const fn = item.prepareFn;
+            item.prepareFn = item => fn(item, context);
+        }
+    }
+
+    return item as MenuItem<ChartMenuToken, ChartMenuContext>;
+}
+
+function parseToken(
+    token: string,
+    chartModel: ChartModel
+): MenuItem<ChartMenuToken, ChartMenuContext> | '-' {
+    switch (token) {
+        case 'viewFullscreen':
+            return {
+                text: 'View in full screen',
+                icon: Icon.expand(),
+                actionFn: () => chartModel.highchart.fullscreen.toggle()
+            };
+        case 'copyToClipboard':
+            return {
+                text: 'Copy to clipboard',
+                icon: Icon.copy(),
+                hidden: !Highcharts.isWebKit,
+                actionFn: () => chartModel.highchart.copyToClipboardAsync()
+            };
+        case 'printChart':
+            return {
+                text: 'Print chart',
+                icon: Icon.print(),
+                actionFn: () => chartModel.highchart.print()
+            };
+        case 'downloadJPEG':
+            return {
+                text: 'Download JPEG image',
+                icon: Icon.fileImage(),
+                actionFn: () =>
+                    chartModel.highchart.exportChartLocal({
+                        type: 'image/jpeg'
+                    })
+            };
+        case 'downloadPNG':
+            return {
+                text: 'Download PNG image',
+                icon: Icon.fileImage(),
+                actionFn: () => chartModel.highchart.exportChartLocal()
+            };
+        case 'downloadSVG':
+            return {
+                text: 'Download SVG vector image',
+                icon: Icon.fileImage(),
+                actionFn: () =>
+                    chartModel.highchart.exportChartLocal({
+                        type: 'image/svg+xml'
+                    })
+            };
+        case 'downloadPDF':
+            return {
+                text: 'Download PDF',
+                icon: Icon.fileImage(),
+                actionFn: () =>
+                    chartModel.highchart.exportChartLocal({
+                        type: 'application/pdf'
+                    })
+            };
+        case 'downloadCSV':
+            return {
+                text: 'Download CSV',
+                icon: Icon.fileCsv(),
+                actionFn: () => chartModel.highchart.downloadCSV()
+            };
+        case 'downloadXLS':
+            return {
+                text: 'Download Excel',
+                icon: Icon.fileExcel(),
+                actionFn: () => chartModel.highchart.downloadXLS()
+            };
+        case '-':
+            return '-';
+        default:
+            logWarn(
+                `Invalid ChartMenuToken "${token}" will not be used.`,
+                'ChartContextMenuItem.ts:parseToken'
+            );
+    }
+}

package/cmp/chart/impl/zoomout.ts

@@ -30,7 +30,8 @@ export function installZoomoutGesture(Highcharts) {
 
         Highcharts.addEvent(this, 'selection', e => {
             if (pixelDiff < 0) {
-                this.zoom(); // call w/o arguments resets zoom
+                // `undefined`'s preserve defaults, last arg `false` disables animation
+                this.xAxis?.forEach(it => it.setExtremes(undefined, undefined, undefined, false));
                 e.preventDefault();
             }
         });