@highcharts/grid-pro 2.0.0

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/FilterMenuButton.d.ts

@@ -0,0 +1,13 @@
+import type MenuPopup from '../MenuPopup';
+import type { LangOptions } from '../../../../Options';
+import FilterPopup from '../FilterPopup.js';
+import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
+declare class FilterToolbarButton extends ContextMenuButton {
+    contextMenu?: MenuPopup;
+    popup?: FilterPopup;
+    constructor(langOptions: LangOptions);
+    protected refreshState(): void;
+    protected addEventListeners(): void;
+    protected clickHandler(event: MouseEvent): void;
+}
+export default FilterToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/FilterMenuButton.js

@@ -0,0 +1,79 @@
+/* *
+ *
+ *  Grid Filter Context Menu Button class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import FilterPopup from '../FilterPopup.js';
+import StateHelpers from '../StateHelpers.js';
+import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
+import U from '../../../../../../Core/Utilities.js';
+const { addEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+class FilterToolbarButton extends ContextMenuButton {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(langOptions) {
+        super({
+            label: langOptions.filter,
+            icon: 'filter',
+            chevron: true
+        });
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    refreshState() {
+        const column = this.contextMenu?.button.toolbar?.column;
+        if (column) {
+            this.setActive(StateHelpers.isFiltered(column));
+        }
+    }
+    addEventListeners() {
+        super.addEventListeners();
+        const toolbar = this.contextMenu?.button.toolbar;
+        if (!toolbar) {
+            return;
+        }
+        this.eventListenerDestroyers.push(addEvent(toolbar.column, 'afterFilter', () => {
+            this.refreshState();
+        }));
+    }
+    clickHandler(event) {
+        super.clickHandler(event);
+        const filtering = this.contextMenu?.button.toolbar?.column.filtering;
+        if (!filtering) {
+            return;
+        }
+        if (!this.popup) {
+            this.popup = new FilterPopup(filtering, this, {
+                nextToAnchor: true
+            });
+        }
+        this.popup.toggle(this.wrapper);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default FilterToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/SortMenuButton.d.ts

@@ -0,0 +1,12 @@
+import type MenuPopup from '../MenuPopup';
+import type { LangOptions } from '../../../../Options';
+import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
+declare class SortMenuButton extends ContextMenuButton {
+    contextMenu?: MenuPopup;
+    private direction;
+    constructor(langOptions: LangOptions, direction: typeof SortMenuButton.prototype.direction);
+    protected refreshState(): void;
+    protected addEventListeners(): void;
+    protected clickHandler(event: MouseEvent): void;
+}
+export default SortMenuButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/SortMenuButton.js

@@ -0,0 +1,71 @@
+/* *
+ *
+ *  Grid Sort Context Menu Button class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
+import StateHelpers from '../StateHelpers.js';
+import U from '../../../../../../Core/Utilities.js';
+const { addEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+class SortMenuButton extends ContextMenuButton {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(langOptions, direction) {
+        super({ icon: direction === 'asc' ? 'sortAsc' : 'sortDesc' });
+        this.direction = direction;
+        this.options.label = langOptions[direction === 'asc' ? 'sortAscending' : 'sortDescending'];
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    refreshState() {
+        const column = this.contextMenu?.button?.toolbar?.column;
+        if (!column) {
+            return;
+        }
+        this.setActive(StateHelpers.isSorted(column, this.direction));
+    }
+    addEventListeners() {
+        super.addEventListeners();
+        const column = this.contextMenu?.button?.toolbar?.column;
+        if (!column) {
+            return;
+        }
+        // If this grid is currently sorted, update the state
+        this.eventListenerDestroyers.push(addEvent(column.viewport.grid, 'afterSort', () => this.refreshState()));
+    }
+    clickHandler(event) {
+        super.clickHandler(event);
+        const sorting = this.contextMenu?.button?.toolbar?.column.sorting;
+        if (!sorting) {
+            return;
+        }
+        void sorting.setOrder(this.isActive ? null : this.direction);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default SortMenuButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuPopup.d.ts

@@ -0,0 +1,12 @@
+import type MenuToolbarButton from './ToolbarButtons/MenuToolbarButton.js';
+import type Grid from '../../../Grid.js';
+import ContextMenu from '../../../UI/ContextMenu.js';
+/**
+ * The column filtering popup.
+ */
+declare class MenuPopup extends ContextMenu {
+    button: MenuToolbarButton;
+    constructor(grid: Grid, button: MenuToolbarButton);
+    protected renderContent(): void;
+}
+export default MenuPopup;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuPopup.js

