@progress/kendo-react-dropdowns 8.2.1-develop.5 → 8.3.0-develop.10

package/MultiSelect/MultiSelect.mjs

@@ -36,18 +36,18 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
     }, 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._input && this._input.focus();
     }, this.handleItemSelect = (e, t) => {
-      const { dataItemKey: o, virtual: s } = this.props, a = I(this.props), h = s ? s.skip : 0, c = a[e - h], d = this.value.findIndex((g) => E(g, c, o));
+      const { dataItemKey: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = a[e - p], r = this.value.findIndex((g) => E(g, c, o));
       this._lastSelectedOrDeslectedItemIndex = a.findIndex((g) => E(g, c, o));
       let i = [];
-      d !== -1 ? (i = this.value, i.splice(d, 1)) : i = [...this.value, c], (this.props.filter !== void 0 ? this.props.filter : this.state.text) && !this.mobileMode && (this.state.text && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.triggerOnChange(i, t), this.base.triggerPageChangeCornerItems(c, t);
+      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 && (t.data.text = ""), this.base.filterChanged("", t)), this._adaptiveInput && this._adaptiveInput.blur(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.triggerOnChange(i, t), this.base.triggerPageChangeCornerItems(c, t);
     }, this.onTagDelete = (e, t) => {
       const o = this.base.initState();
       o.syntheticEvent = t, this.opened && this.base.togglePopup(o), !this.state.focused && !this.mobileMode && (o.data.focused = !0, this.focus());
       const s = this.value;
       w(s, e, this.props.dataItemKey), this.triggerOnChange(s, o), this.applyState(o);
     }, this.itemFocus = (e, t) => {
-      const { allowCustom: o, virtual: s } = this.props, a = I(this.props), h = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: d } = this.getFocusedState(), i = o && c, l = a[e - h];
-      l && d !== e ? this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = k.PopupList) : i && e === -1 && this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(l, t);
+      const { allowCustom: o, virtual: s } = this.props, a = I(this.props), p = s ? s.skip : 0, c = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedIndex: r } = this.getFocusedState(), i = o && c, d = a[e - p];
+      d && r !== e ? this.state.focusedIndex !== e && (t.data.focusedIndex = e, t.data.activedescendant = k.PopupList) : i && e === -1 && this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.base.triggerPageChangeCornerItems(d, t);
     }, this.componentRef = (e) => {
       this._element = e, this.base.wrapper = e;
     }, this.searchbarRef = (e) => {
@@ -62,11 +62,11 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       const o = this.props.filter !== void 0 ? this.props.filter : this.state.text;
       M(o) && o !== "" && this.base.filterChanged("", t), this.state.text && (t.data.text = ""), this._lastSelectedOrDeslectedItemIndex = null, this.applyState(t);
     }, this.onInputKeyDown = (e) => {
-      const { textField: t, groupField: o } = this.props, s = I(this.props), a = e.keyCode, h = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: d, focusedIndex: i } = this.getFocusedState(), l = this.base.initState();
-      if (l.syntheticEvent = e, !h && this.value.length > 0 && (a === u.left || a === u.right || a === u.home || a === u.end || a === u.delete || a === u.backspace) && !e.shiftKey)
-        return this.onTagsNavigate(e, l);
+      const { textField: t, groupField: o } = this.props, s = I(this.props), a = e.keyCode, p = this.props.filter !== void 0 ? this.props.filter : this.state.text, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { focusedItem: r, focusedIndex: i } = this.getFocusedState(), d = this.base.initState();
+      if (d.syntheticEvent = e, !p && this.value.length > 0 && (a === u.left || a === u.right || a === u.home || a === u.end || a === u.delete || a === u.backspace) && !e.shiftKey)
+        return this.onTagsNavigate(e, d);
       const g = () => {
-        e.preventDefault(), this.base.togglePopup(l), this.applyState(l);
+        e.preventDefault(), this.base.togglePopup(d), this.applyState(d);
       };
       if (this.opened)
         if (a === u.pageUp)
