@progress/kendo-react-dropdowns 5.13.0-dev.202304200559 → 5.13.0-dev.202304201241

package/dist/es/AutoComplete/AutoComplete.d.ts

@@ -27,6 +27,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
         size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
         rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
         fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
+        groupField: PropTypes.Requireable<string>;
         suggest: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
         placeholder: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
@@ -39,6 +40,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         dir: PropTypes.Requireable<string>;
@@ -57,7 +59,9 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
             appendTo: PropTypes.Requireable<any>;
-            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>; /**
+             * @hidden
+             */
             height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
@@ -82,7 +86,9 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
             height: string;
         };
         required: boolean;
-        validityStyles: boolean;
+        validityStyles: boolean; /**
+         * The value of the AutoComplete.
+         */
     };
     /**
      * @hidden
@@ -94,6 +100,8 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
     private _suggested;
     private _input;
     private _valueDuringOnChange?;
+    private _isScrolling;
+    private itemHeight;
     constructor(props: AutoCompleteProps);
     /**
      * @hidden
@@ -159,6 +167,7 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
     private renderSearchBar;
     private renderListContainer;
     private renderList;
+    private onScroll;
     private handleItemClick;
     private onChangeHandler;
     private clearButtonClick;

package/dist/es/AutoComplete/AutoComplete.js

@@ -30,6 +30,7 @@ import SearchBar from './../common/SearchBar';
 import ListContainer from './../common/ListContainer';
 import List from './../common/List';
 import DropDownBase from '../common/DropDownBase';
+import GroupStickyHeader from '../common/GroupStickyHeader';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils';
 import { guid, Keys, classNames, createPropsContext, withPropsContext, kendoThemeMaps, IconWrap } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
@@ -52,6 +53,8 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         _this._inputId = guid();
         _this._suggested = '';
         _this._input = null;
+        _this._isScrolling = false;
+        _this.itemHeight = 0;
         /**
          * @hidden
          */
@@ -91,6 +94,36 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                     : _this.props.validationMessage || VALIDATION_MESSAGE);
             }
         };
+        _this.onScroll = function (event) {
+            _this._isScrolling = true;
+            var list = _this.base.list;
+            var groupField = _this.props.groupField;
+            var _a = _this.props.data, data = _a === void 0 ? [] : _a;
+            if (!groupField || !data.length) {
+                return;
+            }
+            var itemHeight = _this.itemHeight || (list ? list.children[0].offsetHeight : 0);
+            var target = event.target;
+            var scrollTop = target.scrollTop;
+            if (groupField) {
+                data = _this.base.getGroupedDataModernMode(data, groupField);
+            }
+            ;
+            var group = data[0][groupField];
+            for (var i = 1; i < data.length; i++) {
+                if (itemHeight * i > scrollTop) {
+                    break;
+                }
+                if (data[i] && data[i][groupField]) {
+                    group = data[i][groupField];
+                }
+            }
+            if (group !== _this.state.group) {
+                _this.setState({
+                    group: group
+                });
+            }
+        };
         _this.handleItemClick = function (index, event) {
             _this.base.handleItemClick(index, event);
             _this._valueDuringOnChange = undefined;
@@ -149,6 +182,9 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             _this.applyState(state);
         };
         _this.onInputKeyDown = function (event) {
+            if (_this._isScrolling) {
+                _this._isScrolling = false;
+            }
             var keyCode = event.keyCode;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
@@ -268,8 +304,9 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     AutoCompleteWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a = this.props.data, data = _a === void 0 ? [] : _a;
-        var _b = prevProps.data, prevData = _b === void 0 ? [] : _b;
+        var _a;
+        var _b = this.props, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d;
+        var _e = prevProps.data, prevData = _e === void 0 ? [] : _e;
         var focusedIndex = this.focusedIndex();
         var focusedItem = data[focusedIndex];
         var dataChanged = prevData !== data;
@@ -277,8 +314,16 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
         var opening = !prevOpened && opened;
-        if ((opened && (focusedItemChanged || dataChanged)) || opening) {
-            this.base.scrollToItem(focusedIndex);
+        if (groupField === '') {
+            if ((opened && (focusedItemChanged || dataChanged)) || opening) {
+                this.base.scrollToItem(focusedIndex);
+            }
+        }
+        else if (!this._isScrolling) {
+            var focusedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
+            if (opened && prevOpened && focusedItemChanged) {
+                this.base.scrollToItem(focusedItemIndex);
+            }
         }
         this.setValidity();
     };
@@ -375,10 +420,14 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     AutoCompleteWithoutContext.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, size = _b.size;
+        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size, groupField = _b.groupField, list = _b.list, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender;
         var popupSettings = base.getPopupSettings();
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
+        var group = this.state.group;
+        if (group === undefined && groupField !== undefined) {
+            group = getItemValue(data[0], groupField);
+        }
         return (React.createElement(ListContainer, { width: popupWidth, popupSettings: {
                 animate: popupSettings.animate,
                 anchor: this.element,
@@ -390,16 +439,18 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             header && React.createElement("div", { className: "k-list-header" }, header),
             React.createElement("div", { className: classNames('k-list', (_a = {},
                     _a["k-list-".concat(sizeMap[size] || size)] = size,
-                    _a)) }, this.renderList()),
+                    _a)) },
+                !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                this.renderList()),
             footer && React.createElement("div", { className: "k-list-footer" }, footer)));
     };
     AutoCompleteWithoutContext.prototype.renderList = function () {
         var base = this.base;
         var popupSettings = base.getPopupSettings();
-        var _a = this.props, textField = _a.textField, _b = _a.data, data = _b === void 0 ? [] : _b, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
+        var _a = this.props, textField = _a.textField, _b = _a.data, data = _b === void 0 ? [] : _b, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, groupHeaderItemRender = _a.groupHeaderItemRender;
         var value = this.value;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(List, { id: base.listBoxId, show: opened, data: data.slice(), focusedIndex: this.focusedIndex(), value: value, textField: textField, valueField: textField, highlightSelected: false, optionsGuid: base.guid, listRef: function (list) { return base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); } }));
