highcharts 11.3.0 → 11.4.0

package/es-modules/Extensions/Annotations/AnnotationDefaults.js

@@ -12,7 +12,7 @@ const { defined } = U;
  * */
 /**
  * A basic type of an annotation. It allows to add custom labels
- * or shapes. The items  can be tied to points, axis coordinates
+ * or shapes. The items can be tied to points, axis coordinates
  * or chart pixel coordinates.
  *
  * @sample highcharts/annotations/basic/
@@ -140,7 +140,7 @@ const AnnotationDefaults = {
          */
         borderColor: "#000000" /* Palette.neutralColor100 */,
         /**
-         * The border radius in pixels for the annotaiton's label.
+         * The border radius in pixels for the annotation's label.
          *
          * @sample highcharts/annotations/label-presentation/
          *         Set labels graphic options
@@ -479,7 +479,7 @@ const AnnotationDefaults = {
          */
         /**
          * The type of the shape.
-         * Avaliable options are circle, rect and ellipse.
+         * Available options are circle, rect and ellipse.
          *
          * @sample highcharts/annotations/shape/
          *         Basic shape annotation
@@ -590,7 +590,7 @@ const AnnotationDefaults = {
      */
     /**
      * Event callback when annotation is updated (e.g. drag and
-     * droppped or resized by control points).
+     * dropped or resized by control points).
      *
      * @type      {Highcharts.EventCallbackFunction<Highcharts.Annotation>}
      * @since     7.1.0

package/es-modules/Extensions/Annotations/ControlPoint.js

@@ -44,7 +44,7 @@ class ControlPoint extends EventEmitter {
     constructor(chart, target, options, index) {
         super();
         /**
-         * List of events for `anntation.options.events` that should not be
+         * List of events for `annotation.options.events` that should not be
          * added to `annotation.graphic` but to the `annotation`.
          * @private
          * @name Highcharts.AnnotationControlPoint#nonDOMEvents
@@ -137,7 +137,7 @@ export default ControlPoint;
  *
  * */
 /**
- * Callback to modify annotation's possitioner controls.
+ * Callback to modify annotation's positioner controls.
  *
  * @callback Highcharts.AnnotationControlPointPositionerFunction
  * @param {Highcharts.AnnotationControlPoint} this

package/es-modules/Extensions/Annotations/ControlTarget.js

@@ -178,7 +178,7 @@ var ControlTarget;
         this.controlPoints.forEach((controlPoint) => controlPoint.redraw(animation));
     }
     /**
-     * Render controll points.
+     * Render control points.
      * @private
      */
     function renderControlPoints() {

package/es-modules/Extensions/Annotations/Controllables/Controllable.js

@@ -43,7 +43,9 @@ class Controllable {
      * Redirect attr usage on the controllable graphic element.
      * @private
      */
-    attr(..._args) {
+    attr(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ..._args) {
         this.graphic.attr.apply(this.graphic, arguments);
     }
     /**
@@ -106,7 +108,9 @@ class Controllable {
      * Render a controllable.
      * @private
      */
-    render(_parentGroup) {
+    render(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _parentGroup) {
         this.renderControlPoints();
     }
     /**
@@ -210,7 +214,7 @@ export default Controllable;
  *
  * */
 /**
- * An object which denots a controllable's anchor positions - relative and
+ * An object which denotes a controllable's anchor positions - relative and
  * absolute.
  *
  * @private

package/es-modules/Extensions/Annotations/Controllables/ControllableEllipse.js

@@ -101,8 +101,8 @@ class ControllableEllipse extends Controllable {
             (point2.x - point1.x) * (point2.x - point1.x));
     }
     /**
-     * The fuction calculates the svg attributes of the ellipse, and returns all
-     * parameters neccessary to draw the ellipse.
+     * The function calculates the svg attributes of the ellipse, and returns
+     * all parameters necessary to draw the ellipse.
      * @private
      * @param position
      *        Absolute position of the first point in points array
@@ -149,7 +149,7 @@ class ControllableEllipse extends Controllable {
      * Redraw the element
      * @private
      * @param animation
-     *        Display an annimation
+     *        Display an animation
      */
     redraw(animation) {
         if (this.graphic) {

package/es-modules/Extensions/Annotations/Controllables/ControllableLabel.js

@@ -7,11 +7,9 @@
 import Controllable from './Controllable.js';
 import F from '../../../Core/Templating.js';
 const { format } = F;
-import H from '../../../Core/Globals.js';
-const { composed } = H;
 import MockPoint from '../MockPoint.js';
 import U from '../../../Core/Utilities.js';
-const { extend, isNumber, pick, pushUnique } = U;
+const { extend, isNumber, pick } = U;
 /* *
  *
  *  Functions
@@ -119,10 +117,8 @@ class ControllableLabel extends Controllable {
         };
     }
     static compose(SVGRendererClass) {
-        if (pushUnique(composed, this.compose)) {
-            const svgRendererProto = SVGRendererClass.prototype;
-            svgRendererProto.symbols.connector = symbolConnector;
-        }
+        const symbols = SVGRendererClass.prototype.symbols;
+        symbols.connector = symbolConnector;
     }
     /**
      * Returns new alignment options for a label if the label is outside the
@@ -289,7 +285,9 @@ class ControllableLabel extends Controllable {
      * For a controllable label, we need to subtract translation from
      * options.
      */
-    anchor(_point) {
+    anchor(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _point) {
         const anchor = super.anchor.apply(this, arguments), x = this.options.x || 0, y = this.options.y || 0;
         anchor.absolutePosition.x -= x;
         anchor.absolutePosition.y -= y;
@@ -310,7 +308,8 @@ class ControllableLabel extends Controllable {
                 itemPosition = tooltip.getPosition.call({
                     chart,
                     distance: pick(itemOptions.distance, 16),
-                    getPlayingField: tooltip.getPlayingField
+                    getPlayingField: tooltip.getPlayingField,
+                    pointer: tooltip.pointer
                 }, width, height, {
                     plotX: anchorRelativePosition.x,
                     plotY: anchorRelativePosition.y,

package/es-modules/Extensions/Annotations/Controllables/ControllablePath.js

@@ -8,9 +8,8 @@ import Controllable from './Controllable.js';
 import ControllableDefaults from './ControllableDefaults.js';
 const { defaultMarkers } = ControllableDefaults;
 import H from '../../../Core/Globals.js';
-const { composed } = H;
 import U from '../../../Core/Utilities.js';
-const { addEvent, defined, extend, merge, pushUnique, uniqueKey } = U;
+const { addEvent, defined, extend, merge, uniqueKey } = U;
 /* *
  *
  *  Constants
@@ -106,8 +105,8 @@ class ControllablePath extends Controllable {
      *
      * */
     static compose(ChartClass, SVGRendererClass) {
-        if (pushUnique(composed, this.compose)) {
-            const svgRendererProto = SVGRendererClass.prototype;
+        const svgRendererProto = SVGRendererClass.prototype;
+        if (!svgRendererProto.addMarker) {
             addEvent(ChartClass, 'afterGetContainer', onChartAfterGetContainer);
             svgRendererProto.addMarker = svgRendererAddMarker;
         }

package/es-modules/Extensions/Annotations/EventEmitter.js

@@ -46,7 +46,7 @@ class EventEmitter {
         objectEach(emitter.options.events, (event, type) => {
             const eventHandler = function (e) {
                 if (type !== 'click' || !emitter.cancelClick) {
-                    event.call(emitter, emitter.chart.pointer.normalize(e), emitter.target);
+                    event.call(emitter, emitter.chart.pointer?.normalize(e), emitter.target);
                 }
             };
             if ((emitter.nonDOMEvents || []).indexOf(type) === -1) {
@@ -181,20 +181,20 @@ class EventEmitter {
         // Using experimental property on event object to check if event was
         // created by touch on screen on hybrid device (#18122)
         firesTouchEvents = (e?.sourceCapabilities?.firesTouchEvents) || false;
-        e = pointer.normalize(e);
+        e = pointer?.normalize(e) || e;
         let prevChartX = e.chartX, prevChartY = e.chartY;
         emitter.cancelClick = false;
         emitter.chart.hasDraggedAnnotation = true;
         emitter.removeDrag = addEvent(doc, isTouchDevice || firesTouchEvents ? 'touchmove' : 'mousemove', function (e) {
             emitter.hasDragged = true;
-            e = pointer.normalize(e);
+            e = pointer?.normalize(e) || e;
             e.prevChartX = prevChartX;
             e.prevChartY = prevChartY;
             fireEvent(emitter, 'drag', e);
             prevChartX = e.chartX;
             prevChartY = e.chartY;
         }, isTouchDevice || firesTouchEvents ? { passive: false } : void 0);
-        emitter.removeMouseUp = addEvent(doc, isTouchDevice || firesTouchEvents ? 'touchend' : 'mouseup', function (e) {
+        emitter.removeMouseUp = addEvent(doc, isTouchDevice || firesTouchEvents ? 'touchend' : 'mouseup', function () {
             // Sometimes the target is the annotation and sometimes its the
             // controllable
             const annotation = pick(emitter.target && emitter.target.annotation, emitter.target);
@@ -208,13 +208,13 @@ class EventEmitter {
             // ControlPoints vs Annotation:
             fireEvent(pick(annotation, // #15952
             emitter), 'afterUpdate');
-            emitter.onMouseUp(e);
+            emitter.onMouseUp();
         }, isTouchDevice || firesTouchEvents ? { passive: false } : void 0);
     }
     /**
      * Mouse up handler.
      */
-    onMouseUp(_e) {
+    onMouseUp() {
         const chart = this.chart, annotation = this.target || this, annotationsOptions = chart.options.annotations, index = chart.annotations.indexOf(annotation);
         this.removeDocEvents();
         annotationsOptions[index] = annotation.options;

package/es-modules/Extensions/Annotations/NavigationBindings.js

@@ -17,7 +17,7 @@ import H from '../../Core/Globals.js';
 const { composed, doc, win } = H;
 import NavigationBindingDefaults from './NavigationBindingsDefaults.js';
 import NBU from './NavigationBindingsUtilities.js';
-const { getFieldType } = NBU;
+const { getAssignedAxis, getFieldType } = NBU;
 import U from '../../Core/Utilities.js';
 const { addEvent, attr, defined, fireEvent, isArray, isFunction, isNumber, isObject, merge, objectEach, pick, pushUnique } = U;
 /* *
@@ -93,7 +93,7 @@ function onChartRender() {
             this.navigationBindings.container[0]) {
             const container = this.navigationBindings.container[0];
             objectEach(navigationBindings.boundClassNames, (value, key) => {
-                // Get the HTML element coresponding to the className taken
+                // Get the HTML element corresponding to the className taken
                 // from StockToolsBindings.
                 const buttonNode = container.querySelectorAll('.' + key);
                 if (buttonNode) {
@@ -224,7 +224,7 @@ class NavigationBindings {
      *
      * */
     static compose(AnnotationClass, ChartClass) {
-        if (pushUnique(composed, this.compose)) {
+        if (pushUnique(composed, 'NavigationBindings')) {
             addEvent(AnnotationClass, 'remove', onAnnotationRemove);
             // Basic shapes:
             selectableAnnotation(AnnotationClass);
@@ -261,8 +261,15 @@ class NavigationBindings {
      *  Functions
      *
      * */
+    getCoords(e) {
+        const coords = this.chart.pointer?.getCoordinates(e);
+        return [
+            coords && getAssignedAxis(coords.xAxis),
+            coords && getAssignedAxis(coords.yAxis)
+        ];
+    }
     /**
-     * Initi all events conencted to NavigationBindings.
+     * Init all events connected to NavigationBindings.
      *
      * @private
      * @function Highcharts.NavigationBindings#initEvents
@@ -317,7 +324,7 @@ class NavigationBindings {
         });
     }
     /**
-     * Hook for click on a button, method selcts/unselects buttons,
+     * Hook for click on a button, method selects/unselects buttons,
      * then calls `bindings.init` callback.
      *
      * @private
@@ -497,19 +504,23 @@ class NavigationBindings {
             if (value !== 'undefined') {
                 let parent = config;
                 path.forEach((name, index) => {
-                    const nextName = pick(path[index + 1], '');
-                    if (pathLength === index) {
-                        // Last index, put value:
-                        parent[name] = value;
-                    }
-                    else if (!parent[name]) {
-                        // Create middle property:
-                        parent[name] = nextName.match(/\d/g) ? [] : {};
-                        parent = parent[name];
-                    }
-                    else {
-                        // Jump into next property
-                        parent = parent[name];
+                    if (name !== '__proto__' && name !== 'constructor') {
+                        const nextName = pick(path[index + 1], '');
+                        if (pathLength === index) {
+                            // Last index, put value:
+                            parent[name] = value;
+                        }
+                        else if (!parent[name]) {
+                            // Create middle property:
+                            parent[name] = nextName.match(/\d/g) ?
+                                [] :
+                                {};
+                            parent = parent[name];
+                        }
+                        else {
+                            // Jump into next property
+                            parent = parent[name];
+                        }
                     }
                 });
             }

package/es-modules/Extensions/Annotations/NavigationBindingsDefaults.js

@@ -122,7 +122,7 @@ const navigation = {
             className: 'highcharts-circle-annotation',
             /** @ignore-option */
             start: function (e) {
-                const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
+                const coords = this.chart.pointer?.getCoordinates(e), coordsX = coords && getAssignedAxis(coords.xAxis), coordsY = coords && getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
                 // Exit if clicked out of axes area
                 if (!coordsX || !coordsY) {
                     return;
@@ -176,7 +176,7 @@ const navigation = {
         ellipseAnnotation: {
             className: 'highcharts-ellipse-annotation',
             start: function (e) {
-                const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
+                const coords = this.chart.pointer?.getCoordinates(e), coordsX = coords && getAssignedAxis(coords.xAxis), coordsY = coords && getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
                 if (!coordsX || !coordsY) {
                     return;
                 }
@@ -226,7 +226,7 @@ const navigation = {
             className: 'highcharts-rectangle-annotation',
             /** @ignore-option */
             start: function (e) {
-                const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis);
+                const coords = this.chart.pointer?.getCoordinates(e), coordsX = coords && getAssignedAxis(coords.xAxis), coordsY = coords && getAssignedAxis(coords.yAxis);
                 // Exit if clicked out of axes area
                 if (!coordsX || !coordsY) {
                     return;
@@ -255,7 +255,7 @@ const navigation = {
             steps: [
                 function (e, annotation) {
                     const shapes = annotation.options.shapes, points = ((shapes && shapes[0] && shapes[0].points) ||
-                        []), coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis);
+                        []), coords = this.chart.pointer?.getCoordinates(e), coordsX = coords && getAssignedAxis(coords.xAxis), coordsY = coords && getAssignedAxis(coords.yAxis);
                     if (coordsX && coordsY) {
                         const x = coordsX.value, y = coordsY.value;
                         // Top right point
@@ -285,7 +285,7 @@ const navigation = {
             className: 'highcharts-label-annotation',
             /** @ignore-option */
             start: function (e) {
-                const coords = this.chart.pointer.getCoordinates(e), coordsX = getAssignedAxis(coords.xAxis), coordsY = getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
+                const coords = this.chart.pointer?.getCoordinates(e), coordsX = coords && getAssignedAxis(coords.xAxis), coordsY = coords && getAssignedAxis(coords.yAxis), navigation = this.chart.options.navigation;
                 // Exit if clicked out of axes area
                 if (!coordsX || !coordsY) {
                     return;
@@ -319,7 +319,7 @@ const navigation = {
      * from a different server.
      *
      * @type      {string}
-     * @default   https://code.highcharts.com/11.3.0/gfx/stock-icons/
+     * @default   https://code.highcharts.com/@product.version@/gfx/stock-icons/
      * @since     7.1.3
      * @apioption navigation.iconsURL
      */

package/es-modules/Extensions/Annotations/Popup/Popup.js

@@ -113,7 +113,7 @@ class Popup extends BaseForm {
      * @private
      *
      * @param {string} option
-     *        Chain of fields i.e params.styles.fontSize separeted by the dot.
+     *        Chain of fields i.e params.styles.fontSize separated by the dot.
      *
      * @param {string} indicatorType
      *        Type of the indicator i.e. sma, ema...

package/es-modules/Extensions/Annotations/Popup/PopupAnnotations.js

@@ -73,22 +73,26 @@ function addToolbar(chart, options, callback) {
         popupDiv.style.top = chart.plotTop + 10 + 'px';
     }
     // create label
-    createElement('span', void 0, void 0, popupDiv).appendChild(doc.createTextNode(pick(
+    let label = createElement('p', {
+        className: 'highcharts-annotation-label'
+    }, void 0, popupDiv);
+    label.setAttribute('aria-label', 'Annotation type');
+    label.appendChild(doc.createTextNode(pick(
     // Advanced annotations:
     lang[options.langKey] || options.langKey, 
     // Basic shapes:
     options.shapes && options.shapes[0].type, '')));
     // add buttons
-    let button = this.addButton(popupDiv, lang.removeButton || 'Remove', 'remove', popupDiv, callback);
-    button.className += ' highcharts-annotation-remove-button';
-    button.style['background-image'] = 'url(' +
-        this.iconsURL + 'destroy.svg)';
-    button = this.addButton(popupDiv, lang.editButton || 'Edit', 'edit', popupDiv, () => {
+    let button = this.addButton(popupDiv, lang.editButton || 'Edit', 'edit', popupDiv, () => {
         showForm.call(this, 'annotation-edit', chart, options, callback);
     });
     button.className += ' highcharts-annotation-edit-button';
     button.style['background-image'] = 'url(' +
         this.iconsURL + 'edit.svg)';
+    button = this.addButton(popupDiv, lang.removeButton || 'Remove', 'remove', popupDiv, callback);
+    button.className += ' highcharts-annotation-remove-button';
+    button.style['background-image'] = 'url(' +
+        this.iconsURL + 'destroy.svg)';
 }
 /**
  * Create annotation's form fields.

package/es-modules/Extensions/Annotations/Popup/PopupComposition.js

@@ -24,7 +24,7 @@ const { addEvent, pushUnique, wrap } = U;
  * @private
  */
 function compose(NagivationBindingsClass, PointerClass) {
-    if (pushUnique(composed, compose)) {
+    if (pushUnique(composed, 'Popup')) {
         addEvent(NagivationBindingsClass, 'closePopup', onNavigationBindingsClosePopup);
         addEvent(NagivationBindingsClass, 'showPopup', onNavigationBindingsShowPopup);
         wrap(PointerClass.prototype, 'onContainerMouseDown', wrapPointerOnContainerMouserDown);
@@ -47,7 +47,7 @@ function onNavigationBindingsShowPopup(config) {
         this.popup = new Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
             (this.chart.options.stockTools &&
                 this.chart.options.stockTools.gui.iconsURL) ||
-            'https://code.highcharts.com/11.3.0/gfx/stock-icons/'), this.chart);
+            'https://code.highcharts.com/@product.version@/gfx/stock-icons/'), this.chart);
     }
     this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
 }

package/es-modules/Extensions/Annotations/Popup/PopupIndicators.js

@@ -13,8 +13,6 @@
 import AST from '../../../Core/Renderer/HTML/AST.js';
 import H from '../../../Core/Globals.js';
 const { doc } = H;
-import NU from '../NavigationBindingsUtilities.js';
-const { annotationsFieldsTypes } = NU;
 import SeriesRegistry from '../../../Core/Series/SeriesRegistry.js';
 const { seriesTypes } = SeriesRegistry;
 import U from '../../../Core/Utilities.js';
@@ -165,6 +163,22 @@ function addFormFields(chart, series, seriesType, rhsColWrapper) {
  *        For the first iteration, it's an empty string.
  */
 function addIndicatorList(chart, parentDiv, listType, filter) {
+    function selectIndicator(series, indicatorType) {
+        const button = rhsColWrapper.parentNode
+            .children[1];
+        addFormFields.call(popup, chart, series, indicatorType, rhsColWrapper);
+        if (button) {
+            button.style.display = 'block';
+        }
+        // add hidden input with series.id
+        if (isEdit && series.options) {
+            createElement('input', {
+                type: 'hidden',
+                name: 'highcharts-id-' + indicatorType,
+                value: series.options.id
+            }, void 0, rhsColWrapper).setAttribute('highcharts-data-series-id', series.options.id);
+        }
+    }
     const popup = this, lang = popup.lang, lhsCol = parentDiv.querySelectorAll('.highcharts-popup-lhs-col')[0], rhsCol = parentDiv.querySelectorAll('.highcharts-popup-rhs-col')[0], isEdit = listType === 'edit', series = (isEdit ?
         chart.series : // EDIT mode
         chart.options.plotOptions || {} // ADD mode
@@ -181,7 +195,7 @@ function addIndicatorList(chart, parentDiv, listType, filter) {
     else if (isArray(series)) {
         filteredSeriesArray = filterSeriesArray.call(this, series);
     }
-    // Sort indicators alphabeticaly.
+    // Sort indicators alphabetically.
     stableSort(filteredSeriesArray, (a, b) => {
         const seriesAName = a.indicatorFullName.toLowerCase(), seriesBName = b.indicatorFullName.toLowerCase();
         return (seriesAName < seriesBName) ?
@@ -202,29 +216,20 @@ function addIndicatorList(chart, parentDiv, listType, filter) {
         item = createElement('li', {
             className: 'highcharts-indicator-list'
         }, void 0, indicatorList);
-        item.appendChild(doc.createTextNode(indicatorFullName));
+        let btn = createElement('button', {
+            className: 'highcharts-indicator-list-item',
+            textContent: indicatorFullName
+        }, void 0, item);
         ['click', 'touchstart'].forEach((eventName) => {
-            addEvent(item, eventName, function () {
-                const button = rhsColWrapper.parentNode
-                    .children[1];
-                addFormFields.call(popup, chart, series, indicatorType, rhsColWrapper);
-                if (button) {
-                    button.style.display = 'block';
-                }
-                // add hidden input with series.id
-                if (isEdit && series.options) {
-                    createElement('input', {
-                        type: 'hidden',
-                        name: 'highcharts-id-' + indicatorType,
-                        value: series.options.id
-                    }, void 0, rhsColWrapper).setAttribute('highcharts-data-series-id', series.options.id);
-                }
+            addEvent(btn, eventName, function () {
+                selectIndicator(series, indicatorType);
             });
         });
     });
     // select first item from the list
-    if (indicatorList.childNodes.length > 0) {
-        indicatorList.childNodes[0].click();
+    if (filteredSeriesArray.length > 0) {
+        let { series, indicatorType } = filteredSeriesArray[0];
+        selectIndicator(series, indicatorType);
     }
     else if (!isEdit) {
         AST.setElementHTML(rhsColWrapper.parentNode.children[0], lang.noFilterMatch || '');
@@ -233,7 +238,7 @@ function addIndicatorList(chart, parentDiv, listType, filter) {
     }
 }
 /**
- * Recurent function which lists all fields, from params object and
+ * Recurrent function which lists all fields, from params object and
  * create them as inputs. Each input has unique `data-name` attribute,
  * which keeps chain of fields i.e params.styles.fontSize.
  * @private
@@ -254,11 +259,6 @@ function addParamInputs(chart, parentNode, fields, type, parentDiv) {
     }
     const addInput = this.addInput;
     objectEach(fields, (value, fieldName) => {
-        const predefinedType = annotationsFieldsTypes[fieldName];
-        let fieldType = type;
-        if (predefinedType) {
-            fieldType = predefinedType;
-        }
         // create name like params.styles.fontSize
         const parentFullName = parentNode + '.' + fieldName;
         if (defined(value) && // skip if field is unnecessary, #15362
@@ -322,7 +322,7 @@ function addSearchBox(chart, parentDiv) {
     input.classList.add('highcharts-input-search-indicators');
     button.classList.add('clear-filter-button');
     // Add input change events.
-    addEvent(input, 'input', function (e) {
+    addEvent(input, 'input', function () {
         handleInputChange(this.value);
         // Show clear filter button.
         if (this.value.length) {
@@ -338,7 +338,7 @@ function addSearchBox(chart, parentDiv) {
             // Clear the input.
             input.value = '';
             handleInputChange('');
-            // Hide clear filter button- no longer nececary.
+            // Hide clear filter button- no longer necessary.
             button.style.display = 'none';
         });
     });
@@ -450,7 +450,7 @@ function addSelectionOptions(chart, optionName, selectBox, indicatorType, parame
  *         Returns array of filtered series based on filter string.
  */
 function filterSeries(series, filter) {
-    const popup = this, indicators = popup.indicators, lang = popup.chart && popup.chart.options.lang, indicatorAliases = lang &&
+    const popup = this, lang = popup.chart && popup.chart.options.lang, indicatorAliases = lang &&
         lang.navigation &&
         lang.navigation.popup &&
         lang.navigation.popup.indicatorAliases, filteredSeriesArray = [];
@@ -582,7 +582,7 @@ function getNameType(series, indicatorType) {
  *        Default value in dropdown.
  */
 function listAllSeries(indicatorType, optionName, chart, parentDiv, currentSeries, selectedOption) {
-    const popup = this, indicators = popup.indicators;
+    const popup = this;
     // Won't work without the chart.
     if (!chart) {
         return;

package/es-modules/Extensions/Annotations/Popup/PopupTabs.js

@@ -48,7 +48,7 @@ function addMenuItem(tabName, disableTab) {
         className += ' highcharts-tab-disabled';
     }
     // tab 1
-    const menuItem = createElement('span', {
+    const menuItem = createElement('button', {
         className
     }, void 0, popupDiv);
     menuItem.appendChild(doc.createTextNode(lang[tabName + 'Button'] || tabName));

package/es-modules/Extensions/Annotations/Types/BasicAnnotation.js

@@ -33,7 +33,7 @@ class BasicAnnotation extends Annotation {
             delete options.labelOptions;
             const type = options.shapes[0].type;
             // The rectangle is rendered as a path, whereas other basic shapes
-            // are rendered as their respecitve SVG shapes.
+            // are rendered as their respective SVG shapes.
             if (type && type !== 'path') {
                 this.basicType = type;
             }
@@ -119,16 +119,19 @@ BasicAnnotation.basicControlPoints = {
             },
             events: {
                 drag: function (e, target) {
-                    const annotation = target.annotation, coords = this.chart.pointer.getCoordinates(e), points = target.options.points, shapes = annotation.userOptions.shapes, xAxisIndex = annotation.clipXAxis?.index || 0, yAxisIndex = annotation.clipYAxis?.index || 0, x = coords.xAxis[xAxisIndex].value, y = coords.yAxis[yAxisIndex].value;
-                    // Top right point
-                    points[1].x = x;
-                    // Bottom right point (cursor position)
-                    points[2].x = x;
-                    points[2].y = y;
-                    // Bottom left
-                    points[3].y = y;
-                    if (shapes && shapes[0]) {
-                        shapes[0].points = target.options.points;
+                    const annotation = target.annotation, coords = this.chart.pointer?.getCoordinates(e), points = target.options.points, shapes = annotation.userOptions.shapes, xAxisIndex = annotation.clipXAxis?.index || 0, yAxisIndex = annotation.clipYAxis?.index || 0;
+                    if (coords) {
+                        const x = coords.xAxis[xAxisIndex].value, y = coords.yAxis[yAxisIndex].value;
+                        // Top right point
+                        points[1].x = x;
+                        // Bottom right point (cursor position)
+                        points[2].x = x;
+                        points[2].y = y;
+                        // Bottom left
+                        points[3].y = y;
+                        if (shapes && shapes[0]) {
+                            shapes[0].points = target.options.points;
+                        }
                     }
                     annotation.redraw(false);
                 }

package/es-modules/Extensions/Annotations/Types/FibonacciTimeZones.js

@@ -95,7 +95,7 @@ class FibonacciTimeZones extends CrookedLine {
                 edgePoint(1, 0, correctedFibb),
                 edgePoint(0, 1, correctedFibb)
             ];
-            // Calculate fibbonacci
+            // Calculate fibonacci
             nextFibb = fibb + nextFibb;
             fibb = nextFibb - fibb;
             // Save the second line for the control point

package/es-modules/Extensions/Annotations/Types/Measure.js

@@ -692,7 +692,7 @@ Measure.prototype.defaultOptions = merge(Annotation.prototype.defaultOptions,
              *
              * <td>`this.min`</td>
              *
-             * <td>The mininimum value of the points in the selected
+             * <td>The minimum value of the points in the selected
              * range.</td>
              *
              * </tr>