@@ -74,75 +74,75 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         else if (a === u.pageDown)
           e.preventDefault(), this.base.scrollPopupByPageSize(1);
         else if ((e.ctrlKey || e.metaKey) && e.code === "KeyA") {
-          const p = (this.state.value && this.state.value.length) === s.length ? [] : s;
-          this.updateStateOnKeyboardNavigation(p, l);
+          const h = (this.state.value && this.state.value.length) === s.length ? [] : s;
+          this.updateStateOnKeyboardNavigation(h, d);
         } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.end) {
-          const r = s.slice(this.getFocusedState().focusedIndex);
-          this.itemFocus(s.length - 1, l), this.updateStateOnKeyboardNavigation(r, l);
+          const l = s.slice(this.getFocusedState().focusedIndex);
+          this.itemFocus(s.length - 1, d), this.updateStateOnKeyboardNavigation(l, d);
         } else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.keyCode === u.home) {
-          const r = s.slice(0, this.getFocusedState().focusedIndex + 1);
-          this.itemFocus(0, l), this.updateStateOnKeyboardNavigation(r, l);
+          const l = s.slice(0, this.getFocusedState().focusedIndex + 1);
+          this.itemFocus(0, d), this.updateStateOnKeyboardNavigation(l, d);
         } else if (e.shiftKey && e.keyCode === u.up) {
-          let r;
-          const p = this.getLastSelectedOrDeselectedIndex(1, i);
-          p === null ? r = i !== 0 ? s.slice(i - 1, i) : [s[i]] : p === i ? r = [s[p - 1]] : i >= 0 && (r = p > i ? s.slice(i - 1, p) : s.slice(p - 1, i)), r && r.length > 0 && (i >= 1 && this.itemFocus(i - 1, l), this.updateStateOnKeyboardNavigation(r, l));
+          let l;
+          const h = this.getLastSelectedOrDeselectedIndex(1, i);
+          h === null ? l = i !== 0 ? s.slice(i - 1, i) : [s[i]] : h === i ? l = [s[h - 1]] : i >= 0 && (l = h > i ? s.slice(i - 1, h) : s.slice(h - 1, i)), l && l.length > 0 && (i >= 1 && this.itemFocus(i - 1, d), this.updateStateOnKeyboardNavigation(l, d));
         } else if (e.shiftKey && e.keyCode === u.down) {
-          let r;
-          const p = this.getLastSelectedOrDeselectedIndex(0, i);
-          p === null ? r = i !== s.length - 1 ? s.slice(i, i + 1) : [s[i]] : p === i ? r = s.slice(i, i + 2) : i >= 0 && (r = p > i ? s.slice(i + 1, p + 1) : s.slice(p, i + 2)), r && r.length >= 1 && (this.itemFocus(i + 1, l), this.updateStateOnKeyboardNavigation(r, l));
+          let l;
+          const h = this.getLastSelectedOrDeselectedIndex(0, i);
+          h === null ? l = i !== s.length - 1 ? s.slice(i, i + 1) : [s[i]] : h === i ? l = s.slice(i, i + 2) : i >= 0 && (l = h > i ? s.slice(i + 1, h + 1) : s.slice(h, i + 2)), l && l.length >= 1 && (this.itemFocus(i + 1, d), this.updateStateOnKeyboardNavigation(l, d));
         } else if (e.altKey && a === u.up)
           g();
         else if (a === u.up || a === u.down) {
           if (o !== "" && t)
             if (!this.props.skipDisabledItems && c)
-              this.onNavigate(l, a);
+              this.onNavigate(d, a);
             else {
-              let r = 0;
+              let l = 0;
               if (a === u.down || a === u.right) {
-                const p = s.slice(i + 1).find((v) => !v.disabled && v[t]);
-                r = p && s.findIndex((v) => v[t] === p[t]);
+                const h = s.slice(i + 1).find((v) => !v.disabled && v[t]);
+                l = h && s.findIndex((v) => v[t] === h[t]);
               } else if (a === u.up || a === u.left) {
-                let p;
+                let h;
                 if (i === -1)
-                  p = s, r = s.findIndex((v) => !v.disabled && v[t]);
+                  h = s, l = s.findIndex((v) => !v.disabled && v[t]);
                 else {
-                  p = s.slice(0, i);
-                  let v = p.pop();
+                  h = s.slice(0, i);
+                  let v = h.pop();
                   for (; v && v.disabled; )
-                    v = p.pop();
-                  r = v && s.findIndex((S) => S[t] === v[t]);
+                    v = h.pop();
+                  l = v && s.findIndex((S) => S[t] === v[t]);
                 }
               }
-              if (r) {
-                const p = r - i;
-                this.onNavigate(l, a, p);
+              if (l) {
+                const h = l - i;
+                this.onNavigate(d, a, h);
               } else
-                r !== void 0 && this.onNavigate(l, a);
+                l !== void 0 && this.onNavigate(d, a);
             }
           else if (!this.props.skipDisabledItems && c)
-            this.onNavigate(l, a);
+            this.onNavigate(d, a);
           else {
-            let r = null;
+            let l = null;
             if (a === u.down || a === u.right)
-              r = s.slice(i + 1).find((p) => !p.disabled);
+              l = s.slice(i + 1).find((h) => !h.disabled);
             else if (a === u.up || a === u.left) {
-              const p = s.slice(0, i);
-              for (r = p.pop(); r && r.disabled; )
-                r = p.pop();
+              const h = s.slice(0, i);
+              for (l = h.pop(); l && l.disabled; )
+                l = h.pop();
             }
-            if (r) {
-              const p = r.id - i - 1;
-              this.onNavigate(l, a, p);
+            if (l) {
+              const h = l.id - i - 1;
+              this.onNavigate(d, a, h);
             } else
-              this.onNavigate(l, a);
+              this.onNavigate(d, a);
           }
-          this.applyState(l), e.preventDefault();
+          this.applyState(d), e.preventDefault();
         } else
-          a === u.enter ? (e.preventDefault(), this.props.allowCustom && h && d === null ? this.customItemSelect(e) : d && d.disabled ? g() : this.selectFocusedItem(e)) : a === u.esc && g();
+          a === u.enter ? (e.preventDefault(), this.props.allowCustom && p && r === null ? this.customItemSelect(e) : r && r.disabled ? g() : this.selectFocusedItem(e)) : a === u.esc && g();
       else
         e.altKey && a === u.down ? g() : a === u.esc && this.clearButtonClick(e);
     }, this.listContainerContent = () => {
-      const { header: e, footer: t, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: h, list: c } = this.props, d = 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: e, footer: t, allowCustom: o, size: s, groupStickyHeaderItemRender: a, groupField: p, list: c } = this.props, r = I(this.props), i = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: d } = this.getFocusedState(), g = o && i && /* @__PURE__ */ f.createElement(
         "div",
         {
           className: y("k-list", {
@@ -155,15 +155,15 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         /* @__PURE__ */ f.createElement(
           "div",
           {
-            className: y("k-list-item k-custom-item", { "k-focus": q(l) }),
+            className: y("k-list-item k-custom-item", { "k-focus": q(d) }),
             style: { fontStyle: "italic" }
           },
           i,
           /* @__PURE__ */ f.createElement(R, { name: "plus", icon: it, style: { position: "absolute", right: "0.5em" } })
         )
       );
-      let { group: r } = this.state;
-      return r === void 0 && h !== void 0 && (r = O(d[0], h)), /* @__PURE__ */ f.createElement(f.Fragment, null, e && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, e), g, /* @__PURE__ */ f.createElement(
+      let { group: l } = this.state;
+      return l === void 0 && p !== void 0 && (l = O(r[0], p)), /* @__PURE__ */ f.createElement(f.Fragment, null, e && /* @__PURE__ */ f.createElement("div", { className: "k-list-header" }, e), g, /* @__PURE__ */ f.createElement(
         "div",
         {
           className: y(
@@ -174,11 +174,11 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
             }
           )
         },
-        !c && r && d.length !== 0 && /* @__PURE__ */ f.createElement(lt, { group: r, groupMode: "modern", render: a }),
+        !c && l && r.length !== 0 && /* @__PURE__ */ f.createElement(lt, { group: l, groupMode: "modern", render: a }),
         this.renderList()
       ), t && /* @__PURE__ */ f.createElement("div", { className: "k-list-footer" }, t));
     }, this.renderListContainer = () => {
-      const e = this.base, { dir: t } = this.props, o = I(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : e.popupWidth, h = {
+      const e = this.base, { dir: t } = this.props, o = I(this.props), s = this.base.getPopupSettings(), a = s.width !== void 0 ? s.width : e.popupWidth, p = {
         dir: t !== void 0 ? t : e.dirCalculated,
         width: a,
         popupSettings: {
@@ -195,15 +195,15 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         },
         itemsCount: [o.length, this.value.length]
       };
-      return /* @__PURE__ */ f.createElement(at, { ...h }, this.listContainerContent());
+      return /* @__PURE__ */ f.createElement(at, { ...p }, this.listContainerContent());
     }, this.renderAdaptiveListContainer = () => {
       const { adaptiveTitle: e, filterable: t, filter: o } = this.props, { windowWidth: s = 0 } = this.state, a = o !== void 0 ? o : this.state.text;
       this.localization = vt(this);
-      const h = t ? /* @__PURE__ */ f.createElement(
+      const p = t ? /* @__PURE__ */ f.createElement(
         It,
         {
           value: a,
-          ref: (d) => this._adaptiveInput = d && d.element,
+          ref: (r) => this._adaptiveInput = r && r.element,
           onChange: this.onChangeHandler,
           onKeyDown: this.onInputKeyDown,
           size: this.props.size,
@@ -213,9 +213,9 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       ) : null, c = {
         adaptiveTitle: e,
         expand: this.opened,
-        onClose: (d) => this.onCancel(d),
+        onClose: (r) => this.onCancel(r),
         windowWidth: s,
-        mobileFilter: h,
+        mobileFilter: p,
         footer: {
           cancelText: this.localization.toLanguageString(z, V[z]),
           onCancel: this.onCancel,
@@ -223,7 +223,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
           onApply: this.closePopup
         }
       };
-      return /* @__PURE__ */ f.createElement(ft, { ...c }, /* @__PURE__ */ f.createElement(gt, { className: "!k-overflow-hidden" }, /* @__PURE__ */ f.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
+      return /* @__PURE__ */ f.createElement(ft, { ...c }, /* @__PURE__ */ f.createElement(gt, { overflowHidden: !0 }, /* @__PURE__ */ f.createElement("div", { className: "k-list-container" }, this.listContainerContent())));
     }, this.closePopup = (e) => {
       const t = this.base.initState();
       t.syntheticEvent = e, e.stopPropagation(), this.state.focusedIndex !== void 0 && (t.data.focusedIndex = void 0), this.opened && this.base.togglePopup(t), t.events.push({ type: "onClose" });
@@ -241,29 +241,29 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         itemRender: o,
         groupHeaderItemRender: s,
         dataItemKey: a,
-        virtual: h = { skip: 0, total: void 0 }
-      } = this.props, c = I(this.props), d = this.base.vs, { focusedIndex: i } = this.getFocusedState(), l = this.base.getPopupSettings(), g = `translateY(${d.translate}px)`;
+        virtual: p = { skip: 0, total: void 0 }
+      } = this.props, c = I(this.props), r = this.base.vs, { focusedIndex: i } = this.getFocusedState(), d = this.base.getPopupSettings(), g = `translateY(${r.translate}px)`;
       return /* @__PURE__ */ f.createElement(
         nt,
         {
           id: this.base.listBoxId,
           show: this.opened,
           data: c.slice(),
-          focusedIndex: i - h.skip,
+          focusedIndex: i - p.skip,
           value: this.value,
           textField: e,
           valueField: a,
           optionsGuid: this.base.guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (r) => {
-            d.list = this.base.list = r;
+          listRef: (l) => {
+            r.list = this.base.list = l;
           },
-          wrapperStyle: this.mobileMode ? {} : { maxHeight: l.height },
+          wrapperStyle: this.mobileMode ? {} : { maxHeight: d.height },
           wrapperCssClass: "k-list-content",
-          listStyle: d.enabled ? { transform: g } : void 0,
+          listStyle: r.enabled ? { transform: g } : void 0,
           key: "listKey",
-          skip: h.skip,
+          skip: p.skip,
           onClick: this.handleItemClick,
           itemRender: o,
           groupHeaderItemRender: s,
@@ -271,9 +271,9 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
           onMouseDown: $,
           onBlur: this.handleBlur,
           onScroll: this.onScroll,
-          wrapperRef: d.scrollerRef,
+          wrapperRef: r.scrollerRef,
           scroller: this.base.renderScrollElement(),
-          ariaSetSize: h.total
+          ariaSetSize: p.total
         }
       );
     }, this.onScroll = (e) => {
@@ -282,11 +282,11 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       const { groupField: s } = this.props;
       let a = I(this.props);
       if (!(!s || !a.length) && s) {
-        const h = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * h;
+        const p = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : o ? o.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * p;
         a = this.base.getGroupedDataModernMode(a, s);
         let i = a[0][s];
-        for (let l = 1; l < a.length && !(h * l > d); l++)
-          a[l] && a[l][s] && (i = a[l][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
         });
@@ -299,8 +299,8 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       s.syntheticEvent = e;
       const a = o ? { [o]: t } : t;
       this.state.text !== void 0 && (s.data.text = ""), s.data.focusedIndex = void 0, this.base.filterChanged("", s);
-      const h = [...this.value, a];
-      this.triggerOnChange(h, s), this.base.togglePopup(s), this.applyState(s);
+      const p = [...this.value, a];
+      this.triggerOnChange(p, s), this.base.togglePopup(s), this.applyState(s);
     }, this.handleWrapperClick = (e) => {
       const t = this._input;
       !this.opened && t && this.focusElement(t);
@@ -390,12 +390,12 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
   /** @hidden */
   componentDidUpdate(n, e) {
     var g;
-    const { virtual: t, groupField: o = "" } = this.props, s = I(this.props), a = t ? t.skip : 0, h = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : e.opened, d = !c && this.opened, i = c && !this.opened, l = this.base.getPopupSettings();
-    if (this.base.didUpdate(), !l.animate && i && this.onPopupClosed(), t && t.total !== h)
+    const { virtual: t, groupField: o = "" } = this.props, s = I(this.props), a = t ? t.skip : 0, p = n.virtual ? n.virtual.total : 0, c = n.opened !== void 0 ? n.opened : e.opened, r = !c && this.opened, i = c && !this.opened, d = this.base.getPopupSettings();
+    if (this.base.didUpdate(), !d.animate && i && this.onPopupClosed(), t && t.total !== p)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      let { focusedItem: r, focusedIndex: p } = this.getFocusedState();
-      o !== "" && (p = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(r)), d && t ? this.base.scrollToVirtualItem(t, p - a) : d && !t ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(p)) : this.opened && c && r && this.scrollToFocused && this.base.scrollToItem(p - a);
+      let { focusedItem: l, focusedIndex: h } = this.getFocusedState();
+      o !== "" && (h = (g = this.base.getGroupedDataModernMode(s, o)) == null ? void 0 : g.indexOf(l)), r && t ? this.base.scrollToVirtualItem(t, h - a) : r && !t ? (s && s.length !== 0 && this.base.resetGroupStickyHeader(s[0][o], this), this.base.scrollToItem(h)) : this.opened && c && l && this.scrollToFocused && this.base.scrollToItem(h - a);
     }
     this.scrollToFocused = !1, this.setValidity();
   }
@@ -411,18 +411,18 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
   }
   /** @hidden */
   onNavigate(n, e, t) {
-    const { allowCustom: o } = this.props, s = I(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: h, focusedIndex: c } = this.getFocusedState(), d = o && a, i = q(h), l = this.base, g = l.vs;
+    const { allowCustom: o } = this.props, s = I(this.props), a = this.props.filter !== void 0 ? this.props.filter : this.state.text, { focusedType: p, focusedIndex: c } = this.getFocusedState(), r = o && a, i = q(p), d = this.base, g = d.vs;
     if (this.opened && e === u.up && i)
       this.state.focusedIndex !== void 0 && (n.data.focusedIndex = void 0);
     else {
-      const r = l.navigation.navigate({
+      const l = d.navigation.navigate({
         keyCode: e,
         current: c,
         max: (g.enabled ? g.total : s.length) - 1,
-        min: d ? -1 : 0,
+        min: r ? -1 : 0,
         skipItems: t || void 0
       });
-      r !== void 0 && (this.itemFocus(r, n), this.scrollToFocused = !0);
+      l !== void 0 && (this.itemFocus(l, n), this.scrollToFocused = !0);
     }
     this.applyState(n);
   }
@@ -435,25 +435,25 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       dir: o,
       disabled: s,
       textField: a,
-      dataItemKey: h,
+      dataItemKey: p,
       virtual: c,
-      size: d,
+      size: r,
       rounded: i,
-      fillMode: l,
+      fillMode: d,
       loading: g,
-      filter: r
-    } = this.props, { text: p, focused: v, focusedTag: S, currentValue: W } = this.state, C = this.base.vs, _ = this.props.id || this._inputId;
+      filter: l
+    } = this.props, { text: h, focused: v, focusedTag: S, currentValue: W } = this.state, C = this.base.vs, _ = this.props.id || this._inputId;
     C.enabled = c !== void 0, c !== void 0 && (C.skip = c.skip, C.total = c.total, C.pageSize = c.pageSize);
     const x = this.mobileMode && this.opened ? W : this.tagsToRender;
     this.setItems(this.tagsToRender, this._tags);
-    const K = !this.validityStyles || this.validity.valid, G = !!(r !== void 0 ? r : p) || x && x.length > 0, [U, Y] = A(this.props.prefix || f.Fragment), [j, J] = A(this.props.suffix || f.Fragment), N = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
+    const K = !this.validityStyles || this.validity.valid, G = !!(l !== void 0 ? l : h) || x && x.length > 0, [U, Y] = A(this.props.prefix || f.Fragment), [j, J] = A(this.props.suffix || f.Fragment), N = /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(
       "div",
       {
         ref: this.componentRef,
         className: y("k-multiselect k-input", e, {
-          [`k-input-${D[d] || d}`]: d,
+          [`k-input-${D[r] || r}`]: r,
           [`k-rounded-${yt[i] || i}`]: i,
-          [`k-input-${l}`]: l,
+          [`k-input-${d}`]: d,
           "k-focus": v && !s,
           "k-invalid": !K,
           "k-disabled": s,
@@ -473,7 +473,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         {
           className: y(
             "k-chip-list",
-            { [`k-chip-list-${D[d] || d}`]: d }
+            { [`k-chip-list-${D[r] || r}`]: r }
           ),
           role: "listbox",
           id: "tagslist-" + this.base.guid
@@ -485,8 +485,8 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
             onTagDelete: this.onTagDelete,
             data: x,
             guid: this.base.guid,
-            focused: S ? x.find((Q) => B(Q, S, h)) : void 0,
-            size: d
+            focused: S ? x.find((Q) => B(Q, S, p)) : void 0,
+            size: r
           }
         )
       ), this.renderSearchBar(_)),
@@ -500,7 +500,7 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
       {
         label: t,
         editorId: _,
-        editorValue: p || O(this.value[0], a),
+        editorValue: h || O(this.value[0], a),
         editorValid: K,
         editorDisabled: s,
         style: { width: n ? n.width : void 0 },
@@ -509,16 +509,17 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
     ) : N;
   }
   renderSearchBar(n) {
-    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: h } = this.props, c = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), i = this.value.length === 0 && !c ? a : void 0, l = o && o.length > 0 ? void 0 : a, g = e === k.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`;
+    const { activedescendant: e, focusedTag: t, currentValue: o } = this.state, { disabled: s, placeholder: a, ariaDescribedBy: p, ariaLabelledBy: c, ariaLabel: r } = this.props, i = !this.mobileMode && (this.props.filter !== void 0 ? this.props.filter : this.state.text) || "", { focusedIndex: d } = this.getFocusedState(), g = this.value.length === 0 && !i ? a : void 0, l = o && o.length > 0 ? void 0 : a, h = e === k.TagsList && t !== void 0 ? `tag-${this.base.guid}-${t.text.replace(/\s+/g, "-")}` : `option-${this.base.guid}-${d}`, v = {
+      accessKey: this.props.accessKey,
+      tabIndex: this.props.tabIndex
+    };
     return /* @__PURE__ */ f.createElement(
       rt,
       {
         id: n,
-        size: Math.max((i || "").length, c.length, 1),
-        tabIndex: this.props.tabIndex,
-        accessKey: this.props.accessKey,
-        placeholder: this.mobileMode && this.opened ? l : i,
-        value: c,
+        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,
@@ -526,37 +527,39 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         expanded: this.opened,
         owns: this.base.listBoxId,
         role: "combobox",
-        activedescendant: g,
-        ariaDescribedBy: `tagslist-${this.base.guid}${h ? " " + h : ""}`,
-        ariaLabelledBy: this.props.ariaLabelledBy,
-        ariaRequired: this.required
+        activedescendant: h,
+        ariaDescribedBy: `tagslist-${this.base.guid}${p ? " " + p : ""}`,
+        ariaLabelledBy: c,
+        ariaRequired: this.required,
+        ariaLabel: r,
+        ...v
       }
     );
   }
   onTagsNavigate(n, e) {
     const t = n.keyCode, { focusedTag: o } = this.state, s = this._tags, a = this.props.dataItemKey;
-    let h = o ? s.findIndex((i) => B(i, o, a)) : -1, c;
-    const d = h !== -1;
+    let p = o ? s.findIndex((i) => B(i, o, a)) : -1, c;
+    const r = p !== -1;
     if (t === u.left)
-      d ? h = Math.max(0, h - 1) : h = s.length - 1, c = s[h];
+      r ? p = Math.max(0, p - 1) : p = s.length - 1, c = s[p];
     else if (t === u.right)
-      h === s.length - 1 ? c = void 0 : d && (h = Math.min(s.length - 1, h + 1), c = s[h]);
+      p === s.length - 1 ? c = void 0 : r && (p = Math.min(s.length - 1, p + 1), c = s[p]);
     else if (t === u.home && !n.shiftKey)
       c = s[0];
     else if (t === u.end && !n.shiftKey)
       c = s[s.length - 1];
     else if (t === u.delete) {
-      if (d) {
+      if (r) {
         const i = this.value;
-        w(i, s[h].data, a), this.triggerOnChange(i, e);
+        w(i, s[p].data, a), this.triggerOnChange(i, e);
       }
     } else if (t === u.backspace) {
       const i = this.value;
-      if (d)
-        w(i, s[h].data, a), this.triggerOnChange(i, e);
-      else if (!d && s.length) {
-        const l = s.pop();
-        w(i, l.data, a), this.triggerOnChange(i, e);
+      if (r)
+        w(i, s[p].data, a), this.triggerOnChange(i, e);
+      else if (!r && s.length) {
+        const d = s.pop();
+        w(i, d.data, a), this.triggerOnChange(i, e);
       }
     }
     c !== o && (e.data.focusedTag = c, e.data.activedescendant = k.TagsList), this.applyState(e);
@@ -572,12 +575,12 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
     e.length = 0, e.push(...n);
   }
   getFocusedState() {
-    const { focusedIndex: n } = this.state, e = this.props.filter !== void 0 ? this.props.filter : this.state.text, { allowCustom: t, dataItemKey: o, virtual: s, textField: a, focusedItemIndex: h = pt, skipDisabledItems: c } = this.props, d = I(this.props), i = s && s.skip || 0;
-    let l;
+    const { focusedIndex: n } = this.state, e = this.props.filter !== void 0 ? this.props.filter : this.state.text, { allowCustom: t, dataItemKey: o, virtual: s, textField: a, focusedItemIndex: p = pt, skipDisabledItems: c } = this.props, r = I(this.props), i = s && s.skip || 0;
+    let d;
     if (n !== void 0)
       return {
         focusedIndex: n,
-        focusedItem: d[n - i],
+        focusedItem: r[n - i],
         focusedType: 1
         /* ListItem */
       };
@@ -590,31 +593,31 @@ const { sizeMap: D, roundedMap: yt } = st, bt = "Please enter a valid value!", $
         /* CustomItem */
       };
     if (e)
-      return l = h(d, e, a), {
-        focusedItem: d[l],
-        focusedIndex: l + i,
+      return d = p(r, e, a), {
+        focusedItem: r[d],
+        focusedIndex: d + i,
         focusedType: 1
         /* ListItem */
       };
     if (g.length) {
-      const r = g[g.length - 1];
-      return l = d.findIndex((p) => E(p, r, o)), d[l] !== void 0 ? {
-        focusedIndex: l + i,
-        focusedItem: d[l],
+      const l = g[g.length - 1];
+      return d = r.findIndex((h) => E(h, l, o)), r[d] !== void 0 ? {
+        focusedIndex: d + i,
+        focusedItem: r[d],
         focusedType: 1
         /* ListItem */
       } : { focusedType: 0, focusedIndex: -1 };
     } else if (c && a && !e && i === 0) {
-      const r = d.findIndex((p) => !p.disabled && p[a]);
+      const l = r.findIndex((h) => !h.disabled && h[a]);
       return {
-        focusedIndex: r,
-        focusedItem: d[r - i],
+        focusedIndex: l,
+        focusedItem: r[l - i],
         focusedType: 1
         /* ListItem */
       };
     }
     return i === 0 ? {
-      focusedItem: d[0],
+      focusedItem: r[0],
       focusedIndex: 0,
       focusedType: 1
       /* ListItem */

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