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

package/ComboBox/ComboBox.mjs

@@ -6,8 +6,8 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as u from "react";
-import f from "prop-types";
+import * as c from "react";
+import v from "prop-types";
 import N from "../common/DropDownBase.mjs";
 import { Keys as C, validatePackage as ae, svgIconPropType as ne, canUseDOM as z, classNames as I, uComboBox as D, IconWrap as le, uDropDownsActionSheet as M, createPropsContext as re, withIdHOC as de, withPropsContext as pe, withUnstyledHOC as he } from "@progress/kendo-react-common";
 import { FloatingLabel as ce } from "@progress/kendo-react-labels";
@@ -26,7 +26,7 @@ import { provideLocalizationService as $ } from "@progress/kendo-react-intl";
 import { ActionSheet as Se, ActionSheetHeader as De, ActionSheetContent as we } from "@progress/kendo-react-layout";
 import { MOBILE_MEDIUM_DEVISE as Y, MOBILE_SMALL_DEVISE as J } from "../common/constants.mjs";
 import Q from "../common/withCustomComponent.mjs";
-const Ee = "Please enter a valid value!", F = class F extends u.Component {
+const Ee = "Please enter a valid value!", F = class F extends c.Component {
   constructor(s) {
     super(s), this.state = {}, this.base = new N(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.duplicates = [], this.hasDuplicates = !1, this.focus = () => {
       this._input && this._input.focus();
@@ -56,7 +56,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       t && !this.mobileMode && this.base.togglePopup(e);
     }, this.renderMobileListFilter = () => {
       const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = k(this.value, this.props.textField), i = w(e) ? e : t;
-      return /* @__PURE__ */ u.createElement(
+      return /* @__PURE__ */ c.createElement(
         be,
         {
           value: i,
@@ -81,8 +81,8 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       const a = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : i ? i.children[0].offsetHeight : 0), l = e.target.scrollTop - t.skip * a;
       this.props.groupMode === "modern" && (r = this.base.getGroupedDataModernMode(r, n));
       let o = r[0][n];
-      for (let c = 1; c < r.length && !(a * c > l); c++)
-        r[c] && r[c][n] && (o = r[c][n]);
+      for (let u = 1; u < r.length && !(a * u > l); u++)
+        r[u] && r[u][n] && (o = r[u][n]);
       o !== this.state.group && (this.setState({
         group: o
       }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: o }));
@@ -103,10 +103,10 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       const { skipDisabledItems: t, textField: i, dataItemKey: n, groupField: r } = this.props, a = S(this.props), d = this.value, l = Math.max(
         0,
         a.findIndex((h) => E(h, d, n))
-      ), o = e.keyCode, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
+      ), o = e.keyCode, u = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
       if (p.syntheticEvent = e, !e.altKey && (o === C.up || o === C.down)) {
         if (e.preventDefault(), r !== "" && i)
-          if (!this.props.skipDisabledItems && c)
+          if (!this.props.skipDisabledItems && u)
             this.onNavigate(p, o);
           else {
             let h = 0;
@@ -131,7 +131,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
             } else
               h === void 0 && a.findIndex((g) => g[i] === d[i]) === a.length - 1 && this.onNavigate(p, o);
           }
-        else if (!this.props.skipDisabledItems && c)
+        else if (!this.props.skipDisabledItems && u)
           this.onNavigate(p, o);
         else {
           let h = null;
@@ -152,8 +152,8 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       }
       const y = () => {
         e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
-      }, x = this.getFocusedIndex(), v = x === -1, m = !v && this.getCurrentValueDisabledStatus(i, a, x);
-      c ? o === C.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === C.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && o === C.up ? y() : o === C.enter ? (e.preventDefault(), (i && !v && e.currentTarget.value ? a[x][i] : void 0) ? !t && i && m ? this.clearValueOnEnterOrEsc(e) : m || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : o === C.esc && (!t && i && m && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !c && o === C.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === C.down && y();
+      }, x = this.getFocusedIndex(), f = x === -1, m = !f && this.getCurrentValueDisabledStatus(i, a, x);
+      u ? o === C.pageUp ? (e.preventDefault(), this.base.scrollPopupByPageSize(-1)) : o === C.pageDown ? (e.preventDefault(), this.base.scrollPopupByPageSize(1)) : e.altKey && o === C.up ? y() : o === C.enter ? (e.preventDefault(), (i && !f && e.currentTarget.value ? a[x][i] : void 0) ? !t && i && m ? this.clearValueOnEnterOrEsc(e) : m || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : o === C.esc && (!t && i && m && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !u && o === C.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === C.down && y();
     }, this.inputOnChange = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e;
@@ -250,17 +250,17 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
     var y;
     const { dataItemKey: t, virtual: i, groupField: n = "", textField: r } = this.props, a = S(this.props), d = s.virtual ? s.virtual.total : 0, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = s.opened !== void 0 ? s.opened : e.opened;
     s.data !== a && this.checkForDuplicatePlainTextRecords();
-    const c = !o && l, p = this.value;
+    const u = !o && l, p = this.value;
     if (this._valueOnDidUpdate = p, this.base.didUpdate(), i && i.total !== d)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       const x = s.value !== void 0 ? s.value : e.value;
-      let v = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((h) => E(h, p, t));
-      this.props.groupMode === "modern" && r && p && (v = (y = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : y.map((h) => h[r]).indexOf(p[r]));
+      let f = this.hasDuplicates ? this.navigationIndex || 0 : a.findIndex((h) => E(h, p, t));
+      this.props.groupMode === "modern" && r && p && (f = (y = this.base.getGroupedDataModernMode(a, n)) == null ? void 0 : y.map((h) => h[r]).indexOf(p[r]));
       const m = !E(x, p, t);
-      c && i ? this.base.scrollToVirtualItem(i, v) : c && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(v)) : (this.hasDuplicates || l && o && p && m) && this.base.scrollToItem(v);
+      u && i ? this.base.scrollToVirtualItem(i, f) : u && !i ? (this.onPopupOpened(), a && a.length !== 0 && this.base.resetGroupStickyHeader(a[0][n], this), this.base.scrollToItem(f)) : (this.hasDuplicates || l && o && p && m) && this.base.scrollToItem(f);
     }
-    c && this._input && this._input.focus(), this.setValidity();
+    u && this._input && this._input.focus(), this.setValidity();
   }
   /** @hidden */
   componentDidMount() {
@@ -289,18 +289,18 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       className: d,
       style: l,
       loading: o,
-      iconClassName: c,
+      iconClassName: u,
       virtual: p,
       size: y,
       rounded: x,
-      fillMode: v,
+      fillMode: f,
       opened: m = this.state.opened,
       placeholder: h,
       svgIcon: g,
       unstyled: b
     } = this.props, B = !this.validityStyles || this.validity.valid, O = this.props.filter !== void 0 ? this.props.filter : this.state.text, X = k(this.value, a), T = w(O) ? O : X, Z = n && (!!T || w(this.value)), V = this.base.vs, A = this.props.id || this._inputId, L = this.mobileMode, _ = b && b.uComboBox;
     V.enabled = p !== void 0, p !== void 0 && (V.skip = p.skip, V.total = p.total, V.pageSize = p.pageSize);
-    const [ee, te] = Q(this.props.prefix || u.Fragment), [se, ie] = Q(this.props.suffix || u.Fragment), R = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
+    const [ee, te] = Q(this.props.prefix || c.Fragment), [se, ie] = Q(this.props.suffix || c.Fragment), R = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(
       "span",
       {
         className: I(
@@ -308,7 +308,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
             c: _,
             size: y,
             rounded: x,
-            fillMode: v,
+            fillMode: f,
             disabled: i,
             invalid: !B,
             loading: o,
@@ -320,10 +320,10 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         style: r ? { ...l, width: void 0 } : l,
         dir: t
       },
-      this.props.prefix && /* @__PURE__ */ u.createElement(ee, { ...te }),
+      this.props.prefix && /* @__PURE__ */ c.createElement(ee, { ...te }),
       this.renderSearchBar(T || "", A, h),
-      Z && !o && /* @__PURE__ */ u.createElement(Ie, { onClick: this.clearButtonClick, key: "clearbutton" }),
-      o && /* @__PURE__ */ u.createElement(
+      Z && !o && /* @__PURE__ */ c.createElement(Ie, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      o && /* @__PURE__ */ c.createElement(
         le,
         {
           className: I(D.loadingIcon({ c: _ })),
@@ -331,18 +331,18 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
           key: "loading"
         }
       ),
-      this.props.suffix && /* @__PURE__ */ u.createElement(se, { ...ie }),
-      /* @__PURE__ */ u.createElement(
+      this.props.suffix && /* @__PURE__ */ c.createElement(se, { ...ie }),
+      /* @__PURE__ */ c.createElement(
         G,
         {
           tabIndex: -1,
           type: "button",
           "aria-label": m ? e : s,
-          icon: c ? void 0 : "caret-alt-down",
+          icon: u ? void 0 : "caret-alt-down",
           svgIcon: g || ye,
-          iconClass: c,
+          iconClass: u,
           size: y,
-          fillMode: v,
+          fillMode: f,
           rounded: null,
           themeColor: "base",
           className: I(D.inputButton({ c: _ })),
@@ -352,7 +352,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       ),
       !L && this.renderListContainer()
     ), L && this.renderAdaptiveListContainer());
-    return r ? /* @__PURE__ */ u.createElement(
+    return r ? /* @__PURE__ */ c.createElement(
       ce,
       {
         label: r,
@@ -372,8 +372,8 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
     let a = -1, d;
     const l = this.base.vs, o = this.value;
     this._suggested = "";
-    const c = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
-    if (a = this.getFocusedIndex(c), a !== -1 && !w(o))
+    const u = this.hasDuplicates && this.duplicates.indexOf(o) !== -1;
+    if (a = this.getFocusedIndex(u), a !== -1 && !w(o))
       this.handleItemSelect(a, s);
     else if (r === "")
       this.handleItemSelect(0, s);
@@ -426,8 +426,8 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       virtual: d,
       adaptiveTitle: l,
       groupStickyHeaderItemRender: o,
-      unstyled: c
-    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = this.base.getAdaptiveAnimation(), v = c && c.uComboBox, m = c && c.uDropDownsActionSheet;
+      unstyled: u
+    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = this.base.getAdaptiveAnimation(), f = u && u.uComboBox, m = u && u.uDropDownsActionSheet;
     let { group: h } = this.state;
     h === void 0 && n !== void 0 && (h = k(p[0], n));
     const g = {
@@ -444,7 +444,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         })
       )
     };
-    return /* @__PURE__ */ u.createElement(Se, { ...g }, /* @__PURE__ */ u.createElement(De, null, /* @__PURE__ */ u.createElement("div", { className: I(M.titleBar({ c: m })) }, /* @__PURE__ */ u.createElement("div", { className: I(M.title({ c: m })) }, /* @__PURE__ */ u.createElement("div", { className: I(M.header({ c: m })) }, l), /* @__PURE__ */ u.createElement("div", { className: I(M.subtitle({ c: m })) })), /* @__PURE__ */ u.createElement("div", { className: I(M.actions({ c: m })) }, /* @__PURE__ */ u.createElement(
+    return /* @__PURE__ */ c.createElement(Se, { ...g }, /* @__PURE__ */ c.createElement(De, null, /* @__PURE__ */ c.createElement("div", { className: I(M.titleBar({ c: m })) }, /* @__PURE__ */ c.createElement("div", { className: I(M.title({ c: m })) }, /* @__PURE__ */ c.createElement("div", { className: I(M.header({ c: m })) }, l), /* @__PURE__ */ c.createElement("div", { className: I(M.subtitle({ c: m })) })), /* @__PURE__ */ c.createElement("div", { className: I(M.actions({ c: m })) }, /* @__PURE__ */ c.createElement(
       G,
       {
         tabIndex: 0,
@@ -458,21 +458,21 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         icon: "x",
         svgIcon: Ce
       }
-    ))), /* @__PURE__ */ u.createElement("div", { className: I(M.titleBarGroup({ c: m })) }, this.renderMobileListFilter())), /* @__PURE__ */ u.createElement(we, { overflowHidden: !0 }, /* @__PURE__ */ u.createElement(
+    ))), /* @__PURE__ */ c.createElement("div", { className: I(M.titleBarGroup({ c: m })) }, this.renderMobileListFilter())), /* @__PURE__ */ c.createElement(we, { overflowHidden: !0 }, /* @__PURE__ */ c.createElement(
       "div",
       {
         className: I(
           D.listContainer({
-            c: v
+            c: f
           })
         )
       },
-      /* @__PURE__ */ u.createElement(
+      /* @__PURE__ */ c.createElement(
         "div",
         {
           className: I(
             D.list({
-              c: v,
+              c: f,
               list: a,
               size: "large",
               tableSize: i,
@@ -480,8 +480,8 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
             })
           )
         },
-        e && /* @__PURE__ */ u.createElement("div", { className: I(D.listHeader({ c: v })) }, e),
-        !a && h && p.length !== 0 && /* @__PURE__ */ u.createElement(
+        e && /* @__PURE__ */ c.createElement("div", { className: I(D.listHeader({ c: f })) }, e),
+        !a && h && p.length !== 0 && /* @__PURE__ */ c.createElement(
           q,
           {
             group: h,
@@ -490,11 +490,11 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
           }
         ),
         this.renderList(),
-        t && /* @__PURE__ */ u.createElement(
+        t && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: I(
-              D.listFooter({ c: v }),
+              D.listFooter({ c: f }),
               this.props.footerClassName
             )
           },
@@ -514,13 +514,13 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       list: d,
       virtual: l,
       groupStickyHeaderItemRender: o,
-      unstyled: c
-    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), v = x.width !== void 0 ? x.width : s.popupWidth, m = c && c.uComboBox;
+      unstyled: u
+    } = this.props, p = S(this.props), y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = s.getPopupSettings(), f = x.width !== void 0 ? x.width : s.popupWidth, m = u && u.uComboBox;
     let { group: h } = this.state;
-    return h === void 0 && n !== void 0 && (h = k(p[0], n)), /* @__PURE__ */ u.createElement(
+    return h === void 0 && n !== void 0 && (h = k(p[0], n)), /* @__PURE__ */ c.createElement(
       ve,
       {
-        width: v,
+        width: f,
         popupSettings: {
           ...x,
           anchor: x.anchor || this.element,
@@ -536,7 +536,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         dir: e !== void 0 ? e : this.base.dirCalculated,
         itemsCount: [p.length]
       },
-      /* @__PURE__ */ u.createElement(
+      /* @__PURE__ */ c.createElement(
         "div",
         {
           className: I(
@@ -549,10 +549,10 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
             })
           )
         },
-        t && /* @__PURE__ */ u.createElement("div", { className: I(D.listHeader({ c: m })) }, t),
-        !d && h && p.length !== 0 && /* @__PURE__ */ u.createElement(q, { group: h, groupMode: r, render: o }),
+        t && /* @__PURE__ */ c.createElement("div", { className: I(D.listHeader({ c: m })) }, t),
+        !d && h && p.length !== 0 && /* @__PURE__ */ c.createElement(q, { group: h, groupMode: r, render: o }),
         this.renderList(),
-        i && /* @__PURE__ */ u.createElement(
+        i && /* @__PURE__ */ c.createElement(
           "div",
           {
             className: I(
@@ -574,15 +574,15 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       groupHeaderItemRender: r,
       virtual: a = { skip: 0, total: void 0 },
       unstyled: d
-    } = this.props, l = S(this.props), o = s.getPopupSettings(), c = s.vs, p = a.skip, y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${c.translate}px)`, v = y ? this.getFocusedIndex(this.hasDuplicates) : void 0, m = this.props.filter !== void 0 ? this.props.filter : this.state.text, h = k(this.value, e), g = w(m) && m !== h ? null : this.value, b = this.props.list || fe, B = d && d.uComboBox;
-    return /* @__PURE__ */ u.createElement(
+    } = this.props, l = S(this.props), o = s.getPopupSettings(), u = s.vs, p = a.skip, y = this.props.opened !== void 0 ? this.props.opened : this.state.opened, x = `translateY(${u.translate}px)`, f = y ? this.getFocusedIndex(this.hasDuplicates) : void 0, m = this.props.filter !== void 0 ? this.props.filter : this.state.text, h = k(this.value, e), g = w(m) && m !== h ? null : this.value, b = this.props.list || fe, B = d && d.uComboBox;
+    return /* @__PURE__ */ c.createElement(
       b,
       {
         id: s.listBoxId,
         virtual: !!a,
         show: y,
         data: l,
-        focusedIndex: v,
+        focusedIndex: f,
         value: g,
         textField: e,
         valueField: t,
@@ -592,7 +592,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         optionsGuid: s.guid,
         hasDuplicates: this.hasDuplicates,
         listRef: (O) => {
-          c.list = this.base.list = O, this.itemHeight = 0;
+          u.list = this.base.list = O, this.itemHeight = 0;
         },
         wrapperStyle: this.state.windowWidth && this.state.windowWidth > Y ? { maxHeight: o.height } : {},
         wrapperCssClass: I(
@@ -601,7 +601,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
             virtual: a
           })
         ),
-        listStyle: c.enabled ? { transform: x } : void 0,
+        listStyle: u.enabled ? { transform: x } : void 0,
         key: "listkey",
         skip: p,
         onClick: this.handleItemClick,
@@ -610,7 +610,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         noDataRender: i,
         onMouseDown: (O) => O.preventDefault(),
         onScroll: this.onScroll,
-        wrapperRef: c.scrollerRef,
+        wrapperRef: u.scrollerRef,
         scroller: this.base.renderScrollElement(),
         ariaSetSize: a.total
       }
@@ -625,21 +625,18 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
       ariaDescribedBy: d,
       dataItemKey: l,
       virtual: o = { skip: 0 },
-      accessKey: c,
-      unstyled: p
-    } = this.props, y = S(this.props), x = this.props.opened !== void 0 ? this.props.opened : this.state.opened, v = this.value, m = Math.max(
+      accessKey: u,
+      unstyled: p,
+      inputAttributes: y
+    } = this.props, x = S(this.props), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, m = this.value, h = Math.max(
       0,
-      y.findIndex((g) => E(g, v, l))
+      x.findIndex((g) => E(g, m, l))
     );
-    this._suggested && !E(this._valueOnDidUpdate, v, l) && (this._suggested = "");
-    const h = {
-      accessKey: c
-    };
-    return /* @__PURE__ */ u.createElement(
+    return this._suggested && !E(this._valueOnDidUpdate, m, l) && (this._suggested = ""), /* @__PURE__ */ c.createElement(
       me,
       {
         id: e,
-        readOnly: x && this.mobileMode,
+        readOnly: f && this.mobileMode,
         placeholder: t,
         tabIndex: i,
         title: r,
@@ -652,9 +649,9 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         onFocus: this.base.handleFocus,
         onBlur: this.handleBlur,
         disabled: n,
-        expanded: x,
+        expanded: f,
         owns: this.base.listBoxId,
-        activedescendant: `option-${this.base.guid}-${m + o.skip}`,
+        activedescendant: `option-${this.base.guid}-${h + o.skip}`,
         role: "combobox",
         ariaLabelledBy: a,
         ariaLabel: this.props.ariaLabel,
@@ -663,7 +660,7 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
         render: this.props.valueRender,
         ariaControls: this.base.listBoxId,
         unstyled: p,
-        ...h
+        inputAttributes: y
       }
     );
   }
@@ -701,29 +698,30 @@ const Ee = "Please enter a valid value!", F = class F extends u.Component {
 };
 F.displayName = "ComboBox", F.propTypes = {
   ...N.propTypes,
-  size: f.oneOf([null, "small", "medium", "large"]),
-  rounded: f.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: f.oneOf([null, "solid", "flat", "outline"]),
-  dataItemKey: f.string,
-  groupField: f.string,
-  groupMode: f.oneOf([void 0, "classic", "modern"]),
-  isMultiColumn: f.bool,
-  suggest: f.bool,
-  placeholder: f.string,
-  title: f.string,
-  allowCustom: f.bool,
-  clearButton: f.bool,
-  iconClassName: f.string,
+  size: v.oneOf([null, "small", "medium", "large"]),
+  rounded: v.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: v.oneOf([null, "solid", "flat", "outline"]),
+  dataItemKey: v.string,
+  groupField: v.string,
+  groupMode: v.oneOf([void 0, "classic", "modern"]),
+  isMultiColumn: v.bool,
+  suggest: v.bool,
+  placeholder: v.string,
+  title: v.string,
+  allowCustom: v.bool,
+  clearButton: v.bool,
+  iconClassName: v.string,
   svgIcon: ne,
-  validationMessage: f.string,
-  required: f.bool,
-  id: f.string,
-  ariaLabelledBy: f.string,
-  ariaLabel: f.string,
-  ariaDescribedBy: f.string,
-  list: f.any,
-  valueRender: f.func,
-  skipDisabledItems: f.bool
+  validationMessage: v.string,
+  required: v.bool,
+  id: v.string,
+  ariaLabelledBy: v.string,
+  ariaLabel: v.string,
+  ariaDescribedBy: v.string,
+  list: v.any,
+  valueRender: v.func,
+  skipDisabledItems: v.bool,
+  inputAttributes: v.object
 }, F.defaultProps = {
   ...N.defaultProps,
   size: "medium",

package/MultiSelect/MultiSelect.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),v=require("prop-types"),h=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("@progress/kendo-react-labels"),G=require("../common/ListContainer.js"),j=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),K=require("../common/DropDownBase.js"),D=require("../common/settings.js"),m=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),S=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:w,roundedMap:ne}=h.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new K(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{dataItemKey:o,virtual:s}=this.props,a=m.getFilteredData(this.props),p=s?s.skip:0,u=a[t-p],r=this.value.findIndex(g=>m.areSame(g,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(g=>m.areSame(g,u,o));let i=[];r!==-1?(i=this.value,i.splice(r,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(u,e)},this.onTagDelete=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;m.removeDataItems(s,t,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(t,e)=>{const{allowCustom:o,virtual:s}=this.props,a=m.getFilteredData(this.props),p=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),i=o&&u,d=a[t-p];d&&r!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=D.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(d,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),o=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=o),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(o,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const o=this.props.filter!==void 0?this.props.filter:this.state.text;m.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{textField:e,groupField:o}=this.props,s=m.getFilteredData(this.props),a=t.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:r,focusedIndex:i}=this.getFocusedState(),d=this.base.initState();if(d.syntheticEvent=t,!p&&this.value.length>0&&(a===h.Keys.left||a===h.Keys.right||a===h.Keys.home||a===h.Keys.end||a===h.Keys.delete||a===h.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,d);const g=()=>{t.preventDefault(),this.base.togglePopup(d),this.applyState(d)};if(this.opened)if(a===h.Keys.pageUp)t.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===h.Keys.pageDown)t.preventDefault(),this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const c=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(c,d)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.end){const l=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,d),this.updateStateOnKeyboardNavigation(l,d)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.home){const l=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,d),this.updateStateOnKeyboardNavigation(l,d)}else if(t.shiftKey&&t.keyCode===h.Keys.up){let l;const c=this.getLastSelectedOrDeselectedIndex(1,i);c===null?l=i!==0?s.slice(i-1,i):[s[i]]:c===i?l=[s[c-1]]:i>=0&&(l=c>i?s.slice(i-1,c):s.slice(c-1,i)),l&&l.length>0&&(i>=1&&this.itemFocus(i-1,d),this.updateStateOnKeyboardNavigation(l,d))}else if(t.shiftKey&&t.keyCode===h.Keys.down){let l;const c=this.getLastSelectedOrDeselectedIndex(0,i);c===null?l=i!==s.length-1?s.slice(i,i+1):[s[i]]:c===i?l=s.slice(i,i+2):i>=0&&(l=c>i?s.slice(i+1,c+1):s.slice(c,i+2)),l&&l.length>=1&&(this.itemFocus(i+1,d),this.updateStateOnKeyboardNavigation(l,d))}else if(t.altKey&&a===h.Keys.up)g();else if(a===h.Keys.up||a===h.Keys.down){if(o!==""&&e)if(!this.props.skipDisabledItems&&u)this.onNavigate(d,a);else{let l=0;if(a===h.Keys.down||a===h.Keys.right){const c=s.slice(i+1).find(y=>!y.disabled&&y[e]);l=c&&s.findIndex(y=>y[e]===c[e])}else if(a===h.Keys.up||a===h.Keys.left){let c;if(i===-1)c=s,l=s.findIndex(y=>!y.disabled&&y[e]);else{c=s.slice(0,i);let y=c.pop();for(;y&&y.disabled;)y=c.pop();l=y&&s.findIndex(C=>C[e]===y[e])}}if(l){const c=l-i;this.onNavigate(d,a,c)}else l!==void 0&&this.onNavigate(d,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(d,a);else{let l=null;if(a===h.Keys.down||a===h.Keys.right)l=s.slice(i+1).find(c=>!c.disabled);else if(a===h.Keys.up||a===h.Keys.left){const c=s.slice(0,i);for(l=c.pop();l&&l.disabled;)l=c.pop()}if(l){const c=l.id-i-1;this.onNavigate(d,a,c)}else this.onNavigate(d,a)}this.applyState(d),t.preventDefault()}else a===h.Keys.enter?(t.preventDefault(),this.props.allowCustom&&p&&r===null?this.customItemSelect(t):r&&r.disabled?g():this.selectFocusedItem(t)):a===h.Keys.esc&&g();else t.altKey&&a===h.Keys.down?g():a===h.Keys.esc&&this.clearButtonClick(t)},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:p,list:u}=this.props,r=m.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:d}=this.getFocusedState(),g=o&&i&&f.createElement("div",{className:h.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:h.classNames("k-list-item k-custom-item",{"k-focus":_(d)}),style:{fontStyle:"italic"}},i,f.createElement(h.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:l}=this.state;return l===void 0&&p!==void 0&&(l=m.getItemValue(r[0],p)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),g,f.createElement("div",{className:h.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&l&&r.length!==0&&f.createElement(Y,{group:l,groupMode:"modern",render:a}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e}=this.props,o=m.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:t.popupWidth,p={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...s,popupClass:h.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(G,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:o}=this.props,{windowWidth:s=0}=this.state,a=o!==void 0?o:this.state.text;this.localization=ie.provideLocalizationService(this);const p=e?f.createElement(oe,{value:a,ref:r=>this._adaptiveInput=r&&r.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,u={adaptiveTitle:t,expand:this.opened,onClose:r=>this.onCancel(r),windowWidth:s,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(S.adaptiveModeFooterCancel,S.messages[S.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(S.adaptiveModeFooterApply,S.messages[S.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...u},f.createElement(te.ActionSheetContent,{overflowHidden:!0},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;m.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;m.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{textField:t,listNoDataRender:e,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:p={skip:0,total:void 0}}=this.props,u=m.getFilteredData(this.props),r=this.base.vs,{focusedIndex:i}=this.getFocusedState(),d=this.base.getPopupSettings(),g=`translateY(${r.translate}px)`;return f.createElement(j,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-p.skip,value:this.value,textField:t,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:l=>{r.list=this.base.list=l},wrapperStyle:this.mobileMode?{}:{maxHeight:d.height},wrapperCssClass:"k-list-content",listStyle:r.enabled?{transform:g}:void 0,key:"listKey",skip:p.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:e,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:r.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:p.total})},this.onScroll=t=>{const{vs:e,list:o}=this.base;e.scrollHandler(t);const{groupField:s}=this.props;let a=m.getFilteredData(this.props);if(!(!s||!a.length)&&s){const p=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:o?o.children[0].offsetHeight:0),r=t.target.scrollTop-e.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]);i!==this.state.group&&this.setState({group:i})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!e)return;const s=this.base.initState();s.syntheticEvent=t;const a=o?{[o]:e}:e;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const p=[...this.value,a];this.triggerOnChange(p,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const o=this.base.initState();o.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.handleItemSelect(t,o),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(o),e.stopPropagation(),this.applyState(o)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:o,filterable:s}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},h.validatePackage(X.packageMetadata)}get _inputId(){return this.props.id}get document(){if(h.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props,e=[];return n===void 0?this.value.forEach(o=>{e.push({text:m.getItemValue(o,t),data:[o]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var g;const{virtual:e,groupField:o=""}=this.props,s=m.getFilteredData(this.props),a=e?e.skip:0,p=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:t.opened,r=!u&&this.opened,i=u&&!this.opened,d=this.base.getPopupSettings();if(this.base.didUpdate(),!d.animate&&i&&this.onPopupClosed(),e&&e.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:l,focusedIndex:c}=this.getFocusedState();o!==""&&(c=(g=this.base.getGroupedDataModernMode(s,o))==null?void 0:g.indexOf(l)),r&&e?this.base.scrollToVirtualItem(e,c-a):r&&!e?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(c)):this.opened&&u&&l&&this.scrollToFocused&&this.base.scrollToItem(c-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=h.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:o}=this.props,s=m.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:u}=this.getFocusedState(),r=o&&a,i=_(p),d=this.base,g=d.vs;if(this.opened&&t===h.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const l=d.navigation.navigate({keyCode:t,current:u,max:(g.enabled?g.total:s.length)-1,min:r?-1:0,skipItems:e||void 0});l!==void 0&&(this.itemFocus(l,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:o,disabled:s,textField:a,dataItemKey:p,virtual:u,size:r,rounded:i,fillMode:d,loading:g,filter:l}=this.props,{text:c,focused:y,focusedTag:C,currentValue:q}=this.state,k=this.base.vs,T=this.props.id||this._inputId;k.enabled=u!==void 0,u!==void 0&&(k.skip=u.skip,k.total=u.total,k.pageSize=u.pageSize);const x=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(l!==void 0?l:c)||x&&x.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:h.classNames("k-multiselect k-input",t,{[`k-input-${w[r]||r}`]:r,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${d}`]:d,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":g,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:o,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:m.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:h.classNames("k-input-values")},f.createElement("div",{className:h.classNames("k-chip-list",{[`k-chip-list-${w[r]||r}`]:r}),role:"listbox",id:"tagslist-"+this.base.guid},x&&x.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:x,guid:this.base.guid,focused:C?x.find(H=>m.matchTags(H,C,p)):void 0,size:r})),this.renderSearchBar(T)),g&&f.createElement(h.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(U.FloatingLabel,{label:e,editorId:T,editorValue:c||m.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:p,ariaLabelledBy:u,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,c=t===D.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${d}`,y={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return f.createElement(Q,{id:n,size:Math.max((g||"").length,i.length,1),placeholder:this.mobileMode&&this.opened?l:g,value:i,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:c,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:u,ariaRequired:this.required,ariaLabel:r,...y})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let p=o?s.findIndex(i=>m.matchTags(i,o,a)):-1,u;const r=p!==-1;if(e===h.Keys.left)r?p=Math.max(0,p-1):p=s.length-1,u=s[p];else if(e===h.Keys.right)p===s.length-1?u=void 0:r&&(p=Math.min(s.length-1,p+1),u=s[p]);else if(e===h.Keys.home&&!n.shiftKey)u=s[0];else if(e===h.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(e===h.Keys.delete){if(r){const i=this.value;m.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,t)}}else if(e===h.Keys.backspace){const i=this.value;if(r)m.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,t);else if(!r&&s.length){const d=s.pop();m.removeDataItems(i,d.data,a),this.triggerOnChange(i,t)}}u!==o&&(t.data.focusedTag=u,t.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{virtual:e}=this.props,o=m.getFilteredData(this.props),{focusedIndex:s}=t||this.getFocusedState(),a=e?e.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:p=m.itemIndexStartsWith,skipDisabledItems:u}=this.props,r=m.getFilteredData(this.props),i=s&&s.skip||0;let d;if(n!==void 0)return{focusedIndex:n,focusedItem:r[n-i],focusedType:1};const g=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return d=p(r,t,a),{focusedItem:r[d],focusedIndex:d+i,focusedType:1};if(g.length){const l=g[g.length-1];return d=r.findIndex(c=>m.areSame(c,l,o)),r[d]!==void 0?{focusedIndex:d+i,focusedItem:r[d],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!t&&i===0){const l=r.findIndex(c=>!c.disabled&&c[a]);return{focusedIndex:l,focusedItem:r[l-i],focusedType:1}}return i===0?{focusedItem:r[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...K.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,onCancel:v.func,skipDisabledItems:v.bool},b.defaultProps={...K.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let F=b;const N=h.createPropsContext(),R=h.withIdHOC(h.withPropsContext(N,F));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=F;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),v=require("prop-types"),h=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("@progress/kendo-react-labels"),j=require("../common/ListContainer.js"),G=require("../common/List.js"),Y=require("../common/GroupStickyHeader.js"),J=require("./TagList.js"),Q=require("../common/SearchBar.js"),K=require("../common/DropDownBase.js"),D=require("../common/settings.js"),g=require("../common/utils.js"),X=require("../package-metadata.js"),Z=require("../common/ClearButton.js"),ee=require("../common/AdaptiveMode.js"),te=require("@progress/kendo-react-layout"),se=require("../common/constants.js"),ie=require("@progress/kendo-react-intl"),C=require("../messages/index.js"),oe=require("../common/ListFilter.js"),E=require("../common/withCustomComponent.js");function ae(I){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(I){for(const t in I)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(I,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>I[t]})}}return n.default=I,Object.freeze(n)}const f=ae($),{sizeMap:w,roundedMap:ne}=h.kendoThemeMaps,le="Please enter a valid value!",P=I=>I.preventDefault(),_=I=>I===2,b=class b extends f.Component{constructor(n){super(n),this.state={activedescendant:D.ActiveDescendant.PopupList,currentValue:[]},this._element=null,this._valueItemsDuringOnChange=null,this.base=new K(this),this._tags=[],this._input=null,this._adaptiveInput=null,this._skipFocusEvent=!1,this._lastSelectedOrDeslectedItemIndex=null,this.itemHeight=0,this.scrollToFocused=!1,this.localization=null,this.focus=()=>{this._input&&this._input.focus()},this.handleItemSelect=(t,e)=>{const{dataItemKey:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=a[t-p],r=this.value.findIndex(m=>g.areSame(m,u,o));this._lastSelectedOrDeslectedItemIndex=a.findIndex(m=>g.areSame(m,u,o));let i=[];r!==-1?(i=this.value,i.splice(r,1)):i=[...this.value,u],(this.props.filter!==void 0?this.props.filter:this.state.text)&&!this.mobileMode&&(this.state.text&&(e.data.text=""),this.base.filterChanged("",e)),this._adaptiveInput&&this._adaptiveInput.blur(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.triggerOnChange(i,e),this.base.triggerPageChangeCornerItems(u,e)},this.onTagDelete=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.opened&&this.base.togglePopup(o),!this.state.focused&&!this.mobileMode&&(o.data.focused=!0,this.focus());const s=this.value;g.removeDataItems(s,t,this.props.dataItemKey),this.triggerOnChange(s,o),this.applyState(o)},this.itemFocus=(t,e)=>{const{allowCustom:o,virtual:s}=this.props,a=g.getFilteredData(this.props),p=s?s.skip:0,u=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedIndex:r}=this.getFocusedState(),i=o&&u,l=a[t-p];l&&r!==t?this.state.focusedIndex!==t&&(e.data.focusedIndex=t,e.data.activedescendant=D.ActiveDescendant.PopupList):i&&t===-1&&this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.base.triggerPageChangeCornerItems(l,e)},this.componentRef=t=>{this._element=t,this.base.wrapper=t},this.searchbarRef=t=>{const e=this._input=t&&t.input;e&&this.state.focused&&window.setTimeout(()=>e.focus(),0)},this.onChangeHandler=t=>{const e=this.base.initState(),o=t.target.value;e.syntheticEvent=t,this.props.filter===void 0&&(e.data.text=o),e.data.focusedIndex=void 0,this.opened||(this.base.togglePopup(e),this.setState({currentValue:this.value})),this.base.filterChanged(o,e),this.applyState(e),this.setState({group:void 0})},this.clearButtonClick=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.value.length>0&&this.triggerOnChange([],e),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e);const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this._lastSelectedOrDeslectedItemIndex=null,this.applyState(e)},this.onInputKeyDown=t=>{const{textField:e,groupField:o}=this.props,s=g.getFilteredData(this.props),a=t.keyCode,p=this.props.filter!==void 0?this.props.filter:this.state.text,u=this.props.opened!==void 0?this.props.opened:this.state.opened,{focusedItem:r,focusedIndex:i}=this.getFocusedState(),l=this.base.initState();if(l.syntheticEvent=t,!p&&this.value.length>0&&(a===h.Keys.left||a===h.Keys.right||a===h.Keys.home||a===h.Keys.end||a===h.Keys.delete||a===h.Keys.backspace)&&!t.shiftKey)return this.onTagsNavigate(t,l);const m=()=>{t.preventDefault(),this.base.togglePopup(l),this.applyState(l)};if(this.opened)if(a===h.Keys.pageUp)t.preventDefault(),this.base.scrollPopupByPageSize(-1);else if(a===h.Keys.pageDown)t.preventDefault(),this.base.scrollPopupByPageSize(1);else if((t.ctrlKey||t.metaKey)&&t.code==="KeyA"){const c=(this.state.value&&this.state.value.length)===s.length?[]:s;this.updateStateOnKeyboardNavigation(c,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.end){const d=s.slice(this.getFocusedState().focusedIndex);this.itemFocus(s.length-1,l),this.updateStateOnKeyboardNavigation(d,l)}else if((t.ctrlKey||t.metaKey)&&t.shiftKey&&t.keyCode===h.Keys.home){const d=s.slice(0,this.getFocusedState().focusedIndex+1);this.itemFocus(0,l),this.updateStateOnKeyboardNavigation(d,l)}else if(t.shiftKey&&t.keyCode===h.Keys.up){let d;const c=this.getLastSelectedOrDeselectedIndex(1,i);c===null?d=i!==0?s.slice(i-1,i):[s[i]]:c===i?d=[s[c-1]]:i>=0&&(d=c>i?s.slice(i-1,c):s.slice(c-1,i)),d&&d.length>0&&(i>=1&&this.itemFocus(i-1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.shiftKey&&t.keyCode===h.Keys.down){let d;const c=this.getLastSelectedOrDeselectedIndex(0,i);c===null?d=i!==s.length-1?s.slice(i,i+1):[s[i]]:c===i?d=s.slice(i,i+2):i>=0&&(d=c>i?s.slice(i+1,c+1):s.slice(c,i+2)),d&&d.length>=1&&(this.itemFocus(i+1,l),this.updateStateOnKeyboardNavigation(d,l))}else if(t.altKey&&a===h.Keys.up)m();else if(a===h.Keys.up||a===h.Keys.down){if(o!==""&&e)if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=0;if(a===h.Keys.down||a===h.Keys.right){const c=s.slice(i+1).find(y=>!y.disabled&&y[e]);d=c&&s.findIndex(y=>y[e]===c[e])}else if(a===h.Keys.up||a===h.Keys.left){let c;if(i===-1)c=s,d=s.findIndex(y=>!y.disabled&&y[e]);else{c=s.slice(0,i);let y=c.pop();for(;y&&y.disabled;)y=c.pop();d=y&&s.findIndex(x=>x[e]===y[e])}}if(d){const c=d-i;this.onNavigate(l,a,c)}else d!==void 0&&this.onNavigate(l,a)}else if(!this.props.skipDisabledItems&&u)this.onNavigate(l,a);else{let d=null;if(a===h.Keys.down||a===h.Keys.right)d=s.slice(i+1).find(c=>!c.disabled);else if(a===h.Keys.up||a===h.Keys.left){const c=s.slice(0,i);for(d=c.pop();d&&d.disabled;)d=c.pop()}if(d){const c=d.id-i-1;this.onNavigate(l,a,c)}else this.onNavigate(l,a)}this.applyState(l),t.preventDefault()}else a===h.Keys.enter?(t.preventDefault(),this.props.allowCustom&&p&&r===null?this.customItemSelect(t):r&&r.disabled?m():this.selectFocusedItem(t)):a===h.Keys.esc&&m();else t.altKey&&a===h.Keys.down?m():a===h.Keys.esc&&this.clearButtonClick(t)},this.listContainerContent=()=>{const{header:t,footer:e,allowCustom:o,size:s,groupStickyHeaderItemRender:a,groupField:p,list:u}=this.props,r=g.getFilteredData(this.props),i=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:l}=this.getFocusedState(),m=o&&i&&f.createElement("div",{className:h.classNames("k-list",{[`k-list-${w[s]||s}`]:s}),key:"customitem",onClick:this.customItemSelect,onMouseDown:P},f.createElement("div",{className:h.classNames("k-list-item k-custom-item",{"k-focus":_(l)}),style:{fontStyle:"italic"}},i,f.createElement(h.IconWrap,{name:"plus",icon:W.plusIcon,style:{position:"absolute",right:"0.5em"}})));let{group:d}=this.state;return d===void 0&&p!==void 0&&(d=g.getItemValue(r[0],p)),f.createElement(f.Fragment,null,t&&f.createElement("div",{className:"k-list-header"},t),m,f.createElement("div",{className:h.classNames("k-list",{[`k-list-${this.mobileMode?"lg":w[s]||s}`]:s,"k-virtual-list":this.base.vs.enabled})},!u&&d&&r.length!==0&&f.createElement(Y,{group:d,groupMode:"modern",render:a}),this.renderList()),e&&f.createElement("div",{className:"k-list-footer"},e))},this.renderListContainer=()=>{const t=this.base,{dir:e}=this.props,o=g.getFilteredData(this.props),s=this.base.getPopupSettings(),a=s.width!==void 0?s.width:t.popupWidth,p={dir:e!==void 0?e:t.dirCalculated,width:a,popupSettings:{...s,popupClass:h.classNames(s.popupClass,"k-list-container","k-multiselect-popup"),anchor:s.anchor||this.element,show:this.opened,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[o.length,this.value.length]};return f.createElement(j,{...p},this.listContainerContent())},this.renderAdaptiveListContainer=()=>{const{adaptiveTitle:t,filterable:e,filter:o}=this.props,{windowWidth:s=0}=this.state,a=o!==void 0?o:this.state.text;this.localization=ie.provideLocalizationService(this);const p=e?f.createElement(oe,{value:a,ref:r=>this._adaptiveInput=r&&r.element,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode}):null,u={adaptiveTitle:t,expand:this.opened,onClose:r=>this.onCancel(r),windowWidth:s,mobileFilter:p,footer:{cancelText:this.localization.toLanguageString(C.adaptiveModeFooterCancel,C.messages[C.adaptiveModeFooterCancel]),onCancel:this.onCancel,applyText:this.localization.toLanguageString(C.adaptiveModeFooterApply,C.messages[C.adaptiveModeFooterApply]),onApply:this.closePopup}};return f.createElement(ee.AdaptiveMode,{...u},f.createElement(te.ActionSheetContent,{overflowHidden:!0},f.createElement("div",{className:"k-list-container"},this.listContainerContent())))},this.closePopup=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onClose"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.onCancel=t=>{const e=this.base.initState();e.syntheticEvent=t,t.stopPropagation(),this.state.focusedIndex!==void 0&&(e.data.focusedIndex=void 0),this.opened&&this.base.togglePopup(e),e.events.push({type:"onCancel"});const o=this.props.filter!==void 0?this.props.filter:this.state.text;g.isPresent(o)&&o!==""&&this.base.filterChanged("",e),this.state.text&&(e.data.text=""),this.applyState(e)},this.renderList=()=>{const{textField:t,listNoDataRender:e,itemRender:o,groupHeaderItemRender:s,dataItemKey:a,virtual:p={skip:0,total:void 0}}=this.props,u=g.getFilteredData(this.props),r=this.base.vs,{focusedIndex:i}=this.getFocusedState(),l=this.base.getPopupSettings(),m=`translateY(${r.translate}px)`;return f.createElement(G,{id:this.base.listBoxId,show:this.opened,data:u.slice(),focusedIndex:i-p.skip,value:this.value,textField:t,valueField:a,optionsGuid:this.base.guid,groupField:this.props.groupField,groupMode:"modern",listRef:d=>{r.list=this.base.list=d},wrapperStyle:this.mobileMode?{}:{maxHeight:l.height},wrapperCssClass:"k-list-content",listStyle:r.enabled?{transform:m}:void 0,key:"listKey",skip:p.skip,onClick:this.handleItemClick,itemRender:o,groupHeaderItemRender:s,noDataRender:e,onMouseDown:P,onBlur:this.handleBlur,onScroll:this.onScroll,wrapperRef:r.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:p.total})},this.onScroll=t=>{const{vs:e,list:o}=this.base;e.scrollHandler(t);const{groupField:s}=this.props;let a=g.getFilteredData(this.props);if(!(!s||!a.length)&&s){const p=this.itemHeight=this.itemHeight||(e.enabled?e.itemHeight:o?o.children[0].offsetHeight:0),r=t.target.scrollTop-e.skip*p;a=this.base.getGroupedDataModernMode(a,s);let i=a[0][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})}},this.customItemSelect=t=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text,{textField:o}=this.props;if(!e)return;const s=this.base.initState();s.syntheticEvent=t;const a=o?{[o]:e}:e;this.state.text!==void 0&&(s.data.text=""),s.data.focusedIndex=void 0,this.base.filterChanged("",s);const p=[...this.value,a];this.triggerOnChange(p,s),this.base.togglePopup(s),this.applyState(s)},this.handleWrapperClick=t=>{const e=this._input;!this.opened&&e&&this.focusElement(e);const o=this.base.initState();o.syntheticEvent=t,!this.state.focused&&!this.mobileMode&&(o.events.push({type:"onFocus"}),o.data.focused=!0),this.mobileMode&&(this.setState({currentValue:this.tagsToRender}),this.mobileMode&&window.setTimeout(()=>this._adaptiveInput&&this._adaptiveInput.focus(),300)),this.base.togglePopup(o),this.applyState(o)},this.handleItemClick=(t,e)=>{const o=this.base.initState();o.syntheticEvent=e,this.handleItemSelect(t,o),this.props.autoClose&&!this.mobileMode&&this.base.togglePopup(o),e.stopPropagation(),this.applyState(o)},this.handleBlur=t=>{if(!this.state.focused||this._skipFocusEvent)return;const e=this.base.initState(),{allowCustom:o,filterable:s}=this.props;e.syntheticEvent=t,e.data.focused=!1,e.events.push({type:"onBlur"}),this.opened&&!this.mobileMode&&(this.state.opened&&(e.data.opened=!1),e.events.push({type:"onClose"})),!o&&!s&&this.state.text&&(e.data.text=""),this.applyState(e)},this.handleFocus=t=>{this._skipFocusEvent||this.base.handleFocus(t)},this.onPopupOpened=()=>{this._input&&this.state.focused&&!this.mobileMode&&this.focusElement(this._input)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.focusElement(this._input)},0)},this.setValidity=()=>{this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity.valid?"":this.props.validationMessage||le)},h.validatePackage(X.packageMetadata)}get _inputId(){return this.props.id}get document(){if(h.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get opened(){return!!(this.props.opened!==void 0?this.props.opened:this.state.opened)}get tagsToRender(){const{tags:n,textField:t}=this.props,e=[];return n===void 0?this.value.forEach(o=>{e.push({text:g.getItemValue(o,t),data:[o]})}):e.push(...n),e}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=se.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get value(){const n=[];return this._valueItemsDuringOnChange?n.push(...this._valueItemsDuringOnChange):this.props.value?n.push(...this.props.value):this.state.value?n.push(...this.state.value):this.props.defaultValue&&n.push(...this.props.defaultValue),n}get name(){return this.props.name}get validity(){const n=this.props.validationMessage!==void 0,t=!this.required||this.value!==null&&this.value.length>0&&this.value!==void 0,e=this.props.valid!==void 0?this.props.valid:t;return{customError:n,valid:e,valueMissing:this.value===null}}get required(){return this.props.required!==void 0?this.props.required:b.defaultProps.required}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:b.defaultProps.validityStyles}componentDidUpdate(n,t){var m;const{virtual:e,groupField:o=""}=this.props,s=g.getFilteredData(this.props),a=e?e.skip:0,p=n.virtual?n.virtual.total:0,u=n.opened!==void 0?n.opened:t.opened,r=!u&&this.opened,i=u&&!this.opened,l=this.base.getPopupSettings();if(this.base.didUpdate(),!l.animate&&i&&this.onPopupClosed(),e&&e.total!==p)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{let{focusedItem:d,focusedIndex:c}=this.getFocusedState();o!==""&&(c=(m=this.base.getGroupedDataModernMode(s,o))==null?void 0:m.indexOf(d)),r&&e?this.base.scrollToVirtualItem(e,c-a):r&&!e?(s&&s.length!==0&&this.base.resetGroupStickyHeader(s[0][o],this),this.base.scrollToItem(c)):this.opened&&u&&d&&this.scrollToFocused&&this.base.scrollToItem(c-a)}this.scrollToFocused=!1,this.setValidity()}componentDidMount(){var n;this.observerResize=h.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var n;(n=this.document)!=null&&n.body&&this.observerResize&&this.observerResize.disconnect()}onNavigate(n,t,e){const{allowCustom:o}=this.props,s=g.getFilteredData(this.props),a=this.props.filter!==void 0?this.props.filter:this.state.text,{focusedType:p,focusedIndex:u}=this.getFocusedState(),r=o&&a,i=_(p),l=this.base,m=l.vs;if(this.opened&&t===h.Keys.up&&i)this.state.focusedIndex!==void 0&&(n.data.focusedIndex=void 0);else{const d=l.navigation.navigate({keyCode:t,current:u,max:(m.enabled?m.total:s.length)-1,min:r?-1:0,skipItems:e||void 0});d!==void 0&&(this.itemFocus(d,n),this.scrollToFocused=!0)}this.applyState(n)}render(){const{style:n,className:t,label:e,dir:o,disabled:s,textField:a,dataItemKey:p,virtual:u,size:r,rounded:i,fillMode:l,loading:m,filter:d}=this.props,{text:c,focused:y,focusedTag:x,currentValue:q}=this.state,k=this.base.vs,T=this.props.id||this._inputId;k.enabled=u!==void 0,u!==void 0&&(k.skip=u.skip,k.total=u.total,k.pageSize=u.pageSize);const S=this.mobileMode&&this.opened?q:this.tagsToRender;this.setItems(this.tagsToRender,this._tags);const M=!this.validityStyles||this.validity.valid,L=!!(d!==void 0?d:c)||S&&S.length>0,[B,V]=E(this.props.prefix||f.Fragment),[z,A]=E(this.props.suffix||f.Fragment),O=f.createElement(f.Fragment,null,f.createElement("div",{ref:this.componentRef,className:h.classNames("k-multiselect k-input",t,{[`k-input-${w[r]||r}`]:r,[`k-rounded-${ne[i]||i}`]:i,[`k-input-${l}`]:l,"k-focus":y&&!s,"k-invalid":!M,"k-disabled":s,"k-loading":m,"k-required":this.required}),style:e?{...n,width:void 0}:n,dir:o,onFocus:this.handleFocus,onBlur:this.handleBlur,onClick:this.handleWrapperClick,onMouseDown:g.preventDefaultNonInputs},this.props.prefix&&f.createElement(B,{...V}),f.createElement("div",{className:h.classNames("k-input-values")},f.createElement("div",{className:h.classNames("k-chip-list",{[`k-chip-list-${w[r]||r}`]:r}),role:"listbox",id:"tagslist-"+this.base.guid},S&&S.length>0&&f.createElement(J,{tagRender:this.props.tagRender,onTagDelete:this.onTagDelete,data:S,guid:this.base.guid,focused:x?S.find(H=>g.matchTags(H,x,p)):void 0,size:r})),this.renderSearchBar(T)),m&&f.createElement(h.IconWrap,{className:"k-input-loading-icon",name:"loading"}),this.props.suffix&&f.createElement(z,{...A}),L&&f.createElement(Z,{onClick:this.clearButtonClick}),!this.mobileMode&&this.renderListContainer()),this.mobileMode&&this.renderAdaptiveListContainer());return e?f.createElement(U.FloatingLabel,{label:e,editorId:T,editorValue:c||g.getItemValue(this.value[0],a),editorValid:M,editorDisabled:s,style:{width:n?n.width:void 0},children:O}):O}renderSearchBar(n){const{activedescendant:t,focusedTag:e,currentValue:o}=this.state,{disabled:s,placeholder:a,ariaDescribedBy:p,ariaLabelledBy:u,ariaLabel:r,inputAttributes:i}=this.props,l=!this.mobileMode&&(this.props.filter!==void 0?this.props.filter:this.state.text)||"",{focusedIndex:m}=this.getFocusedState(),d=this.value.length===0&&!l?a:void 0,c=o&&o.length>0?void 0:a,y=t===D.ActiveDescendant.TagsList&&e!==void 0?`tag-${this.base.guid}-${e.text.replace(/\s+/g,"-")}`:`option-${this.base.guid}-${m}`,x={accessKey:this.props.accessKey,tabIndex:this.props.tabIndex};return f.createElement(Q,{id:n,size:Math.max((d||"").length,l.length,1),placeholder:this.mobileMode&&this.opened?c:d,value:l,onChange:this.onChangeHandler,onKeyDown:this.onInputKeyDown,ref:this.searchbarRef,disabled:s,expanded:this.opened,owns:this.base.listBoxId,role:"combobox",activedescendant:y,ariaDescribedBy:`tagslist-${this.base.guid}${p?" "+p:""}`,ariaLabelledBy:u,ariaRequired:this.required,ariaLabel:r,inputAttributes:i,...x})}onTagsNavigate(n,t){const e=n.keyCode,{focusedTag:o}=this.state,s=this._tags,a=this.props.dataItemKey;let p=o?s.findIndex(i=>g.matchTags(i,o,a)):-1,u;const r=p!==-1;if(e===h.Keys.left)r?p=Math.max(0,p-1):p=s.length-1,u=s[p];else if(e===h.Keys.right)p===s.length-1?u=void 0:r&&(p=Math.min(s.length-1,p+1),u=s[p]);else if(e===h.Keys.home&&!n.shiftKey)u=s[0];else if(e===h.Keys.end&&!n.shiftKey)u=s[s.length-1];else if(e===h.Keys.delete){if(r){const i=this.value;g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,t)}}else if(e===h.Keys.backspace){const i=this.value;if(r)g.removeDataItems(i,s[p].data,a),this.triggerOnChange(i,t);else if(!r&&s.length){const l=s.pop();g.removeDataItems(i,l.data,a),this.triggerOnChange(i,t)}}u!==o&&(t.data.focusedTag=u,t.data.activedescendant=D.ActiveDescendant.TagsList),this.applyState(t)}triggerOnChange(n,t){this.props.value===void 0&&(t.data.value=[...n]),this._valueItemsDuringOnChange=[],this.setItems(n,this._valueItemsDuringOnChange),t.events.push({type:"onChange"})}selectFocusedItem(n,t){const{virtual:e}=this.props,o=g.getFilteredData(this.props),{focusedIndex:s}=t||this.getFocusedState(),a=e?e.skip:0;o[s-a]!==void 0&&this.handleItemClick(s,n)}setItems(n,t){t.length=0,t.push(...n)}getFocusedState(){const{focusedIndex:n}=this.state,t=this.props.filter!==void 0?this.props.filter:this.state.text,{allowCustom:e,dataItemKey:o,virtual:s,textField:a,focusedItemIndex:p=g.itemIndexStartsWith,skipDisabledItems:u}=this.props,r=g.getFilteredData(this.props),i=s&&s.skip||0;let l;if(n!==void 0)return{focusedIndex:n,focusedItem:r[n-i],focusedType:1};const m=this.value;if(e&&t)return{focusedItem:null,focusedIndex:-1,focusedType:2};if(t)return l=p(r,t,a),{focusedItem:r[l],focusedIndex:l+i,focusedType:1};if(m.length){const d=m[m.length-1];return l=r.findIndex(c=>g.areSame(c,d,o)),r[l]!==void 0?{focusedIndex:l+i,focusedItem:r[l],focusedType:1}:{focusedType:0,focusedIndex:-1}}else if(u&&a&&!t&&i===0){const d=r.findIndex(c=>!c.disabled&&c[a]);return{focusedIndex:d,focusedItem:r[d-i],focusedType:1}}return i===0?{focusedItem:r[0],focusedIndex:0,focusedType:1}:{focusedType:0,focusedIndex:-1}}focusElement(n){this._skipFocusEvent=!0,n.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,0)}applyState(n){this.base.applyState(n),this._valueItemsDuringOnChange=null}calculateMedia(n){for(const t of n)this.setState({windowWidth:t.target.clientWidth})}updateStateOnKeyboardNavigation(n,t){this.setState({value:n}),this.triggerOnChange(n,t),this.applyState(t)}getLastSelectedOrDeselectedIndex(n,t){return this._lastSelectedOrDeslectedItemIndex===null&&(this._lastSelectedOrDeslectedItemIndex=t),this._lastSelectedOrDeslectedItemIndex!==null?this._lastSelectedOrDeslectedItemIndex+n:null}};b.displayName="MultiSelect",b.propTypes={...K.propTypes,autoClose:v.bool,value:v.arrayOf(v.any),defaultValue:v.arrayOf(v.any),dataItemKey:v.string,placeholder:v.string,tags:v.arrayOf(v.shape({text:v.string,data:v.arrayOf(v.any)})),tagRender:v.func,id:v.string,ariaLabelledBy:v.string,ariaDescribedBy:v.string,groupField:v.string,list:v.any,adaptive:v.bool,adaptiveTitle:v.string,onCancel:v.func,skipDisabledItems:v.bool,inputAttributes:v.object},b.defaultProps={...K.defaultProps,autoClose:!0,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern",skipDisabledItems:!0,prefix:void 0,suffix:void 0};let F=b;const N=h.createPropsContext(),R=h.withIdHOC(h.withPropsContext(N,F));R.displayName="KendoReactMultiSelect";exports.MultiSelect=R;exports.MultiSelectPropsContext=N;exports.MultiSelectWithoutContext=F;