@progress/kendo-react-pivotgrid 6.1.1 → 7.0.0-develop.10

package/{dist/es/messages → messages}/index.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 /**
  * @hidden
  */

package/{dist/es/models → models}/index.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { SortDescriptor, FilterDescriptor } from '@progress/kendo-data-query';
 import { PivotGridField, PivotGridAxis } from '@progress/kendo-pivotgrid-common';
 import { PivotGridHandle } from '../PivotGrid';

package/package-metadata.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/package.json

@@ -1,20 +1,38 @@
 {
   "name": "@progress/kendo-react-pivotgrid",
-  "version": "6.1.1",
+  "version": "7.0.0-develop.10",
   "description": "React PivotGrid (also called Pivot Table) can be data-bound to an OLAP service and customized extensively. KendoReact PivotGrid package",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/telerik/kendo-react.git"
+  "author": "Progress",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "homepage": "https://www.telerik.com/kendo-react-ui",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
   },
-  "main": "dist/npm/main.js",
-  "types": "dist/npm/main.d.ts",
-  "module": "dist/es/main.js",
-  "jsnext:main": "dist/es/main.js",
-  "scripts": {
-    "test": "cd ../../ && npm run test -- --testPathPattern=/packages/pivotgrid/.*",
-    "build-package": "gulp build-package"
+  "sideEffects": false,
+  "peerDependencies": {
+    "@progress/kendo-data-query": "^1.5.5",
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-pivotgrid-common": "0.5.3",
+    "@progress/kendo-react-buttons": "7.0.0-develop.10",
+    "@progress/kendo-react-common": "7.0.0-develop.10",
+    "@progress/kendo-react-data-tools": "7.0.0-develop.10",
+    "@progress/kendo-react-form": "7.0.0-develop.10",
+    "@progress/kendo-react-indicators": "7.0.0-develop.10",
+    "@progress/kendo-react-intl": "7.0.0-develop.10",
+    "@progress/kendo-react-labels": "7.0.0-develop.10",
+    "@progress/kendo-react-treeview": "7.0.0-develop.10",
+    "@progress/kendo-svg-icons": "^2.0.0",
+    "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0"
   },
-  "homepage": "https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-pivotgrid&utm_content=homepage",
   "keywords": [
     "Kendo UI",
     "React",
@@ -27,51 +45,15 @@
     "PivotGrid",
     "Pivot Table"
   ],
-  "peerDependencies": {
-    "@progress/kendo-data-query": "^1.5.5",
-    "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-react-buttons": "^6.0.0",
-    "@progress/kendo-react-data-tools": "^6.0.0",
-    "@progress/kendo-react-form": "^6.0.0",
-    "@progress/kendo-react-indicators": "^6.0.0",
-    "@progress/kendo-react-intl": "^6.0.0",
-    "@progress/kendo-react-labels": "^6.0.0",
-    "@progress/kendo-react-treeview": "^6.0.0",
-    "@progress/kendo-svg-icons": "^2.0.0",
-    "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
-  },
-  "dependencies": {
-    "@progress/kendo-pivotgrid-common": "0.5.3",
-    "@progress/kendo-react-common": "6.1.1",
-    "prop-types": "^15.6.0"
-  },
-  "devDependencies": {
-    "@progress/kendo-data-query": "^1.5.5",
-    "@progress/kendo-date-math": "^1.5.2",
-    "@progress/kendo-drawing": "^1.17.2",
-    "@progress/kendo-file-saver": "^1.1.1",
-    "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-ooxml": "^1.6.5",
-    "@progress/kendo-react-animation": "6.1.1",
-    "@progress/kendo-react-buttons": "6.1.1",
-    "@progress/kendo-react-charts": "6.1.1",
-    "@progress/kendo-react-data-tools": "6.1.1",
-    "@progress/kendo-react-form": "6.1.1",
-    "@progress/kendo-react-indicators": "6.1.1",
-    "@progress/kendo-react-intl": "6.1.1",
-    "@progress/kendo-react-labels": "6.1.1",
-    "@progress/kendo-react-treeview": "6.1.1",
-    "@progress/kendo-svg-icons": "^2.0.0"
-  },
   "@progress": {
     "friendlyName": "PivotGrid",
     "framework": "KendoReact"
   },
-  "author": "Progress",
-  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telerik/kendo-react.git"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "sideEffects": false
-}
+  }
+}

