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

package/DropDownList/DropDownList.mjs

@@ -6,34 +6,34 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as h from "react";
-import S from "prop-types";
-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 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 {
+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 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 = () => {
+    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: 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);
+      const { virtual: o, dataItemKey: h, defaultItem: n } = this.props, l = E(this.props), b = o ? o.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__ */ h.createElement(
+    }, this.dummySelect = (e) => /* @__PURE__ */ u.createElement(
       "select",
       {
         name: this.props.name,
@@ -45,61 +45,64 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
         title: this.props.label,
         style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
       },
-      /* @__PURE__ */ h.createElement(
+      /* @__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: 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,
+      const { header: e, footer: t, dir: o, size: h, groupField: n, groupStickyHeaderItemRender: l, list: b, unstyled: d } = this.props, i = E(this.props), c = this.base, a = c.getPopupSettings(), f = this.props.opened !== void 0 ? this.props.opened : this.state.opened, g = a.width !== void 0 ? a.width : c.popupWidth, p = d && d.uDropDownList, r = {
+        dir: o !== void 0 ? o : c.dirCalculated,
+        width: g,
         popupSettings: {
-          ...c,
-          popupClass: L(
-            c.popupClass,
-            "k-list-container",
-            "k-dropdownlist-popup"
+          ...a,
+          popupClass: x(
+            a.popupClass,
+            D.listContainer({
+              c: p
+            })
           ),
-          anchor: c.anchor || this.element,
-          show: r,
+          anchor: a.anchor || this.element,
+          show: f,
           onOpen: this.onPopupOpened,
-          onClose: this.onPopupClosed
+          onClose: this.onPopupClosed,
+          onMouseDownOutside: this.onPopupMouseDown
         },
-        itemsCount: [l.length]
+        itemsCount: [i.length]
       };
-      let { group: m } = this.state;
-      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(
+      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: L(
-            "k-list",
-            {
-              [`k-list-${T[p] || p}`]: p,
-              "k-virtual-list": this.base.vs.enabled
-            }
+          className: x(
+            D.list({
+              c: p,
+              size: h,
+              virtual: this.base.vs.enabled
+            })
           )
         },
         this.renderDefaultItem(),
-        !f && m && l.length !== 0 && /* @__PURE__ */ h.createElement(B, { group: m, groupMode: "modern", render: o }),
+        !b && w && i.length !== 0 && /* @__PURE__ */ u.createElement(W, { group: w, groupMode: "modern", render: l }),
         this.renderList()
-      ), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t));
+      ), 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: p,
+        virtual: o = { skip: 0, total: void 0 },
+        groupHeaderItemRender: h,
         listNoDataRender: n,
-        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(
-        he,
+        itemRender: l,
+        unstyled: b
+      } = this.props, d = E(this.props), i = b && b.uDropDownList, c = this.base.vs, a = o.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: c,
-          data: f.slice(),
+          show: f,
+          data: d.slice(),
           focusedIndex: this.getFocusedIndex(),
           value: this.value,
           textField: e,
@@ -107,41 +110,41 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
           optionsGuid: this._guid,
           groupField: this.props.groupField,
           groupMode: "modern",
-          listRef: (I) => l.list = this.base.list = I,
-          wrapperStyle: { maxHeight: r.height },
-          wrapperCssClass: "k-list-content",
-          listStyle: l.enabled ? { transform: b } : void 0,
+          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: i,
+          skip: a,
           onClick: this.handleItemClick,
-          itemRender: o,
-          groupHeaderItemRender: p,
+          itemRender: l,
+          groupHeaderItemRender: h,
           noDataRender: n,
           onScroll: this.onScroll,
-          wrapperRef: l.scrollerRef,
+          wrapperRef: c.scrollerRef,
           scroller: this.base.renderScrollElement(),
