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

package/dist/es/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/es/PivotGrid.js

@@ -12,6 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, emptyCellAriaLabel } from './messages';
 import { PivotGridRow } from './components/Row';
 import { PivotGridCell } from './components/Cell';
 import { useHeaders, HEADERS_ACTION } from './hooks/useHeaders';
@@ -20,6 +22,7 @@ import { useHorizontalScrollSync } from './hooks/useHorizontalScrollSync';
 import { useVerticalScrollSync } from './hooks/useVerticalScrollSync';
 import { PivotGridColumn } from './components/Column';
 import { generateKey, generateDataKey } from './utils';
+import { PivotGridNavigation } from './utils/navigation';
 import { classNames, setScrollbarWidth, useCustomComponent } from '@progress/kendo-react-common';
 import { toColumns, toRows, toTree, toData } from '@progress/kendo-pivotgrid-common';
 /**
@@ -30,13 +33,12 @@ export var 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 = useLocalization();
     var handleRowAxesChange = function (newRowAxes, syntheticEvent) {
         if (props.onRowAxesChange) {
             props.onRowAxesChange({
@@ -62,6 +64,16 @@ export var PivotGrid = React.forwardRef(function (props, ref) {
     var _d = useHeaders((columnAxes || []).slice(), columnsTree, handleColumnAxesChange), dispatchColumns = _d[1];
     var _e = toColumns(columnsTree), columnHeaderRows = _e[0], columnHeaderLeafs = _e[1], columnHeaderBreadth = _e[3];
     var measures = 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 = [];
@@ -122,6 +134,27 @@ export var PivotGrid = React.forwardRef(function (props, ref) {
             element.current.style.gridTemplateColumns = "".concat(rowHeadersTable.current.offsetWidth, "px 1fr");
         }
     }, []);
+    var navigation = React.useRef(new 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);
@@ -144,14 +177,36 @@ export var 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: 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 ? 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 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: classNames('k-pivotgrid', props.className), role: "grid" },
+        React.createElement("span", { className: "k-pivotgrid-empty-cell", title: localization.toLanguageString(emptyCellAriaLabel, messages[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;
@@ -159,28 +214,24 @@ export var 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: generateKey(cell.normalizedPath)
-                                    + (cell.total ? '|[TOTAL]' : '')
-                                    + (expanded ? '|[EXPANDED]' : ''), "data-key": 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: 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: 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: generateKey(cell.normalizedPath)
                             + (cell.total ? '|[TOTAL]' : '')
                             + (Boolean(cell.children && cell.children.length) ? '|[EXPANDED]' : ''), "data-key": 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: generateKey(rowHeaderLeafs[rowId].path) }, RowProps, { path: rowHeaderLeafs[rowId].path }), row.cells.map(function (cell, cellId) { return (React.createElement(CellComponent, __assign({ key: "".concat(generateDataKey(cell.rowTuple.members, cell.columnTuple.members)), "data-key": "".concat(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: 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/es/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/es/components/Cell.js

@@ -24,7 +24,7 @@ export var PivotGridCell = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var mouseProps = 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: 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: classNames('k-pivotgrid-cell', {
             'k-pivotgrid-header-total': props.total
         }, props.className) }), props.children));
 });

package/dist/es/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/es/components/HeaderCell.js

@@ -34,13 +34,13 @@ export var 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: 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: 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/es/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/es/components/Row.js

@@ -23,6 +23,6 @@ export var PivotGridRow = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var mouseProps = useMouse(props, target);
-    return (React.createElement("tr", __assign({ ref: element }, mouseProps, { id: props.id, style: props.style, tabIndex: props.tabIndex, children: props.children, className: 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: classNames('k-pivotgrid-row', props.className) })));
 });
 PivotGridRow.displayName = 'KendoReactPivotGridRow';

package/dist/es/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/es/hooks/usePivotLocalDataService.js

@@ -21,11 +21,13 @@ var stringSeparator = '&';
  * A [custom React hook](https://reactjs.org/docs/hooks-custom.html) which provides data-binding to local data.
  */
 export 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);
     }, []);
