highcharts 9.3.0 → 9.3.1

package/es-modules/Accessibility/Components/MenuComponent.js

@@ -10,16 +10,34 @@
  *
  * */
 'use strict';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 import Chart from '../../Core/Chart/Chart.js';
 import U from '../../Core/Utilities.js';
-var attr = U.attr, extend = U.extend;
+var attr = U.attr;
 import AccessibilityComponent from '../AccessibilityComponent.js';
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import ChartUtilities from '../Utils/ChartUtilities.js';
 var getChartTitle = ChartUtilities.getChartTitle, unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
 import HTMLUtilities from '../Utils/HTMLUtilities.js';
 var getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent;
-/* eslint-disable no-invalid-this, valid-jsdoc */
+/* *
+ *
+ *  Functions
+ *
+ * */
+/* eslint-disable valid-jsdoc */
 /**
  * Get the wrapped export button element of a chart.
  *
@@ -30,97 +48,6 @@ var getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent;
 function getExportMenuButtonElement(chart) {
     return chart.exportSVGElements && chart.exportSVGElements[0];
 }
-/**
- * Show the export menu and focus the first item (if exists).
- *
- * @private
- * @function Highcharts.Chart#showExportMenu
- */
-Chart.prototype.showExportMenu = function () {
-    var exportButton = getExportMenuButtonElement(this);
-    if (exportButton) {
-        var el = exportButton.element;
-        if (el.onclick) {
-            el.onclick(getFakeMouseEvent('click'));
-        }
-    }
-};
-/**
- * @private
- * @function Highcharts.Chart#hideExportMenu
- */
-Chart.prototype.hideExportMenu = function () {
-    var chart = this, exportList = chart.exportDivElements;
-    if (exportList && chart.exportContextMenu) {
-        // Reset hover states etc.
-        exportList.forEach(function (el) {
-            if (el &&
-                el.className === 'highcharts-menu-item' &&
-                el.onmouseout) {
-                el.onmouseout(getFakeMouseEvent('mouseout'));
-            }
-        });
-        chart.highlightedExportItemIx = 0;
-        // Hide the menu div
-        chart.exportContextMenu.hideMenu();
-        // Make sure the chart has focus and can capture keyboard events
-        chart.container.focus();
-    }
-};
-/**
- * Highlight export menu item by index.
- *
- * @private
- * @function Highcharts.Chart#highlightExportItem
- *
- * @param {number} ix
- *
- * @return {boolean}
- */
-Chart.prototype.highlightExportItem = function (ix) {
-    var listItem = this.exportDivElements && this.exportDivElements[ix];
-    var curHighlighted = this.exportDivElements &&
-        this.exportDivElements[this.highlightedExportItemIx];
-    if (listItem &&
-        listItem.tagName === 'LI' &&
-        !(listItem.children && listItem.children.length)) {
-        // Test if we have focus support for SVG elements
-        var hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;
-        // Only focus if we can set focus back to the elements after
-        // destroying the menu (#7422)
-        if (listItem.focus && hasSVGFocusSupport) {
-            listItem.focus();
-        }
-        if (curHighlighted && curHighlighted.onmouseout) {
-            curHighlighted.onmouseout(getFakeMouseEvent('mouseout'));
-        }
-        if (listItem.onmouseover) {
-            listItem.onmouseover(getFakeMouseEvent('mouseover'));
-        }
-        this.highlightedExportItemIx = ix;
-        return true;
-    }
-    return false;
-};
-/**
- * Try to highlight the last valid export menu item.
- *
- * @private
- * @function Highcharts.Chart#highlightLastExportItem
- * @return {boolean}
- */
-Chart.prototype.highlightLastExportItem = function () {
-    var chart = this;
-    if (chart.exportDivElements) {
-        var i = chart.exportDivElements.length;
-        while (i--) {
-            if (chart.highlightExportItem(i)) {
-                return true;
-            }
-        }
-    }
-    return false;
-};
 /**
  * @private
  * @param {Highcharts.Chart} chart
@@ -134,6 +61,11 @@ function exportingShouldHaveA11y(chart) {
         exportButton &&
         exportButton.element);
 }
+/* *
+ *
+ *  Class
+ *
+ * */
 /**
  * The MenuComponent class
  *
@@ -141,13 +73,21 @@ function exportingShouldHaveA11y(chart) {
  * @class
  * @name Highcharts.MenuComponent
  */
