@progress/kendo-react-dropdowns 7.2.4-develop.2 → 7.2.4-develop.4

package/ComboBox/ComboBox.mjs

@@ -0,0 +1,618 @@
+/**
+ * @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 u from "react";
+import f from "prop-types";
+import B from "../common/DropDownBase.mjs";
+import { Keys as x, validatePackage as ie, svgIconPropType as oe, canUseDOM as z, classNames as E, IconWrap as ae, createPropsContext as ne, withIdHOC as le, withPropsContext as re, kendoThemeMaps as de } from "@progress/kendo-react-common";
+import { FloatingLabel as pe } from "@progress/kendo-react-labels";
+import { areSame as C, getItemValue as S, isPresent as k, getItemIndexByText as A, suggestValue as he, itemIndexStartsWith as K } from "../common/utils.mjs";
+import ue from "../common/SearchBar.mjs";
+import ce from "../common/ListContainer.mjs";
+import ge from "../common/List.mjs";
+import me from "../common/ListFilter.mjs";
+import H from "../common/GroupStickyHeader.mjs";
+import { packageMetadata as ve } from "../package-metadata.mjs";
+import fe from "../common/ClearButton.mjs";
+import { Button as q } from "@progress/kendo-react-buttons";
+import { caretAltDownIcon as be, xIcon as xe } from "@progress/kendo-svg-icons";
+import { comboArrowBtnAriaLabelExpand as W, messages as $, comboArrowBtnAriaLabelCollapse as G } from "../messages/index.mjs";
+import { provideLocalizationService as U } from "@progress/kendo-react-intl";
+import { ActionSheet as Ie, ActionSheetHeader as ye, ActionSheetContent as ke } from "@progress/kendo-react-layout";
+import { MOBILE_MEDIUM_DEVISE as D, MOBILE_SMALL_DEVISE as j } from "../common/constants.mjs";
+import Y from "../common/withCustomComponent.mjs";
+const Ce = "Please enter a valid value!", { sizeMap: V, roundedMap: Se } = de, w = class w extends u.Component {
+  constructor(s) {
+    super(s), this.state = {}, this.base = new B(this), this._element = null, this._suggested = "", this._skipBlur = !1, this._input = null, this._adaptiveFilterInput = null, this.itemHeight = 0, this.focus = () => {
+      this._input && this._input.focus();
+    }, this.handleItemSelect = (e, t) => {
+      const { data: n = [], virtual: i, dataItemKey: l } = this.props, d = i ? i.skip : 0, a = n[e - d], r = !C(a, this.value, l);
+      this.triggerOnChange(a, t), this.state.text !== void 0 && (t.data.text = void 0), r && this.base.triggerPageChangeCornerItems(a, t);
+    }, this.onPopupOpened = () => {
+      setTimeout(() => {
+        this.mobileMode && this._adaptiveFilterInput && (this._skipBlur = !0, this._adaptiveFilterInput.focus(), this._skipBlur = !1);
+      }, 300);
+    }, this.componentRef = (e) => {
+      this._element = e, this.base.wrapper = e;
+    }, this.toggleBtnClick = (e) => {
+      const { data: t = [], skipDisabledItems: n, textField: i } = this.props, l = this.getFocusedIndex(), d = this.getCurrentValueDisabledStatus(i, t, l), a = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.base.initState();
+      if (r.syntheticEvent = e, !n && i && d && this.clearValueOnToggleBtnClick(e), this.base.togglePopup(r), !a && this.mobileMode) {
+        const o = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
+        this.base.filterChanged(o, r);
+      }
+      this.applyState(r);
+    }, this.renderMobileListFilter = () => {
+      const e = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text, t = S(this.value, this.props.textField), n = k(e) ? e : t;
+      return /* @__PURE__ */ u.createElement(
+        me,
+        {
+          value: n,
+          ref: (i) => this._adaptiveFilterInput = i && i.element,
+          onChange: this.handleMobileFilterChange,
+          onKeyDown: this.onInputKeyDown,
+          size: this.props.size,
+          rounded: this.props.rounded,
+          fillMode: this.props.fillMode
+        }
+      );
+    }, this.handleMobileFilterChange = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e.syntheticEvent, t.data.text = e.target.value, this.base.filterChanged(e.target.value, t), this.applyState(t);
+    }, this.onScroll = (e) => {
+      const { vs: t, list: n } = this.base;
+      t.scrollHandler(e);
+      const { groupField: i } = this.props;
+      let { data: l = [] } = this.props;
+      if (!i || !l.length)
+        return;
+      const d = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : n ? n.children[0].offsetHeight : 0), r = e.target.scrollTop - t.skip * d;
+      this.props.groupMode === "modern" && (l = this.base.getGroupedDataModernMode(l, i));
+      let o = l[0][i];
+      for (let h = 1; h < l.length && !(d * h > r); h++)
+        l[h] && l[h][i] && (o = l[h][i]);
+      o !== this.state.group && (this.setState({
+        group: o
+      }), this.props.onGroupScroll && this.props.onGroupScroll.call(void 0, { group: o }));
+    }, this.handleItemClick = (e, t) => {
+      this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
+    }, this.handleBlur = (e) => {
+      if (this.state.focused && !this._skipBlur) {
+        const t = this.base.initState(), { textField: n, data: i = [] } = this.props, l = this.getFocusedIndex(), a = !(l === -1) && this.getCurrentValueDisabledStatus(n, i, l);
+        t.data.focused = !1, t.events.push({ type: "onBlur" }), t.syntheticEvent = e, n && a && this.clearValueOnBlur(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, t);
+      }
+    }, this.onInputClick = (e) => {
+      const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, n = this.props.adaptiveFilter !== void 0 ? this.props.adaptiveFilter : this.state.text || null;
+      if (!t && this.mobileMode) {
+        const i = this.base.initState();
+        i.syntheticEvent = e, this.base.togglePopup(i), this.base.filterChanged(n, i), this.applyState(i);
+      }
+    }, this.onInputKeyDown = (e) => {
+      const { data: t = [], skipDisabledItems: n, textField: i, dataItemKey: l, groupField: d } = this.props, a = this.value, r = Math.max(0, t.findIndex((c) => C(c, a, l))), o = e.keyCode, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = this.base.initState();
+      if (p.syntheticEvent = e, !e.altKey && (o === x.up || o === x.down)) {
+        if (e.preventDefault(), d !== "" && i)
+          if (!this.props.skipDisabledItems && h)
+            this.onNavigate(p, o);
+          else {
+            let c = 0;
+            if (o === x.down || o === x.right) {
+              const m = t.slice(r + 1 < t.length ? r + 1 : r).find((b) => !b.disabled && b[i]);
+              c = m && t.findIndex((b) => b[i] === m[i]);
+            } else if (o === x.up || o === x.left) {
+              let m;
+              if (r === 0)
+                m = t, c = t.findIndex((b) => !b.disabled && b[i]);
+              else {
+                m = t.slice(0, r);
+                let b = m.pop();
+                for (; b && b.disabled; )
+                  b = m.pop();
+                c = b && t.findIndex((F) => F[i] === b[i]);
+              }
+            }
+            if (c !== void 0) {
+              const m = c - r;
+              this.onNavigate(p, o, m);
+            } else
+              c === void 0 && t.findIndex((m) => m[i] === a[i]) === t.length - 1 && this.onNavigate(p, o);
+          }
+        else if (!this.props.skipDisabledItems && h)
+          this.onNavigate(p, o);
+        else {
+          let c = null;
+          if (o === x.down || o === x.right)
+            c = t.slice(r + 1).find((m) => !m.disabled);
+          else if (o === x.up || o === x.left) {
+            const m = t.slice(0, r);
+            for (c = m.pop(); c && c.disabled; )
+              c = m.pop();
+          }
+          if (c) {
+            const m = c.id - r - 1;
+            this.onNavigate(p, o, m);
+          } else
+            this.onNavigate(p, o);
+        }
+        this.applyState(p);
+      }
+      const g = () => {
+        e.preventDefault(), this.base.togglePopup(p), this.applyState(p);
+      }, I = this.getFocusedIndex(), v = I === -1, y = !v && this.getCurrentValueDisabledStatus(i, t, I);
+      h ? o === x.pageUp ? this.base.scrollPopupByPageSize(-1) : o === x.pageDown ? this.base.scrollPopupByPageSize(1) : e.altKey && o === x.up ? g() : o === x.enter ? (e.preventDefault(), (i && !v && e.currentTarget.value ? t[I][i] : void 0) ? !n && i && y ? this.clearValueOnEnterOrEsc(e) : y || this.applyValueOnEnter(e.currentTarget.value, p) : this.applyValueOnEnter(e.currentTarget.value, p)) : o === x.esc && (!n && i && y && this.clearValueOnEnterOrEsc(e), this.applyValueOnRejectSuggestions(e.currentTarget.value, p)) : !h && o === x.esc ? this.clearValueOnEnterOrEsc(e) : e.altKey && o === x.down && g();
+    }, this.inputOnChange = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e;
+      const n = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = e.currentTarget, l = i.value;
+      if (this.props.suggest) {
+        const d = i.selectionEnd === l.length;
+        let a = this.props.filter !== void 0 ? this.props.filter : this.state.text;
+        k(a) || (a = S(this.value, this.props.textField) || "");
+        const r = a && a === l, o = a && a.length > l.length;
+        r || o || !d ? this._suggested = "" : this.suggestValue(l);
+      }
+      this.props.filter === void 0 && (t.data.text = l), this.state.focusedItem !== void 0 && (t.data.focusedItem = void 0), n || this.base.togglePopup(t), this.base.filterChanged(l, t), this.applyState(t), this.setState({ group: void 0 });
+    }, this.clearButtonClick = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
+    }, this.clearValueOnEnterOrEsc = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
+    }, this.clearValueOnBlur = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
+    }, this.clearValueOnToggleBtnClick = (e) => {
+      const t = this.base.initState();
+      t.syntheticEvent = e, e.stopPropagation(), this.clearValue();
+    }, this.setValidity = () => {
+      this._input && this._input.setCustomValidity && this._input.setCustomValidity(
+        this.validity.valid ? "" : this.props.validationMessage || Ce
+      );
+    }, ie(ve);
+  }
+  get _inputId() {
+    return this.props.id;
+  }
+  get document() {
+    if (z)
+      return this.element && this.element.ownerDocument || document;
+  }
+  /** @hidden */
+  get element() {
+    return this._element;
+  }
+  /**
+   * The mobile mode of the ComboBox.
+   */
+  get mobileMode() {
+    return !!(this.state.windowWidth && this.state.windowWidth <= D && this.props.adaptive);
+  }
+  /**
+   * The value of the ComboBox.
+   */
+  get value() {
+    if (this._valueDuringOnChange !== void 0)
+      return this._valueDuringOnChange;
+    if (this.props.value !== void 0)
+      return this.props.value;
+    if (this.state.value !== void 0)
+      return this.state.value;
+    if (this.props.defaultValue !== void 0)
+      return this.props.defaultValue;
+  }
+  /**
+   * The index of the selected item.
+   */
+  get index() {
+    const { data: s = [], dataItemKey: e } = this.props, t = this.value;
+    return s.findIndex((n) => C(n, t, e));
+  }
+  /**
+   * Gets the `name` property of the ComboBox.
+   */
+  get name() {
+    return this.props.name;
+  }
+  /**
+   * Represents the validity state into which the component is set.
+   */
+  get validity() {
+    const s = this.props.validationMessage !== void 0, e = !this.required || this.value !== null && this.value !== "" && this.value !== void 0, t = this.props.valid !== void 0 ? this.props.valid : e;
+    return {
+      customError: s,
+      valid: t,
+      valueMissing: this.value === null
+    };
+  }
+  get validityStyles() {
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : w.defaultProps.validityStyles;
+  }
+  /** @hidden */
+  get required() {
+    return this.props.required !== void 0 ? this.props.required : w.defaultProps.required;
+  }
+  /** @hidden */
+  componentDidUpdate(s, e) {
+    var g;
+    const { dataItemKey: t, virtual: n, groupField: i = "", data: l = [], textField: d } = this.props, a = s.virtual ? s.virtual.total : 0, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = s.opened !== void 0 ? s.opened : e.opened, h = !o && r, p = this.value;
+    if (this._valueOnDidUpdate = p, n && n.total !== a)
+      this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
+    else {
+      const I = s.value !== void 0 ? s.value : e.value;
+      let v = l.findIndex((c) => C(c, p, t));
+      this.props.groupMode === "modern" && d && p && (v = (g = this.base.getGroupedDataModernMode(l, i)) == null ? void 0 : g.map((c) => c[d]).indexOf(p[d]));
+      const y = !C(I, p, t);
+      h && n ? this.base.scrollToVirtualItem(n, v) : h && !n ? (this.onPopupOpened(), l && l.length !== 0 && this.base.resetGroupStickyHeader(l[0][i], this), this.base.scrollToItem(v)) : r && o && p && y && this.base.scrollToItem(v);
+    }
+    h && this._input && this._input.focus(), this.setValidity();
+  }
+  /** @hidden */
+  componentDidMount() {
+    var s;
+    this.observerResize = z && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.base.didMount(), this.setValidity(), (s = this.document) != null && s.body && this.observerResize && this.observerResize.observe(this.document.body);
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    var s;
+    (s = this.document) != null && s.body && this.observerResize && this.observerResize.disconnect();
+  }
+  /** @hidden */
+  render() {
+    const s = U(this).toLanguageString(W, $[W]), e = U(this).toLanguageString(
+      G,
+      $[G]
+    ), {
+      dir: t,
+      disabled: n,
+      clearButton: i = w.defaultProps.clearButton,
+      label: l,
+      textField: d,
+      adaptive: a,
+      className: r,
+      style: o,
+      loading: h,
+      iconClassName: p,
+      virtual: g,
+      size: I,
+      rounded: v,
+      fillMode: y,
+      opened: c = this.state.opened,
+      placeholder: m,
+      svgIcon: b
+    } = this.props, { windowWidth: F = 0 } = this.state, _ = !this.validityStyles || this.validity.valid, P = this.props.filter !== void 0 ? this.props.filter : this.state.text, J = S(this.value, d), O = k(P) ? P : J, Q = i && (!!O || k(this.value)), M = this.base.vs, N = this.props.id || this._inputId, L = F <= D && a;
+    M.enabled = g !== void 0, g !== void 0 && (M.skip = g.skip, M.total = g.total, M.pageSize = g.pageSize);
+    const [X, Z] = Y(this.props.prefix || u.Fragment), [ee, te] = Y(this.props.suffix || u.Fragment), R = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
+      "span",
+      {
+        className: E(
+          "k-combobox k-input",
+          {
+            [`k-input-${V[I] || I}`]: I,
+            [`k-rounded-${Se[v] || v}`]: v,
+            [`k-input-${y}`]: y,
+            "k-invalid": !_,
+            "k-loading": h,
+            "k-required": this.required,
+            "k-disabled": n
+          },
+          r
+        ),
+        ref: this.componentRef,
+        style: l ? { ...o, width: void 0 } : o,
+        dir: t
+      },
+      this.props.prefix && /* @__PURE__ */ u.createElement(X, { ...Z }),
+      this.renderSearchBar(O || "", N, m),
+      Q && !h && /* @__PURE__ */ u.createElement(fe, { onClick: this.clearButtonClick, key: "clearbutton" }),
+      h && /* @__PURE__ */ u.createElement(ae, { className: "k-input-loading-icon", name: "loading", key: "loading" }),
+      this.props.suffix && /* @__PURE__ */ u.createElement(ee, { ...te }),
+      /* @__PURE__ */ u.createElement(
+        q,
+        {
+          tabIndex: -1,
+          type: "button",
+          "aria-label": c ? e : s,
+          icon: p ? void 0 : "caret-alt-down",
+          svgIcon: b || be,
+          iconClass: p,
+          size: I,
+          fillMode: y,
+          rounded: null,
+          themeColor: "base",
+          className: "k-input-button",
+          onClick: this.toggleBtnClick,
+          onMouseDown: (se) => se.preventDefault()
+        }
+      ),
+      !L && this.renderListContainer()
+    ), L && this.renderAdaptiveListContainer());
+    return l ? /* @__PURE__ */ u.createElement(
+      pe,
+      {
+        label: l,
+        editorId: N,
+        editorValue: O,
+        editorValid: _,
+        editorDisabled: n,
+        style: { width: o ? o.width : void 0 },
+        children: R
+      }
+    ) : R;
+  }
+  /** @hidden */
+  onNavigate(s, e, t) {
+    const { data: n = [], virtual: i = { skip: 0 } } = this.props, l = this.props.filter ? this.props.filter : this.state.text, d = this.getFocusedIndex(), a = this.base.vs, r = this.value;
+    if (this._suggested = "", d !== -1 && !k(r))
+      this.handleItemSelect(d, s);
+    else if (l === "")
+      this.handleItemSelect(0, s);
+    else {
+      const o = i.skip + d, h = this.base.navigation.navigate({
+        keyCode: e,
+        current: o,
+        max: (a.enabled ? a.total : n.length) - 1,
+        min: 0,
+        skipItems: t || void 0
+      });
+      h !== void 0 && this.handleItemSelect(h, s);
+    }
+  }
+  getCurrentValueDisabledStatus(s, e, t) {
+    return s && e && e[t] && e[t].disabled;
+  }
+  applyValueOnEnter(s, e) {
+    const { data: t = [], textField: n, allowCustom: i } = this.props, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, a = S(this.value, n) === s ? this.index : A(t, s, n), r = a !== -1;
+    let o;
+    if (this._suggested = "", r)
+      o = t[a];
+    else if (i)
+      o = n !== void 0 ? { [n]: s } : s;
+    else
+      return this.selectFocusedItem(s, e);
+    this.triggerOnChange(o, e), l && this.base.togglePopup(e), this.props.filter === void 0 && this.state.text !== void 0 && (e.data.text = void 0), this.applyState(e);
+  }
+  applyValueOnRejectSuggestions(s, e) {
+    const { data: t = [], textField: n, allowCustom: i } = this.props, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = S(this.value, n), a = this.state.windowWidth && this.state.windowWidth <= D;
+    if (this._suggested = "", s === d || s === "" && !k(d))
+      return l && !a && this.base.togglePopup(e), this.applyState(e);
+    const r = A(t, s, n, !0), o = r !== -1;
+    let h = null;
+    o ? h = t[r] : i && (h = s ? n ? { [n]: s } : s : null), this.triggerOnChange(h, e), this.state.text !== void 0 && (e.data.text = void 0, this.base.filterChanged("", e)), l && !a && this.base.togglePopup(e), this.applyState(e);
+  }
+  selectFocusedItem(s, e) {
+    const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { data: n = [], textField: i, virtual: l = { skip: 0 }, focusedItemIndex: d = K } = this.props, a = l.skip, r = s === "" && a === 0 ? 0 : d(n, s, i);
+    return r !== -1 ? this.handleItemSelect(r + a, e) : (this.triggerOnChange(null, e), this.state.text !== void 0 && (e.data.text = void 0)), t && this.base.togglePopup(e), this.applyState(e);
+  }
+  renderAdaptiveListContainer() {
+    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: n, data: i = [], groupField: l, groupMode: d, list: a, virtual: r, adaptiveTitle: o, groupStickyHeaderItemRender: h } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    let { group: g } = this.state;
+    g === void 0 && l !== void 0 && (g = S(i[0], l));
+    const I = {
+      navigatable: !1,
+      navigatableElements: [],
+      expand: p,
+      animation: !0,
+      onClose: (v) => this.toggleBtnClick(v),
+      animationStyles: s <= j ? { top: 0, width: "100%", height: "100%" } : void 0,
+      className: s <= j ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+    };
+    return /* @__PURE__ */ u.createElement(Ie, { ...I }, /* @__PURE__ */ u.createElement(ye, { className: "k-text-center" }, /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ u.createElement("div", null, o)), /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ u.createElement(
+      q,
+      {
+        tabIndex: 0,
+        "aria-label": "Cancel",
+        "aria-disabled": "false",
+        type: "button",
+        fillMode: "flat",
+        onClick: this.toggleBtnClick,
+        icon: "x",
+        svgIcon: xe
+      }
+    ))), /* @__PURE__ */ u.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())), /* @__PURE__ */ u.createElement(ke, { className: "!k-overflow-hidden" }, /* @__PURE__ */ u.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ u.createElement("div", { className: E(
+      {
+        "k-list": !a,
+        "k-list-lg": !0,
+        "k-virtual-list": r,
+        "k-data-table": a,
+        [`k-table-${V[n] || n}`]: a && n
+      }
+    ) }, e && /* @__PURE__ */ u.createElement("div", { className: "k-table-header" }, e), !a && g && i.length !== 0 && /* @__PURE__ */ u.createElement(H, { group: g, groupMode: d, render: h }), this.renderList(), t && /* @__PURE__ */ u.createElement("div", { className: "k-list-footer" }, t)))));
+  }
+  renderListContainer() {
+    const s = this.base, { dir: e, header: t, footer: n, data: i = [], groupField: l, groupMode: d, size: a, list: r, virtual: o, groupStickyHeaderItemRender: h } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = s.getPopupSettings(), I = g.width !== void 0 ? g.width : s.popupWidth;
+    let { group: v } = this.state;
+    return v === void 0 && l !== void 0 && (v = S(i[0], l)), /* @__PURE__ */ u.createElement(
+      ce,
+      {
+        width: I,
+        popupSettings: {
+          ...g,
+          anchor: g.anchor || this.element,
+          show: p,
+          popupClass: E(
+            g.popupClass,
+            "k-list-container",
+            "k-combobox-popup"
+          )
+        },
+        dir: e !== void 0 ? e : this.base.dirCalculated,
+        itemsCount: [i.length]
+      },
+      /* @__PURE__ */ u.createElement("div", { className: E(
+        {
+          "k-list": !r,
+          [`k-list-${V[a] || a}`]: !r && a,
+          "k-virtual-list": o,
+          "k-data-table": r,
+          [`k-table-${V[a] || a}`]: r && a
+        }
+      ) }, t && /* @__PURE__ */ u.createElement("div", { className: "k-table-header" }, t), !r && v && i.length !== 0 && /* @__PURE__ */ u.createElement(H, { group: v, groupMode: d, render: h }), this.renderList(), n && /* @__PURE__ */ u.createElement("div", { className: E(
+        {
+          "k-list-footer": !this.props.footerClassName
+        },
+        this.props.footerClassName
+      ) }, n))
+    );
+  }
+  renderList() {
+    const s = this.base, {
+      textField: e,
+      dataItemKey: t,
+      listNoDataRender: n,
+      itemRender: i,
+      groupHeaderItemRender: l,
+      data: d = [],
+      virtual: a = { skip: 0, total: void 0 }
+    } = this.props, r = s.getPopupSettings(), o = s.vs, h = a.skip, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = `translateY(${o.translate}px)`, I = p ? this.getFocusedIndex() : void 0, v = this.props.filter !== void 0 ? this.props.filter : this.state.text, y = S(this.value, e), c = k(v) && v !== y ? null : this.value, m = this.props.list || ge;
+    return /* @__PURE__ */ u.createElement(
+      m,
+      {
+        id: s.listBoxId,
+        virtual: !!a,
+        show: p,
+        data: d,
+        focusedIndex: I,
+        value: c,
+        textField: e,
+        valueField: t,
+        groupField: this.props.groupField,
+        groupMode: this.props.groupMode,
+        isMultiColumn: this.props.isMultiColumn,
+        optionsGuid: s.guid,
+        listRef: (b) => {
+          o.list = this.base.list = b, this.itemHeight = 0;
+        },
+        wrapperStyle: this.state.windowWidth && this.state.windowWidth > D ? { maxHeight: r.height } : {},
+        wrapperCssClass: E(
+          "k-list-content",
+          {
+            "k-list-scroller": !a
+          }
+        ),
+        listStyle: o.enabled ? { transform: g } : void 0,
+        key: "listkey",
+        skip: h,
+        onClick: this.handleItemClick,
+        itemRender: i,
+        groupHeaderItemRender: l,
+        noDataRender: n,
+        onMouseDown: (b) => b.preventDefault(),
+        onScroll: this.onScroll,
+        wrapperRef: o.scrollerRef,
+        scroller: this.base.renderScrollElement(),
+        ariaSetSize: a.total
+      }
+    );
+  }
+  renderSearchBar(s, e, t) {
+    const {
+      tabIndex: n,
+      disabled: i,
+      data: l = [],
+      dataItemKey: d,
+      virtual: a = { skip: 0 }
+    } = this.props, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = this.value, h = Math.max(0, l.findIndex((p) => C(p, o, d)));
+    return this._suggested && !C(this._valueOnDidUpdate, o, d) && (this._suggested = ""), /* @__PURE__ */ u.createElement(
+      ue,
+      {
+        id: e,
+        readOnly: r && this.mobileMode,
+        placeholder: t,
+        tabIndex: n,
+        title: this.props.title,
+        accessKey: this.props.accessKey,
+        value: s + this._suggested,
+        suggestedText: this._suggested,
+        ref: (p) => this._input = p && p.input,
+        onClick: this.onInputClick,
+        onKeyDown: this.onInputKeyDown,
+        onChange: this.inputOnChange,
+        onFocus: this.base.handleFocus,
+        onBlur: this.handleBlur,
+        disabled: i,
+        expanded: r,
+        owns: this.base.listBoxId,
+        activedescendant: `option-${this.base.guid}-${h + a.skip}`,
+        role: "combobox",
+        ariaLabelledBy: this.props.ariaLabelledBy,
+        ariaDescribedBy: this.props.ariaDescribedBy,
+        ariaRequired: this.required,
+        render: this.props.valueRender
+      }
+    );
+  }
+  clearValue() {
+    const s = this.base.initState();
+    this._suggested = "", this.base.filterChanged("", s), this.props.filter === void 0 && this.state.text !== void 0 && (s.data.text = void 0), this.triggerOnChange(null, s);
+    const e = this.props.opened !== void 0 ? this.props.opened : this.state.opened, t = this.mobileMode;
+    e && !t && this.base.togglePopup(s), this.applyState(s);
+  }
+  triggerOnChange(s, e) {
+    const t = this.value;
+    !k(t) && !k(s) || C(t, s, this.props.dataItemKey) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
+  }
+  getFocusedIndex() {
+    const s = this.value, { data: e = [], textField: t, dataItemKey: n, virtual: i = { skip: 0 }, focusedItemIndex: l = K, skipDisabledItems: d } = this.props, a = this.props.filter ? this.props.filter : this.state.text;
+    return k(s) && a === void 0 ? e.findIndex((r) => C(r, s, n)) : a ? l(e, a, t) : d && t && !a && i.skip === 0 ? e.findIndex((r) => !r.disabled && r[t]) : i.skip === 0 ? 0 : -1;
+  }
+  suggestValue(s) {
+    const { data: e, textField: t } = this.props;
+    this._suggested = he(s, e, t);
+  }
+  applyState(s) {
+    this.base.applyState(s), this._valueDuringOnChange = void 0;
+  }
+  calculateMedia(s) {
+    for (const e of s)
+      this.setState({ windowWidth: e.target.clientWidth });
+  }
+};
+w.displayName = "ComboBox", w.propTypes = {
+  ...B.propTypes,
+  size: f.oneOf([null, "small", "medium", "large"]),
+  rounded: f.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: f.oneOf([null, "solid", "flat", "outline"]),
+  dataItemKey: f.string,
+  groupField: f.string,
+  groupMode: f.oneOf([void 0, "classic", "modern"]),
+  isMultiColumn: f.bool,
+  suggest: f.bool,
+  placeholder: f.string,
+  title: f.string,
+  allowCustom: f.bool,
+  clearButton: f.bool,
+  iconClassName: f.string,
+  svgIcon: oe,
+  validationMessage: f.string,
+  required: f.bool,
+  id: f.string,
+  ariaLabelledBy: f.string,
+  ariaDescribedBy: f.string,
+  list: f.any,
+  valueRender: f.func,
+  skipDisabledItems: f.bool
+}, w.defaultProps = {
+  ...B.defaultProps,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  allowCustom: !1,
+  clearButton: !0,
+  required: !1,
+  groupMode: "modern",
+  isMultiColumn: !1,
+  skipDisabledItems: !0,
+  prefix: void 0,
+  suffix: void 0
+};
+let T = w;
+const we = ne(), Ee = le(re(we, T));
+Ee.displayName = "KendoReactComboBox";
+export {
+  Ee as ComboBox,
+  we as ComboBoxPropsContext,
+  T as ComboBoxWithoutContext
+};

