@progress/kendo-vue-dropdowns 3.10.2 → 3.11.0-dev.202305230751

package/dist/es/common/List.js

@@ -6,7 +6,8 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { ListItem } from './ListItem';
-import { areSame } from './utils';
+import { ListGroupItem } from './ListGroupItem';
+import { areSame, getItemValue } from './utils';
 import { getTemplate, getDefaultSlots, setRef, getRef } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, nodata } from '../messages/main';
@@ -38,8 +39,10 @@ var ListVue2 = {
       default: true
     },
     itemRender: [String, Function, Object],
+    groupHeaderItemRender: [String, Function, Object],
     noDataRender: [String, Function, Object],
-    scroller: Boolean
+    scroller: Boolean,
+    groupField: String
   },
   inject: {
     kendoLocalizationService: {
@@ -101,39 +104,64 @@ var ListVue2 = {
         focusedIndex = _a.focusedIndex,
         highlightSelected = _a.highlightSelected,
         value = _a.value,
-        itemRender = _a.itemRender;
+        groupField = _a.groupField,
+        itemRender = _a.itemRender,
+        groupHeaderItemRender = _a.groupHeaderItemRender,
+        dataItems = _a.dataItems;
       var isArray = Array.isArray(value);
-      return this.$props.dataItems.map(function (item, index) {
+      var groupCounter = 0;
+      return dataItems.map(function (item, index) {
         var realIndex = skip + index;
         var selected = highlightSelected && (!isArray && areSame(item, value, valueField) || isArray && value.findIndex(function (i) {
           return areSame(i, item, valueField);
         }) !== -1);
-        return (
-          // @ts-ignore
-          h(ListItem, {
+        var group = undefined;
+        var current, previous;
+        if (index > 0 && groupField !== undefined) {
+          current = getItemValue(item, groupField);
+          previous = getItemValue(dataItems[index - 1], groupField);
+          if (current && previous && current !== previous !== undefined) {
+            group = current;
+          }
+        }
+        if (group !== undefined && Object.keys(item).length === 1) {
+          groupCounter += 1;
+        }
+        return group !== undefined && item[groupField] !== undefined && Object.keys(item).length === 1 ? h(ListGroupItem, {
+          id: "option-".concat(optionsGuid, "-").concat(realIndex),
+          attrs: this.v3 ? undefined : {
+            id: "option-".concat(optionsGuid, "-").concat(realIndex),
+            group: group,
+            render: groupHeaderItemRender
+          },
+          key: realIndex + '-group-item',
+          group: group,
+          render: groupHeaderItemRender
+        }) : h(ListItem, {
+          id: "option-".concat(optionsGuid, "-").concat(realIndex),
+          attrs: this.v3 ? undefined : {
             id: "option-".concat(optionsGuid, "-").concat(realIndex),
-            attrs: this.v3 ? undefined : {
-              id: "option-".concat(optionsGuid, "-").concat(realIndex),
-              dataItem: item,
-              selected: selected,
-              focused: focusedIndex === index,
-              index: realIndex,
-              textField: textField,
-              render: itemRender
-            },
             dataItem: item,
             selected: selected,
-            focused: focusedIndex === index,
-            index: realIndex,
-            key: realIndex,
-            onItemclick: this.handleClick,
-            on: this.v3 ? undefined : {
-              "itemclick": this.handleClick
-            },
+            focused: focusedIndex === realIndex - groupCounter,
+            index: realIndex - groupCounter,
             textField: textField,
+            group: group,
             render: itemRender
-          })
-        );
+          },
+          dataItem: item,
+          selected: selected,
+          focused: focusedIndex === realIndex - groupCounter,
+          index: realIndex - groupCounter,
+          key: realIndex - groupCounter,
+          onItemclick: this.handleClick,
+          on: this.v3 ? undefined : {
+            "itemclick": this.handleClick
+          },
+          textField: textField,
+          group: group,
+          render: itemRender
+        });
       }, this);
     };
     var items = renderItems.call(this);

package/dist/es/common/ListFilter.js

@@ -1,3 +1,15 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
 // @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
@@ -6,6 +18,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { getRef, Icon, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
 import { searchIcon } from '@progress/kendo-svg-icons';
+import { TextBox } from '@progress/kendo-vue-inputs';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -77,48 +90,57 @@ var ListFilterVue2 = {
     },
     handleBlur: function handleBlur(e) {
       this.$emit('blur', e);
+    },
+    prefixRender: function prefixRender(h) {
+      var iconProps = {
+        class: 'k-input-icon',
+        name: 'search',
+        icon: searchIcon
+      };
+      return h(Icon, __assign({
+        props: this.v3 ? undefined : iconProps
+      }, iconProps));
     }
   },
   mounted: function mounted() {
-    this.input = getRef(this, 'input');
+    this.input = getRef(this, 'input')._input;
   },
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    return h("span", {
+    var _a = this.$props,
+      size = _a.size,
+      rounded = _a.rounded,
+      fillMode = _a.fillMode;
+    return h("div", {
       "class": "k-list-filter"
-    }, [h("span", {
-      "class": this.spanClass
-    }, [h(Icon, {
-      name: "search",
-      attrs: this.v3 ? undefined : {
-        name: "search",
-        icon: searchIcon
-      },
-      icon: searchIcon,
-      "class": "k-input-icon"
-    }), h("input", {
+    }, [
+    // @ts-ignore
+    h(TextBox, {
       ref: setRef(this, 'input'),
-      type: "text",
+      value: this.$props.value,
       attrs: this.v3 ? undefined : {
-        type: "text"
-      },
-      value: this.v3 ? this.$props.value || '' : null,
-      domProps: this.v3 ? undefined : {
-        "value": this.$props.value || ''
+        value: this.$props.value,
+        size: size,
+        fillMode: fillMode,
+        rounded: rounded,
+        inputPrefix: this.prefixRender
       },
-      "class": "k-input-inner",
       onInput: this.onChange,
       on: this.v3 ? undefined : {
         "input": this.onChange,
         "keydown": this.onKeyDown,
-        "focusin": this.handleFocus,
-        "focusout": this.handleBlur
+        "focus": this.handleFocus,
+        "blur": this.handleBlur
       },
       onKeydown: this.onKeyDown,
-      onFocusin: this.handleFocus,
-      onFocusout: this.handleBlur
-    })])]);
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      size: size,
+      fillMode: fillMode,
+      rounded: rounded,
+      inputPrefix: this.prefixRender
+    })]);
   }
 };
 /**

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

@@ -0,0 +1,41 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * Represents the props of the ListItem 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;
+    /**
+     * Fires when the group header item is about to be rendered. Used to override the default appearance of the group header item.
+     */
+    render?: any;
+}
+/**
+ * @hidden
+ */
+export interface ListItemAll extends Vue2type {
+    itemClass: object;
+}
+/**
+ * @hidden
+ */
+declare let ListGroupItemVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListItemAll>, {}, RecordPropsDefinition<ListGroupItemProps>>;
+/**
+ * @hidden
+ */
+declare const ListGroupItem: DefineComponent<ListGroupItemProps, any, {}, {}, {}, {}, {}, {}, string, ListGroupItemProps, ListGroupItemProps, {}>;
+export { ListGroupItem, ListGroupItemVue2 };

package/dist/es/common/ListGroupItem.js

@@ -0,0 +1,71 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getTemplate } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+var ListGroupItemVue2 = {
+  name: 'KendoListItem',
+  inheritAttrs: false,
+  props: {
+    id: String,
+    group: String,
+    render: Object
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      id = _a.id,
+      group = _a.group,
+      virtual = _a.virtual,
+      renderer = _a.render;
+    var defaultRendering = h("li", {
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id,
+        role: "group"
+      },
+      role: "group",
+      "class": 'k-list-group-item',
+      style: {
+        position: virtual ? 'relative' : 'unset'
+      }
+    }, [h("span", {
+      "class": !renderer ? 'k-list-item-text' : undefined
+    }, [group])]);
+    return getTemplate.call(this, {
+      h: h,
+      template: this.$props.render,
+      defaultRendering: defaultRendering,
+      additionalProps: __assign({}, this.$props)
+    });
+  }
+};
+/**
+ * @hidden
+ */
+var ListGroupItem = ListGroupItemVue2;
+export { ListGroupItem, ListGroupItemVue2 };

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

