@progress/kendo-react-dropdowns 13.3.0 → 13.4.0-develop.1

package/AutoComplete/AutoComplete.mjs

@@ -13,14 +13,14 @@ import L from "../common/List.mjs";
 import S from "../common/DropDownBase.mjs";
 import z from "../common/GroupStickyHeader.mjs";
 import { getFilteredData as b, getItemValue as y, areSame as w, isPresent as H, getFocusedItem as M, itemIndexStartsWith as A } from "../common/utils.mjs";
-import { classNames as k, Keys as m, canUseDOM as D, IconWrap as K, createPropsContext as q, withIdHOC as W, withPropsContext as G, withAdaptiveModeContext as U, kendoThemeMaps as $ } from "@progress/kendo-react-common";
+import { withIdHOC as K, createPropsContext as q, withPropsContext as W, withAdaptiveModeContext as G, classNames as k, kendoThemeMaps as U, Keys as m, canUseDOM as D, IconWrap as $ } from "@progress/kendo-react-common";
 import { FloatingLabel as j } from "@progress/kendo-react-labels";
 import J from "../common/ClearButton.mjs";
 import { AdaptiveMode as Q } from "../common/AdaptiveMode.mjs";
 import E from "../common/withCustomComponent.mjs";
 import { ActionSheetContent as X } from "@progress/kendo-react-layout";
 import Y from "../common/ListFilter.mjs";
