@progress/kendo-react-grid 5.19.0-dev.202309201348 → 5.19.0-dev.202309211522

package/dist/es/columnMenu/GridColumnMenuColumnsList.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GridColumnProps } from './../interfaces/GridColumnProps';
+/**
+ * Represents the props of the KendoReact GridColumnMenuColumnsList component.
+ */
+export interface GridColumnMenuColumnsListProps {
+    /**
+     * The columns state of the KendoReact GridColumnMenuColumnsList component.
+     */
+    columnsState: GridColumnProps[];
+    /**
+     * The initial columns of the KendoReact GridColumnMenuColumnsList component.
+     */
+    columns: GridColumnProps[];
+    /**
+     * The onColumnsChange event handler of the KendoReact GridColumnMenuColumnsList component.
+     */
+    onColumnsChange: (cols: GridColumnProps[]) => void;
+    /**
+     * The onCloseMenu event handler of the KendoReact GridColumnMenuColumnsList component.
+     */
+    onCloseMenu: Function;
+}
+/**
+ * Represents the KendoReact GridColumnMenuColumnsList component.
+ */
+export declare const GridColumnMenuColumnsList: React.FunctionComponent<GridColumnMenuColumnsListProps>;

package/dist/es/columnMenu/GridColumnMenuColumnsList.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Checkbox, InputPrefix, TextBox } from '@progress/kendo-react-inputs';
+import { IconWrap } from '@progress/kendo-react-common';
+import { searchIcon } from '@progress/kendo-svg-icons';
+import { Button } from '@progress/kendo-react-buttons';
+/**
+ * Represents the KendoReact GridColumnMenuColumnsList component.
+ */
+export var GridColumnMenuColumnsList = function (props) {
+    var _a = React.useState(''), filter = _a[0], setFilter = _a[1];
+    var selectedColumnsIds = React.useMemo(function () { return new Set(props.columnsState.map(function (c) { return c.id; })); }, [props.columnsState]);
+    var filtered = React.useMemo(function () {
+        return props.columns.filter(function (c) { var _a; return (_a = (c.title || c.field)) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filter.toLowerCase()); });
+    }, [props.columns, filter]);
+    var state = props.columns.map(function (c) { return React.useState(selectedColumnsIds.has(c.id)); });
+    var onApply = React.useCallback(function () {
+        var nextColumns = props.columns.filter(function (_c, i) { return state[i][0]; });
+        props.onColumnsChange.call(undefined, nextColumns);
+        props.onCloseMenu.call(undefined);
+    }, [state, props.columns, props.onColumnsChange, props.onCloseMenu]);
+    var onReset = React.useCallback(function () {
+        props.columns.forEach(function (c, i) {
+            state[i][1](selectedColumnsIds.has(c.id));
+        });
+    }, [state, selectedColumnsIds, props.columns]);
+    var checkedCount = state.filter(function (st) { return st[0]; }).length;
+    var allSelected = checkedCount === state.length;
+    var onSelectAll = React.useCallback(function () {
+        state.forEach(function (st, i) {
+            if (allSelected && i === 0) {
+                st[1](true);
+            }
+            else {
+                st[1](!allSelected);
+            }
+        });
+    }, [state, allSelected]);
+    return (React.createElement("form", { className: "k-filter-menu k-group k-reset" },
+        React.createElement("div", { className: "k-filter-menu-container" },
+            React.createElement(TextBox, { className: 'k-searchbox', value: filter, onChange: function (e) { return setFilter(String(e.target.value)); }, prefix: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement(InputPrefix, null,
+                        React.createElement(IconWrap, { name: "search", icon: searchIcon })))); } }),
+            React.createElement("ul", { className: "k-reset k-multicheck-wrap" },
+                !filter && React.createElement("li", { className: "k-item k-check-all-wrap" },
+                    React.createElement(Checkbox, { checked: allSelected, onChange: onSelectAll, label: '(Select all)' })),
+                filtered.map(function (c, i) {
+                    return (React.createElement("li", { key: c.id, className: "k-item" },
+                        React.createElement(Checkbox, { disabled: state[i][0] && checkedCount === 1, checked: state[i][0], onChange: function (e) { var _a; return state[i][1](Boolean((_a = e.target.element) === null || _a === void 0 ? void 0 : _a.checked)); }, label: c.title || c.field })));
+                })),
+            React.createElement("div", { className: "k-filter-selected-items" },
+                checkedCount,
+                " selected items"),
+            React.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" },
+                React.createElement(Button, { type: "button", themeColor: 'primary', onClick: onApply }, "Apply"),
+                React.createElement(Button, { type: "button", onClick: onReset }, "Reset")))));
+};
+GridColumnMenuColumnsList.displayName = 'GridColumnMenuColumnsList';