+        return (React.createElement(List, { id: base.listBoxId, show: opened, data: data.slice(), focusedIndex: this.focusedIndex(), value: value, textField: textField, valueField: textField, highlightSelected: false, optionsGuid: base.guid, groupField: this.props.groupField, groupMode: 'modern', listRef: function (list) { return base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", onClick: this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll }));
     };
     AutoCompleteWithoutContext.prototype.triggerOnChange = function (newValue, state, eventArgs) {
         if (this.value === newValue && !eventArgs) {
@@ -439,7 +490,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.propTypes = __assign(__assign({}, DropDownBase.basicPropTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
+    AutoCompleteWithoutContext.propTypes = __assign(__assign({}, DropDownBase.basicPropTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), groupField: PropTypes.string, suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any });
     /**
      * @hidden
      */

package/dist/es/AutoComplete/AutoCompleteProps.d.ts

@@ -2,6 +2,8 @@
 import { AutoComplete } from './AutoComplete';
 import { ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent } from './../common/events';
 import { DropDownsPopupSettings, Suggestion } from '../common/settings';
+import { ListGroupItemProps } from '../common/ListGroupItem';
+import { GroupStickyHeaderProps } from '../common/GroupStickyHeader';
 import { ListItemProps } from '../common/ListItem';
 import { FormComponentProps } from '@progress/kendo-react-common';
 /**
@@ -214,4 +216,24 @@ export interface AutoCompleteProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a AutoComplete sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    list?: any;
+    /**
+     * Sets the key for comparing the data items of the AutoComplete. If `dataItemKey` is not set, the AutoComplete compares the items by reference.
+     */
+    dataItemKey?: string;
 }

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

@@ -25,6 +25,8 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
         dataItemKey: PropTypes.Requireable<string>;
         groupField: PropTypes.Requireable<string>;
+        groupMode: PropTypes.Requireable<string | undefined>;
+        isMultiColumn: PropTypes.Requireable<boolean>;
         suggest: PropTypes.Requireable<boolean>;
         placeholder: PropTypes.Requireable<string>;
         allowCustom: PropTypes.Requireable<boolean>;
@@ -56,7 +58,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         dir: PropTypes.Requireable<string>;
-        tabIndex: PropTypes.Requireable<number>;
+        tabIndex: PropTypes.Requireable<number>; /** @hidden */
         accessKey: PropTypes.Requireable<string>;
         data: PropTypes.Requireable<any[]>;
         textField: PropTypes.Requireable<string>;
@@ -93,6 +95,8 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         allowCustom: boolean;
         clearButton: boolean;
         required: boolean;
+        groupMode: string | undefined;
+        isMultiColumn: boolean;
         popupSettings: {
             height: string;
         };

package/dist/es/ComboBox/ComboBox.js

@@ -34,6 +34,7 @@ import SearchBar from '../common/SearchBar';
 import ListContainer from '../common/ListContainer';
 import List from '../common/List';
 import ListFilter from '../common/ListFilter';
+import GroupStickyHeader from '../common/GroupStickyHeader';
 import { validatePackage, canUseDOM } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import ClearButton from '../common/ClearButton';
@@ -120,7 +121,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         _this.onScroll = function (event) {
             var _a = _this.base, vs = _a.vs, list = _a.list;
             vs.scrollHandler(event);
-            var _b = _this.props, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField;
+            var groupField = _this.props.groupField;
+            var _b = _this.props.data, data = _b === void 0 ? [] : _b;
             if (!groupField || !data.length) {
                 return;
             }
@@ -128,6 +130,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _this.itemHeight || (vs.enabled ? vs.itemHeight : (list ? list.children[0].offsetHeight : 0));
             var target = event.target;
             var scrollTop = target.scrollTop - (vs.skip * itemHeight);
+            if (_this.props.groupMode === 'modern') {
+                data = _this.base.getGroupedDataModernMode(data, groupField);
+            }
             var group = data[0][groupField];
             for (var i = 1; i < data.length; i++) {
                 if (itemHeight * i > scrollTop) {
@@ -378,7 +383,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     });
     /** @hidden */
     ComboBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
+        var _a;
+        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c;
+        var _d = this.props.data, data = _d === void 0 ? [] : _d;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
@@ -392,6 +399,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         else {
             var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
             var selectedItemIndex = data.findIndex(function (i) { return areSame(i, selectedItem, dataItemKey); });
+            // Needed to calculate the proper item index when in 'modern' grouping mode
+            if (this.props.groupMode === 'modern') {
+                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem);
+            }
             var selectedItemChanged = !areSame(prevSelectedItem, selectedItem, dataItemKey);
             if (opening && virtual) {
                 this.base.scrollToVirtualItem(virtual, selectedItemIndex);
@@ -582,7 +593,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var _a;
         var _this = this;
         var _b = this.state.windowWidth, windowWidth = _b === void 0 ? 0 : _b;
-        var _c = this.props, header = _c.header, footer = _c.footer, size = _c.size, _d = _c.data, data = _d === void 0 ? [] : _d, groupField = _c.groupField, list = _c.list, virtual = _c.virtual, adaptiveTitle = _c.adaptiveTitle;
+        var _c = this.props, header = _c.header, footer = _c.footer, size = _c.size, _d = _c.data, data = _d === void 0 ? [] : _d, groupField = _c.groupField, groupMode = _c.groupMode, list = _c.list, virtual = _c.virtual, adaptiveTitle = _c.adaptiveTitle, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var group = this.state.group;
         if (group === undefined && groupField !== undefined) {
@@ -618,14 +629,14 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                                 _a["k-table-".concat(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),
+                            !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
                             this.renderList(),
                             footer && React.createElement("div", { className: "k-list-footer" }, footer)))))));
     };
     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, list = _b.list, virtual = _b.virtual;
+        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, groupMode = _b.groupMode, size = _b.size, list = _b.list, virtual = _b.virtual, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender;
         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;
@@ -649,7 +660,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                     _a["k-table-".concat(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),
+                !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
                 this.renderList(),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer))));
     };