-          ariaSetSize: a.total
+          ariaSetSize: o.total
         }
       );
     }, this.onScroll = (e) => {
-      const { vs: t, list: a } = this.base;
+      const { vs: t, list: o } = this.base;
       t.scrollHandler(e);
-      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]);
+      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 : o ? o.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__ */ h.createElement(
-        de,
+      return this.props.filterable && /* @__PURE__ */ u.createElement(
+        ce,
         {
           value: e,
           ref: (t) => this._filterInput = t && t.element,
@@ -154,13 +157,13 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
         }
       );
     }, this.renderDefaultItem = () => {
-      const { textField: e, defaultItem: t, dataItemKey: a } = this.props;
-      return t !== void 0 && /* @__PURE__ */ h.createElement(
-        pe,
+      const { textField: e, defaultItem: t, dataItemKey: o } = this.props;
+      return t !== void 0 && /* @__PURE__ */ u.createElement(
+        ue,
         {
           defaultItem: t,
           textField: e,
-          selected: E(this.value, t, a),
+          selected: k(this.value, t, o),
           key: "defaultitemkey",
           onClick: this.handleDefaultItemClick
         }
@@ -168,107 +171,107 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
     }, 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 = 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;
+      const { dataItemKey: t } = this.props, o = E(this.props);
+      let h = o.map((F, L) => ({ item: F, itemIndex: L }));
+      const n = this.searchState.word, l = this.searchState.last, b = fe(n, l);
+      let d = h.length, i = Math.max(0, o.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 a, f, g, p = 0;
+      const { textField: r, ignoreCase: w } = this.props;
+      for (; p < d; p++)
+        if (a = T(h[p].item, r), f = b && q(a, l, w), g = q(a, n, w), f || g) {
+          p = h[p].itemIndex;
           break;
         }
-      if (m !== l) {
-        const C = this.base.initState();
-        C.syntheticEvent = e, this.handleItemSelect(m, C), this.applyState(C), this._valueDuringOnChange = void 0;
+      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: p,
+        disabled: o,
+        defaultItem: h,
         leftRightKeysNavigation: n = !0,
-        virtual: o = { skip: 0, total: 0, pageSize: 0 },
-        dataItemKey: f,
-        groupField: l = "",
+        virtual: l = { skip: 0, total: 0, pageSize: 0 },
+        dataItemKey: b,
+        groupField: d = "",
         textField: i,
         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) {
+      } = this.props, a = E(this.props), f = this.value, g = a.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, L = !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), M = F || z && !t || w, S = this.base.initState();
+      if (S.syntheticEvent = e, !o) {
         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)
+          r === I.home ? l.skip !== 0 ? (this.base.triggerOnPageChange(S, 0, l.pageSize), this._navigated = !0) : this.triggerOnChange(a[0], S) : l.skip < l.total - l.pageSize ? (this.base.triggerOnPageChange(S, l.total - l.pageSize, l.pageSize), this._navigated = !0) : this.triggerOnChange(a[a.length - 1], S);
+        else if (p && r === I.pageUp)
           e.preventDefault(), this.base.scrollPopupByPageSize(-1);
-        else if (m && d === v.pageDown)
+        else if (p && r === I.pageDown)
           e.preventDefault(), this.base.scrollPopupByPageSize(1);
-        else if (m && d === v.enter) {
+        else if (p && r === I.enter) {
           const y = this.getFocusedIndex();
-          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);
+          this.haveFocusedItemAndDataNotEmpty(a, y) ? (this.triggerOnChange(null, S), this.applyState(S)) : this.handleItemSelect(y, S), this.base.togglePopup(S), e.preventDefault();
+        } else if (L || _)
+          _ && this.resetValueIfDisabledItem(), this.base.togglePopup(S), e.preventDefault();
+        else if (M) {
+          if (this._lastKeypressIsFilter = !1, d !== "" && i)
+            if (!c && p)
+              this.onNavigate(S, r);
             else {
               let y;
-              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)
+              if (r === I.down || r === I.right) {
+                const v = a.slice(g + 1).find((m) => !m.disabled && m[i]);
+                y = v && a.findIndex((m) => m[i] === v[i]);
+              } else if (r === I.up || r === I.left) {
+                let v;
+                if (g === 0 && h)
                   y = -1;
-                else if (I === -1)
-                  g = r, y = r.findIndex((u) => !u.disabled && u[i]);
+                else if (g === -1)
+                  v = a, y = a.findIndex((m) => !m.disabled && m[i]);
                 else {
-                  g = r.slice(0, I);
-                  let u = g.pop();
-                  for (; u && u.disabled; )
-                    u = g.pop();
-                  y = u && r.findIndex((M) => M[i] === u[i]);
+                  v = a.slice(0, g);
+                  let m = v.pop();
+                  for (; m && m.disabled; )
+                    m = v.pop();
+                  y = m && a.findIndex((P) => P[i] === m[i]);
                 }
               }
               if (y !== void 0) {
-                const g = y - I;
-                this.onNavigate(k, d, g);
+                const v = y - g;
+                this.onNavigate(S, r, v);
               } else
-                y === void 0 && r.findIndex((g) => g[i] === b[i]) === r.length - 1 && this.onNavigate(k, d);
+                y === void 0 && a.findIndex((v) => v[i] === f[i]) === a.length - 1 && this.onNavigate(S, r);
             }
-          else if (!c && m || w)
-            this.onNavigate(k, d);
+          else if (!c && p || w)
+            this.onNavigate(S, r);
           else if (i) {
             let y;
-            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)
+            if (r === I.down || r === I.right) {
+              const v = a.slice(g + 1).find((m) => !m.disabled && m[i]);
+              y = v && a.findIndex((m) => m[i] === v[i]);
+            } else if (r === I.up || r === I.left) {
+              let v;
+              if (g === 0 && h)
                 y = -1;
-              else if (I === -1)
-                g = r, y = r.find((u) => !u.disabled && u[i]);
+              else if (g === -1)
+                v = a, y = a.find((m) => !m.disabled && m[i]);
               else {
-                g = r.slice(0, I);
-                let u = g.pop();
-                for (; u && u.disabled; )
-                  u = g.pop();
-                y = u && r.findIndex((M) => M[i] === u[i]);
+                v = a.slice(0, g);
+                let m = v.pop();
+                for (; m && m.disabled; )
+                  m = v.pop();
+                y = m && a.findIndex((P) => P[i] === m[i]);
               }
             }
             if (y !== void 0) {
-              const g = y - I;
-              this.onNavigate(k, d, g);
+              const v = y - g;
+              this.onNavigate(S, r, v);
             } else
-              y === void 0 && r.findIndex((g) => g[i] === b[i]) === r.length - 1 && this.onNavigate(k, d);
+              y === void 0 && a.findIndex((v) => v[i] === f[i]) === a.length - 1 && this.onNavigate(S, r);
           } else
-            this.onNavigate(k, d);
+            this.onNavigate(S, r);
           e.preventDefault();
         }
