@progress/kendo-react-dropdowns 5.1.0-dev.202202230917 → 5.1.0-dev.202202240928

package/dist/es/ComboBox/ComboBox.js

@@ -107,6 +107,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _this.setState({
                     group: group
                 });
+                if (_this.props.onGroupScroll) {
+                    _this.props.onGroupScroll.call(undefined, { group: group });
+                }
             }
         };
         _this.handleItemClick = function (index, event) {
@@ -379,9 +382,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _a['k-loading'] = loading,
                 _a['k-required'] = this.required,
                 _a['k-disabled'] = disabled,
-                _a), className), ref: this.componentRef, style: !label
-                ? style
-                : __assign({}, style, { width: undefined }), dir: dir },
+                _a), className), ref: this.componentRef, style: !label ? style : __assign({}, style, { width: undefined }), dir: dir },
             this.renderSearchBar(inputText || '', id),
             renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
             loading && React.createElement("span", { className: "k-icon k-i-loading", key: "loading" }),
@@ -509,7 +510,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     ComboBoxWithoutContext.prototype.renderListContainer = function () {
         var _a;
         var base = this.base;
-        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, size = _b.size;
+        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, size = _b.size, list = _b.list, virtual = _b.virtual;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var popupSettings = base.getPopupSettings();
         var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
@@ -521,22 +522,27 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {},
-                    _a["k-list-" + (sizeMap[size] || size)] = size,
-                    _a['k-virtual-list'] = this.base.vs.enabled,
-                    _a)),
+                popupClass: classNames(popupSettings.popupClass, 'k-reset'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
-            header && React.createElement("div", { className: "k-list-header" }, header),
-            group && React.createElement("div", { className: "k-group-header" }, group),
-            this.renderList(),
-            footer && React.createElement("div", { className: "k-list-footer" }, footer)));
+            React.createElement("div", { className: classNames((_a = {},
+                    _a['k-list'] = !list,
+                    _a["k-list-" + (sizeMap[size] || size)] = !list && size,
+                    _a['k-virtual-list'] = virtual,
+                    _a['k-data-table'] = list,
+                    _a["k-table-" + (sizeMap[size] || size)] = list && size,
+                    _a)) },
+                header && React.createElement("div", { className: "k-table-header" }, header),
+                !list && group && React.createElement("div", { className: "k-list-group-sticky-header" }, group),
+                this.renderList(),
+                footer && React.createElement("div", { className: "k-list-footer" }, footer))));
     };
     ComboBoxWithoutContext.prototype.renderList = function () {
         var _this = this;
+        var _a;
         var base = this.base;
-        var _a = this.props, textField = _a.textField, dataItemKey = _a.dataItemKey, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
+        var _b = this.props, textField = _b.textField, dataItemKey = _b.dataItemKey, listNoDataRender = _b.listNoDataRender, itemRender = _b.itemRender, _c = _b.data, data = _c === void 0 ? [] : _c, _d = _b.virtual, virtual = _d === void 0 ? { skip: 0 } : _d;
         var popupSettings = base.getPopupSettings();
         var vs = base.vs;
         var skip = virtual.skip;
@@ -547,7 +553,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var selectedItemText = getItemValue(this.value, textField);
         var value = isPresent(text) && text !== selectedItemText ? null : this.value;
         var ListComponent = this.props.list || List;
-        return (React.createElement(ListComponent, { id: base.listBoxId, show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
+        return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: classNames('k-list-content', (_a = {},
+                _a['k-list-scroller'] = !virtual,
+                _a['k-virtual-content'] = virtual,
+                _a)), listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
     };
     ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id) {
         var _this = this;

package/dist/es/ComboBox/ComboBoxProps.d.ts

@@ -209,6 +209,12 @@ export interface ComboBoxProps extends FormComponentProps {
      * Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
      */
     listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    onGroupScroll?: (event: {
+        group?: string;
+    }) => void;
     /**
      * Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
      */

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -139,6 +139,12 @@ export interface MultiColumnComboBoxProps extends ComboBoxProps {
      * Fires when both the virtual scrolling of the MultiColumnComboBox is enabled and the component requires data for another page.
      */
     onPageChange?: (event: ComboBoxPageChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupScroll?: (event: {
+        group: string;
+    }) => void;
     /**
      * Fires when a MultiColumnComboBox list item is about to be rendered. Used to override the default appearance of the list items.
      */

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -21,9 +21,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { MultiColumnList } from './../common/MultiColumnList';
-import { classNames, getScrollbarWidth, setScrollbarWidth, kendoThemeMaps, getter, usePropsContext, createPropsContext } from '@progress/kendo-react-common';
+import { classNames, getScrollbarWidth, setScrollbarWidth, getter, usePropsContext, createPropsContext } from '@progress/kendo-react-common';
 import { ComboBox, ComboBoxWithoutContext } from '../ComboBox/ComboBox';
-var sizeMap = kendoThemeMaps.sizeMap;
+import { getItemValue } from '../common/utils';
 var columnWidth = function (width, defaultWidth) {
     if (width) {
         return typeof width === 'number' ? width + 'px' : width;
@@ -45,12 +45,11 @@ export var MultiColumnComboBoxPropsContext = createPropsContext();
  *
  */
 export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
-    var _a;
     var props = usePropsContext(MultiColumnComboBoxPropsContext, directProps);
     var target = React.useRef(null);
     var comboBoxRef = React.useRef(null);
     var scrollbarWidth = getScrollbarWidth();
-    var _b = props.columns, columns = _b === void 0 ? defaultProps.columns : _b, _c = props.popupSettings, popupSettings = _c === void 0 ? defaultProps.popupSettings : _c, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
+    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.popupSettings, popupSettings = _b === void 0 ? defaultProps.popupSettings : _b, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
     React.useImperativeHandle(target, function () {
         return ({
             element: comboBoxRef.current && comboBoxRef.current.element,
@@ -65,12 +64,15 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
         });
     });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var popupWidth = React.useMemo(function () {
-        return "calc(" + columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + ') + " + " + scrollbarWidth + "px)";
-    }, [columns, scrollbarWidth]);
-    var header = React.useMemo(function () { return (React.createElement(React.Fragment, null,
-        props.header,
-        React.createElement("div", { className: "k-table-header" },
+    var initialGroupHeader = React.useMemo(function () {
+        if (initialGroupHeader === undefined && props.groupField !== undefined && props.data) {
+            return getItemValue(props.data[0], props.groupField);
+        }
+    }, [props.data, props.groupField]);
+    var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
+    var header = React.useMemo(function () {
+        return (React.createElement(React.Fragment, null,
+            props.header,
             React.createElement("div", { className: "k-table-header-wrap" },
                 React.createElement("table", { className: "k-table", role: "presentation" },
                     React.createElement("colgroup", null, columns.map(function (column, i) {
@@ -79,7 +81,14 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                     React.createElement("thead", { className: 'k-table-thead' },
                         React.createElement("tr", { className: 'k-table-row' }, columns.map(function (column, i) {
                             return (React.createElement("th", { className: "k-table-th", key: column.uniqueKey ? column.uniqueKey : i }, column.header || '\u00A0'));
-                        })))))))); }, [props.header, columns]);
+                        })),
+                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' },
+                            React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader)))))));
+    }, [props.header, columns, groupHeader]);
+    var popupWidth = React.useMemo(function () {
+        // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
+        return "calc(" + columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + ') + " + " + scrollbarWidth + "px + 4px)";
+    }, [columns, scrollbarWidth]);
     var skip = props.virtual ? props.virtual.skip : 0;
     var itemRender = React.useCallback(function (li, liProps) {
         var children = columns.map(function (column, i) { return (React.createElement("span", { className: "k-table-td", style: { width: column.width ? column.width : defaultProps.width }, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? getter(column.field)(liProps.dataItem) : '')); });
@@ -95,13 +104,14 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
             }
         }
         if (group) {
-            children.push(React.createElement("div", { key: "group", className: "k-cell k-group-cell" },
+            children.push(React.createElement("div", { key: "group", className: "k-table-td k-table-group-td" },
                 React.createElement("span", null, group)));
         }
         var rendering = React.cloneElement(li, __assign({}, li.props, { className: classNames('k-table-row', {
                 'k-table-alt-row': liProps.index % 2 !== 0,
                 'k-focus': liProps.focused,
-                'k-selected': liProps.selected
+                'k-selected': liProps.selected,
+                'k-first': Boolean(group)
             }) }), children);
         return props.itemRender ? props.itemRender.call(undefined, rendering, liProps) : rendering;
     }, [columns, props.groupField, props.itemRender, props.data, skip]);
@@ -117,11 +127,12 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     var onChangeHandler = React.useCallback(function (event) { return handleEvent(onChange, event); }, [onChange]);
     var onFilterChangeHandler = React.useCallback(function (event) { return handleEvent(onFilterChange, event); }, [onFilterChange]);
     var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
+    var onGroupScroll = React.useCallback(function (event) {
+        setGroupHeader(event.group);
+    }, []);
     React.useEffect(function () { setScrollbarWidth(); });
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList, __assign({}, listProps)); }, []);
-    return (React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: classNames('k-dropdowngrid-popup k-data-table', (_a = {},
-                _a["k-table-" + (sizeMap[size] || size)] = size,
-                _a)), className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler })));
+    return (React.createElement(ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup k-reset', className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll })));
 });
 var propTypes = __assign({}, ComboBoxWithoutContext.propTypes, { columns: PropTypes.any.isRequired });
 var defaultProps = {

package/dist/es/common/List.d.ts

@@ -6,6 +6,7 @@ import { LocalizationService } from '@progress/kendo-react-intl';
  */
 export interface ListProps {
     id?: string;
+    virtual?: boolean;
     show?: boolean;
     data: any[];
     value?: any;

package/dist/es/common/List.js

@@ -26,7 +26,7 @@ var List = /** @class */ (function (_super) {
     }
     List.prototype.renderItems = function () {
         var _this = this;
-        var _a = this.props, textField = _a.textField, valueField = _a.valueField, groupField = _a.groupField, optionsGuid = _a.optionsGuid, _b = _a.skip, skip = _b === void 0 ? 0 : _b, focusedIndex = _a.focusedIndex, _c = _a.highlightSelected, highlightSelected = _c === void 0 ? true : _c, value = _a.value, data = _a.data, itemRender = _a.itemRender;
+        var _a = this.props, textField = _a.textField, valueField = _a.valueField, groupField = _a.groupField, optionsGuid = _a.optionsGuid, _b = _a.skip, skip = _b === void 0 ? 0 : _b, virtual = _a.virtual, focusedIndex = _a.focusedIndex, _c = _a.highlightSelected, highlightSelected = _c === void 0 ? true : _c, value = _a.value, data = _a.data, itemRender = _a.itemRender;
         var isArray = Array.isArray(value);
         return data.map(function (item, index) {
             var realIndex = skip + index;
@@ -42,7 +42,7 @@ var List = /** @class */ (function (_super) {
                     group = current;
                 }
             }
-            return (React.createElement(ListItem, { id: "option-" + optionsGuid + "-" + realIndex, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
+            return (React.createElement(ListItem, { id: "option-" + optionsGuid + "-" + realIndex, virtual: virtual, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
         });
     };
     List.prototype.renderNoValueElement = function (localizationService) {
@@ -58,7 +58,7 @@ var List = /** @class */ (function (_super) {
         var items = this.renderItems();
         return (items.length ? (React.createElement("div", { className: wrapperCssClass, style: wrapperStyle, ref: wrapperRef, onMouseDown: this.props.onMouseDown, onBlur: this.props.onBlur, onScroll: this.props.onScroll, unselectable: "on" },
             React.createElement("ul", { id: id, role: "listbox", "aria-hidden": !show ? true : undefined, className: listClassName, ref: listRef, style: listStyle }, items),
-            this.props.scroller)) : this.renderNoValueElement(localizationService));
+            this.props.scroller && React.createElement("div", { className: "k-height-container" }, this.props.scroller))) : this.renderNoValueElement(localizationService));
     };
     return List;
 }(React.Component));

package/dist/es/common/ListItem.d.ts

@@ -31,6 +31,10 @@ export interface ListItemProps {
      * Indicates the selected state of the list item element.
      */
     selected: boolean;
+    /**
+     * @hidden
+     */
+    virtual?: boolean;
     /**
      * Fires when the list item is about to be rendered. Used to override the default appearance of the list item.
      */

package/dist/es/common/ListItem.js

@@ -26,14 +26,14 @@ var ListItem = /** @class */ (function (_super) {
         return _this;
     }
     ListItem.prototype.render = function () {
-        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, renderer = _a.render;
+        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, virtual = _a.virtual, renderer = _a.render;
         var item = (React.createElement("li", { id: this.props.id, role: "option", "aria-selected": selected, className: classNames('k-list-item', {
                 'k-selected': selected,
                 'k-focus': this.props.focused,
                 'k-first': Boolean(group)
-            }), onClick: this.handleClick, style: { position: 'unset' } },
+            }), onClick: this.handleClick, style: { position: virtual ? 'relative' : 'unset' } },
             React.createElement("span", { className: 'k-list-item-text' }, getItemValue(dataItem, this.props.textField).toString()),
-            group !== undefined ? React.createElement("div", { className: "k-group" }, group) : null));
+            group !== undefined ? React.createElement("div", { className: "k-list-item-group-label" }, group) : null));
         return renderer !== undefined ? renderer.call(undefined, item, this.props) : item;
     };
     return ListItem;

package/dist/es/common/MultiColumnList.js

@@ -15,5 +15,5 @@ import List from './List';
  * @hidden
  */
 export var MultiColumnList = function (props) {
-    return (React.createElement(List, __assign({}, props, { wrapperCssClass: "k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
+    return (React.createElement(List, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
 };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1645606858,
+    publishDate: 1645693883,
     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/ComboBox/ComboBox.js

@@ -109,6 +109,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _this.setState({
                     group: group
                 });
+                if (_this.props.onGroupScroll) {
+                    _this.props.onGroupScroll.call(undefined, { group: group });
+                }
             }
         };
         _this.handleItemClick = function (index, event) {
@@ -381,9 +384,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _a['k-loading'] = loading,
                 _a['k-required'] = this.required,
                 _a['k-disabled'] = disabled,
-                _a), className), ref: this.componentRef, style: !label
-                ? style
-                : __assign({}, style, { width: undefined }), dir: dir },
+                _a), className), ref: this.componentRef, style: !label ? style : __assign({}, style, { width: undefined }), dir: dir },
             this.renderSearchBar(inputText || '', id),
             renderClearButton && !loading && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick, key: "clearbutton" }),
             loading && React.createElement("span", { className: "k-icon k-i-loading", key: "loading" }),
