@progress/kendo-react-dropdowns 9.1.1-develop.4 → 9.2.0-develop.1

package/MultiSelect/MultiSelect.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as f from "react";
 import m from "prop-types";
-import { Keys as u, classNames as y, IconWrap as R, validatePackage as X, canUseDOM as L, createPropsContext as Z, withIdHOC as tt, withPropsContext as et, kendoThemeMaps as st } from "@progress/kendo-react-common";
+import { Keys as u, classNames as b, IconWrap as R, validatePackage as X, canUseDOM as L, createPropsContext as Z, withIdHOC as tt, withPropsContext as et, kendoThemeMaps as st } from "@progress/kendo-react-common";
 import { plusIcon as it } from "@progress/kendo-svg-icons";
 import { FloatingLabel as ot } from "@progress/kendo-react-labels";
 import at from "../common/ListContainer.mjs";
@@ -25,10 +25,10 @@ import { AdaptiveMode as ft } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as gt } from "@progress/kendo-react-layout";
 import { MOBILE_MEDIUM_DEVISE as mt } from "../common/constants.mjs";
 import { provideLocalizationService as vt } from "@progress/kendo-react-intl";
-import { adaptiveModeFooterCancel as z, messages as V, adaptiveModeFooterApply as H } from "../messages/index.mjs";
+import { adaptiveModeFooterCancel as z, messages as V, adaptiveModeFooterApply as A } from "../messages/index.mjs";
 import It from "../common/ListFilter.mjs";
