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

package/MultiSelectTree/MultiSelectTree.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as t from "react";
 import a from "prop-types";
-import { createPropsContext as at, usePropsContext as it, validatePackage as ot, useId as rt, getTabIndex as lt, useRtl as st, canUseDOM as ct, noop as Z, Keys as r, classNames as ee, IconWrap as ut, kendoThemeMaps as dt } from "@progress/kendo-react-common";
+import { createPropsContext as at, usePropsContext as rt, validatePackage as it, useId as ot, getTabIndex as lt, useRtl as st, canUseDOM as ct, noop as Z, Keys as o, classNames as ee, IconWrap as ut, kendoThemeMaps as dt } from "@progress/kendo-react-common";
 import { Popup as pt } from "@progress/kendo-react-popup";
 import { useLocalization as ft } from "@progress/kendo-react-intl";
 import { TreeView as Te } from "@progress/kendo-react-treeview";
@@ -24,7 +24,7 @@ import Ne from "../common/ListFilter.mjs";
 import { AdaptiveMode as kt } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as Ft } from "@progress/kendo-react-layout";
 import { MOBILE_MEDIUM_DEVISE as xt } from "../common/constants.mjs";
-const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt } = dt, St = (O) => O.split("_").map((R) => parseInt(R, 10)), Tt = (O, R) => {
+const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: St } = dt, wt = (O) => O.split("_").map((R) => parseInt(R, 10)), Tt = (O, R) => {
   const { validationMessage: n, valid: K, required: F } = O;
   return {
     customError: n !== void 0,
@@ -46,32 +46,32 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   required: !1,
   validityStyles: !0
 }, Dt = at(), de = t.forwardRef((O, R) => {
-  const n = it(Dt, O);
-  ot(mt);
-  const K = rt(), F = n.id || K, {
+  const n = rt(Dt, O);
+  it(mt);
+  const K = ot(), F = n.id || K, {
     data: q = [],
     dataItemKey: x,
     popupSettings: M = {},
-    style: B = {},
+    style: L = {},
     opened: I,
     disabled: C,
     onOpen: ae = Z,
     onClose: A = Z,
     placeholder: pe,
-    label: L,
+    label: B,
     name: Oe,
     checkField: fe = D.checkField,
     checkIndeterminateField: me = D.checkIndeterminateField,
     subItemsField: ge = D.subItemsField,
     validationMessage: W,
-    valid: Be,
+    valid: Le,
     tags: ve,
     value: m,
     required: he = D.required,
-    validityStyles: Le = D.validityStyles
-  } = n, z = lt(n.tabIndex, C), l = t.useRef(null), y = t.useRef(null), w = t.useRef(null), ie = t.useRef(null), _ = t.useRef(null), E = t.useRef(null), $ = t.useRef(!1), H = t.useRef([]), G = t.useRef(null), [N, Ve] = t.useState(), [Ke, be] = t.useState(!1), [d, oe] = t.useState(!1), [re, qe] = t.useState(), [Ae, We] = t.useState([]), [ye, ze] = t.useState(""), P = !!(re && re <= xt && n.adaptive), s = I !== void 0 ? I : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: W, valid: Be, required: he }, le), S = st(y, n.dir), _e = {
-    width: ht(y, D, M, B),
-    ...S !== void 0 ? { direction: S } : {}
+    validityStyles: Be = D.validityStyles
+  } = n, z = lt(n.tabIndex, C), l = t.useRef(null), y = t.useRef(null), S = t.useRef(null), re = t.useRef(null), _ = t.useRef(null), E = t.useRef(null), $ = t.useRef(!1), H = t.useRef([]), G = t.useRef(null), [N, Ve] = t.useState(), [Ke, be] = t.useState(!1), [d, ie] = t.useState(!1), [oe, qe] = t.useState(), [Ae, We] = t.useState([]), [ye, ze] = t.useState(""), P = !!(oe && oe <= xt && n.adaptive), s = I !== void 0 ? I : Ke, le = !!(Array.isArray(m) && m.length), se = Tt({ validationMessage: W, valid: Le, required: he }, le), w = st(y, n.dir), _e = {
+    width: ht(y, D, M, L),
+    ...w !== void 0 ? { direction: w } : {}
   }, $e = t.useCallback(() => y.current && y.current.focus(), []);
   H.current = ve === void 0 ? (m || []).map((e) => ({ text: gt(e, n.textField), data: [e] })) : [...ve], t.useImperativeHandle(
     l,
@@ -101,11 +101,11 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     [m, s]
   );
   const k = t.useCallback(
-    (e, i, o) => {
+    (e, r, i) => {
       if (n.onChange) {
         const b = {
-          items: i,
-          operation: o,
+          items: r,
+          operation: i,
           ...e
         };
         n.onChange.call(void 0, b);
@@ -116,34 +116,34 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     (e) => {
       if (vt(e.item, m, x) || !l.current)
         return;
-      const { item: i, nativeEvent: o, syntheticEvent: b } = e, T = {
+      const { item: r, nativeEvent: i, syntheticEvent: b } = e, T = {
         syntheticEvent: b,
-        nativeEvent: o,
+        nativeEvent: i,
         target: l.current
       };
-      k(T, [i], "toggle");
+      k(T, [r], "toggle");
     },
     [m, x, k]
   ), j = t.useCallback(
     (e) => {
       if (!s) {
         if (ae) {
-          const i = { ...e };
-          ae.call(void 0, i);
+          const r = { ...e };
+          ae.call(void 0, r);
         }
         I === void 0 && (be(!0), We(m || []), P && setTimeout(() => {
-          var i;
-          u((i = ie.current) == null ? void 0 : i.element);
+          var r;
+          u((r = re.current) == null ? void 0 : r.element);
         }, 300));
       }
     },
-    [s, I, ae, P, ie]
+    [s, I, ae, P, re]
   ), g = t.useCallback(
     (e) => {
       if (s) {
         if (A) {
-          const i = { ...e };
-          A.call(void 0, i);
+          const r = { ...e };
+          A.call(void 0, r);
         }
         I === void 0 && be(!1);
       }
@@ -162,7 +162,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), Ge = t.useCallback(
     () => {
       var e;
-      !d && s ? g({ target: l.current }) : n.filterable ? u((e = w.current) == null ? void 0 : e.element) : u(E.current && E.current.element);
+      !d && s ? g({ target: l.current }) : n.filterable ? u((e = S.current) == null ? void 0 : e.element) : u(E.current && E.current.element);
     },
     [d, s, u, g, n.filterable]
   ), Ue = t.useCallback(
@@ -172,30 +172,30 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     [d, u]
   ), je = t.useCallback(
     (e) => {
-      if (!d && !$.current && (oe(!0), n.onFocus && l.current)) {
-        const i = {
+      if (!d && !$.current && (ie(!0), n.onFocus && l.current)) {
+        const r = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        n.onFocus.call(void 0, i);
+        n.onFocus.call(void 0, r);
       }
     },
     [d, n.onFocus]
   ), Je = t.useCallback(
     (e) => {
       if (d && !$.current && l.current) {
-        oe(!1);
-        const i = {
+        ie(!1);
+        const r = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
         if (n.onBlur) {
-          const o = { ...i };
-          n.onBlur.call(void 0, o);
+          const i = { ...r };
+          n.onBlur.call(void 0, i);
         }
-        P || g(i);
+        P || g(r);
       }
     },
     [d, n.onBlur, s, I, A]
@@ -207,60 +207,60 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), Xe = t.useCallback(
     (e) => {
       if (!e.isDefaultPrevented() && l.current) {
-        oe(!0);
-        const i = {
+        ie(!0);
+        const r = {
           syntheticEvent: e,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        s || j(i);
+        s || j(r);
       }
     },
     [s, j]
   ), Ye = t.useCallback(
     (e) => {
-      var Y, Se;
-      const { keyCode: i, altKey: o } = e, b = E.current && E.current.element;
-      if (!l.current || e.isDefaultPrevented() && ((Y = w.current) == null ? void 0 : Y.element) === e.target)
+      var Y, we;
+      const { keyCode: r, altKey: i } = e, b = E.current && E.current.element;
+      if (!l.current || e.isDefaultPrevented() && ((Y = S.current) == null ? void 0 : Y.element) === e.target)
         return;
       const T = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: l.current
       };
-      if (m && m.length > 0 && (i === r.left || i === r.right || i === r.home || i === r.end || i === r.delete)) {
+      if (m && m.length > 0 && (r === o.left || r === o.right || r === o.home || r === o.end || r === o.delete)) {
         const c = H.current;
         let p = N ? c.findIndex((nt) => De(nt, N, x)) : -1, f;
         const ue = p !== -1;
-        i === r.left ? (ue ? p = Math.max(0, p - 1) : p = c.length - 1, f = c[p]) : i === r.right ? p === c.length - 1 ? f = void 0 : ue && (p = Math.min(c.length - 1, p + 1), f = c[p]) : i === r.home ? f = c[0] : i === r.end ? f = c[c.length - 1] : i === r.delete && ue && k(T, c[p].data, "delete"), f !== N && Ve(f);
+        r === o.left ? (ue ? p = Math.max(0, p - 1) : p = c.length - 1, f = c[p]) : r === o.right ? p === c.length - 1 ? f = void 0 : ue && (p = Math.min(c.length - 1, p + 1), f = c[p]) : r === o.home ? f = c[0] : r === o.end ? f = c[c.length - 1] : r === o.delete && ue && k(T, c[p].data, "delete"), f !== N && Ve(f);
       }
       if (s)
-        if (i === r.esc || o && i === r.up)
+        if (r === o.esc || i && r === o.up)
           e.preventDefault(), g(T);
-        else if (b && b.querySelector(".k-focus") && (i === r.up || i === r.down || i === r.left || i === r.right || i === r.home || i === r.end)) {
-          if (i === r.up && ((Se = w.current) != null && Se.element)) {
+        else if (b && b.querySelector(".k-focus") && (r === o.up || r === o.down || r === o.left || r === o.right || r === o.home || r === o.end)) {
+          if (r === o.up && ((we = S.current) != null && we.element)) {
             const c = Array.from(b.querySelectorAll(".k-treeview-item")), p = [...c].reverse().find((f) => !!(f && f.querySelector(".k-focus")));
             if (p && c.indexOf(p) === 0)
               return h(() => {
                 var f;
-                u((f = w.current) == null ? void 0 : f.element);
+                u((f = S.current) == null ? void 0 : f.element);
               });
           }
           h(Z);
         } else
-          i === r.down && h(() => {
+          r === o.down && h(() => {
             var c;
-            u(((c = w.current) == null ? void 0 : c.element) || b);
+            u(((c = S.current) == null ? void 0 : c.element) || b);
           });
       else
-        o && i === r.down && (e.preventDefault(), j(T));
+        i && r === o.down && (e.preventDefault(), j(T));
     },
     [s, g, u, h, j, N, x, m, k]
   ), Ce = t.useCallback(
     (e) => {
-      const { keyCode: i, altKey: o } = e;
-      o || i !== r.up && i !== r.down || (e.preventDefault(), h(
-        i === r.up ? () => {
+      const { keyCode: r, altKey: i } = e;
+      i || r !== o.up && r !== o.down || (e.preventDefault(), h(
+        r === o.up ? () => {
           u(y.current);
         } : () => {
           u(E.current && E.current.element);
@@ -272,20 +272,20 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     (e) => {
       if (!l.current)
         return;
-      const i = {
+      const r = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: l.current
       };
-      k(i, [], "clear"), g(i), e.preventDefault();
+      k(r, [], "clear"), g(r), e.preventDefault();
     },
     [k, g]
   ), Ze = t.useCallback(
-    (e, i) => {
-      var o;
-      g({ target: l.current }), d || u((o = w.current) == null ? void 0 : o.element), k({
-        syntheticEvent: i,
-        nativeEvent: i.nativeEvent,
+    (e, r) => {
+      var i;
+      g({ target: l.current }), d || u((i = S.current) == null ? void 0 : i.element), k({
+        syntheticEvent: r,
+        nativeEvent: r.nativeEvent,
         target: l.current
       }, e, "delete");
     },
@@ -293,9 +293,9 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), Ee = t.useCallback(
     (e) => {
       if (n.onExpandChange && l.current) {
-        const { item: i, itemHierarchicalIndex: o, nativeEvent: b, syntheticEvent: T } = e, Y = {
-          level: St(o),
-          item: i,
+        const { item: r, itemHierarchicalIndex: i, nativeEvent: b, syntheticEvent: T } = e, Y = {
+          level: wt(i),
+          item: r,
           nativeEvent: b,
           syntheticEvent: T,
           target: l.current
@@ -307,13 +307,13 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
   ), ke = t.useCallback(
     (e) => {
       if (n.onFilterChange && l.current) {
-        const o = {
+        const i = {
           filter: { field: n.textField, operator: "contains", value: e.target.value },
           syntheticEvent: e.syntheticEvent,
           nativeEvent: e.nativeEvent,
           target: l.current
         };
-        n.onFilterChange.call(void 0, o), n.filter === void 0 && ze(e.target.value);
+        n.onFilterChange.call(void 0, i), n.filter === void 0 && ze(e.target.value);
       }
     },
     [n.onFilterChange, n.filter, n.textField]
@@ -321,12 +321,12 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
     (e) => {
       if (!l.current)
         return;
-      const i = {
+      const r = {
         syntheticEvent: e,
         nativeEvent: e.nativeEvent,
         target: l.current
       };
-      n.onCancel && n.onCancel.call(void 0, i), g(i), e.preventDefault();
+      n.onCancel && n.onCancel.call(void 0, r), g(r), e.preventDefault();
     },
     [n.onCancel, g]
   ), et = () => {
@@ -334,27 +334,27 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
       Ne,
       {
         value: n.filter === void 0 ? ye : n.filter,
-        ref: ie,
+        ref: re,
         onChange: ke,
         onKeyDown: Ce,
         size: v,
         rounded: V,
         fillMode: Q
       }
-    ) : null, i = {
+    ) : null, r = {
       adaptiveTitle: n.adaptiveTitle,
       expand: s,
-      onClose: (o) => n.onCancel ? Fe(o) : ce(o),
-      windowWidth: re,
+      onClose: (i) => n.onCancel ? Fe(i) : ce(i),
+      windowWidth: oe,
       mobileFilter: e,
       footer: {
         cancelText: J.toLanguageString(Re, ne[Re]),
-        onCancel: (o) => n.onCancel ? Fe(o) : ce(o),
+        onCancel: (i) => n.onCancel ? Fe(i) : ce(i),
         applyText: J.toLanguageString(Me, ne[Me]),
-        onApply: (o) => g(o)
+        onApply: (i) => g(i)
       }
     };
-    return /* @__PURE__ */ t.createElement(kt, { ...i }, /* @__PURE__ */ t.createElement(Ft, { className: "!k-overflow-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, q.length > 0 ? /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ t.createElement(kt, { ...r }, /* @__PURE__ */ t.createElement(Ft, { className: "!k-overflow-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "k-list-container" }, /* @__PURE__ */ t.createElement("div", { className: "k-list k-list-lg" }, q.length > 0 ? /* @__PURE__ */ t.createElement(
       Te,
       {
         ref: E,
@@ -373,21 +373,21 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
         checkboxes: !0,
         size: v,
         item: n.item,
-        dir: S
+        dir: w
       }
     ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))))));
   }, tt = t.useCallback(
     (e) => {
-      for (let i of e)
-        qe(i.target.clientWidth);
+      for (let r of e)
+        qe(r.target.clientWidth);
     },
     []
-  ), xe = n.listNoData || bt, J = ft(), Ie = !Le || se.valid, { size: v, rounded: V, fillMode: Q } = n, X = P && s ? Ae : H.current, we = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  ), xe = n.listNoData || bt, J = ft(), Ie = !Be || se.valid, { size: v, rounded: V, fillMode: Q } = n, X = P && s ? Ae : H.current, Se = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "span",
     {
       className: ee("k-multiselecttree k-input", n.className, {
         [`k-input-${Pe[v] || v}`]: v,
-        [`k-rounded-${wt[V] || V}`]: V,
+        [`k-rounded-${St[V] || V}`]: V,
         [`k-input-${Q}`]: Q,
         "k-focus": d && !C,
         "k-invalid": !Ie,
@@ -398,8 +398,8 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
       tabIndex: z,
       accessKey: n.accessKey,
       id: F,
-      style: L ? { ...B, width: void 0 } : B,
-      dir: S,
+      style: B ? { ...L, width: void 0 } : L,
+      dir: w,
       ref: y,
       onKeyDown: C ? void 0 : Ye,
       onMouseDown: Qe,
@@ -409,7 +409,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
       "aria-haspopup": "tree",
       "aria-expanded": s,
       "aria-disabled": C,
-      "aria-label": L,
+      "aria-label": B,
       "aria-labelledby": n.ariaLabelledBy,
       "aria-describedby": n.ariaDescribedBy ? n.ariaDescribedBy : "tagslist-" + F,
       "aria-required": n.required,
@@ -419,7 +419,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
       "div",
       {
         id: "tagslist-" + F,
-        className: ee("k-input-values k-chip-list k-selection-multiple", {
+        className: ee("k-input-values k-chip-list", {
           [`k-chip-list-${Pe[v] || v}`]: v
         })
       },
@@ -445,7 +445,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
         ref: _,
         tabIndex: -1,
         "aria-hidden": !0,
-        title: L,
+        title: B,
         style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
       },
       /* @__PURE__ */ t.createElement(
@@ -463,7 +463,7 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           M.popupClass,
           "k-multiselecttree-popup"
         ),
-        className: ee(M.className, { "k-rtl": S === "rtl" }),
+        className: ee(M.className, { "k-rtl": w === "rtl" }),
         style: _e,
         anchor: M.anchor || y.current,
         show: s,
@@ -475,13 +475,15 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
         Ne,
         {
           value: n.filter === void 0 ? ye : n.filter,
-          ref: w,
+          ref: S,
           onChange: ke,
           onKeyDown: Ce,
           tabIndex: z,
           size: v,
           rounded: V,
-          fillMode: Q
+          fillMode: Q,
+          renderListFilterWrapper: !0,
+          renderPrefixSeparator: !0
         }
       ),
       q.length > 0 ? /* @__PURE__ */ t.createElement(
@@ -504,25 +506,25 @@ const It = "Please select a value from the list!", { sizeMap: Pe, roundedMap: wt
           checkboxes: !0,
           size: v,
           item: n.item,
-          dir: S
+          dir: w
         }
       ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))
     )
   ), P && et());
-  return L ? /* @__PURE__ */ t.createElement(
+  return B ? /* @__PURE__ */ t.createElement(
     yt,
     {
-      label: L,
+      label: B,
       editorValue: le,
       editorPlaceholder: pe,
       editorValid: Ie,
       editorDisabled: C,
       editorId: F,
-      style: { width: B ? B.width : void 0 },
-      children: we,
-      dir: S
+      style: { width: L ? L.width : void 0 },
+      children: Se,
+      dir: w
     }
-  ) : we;
+  ) : Se;
 }), Rt = {
   opened: a.bool,
   disabled: a.bool,

package/common/AdaptiveMode.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),l=require("@progress/kendo-react-layout"),k=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-react-buttons");function v(a){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const n in a)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(e,n,o.get?o:{enumerable:!0,get:()=>a[n]})}}return e.default=a,Object.freeze(e)}const t=v(h),s=500,g=a=>{const{footer:e,children:n,windowWidth:o=0,navigatable:d,navigatableElements:u,expand:m,animation:b,onClose:c,adaptiveTitle:p,mobileFilter:r}=a,f={navigatable:d||!1,navigatableElements:u||[],expand:m,animation:b!==!1,onClose:c,animationStyles:o<=s?{top:0,width:"100%",height:"100%"}:void 0,className:o<=s?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"};return t.createElement(l.ActionSheet,{...f},t.createElement(l.ActionSheetHeader,{className:"k-text-center"},t.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},t.createElement("div",{className:"k-actionsheet-title"},t.createElement("div",null,p)),t.createElement("div",{className:"k-actionsheet-actions"},t.createElement(i.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",icon:"x",svgIcon:k.xIcon,onClick:c}))),r&&t.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},r)),n,e&&t.createElement(l.ActionSheetFooter,{className:"k-actions k-actions-stretched"},t.createElement(i.Button,{size:"large",tabIndex:0,"aria-label":e.cancelText,"aria-disabled":"false",type:"button",onClick:e.onCancel},e.cancelText),t.createElement(i.Button,{tabIndex:0,themeColor:"primary",size:"large","aria-label":e.applyText,"aria-disabled":"false",type:"button",onClick:e.onApply},e.applyText)))};exports.AdaptiveMode=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),c=require("@progress/kendo-react-layout"),h=require("@progress/kendo-svg-icons"),l=require("@progress/kendo-react-buttons"),v=require("@progress/kendo-react-common");function g(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const n in a)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(a,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>a[n]})}}return t.default=a,Object.freeze(t)}const e=g(f),r=500,E=a=>{const{footer:t,children:n,windowWidth:o=0,navigatable:d,navigatableElements:m,expand:u,animation:b,onClose:i,adaptiveTitle:p,mobileFilter:s}=a,k={navigatable:d||!1,navigatableElements:m||[],expand:u,animation:b!==!1,onClose:i,animationStyles:o<=r?{top:0,width:"100%",height:"100%"}:void 0,className:v.classNames("k-actionsheet","k-adaptive-actionsheet",o<=r?"k-actionsheet-fullscreen":"k-actionsheet-bottom")};return e.createElement(c.ActionSheet,{...k},e.createElement(c.ActionSheetHeader,{className:"k-text-center"},e.createElement("div",{className:"k-actionsheet-titlebar-group k-hbox"},e.createElement("div",{className:"k-actionsheet-title"},e.createElement("div",{className:"k-text-center"},p),e.createElement("div",{className:"k-actionsheet-subtitle k-text-center"})),e.createElement("div",{className:"k-actionsheet-actions"},e.createElement(l.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",icon:"x",svgIcon:h.xIcon,onClick:i}))),s&&e.createElement("div",{className:"k-actionsheet-titlebar-group k-actionsheet-filter"},s)),n,t&&e.createElement(c.ActionSheetFooter,{className:"k-actions k-actions-stretched"},e.createElement(l.Button,{size:"large",tabIndex:0,"aria-label":t.cancelText,"aria-disabled":"false",type:"button",onClick:t.onCancel},t.cancelText),e.createElement(l.Button,{tabIndex:0,themeColor:"primary",size:"large","aria-label":t.applyText,"aria-disabled":"false",type:"button",onClick:t.onApply},t.applyText)))};exports.AdaptiveMode=E;

package/common/AdaptiveMode.mjs

@@ -7,10 +7,11 @@
  */
 "use client";
 import * as e from "react";
-import { ActionSheet as f, ActionSheetHeader as k, ActionSheetFooter as E } from "@progress/kendo-react-layout";
+import { ActionSheet as k, ActionSheetHeader as f, ActionSheetFooter as E } from "@progress/kendo-react-layout";
 import { xIcon as v } from "@progress/kendo-svg-icons";
 import { Button as a } from "@progress/kendo-react-buttons";
-const o = 500, y = (c) => {
+import { classNames as x } from "@progress/kendo-react-common";
+const o = 500, C = (c) => {
   const {
     footer: t,
     children: s,
@@ -29,9 +30,13 @@ const o = 500, y = (c) => {
     animation: p !== !1,
     onClose: n,
     animationStyles: l <= o ? { top: 0, width: "100%", height: "100%" } : void 0,
-    className: l <= o ? "k-adaptive-actionsheet k-actionsheet-fullscreen" : "k-adaptive-actionsheet k-actionsheet-bottom"
+    className: x(
+      "k-actionsheet",
+      "k-adaptive-actionsheet",
+      l <= o ? "k-actionsheet-fullscreen" : "k-actionsheet-bottom"
+    )
   };
-  return /* @__PURE__ */ e.createElement(f, { ...h }, /* @__PURE__ */ e.createElement(k, { className: "k-text-center" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", null, b)), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement(k, { ...h }, /* @__PURE__ */ e.createElement(f, { className: "k-text-center" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" }, /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-title" }, /* @__PURE__ */ e.createElement("div", { className: "k-text-center" }, b), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-subtitle k-text-center" })), /* @__PURE__ */ e.createElement("div", { className: "k-actionsheet-actions" }, /* @__PURE__ */ e.createElement(
     a,
     {
       tabIndex: 0,
@@ -69,5 +74,5 @@ const o = 500, y = (c) => {
   )));
 };
 export {
-  y as AdaptiveMode
+  C as AdaptiveMode
 };

package/common/DropDownBase.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";const v=require("react"),i=require("prop-types"),y=require("./VirtualScroll.js"),S=require("./Navigation.js"),c=require("./utils.js");function b(l){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(n,t,e.get?e:{enumerable:!0,get:()=>l[t]})}}return n.default=l,Object.freeze(n)}const P=b(v),p=class p{constructor(n){this.wrapper=null,this.list=null,this.vs=new y,this.navigation=new S.Navigation,this.handleItemClick=(t,e)=>{const s=this.initState();s.syntheticEvent=e,e.stopPropagation(),this.component.handleItemSelect(t,s),this.togglePopup(s),this.applyState(s)},this.handleFocus=t=>{if(!this.component.state.focused){const e=this.initState();e.data.focused=!0,e.events.push({type:"onFocus"}),e.syntheticEvent=t,this.applyState(e)}},this.filterChanged=(t,e)=>{const{textField:s,filterable:o}=this.component.props;o&&e.events.push({type:"onFilterChange",filter:{field:s,operator:"contains",ignoreCase:!0,value:t}})},this.togglePopup=t=>{const e=this.component.props,s=e.opened!==void 0?e.opened:this.component.state.opened;e.opened===void 0&&(t.data.opened=!s),s?t.events.push({type:"onClose"}):(t.events.push({type:"onOpen"}),this.calculatePopupWidth())},this.pageChange=(t,e)=>{const s=this.initState();s.syntheticEvent=e,this.triggerOnPageChange(s,t.skip,t.take),this.applyState(s)},this.scrollToVirtualItem=(t,e)=>{const s=this.vs;if(s.enabled=!1,t.skip===0)s.reset();else if(t.skip+t.pageSize===t.total)s.scrollToEnd();else{let o=s.translate;o===0&&(s.calcScrollElementHeight(),o=s.itemHeight*t.skip,s.translateTo(o-s.itemHeight)),s.container&&(s.container.scrollTop=o),this.scrollToItem(e,!0)}window.setTimeout(()=>s.enabled=!0,10)},this.scrollPopupByPageSize=t=>{var r,u,d,g,f,m;const e=this.vs,s=(u=(r=this.list)==null?void 0:r.parentElement)==null?void 0:u.scrollTop,o=e.enabled&&e.itemHeight?e.itemHeight:this.list?this.list.children[0].offsetHeight:0,a=(g=(d=this.list)==null?void 0:d.parentElement)==null?void 0:g.offsetHeight;s!==void 0&&a!==void 0&&((m=(f=this.list)==null?void 0:f.parentElement)==null||m.scroll({top:s+t*Math.floor(a/o)*o}))},this.renderScrollElement=()=>{const t=this.vs;return t.enabled&&P.createElement("div",{ref:e=>t.scrollElement=e,key:"scrollElementKey"})},this.resetGroupStickyHeader=(t,e)=>{t!==e.state.group&&e.setState({...e.state,group:t})},this.listBoxId=n.props.id+"list",this.guid=n.props.id,this.component=n,this.vs.PageChange=this.pageChange}didMount(){const n=this.component.props,t=n.popupSettings||{},e=n.style||{},s=t.width;let o=n.opened===!0;s===void 0&&this.calculatePopupWidth(),n.dir===void 0&&e.direction===void 0&&(this.calculateDir(),o=!0),o&&this.component.forceUpdate()}calculateDir(){const n=this.component.element;n&&n.ownerDocument&&n.ownerDocument.defaultView&&(this.dirCalculated=n.ownerDocument.defaultView.getComputedStyle(n).direction||void 0)}calculatePopupWidth(){this.wrapper&&(this.popupWidth=this.wrapper.offsetWidth+"px")}scrollToItem(n,t,e){const s=this.list||this.vs.list;if(!s&&!e&&setTimeout(()=>{this.scrollToItem(n,t,!0)},10),s&&n>=0){const o=this.vs,a=o.container||s.parentNode,r=t!==void 0?t:o.enabled;c.scrollToItem(a,s,n,o.translate,r)}}initState(){return{data:{},events:[],syntheticEvent:void 0}}applyState(n){Object.keys(n.data).length>0&&this.component.setState(n.data);const t={syntheticEvent:n.syntheticEvent,nativeEvent:n.syntheticEvent?n.syntheticEvent.nativeEvent:void 0,target:this.component,value:this.component.value};n.events.forEach(e=>{const s=e.type;delete e.type;const o=s&&this.component.props[s];o&&o.call(void 0,{...t,...e})})}triggerOnPageChange(n,t,e){const s=this.component.props.virtual;if(s){const o=Math.min(Math.max(0,t),Math.max(0,s.total-e));o!==s.skip&&n.events.push({type:"onPageChange",page:{skip:o,take:e}})}}triggerPageChangeCornerItems(n,t){const e=this.component.props,{data:s=[],dataItemKey:o,virtual:a}=e,r=e.opened!==void 0?e.opened:this.component.state.opened;n&&a&&this.vs.enabled&&(a.skip>0&&c.areSame(n,s[0],o)?this.triggerOnPageChange(t,a.skip-1,a.pageSize):!r&&a.skip+a.pageSize<a.total&&c.areSame(n,s[s.length-1],o)&&this.triggerOnPageChange(t,a.skip+1,a.pageSize))}getPopupSettings(){return Object.assign({},p.defaultProps.popupSettings,this.component.props.popupSettings)}getGroupedDataModernMode(n,t){let e=[];return n.forEach((s,o)=>{n[o-1]&&s[t]!==n[o-1][t]&&e.push({[t]:s[t]}),e.push(n[o])}),e}};p.basicPropTypes={opened:i.bool,disabled:i.bool,dir:i.string,tabIndex:i.number,accessKey:i.string,data:i.array,textField:i.string,className:i.string,label:i.string,loading:i.bool,popupSettings:i.shape({animate:i.oneOfType([i.bool,i.shape({openDuration:i.number,closeDuration:i.number})]),popupClass:i.string,className:i.string,appendTo:i.any,width:i.oneOfType([i.string,i.number]),height:i.oneOfType([i.string,i.number])}),onOpen:i.func,onClose:i.func,onFocus:i.func,onBlur:i.func,onChange:i.func,itemRender:i.func,listNoDataRender:i.func,focusedItemIndex:i.func,header:i.node,footer:i.node},p.propTypes={...p.basicPropTypes,value:i.any,defaultValue:i.any,filterable:i.bool,filter:i.string,virtual:i.shape({pageSize:i.number.isRequired,skip:i.number.isRequired,total:i.number.isRequired}),onFilterChange:i.func,onPageChange:i.func},p.defaultProps={popupSettings:{height:"200px"},required:!1,validityStyles:!0};let h=p;module.exports=h;
+"use client";"use strict";const v=require("react"),n=require("prop-types"),y=require("./VirtualScroll.js"),S=require("./Navigation.js"),c=require("./utils.js");function b(l){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>l[e]})}}return i.default=l,Object.freeze(i)}const P=b(v),p=class p{constructor(i){this.wrapper=null,this.list=null,this.vs=new y,this.navigation=new S.Navigation,this.handleItemClick=(e,t)=>{const s=this.initState();s.syntheticEvent=t,t.stopPropagation(),this.component.handleItemSelect(e,s),this.togglePopup(s),this.applyState(s)},this.handleFocus=e=>{if(!this.component.state.focused){const t=this.initState();t.data.focused=!0,t.events.push({type:"onFocus"}),t.syntheticEvent=e,this.applyState(t)}},this.filterChanged=(e,t)=>{const{textField:s,filterable:o}=this.component.props;o&&t.events.push({type:"onFilterChange",filter:{field:s,operator:"contains",ignoreCase:!0,value:e}})},this.togglePopup=e=>{const t=this.component.props,s=t.opened!==void 0?t.opened:this.component.state.opened;t.opened===void 0&&(e.data.opened=!s),s?e.events.push({type:"onClose"}):(e.events.push({type:"onOpen"}),this.calculatePopupWidth())},this.pageChange=(e,t)=>{const s=this.initState();s.syntheticEvent=t,this.triggerOnPageChange(s,e.skip,e.take),this.applyState(s)},this.scrollToVirtualItem=(e,t)=>{const s=this.vs;if(s.enabled=!1,e.skip===0)s.reset();else if(e.skip+e.pageSize===e.total)s.scrollToEnd();else{let o=s.translate;o===0&&(s.calcScrollElementHeight(),o=s.itemHeight*e.skip,s.translateTo(o-s.itemHeight)),s.container&&(s.container.scrollTop=o),this.scrollToItem(t,!0)}window.setTimeout(()=>s.enabled=!0,10)},this.scrollPopupByPageSize=e=>{var r,u,d,g,f,m;const t=this.vs,s=(u=(r=this.list)==null?void 0:r.parentElement)==null?void 0:u.scrollTop,o=t.enabled&&t.itemHeight?t.itemHeight:this.list?this.list.children[0].offsetHeight:0,a=(g=(d=this.list)==null?void 0:d.parentElement)==null?void 0:g.offsetHeight;s!==void 0&&a!==void 0&&((m=(f=this.list)==null?void 0:f.parentElement)==null||m.scroll({top:s+e*Math.floor(a/o)*o}))},this.renderScrollElement=()=>{const e=this.vs;return e.enabled&&P.createElement("div",{ref:t=>e.scrollElement=t,key:"scrollElementKey"})},this.resetGroupStickyHeader=(e,t)=>{e!==t.state.group&&t.setState({...t.state,group:e})},this.listBoxId=i.props.id+"list",this.guid=i.props.id,this.component=i,this.vs.PageChange=this.pageChange}didMount(){const i=this.component.props,e=i.popupSettings||{},t=i.style||{},s=e.width;let o=i.opened===!0;s===void 0&&this.calculatePopupWidth(),i.dir===void 0&&t.direction===void 0&&(this.calculateDir(),o=!0),o&&this.component.forceUpdate()}calculateDir(){const i=this.component.element;i&&i.ownerDocument&&i.ownerDocument.defaultView&&(this.dirCalculated=i.ownerDocument.defaultView.getComputedStyle(i).direction||void 0)}calculatePopupWidth(){this.wrapper&&(this.popupWidth=this.wrapper.offsetWidth+"px")}scrollToItem(i,e,t){const s=this.list||this.vs.list;if(!s&&!t&&setTimeout(()=>{this.scrollToItem(i,e,!0)},10),s&&i>=0){const o=this.vs,a=o.container||s.parentNode,r=e!==void 0?e:o.enabled;c.scrollToItem(a,s,i,o.translate,r)}}initState(){return{data:{},events:[],syntheticEvent:void 0}}applyState(i){Object.keys(i.data).length>0&&this.component.setState(i.data);const e={syntheticEvent:i.syntheticEvent,nativeEvent:i.syntheticEvent?i.syntheticEvent.nativeEvent:void 0,target:this.component,value:this.component.value};i.events.forEach(t=>{const s=t.type;delete t.type;const o=s&&this.component.props[s];o&&o.call(void 0,{...e,...t})})}triggerOnPageChange(i,e,t){const s=this.component.props.virtual;if(s){const o=Math.min(Math.max(0,e),Math.max(0,s.total-t));o!==s.skip&&i.events.push({type:"onPageChange",page:{skip:o,take:t}})}}triggerPageChangeCornerItems(i,e){const t=this.component.props,{data:s=[],dataItemKey:o,virtual:a}=t,r=t.opened!==void 0?t.opened:this.component.state.opened;i&&a&&this.vs.enabled&&(a.skip>0&&c.areSame(i,s[0],o)?this.triggerOnPageChange(e,a.skip-1,a.pageSize):!r&&a.skip+a.pageSize<a.total&&c.areSame(i,s[s.length-1],o)&&this.triggerOnPageChange(e,a.skip+1,a.pageSize))}getPopupSettings(){return Object.assign({},p.defaultProps.popupSettings,this.component.props.popupSettings)}getAdaptiveAnimation(){const i=this.getPopupSettings();return i.animate!==void 0?i.animate:!0}getGroupedDataModernMode(i,e){let t=[];return i.forEach((s,o)=>{i[o-1]&&s[e]!==i[o-1][e]&&t.push({[e]:s[e]}),t.push(i[o])}),t}};p.basicPropTypes={opened:n.bool,disabled:n.bool,dir:n.string,tabIndex:n.number,accessKey:n.string,data:n.array,textField:n.string,className:n.string,label:n.string,loading:n.bool,popupSettings:n.shape({animate:n.oneOfType([n.bool,n.shape({openDuration:n.number,closeDuration:n.number})]),popupClass:n.string,className:n.string,appendTo:n.any,width:n.oneOfType([n.string,n.number]),height:n.oneOfType([n.string,n.number])}),onOpen:n.func,onClose:n.func,onFocus:n.func,onBlur:n.func,onChange:n.func,itemRender:n.func,listNoDataRender:n.func,focusedItemIndex:n.func,header:n.node,footer:n.node},p.propTypes={...p.basicPropTypes,value:n.any,defaultValue:n.any,filterable:n.bool,filter:n.string,virtual:n.shape({pageSize:n.number.isRequired,skip:n.number.isRequired,total:n.number.isRequired}),onFilterChange:n.func,onPageChange:n.func},p.defaultProps={popupSettings:{height:"200px"},required:!1,validityStyles:!0};let h=p;module.exports=h;