@@ -47,7 +49,14 @@ export 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 createDataTree(args.data, rowSettings, columnSettings, measuresSettings, bindingFields, filter); }, [args.data, rowSettings, columnSettings, measuresSettings, filter]);
+    React.useEffect(function () {
+        setLoading(true);
+        setTimeout(function () {
+            var result = 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 createFlatSchemaDimensions(args.dimensions, args.measures); }, [args.dimensions, args.measures]);
     var dataState = React.useMemo(function () { return createLocalDataState({
         dataTree: dataTree,
@@ -81,6 +90,9 @@ export var usePivotLocalDataService = function (args) {
             onRowAxesChange: handleRowAxesChange,
             onColumnAxesChange: handleColumnAxesChange,
             onMeasureAxesChange: handleMeasureAxesChange
+        },
+        state: {
+            loading: loading
         }
     };
 };

package/dist/es/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/es/main.js

@@ -13,4 +13,5 @@ export { PivotGridAxisEditor } from './components/AxisEditor';
 export { PivotGridAxisFilterFieldsEditor } from './components/AxisFilterFieldsEditor';
 export { PivotOLAPService, usePivotOLAPService } from './hooks/usePivotOLAPService';
 export { usePivotLocalDataService, PivotLocalDataService } from './hooks/usePivotLocalDataService';
+export { dataCells } from './utils';
 export { sumAggregate, averageAggregate, minAggregate, maxAggregate } from '@progress/kendo-pivotgrid-common';

package/dist/es/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;

package/dist/es/messages/index.js

@@ -1,4 +1,8 @@
 var _a;
+/**
+ * @hidden
+ */
+export var emptyCellAriaLabel = 'pivotgrid.emptyCellAriaLabel';
 /**
  * @hidden
  */
@@ -51,6 +55,7 @@ export var configuratorButtonLabel = 'pivotgrid.configuratorButtonLabel';
  * @hidden
  */
 export var messages = (_a = {},
+    _a[emptyCellAriaLabel] = 'PivotGrid component. Use the arrow keys to navigate.',
     _a[fieldMenuReset] = 'Reset',
     _a[fieldMenuApply] = 'Apply',
     _a[configuratorCancel] = 'Cancel',

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-pivotgrid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1661782221,
+    publishDate: 1662115406,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/utils/index.d.ts

@@ -1,5 +1,16 @@
-import { AxisDescriptor } from '@progress/kendo-pivotgrid-common';
-import { PivotGridField } from '@progress/kendo-pivotgrid-common';
+import { AxisDescriptor, PivotDataItem, PivotGridField, Tuple } from '@progress/kendo-pivotgrid-common';
+/**
+ * Generates suitable data for Charting visualization.
+ *
+ * @param rows - The PivotGrid's rows prop.
+ * @param columns - The PivotGrid's columns prop.
+ * @param data - The PivotGrid's data prop.
+ * @returns - Suitable data for Charting visualization.
+ */
+export declare const dataCells: (rows?: Tuple[], columns?: Tuple[], data?: PivotDataItem[]) => {
+    row: string[];
+    cells: PivotDataItem[];
+}[];
 /**
  * @hidden
  */

package/dist/es/utils/index.js

@@ -7,6 +7,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import { toColumns, toData, toRows, toTree } from '@progress/kendo-pivotgrid-common';
+/**
+ * Generates suitable data for Charting visualization.
+ *
+ * @param rows - The PivotGrid's rows prop.
+ * @param columns - The PivotGrid's columns prop.
+ * @param data - The PivotGrid's data prop.
+ * @returns - Suitable data for Charting visualization.
+ */
+export var dataCells = function (rows, columns, data) {
+    var pRows = JSON.parse(JSON.stringify(rows || []));
+    var pColumns = JSON.parse(JSON.stringify(columns || []));
+    var pData = JSON.parse(JSON.stringify(data || []));
+    var rowsTree = toTree(pRows);
+    var _a = toRows(rowsTree), rowHeaderLeafs = _a[1], rowHeaderDepth = _a[2];
+    var columnsTree = toTree(pColumns);
+    var _b = toColumns(columnsTree), columnHeaderLeafs = _b[1], columnHeaderBreadth = _b[3];
+    return toData(pData, columnHeaderLeafs, rowHeaderLeafs, columnHeaderBreadth, rowHeaderDepth);
+};
 /**
  * @hidden
  */

package/dist/es/utils/navigation.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @hidden
+ */
+declare class PivotGridNavigation {
+    root: HTMLElement | null;
+    get elements(): HTMLElement[];
+    get first(): HTMLElement | null;
+    get last(): HTMLElement | null;
+    selectors: string[];
+    tabIndex: number;
+    private eventHandlers;
+    private mouseEvents;
+    private keyboardEvents;
+    constructor(settings: {
+        tabIndex: number;
+    });
+    start(root: HTMLElement): void;
+    stop(): void;
+    focusElement(element: HTMLElement | null, previous: HTMLElement | null): void;
+    update: () => void;
+}
+export { PivotGridNavigation };