@highcharts/grid-pro 2.0.0

package/es-modules/Accessibility/ProxyElement.js

@@ -0,0 +1,223 @@
+/* *
+ *
+ *  (c) 2009-2025 Øystein Moseng
+ *
+ *  Proxy elements are used to shadow SVG elements in HTML for assistive
+ *  technology, such as screen readers or voice input software.
+ *
+ *  The ProxyElement class represents such an element, and deals with
+ *  overlay positioning and mirroring events for the target.
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'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';
+const { cloneMouseEvent, cloneTouchEvent, getFakeMouseEvent, removeElement } = HTMLUtilities;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a proxy element that overlays a target and relays events
+ * to its target.
+ *
+ * @private
+ * @class
+ */
+class ProxyElement {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(chart, target, proxyElementType = 'button', wrapperElementType, attributes) {
+        this.chart = chart;
+        this.target = target;
+        this.eventProvider = new EventProvider();
+        const innerEl = this.innerElement =
+            doc.createElement(proxyElementType), wrapperEl = this.element = wrapperElementType ?
+            doc.createElement(wrapperElementType) : innerEl;
+        if (!chart.styledMode) {
+            this.hideElementVisually(innerEl);
+        }
+        if (wrapperElementType) {
+            if (wrapperElementType === 'li' && !chart.styledMode) {
+                wrapperEl.style.listStyle = 'none';
+            }
+            wrapperEl.appendChild(innerEl);
+            this.element = wrapperEl;
+        }
+        this.updateTarget(target, attributes);
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * Fake a click event on the target.
+     */
+    click() {
+        const pos = this.getTargetPosition();
+        pos.x += pos.width / 2;
+        pos.y += pos.height / 2;
+        const fakeEventObject = getFakeMouseEvent('click', pos);
+        fireEventOnWrappedOrUnwrappedElement(this.target.click, fakeEventObject);
+    }
+    /**
+     * 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
+     * attribute to null to remove.
+     */
+    updateTarget(target, attributes) {
+        this.target = target;
+        this.updateCSSClassName();
+        const attrs = attributes || {};
+        Object.keys(attrs).forEach((a) => {
+            if (attrs[a] === null) {
+                delete attrs[a];
+            }
+        });
+        const targetAriaLabel = this.getTargetAttr(target.click, 'aria-label');
+        attr(this.innerElement, merge(targetAriaLabel ? {
+            'aria-label': targetAriaLabel
+        } : {}, attrs));
+        this.eventProvider.removeAddedEvents();
+        this.addProxyEventsToElement(this.innerElement, target.click);
+        this.refreshPosition();
+    }
+    /**
+     * Refresh the position of the proxy element to match the current target
+     */
+    refreshPosition() {
+        const bBox = this.getTargetPosition();
+        css(this.innerElement, {
+            width: (bBox.width || 1) + 'px',
+            height: (bBox.height || 1) + 'px',
+            left: (Math.round(bBox.x) || 0) + 'px',
+            top: (Math.round(bBox.y) || 0) + 'px'
+        });
+    }
+    /**
+     * Remove button from DOM, and clear events.
+     */
+    remove() {
+        this.eventProvider.removeAddedEvents();
+        removeElement(this.element);
+    }
+    // -------------------------- private ------------------------------------
+    /**
+     * Update the CSS class name to match target
+     */
+    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 targetClassName = this.getTargetAttr(this.target.click, 'class') || '';
+        const noTooltipOnTarget = stringHasNoTooltip(targetClassName);
+        this.innerElement.className = noTooltipOnGroup || noTooltipOnTarget ?
+            'highcharts-a11y-proxy-element highcharts-no-tooltip' :
+            'highcharts-a11y-proxy-element';
+    }
+    /**
+     * Mirror events for a proxy element to a target
+     */
+    addProxyEventsToElement(element, target) {
+        [
+            'click', 'touchstart', 'touchend', 'touchcancel', 'touchmove',
+            'mouseover', 'mouseenter', 'mouseleave', 'mouseout'
+        ].forEach((evtType) => {
+            const isTouchEvent = evtType.indexOf('touch') === 0;
+            this.eventProvider.addEvent(element, evtType, (e) => {
+                const clonedEvent = isTouchEvent ?
+                    cloneTouchEvent(e) :
+                    cloneMouseEvent(e);
+                if (target) {
+                    fireEventOnWrappedOrUnwrappedElement(target, clonedEvent);
+                }
+                e.stopPropagation();
+                // #9682, #15318: Touch scrolling didn't work when touching
+                // proxy
+                if (!isTouchEvent) {
+                    e.preventDefault();
+                }
+            }, { passive: false });
+        });
+    }
+    /**
+     * Set visually hidden style on a proxy element
+     */
+    hideElementVisually(el) {
+        css(el, {
+            borderWidth: 0,
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            outline: 'none',
+            opacity: 0.001,
+            filter: 'alpha(opacity=1)',
+            zIndex: 999,
+            overflow: 'hidden',
+            padding: 0,
+            margin: 0,
+            display: 'block',
+            position: 'absolute',
+            '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)'
+        });
+    }
+    /**
+     * Get the position relative to chart container for the target
+     */
+    getTargetPosition() {
+        const clickTarget = this.target.click;
+        // We accept both DOM elements and wrapped elements as click targets.
+        const clickTargetElement = clickTarget.element ?
+            clickTarget.element :
+            clickTarget;
+        const posElement = this.target.visual || clickTargetElement;
+        const chartDiv = this.chart.renderTo, pointer = this.chart.pointer;
+        if (chartDiv && posElement?.getBoundingClientRect && pointer) {
+            const scrollTop = win.scrollY ||
+                doc.documentElement.scrollTop, rectEl = posElement.getBoundingClientRect(), chartPos = pointer.getChartPosition();
+            return {
+                x: (rectEl.left - chartPos.left) / chartPos.scaleX,
+                // #21994, Add scroll position as "getBoundingClientRect"
+                // returns the position from the viewport, not the document top.
+                y: ((rectEl.top + scrollTop) - chartPos.top) / chartPos.scaleY,
+                width: rectEl.right / chartPos.scaleX -
+                    rectEl.left / chartPos.scaleX,
+                height: rectEl.bottom / chartPos.scaleY -
+                    rectEl.top / chartPos.scaleY
+            };
+        }
+        return { x: 0, y: 0, width: 1, height: 1 };
+    }
+    /**
+     * Get an attribute value of a target
+     */
+    getTargetAttr(target, key) {
+        if (target.element) {
+            return target.element.getAttribute(key);
+        }
+        return target.getAttribute(key);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ProxyElement;

package/es-modules/Accessibility/ProxyProvider.d.ts

@@ -0,0 +1,90 @@
+import type Accessibility from './Accessibility';
+import type HTMLAttributes from '../Core/Renderer/HTML/HTMLAttributes';
+import type { NullableHTMLAttributes } from './ProxyElement';
+import ProxyElement from './ProxyElement.js';
+/**
+ * Keeps track of all proxy elements and proxy groups.
+ *
+ * @private
+ * @class
+ */
+declare class ProxyProvider {
+    private chart;
+    private afterChartProxyPosContainer;
+    private beforeChartProxyPosContainer;
+    private domElementProvider;
+    private groupOrder;
+    private groups;
+    constructor(chart: Accessibility.ChartComposition);
+    /**
+     * Add a new proxy element to a group, proxying a target control.
+     */
+    addProxyElement(groupKey: string, target: ProxyElement.Target, proxyElementType?: keyof HTMLElementTagNameMap, attributes?: NullableHTMLAttributes): ProxyElement;
+    /**
+     * Create a group that will contain proxy elements. The group order is
+     * automatically updated according to the last group order keys.
+     *
+     * Returns the added group.
+     */
+    addGroup(groupKey: string, groupElementType?: keyof HTMLElementTagNameMap, attributes?: HTMLAttributes): HTMLElement;
+    /**
+     * Update HTML attributes of a group.
+     */
+    updateGroupAttrs(groupKey: string, attributes: HTMLAttributes): void;
+    /**
+     * Reorder the proxy groups.
+     *
+     * The group key "series" refers to the chart's data points / <svg> element.
+     * This is so that the keyboardNavigation.order option can be used to
+     * determine the proxy group order.
+     */
+    updateGroupOrder(groupKeys: string[]): void;
+    /**
+     * Remove all proxy elements in a group
+     */
+    clearGroup(groupKey: string): void;
+    /**
+     * Remove a group from the DOM and from the proxy provider's group list.
+     * All child elements are removed.
+     * If the group does not exist, nothing happens.
+     */
+    removeGroup(groupKey: string): void;
+    /**
+     * Update the position and order of all proxy groups and elements
+     */
+    update(): void;
+    /**
+     * Update all proxy element positions
+     */
+    updateProxyElementPositions(): void;
+    /**
+     * Update a group's proxy elements' positions.
+     * If the group does not exist, nothing happens.
+     */
+    updateGroupProxyElementPositions(groupKey: string): void;
+    /**
+     * Remove all added elements
+     */
+    destroy(): void;
+    /**
+     * Create and return a pos container element (the overall containers for
+     * the proxy groups).
+     */
+    private createProxyPosContainer;
+    /**
+     * Get an array of group keys that corresponds to the current group order
+     * in the DOM.
+     */
+    private getCurrentGroupOrderInDOM;
+    /**
+     * Check if the current DOM order matches the current group order, so that
+     * a reordering/update is unnecessary.
+     */
+    private isDOMOrderGroupOrder;
+    /**
+     * Update the DOM positions of the before/after proxy
+     * positioning containers for the groups.
+     */
+    private updatePosContainerPositions;
+}
+export default ProxyProvider;

package/es-modules/Accessibility/ProxyProvider.js

@@ -0,0 +1,315 @@
+/* *
+ *
+ *  (c) 2009-2025 Øystein Moseng
+ *
+ *  Proxy elements are used to shadow SVG elements in HTML for assistive
+ *  technology, such as screen readers or voice input software.
+ *
+ *  The ProxyProvider keeps track of all proxy elements of the a11y module,
+ *  and updating their order and positioning.
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'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';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Keeps track of all proxy elements and proxy groups.
+ *
+ * @private
+ * @class
+ */
+class ProxyProvider {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(chart) {
+        this.chart = chart;
+        this.domElementProvider = new DOMElementProvider();
+        this.groups = {};
+        this.groupOrder = [];
+        this.beforeChartProxyPosContainer = this.createProxyPosContainer('before');
+        this.afterChartProxyPosContainer = this.createProxyPosContainer('after');
+        this.update();
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable */
+    /**
+     * Add a new proxy element to a group, proxying a target control.
+     */
+    addProxyElement(groupKey, target, proxyElementType = 'button', attributes) {
+        const group = this.groups[groupKey];
+        if (!group) {
+            throw new Error('ProxyProvider.addProxyElement: Invalid group key ' + groupKey);
+        }
+        const wrapperElementType = group.type === 'ul' || group.type === 'ol' ?
+            'li' : void 0, proxy = new ProxyElement(this.chart, target, proxyElementType, wrapperElementType, attributes);
+        group.proxyContainerElement.appendChild(proxy.element);
+        group.proxyElements.push(proxy);
+        return proxy;
+    }
+    /**
+     * Create a group that will contain proxy elements. The group order is
+     * automatically updated according to the last group order keys.
+     *
+     * Returns the added group.
+     */
+    addGroup(groupKey, groupElementType = 'div', attributes) {
+        const existingGroup = this.groups[groupKey];
+        if (existingGroup) {
+            return existingGroup.groupElement;
+        }
+        const proxyContainer = this.domElementProvider
+            .createElement(groupElementType);
+        // If we want to add a role to the group, and still use e.g.
+        // a list group, we need a wrapper div around the proxyContainer.
+        // Used for setting region role on legend.
+        let groupElement;
+        if (attributes && attributes.role && groupElementType !== 'div') {
+            groupElement = this.domElementProvider.createElement('div');
+            groupElement.appendChild(proxyContainer);
+        }
+        else {
+            groupElement = proxyContainer;
+        }
+        groupElement.className = 'highcharts-a11y-proxy-group highcharts-a11y-proxy-group-' +
+            groupKey.replace(/\W/g, '-');
+        this.groups[groupKey] = {
+            proxyContainerElement: proxyContainer,
+            groupElement,
+            type: groupElementType,
+            proxyElements: []
+        };
+        attr(groupElement, attributes || {});
+        if (groupElementType === 'ul') {
+            proxyContainer.setAttribute('role', 'list'); // Needed for webkit
+        }
+        // Add the group to the end by default, and perhaps then we
+        // won't have to reorder the whole set of groups.
+        this.afterChartProxyPosContainer.appendChild(groupElement);
+        this.updateGroupOrder(this.groupOrder);
+        return groupElement;
+    }
+    /**
+     * Update HTML attributes of a group.
+     */
+    updateGroupAttrs(groupKey, attributes) {
+        const group = this.groups[groupKey];
+        if (!group) {
+            throw new Error('ProxyProvider.updateGroupAttrs: Invalid group key ' + groupKey);
+        }
+        attr(group.groupElement, attributes);
+    }
+    /**
+     * Reorder the proxy groups.
+     *
+     * The group key "series" refers to the chart's data points / <svg> element.
+     * This is so that the keyboardNavigation.order option can be used to
+     * determine the proxy group order.
+     */
+    updateGroupOrder(groupKeys) {
+        // Store so that we can update order when a new group is created
+        this.groupOrder = groupKeys.slice();
+        // Don't unnecessarily reorder, because keyboard focus is lost
+        if (this.isDOMOrderGroupOrder()) {
+            return;
+        }
+        const seriesIx = groupKeys.indexOf('series');
+        const beforeKeys = seriesIx > -1 ? groupKeys.slice(0, seriesIx) : groupKeys;
+        const afterKeys = seriesIx > -1 ? groupKeys.slice(seriesIx + 1) : [];
+        // Store focused element since it will be lost when reordering
+        const activeElement = doc.activeElement;
+        // Add groups to correct container
+        ['before', 'after'].forEach((pos) => {
+            const posContainer = this[pos === 'before' ?
+                'beforeChartProxyPosContainer' :
+                'afterChartProxyPosContainer'];
+            const keys = pos === 'before' ? beforeKeys : afterKeys;
+            removeChildNodes(posContainer);
+            keys.forEach((groupKey) => {
+                const group = this.groups[groupKey];
+                if (group) {
+                    posContainer.appendChild(group.groupElement);
+                }
+            });
+        });
+        // Attempt to restore focus after reordering, but note that this may
+        // cause screen readers re-announcing the button.
+        if ((this.beforeChartProxyPosContainer.contains(activeElement) ||
+            this.afterChartProxyPosContainer.contains(activeElement)) &&
+            activeElement && activeElement.focus) {
+            activeElement.focus();
+        }
+    }
+    /**
+     * Remove all proxy elements in a group
+     */
+    clearGroup(groupKey) {
+        const group = this.groups[groupKey];
+        if (!group) {
+            throw new Error('ProxyProvider.clearGroup: Invalid group key ' + groupKey);
+        }
+        removeChildNodes(group.proxyContainerElement);
+    }
+    /**
+     * Remove a group from the DOM and from the proxy provider's group list.
+     * All child elements are removed.
+     * If the group does not exist, nothing happens.
+     */
+    removeGroup(groupKey) {
+        const group = this.groups[groupKey];
+        if (group) {
+            // Remove detached HTML elements to prevent memory leak (#20329).
+            this.domElementProvider.removeElement(group.groupElement);
+            // Sometimes groupElement is a wrapper around the proxyContainer, so
+            // the real one proxyContainer needs to be removed also.
+            if (group.groupElement !== group.proxyContainerElement) {
+                this.domElementProvider.removeElement(group.proxyContainerElement);
+            }
+            delete this.groups[groupKey];
+        }
+    }
+    /**
+     * Update the position and order of all proxy groups and elements
+     */
+    update() {
+        this.updatePosContainerPositions();
+        this.updateGroupOrder(this.groupOrder);
+        this.updateProxyElementPositions();
+    }
+    /**
+     * Update all proxy element positions
+     */
+    updateProxyElementPositions() {
+        Object.keys(this.groups).forEach(this.updateGroupProxyElementPositions.bind(this));
+    }
+    /**
+     * Update a group's proxy elements' positions.
+     * If the group does not exist, nothing happens.
+     */
+    updateGroupProxyElementPositions(groupKey) {
+        const group = this.groups[groupKey];
+        if (group) {
+            group.proxyElements.forEach((el) => el.refreshPosition());
+        }
+    }
+    /**
+     * Remove all added elements
+     */
+    destroy() {
+        this.domElementProvider.destroyCreatedElements();
+    }
+    // -------------------------- private ------------------------------------
+    /**
+     * Create and return a pos container element (the overall containers for
+     * the proxy groups).
+     */
+    createProxyPosContainer(classNamePostfix) {
+        const el = this.domElementProvider.createElement('div');
+        el.setAttribute('aria-hidden', 'false');
+        el.className = 'highcharts-a11y-proxy-container' + (classNamePostfix ? '-' + classNamePostfix : '');
+        css(el, {
+            top: '0',
+            left: '0'
+        });
+        if (!this.chart.styledMode) {
+            el.style.whiteSpace = 'nowrap';
+            el.style.position = 'absolute';
+        }
+        return el;
+    }
+    /**
+     * Get an array of group keys that corresponds to the current group order
+     * in the DOM.
+     */
+    getCurrentGroupOrderInDOM() {
+        const getGroupKeyFromElement = (el) => {
+            const allGroups = Object.keys(this.groups);
+            let i = allGroups.length;
+            while (i--) {
+                const groupKey = allGroups[i];
+                const group = this.groups[groupKey];
+                if (group && el === group.groupElement) {
+                    return groupKey;
+                }
+            }
+        };
+        const getChildrenGroupOrder = (el) => {
+            const childrenOrder = [];
+            const children = el.children;
+            for (let i = 0; i < children.length; ++i) {
+                const groupKey = getGroupKeyFromElement(children[i]);
+                if (groupKey) {
+                    childrenOrder.push(groupKey);
+                }
+            }
+            return childrenOrder;
+        };
+        const before = getChildrenGroupOrder(this.beforeChartProxyPosContainer);
+        const after = getChildrenGroupOrder(this.afterChartProxyPosContainer);
+        before.push('series');
+        return before.concat(after);
+    }
+    /**
+     * Check if the current DOM order matches the current group order, so that
+     * a reordering/update is unnecessary.
+     */
+    isDOMOrderGroupOrder() {
+        const domOrder = this.getCurrentGroupOrderInDOM();
+        const groupOrderWithGroups = this.groupOrder.filter((x) => x === 'series' || !!this.groups[x]);
+        let i = domOrder.length;
+        if (i !== groupOrderWithGroups.length) {
+            return false;
+        }
+        while (i--) {
+            if (domOrder[i] !== groupOrderWithGroups[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Update the DOM positions of the before/after proxy
+     * positioning containers for the groups.
+     */
+    updatePosContainerPositions() {
+        const chart = this.chart;
+        // If exporting, don't add these containers to the DOM.
+        if (chart.renderer.forExport) {
+            return;
+        }
+        const rendererSVGEl = chart.renderer.box;
+        chart.container.insertBefore(this.afterChartProxyPosContainer, rendererSVGEl.nextSibling);
+        chart.container.insertBefore(this.beforeChartProxyPosContainer, rendererSVGEl);
+        unhideChartElementFromAT(this.chart, this.afterChartProxyPosContainer);
+        unhideChartElementFromAT(this.chart, this.beforeChartProxyPosContainer);
+    }
+}
+/* *
+ *
+ *  Export Default
+ *
+ * */
+export default ProxyProvider;

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

@@ -0,0 +1,26 @@
+import type Chart from '../../Core/Chart/Chart';
+import type { HTMLDOMElement } from '../../Core/Renderer/DOMElementType';
+/**
+ * Internal types.
+ * @private
+ */
+declare module '../../Core/Chart/ChartBase' {
+    interface ChartBase {
+        announcerContainer?: HTMLDOMElement;
+    }
+}
+declare class Announcer {
+    private chart;
+    private domElementProvider;
+    private announceRegion;
+    private clearAnnouncementRegionTimer?;
+    constructor(chart: Chart, type: Announcer.Type);
+    destroy(): void;
+    announce(message: string): void;
+    private addAnnounceRegion;
+    private createAnnouncerContainer;
+}
+declare namespace Announcer {
+    type Type = ('assertive' | 'polite');
+}
+export default Announcer;