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

package/dist/npm/DropDownTree/DropDownTreeProps.d.ts

@@ -81,7 +81,7 @@ export interface DropDownTreeProps extends FormComponentProps {
     /**
      * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
      */
-    data?: any[];
+    dataItems?: any[];
     /**
      * Sets the opened state of the DropDownTree.
      */
@@ -91,6 +91,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      * It can be an object from the data-tree.
      */
     value?: any;
+    modelValue?: any;
     /**
      * The hint that is displayed when the DropDownTree is empty.
      */
@@ -224,17 +225,27 @@ export interface DropDownTreeProps extends FormComponentProps {
      */
     onExpandChange?: (event: any) => void;
     /**
-     * Defines the component that will be used for rendering each of the DropDownTree items
+     * Defines the slot that will be used for rendering each of the DropDownTree items
      * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
      */
     item?: any;
     /**
-     * Defines the component that will be used for rendering the selected value
+     * Defines the slot that will be used for rendering the selected value
      * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
      */
-    valueHolder?: any;
+    valueRender?: any;
     /**
-     * Defines the component that will be rendered in the DropDownTree popup when no data is available
+     * Defines the slot that will be used for header
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    header?: any;
+    /**
+     * Defines the slot that will be used for footer
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    footer?: any;
+    /**
+     * Defines the slot that will be rendered in the DropDownTree popup when no data is available
      * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
      */
     listNoData?: any;
@@ -249,7 +260,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      *
      * @default `medium`
      */
-    size?: null | 'small' | 'medium' | 'large';
+    size?: null | 'small' | 'medium' | 'large' | string;
     /**
      * Configures the `roundness` of the DropDownTree.
      *
@@ -262,7 +273,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      *
      * @default `medium`
      */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
     /**
      * Configures the `fillMode` of the DropDownTree.
      *
@@ -274,5 +285,5 @@ export interface DropDownTreeProps extends FormComponentProps {
      *
      * @default `solid`
      */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
 }

package/dist/npm/MultiSelect/MultiSelect.js

@@ -39,6 +39,7 @@ var List_1 = require("../common/List");
 var TagList_1 = require("./TagList");
 var SearchBar_1 = require("../common/SearchBar");
 var DropDownBase_1 = require("../common/DropDownBase");
+var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
 var ClearButton_1 = require("../common/ClearButton");
 var settings_1 = require("./../common/settings");
 var utils_1 = require("../common/utils");
@@ -145,6 +146,8 @@ var MultiSelectVue2 = {
       }
     },
     itemRender: [String, Function, Object],
+    groupHeaderItemRender: [String, Function, Object],
+    groupStickyHeaderItemRender: [String, Function, Object],
     listNoDataRender: [String, Function, Object],
     focusedItemIndex: Function,
     virtual: {
@@ -187,6 +190,9 @@ var MultiSelectVue2 = {
       validator: function validator(value) {
         return ['small', 'medium', 'large'].includes(value);
       }
+    },
+    groupField: {
+      type: String
     }
   },
   // @ts-ignore
@@ -238,7 +244,10 @@ var MultiSelectVue2 = {
         last: ''
       },
       suggested: '',