-        this.applyState(k);
+        this.applyState(S);
       }
     }, this.handleItemClick = (e, t) => {
       this.base.handleItemClick(e, t), this._valueDuringOnChange = void 0;
@@ -277,8 +280,8 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
     }, 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: 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);
+      const t = this.props.opened !== void 0 ? this.props.opened : this.state.opened, { adaptive: o } = this.props, { windowWidth: h = 0 } = this.state, n = h <= j && o, 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);
@@ -288,7 +291,7 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
       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 === v.enter)
+      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 = {
@@ -308,11 +311,17 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
           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 || ke
+        this.validity.valid ? "" : this.props.validationMessage || Ce
       );
-    }, Q(fe);
+    }, ee(be);
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
@@ -324,7 +333,7 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
     return this.props.id + "-guid";
   }
   get document() {
-    if (H)
+    if (B)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -338,14 +347,14 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
    */
   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), !q(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), !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 = x(this.props), t = this.value;
-    return e.findIndex((a) => E(a, t, s));
+    const { dataItemKey: s } = this.props, e = E(this.props), t = this.value;
+    return e.findIndex((o) => k(o, t, s));
   }
   /**
    * Gets the `name` property of the DropDownList.
@@ -365,28 +374,28 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
     };
   }
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : _.defaultProps.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 : _.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : N.defaultProps.required;
   }
   /**
    * @hidden
    */
   componentDidUpdate(s, e) {
-    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)
+    var a;
+    const { dataItemKey: t, virtual: o, 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(), o && o.total !== b)
       this.base.vs.calcScrollElementHeight(), this.base.vs.reset();
     else {
-      const b = this.value, I = s.value !== void 0 ? s.value : e.value;
-      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());
+      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 = (a = this.base.getGroupedDataModernMode(l, h)) == null ? void 0 : a.map((w) => w[n]).indexOf(f[n]));
+      const r = !k(g, f, t);
+      c && o ? this.base.scrollToVirtualItem(o, p) : c && !o ? (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 && o && o.skip === 0 ? this.base.vs.reset() : this._navigated && o && o.skip === o.total - o.pageSize && this.base.vs.scrollToEnd());
     }
     this._navigated = !1, this.setValidity();
   }
