@progress/kendo-react-pivotgrid 5.4.0-dev.202205200719 → 5.4.0-dev.202206061009

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

@@ -3,17 +3,17 @@ import { PivotGridField } from '@progress/kendo-pivotgrid-common';
 /**
  * @hidden
  */
-export declare const recursiveMap: <I extends any, O extends any>(nodes?: I[], map?: {
+export declare const recursiveMap: <I extends unknown, O extends unknown>(nodes?: I[], map?: {
     [key: string]: Function;
-}, parent?: any) => O[];
+}, parent?: null) => O[];
 /**
  * @hidden
  */
-export declare const flatMap: <T extends any>(nodes?: T[]) => T[];
+export declare const flatMap: <T extends unknown>(nodes?: T[]) => T[];
 /**
  * @hidden
  */
-export declare const extractDefaultFields: (columns?: AxisDescriptor[]) => any[];
+export declare const extractDefaultFields: (columns?: AxisDescriptor[]) => unknown[];
 /**
  * @hidden
  */
@@ -25,11 +25,11 @@ export declare const generateDataKey: (rows: any, columns: any) => string;
 /**
  * @hidden
  */
-export declare const findFilter: (filter: any[], member: any, operator?: any) => any;
+export declare const findFilter: (filter: any[] | undefined, member: any, operator?: any) => any;
 /**
  * @hidden
  */
-export declare const findFilters: (filter: any[], member: any, operator?: any) => any;
+export declare const findFilters: (filter: any[] | undefined, member: any, operator?: any) => any;
 /**
  * @hidden
  */

package/dist/es/utils/index.js

@@ -1,3 +1,12 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 /**
  * @hidden
  */
@@ -18,7 +27,7 @@ export var recursiveMap = function (nodes, map, parent) {
  */
 export var flatMap = function (nodes) {
     if (nodes === void 0) { nodes = []; }
-    var result = nodes.slice();
+    var result = __spreadArray([], nodes, true);
     (nodes || []).forEach(function (child) {
         result = result.concat(flatMap(child.children));
     });
@@ -40,12 +49,12 @@ export var extractDefaultFields = function (columns) {
  */
 export var generateKey = function (args) {
     if (args === void 0) { args = []; }
-    return "" + args.join(',');
+    return "".concat(args.join(','));
 };
 /**
  * @hidden
  */
-export var generateDataKey = function (rows, columns) { return generateKey(rows.map(function (m) { return m.name; })) + "|" + generateKey(columns.map(function (m) { return m.name; })); };
+export var generateDataKey = function (rows, columns) { return "".concat(generateKey(rows.map(function (m) { return m.name; })), "|").concat(generateKey(columns.map(function (m) { return m.name; }))); };
 /**
  * @hidden
  */

package/dist/npm/PivotGrid.d.ts

@@ -161,4 +161,4 @@ export interface PivotGridHandle {
 /**
  * Represents the [KendoReact PivotGrid component]({% slug api_pivotgrid_pivotgridprops %}).
  */
-export declare const PivotGrid: React.ForwardRefExoticComponent<PivotGridProps & React.RefAttributes<PivotGridHandle>>;
+export declare const PivotGrid: React.ForwardRefExoticComponent<PivotGridProps & React.RefAttributes<PivotGridHandle | null>>;

package/dist/npm/PivotGrid.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+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");
@@ -28,8 +29,8 @@ var kendo_pivotgrid_common_1 = require("@progress/kendo-pivotgrid-common");
  * Represents the [KendoReact PivotGrid component]({% slug api_pivotgrid_pivotgridprops %}).
  */
 exports.PivotGrid = React.forwardRef(function (props, ref) {
-    kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
-    var _a = __assign({}, defaultProps, props), rows = _a.rows, rowAxes = _a.rowAxes, columns = _a.columns, columnAxes = _a.columnAxes, data = _a.data;
+    (0, kendo_react_common_1.validatePackage)(package_metadata_1.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);
     React.useImperativeHandle(target, function () { return ({ props: props, element: element.current }); });
@@ -57,21 +58,21 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
             });
         }
     };
-    var rowsTree = kendo_pivotgrid_common_1.toTree((rows || []).slice());
-    var _b = useHeaders_1.useHeaders((rowAxes || []).slice(), rowsTree, handleRowAxesChange), dispatchRows = _b[1];
-    var _c = kendo_pivotgrid_common_1.toRows(rowsTree), rowHeaderRows = _c[0], rowHeaderLeafs = _c[1], rowHeaderDepth = _c[2], rowHeaderBreadth = _c[3];
-    var columnsTree = kendo_pivotgrid_common_1.toTree((columns || []).slice());
-    var _d = useHeaders_1.useHeaders((columnAxes || []).slice(), columnsTree, handleColumnAxesChange), dispatchColumns = _d[1];
-    var _e = kendo_pivotgrid_common_1.toColumns(columnsTree), columnHeaderRows = _e[0], columnHeaderLeafs = _e[1], columnHeaderBreadth = _e[3];
-    var measures = kendo_pivotgrid_common_1.toData((data || []).slice(), columnHeaderLeafs, rowHeaderLeafs, columnHeaderBreadth, rowHeaderDepth);
+    var rowsTree = (0, kendo_pivotgrid_common_1.toTree)((rows || []).slice());
+    var _b = (0, useHeaders_1.useHeaders)((rowAxes || []).slice(), rowsTree, handleRowAxesChange), dispatchRows = _b[1];
+    var _c = (0, kendo_pivotgrid_common_1.toRows)(rowsTree), rowHeaderRows = _c[0], rowHeaderLeafs = _c[1], rowHeaderDepth = _c[2], rowHeaderBreadth = _c[3];
+    var columnsTree = (0, kendo_pivotgrid_common_1.toTree)((columns || []).slice());
+    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);
     var dataColumns = [];
     var rowHeaderColumns = [];
     var columnHeadersColumns = [];
     /* Defaults */
-    var _f = kendo_react_common_2.useCustomComponent(props.row || defaultProps.row), RowComponent = _f[0], RowProps = _f[1];
-    var _g = kendo_react_common_2.useCustomComponent(props.column || defaultProps.column), ColumnComponent = _g[0], ColumnProps = _g[1];
-    var _h = kendo_react_common_2.useCustomComponent(props.cell || defaultProps.cell), CellComponent = _h[0], CellProps = _h[1];
-    var _j = kendo_react_common_2.useCustomComponent(props.headerCell || defaultProps.headerCell), HeaderCellComponent = _j[0], HeaderCellProps = _j[1];
+    var _f = (0, kendo_react_common_2.useCustomComponent)(props.row || defaultProps.row), RowComponent = _f[0], RowProps = _f[1];
+    var _g = (0, kendo_react_common_2.useCustomComponent)(props.column || defaultProps.column), ColumnComponent = _g[0], ColumnProps = _g[1];
+    var _h = (0, kendo_react_common_2.useCustomComponent)(props.cell || defaultProps.cell), CellComponent = _h[0], CellProps = _h[1];
+    var _j = (0, kendo_react_common_2.useCustomComponent)(props.headerCell || defaultProps.headerCell), HeaderCellComponent = _j[0], HeaderCellProps = _j[1];
     /* Advanced */
     var ColumnHeadersRowComponent = props.columnHeadersRow || RowComponent;
     var ColumnHeadersColumnComponent = props.columnHeadersColumn || ColumnComponent;
@@ -104,8 +105,8 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
             }, event.syntheticEvent);
         }
     };
