@progress/kendo-react-dropdowns 9.5.0 → 10.0.0-develop.1

package/MultiSelect/MultiSelect.mjs

@@ -6,36 +6,36 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as f from "react";
-import m from "prop-types";
-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, withAdaptiveModeContext as st, kendoThemeMaps as it } from "@progress/kendo-react-common";
-import { plusIcon as ot } from "@progress/kendo-svg-icons";
-import { FloatingLabel as at } from "@progress/kendo-react-labels";
-import nt from "../common/ListContainer.mjs";
-import lt from "../common/List.mjs";
-import dt from "../common/GroupStickyHeader.mjs";
-import rt from "./TagList.mjs";
-import ht from "../common/SearchBar.mjs";
-import F from "../common/DropDownBase.mjs";
+import g from "prop-types";
+import { Keys as u, classNames as I, IconWrap as R, WatermarkOverlay as X, canUseDOM as L, validatePackage as Z, createPropsContext as tt, withIdHOC as et, withPropsContext as st, withAdaptiveModeContext as it, kendoThemeMaps as ot } from "@progress/kendo-react-common";
+import { plusIcon as at } from "@progress/kendo-svg-icons";
+import { FloatingLabel as nt } from "@progress/kendo-react-labels";
+import lt from "../common/ListContainer.mjs";
+import dt from "../common/List.mjs";
+import rt from "../common/GroupStickyHeader.mjs";
+import ht from "./TagList.mjs";
+import pt from "../common/SearchBar.mjs";
+import D from "../common/DropDownBase.mjs";
 import { ActiveDescendant as k } from "../common/settings.mjs";
-import { getFilteredData as I, areSame as M, removeDataItems as w, isPresent as E, getItemValue as O, preventDefaultNonInputs as pt, matchTags as B, itemIndexStartsWith as ct } from "../common/utils.mjs";
-import { packageMetadata as ut } from "../package-metadata.mjs";
-import ft from "../common/ClearButton.mjs";
+import { getFilteredData as b, areSame as M, removeDataItems as w, isPresent as E, getItemValue as O, preventDefaultNonInputs as ct, matchTags as z, itemIndexStartsWith as ut } from "../common/utils.mjs";
+import { packageMetadata as ft } from "../package-metadata.mjs";
+import mt from "../common/ClearButton.mjs";
 import { AdaptiveMode as gt } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as mt } from "@progress/kendo-react-layout";
-import { provideLocalizationService as vt } from "@progress/kendo-react-intl";
-import { adaptiveModeFooterCancel as z, messages as V, adaptiveModeFooterApply as A } from "../messages/index.mjs";
+import { ActionSheetContent as vt } from "@progress/kendo-react-layout";
+import { provideLocalizationService as bt } from "@progress/kendo-react-intl";
+import { adaptiveModeFooterCancel as B, messages as V, adaptiveModeFooterApply as A } from "../messages/index.mjs";
 import It from "../common/ListFilter.mjs";
 import H from "../common/withCustomComponent.mjs";