-const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I = class I extends g.Component {
+const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = U, I = class I extends g.Component {
   constructor() {
     super(...arguments), this.state = {}, this.base = new S(this), this._element = null, this._suggested = "", this._input = null, this._adaptiveInput = null, this._skipFocusEvent = !1, this._isScrolling = !1, this.itemHeight = 0, this.focus = () => {
       this._input && this._input.focus();
@@ -72,10 +72,10 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         "div",
         {
           className: k("k-list", {
-            [`k-list-${this.mobileMode ? "lg" : O[s] || s}`]: s
+            [`k-list-${this.mobileMode ? "lg" : O[s] || s}`]: this.mobileMode || s
           })
         },
-        !a && n && d.length !== 0 && /* @__PURE__ */ g.createElement(z, { group: n, groupMode: "modern", render: o }),
+        !a && n && d.length !== 0 && /* @__PURE__ */ g.createElement(z, { group: n, render: o }),
         this.renderList()
       ), t && /* @__PURE__ */ g.createElement("div", { className: "k-list-footer" }, t));
     }, this.onScroll = (e) => {
@@ -97,14 +97,14 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
     }, this.onChangeHandler = (e) => {
       const s = this.base.initState(), o = this.mobileMode ? e.target.element : e.currentTarget, i = o.value, a = o.selectionEnd === i.length;
       s.syntheticEvent = e;
-      const d = this._suggested, n = this.value, r = n && n.substring(0, n.length - d.length), l = r && r === i, h = r && r.length > i.length, { suggest: v } = this.props, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+      const d = this._suggested, n = this.value, r = n && n.substring(0, n.length - d.length), p = r && r === i, l = r && r.length > i.length, { suggest: v } = this.props, h = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       if (v !== void 0 && v !== !1) {
-        l || h || !a ? this._suggested = "" : this.suggestValue(i);
+        p || l || !a ? this._suggested = "" : this.suggestValue(i);
         const u = i + this._suggested, f = { userInput: i, value: this._suggested };
         this.triggerOnChange(u, s, { suggestion: f });
       } else
         this._suggested = "", this.triggerOnChange(i, s);
-      (!p && i || p && !i) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
+      (!h && i || h && !i) && this.togglePopup(s), s.data.focusedItem = void 0, this.applyState(s), this.setState({ group: void 0 });
     }, this.clearButtonClick = (e) => {
       const s = this.base.initState(), o = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
       s.syntheticEvent = e;
@@ -113,10 +113,10 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
     }, this.onInputKeyDown = (e) => {
       const { skipDisabledItems: t, groupField: s, textField: o } = this.props, i = b(this.props);
       this._isScrolling && (this._isScrolling = !1);
-      const a = this.focusedIndex(), d = i[a], n = e.keyCode, r = e.altKey, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = this.base.initState();
-      h.syntheticEvent = e;
+      const a = this.focusedIndex(), d = i[a], n = e.keyCode, r = e.altKey, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = this.base.initState();
+      l.syntheticEvent = e;
       const v = () => {
-        l && e.preventDefault();
+        p && e.preventDefault();
       };
       if (r && n === m.down)
         this.setState({
@@ -126,59 +126,58 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         this.setState({
           opened: !1
         });
-      else if (l && n === m.pageUp)
+      else if (p && n === m.pageUp)
         v(), this.base.scrollPopupByPageSize(-1);
-      else if (l && n === m.pageDown)
+      else if (p && n === m.pageDown)
         v(), this.base.scrollPopupByPageSize(1);
-      else if (l && (n === m.enter || n === m.esc))
-        v(), t === !1 && d && d.disabled ? (l && this.togglePopup(h), this.applyState(h)) : this.applyInputValue(e.currentTarget.value, h, e.keyCode);
-      else if (!l && n === m.esc) {
-        const p = "";
-        this._suggested = "", this.triggerOnChange(p, h), this.state.focusedItem !== void 0 && (h.data.focusedItem = void 0), this.applyState(h);
-      } else if (n === m.up || n === m.down) {
+      else if (p && (n === m.enter || n === m.esc))
+        v(), t === !1 && d && d.disabled ? (p && this.togglePopup(l), this.applyState(l)) : this.applyInputValue(e.currentTarget.value, l, e.keyCode);
+      else if (!p && n === m.esc)
+        this._suggested = "", this.triggerOnChange("", l), this.state.focusedItem !== void 0 && (l.data.focusedItem = void 0), this.applyState(l);
+      else if (n === m.up || n === m.down) {
         if (s !== "" && o)
-          if (!this.props.skipDisabledItems && l)
-            this.onNavigate(h, n);
+          if (!this.props.skipDisabledItems && p)
+            this.onNavigate(l, n);
           else {
-            let p = 0;
+            let h = 0;
             if (n === m.down || n === m.right) {
               const u = i.slice(a + 1).find((f) => !f.disabled && f[o]);
-              p = u && i.findIndex((f) => f[o] === u[o]);
+              h = u && i.findIndex((f) => f[o] === u[o]);
             } else if (n === m.up || n === m.left) {
               let u;
               if (a === -1)
-                u = i, p = i.findIndex((f) => !f.disabled && f[o]);
+                u = i, h = i.findIndex((f) => !f.disabled && f[o]);
               else {
                 u = i.slice(0, a);
                 let f = u.pop();
                 for (; f && f.disabled; )
                   f = u.pop();
-                p = f && i.findIndex((C) => C[o] === f[o]);
+                h = f && i.findIndex((C) => C[o] === f[o]);
               }
             }
-            if (p !== void 0) {
-              const u = p - a;
-              this.onNavigate(h, n, u);
-            } else p === void 0 && i.findIndex((u) => u[o]) === i.length - 1 && this.onNavigate(h, n);
+            if (h !== void 0) {
+              const u = h - a;
+              this.onNavigate(l, n, u);
+            } else h === void 0 && i.findIndex((u) => u[o]) === i.length - 1 && this.onNavigate(l, n);
           }
-        else if (!this.props.skipDisabledItems && l)
-          this.onNavigate(h, n);
+        else if (!this.props.skipDisabledItems && p)
+          this.onNavigate(l, n);
         else {
-          let p = null;
+          let h = null;
           if (n === m.down || n === m.right)
-            p = i.slice(a + 1).find((u) => !u.disabled);
+            h = i.slice(a + 1).find((u) => !u.disabled);
           else if (n === m.up || n === m.left) {
             const u = i.slice(0, a);
-            for (p = u.pop(); p && p.disabled; )
-              p = u.pop();
+            for (h = u.pop(); h && h.disabled; )
+              h = u.pop();
           }
-          if (p) {
-            const u = p.id - a - 1;
-            this.onNavigate(h, n, u);
+          if (h) {
+            const u = h.id - a - 1;
+            this.onNavigate(l, n, u);
           } else
-            this.onNavigate(h, n);
+            this.onNavigate(l, n);
         }
-        this.applyState(h), v();
+        this.applyState(l), v();
       }
     }, this.handleFocus = (e) => {
       this._skipFocusEvent || this.base.handleFocus(e);
@@ -255,13 +254,13 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
    * @hidden
    */
   componentDidUpdate(e, t) {
-    var p;
-    const { groupField: s = "" } = this.props, o = b(this.props), { data: i = [] } = e, a = this.focusedIndex(), d = o[a], n = i !== o, r = d !== void 0 && t.focusedItem !== d, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened, h = e.opened !== void 0 ? e.opened : t.opened, v = !h && l;
+    var h;
+    const { groupField: s = "" } = this.props, o = b(this.props), { data: i = [] } = e, a = this.focusedIndex(), d = o[a], n = i !== o, r = d !== void 0 && t.focusedItem !== d, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened, l = e.opened !== void 0 ? e.opened : t.opened, v = !l && p;
     if (s === "")
-      (l && (r || n) || v) && this.base.scrollToItem(a);
+      (p && (r || n) || v) && this.base.scrollToItem(a);
     else if (!this._isScrolling) {
-      const u = (p = this.base.getGroupedDataModernMode(o, s)) == null ? void 0 : p.indexOf(d);
-      v && (o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][s], this), this.base.scrollToItem(u)), l && h && r && this.base.scrollToItem(u);
+      const u = (h = this.base.getGroupedDataModernMode(o, s)) == null ? void 0 : h.indexOf(d);
+      v && (o && o.length !== 0 && this.base.resetGroupStickyHeader(o[0][s], this), this.base.scrollToItem(u)), p && l && r && this.base.scrollToItem(u);
     }
     this.setValidity();
   }
@@ -282,7 +281,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
    * @hidden
    */
   render() {
-    const { dir: e, disabled: t, label: s, className: o, style: i, loading: a, suggest: d, size: n, rounded: r, fillMode: l } = this.props, h = !this.validityStyles || this.validity.valid, v = this.base, p = this.value, u = this.props.clearButton !== !1 && !a && !!p, f = this.props.id || this._inputId, C = this.state.focused;
+    const { dir: e, disabled: t, label: s, className: o, style: i, loading: a, suggest: d, size: n, rounded: r, fillMode: p } = this.props, l = !this.validityStyles || this.validity.valid, v = this.base, h = this.value, u = this.props.clearButton !== !1 && !a && !!h, f = this.props.id || this._inputId, C = this.state.focused;
     typeof d == "string" && (this._suggested = d);
     const [P, B] = E(this.props.prefix || g.Fragment), [T, V] = E(this.props.suffix || g.Fragment), F = /* @__PURE__ */ g.createElement(g.Fragment, null, /* @__PURE__ */ g.createElement(
       "span",
@@ -290,8 +289,8 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         className: k("k-autocomplete k-input", o, {
           [`k-input-${O[n] || n}`]: n,
           [`k-rounded-${ee[r] || r}`]: r,
-          [`k-input-${l}`]: l,
-          "k-invalid": !h,
+          [`k-input-${p}`]: p,
+          "k-invalid": !l,
           "k-focus": C && !t,
           "k-loading": a,
           "k-required": this.required,
@@ -307,8 +306,8 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         onClick: this.handleWrapperClick
       },
       this.props.prefix && /* @__PURE__ */ g.createElement(P, { ...B }),
-      this.renderSearchBar(p || "", f),
-      a && /* @__PURE__ */ g.createElement(K, { className: "k-input-loading-icon", name: "loading" }),
+      this.renderSearchBar(h || "", f),
+      a && /* @__PURE__ */ g.createElement($, { className: "k-input-loading-icon", name: "loading" }),
       u && !a && /* @__PURE__ */ g.createElement(J, { onClick: this.clearButtonClick, key: "clearbutton" }),
       this.props.suffix && /* @__PURE__ */ g.createElement(T, { ...V }),
       !this.mobileMode && this.renderListContainer()
@@ -318,8 +317,8 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
       {
         label: s,
         editorId: f,
-        editorValue: p,
-        editorValid: h,
+        editorValue: h,
+        editorValid: l,
         editorDisabled: t,
         style: { width: i ? i.width : void 0 },
         children: F
@@ -330,7 +329,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
    * @hidden
    */
   onNavigate(e, t, s) {
-    const o = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), n = this.state.focusedItem !== void 0 ? d.findIndex((l) => w(l, this.state.focusedItem, i)) : a ? a(d, o, i) : d.indexOf(M(d, o, i)), r = this.base.navigation.navigate({
+    const o = this.value, { textField: i, focusedItemIndex: a } = this.props, d = b(this.props), n = this.state.focusedItem !== void 0 ? d.findIndex((p) => w(p, this.state.focusedItem, i)) : a ? a(d, o, i) : d.indexOf(M(d, o, i)), r = this.base.navigation.navigate({
       keyCode: t,
       current: n,
       max: d.length - 1,
@@ -351,7 +350,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
     o && this.togglePopup(t), this.applyState(t);
   }
   renderSearchBar(e, t) {
-    const s = this.base, { placeholder: o, tabIndex: i, disabled: a, readonly: d, inputAttributes: n } = this.props, { focused: r } = this.state, l = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
+    const s = this.base, { placeholder: o, tabIndex: i, disabled: a, readonly: d, inputAttributes: n } = this.props, { focused: r } = this.state, p = this.props.opened !== void 0 ? this.props.opened : this.state.opened;
     return /* @__PURE__ */ g.createElement(
       N,
       {
@@ -363,8 +362,8 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         suggestedText: this._suggested,
         focused: r,
         name: this.props.name,
-        ref: (h) => {
-          this._input = h && h.input;
+        ref: (l) => {
+          this._input = l && l.input;
         },
         onKeyDown: this.onInputKeyDown,
         onChange: this.onChangeHandler,
@@ -372,7 +371,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         onBlur: this.handleBlur,
         disabled: a,
         readOnly: d,
-        expanded: l,
+        expanded: p,
         owns: s.listBoxId,
         activedescendant: "option-" + s.guid + "-" + this.focusedIndex(),
         role: "combobox",
@@ -418,9 +417,8 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         highlightSelected: !1,
         optionsGuid: e.guid,
         groupField: this.props.groupField,
-        groupMode: "modern",
-        listRef: (l) => {
-          e.list = l;
+        listRef: (p) => {
+          e.list = p;
         },
         wrapperStyle: this.mobileMode ? {} : { maxHeight: t.height },
         wrapperCssClass: "k-list-content",
@@ -428,7 +426,7 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
         itemRender: i,
         groupHeaderItemRender: a,
         noDataRender: o,
-        onMouseDown: (l) => l.preventDefault(),
+        onMouseDown: (p) => p.preventDefault(),
         onScroll: this.onScroll
       }
     );
@@ -467,9 +465,9 @@ const Z = "Please enter a valid value!", { sizeMap: O, roundedMap: ee } = $, I =
 };
 I.displayName = "AutoComplete", I.propTypes = {
   ...S.basicPropTypes,
-  size: c.oneOf([null, "small", "medium", "large"]),
-  rounded: c.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: c.oneOf([null, "solid", "flat", "outline"]),
+  size: c.oneOf(["small", "medium", "large"]),
+  rounded: c.oneOf(["small", "medium", "large", "full"]),
+  fillMode: c.oneOf(["solid", "flat", "outline"]),
   groupField: c.string,
   suggest: c.oneOfType([c.bool, c.string]),
   placeholder: c.string,
@@ -492,18 +490,18 @@ I.displayName = "AutoComplete", I.propTypes = {
   inputAttributes: c.object
 }, I.defaultProps = {
   ...S.defaultProps,
-  size: "medium",
-  rounded: "medium",
-  fillMode: "solid",
+  size: void 0,
+  rounded: void 0,
+  fillMode: void 0,
   skipDisabledItems: !0,
   prefix: void 0,
   suffix: void 0
 };
 let _ = I;
-const te = q(), se = W(
-  G(
+const te = q(), se = K(
+  W(
     te,
-    U(_)
+    G(_)
   )
 );
 se.displayName = "KendoReactAutoComplete";