@@ -657,7 +668,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var _a;
         var _this = this;
         var base = this.base;
-        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 _b = this.props, textField = _b.textField, dataItemKey = _b.dataItemKey, listNoDataRender = _b.listNoDataRender, itemRender = _b.itemRender, groupHeaderItemRender = _b.groupHeaderItemRender, _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;
@@ -668,11 +679,11 @@ 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, 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: (this.state.windowWidth && this.state.windowWidth > MOBILE_MEDIUM_DEVISE)
+        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, groupMode: this.props.groupMode, isMultiColumn: this.props.isMultiColumn, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: (this.state.windowWidth && this.state.windowWidth > MOBILE_MEDIUM_DEVISE)
                 ? { maxHeight: popupSettings.height }
                 : {}, wrapperCssClass: classNames('k-list-content', (_a = {},
                 _a['k-list-scroller'] = !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() }));
+                _a)), listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
     };
     ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id, placeholder) {
         var _this = this;
@@ -728,9 +739,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     ;
     ComboBoxWithoutContext.displayName = 'ComboBox';
     /** @hidden */
-    ComboBoxWithoutContext.propTypes = __assign(__assign({}, DropDownBase.propTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), dataItemKey: PropTypes.string, groupField: PropTypes.string, suggest: PropTypes.bool, placeholder: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
+    ComboBoxWithoutContext.propTypes = __assign(__assign({}, DropDownBase.propTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), dataItemKey: PropTypes.string, groupField: PropTypes.string, groupMode: PropTypes.oneOf([undefined, 'classic', 'modern']), isMultiColumn: PropTypes.bool, suggest: PropTypes.bool, placeholder: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
     /** @hidden */
-    ComboBoxWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false });
+    ComboBoxWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false, groupMode: 'classic', isMultiColumn: false });
     return ComboBoxWithoutContext;
 }(React.Component));
 export { ComboBoxWithoutContext };

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

