@highcharts/grid-pro 2.2.0 → 2.3.1

package/es-modules/Accessibility/ProxyElement.js

@@ -17,12 +17,11 @@
 'use strict';
 import H from '../Core/Globals.js';
 const { doc, win } = H;
-import U from '../Core/Utilities.js';
-const { attr, css, merge } = U;
 import EventProvider from './Utils/EventProvider.js';
 import ChartUtilities from './Utils/ChartUtilities.js';
 const { fireEventOnWrappedOrUnwrappedElement } = ChartUtilities;
 import HTMLUtilities from './Utils/HTMLUtilities.js';
+import { attr, css, merge } from '../Shared/Utilities.js';
 const { cloneMouseEvent, cloneTouchEvent, getFakeMouseEvent, removeElement } = HTMLUtilities;
 /* *
  *
@@ -79,8 +78,8 @@ class ProxyElement {
     /**
      * Update the target to be proxied. The position and events are updated to
      * match the new target.
-     * @param target The new target definition
-     * @param attributes New HTML attributes to apply to the proxy. Set an
+     * @param {object} target The new target definition
+     * @param {object} attributes New HTML attributes to apply to the proxy. Set an
      * attribute to null to remove.
      */
     updateTarget(target, attributes) {
@@ -125,9 +124,7 @@ class ProxyElement {
      */
     updateCSSClassName() {
         const stringHasNoTooltip = (s) => (s.indexOf('highcharts-no-tooltip') > -1);
-        const legend = this.chart.legend;
-        const groupDiv = legend.group && legend.group.div;
-        const noTooltipOnGroup = stringHasNoTooltip(groupDiv && groupDiv.className || '');
+        const noTooltipOnGroup = stringHasNoTooltip(this.chart.legend?.group?.div?.className || '');
         const targetClassName = this.getTargetAttr(this.target.click, 'class') || '';
         const noTooltipOnTarget = stringHasNoTooltip(targetClassName);
         this.innerElement.className = noTooltipOnGroup || noTooltipOnTarget ?

package/es-modules/Accessibility/ProxyProvider.js

@@ -17,14 +17,13 @@
 'use strict';
 import H from '../Core/Globals.js';
 const { doc } = H;
-import U from '../Core/Utilities.js';
-const { attr, css } = U;
 import CU from './Utils/ChartUtilities.js';
 const { unhideChartElementFromAT } = CU;
 import DOMElementProvider from './Utils/DOMElementProvider.js';
 import HU from './Utils/HTMLUtilities.js';
 const { removeChildNodes } = HU;
 import ProxyElement from './ProxyElement.js';
+import { attr, css } from '../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Accessibility/Utils/Announcer.js

@@ -17,8 +17,7 @@ import H from '../../Core/Globals.js';
 const { doc } = H;
 import HU from './HTMLUtilities.js';
 const { addClass, visuallyHideElement } = HU;
-import U from '../../Core/Utilities.js';
-const { attr } = U;
+import { attr, internalClearTimeout } from '../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -48,7 +47,7 @@ class Announcer {
         // Delete contents after a little while to avoid user finding the live
         // region in the DOM.
         if (this.clearAnnouncementRegionTimer) {
-            clearTimeout(this.clearAnnouncementRegionTimer);
+            internalClearTimeout(this.clearAnnouncementRegionTimer);
         }
         this.clearAnnouncementRegionTimer = setTimeout(() => {
             this.announceRegion.innerHTML = AST.emptyHTML;

package/es-modules/Accessibility/Utils/ChartUtilities.js

@@ -15,14 +15,12 @@ import H from '../../Core/Globals.js';
 const { doc } = H;
 import HU from './HTMLUtilities.js';
 const { stripHTMLTagsFromString: stripHTMLTags } = HU;
-import U from '../../Core/Utilities.js';
-const { defined, find, fireEvent } = U;
+import { defined, find, fireEvent } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
  *
  * */
-/* eslint-disable valid-jsdoc */
 /**
  * Fire an event on an element that is either wrapped by Highcharts,
  * or a DOM element.

package/es-modules/Accessibility/Utils/EventProvider.d.ts

@@ -1,6 +1,6 @@
+import { type EventOptions } from '../../Shared/Utilities.js';
 import type { EventCallback } from '../../Core/Callback';
 import DOMElementType from '../../Core/Renderer/DOMElementType';
-import U from '../../Core/Utilities.js';
 interface ElementsFocusEventRemovers {
     element: DOMElementType;
     remover: Function;
@@ -11,7 +11,7 @@ interface ElementsFocusEventRemovers {
 declare class EventProvider {
     constructor();
     eventRemovers: Array<ElementsFocusEventRemovers>;
-    addEvent<T>(el: (Class<T> | T), type: string, fn: (EventCallback<T> | Function), options?: U.EventOptions): Function;
+    addEvent<T>(el: (Class<T> | T), type: string, fn: (EventCallback<T> | Function), options?: EventOptions): Function;
     /**
      * Remove added event.
      * @private

package/es-modules/Accessibility/Utils/EventProvider.js

@@ -11,9 +11,13 @@
  *
  * */
 'use strict';
+/* *
+ *
+ *  Imports
+ *
+ * */
+import { addEvent } from '../../Shared/Utilities.js';
 import H from '../../Core/Globals.js';
-import U from '../../Core/Utilities.js';
-const { addEvent } = U;
 /**
  * @private
  */

package/es-modules/Accessibility/Utils/HTMLUtilities.js

@@ -12,9 +12,8 @@
  * */
 'use strict';
 import H from '../../Core/Globals.js';
+import { css } from '../../Shared/Utilities.js';
 const { doc, win } = H;
-import U from '../../Core/Utilities.js';
-const { css } = U;
 /* *
  *
  *  Constants
@@ -26,7 +25,6 @@ const simulatedEventTarget = win.EventTarget && new win.EventTarget() || 'none';
  *  Functions
  *
  * */
-/* eslint-disable valid-jsdoc */
 /**
  * @private
  * @param {Highcharts.HTMLDOMElement} el

package/es-modules/Core/Animation/AnimationUtilities.js

@@ -10,8 +10,7 @@
  * */
 'use strict';
 import Fx from './Fx.js';
-import U from '../Utilities.js';
-const { defined, getStyle, isArray, isNumber, isObject, merge, objectEach, pick } = U;
+import { defined, getStyle, isArray, isNumber, isObject, merge, objectEach, pick } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions

package/es-modules/Core/Animation/Fx.js

@@ -13,8 +13,7 @@ import Color from '../Color/Color.js';
 const { parse: color } = Color;
 import H from '../Globals.js';
 const { win } = H;
-import U from '../Utilities.js';
-const { isNumber, objectEach } = U;
+import { isNumber, objectEach } from '../../Shared/Utilities.js';
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /* *
  *

package/es-modules/Core/Callback.d.ts

@@ -1,3 +1,4 @@
+import type { AnyRecord } from '../Shared/Types.js';
 /**
  * Generic callback function.
  *
@@ -23,11 +24,14 @@ export interface Callback<TScope, TReturn> {
  * @param {TEvent} e
  * Event argument.
  *
+ * @param {TScope} [ctx]
+ * The context for the callback.
+ *
  * @return {boolean|void}
  * Return value.
  */
 export interface EventCallback<TScope, TEvent = AnyRecord | Event> {
-    (this: TScope, e: TEvent): (boolean | void);
+    (this: TScope, e: TEvent, ctx?: TScope): (boolean | void);
 }
 /**
  * Generic formatter callback function.
@@ -40,10 +44,13 @@ export interface EventCallback<TScope, TEvent = AnyRecord | Event> {
  * @param {TEvent} e
  * Event argument.
  *
+ * @param {TScope} [ctx]
+ * The context for the callback.
+ *
  * @return {string}
  * Return value.
  */
 export interface FormatterCallback<TScope, TEvent = unknown> {
-    (this: TScope, e: TEvent): string;
+    (this: TScope, e: TEvent, ctx?: TScope): string;
 }
 export default Callback;

package/es-modules/Core/Chart/Chart.js

@@ -26,10 +26,10 @@ import SeriesRegistry from '../Series/SeriesRegistry.js';
 const { seriesTypes } = SeriesRegistry;
 import SVGRenderer from '../Renderer/SVG/SVGRenderer.js';
 import Time from '../Time.js';
-import U from '../Utilities.js';
 import AST from '../Renderer/HTML/AST.js';
 import Tick from '../Axis/Tick.js';
-const { addEvent, attr, createElement, css, defined, diffObjects, discardElement, erase, error, extend, find, fireEvent, getAlignFactor, getStyle, isArray, isNumber, isObject, isString, merge, objectEach, pick, pInt, relativeLength, removeEvent, splat, syncTimeout, uniqueKey } = U;
+import { addEvent, attr, createElement, css, defined, diffObjects, discardElement, erase, extend, find, fireEvent, getAlignFactor, getStyle, internalClearTimeout, isArray, isNumber, isObject, isString, merge, objectEach, pick, pInt, relativeLength, removeEvent, splat, syncTimeout } from '../../Shared/Utilities.js';
+import { error, uniqueKey } from '../Utilities.js';
 /* *
  *
  *  Class
@@ -65,6 +65,7 @@ const { addEvent, attr, createElement, css, defined, diffObjects, discardElement
  *        handler is equivalent.
  */
 class Chart {
+    /* eslint-disable jsdoc/check-param-names */
     /**
      * Factory function for basic charts.
      *
@@ -107,6 +108,11 @@ class Chart {
     ) {
         /** @internal */
         this.sharedClips = {};
+        // Return early if there's no browser API (server environment).
+        if (!doc) {
+            error(36, false, this);
+            return;
+        }
         const args = [
             // ES5 builds fail unless we cast it to an Array
             ...arguments
@@ -369,13 +375,6 @@ class Chart {
             for (let i = fromIndex, iEnd = collection.length; i < iEnd; ++i) {
                 const item = collection[i];
                 if (item) {
-                    /**
-                     * Contains the series' index in the `Chart.series` array.
-                     *
-                     * @name Highcharts.Series#index
-                     * @type {number}
-                     * @readonly
-                     */
                     item.index = i;
                     if (item instanceof Series) {
                         item.name = item.getName();
@@ -1277,7 +1276,7 @@ class Chart {
             containerBox.width) {
             if (containerBox.width !== oldBox.width ||
                 containerBox.height !== oldBox.height) {
-                U.clearTimeout(chart.reflowTimeout);
+                internalClearTimeout(chart.reflowTimeout);
                 // When called from window.resize, e is set, else it's called
                 // directly (#2224)
                 chart.reflowTimeout = syncTimeout(function () {
@@ -1285,6 +1284,12 @@ class Chart {
                     // (#1257)
                     if (chart.container) {
                         chart.setSize(void 0, void 0, false);
+                        // #23712: sync containerBox with reflowed height to
+                        // break infinite loop
+                        const box = chart.containerBox;
+                        if (box) {
+                            box.height = chart.chartHeight;
+                        }
                     }
                 }, e ? 100 : 0);
             }
@@ -1681,15 +1686,6 @@ class Chart {
                 // #3341 avoid mutual linking
                 linkedParent.linkedParent !== series) {
                 linkedParent.linkedSeries.push(series);
-                /**
-                 * The parent series of the current series, if the current
-                 * series has a [linkedTo](https://api.highcharts.com/highcharts/series.line.linkedTo)
-                 * setting.
-                 *
-                 * @name Highcharts.Series#linkedParent
-                 * @type {Highcharts.Series}
-                 * @readonly
-                 */
                 series.linkedParent = linkedParent;
                 if (linkedParent.enabledDataSorting) {
                     series.setDataSortingOptions();
@@ -1772,14 +1768,25 @@ class Chart {
         while ((redoHorizontal || redoVertical || axisLayoutRuns > 1) &&
             run < axisLayoutRuns // #19794
         ) {
-            const tempWidth = chart.plotWidth, tempHeight = chart.plotHeight;
+            const tempWidth = chart.plotWidth, tempHeight = chart.plotHeight, threshold = [1.05, 1.1];
             for (const axis of axes) {
+                const horizNum = +(axis.horiz || 0);
                 if (run === 0) {
                     // Get margins by pre-rendering axes
                     axis.setScale();
+                    // On datetime axes, consider the tick interval match. A
+                    // match close to 1 means that the current normalized tick
+                    // interval is an insecure match to the requested tick
+                    // interval, on the brink of landing on a higher unit. In
+                    // this case, we should redo the axis to get a more
+                    // appropriate tick interval (#17393).
+                    const tickIntervalMatch = axis.tickPositions?.info?.match;
+                    if (tickIntervalMatch) {
+                        threshold[horizNum] = Math.min(tickIntervalMatch, threshold[horizNum]);
+                    }
                 }
-                else if ((axis.horiz && redoHorizontal) ||
-                    (!axis.horiz && redoVertical)) {
+                else if ((horizNum && redoHorizontal) ||
+                    (!horizNum && redoVertical)) {
                     // Update to reflect the new margins
                     axis.setTickInterval(true);
                 }
@@ -1791,8 +1798,10 @@ class Chart {
                 // Check again for new, rotated or moved labels
                 chart.getMargins();
             }
-            redoHorizontal = (tempWidth / chart.plotWidth) > (run ? 1 : 1.1);
-            redoVertical = (tempHeight / chart.plotHeight) > (run ? 1 : 1.05);
+            redoHorizontal = (tempWidth / chart.plotWidth) >
+                (run ? 1 : threshold[1]);
+            redoVertical = (tempHeight / chart.plotHeight) >
+                (run ? 1 : threshold[0]);
             run++;
         }
         // Draw the borders and backgrounds
@@ -1973,7 +1982,7 @@ class Chart {
         chart.render();
         chart.pointer?.getChartPosition(); // #14973
         // Fire the load event if there are no external images
-        if (!chart.renderer.imgCount && !chart.hasLoaded) {
+        if (!chart.renderer.asyncCounter && !chart.hasLoaded) {
             chart.onload();
         }
         // If the chart was rendered outside the top container, put it back in
@@ -2166,7 +2175,7 @@ class Chart {
      * @param {string} coll
      * An axis type.
      *
-     * @param {...Array<*>} arguments
+     * @param {...Array<*>} options
      * All arguments for the constructor.
      *
      * @return {Highcharts.Axis}
@@ -2199,13 +2208,13 @@ class Chart {
      *        [lang.loading](https://api.highcharts.com/highcharts/lang.loading).
      */
     showLoading(str) {
-        const chart = this, options = chart.options, loadingOptions = options.loading, setLoadingSize = function () {
+        const chart = this, options = chart.options, loadingOptions = options.loading, loadingStyle = loadingOptions?.style ?? {}, setLoadingSize = function () {
             if (loadingDiv) {
                 css(loadingDiv, {
-                    left: chart.plotLeft + 'px',
-                    top: chart.plotTop + 'px',
-                    width: chart.plotWidth + 'px',
-                    height: chart.plotHeight + 'px'
+                    left: loadingStyle.left ?? chart.plotLeft + 'px',
+                    top: loadingStyle.top ?? chart.plotTop + 'px',
+                    width: loadingStyle.width ?? chart.plotWidth + 'px',
+                    height: loadingStyle.height ?? chart.plotHeight + 'px'
                 });
             }
         };
@@ -2225,10 +2234,8 @@ class Chart {
         AST.setElementHTML(loadingSpan, pick(str, options.lang.loading, ''));
         if (!chart.styledMode) {
             // Update visuals
-            css(loadingDiv, extend(loadingOptions.style, {
-                zIndex: 10
-            }));
-            css(loadingSpan, loadingOptions.labelStyle);
+            css(loadingDiv, extend(loadingStyle, { zIndex: 10 }));
+            css(loadingSpan, loadingOptions?.labelStyle ?? {});
             // Show it
             if (!chart.loadingShown) {
                 css(loadingDiv, {
@@ -2236,9 +2243,9 @@ class Chart {
                     display: ''
                 });
                 animate(loadingDiv, {
-                    opacity: loadingOptions.style.opacity || 0.5
+                    opacity: loadingStyle.opacity ?? 0.5
                 }, {
-                    duration: loadingOptions.showDuration || 0
+                    duration: loadingOptions?.showDuration ?? 0
                 });
             }
         }
@@ -2266,7 +2273,7 @@ class Chart {
                 animate(loadingDiv, {
                     opacity: 0
                 }, {
-                    duration: options.loading.hideDuration || 100,
+                    duration: options.loading?.hideDuration ?? 100,
                     complete: function () {
                         css(loadingDiv, { display: 'none' });
                     }
@@ -2435,9 +2442,12 @@ class Chart {
         // update the first series in the chart. Setting two series without
         // an id will update the first and the second respectively (#6019)
         // chart.update and responsive.
-        this.collectionsWithUpdate.forEach(function (coll) {
+        this.collectionsWithUpdate.forEach((coll) => {
             if (options[coll]) {
-                splat(options[coll]).forEach(function (newOptions, i) {
+                splat(options[coll]).forEach((newOptions, i) => {
+                    if (!newOptions) {
+                        return;
+                    }
                     const hasId = defined(newOptions.id);
                     let item;
                     // Match by id
@@ -2476,7 +2486,7 @@ class Chart {
                 });
                 // Add items for removal
                 if (oneToOne) {
-                    chart[coll].forEach(function (item) {
+                    chart[coll].forEach((item) => {
                         if (!item.touched && !item.options.isInternal) {
                             itemsForRemoval.push(item);
                         }
@@ -2487,7 +2497,7 @@ class Chart {
                 }
             }
         });
-        itemsForRemoval.forEach(function (item) {
+        itemsForRemoval.forEach((item) => {
             if (item.chart && item.remove) { // #9097, avoid removing twice
                 item.remove(false);
             }
@@ -2930,6 +2940,10 @@ export default Chart;
  *        The thousands separator, defaults to the one given in the lang
  *        options, or a space character.
  *
+ * @param {Highcharts.Chart} [ctx]
+ *        Since v12.5.0, the chart context passed as an extra argument for
+ *        arrow functions.
+ *
  * @return {string} The formatted number.
  */
 /**

package/es-modules/Core/Chart/Chart3D.js

@@ -17,8 +17,7 @@ import D from '../Defaults.js';
 const { defaultOptions: genericDefaultOptions } = D;
 import Math3D from '../Math3D.js';
 const { perspective, shapeArea3D } = Math3D;
-import U from '../Utilities.js';
-const { addEvent, isArray, merge, pick, wrap } = U;
+import { addEvent, isArray, merge, pick, wrap } from '../../Shared/Utilities.js';
 /* *
  *
  *  Composition

package/es-modules/Core/Chart/ChartDefaults.js

@@ -386,6 +386,9 @@ const ChartDefaults = {
     /**
      * Callback function to override the default function that formats all
      * the numbers in the chart. Returns a string with the formatted number.
+     * Since v12.5.0, the callback also receives `ctx` as the last argument,
+     * so that arrow functions can access the same context as regular
+     * functions using `this`.
      *
      * @sample highcharts/members/highcharts-numberformat
      *      Arabic digits in Highcharts
@@ -439,6 +442,10 @@ const ChartDefaults = {
      * requires two fingers. To allow panning with one finger, set
      * `followTouchMove` to `false`.
      *
+     * **Note:** If both zooming and panning are enabled without keys, zooming
+     * will take precedence by default. To prioritize panning, either set
+     * [chart.zooming.key](#chart.zooming.key) or panKey.
+     *
      * @sample  {highcharts} highcharts/chart/pankey/ Zooming and panning
      * @sample  {highstock} stock/chart/panning/ Zooming and xy panning
      */
@@ -1048,6 +1055,10 @@ const ChartDefaults = {
          * avoid zooming while moving points. Should be set different than
          * [chart.panKey](#chart.panKey).
          *
+         * **Note:** If both zooming and panning are enabled without keys,
+         * zooming will take precedence by default. To prioritize panning,
+         * either set zooming key or [chart.panKey](#chart.panKey).
+         *
          * @type       {string}
          * @default    {highcharts} undefined
          * @validvalue ["alt", "ctrl", "meta", "shift"]

package/es-modules/Core/Chart/ChartNavigationComposition.js

@@ -26,7 +26,6 @@ var ChartNavigationComposition;
      *  Functions
      *
      * */
-    /* eslint-disable valid-jsdoc */
     /** @internal */
     function compose(chart) {
         if (!chart.navigation) {

package/es-modules/Core/Chart/ChartOptions.d.ts

@@ -598,6 +598,10 @@ export interface ChartOptions {
      * requires two fingers. To allow panning with one finger, set
      * `followTouchMove` to `false`.
      *
+     * **Note:** If both zooming and panning are enabled without keys, zooming
+     * will take precedence by default. To prioritize panning, either set
+     * [chart.zooming.key](#chart.zooming.key) or panKey.
+     *
      * @sample  {highcharts} highcharts/chart/pankey/
      *          Zooming and panning
      * @sample  {highstock} stock/chart/panning/
@@ -1160,6 +1164,10 @@ export interface ChartZoomingOptions {
      * avoid zooming while moving points. Should be set different than
      * [chart.panKey](#chart.panKey).
      *
+     * **Note:** If both zooming and panning are enabled without keys, zooming
+     * will take precedence by default. To prioritize panning, either set
+     * zooming key or [chart.panKey](#chart.panKey).
+     *
      * @default    {highcharts} undefined
      * @validvalue ["alt", "ctrl", "meta", "shift"]
      * @requires   modules/draggable-points

package/es-modules/Core/Chart/GanttChart.js

@@ -13,8 +13,7 @@
 import Chart from './Chart.js';
 import D from '../Defaults.js';
 const { defaultOptions } = D;
-import U from '../Utilities.js';
-const { isArray, merge, splat } = U;
+import { isArray, merge, splat } from '../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Core/Chart/MapChart.js

@@ -13,9 +13,8 @@ import Chart from './Chart.js';
 import D from '../Defaults.js';
 const { getOptions } = D;
 import SVGRenderer from '../Renderer/SVG/SVGRenderer.js';
-import U from '../Utilities.js';
-const { isNumber, merge, pick } = U;
 import '../../Maps/MapSymbols.js';
+import { isNumber, merge, pick } from '../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -165,6 +164,7 @@ class MapChart extends Chart {
      *  Functions
      *
      * */
+    /* eslint-disable jsdoc/check-param-names */
     /**
      * The factory function for creating new map charts. Creates a new {@link
      * Highcharts.MapChart|MapChart} object with different default options than
@@ -195,6 +195,7 @@ class MapChart extends Chart {
         return new MapChart(a, b, c);
     }
     MapChart.mapChart = mapChart;
+    /* eslint-enable jsdoc/check-param-names */
     /**
      * Utility for reading SVG paths directly.
      *

package/es-modules/Core/Chart/StockChart.js

@@ -19,8 +19,7 @@ import RangeSelectorDefaults from '../../Stock/RangeSelector/RangeSelectorDefaul
 import ScrollbarDefaults from '../../Stock/Scrollbar/ScrollbarDefaults.js';
 import StockUtilities from '../../Stock/Utilities/StockUtilities.js';
 const { setFixedRange } = StockUtilities;
-import U from '../Utilities.js';
-const { addEvent, clamp, crisp, defined, extend, find, isNumber, isString, merge, pick, splat } = U;
+import { addEvent, clamp, crisp, defined, extend, find, isNumber, isString, merge, pick, splat } from '../../Shared/Utilities.js';
 /* *
  *
  *  Functions
@@ -339,7 +338,7 @@ addEvent(Chart, 'update', function (e) {
             text = format(formatOption, { value }, chart);
         }
         else if (options.formatter && isNumber(value)) {
-            text = options.formatter.call(axis, value);
+            text = options.formatter.call(axis, value, axis);
         }
         crossLabel.attr({
             text,

package/es-modules/Core/Color/Color.js

@@ -11,8 +11,7 @@
 'use strict';
 import H from '../Globals.js';
 const { win } = H;
-import U from '../Utilities.js';
-const { isNumber, isString, merge, pInt, defined } = U;
+import { defined, isNumber, isString, merge, pInt } from '../../Shared/Utilities.js';
 /* *
  *
  *  Helpers
@@ -25,7 +24,6 @@ const isStringColor = (color) => isString(color) && !!color && color !== 'none';
  *  Class
  *
  * */
-/* eslint-disable valid-jsdoc */
 /**
  * Handle color operations. Some object methods are chainable.
  *