@@ -0,0 +1,66 @@
+/* *
+ *
+ *  Grid Menu Popup class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import ContextMenu from '../../../UI/ContextMenu.js';
+import FilterMenuButton from './MenuButtons/FilterMenuButton.js';
+import SortMenuButton from './MenuButtons/SortMenuButton.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * The column filtering popup.
+ */
+class MenuPopup extends ContextMenu {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(grid, button) {
+        super(grid, button);
+        this.button = button;
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    renderContent() {
+        const lang = this.grid.options?.lang || {};
+        const columnOptions = this.button.toolbar?.column.options || {};
+        const filteringEnabled = (columnOptions.filtering?.enabled &&
+            !columnOptions.filtering.inline);
+        const sortingEnabled = columnOptions.sorting?.sortable;
+        this.addHeader(this.button.toolbar?.column.header?.value || '', lang.column);
+        if (sortingEnabled) {
+            new SortMenuButton(lang, 'desc').add(this);
+            new SortMenuButton(lang, 'asc').add(this);
+            if (filteringEnabled) {
+                this.addDivider();
+            }
+        }
+        if (filteringEnabled) {
+            new FilterMenuButton(lang || {}).add(this);
+        }
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default MenuPopup;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/StateHelpers.d.ts

@@ -0,0 +1,25 @@
+import type Column from '../../Column';
+declare namespace StateHelpers {
+    /**
+     * Checks if the column is filtered.
+     *
+     * @param column
+     * The column to check.
+     */
+    function isFiltered(column: Column): boolean;
+    /**
+     * Checks if the column is sorted.
+     *
+     * @param column
+     * The column to check.
+     *
+     * @param order
+     * Optional sorting order to check for.
+     *
+     * @returns
+     * True if the column is sorted. In case of `order` is provided, true
+     * only if the column is sorted in the provided order.
+     */
+    function isSorted(column: Column, order?: ('asc' | 'desc')): boolean;
+}
+export default StateHelpers;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/StateHelpers.js

@@ -0,0 +1,65 @@
+/* *
+ *
+ *  Grid Header Cell State Helpers namespace
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+/* *
+ *
+ *  Namespace
+ *
+ * */
+var StateHelpers;
+(function (StateHelpers) {
+    /**
+     * Checks if the column is filtered.
+     *
+     * @param column
+     * The column to check.
+     */
+    function isFiltered(column) {
+        const { condition, value } = column.options.filtering || {};
+        return !!(condition && (['empty', 'notEmpty', 'true', 'false'].includes(condition) ||
+            (value !== void 0 && value !== '') // Accept null and 0
+        ));
+    }
+    StateHelpers.isFiltered = isFiltered;
+    /**
+     * Checks if the column is sorted.
+     *
+     * @param column
+     * The column to check.
+     *
+     * @param order
+     * Optional sorting order to check for.
+     *
+     * @returns
+     * True if the column is sorted. In case of `order` is provided, true
+     * only if the column is sorted in the provided order.
+     */
+    function isSorted(column, order) {
+        const { currentSorting } = column.viewport.grid.querying.sorting || {};
+        if (currentSorting?.columnId !== column.id) {
+            return false;
+        }
+        return order ?
+            currentSorting?.order === order :
+            !!currentSorting?.order;
+    }
+    StateHelpers.isSorted = isSorted;
+})(StateHelpers || (StateHelpers = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default StateHelpers;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/FilterToolbarButton.d.ts

@@ -0,0 +1,12 @@
+import type ColumnToolbar from '../ColumnToolbar.js';
+import FilterPopup from '../FilterPopup.js';
+import ToolbarButton from '../../../../UI/ToolbarButton.js';
+declare class FilterToolbarButton extends ToolbarButton {
+    toolbar?: ColumnToolbar;
+    popup?: FilterPopup;
+    constructor();
+    protected refreshState(): void;
+    protected addEventListeners(): void;
+    protected clickHandler(event: MouseEvent): void;
+}
+export default FilterToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/FilterToolbarButton.js

@@ -0,0 +1,81 @@
+/* *
+ *
+ *  Grid Filter Toolbar Button class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import FilterPopup from '../FilterPopup.js';
+import ToolbarButton from '../../../../UI/ToolbarButton.js';
+import StateHelpers from '../StateHelpers.js';
+import U from '../../../../../../Core/Utilities.js';
+const { addEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+class FilterToolbarButton extends ToolbarButton {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor() {
+        super({
+            icon: 'filter',
+            classNameKey: 'headerCellFilterIcon',
+            accessibility: {
+                ariaLabel: 'filter',
+                ariaExpanded: false,
+                ariaControls: 'filter-popup'
+            }
+        });
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    refreshState() {
+        const column = this.toolbar?.column;
+        if (column) {
+            this.setActive(StateHelpers.isFiltered(column));
+        }
+    }
+    addEventListeners() {
+        super.addEventListeners();
+        const toolbar = this.toolbar;
+        if (!toolbar) {
+            return;
+        }
+        this.eventListenerDestroyers.push(addEvent(toolbar.column, 'afterFilter', () => {
+            this.refreshState();
+        }));
+    }
+    clickHandler(event) {
+        super.clickHandler(event);
+        const filtering = this.toolbar?.column.filtering;
+        if (!filtering) {
+            return;
+        }
+        if (!this.popup) {
+            this.popup = new FilterPopup(filtering, this);
+        }
+        this.popup.toggle(this.wrapper);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default FilterToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/MenuToolbarButton.d.ts

@@ -0,0 +1,12 @@
+import type ColumnToolbar from '../ColumnToolbar.js';
+import ToolbarButton from '../../../../UI/ToolbarButton.js';
+import MenuPopup from '../MenuPopup.js';
+declare class MenuToolbarButton extends ToolbarButton {
+    toolbar?: ColumnToolbar;
+    popup?: MenuPopup;
+    constructor();
+    protected clickHandler(event: MouseEvent): void;
+    protected refreshState(): void;
+    protected addEventListeners(): void;
+}
+export default MenuToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/MenuToolbarButton.js

@@ -0,0 +1,80 @@
+/* *
+ *
+ *  Grid Menu Toolbar Button class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import ToolbarButton from '../../../../UI/ToolbarButton.js';
+import StateHelpers from '../StateHelpers.js';
+import MenuPopup from '../MenuPopup.js';
+import U from '../../../../../../Core/Utilities.js';
+const { addEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+class MenuToolbarButton extends ToolbarButton {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor() {
+        super({
+            icon: 'menu',
+            classNameKey: 'headerCellMenuIcon'
+        });
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    clickHandler(event) {
+        super.clickHandler(event);
+        const grid = this.toolbar?.column.viewport.grid;
+        if (!grid) {
+            return;
+        }
+        if (!this.popup) {
+            this.popup = new MenuPopup(grid, this);
+        }
+        this.popup.toggle(this.wrapper);
+    }
+    refreshState() {
+        const column = this.toolbar?.column;
+        if (!column) {
+            return;
+        }
+        this.setActive(StateHelpers.isSorted(column) ||
+            StateHelpers.isFiltered(column));
+    }
+    addEventListeners() {
+        super.addEventListeners();
+        const column = this.toolbar?.column;
+        if (!column) {
+            return;
+        }
+        this.eventListenerDestroyers.push(addEvent(column.viewport.grid, 'afterSort', () => {
+            this.refreshState();
+        }), addEvent(column, 'afterFilter', () => {
+            this.refreshState();
+        }));
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default MenuToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/SortToolbarButton.d.ts

@@ -0,0 +1,11 @@
+import type ColumnToolbar from '../ColumnToolbar.js';
+import ToolbarButton from '../../../../UI/ToolbarButton.js';
+declare class SortToolbarButton extends ToolbarButton {
+    toolbar?: ColumnToolbar;
+    constructor();
+    protected clickHandler(event: MouseEvent): void;
+    protected refreshState(): void;
+    protected addEventListeners(): void;
+    protected renderActiveIndicator(): void;
+}
+export default SortToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/SortToolbarButton.js

@@ -0,0 +1,81 @@
+/* *
+ *
+ *  Grid Sort Toolbar Button class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import ToolbarButton from '../../../../UI/ToolbarButton.js';
+import StateHelpers from '../StateHelpers.js';
+import U from '../../../../../../Core/Utilities.js';
+const { addEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+class SortToolbarButton extends ToolbarButton {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor() {
+        super({
+            icon: 'upDownArrows',
+            classNameKey: 'headerCellSortIcon',
+            accessibility: {
+                ariaLabel: 'sort'
+            }
+        });
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    clickHandler(event) {
+        super.clickHandler(event);
+        this.toolbar?.column.sorting?.toggle();
+    }
+    refreshState() {
+        const column = this.toolbar?.column;
+        if (!column) {
+            return;
+        }
+        if (!StateHelpers.isSorted(column)) {
+            this.setActive(false);
+            this.setIcon('upDownArrows');
+            return;
+        }
+        const { currentSorting } = column.viewport.grid.querying.sorting;
+        this.setActive(true);
+        this.setIcon(currentSorting?.order === 'asc' ? 'sortAsc' : 'sortDesc');
+    }
+    addEventListeners() {
+        super.addEventListeners();
+        const column = this.toolbar?.column;
+        if (!column) {
+            return;
+        }
+        // If this grid is currently sorted, update the state
+        this.eventListenerDestroyers.push(addEvent(column.viewport.grid, 'afterSort', () => this.refreshState()));
+    }
+    renderActiveIndicator() {
+        // Do nothing
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default SortToolbarButton;