@progress/kendo-react-data-tools 4.11.0 → 4.12.0-dev.202111220849

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

@@ -19,11 +19,11 @@ export interface ColumnMenuProps {
     /**
      * Fires when the ColumnMenu filter is changed.
      */
-    onFilterChange?: (event: React.SyntheticEvent<any>, filter: CompositeFilterDescriptor, field: string) => void;
+    onFilterChange?: (event: React.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field: string) => void;
     /**
      * The field to which the ColumnMenu is bound.
      */
-    field: string;
+    field?: string;
     /**
      * If set to `true`, a button for sorting in `asc` direction will be rendered.
      */
@@ -52,7 +52,7 @@ export interface ColumnMenuProps {
      * `props` contains the column's field and the closeMenu function which closes the ColumnMenu.
      */
     itemsRender?: (defaultRendering: (React.ReactElement<HTMLDivElement> | null)[], props: {
-        field: string;
+        field?: string;
         closeMenu: () => void;
     }) => React.ReactNode;
     /**

package/dist/es/columnmenu/ColumnMenu.js

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
 import * as React from 'react';
 import { Popup } from '@progress/kendo-react-popup';
 import { useLocalization } from '@progress/kendo-react-intl';
@@ -20,13 +29,14 @@ import { ColumnMenuFilterForm } from './ColumnMenuFilterForm';
 import { messages, columnMenuFilterTitle, columnMenuSortAscending, columnMenuSortDescending } from '../messages';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
-var ColumnMenu = function (props) {
+/** @hidden */
+var ColumnMenuWrapper = function (props) {
     validatePackage(packageMetadata);
     var emptySort = React.useRef([]);
     var field = props.field, filter = props.filter, _a = props.sort, sort = _a === void 0 ? emptySort.current : _a, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, initialFilter = props.initialFilter, _b = props.sortAsc, sortAsc = _b === void 0 ? false : _b, _c = props.sortDesc, sortDesc = _c === void 0 ? false : _c, _d = props.filterContent, filterContent = _d === void 0 ? [] : _d, _e = props.expandFilters, expandFilters = _e === void 0 ? false : _e;
     var _f = React.useState(false), show = _f[0], setShow = _f[1];
     var _g = React.useState(expandFilters), filterExpand = _g[0], setFilterExpand = _g[1];
-    var _h = React.useState(initialFilter(field)), currentFilter = _h[0], setCurrentFilter = _h[1];
+    var _h = React.useState(field && initialFilter ? initialFilter(field) : null), currentFilter = _h[0], setCurrentFilter = _h[1];
     var anchor = React.useRef(null);
     var popupRef = React.useRef(null);
     var blurTimeout = React.useRef(null);
@@ -43,10 +53,12 @@ var ColumnMenu = function (props) {
     var onFocus = React.useCallback(function () { return clearTimeout(blurTimeout.current); }, []);
     var onColumnMenuButtonClick = React.useCallback(function () {
         setShow(!show);
-        setFilterExpand(!show ? expandFilters : false);
-        setCurrentFilter(show ?
-            currentFilter :
-            (menuFilter() || initialFilter(field)));
+        if (field && initialFilter) {
+            setFilterExpand(!show ? expandFilters : false);
+            setCurrentFilter(show ?
+                currentFilter :
+                (menuFilter() || initialFilter(field)));
+        }
     }, [menuFilter, field, show, currentFilter, initialFilter, expandFilters]);
     React.useEffect(function () {
         if (show && popupRef.current) {
@@ -80,7 +92,7 @@ var ColumnMenu = function (props) {
         stateFilter.filters.splice(index, 1, nextFilter);
         setCurrentFilter(stateFilter);
     }, [currentFilter]);
-    var onSubmit = React.useCallback(function (event) {
+    var onFilterSubmit = React.useCallback(function (event) {
         event.preventDefault();
         var newFilter = (filter || []).slice();
         var prev = menuFilter();
@@ -96,14 +108,16 @@ var ColumnMenu = function (props) {
             onFilterChange.call(undefined, event, newFilter, field);
         }
     }, [filter, currentFilter, field, onFilterChange, closeMenu, menuFilter]);
-    var onReset = React.useCallback(function (event) {
+    var onFilterReset = React.useCallback(function (event) {
         var newFilter = (filter || []).slice();
         var prev = menuFilter();
         var index = prev ? newFilter.indexOf(prev) : -1;
         if (index >= 0) {
             newFilter.splice(index, 1);
         }
-        setCurrentFilter(initialFilter(field));
+        if (initialFilter) {
+            setCurrentFilter(initialFilter(field));
+        }
         closeMenu();
         if (onFilterChange) {
             onFilterChange.call(undefined, event, newFilter, field);
@@ -111,10 +125,8 @@ var ColumnMenu = function (props) {
     }, [filter, field, onFilterChange, initialFilter, closeMenu, menuFilter]);
     var sortAscChange = React.useCallback(function (e) { return changeSort(e, 'asc'); }, [changeSort]);
     var sortDescChange = React.useCallback(function (e) { return changeSort(e, 'desc'); }, [changeSort]);
-    var onLogicChange = React.useCallback(function (event) { return setCurrentFilter(__assign({}, currentFilter, { logic: event.value.logic })); }, [currentFilter]);
+    var onLogicChange = React.useCallback(function (event) { return currentFilter && setCurrentFilter(__assign({}, currentFilter, { logic: event.value.logic })); }, [currentFilter]);
     var currentSort = sort.find(function (d) { return d.field === field; }) || { dir: '' };
-    var firstFilter = currentFilter.filters[0];
-    var secondFilter = currentFilter.filters[1];
     var FirstFilterComponent = filterContent[0], FilterLogicComponent = filterContent[1], SecondFilterComponent = filterContent[2];
     var localization = useLocalization();
     var sorting = (sortAsc || sortDesc) ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "sorting" },
@@ -122,15 +134,16 @@ var ColumnMenu = function (props) {
             (React.createElement(ColumnMenuItem, { title: localization.toLanguageString(columnMenuSortAscending, messages[columnMenuSortAscending]), iconClass: "k-i-sort-asc-sm", selected: currentSort.dir === 'asc', onClick: sortAscChange })),
         sortDesc &&
             (React.createElement(ColumnMenuItem, { title: localization.toLanguageString(columnMenuSortDescending, messages[columnMenuSortDescending]), iconClass: "k-i-sort-desc-sm", selected: currentSort.dir === 'desc', onClick: sortDescChange })))) : null;
-    var filtering = filterContent.length > 0 ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "filtering" },
+    // filter content empty when no field is supplied
+    var filtering = currentFilter && filterContent.length > 0 ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "filtering" },
         React.createElement(ColumnMenuItem, { iconClass: "k-i-filter", title: localization.toLanguageString(columnMenuFilterTitle, messages[columnMenuFilterTitle]), onClick: filterItemClick }),
-        React.createElement(ColumnMenuFilterForm, { show: filterExpand, onSubmit: onSubmit, onReset: onReset },
+        React.createElement(ColumnMenuFilterForm, { show: filterExpand, onSubmit: onFilterSubmit, onReset: onFilterReset },
             FirstFilterComponent &&
-                React.createElement(FirstFilterComponent, { filter: firstFilter, onFilterChange: filterChange }),
+                React.createElement(FirstFilterComponent, { filter: currentFilter.filters[0], onFilterChange: filterChange }),
             FilterLogicComponent &&
                 React.createElement(FilterLogicComponent, { value: currentFilter.logic, onChange: onLogicChange }),
             SecondFilterComponent &&
-                React.createElement(SecondFilterComponent, { filter: secondFilter, onFilterChange: filterChange })))) : null;
+                React.createElement(SecondFilterComponent, { filter: currentFilter.filters[1], onFilterChange: filterChange })))) : null;
     var menuItems = [sorting, filtering];
     var button = (React.createElement("span", { ref: anchor, onClick: onColumnMenuButtonClick, className: 'k-grid-column-menu k-grid-filter' + (Boolean(menuFilter()) ? ' k-state-active' : ''), key: "button" },
         React.createElement("span", { className: "k-icon k-i-more-vertical" })));
@@ -145,49 +158,61 @@ var ColumnMenu = function (props) {
  * The `ColumnMenuTextColumn` component. Use it for `string` type columns.
  */
 export var ColumnMenuTextColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'and', filters: [{ operator: 'contains', field: field, value: '' }, { operator: 'contains', field: field, value: '' }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'and', filters: [{ operator: 'contains', field: currentField, value: '' }, { operator: 'contains', field: currentField, value: '' }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuTextFilter,
-            ColumnMenuFilterLogic,
-            ColumnMenuTextFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuTextFilter,
+        ColumnMenuFilterLogic,
+        ColumnMenuTextFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };
 /**
  * The `ColumnMenuNumericColumn` component. Use it for `number` type columns.
  */
 export var ColumnMenuNumericColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'or', filters: [{ operator: 'eq', field: field, value: null }, { operator: 'eq', field: field, value: null }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'or', filters: [{ operator: 'eq', field: currentField, value: null }, { operator: 'eq', field: currentField, value: null }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuNumericFilter,
-            ColumnMenuFilterLogic,
-            ColumnMenuNumericFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuNumericFilter,
+        ColumnMenuFilterLogic,
+        ColumnMenuNumericFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };
 /**
  * The `ColumnMenuDateColumn` component. Use it for `Date` type columns.
  */
 export var ColumnMenuDateColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'or', filters: [{ operator: 'eq', field: field, value: null }, { operator: 'eq', field: field, value: null }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'or', filters: [{ operator: 'eq', field: currentField, value: null }, { operator: 'eq', field: currentField, value: null }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuDateFilter,
-            ColumnMenuFilterLogic,
-            ColumnMenuDateFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuDateFilter,
+        ColumnMenuFilterLogic,
+        ColumnMenuDateFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };
 /**
  * The `ColumnMenuBooleanColumn` component. Use it for `boolean` type columns.
  */
 export var ColumnMenuBooleanColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'and', filters: [{ operator: 'eq', field: field, value: false }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'and', filters: [{ operator: 'eq', field: currentField, value: false }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuBooleanFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuBooleanFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };

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

@@ -5,6 +5,7 @@ import { HeaderCellProps } from './HeaderCell';
 import { SortSettings } from './SortSettings';
 import { ColumnResize } from '../drag/ColumnResize';
 import { ColumnDraggableProps } from '../drag/ColumnDraggable';
+import { ColumnMenuProps } from '../columnmenu';
 /**
  * @hidden
  */
@@ -17,7 +18,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
     selectionChange: (e: any) => void;
     cellRender?: (defaultRendering: React.ReactNode | null, props: HeaderCellProps) => React.ReactNode;
     columnResize?: ColumnResize;
-    columnMenu?: React.ComponentType<any>;
+    columnMenu?: React.ComponentType<ColumnMenuProps>;
     columnMenuFilter?: CompositeFilterDescriptor[];
     columnMenuFilterChange?: (e: React.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field?: string) => void;
 }

package/dist/es/header/HeaderRow.js

@@ -115,11 +115,18 @@ var HeaderRow = /** @class */ (function (_super) {
             } : {
                 role: 'presentation'
             };
+            var columnMenuProps = {
+                sort: _this.props.sort,
+                onSortChange: _this.props.sortChange,
+                filter: _this.props.columnMenuFilter,
+                onFilterChange: _this.props.columnMenuFilterChange,
+                field: column.field
+            };
             return (React.createElement(HeaderThElement, __assign({ key: index, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined }, ariaAttrs),
                 column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)),
                 !column.headerCell && (React.createElement("span", { className: 'k-cell-inner' },
                     React.createElement(HeaderCell, __assign({}, headerCellProps)),
-                    ColumnMenu && (React.createElement(ColumnMenu, { sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.columnMenuFilter, onFilterChange: _this.props.columnMenuFilterChange, field: column.field })))),
+                    ColumnMenu && (React.createElement(ColumnMenu, __assign({}, columnMenuProps))))),
                 columnResize && resizable &&
                     React.createElement(ColumnResizer, { key: "ColumnResizer", resize: function (e, element, end) { return columnResize.dragHandler(e, column, element, end); } })));
         }); };

package/dist/es/package-metadata.js

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

package/dist/npm/columnmenu/ColumnMenu.d.ts

@@ -19,11 +19,11 @@ export interface ColumnMenuProps {
     /**
      * Fires when the ColumnMenu filter is changed.
      */
-    onFilterChange?: (event: React.SyntheticEvent<any>, filter: CompositeFilterDescriptor, field: string) => void;
+    onFilterChange?: (event: React.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field: string) => void;
     /**
      * The field to which the ColumnMenu is bound.
      */
-    field: string;
+    field?: string;
     /**
      * If set to `true`, a button for sorting in `asc` direction will be rendered.
      */
@@ -52,7 +52,7 @@ export interface ColumnMenuProps {
      * `props` contains the column's field and the closeMenu function which closes the ColumnMenu.
      */
     itemsRender?: (defaultRendering: (React.ReactElement<HTMLDivElement> | null)[], props: {
-        field: string;
+        field?: string;
         closeMenu: () => void;
     }) => React.ReactNode;
     /**

package/dist/npm/columnmenu/ColumnMenu.js

@@ -10,6 +10,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var kendo_react_popup_1 = require("@progress/kendo-react-popup");
@@ -22,13 +31,14 @@ var ColumnMenuFilterForm_1 = require("./ColumnMenuFilterForm");
 var messages_1 = require("../messages");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
-var ColumnMenu = function (props) {
+/** @hidden */
+var ColumnMenuWrapper = function (props) {
     kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
     var emptySort = React.useRef([]);
     var field = props.field, filter = props.filter, _a = props.sort, sort = _a === void 0 ? emptySort.current : _a, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, initialFilter = props.initialFilter, _b = props.sortAsc, sortAsc = _b === void 0 ? false : _b, _c = props.sortDesc, sortDesc = _c === void 0 ? false : _c, _d = props.filterContent, filterContent = _d === void 0 ? [] : _d, _e = props.expandFilters, expandFilters = _e === void 0 ? false : _e;
     var _f = React.useState(false), show = _f[0], setShow = _f[1];
     var _g = React.useState(expandFilters), filterExpand = _g[0], setFilterExpand = _g[1];
-    var _h = React.useState(initialFilter(field)), currentFilter = _h[0], setCurrentFilter = _h[1];
+    var _h = React.useState(field && initialFilter ? initialFilter(field) : null), currentFilter = _h[0], setCurrentFilter = _h[1];
     var anchor = React.useRef(null);
     var popupRef = React.useRef(null);
     var blurTimeout = React.useRef(null);
@@ -45,10 +55,12 @@ var ColumnMenu = function (props) {
     var onFocus = React.useCallback(function () { return clearTimeout(blurTimeout.current); }, []);
     var onColumnMenuButtonClick = React.useCallback(function () {
         setShow(!show);
-        setFilterExpand(!show ? expandFilters : false);
-        setCurrentFilter(show ?
-            currentFilter :
-            (menuFilter() || initialFilter(field)));
+        if (field && initialFilter) {
+            setFilterExpand(!show ? expandFilters : false);
+            setCurrentFilter(show ?
+                currentFilter :
+                (menuFilter() || initialFilter(field)));
+        }
     }, [menuFilter, field, show, currentFilter, initialFilter, expandFilters]);
     React.useEffect(function () {
         if (show && popupRef.current) {
@@ -82,7 +94,7 @@ var ColumnMenu = function (props) {
         stateFilter.filters.splice(index, 1, nextFilter);
         setCurrentFilter(stateFilter);
     }, [currentFilter]);
-    var onSubmit = React.useCallback(function (event) {
+    var onFilterSubmit = React.useCallback(function (event) {
         event.preventDefault();
         var newFilter = (filter || []).slice();
         var prev = menuFilter();
@@ -98,14 +110,16 @@ var ColumnMenu = function (props) {
             onFilterChange.call(undefined, event, newFilter, field);
         }
     }, [filter, currentFilter, field, onFilterChange, closeMenu, menuFilter]);
-    var onReset = React.useCallback(function (event) {
+    var onFilterReset = React.useCallback(function (event) {
         var newFilter = (filter || []).slice();
         var prev = menuFilter();
         var index = prev ? newFilter.indexOf(prev) : -1;
         if (index >= 0) {
             newFilter.splice(index, 1);
         }
-        setCurrentFilter(initialFilter(field));
+        if (initialFilter) {
+            setCurrentFilter(initialFilter(field));
+        }
         closeMenu();
         if (onFilterChange) {
             onFilterChange.call(undefined, event, newFilter, field);
@@ -113,10 +127,8 @@ var ColumnMenu = function (props) {
     }, [filter, field, onFilterChange, initialFilter, closeMenu, menuFilter]);
     var sortAscChange = React.useCallback(function (e) { return changeSort(e, 'asc'); }, [changeSort]);
     var sortDescChange = React.useCallback(function (e) { return changeSort(e, 'desc'); }, [changeSort]);
-    var onLogicChange = React.useCallback(function (event) { return setCurrentFilter(__assign({}, currentFilter, { logic: event.value.logic })); }, [currentFilter]);
+    var onLogicChange = React.useCallback(function (event) { return currentFilter && setCurrentFilter(__assign({}, currentFilter, { logic: event.value.logic })); }, [currentFilter]);
     var currentSort = sort.find(function (d) { return d.field === field; }) || { dir: '' };
-    var firstFilter = currentFilter.filters[0];
-    var secondFilter = currentFilter.filters[1];
     var FirstFilterComponent = filterContent[0], FilterLogicComponent = filterContent[1], SecondFilterComponent = filterContent[2];
     var localization = kendo_react_intl_1.useLocalization();
     var sorting = (sortAsc || sortDesc) ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "sorting" },
@@ -124,15 +136,16 @@ var ColumnMenu = function (props) {
             (React.createElement(ColumnMenuItem_1.ColumnMenuItem, { title: localization.toLanguageString(messages_1.columnMenuSortAscending, messages_1.messages[messages_1.columnMenuSortAscending]), iconClass: "k-i-sort-asc-sm", selected: currentSort.dir === 'asc', onClick: sortAscChange })),
         sortDesc &&
             (React.createElement(ColumnMenuItem_1.ColumnMenuItem, { title: localization.toLanguageString(messages_1.columnMenuSortDescending, messages_1.messages[messages_1.columnMenuSortDescending]), iconClass: "k-i-sort-desc-sm", selected: currentSort.dir === 'desc', onClick: sortDescChange })))) : null;
-    var filtering = filterContent.length > 0 ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "filtering" },
+    // filter content empty when no field is supplied
+    var filtering = currentFilter && filterContent.length > 0 ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "filtering" },
         React.createElement(ColumnMenuItem_1.ColumnMenuItem, { iconClass: "k-i-filter", title: localization.toLanguageString(messages_1.columnMenuFilterTitle, messages_1.messages[messages_1.columnMenuFilterTitle]), onClick: filterItemClick }),
-        React.createElement(ColumnMenuFilterForm_1.ColumnMenuFilterForm, { show: filterExpand, onSubmit: onSubmit, onReset: onReset },
+        React.createElement(ColumnMenuFilterForm_1.ColumnMenuFilterForm, { show: filterExpand, onSubmit: onFilterSubmit, onReset: onFilterReset },
             FirstFilterComponent &&
-                React.createElement(FirstFilterComponent, { filter: firstFilter, onFilterChange: filterChange }),
+                React.createElement(FirstFilterComponent, { filter: currentFilter.filters[0], onFilterChange: filterChange }),
             FilterLogicComponent &&
                 React.createElement(FilterLogicComponent, { value: currentFilter.logic, onChange: onLogicChange }),
             SecondFilterComponent &&
-                React.createElement(SecondFilterComponent, { filter: secondFilter, onFilterChange: filterChange })))) : null;
+                React.createElement(SecondFilterComponent, { filter: currentFilter.filters[1], onFilterChange: filterChange })))) : null;
     var menuItems = [sorting, filtering];
     var button = (React.createElement("span", { ref: anchor, onClick: onColumnMenuButtonClick, className: 'k-grid-column-menu k-grid-filter' + (Boolean(menuFilter()) ? ' k-state-active' : ''), key: "button" },
         React.createElement("span", { className: "k-icon k-i-more-vertical" })));
@@ -147,49 +160,61 @@ var ColumnMenu = function (props) {
  * The `ColumnMenuTextColumn` component. Use it for `string` type columns.
  */
 exports.ColumnMenuTextColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'and', filters: [{ operator: 'contains', field: field, value: '' }, { operator: 'contains', field: field, value: '' }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'and', filters: [{ operator: 'contains', field: currentField, value: '' }, { operator: 'contains', field: currentField, value: '' }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuFilters_1.ColumnMenuTextFilter,
-            ColumnMenuFilterLogic_1.ColumnMenuFilterLogic,
-            ColumnMenuFilters_1.ColumnMenuTextFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuFilters_1.ColumnMenuTextFilter,
+        ColumnMenuFilterLogic_1.ColumnMenuFilterLogic,
+        ColumnMenuFilters_1.ColumnMenuTextFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };
 /**
  * The `ColumnMenuNumericColumn` component. Use it for `number` type columns.
  */
 exports.ColumnMenuNumericColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'or', filters: [{ operator: 'eq', field: field, value: null }, { operator: 'eq', field: field, value: null }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'or', filters: [{ operator: 'eq', field: currentField, value: null }, { operator: 'eq', field: currentField, value: null }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuFilters_1.ColumnMenuNumericFilter,
-            ColumnMenuFilterLogic_1.ColumnMenuFilterLogic,
-            ColumnMenuFilters_1.ColumnMenuNumericFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuFilters_1.ColumnMenuNumericFilter,
+        ColumnMenuFilterLogic_1.ColumnMenuFilterLogic,
+        ColumnMenuFilters_1.ColumnMenuNumericFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };
 /**
  * The `ColumnMenuDateColumn` component. Use it for `Date` type columns.
  */
 exports.ColumnMenuDateColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'or', filters: [{ operator: 'eq', field: field, value: null }, { operator: 'eq', field: field, value: null }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'or', filters: [{ operator: 'eq', field: currentField, value: null }, { operator: 'eq', field: currentField, value: null }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuFilters_1.ColumnMenuDateFilter,
-            ColumnMenuFilterLogic_1.ColumnMenuFilterLogic,
-            ColumnMenuFilters_1.ColumnMenuDateFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuFilters_1.ColumnMenuDateFilter,
+        ColumnMenuFilterLogic_1.ColumnMenuFilterLogic,
+        ColumnMenuFilters_1.ColumnMenuDateFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };
 /**
  * The `ColumnMenuBooleanColumn` component. Use it for `boolean` type columns.
  */
 exports.ColumnMenuBooleanColumn = function (props) {
-    var initialFilter = React.useCallback(function (field) {
-        return ({ logic: 'and', filters: [{ operator: 'eq', field: field, value: false }] });
+    var field = props.field, others = __rest(props, ["field"]);
+    var initialFilter = React.useCallback(function (currentField) {
+        return ({ logic: 'and', filters: [{ operator: 'eq', field: currentField, value: false }] });
     }, []);
-    return (React.createElement(ColumnMenu, __assign({ sortAsc: true, sortDesc: true, filterContent: [
-            ColumnMenuFilters_1.ColumnMenuBooleanFilter
-        ], initialFilter: initialFilter }, props)));
+    var hasField = Boolean(props.field);
+    var filterContent = hasField ? [
+        ColumnMenuFilters_1.ColumnMenuBooleanFilter
+    ] : [];
+    return (React.createElement(ColumnMenuWrapper, __assign({ sortAsc: true && hasField, sortDesc: true && hasField, filterContent: filterContent, initialFilter: hasField ? initialFilter : undefined, field: field }, others)));
 };

package/dist/npm/header/HeaderRow.d.ts

@@ -5,6 +5,7 @@ import { HeaderCellProps } from './HeaderCell';
 import { SortSettings } from './SortSettings';
 import { ColumnResize } from '../drag/ColumnResize';
 import { ColumnDraggableProps } from '../drag/ColumnDraggable';
+import { ColumnMenuProps } from '../columnmenu';
 /**
  * @hidden
  */
@@ -17,7 +18,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
     selectionChange: (e: any) => void;
     cellRender?: (defaultRendering: React.ReactNode | null, props: HeaderCellProps) => React.ReactNode;
     columnResize?: ColumnResize;
-    columnMenu?: React.ComponentType<any>;
+    columnMenu?: React.ComponentType<ColumnMenuProps>;
     columnMenuFilter?: CompositeFilterDescriptor[];
     columnMenuFilterChange?: (e: React.SyntheticEvent<any>, filter: CompositeFilterDescriptor[], field?: string) => void;
 }

package/dist/npm/header/HeaderRow.js

@@ -117,11 +117,18 @@ var HeaderRow = /** @class */ (function (_super) {
             } : {
                 role: 'presentation'
             };
+            var columnMenuProps = {
+                sort: _this.props.sort,
+                onSortChange: _this.props.sortChange,
+                filter: _this.props.columnMenuFilter,
+                onFilterChange: _this.props.columnMenuFilterChange,
+                field: column.field
+            };
             return (React.createElement(HeaderThElement_1.HeaderThElement, __assign({ key: index, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined }, ariaAttrs),
                 column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)),
                 !column.headerCell && (React.createElement("span", { className: 'k-cell-inner' },
                     React.createElement(HeaderCell_1.HeaderCell, __assign({}, headerCellProps)),
-                    ColumnMenu && (React.createElement(ColumnMenu, { sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.columnMenuFilter, onFilterChange: _this.props.columnMenuFilterChange, field: column.field })))),
+                    ColumnMenu && (React.createElement(ColumnMenu, __assign({}, columnMenuProps))))),
                 columnResize && resizable &&
                     React.createElement(ColumnResizer_1.ColumnResizer, { key: "ColumnResizer", resize: function (e, element, end) { return columnResize.dragHandler(e, column, element, end); } })));
         }); };

package/dist/npm/package-metadata.js

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