@progress/kendo-react-dropdowns 7.2.4-develop.3 → 7.3.0-develop.1

package/MultiSelect/MultiSelect.mjs

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