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

package/dist/es/MultiSelect/MultiSelectProps.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { MultiSelect } from './MultiSelect';
 import { FormComponentProps } from '@progress/kendo-react-common';
-import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent, CancelEvent } 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 { TagData } from './TagList';
 /**
@@ -15,6 +17,11 @@ export interface MultiSelectFilterChangeEvent extends FilterChangeEvent<MultiSel
  */
 export interface MultiSelectChangeEvent extends ChangeEvent<MultiSelect> {
 }
+/**
+ * Represents the object of the `onCancel` MultiSelect event.
+ */
+export interface MultiSelectCancelEvent extends CancelEvent<MultiSelect> {
+}
 /**
  * Represents the object of the `open` MultiSelect event.
  */
@@ -151,6 +158,10 @@ export interface MultiSelectProps extends FormComponentProps {
      * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
      */
     filter?: string;
+    /**
+     * Sets the value of the adaptive filtering input of the of ComboBox.
+     */
+    adaptiveFilter?: string;
     /**
      * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
      */
@@ -199,6 +210,10 @@ export interface MultiSelectProps extends FormComponentProps {
      * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
      */
     onChange?: (event: MultiSelectChangeEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelect is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselect %})).
+     */
+    onCancel?: (event: MultiSelectCancelEvent) => void;
     /**
      * Fires each time the user types in the filter input ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
      */
@@ -264,4 +279,32 @@ export interface MultiSelectProps 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 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;
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }

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

@@ -160,4 +160,5 @@ export default class DropDownBase {
     scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
     renderScrollElement: () => false | JSX.Element;
     getPopupSettings(): DropDownsPopupSettings;
+    getGroupedDataModernMode(data: any[], groupField: string): any[];
 }

package/dist/es/common/DropDownBase.js

@@ -209,6 +209,19 @@ var DropDownBase = /** @class */ (function () {
         return Object
             .assign({}, DropDownBase.defaultProps.popupSettings, this.component.props.popupSettings);
     };
+    DropDownBase.prototype.getGroupedDataModernMode = function (data, groupField) {
+        var newData = [];
+        data.forEach(function (el, index) {
+            if (data[index - 1] && el[groupField] !== data[index - 1][groupField]) {
+                newData.push({ position: el[groupField] });
+                newData.push(data[index]);
+            }
+            else {
+                newData.push(data[index]);
+            }
+        });
+        return newData;
+    };
     DropDownBase.basicPropTypes = {
         opened: PropTypes.bool,
         disabled: PropTypes.bool,

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+/**
+ * Represents the props of the GroupStickyHeader component.
+ */
+export interface GroupStickyHeaderProps {
+    /**
+     * The group that will be rendered.
+     */
+    group?: string;
+    /**
+     * @hidden
+     */
+    groupMode?: string;
+    /**
+     * 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.
+     */
+    render?: (div: React.ReactElement<HTMLDivElement>, itemProps: GroupStickyHeaderProps) => React.ReactNode;
+}
+/**
+ * @hidden
+ */
+export default class GroupStickyHeader extends React.Component<GroupStickyHeaderProps, {}> {
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+}

package/dist/es/common/GroupStickyHeader.js

@@ -0,0 +1,34 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import * as React from 'react';
+/**
+ * @hidden
+ */
+var GroupStickyHeader = /** @class */ (function (_super) {
+    __extends(GroupStickyHeader, _super);
+    function GroupStickyHeader() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    GroupStickyHeader.prototype.render = function () {
+        var _a = this.props, group = _a.group, groupMode = _a.groupMode, renderer = _a.render;
+        var item = (React.createElement("div", { className: "k-list-group-sticky-header" }, groupMode === 'classic'
+            ? group
+            : React.createElement("div", { className: "k-list-header-text" }, group)));
+        return renderer !== undefined ? renderer.call(undefined, item, this.props) : item;
+    };
+    return GroupStickyHeader;
+}(React.Component));
+export default GroupStickyHeader;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ListItemProps } from './ListItem';
+import { ListGroupItemProps } from './ListGroupItem';
 import { LocalizationService } from '@progress/kendo-react-intl';
 /**
  * @hidden
@@ -13,6 +14,8 @@ export interface ListProps {
     textField?: string;
     valueField?: string;
     groupField?: string;
+    groupMode?: string;
+    isMultiColumn?: boolean;
     optionsGuid?: string;
     listRef?: React.Ref<HTMLUListElement>;
     wrapperRef?: React.Ref<HTMLDivElement>;
@@ -25,6 +28,7 @@ export interface ListProps {
     highlightSelected?: boolean;
     onClick: (index: number, event: React.MouseEvent<HTMLLIElement>) => void;
     itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, groupItemProps: ListGroupItemProps) => React.ReactNode;
     noDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
     onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
@@ -35,7 +39,7 @@ export interface ListProps {
  * @hidden
  */
 export default class List extends React.Component<ListProps> {
-    renderItems(): JSX.Element[];
+    renderItems(): (false | JSX.Element)[][];
     renderNoValueElement(localizationService: LocalizationService): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
     render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
 }

package/dist/es/common/List.js

@@ -15,6 +15,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import ListItem from './ListItem';
+import ListGroupItem from './ListGroupItem';
 import { areSame, getItemValue } from './utils';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, nodata } from '../messages';
@@ -28,10 +29,12 @@ 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, 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 _a = this.props, textField = _a.textField, valueField = _a.valueField, groupField = _a.groupField, groupMode = _a.groupMode, isMultiColumn = _a.isMultiColumn, 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, groupHeaderItemRender = _a.groupHeaderItemRender;
         var isArray = Array.isArray(value);