package/dist/es/columnMenu/GridColumnMenuFilter.d.ts

@@ -33,6 +33,10 @@ export interface GridColumnMenuFilterProps extends GridColumnMenuFilterBaseProps
      */
     filterUI?: ComponentType<GridColumnMenuFilterUIProps>;
     children?: React.ReactNode;
+    /**
+     * If set to `true`, filter expand button will not be rendered and filter menu will be expanded.
+     */
+    alwaysExpand?: boolean;
 }
 /**
  * @hidden

package/dist/es/columnMenu/GridColumnMenuFilter.js

@@ -349,9 +349,10 @@ var GridColumnMenuFilter = /** @class */ (function (_super) {
             IsUnaryFilter(filters[0].operator) ||
             IsUnaryFilter(filters[1].operator);
         var expandState = this.isControlled() ? this.props.expanded : this.state.expanded;
+        var alwaysExpand = this.props.alwaysExpand;
         return (React.createElement(GridColumnMenuItemGroup, null,
-            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(filterTitle, messages[filterTitle]), iconClass: 'k-i-filter', svgIcon: filterIcon, onClick: this.onFilterExpand }),
-            React.createElement(GridColumnMenuItemContent, { show: !!expandState },
+            !alwaysExpand && React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(filterTitle, messages[filterTitle]), iconClass: 'k-i-filter', svgIcon: filterIcon, onClick: this.onFilterExpand }),
+            React.createElement(GridColumnMenuItemContent, { show: alwaysExpand || !!expandState },
                 React.createElement("div", { className: 'kendo-grid-filter-menu-container' },
                     React.createElement("form", { className: 'k-filter-menu k-group k-reset k-state-border-up', onSubmit: this.submit, onReset: this.clear, onKeyDown: function (e) { return e.stopPropagation(); } },
                         React.createElement("div", { className: 'k-filter-menu-container' },

package/dist/es/columnMenu/GridColumnMenuItem.d.ts

@@ -7,7 +7,7 @@ export interface GridColumnMenuItemProps {
     /**
      * Triggered each time the title is clicked.
      */
-    onClick: Function;
+    onClick: React.MouseEventHandler<HTMLElement>;
     /**
      * The title of the GridColumnMenuItem component.
      */
@@ -29,7 +29,6 @@ export interface GridColumnMenuItemProps {
  * The GridColumnMenuItem component that is used inside the Grid ColumnMenu.
  */
 export declare class GridColumnMenuItem extends React.Component<GridColumnMenuItemProps, {}> {
-    onClick: (e: any) => void;
     /**
      * @hidden
      */

package/dist/es/columnMenu/GridColumnMenuItem.js

@@ -21,20 +21,14 @@ import { IconWrap, toIconName } from '@progress/kendo-react-common';
 var GridColumnMenuItem = /** @class */ (function (_super) {
     __extends(GridColumnMenuItem, _super);
     function GridColumnMenuItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onClick = function (e) {
-            if (_this.props.onClick) {
-                _this.props.onClick(e);
-            }
-        };
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     /**
      * @hidden
      */
     GridColumnMenuItem.prototype.render = function () {
         var _a = this.props, title = _a.title, iconClass = _a.iconClass, svgIcon = _a.svgIcon, selected = _a.selected;
-        return (React.createElement("div", { onClick: this.onClick, className: "k-columnmenu-item ".concat(selected ? 'k-selected' : '') },
+        return (React.createElement("div", { onClick: this.props.onClick, className: "k-columnmenu-item ".concat(selected ? 'k-selected' : '') },
             (iconClass || svgIcon) && React.createElement(IconWrap, { name: iconClass ? toIconName(iconClass) : iconClass, icon: svgIcon }),
             title));
     };

package/dist/es/columnMenu/GridColumnMenuWrapper.d.ts

@@ -39,5 +39,7 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
     closeMenu: () => void;
     /** @hidden */
     onAnchorMouseDown: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** @hidden */
+    onAnchorFocus: (event: React.FocusEvent<HTMLAnchorElement>) => void;
     render(): JSX.Element;
 }

package/dist/es/columnMenu/GridColumnMenuWrapper.js

@@ -88,6 +88,16 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
         _this.onAnchorMouseDown = function (event) {
             _this.willBlur = _this.state.show && event.currentTarget === _this._anchor;
         };
+        /** @hidden */
+        _this.onAnchorFocus = function (event) {
+            var _a;
+            var elementToFocus = event.target;
+            var parentScroll = elementToFocus && ((_a = elementToFocus.closest('.k-grid')) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('k-grid-content')[0]);
+            var hasHorizontalScrollbar = parentScroll && (parentScroll.scrollWidth > parentScroll.clientWidth);
+            if (hasHorizontalScrollbar) {
+                elementToFocus.scrollIntoView({ inline: 'center' });
+            }
+        };
         return _this;
     }
     GridColumnMenuWrapper.prototype.render = function () {
@@ -97,7 +107,7 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
         var localizationService = provideLocalizationService(this);
         var field = column.field ? "".concat(column.field, " ") : '';
         return (React.createElement(React.Fragment, null,
-            React.createElement("a", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown, href: "#", title: "".concat(field).concat(localizationService.toLanguageString(columnMenu, messages[columnMenu])) },
+            React.createElement("a", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown, onFocus: this.onAnchorFocus, href: "#", title: "".concat(field).concat(localizationService.toLanguageString(columnMenu, messages[columnMenu])) },
                 React.createElement(IconWrap, { name: 'more-vertical', icon: moreVerticalIcon })),
             React.createElement(Popup, { anchor: this._anchor, show: this.state.show },
                 React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } }, ColumnMenu && (React.createElement(ColumnMenu, __assign({}, others, { onCloseMenu: this.closeMenu })))))));

package/dist/es/header/HeaderRow.js

@@ -100,6 +100,8 @@ var HeaderRow = /** @class */ (function (_super) {
             var headerCell = (React.createElement(HeaderCell, { key: 1, field: column.field, onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined, selectionChange: _this.props.selectionChange, title: column.title, selectionValue: column.headerSelectionValue, render: _this.props.cellRender, children: _this.sortIcon(sortIndex), columnMenuWrapperProps: {
                     column: {
                         field: column.field,
+                        id: column.id,
+                        locked: column.locked,
                         filter: column.filter
                     },
                     sortable: sortable && _this.props.sortable,

package/dist/es/interfaces/GridColumnMenuColumnProps.d.ts

@@ -10,4 +10,12 @@ export interface GridColumnMenuColumnProps {
      * Defines the filter type that is displayed inside the filter row. Defaults to `text`.
      */
     filter?: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * The column id.
+     */
+    id?: string;
+    /**
+     * The column locked state.
+     */
+    locked?: boolean;
 }

package/dist/es/main.d.ts

@@ -10,6 +10,7 @@ import { GridColumnMenuFilter, rootFilterOrDefault, filterGroupByField, GridColu
 import { GridColumnMenuFilterUI } from './columnMenu/GridColumnMenuFilterUI';
 import { GridColumnMenuFilterCell, GridColumnMenuFilterCellProps } from './columnMenu/GridColumnMenuFilterCell';
 import { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps } from './columnMenu/GridColumnMenuCheckboxFilter';
+import { GridColumnMenuColumnsList, GridColumnMenuColumnsListProps } from './columnMenu/GridColumnMenuColumnsList';
 import { GridCellProps } from './interfaces/GridCellProps';
 import { GridCell } from './cells/GridCell';
 import { GridEditCell } from './cells/GridEditCell';
@@ -46,4 +47,4 @@ import { GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE } from './constants'
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
 import { CommonDragLogic as GridCommonDragLogic } from './drag/CommonDragLogic';
 import { booleanFilterValues, operators } from './filterCommon';
-export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, GridColumnMenuFilterProps, booleanFilterValues, operators };
+export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, GridColumnMenuFilterProps, booleanFilterValues, operators };

package/dist/es/main.js

@@ -7,6 +7,7 @@ import { GridColumnMenuFilter, rootFilterOrDefault, filterGroupByField } from '.
 import { GridColumnMenuFilterUI } from './columnMenu/GridColumnMenuFilterUI';
 import { GridColumnMenuFilterCell } from './columnMenu/GridColumnMenuFilterCell';
 import { GridColumnMenuCheckboxFilter } from './columnMenu/GridColumnMenuCheckboxFilter';
+import { GridColumnMenuColumnsList } from './columnMenu/GridColumnMenuColumnsList';
 import { GridCell } from './cells/GridCell';
 import { GridEditCell } from './cells/GridEditCell';
 import { GridGroupCell } from './cells/GridGroupCell';
@@ -28,4 +29,4 @@ import { GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE } from './constants'
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
 import { CommonDragLogic as GridCommonDragLogic } from './drag/CommonDragLogic';
 import { booleanFilterValues, operators } from './filterCommon';
-export { Grid, GridColumn, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridRow, GridFilterCell, GridHeaderCell, GridSelectionCell, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridToolbar, GridNoRecords, GridColumnMenuWrapper, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, booleanFilterValues, operators };
+export { Grid, GridColumn, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridRow, GridFilterCell, GridHeaderCell, GridSelectionCell, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridColumnMenuColumnsList, GridToolbar, GridNoRecords, GridColumnMenuWrapper, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, booleanFilterValues, operators };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1695215976,
+    publishDate: 1695307955,
     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/GridColumnMenuColumnsList.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { GridColumnProps } from './../interfaces/GridColumnProps';
+/**
+ * Represents the props of the KendoReact GridColumnMenuColumnsList component.
+ */
+export interface GridColumnMenuColumnsListProps {
+    /**
+     * The columns state of the KendoReact GridColumnMenuColumnsList component.
+     */
+    columnsState: GridColumnProps[];
+    /**
+     * The initial columns of the KendoReact GridColumnMenuColumnsList component.
+     */
+    columns: GridColumnProps[];
+    /**
+     * The onColumnsChange event handler of the KendoReact GridColumnMenuColumnsList component.
+     */
+    onColumnsChange: (cols: GridColumnProps[]) => void;
+    /**
+     * The onCloseMenu event handler of the KendoReact GridColumnMenuColumnsList component.
+     */
+    onCloseMenu: Function;
+}
+/**
+ * Represents the KendoReact GridColumnMenuColumnsList component.
+ */
+export declare const GridColumnMenuColumnsList: React.FunctionComponent<GridColumnMenuColumnsListProps>;

package/dist/npm/columnMenu/GridColumnMenuColumnsList.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridColumnMenuColumnsList = void 0;
+var React = require("react");
+var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+/**
+ * Represents the KendoReact GridColumnMenuColumnsList component.
+ */
+var GridColumnMenuColumnsList = function (props) {
+    var _a = React.useState(''), filter = _a[0], setFilter = _a[1];
+    var selectedColumnsIds = React.useMemo(function () { return new Set(props.columnsState.map(function (c) { return c.id; })); }, [props.columnsState]);
+    var filtered = React.useMemo(function () {
+        return props.columns.filter(function (c) { var _a; return (_a = (c.title || c.field)) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filter.toLowerCase()); });
+    }, [props.columns, filter]);
+    var state = props.columns.map(function (c) { return React.useState(selectedColumnsIds.has(c.id)); });
+    var onApply = React.useCallback(function () {
+        var nextColumns = props.columns.filter(function (_c, i) { return state[i][0]; });
+        props.onColumnsChange.call(undefined, nextColumns);
+        props.onCloseMenu.call(undefined);
+    }, [state, props.columns, props.onColumnsChange, props.onCloseMenu]);
+    var onReset = React.useCallback(function () {
+        props.columns.forEach(function (c, i) {
+            state[i][1](selectedColumnsIds.has(c.id));
+        });
+    }, [state, selectedColumnsIds, props.columns]);
+    var checkedCount = state.filter(function (st) { return st[0]; }).length;
+    var allSelected = checkedCount === state.length;
+    var onSelectAll = React.useCallback(function () {
+        state.forEach(function (st, i) {
+            if (allSelected && i === 0) {
+                st[1](true);
+            }
+            else {
+                st[1](!allSelected);
+            }
+        });
+    }, [state, allSelected]);
+    return (React.createElement("form", { className: "k-filter-menu k-group k-reset" },
+        React.createElement("div", { className: "k-filter-menu-container" },
+            React.createElement(kendo_react_inputs_1.TextBox, { className: 'k-searchbox', value: filter, onChange: function (e) { return setFilter(String(e.target.value)); }, prefix: function () { return (React.createElement(React.Fragment, null,
+                    React.createElement(kendo_react_inputs_1.InputPrefix, null,
+                        React.createElement(kendo_react_common_1.IconWrap, { name: "search", icon: kendo_svg_icons_1.searchIcon })))); } }),
+            React.createElement("ul", { className: "k-reset k-multicheck-wrap" },
+                !filter && React.createElement("li", { className: "k-item k-check-all-wrap" },
+                    React.createElement(kendo_react_inputs_1.Checkbox, { checked: allSelected, onChange: onSelectAll, label: '(Select all)' })),
+                filtered.map(function (c, i) {
+                    return (React.createElement("li", { key: c.id, className: "k-item" },
+                        React.createElement(kendo_react_inputs_1.Checkbox, { disabled: state[i][0] && checkedCount === 1, checked: state[i][0], onChange: function (e) { var _a; return state[i][1](Boolean((_a = e.target.element) === null || _a === void 0 ? void 0 : _a.checked)); }, label: c.title || c.field })));
+                })),
+            React.createElement("div", { className: "k-filter-selected-items" },
+                checkedCount,
+                " selected items"),
+            React.createElement("div", { className: "k-actions k-actions-start k-actions-horizontal" },
+                React.createElement(kendo_react_buttons_1.Button, { type: "button", themeColor: 'primary', onClick: onApply }, "Apply"),
+                React.createElement(kendo_react_buttons_1.Button, { type: "button", onClick: onReset }, "Reset")))));
+};
+exports.GridColumnMenuColumnsList = GridColumnMenuColumnsList;
+exports.GridColumnMenuColumnsList.displayName = 'GridColumnMenuColumnsList';

package/dist/npm/columnMenu/GridColumnMenuFilter.d.ts

@@ -33,6 +33,10 @@ export interface GridColumnMenuFilterProps extends GridColumnMenuFilterBaseProps
      */
     filterUI?: ComponentType<GridColumnMenuFilterUIProps>;
     children?: React.ReactNode;
+    /**
+     * If set to `true`, filter expand button will not be rendered and filter menu will be expanded.
+     */
+    alwaysExpand?: boolean;
 }
 /**
  * @hidden

package/dist/npm/columnMenu/GridColumnMenuFilter.js

@@ -354,9 +354,10 @@ var GridColumnMenuFilter = /** @class */ (function (_super) {
             (0, filterCommon_1.IsUnaryFilter)(filters[0].operator) ||
             (0, filterCommon_1.IsUnaryFilter)(filters[1].operator);
         var expandState = this.isControlled() ? this.props.expanded : this.state.expanded;
+        var alwaysExpand = this.props.alwaysExpand;
         return (React.createElement(GridColumnMenuItemGroup_1.GridColumnMenuItemGroup, null,
-            React.createElement(GridColumnMenuItem_1.GridColumnMenuItem, { title: localizationService.toLanguageString(messages_1.filterTitle, messages_1.messages[messages_1.filterTitle]), iconClass: 'k-i-filter', svgIcon: kendo_svg_icons_1.filterIcon, onClick: this.onFilterExpand }),
-            React.createElement(GridColumnMenuItemContent_1.GridColumnMenuItemContent, { show: !!expandState },
+            !alwaysExpand && React.createElement(GridColumnMenuItem_1.GridColumnMenuItem, { title: localizationService.toLanguageString(messages_1.filterTitle, messages_1.messages[messages_1.filterTitle]), iconClass: 'k-i-filter', svgIcon: kendo_svg_icons_1.filterIcon, onClick: this.onFilterExpand }),
+            React.createElement(GridColumnMenuItemContent_1.GridColumnMenuItemContent, { show: alwaysExpand || !!expandState },
                 React.createElement("div", { className: 'kendo-grid-filter-menu-container' },
                     React.createElement("form", { className: 'k-filter-menu k-group k-reset k-state-border-up', onSubmit: this.submit, onReset: this.clear, onKeyDown: function (e) { return e.stopPropagation(); } },
                         React.createElement("div", { className: 'k-filter-menu-container' },

package/dist/npm/columnMenu/GridColumnMenuItem.d.ts

@@ -7,7 +7,7 @@ export interface GridColumnMenuItemProps {
     /**
      * Triggered each time the title is clicked.
      */
-    onClick: Function;
+    onClick: React.MouseEventHandler<HTMLElement>;
     /**
      * The title of the GridColumnMenuItem component.
      */
@@ -29,7 +29,6 @@ export interface GridColumnMenuItemProps {
  * The GridColumnMenuItem component that is used inside the Grid ColumnMenu.
  */
 export declare class GridColumnMenuItem extends React.Component<GridColumnMenuItemProps, {}> {
-    onClick: (e: any) => void;
     /**
      * @hidden
      */

package/dist/npm/columnMenu/GridColumnMenuItem.js

@@ -24,20 +24,14 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
 var GridColumnMenuItem = /** @class */ (function (_super) {
     __extends(GridColumnMenuItem, _super);
     function GridColumnMenuItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.onClick = function (e) {
-            if (_this.props.onClick) {
-                _this.props.onClick(e);
-            }
-        };
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     /**
      * @hidden
      */
     GridColumnMenuItem.prototype.render = function () {
         var _a = this.props, title = _a.title, iconClass = _a.iconClass, svgIcon = _a.svgIcon, selected = _a.selected;
-        return (React.createElement("div", { onClick: this.onClick, className: "k-columnmenu-item ".concat(selected ? 'k-selected' : '') },
+        return (React.createElement("div", { onClick: this.props.onClick, className: "k-columnmenu-item ".concat(selected ? 'k-selected' : '') },
             (iconClass || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: iconClass ? (0, kendo_react_common_1.toIconName)(iconClass) : iconClass, icon: svgIcon }),
             title));
     };

package/dist/npm/columnMenu/GridColumnMenuWrapper.d.ts

@@ -39,5 +39,7 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
     closeMenu: () => void;
     /** @hidden */
     onAnchorMouseDown: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** @hidden */
+    onAnchorFocus: (event: React.FocusEvent<HTMLAnchorElement>) => void;
     render(): JSX.Element;
 }

package/dist/npm/columnMenu/GridColumnMenuWrapper.js

@@ -91,6 +91,16 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
         _this.onAnchorMouseDown = function (event) {
             _this.willBlur = _this.state.show && event.currentTarget === _this._anchor;
         };
+        /** @hidden */
+        _this.onAnchorFocus = function (event) {
+            var _a;
+            var elementToFocus = event.target;
+            var parentScroll = elementToFocus && ((_a = elementToFocus.closest('.k-grid')) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('k-grid-content')[0]);
+            var hasHorizontalScrollbar = parentScroll && (parentScroll.scrollWidth > parentScroll.clientWidth);
+            if (hasHorizontalScrollbar) {
+                elementToFocus.scrollIntoView({ inline: 'center' });
+            }
+        };
         return _this;
     }
     GridColumnMenuWrapper.prototype.render = function () {
@@ -100,7 +110,7 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var field = column.field ? "".concat(column.field, " ") : '';
         return (React.createElement(React.Fragment, null,
-            React.createElement("a", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown, href: "#", title: "".concat(field).concat(localizationService.toLanguageString(messages_1.columnMenu, messages_1.messages[messages_1.columnMenu])) },
+            React.createElement("a", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown, onFocus: this.onAnchorFocus, href: "#", title: "".concat(field).concat(localizationService.toLanguageString(messages_1.columnMenu, messages_1.messages[messages_1.columnMenu])) },
                 React.createElement(kendo_react_common_1.IconWrap, { name: 'more-vertical', icon: kendo_svg_icons_1.moreVerticalIcon })),
             React.createElement(kendo_react_popup_1.Popup, { anchor: this._anchor, show: this.state.show },
                 React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } }, ColumnMenu && (React.createElement(ColumnMenu, __assign({}, others, { onCloseMenu: this.closeMenu })))))));

package/dist/npm/header/HeaderRow.js

@@ -103,6 +103,8 @@ var HeaderRow = /** @class */ (function (_super) {
             var headerCell = (React.createElement(HeaderCell, { key: 1, field: column.field, onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined, selectionChange: _this.props.selectionChange, title: column.title, selectionValue: column.headerSelectionValue, render: _this.props.cellRender, children: _this.sortIcon(sortIndex), columnMenuWrapperProps: {
                     column: {
                         field: column.field,
+                        id: column.id,
+                        locked: column.locked,
                         filter: column.filter
                     },
                     sortable: sortable && _this.props.sortable,

package/dist/npm/interfaces/GridColumnMenuColumnProps.d.ts

@@ -10,4 +10,12 @@ export interface GridColumnMenuColumnProps {
      * Defines the filter type that is displayed inside the filter row. Defaults to `text`.
      */
     filter?: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * The column id.
+     */
+    id?: string;
+    /**
+     * The column locked state.
+     */
+    locked?: boolean;
 }

package/dist/npm/main.d.ts

@@ -10,6 +10,7 @@ import { GridColumnMenuFilter, rootFilterOrDefault, filterGroupByField, GridColu
 import { GridColumnMenuFilterUI } from './columnMenu/GridColumnMenuFilterUI';
 import { GridColumnMenuFilterCell, GridColumnMenuFilterCellProps } from './columnMenu/GridColumnMenuFilterCell';
 import { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps } from './columnMenu/GridColumnMenuCheckboxFilter';
+import { GridColumnMenuColumnsList, GridColumnMenuColumnsListProps } from './columnMenu/GridColumnMenuColumnsList';
 import { GridCellProps } from './interfaces/GridCellProps';
 import { GridCell } from './cells/GridCell';
 import { GridEditCell } from './cells/GridEditCell';
@@ -46,4 +47,4 @@ import { GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE } from './constants'
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
 import { CommonDragLogic as GridCommonDragLogic } from './drag/CommonDragLogic';
 import { booleanFilterValues, operators } from './filterCommon';
-export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, GridColumnMenuFilterProps, booleanFilterValues, operators };
+export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, GridColumnMenuFilterProps, booleanFilterValues, operators };

package/dist/npm/main.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.operators = exports.booleanFilterValues = exports.filterGroupByField = exports.rootFilterOrDefault = exports.GridCommonDragLogic = exports.GRID_ROW_INDEX_ATTRIBUTE = exports.GRID_COL_INDEX_ATTRIBUTE = exports.getSelectedStateFromKeyDown = exports.setSelectedState = exports.getSelectedState = exports.GridColumnMenuWrapper = exports.GridNoRecords = exports.GridToolbar = exports.GridColumnMenuCheckboxFilter = exports.GridColumnMenuFilterCell = exports.GridColumnMenuFilterUI = exports.GridColumnMenuItemGroup = exports.GridColumnMenuItemContent = exports.GridColumnMenuItem = exports.GridColumnMenuGroup = exports.GridColumnMenuFilter = exports.GridColumnMenuSort = exports.GridSelectionCell = exports.GridHeaderCell = exports.GridFilterCell = exports.GridRow = exports.GridDetailRow = exports.GridHierarchyCell = exports.GridGroupCell = exports.GridEditCell = exports.GridCell = exports.GridColumn = exports.Grid = exports.pagerItemPerPage = exports.pagerLastPage = exports.pagerNextPage = exports.pagerPreviousPage = exports.pagerFirstPage = exports.pagerInfo = exports.gridMessages = void 0;
+exports.operators = exports.booleanFilterValues = exports.filterGroupByField = exports.rootFilterOrDefault = exports.GridCommonDragLogic = exports.GRID_ROW_INDEX_ATTRIBUTE = exports.GRID_COL_INDEX_ATTRIBUTE = exports.getSelectedStateFromKeyDown = exports.setSelectedState = exports.getSelectedState = exports.GridColumnMenuWrapper = exports.GridNoRecords = exports.GridToolbar = exports.GridColumnMenuColumnsList = exports.GridColumnMenuCheckboxFilter = exports.GridColumnMenuFilterCell = exports.GridColumnMenuFilterUI = exports.GridColumnMenuItemGroup = exports.GridColumnMenuItemContent = exports.GridColumnMenuItem = exports.GridColumnMenuGroup = exports.GridColumnMenuFilter = exports.GridColumnMenuSort = exports.GridSelectionCell = exports.GridHeaderCell = exports.GridFilterCell = exports.GridRow = exports.GridDetailRow = exports.GridHierarchyCell = exports.GridGroupCell = exports.GridEditCell = exports.GridCell = exports.GridColumn = exports.Grid = exports.pagerItemPerPage = exports.pagerLastPage = exports.pagerNextPage = exports.pagerPreviousPage = exports.pagerFirstPage = exports.pagerInfo = exports.gridMessages = void 0;
 var Grid_1 = require("./Grid");
 Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return Grid_1.Grid; } });
 var GridColumn_1 = require("./GridColumn");
@@ -35,6 +35,8 @@ var GridColumnMenuFilterCell_1 = require("./columnMenu/GridColumnMenuFilterCell"
 Object.defineProperty(exports, "GridColumnMenuFilterCell", { enumerable: true, get: function () { return GridColumnMenuFilterCell_1.GridColumnMenuFilterCell; } });
 var GridColumnMenuCheckboxFilter_1 = require("./columnMenu/GridColumnMenuCheckboxFilter");
 Object.defineProperty(exports, "GridColumnMenuCheckboxFilter", { enumerable: true, get: function () { return GridColumnMenuCheckboxFilter_1.GridColumnMenuCheckboxFilter; } });
+var GridColumnMenuColumnsList_1 = require("./columnMenu/GridColumnMenuColumnsList");
+Object.defineProperty(exports, "GridColumnMenuColumnsList", { enumerable: true, get: function () { return GridColumnMenuColumnsList_1.GridColumnMenuColumnsList; } });
 var GridCell_1 = require("./cells/GridCell");
 Object.defineProperty(exports, "GridCell", { enumerable: true, get: function () { return GridCell_1.GridCell; } });
 var GridEditCell_1 = require("./cells/GridEditCell");

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1695215976,
+    publishDate: 1695307955,
     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'
 };