highcharts 9.3.3 → 10.0.0

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "9.3.3",
+  "version": "10.0.0",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
   "types": "highcharts.d.ts"

package/css/highcharts.css

@@ -813,16 +813,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #cccccc;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -839,6 +839,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #cccccc;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -894,6 +900,17 @@ input.highcharts-range-selector {
   color: #ffffff;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #666666;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/css/highcharts.scss

@@ -719,15 +719,15 @@ input.highcharts-range-selector {
     font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
     transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
     stroke: $neutral-color-20;
+    stroke-width: inherit;
 }
 .highcharts-map-series .highcharts-point-hover {
     transition: fill 0ms, fill-opacity 0ms;
     fill-opacity: 0.5;
-    stroke-width: 2px;
 }
 .highcharts-mapline-series .highcharts-point {
     fill: none;
@@ -740,6 +740,11 @@ input.highcharts-range-selector {
     font-weight: bold;
     text-align: center;
 }
+.highcharts-mapview-inset-border {
+    stroke: $neutral-color-20;
+    stroke-width: 1px;
+    fill: none;
+}
 .highcharts-coloraxis {
     stroke-width: 0;
 }
@@ -787,6 +792,16 @@ input.highcharts-range-selector {
     color: $background-color;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+    fill: none;
+    stroke-width: 0;
+    cursor: pointer;
+}
+.highcharts-breadcrumbs-separator {
+    fill: $neutral-color-60;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
     cursor: pointer;

package/css/themes/dark-unica.css

@@ -874,16 +874,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #606063;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -900,6 +900,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #606063;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -955,6 +961,17 @@ input.highcharts-range-selector {
   color: #2a2a2b;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #E0E0E3;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/css/themes/grid-light.css

@@ -827,16 +827,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #cccccc;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -853,6 +853,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #cccccc;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -908,6 +914,17 @@ input.highcharts-range-selector {
   color: #ffffff;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #666666;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/css/themes/sand-signika.css

@@ -843,16 +843,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #cccccc;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -869,6 +869,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #cccccc;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -924,6 +930,17 @@ input.highcharts-range-selector {
   color: none;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #666666;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/es-modules/Accessibility/Accessibility.js

@@ -345,7 +345,7 @@ var Accessibility = /** @class */ (function () {
                 });
             });
             // Direct updates (events happen after render)
