@progress/kendo-vue-dropdowns 6.4.1-develop.2 → 6.4.2-develop.3

package/DropDownTree/DropDownTree.mjs

@@ -6,19 +6,19 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as he, h as u, createVNode as i, isVNode as ce } from "vue";
-import { validatePackage as fe, guid as T, canUseDOM as me, getRef as h, getTabIndex as ge, templateRendering as c, getListeners as f, getTemplate as w, Keys as a, noop as P, kendoThemeMaps as ve, setRef as m, Icon as W, classNames as A } from "@progress/kendo-vue-common";
+import { noop as T, Keys as a, getTabIndex as fe, templateRendering as h, getListeners as c, getTemplate as w, getRef as f, canUseDOM as me, kendoThemeMaps as ge, validatePackage as ve, guid as P, setRef as m, Icon as W, classNames as A } from "@progress/kendo-vue-common";
 import { Popup as be } from "@progress/kendo-vue-popup";
 import { provideLocalizationService as ye } from "@progress/kendo-vue-intl";
 import { TreeView as K } from "@progress/kendo-vue-treeview";
 import { packageMetadata as we } from "../package-metadata.mjs";
-import { isPresent as ke, getItemValue as Se, areSame as $e } from "../common/utils.mjs";
+import { areSame as ke, getItemValue as Se, isPresent as $e } from "../common/utils.mjs";
 import { ListNoData as Fe } from "./ListNoData.mjs";
 import { nodata as L, messages as N, clear as z } from "../messages/main.mjs";
 import { FloatingLabel as Ve } from "@progress/kendo-vue-labels";
 import { ListFilter as j } from "../common/ListFilter.mjs";
 import { Button as q } from "@progress/kendo-vue-buttons";
 import { xIcon as _, caretAltDownIcon as xe } from "@progress/kendo-svg-icons";