-      activedescendant: settings_1.ActiveDescendant.PopupList
+      activedescendant: settings_1.ActiveDescendant.PopupList,
+      group: undefined,
+      isScrolling: false,
+      itemHeight: 0
     };
   },
   watch: {
@@ -255,7 +264,13 @@ var MultiSelectVue2 = {
     }
   },
   updated: function updated() {
-    var virtual = this.$props.virtual;
+    var _a;
+    var _b = this.$props,
+      virtual = _b.virtual,
+      _c = _b.groupField,
+      groupField = _c === void 0 ? '' : _c,
+      _d = _b.dataItems,
+      dataItems = _d === void 0 ? [] : _d;
     var skip = virtual ? virtual.skip : 0;
     var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
     var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
@@ -276,29 +291,38 @@ var MultiSelectVue2 = {
     if (scrollElement) {
       this.base.vs.scrollElement = scrollElement;
     }
-    if (list && this.dataItems.length) {
+    if (list && dataItems.length) {
       // @ts-ignore
       this.base.vs.scrollerRef(list.$el);
     }
     if (!popupSettings.animate && closing) {
       this.onPopupClosed();
     }
-    if (virtual && this.virtualTotalHasChanged) {
-      this.base.vs.calcScrollElementHeight();
-      this.base.vs.reset();
-      this.virtualTotalHasChanged = false;
-    } else {
-      var _a = this.getFocusedState(),
-        focusedItem = _a.focusedItem,
-        focusedIndex = _a.focusedIndex;
-      if (opening && virtual) {
-        this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
-        this.prevCurrentOpened = true;
-      } else if (opening && !virtual) {
-        this.base.scrollToItem(focusedIndex);
-        this.prevCurrentOpened = true;
-      } else if (opened && prevOpened && focusedItem && this.scrollToFocused) {
-        this.base.scrollToItem(focusedIndex - skip);
+    if (!this.isScrolling) {
+      if (virtual && this.virtualTotalHasChanged) {
+        this.base.vs.calcScrollElementHeight();
+        this.base.vs.reset();
+        this.virtualTotalHasChanged = false;
+      } else {
+        var _e = this.getFocusedState(),
+          focusedItem = _e.focusedItem,
+          focusedIndex = _e.focusedIndex;
+        if (groupField !== '') {
+          focusedIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
+        }
+        if (opening && virtual) {
+          this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
+          this.prevCurrentOpened = true;
+        } else if (opening && !virtual) {
+          // 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(focusedIndex);
+          this.prevCurrentOpened = true;
+        } else if (opened && prevOpened && focusedItem) {
+          this.base.scrollToItem(focusedIndex - skip);
+        }
       }
     }
     this.scrollToFocused = false;
@@ -484,6 +508,10 @@ var MultiSelectVue2 = {
         this.base.togglePopup(state);
       }
       this.base.filterChanged(value, state);
+      // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
+      if (this.$props.filterable) {
+        state.data.group = undefined;
+      }
       this.applyState(state);
     },
     clearButtonClick: function clearButtonClick(event) {
@@ -511,6 +539,9 @@ var MultiSelectVue2 = {
     },
     onInputKeyDown: function onInputKeyDown(event) {
       var _this = this;
+      if (this.isScrolling) {
+        this.isScrolling = false;
+      }
       var keyCode = event.keyCode;
       var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
@@ -800,6 +831,39 @@ var MultiSelectVue2 = {
     },
     repositionPopup: function repositionPopup() {
       this.base.repositionPopup();
+    },
+    onScroll: function onScroll(event) {
+      this.isScrolling = true;
+      var _a = this.base,
+        vs = _a.vs,
+        list = _a.list;
+      vs.scrollHandler(event);
+      var state = this.base.initState();
+      var groupField = this.$props.groupField;
+      var _b = this.$props.dataItems,
+        dataItems = _b === void 0 ? [] : _b;
+      if (!groupField || !dataItems.length) {
+        return;
+      }
+      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;
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
+      var group = dataItems[0][groupField];
+      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) {
@@ -905,14 +969,18 @@ var MultiSelectVue2 = {
     };
     var renderList = function renderList() {
       var _this2 = this;
-      var _a = this.$props.dataItems,
-        dataItems = _a === void 0 ? [] : _a;
+      var groupField = this.$props.groupField;
+      var dataItems = this.$props.dataItems || [];
       var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
+      var groupHeaderItemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.groupHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
       var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
       var skip = virtual ? virtual.skip : 0;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var focusedIndex = this.getFocusedState().focusedIndex;
       var translate = "translateY(".concat(vs.translate, "px)");
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
       return (
         // @ts-ignore  function children
         h(List_1.List, {
@@ -935,7 +1003,9 @@ var MultiSelectVue2 = {
             } : undefined,
             skip: skip,
             itemRender: itemRender,
-            noDataRender: listNoDataRender
+            groupHeaderItemRender: groupHeaderItemRender,
+            noDataRender: listNoDataRender,
+            groupField: groupField
           },
           show: opened,
           dataItems: dataItems.slice(),
@@ -957,11 +1027,13 @@ var MultiSelectVue2 = {
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
             "listclick": this.handleItemClick,
-            "scroll": vs.scrollHandler
+            "scroll": this.onScroll
           },
           itemRender: itemRender,
+          groupHeaderItemRender: groupHeaderItemRender,
           noDataRender: listNoDataRender,
-          onScroll: vs.scrollHandler
+          groupField: groupField,
+          onScroll: this.onScroll
         }, this.v3 ? function () {
           return [renderScrollElement.call(_this2)];
         } : [renderScrollElement.call(_this2)])
@@ -983,6 +1055,7 @@ var MultiSelectVue2 = {
         dataItems = _c === void 0 ? [] : _c;
       var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
       var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
+      var groupStickyHeaderTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.groupStickyHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
       var header = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
         template: headerTemplate
@@ -1017,6 +1090,9 @@ var MultiSelectVue2 = {
           float: 'right'
         }
       })])]);
+      if (this.group === undefined && this.$props.groupField !== undefined) {
+        this.group = (0, utils_1.getItemValue)(dataItems[0], this.$props.groupField);
+      }
       return (
         // @ts-ignore  function children
         h(ListContainer_1.ListContainer, {
@@ -1054,12 +1130,26 @@ var MultiSelectVue2 = {
         }, this.v3 ? function () {
           return [header && h("div", {
             "class": "k-list-header"
-          }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+          }, [header]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
+            group: _this3.group,
+            attrs: _this3.v3 ? undefined : {
+              group: _this3.group,
+              render: groupStickyHeaderTemplate
+            },
+            render: groupStickyHeaderTemplate
+          }), renderList.call(_this3), footer && h("div", {
             "class": "k-list-footer"
           }, [footer]), virtual && header];
         } : [header && h("div", {
           "class": "k-list-header"
-        }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+        }, [header]), customItem, _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
+          group: _this3.group,
+          attrs: _this3.v3 ? undefined : {
+            group: _this3.group,
+            render: groupStickyHeaderTemplate
+          },
+          render: groupStickyHeaderTemplate
+        }), renderList.call(_this3), footer && h("div", {
           "class": "k-list-footer"
         }, [footer]), virtual && header])
       );
