@progress/kendo-react-data-tools 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

package/dist/es/columnmenu/ColumnMenu.js

@@ -20,10 +20,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import * as React from 'react';
 import { Popup } from '@progress/kendo-react-popup';
@@ -74,7 +78,7 @@ var ColumnMenuWrapper = function (props) {
     }, [show]);
     var filterItemClick = React.useCallback(function () { return setFilterExpand(!filterExpand); }, [filterExpand]);
     var changeSort = React.useCallback(function (event, dir) {
-        var newSort = __spreadArray([], sort);
+        var newSort = __spreadArray([], sort, true);
         var currentSortIndex = newSort.findIndex(function (d) { return d.field === field; });
         var newSortDescriptor = { field: field, dir: dir };
         if (currentSortIndex >= 0) {
@@ -94,7 +98,7 @@ var ColumnMenuWrapper = function (props) {
         }
     }, [sort, field, onSortChange, closeMenu]);
     var filterChange = React.useCallback(function (_event, nextFilter, prevFilter) {
-        var stateFilter = __assign(__assign({}, currentFilter), { filters: __spreadArray([], currentFilter.filters) });
+        var stateFilter = __assign(__assign({}, currentFilter), { filters: __spreadArray([], currentFilter.filters, true) });
         var index = stateFilter.filters.indexOf(prevFilter);
         stateFilter.filters.splice(index, 1, nextFilter);
         setCurrentFilter(stateFilter);
@@ -159,7 +163,7 @@ var ColumnMenuWrapper = function (props) {
             props.itemsRender.call(undefined, menuItems, { closeMenu: closeMenu, field: field }) :
             menuItems)));
     var rendering = [button, popup];
-    return props.render ? props.render.call(undefined, rendering) : rendering;
+    return React.createElement(React.Fragment, null, props.render ? props.render.call(undefined, rendering) : rendering);
 };
 /**
  * The `ColumnMenuTextColumn` component. Use it for `string` type columns.

package/dist/es/columnmenu/ColumnMenuFilterForm.d.ts

@@ -4,6 +4,7 @@ export interface ColumnMenuFormProps {
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
     onReset?: React.FormEventHandler<HTMLFormElement>;
     actions?: React.ReactNode;
+    children?: React.ReactNode;
 }
 export declare const ColumnMenuForm: React.FunctionComponent<ColumnMenuFormProps>;
 /**

package/dist/es/columnmenu/ColumnMenuItem.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import { classNames } from '@progress/kendo-react-common';
 export var ColumnMenuItem = function (props) {
     return (React.createElement("div", { onClick: props.onClick, className: classNames('k-columnmenu-item', { 'k-selected': props.selected }, { 'k-disabled': props.disabled }) },
-        props.iconClass && React.createElement("span", { className: "k-icon " + props.iconClass }),
+        props.iconClass && React.createElement("span", { className: "k-icon ".concat(props.iconClass) }),
         props.title));
 };

package/dist/es/columnmenu/ColumnMenuOperators.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import { columnMenuFilterEqOperator, columnMenuFilterNotEqOperator, columnMenuFilterIsNullOperator, columnMenuFilterIsNotNullOperator, columnMenuFilterIsEmptyOperator, columnMenuFilterIsNotEmptyOperator, columnMenuFilterStartsWithOperator, columnMenuFilterContainsOperator, columnMenuFilterNotContainsOperator, columnMenuFilterEndsWithOperator, columnMenuFilterGteOperator, columnMenuFilterGtOperator, columnMenuFilterLteOperator, columnMenuFilterLtOperator, columnMenuFilterAfterOrEqualOperator, columnMenuFilterAfterOperator, columnMenuFilterBeforeOperator, columnMenuFilterBeforeOrEqualOperator, columnMenuFilterIsTrue } from '../messages';
 var textOperators = [
@@ -67,7 +71,7 @@ var ColumnMenuOperators = /** @class */ (function () {
          * - { text: 'columnMenu.filterIsNotEmptyOperator', operator: 'isnotempty' }
          */
         get: function () {
-            return __spreadArray([], textOperators);
+            return __spreadArray([], textOperators, true);
         },
         enumerable: false,
         configurable: true
@@ -88,7 +92,7 @@ var ColumnMenuOperators = /** @class */ (function () {
          * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
          */
         get: function () {
-            return __spreadArray([], numericOperators);
+            return __spreadArray([], numericOperators, true);
         },
         enumerable: false,
         configurable: true
@@ -109,7 +113,7 @@ var ColumnMenuOperators = /** @class */ (function () {
          * - { text: 'columnMenu.filterIsNotNullOperator', operator: 'isnotnull' }
          */
         get: function () {
-            return __spreadArray([], dateOperators);
+            return __spreadArray([], dateOperators, true);
         },
         enumerable: false,
         configurable: true
@@ -123,7 +127,7 @@ var ColumnMenuOperators = /** @class */ (function () {
          * - { text: 'columnMenu.filterIsTrue', operator: '' }
          */
         get: function () {
-            return __spreadArray([], booleanOperators);
+            return __spreadArray([], booleanOperators, true);
         },
         enumerable: false,
         configurable: true

package/dist/es/drag/ColumnDraggable.d.ts

@@ -7,6 +7,7 @@ export interface ColumnDraggableProps {
     dragHandler?: (draggableEvent: any, element: HTMLTableRowElement | HTMLDivElement) => void;
     releaseHandler?: (draggableEvent: any) => void;
     ariaRowIndex?: number;
+    children?: React.ReactNode;
 }
 /**
  * @hidden

package/dist/es/drag/ColumnDraggable.js

@@ -22,6 +22,7 @@ var ColumnDraggable = /** @class */ (function (_super) {
     __extends(ColumnDraggable, _super);
     function ColumnDraggable() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.draggable = null;
         /**
          * @hidden
          */

package/dist/es/drag/ColumnResize.d.ts

@@ -1,8 +1,9 @@
-import { ExtendedColumnProps } from './../header';
+import { FilterCellProps } from '../filteringCells';
+import { ExtendedColumnProps, CellProps, HeaderCellProps } from './../header';
 /**
  * @hidden
  */
-export declare class ColumnResize {
+export declare class ColumnResize<C = CellProps, H = HeaderCellProps, F = FilterCellProps> {
     /**
      * The main `colgroup` of the Grid.
      */
@@ -15,7 +16,7 @@ export declare class ColumnResize {
      * The footer `colgroup` of the Grid (if any).
      */
     colGroupFooter: any | null;
-    columns: ExtendedColumnProps[];
+    columns: ExtendedColumnProps<C, H, F>[];
     /**
      * The settings for resizing the Grid.
      */
@@ -24,7 +25,7 @@ export declare class ColumnResize {
     private isRtl;
     constructor(triggerResize: (index: number, newWidth: number, oldWidth: number, originalEvent: any, end: boolean) => void);
     setIsRtl: (isRtl: boolean) => void;
-    dragHandler(event: any, column: ExtendedColumnProps, dragCue: HTMLSpanElement, end: boolean): void;
+    dragHandler(event: any, column: ExtendedColumnProps<C, H, F>, dragCue: HTMLSpanElement, end: boolean): void;
     private setWidths;
     private updateColElements;
     private setColWidth;

package/dist/es/drag/ColumnResize.js

@@ -4,6 +4,9 @@
 var ColumnResize = /** @class */ (function () {
     function ColumnResize(triggerResize) {
         var _this = this;
+        // Typings. `col` and `colgroup` do not differ, both represnt a `HTMLTableColElement`.
+        // Implemented as `any`.
+        this.columns = [];
         /**
          * The settings for resizing the Grid.
          */

package/dist/es/drag/ColumnResizer.js

@@ -22,6 +22,7 @@ var ColumnResizer = /** @class */ (function (_super) {
     __extends(ColumnResizer, _super);
     function ColumnResizer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.draggable = null;
         /**
          * @hidden
          */

package/dist/es/drag/CommonDragLogic.d.ts

@@ -1,6 +1,7 @@
 import { DragClue } from './DragClue';
 import { DropClue } from './DropClue';
-import { ExtendedColumnProps } from './../header';
+import { FilterCellProps } from '../filteringCells';
+import { ExtendedColumnProps, CellProps, HeaderCellProps } from './../header';
 /**
  * @hidden
  */
@@ -8,8 +9,8 @@ export declare type handler = (prevIndex: number, nextIndex: number, nativeEvent
 /**
  * @hidden
  */
-export declare class CommonDragLogic {
-    columns: ExtendedColumnProps[];
+export declare class CommonDragLogic<C = CellProps, H = HeaderCellProps, F = FilterCellProps> {
+    columns: ExtendedColumnProps<C, H, F>[];
     reorderable: boolean;
     groupable: boolean;
     private startColumn;

package/dist/es/drag/CommonDragLogic.js

@@ -5,6 +5,7 @@ import { getIndex } from './../header/';
 var CommonDragLogic = /** @class */ (function () {
     function CommonDragLogic(columnReorder, groupReorder, columnToGroup) {
         var _this = this;
+        this.columns = [];
         this.reorderable = false;
         this.groupable = false;
         this.startColumn = -1;

package/dist/es/drag/DragClue.d.ts

@@ -12,7 +12,7 @@ export interface DragClueState {
 /**
  * @hidden
  */
-export declare class DragClue extends React.PureComponent<{}, DragClueState> {
+export declare class DragClue extends React.PureComponent<any, DragClueState> {
     private elementRef;
     readonly state: DragClueState;
     hiddenElementRef: React.RefObject<HTMLDivElement>;

package/dist/es/drag/DropClue.d.ts

@@ -11,7 +11,7 @@ export interface DropClueState {
 /**
  * @hidden
  */
-export declare class DropClue extends React.PureComponent<{}, DropClueState> {
+export declare class DropClue extends React.PureComponent<any, DropClueState> {
     readonly state: DropClueState;
     hiddenElementRef: React.RefObject<HTMLDivElement>;
     constructor(props: any);

package/dist/es/filter/Filter.d.ts

@@ -51,7 +51,7 @@ export declare class Filter extends React.Component<FilterProps> {
     static propTypes: {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        fields: (props: FilterProps, propName: string) => Error;
+        fields: (props: FilterProps, propName: string) => Error | null;
         value: PropTypes.Validator<object>;
         onChange: PropTypes.Validator<(...args: any[]) => any>;
     };

package/dist/es/filter/Filter.js

@@ -75,16 +75,16 @@ var Filter = /** @class */ (function (_super) {
         fields: function (props, propName) {
             var prop = props[propName];
             if (prop === undefined) {
-                return new Error("Property '" + propName + "' is missing.");
+                return new Error("Property '".concat(propName, "' is missing."));
             }
             else if (!Array.isArray(prop)) {
-                return new Error("Property '" + propName + "' needs to be Array<FieldSettings>.");
+                return new Error("Property '".concat(propName, "' needs to be Array<FieldSettings>."));
             }
             else if (Object.keys(prop.reduce(function (acc, cur) {
                 var _a;
                 return (__assign(__assign({}, acc), (_a = {}, _a[cur.name] = 1, _a)));
             }, {})).length !== prop.length) {
-                return new Error("Property '" + propName + "' needs to contain objects with unique 'name' field.");
+                return new Error("Property '".concat(propName, "' needs to contain objects with unique 'name' field."));
             }
             return null;
         },

package/dist/es/filter/Group.js

@@ -24,10 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
@@ -44,37 +48,53 @@ var Group = /** @class */ (function (_super) {
     __extends(Group, _super);
     function Group() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onGroupRemove = function () {
-            _this.props.onRemove.call(undefined, {
-                filter: _this.props.filter
-            });
+        _this.onGroupRemove = function (event) {
+            var ev = {
+                filter: _this.props.filter,
+                target: _this,
+                syntheticEvent: event,
+                nativeEvent: event.nativeEvent
+            };
+            _this.props.onRemove.call(undefined, ev);
         };
-        _this.onAddExpression = function () {
+        _this.onAddExpression = function (event) {
             var prevFilter = _this.props.filter;
             var firstField = _this.props.fields[0];
             var newExpression = { field: firstField.name, operator: firstField.operators[0].operator };
             newExpression.value = stringOperator(newExpression.operator) ? '' : null;
-            _this.props.onChange.call(undefined, {
-                nextFilter: __assign(__assign({}, prevFilter), { filters: __spreadArray(__spreadArray([], prevFilter.filters), [newExpression]) }),
-                prevFilter: prevFilter
-            });
+            var ev = {
+                nextFilter: __assign(__assign({}, prevFilter), { filters: __spreadArray(__spreadArray([], prevFilter.filters, true), [newExpression], false) }),
+                prevFilter: prevFilter,
+                target: _this,
+                syntheticEvent: event,
+                nativeEvent: event.nativeEvent
+            };
+            _this.props.onChange.call(undefined, ev);
         };
-        _this.onAddGroup = function () {
+        _this.onAddGroup = function (event) {
             var prevFilter = _this.props.filter;
-            _this.props.onChange.call(undefined, {
-                nextFilter: __assign(__assign({}, prevFilter), { filters: __spreadArray(__spreadArray([], prevFilter.filters), [__assign({}, _this.props.defaultGroupFilter)]) }),
-                prevFilter: prevFilter
-            });
+            var ev = {
+                nextFilter: __assign(__assign({}, prevFilter), { filters: __spreadArray(__spreadArray([], prevFilter.filters, true), [__assign({}, _this.props.defaultGroupFilter)], false) }),
+                prevFilter: prevFilter,
+                target: _this,
+                syntheticEvent: event,
+                nativeEvent: event.nativeEvent
+            };
+            _this.props.onChange.call(undefined, ev);
         };
-        _this.onLogicAnd = function () { return _this.changeLogic('and'); };
-        _this.onLogicOr = function () { return _this.changeLogic('or'); };
-        _this.changeLogic = function (logic) {
+        _this.onLogicAnd = function (event) { return _this.changeLogic('and', event); };
+        _this.onLogicOr = function (event) { return _this.changeLogic('or', event); };
+        _this.changeLogic = function (logic, event) {
             var prevFilter = _this.props.filter;
             if (prevFilter.logic !== logic) {
-                _this.props.onChange.call(undefined, {
+                var ev = {
                     nextFilter: __assign(__assign({}, prevFilter), { logic: logic }),
-                    prevFilter: prevFilter
-                });
+                    prevFilter: prevFilter,
+                    target: _this,
+                    syntheticEvent: event,
+                    nativeEvent: event.nativeEvent
+                };
+                _this.props.onChange.call(undefined, ev);
             }
         };
         _this.replaceFilter = function (prevFilter, nextFilter) {

package/dist/es/filter/filters/BooleanFilter.d.ts

@@ -28,10 +28,10 @@ export declare class BooleanFilter extends React.Component<BooleanFilterProps> {
     static propTypes: {
         filter: PropTypes.Validator<object>;
         onFilterChange: PropTypes.Validator<(...args: any[]) => any>;
-        data: PropTypes.Requireable<PropTypes.InferProps<{
+        data: PropTypes.Requireable<(PropTypes.InferProps<{
             text: PropTypes.Requireable<string>;
             value: PropTypes.Requireable<any>;
-        }>[]>;
+        }> | null | undefined)[]>;
         defaultItem: PropTypes.Requireable<any>;
     };
     private data;

package/dist/es/filter/filters/EnumFilter.d.ts

@@ -28,10 +28,10 @@ export declare class EnumFilter extends React.Component<EnumFilterProps> {
     static propTypes: {
         filter: PropTypes.Validator<object>;
         onFilterChange: PropTypes.Validator<(...args: any[]) => any>;
-        data: PropTypes.Requireable<PropTypes.InferProps<{
+        data: PropTypes.Requireable<(PropTypes.InferProps<{
             text: PropTypes.Requireable<string>;
             value: PropTypes.Requireable<any>;
-        }>[]>;
+        }> | null | undefined)[]>;
         defaultItem: PropTypes.Requireable<any>;
     };
     /**

package/dist/es/filter/filters/TextFilter.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { FilterOperator } from '../../filteringCells';
 import { FilterDescriptor } from '@progress/kendo-data-query';
 /**
  * The props of the TextFilter component.
@@ -14,7 +13,7 @@ export interface TextFilterProps {
      * The FilterChange event, triggered while editing the FilterOperator.
      */
     onFilterChange: (event: {
-        nextFilter: FilterOperator;
+        nextFilter: FilterDescriptor;
     }) => void;
 }
 /**

package/dist/es/filter/operators.js

@@ -1,7 +1,11 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import { filterEqOperator, filterNotEqOperator, filterIsNullOperator, filterIsNotNullOperator, filterIsEmptyOperator, filterIsNotEmptyOperator, filterStartsWithOperator, filterContainsOperator, filterNotContainsOperator, filterEndsWithOperator, filterGteOperator, filterGtOperator, filterLteOperator, filterLtOperator, filterAfterOrEqualOperator, filterAfterOperator, filterBeforeOperator, filterBeforeOrEqualOperator } from './../messages';
 var textOperators = [
@@ -67,7 +71,7 @@ var Operators = /** @class */ (function () {
          * - { text: 'filter.isNotEmptyOperator', operator: 'isnotempty' }
          */
         get: function () {
-            return __spreadArray([], textOperators);
+            return __spreadArray([], textOperators, true);
         },
         enumerable: false,
         configurable: true
@@ -88,7 +92,7 @@ var Operators = /** @class */ (function () {
          * - { text: 'filter.isNotNullOperator', operator: 'isnotnull' }
          */
         get: function () {
-            return __spreadArray([], numericOperators);
+            return __spreadArray([], numericOperators, true);
         },
         enumerable: false,
         configurable: true
@@ -109,7 +113,7 @@ var Operators = /** @class */ (function () {
          * - { text: 'filter.isNotNullOperator', operator: 'isnotnull' }
          */
         get: function () {
-            return __spreadArray([], dateOperators);
+            return __spreadArray([], dateOperators, true);
         },
         enumerable: false,
         configurable: true
@@ -124,7 +128,7 @@ var Operators = /** @class */ (function () {
          * - { text: 'filter.notEqOperator', operator: 'neq' }
          */
         get: function () {
-            return __spreadArray([], booleanOperators);
+            return __spreadArray([], booleanOperators, true);
         },
         enumerable: false,
         configurable: true

package/dist/es/filteringCells/BooleanFilter.js

@@ -24,10 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import * as React from 'react';
 import { createFilterComponent } from './FilterComponent';
@@ -55,7 +59,7 @@ var settings = {
                     return;
                 }
                 var filterResult = current ?
-                    filter.map(function (f) { return f.field === field ? __assign(__assign({}, current), { value: value }) : f; }) : __spreadArray(__spreadArray([], filter), [{ value: value, field: field, operator: booleanOperator }]);
+                    filter.map(function (f) { return f.field === field ? __assign(__assign({}, current), { value: value }) : f; }) : __spreadArray(__spreadArray([], filter, true), [{ value: value, field: field, operator: booleanOperator }], false);
                 cellProps.onFilterChange.call(undefined, {
                     filter: filterResult,
                     field: field,

package/dist/es/filteringCells/FilterComponent.js

@@ -24,10 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import * as React from 'react';
 import { Button } from '@progress/kendo-react-buttons';
@@ -50,7 +54,7 @@ export var createFilterComponent = function (settings) {
                 var _a = _this.props, _b = _a.filter, filter = _b === void 0 ? [] : _b, _c = _a.field, field = _c === void 0 ? '' : _c;
                 var existing = _this.findCellFilter();
                 var filterResult = existing ?
-                    filter.map(function (f) { return f.field === field ? __assign(__assign({}, existing), { value: value }) : f; }) : __spreadArray(__spreadArray([], filter), [__assign(__assign({}, settings.emptyFilter), { value: value, field: field })]);
+                    filter.map(function (f) { return f.field === field ? __assign(__assign({}, existing), { value: value }) : f; }) : __spreadArray(__spreadArray([], filter, true), [__assign(__assign({}, settings.emptyFilter), { value: value, field: field })], false);
                 _this.filterChange({
                     filter: filterResult,
                     field: field,
@@ -62,7 +66,7 @@ export var createFilterComponent = function (settings) {
                 var _a = _this.props, _b = _a.filter, filter = _b === void 0 ? [] : _b, _c = _a.field, field = _c === void 0 ? '' : _c;
                 var existing = _this.findCellFilter();
                 var filterResult = existing ?
-                    filter.map(function (f) { return f.field === field ? __assign(__assign({}, existing), { operator: operator }) : f; }) : __spreadArray(__spreadArray([], filter), [__assign(__assign({}, settings.emptyFilter), { field: field, operator: operator })]);
+                    filter.map(function (f) { return f.field === field ? __assign(__assign({}, existing), { operator: operator }) : f; }) : __spreadArray(__spreadArray([], filter, true), [__assign(__assign({}, settings.emptyFilter), { field: field, operator: operator })], false);
                 _this.filterChange({
                     filter: filterResult,
                     field: field,

package/dist/es/header/ColumnProps.d.ts

@@ -1,13 +1,13 @@
 import { ComponentType } from 'react';
-import { HeaderCellProps } from './HeaderCell';
-import { CellProps } from './CellProps';
-import { FilterCellProps } from '../filteringCells/FilterCellProps';
+import { HeaderCellProps as HeaderCellPropsDefault } from './HeaderCell';
+import { CellProps as CellPropsDefault } from './CellProps';
+import { FilterCellProps as FilterCellPropsDefault } from '../filteringCells/FilterCellProps';
 import { ColumnSortSettings } from './SortSettings';
 import { ColumnMenuProps } from '../columnmenu';
 /**
  * @hidden
  */
-export interface ColumnBaseProps {
+export interface ColumnBaseProps<CellProps = CellPropsDefault> {
     /**
      * The field to which the column is bound.
      */
@@ -86,11 +86,11 @@ export interface ColumnBaseProps {
 /**
  * @hidden
  */
-export interface TreeColumnBaseProps extends ColumnBaseProps {
+export interface TreeColumnBaseProps<CellProps = CellPropsDefault, HeaderCellProps = HeaderCellPropsDefault, FilterCellProps = FilterCellPropsDefault> extends ColumnBaseProps<CellProps> {
     /**
      * A collection of child columns.
      */
-    children?: TreeColumnBaseProps[];
+    children?: TreeColumnBaseProps<CellProps, HeaderCellProps, FilterCellProps>[];
     /**
      * The column menu component. Pass the [ColumnMenuTextColumn]({% slug api_data-tools_columnmenutextcolumn %}),
      * [ColumnMenuNumericColumn]({% slug api_data-tools_columnmenunumericcolumn %}),
@@ -124,7 +124,7 @@ export interface TreeColumnBaseProps extends ColumnBaseProps {
 /**
  * @hidden
  */
-export interface ExtendedColumnProps extends TreeColumnBaseProps {
+export interface ExtendedColumnProps<CellProps = CellPropsDefault, HeaderCellProps = HeaderCellPropsDefault, FilterCellProps = FilterCellPropsDefault> extends TreeColumnBaseProps<CellProps, HeaderCellProps, FilterCellProps> {
     declarationIndex: number;
     parentIndex: number;
     colSpan: number;
@@ -132,7 +132,7 @@ export interface ExtendedColumnProps extends TreeColumnBaseProps {
     depth: number;
     kFirst?: boolean;
     index: number;
-    children: ExtendedColumnProps[];
+    children: ExtendedColumnProps<CellProps, HeaderCellProps, FilterCellProps>[];
     left: number;
     right: number;
     rightBorder: boolean;

package/dist/es/header/FilterRow.js

@@ -8,7 +8,7 @@ import { filterAriaLabel, messages } from '../messages';
  */
 export var FILTER_ROW_CLASS = 'k-filter-row';
 var headerCellClassName = function (sort, field, locked) {
-    var result = "" + (locked ? 'k-grid-header-sticky' : '');
+    var result = "".concat(locked ? 'k-grid-header-sticky' : '');
     if (sort.some(function (descriptor) { return descriptor.field === field; })) {
         result += ' k-sorted';
     }

package/dist/es/header/HeaderCell.d.ts

@@ -44,4 +44,4 @@ export interface HeaderCellProps extends HeaderCellBaseProps {
 /**
  * @hidden
  */
-export declare function HeaderCell(props: HeaderCellProps): any;
+export declare function HeaderCell(props: HeaderCellProps): JSX.Element;

package/dist/es/header/HeaderCell.js

@@ -20,7 +20,7 @@ export function HeaderCell(props) {
     var defaultRendering = (React.createElement("span", __assign({ className: 'k-link' }, clickProps),
         React.createElement("span", { className: 'k-column-title' }, props.title || props.field || '\u00A0'),
         props.children));
-    return props.render ?
+    return (React.createElement(React.Fragment, null, props.render ?
         props.render.call(undefined, defaultRendering, props) :
-        defaultRendering;
+        defaultRendering));
 }