@@ -511,7 +512,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     ComboBoxWithoutContext.prototype.renderListContainer = function () {
         var _a;
         var base = this.base;
-        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, size = _b.size;
+        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, size = _b.size, list = _b.list, virtual = _b.virtual;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var popupSettings = base.getPopupSettings();
         var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
@@ -523,22 +524,27 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: kendo_react_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {},
-                    _a["k-list-" + (sizeMap[size] || size)] = size,
-                    _a['k-virtual-list'] = this.base.vs.enabled,
-                    _a)),
+                popupClass: kendo_react_common_1.classNames(popupSettings.popupClass, 'k-reset'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
-            header && React.createElement("div", { className: "k-list-header" }, header),
-            group && React.createElement("div", { className: "k-group-header" }, group),
-            this.renderList(),
-            footer && React.createElement("div", { className: "k-list-footer" }, footer)));
+            React.createElement("div", { className: kendo_react_common_1.classNames((_a = {},
+                    _a['k-list'] = !list,
+                    _a["k-list-" + (sizeMap[size] || size)] = !list && size,
+                    _a['k-virtual-list'] = virtual,
+                    _a['k-data-table'] = list,
+                    _a["k-table-" + (sizeMap[size] || size)] = list && size,
+                    _a)) },
+                header && React.createElement("div", { className: "k-table-header" }, header),
+                !list && group && React.createElement("div", { className: "k-list-group-sticky-header" }, group),
+                this.renderList(),
+                footer && React.createElement("div", { className: "k-list-footer" }, footer))));
     };
     ComboBoxWithoutContext.prototype.renderList = function () {
         var _this = this;
+        var _a;
         var base = this.base;
-        var _a = this.props, textField = _a.textField, dataItemKey = _a.dataItemKey, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
+        var _b = this.props, textField = _b.textField, dataItemKey = _b.dataItemKey, listNoDataRender = _b.listNoDataRender, itemRender = _b.itemRender, _c = _b.data, data = _c === void 0 ? [] : _c, _d = _b.virtual, virtual = _d === void 0 ? { skip: 0 } : _d;
         var popupSettings = base.getPopupSettings();
         var vs = base.vs;
         var skip = virtual.skip;
@@ -549,7 +555,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var selectedItemText = utils_1.getItemValue(this.value, textField);
         var value = utils_1.isPresent(text) && text !== selectedItemText ? null : this.value;
         var ListComponent = this.props.list || List_1.default;
-        return (React.createElement(ListComponent, { id: base.listBoxId, show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
+        return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: kendo_react_common_1.classNames('k-list-content', (_a = {},
+                _a['k-list-scroller'] = !virtual,
+                _a['k-virtual-content'] = virtual,
+                _a)), listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
     };
     ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id) {
         var _this = this;

package/dist/npm/ComboBox/ComboBoxProps.d.ts

@@ -209,6 +209,12 @@ export interface ComboBoxProps extends FormComponentProps {
      * Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
      */
     listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    onGroupScroll?: (event: {
+        group?: string;
+    }) => void;
     /**
      * Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
      */

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -139,6 +139,12 @@ export interface MultiColumnComboBoxProps extends ComboBoxProps {
      * Fires when both the virtual scrolling of the MultiColumnComboBox is enabled and the component requires data for another page.
      */
     onPageChange?: (event: ComboBoxPageChangeEvent) => void;
+    /**
+     * @hidden
+     */
+    onGroupScroll?: (event: {
+        group: string;
+    }) => void;
     /**
      * Fires when a MultiColumnComboBox list item is about to be rendered. Used to override the default appearance of the list items.
      */

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -25,7 +25,7 @@ var PropTypes = require("prop-types");
 var MultiColumnList_1 = require("./../common/MultiColumnList");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var ComboBox_1 = require("../ComboBox/ComboBox");
-var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap;
+var utils_1 = require("../common/utils");
 var columnWidth = function (width, defaultWidth) {
     if (width) {
         return typeof width === 'number' ? width + 'px' : width;
@@ -47,12 +47,11 @@ exports.MultiColumnComboBoxPropsContext = kendo_react_common_1.createPropsContex
  *
  */
 exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
-    var _a;
     var props = kendo_react_common_1.usePropsContext(exports.MultiColumnComboBoxPropsContext, directProps);
     var target = React.useRef(null);
     var comboBoxRef = React.useRef(null);
     var scrollbarWidth = kendo_react_common_1.getScrollbarWidth();
-    var _b = props.columns, columns = _b === void 0 ? defaultProps.columns : _b, _c = props.popupSettings, popupSettings = _c === void 0 ? defaultProps.popupSettings : _c, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
+    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.popupSettings, popupSettings = _b === void 0 ? defaultProps.popupSettings : _b, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
     React.useImperativeHandle(target, function () {
         return ({
             element: comboBoxRef.current && comboBoxRef.current.element,
@@ -67,12 +66,15 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
         });
     });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var popupWidth = React.useMemo(function () {
-        return "calc(" + columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + ') + " + " + scrollbarWidth + "px)";
-    }, [columns, scrollbarWidth]);
-    var header = React.useMemo(function () { return (React.createElement(React.Fragment, null,
-        props.header,
-        React.createElement("div", { className: "k-table-header" },
+    var initialGroupHeader = React.useMemo(function () {
+        if (initialGroupHeader === undefined && props.groupField !== undefined && props.data) {
+            return utils_1.getItemValue(props.data[0], props.groupField);
+        }
+    }, [props.data, props.groupField]);
+    var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
+    var header = React.useMemo(function () {
+        return (React.createElement(React.Fragment, null,
+            props.header,
             React.createElement("div", { className: "k-table-header-wrap" },
                 React.createElement("table", { className: "k-table", role: "presentation" },
                     React.createElement("colgroup", null, columns.map(function (column, i) {
@@ -81,7 +83,14 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                     React.createElement("thead", { className: 'k-table-thead' },
                         React.createElement("tr", { className: 'k-table-row' }, columns.map(function (column, i) {
                             return (React.createElement("th", { className: "k-table-th", key: column.uniqueKey ? column.uniqueKey : i }, column.header || '\u00A0'));
-                        })))))))); }, [props.header, columns]);
+                        })),
+                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' },
+                            React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader)))))));
+    }, [props.header, columns, groupHeader]);
+    var popupWidth = React.useMemo(function () {
+        // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
+        return "calc(" + columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + ') + " + " + scrollbarWidth + "px + 4px)";
+    }, [columns, scrollbarWidth]);
     var skip = props.virtual ? props.virtual.skip : 0;
     var itemRender = React.useCallback(function (li, liProps) {
         var children = columns.map(function (column, i) { return (React.createElement("span", { className: "k-table-td", style: { width: column.width ? column.width : defaultProps.width }, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? kendo_react_common_1.getter(column.field)(liProps.dataItem) : '')); });
@@ -97,13 +106,14 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
             }
         }
         if (group) {
-            children.push(React.createElement("div", { key: "group", className: "k-cell k-group-cell" },
+            children.push(React.createElement("div", { key: "group", className: "k-table-td k-table-group-td" },
                 React.createElement("span", null, group)));
         }
         var rendering = React.cloneElement(li, __assign({}, li.props, { className: kendo_react_common_1.classNames('k-table-row', {
                 'k-table-alt-row': liProps.index % 2 !== 0,
                 'k-focus': liProps.focused,
-                'k-selected': liProps.selected
+                'k-selected': liProps.selected,
+                'k-first': Boolean(group)
             }) }), children);
         return props.itemRender ? props.itemRender.call(undefined, rendering, liProps) : rendering;
     }, [columns, props.groupField, props.itemRender, props.data, skip]);
@@ -119,11 +129,12 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     var onChangeHandler = React.useCallback(function (event) { return handleEvent(onChange, event); }, [onChange]);
     var onFilterChangeHandler = React.useCallback(function (event) { return handleEvent(onFilterChange, event); }, [onFilterChange]);
     var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
+    var onGroupScroll = React.useCallback(function (event) {
+        setGroupHeader(event.group);
+    }, []);
     React.useEffect(function () { kendo_react_common_1.setScrollbarWidth(); });
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList_1.MultiColumnList, __assign({}, listProps)); }, []);
-    return (React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: kendo_react_common_1.classNames('k-dropdowngrid-popup k-data-table', (_a = {},
-                _a["k-table-" + (sizeMap[size] || size)] = size,
-                _a)), className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler })));
+    return (React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup k-reset', className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll })));
 });
 var propTypes = __assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes, { columns: PropTypes.any.isRequired });
 var defaultProps = {

package/dist/npm/common/List.d.ts

@@ -6,6 +6,7 @@ import { LocalizationService } from '@progress/kendo-react-intl';
  */
 export interface ListProps {
     id?: string;
+    virtual?: boolean;
     show?: boolean;
     data: any[];
     value?: any;

package/dist/npm/common/List.js

@@ -28,7 +28,7 @@ var List = /** @class */ (function (_super) {
     }
     List.prototype.renderItems = function () {
         var _this = this;
-        var _a = this.props, textField = _a.textField, valueField = _a.valueField, groupField = _a.groupField, optionsGuid = _a.optionsGuid, _b = _a.skip, skip = _b === void 0 ? 0 : _b, focusedIndex = _a.focusedIndex, _c = _a.highlightSelected, highlightSelected = _c === void 0 ? true : _c, value = _a.value, data = _a.data, itemRender = _a.itemRender;
+        var _a = this.props, textField = _a.textField, valueField = _a.valueField, groupField = _a.groupField, optionsGuid = _a.optionsGuid, _b = _a.skip, skip = _b === void 0 ? 0 : _b, virtual = _a.virtual, focusedIndex = _a.focusedIndex, _c = _a.highlightSelected, highlightSelected = _c === void 0 ? true : _c, value = _a.value, data = _a.data, itemRender = _a.itemRender;
         var isArray = Array.isArray(value);
         return data.map(function (item, index) {
             var realIndex = skip + index;
@@ -44,7 +44,7 @@ var List = /** @class */ (function (_super) {
                     group = current;
                 }
             }
-            return (React.createElement(ListItem_1.default, { id: "option-" + optionsGuid + "-" + realIndex, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
+            return (React.createElement(ListItem_1.default, { id: "option-" + optionsGuid + "-" + realIndex, virtual: virtual, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
         });
     };
     List.prototype.renderNoValueElement = function (localizationService) {
@@ -60,7 +60,7 @@ var List = /** @class */ (function (_super) {
         var items = this.renderItems();
         return (items.length ? (React.createElement("div", { className: wrapperCssClass, style: wrapperStyle, ref: wrapperRef, onMouseDown: this.props.onMouseDown, onBlur: this.props.onBlur, onScroll: this.props.onScroll, unselectable: "on" },
             React.createElement("ul", { id: id, role: "listbox", "aria-hidden": !show ? true : undefined, className: listClassName, ref: listRef, style: listStyle }, items),
-            this.props.scroller)) : this.renderNoValueElement(localizationService));
+            this.props.scroller && React.createElement("div", { className: "k-height-container" }, this.props.scroller))) : this.renderNoValueElement(localizationService));
     };
     return List;
 }(React.Component));

package/dist/npm/common/ListItem.d.ts

@@ -31,6 +31,10 @@ export interface ListItemProps {
      * Indicates the selected state of the list item element.
      */
     selected: boolean;
+    /**
+     * @hidden
+     */
+    virtual?: boolean;
     /**
      * Fires when the list item is about to be rendered. Used to override the default appearance of the list item.
      */

package/dist/npm/common/ListItem.js

@@ -28,14 +28,14 @@ var ListItem = /** @class */ (function (_super) {
         return _this;
     }
     ListItem.prototype.render = function () {
-        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, renderer = _a.render;
+        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, virtual = _a.virtual, renderer = _a.render;
         var item = (React.createElement("li", { id: this.props.id, role: "option", "aria-selected": selected, className: kendo_react_common_1.classNames('k-list-item', {
                 'k-selected': selected,
                 'k-focus': this.props.focused,
                 'k-first': Boolean(group)
-            }), onClick: this.handleClick, style: { position: 'unset' } },
+            }), onClick: this.handleClick, style: { position: virtual ? 'relative' : 'unset' } },
             React.createElement("span", { className: 'k-list-item-text' }, utils_1.getItemValue(dataItem, this.props.textField).toString()),
-            group !== undefined ? React.createElement("div", { className: "k-group" }, group) : null));
+            group !== undefined ? React.createElement("div", { className: "k-list-item-group-label" }, group) : null));
         return renderer !== undefined ? renderer.call(undefined, item, this.props) : item;
     };
     return ListItem;

package/dist/npm/common/MultiColumnList.js

@@ -17,5 +17,5 @@ var List_1 = require("./List");
  * @hidden
  */
 exports.MultiColumnList = function (props) {
-    return (React.createElement(List_1.default, __assign({}, props, { wrapperCssClass: "k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
+    return (React.createElement(List_1.default, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
 };

package/dist/npm/package-metadata.js

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