package/DropDownList/DropDownList.js

@@ -0,0 +1,8 @@
+/**
+ * @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";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Y=require("react"),w=require("prop-types"),d=require("@progress/kendo-react-common"),J=require("@progress/kendo-react-labels"),B=require("@progress/kendo-svg-icons"),Q=require("../common/ListContainer.js"),X=require("../common/ListFilter.js"),H=require("../common/GroupStickyHeader.js"),Z=require("../common/ListDefaultItem.js"),ee=require("../common/List.js"),R=require("../common/DropDownBase.js"),I=require("../common/utils.js"),te=require("../package-metadata.js"),W=require("@progress/kendo-react-buttons"),se=require("@progress/kendo-react-intl"),T=require("../messages/index.js"),F=require("../common/constants.js"),q=require("@progress/kendo-react-layout");function ie(_){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(_){for(const e in _)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(_,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>_[e]})}}return s.default=_,Object.freeze(s)}const c=ie(Y),ae="Please select a value from the list!",{sizeMap:z,roundedMap:ne}=d.kendoThemeMaps,E=class E extends c.Component{constructor(s){super(s),this.state={},this._element=null,this.base=new R(this),this.searchState={word:"",last:""},this._select=null,this._skipFocusEvent=!1,this._filterInput=null,this._navigated=!1,this._lastKeypressIsFilter=!1,this.itemHeight=0,this.focus=()=>{this.base.wrapper&&this.base.wrapper.focus()},this.handleItemSelect=(e,t)=>{const{data:a=[],virtual:l,dataItemKey:n,defaultItem:o}=this.props,u=l?l.skip:0,p=e===-1&&o!==void 0?o:a[e-u],h=!I.areSame(p,this.value,n);this.triggerOnChange(p,t),h&&this.base.triggerPageChangeCornerItems(p,t)},this.componentRef=e=>{this._element=e,this.base.wrapper=e},this.dummySelect=e=>c.createElement("select",{name:this.props.name,ref:t=>{this._select=t},tabIndex:-1,"aria-hidden":!0,title:this.props.label,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},c.createElement("option",{value:this.props.valueMap?this.props.valueMap.call(void 0,e):e})),this.renderListContainer=()=>{const{header:e,footer:t,dir:a,data:l=[],size:n,groupField:o,groupStickyHeaderItemRender:u,list:p}=this.props,h=this.base,i=h.getPopupSettings(),v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=i.width!==void 0?i.width:h.popupWidth,k={dir:a!==void 0?a:h.dirCalculated,width:b,popupSettings:{...i,popupClass:d.classNames(i.popupClass,"k-list-container","k-dropdownlist-popup"),anchor:i.anchor||this.element,show:v,onOpen:this.onPopupOpened,onClose:this.onPopupClosed},itemsCount:[l.length]};let{group:g}=this.state;return g===void 0&&o!==void 0&&(g=I.getItemValue(l[0],o)),c.createElement(Q,{...k},this.renderListFilter(),e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[n]||n}`]:n,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!p&&g&&l.length!==0&&c.createElement(H,{group:g,groupMode:"modern",render:u}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t))},this.renderList=()=>{const{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0,total:void 0},groupHeaderItemRender:n,listNoDataRender:o,itemRender:u}=this.props,p=this.base.vs,h=l.skip,i=this.props.opened!==void 0?this.props.opened:this.state.opened,v=this.base.getPopupSettings(),b=`translateY(${p.translate}px)`;return c.createElement(ee,{id:this._listboxId,show:i,data:e.slice(),focusedIndex:this.getFocusedIndex(),value:this.value,textField:t,valueField:a,optionsGuid:this._guid,groupField:this.props.groupField,groupMode:"modern",listRef:k=>p.list=this.base.list=k,wrapperStyle:{maxHeight:v.height},wrapperCssClass:"k-list-content",listStyle:p.enabled?{transform:b}:void 0,key:"listkey",skip:h,onClick:this.handleItemClick,itemRender:u,groupHeaderItemRender:n,noDataRender:o,onScroll:this.onScroll,wrapperRef:p.scrollerRef,scroller:this.base.renderScrollElement(),ariaSetSize:l.total})},this.onScroll=e=>{const{vs:t,list:a}=this.base;t.scrollHandler(e);const{groupField:l}=this.props;let{data:n=[]}=this.props;if(!(!l||!n.length)&&l){const o=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:a?a.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*o;n=this.base.getGroupedDataModernMode(n,l);let h=n[0][l];for(let i=1;i<n.length&&!(o*i>p);i++)n[i]&&n[i][l]&&(h=n[i][l]);h!==this.state.group&&this.setState({group:h})}},this.renderListFilter=()=>{const e=this.props.filter!==void 0?this.props.filter:this.state.text;return this.props.filterable&&c.createElement(X,{value:e,ref:t=>this._filterInput=t&&t.element,onChange:this.handleListFilterChange,onKeyDown:this.handleKeyDown,size:this.props.size,rounded:this.props.rounded,fillMode:this.props.fillMode})},this.renderDefaultItem=()=>{const{textField:e,defaultItem:t,dataItemKey:a}=this.props;return t!==void 0&&c.createElement(Z,{defaultItem:t,textField:e,selected:I.areSame(this.value,t,a),key:"defaultitemkey",onClick:this.handleDefaultItemClick})},this.search=e=>{clearTimeout(this._typingTimeout),this.props.filterable||(this._typingTimeout=window.setTimeout(()=>this.searchState.word="",this.props.delay),this.selectNext(e))},this.selectNext=e=>{const{data:t=[],dataItemKey:a}=this.props;let l=t.map((C,N)=>({item:C,itemIndex:N}));const n=this.searchState.word,o=this.searchState.last,u=I.sameCharsOnly(n,o);let p=l.length,h=Math.max(0,t.findIndex(C=>I.areSame(C,this.value,a))),i;this.props.defaultItem&&(i={item:this.props.defaultItem,itemIndex:-1},p+=1,h+=1),h+=u?1:0,l=I.shuffleData(l,h,i);let v,b,k,g=0;const{textField:r,ignoreCase:x}=this.props;for(;g<p;g++)if(v=I.getItemValue(l[g].item,r),b=u&&I.matchText(v,o,x),k=I.matchText(v,n,x),b||k){g=l[g].itemIndex;break}if(g!==p){const C=this.base.initState();C.syntheticEvent=e,this.handleItemSelect(g,C),this.applyState(C),this._valueDuringOnChange=void 0}},this.handleKeyDown=e=>{e&&e.target instanceof Element&&e.target.nodeName==="INPUT"&&e.stopPropagation&&e.stopPropagation();const{data:t=[],filterable:a,disabled:l,defaultItem:n,leftRightKeysNavigation:o=!0,virtual:u={skip:0,total:0,pageSize:0},dataItemKey:p,groupField:h="",textField:i,skipDisabledItems:v=!0}=this.props,b=this.value,k=t.findIndex(y=>I.areSame(y,b,p)),g=this.props.opened!==void 0?this.props.opened:this.state.opened,r=e.keyCode,x=r===d.Keys.home||r===d.Keys.end,C=r===d.Keys.up||r===d.Keys.down,N=!g&&(e.altKey&&r===d.Keys.down||r===d.Keys.enter||r===d.Keys.space),L=g&&(e.altKey&&r===d.Keys.up||r===d.Keys.esc),D=o&&(r===d.Keys.left||r===d.Keys.right),P=C||D&&!a||x,S=this.base.initState();if(S.syntheticEvent=e,!l){if(x&&this.base.vs.enabled)r===d.Keys.home?u.skip!==0?(this.base.triggerOnPageChange(S,0,u.pageSize),this._navigated=!0):this.triggerOnChange(t[0],S):u.skip<u.total-u.pageSize?(this.base.triggerOnPageChange(S,u.total-u.pageSize,u.pageSize),this._navigated=!0):this.triggerOnChange(t[t.length-1],S);else if(g&&r===d.Keys.pageUp)this.base.scrollPopupByPageSize(-1);else if(g&&r===d.Keys.pageDown)this.base.scrollPopupByPageSize(1);else if(g&&r===d.Keys.enter){const y=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(t,y)?(this.triggerOnChange(null,S),this.applyState(S)):this.handleItemSelect(y,S),this.base.togglePopup(S),e.preventDefault()}else if(N||L)L&&this.resetValueIfDisabledItem(),this.base.togglePopup(S),e.preventDefault();else if(P){if(this._lastKeypressIsFilter=!1,h!==""&&i)if(!v&&g)this.onNavigate(S,r);else{let y;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(k+1).find(m=>!m.disabled&&m[i]);y=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(k===0&&n)y=-1;else if(k===-1)f=t,y=t.findIndex(m=>!m.disabled&&m[i]);else{f=t.slice(0,k);let m=f.pop();for(;m&&m.disabled;)m=f.pop();y=m&&t.findIndex(M=>M[i]===m[i])}}if(y!==void 0){const f=y-k;this.onNavigate(S,r,f)}else y===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else if(!v&&g||x)this.onNavigate(S,r);else if(i){let y;if(r===d.Keys.down||r===d.Keys.right){const f=t.slice(k+1).find(m=>!m.disabled&&m[i]);y=f&&t.findIndex(m=>m[i]===f[i])}else if(r===d.Keys.up||r===d.Keys.left){let f;if(k===0&&n)y=-1;else if(k===-1)f=t,y=t.find(m=>!m.disabled&&m[i]);else{f=t.slice(0,k);let m=f.pop();for(;m&&m.disabled;)m=f.pop();y=m&&t.findIndex(M=>M[i]===m[i])}}if(y!==void 0){const f=y-k;this.onNavigate(S,r,f)}else y===void 0&&t.findIndex(f=>f[i]===b[i])===t.length-1&&this.onNavigate(S,r)}else this.onNavigate(S,r);e.preventDefault()}this.applyState(S)}},this.handleItemClick=(e,t)=>{this.base.handleItemClick(e,t),this._valueDuringOnChange=void 0},this.handleFocus=e=>{this._skipFocusEvent||this.base.handleFocus(e)},this.handleBlur=e=>{if(this._skipFocusEvent||!this.state.focused)return;const t=this.props.opened!==void 0?this.props.opened:this.state.opened,{adaptive:a}=this.props,{windowWidth:l=0}=this.state,n=l<=F.MOBILE_MEDIUM_DEVISE&&a,o=this.base.initState();o.syntheticEvent=e,o.data.focused=!1,o.events.push({type:"onBlur"}),t&&this.resetValueIfDisabledItem(),t&&!n&&this.base.togglePopup(o),this.applyState(o)},this.handleDefaultItemClick=e=>{const t=this.base.initState();t.syntheticEvent=e,this.base.togglePopup(t),this.triggerOnChange(this.props.defaultItem,t),this.applyState(t)},this.handleWrapperClick=e=>{if(e.isPropagationStopped())return;const t=this.base.initState();t.syntheticEvent=e,this.state.focused||(t.data.focused=!0),this.resetValueIfDisabledItem(),this.base.togglePopup(t),this.applyState(t)},this.handleKeyPress=e=>{if(this.props.filterable||e.which===0||e.keyCode===d.Keys.enter)return;let t=String.fromCharCode(e.charCode||e.keyCode);this.props.ignoreCase&&(t=t.toLowerCase()),t===" "&&e.preventDefault(),this.searchState={word:this.searchState.word+t,last:this.searchState.last+t},this.search(e)},this.handleListFilterChange=e=>{const t=this.base.initState();t.syntheticEvent=e.syntheticEvent,this.props.filter===void 0&&(t.data.text=e.target.value),this.base.filterChanged(e.target.value,t),this._lastKeypressIsFilter=!0,this.applyState(t),this.setState({group:void 0})},this.onPopupOpened=()=>{this._filterInput&&this.focusElement(this._filterInput),this.props.adaptive&&setTimeout(()=>{this._filterInput&&this.focusElement(this._filterInput)},300)},this.onPopupClosed=()=>{this.state.focused&&window.setTimeout(()=>{this.state.focused&&this.base.wrapper&&this.focusElement(this.base.wrapper)})},this.setValidity=()=>{this._select&&this._select.setCustomValidity&&this._select.setCustomValidity(this.validity.valid?"":this.props.validationMessage||ae)},d.validatePackage(te.packageMetadata)}get _inputId(){return this.props.id+"-accessibility-id"}get _listboxId(){return this.props.id+"-listbox-id"}get _guid(){return this.props.id+"-guid"}get document(){if(d.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get value(){let s;return this._valueDuringOnChange!==void 0?s=this._valueDuringOnChange:this.props.value!==void 0?s=this.props.value:this.state.value!==void 0?s=this.state.value:this.props.defaultValue!==void 0&&(s=this.props.defaultValue),!I.isPresent(s)&&this.props.defaultItem!==void 0&&(s=this.props.defaultItem),s}get index(){const{data:s=[],dataItemKey:e}=this.props,t=this.value;return s.findIndex(a=>I.areSame(a,t,e))}get name(){return this.props.name}get validity(){const s=this.props.validationMessage!==void 0,e=!this.required||this.value!==null&&this.value!==""&&this.value!==void 0,t=this.props.valid!==void 0?this.props.valid:e;return{customError:s,valid:t,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:E.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:E.defaultProps.required}componentDidUpdate(s,e){var v;const{dataItemKey:t,virtual:a,groupField:l="",textField:n}=this.props,{data:o=[]}=this.props,u=s.virtual?s.virtual.total:0,p=this.props.opened!==void 0?this.props.opened:this.state.opened,h=s.opened!==void 0?s.opened:e.opened,i=!h&&p;if(this.base.getPopupSettings().animate||i&&this.onPopupOpened(),a&&a.total!==u)this.base.vs.calcScrollElementHeight(),this.base.vs.reset();else{const b=this.value,k=s.value!==void 0?s.value:e.value;let g=o.findIndex(x=>I.areSame(x,b,t));l!==""&&b&&n&&(g=(v=this.base.getGroupedDataModernMode(o,l))==null?void 0:v.map(x=>x[n]).indexOf(b[n]));const r=!I.areSame(k,b,t);i&&a?this.base.scrollToVirtualItem(a,g):i&&!a?(this.onPopupOpened(),o&&o.length!==0&&this.base.resetGroupStickyHeader(o[0][l],this),this.base.scrollToItem(g)):p&&h&&b&&r&&!this._navigated?this.base.scrollToItem(g):p&&h&&this._navigated&&(this._navigated&&a&&a.skip===0?this.base.vs.reset():this._navigated&&a&&a.skip===a.total-a.pageSize&&this.base.vs.scrollToEnd())}this._navigated=!1,this.setValidity()}componentDidMount(){var s;this.observerResize=d.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.base.didMount(),this.setValidity(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentWillUnmount(){var s;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const s=se.provideLocalizationService(this).toLanguageString(T.dropDownListArrowBtnAriaLabel,T.messages[T.dropDownListArrowBtnAriaLabel]),{style:e,className:t,label:a,dir:l,virtual:n,size:o,rounded:u,fillMode:p,adaptive:h}=this.props,{windowWidth:i=0}=this.state,v=this.props.opened!==void 0?this.props.opened:this.state.opened,b=this.value,k=I.getItemValue(b,this.props.textField),g=!this.validityStyles||this.validity.valid,r=this.base,x=r.vs,C=i<=F.MOBILE_MEDIUM_DEVISE&&h;x.enabled=n!==void 0,n!==void 0&&(r.vs.skip=n.skip,r.vs.total=n.total,r.vs.pageSize=n.pageSize);const{dataItemKey:N,data:L=[],disabled:D,tabIndex:P,loading:S,iconClassName:y,svgIcon:f,valueRender:m}=this.props,{focused:M}=this.state,$=L.findIndex(K=>I.areSame(K,b,N)),V=c.createElement("span",{id:this._inputId,className:"k-input-inner"},c.createElement("span",{className:"k-input-value-text"},k)),j=m!==void 0?m.call(void 0,V,b):V,A=c.createElement(c.Fragment,null,c.createElement("span",{ref:this.componentRef,className:d.classNames("k-dropdownlist k-picker",t,{[`k-picker-${z[o]||o}`]:o,[`k-rounded-${ne[u]||u}`]:u,[`k-picker-${p}`]:p,"k-focus":M,"k-disabled":D,"k-invalid":!g,"k-loading":S,"k-required":this.required}),style:a?{...e,width:void 0}:e,dir:l,onMouseDown:v?K=>{K.target.nodeName!=="INPUT"&&(this.focusElement(this.base.wrapper),K.preventDefault())}:void 0,onFocus:this.handleFocus,onBlur:this.handleBlur,tabIndex:d.getTabIndex(P,D),accessKey:this.props.accessKey,onKeyDown:this.handleKeyDown,onKeyPress:this.handleKeyPress,onClick:D?void 0:this.handleWrapperClick,role:"combobox","aria-required":this.required,"aria-disabled":D||void 0,"aria-haspopup":"listbox","aria-expanded":v||!1,"aria-owns":this._listboxId,"aria-activedescendant":v?"option-"+this._guid+"-"+($+(n?n.skip:0)):void 0,"aria-label":this.props.ariaLabel||this.props.label,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy||this._inputId,id:this.props.id,title:this.props.title},j,S&&c.createElement(d.IconWrap,{className:"k-input-loading-icon",name:"loading"}),c.createElement(W.Button,{tabIndex:-1,type:"button","aria-label":s,"aria-hidden":!0,size:o,fillMode:p,iconClass:y,className:"k-input-button",rounded:null,themeColor:"base",icon:y?void 0:"caret-alt-down",svgIcon:f||B.caretAltDownIcon,onMouseDown:K=>this.state.focused&&K.preventDefault()}),this.dummySelect(b),!C&&this.renderListContainer()),C&&this.renderAdaptiveListContainer());return a?c.createElement(J.FloatingLabel,{label:a,editorValue:k,editorValid:g,editorDisabled:this.props.disabled,style:{width:e?e.width:void 0},children:A}):A}onNavigate(s,e,t){const{data:a=[],defaultItem:l,dataItemKey:n,virtual:o={skip:0,total:0,pageSize:0}}=this.props,u=this.base.vs,p=this.value,h=a.findIndex(v=>I.areSame(v,p,n)),i=this.base.navigation.navigate({current:o.skip+h,max:(u.enabled?o.total:a.length)-1,min:l!==void 0?-1:0,keyCode:e,skipItems:t||void 0});i!==void 0&&this.handleItemSelect(i,s),this.applyState(s)}renderAdaptiveListContainer(){const{windowWidth:s=0}=this.state,{header:e,footer:t,size:a,adaptiveTitle:l,groupField:n,groupStickyHeaderItemRender:o,list:u,data:p=[]}=this.props,h=this.props.opened!==void 0?this.props.opened:this.state.opened,i={navigatable:!1,navigatableElements:[],expand:h,animation:!0,onClose:b=>this.handleWrapperClick(b),animationStyles:s<=F.MOBILE_SMALL_DEVISE?{top:0,width:"100%",height:"100%"}:void 0,className:s<=F.MOBILE_SMALL_DEVISE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};let{group:v}=this.state;return v===void 0&&n!==void 0&&(v=I.getItemValue(p[0],n)),c.createElement(q.ActionSheet,{...i},c.createElement(q.ActionSheetHeader,{className:"k-text-center"},c.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},c.createElement("div",{className:"k-actionsheet-title"},c.createElement("div",null,l)),c.createElement("div",{className:"k-actionsheet-actions"},c.createElement(W.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.handleWrapperClick,icon:"x",svgIcon:B.xIcon}))),c.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},this.renderListFilter())),c.createElement(q.ActionSheetContent,{className:"!k-overflow-hidden"},e&&c.createElement("div",{className:"k-list-header"},e),c.createElement("div",{className:d.classNames("k-list",{[`k-list-${z[a]||a}`]:a,"k-virtual-list":this.base.vs.enabled})},this.renderDefaultItem(),!u&&v&&p.length!==0&&c.createElement(H,{group:v,groupMode:"modern",render:o}),this.renderList()),t&&c.createElement("div",{className:"k-list-footer"},t)))}getFocusedIndex(){const s=this.value,{data:e=[],textField:t,dataItemKey:a,virtual:l={skip:0},focusedItemIndex:n=I.itemIndexStartsWith,filterable:o,skipDisabledItems:u=!0}=this.props,p=this.props.filter?this.props.filter:this.state.text;return u&&t&&!p&&!s?e.findIndex(h=>!h.disabled&&h[t]):I.isPresent(s)&&p===void 0||o&&p===""?e.findIndex(h=>I.areSame(h,s,a)):p?this._lastKeypressIsFilter?n(e,p,t):e.findIndex(h=>I.areSame(h,s,a)):l.skip===0?0:-1}focusElement(s){this._skipFocusEvent=!0,s.focus(),window.setTimeout(()=>this._skipFocusEvent=!1,30)}triggerOnChange(s,e){I.areSame(this.value,s,this.props.dataItemKey)||(this.props.value===void 0&&(e.data.value=s),this._valueDuringOnChange=s,e.events.push({type:"onChange"}))}applyState(s){this.base.applyState(s),this._valueDuringOnChange=void 0}calculateMedia(s){for(const e of s)this.setState({windowWidth:e.target.clientWidth})}resetValueIfDisabledItem(){const{data:s=[]}=this.props,e=this.base.initState(),t=this.getFocusedIndex();this.haveFocusedItemAndDataNotEmpty(s,t)&&(this.triggerOnChange(null,e),this.applyState(e))}haveFocusedItemAndDataNotEmpty(s,e){return e!==void 0&&e!==-1&&s&&s.length>0&&s[e].disabled}};E.displayName="DropDownList",E.propTypes={delay:w.number,ignoreCase:w.bool,iconClassName:w.string,svgIcon:d.svgIconPropType,defaultItem:w.any,valueRender:w.func,valueMap:w.func,validationMessage:w.string,required:w.bool,id:w.string,ariaLabelledBy:w.string,ariaDescribedBy:w.string,ariaLabel:w.string,leftRightKeysNavigation:w.bool,title:w.string,groupField:w.string,list:w.any,skipDisabledItems:w.bool,...R.propTypes},E.defaultProps={delay:500,tabIndex:0,ignoreCase:!0,...R.defaultProps,required:!1,size:"medium",rounded:"medium",fillMode:"solid",groupMode:"modern"};let O=E;const U=d.createPropsContext(),G=d.withIdHOC(d.withPropsContext(U,O));G.displayName="KendoReactDropDownList";exports.DropDownList=G;exports.DropDownListPropsContext=U;exports.DropDownListWithoutContext=O;