-import A from "../common/withCustomComponent.mjs";
-const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $ = (T) => T.preventDefault(), q = (T) => T === 2, b = class b extends f.Component {
+import H from "../common/withCustomComponent.mjs";
+const { sizeMap: D, roundedMap: bt } = st, yt = "Please enter a valid value!", $ = (T) => T.preventDefault(), q = (T) => T === 2, y = class y extends f.Component {
   constructor(n) {
     super(n), this.state = {
       activedescendant: k.PopupList,
@@ -46,8 +46,8 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       const s = this.value;
       w(s, e, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
     }, this.itemFocus = (e, t) => {
-      const { allowCustom: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: r } = this.getFocusedState(), i = o && c, d = a[e - p];
-      d && r !== e ? this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = k.PopupList) : i && e === -1 && this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(d, t);
+      const { allowCustom: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: r } = this.getFocusedState(), i = o && c, l = a[e - p];
+      l && r !== e ? this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = k.PopupList) : i && e === -1 && this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(l, t);
     }, this.componentRef = (e) => {
       this._element = e, this.base.wrapper = e;
     }, this.searchbarRef = (e) => {
@@ -62,11 +62,11 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
       M(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(t);
     }, this.onInputKeyDown = (e) => {
-      const { textField: t, groupField: o } = this.props, s = I(this.props), a = e.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: r, focusedIndex: i } = this.getFocusedState(), d = this.base.initState();
-      if (d.syntheticEvent = e, !p && this.value.length > 0 && (a === u.left || a === u.right || a === u.home || a === u.end || a === u.delete || a === u.backspace) && !e.shiftKey)
-        return this.onTagsNavigate(e, d);
+      const { textField: t, groupField: o } = this.props, s = I(this.props), a = e.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: r, focusedIndex: i } = this.getFocusedState(), l = this.base.initState();
+      if (l.syntheticEvent = e, !p && this.value.length > 0 && (a === u.left || a === u.right || a === u.home || a === u.end || a === u.delete || a === u.backspace) && !e.shiftKey)
+        return this.onTagsNavigate(e, l);
       const g = () => {
-        e.preventDefault(), this.base.togglePopup(d), this.applyState(d);
+        e.preventDefault(), this.base.togglePopup(l), this.applyState(l);
       };
       if (this.opened)
         if (a === u.pageUp)
@@ -75,77 +75,77 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
           e.preventDefault(), this.base.scrollPopupByPageSize(1);
         else if ((e.ctrlKey || e.metaKey) && e.code === "KeyA") {
           const h = (this.state.value && this.state.value.length) === s.length ? [] : s;
-          this.updateStateOnKeyboardNavigation(h, d);
+          this.updateStateOnKeyboardNavigation(h, l);
         } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.end) {
-          const l = s.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(s.length - 1, d), this.updateStateOnKeyboardNavigation(l, d);
+          const d = s.slice(this.getFocusedState().focusedIndex);
+          this.itemFocus(s.length - 1, l), this.updateStateOnKeyboardNavigation(d, l);
         } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.home) {
-          const l = s.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, d), this.updateStateOnKeyboardNavigation(l, d);
+          const d = s.slice(0, this.getFocusedState().focusedIndex + 1);
+          this.itemFocus(0, l), this.updateStateOnKeyboardNavigation(d, l);
         } else if (e.shiftKey && e.keyCode === u.up) {
-          let l;
+          let d;
           const h = this.getLastSelectedOrDeselectedIndex(1, i);
-          h === null ? l = i !== 0 ? s.slice(i - 1, i) : [s[i]] : h === i ? l = [s[h - 1]] : i >= 0 && (l = h > i ? s.slice(i - 1, h) : s.slice(h - 1, i)), l && l.length > 0 && (i >= 1 && this.itemFocus(i - 1, d), this.updateStateOnKeyboardNavigation(l, d));
+          h === null ? d = i !== 0 ? s.slice(i - 1, i) : [s[i]] : h === i ? d = [s[h - 1]] : i >= 0 && (d = h > i ? s.slice(i - 1, h) : s.slice(h - 1, i)), d && d.length > 0 && (i >= 1 && this.itemFocus(i - 1, l), this.updateStateOnKeyboardNavigation(d, l));
         } else if (e.shiftKey && e.keyCode === u.down) {
-          let l;
+          let d;
           const h = this.getLastSelectedOrDeselectedIndex(0, i);
-          h === null ? l = i !== s.length - 1 ? s.slice(i, i + 1) : [s[i]] : h === i ? l = s.slice(i, i + 2) : i >= 0 && (l = h > i ? s.slice(i + 1, h + 1) : s.slice(h, i + 2)), l && l.length >= 1 && (this.itemFocus(i + 1, d), this.updateStateOnKeyboardNavigation(l, d));
+          h === null ? d = i !== s.length - 1 ? s.slice(i, i + 1) : [s[i]] : h === i ? d = s.slice(i, i + 2) : i >= 0 && (d = h > i ? s.slice(i + 1, h + 1) : s.slice(h, i + 2)), d && d.length >= 1 && (this.itemFocus(i + 1, l), this.updateStateOnKeyboardNavigation(d, l));
         } else if (e.altKey && a === u.up)
           g();
         else if (a === u.up || a === u.down) {
           if (o !== "" && t)
             if (!this.props.skipDisabledItems && c)
-              this.onNavigate(d, a);
+              this.onNavigate(l, a);
             else {
-              let l = 0;
+              let d = 0;
               if (a === u.down || a === u.right) {
                 const h = s.slice(i + 1).find((v) => !v.disabled && v[t]);
-                l = h && s.findIndex((v) => v[t] === h[t]);
+                d = h && s.findIndex((v) => v[t] === h[t]);
               } else if (a === u.up || a === u.left) {
                 let h;
                 if (i === -1)
-                  h = s, l = s.findIndex((v) => !v.disabled && v[t]);
+                  h = s, d = s.findIndex((v) => !v.disabled && v[t]);
                 else {
                   h = s.slice(0, i);
                   let v = h.pop();
                   for (; v && v.disabled; )
                     v = h.pop();
-                  l = v && s.findIndex((S) => S[t] === v[t]);
+                  d = v && s.findIndex((x) => x[t] === v[t]);
                 }
               }
-              if (l) {
-                const h = l - i;
-                this.onNavigate(d, a, h);
+              if (d) {
+                const h = d - i;
+                this.onNavigate(l, a, h);
               } else
-                l !== void 0 && this.onNavigate(d, a);
+                d !== void 0 && this.onNavigate(l, a);
             }
           else if (!this.props.skipDisabledItems && c)
-            this.onNavigate(d, a);
+            this.onNavigate(l, a);
           else {
-            let l = null;
+            let d = null;
             if (a === u.down || a === u.right)
-              l = s.slice(i + 1).find((h) => !h.disabled);
+              d = s.slice(i + 1).find((h) => !h.disabled);
             else if (a === u.up || a === u.left) {
               const h = s.slice(0, i);
-              for (l = h.pop(); l && l.disabled; )
-                l = h.pop();
+              for (d = h.pop(); d && d.disabled; )
+                d = h.pop();
             }
-            if (l) {
-              const h = l.id - i - 1;
-              this.onNavigate(d, a, h);
+            if (d) {
+              const h = d.id - i - 1;
+              this.onNavigate(l, a, h);
             } else
-              this.onNavigate(d, a);
+              this.onNavigate(l, a);
           }
-          this.applyState(d), e.preventDefault();
+          this.applyState(l), e.preventDefault();
         } else
           a === u.enter ? (e.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(e) : r && r.disabled ? g() : this.selectFocusedItem(e)) : a === u.esc && g();
       else
         e.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(e);
     }, this.listContainerContent = () => {
-      const { header: e, footer: t, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: p, list: c } = this.props, r = I(this.props), i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: d } = this.getFocusedState(), g = o && i && /* @__PURE__ */ f.createElement(
+      const { header: e, footer: t, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: p, list: c } = this.props, r = I(this.props), i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), g = o && i && /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: y("k-list", {
+          className: b("k-list", {
             [`k-list-${D[s] || s}`]: s
           }),
           key: "customitem",
@@ -155,23 +155,23 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         /* @__PURE__ */ f.createElement(
           "div",
           {
-            className: y("k-list-item k-custom-item", { "k-focus": q(d) }),
+            className: b("k-list-item k-custom-item", { "k-focus": q(l) }),
             style: { fontStyle: "italic" }
           },
           i,
           /* @__PURE__ */ f.createElement(R, { name: "plus", icon: it, style: { position: "absolute", right: "0.5em" } })
         )
       );
-      let { group: l } = this.state;
-      return l === void 0 && p !== void 0 && (l = O(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, e && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, e), g, /* @__PURE__ */ f.createElement(
+      let { group: d } = this.state;
+      return d === void 0 && p !== void 0 && (d = O(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, e && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, e), g, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: y("k-list", {
+          className: b("k-list", {
             [`k-list-${this.mobileMode ? "lg" : D[s] || s}`]: s,
             "k-virtual-list": this.base.vs.enabled
           })
         },
-        !c && l && r.length !== 0 && /* @__PURE__ */ f.createElement(lt, { group: l, groupMode: "modern", render: a }),
+        !c && d && r.length !== 0 && /* @__PURE__ */ f.createElement(lt, { group: d, groupMode: "modern", render: a }),
         this.renderList()
       ), t && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, t));
     }, this.renderListContainer = () => {
@@ -180,7 +180,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         width: a,
         popupSettings: {
           ...s,
-          popupClass: y(s.popupClass, "k-list-container", "k-multiselect-popup"),
+          popupClass: b(s.popupClass, "k-list-container", "k-multiselect-popup"),
           anchor: s.anchor || this.element,
           show: this.opened,
           onOpen: this.onPopupOpened,
@@ -216,8 +216,8 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
           ),
           onCancel: this.onCancel,
           applyText: this.localization.toLanguageString(
-            H,
-            V[H]
+            A,
+            V[A]
           ),
           onApply: this.closePopup
         }
@@ -241,7 +241,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         groupHeaderItemRender: s,
         dataItemKey: a,
         virtual: p = { skip: 0, total: void 0 }
-      } = this.props, c = I(this.props), r = this.base.vs, { focusedIndex: i } = this.getFocusedState(), d = this.base.getPopupSettings(), g = `translateY(${r.translate}px)`;
+      } = this.props, c = I(this.props), r = this.base.vs, { focusedIndex: i } = this.getFocusedState(), l = this.base.getPopupSettings(), g = `translateY(${r.translate}px)`;
       return /* @__PURE__ */ f.createElement(
         nt,
         {
@@ -255,10 +255,10 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (l) => {
-            r.list = this.base.list = l;
+          listRef: (d) => {
+            r.list = this.base.list = d;
           },
-          wrapperStyle: this.mobileMode ? {} : { maxHeight: d.height },
+          wrapperStyle: this.mobileMode ? {} : { maxHeight: l.height },
           wrapperCssClass: "k-list-content",
           listStyle: r.enabled ? { transform: g } : void 0,
           key: "listKey",
@@ -284,8 +284,8 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         const p = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * p;
         a = this.base.getGroupedDataModernMode(a, s);
         let i = a[0][s];
-        for (let d = 1; d < a.length && !(p * d > r); d++)
-          a[d] && a[d][s] && (i = a[d][s]);
+        for (let l = 1; l < a.length && !(p * l > r); l++)
+          a[l] && a[l][s] && (i = a[l][s]);
         i !== this.state.group && this.setState({
           group: i
         });
@@ -323,7 +323,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || bt
+        this.validity.valid ? "" : this.props.validationMessage || yt
       );
     }, X(ct);
   }