@@ -4,6 +4,8 @@ import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, Blur
 import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { ListItemProps } from '../common/ListItem';
+import { ListGroupItemProps } from '../common/ListGroupItem';
+import { GroupStickyHeaderProps } from '../common/GroupStickyHeader';
 /**
  * Represents the object of the `FilterChange` ComboBox event.
  */
@@ -131,6 +133,14 @@ export interface ComboBoxProps extends FormComponentProps {
      * Sets the data item field that represents the start of a group. Applicable to objects data.
      */
     groupField?: string;
+    /**
+     * Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `classic`.
+     */
+    groupMode?: string;
+    /**
+     * @hidden Used to indicate if the ComboBox is with multiple columns
+     */
+    isMultiColumn?: boolean;
     /**
      * Sets the key for comparing the data items of the ComboBox. If `dataItemKey` is not set, the ComboBox compares the items by reference ([see example]({% slug binding_combobox %}#toc-datasets-of-objects)).
      */
@@ -213,6 +223,14 @@ export interface ComboBoxProps extends FormComponentProps {
      * Fires when a ComboBox list item is about to be rendered ([see example]({% slug customrendering_combobox %}#toc-items)). Used to override the default appearance of the list items.
      */
     itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    /**
+     * Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers when the component is configured in `modern` group mode.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
     /**
      * 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.
      */

package/dist/es/DropDownList/DropDownList.d.ts

@@ -80,6 +80,8 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         ariaLabel: PropTypes.Requireable<string>;
         leftRightKeysNavigation: PropTypes.Requireable<boolean>;
         title: PropTypes.Requireable<string>;
+        groupField: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
     };
     /**
      * @hidden
@@ -89,6 +91,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
+        groupMode: string | undefined;
         popupSettings: {
             height: string;
         };
@@ -111,6 +114,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private _valueDuringOnChange;
     private _navigated;
     private _inputId;
+    private itemHeight;
     private observerResize?;
     private get document();
     constructor(props: DropDownListProps);
@@ -170,6 +174,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private renderAdaptiveListContainer;
     private renderListContainer;
     private renderList;
+    private onScroll;
     private renderListFilter;
     private renderDefaultItem;
     private search;

package/dist/es/DropDownList/DropDownList.js

@@ -31,6 +31,7 @@ import { FloatingLabel } from '@progress/kendo-react-labels';
 import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
 import ListContainer from '../common/ListContainer';
 import ListFilter from '../common/ListFilter';
+import GroupStickyHeader from '../common/GroupStickyHeader';
 import ListDefaultItem from '../common/ListDefaultItem';
 import List from '../common/List';
 import DropDownBase from '../common/DropDownBase';
@@ -63,6 +64,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         _this._filterInput = null;
         _this._navigated = false;
         _this._inputId = guid();
+        _this.itemHeight = 0;
         /**
          * @hidden
          */
@@ -96,7 +98,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         };
         _this.renderListContainer = function () {
             var _a;
-            var _b = _this.props, header = _b.header, footer = _b.footer, dir = _b.dir, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size;
+            var _b = _this.props, header = _b.header, footer = _b.footer, dir = _b.dir, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size, groupField = _b.groupField, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender, list = _b.list;
             var base = _this.base;
             var popupSettings = base.getPopupSettings();
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
@@ -116,24 +118,57 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 },
                 itemsCount: [data.length]
             };
+            var group = _this.state.group;
+            if (group === undefined && groupField !== undefined) {
+                group = getItemValue(data[0], groupField);
+            }
             return (React.createElement(ListContainer, __assign({}, listContainerProps),
                 _this.renderListFilter(),
                 header && React.createElement("div", { className: "k-list-header" }, header),
                 React.createElement("div", { className: classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = _this.base.vs.enabled, _a)) },
                     _this.renderDefaultItem(),
+                    !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                     _this.renderList()),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer)));
         };
         _this.renderList = function () {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, groupHeaderItemRender = _a.groupHeaderItemRender, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
             var vs = _this.base.vs;
             var skip = virtual.skip;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var popupSettings = _this.base.getPopupSettings();
             var translate = "translateY(".concat(vs.translate, "px)");
-            return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.focusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { return vs.list = _this.base.list = list; }, 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, onScroll: function (e) {
-                    vs.scrollHandler(e);
-                }, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+            return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.focusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, groupField: _this.props.groupField, groupMode: 'modern', listRef: function (list) { return vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onScroll: _this.onScroll, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+        };
+        _this.onScroll = function (event) {
+            var _a = _this.base, vs = _a.vs, list = _a.list;
+            vs.scrollHandler(event);
+            var groupField = _this.props.groupField;
+            var _b = _this.props.data, data = _b === void 0 ? [] : _b;
+            if (!groupField || !data.length) {
+                return;
+            }
+            if (groupField) {
+                var itemHeight = _this.itemHeight =
+                    _this.itemHeight || (vs.enabled ? vs.itemHeight : (list ? list.children[0].offsetHeight : 0));
+                var target = event.target;
+                var scrollTop = target.scrollTop - (vs.skip * itemHeight);
+                data = _this.base.getGroupedDataModernMode(data, groupField);
+                var group = data[0][groupField];
+                for (var i = 1; i < data.length; i++) {
+                    if (itemHeight * i > scrollTop) {
+                        break;
+                    }
+                    if (data[i] && data[i][groupField]) {
+                        group = data[i][groupField];
+                    }
+                }
+                if (group !== _this.state.group) {
+                    _this.setState({
+                        group: group
+                    });
+                }
+            }
         };
         _this.renderListFilter = function () {
             var filterText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
@@ -454,7 +489,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DropDownListWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
+        var _a;
+        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c;
+        var _d = this.props.data, data = _d === void 0 ? [] : _d;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
@@ -476,6 +513,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             var selectedItem_1 = this.value;
             var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
             var selectedItemIndex = data.findIndex(function (i) { return areSame(i, selectedItem_1, dataItemKey); });
+            if (groupField !== '') {
+                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem_1);
+            }
             var selectedItemChanged = !areSame(prevSelectedItem, selectedItem_1, dataItemKey);
             if (opening && virtual) {
                 this.base.scrollToVirtualItem(virtual, selectedItemIndex);
@@ -596,7 +636,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var _a;
         var _this = this;
         var _b = this.state.windowWidth, windowWidth = _b === void 0 ? 0 : _b;
-        var _c = this.props, header = _c.header, footer = _c.footer, size = _c.size, adaptiveTitle = _c.adaptiveTitle;
+        var _c = this.props, header = _c.header, footer = _c.footer, size = _c.size, adaptiveTitle = _c.adaptiveTitle, groupField = _c.groupField, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender, list = _c.list, _d = _c.data, data = _d === void 0 ? [] : _d;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var actionSheetProps = {
             navigatable: false,
@@ -609,6 +649,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
                 : 'k-adaptive-actionsheet k-actionsheet-bottom'
         };
+        var group = this.state.group;
+        if (group === undefined && groupField !== undefined) {
+            group = getItemValue(data[0], groupField);
+        }
         return (React.createElement(React.Fragment, null,
             React.createElement(ActionSheet, __assign({}, actionSheetProps),
                 React.createElement(ActionSheetHeader, { className: 'k-text-center' },
@@ -622,6 +666,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                     header && React.createElement("div", { className: "k-list-header" }, header),
                     React.createElement("div", { className: classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)) },
                         this.renderDefaultItem(),
+                        !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                         this.renderList()),
                     footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
     };
@@ -671,11 +716,11 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase.propTypes);
+    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any }, DropDownBase.propTypes);
     /**
      * @hidden
      */
-    DropDownListWithoutContext.defaultProps = __assign(__assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase.defaultProps), { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
+    DropDownListWithoutContext.defaultProps = __assign(__assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase.defaultProps), { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern' });
     return DropDownListWithoutContext;
 }(React.Component));
 export { DropDownListWithoutContext };

package/dist/es/DropDownList/DropDownListProps.d.ts

@@ -2,6 +2,8 @@
 import { DropDownList } from './DropDownList';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
+import { ListGroupItemProps } from '../common/ListGroupItem';
+import { GroupStickyHeaderProps } from '../common/GroupStickyHeader';
 import { ListItemProps } from '../common/ListItem';
 import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 /**
@@ -297,4 +299,24 @@ export interface DropDownListProps extends FormComponentProps {
      * Specifies the text that is rendered as title in the adaptive popup.
      */
     adaptiveTitle?: string;
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    list?: any;
+    /**
+     * @hidden
+     */
+    groupMode?: string;
 }