@@ -1120,8 +1210,12 @@ var MultiSelectVue2 = {
       on: this.v3 ? undefined : {
         "clearclick": this.clearButtonClick
       }
-    }), h("span", {
-      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), h(kendo_vue_common_1.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/npm/MultiSelect/MultiSelectProps.d.ts

@@ -263,4 +263,16 @@ export interface MultiSelectProps 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 MultiSelect group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: any;
+    /**
+     * Fires when a MultiSelect 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;
 }

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -76,8 +76,8 @@ var MultiSelectTreeVue2 = {
     focus: null,
     blur: null,
     change: null,
-    filterChange: null,
-    expandChange: null,
+    filterchange: null,
+    expandchange: null,
     'changemodel': null,
     'update:modelValue': null
   },
@@ -304,7 +304,7 @@ var MultiSelectTreeVue2 = {
       fillMode = _e.fillMode;
     var multiselecttree = h("span", {
       ref: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this.anchor),
-      "class": (0, kendo_vue_common_1.classNames)('k-multiselect k-input', this.$props.className, (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = this.focusedState && !disabled, _a['k-invalid'] = !isValid, _a['k-disabled'] = disabled, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a)),
+      "class": (0, kendo_vue_common_1.classNames)('k-multiselecttree k-input', this.$props.className, (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = this.focusedState && !disabled, _a['k-invalid'] = !isValid, _a['k-disabled'] = disabled, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a)),
       tabIndex: tabIndex,
       attrs: this.v3 ? undefined : {
         tabIndex: tabIndex,
@@ -312,12 +312,12 @@ var MultiSelectTreeVue2 = {
         id: id,
         dir: dir,
         role: "combobox",
-        "aria-haspopup": "true",
+        "aria-haspopup": "tree",
         "aria-expanded": this.isOpen,
         "aria-disabled": disabled,
         "aria-label": label,
         "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
         "aria-required": this.$props.required
       },
       accessKey: this.$props.accessKey,
@@ -335,12 +335,12 @@ var MultiSelectTreeVue2 = {
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       role: "combobox",
-      "aria-haspopup": "true",
+      "aria-haspopup": "tree",
       "aria-expanded": this.isOpen,
       "aria-disabled": disabled,
       "aria-label": label,
       "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
       "aria-required": this.$props.required,
       onClick: this.onWrapperClick
     }, [h("div", {
@@ -356,7 +356,7 @@ var MultiSelectTreeVue2 = {
         dataItems: this.tagsToRenderRef,
         guid: id,
         focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
-          return (0, utils_1.matchTags)(t, _this.focusedTagState, dataItemKey);
+          return _this.focusedTagState && (0, utils_1.matchTags)(t, _this.focusedTagState, dataItemKey);
         }) : undefined,
         tagsRounded: rounded,
         size: size,
@@ -369,7 +369,7 @@ var MultiSelectTreeVue2 = {
       dataItems: this.tagsToRenderRef,
       guid: id,
       focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
-        return (0, utils_1.matchTags)(t, _this.focusedTagState, dataItemKey);
+        return _this.focusedTagState && (0, utils_1.matchTags)(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
       tagsRounded: rounded,
       size: size,
@@ -435,9 +435,9 @@ var MultiSelectTreeVue2 = {
         width: this.popupWidth,
         direction: dir
       },
-      popupClass: (0, kendo_vue_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
+      popupClass: (0, kendo_vue_common_1.classNames)(popupSettings.popupClass, 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
       attrs: this.v3 ? undefined : {
-        popupClass: (0, kendo_vue_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
+        popupClass: (0, kendo_vue_common_1.classNames)(popupSettings.popupClass, 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
         animate: popupSettings.animate,
         anchor: this.anchor,
         show: this.isOpen,
@@ -732,7 +732,7 @@ var MultiSelectTreeVue2 = {
     onPopupClosed: function onPopupClosed() {
       if (this.focusedState) {
         // Move the focus from treeview to dropdown without triggering Focus or Blur events.
-        this.focusElement(this.$el);
+        this.focusElement(this.elementRef);
       }
     },
     onFocus: function onFocus(event) {

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

@@ -82,4 +82,6 @@ export default class DropDownBase {
     triggerOnPageChange(state: InternalState, skip: number, take: number): void;
     triggerPageChangeCornerItems(item: any, state: InternalState): void;
     scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
+    getGroupedDataModernMode: (data: any[], groupField: string) => any[];
+    resetGroupStickyHeader: (groupName: string, that: any) => void;
 }

package/dist/npm/common/DropDownBase.js

@@ -118,6 +118,26 @@ var DropDownBase = /** @class */function () {
         return vs.enabled = true;
       }, 10);
     };