@@ -381,20 +381,20 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
   }
   /** @hidden */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : b.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : y.defaultProps.required;
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : b.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : y.defaultProps.validityStyles;
   }
   /** @hidden */
   componentDidUpdate(n, e) {
     var g;
-    const { virtual: t, groupField: o = "" } = this.props, s = I(this.props), a = t ? t.skip : 0, p = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : e.opened, r = !c && this.opened, i = c && !this.opened, d = this.base.getPopupSettings();
-    if (this.base.didUpdate(), !d.animate && i && this.onPopupClosed(), t && t.total !== p)
+    const { virtual: t, groupField: o = "" } = this.props, s = I(this.props), a = t ? t.skip : 0, p = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : e.opened, r = !c && this.opened, i = c && !this.opened, l = this.base.getPopupSettings();
+    if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), t && t.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      let { focusedItem: l, focusedIndex: h } = this.getFocusedState();
-      o !== "" && (h = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(l)), r && t ? this.base.scrollToVirtualItem(t, h - a) : r && !t ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(h)) : this.opened && c && l && this.scrollToFocused && this.base.scrollToItem(h - a);
+      let { focusedItem: d, focusedIndex: h } = this.getFocusedState();
+      o !== "" && (h = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(d)), r && t ? this.base.scrollToVirtualItem(t, h - a) : r && !t ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(h)) : this.opened && c && d && this.scrollToFocused && this.base.scrollToItem(h - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
@@ -410,18 +410,18 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
   }
   /** @hidden */
   onNavigate(n, e, t) {
-    const { allowCustom: o } = this.props, s = I(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), r = o && a, i = q(p), d = this.base, g = d.vs;
+    const { allowCustom: o } = this.props, s = I(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), r = o && a, i = q(p), l = this.base, g = l.vs;
     if (this.opened && e === u.up && i)
       this.state.focusedIndex !== void 0 && (n.data.focusedIndex = void 0);
     else {
-      const l = d.navigation.navigate({
+      const d = l.navigation.navigate({
         keyCode: e,
         current: c,
         max: (g.enabled ? g.total : s.length) - 1,
         min: r ? -1 : 0,
         skipItems: t || void 0
       });
-      l !== void 0 && (this.itemFocus(l, n), this.scrollToFocused = !0);
+      d !== void 0 && (this.itemFocus(d, n), this.scrollToFocused = !0);
     }
     this.applyState(n);
   }
@@ -438,21 +438,21 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       virtual: c,
       size: r,
       rounded: i,
-      fillMode: d,
+      fillMode: l,
       loading: g,
-      filter: l
-    } = this.props, { text: h, focused: v, focusedTag: S, currentValue: W } = this.state, C = this.base.vs, _ = this.props.id || this._inputId;
+      filter: d
+    } = this.props, { text: h, focused: v, focusedTag: x, currentValue: W } = this.state, C = this.base.vs, _ = this.props.id || this._inputId;
     C.enabled = c !== void 0, c !== void 0 && (C.skip = c.skip, C.total = c.total, C.pageSize = c.pageSize);