package/{dist/es/shared → shared}/PivotGridConfiguratorEditorEventsContext.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { PivotGridAxisFilterFieldsExpandChangeEvent, PivotGridAxisFilterFieldExpandEvent } from '../components/AxisFilterFieldsEditor';
 /**

package/{dist/npm/shared → shared}/PivotGridConfiguratorEditorStateContext.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { PivotGridConfiguratorAction, PivotGridConfiguratorEditorState } from '../hooks/usePivotConfiguratorEditor';
 /**

package/shared/index.d.ts

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './PivotGridConfiguratorEditorEventsContext';
+export * from './PivotGridConfiguratorEditorStateContext';

package/{dist/es/utils → utils}/index.d.ts

@@ -1,3 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
 import { AxisDescriptor, PivotDataItem, PivotGridField, Tuple } from '@progress/kendo-pivotgrid-common';
 /**
  * Generates suitable data for Charting visualization.

package/about.md

@@ -1,3 +0,0 @@
-<a href="https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid&utm_content=banner" target="_blank">
-<img src="https://www.telerik.com/kendo-react-ui/components/npm-banner.svg" alt="KendoReact NPM Banner">
-</a>

package/dist/cdn/js/kendo-react-pivotgrid.js.LICENSE.txt

@@ -1,14 +0,0 @@
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */

package/dist/es/PivotGrid.d.ts

@@ -1,177 +0,0 @@
-import * as React from 'react';
-import { PivotGridRowProps } from './components/Row';
-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, AxisRow } from '@progress/kendo-pivotgrid-common';
-import { PivotGridAxesChangeEvent } from './models';
-/**
- * Represents the props of the [KendoReact PivotGrid component]({% slug api_pivotgrid_pivotgrid %}).
- */
-export interface PivotGridProps {
-    /**
-     * Sets the `style` property of the top-most element of the PivotGrid.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the `className` property of the top-most element of the PivotGrid in addition to the default `k-pivotgrid` class.
-     */
-    className?: string;
-    /**
-     * Sets the `id` property of the top-most element of the PivotGrid.
-     */
-    id?: string;
-    /**
-     * 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.
-     */
-    data?: PivotDataItem[];
-    /**
-     * Sets the `columns` data of the PivotGrid.
-     */
-    columns?: Tuple[];
-    /**
-     * Sets the `rows` data of the PivotGrid.
-     */
-    rows?: Tuple[];
-    /**
-     * The configuration of the `column` axes.
-     */
-    columnAxes?: PivotGridAxis[];
-    /**
-     * A callback, fired whenever the `columnAxes` property should change.
-     */
-    onColumnAxesChange?: (event: PivotGridAxesChangeEvent) => void;
-    /**
-     * The configuration of the `row` axes.
-     */
-    rowAxes?: PivotGridAxis[];
-    /**
-     * A callback, fired whenever the `rowAxes` property should change.
-     */
-    onRowAxesChange?: (event: PivotGridAxesChangeEvent) => void;
-    /**
-     * Overrides the default `row` component.
-     *
-     * The default component is: [PivotGridRow]({% slug api_pivotgrid_pivotgridrow %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    row?: CustomComponent<PivotGridRowProps>;
-    /**
-     * Overrides the default `column` component.
-     *
-     * The default component is: [PivotGridColumn]({% slug api_pivotgrid_pivotgridcolumn %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    column?: CustomComponent<PivotGridColumnProps>;
-    /**
-     * Overrides the default `cell` component.
-     *
-     * The default component is: [PivotGridCell]({% slug api_pivotgrid_pivotgridcell %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    cell?: CustomComponent<PivotGridCellProps>;
-    /**
-     * Overrides the default `headerCell` component.
-     *
-     * The default component is: [PivotGridHeaderCell]({% slug api_pivotgrid_pivotgridheadercell %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    headerCell?: CustomComponent<PivotGridHeaderCellProps>;
-    /**
-     * Overrides the default column-headers `row` component.
-     *
-     * The default component is: [PivotGridRow]({% slug api_pivotgrid_pivotgridrow %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    columnHeadersRow?: React.ComponentType<PivotGridRowProps>;
-    /**
-     * Overrides the default column-headers `column` component.
-     *
-     * The default component is: [PivotGridColumn]({% slug api_pivotgrid_pivotgridcolumn %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    columnHeadersColumn?: React.ComponentType<PivotGridColumnProps>;
-    /**
-     * Overrides the default column-headers `headerCell` component.
-     *
-     * The default component is: [PivotGridHeaderCell]({% slug api_pivotgrid_pivotgridheadercell %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    columnHeadersCell?: React.ComponentType<PivotGridHeaderCellProps>;
-    /**
-     * Overrides the default row-headers `row` component.
-     *
-     * The default component is: [PivotGridRow]({% slug api_pivotgrid_pivotgridrow %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    rowHeadersRow?: React.ComponentType<PivotGridRowProps>;
-    /**
-     * Overrides the default row-headers `column` component.
-     *
-     * The default component is: [PivotGridColumn]({% slug api_pivotgrid_pivotgridcolumn %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    rowHeadersColumn?: React.ComponentType<PivotGridColumnProps>;
-    /**
-     * Overrides the default row-headers `headerCell` component.
-     *
-     * The default component is: [PivotGridHeaderCell]({% slug api_pivotgrid_pivotgridheadercell %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    rowHeadersCell?: React.ComponentType<PivotGridHeaderCellProps>;
-    /**
-     * Overrides the default data `row` component.
-     *
-     * The default component is: [PivotGridRow]({% slug api_pivotgrid_pivotgridrow %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    dataRow?: React.ComponentType<PivotGridRowProps>;
-    /**
-     * Overrides the default data `column` component.
-     *
-     * The default component is: [PivotGridColumn]({% slug api_pivotgrid_pivotgridcolumn %}).
-     *
-     * For more information, refer to the [PivotGrid Customization]({% slug customization_pivotgrid %}) article.
-     */
-    dataColumn?: React.ComponentType<PivotGridColumnProps>;
-}
-/**
- * Represents the object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the PivotGrid component.
- */
-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 %}).
- */
-export declare const PivotGrid: React.ForwardRefExoticComponent<PivotGridProps & React.RefAttributes<PivotGridHandle | null>>;