@@ -92,6 +92,7 @@ export interface DropDownStateBase {
     value?: any;
     focused?: boolean;
     opened?: boolean;
+    group?: string;
 }
 /**
  * @hidden

package/dist/es/main.d.ts

@@ -10,8 +10,9 @@ import { AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, Auto
 import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
 import { MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent } from './MultiSelect/MultiSelectProps';
 import { TagData as MultiSelectTagData } from './MultiSelect/TagList';
+import { DropDownTree } from './DropDownTree/DropDownTree';
 export * from './DropDownTree/DropDownTreeProps';
 import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/MultiSelectTreeProps';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, AutoCompleteVue2, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue2, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue2, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue2, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiSelectTree };
+export { AutoComplete, AutoCompleteVue2, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue2, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue2, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue2, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiSelectTree, DropDownTree };

package/dist/es/main.js

@@ -2,8 +2,9 @@ import { DropDownList, DropDownListVue2 } from './DropDownList/DropDownList';
 import { ComboBox, ComboBoxVue2 } from './ComboBox/ComboBox';
 import { AutoComplete, AutoCompleteVue2 } from './AutoComplete/AutoComplete';
 import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
+import { DropDownTree } from './DropDownTree/DropDownTree';
 export * from './DropDownTree/DropDownTreeProps';
 import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/MultiSelectTreeProps';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, AutoCompleteVue2, DropDownList, DropDownListVue2, ComboBox, ComboBoxVue2, MultiSelect, MultiSelectVue2, MultiSelectTree };
+export { AutoComplete, AutoCompleteVue2, DropDownList, DropDownListVue2, ComboBox, ComboBoxVue2, MultiSelect, MultiSelectVue2, MultiSelectTree, DropDownTree };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1684762609,
+    publishDate: 1684827665,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/AutoComplete/AutoComplete.js

@@ -20,9 +20,10 @@ import { SearchBar } from './../common/SearchBar.js';
 import { ListContainer } from './../common/ListContainer.js';
 import { List } from './../common/List.js';
 import DropDownBase from '../common/DropDownBase.js';
+import { GroupStickyHeader } from '../common/GroupStickyHeader.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils.js';
-import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
@@ -97,6 +98,8 @@ var AutoCompleteVue2 = {
       }
     },
     itemRender: [String, Function, Object],
+    groupHeaderItemRender: [String, Function, Object],
+    groupStickyHeaderItemRender: [String, Function, Object],
     listNoDataRender: [String, Function, Object],
     focusedItemIndex: Function,
     header: [String, Function, Object],
@@ -127,6 +130,9 @@ var AutoCompleteVue2 = {
       validator: function validator(value) {
         return ['small', 'medium', 'large'].includes(value);
       }
+    },
+    groupField: {
+      type: String
     }
   },
   data: function data() {
@@ -142,7 +148,10 @@ var AutoCompleteVue2 = {
         last: ''
       },
       valueDuringOnChange: {},
-      suggested: ''
+      suggested: '',
+      group: undefined,
+      isScrolling: false,
+      itemHeight: 0
     };
   },
   created: function created() {
@@ -190,8 +199,12 @@ var AutoCompleteVue2 = {
     }
   },
   updated: function updated() {
-    var _a = this.$props.dataItems,
-      dataItems = _a === void 0 ? [] : _a;
+    var _a;
+    var _b = this.$props,
+      _c = _b.groupField,
+      groupField = _c === void 0 ? '' : _c,
+      _d = _b.dataItems,
+      dataItems = _d === void 0 ? [] : _d;
     var focusedIndex = this.focusedIndex();
     var focusedItem = dataItems[focusedIndex];
     var dataChanged = this.prevData !== dataItems;
@@ -206,8 +219,22 @@ var AutoCompleteVue2 = {
       // @ts-ignore
       this.base.list = list.list;
     }
-    if (dataItems.length && (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(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
+      if (opening) {
+        // Resets the sticky header group value for scenarios with open/close of component's popup
+        if (dataItems && dataItems.length !== 0) {
+          this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
+        }
+        this.base.scrollToItem(focusedItemIndex);
+      }
+      if (opened && prevOpened && focusedItemChanged) {
+        this.base.scrollToItem(focusedItemIndex);
+      }
     }
     this.setValidity();
   },
@@ -377,6 +404,10 @@ var AutoCompleteVue2 = {
         this.togglePopup(state);
       }
       state.data.focusedItem = undefined;
+      // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
+      if (this.prevData && this.prevData.length !== this.$props.dataItems) {
+        state.data.group = undefined;
+      }
       this.applyState(state);
     },
     clearButtonClick: function clearButtonClick(event) {
@@ -396,6 +427,9 @@ var AutoCompleteVue2 = {
       this.applyState(state);
     },
     onInputKeyDown: function onInputKeyDown(event) {
+      if (this.isScrolling) {
+        this.isScrolling = false;
+      }
       var keyCode = event.keyCode;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var state = this.base.initState();
@@ -481,6 +515,39 @@ var AutoCompleteVue2 = {
     },
     repositionPopup: function repositionPopup() {
       this.base.repositionPopup();
+    },
+    onScroll: function onScroll(event) {
+      this.isScrolling = true;
+      var state = this.base.initState();
+      var list = this.base.list;
+      var groupField = this.$props.groupField;
+      var _a = this.$props.dataItems,
+        dataItems = _a === void 0 ? [] : _a;
+      if (!groupField || !dataItems.length) {
+        return;
+      }
+      var itemHeight = this.itemHeight || (list.children ? list.children[0].offsetHeight : 0);
+      var target = event.target;
+      var scrollTop = target.scrollTop;
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
+      var group = dataItems[0][groupField];
+      if (itemHeight === 0) {
+        itemHeight = 28;
+      }
+      for (var i = 1; i < dataItems.length; i++) {
+        if (itemHeight * i > scrollTop) {
+          break;
+        }
+        if (dataItems[i] && dataItems[i][groupField]) {
+          group = dataItems[i][groupField];
+        }
+      }
+      if (group !== this.group) {
+        state.data.group = group;
+        this.applyState(state);
+      }
     }
   },
   render: function render(createElement) {
@@ -572,11 +639,15 @@ var AutoCompleteVue2 = {
     var renderList = function renderList() {
       var _a = this.$props,
         textField = _a.textField,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b;
+        groupField = _a.groupField;
+      var dataItems = this.$props.dataItems || [];
       var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
+      var groupHeaderItemRender = templateRendering.call(this, this.$props.groupHeaderItemRender, getListeners.call(this));
       var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
       return (
         // @ts-ignore
         h(List, {
@@ -596,7 +667,9 @@ var AutoCompleteVue2 = {
             },
             wrapperCssClass: "k-list-content",
             itemRender: itemRender,
-            noDataRender: listNoDataRender
+            groupHeaderItemRender: groupHeaderItemRender,
+            noDataRender: listNoDataRender,
+            groupField: groupField
           },
           show: opened,
           dataItems: dataItems.slice(),
@@ -613,10 +686,14 @@ var AutoCompleteVue2 = {
           wrapperCssClass: "k-list-content",
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick
+            "listclick": this.handleItemClick,
+            "scroll": this.onScroll
           },
           itemRender: itemRender,
-          noDataRender: listNoDataRender
+          groupHeaderItemRender: groupHeaderItemRender,
+          noDataRender: listNoDataRender,
+          groupField: groupField,
+          onScroll: this.onScroll
         })
       );
     };
@@ -625,6 +702,7 @@ var AutoCompleteVue2 = {
       var _a;
       var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
       var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
+      var groupStickyHeaderTemplate = templateRendering.call(this, this.$props.groupStickyHeaderItemRender, getListeners.call(this));
       var header = getTemplate.call(this, {
         h: h,
         template: headerTemplate
@@ -635,6 +713,10 @@ var AutoCompleteVue2 = {
       });
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
+      var dataItems = this.$props.dataItems || [];
+      if (this.group === undefined && this.$props.groupField !== undefined) {
+        this.group = getItemValue(dataItems[0], this.$props.groupField);
+      }
       return (
         // @ts-ignore  function children
         h(ListContainer, {
@@ -668,12 +750,26 @@ var AutoCompleteVue2 = {
         }, this.v3 ? function () {
           return [header && h("div", {
             "class": "k-list-header"
-          }, [header]), renderList.call(_this2), footer && h("div", {
+          }, [header]), _this2.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+            group: _this2.group,
+            attrs: _this2.v3 ? undefined : {
+              group: _this2.group,
+              render: groupStickyHeaderTemplate
+            },
+            render: groupStickyHeaderTemplate
+          }), renderList.call(_this2), footer && h("div", {
             "class": "k-list-footer"
           }, [footer])];
         } : [header && h("div", {
           "class": "k-list-header"
-        }, [header]), renderList.call(_this2), footer && h("div", {
+        }, [header]), _this2.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+          group: _this2.group,
+          attrs: _this2.v3 ? undefined : {
+            group: _this2.group,
+            render: groupStickyHeaderTemplate
+          },
+          render: groupStickyHeaderTemplate
+        }), renderList.call(_this2), footer && h("div", {
           "class": "k-list-footer"
         }, [footer])])
       );
@@ -695,8 +791,12 @@ var AutoCompleteVue2 = {
       on: this.v3 ? undefined : {
         "clearclick": this.clearButtonClick
       }
-    }), h("span", {
-      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), h(Icon, {
+      name: loading ? 'loading' : '',
+      attrs: this.v3 ? undefined : {
+        name: loading ? 'loading' : ''
+      },
+      "class": 'k-input-loading-icon'
     }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,

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

@@ -215,4 +215,16 @@ export interface AutoCompleteProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * 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?: any;
+    /**
+     * 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?: any;
 }