@progress/kendo-react-dropdowns 9.0.0-develop.17 → 9.0.0-develop.19

package/DropDownList/DropDownList.mjs

@@ -6,632 +6,642 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as u from "react";
-import C from "prop-types";
-import { classNames as x, uDropDownList as D, Keys as I, validatePackage as ee, svgIconPropType as te, canUseDOM as B, getTabIndex as se, IconWrap as ie, uDropDownsActionSheet as K, createPropsContext as ae, withIdHOC as oe, withPropsContext as ne, withUnstyledHOC as re } from "@progress/kendo-react-common";
-import { FloatingLabel as le } from "@progress/kendo-react-labels";
-import { caretAltDownIcon as de, xIcon as pe } from "@progress/kendo-svg-icons";
-import he from "../common/ListContainer.mjs";
-import ce from "../common/ListFilter.mjs";
-import W from "../common/GroupStickyHeader.mjs";
-import ue from "../common/ListDefaultItem.mjs";
-import me from "../common/List.mjs";
-import R from "../common/DropDownBase.mjs";
-import { getFilteredData as E, areSame as k, getItemValue as T, sameCharsOnly as fe, shuffleData as ge, matchText as q, isPresent as U, itemIndexStartsWith as ve } from "../common/utils.mjs";
-import { packageMetadata as be } from "../package-metadata.mjs";
-import { Button as G } from "@progress/kendo-react-buttons";
-import { provideLocalizationService as Ie } from "@progress/kendo-react-intl";
-import { dropDownListArrowBtnAriaLabel as Y, messages as ye } from "../messages/index.mjs";
-import { MOBILE_SMALL_DEVISE as $, MOBILE_MEDIUM_DEVISE as j } from "../common/constants.mjs";
-import { ActionSheet as we, ActionSheetHeader as Se, ActionSheetContent as xe } from "@progress/kendo-react-layout";
-const Ce = "Please select a value from the list!", N = class N extends u.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({ preventScroll: !0 });
-    }, this.handleItemSelect = (e, t) => {
-      const { virtual: a, dataItemKey: h, defaultItem: n } = this.props, l = E(this.props), b = a ? a.skip : 0, d = e === -1 && n !== void 0 ? n : l[e - b], i = !k(d, this.value, h);
-      this.triggerOnChange(d, t), i && this.base.triggerPageChangeCornerItems(d, t);
-    }, this.componentRef = (e) => {
-      this._element = e, this.base.wrapper = e;
-    }, this.dummySelect = (e) => /* @__PURE__ */ u.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%" }
+import * as i from "react";
+import k from "prop-types";
+import { validatePackage as Yt, useUnstyled as $t, useId as jt, usePropsContext as Jt, canUseDOM as tt, classNames as C, uDropDownList as M, getTabIndex as Qt, IconWrap as Xt, svgIconPropType as Zt, createPropsContext as Rt, Keys as w, uDropDownsActionSheet as J } from "@progress/kendo-react-common";
+import { FloatingLabel as en } from "@progress/kendo-react-labels";
+import { caretAltDownIcon as tn, xIcon as nn } from "@progress/kendo-svg-icons";
+import rn from "../common/ListContainer.mjs";
+import on from "../common/ListFilter.mjs";
+import nt from "../common/GroupStickyHeader.mjs";
+import an from "../common/ListDefaultItem.mjs";
+import ln from "../common/List.mjs";
+import dt from "../common/DropDownBase.mjs";
+import { getFilteredData as P, areSame as N, getItemValue as fe, isPresent as rt, itemIndexStartsWith as sn, sameCharsOnly as dn, shuffleData as cn, matchText as ot } from "../common/utils.mjs";
+import { packageMetadata as un } from "../package-metadata.mjs";
+import { Button as it } from "@progress/kendo-react-buttons";
+import { useLocalization as pn } from "@progress/kendo-react-intl";
+import { dropDownListArrowBtnAriaLabel as at, messages as mn } from "../messages/index.mjs";
+import { MOBILE_SMALL_DEVISE as lt, MOBILE_MEDIUM_DEVISE as st } from "../common/constants.mjs";
+import { ActionSheet as fn, ActionSheetHeader as gn, ActionSheetContent as vn } from "@progress/kendo-react-layout";
+const In = "Please select a value from the list!", Ne = i.forwardRef((E, ct) => {
+  Yt(un);
+  const F = $t(), ge = jt(E.id), r = Jt(hn, E), {
+    delay: ut = O.delay,
+    tabIndex: pt = O.tabIndex,
+    ignoreCase: ve = O.ignoreCase,
+    size: Q = O.size,
+    rounded: Fe = O.rounded,
+    fillMode: Ie = O.fillMode,
+    groupMode: wn = O.groupMode
+  } = r, he = () => {
+    if (tt)
+      return q.current && q.current.ownerDocument || window.document;
+  }, mt = () => {
+    var e, n;
+    (e = t == null ? void 0 : t.current) != null && e.wrapper && ((n = t == null ? void 0 : t.current) == null || n.wrapper.focus({ preventScroll: !0 }));
+  }, L = () => {
+    let e;
+    return V.current !== void 0 && V.current !== null ? e = V.current : r.value !== void 0 ? e = r.value : m.value !== void 0 && m.value !== null ? e = m.value : r.defaultValue !== void 0 && r.defaultValue !== null && (e = r.defaultValue), !rt(e) && r.defaultItem !== void 0 && r.defaultItem !== null && (e = r.defaultItem), e;
+  }, ft = () => {
+    const { dataItemKey: e } = r, n = P(E), a = L();
+    return n.findIndex((c) => N(c, a, e));
+  }, we = () => r.required !== void 0 ? r.required : O.required, ye = () => {
+    const e = r.validationMessage !== void 0, n = L(), a = !we() || n !== null && n !== "" && n !== void 0, c = r.valid !== void 0 ? r.valid : a;
+    return {
+      customError: e,
+      valid: c,
+      valueMissing: n === null
+    };
+  }, gt = () => r.validityStyles !== void 0 ? r.validityStyles : O.validityStyles, ne = (e) => {
+    oe.current = !0, e.focus(), window.setTimeout(() => oe.current = !1, 30);
+  }, Se = () => {
+    Z.current && ne(Z.current), r.adaptive && setTimeout(() => {
+      Z.current && ne(Z.current);
+    }, 300);
+  }, vt = (e) => {
+    for (const n of e)
+      n.target.clientWidth !== ie.current.windowWidth && Y({ windowWidth: n.target.clientWidth });
+  }, Ke = () => {
+    re.current && re.current.setCustomValidity && re.current.setCustomValidity(
+      ye().valid ? "" : r.validationMessage || In
+    );
+  }, U = (e, n) => {
+    const a = L();
+    N(a, e, r.dataItemKey) || (r.value === void 0 && (n.data.value = e), t.current.updateComponentArgs({ value: e }), V.current = e, n.events.push({ type: "onChange" }));
+  }, K = (e) => {
+    var n;
+    (n = t == null ? void 0 : t.current) == null || n.applyState(e), V.current = void 0;
+  }, X = (e, n) => {
+    var s;
+    const { virtual: a, dataItemKey: c, defaultItem: d } = r, u = P(E), I = a ? a.skip : 0, f = L(), o = e === -1 && d !== void 0 ? d : u[e - I], p = !N(o, f, c);
+    U(o, n), p && ((s = t == null ? void 0 : t.current) == null || s.triggerPageChangeCornerItems(o, n));
+  }, A = (e, n, a) => {
+    var S, g;
+    const { defaultItem: c, dataItemKey: d, virtual: u = { skip: 0, total: 0, pageSize: 0 } } = r, I = L(), f = P(E), o = (S = t == null ? void 0 : t.current) == null ? void 0 : S.vs, p = f.findIndex((h) => N(h, I, d)), s = (g = t == null ? void 0 : t.current) == null ? void 0 : g.navigation.navigate({
+      current: u.skip + p,
+      max: (o != null && o.enabled ? u.total : f.length) - 1,
+      min: c !== void 0 ? -1 : 0,
+      keyCode: n,
+      skipItems: a || void 0
+    });
+    s !== void 0 && X(s, e), K(e);
+  }, It = (e) => {
+    q.current = e, t.current.wrapper = e;
+  }, ht = (e) => /* @__PURE__ */ i.createElement(
+    "select",
+    {
+      name: r.name,
+      ref: (n) => {
+        re.current = n;
       },
-      /* @__PURE__ */ u.createElement("option", { value: this.props.valueMap ? this.props.valueMap.call(void 0, e) : e })
-    ), this.renderListContainer = () => {
-      const { header: e, footer: t, dir: a, size: h, groupField: n, groupStickyHeaderItemRender: l, list: b, unstyled: d } = this.props, i = E(this.props), c = this.base, o = c.getPopupSettings(), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = o.width !== void 0 ? o.width : c.popupWidth, p = d && d.uDropDownList, r = {
-        dir: a !== void 0 ? a : c.dirCalculated,
-        width: g,
-        popupSettings: {
-          ...o,
-          popupClass: x(
-            o.popupClass,
-            D.listContainer({
-              c: p
-            })
-          ),
-          anchor: o.anchor || this.element,
-          show: f,
-          onOpen: this.onPopupOpened,
-          onClose: this.onPopupClosed,
-          onMouseDownOutside: this.onPopupMouseDown
-        },
-        itemsCount: [i.length]
-      };
-      let { group: w } = this.state;
-      return w === void 0 && n !== void 0 && (w = T(i[0], n)), /* @__PURE__ */ u.createElement(he, { ...r }, this.renderListFilter(), e && /* @__PURE__ */ u.createElement("div", { className: x(D.listHeader({ c: p })) }, e), /* @__PURE__ */ u.createElement(
-        "div",
-        {
-          className: x(
-            D.list({
-              c: p,
-              size: h,
-              virtual: this.base.vs.enabled
-            })
-          )
-        },
-        this.renderDefaultItem(),
-        !b && w && i.length !== 0 && /* @__PURE__ */ u.createElement(W, { group: w, groupMode: "modern", render: l }),
-        this.renderList()
-      ), t && /* @__PURE__ */ u.createElement("div", { className: x(D.listFooter({ c: p })) }, t));
-    }, this.renderList = () => {
-      const {
-        textField: e,
-        dataItemKey: t,
-        virtual: a = { skip: 0, total: void 0 },
-        groupHeaderItemRender: h,
-        listNoDataRender: n,
-        itemRender: l,
-        unstyled: b
-      } = this.props, d = E(this.props), i = b && b.uDropDownList, c = this.base.vs, o = a.skip, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getPopupSettings(), p = `translateY(${c.translate}px)`;
-      return /* @__PURE__ */ u.createElement(
-        me,
-        {
-          id: this._listboxId,
-          show: f,
-          data: d.slice(),
-          focusedIndex: this.getFocusedIndex(),
-          value: this.value,
-          textField: e,
-          valueField: t,
-          optionsGuid: this._guid,
-          groupField: this.props.groupField,
-          groupMode: "modern",
-          listRef: (r) => c.list = this.base.list = r,
-          wrapperStyle: { maxHeight: g.height },
-          wrapperCssClass: x(D.listContent({ c: i })),
-          listStyle: c.enabled ? { transform: p } : void 0,
-          key: "listkey",
-          skip: o,
-          onClick: this.handleItemClick,
-          itemRender: l,
-          groupHeaderItemRender: h,
-          noDataRender: n,
-          onScroll: this.onScroll,
-          wrapperRef: c.scrollerRef,
-          scroller: this.base.renderScrollElement(),
-          ariaSetSize: a.total
-        }
-      );
-    }, this.onScroll = (e) => {
-      const { vs: t, list: a } = this.base;
-      t.scrollHandler(e);
-      const { groupField: h } = this.props;
-      let n = E(this.props);
-      if (!(!h || !n.length) && h) {
-        const l = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a ? a.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * l;
-        n = this.base.getGroupedDataModernMode(n, h);
-        let i = n[0][h];
-        for (let c = 1; c < n.length && !(l * c > d); c++)
-          n[c] && n[c][h] && (i = n[c][h]);
-        i !== this.state.group && this.setState({
-          group: i
-        });
-      }
-    }, this.renderListFilter = () => {
-      const e = this.props.filter !== void 0 ? this.props.filter : this.state.text;
-      return this.props.filterable && /* @__PURE__ */ u.createElement(
-        ce,
-        {
-          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,
-          renderListFilterWrapper: !0
-        }
-      );
-    }, this.renderDefaultItem = () => {
-      const { textField: e, defaultItem: t, dataItemKey: a } = this.props;
-      return t !== void 0 && /* @__PURE__ */ u.createElement(
-        ue,
-        {
-          defaultItem: t,
-          textField: e,
-          selected: k(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 { dataItemKey: t } = this.props, a = E(this.props);
-      let h = a.map((F, M) => ({ item: F, itemIndex: M }));
-      const n = this.searchState.word, l = this.searchState.last, b = fe(n, l);
-      let d = h.length, i = Math.max(
-        0,
-        a.findIndex((F) => k(F, this.value, t))
-      ), c;
-      this.props.defaultItem && (c = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, i += 1), i += b ? 1 : 0, h = ge(h, i, c);
-      let o, f, g, p = 0;
-      const { textField: r, ignoreCase: w } = this.props;
-      for (; p < d; p++)
-        if (o = T(h[p].item, r), f = b && q(o, l, w), g = q(o, n, w), f || g) {
-          p = h[p].itemIndex;
-          break;
-        }
-      if (p !== d) {
-        const F = this.base.initState();
-        F.syntheticEvent = e, this.handleItemSelect(p, F), this.applyState(F), this._valueDuringOnChange = void 0;
-      }
-    }, this.handleKeyDown = (e) => {
-      e && e.target instanceof Element && e.target.nodeName === "INPUT" && e.stopPropagation && e.stopPropagation();
-      const {
-        filterable: t,
-        disabled: a,
-        defaultItem: h,
-        leftRightKeysNavigation: n = !0,
-        virtual: l = { skip: 0, total: 0, pageSize: 0 },
-        dataItemKey: b,
-        groupField: d = "",
-        textField: i,
-        skipDisabledItems: c = !0
-      } = this.props, o = E(this.props), f = this.value, g = o.findIndex((y) => k(y, f, b)), p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = e.keyCode, w = r === I.home || r === I.end, F = r === I.up || r === I.down, M = !p && (e.altKey && r === I.down || r === I.enter || r === I.space), _ = p && (e.altKey && r === I.up || r === I.esc), z = n && (r === I.left || r === I.right), P = F || z && !t || w, S = this.base.initState();
-      if (S.syntheticEvent = e, !a) {
-        if (w && this.base.vs.enabled)
-          r === I.home ? l.skip !== 0 ? (this.base.triggerOnPageChange(S, 0, l.pageSize), this._navigated = !0) : this.triggerOnChange(o[0], S) : l.skip < l.total - l.pageSize ? (this.base.triggerOnPageChange(S, l.total - l.pageSize, l.pageSize), this._navigated = !0) : this.triggerOnChange(o[o.length - 1], S);
-        else if (p && r === I.pageUp)
-          e.preventDefault(), this.base.scrollPopupByPageSize(-1);
-        else if (p && r === I.pageDown)
-          e.preventDefault(), this.base.scrollPopupByPageSize(1);
-        else if (p && r === I.enter) {
-          const y = this.getFocusedIndex();
-          this.haveFocusedItemAndDataNotEmpty(o, y) ? (this.triggerOnChange(null, S), this.applyState(S)) : this.handleItemSelect(y, S), this.base.togglePopup(S), e.preventDefault();
-        } else if (M || _)
-          _ && this.resetValueIfDisabledItem(), this.base.togglePopup(S), e.preventDefault();
-        else if (P) {
-          if (this._lastKeypressIsFilter = !1, d !== "" && i)
-            if (!c && p)
-              this.onNavigate(S, r);
-            else {
+      tabIndex: -1,
+      "aria-hidden": !0,
+      title: r.label,
+      style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
+    },
+    /* @__PURE__ */ i.createElement("option", { value: r.valueMap ? r.valueMap.call(void 0, e) : e })
+  ), De = () => {
+    const {
+      textField: e,
+      dataItemKey: n,
+      virtual: a = { skip: 0 },
+      focusedItemIndex: c = sn,
+      filterable: d,
+      skipDisabledItems: u = !0
+    } = r, I = L(), f = P(E), o = r.filter ? r.filter : m.text;
+    return u && e && !o && !I ? f.findIndex((p) => !p.disabled && p[e]) : rt(I) && o === void 0 || d && o === "" ? f.findIndex((p) => N(p, I, n)) : o ? Ee.current ? c(f, o, e) : f.findIndex((p) => N(p, I, n)) : a.skip === 0 ? 0 : -1;
+  }, Te = (e, n) => n !== void 0 && n !== -1 && e && e.length > 0 && e[n].disabled, xe = () => {
+    const e = P(E), n = t.current.initState(), a = De();
+    Te(e, a) && (U(null, n), K(n));
+  }, Ce = (e) => {
+    if (e.isPropagationStopped())
+      return;
+    const n = t.current.initState();
+    n.syntheticEvent = e, m.focused || (n.data.focused = !0), xe(), t.current.togglePopup(n), K(n);
+  }, Oe = (e) => {
+    var z, pe, W, me, j, Re, et;
+    e && e.target instanceof Element && e.target.nodeName === "INPUT" && e.stopPropagation && e.stopPropagation();
+    const {
+      filterable: n,
+      disabled: a,
+      defaultItem: c,
+      leftRightKeysNavigation: d = !0,
+      virtual: u = { skip: 0, total: 0, pageSize: 0 },
+      dataItemKey: I,
+      groupField: f = "",
+      textField: o,
+      skipDisabledItems: p = !0
+    } = r, s = P(E), S = L(), g = s.findIndex((x) => N(x, S, I)), h = r.opened !== void 0 ? r.opened : m.opened, l = e.keyCode, T = l === w.home || l === w.end, b = l === w.up || l === w.down, $ = !h && (e.altKey && l === w.down || l === w.enter || l === w.space), te = h && (e.altKey && l === w.up || l === w.esc), ce = d && (l === w.left || l === w.right), ue = b || ce && !n || T, D = t.current.initState();
+    if (D.syntheticEvent = e, !a) {
+      if (T && ((z = t == null ? void 0 : t.current) != null && z.vs.enabled))
+        l === w.home ? u.skip !== 0 ? ((pe = t == null ? void 0 : t.current) == null || pe.triggerOnPageChange(D, 0, u.pageSize), H.current = !0) : U(s[0], D) : u.skip < u.total - u.pageSize ? ((W = t == null ? void 0 : t.current) == null || W.triggerOnPageChange(
+          D,
+          u.total - u.pageSize,
+          u.pageSize
+        ), H.current = !0) : U(s[s.length - 1], D);
+      else if (h && l === w.pageUp)
+        e.preventDefault(), (me = t == null ? void 0 : t.current) == null || me.scrollPopupByPageSize(-1);
+      else if (h && l === w.pageDown)
+        e.preventDefault(), (j = t == null ? void 0 : t.current) == null || j.scrollPopupByPageSize(1);
+      else if (h && l === w.enter) {
+        const x = De();
+        Te(s, x) ? (U(null, D), K(D)) : X(x, D), (Re = t == null ? void 0 : t.current) == null || Re.togglePopup(D), e.preventDefault();
+      } else if ($ || te)
+        te && xe(), (et = t == null ? void 0 : t.current) == null || et.togglePopup(D), e.preventDefault();
+      else if (ue) {
+        if (Ee.current = !1, f !== "" && o)
+          if (!p && h)
+            A(D, l);
+          else {
+            let x;
+            if (l === w.down || l === w.right) {
+              const y = s.slice(g + 1).find((v) => !v.disabled && v[o]);
+              x = y && s.findIndex((v) => v[o] === y[o]);
+            } else if (l === w.up || l === w.left) {
               let y;
-              if (r === I.down || r === I.right) {
-                const v = o.slice(g + 1).find((m) => !m.disabled && m[i]);
-                y = v && o.findIndex((m) => m[i] === v[i]);
-              } else if (r === I.up || r === I.left) {
-                let v;
-                if (g === 0 && h)
-                  y = -1;
-                else if (g === -1)
-                  v = o, y = o.findIndex((m) => !m.disabled && m[i]);
-                else {
-                  v = o.slice(0, g);
-                  let m = v.pop();
-                  for (; m && m.disabled; )
-                    m = v.pop();
-                  y = m && o.findIndex((L) => L[i] === m[i]);
-                }
-              }
-              if (y !== void 0) {
-                const v = y - g;
-                this.onNavigate(S, r, v);
-              } else
-                y === void 0 && o.findIndex((v) => v[i] === f[i]) === o.length - 1 && this.onNavigate(S, r);
-            }
-          else if (!c && p || w)
-            this.onNavigate(S, r);
-          else if (i) {
-            let y;
-            if (r === I.down || r === I.right) {
-              const v = o.slice(g + 1).find((m) => !m.disabled && m[i]);
-              y = v && o.findIndex((m) => m[i] === v[i]);
-            } else if (r === I.up || r === I.left) {
-              let v;
-              if (g === 0 && h)
-                y = -1;
+              if (g === 0 && c)
+                x = -1;
               else if (g === -1)
-                v = o, y = o.find((m) => !m.disabled && m[i]);
+                y = s, x = s.findIndex((v) => !v.disabled && v[o]);
               else {
-                v = o.slice(0, g);
-                let m = v.pop();
-                for (; m && m.disabled; )
-                  m = v.pop();
-                y = m && o.findIndex((L) => L[i] === m[i]);
+                y = s.slice(0, g);
+                let v = y.pop();
+                for (; v && v.disabled; )
+                  v = y.pop();
+                x = v && s.findIndex((be) => be[o] === v[o]);
               }
             }
-            if (y !== void 0) {
-              const v = y - g;
-              this.onNavigate(S, r, v);
+            if (x !== void 0) {
+              const y = x - g;
+              A(D, l, y);
             } else
-              y === void 0 && o.findIndex((v) => v[i] === f[i]) === o.length - 1 && this.onNavigate(S, r);
+              x === void 0 && s.findIndex((y) => y[o] === S[o]) === s.length - 1 && A(D, l);
+          }
+        else if (!p && h || T)
+          A(D, l);
+        else if (o) {
+          let x;
+          if (l === w.down || l === w.right) {
+            const y = s.slice(g + 1).find((v) => !v.disabled && v[o]);
+            x = y && s.findIndex((v) => v[o] === y[o]);
+          } else if (l === w.up || l === w.left) {
+            let y;
+            if (g === 0 && c)
+              x = -1;
+            else if (g === -1)
+              y = s, x = s.find((v) => !v.disabled && v[o]);
+            else {
+              y = s.slice(0, g);
+              let v = y.pop();
+              for (; v && v.disabled; )
+                v = y.pop();
+              x = v && s.findIndex((be) => be[o] === v[o]);
+            }
+          }
+          if (x !== void 0) {
+            const y = x - g;
+            A(D, l, y);
           } else
-            this.onNavigate(S, r);
-          e.preventDefault();
-        }
-        this.applyState(S);
+            x === void 0 && s.findIndex((y) => y[o] === S[o]) === s.length - 1 && A(D, l);
+        } else
+          A(D, l);
+        e.preventDefault();
       }
-    }, 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: h = 0 } = this.state, n = h <= j && a, l = this.base.initState();
-      l.syntheticEvent = e, l.data.focused = !1, l.events.push({ type: "onBlur" }), t && this.resetValueIfDisabledItem(), t && !n && this.base.togglePopup(l), this.applyState(l);
-    }, 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 === I.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.onPopupMouseDown = (e) => {
-      var t;
-      (t = this.props.popupSettings) != null && t.onMouseDownOutside && this.props.popupSettings.onMouseDownOutside.call(void 0, e);
-    }, this.togglePopup = () => {
-      const e = this.base.initState();
-      e.data.opened = this.state.opened, this.base.togglePopup(e), this.applyState(e);
-    }, this.setValidity = () => {
-      this._select && this._select.setCustomValidity && this._select.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || Ce
-      );
-    }, ee(be);
-  }
-  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 (B)
-      return this.element && this.element.ownerDocument || document;
-  }
-  /**
-   * @hidden
-   */
-  get element() {
-    return this._element;
-  }
-  /**
-   * The value of the DropDownList.
-   */
-  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), !U(s) && this.props.defaultItem !== void 0 && (s = this.props.defaultItem), s;
-  }
-  /**
-   * The index of the selected item.
-   */
-  get index() {
-    const { dataItemKey: s } = this.props, e = E(this.props), t = this.value;
-    return e.findIndex((a) => k(a, t, s));
-  }
-  /**
-   * Gets the `name` property of the DropDownList.
-   */
-  get name() {
-    return this.props.name;
-  }
-  /**
-   * Represents the validity state into which the DropDownList 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 : N.defaultProps.validityStyles;
-  }
-  /**
-   * @hidden
-   */
-  get required() {
-    return this.props.required !== void 0 ? this.props.required : N.defaultProps.required;
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(s, e) {
-    var o;
-    const { dataItemKey: t, virtual: a, groupField: h = "", textField: n } = this.props, l = E(this.props), b = s.virtual ? s.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened, c = !i && d;
-    if (this.base.didUpdate(), this.base.getPopupSettings().animate || c && this.onPopupOpened(), a && a.total !== b)
-      this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
-    else {
-      const f = this.value, g = s.value !== void 0 ? s.value : e.value;
-      let p = l.findIndex((w) => k(w, f, t));
-      h !== "" && f && n && (p = (o = this.base.getGroupedDataModernMode(l, h)) == null ? void 0 : o.map((w) => w[n]).indexOf(f[n]));
-      const r = !k(g, f, t);
-      c && a ? this.base.scrollToVirtualItem(a, p) : c && !a ? (this.onPopupOpened(), l && l.length !== 0 && this.base.resetGroupStickyHeader(l[0][h], this), this.base.scrollToItem(p)) : d && i && f && r && !this._navigated ? this.base.scrollToItem(p, this.base.vs.enabled) : d && i && 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());
+      K(D);
     }
-    this._navigated = !1, this.setValidity();
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    var s;
-    this.observerResize = B && 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 = Ie(this).toLanguageString(
-      Y,
-      ye[Y]
-    ), { style: e, className: t, label: a, dir: h, virtual: n, size: l, rounded: b, fillMode: d, adaptive: i, unstyled: c } = this.props, { windowWidth: o = 0 } = this.state, f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.value, p = T(g, this.props.textField), r = !this.validityStyles || this.validity.valid, w = this.base, F = w.vs, M = o <= j && i, _ = c && c.uDropDownList;
-    F.enabled = n !== void 0, n !== void 0 && (w.vs.skip = n.skip, w.vs.total = n.total, w.vs.pageSize = n.pageSize);
-    const { dataItemKey: z, disabled: P, tabIndex: S, loading: y, iconClassName: v, svgIcon: m, valueRender: L } = this.props, J = E(this.props), { focused: Q } = this.state, X = J.findIndex((O) => k(O, g, z)), H = /* @__PURE__ */ u.createElement("span", { id: this._inputId, className: x(D.inputInner({ c: _ })) }, p && /* @__PURE__ */ u.createElement("span", { className: x(D.inputText({ c: _ })) }, p)), Z = L !== void 0 ? L.call(void 0, H, g) : H, V = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
-      "span",
+  }, wt = (e) => {
+    const n = t.current.initState();
+    n.syntheticEvent = e.syntheticEvent, r.filter === void 0 && (n.data.text = e.target.value), t.current.filterChanged(e.target.value, n), Ee.current = !0, K(n), Y({ group: void 0, text: String(e.target.value) });
+  }, ze = () => {
+    const e = r.filter !== void 0 ? r.filter : m.text;
+    return r.filterable && /* @__PURE__ */ i.createElement(
+      on,
       {
-        ref: this.componentRef,
-        className: x(
-          D.wrapper({
-            c: _,
-            size: l,
-            rounded: b,
-            fillMode: d,
-            focused: Q,
-            disabled: P,
-            invalid: !r,
-            loading: y,
-            required: this.required
-          }),
-          t
-        ),
-        style: a ? { ...e, width: void 0 } : e,
-        dir: h,
-        onMouseDown: f ? (O) => {
-          O.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), O.preventDefault());
-        } : void 0,
-        onFocus: this.handleFocus,
-        onBlur: this.handleBlur,
-        tabIndex: se(S, P),
-        accessKey: this.props.accessKey,
-        onKeyDown: this.handleKeyDown,
-        onKeyPress: this.handleKeyPress,
-        onClick: P ? void 0 : this.handleWrapperClick,
-        role: "combobox",
-        "aria-required": this.required,
-        "aria-disabled": P || void 0,
-        "aria-haspopup": "listbox",
-        "aria-expanded": f || !1,
-        "aria-owns": this._listboxId,
-        "aria-activedescendant": f ? "option-" + this._guid + "-" + (X + (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,
-        "aria-controls": this._listboxId,
-        id: this.props.id,
-        title: this.props.title
-      },
-      Z,
-      y && /* @__PURE__ */ u.createElement(ie, { className: x(D.loadingIcon({ c: _ })), name: "loading" }),
-      /* @__PURE__ */ u.createElement(
-        G,
-        {
-          tabIndex: -1,
-          type: "button",
-          "aria-label": s,
-          size: l,
-          fillMode: d,
-          iconClass: v,
-          className: x(D.inputButton({ c: _ })),
-          rounded: null,
-          themeColor: "base",
-          icon: v ? void 0 : "caret-alt-down",
-          svgIcon: m || de,
-          onMouseDown: (O) => this.state.focused && O.preventDefault()
-        }
-      ),
-      this.dummySelect(g),
-      !M && this.renderListContainer()
-    ), M && this.renderAdaptiveListContainer());
-    return a ? /* @__PURE__ */ u.createElement(
-      le,
+        value: e,
+        ref: (n) => Z.current = n && n.element,
+        onChange: wt,
+        onKeyDown: Oe,
+        size: Q,
+        rounded: Fe,
+        fillMode: Ie,
+        renderListFilterWrapper: !0
+      }
+    );
+  }, yt = (e) => {
+    var a;
+    const n = t.current.initState();
+    n.syntheticEvent = e, (a = t == null ? void 0 : t.current) == null || a.togglePopup(n), U(r.defaultItem, n), K(n);
+  }, Ae = () => {
+    const { textField: e, defaultItem: n, dataItemKey: a } = r, c = L();
+    return n !== void 0 && /* @__PURE__ */ i.createElement(
+      an,
       {
-        label: a,
-        editorValue: p,
-        editorValid: r,
-        editorDisabled: this.props.disabled,
-        style: { width: e ? e.width : void 0 },
-        children: V
+        defaultItem: n,
+        textField: e,
+        selected: N(c, n, a),
+        key: "defaultitemkey",
+        onClick: yt
       }
-    ) : V;
-  }
-  /**
-   * @hidden
-   */
-  onNavigate(s, e, t) {
-    const { defaultItem: a, dataItemKey: h, virtual: n = { skip: 0, total: 0, pageSize: 0 } } = this.props, l = E(this.props), b = this.base.vs, d = this.value, i = l.findIndex((o) => k(o, d, h)), c = this.base.navigation.navigate({
-      current: n.skip + i,
-      max: (b.enabled ? n.total : l.length) - 1,
-      min: a !== void 0 ? -1 : 0,
-      keyCode: e,
-      skipItems: t || void 0
-    });
-    c !== void 0 && this.handleItemSelect(c, s), this.applyState(s);
-  }
-  renderAdaptiveListContainer() {
-    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: a, adaptiveTitle: h, groupField: n, groupStickyHeaderItemRender: l, list: b, unstyled: d } = this.props, i = E(this.props), c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, o = d && d.uDropDownList, f = d && d.uDropDownsActionSheet, g = {
+    );
+  }, St = (e, n) => {
+    var a;
+    (a = t == null ? void 0 : t.current) == null || a.handleItemClick(e, n), V.current = void 0;
+  }, Dt = (e) => {
+    const { vs: n, list: a } = t.current;
+    n.scrollHandler(e);
+    const { groupField: c } = r;
+    let d = P(E);
+    if (!(!c || !d.length) && c) {
+      const u = _e.current = _e.current || (n.enabled ? n.itemHeight : a ? a.children[0].offsetHeight : 0), f = e.target.scrollTop - n.skip * u;
+      d = t.current.getGroupedDataModernMode(d, c);
+      let o = d[0][c];
+      for (let p = 1; p < d.length && !(u * p > f); p++)
+        d[p] && d[p][c] && (o = d[p][c]);
+      o !== m.group && Y({ group: o });
+    }
+  }, Ve = () => {
+    var l;
+    const {
+      textField: e,
+      dataItemKey: n,
+      virtual: a = { skip: 0, total: void 0 },
+      groupHeaderItemRender: c,
+      listNoDataRender: d,
+      itemRender: u
+    } = r, I = P(E), f = F && F.uDropDownList, o = t.current.vs, p = a.skip, s = r.opened !== void 0 ? r.opened : m.opened, S = t.current.getPopupSettings(), g = `translateY(${o.translate}px)`, h = L();
+    return /* @__PURE__ */ i.createElement(
+      ln,
+      {
+        id: ke,
+        show: s,
+        data: I.slice(),
+        focusedIndex: De(),
+        value: h,
+        textField: e,
+        valueField: n,
+        optionsGuid: qe,
+        groupField: r.groupField,
+        groupMode: "modern",
+        listRef: (T) => o.list = t.current.list = T,
+        wrapperStyle: { maxHeight: S.height },
+        wrapperCssClass: C(M.listContent({ c: f })),
+        listStyle: o.enabled ? { transform: g } : void 0,
+        key: "listkey",
+        skip: p,
+        onClick: St,
+        itemRender: u,
+        groupHeaderItemRender: c,
+        noDataRender: d,
+        onScroll: Dt,
+        wrapperRef: o.scrollerRef,
+        scroller: (l = t == null ? void 0 : t.current) == null ? void 0 : l.renderScrollElement(),
+        ariaSetSize: a.total
+      }
+    );
+  }, xt = () => {
+    var h;
+    const { windowWidth: e = 0 } = m, { header: n, footer: a, adaptiveTitle: c, groupField: d, groupStickyHeaderItemRender: u, list: I } = r, f = P(E), o = r.opened !== void 0 ? r.opened : m.opened, p = F && F.uDropDownList, s = F && F.uDropDownsActionSheet, S = {
       navigatable: !1,
       navigatableElements: [],
-      expand: c,
+      expand: o,
       animation: !0,
-      onClose: (r) => this.handleWrapperClick(r),
-      animationStyles: s <= $ ? { top: 0, width: "100%", height: "100%" } : void 0,
-      className: x(
-        K.wrapper({
-          c: f,
-          isFullScreen: s <= $
+      onClose: (l) => Ce(l),
+      animationStyles: e <= lt ? { top: 0, width: "100%", height: "100%" } : void 0,
+      className: C(
+        J.wrapper({
+          c: s,
+          isFullScreen: e <= lt
         })
       )
     };
-    let { group: p } = this.state;
-    return p === void 0 && n !== void 0 && (p = T(i[0], n)), /* @__PURE__ */ u.createElement(we, { ...g }, /* @__PURE__ */ u.createElement(Se, { className: x(K.header({ c: f })) }, /* @__PURE__ */ u.createElement("div", { className: x(K.titleBar({ c: f })) }, /* @__PURE__ */ u.createElement("div", { className: x(K.title({ c: f })) }, /* @__PURE__ */ u.createElement("div", null, h)), /* @__PURE__ */ u.createElement("div", { className: x(K.actions({ c: f })) }, /* @__PURE__ */ u.createElement(
-      G,
+    let { group: g } = m;
+    return g === void 0 && d !== void 0 && (g = fe(f[0], d)), /* @__PURE__ */ i.createElement(fn, { ...S }, /* @__PURE__ */ i.createElement(gn, { className: C(J.header({ c: s })) }, /* @__PURE__ */ i.createElement("div", { className: C(J.titleBar({ c: s })) }, /* @__PURE__ */ i.createElement("div", { className: C(J.title({ c: s })) }, /* @__PURE__ */ i.createElement("div", null, c)), /* @__PURE__ */ i.createElement("div", { className: C(J.actions({ c: s })) }, /* @__PURE__ */ i.createElement(
+      it,
       {
         tabIndex: 0,
         "aria-label": "Cancel",
         "aria-disabled": "false",
         type: "button",
         fillMode: "flat",
-        onClick: this.handleWrapperClick,
+        onClick: Ce,
         icon: "x",
-        svgIcon: pe
+        svgIcon: nn
       }
-    ))), /* @__PURE__ */ u.createElement("div", { className: x(K.titleBarGroup({ c: f })) }, this.renderListFilter())), /* @__PURE__ */ u.createElement(xe, { overflowHidden: !0 }, e && /* @__PURE__ */ u.createElement("div", { className: x(D.listHeader({ c: o })) }, e), /* @__PURE__ */ u.createElement(
+    ))), /* @__PURE__ */ i.createElement("div", { className: C(J.titleBarGroup({ c: s })) }, ze())), /* @__PURE__ */ i.createElement(vn, { overflowHidden: !0 }, n && /* @__PURE__ */ i.createElement("div", { className: C(M.listHeader({ c: p })) }, n), /* @__PURE__ */ i.createElement(
       "div",
       {
-        className: x(
-          D.list({
-            c: o,
-            size: a,
-            virtual: this.base.vs.enabled
+        className: C(
+          M.list({
+            c: p,
+            size: Q,
+            virtual: (h = t == null ? void 0 : t.current) == null ? void 0 : h.vs.enabled
           })
         )
       },
-      this.renderDefaultItem(),
-      !b && p && i.length !== 0 && /* @__PURE__ */ u.createElement(
-        W,
+      Ae(),
+      !I && g && f.length !== 0 && /* @__PURE__ */ i.createElement(
+        nt,
         {
-          group: p,
+          group: g,
           groupMode: "modern",
-          render: l
+          render: u
         }
       ),
-      this.renderList()
-    ), t && /* @__PURE__ */ u.createElement("div", { className: x(D.listFooter({ c: o })) }, t)));
-  }
-  getFocusedIndex() {
-    const s = this.value, {
-      textField: e,
-      dataItemKey: t,
-      virtual: a = { skip: 0 },
-      focusedItemIndex: h = ve,
-      filterable: n,
-      skipDisabledItems: l = !0
-    } = this.props, b = E(this.props), d = this.props.filter ? this.props.filter : this.state.text;
-    return l && e && !d && !s ? b.findIndex((i) => !i.disabled && i[e]) : U(s) && d === void 0 || n && d === "" ? b.findIndex((i) => k(i, s, t)) : d ? this._lastKeypressIsFilter ? h(b, d, e) : b.findIndex((i) => k(i, s, t)) : a.skip === 0 ? 0 : -1;
-  }
-  focusElement(s) {
-    this._skipFocusEvent = !0, s.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 30);
-  }
-  triggerOnChange(s, e) {
-    k(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 s = E(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;
-  }
+      Ve()
+    ), a && /* @__PURE__ */ i.createElement("div", { className: C(M.listFooter({ c: p })) }, a)));
+  }, Ct = () => {
+    m.focused && window.setTimeout(() => {
+      m.focused && t.current.wrapper && ne(t.current.wrapper);
+    });
+  }, Et = (e) => {
+    var n;
+    (n = r.popupSettings) != null && n.onMouseDownOutside && r.popupSettings.onMouseDownOutside.call(void 0, e);
+  }, kt = () => {
+    const { header: e, footer: n, dir: a, groupField: c, groupStickyHeaderItemRender: d, list: u } = r, I = P(E), f = t.current, o = f.getPopupSettings(), p = r.opened !== void 0 ? r.opened : m.opened, s = o.width !== void 0 ? o.width : f.popupWidth, S = F && F.uDropDownList, g = {
+      dir: a !== void 0 ? a : f.dirCalculated,
+      width: s,
+      popupSettings: {
+        ...o,
+        popupClass: C(
+          o.popupClass,
+          M.listContainer({
+            c: S
+          })
+        ),
+        anchor: o.anchor || q.current,
+        show: p,
+        onOpen: Se,
+        onClose: Ct,
+        onMouseDownOutside: Et
+      },
+      itemsCount: [I.length]
+    };
+    let { group: h } = m;
+    return h === void 0 && c !== void 0 && (h = fe(I[0], c)), /* @__PURE__ */ i.createElement(rn, { ...g }, ze(), e && /* @__PURE__ */ i.createElement("div", { className: C(M.listHeader({ c: S })) }, e), /* @__PURE__ */ i.createElement(
+      "div",
+      {
+        className: C(
+          M.list({
+            c: S,
+            size: Q,
+            virtual: t.current.vs.enabled
+          })
+        )
+      },
+      Ae(),
+      !u && h && I.length !== 0 && /* @__PURE__ */ i.createElement(nt, { group: h, groupMode: "modern", render: d }),
+      Ve()
+    ), n && /* @__PURE__ */ i.createElement("div", { className: C(M.listFooter({ c: S })) }, n));
+  }, Lt = (e) => {
+    const { dataItemKey: n } = r, a = P(E), c = L();
+    let d = a.map((b, $) => ({ item: b, itemIndex: $ }));
+    const u = G.current.word, I = G.current.last, f = dn(u, I);
+    let o = d.length, p = Math.max(
+      0,
+      a.findIndex((b) => N(b, c, n))
+    ), s;
+    r.defaultItem && (s = { item: r.defaultItem, itemIndex: -1 }, o += 1, p += 1), p += f ? 1 : 0, d = cn(d, p, s);
+    let S, g, h, l = 0;
+    const { textField: T } = r;
+    for (; l < o; l++)
+      if (S = fe(d[l].item, T), g = f && ot(S, I, ve), h = ot(S, u, ve), g || h) {
+        l = d[l].itemIndex;
+        break;
+      }
+    if (l !== o) {
+      const b = t.current.initState();
+      b.syntheticEvent = e, X(l, b), K(b), V.current = void 0;
+    }
+  }, Mt = (e) => {
+    clearTimeout(Be.current), r.filterable || (Be.current = window.setTimeout(() => G.current.word = "", ut), Lt(e));
+  }, Pt = (e) => {
+    oe.current || t.current.handleFocus(e);
+  }, bt = (e) => {
+    if (oe.current || !m.focused)
+      return;
+    const n = r.opened !== void 0 ? r.opened : m.opened, { adaptive: a } = r, { windowWidth: c = 0 } = m, d = c <= st && a, u = t.current.initState();
+    u.syntheticEvent = e, u.data.focused = !1, u.events.push({ type: "onBlur" }), n && xe(), n && !d && t.current.togglePopup(u), K(u);
+  }, Nt = (e) => {
+    if (r.filterable || e.which === 0 || e.keyCode === w.enter)
+      return;
+    let n = String.fromCharCode(e.charCode || e.keyCode);
+    ve && (n = n.toLowerCase()), n === " " && e.preventDefault(), G.current = {
+      word: G.current.word + n,
+      last: G.current.last + n
+    }, Mt(e);
+  }, Ft = () => {
+    const e = t.current.initState();
+    e.data.opened = m.opened, t.current.togglePopup(e), K(e);
+  }, He = i.useRef(null), q = i.useRef(null), re = i.useRef(), Z = i.useRef(null);
+  i.useImperativeHandle(
+    He,
+    () => ({
+      get element() {
+        return q.current;
+      },
+      get index() {
+        return ft();
+      },
+      get name() {
+        return r.name;
+      },
+      get validity() {
+        return ye();
+      },
+      get value() {
+        return L();
+      },
+      focus: mt,
+      props: r,
+      togglePopup: Ft
+    })
+  ), i.useImperativeHandle(
+    ct,
+    () => He.current
+  );
+  const Be = i.useRef(null), G = i.useRef({ word: "", last: "" }), oe = i.useRef(!1), V = i.useRef(null), H = i.useRef(!1), Ee = i.useRef(!1), B = i.useRef({}), ie = i.useRef({}), t = i.useRef(
+    new dt({
+      props: E,
+      setState: () => {
+      },
+      state: {},
+      forceUpdate: () => {
+      },
+      element: null,
+      value: null,
+      handleItemSelect: () => {
+      }
+    })
+  ), _e = i.useRef(0), R = i.useRef(null), [m, Kt] = i.useState({}), [, We] = i.useReducer((e) => e, !0), Tt = pn(), Y = (e) => {
+    Kt({ ...m, ...e });
+  };
+  i.useEffect(() => {
+    t.current.updateComponentArgs({
+      props: E,
+      setState: Y,
+      state: m,
+      forceUpdate: We,
+      element: q.current,
+      handleItemSelect: X,
+      value: L()
+    });
+  }, [Y, m, We, X, L]), i.useEffect(() => {
+    var p, s, S, g, h, l, T, b, $, te, ce, ue, D;
+    const { dataItemKey: e, virtual: n, groupField: a = "", textField: c } = r, d = P(E), u = B.current.virtual ? B.current.virtual.total : 0, I = r.opened !== void 0 ? r.opened : m.opened, f = B.current.opened !== void 0 ? B.current.opened : ie.current.opened, o = !f && I;
+    if ((p = t == null ? void 0 : t.current) == null || p.didUpdate(), (s = t == null ? void 0 : t.current) != null && s.getPopupSettings().animate || o && Se(), n && n.total !== u)
+      (S = t == null ? void 0 : t.current) == null || S.vs.calcScrollElementHeight(), (g = t == null ? void 0 : t.current) == null || g.vs.reset();
+    else {
+      const z = L(), pe = B.current.value !== void 0 ? B.current.value : ie.current.value;
+      let W = d.findIndex((j) => N(j, z, e));
+      a !== "" && z && c && (W = (l = (h = t == null ? void 0 : t.current) == null ? void 0 : h.getGroupedDataModernMode(d, a)) == null ? void 0 : l.map((j) => j[c]).indexOf(z[c]));
+      const me = !N(pe, z, e);
+      o && n ? (T = t == null ? void 0 : t.current) == null || T.scrollToVirtualItem(n, W) : o && !n ? (Se(), d && d.length !== 0 && ((b = t == null ? void 0 : t.current) == null || b.resetGroupStickyHeader(d[0][a], {
+        setState: Y,
+        group: m.group,
+        state: m
+      })), ($ = t == null ? void 0 : t.current) == null || $.scrollToItem(W)) : I && f && z && me && !H.current ? (ce = t == null ? void 0 : t.current) == null || ce.scrollToItem(W, (te = t == null ? void 0 : t.current) == null ? void 0 : te.vs.enabled) : I && f && H.current && (H.current && n && n.skip === 0 ? (ue = t == null ? void 0 : t.current) == null || ue.vs.reset() : H.current && n && n.skip === n.total - n.pageSize && ((D = t == null ? void 0 : t.current) == null || D.vs.scrollToEnd()));
+    }
+    H.current = !1, ie.current = m, B.current = r, Ke();
+  }), i.useEffect(() => {
+    var e, n;
+    return R.current = tt && window.ResizeObserver && new window.ResizeObserver((a) => vt(a)), (e = t == null ? void 0 : t.current) == null || e.didMount(), Ke(), (n = he()) != null && n.body && R.current && R.current.observe(he().body), () => {
+      var a;
+      (a = he()) != null && a.body && R.current && R.current.disconnect();
+    };
+  }, []);
+  const Ue = ge + "-accessibility-id", ke = ge + "-listbox-id", qe = ge + "-guid", Ot = Tt.toLanguageString(
+    at,
+    mn[at]
+  ), {
+    style: ae,
+    className: zt,
+    label: Le,
+    dir: At,
+    virtual: _,
+    adaptive: Vt,
+    dataItemKey: Ht,
+    disabled: le,
+    loading: Ge,
+    iconClassName: Ye,
+    svgIcon: $e,
+    valueRender: je
+  } = r, { windowWidth: Bt = 0 } = m, Me = r.opened !== void 0 ? r.opened : m.opened, se = L(), Pe = fe(se, r.textField), Je = !gt() || ye().valid, de = t.current, _t = de.vs, Qe = Bt <= st && Vt, ee = F && F.uDropDownList;
+  _t.enabled = _ !== void 0, _ !== void 0 && (de.vs.skip = _.skip, de.vs.total = _.total, de.vs.pageSize = _.pageSize);
+  const Wt = P(E), { focused: Ut } = m, qt = Wt.findIndex((e) => N(e, se, Ht)), Xe = /* @__PURE__ */ i.createElement("span", { id: Ue, className: C(M.inputInner({ c: ee })) }, Pe && /* @__PURE__ */ i.createElement("span", { className: C(M.inputText({ c: ee })) }, Pe)), Gt = je !== void 0 ? je.call(void 0, Xe, se) : Xe, Ze = /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+    "span",
+    {
+      ref: It,
+      className: C(
+        M.wrapper({
+          c: ee,
+          size: Q,
+          rounded: Fe,
+          fillMode: Ie,
+          focused: Ut,
+          disabled: le,
+          invalid: !Je,
+          loading: Ge,
+          required: we()
+        }),
+        zt
+      ),
+      style: Le ? { ...ae, width: void 0 } : ae,
+      dir: At,
+      onMouseDown: Me ? (e) => {
+        e.target.nodeName !== "INPUT" && (ne(t.current.wrapper), e.preventDefault());
+      } : void 0,
+      onFocus: Pt,
+      onBlur: bt,
+      tabIndex: Qt(pt, le),
+      accessKey: r.accessKey,
+      onKeyDown: Oe,
+      onKeyPress: Nt,
+      onClick: le ? void 0 : Ce,
+      role: "combobox",
+      "aria-required": we(),
+      "aria-disabled": le || void 0,
+      "aria-haspopup": "listbox",
+      "aria-expanded": Me || !1,
+      "aria-owns": ke,
+      "aria-activedescendant": Me ? "option-" + qe + "-" + (qt + (_ ? _.skip : 0)) : void 0,
+      "aria-label": r.ariaLabel || r.label,
+      "aria-labelledby": r.ariaLabelledBy,
+      "aria-describedby": r.ariaDescribedBy || Ue,
+      "aria-controls": ke,
+      id: r.id,
+      title: r.title
+    },
+    Gt,
+    Ge && /* @__PURE__ */ i.createElement(Xt, { className: C(M.loadingIcon({ c: ee })), name: "loading" }),
+    /* @__PURE__ */ i.createElement(
+      it,
+      {
+        tabIndex: -1,
+        type: "button",
+        "aria-label": Ot,
+        size: Q,
+        fillMode: Ie,
+        iconClass: Ye,
+        className: C(M.inputButton({ c: ee })),
+        rounded: null,
+        themeColor: "base",
+        icon: Ye ? void 0 : "caret-alt-down",
+        svgIcon: $e || tn,
+        onMouseDown: (e) => m.focused && e.preventDefault()
+      }
+    ),
+    ht(se),
+    !Qe && kt()
+  ), Qe && xt());
+  return Le ? /* @__PURE__ */ i.createElement(
+    en,
+    {
+      label: Le,
+      editorValue: Pe,
+      editorValid: Je,
+      editorDisabled: r.disabled,
+      style: { width: ae ? ae.width : void 0 },
+      children: Ze
+    }
+  ) : Ze;
+});
+Ne.propTypes = {
+  delay: k.number,
+  ignoreCase: k.bool,
+  iconClassName: k.string,
+  svgIcon: Zt,
+  defaultItem: k.any,
+  valueRender: k.func,
+  valueMap: k.func,
+  validationMessage: k.string,
+  required: k.bool,
+  id: k.string,
+  ariaLabelledBy: k.string,
+  ariaDescribedBy: k.string,
+  ariaLabel: k.string,
+  leftRightKeysNavigation: k.bool,
+  title: k.string,
+  groupField: k.string,
+  list: k.any,
+  skipDisabledItems: k.bool
 };
-N.displayName = "DropDownList", N.propTypes = {
-  delay: C.number,
-  ignoreCase: C.bool,
-  iconClassName: C.string,
-  svgIcon: te,
-  defaultItem: C.any,
-  valueRender: C.func,
-  valueMap: C.func,
-  validationMessage: C.string,
-  required: C.bool,
-  id: C.string,
-  ariaLabelledBy: C.string,
-  ariaDescribedBy: C.string,
-  ariaLabel: C.string,
-  leftRightKeysNavigation: C.bool,
-  title: C.string,
-  groupField: C.string,
-  list: C.any,
-  skipDisabledItems: C.bool,
-  renderListFilterWrapper: C.bool,
-  ...R.propTypes
-}, N.defaultProps = {
+const O = {
   delay: 500,
   tabIndex: 0,
   ignoreCase: !0,
-  ...R.defaultProps,
+  ...dt.defaultProps,
   required: !1,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   groupMode: "modern"
 };
-let A = N;
-const De = ae(), Ee = oe(
-  ne(
-    De,
-    re(A)
-  )
-);
-Ee.displayName = "KendoReactDropDownList";
+Ne.displayName = "KendoReactDropDownList";
+const hn = Rt();
+Ne.displayName = "KendoReactDropDownList";
 export {
-  Ee as DropDownList,
-  De as DropDownListPropsContext,
-  A as DropDownListWithoutContext
+  Ne as DropDownList,
+  hn as DropDownListPropsContext,
+  O as dropDownListDefaultProps
 };