-var MenuComponent = function () { };
-MenuComponent.prototype = new AccessibilityComponent();
-extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
+var MenuComponent = /** @class */ (function (_super) {
+    __extends(MenuComponent, _super);
+    function MenuComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
     /**
      * Init the component
      */
-    init: function () {
+    MenuComponent.prototype.init = function () {
         var chart = this.chart, component = this;
         this.addEvent(chart, 'exportMenuShown', function () {
             component.onMenuShown();
@@ -156,22 +96,22 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             component.onMenuHidden();
         });
         this.createProxyGroup();
-    },
+    };
     /**
      * @private
      */
-    onMenuHidden: function () {
+    MenuComponent.prototype.onMenuHidden = function () {
         var menu = this.chart.exportContextMenu;
         if (menu) {
             menu.setAttribute('aria-hidden', 'true');
         }
         this.isExportMenuShown = false;
         this.setExportButtonExpandedState('false');
-    },
+    };
     /**
      * @private
      */
-    onMenuShown: function () {
+    MenuComponent.prototype.onMenuShown = function () {
         var chart = this.chart, menu = chart.exportContextMenu;
         if (menu) {
             this.addAccessibleContextMenuAttribs();
@@ -179,28 +119,28 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
         }
         this.isExportMenuShown = true;
         this.setExportButtonExpandedState('true');
-    },
+    };
     /**
      * @private
      * @param {string} stateStr
      */
-    setExportButtonExpandedState: function (stateStr) {
+    MenuComponent.prototype.setExportButtonExpandedState = function (stateStr) {
         if (this.exportButtonProxy) {
             this.exportButtonProxy.buttonElement.setAttribute('aria-expanded', stateStr);
         }
-    },
+    };
     /**
      * Called on each render of the chart. We need to update positioning of the
      * proxy overlay.
      */
-    onChartRender: function () {
+    MenuComponent.prototype.onChartRender = function () {
         this.proxyProvider.clearGroup('chartMenu');
         this.proxyMenuButton();
-    },
+    };
     /**
      * @private
      */
-    proxyMenuButton: function () {
+    MenuComponent.prototype.proxyMenuButton = function () {
         var chart = this.chart;
         var proxyProvider = this.proxyProvider;
         var buttonEl = getExportMenuButtonElement(chart);
@@ -213,20 +153,20 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
                 'aria-expanded': false
             });
         }
-    },
+    };
     /**
      * @private
      */
-    createProxyGroup: function () {
+    MenuComponent.prototype.createProxyGroup = function () {
         var chart = this.chart;
         if (chart && this.proxyProvider) {
             this.proxyProvider.addGroup('chartMenu', 'div');
         }
-    },
+    };
     /**
      * @private
      */
-    addAccessibleContextMenuAttribs: function () {
+    MenuComponent.prototype.addAccessibleContextMenuAttribs = function () {
         var chart = this.chart, exportList = chart.exportDivElements;
         if (exportList && exportList.length) {
             // Set tabindex on the menu items to allow focusing by script
@@ -252,12 +192,12 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
                 });
             }
         }
-    },
+    };
     /**
      * Get keyboard navigation handler for this component.
      * @return {Highcharts.KeyboardNavigationHandler}
      */
-    getKeyboardNavigation: function () {
+    MenuComponent.prototype.getKeyboardNavigation = function () {
         var keys = this.keyCodes, chart = this.chart, component = this;
         return new KeyboardNavigationHandler(chart, {
             keyCodeMap: [
@@ -304,13 +244,13 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
                 chart.hideExportMenu();
             }
         });
-    },
+    };
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
      * @return {number} Response code
      */
-    onKbdPrevious: function (keyboardNavigationHandler) {
+    MenuComponent.prototype.onKbdPrevious = function (keyboardNavigationHandler) {
         var chart = this.chart;
         var a11yOptions = chart.options.accessibility;
         var response = keyboardNavigationHandler.response;
@@ -328,13 +268,13 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             return response.success;
         }
         return response.prev;
-    },
+    };
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
      * @return {number} Response code
      */
-    onKbdNext: function (keyboardNavigationHandler) {
+    MenuComponent.prototype.onKbdNext = function (keyboardNavigationHandler) {
         var chart = this.chart;
         var a11yOptions = chart.options.accessibility;
         var response = keyboardNavigationHandler.response;
@@ -351,13 +291,13 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             return response.success;
         }
         return response.next;
-    },
+    };
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
      * @return {number} Response code
      */