-    var handleHorizontalScroll = useHorizontalScrollSync_1.useHorizontalScrollSync(valuesHeadersContainer, columnHeadersContainer);
-    var handleVerticalScroll = useVerticalScrollSync_1.useVerticalScrollSync(valuesHeadersContainer, rowHeadersContainer);
+    var handleHorizontalScroll = (0, useHorizontalScrollSync_1.useHorizontalScrollSync)(valuesHeadersContainer, columnHeadersContainer);
+    var handleVerticalScroll = (0, useVerticalScrollSync_1.useVerticalScrollSync)(valuesHeadersContainer, rowHeadersContainer);
     var handleValuesContainerScroll = function (event) {
         handleHorizontalScroll(event);
         handleVerticalScroll(event);
@@ -114,14 +115,14 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
         if (element.current && columnHeadersTable.current) {
             // Reset gridTemplateRows before getting the new size
             element.current.style.gridTemplateRows = '';
-            element.current.style.gridTemplateRows = columnHeadersTable.current.offsetHeight + "px 1fr";
+            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 = rowHeadersTable.current.offsetWidth + "px 1fr";
+            element.current.style.gridTemplateColumns = "".concat(rowHeadersTable.current.offsetWidth, "px 1fr");
         }
     }, []);
     React.useEffect(function () {
@@ -139,14 +140,14 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
         }
     }, [setColumnsTemplate]);
     React.useLayoutEffect(function () {
-        kendo_react_common_2.setScrollbarWidth();
+        (0, kendo_react_common_2.setScrollbarWidth)();
         if (rowHeadersTable.current) {
             var observer_3 = new window.ResizeObserver(kendo_react_common_2.setScrollbarWidth);
             observer_3.observe(rowHeadersTable.current);
             return function () { observer_3.disconnect(); };
         }
     }, []);