@@ -395,7 +404,7 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
    */
   componentDidMount() {
     var s;
-    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);
+    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() {
@@ -406,53 +415,53 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
    * @hidden
    */
   render() {
-    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 s = Ie(this).toLanguageString(Y, ye[Y]), { style: e, className: t, label: o, dir: h, virtual: n, size: l, rounded: b, fillMode: d, adaptive: i, unstyled: c } = this.props, { windowWidth: a = 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, L = a <= 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: N,
-      disabled: D,
-      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(
+      dataItemKey: z,
+      disabled: M,
+      tabIndex: S,
+      loading: y,
+      iconClassName: v,
+      svgIcon: m,
+      valueRender: P
+    } = 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.input({ c: _ })) }, p && /* @__PURE__ */ u.createElement("span", { className: x(D.inputText({ c: _ })) }, p)), Z = P !== void 0 ? P.call(void 0, H, g) : H, V = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement(
       "span",
       {
         ref: this.componentRef,
-        className: L(
-          "k-dropdownlist k-picker",
-          t,
-          {
-            [`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": P,
-            "k-required": this.required
-          }
+        className: x(
+          D.wrapper({
+            c: _,
+            size: l,
+            rounded: b,
+            fillMode: d,
+            focused: Q,
+            disabled: M,
+            invalid: !r,
+            loading: y,
+            required: this.required
+          }),
+          t
         ),
-        style: a ? { ...e, width: void 0 } : e,
-        dir: p,
-        onMouseDown: r ? (F) => {
-          F.target.nodeName !== "INPUT" && (this.focusElement(this.base.wrapper), F.preventDefault());
+        style: o ? { ...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: Z(O, D),
+        tabIndex: se(S, M),
         accessKey: this.props.accessKey,
         onKeyDown: this.handleKeyDown,
         onKeyPress: this.handleKeyPress,
-        onClick: D ? void 0 : this.handleWrapperClick,
+        onClick: M ? void 0 : this.handleWrapperClick,
         role: "combobox",
         "aria-required": this.required,
-        "aria-disabled": D || void 0,
+        "aria-disabled": M || void 0,
         "aria-haspopup": "listbox",
-        "aria-expanded": r || !1,
+        "aria-expanded": f || !1,
         "aria-owns": this._listboxId,
-        "aria-activedescendant": r ? "option-" + this._guid + "-" + (j + (n ? n.skip : 0)) : void 0,
+        "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,
@@ -460,71 +469,73 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
         id: this.props.id,
         title: this.props.title
       },
-      J,
-      P && /* @__PURE__ */ h.createElement(ee, { className: "k-input-loading-icon", name: "loading" }),
-      /* @__PURE__ */ h.createElement(
-        U,
+      Z,
+      y && /* @__PURE__ */ u.createElement(ie, { className: x(D.loadingIcon({ c: _ })), name: "loading" }),
+      /* @__PURE__ */ u.createElement(
+        G,
         {
           tabIndex: -1,
           type: "button",
           "aria-label": s,
-          "aria-hidden": !0,
-          size: o,
-          fillMode: l,
-          iconClass: k,
-          className: "k-input-button",
+          size: l,
+          fillMode: d,
+          iconClass: v,
+          className: x(D.iconButton({ c: _ })),
           rounded: null,
           themeColor: "base",
-          icon: k ? void 0 : "caret-alt-down",
-          svgIcon: y || ne,
-          onMouseDown: (F) => this.state.focused && F.preventDefault()
+          icon: v ? void 0 : "caret-alt-down",
+          svgIcon: m || de,
+          onMouseDown: (O) => this.state.focused && O.preventDefault()
         }
       ),
-      this.dummySelect(b),
-      !C && this.renderListContainer()
-    ), C && this.renderAdaptiveListContainer());
-    return a ? /* @__PURE__ */ h.createElement(
-      oe,
+      this.dummySelect(g),
+      !L && this.renderListContainer()
+    ), L && this.renderAdaptiveListContainer());
+    return o ? /* @__PURE__ */ u.createElement(
+      le,
       {
-        label: a,
-        editorValue: I,
-        editorValid: m,
+        label: o,
+        editorValue: p,
+        editorValid: r,
         editorDisabled: this.props.disabled,
         style: { width: e ? e.width : void 0 },
-        children: A
+        children: V
       }
-    ) : A;
+    ) : V;
   }
   /**
    * @hidden
    */
   onNavigate(s, e, t) {
     const {
-      defaultItem: a,
-      dataItemKey: p,
+      defaultItem: o,
+      dataItemKey: h,
       virtual: n = { skip: 0, total: 0, pageSize: 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({
+    } = this.props, l = E(this.props), b = this.base.vs, d = this.value, i = l.findIndex((a) => k(a, d, h)), c = this.base.navigation.navigate({
       current: n.skip + i,
-      max: (f.enabled ? n.total : o.length) - 1,
-      min: a !== void 0 ? -1 : 0,
+      max: (b.enabled ? n.total : l.length) - 1,
+      min: o !== 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: 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 = {
+    const { windowWidth: s = 0 } = this.state, { header: e, footer: t, size: o, 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, a = d && d.uDropDownList, f = d && d.uDropDownList, g = {
       navigatable: !1,
       navigatableElements: [],
-      expand: i,
+      expand: c,
       animation: !0,
-      onClose: (b) => this.handleWrapperClick(b),
-      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"
+      onClose: (r) => this.handleWrapperClick(r),
+      animationStyles: s <= $ ? { top: 0, width: "100%", height: "100%" } : void 0,
+      className: x(K.wrapper({
+        c: a,
+        isFullScreen: s <= $
+      }))
     };
-    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,
+    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,
       {
         tabIndex: 0,
         "aria-label": "Cancel",
@@ -533,40 +544,40 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
         fillMode: "flat",
         onClick: this.handleWrapperClick,
         icon: "x",
-        svgIcon: re
+        svgIcon: pe
       }
-    ))), /* @__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(
+    ))), /* @__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: a })) }, e), /* @__PURE__ */ u.createElement(
       "div",
       {
-        className: L(
-          "k-list",
-          {
-            [`k-list-${T[a] || a}`]: a,
-            "k-virtual-list": this.base.vs.enabled
-          }
+        className: x(
+          D.list({
+            c: a,
+            size: o,
+            virtual: this.base.vs.enabled
+          })
         )
       },
       this.renderDefaultItem(),
-      !f && r && l.length !== 0 && /* @__PURE__ */ h.createElement(B, { group: r, groupMode: "modern", render: o }),
+      !b && p && i.length !== 0 && /* @__PURE__ */ u.createElement(W, { group: p, groupMode: "modern", render: l }),
       this.renderList()
-    ), t && /* @__PURE__ */ h.createElement("div", { className: "k-list-footer" }, t)));
+    ), t && /* @__PURE__ */ u.createElement("div", { className: x(D.listFooter({ c: a })) }, t)));
   }
   getFocusedIndex() {
     const s = this.value, {
       textField: e,
       dataItemKey: t,
-      virtual: a = { skip: 0 },
-      focusedItemIndex: p = me,
+      virtual: o = { skip: 0 },
+      focusedItemIndex: h = ve,
       filterable: n,
-      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;
+      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)) : o.skip === 0 ? 0 : -1;
   }
   focusElement(s) {
     this._skipFocusEvent = !0, s.focus(), window.setTimeout(() => this._skipFocusEvent = !1, 30);
   }
   triggerOnChange(s, e) {
-    E(this.value, s, this.props.dataItemKey) || (this.props.value === void 0 && (e.data.value = s), this._valueDuringOnChange = s, e.events.push({ type: "onChange" }));
+    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;
@@ -576,53 +587,53 @@ const ke = "Please select a value from the list!", { sizeMap: T, roundedMap: Se
       this.setState({ windowWidth: e.target.clientWidth });
   }
   resetValueIfDisabledItem() {
-    const s = x(this.props), e = this.base.initState(), t = this.getFocusedIndex();
+    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;
   }
 };
-_.displayName = "DropDownList", _.propTypes = {
-  delay: S.number,
-  ignoreCase: S.bool,
-  iconClassName: S.string,
-  svgIcon: X,
-  defaultItem: S.any,
-  valueRender: S.func,
-  valueMap: S.func,
-  validationMessage: S.string,
-  required: S.bool,
-  id: S.string,
-  ariaLabelledBy: S.string,
-  ariaDescribedBy: S.string,
-  ariaLabel: S.string,
-  leftRightKeysNavigation: S.bool,
-  title: S.string,
-  groupField: S.string,
-  list: S.any,
-  skipDisabledItems: S.bool,
-  renderListFilterWrapper: S.bool,
-  ...z.propTypes
-}, _.defaultProps = {
+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 = {
   delay: 500,
   tabIndex: 0,
   ignoreCase: !0,
-  ...z.defaultProps,
+  ...R.defaultProps,
   required: !1,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   groupMode: "modern"
 };
-let R = _;
-const xe = te(), we = se(ie(
-  xe,
-  R
+let A = N;
+const De = ae(), Ee = oe(ne(
+  De,
+  re(A)
 ));
-we.displayName = "KendoReactDropDownList";
+Ee.displayName = "KendoReactDropDownList";
 export {
-  we as DropDownList,
-  xe as DropDownListPropsContext,
-  R as DropDownListWithoutContext
+  Ee as DropDownList,
+  De as DropDownListPropsContext,
+  A as DropDownListWithoutContext
 };