-            ['afterDrilldown', 'drillupall'].forEach(function (event) {
+            ['afterApplyDrilldown', 'drillupall'].forEach(function (event) {
                 addEvent(ChartClass, event, function chartOnAfterDrilldown() {
                     var a11y = this.accessibility;
                     if (a11y && !a11y.zombie) {

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

@@ -26,6 +26,7 @@ var __extends = (this && this.__extends) || (function () {
 import A from '../../Core/Animation/AnimationUtilities.js';
 var animObject = A.animObject;
 import H from '../../Core/Globals.js';
+var doc = H.doc;
 import Legend from '../../Core/Legend/Legend.js';
 import U from '../../Core/Utilities.js';
 var addEvent = U.addEvent, fireEvent = U.fireEvent, isNumber = U.isNumber, pick = U.pick, syncTimeout = U.syncTimeout;
@@ -59,6 +60,19 @@ function shouldDoLegendA11y(chart) {
         !(chart.colorAxis && chart.colorAxis.length) &&
         legendA11yOptions.enabled !== false);
 }
+/**
+ * @private
+ */
+function setLegendItemHoverState(hoverActive, legendItem) {
+    legendItem.setState(hoverActive ? 'hover' : '', true);
+    ['legendGroup', 'legendItem', 'legendSymbol'].forEach(function (i) {
+        var obj = legendItem[i];
+        var el = obj && obj.element || obj;
+        if (el) {
+            fireEvent(el, hoverActive ? 'mouseover' : 'mouseout');
+        }
+    });
+}
 /* *
  *
  *  Class
@@ -81,6 +95,7 @@ var LegendComponent = /** @class */ (function (_super) {
          * */
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.highlightedLegendItemIx = NaN;
+        _this.proxyGroup = null;
         return _this;
     }
     /* *
@@ -206,12 +221,19 @@ var LegendComponent = /** @class */ (function (_super) {
      * @private
      */
     LegendComponent.prototype.recreateProxies = function () {
+        var focusedElement = doc.activeElement;
+        var proxyGroup = this.proxyGroup;
+        var shouldRestoreFocus = focusedElement && proxyGroup &&
+            proxyGroup.contains(focusedElement);
         this.removeProxies();
         if (shouldDoLegendA11y(this.chart)) {
             this.addLegendProxyGroup();
             this.proxyLegendItems();
             this.updateLegendItemProxyVisibility();
             this.updateLegendTitle();
+            if (shouldRestoreFocus) {
+                this.chart.highlightLegendItem(this.highlightedLegendItemIx);
+            }
             return true;
         }
         return false;
@@ -247,7 +269,7 @@ var LegendComponent = /** @class */ (function (_super) {
         var a11yOptions = this.chart.options.accessibility;
         var groupRole = a11yOptions.landmarkVerbosity === 'all' ?
             'region' : null;
-        this.proxyProvider.addGroup('legend', 'ul', {
+        this.proxyGroup = this.proxyProvider.addGroup('legend', 'ul', {
             // Filled by updateLegendTitle, to keep up to date without
             // recreating group
             'aria-label': '_placeholder_',
@@ -328,21 +350,19 @@ var LegendComponent = /** @class */ (function (_super) {
             validate: function () {
                 return component.shouldHaveLegendNavigation();
             },
-            init: function (direction) {
-                return component.onKbdNavigationInit(direction);
+            init: function () {
+                chart.highlightLegendItem(0);
+                component.highlightedLegendItemIx = 0;
             },
             terminate: function () {
                 component.highlightedLegendItemIx = -1;
-                chart.legend.allItems.forEach(function (item) { return item.setState('', true); });
+                chart.legend.allItems.forEach(function (item) { return setLegendItemHoverState(false, item); });
             }
         });
     };
     /**
+     * Arrow key navigation
      * @private
-     * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @param {number} keyCode
-     * @return {number}
-     * Response code
      */
     LegendComponent.prototype.onKbdArrowKey = function (keyboardNavigationHandler, keyCode) {
         var keys = this.keyCodes, response = keyboardNavigationHandler.response, chart = this.chart, a11yOptions = chart.options.accessibility, numItems = chart.legend.allItems.length, direction = (keyCode === keys.left || keyCode === keys.up) ? -1 : 1;
@@ -356,8 +376,7 @@ var LegendComponent = /** @class */ (function (_super) {
             keyboardNavigationHandler.init(direction);
             return response.success;
         }
-        // No wrap, move
-        return response[direction > 0 ? 'next' : 'prev'];
+        return response.success;
     };
     /**
      * @private
@@ -383,15 +402,6 @@ var LegendComponent = /** @class */ (function (_super) {
             legendA11yOptions.keyboardNavigation &&
             legendA11yOptions.keyboardNavigation.enabled);
     };
-    /**
-     * @private
-     * @param {number} direction
-     */
-    LegendComponent.prototype.onKbdNavigationInit = function (direction) {
-        var chart = this.chart, lastIx = chart.legend.allItems.length - 1, ixToHighlight = direction > 0 ? 0 : lastIx;
-        chart.highlightLegendItem(ixToHighlight);
-        this.highlightedLegendItemIx = ixToHighlight;
-    };
     return LegendComponent;
 }(AccessibilityComponent));
 /* *
@@ -428,7 +438,7 @@ var LegendComponent = /** @class */ (function (_super) {
         var itemToHighlight = items[ix];
         if (itemToHighlight) {
             if (isNumber(oldIx) && items[oldIx]) {
-                fireEvent(items[oldIx].legendGroup.element, 'mouseout');
+                setLegendItemHoverState(false, items[oldIx]);
             }
             scrollLegendToItem(this.legend, ix);
             var legendItemProp = itemToHighlight.legendItem;
@@ -437,9 +447,7 @@ var LegendComponent = /** @class */ (function (_super) {
             if (legendItemProp && legendItemProp.element && proxyBtn) {
                 this.setFocusToElement(legendItemProp, proxyBtn);
             }
-            if (itemToHighlight.legendGroup) {
-                fireEvent(itemToHighlight.legendGroup.element, 'mouseover');
-            }
+            setLegendItemHoverState(true, itemToHighlight);
             return true;
         }
         return false;

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

@@ -101,7 +101,6 @@ var MenuComponent = /** @class */ (function (_super) {
         if (menu) {
             menu.setAttribute('aria-hidden', 'true');
         }
-        this.isExportMenuShown = false;
         this.setExportButtonExpandedState('false');
     };
     /**
@@ -113,7 +112,6 @@ var MenuComponent = /** @class */ (function (_super) {
             this.addAccessibleContextMenuAttribs();
             unhideChartElementFromAT(chart, menu);
         }
-        this.isExportMenuShown = true;
         this.setExportButtonExpandedState('true');
     };
     /**
@@ -157,7 +155,8 @@ var MenuComponent = /** @class */ (function (_super) {
                     chart: chart,
                     chartTitle: getChartTitle(chart)
                 }),
-                'aria-expanded': false
+                'aria-expanded': false,
+                title: chart.options.lang.contextButtonTitle || null
             });
         }
     };
@@ -308,7 +307,7 @@ var MenuComponent = /** @class */ (function (_super) {
         var chart = this.chart;
         var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
         var exportButtonElement = getExportMenuButtonElement(chart).element;
-        if (this.isExportMenuShown) {
+        if (chart.openMenu) {
             this.fakeClickEvent(curHighlightedItem);
         }
         else {
@@ -377,7 +376,7 @@ var MenuComponent = /** @class */ (function (_super) {
      */
     function chartHideExportMenu() {
         var chart = this, exportList = chart.exportDivElements;
-        if (exportList && chart.exportContextMenu) {
+        if (exportList && chart.exportContextMenu && chart.openMenu) {
             // Reset hover states etc.
             exportList.forEach(function (el) {
                 if (el &&

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

@@ -227,7 +227,7 @@ var RangeSelectorComponent = /** @class */ (function (_super) {
             if (chart.accessibility) {
                 chart.accessibility.keyboardNavigation.tabindexContainer
                     .focus();
-                chart.accessibility.keyboardNavigation[direction < 0 ? 'prev' : 'next']();
+                chart.accessibility.keyboardNavigation.move(direction);
             }
         }
         else if (rangeSel) {
@@ -315,7 +315,7 @@ var RangeSelectorComponent = /** @class */ (function (_super) {
                     e.stopPropagation();
                     if (a11y) {
                         a11y.keyboardNavigation.tabindexContainer.focus();
-                        a11y.keyboardNavigation[e.shiftKey ? 'prev' : 'next']();
+                        a11y.keyboardNavigation.move(e.shiftKey ? -1 : 1);
                     }
                 }
             });

package/es-modules/Accessibility/Components/SeriesComponent/ForcedMarkers.js

@@ -164,6 +164,7 @@ var ForcedMarkersComposition;
         else if (series.a11yMarkersForced) {
             delete series.a11yMarkersForced;
             unforceSeriesMarkerOptions(series);
+            delete series.resetA11yMarkerOptions;
         }
     }
     /**
@@ -189,20 +190,20 @@ var ForcedMarkersComposition;
         });
     }
     /**
+     * Reset markers to normal
      * @private
      */
     function unforceSeriesMarkerOptions(series) {
         var resetMarkerOptions = series.resetA11yMarkerOptions;
         if (resetMarkerOptions) {
-            merge(true, series.options, {
+            var originalOpactiy = resetMarkerOptions.states &&
+                resetMarkerOptions.states.normal &&
+                resetMarkerOptions.states.normal.opacity;
+            series.update({
                 marker: {
                     enabled: resetMarkerOptions.enabled,
                     states: {
-                        normal: {
-                            opacity: resetMarkerOptions.states &&
-                                resetMarkerOptions.states.normal &&
-                                resetMarkerOptions.states.normal.opacity
-                        }
+                        normal: { opacity: originalOpactiy }
                     }
                 }
             });

package/es-modules/Accessibility/Components/SeriesComponent/NewDataAnnouncer.js

@@ -117,7 +117,7 @@ var NewDataAnnouncer = /** @class */ (function () {
      */
     NewDataAnnouncer.prototype.addEventListeners = function () {
         var announcer = this, chart = this.chart, e = this.eventProvider;
-        e.addEvent(chart, 'afterDrilldown', function () {
+        e.addEvent(chart, 'afterApplyDrilldown', function () {
             announcer.lastAnnouncementTime = 0;
         });
         e.addEvent(chart, 'afterAddSeries', function (e) {

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

@@ -59,7 +59,6 @@ var SeriesComponent = /** @class */ (function (_super) {
      * @private
      */
     SeriesComponent.compose = function (ChartClass, PointClass, SeriesClass) {
-        // Handle forcing markers
         NewDataAnnouncer.compose(SeriesClass);
         ForcedMarkers.compose(SeriesClass);
         SeriesKeyboardNavigation.compose(ChartClass, PointClass, SeriesClass);

package/es-modules/Accessibility/Components/SeriesComponent/SeriesDescriber.js

@@ -258,9 +258,9 @@ function getPointValueDescription(point) {
  * @private
  */
 function defaultPointDescriptionFormatter(point) {
-    var series = point.series, chart = series.chart, valText = getPointValueDescription(point), description = point.options && point.options.accessibility &&
-        point.options.accessibility.description, userDescText = description ? ' ' + description : '', seriesNameText = chart.series.length > 1 && series.name ?
-        ' ' + series.name + '.' : '', annotationsDesc = getPointAnnotationDescription(point), pointAnnotationsText = annotationsDesc ? ' ' + annotationsDesc : '';
+    var series = point.series, shouldExposeSeriesName = series.chart.series.length > 1 ||
+        series.options.name, valText = getPointValueDescription(point), description = point.options && point.options.accessibility &&
+        point.options.accessibility.description, userDescText = description ? ' ' + description : '', seriesNameText = shouldExposeSeriesName ? ' ' + series.name + '.' : '', annotationsDesc = getPointAnnotationDescription(point), pointAnnotationsText = annotationsDesc ? ' ' + annotationsDesc : '';
     point.accessibility = point.accessibility || {};
     point.accessibility.valueDescription = valText;
     return valText + userDescText + seriesNameText + pointAnnotationsText;