-    return (React.createElement("div", { ref: element, id: props.id, style: props.style, tabIndex: props.tabIndex, className: kendo_react_common_2.classNames('k-pivotgrid', props.className) },
+    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" }),
         React.createElement("div", { ref: columnHeadersContainer, className: "k-pivotgrid-column-headers", onScroll: handleHorizontalScroll },
             React.createElement("table", { ref: columnHeadersTable, className: "k-pivotgrid-table" },
@@ -161,9 +162,9 @@ 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: utils_1.generateKey(cell.normalizedPath)
+                            ? (React.createElement(ColumnHeadersColumnCellComponent, __assign({}, HeaderCellProps, { key: (0, utils_1.generateKey)(cell.normalizedPath)
                                     + (cell.total ? '|[TOTAL]' : '')
-                                    + (expanded ? '|[EXPANDED]' : ''), "data-key": utils_1.generateKey(cell.normalizedPath)
+                                    + (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))
                             : null;
@@ -172,17 +173,17 @@ exports.PivotGrid = React.forwardRef(function (props, ref) {
         React.createElement("div", { ref: rowHeadersContainer, className: "k-pivotgrid-row-headers" },
             React.createElement("table", { ref: rowHeadersTable, className: "k-pivotgrid-table" },
                 React.createElement("colgroup", null, rowHeaderColumns),
-                React.createElement("tbody", { className: "k-pivotgrid-tbody" }, rowHeaderRows.map(function (row, rowId) { return (React.createElement(RowHeadersRowComponent, __assign({ key: utils_1.generateKey(rowHeaderLeafs[rowId].path) }, RowProps, { path: rowHeaderLeafs[rowId].path }), row.cells.filter(Boolean).map(function (cell) { return cell
-                    ? (React.createElement(RowHeadersCellComponent, __assign({}, HeaderCellProps, { key: utils_1.generateKey(cell.normalizedPath)
+                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(RowHeadersCellComponent, __assign({}, HeaderCellProps, { key: (0, utils_1.generateKey)(cell.normalizedPath)
                             + (cell.total ? '|[TOTAL]' : '')
-                            + (Boolean(cell.children && cell.children.length) ? '|[EXPANDED]' : ''), "data-key": utils_1.generateKey(cell.normalizedPath)
+                            + (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))
                     : null; }))); })))),
         React.createElement("div", { ref: valuesHeadersContainer, className: "k-pivotgrid-values", onScroll: handleValuesContainerScroll },
             React.createElement("table", { className: "k-pivotgrid-table" },
                 React.createElement("colgroup", null, dataColumns),
-                React.createElement("tbody", { className: "k-pivotgrid-tbody" }, measures.map(function (row, rowId) { return (React.createElement(DataRowComponent, __assign({ key: utils_1.generateKey(rowHeaderLeafs[rowId].path) }, RowProps, { path: rowHeaderLeafs[rowId].path }), row.cells.map(function (cell, cellId) { return (React.createElement(CellComponent, __assign({ key: "" + utils_1.generateDataKey(cell.rowTuple.members, cell.columnTuple.members), "data-key": "" + 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" }, 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')); }))); }))))));
 });
 var defaultProps = {
     rowAxes: [],

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

@@ -31,7 +31,7 @@ export interface PivotGridAxesEditorProps extends FieldProps {
  * @hidden
  */
 export declare const PivotGridConfiguratorEditorAxesContext: React.Context<{
-    axes: string;
+    axes: string | null;
 }>;
 /**
  * Represents the object which is passed to the [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) callback of the PivotGridAxesEditor component.
@@ -43,4 +43,4 @@ export interface PivotGridAxesEditorHandle {
 /**
  * Represents the [KendoReact PivotGridAxesEditor component]({% slug api_pivotgrid_pivotgridaxeseditorprops %}).
  */
-export declare const PivotGridAxesEditor: React.ForwardRefExoticComponent<Pick<PivotGridAxesEditorProps, string | number> & React.RefAttributes<PivotGridAxesEditorHandle>>;
+export declare const PivotGridAxesEditor: React.ForwardRefExoticComponent<Pick<PivotGridAxesEditorProps, keyof PivotGridAxesEditorProps> & React.RefAttributes<PivotGridAxesEditorHandle | null>>;

package/dist/npm/components/AxesEditor.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotGridAxesEditor = exports.PivotGridConfiguratorEditorAxesContext = void 0;
 var React = require("react");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -23,19 +24,19 @@ exports.PivotGridConfiguratorEditorAxesContext = React.createContext({ axes: nul
  * Represents the [KendoReact PivotGridAxesEditor component]({% slug api_pivotgrid_pivotgridaxeseditorprops %}).
  */
 exports.PivotGridAxesEditor = React.forwardRef(function (props, ref) {
-    var _a = __assign({}, defaultProps, props), value = _a.value, field = _a.field;
+    var _a = __assign(__assign({}, defaultProps), props), value = _a.value, field = _a.field;
     var chipList = React.useRef(null);
     var element = React.useRef(null);
     var target = React.useRef(null);
-    var _b = kendo_react_common_1.useCustomComponent(props.chipList || defaultProps.chipList), ChipListComponent = _b[0], ChipListProps = _b[1];
+    var _b = (0, kendo_react_common_1.useCustomComponent)(props.chipList || defaultProps.chipList), ChipListComponent = _b[0], ChipListProps = _b[1];
     React.useImperativeHandle(element, function () { return chipList.current && chipList.current.element; });
     React.useImperativeHandle(target, function () { return ({ props: props, element: element.current }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var data = value
         .filter(function (v) { return v.name.length === 1 && v.name.every(function (n) { return n.indexOf('&') === -1; }); })
-        .map(function (i) { return (__assign({}, i, { text: String(i.name) })); });
+        .map(function (i) { return (__assign(__assign({}, i), { text: String(i.name) })); });
     return (React.createElement(exports.PivotGridConfiguratorEditorAxesContext.Provider, { value: { axes: field } },
-        React.createElement(ChipListComponent, __assign({ ref: kendo_react_common_1.canUseRef(ChipListComponent) ? chipList : undefined, textField: "text", valueField: "name", data: data, chip: AxisEditor_1.PivotGridAxisEditor, style: { position: 'relative' }, className: props.className, selection: "none" }, ChipListProps))));
+        React.createElement(ChipListComponent, __assign({ ref: (0, kendo_react_common_1.canUseRef)(ChipListComponent) ? chipList : undefined, textField: "text", valueField: "name", data: data, chip: AxisEditor_1.PivotGridAxisEditor, style: { position: 'relative' }, className: props.className, selection: "none" }, ChipListProps))));
 });
 var defaultProps = {
     value: [],

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

@@ -49,4 +49,4 @@ export interface PivotGridAxisEditorHandle {
 /**
  * Represents the [KendoReact PivotGridAxisEditor component]({% slug api_pivotgrid_pivotgridaxiseditorprops %}).
  */
-export declare const PivotGridAxisEditor: React.ForwardRefExoticComponent<PivotGridAxisEditorProps & React.RefAttributes<PivotGridAxisEditorHandle>>;
+export declare const PivotGridAxisEditor: React.ForwardRefExoticComponent<PivotGridAxisEditorProps & React.RefAttributes<PivotGridAxisEditorHandle | null>>;

package/dist/npm/components/AxisEditor.js

@@ -10,7 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotGridAxisEditor = void 0;
 var React = require("react");
 var kendo_pivotgrid_common_1 = require("@progress/kendo-pivotgrid-common");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -36,12 +46,12 @@ exports.PivotGridAxisEditor = React.forwardRef(function (props, ref) {
     React.useImperativeHandle(element, function () { return chip.current && chip.current.element; });
     React.useImperativeHandle(target, function () { return ({ props: props, element: element.current }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var _c = kendo_react_common_1.useCustomComponent(props.chip || defaultProps.chip), ChipComponent = _c[0], ChipProps = _c[1];
-    var _d = kendo_react_common_1.useCustomComponent(props.dropClue || defaultProps.dropClue), DropClueComponent = _d[0], DropClueProps = _d[1];
-    var _e = kendo_react_common_1.useCustomComponent(props.columnMenuTextColumn || defaultProps.columnMenuTextColumn), ColumnMenuTextColumnComponent = _e[0], ColumnMenuTextColumnProps = _e[1];
-    var _f = kendo_react_common_1.useCustomComponent(props.filterFieldsEditor || defaultProps.filterFieldsEditor), FilterFieldsEditorComponent = _f[0], FilterFieldsEditorProps = _f[1];
-    var inFilter = utils_1.findFilters(state.filter, String(props.value), 'in');
-    var textFilter = utils_1.findFilters(state.filter, String(props.value));
+    var _c = (0, kendo_react_common_1.useCustomComponent)(props.chip || defaultProps.chip), ChipComponent = _c[0], ChipProps = _c[1];
+    var _d = (0, kendo_react_common_1.useCustomComponent)(props.dropClue || defaultProps.dropClue), DropClueComponent = _d[0], DropClueProps = _d[1];
+    var _e = (0, kendo_react_common_1.useCustomComponent)(props.columnMenuTextColumn || defaultProps.columnMenuTextColumn), ColumnMenuTextColumnComponent = _e[0], ColumnMenuTextColumnProps = _e[1];
+    var _f = (0, kendo_react_common_1.useCustomComponent)(props.filterFieldsEditor || defaultProps.filterFieldsEditor), FilterFieldsEditorComponent = _f[0], FilterFieldsEditorProps = _f[1];
+    var inFilter = (0, utils_1.findFilters)(state.filter, String(props.value), 'in');
+    var textFilter = (0, utils_1.findFilters)(state.filter, String(props.value));
     var handleSortChange = function (syntheticEvent, sort) {
         dispatchState({ type: hooks_1.PIVOT_CONFIGURATOR_ACTION.setSort, payload: sort }, syntheticEvent);
     };
@@ -49,7 +59,7 @@ exports.PivotGridAxisEditor = React.forwardRef(function (props, ref) {
         if (filter.length) {
             dispatchState({
                 type: hooks_1.PIVOT_CONFIGURATOR_ACTION.setFilter,
-                payload: (inFilter || []).concat(filter.reduce(function (acc, current) { return acc.concat(current.filters.filter(function (f) { return f.value; })); }, []))
+                payload: __spreadArray(__spreadArray([], (inFilter || []), true), filter.reduce(function (acc, current) { return __spreadArray(__spreadArray([], acc, true), current.filters.filter(function (f) { return f.value; }), true); }, []), true)
             }, syntheticEvent);
         }
         else {
@@ -61,7 +71,7 @@ exports.PivotGridAxisEditor = React.forwardRef(function (props, ref) {
     };
     var customRender = function (children) {
         var customizedChildren = children.slice();
-        var filter = utils_1.findFilter(state.filter, String(props.dataItem.name), 'in');
+        var filter = (0, utils_1.findFilter)(state.filter, String(props.dataItem.name), 'in');
         customizedChildren.splice(1, 0, (React.createElement(FilterFieldsEditorComponent, __assign({ key: 'axis-filter-fields-editor', defaultFilter: filter, dataItem: props.dataItem, data: props.dataItem.fields, axes: axes }, FilterFieldsEditorProps))));
         return customizedChildren;
     };
@@ -75,7 +85,7 @@ exports.PivotGridAxisEditor = React.forwardRef(function (props, ref) {
             return;
         }
         if (element.current) {
-            element.current.style.transform = "translate(" + (event.clientX - initialX.current) + "px, " + (event.clientY - initialY.current) + "px)";
+            element.current.style.transform = "translate(".concat(event.clientX - initialX.current, "px, ").concat(event.clientY - initialY.current, "px)");
         }
         setDrag(true);
         dispatchState({ type: hooks_1.PIVOT_CONFIGURATOR_ACTION.setDragItem, payload: props.dataItem });
@@ -84,7 +94,7 @@ exports.PivotGridAxisEditor = React.forwardRef(function (props, ref) {
         setDrag(false);
         if (state.dragItem) {
             if (element.current) {
-                element.current.style.transform = null;
+                element.current.style.transform = '';
             }
             dispatchState({ type: hooks_1.PIVOT_CONFIGURATOR_ACTION.drop, payload: props.dataItem });
         }
@@ -105,20 +115,20 @@ exports.PivotGridAxisEditor = React.forwardRef(function (props, ref) {
             }
         }
     };
-    kendo_react_common_1.useDraggable(element, {
+    (0, kendo_react_common_1.useDraggable)(element, {
         onPress: handlePress,
         onDrag: handleDrag,
         onRelease: handleRelease
     });
     return (React.createElement(React.Fragment, null,
-        (state.dropTarget && kendo_pivotgrid_common_1.compareAxes(state.dropTarget, props.dataItem) && state.dropDirection === 'before')
+        (state.dropTarget && (0, kendo_pivotgrid_common_1.compareAxes)(state.dropTarget, props.dataItem) && state.dropDirection === 'before')
             && (React.createElement(DropClueComponent, __assign({}, DropClueProps))),
-        React.createElement(ChipComponent, __assign({ ref: kendo_react_common_1.canUseRef(ChipComponent) ? chip : undefined }, props, { removable: true, onRemove: handleRemove, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, style: { pointerEvents: drag ? 'none' : undefined }, rounded: 'full' }, ChipProps),
+        React.createElement(ChipComponent, __assign({ ref: (0, kendo_react_common_1.canUseRef)(ChipComponent) ? chip : undefined }, props, { removable: true, onRemove: handleRemove, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, style: { pointerEvents: drag ? 'none' : undefined }, rounded: 'full' }, ChipProps),
             props.text,
             (axes !== 'measureAxes') && (React.createElement(ColumnMenuTextColumnComponent, __assign({ field: String(props.value), itemsRender: customRender, sort: state.sort, onSortChange: handleSortChange, filter: (textFilter && textFilter.length) ? [{ logic: 'and', filters: textFilter }] : undefined, onFilterChange: handleFilterChange, filterContent: [
                     kendo_react_data_tools_1.ColumnMenuTextFilter
                 ] }, ColumnMenuTextColumnProps)))),
-        (state.dropTarget && kendo_pivotgrid_common_1.compareAxes(state.dropTarget, props.dataItem) && state.dropDirection === 'after')
+        (state.dropTarget && (0, kendo_pivotgrid_common_1.compareAxes)(state.dropTarget, props.dataItem) && state.dropDirection === 'after')
             && (React.createElement(DropClueComponent, __assign({}, DropClueProps)))));
 });
 var defaultProps = {

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

@@ -111,4 +111,4 @@ export interface PivotGridAxisFilterFieldsEditorHandle {
 /**
  * Represents the [KendoReact PivotGridAxisFilterFieldsEditor component]({% slug api_pivotgrid_pivotgridaxisfilterfieldseditorprops %}).
  */
-export declare const PivotGridAxisFilterFieldsEditor: React.ForwardRefExoticComponent<PivotGridAxisFilterFieldsEditorProps & React.RefAttributes<PivotGridAxisFilterFieldsEditorHandle>>;
+export declare const PivotGridAxisFilterFieldsEditor: React.ForwardRefExoticComponent<PivotGridAxisFilterFieldsEditorProps & React.RefAttributes<PivotGridAxisFilterFieldsEditorHandle | null>>;

package/dist/npm/components/AxisFilterFieldsEditor.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotGridAxisFilterFieldsEditor = void 0;
 var React = require("react");
 var kendo_react_treeview_1 = require("@progress/kendo-react-treeview");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
@@ -27,16 +28,16 @@ var shared_1 = require("../shared");
  * Represents the [KendoReact PivotGridAxisFilterFieldsEditor component]({% slug api_pivotgrid_pivotgridaxisfilterfieldseditorprops %}).
  */
 exports.PivotGridAxisFilterFieldsEditor = React.forwardRef(function (props, ref) {
-    var _a = __assign({}, defaultProps, props), data = _a.data, dataItem = _a.dataItem, defaultFilter = _a.defaultFilter;
+    var _a = __assign(__assign({}, defaultProps), props), data = _a.data, dataItem = _a.dataItem, defaultFilter = _a.defaultFilter;
     var element = React.useRef(null);
     var target = React.useRef(null);
-    var localization = kendo_react_intl_1.useLocalization();
-    var _b = kendo_react_common_1.useCustomComponent(props.columnMenuItem || defaultProps.columnMenuItem), ColumnMenuItemComponent = _b[0], ColumnMenuItemProps = _b[1];
-    var _c = kendo_react_common_1.useCustomComponent(props.columnMenuForm || defaultProps.columnMenuForm), ColumnMenuFormComponent = _c[0], ColumnMenuFormProps = _c[1];
-    var _d = kendo_react_common_1.useCustomComponent(props.resetButton || defaultProps.resetButton), ResetButtonComponent = _d[0], ResetButtonProps = _d[1];
-    var _e = kendo_react_common_1.useCustomComponent(props.applyButton || defaultProps.applyButton), ApplyButtonComponent = _e[0], ApplyButtonProps = _e[1];
-    var _f = kendo_react_common_1.useCustomComponent(props.treeView || defaultProps.treeView), TreeViewComponent = _f[0], TreeViewProps = _f[1];
-    var _g = kendo_react_common_1.useCustomComponent(props.noData || defaultProps.noData), NoDataComponent = _g[0], NoDataProps = _g[1];
+    var localization = (0, kendo_react_intl_1.useLocalization)();
+    var _b = (0, kendo_react_common_1.useCustomComponent)(props.columnMenuItem || defaultProps.columnMenuItem), ColumnMenuItemComponent = _b[0], ColumnMenuItemProps = _b[1];
+    var _c = (0, kendo_react_common_1.useCustomComponent)(props.columnMenuForm || defaultProps.columnMenuForm), ColumnMenuFormComponent = _c[0], ColumnMenuFormProps = _c[1];
+    var _d = (0, kendo_react_common_1.useCustomComponent)(props.resetButton || defaultProps.resetButton), ResetButtonComponent = _d[0], ResetButtonProps = _d[1];
+    var _e = (0, kendo_react_common_1.useCustomComponent)(props.applyButton || defaultProps.applyButton), ApplyButtonComponent = _e[0], ApplyButtonProps = _e[1];
+    var _f = (0, kendo_react_common_1.useCustomComponent)(props.treeView || defaultProps.treeView), TreeViewComponent = _f[0], TreeViewProps = _f[1];
+    var _g = (0, kendo_react_common_1.useCustomComponent)(props.noData || defaultProps.noData), NoDataComponent = _g[0], NoDataProps = _g[1];
     React.useImperativeHandle(target, function () { return ({ props: props, element: element.current }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var _h = React.useState(false), show = _h[0], setShow = _h[1];
@@ -44,7 +45,7 @@ exports.PivotGridAxisFilterFieldsEditor = React.forwardRef(function (props, ref)
     var _k = React.useContext(shared_1.PivotGridConfiguratorEditorStateContext), dispatchState = _k[1];
     var _l = React.useState(defaultFilter), filter = _l[0], setFilter = _l[1];
     var selected = filter ? filter.value.split(',') : [];
-    var _m = hooks_1.useExpansion([], undefined, target, utils_1.compareFields), expanded = _m[0], dispatchExpansion = _m[1];
+    var _m = (0, hooks_1.useExpansion)([], undefined, target, utils_1.compareFields), expanded = _m[0], dispatchExpansion = _m[1];
     var map = {
         caption: function (node) { return node.dataItem.caption; },
         id: function (node) { return node.dataItem.uniqueName; },
@@ -53,7 +54,7 @@ exports.PivotGridAxisFilterFieldsEditor = React.forwardRef(function (props, ref)
         expanded: function (node) { return expanded.some(function (e) { return e.uniqueName === node.id; }); },
         checked: function (node) { return !selected.length || (selected || []).some(function (f) { return f === node.dataItem.uniqueName; }); },
         hasChildren: function (node) { return parseInt(node.dataItem.childrenCardinality, 10) > 0; },
-        children: function (node) { return utils_1.recursiveMap(node.dataItem.children, map, node); },
+        children: function (node) { return (0, utils_1.recursiveMap)(node.dataItem.children, map, node); },
         checkIndeterminate: function (node) {
             var everyChildChecked = (node.children || []).length && node.children.every(function (c) { return c.checked; });
             if (everyChildChecked) {
@@ -62,8 +63,8 @@ exports.PivotGridAxisFilterFieldsEditor = React.forwardRef(function (props, ref)
             return (node.children || []).some(function (c) { return c.checked; }) && !everyChildChecked;
         }
     };
-    var fields = utils_1.recursiveMap(data, map);
-    var dataFlatMap = utils_1.flatMap(fields);
+    var fields = (0, utils_1.recursiveMap)(data, map);
+    var dataFlatMap = (0, utils_1.flatMap)(fields);
     var handleClick = function (syntheticEvent) {
         setShow(!show);
         if (onAxisFilterFieldsExpandChange) {
@@ -130,7 +131,7 @@ exports.PivotGridAxisFilterFieldsEditor = React.forwardRef(function (props, ref)
             }, syntheticEvent);
         }
     };
-    return (React.createElement("div", { ref: element, id: props.id, tabIndex: props.tabIndex, style: props.style, className: kendo_react_common_1.classNames('k-columnmenu-item-wrapper', props.className) },
+    return (React.createElement("div", { ref: element, id: props.id, tabIndex: props.tabIndex, style: props.style, className: (0, kendo_react_common_1.classNames)('k-columnmenu-item-wrapper', props.className) },
         React.createElement(ColumnMenuItemComponent, __assign({}, ColumnMenuItemProps, { title: "Include Fields", iconClass: "k-i-grid-layout", onClick: handleClick })),
         React.createElement(ColumnMenuFormComponent, __assign({ show: show, actions: (React.createElement(React.Fragment, null,
                 React.createElement(ResetButtonComponent, __assign({ type: "reset", onClick: handleResetClick }, ResetButtonProps), localization.toLanguageString(messages_1.fieldMenuReset, messages_1.messages[messages_1.fieldMenuReset])),

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

@@ -54,4 +54,4 @@ export interface PivotGridCellProps extends KendoMouse<PivotGridCellHandle, HTML
 /**
  * Represents the [KendoReact PivotGridCell component]({% slug api_pivotgrid_pivotgridcellprops %}).
  */
-export declare const PivotGridCell: React.ForwardRefExoticComponent<PivotGridCellProps & React.RefAttributes<PivotGridCellHandle>>;
+export declare const PivotGridCell: React.ForwardRefExoticComponent<PivotGridCellProps & React.RefAttributes<PivotGridCellHandle | null>>;

package/dist/npm/components/Cell.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotGridCell = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 ;
@@ -25,8 +26,8 @@ exports.PivotGridCell = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var mouseProps = 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: kendo_react_common_1.classNames('k-pivotgrid-cell', {
+    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', {
             'k-pivotgrid-header-total': props.total
         }, props.className) }), props.children));
 });

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

@@ -39,4 +39,4 @@ export interface PivotGridColumnProps extends KendoMouse<PivotGridColumnHandle,
 /**
  * Represents the [KendoReact PivotGridColumn component]({% slug api_pivotgrid_pivotgridcolumnprops %}).
  */
-export declare const PivotGridColumn: React.ForwardRefExoticComponent<PivotGridColumnProps & React.RefAttributes<PivotGridColumnHandle>>;
+export declare const PivotGridColumn: React.ForwardRefExoticComponent<PivotGridColumnProps & React.RefAttributes<PivotGridColumnHandle | null>>;

package/dist/npm/components/Column.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotGridColumn = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 ;
@@ -25,7 +26,7 @@ exports.PivotGridColumn = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var mouseProps = kendo_react_common_1.useMouse(props, target);
+    var mouseProps = (0, kendo_react_common_1.useMouse)(props, target);
     return (React.createElement("col", __assign({ ref: element }, mouseProps, { id: props.id, style: props.style, tabIndex: props.tabIndex, children: props.children, className: props.className })));
 });
 var defaultProps = {

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

@@ -122,4 +122,4 @@ export interface PivotGridConfiguratorHandle {
 /**
  * Represents the [KendoReact PivotGridConfigurator component]({% slug api_pivotgrid_pivotgridconfiguratorprops %}).
  */
-export declare const PivotGridConfigurator: React.ForwardRefExoticComponent<PivotGridConfiguratorProps & React.RefAttributes<PivotGridConfiguratorHandle>>;
+export declare const PivotGridConfigurator: React.ForwardRefExoticComponent<PivotGridConfiguratorProps & React.RefAttributes<PivotGridConfiguratorHandle | null>>;

package/dist/npm/components/Configurator.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotGridConfigurator = void 0;
 var React = require("react");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -22,14 +23,14 @@ var messages_1 = require("../messages");
  * Represents the [KendoReact PivotGridConfigurator component]({% slug api_pivotgrid_pivotgridconfiguratorprops %}).
  */
 exports.PivotGridConfigurator = React.forwardRef(function (props, ref) {
-    var _a = __assign({}, defaultProps, props), horizontal = _a.horizontal, data = _a.data, rowAxes = _a.rowAxes, columnAxes = _a.columnAxes, measureAxes = _a.measureAxes;
+    var _a = __assign(__assign({}, defaultProps), props), horizontal = _a.horizontal, data = _a.data, rowAxes = _a.rowAxes, columnAxes = _a.columnAxes, measureAxes = _a.measureAxes;
     var element = React.useRef(null);
     var target = React.useRef(null);
     var form = React.useRef(null);
-    var localization = kendo_react_intl_1.useLocalization();
-    var _b = kendo_react_common_1.useCustomComponent(props.editor || defaultProps.editor), EditorComponent = _b[0], EditorProps = _b[1];
-    var _c = kendo_react_common_1.useCustomComponent(props.form || defaultProps.form), FormComponent = _c[0], FormProps = _c[1];
-    var _d = kendo_react_common_1.useCustomComponent(props.formElement || defaultProps.formElement), FormElementComponent = _d[0], FormElementProps = _d[1];
+    var localization = (0, kendo_react_intl_1.useLocalization)();
+    var _b = (0, kendo_react_common_1.useCustomComponent)(props.editor || defaultProps.editor), EditorComponent = _b[0], EditorProps = _b[1];
+    var _c = (0, kendo_react_common_1.useCustomComponent)(props.form || defaultProps.form), FormComponent = _c[0], FormProps = _c[1];
+    var _d = (0, kendo_react_common_1.useCustomComponent)(props.formElement || defaultProps.formElement), FormElementComponent = _d[0], FormElementProps = _d[1];
     React.useImperativeHandle(target, function () { return ({ props: props, element: element.current }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var handleFormSubmit = function (newDataItem, syntheticEvent) {
@@ -91,14 +92,14 @@ exports.PivotGridConfigurator = React.forwardRef(function (props, ref) {
     React.useEffect(function () { if (form.current) {
         form.current.onChange('filter', { value: props.filter });
     } }, [props.filter]);
-    return (React.createElement("div", { ref: element, id: props.id, tabIndex: props.tabIndex, style: props.style, className: kendo_react_common_1.classNames('k-pivotgrid-configurator', props.className) },
-        React.createElement("div", { className: kendo_react_common_1.classNames('k-pivotgrid-configurator-panel', 'k-pivotgrid-configurator-push', {
+    return (React.createElement("div", { ref: element, id: props.id, tabIndex: props.tabIndex, style: props.style, className: (0, kendo_react_common_1.classNames)('k-pivotgrid-configurator', props.className) },
+        React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-pivotgrid-configurator-panel', 'k-pivotgrid-configurator-push', {
                 'k-pivotgrid-configurator-horizontal': horizontal,
                 'k-pivotgrid-configurator-vertical': !horizontal
             }) },
             React.createElement("div", { className: "k-pivotgrid-configurator-header" },
                 React.createElement("div", { className: "k-pivotgrid-configurator-header-text" }, localization.toLanguageString(messages_1.configuratorTitle, messages_1.messages[messages_1.configuratorTitle]))),
-            React.createElement(FormComponent, __assign({ ref: kendo_react_common_1.canUseRef(FormComponent) ? form : undefined, initialValues: initialValues, onSubmit: handleFormSubmit, render: function (renderProps) { return (React.createElement(React.Fragment, null,
+            React.createElement(FormComponent, __assign({ ref: (0, kendo_react_common_1.canUseRef)(FormComponent) ? form : undefined, initialValues: initialValues, onSubmit: handleFormSubmit, render: function (renderProps) { return (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "k-pivotgrid-configurator-content" },
                         React.createElement(FormElementComponent, __assign({ horizontal: horizontal }, FormElementProps),
                             React.createElement(EditorComponent, __assign({}, renderProps, { horizontal: props.horizontal, onFieldsEditorFieldExpand: props.onFieldsEditorFieldExpand, onFieldsEditorFieldCheck: props.onFieldsEditorFieldCheck, onAxisFilterFieldExpand: props.onAxisFilterFieldExpand, onAxisFilterFieldsExpandChange: props.onAxisFilterFieldsExpandChange, data: data }, EditorProps)))),

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

@@ -37,4 +37,4 @@ export interface PivotGridConfiguratorButtonHandle {
 /**
  * Represents the [KendoReact PivotGridConfiguratorButton component]({% slug api_pivotgrid_pivotgridconfiguratorbuttonprops %}).
  */
-export declare const PivotGridConfiguratorButton: React.ForwardRefExoticComponent<PivotGridConfiguratorButtonProps & React.RefAttributes<PivotGridConfiguratorButtonHandle>>;
+export declare const PivotGridConfiguratorButton: React.ForwardRefExoticComponent<PivotGridConfiguratorButtonProps & React.RefAttributes<PivotGridConfiguratorButtonHandle | null>>;

package/dist/npm/components/ConfiguratorButton.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PivotGridConfiguratorButton = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
@@ -22,12 +23,12 @@ var kendo_react_common_2 = require("@progress/kendo-react-common");
 exports.PivotGridConfiguratorButton = React.forwardRef(function (props, ref) {
     var target = React.useRef(null);
     var element = React.useRef(null);
-    var localization = kendo_react_intl_1.useLocalization();
+    var localization = (0, kendo_react_intl_1.useLocalization)();
     React.useImperativeHandle(target, function () { return ({ props: props, element: element.current }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var _a = kendo_react_common_1.useCustomComponent(props.icon || defaultProps.icon), IconComponent = _a[0], IconProps = _a[1];
-    var className = React.useMemo(function () { return kendo_react_common_1.classNames('k-pivotgrid-configurator-button', props.className); }, [props.className]);
-    var mouseProps = kendo_react_common_2.useMouse(props, target);
+    var _a = (0, kendo_react_common_1.useCustomComponent)(props.icon || defaultProps.icon), IconComponent = _a[0], IconProps = _a[1];
+    var className = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-pivotgrid-configurator-button', props.className); }, [props.className]);
+    var mouseProps = (0, kendo_react_common_2.useMouse)(props, target);
     return (React.createElement("div", __assign({ ref: element, id: props.id, className: className, tabIndex: props.tabIndex }, mouseProps),
         React.createElement("span", null,
             localization.toLanguageString(messages_1.configuratorButtonLabel, messages_1.messages[messages_1.configuratorButtonLabel]),