+        var groupCounter = 0;
         return data.map(function (item, index) {
             var realIndex = skip + index;
+            var idIndex = skip + index + groupCounter;
             var selected = highlightSelected &&
                 ((!isArray && areSame(item, value, valueField)) ||
                     (isArray && value.findIndex(function (i) { return areSame(i, item, valueField); }) !== -1));
@@ -44,7 +47,11 @@ var List = /** @class */ (function (_super) {
                     group = current;
                 }
             }
-            return (React.createElement(ListItem, { id: "option-".concat(optionsGuid, "-").concat(realIndex), virtual: virtual, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
+            group !== undefined && groupMode === 'modern' ? groupCounter += 1 : '';
+            return [
+                group !== undefined && groupMode === 'modern' && React.createElement(ListGroupItem, { id: "option-".concat(optionsGuid, "-").concat(idIndex), virtual: virtual, key: realIndex + '-group-item', group: group, isMultiColumn: isMultiColumn, render: groupHeaderItemRender }),
+                React.createElement(ListItem, { id: "option-".concat(optionsGuid, "-").concat(group !== undefined && groupMode === 'modern' ? idIndex + 1 : idIndex), virtual: virtual, dataItem: item, groupMode: groupMode, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender })
+            ];
         });
     };
     List.prototype.renderNoValueElement = function (localizationService) {

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/**
+ * Represents the props of the ListGroupItem component.
+ */
+export interface ListGroupItemProps {
+    /**
+     * Specifies the id that will be added to the group header item element.
+     */
+    id?: string;
+    /**
+     * The group that will be rendered.
+     */
+    group?: string;
+    /**
+     * @hidden
+     */
+    virtual?: boolean;
+    /**
+     * @hidden
+     * Provides information if the rendered list is a multicolumn popup
+     */
+    isMultiColumn?: boolean;
+    /**
+     * Fires when the group header item is about to be rendered. Used to override the default appearance of the group header item.
+     */
+    render?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+}
+/**
+ * @hidden
+ */
+export default class ListGroupItem extends React.Component<ListGroupItemProps, {}> {
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+}

package/dist/es/common/ListGroupItem.js

@@ -0,0 +1,33 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import * as React from 'react';
+/**
+ * @hidden
+ */
+var ListGroupItem = /** @class */ (function (_super) {
+    __extends(ListGroupItem, _super);
+    function ListGroupItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ListGroupItem.prototype.render = function () {
+        var _a = this.props, group = _a.group, virtual = _a.virtual, renderer = _a.render, _b = _a.isMultiColumn, isMultiColumn = _b === void 0 ? false : _b;
+        var item = (React.createElement("li", { id: this.props.id, role: "group", className: isMultiColumn ? 'k-table-group-row' : 'k-list-group-item', style: isMultiColumn ? { 'boxSizing': 'inherit' } : { position: virtual ? 'relative' : 'unset' } },
+            React.createElement("span", { className: !renderer ? isMultiColumn ? 'k-table-th' : 'k-list-item-text' : undefined }, group)));
+        return renderer !== undefined ? renderer.call(undefined, item, this.props) : item;
+    };
+    return ListGroupItem;
+}(React.Component));
+export default ListGroupItem;

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

@@ -15,6 +15,10 @@ export interface ListItemProps {
      * Represents the data item of the list item element.
      */
     dataItem: any;
+    /**
+     * Represents the `classic` or `modern` grouping mode of the DropDowns. Defaults to `classic`.
+     */
+    groupMode: any;
     /**
      * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
      */

package/dist/es/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, virtual = _a.virtual, renderer = _a.render;
+        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, virtual = _a.virtual, groupMode = _a.groupMode, 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)
+                'k-first': Boolean(group) && groupMode === 'classic'
             }), 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-list-item-group-label" }, group) : null));
+            group !== undefined && groupMode === 'classic' ? 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/package-metadata.js

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

@@ -33,6 +33,7 @@ var SearchBar_1 = require("./../common/SearchBar");
 var ListContainer_1 = require("./../common/ListContainer");
 var List_1 = require("./../common/List");
 var DropDownBase_1 = require("../common/DropDownBase");
+var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
 var utils_1 = require("../common/utils");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
@@ -55,6 +56,8 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         _this._inputId = (0, kendo_react_common_1.guid)();
         _this._suggested = '';
         _this._input = null;
+        _this._isScrolling = false;
+        _this.itemHeight = 0;
         /**
          * @hidden
          */
@@ -94,6 +97,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;
@@ -152,6 +185,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();
@@ -271,8 +307,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;
@@ -280,8 +317,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();
     };
@@ -378,10 +423,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 = (0, utils_1.getItemValue)(data[0], groupField);
+        }
         return (React.createElement(ListContainer_1.default, { width: popupWidth, popupSettings: {
                 animate: popupSettings.animate,
                 anchor: this.element,
@@ -393,16 +442,18 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             header && React.createElement("div", { className: "k-list-header" }, header),
             React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_a = {},
                     _a["k-list-".concat(sizeMap[size] || size)] = size,
-                    _a)) }, this.renderList()),
+                    _a)) },
+                !list && group && React.createElement(GroupStickyHeader_1.default, { 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_1.default, { 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_1.default, { 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) {
@@ -442,7 +493,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.propTypes = __assign(__assign({}, DropDownBase_1.default.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_1.default.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/npm/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/npm/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;
         };