-    const x = this.mobileMode && this.opened ? W : this.tagsToRender;
+    const S = this.mobileMode && this.opened ? W : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const K = !this.validityStyles || this.validity.valid, G = !!(l !== void 0 ? l : h) || x && x.length > 0, [U, Y] = A(this.props.prefix || f.Fragment), [j, J] = A(this.props.suffix || f.Fragment), N = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
+    const K = !this.validityStyles || this.validity.valid, G = !!(d !== void 0 ? d : h) || S && S.length > 0, [U, j] = H(this.props.prefix || f.Fragment), [Y, J] = H(this.props.suffix || f.Fragment), N = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
       "div",
       {
         ref: this.componentRef,
-        className: y("k-multiselect k-input", e, {
+        className: b("k-multiselect k-input", e, {
           [`k-input-${D[r] || r}`]: r,
-          [`k-rounded-${yt[i] || i}`]: i,
-          [`k-input-${d}`]: d,
+          [`k-rounded-${bt[i] || i}`]: i,
+          [`k-input-${l}`]: l,
           "k-focus": v && !s,
           "k-invalid": !K,
           "k-disabled": s,
@@ -466,28 +466,28 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         onClick: this.handleWrapperClick,
         onMouseDown: ht
       },
-      this.props.prefix && /* @__PURE__ */ f.createElement(U, { ...Y }),
-      /* @__PURE__ */ f.createElement("div", { className: y("k-input-values") }, /* @__PURE__ */ f.createElement(
+      this.props.prefix && /* @__PURE__ */ f.createElement(U, { ...j }),
+      /* @__PURE__ */ f.createElement("div", { className: b("k-input-values") }, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: y("k-chip-list", { [`k-chip-list-${D[r] || r}`]: r }),
+          className: b("k-chip-list", { [`k-chip-list-${D[r] || r}`]: r }),
           role: "listbox",
           id: "tagslist-" + this.base.guid
         },
-        x && x.length > 0 && /* @__PURE__ */ f.createElement(
+        S && S.length > 0 && /* @__PURE__ */ f.createElement(
           dt,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
-            data: x,
+            data: S,
             guid: this.base.guid,
-            focused: S ? x.find((Q) => B(Q, S, p)) : void 0,
+            focused: x ? S.find((Q) => B(Q, x, p)) : void 0,
             size: r
           }
         )
       ), this.renderSearchBar(_)),
       g && /* @__PURE__ */ f.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
-      this.props.suffix && /* @__PURE__ */ f.createElement(j, { ...J }),
+      this.props.suffix && /* @__PURE__ */ f.createElement(Y, { ...J }),
       G && /* @__PURE__ */ f.createElement(ut, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
@@ -505,7 +505,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
     ) : N;
   }
   renderSearchBar(n) {
-    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: p, ariaLabelledBy: c, ariaLabel: r } = this.props, i = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), g = this.value.length === 0 && !i ? a : void 0, l = o && o.length > 0 ? void 0 : a, h = e === k.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`, v = {
+    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: p, ariaLabelledBy: c, ariaLabel: r, inputAttributes: i } = this.props, l = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: g } = this.getFocusedState(), d = this.value.length === 0 && !l ? a : void 0, h = o && o.length > 0 ? void 0 : a, v = e === k.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${g}`, x = {
       accessKey: this.props.accessKey,
       tabIndex: this.props.tabIndex
     };
@@ -513,9 +513,9 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       rt,
       {
         id: n,
-        size: Math.max((g || "").length, i.length, 1),
-        placeholder: this.mobileMode && this.opened ? l : g,
-        value: i,
+        size: Math.max((d || "").length, l.length, 1),
+        placeholder: this.mobileMode && this.opened ? h : d,
+        value: l,
         onChange: this.onChangeHandler,
         onKeyDown: this.onInputKeyDown,
         ref: this.searchbarRef,
@@ -523,12 +523,13 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         expanded: this.opened,
         owns: this.base.listBoxId,
         role: "combobox",
-        activedescendant: h,
+        activedescendant: v,
         ariaDescribedBy: `tagslist-${this.base.guid}${p ? " " + p : ""}`,
         ariaLabelledBy: c,
         ariaRequired: this.required,
         ariaLabel: r,
-        ...v
+        inputAttributes: i,
+        ...x
       }
     );
   }
