@progress/kendo-react-dropdowns 8.2.0 → 8.2.1-develop.1

package/DropDownList/DropDownList.mjs

@@ -8,29 +8,29 @@
 "use client";
 import * as h from "react";
 import S from "prop-types";
-import { classNames as P, Keys as v, validatePackage as J, svgIconPropType as Q, canUseDOM as A, getTabIndex as X, IconWrap as Z, createPropsContext as ee, withIdHOC as te, withPropsContext as se, kendoThemeMaps as ie } from "@progress/kendo-react-common";
-import { FloatingLabel as ae } from "@progress/kendo-react-labels";
-import { caretAltDownIcon as oe, xIcon as ne } from "@progress/kendo-svg-icons";
+import { classNames as L, Keys as v, validatePackage as Q, svgIconPropType as X, canUseDOM as H, getTabIndex as Z, IconWrap as ee, createPropsContext as te, withIdHOC as se, withPropsContext as ie, kendoThemeMaps as ae } from "@progress/kendo-react-common";
+import { FloatingLabel as oe } from "@progress/kendo-react-labels";
+import { caretAltDownIcon as ne, xIcon as re } from "@progress/kendo-svg-icons";
 import le from "../common/ListContainer.mjs";
-import re from "../common/ListFilter.mjs";
-import H from "../common/GroupStickyHeader.mjs";
-import de from "../common/ListDefaultItem.mjs";
-import pe from "../common/List.mjs";
-import O from "../common/DropDownBase.mjs";
-import { areSame as C, getItemValue as L, sameCharsOnly as he, shuffleData as ce, matchText as B, isPresent as W, itemIndexStartsWith as ue } from "../common/utils.mjs";
-import { packageMetadata as me } from "../package-metadata.mjs";
-import { Button as q } from "@progress/kendo-react-buttons";
-import { provideLocalizationService as fe } from "@progress/kendo-react-intl";
-import { dropDownListArrowBtnAriaLabel as U, messages as ge } from "../messages/index.mjs";
-import { MOBILE_MEDIUM_DEVISE as G, MOBILE_SMALL_DEVISE as $ } from "../common/constants.mjs";
-import { ActionSheet as ve, ActionSheetHeader as be, ActionSheetContent as Ie } from "@progress/kendo-react-layout";
-const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke } = ie, E = class E extends h.Component {
+import de from "../common/ListFilter.mjs";
+import B from "../common/GroupStickyHeader.mjs";
+import pe from "../common/ListDefaultItem.mjs";
+import he from "../common/List.mjs";
+import z from "../common/DropDownBase.mjs";
+import { getFilteredData as x, areSame as E, getItemValue as K, sameCharsOnly as ce, shuffleData as ue, matchText as W, isPresent as q, itemIndexStartsWith as me } from "../common/utils.mjs";
+import { packageMetadata as fe } from "../package-metadata.mjs";
+import { Button as U } from "@progress/kendo-react-buttons";
+import { provideLocalizationService as ge } from "@progress/kendo-react-intl";
+import { dropDownListArrowBtnAriaLabel as G, messages as ve } from "../messages/index.mjs";
+import { MOBILE_MEDIUM_DEVISE as $, MOBILE_SMALL_DEVISE as Y } from "../common/constants.mjs";
+import { ActionSheet as be, ActionSheetHeader as Ie, ActionSheetContent as ye } from "@progress/kendo-react-layout";
+const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se } = ae, _ = class _ extends h.Component {
   constructor(s) {
-    super(s), this.state = {}, this._element = null, this.base = new O(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 = () => {
+    super(s), this.state = {}, this._element = null, this.base = new z(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 { data: a = [], virtual: r, dataItemKey: o, defaultItem: n } = this.props, c = r ? r.skip : 0, d = e === -1 && n !== void 0 ? n : a[e - c], p = !C(d, this.value, o);
-      this.triggerOnChange(d, t), p && this.base.triggerPageChangeCornerItems(d, t);
+      const { virtual: a, dataItemKey: p, defaultItem: n } = this.props, o = x(this.props), f = a ? a.skip : 0, l = e === -1 && n !== void 0 ? n : o[e - f], i = !E(l, this.value, p);
+      this.triggerOnChange(l, t), i && this.base.triggerPageChangeCornerItems(l, t);
     }, this.componentRef = (e) => {
       this._element = e, this.base.wrapper = e;
     }, this.dummySelect = (e) => /* @__PURE__ */ h.createElement(
@@ -52,97 +52,96 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
         }
       )
     ), this.renderListContainer = () => {
-      const { header: e, footer: t, dir: a, data: r = [], size: o, groupField: n, groupStickyHeaderItemRender: c, list: d } = this.props, p = this.base, i = p.getPopupSettings(), g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = i.width !== void 0 ? i.width : p.popupWidth, I = {
-        dir: a !== void 0 ? a : p.dirCalculated,
+      const { header: e, footer: t, dir: a, size: p, groupField: n, groupStickyHeaderItemRender: o, list: f } = this.props, l = x(this.props), i = this.base, c = i.getPopupSettings(), r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = c.width !== void 0 ? c.width : i.popupWidth, I = {
+        dir: a !== void 0 ? a : i.dirCalculated,
         width: b,
         popupSettings: {
-          ...i,
-          popupClass: P(
-            i.popupClass,
+          ...c,
+          popupClass: L(
+            c.popupClass,
             "k-list-container",
             "k-dropdownlist-popup"
           ),
-          anchor: i.anchor || this.element,
-          show: g,
+          anchor: c.anchor || this.element,
+          show: r,
           onOpen: this.onPopupOpened,
           onClose: this.onPopupClosed
         },
-        itemsCount: [r.length]
+        itemsCount: [l.length]
       };
       let { group: m } = this.state;
-      return m === void 0 && n !== void 0 && (m = L(r[0], n)), /* @__PURE__ */ h.createElement(le, { ...I }, this.renderListFilter(), e && /* @__PURE__ */ h.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ h.createElement(
+      return m === void 0 && n !== void 0 && (m = K(l[0], n)), /* @__PURE__ */ h.createElement(le, { ...I }, this.renderListFilter(), e && /* @__PURE__ */ h.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ h.createElement(
         "div",
         {
-          className: P(
+          className: L(
             "k-list",
             {
-              [`k-list-${z[o] || o}`]: o,
+              [`k-list-${T[p] || p}`]: p,
               "k-virtual-list": this.base.vs.enabled
             }
           )
         },
         this.renderDefaultItem(),
-        !d && m && r.length !== 0 && /* @__PURE__ */ h.createElement(H, { group: m, groupMode: "modern", render: c }),
+        !f && m && l.length !== 0 && /* @__PURE__ */ h.createElement(B, { group: m, groupMode: "modern", render: o }),
         this.renderList()
       ), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t));
     }, this.renderList = () => {
       const {
-        data: e = [],
-        textField: t,
-        dataItemKey: a,
-        virtual: r = { skip: 0, total: void 0 },
-        groupHeaderItemRender: o,
+        textField: e,
+        dataItemKey: t,
+        virtual: a = { skip: 0, total: void 0 },
+        groupHeaderItemRender: p,
         listNoDataRender: n,
-        itemRender: c
-      } = this.props, d = this.base.vs, p = r.skip, i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = this.base.getPopupSettings(), b = `translateY(${d.translate}px)`;
+        itemRender: o
+      } = this.props, f = x(this.props), l = this.base.vs, i = a.skip, c = this.props.opened !== void 0 ? this.props.opened : this.state.opened, r = this.base.getPopupSettings(), b = `translateY(${l.translate}px)`;
       return /* @__PURE__ */ h.createElement(
-        pe,
+        he,
         {
           id: this._listboxId,
-          show: i,
-          data: e.slice(),
+          show: c,
+          data: f.slice(),
           focusedIndex: this.getFocusedIndex(),
           value: this.value,
-          textField: t,
-          valueField: a,
+          textField: e,
+          valueField: t,
           optionsGuid: this._guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (I) => d.list = this.base.list = I,
-          wrapperStyle: { maxHeight: g.height },
+          listRef: (I) => l.list = this.base.list = I,
+          wrapperStyle: { maxHeight: r.height },
           wrapperCssClass: "k-list-content",
-          listStyle: d.enabled ? { transform: b } : void 0,
+          listStyle: l.enabled ? { transform: b } : void 0,
           key: "listkey",
-          skip: p,
+          skip: i,
           onClick: this.handleItemClick,
-          itemRender: c,
-          groupHeaderItemRender: o,
+          itemRender: o,
+          groupHeaderItemRender: p,
           noDataRender: n,
           onScroll: this.onScroll,
-          wrapperRef: d.scrollerRef,
+          wrapperRef: l.scrollerRef,
           scroller: this.base.renderScrollElement(),
-          ariaSetSize: r.total
+          ariaSetSize: a.total
         }
       );
     }, this.onScroll = (e) => {
       const { vs: t, list: a } = this.base;
       t.scrollHandler(e);
-      const { groupField: r } = this.props;
-      let { data: o = [] } = this.props;
-      if (!(!r || !o.length) && r) {
-        const n = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a ? a.children[0].offsetHeight : 0), d = e.target.scrollTop - t.skip * n;
-        o = this.base.getGroupedDataModernMode(o, r);
-        let p = o[0][r];
-        for (let i = 1; i < o.length && !(n * i > d); i++)
-          o[i] && o[i][r] && (p = o[i][r]);
-        p !== this.state.group && this.setState({
-          group: p
+      const { groupField: p } = this.props;
+      let n = x(this.props);
+      if (!(!p || !n.length) && p) {
+        const o = this.itemHeight = this.itemHeight || (t.enabled ? t.itemHeight : a ? a.children[0].offsetHeight : 0), l = e.target.scrollTop - t.skip * o;
+        n = this.base.getGroupedDataModernMode(n, p);
+        let i = n[0][p];
+        for (let c = 1; c < n.length && !(o * c > l); c++)
+          n[c] && n[c][p] && (i = n[c][p]);
+        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__ */ h.createElement(
-        re,
+        de,
         {
           value: e,
           ref: (t) => this._filterInput = t && t.element,
@@ -157,11 +156,11 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
     }, this.renderDefaultItem = () => {
       const { textField: e, defaultItem: t, dataItemKey: a } = this.props;
       return t !== void 0 && /* @__PURE__ */ h.createElement(
-        de,
+        pe,
         {
           defaultItem: t,
           textField: e,
-          selected: C(this.value, t, a),
+          selected: E(this.value, t, a),
           key: "defaultitemkey",
           onClick: this.handleDefaultItemClick
         }
@@ -169,105 +168,104 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
     }, 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 r = t.map((w, F) => ({ item: w, itemIndex: F }));
-      const o = this.searchState.word, n = this.searchState.last, c = he(o, n);
-      let d = r.length, p = Math.max(0, t.findIndex((w) => C(w, this.value, a))), i;
-      this.props.defaultItem && (i = { item: this.props.defaultItem, itemIndex: -1 }, d += 1, p += 1), p += c ? 1 : 0, r = ce(r, p, i);
-      let g, b, I, m = 0;
-      const { textField: l, ignoreCase: x } = this.props;
-      for (; m < d; m++)
-        if (g = L(r[m].item, l), b = c && B(g, n, x), I = B(g, o, x), b || I) {
-          m = r[m].itemIndex;
+      const { dataItemKey: t } = this.props, a = x(this.props);
+      let p = a.map((C, N) => ({ item: C, itemIndex: N }));
+      const n = this.searchState.word, o = this.searchState.last, f = ce(n, o);
+      let l = p.length, i = Math.max(0, a.findIndex((C) => E(C, this.value, t))), c;
+      this.props.defaultItem && (c = { item: this.props.defaultItem, itemIndex: -1 }, l += 1, i += 1), i += f ? 1 : 0, p = ue(p, i, c);
+      let r, b, I, m = 0;
+      const { textField: d, ignoreCase: w } = this.props;
+      for (; m < l; m++)
+        if (r = K(p[m].item, d), b = f && W(r, o, w), I = W(r, n, w), b || I) {
+          m = p[m].itemIndex;
           break;
         }
-      if (m !== d) {
-        const w = this.base.initState();
-        w.syntheticEvent = e, this.handleItemSelect(m, w), this.applyState(w), this._valueDuringOnChange = void 0;
+      if (m !== l) {
+        const C = this.base.initState();
+        C.syntheticEvent = e, this.handleItemSelect(m, 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: r,
-        defaultItem: o,
+        filterable: t,
+        disabled: a,
+        defaultItem: p,
         leftRightKeysNavigation: n = !0,
-        virtual: c = { skip: 0, total: 0, pageSize: 0 },
-        dataItemKey: d,
-        groupField: p = "",
+        virtual: o = { skip: 0, total: 0, pageSize: 0 },
+        dataItemKey: f,
+        groupField: l = "",
         textField: i,
-        skipDisabledItems: g = !0
-      } = this.props, b = this.value, I = t.findIndex((y) => C(y, b, d)), m = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = e.keyCode, x = l === v.home || l === v.end, w = l === v.up || l === v.down, F = !m && (e.altKey && l === v.down || l === v.enter || l === v.space), M = m && (e.altKey && l === v.up || l === v.esc), D = n && (l === v.left || l === v.right), K = w || D && !a || x, k = this.base.initState();
-      if (k.syntheticEvent = e, !r) {
-        if (x && this.base.vs.enabled)
-          l === v.home ? c.skip !== 0 ? (this.base.triggerOnPageChange(k, 0, c.pageSize), this._navigated = !0) : this.triggerOnChange(t[0], k) : c.skip < c.total - c.pageSize ? (this.base.triggerOnPageChange(k, c.total - c.pageSize, c.pageSize), this._navigated = !0) : this.triggerOnChange(t[t.length - 1], k);
-        else if (m && l === v.pageUp)
+        skipDisabledItems: c = !0
+      } = this.props, r = x(this.props), b = this.value, I = r.findIndex((y) => E(y, b, f)), m = this.props.opened !== void 0 ? this.props.opened : this.state.opened, d = e.keyCode, w = d === v.home || d === v.end, C = d === v.up || d === v.down, N = !m && (e.altKey && d === v.down || d === v.enter || d === v.space), D = m && (e.altKey && d === v.up || d === v.esc), O = n && (d === v.left || d === v.right), P = C || O && !t || w, k = this.base.initState();
+      if (k.syntheticEvent = e, !a) {
+        if (w && this.base.vs.enabled)
+          d === v.home ? o.skip !== 0 ? (this.base.triggerOnPageChange(k, 0, o.pageSize), this._navigated = !0) : this.triggerOnChange(r[0], k) : o.skip < o.total - o.pageSize ? (this.base.triggerOnPageChange(k, o.total - o.pageSize, o.pageSize), this._navigated = !0) : this.triggerOnChange(r[r.length - 1], k);
+        else if (m && d === v.pageUp)
           e.preventDefault(), this.base.scrollPopupByPageSize(-1);
-        else if (m && l === v.pageDown)
+        else if (m && d === v.pageDown)
           e.preventDefault(), this.base.scrollPopupByPageSize(1);
-        else if (m && l === v.enter) {
+        else if (m && d === v.enter) {
           const y = this.getFocusedIndex();
-          this.haveFocusedItemAndDataNotEmpty(t, y) ? (this.triggerOnChange(null, k), this.applyState(k)) : this.handleItemSelect(y, k), this.base.togglePopup(k), e.preventDefault();
-        } else if (F || M)
-          M && this.resetValueIfDisabledItem(), this.base.togglePopup(k), e.preventDefault();
-        else if (K) {
-          if (this._lastKeypressIsFilter = !1, p !== "" && i)
-            if (!g && m)
-              this.onNavigate(k, l);
+          this.haveFocusedItemAndDataNotEmpty(r, y) ? (this.triggerOnChange(null, k), this.applyState(k)) : this.handleItemSelect(y, k), this.base.togglePopup(k), e.preventDefault();
+        } else if (N || D)
+          D && this.resetValueIfDisabledItem(), this.base.togglePopup(k), e.preventDefault();
+        else if (P) {
+          if (this._lastKeypressIsFilter = !1, l !== "" && i)
+            if (!c && m)
+              this.onNavigate(k, d);
             else {
               let y;
-              if (l === v.down || l === v.right) {
-                const f = t.slice(I + 1).find((u) => !u.disabled && u[i]);
-                y = f && t.findIndex((u) => u[i] === f[i]);
-              } else if (l === v.up || l === v.left) {
-                let f;
-                if (I === 0 && o)
+              if (d === v.down || d === v.right) {
+                const g = r.slice(I + 1).find((u) => !u.disabled && u[i]);
+                y = g && r.findIndex((u) => u[i] === g[i]);
+              } else if (d === v.up || d === v.left) {
+                let g;
+                if (I === 0 && p)
                   y = -1;
                 else if (I === -1)
-                  f = t, y = t.findIndex((u) => !u.disabled && u[i]);
+                  g = r, y = r.findIndex((u) => !u.disabled && u[i]);
                 else {
-                  f = t.slice(0, I);
-                  let u = f.pop();
+                  g = r.slice(0, I);
+                  let u = g.pop();
                   for (; u && u.disabled; )
-                    u = f.pop();
-                  y = u && t.findIndex((N) => N[i] === u[i]);
+                    u = g.pop();
+                  y = u && r.findIndex((M) => M[i] === u[i]);
                 }
               }
               if (y !== void 0) {
-                const f = y - I;
-                this.onNavigate(k, l, f);
+                const g = y - I;
+                this.onNavigate(k, d, g);
               } else
-                y === void 0 && t.findIndex((f) => f[i] === b[i]) === t.length - 1 && this.onNavigate(k, l);
+                y === void 0 && r.findIndex((g) => g[i] === b[i]) === r.length - 1 && this.onNavigate(k, d);
             }
-          else if (!g && m || x)
-            this.onNavigate(k, l);
+          else if (!c && m || w)
+            this.onNavigate(k, d);
           else if (i) {
             let y;
-            if (l === v.down || l === v.right) {
-              const f = t.slice(I + 1).find((u) => !u.disabled && u[i]);
-              y = f && t.findIndex((u) => u[i] === f[i]);
-            } else if (l === v.up || l === v.left) {
-              let f;
-              if (I === 0 && o)
+            if (d === v.down || d === v.right) {
+              const g = r.slice(I + 1).find((u) => !u.disabled && u[i]);
+              y = g && r.findIndex((u) => u[i] === g[i]);
+            } else if (d === v.up || d === v.left) {
+              let g;
+              if (I === 0 && p)
                 y = -1;
               else if (I === -1)
-                f = t, y = t.find((u) => !u.disabled && u[i]);
+                g = r, y = r.find((u) => !u.disabled && u[i]);
               else {
-                f = t.slice(0, I);
-                let u = f.pop();
+                g = r.slice(0, I);
+                let u = g.pop();
                 for (; u && u.disabled; )
-                  u = f.pop();
-                y = u && t.findIndex((N) => N[i] === u[i]);
+                  u = g.pop();
+                y = u && r.findIndex((M) => M[i] === u[i]);
               }
             }
             if (y !== void 0) {
-              const f = y - I;
-              this.onNavigate(k, l, f);
+              const g = y - I;
+              this.onNavigate(k, d, g);
             } else
-              y === void 0 && t.findIndex((f) => f[i] === b[i]) === t.length - 1 && this.onNavigate(k, l);
+              y === void 0 && r.findIndex((g) => g[i] === b[i]) === r.length - 1 && this.onNavigate(k, d);
           } else
-            this.onNavigate(k, l);
+            this.onNavigate(k, d);
           e.preventDefault();
         }
         this.applyState(k);
@@ -279,8 +277,8 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
     }, 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: r = 0 } = this.state, o = r <= G && a, n = this.base.initState();
-      n.syntheticEvent = e, n.data.focused = !1, n.events.push({ type: "onBlur" }), t && this.resetValueIfDisabledItem(), t && !o && this.base.togglePopup(n), this.applyState(n);
+      const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: a } = this.props, { windowWidth: p = 0 } = this.state, n = p <= $ && 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);
@@ -312,9 +310,9 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
       );
     }, this.setValidity = () => {
       this._select && this._select.setCustomValidity && this._select.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || ye
+        this.validity.valid ? "" : this.props.validationMessage || ke
       );
-    }, J(me);
+    }, Q(fe);
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
@@ -326,7 +324,7 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
     return this.props.id + "-guid";
   }
   get document() {
-    if (A)
+    if (H)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -340,14 +338,14 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
    */
   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), !W(s) && this.props.defaultItem !== void 0 && (s = this.props.defaultItem), 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), !q(s) && this.props.defaultItem !== void 0 && (s = this.props.defaultItem), s;
   }
   /**
    * The index of the selected item.
    */
   get index() {
-    const { data: s = [], dataItemKey: e } = this.props, t = this.value;
-    return s.findIndex((a) => C(a, t, e));
+    const { dataItemKey: s } = this.props, e = x(this.props), t = this.value;
+    return e.findIndex((a) => E(a, t, s));
   }
   /**
    * Gets the `name` property of the DropDownList.
@@ -367,28 +365,28 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
     };
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : E.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : _.defaultProps.validityStyles;
   }
   /**
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : E.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : _.defaultProps.required;
   }
   /**
    * @hidden
    */
   componentDidUpdate(s, e) {
-    var g;
-    const { dataItemKey: t, virtual: a, groupField: r = "", textField: o } = this.props, { data: n = [] } = this.props, c = s.virtual ? s.virtual.total : 0, d = this.props.opened !== void 0 ? this.props.opened : this.state.opened, p = s.opened !== void 0 ? s.opened : e.opened, i = !p && d;
-    if (this.base.didUpdate(), this.base.getPopupSettings().animate || i && this.onPopupOpened(), a && a.total !== c)
+    var r;
+    const { dataItemKey: t, virtual: a, groupField: p = "", textField: n } = this.props, o = x(this.props), f = s.virtual ? s.virtual.total : 0, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = s.opened !== void 0 ? s.opened : e.opened, c = !i && l;
+    if (this.base.didUpdate(), this.base.getPopupSettings().animate || c && this.onPopupOpened(), a && a.total !== f)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
       const b = this.value, I = s.value !== void 0 ? s.value : e.value;
-      let m = n.findIndex((x) => C(x, b, t));
-      r !== "" && b && o && (m = (g = this.base.getGroupedDataModernMode(n, r)) == null ? void 0 : g.map((x) => x[o]).indexOf(b[o]));
-      const l = !C(I, b, t);
-      i && a ? this.base.scrollToVirtualItem(a, m) : i && !a ? (this.onPopupOpened(), n && n.length !== 0 && this.base.resetGroupStickyHeader(n[0][r], this), this.base.scrollToItem(m)) : d && p && b && l && !this._navigated ? this.base.scrollToItem(m, this.base.vs.enabled) : d && p && 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());
+      let m = o.findIndex((w) => E(w, b, t));
+      p !== "" && b && n && (m = (r = this.base.getGroupedDataModernMode(o, p)) == null ? void 0 : r.map((w) => w[n]).indexOf(b[n]));
+      const d = !E(I, b, t);
+      c && a ? this.base.scrollToVirtualItem(a, m) : c && !a ? (this.onPopupOpened(), o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][p], this), this.base.scrollToItem(m)) : l && i && b && d && !this._navigated ? this.base.scrollToItem(m, this.base.vs.enabled) : l && 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());
     }
     this._navigated = !1, this.setValidity();
   }
@@ -397,7 +395,7 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
    */
   componentDidMount() {
     var s;
-    this.observerResize = A && 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);
+    this.observerResize = H && 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() {
@@ -408,43 +406,42 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
    * @hidden
    */
   render() {
-    const s = fe(this).toLanguageString(U, ge[U]), { style: e, className: t, label: a, dir: r, virtual: o, size: n, rounded: c, fillMode: d, adaptive: p } = this.props, { windowWidth: i = 0 } = this.state, g = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = this.value, I = L(b, this.props.textField), m = !this.validityStyles || this.validity.valid, l = this.base, x = l.vs, w = i <= G && p;
-    x.enabled = o !== void 0, o !== void 0 && (l.vs.skip = o.skip, l.vs.total = o.total, l.vs.pageSize = o.pageSize);
+    const s = ge(this).toLanguageString(G, ve[G]), { style: e, className: t, label: a, dir: p, virtual: n, size: o, rounded: f, fillMode: l, adaptive: i } = this.props, { windowWidth: c = 0 } = this.state, r = this.props.opened !== void 0 ? this.props.opened : this.state.opened, b = this.value, I = K(b, this.props.textField), m = !this.validityStyles || this.validity.valid, d = this.base, w = d.vs, C = c <= $ && i;
+    w.enabled = n !== void 0, n !== void 0 && (d.vs.skip = n.skip, d.vs.total = n.total, d.vs.pageSize = n.pageSize);
     const {
-      dataItemKey: F,
-      data: M = [],
+      dataItemKey: N,
       disabled: D,
-      tabIndex: K,
-      loading: k,
-      iconClassName: y,
-      svgIcon: f,
-      valueRender: u
-    } = this.props, { focused: N } = this.state, Y = M.findIndex((_) => C(_, b, F)), R = /* @__PURE__ */ h.createElement("span", { id: this._inputId, className: "k-input-inner" }, I && /* @__PURE__ */ h.createElement("span", { className: "k-input-value-text" }, I)), j = u !== void 0 ? u.call(void 0, R, b) : R, V = /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement(
+      tabIndex: O,
+      loading: P,
+      iconClassName: k,
+      svgIcon: y,
+      valueRender: g
+    } = this.props, u = x(this.props), { focused: M } = this.state, j = u.findIndex((F) => E(F, b, N)), V = /* @__PURE__ */ h.createElement("span", { id: this._inputId, className: "k-input-inner" }, I && /* @__PURE__ */ h.createElement("span", { className: "k-input-value-text" }, I)), J = g !== void 0 ? g.call(void 0, V, b) : V, A = /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement(
       "span",
       {
         ref: this.componentRef,
-        className: P(
+        className: L(
           "k-dropdownlist k-picker",
           t,
           {
-            [`k-picker-${z[n] || n}`]: n,
-            [`k-rounded-${ke[c] || c}`]: c,
-            [`k-picker-${d}`]: d,
-            "k-focus": N,
+            [`k-picker-${T[o] || o}`]: o,
+            [`k-rounded-${Se[f] || f}`]: f,
+            [`k-picker-${l}`]: l,
+            "k-focus": M,
             "k-disabled": D,
             "k-invalid": !m,
-            "k-loading": k,
+            "k-loading": P,
             "k-required": this.required
           }
         ),
         style: a ? { ...e, width: void 0 } : e,
-        dir: r,
-        onMouseDown: g ? (_) => {
-          _.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), _.preventDefault());
+        dir: p,
+        onMouseDown: r ? (F) => {
+          F.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), F.preventDefault());
         } : void 0,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        tabIndex: X(K, D),
+        tabIndex: Z(O, D),
         accessKey: this.props.accessKey,
         onKeyDown: this.handleKeyDown,
         onKeyPress: this.handleKeyPress,
@@ -453,81 +450,80 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
         "aria-required": this.required,
         "aria-disabled": D || void 0,
         "aria-haspopup": "listbox",
-        "aria-expanded": g || !1,
+        "aria-expanded": r || !1,
         "aria-owns": this._listboxId,
-        "aria-activedescendant": g ? "option-" + this._guid + "-" + (Y + (o ? o.skip : 0)) : void 0,
+        "aria-activedescendant": r ? "option-" + this._guid + "-" + (j + (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,
-      k && /* @__PURE__ */ h.createElement(Z, { className: "k-input-loading-icon", name: "loading" }),
+      J,
+      P && /* @__PURE__ */ h.createElement(ee, { className: "k-input-loading-icon", name: "loading" }),
       /* @__PURE__ */ h.createElement(
-        q,
+        U,
         {
           tabIndex: -1,
           type: "button",
           "aria-label": s,
           "aria-hidden": !0,
-          size: n,
-          fillMode: d,
-          iconClass: y,
+          size: o,
+          fillMode: l,
+          iconClass: k,
           className: "k-input-button",
           rounded: null,
           themeColor: "base",
-          icon: y ? void 0 : "caret-alt-down",
-          svgIcon: f || oe,
-          onMouseDown: (_) => this.state.focused && _.preventDefault()
+          icon: k ? void 0 : "caret-alt-down",
+          svgIcon: y || ne,
+          onMouseDown: (F) => this.state.focused && F.preventDefault()
         }
       ),
       this.dummySelect(b),
-      !w && this.renderListContainer()
-    ), w && this.renderAdaptiveListContainer());
+      !C && this.renderListContainer()
+    ), C && this.renderAdaptiveListContainer());
     return a ? /* @__PURE__ */ h.createElement(
-      ae,
+      oe,
       {
         label: a,
         editorValue: I,
         editorValid: m,
         editorDisabled: this.props.disabled,
         style: { width: e ? e.width : void 0 },
-        children: V
+        children: A
       }
-    ) : V;
+    ) : A;
   }
   /**
    * @hidden
    */
   onNavigate(s, e, t) {
     const {
-      data: a = [],
-      defaultItem: r,
-      dataItemKey: o,
+      defaultItem: a,
+      dataItemKey: p,
       virtual: n = { skip: 0, total: 0, pageSize: 0 }
-    } = this.props, c = this.base.vs, d = this.value, p = a.findIndex((g) => C(g, d, o)), i = this.base.navigation.navigate({
-      current: n.skip + p,
-      max: (c.enabled ? n.total : a.length) - 1,
-      min: r !== void 0 ? -1 : 0,
+    } = this.props, o = x(this.props), f = this.base.vs, l = this.value, i = o.findIndex((r) => E(r, l, p)), c = this.base.navigation.navigate({
+      current: n.skip + i,
+      max: (f.enabled ? n.total : o.length) - 1,
+      min: a !== void 0 ? -1 : 0,
       keyCode: e,
       skipItems: t || void 0
     });
-    i !== void 0 && this.handleItemSelect(i, s), this.applyState(s);
+    c !== void 0 && this.handleItemSelect(c, s), this.applyState(s);
   }
   renderAdaptiveListContainer() {
-    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: a, adaptiveTitle: r, groupField: o, groupStickyHeaderItemRender: n, list: c, data: d = [] } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, i = {
+    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: a, adaptiveTitle: p, groupField: n, groupStickyHeaderItemRender: o, list: f } = this.props, l = x(this.props), i = this.props.opened !== void 0 ? this.props.opened : this.state.opened, c = {
       navigatable: !1,
       navigatableElements: [],
-      expand: p,
+      expand: i,
       animation: !0,
       onClose: (b) => this.handleWrapperClick(b),
-      animationStyles: s <= $ ? { top: 0, width: "100%", height: "100%" } : void 0,
-      className: s <= $ ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+      animationStyles: s <= Y ? { top: 0, width: "100%", height: "100%" } : void 0,
+      className: s <= Y ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
     };
-    let { group: g } = this.state;
-    return g === void 0 && o !== void 0 && (g = L(d[0], o)), /* @__PURE__ */ h.createElement(ve, { ...i }, /* @__PURE__ */ h.createElement(be, { className: "k-text-center" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ h.createElement("div", null, r)), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ h.createElement(
-      q,
+    let { group: r } = this.state;
+    return r === void 0 && n !== void 0 && (r = K(l[0], n)), /* @__PURE__ */ h.createElement(be, { ...c }, /* @__PURE__ */ h.createElement(Ie, { className: "k-text-center" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ h.createElement("div", null, p)), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ h.createElement(
+      U,
       {
         tabIndex: 0,
         "aria-label": "Cancel",
@@ -536,41 +532,40 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
         fillMode: "flat",
         onClick: this.handleWrapperClick,
         icon: "x",
-        svgIcon: ne
+        svgIcon: re
       }
-    ))), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())), /* @__PURE__ */ h.createElement(Ie, { className: "!k-overflow-hidden" }, e && /* @__PURE__ */ h.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ h.createElement(
+    ))), /* @__PURE__ */ h.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())), /* @__PURE__ */ h.createElement(ye, { className: "!k-overflow-hidden" }, e && /* @__PURE__ */ h.createElement("div", { className: "k-list-header" }, e), /* @__PURE__ */ h.createElement(
       "div",
       {
-        className: P(
+        className: L(
           "k-list",
           {
-            [`k-list-${z[a] || a}`]: a,
+            [`k-list-${T[a] || a}`]: a,
             "k-virtual-list": this.base.vs.enabled
           }
         )
       },
       this.renderDefaultItem(),
-      !c && g && d.length !== 0 && /* @__PURE__ */ h.createElement(H, { group: g, groupMode: "modern", render: n }),
+      !f && r && l.length !== 0 && /* @__PURE__ */ h.createElement(B, { group: r, groupMode: "modern", render: o }),
       this.renderList()
     ), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t)));
   }
   getFocusedIndex() {
     const s = this.value, {
-      data: e = [],
-      textField: t,
-      dataItemKey: a,
-      virtual: r = { skip: 0 },
-      focusedItemIndex: o = ue,
+      textField: e,
+      dataItemKey: t,
+      virtual: a = { skip: 0 },
+      focusedItemIndex: p = me,
       filterable: n,
-      skipDisabledItems: c = !0
-    } = this.props, d = this.props.filter ? this.props.filter : this.state.text;
-    return c && t && !d && !s ? e.findIndex((p) => !p.disabled && p[t]) : W(s) && d === void 0 || n && d === "" ? e.findIndex((p) => C(p, s, a)) : d ? this._lastKeypressIsFilter ? o(e, d, t) : e.findIndex((p) => C(p, s, a)) : r.skip === 0 ? 0 : -1;
+      skipDisabledItems: o = !0
+    } = this.props, f = x(this.props), l = this.props.filter ? this.props.filter : this.state.text;
+    return o && e && !l && !s ? f.findIndex((i) => !i.disabled && i[e]) : q(s) && l === void 0 || n && l === "" ? f.findIndex((i) => E(i, s, t)) : l ? this._lastKeypressIsFilter ? p(f, l, e) : f.findIndex((i) => E(i, s, t)) : a.skip === 0 ? 0 : -1;
   }
   focusElement(s) {
     this._skipFocusEvent = !0, s.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 30);
   }
   triggerOnChange(s, e) {
-    C(this.value, s, this.props.dataItemKey) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
+    E(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;
@@ -580,18 +575,18 @@ const ye = "Please select a value from the list!", { sizeMap: z, roundedMap: ke
       this.setState({ windowWidth: e.target.clientWidth });
   }
   resetValueIfDisabledItem() {
-    const { data: s = [] } = this.props, e = this.base.initState(), t = this.getFocusedIndex();
+    const s = x(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 = {
+_.displayName = "DropDownList", _.propTypes = {
   delay: S.number,
   ignoreCase: S.bool,
   iconClassName: S.string,
-  svgIcon: Q,
+  svgIcon: X,
   defaultItem: S.any,
   valueRender: S.func,
   valueMap: S.func,
@@ -607,26 +602,26 @@ E.displayName = "DropDownList", E.propTypes = {
   list: S.any,
   skipDisabledItems: S.bool,
   renderListFilterWrapper: S.bool,
-  ...O.propTypes
-}, E.defaultProps = {
+  ...z.propTypes
+}, _.defaultProps = {
   delay: 500,
   tabIndex: 0,
   ignoreCase: !0,
-  ...O.defaultProps,
+  ...z.defaultProps,
   required: !1,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   groupMode: "modern"
 };
-let T = E;
-const Se = ee(), xe = te(se(
-  Se,
-  T
+let R = _;
+const xe = te(), we = se(ie(
+  xe,
+  R
 ));
-xe.displayName = "KendoReactDropDownList";
+we.displayName = "KendoReactDropDownList";
 export {
-  xe as DropDownList,
-  Se as DropDownListPropsContext,
-  T as DropDownListWithoutContext
+  we as DropDownList,
+  xe as DropDownListPropsContext,
+  R as DropDownListWithoutContext
 };