package/dist/es/PivotGrid.js

@@ -1,245 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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';
-import { PivotGridHeaderCell } from './components/HeaderCell';
-import { useHorizontalScrollSync } from './hooks/useHorizontalScrollSync';
-import { useVerticalScrollSync } from './hooks/useVerticalScrollSync';
-import { PivotGridColumn } from './components/Column';
-import { generateKey, generateDataKey } from './utils';
-import { classNames, setScrollbarWidth, useCustomComponent } from '@progress/kendo-react-common';
-import { toColumns, toRows, toTree, toData, PivotGridNavigation } from '@progress/kendo-pivotgrid-common';
-/**
- * Represents the [KendoReact PivotGrid component]({% slug api_pivotgrid_pivotgridprops %}).
- */
-export var PivotGrid = React.forwardRef(function (props, ref) {
-    validatePackage(packageMetadata);
-    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);
-    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({
-                value: newRowAxes,
-                target: target.current,
-                syntheticEvent: syntheticEvent
-            });
-        }
-    };
-    var handleColumnAxesChange = function (newRowAxes, syntheticEvent) {
-        if (props.onColumnAxesChange) {
-            props.onColumnAxesChange({
-                value: newRowAxes,
-                target: target.current,
-                syntheticEvent: syntheticEvent
-            });
-        }
-    };
-    var rowsTree = toTree((rows || []).slice());
-    var _b = useHeaders((rowAxes || []).slice(), rowsTree, handleRowAxesChange), dispatchRows = _b[1];
-    var _c = toRows(rowsTree), rowHeaderRows = _c[0], rowHeaderLeafs = _c[1], rowHeaderDepth = _c[2], rowHeaderBreadth = _c[3];
-    var columnsTree = toTree((columns || []).slice());
-    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 = [];
-    /* Defaults */
-    var _f = useCustomComponent(props.row || defaultProps.row), RowComponent = _f[0], RowProps = _f[1];
-    var _g = useCustomComponent(props.column || defaultProps.column), ColumnComponent = _g[0], ColumnProps = _g[1];
-    var _h = useCustomComponent(props.cell || defaultProps.cell), CellComponent = _h[0], CellProps = _h[1];
-    var _j = useCustomComponent(props.headerCell || defaultProps.headerCell), HeaderCellComponent = _j[0], HeaderCellProps = _j[1];
-    /* Advanced */
-    var ColumnHeadersRowComponent = props.columnHeadersRow || RowComponent;
-    var ColumnHeadersColumnComponent = props.columnHeadersColumn || ColumnComponent;
-    var ColumnHeadersColumnCellComponent = props.columnHeadersCell || HeaderCellComponent;
-    var RowHeadersRowComponent = props.rowHeadersRow || RowComponent;
-    var RowHeadersColumnComponent = props.rowHeadersColumn || ColumnComponent;
-    var RowHeadersCellComponent = props.rowHeadersCell || HeaderCellComponent;
-    var DataRowComponent = props.dataRow || RowComponent;
-    var DataColumnComponent = props.dataColumn || ColumnComponent;
-    for (var i = 0; i < columnHeaderLeafs.length; i++) {
-        dataColumns.push(React.createElement(DataColumnComponent, __assign({ key: String(columnHeaderLeafs[i].path) }, ColumnProps, { path: columnHeaderLeafs[i].path })));
-        columnHeadersColumns.push(React.createElement(ColumnHeadersColumnComponent, __assign({ key: String(columnHeaderLeafs[i].path) }, ColumnProps, { path: columnHeaderLeafs[i].path })));
-    }
-    for (var i = 0; i < rowHeaderBreadth; i++) {
-        rowHeaderColumns.push(React.createElement(RowHeadersColumnComponent, __assign({ key: i }, ColumnProps)));
-    }
-    var handleColumnCellClick = function (event) {
-        if (event.target.props.expandable) {
-            dispatchColumns({
-                type: HEADERS_ACTION.toggle,
-                payload: event.target.props.dataItem.path
-            }, event.syntheticEvent);
-        }
-    };
-    var handleRowCellClick = function (event) {
-        if (event.target.props.expandable) {
-            dispatchRows({
-                type: HEADERS_ACTION.toggle,
-                payload: event.target.props.dataItem.path
-            }, event.syntheticEvent);
-        }
-    };
-    var handleHorizontalScroll = useHorizontalScrollSync(valuesHeadersContainer, columnHeadersContainer);
-    var handleVerticalScroll = useVerticalScrollSync(valuesHeadersContainer, rowHeadersContainer);
-    var handleValuesContainerScroll = function (event) {
-        handleHorizontalScroll(event);
-        handleVerticalScroll(event);
-    };
-    var setRowsTemplate = React.useCallback(function () {
-        if (element.current && columnHeadersTable.current) {
-            // Reset gridTemplateRows before getting the new size
-            element.current.style.gridTemplateRows = '';
-            element.current.style.gridTemplateRows = "".concat(columnHeadersTable.current.offsetHeight, "px 1fr");
-        }
-    }, []);
-    var setColumnsTemplate = React.useCallback(function () {
-        if (element.current && rowHeadersTable.current) {
-            // Reset gridTemplateColumns before getting the new size
-            element.current.style.gridTemplateColumns = '';
-            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);
-            observer_1.observe(columnHeadersTable.current);
-            return function () { observer_1.disconnect(); };
-        }
-    }, [setRowsTemplate]);
-    React.useEffect(function () {
-        if (rowHeadersTable.current) {
-            var observer_2 = new window.ResizeObserver(setColumnsTemplate);
-            observer_2.observe(rowHeadersTable.current);
-            return function () { observer_2.disconnect(); };
-        }
-    }, [setColumnsTemplate]);
-    React.useLayoutEffect(function () {
-        setScrollbarWidth();
-        if (rowHeadersTable.current) {
-            var observer_3 = new window.ResizeObserver(setScrollbarWidth);
-            observer_3.observe(rowHeadersTable.current);
-            return function () { observer_3.disconnect(); };
-        }
-    }, []);
-    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" },
-            React.createElement("span", { className: "k-sr-only" }, 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", role: "none" },
-                React.createElement("colgroup", null, columnHeadersColumns),
-                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, role: "row" }, RowProps), row.cells.map(function (cell, cellIdx) {
-                        var first = cellIdx !== 0 && !foundCell;
-                        if (cell) {
-                            foundCell = true;
-                        }
-                        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: 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", role: "none" },
-                React.createElement("colgroup", null, rowHeaderColumns),
-                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, role: "rowheader" }), cell.caption))
-                    : null; }))); })))),
-        React.createElement("div", { ref: valuesHeadersContainer, className: "k-pivotgrid-values", onScroll: handleValuesContainerScroll },
-            React.createElement("table", { className: "k-pivotgrid-table", role: "none" },
-                React.createElement("colgroup", null, dataColumns),
-                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: [],
-    columnAxes: [],
-    data: [],
-    row: PivotGridRow,
-    column: PivotGridColumn,
-    cell: PivotGridCell,
-    headerCell: PivotGridHeaderCell
-};
-PivotGrid.displayName = 'KendoReactPivotGrid';