@progress/kendo-react-pivotgrid 5.6.0-dev.202208261541 → 5.6.0-dev.202209021051

package/dist/es/utils/navigation.js

@@ -0,0 +1,265 @@
+var scrollableValuesSel = '.k-pivotgrid .k-pivotgrid-values';
+var scrollableColumnHeaderSel = '.k-pivotgrid .k-pivotgrid-column-headers';
+var scrollableRowHeaderSel = '.k-pivotgrid .k-pivotgrid-row-headers';
+var emptyCellSel = '.k-pivotgrid > .k-pivotgrid-empty-cell';
+var tableSel = 'table.k-pivotgrid-table';
+var cellSel = '.k-pivotgrid-cell';
+var scrollables = [scrollableValuesSel, scrollableColumnHeaderSel, scrollableRowHeaderSel].join(',');
+var selectors = [
+    emptyCellSel,
+    [scrollableColumnHeaderSel, tableSel, cellSel].join(' '),
+    [scrollableRowHeaderSel, tableSel, cellSel].join(' '),
+    [scrollableValuesSel, tableSel, cellSel].join(' ')
+];
+var onEnter = function (target, nav, ev) {
+    var icon = target.querySelector('.k-icon');
+    if (icon) {
+        var index_1 = nav.elements.indexOf(target);
+        nav.update = function () {
+            nav.focusElement(nav.elements[index_1], null);
+            nav.update = function () { };
+        };
+        icon.click();
+        ev.preventDefault();
+    }
+};
+var tryScrollLeft = function (target, scrollable, elToScroll) {
+    if (target.offsetLeft < scrollable.scrollLeft) {
+        elToScroll.scrollLeft = target.offsetLeft;
+    }
+};
+var tryScrollRight = function (target, scrollable, elToScroll) {
+    if (target.offsetLeft + target.offsetWidth > scrollable.scrollLeft + scrollable.offsetWidth &&
+        target.offsetWidth < scrollable.offsetWidth) {
+        elToScroll.scrollLeft = target.offsetLeft + target.offsetWidth - scrollable.offsetWidth;
+    }
+};
+var tryScrollUp = function (target, scrollable, elToScroll) {
+    if (scrollable.scrollTop && target.offsetTop < scrollable.scrollTop) {
+        elToScroll.scrollTop = target.offsetTop;
+    }
+};
+var tryScrollDown = function (target, scrollable, elToScroll) {
+    if (target.offsetTop + target.offsetHeight > scrollable.scrollTop + scrollable.offsetHeight &&
+        target.offsetHeight < scrollable.offsetHeight) {
+        elToScroll.scrollTop = target.offsetTop + target.offsetHeight - scrollable.offsetHeight;
+    }
+};
+var scrollTo = function (target, root, scrollFunc) {
+    var elToScroll = root.querySelector(scrollableValuesSel);
+    var scrollable = target && target.closest(scrollables);
+    if (!elToScroll || !scrollable || !target) {
+        return;
+    }
+    scrollFunc.forEach(function (scroll) { return scroll(target, scrollable, elToScroll); });
+};
+var tableMap = function (table) {
+    var rows = Array.from(table.rows);
+    var colsCount = Array.from((rows && rows[0] && rows[0].cells) || [])
+        .map(function (c) { return c.colSpan; })
+        .reduce(function (prev, cur) { return prev + cur; }, 0);
+    var map = rows.map(function () { return new Array(colsCount); });
+    rows.forEach(function (row, r) {
+        var curColSpan = 0;
+        Array.from(row.cells).forEach(function (c) {
+            for (var colSp = 0; colSp < c.colSpan; colSp++) {
+                for (var rowSp = 0; rowSp < c.rowSpan; rowSp++) {
+                    var ind = map[r + rowSp].findIndex(function (val, curInd) { return curInd >= curColSpan && !val; });
+                    map[r + rowSp][ind] = c;
+                }
+                curColSpan++;
+            }
+        });
+    });
+    return map;
+};
+var navigationMap = function (root) {
+    var columnHeader = tableMap(root.querySelector([scrollableColumnHeaderSel, tableSel].join(' ')));
+    var rowHeader = tableMap(root.querySelector([scrollableRowHeaderSel, tableSel].join(' ')));
+    var values = tableMap(root.querySelector([scrollableValuesSel, tableSel].join(' ')));
+    var emptyCell = root.querySelector(emptyCellSel);
+    var emptyCellRow = new Array(rowHeader[0].length).fill(emptyCell);
+    var map = [];
+    for (var i = 0; i < columnHeader.length; i++) {
+        map.push(emptyCellRow.concat(columnHeader[i]));
+    }
+    for (var i = 0; i < rowHeader.length; i++) {
+        map.push(rowHeader[i].concat(values[i]));
+    }
+    return map;
+};
+var getTargetPos = function (map, target) {
+    for (var r = 0; r < map.length; r++) {
+        for (var c = 0; c < map[r].length; c++) {
+            if (map[r][c] === target) {
+                return [r, c];
+            }
+        }
+    }
+    return [-1, -1];
+};
+var cellAt = function (root, target, pos) {
+    var map = navigationMap(root);
+    var targetPos = getTargetPos(map, target);
+    var nextPos = [targetPos[0] + pos[0], targetPos[1] + pos[1]];
+    var next = map[nextPos[0]] && map[nextPos[0]][nextPos[1]];
+    while (next && next === target) {
+        nextPos = [nextPos[0] + pos[0], nextPos[1] + pos[1]];
+        next = map[nextPos[0]] && map[nextPos[0]][nextPos[1]];
+    }
+    return next;
+};
+var keyboardEvents = {
+    keydown: {
+        ArrowLeft: function (target, nav, ev) {
+            ev.preventDefault();
+            var next = cellAt(nav.root, target, [0, -1]);
+            nav.focusElement(next, target);
+            scrollTo(next, nav.root, [tryScrollRight, tryScrollLeft, tryScrollDown, tryScrollUp]);
+        },
+        ArrowRight: function (target, nav, ev) {
+            ev.preventDefault();
+            var next = cellAt(nav.root, target, [0, 1]);
+            nav.focusElement(next, target);
+            scrollTo(next, nav.root, [tryScrollLeft, tryScrollRight, tryScrollDown, tryScrollUp]);
+        },
+        ArrowUp: function (target, nav, ev) {
+            ev.preventDefault();
+            var next = cellAt(nav.root, target, [-1, 0]);
+            nav.focusElement(next, target);
+            scrollTo(next, nav.root, [tryScrollRight, tryScrollLeft, tryScrollDown, tryScrollUp]);
+        },
+        ArrowDown: function (target, nav, ev) {
+            ev.preventDefault();
+            var next = cellAt(nav.root, target, [1, 0]);
+            nav.focusElement(next, target);
+            scrollTo(next, nav.root, [tryScrollRight, tryScrollLeft, tryScrollUp, tryScrollDown]);
+        },
+        Enter: onEnter,
+        Space: onEnter,
+        Home: function (target, nav, ev) {
+            var map = navigationMap(nav.root);
+            var row = ev.ctrlKey ? map[0] : (map.find(function (ro) { return Boolean(ro.find(function (x) { return x === target; })); }) || []);
+            var next = row[0];
+            if (next) {
+                nav.focusElement(next, target);
+                scrollTo(next, nav.root, [tryScrollRight, tryScrollLeft, tryScrollDown, tryScrollUp]);
+                ev.preventDefault();
+            }
+        },
+        End: function (target, nav, ev) {
+            var map = navigationMap(nav.root);
+            var row = ev.ctrlKey ? map[map.length - 1] : (map.find(function (ro) { return Boolean(ro.find(function (x) { return x === target; })); }) || []);
+            var next = row && row[row.length - 1] || null;
+            if (next) {
+                nav.focusElement(next, target);
+                scrollTo(next, nav.root, [tryScrollLeft, tryScrollRight, tryScrollUp, tryScrollDown]);
+                ev.preventDefault();
+            }
+        }
+    }
+};
+var mouseEvents = {
+    click: function (target, nav) {
+        if (target && target instanceof HTMLElement) {
+            var prev = nav.elements.find(function (c) { return c.hasAttribute('tabindex'); }) || null;
+            nav.focusElement(target, prev);
+        }
+    }
+};
+/**
+ * @hidden
+ */
+var PivotGridNavigation = /** @class */ (function () {
+    function PivotGridNavigation(settings) {
+        this.root = null;
+        this.selectors = [];
+        this.tabIndex = 0;
+        this.eventHandlers = {};
+        this.mouseEvents = {};
+        this.keyboardEvents = {};
+        this.update = function () { };
+        this.selectors = selectors;
+        this.mouseEvents = mouseEvents;
+        this.keyboardEvents = keyboardEvents;
+        this.tabIndex = settings.tabIndex;
+    }
+    Object.defineProperty(PivotGridNavigation.prototype, "elements", {
+        get: function () {
+            return this.root ? Array.from(this.root.querySelectorAll(this.selectors.join(','))) : [];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PivotGridNavigation.prototype, "first", {
+        get: function () {
+            return (this.root && this.root.querySelector(this.selectors.join(','))) || null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PivotGridNavigation.prototype, "last", {
+        get: function () {
+            var all = this.elements;
+            return all[all.length - 1] || null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    PivotGridNavigation.prototype.start = function (root) {
+        var _this = this;
+        this.root = root;
+        var _loop_1 = function (eventType) {
+            if (this_1.mouseEvents[eventType]) {
+                this_1.eventHandlers[eventType] = (function (ev) {
+                    var target = ev.target instanceof Element && ev.target.closest(_this.selectors.join(','));
+                    if (target) {
+                        _this.mouseEvents[eventType].call(undefined, target, _this, ev);
+                    }
+                });
+                root.addEventListener(eventType, this_1.eventHandlers[eventType]);
+            }
+        };
+        var this_1 = this;
+        for (var eventType in this.mouseEvents) {
+            _loop_1(eventType);
+        }
+        var _loop_2 = function (eventType) {
+            if (this_2.keyboardEvents[eventType]) {
+                this_2.eventHandlers[eventType] = (function (ev) {
+                    var target = ev.target instanceof Element && ev.target.closest(_this.selectors.join(','));
+                    var key = ev.key === ' ' ? 'Space' : ev.key;
+                    if (target && _this.keyboardEvents[eventType][key]) {
+                        _this.keyboardEvents[eventType][key].call(undefined, target, _this, ev);
+                    }
+                });
+                root.addEventListener(eventType, this_2.eventHandlers[eventType]);
+            }
+        };
+        var this_2 = this;
+        for (var eventType in this.keyboardEvents) {
+            _loop_2(eventType);
+        }
+    };
+    PivotGridNavigation.prototype.stop = function () {
+        if (this.root) {
+            for (var eventType in this.eventHandlers) {
+                if (this.eventHandlers[eventType]) {
+                    this.root.removeEventListener(eventType, this.eventHandlers[eventType]);
+                }
+            }
+        }
+        this.root = null;
+    };
+    PivotGridNavigation.prototype.focusElement = function (element, previous) {
+        if (element) {
+            if (previous) {
+                previous.removeAttribute('tabindex');
+            }
+            element.setAttribute('tabindex', String(this.tabIndex));
+            element.focus({ preventScroll: true });
+        }
+    };
+    return PivotGridNavigation;
+}());
+export { PivotGridNavigation };

package/dist/npm/PivotGrid.d.ts

@@ -4,7 +4,7 @@ import { PivotGridCellProps } from './components/Cell';
 import { PivotGridHeaderCellProps } from './components/HeaderCell';
 import { PivotGridColumnProps } from './components/Column';
 import { CustomComponent } from '@progress/kendo-react-common';
-import { PivotGridAxis, PivotDataItem, Tuple } from '@progress/kendo-pivotgrid-common';
+import { PivotGridAxis, PivotDataItem, Tuple, AxisRow } from '@progress/kendo-pivotgrid-common';
 import { PivotGridAxesChangeEvent } from './models';
 /**
  * Represents the props of the [KendoReact PivotGrid component]({% slug api_pivotgrid_pivotgrid %}).
@@ -26,6 +26,11 @@ export interface PivotGridProps {
      * Sets the `tabIndex` property of the top-most element of the PivotGrid.
      */
     tabIndex?: number;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the PivotGrid.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
     /**
      * Sets the `data` of the PivotGrid.
      */
@@ -157,6 +162,14 @@ export interface PivotGridProps {
 export interface PivotGridHandle {
     element: HTMLDivElement | null;
     props: PivotGridProps;
+    columnHeaderRows: AxisRow[];
+    rowHeaderRows: AxisRow[];
+    dataCells: {
+        row: string[];
+        cells: PivotDataItem[];
+    }[];
+    rowHeaderBreadth: number;
+    columnHeaderBreadth: number;
 }
 /**
  * Represents the [KendoReact PivotGrid component]({% slug api_pivotgrid_pivotgridprops %}).

package/dist/npm/PivotGrid.js

@@ -15,6 +15,8 @@ exports.PivotGrid = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("./package-metadata");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var messages_1 = require("./messages");
 var Row_1 = require("./components/Row");
 var Cell_1 = require("./components/Cell");
 var useHeaders_1 = require("./hooks/useHeaders");
@@ -23,6 +25,7 @@ var useHorizontalScrollSync_1 = require("./hooks/useHorizontalScrollSync");
 var useVerticalScrollSync_1 = require("./hooks/useVerticalScrollSync");
 var Column_1 = require("./components/Column");
 var utils_1 = require("./utils");
+var navigation_1 = require("./utils/navigation");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var kendo_pivotgrid_common_1 = require("@progress/kendo-pivotgrid-common");
 /**
@@ -33,13 +36,12 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
     var _a = __assign(__assign({}, defaultProps), props), rows = _a.rows, rowAxes = _a.rowAxes, columns = _a.columns, columnAxes = _a.columnAxes, data = _a.data;
     var element = React.useRef(null);
     var target = React.useRef(null);
-    React.useImperativeHandle(target, function () { return ({ props: props, element: element.current }); });
-    React.useImperativeHandle(ref, function () { return target.current; });
     var rowHeadersTable = React.useRef(null);
     var columnHeadersTable = React.useRef(null);
     var rowHeadersContainer = React.useRef(null);
     var columnHeadersContainer = React.useRef(null);
     var valuesHeadersContainer = React.useRef(null);
+    var localization = (0, kendo_react_intl_1.useLocalization)();
     var handleRowAxesChange = function (newRowAxes, syntheticEvent) {
         if (props.onRowAxesChange) {
             props.onRowAxesChange({
@@ -65,6 +67,16 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
     var _d = (0, useHeaders_1.useHeaders)((columnAxes || []).slice(), columnsTree, handleColumnAxesChange), dispatchColumns = _d[1];
     var _e = (0, kendo_pivotgrid_common_1.toColumns)(columnsTree), columnHeaderRows = _e[0], columnHeaderLeafs = _e[1], columnHeaderBreadth = _e[3];
     var measures = (0, kendo_pivotgrid_common_1.toData)((data || []).slice(), columnHeaderLeafs, rowHeaderLeafs, columnHeaderBreadth, rowHeaderDepth);
+    React.useImperativeHandle(target, function () { return ({
+        props: props,
+        element: element.current,
+        columnHeaderRows: columnHeaderRows,
+        rowHeaderRows: rowHeaderRows,
+        dataCells: measures,
+        rowHeaderBreadth: rowHeaderBreadth,
+        columnHeaderBreadth: columnHeaderBreadth
+    }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
     var dataColumns = [];
     var rowHeaderColumns = [];
     var columnHeadersColumns = [];
@@ -125,6 +137,27 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
             element.current.style.gridTemplateColumns = "".concat(rowHeadersTable.current.offsetWidth, "px 1fr");
         }
     }, []);
+    var navigation = React.useRef(new navigation_1.PivotGridNavigation({ tabIndex: props.tabIndex || 0 }));
+    React.useEffect(function () {
+        if (element.current) {
+            var tabIndex = props.tabIndex || 0;
+            navigation.current.stop();
+            navigation.current.tabIndex = tabIndex;
+            if (props.navigatable) {
+                navigation.current.start(element.current);
+                var firstCell = navigation.current.first;
+                if (firstCell) {
+                    firstCell.setAttribute('tabindex', String(tabIndex));
+                }
+            }
+        }
+        return function () {
+            navigation.current.stop();
+        };
+    }, [props.tabIndex, props.navigatable]);
+    React.useEffect(function () {
+        navigation.current.update();
+    });
     React.useEffect(function () {
         if (columnHeadersTable.current) {
             var observer_1 = new window.ResizeObserver(setRowsTemplate);
@@ -147,14 +180,36 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
             return function () { observer_3.disconnect(); };
         }
     }, []);
-    return (React.createElement("div", { ref: element, id: props.id, style: props.style, tabIndex: props.tabIndex, className: (0, kendo_react_common_2.classNames)('k-pivotgrid', props.className) },
-        React.createElement("span", { className: "k-pivotgrid-empty-cell" }),
+    var columnHeaderCellsIds = new Array(columnHeaderRows.length).fill([]).map(function () { return new Array(columnHeaderLeafs.length); });
+    columnHeaderRows.forEach(function (row, r) {
+        var curColSpan = 0;
+        Array.from(row.cells).forEach(function (cell) {
+            var expanded = Boolean(cell && cell.children && cell.children.length);
+            var id = (cell ? (0, utils_1.generateKey)(cell.normalizedPath)
+                + (cell.total ? '|[TOTAL]' : '')
+                + (expanded ? '|[EXPANDED]' : '') : '').replace(/\s/g, '-');
+            if (cell) {
+                for (var colSp = 0; colSp < (cell.colSpan || 1); colSp++) {
+                    for (var rowSp = 0; rowSp < (cell.rowSpan || 1); rowSp++) {
+                        var ind = columnHeaderCellsIds[r + rowSp].findIndex(function (val, curInd) { return curInd >= curColSpan && !val; });
+                        columnHeaderCellsIds[r + rowSp][ind] = id;
+                    }
+                    curColSpan++;
+                }
+            }
+        });
+    });
+    var dataCellsIds = measures.map(function (row) {
+        return row.cells.map(function (cell) { return (0, utils_1.generateDataKey)(cell.rowTuple.members, cell.columnTuple.members).replace(/\s/g, '-'); });
+    });
+    return (React.createElement("div", { ref: element, id: props.id, style: props.style, tabIndex: !props.navigatable ? props.tabIndex : undefined, className: (0, kendo_react_common_2.classNames)('k-pivotgrid', props.className), role: "grid" },
+        React.createElement("span", { className: "k-pivotgrid-empty-cell", title: localization.toLanguageString(messages_1.emptyCellAriaLabel, messages_1.messages[messages_1.emptyCellAriaLabel]) }),
         React.createElement("div", { ref: columnHeadersContainer, className: "k-pivotgrid-column-headers", onScroll: handleHorizontalScroll },
-            React.createElement("table", { ref: columnHeadersTable, className: "k-pivotgrid-table" },
+            React.createElement("table", { ref: columnHeadersTable, className: "k-pivotgrid-table", role: "none" },
                 React.createElement("colgroup", null, columnHeadersColumns),
-                React.createElement("tbody", { className: "k-pivotgrid-tbody" }, columnHeaderRows.map(function (row) {
+                React.createElement("tbody", { className: "k-pivotgrid-tbody", role: 'rowgroup' }, columnHeaderRows.map(function (row, r) {
                     var foundCell = false;
-                    return (React.createElement(ColumnHeadersRowComponent, __assign({ key: row.name }, RowProps), row.cells.map(function (cell, cellIdx) {
+                    return (React.createElement(ColumnHeadersRowComponent, __assign({ key: row.name, role: "row" }, RowProps), row.cells.map(function (cell, cellIdx) {
                         var first = cellIdx !== 0 && !foundCell;
                         if (cell) {
                             foundCell = true;
@@ -162,28 +217,24 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
                         var expanded = cell && Boolean(cell.children && cell.children.length);
                         var expandable = cell && (cell.hasChildren && (!cell.total || (cell.total && cell.parent.total)));
                         return cell
-                            ? (React.createElement(ColumnHeadersColumnCellComponent, __assign({}, HeaderCellProps, { key: (0, utils_1.generateKey)(cell.normalizedPath)
-                                    + (cell.total ? '|[TOTAL]' : '')
-                                    + (expanded ? '|[EXPANDED]' : ''), "data-key": (0, utils_1.generateKey)(cell.normalizedPath)
-                                    + (cell.total ? '|[TOTAL]' : '')
-                                    + (expanded ? '|[EXPANDED]' : ''), columnPath: cell.normalizedPath, rowSpan: cell.rowSpan || undefined, colSpan: cell.colSpan || undefined, onIconClick: handleColumnCellClick, dataItem: cell, expanded: expanded, expandable: expandable, total: cell.total, first: first, root: cell.levelNum === 0 }), cell.caption))
+                            ? (React.createElement(ColumnHeadersColumnCellComponent, __assign({}, HeaderCellProps, { key: columnHeaderCellsIds[r][cellIdx], "data-key": columnHeaderCellsIds[r][cellIdx], id: columnHeaderCellsIds[r][cellIdx], columnPath: cell.normalizedPath, rowSpan: cell.rowSpan || undefined, colSpan: cell.colSpan || undefined, onIconClick: handleColumnCellClick, dataItem: cell, expanded: expanded, expandable: expandable, total: cell.total, first: first, root: cell.levelNum === 0, role: "columnheader" }), cell.caption))
                             : null;
                     })));
                 })))),
         React.createElement("div", { ref: rowHeadersContainer, className: "k-pivotgrid-row-headers" },
-            React.createElement("table", { ref: rowHeadersTable, className: "k-pivotgrid-table" },
+            React.createElement("table", { ref: rowHeadersTable, className: "k-pivotgrid-table", role: "none" },
                 React.createElement("colgroup", null, rowHeaderColumns),
-                React.createElement("tbody", { className: "k-pivotgrid-tbody" }, rowHeaderRows.map(function (row, rowId) { return (React.createElement(RowHeadersRowComponent, __assign({ key: (0, utils_1.generateKey)(rowHeaderLeafs[rowId].path) }, RowProps, { path: rowHeaderLeafs[rowId].path }), row.cells.filter(Boolean).map(function (cell) { return cell
+                React.createElement("tbody", { className: "k-pivotgrid-tbody", role: "rowgroup" }, rowHeaderRows.map(function (row, rowId) { return (React.createElement(RowHeadersRowComponent, __assign({ key: (0, utils_1.generateKey)(rowHeaderLeafs[rowId].path) }, RowProps, { path: rowHeaderLeafs[rowId].path, role: "row", ariaOwns: dataCellsIds[rowId].join(' ') }), row.cells.filter(Boolean).map(function (cell) { return cell
                     ? (React.createElement(RowHeadersCellComponent, __assign({}, HeaderCellProps, { key: (0, utils_1.generateKey)(cell.normalizedPath)
                             + (cell.total ? '|[TOTAL]' : '')
                             + (Boolean(cell.children && cell.children.length) ? '|[EXPANDED]' : ''), "data-key": (0, utils_1.generateKey)(cell.normalizedPath)
                             + (cell.total ? '|[TOTAL]' : '')
-                            + (Boolean(cell.children && cell.children.length) ? '|[EXPANDED]' : ''), rowPath: cell.normalizedPath, rowSpan: cell.rowSpan || undefined, colSpan: cell.colSpan || undefined, dataItem: cell, expanded: Boolean(cell.children && cell.children.length), expandable: cell.hasChildren && !cell.total, total: cell.total, onIconClick: handleRowCellClick, root: cell.levelNum === 0 }), cell.caption))
+                            + (Boolean(cell.children && cell.children.length) ? '|[EXPANDED]' : ''), rowPath: cell.normalizedPath, rowSpan: cell.rowSpan || undefined, colSpan: cell.colSpan || undefined, dataItem: cell, expanded: Boolean(cell.children && cell.children.length), expandable: cell.hasChildren && !cell.total, total: cell.total, onIconClick: handleRowCellClick, root: cell.levelNum === 0, role: "rowheader" }), cell.caption))
                     : null; }))); })))),
         React.createElement("div", { ref: valuesHeadersContainer, className: "k-pivotgrid-values", onScroll: handleValuesContainerScroll },
-            React.createElement("table", { className: "k-pivotgrid-table" },
+            React.createElement("table", { className: "k-pivotgrid-table", role: "none" },
                 React.createElement("colgroup", null, dataColumns),
-                React.createElement("tbody", { className: "k-pivotgrid-tbody" }, measures.map(function (row, rowId) { return (React.createElement(DataRowComponent, __assign({ key: (0, utils_1.generateKey)(rowHeaderLeafs[rowId].path) }, RowProps, { path: rowHeaderLeafs[rowId].path }), row.cells.map(function (cell, cellId) { return (React.createElement(CellComponent, __assign({ key: "".concat((0, utils_1.generateDataKey)(cell.rowTuple.members, cell.columnTuple.members)), "data-key": "".concat((0, utils_1.generateDataKey)(cell.rowTuple.members, cell.columnTuple.members)) }, CellProps, { rowPath: cell.rowTuple.members.map(function (m) { return m.name; }), columnPath: cell.columnTuple.members.map(function (m) { return m.name; }), dataItem: cell, total: rowHeaderLeafs[rowId].total || columnHeaderLeafs[cellId].total }), (cell && cell.data && cell.data.fmtValue) ? cell.data.fmtValue : '\u00A0')); }))); }))))));
+                React.createElement("tbody", { className: "k-pivotgrid-tbody", role: "none" }, measures.map(function (row, rowId) { return (React.createElement(DataRowComponent, __assign({ key: (0, utils_1.generateKey)(rowHeaderLeafs[rowId].path) }, RowProps, { path: rowHeaderLeafs[rowId].path, role: "none" }), row.cells.map(function (cell, cellId) { return (React.createElement(CellComponent, __assign({ key: dataCellsIds[rowId][cellId], "data-key": dataCellsIds[rowId][cellId], id: dataCellsIds[rowId][cellId] }, CellProps, { rowPath: cell.rowTuple.members.map(function (m) { return m.name; }), columnPath: cell.columnTuple.members.map(function (m) { return m.name; }), dataItem: cell, total: rowHeaderLeafs[rowId].total || columnHeaderLeafs[cellId].total, role: "gridcell", ariaDescribedby: columnHeaderCellsIds.map(function (r) { return r[cellId]; }).join(' ') }), (cell && cell.data && cell.data.fmtValue) ? cell.data.fmtValue : '\u00A0')); }))); }))))));
 });
 var defaultProps = {
     rowAxes: [],

package/dist/npm/components/Cell.d.ts

@@ -50,6 +50,14 @@ export interface PivotGridCellProps extends KendoMouse<PivotGridCellHandle, HTML
      * Indicates if the current cell represents a `total` value.
      */
     total?: boolean;
+    /**
+     * Sets the `role` property of the top-most element of the PivotGridCell.
+     */
+    role?: string;
+    /**
+     * Sets the `aria-describedby` property of the top-most element of the PivotGridCell.
+     */
+    ariaDescribedby?: string;
 }
 /**
  * Represents the [KendoReact PivotGridCell component]({% slug api_pivotgrid_pivotgridcellprops %}).

package/dist/npm/components/Cell.js

@@ -27,7 +27,7 @@ exports.PivotGridCell = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var mouseProps = (0, kendo_react_common_1.useMouse)(props, target);
-    return (React.createElement("td", __assign({ ref: element }, mouseProps, { "data-key": props['data-key'], id: props.id, style: props.style, tabIndex: props.tabIndex, className: (0, kendo_react_common_1.classNames)('k-pivotgrid-cell', {
+    return (React.createElement("td", __assign({ ref: element }, mouseProps, { id: props.id, style: props.style, tabIndex: props.tabIndex, role: props.role, "aria-describedby": props.ariaDescribedby, className: (0, kendo_react_common_1.classNames)('k-pivotgrid-cell', {
             'k-pivotgrid-header-total': props.total
         }, props.className) }), props.children));
 });

package/dist/npm/components/HeaderCell.d.ts

@@ -85,6 +85,10 @@ export interface PivotGridHeaderCellProps extends KendoMouse<PivotGridHeaderCell
      * A callback, fired whenever the `icon` is clicked.
      */
     onIconClick?: (args: KendoMouseEvent<PivotGridHeaderCellHandle, HTMLSpanElement>) => void;
+    /**
+     * Sets the `role` property of the top-most element of the PivotGridHeaderCell.
+     */
+    role?: string;
 }
 /**
  * Represents the [KendoReact PivotGridHeaderCell component]({% slug api_pivotgrid_pivotgridheadercellprops %}).

package/dist/npm/components/HeaderCell.js

@@ -37,13 +37,13 @@ exports.PivotGridHeaderCell = React.forwardRef(function (props, ref) {
             });
         }
     };
-    return (React.createElement("th", __assign({ ref: element }, mouseProps, { colSpan: props.colSpan, rowSpan: props.rowSpan, "data-key": props['data-key'], id: props.id, style: props.style, tabIndex: props.tabIndex, className: (0, kendo_react_common_1.classNames)('k-pivotgrid-cell', {
+    return (React.createElement("th", __assign({ ref: element }, mouseProps, { colSpan: props.colSpan, rowSpan: props.rowSpan, id: props.id, style: props.style, tabIndex: props.tabIndex, role: props.role }, (props.expandable ? { 'aria-expanded': props.expanded } : {}), { className: (0, kendo_react_common_1.classNames)('k-pivotgrid-cell', {
             'k-pivotgrid-header-total': props.total,
             'k-pivotgrid-header-root': props.root,
             'k-pivotgrid-expanded': props.expanded,
             'k-first': props.first
         }, props.className) }),
-        props.expandable && (React.createElement(IconComponent, __assign({}, IconProps, { onClick: handleIconClick, name: "arrow-chevron-".concat(props.expanded ? 'up' : 'down') }))),
+        props.expandable && (React.createElement(IconComponent, __assign({}, IconProps, { onClick: handleIconClick, name: "chevron-".concat(props.expanded ? 'up' : 'down'), "aria-hidden": true }))),
         props.children));
 });
 var defaultProps = {

package/dist/npm/components/Row.d.ts

@@ -35,6 +35,14 @@ export interface PivotGridRowProps extends KendoMouse<PivotGridRowHandle, HTMLTa
      * Represents the `path` leading to the current `row`.
      */
     path?: string[];
+    /**
+     * Sets the `role` property of the top-most element of the PivotGridRow.
+     */
+    role?: string;
+    /**
+     * Sets the `aria-owns` property of the top-most element of the PivotGridRow.
+     */
+    ariaOwns?: string;
 }
 /**
  * Represents the [KendoReact PivotGridRow component]({% slug api_pivotgrid_pivotgridrowprops %}).

package/dist/npm/components/Row.js

@@ -26,6 +26,6 @@ exports.PivotGridRow = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var mouseProps = (0, kendo_react_common_1.useMouse)(props, target);
-    return (React.createElement("tr", __assign({ ref: element }, mouseProps, { id: props.id, style: props.style, tabIndex: props.tabIndex, children: props.children, className: (0, kendo_react_common_1.classNames)('k-pivotgrid-row', props.className) })));
+    return (React.createElement("tr", __assign({ ref: element }, mouseProps, { id: props.id, style: props.style, tabIndex: props.tabIndex, children: props.children, role: props.role, "aria-owns": props.ariaOwns, className: (0, kendo_react_common_1.classNames)('k-pivotgrid-row', props.className) })));
 });
 exports.PivotGridRow.displayName = 'KendoReactPivotGridRow';

package/dist/npm/hooks/usePivotLocalDataService.d.ts

@@ -53,6 +53,12 @@ export interface PivotLocalDataServiceState {
      * Represents the `PivotGridConfigurator` component props.
      */
     configuratorProps: PivotGridConfiguratorProps;
+    /**
+     * Represents an object containing additional state data.
+     */
+    state: {
+        loading: boolean;
+    };
 }
 /**
  * A [custom React hook](https://reactjs.org/docs/hooks-custom.html) which provides data-binding to local data.

package/dist/npm/hooks/usePivotLocalDataService.js

@@ -24,11 +24,13 @@ var stringSeparator = '&';
  * A [custom React hook](https://reactjs.org/docs/hooks-custom.html) which provides data-binding to local data.
  */
 var usePivotLocalDataService = function (args) {
-    var _a = React.useState(args.defaultColumnAxes || []), columnAxes = _a[0], setColumnAxes = _a[1];
-    var _b = React.useState(args.defaultRowAxes || []), rowAxes = _b[0], setRowAxes = _b[1];
-    var _c = React.useState(args.defaultMeasureAxes || []), measureAxes = _c[0], setMeasureAxes = _c[1];
-    var _d = React.useState(args.defaultSort || []), sort = _d[0], setSort = _d[1];
-    var _e = React.useState(args.defaultFilter || []), filter = _e[0], setFilter = _e[1];
+    var _a = React.useState(true), loading = _a[0], setLoading = _a[1];
+    var _b = React.useState(args.defaultColumnAxes || []), columnAxes = _b[0], setColumnAxes = _b[1];
+    var _c = React.useState(args.defaultRowAxes || []), rowAxes = _c[0], setRowAxes = _c[1];
+    var _d = React.useState(args.defaultMeasureAxes || []), measureAxes = _d[0], setMeasureAxes = _d[1];
+    var _e = React.useState(args.defaultSort || []), sort = _e[0], setSort = _e[1];
+    var _f = React.useState(args.defaultFilter || []), filter = _f[0], setFilter = _f[1];
+    var _g = React.useState(new Map()), dataTree = _g[0], setDataTree = _g[1];
     var handleRowAxesChange = React.useCallback(function (event) {
         setRowAxes(event.value);
     }, []);
@@ -50,7 +52,14 @@ var usePivotLocalDataService = function (args) {
     var columnSettings = React.useMemo(function () { return rootColumnAxes.split(stringSeparator).map(createAxisSettings); }, [rootColumnAxes, createAxisSettings]);
     var rowSettings = React.useMemo(function () { return rootRowAxes.split(stringSeparator).map(createAxisSettings); }, [rootRowAxes, createAxisSettings]);
     var measuresSettings = React.useMemo(function () { return measureAxes.map(function (m) { return args.measures.find(function (meas) { return String(meas.name) === String(m.name); }); }).filter(Boolean); }, [measureAxes, args.measures]);
-    var dataTree = React.useMemo(function () { return (0, kendo_pivotgrid_common_1.createDataTree)(args.data, rowSettings, columnSettings, measuresSettings, bindingFields, filter); }, [args.data, rowSettings, columnSettings, measuresSettings, filter]);
+    React.useEffect(function () {
+        setLoading(true);
+        setTimeout(function () {
+            var result = (0, kendo_pivotgrid_common_1.createDataTree)(args.data, rowSettings, columnSettings, measuresSettings, bindingFields, filter);
+            setDataTree(result);
+            setLoading(false);
+        }, 0);
+    }, [args.data, rowSettings, columnSettings, measuresSettings, filter]);
     var configuratorData = React.useMemo(function () { return (0, kendo_pivotgrid_common_1.createFlatSchemaDimensions)(args.dimensions, args.measures); }, [args.dimensions, args.measures]);
     var dataState = React.useMemo(function () { return (0, kendo_pivotgrid_common_1.createLocalDataState)({
         dataTree: dataTree,
@@ -84,6 +93,9 @@ var usePivotLocalDataService = function (args) {
             onRowAxesChange: handleRowAxesChange,
             onColumnAxesChange: handleColumnAxesChange,
             onMeasureAxesChange: handleMeasureAxesChange
+        },
+        state: {
+            loading: loading
         }
     };
 };

package/dist/npm/main.d.ts

@@ -14,4 +14,5 @@ export { PivotGridAxisFilterFieldsEditor, PivotGridAxisFilterFieldsEditorProps,
 export { PivotOLAPService, usePivotOLAPService, PivotOLAPServiceArgs, PivotOLAPServiceProps, PivotOLAPServiceState } from './hooks/usePivotOLAPService';
 export { usePivotLocalDataService, PivotLocalDataService, PivotLocalDataServiceArgs, PivotLocalDataServiceProps, PivotLocalDataServiceState } from './hooks/usePivotLocalDataService';
 export { PivotGridTreeViewData, PivotGridAxesChangeEvent, PivotGridConfiguratorAxesChangeEvent, PivotGridConfiguratorSortChangeEvent, PivotGridConfiguratorFilterChangeEvent } from './models';
-export { PivotGridAxis, AxisDataItem, DimensionField, HierarchyField, KPIField, KPIMeasureField, LevelField, MeasureField, MemberField, PivotDataItem, sumAggregate, averageAggregate, minAggregate, maxAggregate, Aggregate, Dimension, Measure } from '@progress/kendo-pivotgrid-common';
+export { dataCells } from './utils';
+export { PivotGridAxis, AxisDataItem, AxisRow, DimensionField, HierarchyField, KPIField, KPIMeasureField, LevelField, MeasureField, Member, MemberField, PivotDataItem, Tuple, sumAggregate, averageAggregate, minAggregate, maxAggregate, Aggregate, Dimension, Measure } from '@progress/kendo-pivotgrid-common';

package/dist/npm/main.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.maxAggregate = exports.minAggregate = exports.averageAggregate = exports.sumAggregate = exports.PivotLocalDataService = exports.usePivotLocalDataService = exports.usePivotOLAPService = exports.PivotOLAPService = exports.PivotGridAxisFilterFieldsEditor = exports.PivotGridAxisEditor = exports.PivotGridConfiguratorEditorAxesContext = exports.PivotGridAxesEditor = exports.PivotGridFieldsEditor = exports.PivotGridConfiguratorButton = exports.PivotGridConfiguratorEditor = exports.PivotGridConfigurator = exports.PivotGridContainer = exports.PivotGridHeaderCell = exports.PivotGridCell = exports.PivotGridRow = exports.PivotGridColumn = exports.PivotGrid = void 0;
+exports.maxAggregate = exports.minAggregate = exports.averageAggregate = exports.sumAggregate = exports.dataCells = exports.PivotLocalDataService = exports.usePivotLocalDataService = exports.usePivotOLAPService = exports.PivotOLAPService = exports.PivotGridAxisFilterFieldsEditor = exports.PivotGridAxisEditor = exports.PivotGridConfiguratorEditorAxesContext = exports.PivotGridAxesEditor = exports.PivotGridFieldsEditor = exports.PivotGridConfiguratorButton = exports.PivotGridConfiguratorEditor = exports.PivotGridConfigurator = exports.PivotGridContainer = exports.PivotGridHeaderCell = exports.PivotGridCell = exports.PivotGridRow = exports.PivotGridColumn = exports.PivotGrid = void 0;
 var PivotGrid_1 = require("./PivotGrid");
 Object.defineProperty(exports, "PivotGrid", { enumerable: true, get: function () { return PivotGrid_1.PivotGrid; } });
 var Column_1 = require("./components/Column");
@@ -34,6 +34,8 @@ Object.defineProperty(exports, "usePivotOLAPService", { enumerable: true, get: f
 var usePivotLocalDataService_1 = require("./hooks/usePivotLocalDataService");
 Object.defineProperty(exports, "usePivotLocalDataService", { enumerable: true, get: function () { return usePivotLocalDataService_1.usePivotLocalDataService; } });
 Object.defineProperty(exports, "PivotLocalDataService", { enumerable: true, get: function () { return usePivotLocalDataService_1.PivotLocalDataService; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "dataCells", { enumerable: true, get: function () { return utils_1.dataCells; } });
 var kendo_pivotgrid_common_1 = require("@progress/kendo-pivotgrid-common");
 Object.defineProperty(exports, "sumAggregate", { enumerable: true, get: function () { return kendo_pivotgrid_common_1.sumAggregate; } });
 Object.defineProperty(exports, "averageAggregate", { enumerable: true, get: function () { return kendo_pivotgrid_common_1.averageAggregate; } });

package/dist/npm/messages/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @hidden
+ */
+export declare const emptyCellAriaLabel = "pivotgrid.emptyCellAriaLabel";
 /**
  * @hidden
  */
@@ -50,6 +54,7 @@ export declare const configuratorButtonLabel = "pivotgrid.configuratorButtonLabe
  * @hidden
  */
 export declare const messages: {
+    "pivotgrid.emptyCellAriaLabel": string;
     "pivotgrid.fieldMenuReset": string;
     "pivotgrid.fieldMenuApply": string;
     "pivotgrid.configuratorCancel": string;