@@ -554,8 +555,8 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       if (r)
         w(i, s[p].data, a), this.triggerOnChange(i, e);
       else if (!r && s.length) {
-        const d = s.pop();
-        w(i, d.data, a), this.triggerOnChange(i, e);
+        const l = s.pop();
+        w(i, l.data, a), this.triggerOnChange(i, e);
       }
     }
     c !== o && (e.data.focusedTag = c, e.data.activedescendant = k.TagsList), this.applyState(e);
@@ -579,7 +580,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       focusedItemIndex: p = pt,
       skipDisabledItems: c
     } = this.props, r = I(this.props), i = s && s.skip || 0;
-    let d;
+    let l;
     if (n !== void 0)
       return {
         focusedIndex: n,
@@ -596,25 +597,25 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         /* CustomItem */
       };
     if (e)
-      return d = p(r, e, a), {
-        focusedItem: r[d],
-        focusedIndex: d + i,
+      return l = p(r, e, a), {
+        focusedItem: r[l],
+        focusedIndex: l + i,
         focusedType: 1
         /* ListItem */
       };
     if (g.length) {
-      const l = g[g.length - 1];
-      return d = r.findIndex((h) => E(h, l, o)), r[d] !== void 0 ? {
-        focusedIndex: d + i,
-        focusedItem: r[d],
+      const d = g[g.length - 1];
+      return l = r.findIndex((h) => E(h, d, o)), r[l] !== void 0 ? {
+        focusedIndex: l + i,
+        focusedItem: r[l],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
     } else if (c && a && !e && i === 0) {
-      const l = r.findIndex((h) => !h.disabled && h[a]);
+      const d = r.findIndex((h) => !h.disabled && h[a]);
       return {
-        focusedIndex: l,
-        focusedItem: r[l - i],
+        focusedIndex: d,
+        focusedItem: r[d - i],
         focusedType: 1
         /* ListItem */
       };
@@ -655,7 +656,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
     return this._lastSelectedOrDeslectedItemIndex === null && (this._lastSelectedOrDeslectedItemIndex = e), this._lastSelectedOrDeslectedItemIndex !== null ? this._lastSelectedOrDeslectedItemIndex + n : null;
   }
 };
-b.displayName = "MultiSelect", b.propTypes = {
+y.displayName = "MultiSelect", y.propTypes = {
   ...F.propTypes,
   autoClose: m.bool,
   value: m.arrayOf(m.any),
@@ -677,8 +678,9 @@ b.displayName = "MultiSelect", b.propTypes = {
   adaptive: m.bool,
   adaptiveTitle: m.string,
   onCancel: m.func,
-  skipDisabledItems: m.bool
-}, b.defaultProps = {
+  skipDisabledItems: m.bool,
+  inputAttributes: m.object
+}, y.defaultProps = {
   ...F.defaultProps,
   autoClose: !0,
   required: !1,
@@ -690,7 +692,7 @@ b.displayName = "MultiSelect", b.propTypes = {
   prefix: void 0,
   suffix: void 0
 };
-let P = b;
+let P = y;
 const xt = Z(), St = tt(
   et(
     xt,

package/common/SearchBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const d=require("@progress/kendo-react-common"),b=require("react");function g(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const u=g(b);class m extends u.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:n,suggestedText:o,focused:c}=this.props,a=this.input,i=e!==n||o!==s,l=i&&e.startsWith(n)&&!(s&&o&&s.endsWith(o)),p=d.getActiveElement(document);c&&a&&p!==a&&a.focus(),o&&i&&!l&&a&&a.setSelectionRange(n.length-o.length,n.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:n,tabIndex:o,accessKey:c,unstyled:a}=this.props,i=a&&a.uDropDownsBase,l={tabIndex:o,accessKey:c},p=u.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:d.classNames(d.uDropDownsBase.inputInner({c:i})),role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:h=>this._input=h,onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.ariaRequired,"aria-controls":this.props.ariaControls,...l});return n?n.call(void 0,p):p}}module.exports=m;
+"use client";"use strict";const d=require("@progress/kendo-react-common"),g=require("react");function m(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const h=m(g);class f extends h.Component{constructor(){super(...arguments),this._input=null}get input(){return this._input}componentDidUpdate(t){const e=t.value,s=t.suggestedText,{value:n,suggestedText:r,focused:p}=this.props,a=this.input,i=e!==n||r!==s,c=i&&e.startsWith(n)&&!(s&&r&&s.endsWith(r)),l=d.getActiveElement(document);p&&a&&l!==a&&a.focus(),r&&i&&!c&&a&&a.setSelectionRange(n.length-r.length,n.length)}render(){const{expanded:t=!1,disabled:e,role:s="listbox",render:n,tabIndex:r,accessKey:p,unstyled:a,inputAttributes:i}=this.props,c=a&&a.uDropDownsBase,l={tabIndex:r,accessKey:p},u=h.createElement("input",{autoComplete:"off",id:this.props.id,type:"text",key:"searchbar",size:this.props.size,placeholder:this.props.placeholder,className:d.classNames(d.uDropDownsBase.inputInner({c})),role:s,name:this.props.name,value:this.props.value,onChange:this.props.onChange,ref:b=>this._input=b,onKeyDown:this.props.onKeyDown,onFocus:this.props.onFocus,onBlur:this.props.onBlur,onClick:this.props.onClick,"aria-disabled":e||void 0,disabled:e||void 0,readOnly:this.props.readOnly||void 0,title:this.props.title,"aria-haspopup":"listbox","aria-expanded":t,"aria-owns":this.props.owns,"aria-activedescendant":t?this.props.activedescendant:void 0,"aria-describedby":this.props.ariaDescribedBy,"aria-labelledby":this.props.ariaLabelledBy,"aria-label":this.props.ariaLabel,"aria-required":this.props.ariaRequired,"aria-controls":this.props.ariaControls,...Object.assign({},l,i)});return n?n.call(void 0,u):u}}module.exports=f;

package/common/SearchBar.mjs

@@ -6,9 +6,9 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import { getActiveElement as h, classNames as u, uDropDownsBase as g } from "@progress/kendo-react-common";
-import * as d from "react";
-class v extends d.Component {
+import { getActiveElement as h, classNames as b, uDropDownsBase as g } from "@progress/kendo-react-common";
+import * as c from "react";
+class y extends c.Component {
   constructor() {
     super(...arguments), this._input = null;
   }
@@ -19,14 +19,23 @@ class v extends d.Component {
     return this._input;
   }
   componentDidUpdate(a) {
-    const i = a.value, o = a.suggestedText, { value: s, suggestedText: t, focused: p } = this.props, e = this.input, r = i !== s || t !== o, l = r && i.startsWith(s) && !(o && t && o.endsWith(t)), n = h(document);
-    p && e && n !== e && e.focus(), t && r && !l && e && e.setSelectionRange(s.length - t.length, s.length);
+    const i = a.value, o = a.suggestedText, { value: s, suggestedText: t, focused: n } = this.props, e = this.input, r = i !== s || t !== o, p = r && i.startsWith(s) && !(o && t && o.endsWith(t)), l = h(document);
+    n && e && l !== e && e.focus(), t && r && !p && e && e.setSelectionRange(s.length - t.length, s.length);
   }
   render() {
-    const { expanded: a = !1, disabled: i, role: o = "listbox", render: s, tabIndex: t, accessKey: p, unstyled: e } = this.props, r = e && e.uDropDownsBase, l = {
+    const {
+      expanded: a = !1,
+      disabled: i,
+      role: o = "listbox",
+      render: s,
       tabIndex: t,
-      accessKey: p
-    }, n = /* @__PURE__ */ d.createElement(
+      accessKey: n,
+      unstyled: e,
+      inputAttributes: r
+    } = this.props, p = e && e.uDropDownsBase, l = {
+      tabIndex: t,
+      accessKey: n
+    }, d = /* @__PURE__ */ c.createElement(
       "input",
       {
         autoComplete: "off",
@@ -35,12 +44,12 @@ class v extends d.Component {
         key: "searchbar",
         size: this.props.size,
         placeholder: this.props.placeholder,
-        className: u(g.inputInner({ c: r })),
+        className: b(g.inputInner({ c: p })),
         role: o,
         name: this.props.name,
         value: this.props.value,
         onChange: this.props.onChange,
-        ref: (c) => this._input = c,
+        ref: (u) => this._input = u,
         onKeyDown: this.props.onKeyDown,
         onFocus: this.props.onFocus,
         onBlur: this.props.onBlur,
@@ -58,12 +67,12 @@ class v extends d.Component {
         "aria-label": this.props.ariaLabel,
         "aria-required": this.props.ariaRequired,
         "aria-controls": this.props.ariaControls,
-        ...l
+        ...Object.assign({}, l, r)
       }
     );
-    return s ? s.call(void 0, n) : n;
+    return s ? s.call(void 0, d) : d;
   }
 }
 export {
-  v as default
+  y as default
 };