-const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $ = (D) => D.preventDefault(), q = (D) => D === 2, y = class y extends f.Component {
+const { sizeMap: T, roundedMap: yt } = ot, xt = "Please enter a valid value!", $ = (F) => F.preventDefault(), W = (F) => F === 2, y = class y extends f.Component {
   constructor(n) {
     super(n), this.state = {
       activedescendant: k.PopupList,
       currentValue: []
-    }, this._element = null, this._valueItemsDuringOnChange = null, this.base = new F(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._element = null, this._valueItemsDuringOnChange = null, this.base = new D(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.showLicenseWatermark = !1, this.focus = () => {
       this._input && this._input.focus();
     }, this.handleItemSelect = (t, e) => {
-      const { dataItemKey: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = a[t - p], r = this.value.findIndex((g) => M(g, c, o));
-      this._lastSelectedOrDeslectedItemIndex = a.findIndex((g) => M(g, c, o));
+      const { dataItemKey: o, virtual: s } = this.props, a = b(this.props), p = s ? s.skip : 0, c = a[t - p], r = this.value.findIndex((m) => M(m, c, o));
+      this._lastSelectedOrDeslectedItemIndex = a.findIndex((m) => M(m, c, o));
       let i = [];
       r !== -1 ? (i = this.value, i.splice(r, 1)) : i = [...this.value, c], (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(c, e);
     }, this.onTagDelete = (t, e) => {
@@ -44,7 +44,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       const s = this.value;
       w(s, t, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
     }, this.itemFocus = (t, e) => {
-      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[t - p];
+      const { allowCustom: o, virtual: s } = this.props, a = b(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[t - p];
       l && r !== t ? this.state.focusedIndex !== t && (e.data.focusedIndex = t, e.data.activedescendant = k.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;
@@ -60,10 +60,10 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
       E(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 = I(this.props), a = t.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();
+      const { textField: e, groupField: o } = this.props, s = b(this.props), a = t.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 = t, !p && this.value.length > 0 && (a === u.left || a === u.right || a === u.home || a === u.end || a === u.delete || a === u.backspace) && !t.shiftKey)
         return this.onTagsNavigate(t, l);
-      const g = () => {
+      const m = () => {
         t.preventDefault(), this.base.togglePopup(l), this.applyState(l);
       };
       if (this.opened)
@@ -89,7 +89,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           const h = this.getLastSelectedOrDeselectedIndex(0, i);
           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 (t.altKey && a === u.up)
-          g();
+          m();
         else if (a === u.up || a === u.down) {
           if (o !== "" && e)
             if (!this.props.skipDisabledItems && c)
@@ -136,14 +136,14 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           }
           this.applyState(l), t.preventDefault();
         } else
-          a === u.enter ? (t.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(t) : r && r.disabled ? g() : this.selectFocusedItem(t)) : a === u.esc && g();
+          a === u.enter ? (t.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(t) : r && r.disabled ? m() : this.selectFocusedItem(t)) : a === u.esc && m();
       else
-        t.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(t);
+        t.altKey && a === u.down ? m() : a === u.esc && this.clearButtonClick(t);
     }, this.listContainerContent = () => {
-      const { header: t, footer: e, 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(
+      const { header: t, footer: e, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: p, list: c } = this.props, r = b(this.props), i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: l } = this.getFocusedState(), m = o && i && /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: b("k-list", {
+          className: I("k-list", {
             [`k-list-${T[s] || s}`]: s
           }),
           key: "customitem",
@@ -153,32 +153,32 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         /* @__PURE__ */ f.createElement(
           "div",
           {
-            className: b("k-list-item k-custom-item", { "k-focus": q(l) }),
+            className: I("k-list-item k-custom-item", { "k-focus": W(l) }),
             style: { fontStyle: "italic" }
           },
           i,
-          /* @__PURE__ */ f.createElement(R, { name: "plus", icon: ot, style: { position: "absolute", right: "0.5em" } })
+          /* @__PURE__ */ f.createElement(R, { name: "plus", icon: at, style: { position: "absolute", right: "0.5em" } })
         )
       );
       let { group: d } = this.state;
-      return d === void 0 && p !== void 0 && (d = O(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, t && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, t), g, /* @__PURE__ */ f.createElement(
+      return d === void 0 && p !== void 0 && (d = O(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, t && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, t), m, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: b("k-list", {
+          className: I("k-list", {
             [`k-list-${this.mobileMode ? "lg" : T[s] || s}`]: s,
             "k-virtual-list": this.base.vs.enabled
           })
         },
-        !c && d && r.length !== 0 && /* @__PURE__ */ f.createElement(dt, { group: d, groupMode: "modern", render: a }),
+        !c && d && r.length !== 0 && /* @__PURE__ */ f.createElement(rt, { group: d, groupMode: "modern", render: a }),
         this.renderList()
-      ), e && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, e));
+      ), this.showLicenseWatermark && /* @__PURE__ */ f.createElement(X, null), e && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, e));
     }, this.renderListContainer = () => {
-      const t = this.base, { dir: e } = this.props, o = I(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : t.popupWidth, p = {
+      const t = this.base, { dir: e } = this.props, o = b(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: b(s.popupClass, "k-list-container", "k-multiselect-popup"),
+          popupClass: I(s.popupClass, "k-list-container", "k-multiselect-popup"),
           anchor: s.anchor || this.element,
           show: this.opened,
           onOpen: this.onPopupOpened,
@@ -186,10 +186,10 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         },
         itemsCount: [o.length, this.value.length]
       };
-      return /* @__PURE__ */ f.createElement(nt, { ...p }, this.listContainerContent());
+      return /* @__PURE__ */ f.createElement(lt, { ...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 = vt(this);
+      this.localization = bt(this);
       const p = e ? /* @__PURE__ */ f.createElement(
         It,
         {
@@ -209,8 +209,8 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         mobileFilter: p,
         footer: {
           cancelText: this.localization.toLanguageString(
-            z,
-            V[z]
+            B,
+            V[B]
           ),
           onCancel: this.onCancel,
           applyText: this.localization.toLanguageString(
@@ -220,7 +220,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           onApply: this.closePopup
         }
       };
-      return /* @__PURE__ */ f.createElement(gt, { ...c }, /* @__PURE__ */ f.createElement(mt, { overflowHidden: !0 }, /* @__PURE__ */ f.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ f.createElement(gt, { ...c }, /* @__PURE__ */ f.createElement(vt, { overflowHidden: !0 }, /* @__PURE__ */ 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" });
@@ -239,9 +239,9 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "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(), l = this.base.getPopupSettings(), g = `translateY(${r.translate}px)`;
+      } = this.props, c = b(this.props), r = this.base.vs, { focusedIndex: i } = this.getFocusedState(), l = this.base.getPopupSettings(), m = `translateY(${r.translate}px)`;
       return /* @__PURE__ */ f.createElement(
-        lt,
+        dt,
         {
           id: this.base.listBoxId,
           show: this.opened,
@@ -258,7 +258,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
           },
           wrapperStyle: this.mobileMode ? {} : { maxHeight: l.height },
           wrapperCssClass: "k-list-content",
-          listStyle: r.enabled ? { transform: g } : void 0,
+          listStyle: r.enabled ? { transform: m } : void 0,
           key: "listKey",
           skip: p.skip,
           onClick: this.handleItemClick,
@@ -277,7 +277,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       const { vs: e, list: o } = this.base;
       e.scrollHandler(t);
       const { groupField: s } = this.props;
-      let a = I(this.props);
+      let a = b(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);
@@ -321,9 +321,9 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       }, 0);
     }, this.setValidity = () => {
       this._input && this._input.setCustomValidity && this._input.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || yt
+        this.validity.valid ? "" : this.props.validationMessage || xt
       );
-    }, X(ut);
+    }, this.validate(n);
   }
   get _inputId() {
     return this.props.id;
@@ -332,6 +332,15 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
     if (L)
       return this.element && this.element.ownerDocument || document;
   }
+  validate(n) {
+    if (n.filterable || n.virtual) {
+      const t = [];
+      n.filterable && t.push("filterable"), n.virtual && t.push("virtualization"), this.showLicenseWatermark = !Z(ft, {
+        component: "MultiSelect",
+        features: t
+      });
+    }
+  }
   /** @hidden */
   get element() {
     return this._element;
@@ -387,13 +396,13 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
   }
   /** @hidden */
   componentDidUpdate(n, t) {
-    var g;
-    const { virtual: e, groupField: o = "" } = this.props, s = I(this.props), a = e ? e.skip : 0, p = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : t.opened, r = !c && this.opened, i = c && !this.opened, l = this.base.getPopupSettings();
-    if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), e && e.total !== p)
+    var m;
+    const { virtual: e, groupField: o = "" } = this.props, s = b(this.props), a = e ? e.skip : 0, p = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : t.opened, r = !c && this.opened, i = c && !this.opened, l = this.base.getPopupSettings();
+    if (this.validate(this.props), 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: h } = this.getFocusedState();
-      o !== "" && (h = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(d)), r && e ? this.base.scrollToVirtualItem(e, h - a) : r && !e ? (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);
+      o !== "" && (h = (m = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : m.indexOf(d)), r && e ? this.base.scrollToVirtualItem(e, h - a) : r && !e ? (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();
   }
@@ -409,14 +418,14 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
   }
   /** @hidden */
   onNavigate(n, t, e) {
-    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;
+    const { allowCustom: o } = this.props, s = b(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), r = o && a, i = W(p), l = this.base, m = l.vs;
     if (this.opened && t === u.up && i)
       this.state.focusedIndex !== void 0 && (n.data.focusedIndex = void 0);
     else {
       const d = l.navigation.navigate({
         keyCode: t,
         current: c,
-        max: (g.enabled ? g.total : s.length) - 1,
+        max: (m.enabled ? m.total : s.length) - 1,
         min: r ? -1 : 0,
         skipItems: e || void 0
       });
@@ -438,24 +447,24 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       size: r,
       rounded: i,
       fillMode: l,
-      loading: g,
+      loading: m,
       filter: d
-    } = this.props, { text: h, focused: v, focusedTag: x, currentValue: W } = this.state, C = this.base.vs, _ = this.props.id || this._inputId;
+    } = this.props, { text: h, focused: v, focusedTag: x, currentValue: q } = 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 S = this.mobileMode && this.opened ? W : this.tagsToRender;
+    const S = this.mobileMode && this.opened ? q : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
     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: b("k-multiselect k-input", t, {
+        className: I("k-multiselect k-input", t, {
           [`k-input-${T[r] || r}`]: r,
-          [`k-rounded-${bt[i] || i}`]: i,
+          [`k-rounded-${yt[i] || i}`]: i,
           [`k-input-${l}`]: l,
           "k-focus": v && !s,
           "k-invalid": !K,
           "k-disabled": s,
-          "k-loading": g,
+          "k-loading": m,
           "k-required": this.required
         }),
         style: e ? { ...n, width: void 0 } : n,
@@ -463,35 +472,35 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onClick: this.handleWrapperClick,
-        onMouseDown: pt
+        onMouseDown: ct
       },
       this.props.prefix && /* @__PURE__ */ f.createElement(U, { ...j }),
-      /* @__PURE__ */ f.createElement("div", { className: b("k-input-values") }, /* @__PURE__ */ f.createElement(
+      /* @__PURE__ */ f.createElement("div", { className: I("k-input-values") }, /* @__PURE__ */ f.createElement(
         "div",
         {
-          className: b("k-chip-list", { [`k-chip-list-${T[r] || r}`]: r }),
+          className: I("k-chip-list", { [`k-chip-list-${T[r] || r}`]: r }),
           role: "listbox",
           id: "tagslist-" + this.base.guid
         },
         S && S.length > 0 && /* @__PURE__ */ f.createElement(
-          rt,
+          ht,
           {
             tagRender: this.props.tagRender,
             onTagDelete: this.onTagDelete,
             data: S,
             guid: this.base.guid,
-            focused: x ? S.find((Q) => B(Q, x, p)) : void 0,
+            focused: x ? S.find((Q) => z(Q, x, p)) : void 0,
             size: r
           }
         )
       ), this.renderSearchBar(_)),
-      g && /* @__PURE__ */ f.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
+      m && /* @__PURE__ */ f.createElement(R, { className: "k-input-loading-icon", name: "loading" }),
       this.props.suffix && /* @__PURE__ */ f.createElement(Y, { ...J }),
-      G && /* @__PURE__ */ f.createElement(ft, { onClick: this.clearButtonClick }),
+      G && /* @__PURE__ */ f.createElement(mt, { onClick: this.clearButtonClick }),
       !this.mobileMode && this.renderListContainer()
     ), this.mobileMode && this.renderAdaptiveListContainer());
     return e ? /* @__PURE__ */ f.createElement(
-      at,
+      nt,
       {
         label: e,
         editorId: _,
@@ -504,12 +513,12 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
     ) : N;
   }
   renderSearchBar(n) {
-    const { activedescendant: t, focusedTag: e, 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 = t === k.TagsList && e !== void 0 ? `tag-${this.base.guid}-${e.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${g}`, x = {
+    const { activedescendant: t, focusedTag: e, 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: m } = this.getFocusedState(), d = this.value.length === 0 && !l ? a : void 0, h = o && o.length > 0 ? void 0 : a, v = t === k.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 /* @__PURE__ */ f.createElement(
-      ht,
+      pt,
       {
         id: n,
         size: Math.max((d || "").length, l.length, 1),
@@ -534,7 +543,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
   }
   onTagsNavigate(n, t) {
     const e = n.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
-    let p = o ? s.findIndex((i) => B(i, o, a)) : -1, c;
+    let p = o ? s.findIndex((i) => z(i, o, a)) : -1, c;
     const r = p !== -1;
     if (e === u.left)
       r ? p = Math.max(0, p - 1) : p = s.length - 1, c = s[p];
@@ -564,7 +573,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
     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 = I(this.props), { focusedIndex: s } = t || this.getFocusedState(), a = e ? e.skip : 0;
+    const { virtual: e } = this.props, o = b(this.props), { focusedIndex: s } = t || this.getFocusedState(), a = e ? e.skip : 0;
     o[s - a] !== void 0 && this.handleItemClick(s, n);
   }
   setItems(n, t) {
@@ -576,9 +585,9 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
       dataItemKey: o,
       virtual: s,
       textField: a,
-      focusedItemIndex: p = ct,
+      focusedItemIndex: p = ut,
       skipDisabledItems: c
-    } = this.props, r = I(this.props), i = s && s.skip || 0;
+    } = this.props, r = b(this.props), i = s && s.skip || 0;
     let l;
     if (n !== void 0)
       return {
@@ -587,7 +596,7 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         focusedType: 1
         /* ListItem */
       };
-    const g = this.value;
+    const m = this.value;
     if (e && t)
       return {
         focusedItem: null,
@@ -602,8 +611,8 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
         focusedType: 1
         /* ListItem */
       };
-    if (g.length) {
-      const d = g[g.length - 1];
+    if (m.length) {
+      const d = m[m.length - 1];
       return l = r.findIndex((h) => M(h, d, o)), r[l] !== void 0 ? {
         focusedIndex: l + i,
         focusedItem: r[l],
@@ -656,31 +665,31 @@ const { sizeMap: T, roundedMap: bt } = it, yt = "Please enter a valid value!", $
   }
 };
 y.displayName = "MultiSelect", y.propTypes = {
-  ...F.propTypes,
-  autoClose: m.bool,
-  value: m.arrayOf(m.any),
-  defaultValue: m.arrayOf(m.any),
-  dataItemKey: m.string,
-  placeholder: m.string,
-  tags: m.arrayOf(
-    m.shape({
-      text: m.string,
-      data: m.arrayOf(m.any)
+  ...D.propTypes,
+  autoClose: g.bool,
+  value: g.arrayOf(g.any),
+  defaultValue: g.arrayOf(g.any),
+  dataItemKey: g.string,
+  placeholder: g.string,
+  tags: g.arrayOf(
+    g.shape({
+      text: g.string,
+      data: g.arrayOf(g.any)
     })
   ),
-  tagRender: m.func,
-  id: m.string,
-  ariaLabelledBy: m.string,
-  ariaDescribedBy: m.string,
-  groupField: m.string,
-  list: m.any,
-  adaptive: m.bool,
-  adaptiveTitle: m.string,
-  onCancel: m.func,
-  skipDisabledItems: m.bool,
-  inputAttributes: m.object
+  tagRender: g.func,
+  id: g.string,
+  ariaLabelledBy: g.string,
+  ariaDescribedBy: g.string,
+  groupField: g.string,
+  list: g.any,
+  adaptive: g.bool,
+  adaptiveTitle: g.string,
+  onCancel: g.func,
+  skipDisabledItems: g.bool,
+  inputAttributes: g.object
 }, y.defaultProps = {
-  ...F.defaultProps,
+  ...D.defaultProps,
   autoClose: !0,
   required: !1,
   size: "medium",
@@ -692,15 +701,15 @@ y.displayName = "MultiSelect", y.propTypes = {
   suffix: void 0
 };
 let P = y;
-const xt = Z(), St = tt(
-  et(
-    xt,
-    st(P)
+const St = tt(), Ct = et(
+  st(
+    St,
+    it(P)
   )
 );
-St.displayName = "KendoReactMultiSelect";
+Ct.displayName = "KendoReactMultiSelect";
 export {
-  St as MultiSelect,
-  xt as MultiSelectPropsContext,
+  Ct as MultiSelect,
+  St as MultiSelectPropsContext,
   P as MultiSelectWithoutContext
 };

package/MultiSelectTree/MultiSelectTree.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const et=require("react"),a=require("prop-types"),o=require("@progress/kendo-react-common"),tt=require("@progress/kendo-react-popup"),nt=require("@progress/kendo-react-intl"),Ie=require("@progress/kendo-react-treeview"),at=require("../package-metadata.js"),ee=require("../common/utils.js"),rt=require("../DropDownTree/useDropdownWidth.js"),ot=require("../DropDownTree/ListNoData.js"),v=require("../messages/index.js"),it=require("@progress/kendo-react-labels"),st=require("../MultiSelect/TagList.js"),lt=require("../common/ClearButton.js"),Te=require("../common/ListFilter.js"),ct=require("../common/AdaptiveMode.js"),ut=require("@progress/kendo-react-layout");function dt(h){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const n in h)if(n!=="default"){const I=Object.getOwnPropertyDescriptor(h,n);Object.defineProperty(b,n,I.get?I:{enumerable:!0,get:()=>h[n]})}}return b.default=h,Object.freeze(b)}const t=dt(et),pt="Please select a value from the list!",{sizeMap:Ke,roundedMap:ft}=o.kendoThemeMaps,gt=h=>h.split("_").map(b=>parseInt(b,10)),mt=(h,b)=>{const{validationMessage:n,valid:I,required:T}=h;return{customError:n!==void 0,valid:!!(I!==void 0?I:!T||b),valueMissing:!b}},E={checkField:"checkField",checkIndeterminateField:"checkIndeterminateField",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},size:"medium",rounded:"medium",fillMode:"solid",required:!1,validityStyles:!0},Me=o.createPropsContext(),ce=t.forwardRef((h,b)=>{const n=o.usePropsContext(Me,h);o.validatePackage(at.packageMetadata);const I=o.useId(),T=n.id||I,{data:B=[],dataItemKey:K,style:L={},placeholder:ue,label:A,name:Re,validationMessage:W,valid:De,tags:de,value:g,opened:M,disabled:x,popupSettings:N=E.popupSettings,checkField:pe=E.checkField,checkIndeterminateField:fe=E.checkIndeterminateField,subItemsField:ge=E.subItemsField,size:y=E.size,rounded:V=E.rounded,fillMode:z=E.fillMode,required:me=E.required,validityStyles:qe=E.validityStyles,onOpen:te=o.noop,onClose:j=o.noop}=n,_=o.getTabIndex(n.tabIndex,x),s=t.useRef(null),F=t.useRef(null),R=t.useRef(null),ne=t.useRef(null),H=t.useRef(null),S=t.useRef(null),$=t.useRef(!1),G=t.useRef([]),U=t.useRef(null),[P,Ne]=t.useState(),[Pe,ve]=t.useState(!1),[d,ae]=t.useState(!1),[re,Oe]=t.useState(),[Le,Ae]=t.useState([]),[he,Ve]=t.useState(""),l=M!==void 0?M:Pe,oe=!!(Array.isArray(g)&&g.length),ie=mt({validationMessage:W,valid:De,required:me},oe),D=o.useRtl(F,n.dir),Be={width:rt.useDropdownWidth(F,E,N,L),...D!==void 0?{direction:D}:{}},We=t.useCallback(()=>F.current&&F.current.focus(),[]),ye=o.useAdaptiveModeContext(),O=!!(re&&ye&&re<=ye.medium&&n.adaptive);G.current=de===void 0?(g||[]).map(e=>({text:ee.getItemValue(e,n.textField),data:[e]})):[...de],t.useImperativeHandle(s,()=>({props:n,element:F.current,focus:We})),t.useImperativeHandle(b,()=>s.current);const ze=t.useCallback(()=>{H.current&&H.current.setCustomValidity&&H.current.setCustomValidity(ie.valid?"":W===void 0?pt:W)},[W,ie]);t.useEffect(ze),t.useEffect(()=>{const e=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Ye.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{e&&e.disconnect()}},[]),t.useEffect(()=>{U.current&&l&&U.current.setPosition(U.current.element)},[g,l]);const w=t.useCallback((e,r,i)=>{if(n.onChange){const k={items:r,operation:i,...e};n.onChange.call(void 0,k)}},[n.onChange]),J=t.useCallback(e=>{if(ee.areSame(e.item,g,K)||!s.current)return;const{item:r,nativeEvent:i,syntheticEvent:k}=e,q={syntheticEvent:k,nativeEvent:i,target:s.current};w(q,[r],"toggle")},[g,K,w]),Q=t.useCallback(e=>{if(!l){if(te){const r={...e};te.call(void 0,r)}M===void 0&&(ve(!0),Ae(g||[]),O&&setTimeout(()=>{var r;u((r=ne.current)==null?void 0:r.element)},300))}},[l,M,te,O,ne]),m=t.useCallback(e=>{if(l){if(j){const r={...e};j.call(void 0,r)}M===void 0&&ve(!1)}},[l,M,j]),C=t.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),u=t.useCallback(e=>{e&&C(()=>e.focus())},[C]),je=t.useCallback(()=>{var e;!d&&l?m({target:s.current}):n.filterable?u((e=R.current)==null?void 0:e.element):u(S.current&&S.current.element)},[d,l,u,m,n.filterable]),_e=t.useCallback(()=>{d&&u(F.current)},[d,u]),He=t.useCallback(e=>{if(!d&&!$.current&&(ae(!0),n.onFocus&&s.current)){const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};n.onFocus.call(void 0,r)}},[d,n.onFocus]),$e=t.useCallback(e=>{if(d&&!$.current&&s.current){ae(!1);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};if(n.onBlur){const i={...r};n.onBlur.call(void 0,i)}O||m(r)}},[d,n.onBlur,l,M,j]),Ge=t.useCallback(()=>{d&&C(o.noop)},[d,C]),Ue=t.useCallback(e=>{if(!e.isDefaultPrevented()&&s.current){ae(!0);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};l||Q(r)}},[l,Q]),Je=t.useCallback(e=>{var Z,we;const{keyCode:r,altKey:i}=e,k=S.current&&S.current.element;if(!s.current||e.isDefaultPrevented()&&((Z=R.current)==null?void 0:Z.element)===e.target)return;const q={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};if(g&&g.length>0&&(r===o.Keys.left||r===o.Keys.right||r===o.Keys.home||r===o.Keys.end||r===o.Keys.delete)){const c=G.current;let p=P?c.findIndex(Ze=>ee.matchTags(Ze,P,K)):-1,f;const le=p!==-1;r===o.Keys.left?(le?p=Math.max(0,p-1):p=c.length-1,f=c[p]):r===o.Keys.right?p===c.length-1?f=void 0:le&&(p=Math.min(c.length-1,p+1),f=c[p]):r===o.Keys.home?f=c[0]:r===o.Keys.end?f=c[c.length-1]:r===o.Keys.delete&&le&&w(q,c[p].data,"delete"),f!==P&&Ne(f)}if(l)if(r===o.Keys.esc||i&&r===o.Keys.up)e.preventDefault(),m(q);else if(k&&k.querySelector(".k-focus")&&(r===o.Keys.up||r===o.Keys.down||r===o.Keys.left||r===o.Keys.right||r===o.Keys.home||r===o.Keys.end)){if(r===o.Keys.up&&((we=R.current)!=null&&we.element)){const c=Array.from(k.querySelectorAll(".k-treeview-item")),p=[...c].reverse().find(f=>!!(f&&f.querySelector(".k-focus")));if(p&&c.indexOf(p)===0)return C(()=>{var f;u((f=R.current)==null?void 0:f.element)})}C(o.noop)}else r===o.Keys.down&&C(()=>{var c;u(((c=R.current)==null?void 0:c.element)||k)});else i&&r===o.Keys.down&&(e.preventDefault(),Q(q))},[l,m,u,C,Q,P,K,g,w]),be=t.useCallback(e=>{const{keyCode:r,altKey:i}=e;i||r!==o.Keys.up&&r!==o.Keys.down||(e.preventDefault(),C(r===o.Keys.up?()=>{u(F.current)}:()=>{u(S.current&&S.current.element)}))},[u,C]),se=t.useCallback(e=>{if(!s.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};w(r,[],"clear"),m(r),e.preventDefault()},[w,m]),Qe=t.useCallback((e,r)=>{var i;m({target:s.current}),d||u((i=R.current)==null?void 0:i.element),w({syntheticEvent:r,nativeEvent:r.nativeEvent,target:s.current},e,"delete")},[w,m,u,d]),Ce=t.useCallback(e=>{if(n.onExpandChange&&s.current){const{item:r,itemHierarchicalIndex:i,nativeEvent:k,syntheticEvent:q}=e,Z={level:gt(i),item:r,nativeEvent:k,syntheticEvent:q,target:s.current};n.onExpandChange.call(void 0,Z)}},[n.onExpandChange]),ke=t.useCallback(e=>{if(n.onFilterChange&&s.current){const i={filter:{field:n.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:s.current};n.onFilterChange.call(void 0,i),n.filter===void 0&&Ve(e.target.value)}},[n.onFilterChange,n.filter,n.textField]),Ee=t.useCallback(e=>{if(!s.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};n.onCancel&&n.onCancel.call(void 0,r),m(r),e.preventDefault()},[n.onCancel,m]),Xe=()=>{const e=n.filterable?t.createElement(Te,{value:n.filter===void 0?he:n.filter,ref:ne,onChange:ke,onKeyDown:be,size:y,rounded:V,fillMode:z}):null,r={title:n.adaptiveTitle,expand:l,onClose:i=>n.onCancel?Ee(i):se(i),windowWidth:re,mobileFilter:e,footer:{cancelText:X.toLanguageString(v.adaptiveModeFooterCancel,v.messages[v.adaptiveModeFooterCancel]),onCancel:i=>n.onCancel?Ee(i):se(i),applyText:X.toLanguageString(v.adaptiveModeFooterApply,v.messages[v.adaptiveModeFooterApply]),onApply:i=>m(i)}};return t.createElement(ct.AdaptiveMode,{...r},t.createElement(ut.ActionSheetContent,{overflowHidden:!0},t.createElement("div",{className:"k-list-container"},t.createElement("div",{className:"k-list k-list-lg"},B.length>0?t.createElement(Ie.TreeView,{ref:S,tabIndex:_,data:B,focusIdField:K,textField:n.textField,checkField:pe,checkIndeterminateField:fe,expandField:n.expandField,childrenField:ge,expandIcons:!0,onItemClick:J,onCheckChange:J,onExpandChange:Ce,checkboxes:!0,size:y,item:n.item,dir:D}):t.createElement(Fe,null,X.toLanguageString(v.nodata,v.messages[v.nodata]))))))},Ye=t.useCallback(e=>{for(const r of e)Oe(r.target.clientWidth)},[]),Fe=n.listNoData||ot.ListNoData,X=nt.useLocalization(),xe=!qe||ie.valid,Y=O&&l?Le:G.current,Se=t.createElement(t.Fragment,null,t.createElement("span",{className:o.classNames("k-multiselecttree k-input",n.className,{[`k-input-${Ke[y]||y}`]:y,[`k-rounded-${ft[V]||V}`]:V,[`k-input-${z}`]:z,"k-focus":d&&!x,"k-invalid":!xe,"k-disabled":x,"k-loading":n.loading,"k-required":me}),tabIndex:_,accessKey:n.accessKey,id:T,style:A?{...L,width:void 0}:L,dir:D,ref:F,onKeyDown:x?void 0:Je,onMouseDown:Ge,onFocus:He,onBlur:$e,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":x,"aria-label":A,"aria-labelledby":n.ariaLabelledBy,"aria-describedby":n.ariaDescribedBy?n.ariaDescribedBy:"tagslist-"+T,"aria-required":n.required,onClick:x?void 0:Ue},t.createElement("div",{id:"tagslist-"+T,className:o.classNames("k-input-values k-chip-list",{[`k-chip-list-${Ke[y]||y}`]:y})},Y.length>0&&t.createElement(st,{tag:n.tag,onTagDelete:Qe,data:Y,guid:T,focused:P?G.current.find(e=>ee.matchTags(e,P,K)):void 0,size:y})),t.createElement("span",{className:"k-input-inner"},Y.length===0&&t.createElement("span",{className:"k-input-value-text"},ue)),n.loading&&t.createElement(o.IconWrap,{className:"k-input-loading-icon",name:"loading"}),oe&&!x&&Y.length>0&&t.createElement(lt,{onClick:se}),t.createElement("select",{name:Re,ref:H,tabIndex:-1,"aria-hidden":!0,title:A,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},t.createElement("option",{value:n.valueMap?n.valueMap.call(void 0,g):g})),!O&&t.createElement(tt.Popup,{...N,popupClass:o.classNames(N.popupClass,"k-multiselecttree-popup"),className:o.classNames(N.className,{"k-rtl":D==="rtl"}),style:Be,anchor:N.anchor||F.current,show:l,onOpen:je,onClose:_e,ref:U},n.filterable&&t.createElement(Te,{value:n.filter===void 0?he:n.filter,ref:R,onChange:ke,onKeyDown:be,tabIndex:_,size:y,rounded:V,fillMode:z,renderListFilterWrapper:!0,renderPrefixSeparator:!0}),B.length>0?t.createElement(Ie.TreeView,{style:{height:N.height},ref:S,tabIndex:_,data:B,focusIdField:K,textField:n.textField,checkField:pe,checkIndeterminateField:fe,expandField:n.expandField,childrenField:ge,expandIcons:!0,onItemClick:J,onCheckChange:J,onExpandChange:Ce,checkboxes:!0,size:y,item:n.item,dir:D}):t.createElement(Fe,null,X.toLanguageString(v.nodata,v.messages[v.nodata])))),O&&Xe());return A?t.createElement(it.FloatingLabel,{label:A,editorValue:oe,editorPlaceholder:ue,editorValid:xe,editorDisabled:x,editorId:T,style:{width:L?L.width:void 0},children:Se,dir:D}):Se}),vt={opened:a.bool,disabled:a.bool,dir:a.string,tabIndex:a.number,accessKey:a.string,data:a.array,value:a.any,valueMap:a.func,placeholder:a.string,dataItemKey:a.string.isRequired,textField:a.string.isRequired,checkField:a.string,checkIndeterminateField:a.string,expandField:a.string,subItemsField:a.string,className:a.string,style:a.object,label:a.string,validationMessage:a.string,validityStyles:a.bool,valid:a.bool,required:a.bool,name:a.string,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,filterable:a.bool,filter:a.string,loading:a.bool,tags:a.arrayOf(a.shape({text:a.string,data:a.arrayOf(a.any)})),popupSettings:a.shape({animate:a.oneOfType([a.bool,a.shape({openDuration:a.number,closeDuration:a.number})]),popupClass:a.string,className:a.string,appendTo:a.any,width:a.oneOfType([a.string,a.number]),height:a.oneOfType([a.string,a.number])}),onOpen:a.func,onClose:a.func,onFocus:a.func,onBlur:a.func,onChange:a.func,onFilterChange:a.func,onExpandChange:a.func,onCancel:a.func,item:a.func,listNoData:a.func,adaptiveTitle:a.string,adaptive:a.bool};ce.displayName="KendoReactMultiSelectTree";ce.propTypes=vt;exports.MultiSelectTree=ce;exports.MultiSelectTreePropsContext=Me;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const tt=require("react"),a=require("prop-types"),o=require("@progress/kendo-react-common"),nt=require("@progress/kendo-react-popup"),at=require("@progress/kendo-react-intl"),Ie=require("@progress/kendo-react-treeview"),rt=require("../package-metadata.js"),ee=require("../common/utils.js"),ot=require("../DropDownTree/useDropdownWidth.js"),it=require("../DropDownTree/ListNoData.js"),v=require("../messages/index.js"),st=require("@progress/kendo-react-labels"),lt=require("../MultiSelect/TagList.js"),ct=require("../common/ClearButton.js"),Me=require("../common/ListFilter.js"),ut=require("../common/AdaptiveMode.js"),dt=require("@progress/kendo-react-layout");function pt(h){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const n in h)if(n!=="default"){const T=Object.getOwnPropertyDescriptor(h,n);Object.defineProperty(b,n,T.get?T:{enumerable:!0,get:()=>h[n]})}}return b.default=h,Object.freeze(b)}const t=pt(tt),ft="Please select a value from the list!",{sizeMap:Ke,roundedMap:gt}=o.kendoThemeMaps,mt=h=>h.split("_").map(b=>parseInt(b,10)),vt=(h,b)=>{const{validationMessage:n,valid:T,required:te}=h;return{customError:n!==void 0,valid:!!(T!==void 0?T:!te||b),valueMissing:!b}},E={checkField:"checkField",checkIndeterminateField:"checkIndeterminateField",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},size:"medium",rounded:"medium",fillMode:"solid",required:!1,validityStyles:!0},Re=o.createPropsContext(),ue=t.forwardRef((h,b)=>{const n=o.usePropsContext(Re,h),T=!o.validatePackage(rt.packageMetadata,{component:"MultiSelectTree"}),te=o.useId(),P=n.id||te,{data:W=[],dataItemKey:I,style:L={},placeholder:de,label:A,name:De,validationMessage:B,valid:qe,tags:pe,value:g,opened:M,disabled:x,popupSettings:q=E.popupSettings,checkField:fe=E.checkField,checkIndeterminateField:ge=E.checkIndeterminateField,subItemsField:me=E.subItemsField,size:y=E.size,rounded:V=E.rounded,fillMode:z=E.fillMode,required:ve=E.required,validityStyles:Ne=E.validityStyles,onOpen:ne=o.noop,onClose:j=o.noop}=n,_=o.getTabIndex(n.tabIndex,x),s=t.useRef(null),F=t.useRef(null),K=t.useRef(null),ae=t.useRef(null),H=t.useRef(null),S=t.useRef(null),$=t.useRef(!1),G=t.useRef([]),U=t.useRef(null),[N,Oe]=t.useState(),[Pe,he]=t.useState(!1),[d,re]=t.useState(!1),[oe,Le]=t.useState(),[Ae,Ve]=t.useState([]),[ye,We]=t.useState(""),l=M!==void 0?M:Pe,ie=!!(Array.isArray(g)&&g.length),se=vt({validationMessage:B,valid:qe,required:ve},ie),R=o.useRtl(F,n.dir),Be={width:ot.useDropdownWidth(F,E,q,L),...R!==void 0?{direction:R}:{}},ze=t.useCallback(()=>F.current&&F.current.focus(),[]),be=o.useAdaptiveModeContext(),O=!!(oe&&be&&oe<=be.medium&&n.adaptive);G.current=pe===void 0?(g||[]).map(e=>({text:ee.getItemValue(e,n.textField),data:[e]})):[...pe],t.useImperativeHandle(s,()=>({props:n,element:F.current,focus:ze})),t.useImperativeHandle(b,()=>s.current);const je=t.useCallback(()=>{H.current&&H.current.setCustomValidity&&H.current.setCustomValidity(se.valid?"":B===void 0?ft:B)},[B,se]);t.useEffect(je),t.useEffect(()=>{const e=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Ze.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{e&&e.disconnect()}},[]),t.useEffect(()=>{U.current&&l&&U.current.setPosition(U.current.element)},[g,l]);const w=t.useCallback((e,r,i)=>{if(n.onChange){const k={items:r,operation:i,...e};n.onChange.call(void 0,k)}},[n.onChange]),J=t.useCallback(e=>{if(ee.areSame(e.item,g,I)||!s.current)return;const{item:r,nativeEvent:i,syntheticEvent:k}=e,D={syntheticEvent:k,nativeEvent:i,target:s.current};w(D,[r],"toggle")},[g,I,w]),Q=t.useCallback(e=>{if(!l){if(ne){const r={...e};ne.call(void 0,r)}M===void 0&&(he(!0),Ve(g||[]),O&&setTimeout(()=>{var r;u((r=ae.current)==null?void 0:r.element)},300))}},[l,M,ne,O,ae]),m=t.useCallback(e=>{if(l){if(j){const r={...e};j.call(void 0,r)}M===void 0&&he(!1)}},[l,M,j]),C=t.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),u=t.useCallback(e=>{e&&C(()=>e.focus())},[C]),_e=t.useCallback(()=>{var e;!d&&l?m({target:s.current}):n.filterable?u((e=K.current)==null?void 0:e.element):u(S.current&&S.current.element)},[d,l,u,m,n.filterable]),He=t.useCallback(()=>{d&&u(F.current)},[d,u]),$e=t.useCallback(e=>{if(!d&&!$.current&&(re(!0),n.onFocus&&s.current)){const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};n.onFocus.call(void 0,r)}},[d,n.onFocus]),Ge=t.useCallback(e=>{if(d&&!$.current&&s.current){re(!1);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};if(n.onBlur){const i={...r};n.onBlur.call(void 0,i)}O||m(r)}},[d,n.onBlur,l,M,j]),Ue=t.useCallback(()=>{d&&C(o.noop)},[d,C]),Je=t.useCallback(e=>{if(!e.isDefaultPrevented()&&s.current){re(!0);const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};l||Q(r)}},[l,Q]),Qe=t.useCallback(e=>{var Z,Te;const{keyCode:r,altKey:i}=e,k=S.current&&S.current.element;if(!s.current||e.isDefaultPrevented()&&((Z=K.current)==null?void 0:Z.element)===e.target)return;const D={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};if(g&&g.length>0&&(r===o.Keys.left||r===o.Keys.right||r===o.Keys.home||r===o.Keys.end||r===o.Keys.delete)){const c=G.current;let p=N?c.findIndex(et=>ee.matchTags(et,N,I)):-1,f;const ce=p!==-1;r===o.Keys.left?(ce?p=Math.max(0,p-1):p=c.length-1,f=c[p]):r===o.Keys.right?p===c.length-1?f=void 0:ce&&(p=Math.min(c.length-1,p+1),f=c[p]):r===o.Keys.home?f=c[0]:r===o.Keys.end?f=c[c.length-1]:r===o.Keys.delete&&ce&&w(D,c[p].data,"delete"),f!==N&&Oe(f)}if(l)if(r===o.Keys.esc||i&&r===o.Keys.up)e.preventDefault(),m(D);else if(k&&k.querySelector(".k-focus")&&(r===o.Keys.up||r===o.Keys.down||r===o.Keys.left||r===o.Keys.right||r===o.Keys.home||r===o.Keys.end)){if(r===o.Keys.up&&((Te=K.current)!=null&&Te.element)){const c=Array.from(k.querySelectorAll(".k-treeview-item")),p=[...c].reverse().find(f=>!!(f&&f.querySelector(".k-focus")));if(p&&c.indexOf(p)===0)return C(()=>{var f;u((f=K.current)==null?void 0:f.element)})}C(o.noop)}else r===o.Keys.down&&C(()=>{var c;u(((c=K.current)==null?void 0:c.element)||k)});else i&&r===o.Keys.down&&(e.preventDefault(),Q(D))},[l,m,u,C,Q,N,I,g,w]),Ce=t.useCallback(e=>{const{keyCode:r,altKey:i}=e;i||r!==o.Keys.up&&r!==o.Keys.down||(e.preventDefault(),C(r===o.Keys.up?()=>{u(F.current)}:()=>{u(S.current&&S.current.element)}))},[u,C]),le=t.useCallback(e=>{if(!s.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};w(r,[],"clear"),m(r),e.preventDefault()},[w,m]),Xe=t.useCallback((e,r)=>{var i;m({target:s.current}),d||u((i=K.current)==null?void 0:i.element),w({syntheticEvent:r,nativeEvent:r.nativeEvent,target:s.current},e,"delete")},[w,m,u,d]),ke=t.useCallback(e=>{if(n.onExpandChange&&s.current){const{item:r,itemHierarchicalIndex:i,nativeEvent:k,syntheticEvent:D}=e,Z={level:mt(i),item:r,nativeEvent:k,syntheticEvent:D,target:s.current};n.onExpandChange.call(void 0,Z)}},[n.onExpandChange]),Ee=t.useCallback(e=>{if(n.onFilterChange&&s.current){const i={filter:{field:n.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:s.current};n.onFilterChange.call(void 0,i),n.filter===void 0&&We(e.target.value)}},[n.onFilterChange,n.filter,n.textField]),Fe=t.useCallback(e=>{if(!s.current)return;const r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:s.current};n.onCancel&&n.onCancel.call(void 0,r),m(r),e.preventDefault()},[n.onCancel,m]),Ye=()=>{const e=n.filterable?t.createElement(Me,{value:n.filter===void 0?ye:n.filter,ref:ae,onChange:Ee,onKeyDown:Ce,size:y,rounded:V,fillMode:z}):null,r={title:n.adaptiveTitle,expand:l,onClose:i=>n.onCancel?Fe(i):le(i),windowWidth:oe,mobileFilter:e,footer:{cancelText:X.toLanguageString(v.adaptiveModeFooterCancel,v.messages[v.adaptiveModeFooterCancel]),onCancel:i=>n.onCancel?Fe(i):le(i),applyText:X.toLanguageString(v.adaptiveModeFooterApply,v.messages[v.adaptiveModeFooterApply]),onApply:i=>m(i)}};return t.createElement(ut.AdaptiveMode,{...r},t.createElement(dt.ActionSheetContent,{overflowHidden:!0},t.createElement("div",{className:"k-list-container"},t.createElement("div",{className:"k-list k-list-lg"},W.length>0?t.createElement(Ie.TreeView,{ref:S,tabIndex:_,data:W,focusIdField:I,textField:n.textField,checkField:fe,checkIndeterminateField:ge,expandField:n.expandField,childrenField:me,expandIcons:!0,onItemClick:J,onCheckChange:J,onExpandChange:ke,checkboxes:!0,size:y,item:n.item,dir:R}):t.createElement(xe,null,X.toLanguageString(v.nodata,v.messages[v.nodata]))))))},Ze=t.useCallback(e=>{for(const r of e)Le(r.target.clientWidth)},[]),xe=n.listNoData||it.ListNoData,X=at.useLocalization(),Se=!Ne||se.valid,Y=O&&l?Ae:G.current,we=t.createElement(t.Fragment,null,t.createElement("span",{className:o.classNames("k-multiselecttree k-input",n.className,{[`k-input-${Ke[y]||y}`]:y,[`k-rounded-${gt[V]||V}`]:V,[`k-input-${z}`]:z,"k-focus":d&&!x,"k-invalid":!Se,"k-disabled":x,"k-loading":n.loading,"k-required":ve}),tabIndex:_,accessKey:n.accessKey,id:P,style:A?{...L,width:void 0}:L,dir:R,ref:F,onKeyDown:x?void 0:Qe,onMouseDown:Ue,onFocus:$e,onBlur:Ge,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":x,"aria-label":A,"aria-labelledby":n.ariaLabelledBy,"aria-describedby":n.ariaDescribedBy?n.ariaDescribedBy:"tagslist-"+P,"aria-required":n.required,onClick:x?void 0:Je},t.createElement("div",{id:"tagslist-"+P,className:o.classNames("k-input-values k-chip-list",{[`k-chip-list-${Ke[y]||y}`]:y})},Y.length>0&&t.createElement(lt,{tag:n.tag,onTagDelete:Xe,data:Y,guid:P,focused:N?G.current.find(e=>ee.matchTags(e,N,I)):void 0,size:y})),t.createElement("span",{className:"k-input-inner"},Y.length===0&&t.createElement("span",{className:"k-input-value-text"},de)),n.loading&&t.createElement(o.IconWrap,{className:"k-input-loading-icon",name:"loading"}),ie&&!x&&Y.length>0&&t.createElement(ct,{onClick:le}),t.createElement("select",{name:De,ref:H,tabIndex:-1,"aria-hidden":!0,title:A,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},t.createElement("option",{value:n.valueMap?n.valueMap.call(void 0,g):g})),!O&&t.createElement(nt.Popup,{...q,popupClass:o.classNames(q.popupClass,"k-multiselecttree-popup"),className:o.classNames(q.className,{"k-rtl":R==="rtl"}),style:Be,anchor:q.anchor||F.current,show:l,onOpen:_e,onClose:He,ref:U},n.filterable&&t.createElement(Me,{value:n.filter===void 0?ye:n.filter,ref:K,onChange:Ee,onKeyDown:Ce,tabIndex:_,size:y,rounded:V,fillMode:z,renderListFilterWrapper:!0,renderPrefixSeparator:!0}),W.length>0?t.createElement(Ie.TreeView,{style:{height:q.height},ref:S,tabIndex:_,data:W,focusIdField:I,textField:n.textField,checkField:fe,checkIndeterminateField:ge,expandField:n.expandField,childrenField:me,expandIcons:!0,onItemClick:J,onCheckChange:J,onExpandChange:ke,checkboxes:!0,size:y,item:n.item,dir:R}):t.createElement(xe,null,X.toLanguageString(v.nodata,v.messages[v.nodata])),T&&t.createElement(o.WatermarkOverlay,null))),O&&Ye());return A?t.createElement(st.FloatingLabel,{label:A,editorValue:ie,editorPlaceholder:de,editorValid:Se,editorDisabled:x,editorId:P,style:{width:L?L.width:void 0},children:we,dir:R}):we}),ht={opened:a.bool,disabled:a.bool,dir:a.string,tabIndex:a.number,accessKey:a.string,data:a.array,value:a.any,valueMap:a.func,placeholder:a.string,dataItemKey:a.string.isRequired,textField:a.string.isRequired,checkField:a.string,checkIndeterminateField:a.string,expandField:a.string,subItemsField:a.string,className:a.string,style:a.object,label:a.string,validationMessage:a.string,validityStyles:a.bool,valid:a.bool,required:a.bool,name:a.string,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,filterable:a.bool,filter:a.string,loading:a.bool,tags:a.arrayOf(a.shape({text:a.string,data:a.arrayOf(a.any)})),popupSettings:a.shape({animate:a.oneOfType([a.bool,a.shape({openDuration:a.number,closeDuration:a.number})]),popupClass:a.string,className:a.string,appendTo:a.any,width:a.oneOfType([a.string,a.number]),height:a.oneOfType([a.string,a.number])}),onOpen:a.func,onClose:a.func,onFocus:a.func,onBlur:a.func,onChange:a.func,onFilterChange:a.func,onExpandChange:a.func,onCancel:a.func,item:a.func,listNoData:a.func,adaptiveTitle:a.string,adaptive:a.bool};ue.displayName="KendoReactMultiSelectTree";ue.propTypes=ht;exports.MultiSelectTree=ue;exports.MultiSelectTreePropsContext=Re;