-    onKbdClick: function (keyboardNavigationHandler) {
+    MenuComponent.prototype.onKbdClick = function (keyboardNavigationHandler) {
         var chart = this.chart;
         var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
         var exportButtonElement = getExportMenuButtonElement(chart).element;
@@ -369,6 +309,141 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             chart.highlightExportItem(0);
         }
         return keyboardNavigationHandler.response.success;
+    };
+    return MenuComponent;
+}(AccessibilityComponent));
+/* *
+ *
+ *  Class Namespace
+ *
+ * */
+(function (MenuComponent) {
+    /* *
+     *
+     *  Declarations
+     *
+     * */
+    /* *
+     *
+     *  Constants
+     *
+     * */
+    var composedClasses = [];
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
+    /**
+     * @private
+     */
+    function compose(ChartClass) {
+        if (composedClasses.indexOf(ChartClass) === -1) {
+            composedClasses.push(ChartClass);
+            var chartProto = Chart.prototype;
+            chartProto.hideExportMenu = chartHideExportMenu;
+            chartProto.highlightExportItem = chartHighlightExportItem;
+            chartProto.highlightLastExportItem = chartHighlightLastExportItem;
+            chartProto.showExportMenu = chartShowExportMenu;
+        }
+    }
+    MenuComponent.compose = compose;
+    /**
+     * Show the export menu and focus the first item (if exists).
+     *
+     * @private
+     * @function Highcharts.Chart#showExportMenu
+     */
+    function chartShowExportMenu() {
+        var exportButton = getExportMenuButtonElement(this);
+        if (exportButton) {
+            var el = exportButton.element;
+            if (el.onclick) {
+                el.onclick(getFakeMouseEvent('click'));
+            }
+        }
+    }
+    /**
+     * @private
+     * @function Highcharts.Chart#hideExportMenu
+     */
+    function chartHideExportMenu() {
+        var chart = this, exportList = chart.exportDivElements;
+        if (exportList && chart.exportContextMenu) {
+            // Reset hover states etc.
+            exportList.forEach(function (el) {
+                if (el &&
+                    el.className === 'highcharts-menu-item' &&
+                    el.onmouseout) {
+                    el.onmouseout(getFakeMouseEvent('mouseout'));
+                }
+            });
+            chart.highlightedExportItemIx = 0;
+            // Hide the menu div
+            chart.exportContextMenu.hideMenu();
+            // Make sure the chart has focus and can capture keyboard events
+            chart.container.focus();
+        }
+    }
+    /**
+     * Highlight export menu item by index.
+     *
+     * @private
+     * @function Highcharts.Chart#highlightExportItem
+     *
+     * @param {number} ix
+     *
+     * @return {boolean}
+     */
+    function chartHighlightExportItem(ix) {
+        var listItem = this.exportDivElements && this.exportDivElements[ix];
+        var curHighlighted = this.exportDivElements &&
+            this.exportDivElements[this.highlightedExportItemIx];
+        if (listItem &&
+            listItem.tagName === 'LI' &&
+            !(listItem.children && listItem.children.length)) {
+            // Test if we have focus support for SVG elements
+            var hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;
+            // Only focus if we can set focus back to the elements after
+            // destroying the menu (#7422)
+            if (listItem.focus && hasSVGFocusSupport) {
+                listItem.focus();
+            }
+            if (curHighlighted && curHighlighted.onmouseout) {
+                curHighlighted.onmouseout(getFakeMouseEvent('mouseout'));
+            }
+            if (listItem.onmouseover) {
+                listItem.onmouseover(getFakeMouseEvent('mouseover'));
+            }
+            this.highlightedExportItemIx = ix;
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Try to highlight the last valid export menu item.
+     *
+     * @private
+     * @function Highcharts.Chart#highlightLastExportItem
+     * @return {boolean}
+     */
+    function chartHighlightLastExportItem() {
+        var chart = this;
+        if (chart.exportDivElements) {
+            var i = chart.exportDivElements.length;
+            while (i--) {
+                if (chart.highlightExportItem(i)) {
+                    return true;
+                }
+            }
+        }
+        return false;
     }
-});
+})(MenuComponent || (MenuComponent = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
 export default MenuComponent;