-import { MOBILE_SMALL_DEVICE as Re, MOBILE_MEDIUM_DEVICE as Ie } from "../common/constants.mjs";
+import { MOBILE_MEDIUM_DEVICE as Re, MOBILE_SMALL_DEVICE as Ie } from "../common/constants.mjs";
 import { ActionSheet as De } from "@progress/kendo-vue-layout";
 import Ce from "../common/DropDownBase.mjs";
 function G(e) {
@@ -27,7 +27,7 @@ function G(e) {
 const {
   sizeMap: Me,
   roundedMap: Oe
-} = ve, Be = "Please select a value from the list!", H = (e) => e.split("_").map((t) => parseInt(t, 10)), V = (e, t) => {
+} = ge, Be = "Please select a value from the list!", H = (e) => e.split("_").map((t) => parseInt(t, 10)), V = (e, t) => {
   const {
     validationMessage: s,
     valid: n,
@@ -172,13 +172,13 @@ const {
     },
     adaptiveModeBreakpoints: {
       default: {
-        small: Re,
-        medium: Ie
+        small: Ie,
+        medium: Re
       }
     }
   },
   created() {
-    this.observer = null, fe(we), this.base = new Ce(this), this.componentGuid = T(), this.anchor = T();
+    this.observer = null, ve(we), this.base = new Ce(this), this.componentGuid = P(), this.anchor = P();
   },
   data() {
     return {
@@ -241,7 +241,7 @@ const {
       return this.value !== void 0 ? this.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue;
     },
     hasValue() {
-      return ke(this.computedValue);
+      return $e(this.computedValue);
     },
     currentValueText() {
       return this.hasValue ? Se(this.computedValue, this.$props.textField) : "";
@@ -254,10 +254,10 @@ const {
     }
   },
   mounted() {
-    this.observer = me && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.elementRef = h(this, "kendoAnchor"), this.inputRef = h(this, "input"), this.selectRef = h(this, "select"), this.treeViewRef = h(this, "treeView"), this.skipFocusRef = !1, this.popupRef = h(this, "popup"), this.calculatePopupWidth();
+    this.observer = me && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.elementRef = f(this, "kendoAnchor"), this.inputRef = f(this, "input"), this.selectRef = f(this, "select"), this.treeViewRef = f(this, "treeView"), this.skipFocusRef = !1, this.popupRef = f(this, "popup"), this.calculatePopupWidth();
   },
   updated() {
-    this.inputRef = h(this, "input"), this.treeViewRef = h(this, "treeView"), this.popupRef && this.isOpen && this.hasValue && this.popupRef.reposition(), this.setValidity(), this.calculatePopupWidth();
+    this.inputRef = f(this, "input"), this.treeViewRef = f(this, "treeView"), this.popupRef && this.isOpen && this.hasValue && this.popupRef.reposition(), this.setValidity(), this.calculatePopupWidth();
   },
   render() {
     let e;
@@ -276,17 +276,17 @@ const {
       required: I,
       validityStyles: Q,
       adaptiveTitle: X
-    } = this.$props, k = ge(this.$props.tabIndex, d), D = ye(this), Y = V({
+    } = this.$props, k = fe(this.$props.tabIndex, d), D = ye(this), Y = V({
       validationMessage: U,
       valid: J,
       required: I
-    }, this.hasValue), C = this.adaptiveState, g = this.$props.dir, M = c.call(this, this.item, f.call(this)), Z = c.call(this, this.valueRender, f.call(this)), ee = c.call(this, this.$props.header, f.call(this)), te = c.call(this, this.$props.footer, f.call(this)), S = w.call(this, {
+    }, this.hasValue), C = this.adaptiveState, g = this.$props.dir, M = h.call(this, this.item, c.call(this)), Z = h.call(this, this.valueRender, c.call(this)), ee = h.call(this, this.$props.header, c.call(this)), te = h.call(this, this.$props.footer, c.call(this)), S = w.call(this, {
       h: u,
       template: ee
     }), $ = w.call(this, {
       h: u,
       template: te
-    }), ie = c.call(this, this.$props.listNoData, f.call(this)), se = i(Fe, null, G(e = D.toLanguageString(L, N[L])) ? e : {
+    }), ie = h.call(this, this.$props.listNoData, c.call(this)), se = i(Fe, null, G(e = D.toLanguageString(L, N[L])) ? e : {
       default: () => [e]
     }), O = w.call(this, {
       h: u,
@@ -333,7 +333,7 @@ const {
       fillMode: F,
       onFocus: this.onFocus,
       onBlur: this.onBlur
-    }, null)])], le = c.call(this, ae, f.call(this)), re = () => {
+    }, null)])], le = h.call(this, ae, c.call(this)), re = () => {
       const y = this.base.getTemplateDef.call(this, S, u), E = this.base.getTemplateDef.call(this, $, u);
       return [y && i("div", {
         class: "k-list-header"
@@ -357,7 +357,7 @@ const {
       }, null) : O, E && i("div", {
         class: "k-list-footer"
       }, [E])];
-    }, de = c.call(this, re, f.call(this)), pe = function() {
+    }, de = h.call(this, re, c.call(this)), pe = function() {
       return i(De, {
         expand: this.isOpen,
         animation: !0,
@@ -590,7 +590,7 @@ const {
                 this.focusElement(o);
               });
           }
-          this.switchFocus(P);
+          this.switchFocus(T);
         } else t === a.down && this.switchFocus(() => {
           this.focusElement(o || n);
         });
@@ -652,7 +652,7 @@ const {
       }
     },
     onWrapperMouseDown() {
-      this.focused && this.switchFocus(P);
+      this.focused && this.switchFocus(T);
     },
     changeValue(e, t, s) {
       const n = {
@@ -663,7 +663,7 @@ const {
       this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", n), this.currentValue = t;
     },
     onChange(e) {
-      if ($e(e.item, this.computedValue, this.dataItemKey) || !this.$el)
+      if (ke(e.item, this.computedValue, this.dataItemKey) || !this.$el)
         return;
       const {
         item: t,

package/MultiSelect/MultiSelect.mjs

@@ -5,8 +5,8 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as $e, ref as Q, inject as Fe, h as _, createVNode as r, isVNode as Te } from "vue";
-import { guid as X, canUseDOM as Oe, getRef as Z, Keys as f, templateRendering as b, getListeners as I, classNames as R, setRef as Ve, kendoThemeMaps as we, Icon as Re } from "@progress/kendo-vue-common";
+import { defineComponent as $e, h as _, createVNode as r, ref as Q, inject as Fe, isVNode as Te } from "vue";
+import { templateRendering as b, getListeners as I, Keys as f, canUseDOM as Oe, getRef as X, guid as Z, classNames as R, kendoThemeMaps as Ve, setRef as we, Icon as Re } from "@progress/kendo-vue-common";
 import { ListContainer as De } from "../common/ListContainer.mjs";
 import { List as Be } from "../common/List.mjs";
 import { TagList as Me } from "./TagList.mjs";
@@ -15,10 +15,10 @@ import Le from "../common/DropDownBase.mjs";
 import { GroupStickyHeader as ee } from "../common/GroupStickyHeader.mjs";
 import { ClearButton as He } from "../common/ClearButton.mjs";
 import { ActiveDescendant as L } from "../common/settings.mjs";
-import { getItemValue as x, areSame as te, removeDataItems as H, isPresent as Ee, matchDataCollections as Pe, itemIndexStartsWith as Ne, preventDefaultNonInputs as Ke } from "../common/utils.mjs";
+import { getItemValue as x, itemIndexStartsWith as Ee, areSame as te, removeDataItems as H, isPresent as Pe, preventDefaultNonInputs as Ne, matchDataCollections as Ke } from "../common/utils.mjs";
 import { xIcon as _e, plusIcon as je } from "@progress/kendo-svg-icons";
 import { Button as j } from "@progress/kendo-vue-buttons";
-import { MOBILE_SMALL_DEVICE as ze, MOBILE_MEDIUM_DEVICE as We } from "../common/constants.mjs";
+import { MOBILE_MEDIUM_DEVICE as ze, MOBILE_SMALL_DEVICE as We } from "../common/constants.mjs";
 import { ActionSheet as Ge } from "@progress/kendo-vue-layout";
 import { ListFilter as qe } from "../common/ListFilter.mjs";
 import { provideLocalizationService as Ue } from "@progress/kendo-vue-intl";
@@ -26,11 +26,11 @@ import { adaptiveModeFooterCancel as se, messages as ie, adaptiveModeFooterApply
 const {
   sizeMap: z,
   roundedMap: Ye
-} = we;
+} = Ve;
 function E(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Te(e);
 }
-const Je = "Please enter a valid value!", Qe = (e) => e.preventDefault(), ae = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || Pe(e.data, t.data, s), oe = (e) => e === S.CustomItem;
+const Je = "Please enter a valid value!", Qe = (e) => e.preventDefault(), ae = (e, t, s) => !!e != !!t || e.text !== t.text ? !1 : e === t || Ke(e.data, t.data, s), oe = (e) => e === S.CustomItem;
 var S = /* @__PURE__ */ function(e) {
   return e[e.None = 0] = "None", e[e.ListItem = 1] = "ListItem", e[e.CustomItem = 2] = "CustomItem", e;
 }(S || {});
@@ -213,7 +213,7 @@ const vt = /* @__PURE__ */ $e({
     }
   },
   created() {
-    this.observer = null, this.valuesItemsDuringOnChange = null, this._tags = [], this._skipFocusEvent = !1, this.scrollToFocused = !1, this.base = new Le(this), this.anchor = X(), this.inputId = X();
+    this.observer = null, this.valuesItemsDuringOnChange = null, this._tags = [], this._skipFocusEvent = !1, this.scrollToFocused = !1, this.base = new Le(this), this.anchor = Z(), this.inputId = Z();
   },
   inject: {
     kendoLocalizationService: {
@@ -221,8 +221,8 @@ const vt = /* @__PURE__ */ $e({
     },
     adaptiveModeBreakpoints: {
       default: {
-        small: ze,
-        medium: We
+        small: We,
+        medium: ze
       }
     }
   },
@@ -289,7 +289,7 @@ const vt = /* @__PURE__ */ $e({
     this.scrollToFocused = !1, this.searchBarRef(), this.setValidity();
   },
   mounted() {
-    this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = Z(this, "kendoAnchor"), this.element = Z(this, "kendoAnchor"), this.base.didMount(), this.searchBarRef(), this.setValidity();
+    this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = X(this, "kendoAnchor"), this.element = X(this, "kendoAnchor"), this.base.didMount(), this.searchBarRef(), this.setValidity();
   },
   methods: {
     clearFilter(e) {
@@ -374,7 +374,7 @@ const vt = /* @__PURE__ */ $e({
       const t = this.isOpen, s = this.base.initState();
       s.event = e, e.stopPropagation(), this.computedValue().length > 0 && this.triggerOnChange([], s), this.currentFocusedIndex !== void 0 && (s.data.currentFocusedIndex = void 0), t && this.base.togglePopup(s);
       const i = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
-      Ee(i) && i !== "" && this.base.filterChanged("", s), this.currentText && (s.data.currentText = ""), this.applyState(s);
+      Pe(i) && i !== "" && this.base.filterChanged("", s), this.currentText && (s.data.currentText = ""), this.applyState(s);
     },
     onInputKeyDown(e) {
       this.isScrolling && (this.isScrolling = !1);
@@ -440,7 +440,7 @@ const vt = /* @__PURE__ */ $e({
         dataItemKey: n,
         virtual: o,
         textField: l,
-        focusedItemIndex: d = Ne
+        focusedItemIndex: d = Ee
       } = this.$props, c = o && o.skip || 0;
       let a;
       if (e !== void 0)
@@ -826,7 +826,7 @@ const vt = /* @__PURE__ */ $e({
     }, Y = [_(function() {
       let u;
       return r("span", {
-        ref: Ve(this, "kendoAnchor"),
+        ref: we(this, "kendoAnchor"),
         class: R("k-multiselect", "k-input", {
           [`k-input-${z[a] || a}`]: a,
           [`k-rounded-${Ye[g] || g}`]: g,
@@ -844,7 +844,7 @@ const vt = /* @__PURE__ */ $e({
         dir: s,
         onFocusin: this.handleFocus,
         onClick: this.handleWrapperClick,
-        onMousedown: Ke
+        onMousedown: Ne
       }, [r(Me, {
         removeTagIcon: $,
         tagsRounded: m,

package/MultiSelect/TagList.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as h, createVNode as i, h as v } from "vue";
-import { kendoThemeMaps as S, getDefaultSlots as T, classNames as $, getTemplate as b } from "@progress/kendo-vue-common";
+import { getDefaultSlots as S, classNames as T, getTemplate as $, kendoThemeMaps as b } from "@progress/kendo-vue-common";
 import { Chip as k } from "@progress/kendo-vue-buttons";
 const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /* @__PURE__ */ h({
   name: "TagList",
@@ -50,7 +50,7 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
       } = this.$props;
       return {
         "k-chip-list": !0,
-        [`k-chip-list-${S.sizeMap[e] || e}`]: e,
+        [`k-chip-list-${b.sizeMap[e] || e}`]: e,
         "k-disabled": t
       };
     }
@@ -61,7 +61,7 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
     }
   },
   render() {
-    const e = T(this), {
+    const e = S(this), {
       dataItems: t,
       guid: n,
       size: r,
@@ -72,7 +72,7 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
       className: c
     } = this.$props;
     return i("div", {
-      class: $("k-input-values", c),
+      class: T("k-input-values", c),
       id: p,
       style: this.$attrs.style
     }, [i("div", {
@@ -98,7 +98,7 @@ const x = (e) => e.preventDefault(), y = (e) => e.event.stopPropagation(), C = /
         rounded: d,
         size: r
       }, null);
-      return b.call(this, {
+      return $.call(this, {
         h: v,
         template: this.$props.tagRender,
         defaultRendering: g,

package/MultiSelectTree/MultiSelectTree.mjs

@@ -6,12 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as me, h as S, createVNode as s, isVNode as ge } from "vue";
-import { validatePackage as ve, guid as N, canUseDOM as be, getRef as g, getTabIndex as ke, templateRendering as u, getListeners as f, getTemplate as D, noop as z, Keys as a, setRef as v, classNames as V, Icon as Se, kendoThemeMaps as ye } from "@progress/kendo-vue-common";
+import { Keys as a, noop as N, getTabIndex as ve, templateRendering as u, getListeners as f, getTemplate as D, getRef as g, canUseDOM as be, validatePackage as ke, guid as z, setRef as v, classNames as V, kendoThemeMaps as Se, Icon as ye } from "@progress/kendo-vue-common";
 import { Popup as Fe } from "@progress/kendo-vue-popup";
 import { provideLocalizationService as we } from "@progress/kendo-vue-intl";
 import { TreeView as q } from "@progress/kendo-vue-treeview";
 import { packageMetadata as Re } from "../package-metadata.mjs";
-import { getItemValue as j, areSame as xe, matchTags as _ } from "../common/utils.mjs";
+import { matchTags as j, areSame as xe, getItemValue as _ } from "../common/utils.mjs";
 import { ListNoData as Ve } from "../DropDownTree/ListNoData.mjs";
 import { nodata as G, messages as E, adaptiveModeFooterCancel as H, adaptiveModeFooterApply as U } from "../messages/main.mjs";
 import { FloatingLabel as $e } from "@progress/kendo-vue-labels";
@@ -20,7 +20,7 @@ import { TagList as Ie } from "../MultiSelect/TagList.mjs";
 import { ClearButton as Te } from "../common/ClearButton.mjs";
 import { ListFilter as J } from "../common/ListFilter.mjs";
 import { getMultiSelectTreeValue as Ce } from "./utils.mjs";
-import { MOBILE_SMALL_DEVICE as Me, MOBILE_MEDIUM_DEVICE as De } from "../common/constants.mjs";
+import { MOBILE_MEDIUM_DEVICE as Me, MOBILE_SMALL_DEVICE as De } from "../common/constants.mjs";
 import { ActionSheet as Ee } from "@progress/kendo-vue-layout";
 import { xIcon as Be } from "@progress/kendo-svg-icons";
 import Ae from "../common/DropDownBase.mjs";
@@ -30,7 +30,7 @@ function $(e) {
 const Oe = "Please select a value from the list!", {
   sizeMap: Q,
   roundedMap: Pe
-} = ye, Ke = (e) => e.split("_").map((t) => parseInt(t, 10)), X = (e, t) => {
+} = Se, Ke = (e) => e.split("_").map((t) => parseInt(t, 10)), X = (e, t) => {
   const {
     validationMessage: i,
     valid: n,
@@ -168,13 +168,13 @@ const Oe = "Please select a value from the list!", {
     },
     adaptiveModeBreakpoints: {
       default: {
-        small: Me,
-        medium: De
+        small: De,
+        medium: Me
       }
     }
   },
   created() {
-    this.observer = null, ve(Re), this.base = new Ae(this), this.componentGuid = N(), this.anchor = N();
+    this.observer = null, ke(Re), this.base = new Ae(this), this.componentGuid = z(), this.anchor = z();
   },
   data() {
     return {
@@ -214,13 +214,13 @@ const Oe = "Please select a value from the list!", {
     tagsToRenderRef() {
       if (this.initialAdaptiveRenderingValues === void 0)
         return this.tags === void 0 ? this.computedValue.map((e) => ({
-          text: j(e, this.$props.textField),
+          text: _(e, this.$props.textField),
           data: [e]
         })) : [...this.tags];
       {
         const e = this.initialAdaptiveRenderingValues;
         return e.length > 0 && e.map((t) => ({
-          text: j(t, this.$props.textField),
+          text: _(t, this.$props.textField),
           data: [t]
         }));
       }
@@ -257,7 +257,7 @@ const Oe = "Please select a value from the list!", {
       required: I,
       validityStyles: ee,
       adaptiveTitle: te
-    } = this.$props, w = ke(this.$props.tabIndex, r), T = we(this), ie = X({
+    } = this.$props, w = ve(this.$props.tabIndex, r), T = we(this), ie = X({
       validationMessage: Y,
       valid: Z,
       required: I
@@ -410,7 +410,7 @@ const Oe = "Please select a value from the list!", {
           onTagdelete: this.onTagDelete,
           dataItems: this.tagsToRenderRef,
           guid: t,
-          focused: this.focusedTagState ? this.tagsToRenderRef.find((p) => this.focusedTagState && _(p, this.focusedTagState, n)) : void 0,
+          focused: this.focusedTagState ? this.tagsToRenderRef.find((p) => this.focusedTagState && j(p, this.focusedTagState, n)) : void 0,
           tagsRounded: k,
           size: c,
           fillMode: y
@@ -425,7 +425,7 @@ const Oe = "Please select a value from the list!", {
         }, [this.tagsToRenderRef.length === 0 && s("span", {
           class: "k-input-value-text"
         }, [l])]),
-        this.$props.loading && s(Se, {
+        this.$props.loading && s(ye, {
           class: "k-input-loading-icon",
           name: "loading"
         }, null),
@@ -657,7 +657,7 @@ const Oe = "Please select a value from the list!", {
       }
     },
     onWrapperMouseDown() {
-      this.focusedState && this.switchFocus(z);
+      this.focusedState && this.switchFocus(N);
     },
     onWrapperClick(e) {
       if (!this.$props.disabled && !e.defaultPrevented) {
@@ -682,7 +682,7 @@ const Oe = "Please select a value from the list!", {
       };
       if (this.computedValue && this.computedValue.length > 0 && (t === a.left || t === a.right || t === a.home || t === a.end || t === a.delete || t === a.backspace)) {
         const l = this.tagsToRenderRef;
-        let d = this.focusedTagState ? l.findIndex((F) => _(F, this.focusedTagState, this.dataItemKey)) : -1, h;
+        let d = this.focusedTagState ? l.findIndex((F) => j(F, this.focusedTagState, this.dataItemKey)) : -1, h;
         const b = d !== -1;
         t === a.left ? (b ? d = Math.max(0, d - 1) : d = l.length - 1, h = l[d]) : t === a.right ? b ? (d = Math.min(l.length - 1, d + 1), h = l[d]) : h = l[0] : t === a.home ? h = l[0] : t === a.end ? h = l[l.length - 1] : (t === a.delete || t === a.backspace) && b && this.changeValue(r, l[d].data, "delete"), h !== this.focusedTagState && (this.focusedTagState = h);
       }
@@ -699,7 +699,7 @@ const Oe = "Please select a value from the list!", {
                 this.focusElement(o || this.elementRef);
               });
           }
-          this.switchFocus(z);
+          this.switchFocus(N);
         } else t === a.down && this.switchFocus(() => {
           this.focusElement(o || n);
         });

package/common/ClearButton.mjs

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as t, inject as i, createVNode as o } from "vue";
+import { defineComponent as t, createVNode as o, inject as i } from "vue";
 import { xIcon as r } from "@progress/kendo-svg-icons";
 import { provideLocalizationService as c } from "@progress/kendo-vue-intl";
 import { clear as n, messages as a } from "../messages/main.mjs";

package/common/List.mjs

@@ -5,11 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as D, ref as N, inject as B, createVNode as i, h as G } from "vue";
+import { defineComponent as D, createVNode as i, ref as N, inject as B, h as G } from "vue";
 import { ListItem as V } from "./ListItem.mjs";
 import { ListGroupItem as E } from "./ListGroupItem.mjs";
 import { areSame as k, getItemValue as y } from "./utils.mjs";
-import { getRef as H, getDefaultSlots as T, setRef as q, getTemplate as J } from "@progress/kendo-vue-common";
+import { getDefaultSlots as H, setRef as T, getRef as q, getTemplate as J } from "@progress/kendo-vue-common";
 import { provideLocalizationService as K } from "@progress/kendo-vue-intl";
 import { nodata as v, messages as M } from "../messages/main.mjs";
 const te = /* @__PURE__ */ D({
@@ -55,7 +55,7 @@ const te = /* @__PURE__ */ D({
     };
   },
   mounted() {
-    this.list = H(this, "list");
+    this.list = q(this, "list");
   },
   methods: {
     handleClick(e, r) {
@@ -66,7 +66,7 @@ const te = /* @__PURE__ */ D({
     }
   },
   render() {
-    const e = T(this), r = K(this), {
+    const e = H(this), r = K(this), {
       id: I,
       show: b,
       wrapperCssClass: R,
@@ -129,7 +129,7 @@ const te = /* @__PURE__ */ D({
       "aria-live": "polite",
       "aria-hidden": b ? void 0 : !0,
       class: "k-list-ul",
-      ref: q(this, "list"),
+      ref: T(this, "list"),
       style: F
     }, [f]), e]) : C.call(this);
   }

package/common/ListFilter.mjs

@@ -5,8 +5,8 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as c, ref as p, createVNode as o } from "vue";
-import { Icon as f, getRef as m, kendoThemeMaps as h, setRef as g } from "@progress/kendo-vue-common";
+import { defineComponent as c, createVNode as o, ref as p } from "vue";
+import { getRef as f, Icon as m, kendoThemeMaps as h, setRef as g } from "@progress/kendo-vue-common";
 import { searchIcon as v } from "@progress/kendo-svg-icons";
 import { TextBox as b } from "@progress/kendo-vue-inputs";
 import { provideLocalizationService as x } from "@progress/kendo-vue-intl";
@@ -95,7 +95,7 @@ const {
       this.$emit("blur", e);
     },
     prefixRender(e) {
-      return e(f, {
+      return e(m, {
         ...{
           class: "k-input-icon",
           name: "search",
@@ -105,7 +105,7 @@ const {
     }
   },
   mounted() {
-    this.input = m(this, "input")._input;
+    this.input = f(this, "input")._input;
   },
   render() {
     const {

package/common/SearchBar.mjs

@@ -5,8 +5,8 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as r, ref as o, createVNode as d, mergeProps as p } from "vue";
-import { canUseDOM as u, getRef as l, setRef as h } from "@progress/kendo-vue-common";
+import { defineComponent as r, createVNode as o, mergeProps as d, ref as p } from "vue";
+import { setRef as u, getRef as l, canUseDOM as h } from "@progress/kendo-vue-common";
 const b = /* @__PURE__ */ r({
   name: "search-bar",
   emits: {
@@ -65,11 +65,11 @@ const b = /* @__PURE__ */ r({
     } = this.$props;
     this.input || (this.input = this.$refs.input);
     const i = this.input, s = this.$data.prevValue !== e || t !== this.prevSuggestedText, a = s && this.$data.prevValue && this.$data.prevValue.startsWith(e) && !(this.$data.prevSuggestedText && t && this.$data.prevSuggestedText.endsWith(t));
-    n && i && u && document.activeElement !== i && i.focus(), t && s && !a && i && i.setSelectionRange(e.length - t.length, e.length);
+    n && i && h && document.activeElement !== i && i.focus(), t && s && !a && i && i.setSelectionRange(e.length - t.length, e.length);
   },
   setup() {
     return {
-      inputRef: o(null)
+      inputRef: p(null)
     };
   },
   mounted() {
@@ -93,7 +93,7 @@ const b = /* @__PURE__ */ r({
     }
   },
   render() {
-    return d("input", p({
+    return o("input", d({
       autocomplete: "off",
       id: this.$props.id,
       type: "text",
@@ -107,7 +107,7 @@ const b = /* @__PURE__ */ r({
       value: this.$props.value,
       size: this.$props.size ? this.$props.size : 20,
       onInput: this.onChange,
-      ref: h(this, "input"),
+      ref: u(this, "input"),
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       onBlur: this.onBlur,