+    this.getGroupedDataModernMode = function (data, groupField) {
+      var newData = [];
+      data.forEach(function (el, index) {
+        var _a;
+        if (data[index - 1] && el[groupField] !== data[index - 1][groupField]) {
+          newData.push((_a = {}, _a[groupField] = el[groupField], _a));
+          newData.push(data[index]);
+        } else {
+          newData.push(data[index]);
+        }
+      });
+      return newData;
+    };
+    this.resetGroupStickyHeader = function (groupName, that) {
+      var state = _this.initState();
+      if (groupName !== that.group && that.state) {
+        that.state.data.group = groupName;
+        _this.applyState(state);
+      }
+    };
     (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
     this.listBoxId = (0, kendo_vue_common_1.guid)();
     this.guid = (0, kendo_vue_common_1.guid)();

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

@@ -0,0 +1,29 @@
+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 GroupStickyHeader component.
+ */
+export interface GroupStickyHeaderProps {
+    /**
+     * The group that will be rendered.
+     */
+    group?: string;
+    /**
+     * Fires when a sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    render?: any;
+}
+export interface GroupStickyHeaderAll extends Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let GroupStickyHeaderVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GroupStickyHeaderProps>>;
+/**
+ * @hidden
+ */
+declare const GroupStickyHeader: DefineComponent<GroupStickyHeaderProps, any, {}, {}, {}, {}, {}, {}, string, GroupStickyHeaderProps, GroupStickyHeaderProps, {}>;
+export { GroupStickyHeader, GroupStickyHeaderVue2 };

package/dist/npm/common/GroupStickyHeader.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var __assign = undefined && undefined.__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);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GroupStickyHeaderVue2 = exports.GroupStickyHeader = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+/**
+ * @hidden
+ */
+var GroupStickyHeaderVue2 = {
+  name: 'KendoGroupStickyHeader',
+  props: {
+    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,
+      group = _a.group,
+      render = _a.render;
+    var defaulGroupStickyHeader = h("div", {
+      "class": "k-list-group-sticky-header"
+    }, [h("div", {
+      "class": "k-list-header-text"
+    }, [group])]);
+    return kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: render,
+      defaultRendering: defaulGroupStickyHeader,
+      additionalProps: __assign({}, this.$props)
+    });
+  }
+};
+exports.GroupStickyHeaderVue2 = GroupStickyHeaderVue2;
+/**
+ * @hidden
+ */
+var GroupStickyHeader = GroupStickyHeaderVue2;
+exports.GroupStickyHeader = GroupStickyHeader;

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

@@ -23,8 +23,10 @@ export interface ListProps {
     highlightSelected?: boolean;
     onClick?: (index: number, event: any) => void;
     itemRender?: any;
+    groupHeaderItemRender?: any;
     noDataRender?: any;
     scroller?: boolean;
+    groupField: string;
 }
 /**
  * @hidden