@progress/kendo-react-dropdowns 15.0.1-develop.3 → 15.0.1-develop.5

package/MultiColumnComboBox/MultiColumnComboBox.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ce=require("react"),de=require("prop-types"),pe=require("../common/MultiColumnList.js"),n=require("@progress/kendo-react-common"),j=require("../ComboBox/ComboBox.js"),me=require("../common/utils.js"),W=require("../common/withCustomComponent.js");function fe(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(i,e,c.get?c:{enumerable:!0,get:()=>a[e]})}}return i.default=a,Object.freeze(i)}const t=fe(ce),ge=(a,i)=>a?typeof a=="number"?a+"px":a:i,G=n.createPropsContext(),y=t.forwardRef((a,i)=>{const e=n.usePropsContext(G,a),c=t.useRef(null),d=t.useRef(null),S=n.getScrollbarWidth(),{columns:l=u.columns,popupSettings:g=u.popupSettings,size:L=u.size,rounded:z=u.rounded,fillMode:_=u.fillMode,className:D,prefix:$=void 0,suffix:V=void 0,onOpen:w,onClose:R,onFocus:F,onBlur:N,onChange:H,onFilterChange:M,onPageChange:E,...A}=e;t.useImperativeHandle(c,()=>{var o;return{element:((o=d.current)==null?void 0:o.element)||null,focus(){d.current&&d.current.focus()},get value(){var r;return(r=d.current)==null?void 0:r.value},get name(){var r;return(r=d.current)==null?void 0:r.name},props:e}}),t.useImperativeHandle(i,()=>c.current);const m=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return me.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[h,b]=t.useState(m),[q,B]=t.useState(!0),k=t.useRef(null),[J]=$?W(e.prefix||t.Fragment):[],[Q]=V?W(e.suffix||t.Fragment):[],U=t.useMemo(()=>{const o=t.createElement("th",{className:"k-table-th",colSpan:l.length},h);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{ref:k,className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,l.map((r,f)=>t.createElement("col",{key:r.uniqueKey?r.uniqueKey:f,style:{width:r.width?r.width:u.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},l.map((r,f)=>t.createElement("th",{className:"k-table-th",key:r.uniqueKey?r.uniqueKey:f},r.header||" "))),h&&q&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,o,{}):o)))))},[e.header,l,h,q]),X=t.useMemo(()=>`calc(${l.map(o=>ge(o.width,u.width)).filter(Boolean).join(" + ")} + ${S}px + 4px)`,[l,S]),I=e.virtual?e.virtual.skip:0,Y=t.useCallback((o,r)=>{const f=l.map((p,ie)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:p.width?p.width:u.width},key:p.uniqueKey?p.uniqueKey:ie},p.field?String(n.getter(p.field)(r.dataItem)):""));let O,C,v,x,P=e.data||[];const T=r.index-I;e.groupField!==void 0&&(x=n.getter(e.groupField),C=x(P[T]),v=x(P[T-1]),C&&v&&C!==v&&(O=C));const K=t.cloneElement(o,{...o.props,className:n.classNames("k-table-row",{"k-table-alt-row":r.index%2!==0,"k-focus":r.focused,"k-selected":r.selected,"k-first":!!O,"k-disabled":r.dataItem.disabled})},f);return e.itemRender?e.itemRender.call(void 0,K,r):K},[l,e.groupField,e.itemRender,e.data,I]),s=t.useCallback((o,r)=>{o&&o.call(void 0,{...r,target:c.current})},[]),Z=t.useCallback(o=>(e.virtual||b(m),s(w,o)),[s,w,e.virtual,m]),ee=t.useCallback(o=>s(R,o),[R]),te=t.useCallback(o=>s(F,o),[F]),oe=t.useCallback(o=>s(N,o),[N]),re=t.useCallback(o=>s(H,o),[H]),ae=t.useCallback(o=>s(E,o),[E]),ne=t.useCallback(o=>(b(m),s(M,{...o,mobileMode:o.target.mobileMode})),[M]),le=t.useCallback(o=>{b(o.group)},[]),se=t.useCallback(o=>{k.current&&(k.current.scrollLeft=o.target.scrollLeft)},[]);t.useEffect(()=>{n.setScrollbarWidth()}),t.useEffect(()=>{const o=e.data;b(m),o&&o.length!==0?B(!0):B(!1)},[e.data]);const ue=t.useCallback(o=>t.createElement(pe.MultiColumnList,{...o}),[]);return t.createElement(j.ComboBox,{...A,list:ue,popupSettings:{...g,popupClass:n.classNames("k-dropdowngrid-popup",g.popupClass),width:g.width||X,className:g.className},ref:d,header:U,itemRender:Y,groupHeaderItemRender:e.groupHeaderItemRender,size:L,rounded:z,fillMode:_,groupField:e.groupField,isMultiColumn:!0,onOpen:Z,onClose:ee,onFocus:te,onBlur:oe,onChange:re,onFilterChange:ne,onPageChange:ae,onGroupScroll:le,onListScroll:se,className:n.classNames("k-dropdowngrid",D),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,adaptiveSubtitle:e.adaptiveSubtitle,footer:e.footer,footerClassName:"k-table-footer",prefix:J,suffix:Q})}),be={...j.ComboBoxWithoutContext.propTypes,columns:de.any.isRequired},u={columns:[],popupSettings:{},width:"200px",size:void 0,rounded:void 0,fillMode:void 0};y.displayName="KendoMultiColumnComboBox";y.propTypes=be;exports.MultiColumnComboBox=y;exports.MultiColumnComboBoxPropsContext=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const se=require("react"),ue=require("prop-types"),ie=require("../common/MultiColumnList.js"),n=require("@progress/kendo-react-common"),ce=require("../ComboBox/ComboBox.js"),de=require("../common/utils.js"),T=require("../common/withCustomComponent.js");function pe(l){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(m,e,s.get?s:{enumerable:!0,get:()=>l[e]})}}return m.default=l,Object.freeze(m)}const t=pe(se),G=n.createPropsContext(),x=t.forwardRef((l,m)=>{const e=n.usePropsContext(G,l),s=t.useRef(null),c=t.useRef(null);n.getScrollbarWidth();const{columns:d=i.columns,popupSettings:f=i.popupSettings,size:L=i.size,rounded:j=i.rounded,fillMode:z=i.fillMode,className:W,prefix:_=void 0,suffix:D=void 0,onOpen:S,onClose:w,onFocus:R,onBlur:F,onChange:H,onFilterChange:M,onPageChange:N,...V}=e;t.useImperativeHandle(s,()=>{var r;return{element:((r=c.current)==null?void 0:r.element)||null,focus(){c.current&&c.current.focus()},get value(){var o;return(o=c.current)==null?void 0:o.value},get name(){var o;return(o=c.current)==null?void 0:o.name},props:e}}),n.useWebMcpRegister("multicolumncombobox",s,e,e.webMcp),t.useImperativeHandle(m,()=>s.current);const u=t.useMemo(()=>{if(e.groupField!==void 0&&e.data)return de.getItemValue(e.data[0],e.groupField)},[e.data,e.groupField]),[h,b]=t.useState(u),[E,q]=t.useState(!0),k=t.useRef(null),[A]=_?T(e.prefix||t.Fragment):[],[J]=D?T(e.suffix||t.Fragment):[],Q=t.useMemo(()=>{const r=t.createElement("th",{className:"k-table-th",colSpan:d.length},h);return t.createElement(t.Fragment,null,e.header,t.createElement("div",{ref:k,className:"k-table-header-wrap"},t.createElement("table",{className:"k-table",role:"presentation"},t.createElement("colgroup",null,d.map((o,g)=>t.createElement("col",{key:o.uniqueKey?o.uniqueKey:g,style:{width:o.width?o.width:i.width}}))),t.createElement("thead",{className:"k-table-thead"},t.createElement("tr",{className:"k-table-row"},d.map((o,g)=>t.createElement("th",{className:"k-table-th",key:o.uniqueKey?o.uniqueKey:g},o.header||" "))),h&&E&&t.createElement("tr",{className:"k-table-group-row"},e.groupStickyHeaderItemRender?e.groupStickyHeaderItemRender.call(void 0,r,{}):r)))))},[e.header,d,h,E,e.groupStickyHeaderItemRender]),B=e.virtual?e.virtual.skip:0,U=t.useCallback((r,o)=>{const g=d.map((p,le)=>t.createElement("span",{className:e.itemRender?void 0:"k-table-td",style:e.itemRender?void 0:{width:p.width?p.width:i.width},key:p.uniqueKey?p.uniqueKey:le},p.field?String(n.getter(p.field)(o.dataItem)):""));let I,C,v,y;const O=e.data||[],P=o.index-B;e.groupField!==void 0&&(y=n.getter(e.groupField),C=y(O[P]),v=y(O[P-1]),C&&v&&C!==v&&(I=C));const K=t.cloneElement(r,{...r.props,className:n.classNames("k-table-row",{"k-table-alt-row":o.index%2!==0,"k-focus":o.focused,"k-selected":o.selected,"k-first":!!I,"k-disabled":o.dataItem.disabled})},g);return e.itemRender?e.itemRender.call(void 0,K,o):K},[d,e.groupField,e.itemRender,e.data,B]),a=t.useCallback((r,o)=>{r&&r.call(void 0,{...o,target:s.current})},[]),X=t.useCallback(r=>(e.virtual||b(u),a(S,r)),[a,S,e.virtual,u]),Y=t.useCallback(r=>a(w,r),[a,w]),Z=t.useCallback(r=>a(R,r),[a,R]),$=t.useCallback(r=>a(F,r),[a,F]),ee=t.useCallback(r=>a(H,r),[a,H]),te=t.useCallback(r=>a(N,r),[a,N]),re=t.useCallback(r=>(b(u),a(M,{...r,mobileMode:r.target.mobileMode})),[a,u,M]),oe=t.useCallback(r=>{b(r.group)},[]),ae=t.useCallback(r=>{k.current&&(k.current.scrollLeft=r.target.scrollLeft)},[]);t.useEffect(()=>{n.setScrollbarWidth()}),t.useEffect(()=>{const r=e.data;b(u),r&&r.length!==0?q(!0):q(!1)},[e.data,u]);const ne=t.useCallback(r=>t.createElement(ie.MultiColumnList,{...r}),[]);return t.createElement(ce.ComboBox,{...V,list:ne,popupSettings:{...f,popupClass:n.classNames("k-dropdowngrid-popup",f.popupClass),width:f.width,className:f.className},ref:c,header:Q,itemRender:U,groupHeaderItemRender:e.groupHeaderItemRender,size:L,rounded:j,fillMode:z,groupField:e.groupField,isMultiColumn:!0,onOpen:X,onClose:Y,onFocus:Z,onBlur:$,onChange:ee,onFilterChange:re,onPageChange:te,onGroupScroll:oe,onListScroll:ae,className:n.classNames("k-dropdowngrid",W),required:e.required,adaptive:e.adaptive,adaptiveFilter:e.adaptiveFilter,adaptiveTitle:e.adaptiveTitle,adaptiveSubtitle:e.adaptiveSubtitle,footer:e.footer,footerClassName:"k-table-footer",prefix:A,suffix:J})}),me={columns:ue.any.isRequired},i={columns:[],popupSettings:{},width:"200px",size:void 0,rounded:void 0,fillMode:void 0};x.displayName="KendoMultiColumnComboBox";x.propTypes=me;exports.MultiColumnComboBox=x;exports.MultiColumnComboBoxPropsContext=G;

package/MultiColumnComboBox/MultiColumnComboBox.mjs

@@ -5,174 +5,175 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as e from "react";
-import ue from "prop-types";
-import { MultiColumnList as de } from "../common/MultiColumnList.mjs";
-import { usePropsContext as ce, getScrollbarWidth as pe, getter as T, classNames as x, setScrollbarWidth as me, createPropsContext as fe } from "@progress/kendo-react-common";
-import { ComboBox as ge, ComboBoxWithoutContext as he } from "../ComboBox/ComboBox.mjs";
-import { getItemValue as Ce } from "../common/utils.mjs";
-import L from "../common/withCustomComponent.mjs";
-const be = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, ke = fe(), P = e.forwardRef(
-  (s, g) => {
-    const t = ce(ke, s), h = e.useRef(null), i = e.useRef(null), y = pe(), {
-      columns: a = l.columns,
+import * as t from "react";
+import se from "prop-types";
+import { MultiColumnList as ie } from "../common/MultiColumnList.mjs";
+import { usePropsContext as ue, getScrollbarWidth as de, useWebMcpRegister as ce, getter as K, classNames as k, setScrollbarWidth as pe, createPropsContext as me } from "@progress/kendo-react-common";
+import { ComboBox as fe } from "../ComboBox/ComboBox.mjs";
+import { getItemValue as ge } from "../common/utils.mjs";
+import G from "../common/withCustomComponent.mjs";
+const be = me(), L = t.forwardRef(
+  (T, P) => {
+    const e = ue(be, T), c = t.useRef(null), s = t.useRef(null);
+    de();
+    const {
+      columns: i = l.columns,
       popupSettings: p = l.popupSettings,
-      size: z = l.size,
-      rounded: O = l.rounded,
-      fillMode: $ = l.fillMode,
-      className: j,
-      prefix: V = void 0,
+      size: W = l.size,
+      rounded: z = l.rounded,
+      fillMode: O = l.fillMode,
+      className: V,
+      prefix: j = void 0,
       suffix: A = void 0,
-      onOpen: w,
-      onClose: S,
-      onFocus: F,
-      onBlur: H,
-      onChange: R,
-      onFilterChange: E,
-      onPageChange: N,
+      onOpen: v,
+      onClose: w,
+      onFocus: x,
+      onBlur: y,
+      onChange: S,
+      onFilterChange: R,
+      onPageChange: F,
       ...D
-    } = t;
-    e.useImperativeHandle(h, () => {
+    } = e;
+    t.useImperativeHandle(c, () => {
       var r;
       return {
-        element: ((r = i.current) == null ? void 0 : r.element) || null,
+        element: ((r = s.current) == null ? void 0 : r.element) || null,
         focus() {
-          i.current && i.current.focus();
+          s.current && s.current.focus();
         },
         get value() {
-          var o;
-          return (o = i.current) == null ? void 0 : o.value;
+          var a;
+          return (a = s.current) == null ? void 0 : a.value;
         },
         get name() {
-          var o;
-          return (o = i.current) == null ? void 0 : o.name;
+          var a;
+          return (a = s.current) == null ? void 0 : a.name;
         },
-        props: t
+        props: e
       };
-    }), e.useImperativeHandle(
-      g,
-      () => h.current
+    }), ce("multicolumncombobox", c, e, e.webMcp), t.useImperativeHandle(
+      P,
+      () => c.current
     );
-    const d = e.useMemo(() => {
-      if (t.groupField !== void 0 && t.data)
-        return Ce(t.data[0], t.groupField);
-    }, [t.data, t.groupField]), [C, m] = e.useState(d), [M, B] = e.useState(!0), b = e.useRef(null), [J] = V ? L(t.prefix || e.Fragment) : [], [Q] = A ? L(t.suffix || e.Fragment) : [], U = e.useMemo(() => {
-      const r = /* @__PURE__ */ e.createElement("th", { className: "k-table-th", colSpan: a.length }, C);
-      return /* @__PURE__ */ e.createElement(e.Fragment, null, t.header, /* @__PURE__ */ e.createElement("div", { ref: b, className: "k-table-header-wrap" }, /* @__PURE__ */ e.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ e.createElement("colgroup", null, a.map((o, c) => /* @__PURE__ */ e.createElement(
+    const n = t.useMemo(() => {
+      if (e.groupField !== void 0 && e.data)
+        return ge(e.data[0], e.groupField);
+    }, [e.data, e.groupField]), [g, m] = t.useState(n), [H, E] = t.useState(!0), b = t.useRef(null), [J] = j ? G(e.prefix || t.Fragment) : [], [Q] = A ? G(e.suffix || t.Fragment) : [], U = t.useMemo(() => {
+      const r = /* @__PURE__ */ t.createElement("th", { className: "k-table-th", colSpan: i.length }, g);
+      return /* @__PURE__ */ t.createElement(t.Fragment, null, e.header, /* @__PURE__ */ t.createElement("div", { ref: b, className: "k-table-header-wrap" }, /* @__PURE__ */ t.createElement("table", { className: "k-table", role: "presentation" }, /* @__PURE__ */ t.createElement("colgroup", null, i.map((a, d) => /* @__PURE__ */ t.createElement(
         "col",
         {
-          key: o.uniqueKey ? o.uniqueKey : c,
-          style: { width: o.width ? o.width : l.width }
+          key: a.uniqueKey ? a.uniqueKey : d,
+          style: { width: a.width ? a.width : l.width }
         }
-      ))), /* @__PURE__ */ e.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ e.createElement("tr", { className: "k-table-row" }, a.map((o, c) => /* @__PURE__ */ e.createElement("th", { className: "k-table-th", key: o.uniqueKey ? o.uniqueKey : c }, o.header || " "))), C && M && /* @__PURE__ */ e.createElement("tr", { className: "k-table-group-row" }, t.groupStickyHeaderItemRender ? t.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
-    }, [t.header, a, C, M]), X = e.useMemo(
-      () => (
-        // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-        `calc(${a.map((r) => be(r.width, l.width)).filter(Boolean).join(" + ")} + ${y}px + 4px)`
-      ),
-      [a, y]
-    ), q = t.virtual ? t.virtual.skip : 0, Y = e.useCallback(
-      (r, o) => {
-        const c = a.map((u, ie) => /* @__PURE__ */ e.createElement(
+      ))), /* @__PURE__ */ t.createElement("thead", { className: "k-table-thead" }, /* @__PURE__ */ t.createElement("tr", { className: "k-table-row" }, i.map((a, d) => /* @__PURE__ */ t.createElement("th", { className: "k-table-th", key: a.uniqueKey ? a.uniqueKey : d }, a.header || " "))), g && H && /* @__PURE__ */ t.createElement("tr", { className: "k-table-group-row" }, e.groupStickyHeaderItemRender ? e.groupStickyHeaderItemRender.call(void 0, r, {}) : r)))));
+    }, [e.header, i, g, H, e.groupStickyHeaderItemRender]), N = e.virtual ? e.virtual.skip : 0, X = t.useCallback(
+      (r, a) => {
+        const d = i.map((u, le) => /* @__PURE__ */ t.createElement(
           "span",
           {
-            className: t.itemRender ? void 0 : "k-table-td",
-            style: t.itemRender ? void 0 : { width: u.width ? u.width : l.width },
-            key: u.uniqueKey ? u.uniqueKey : ie
+            className: e.itemRender ? void 0 : "k-table-td",
+            style: e.itemRender ? void 0 : { width: u.width ? u.width : l.width },
+            key: u.uniqueKey ? u.uniqueKey : le
           },
-          u.field ? String(T(u.field)(o.dataItem)) : ""
+          u.field ? String(K(u.field)(a.dataItem)) : ""
         ));
-        let I, f, k, v, K = t.data || [];
-        const W = o.index - q;
-        t.groupField !== void 0 && (v = T(t.groupField), f = v(K[W]), k = v(K[W - 1]), f && k && f !== k && (I = f));
-        const G = e.cloneElement(
+        let M, f, h, C;
+        const I = e.data || [], q = a.index - N;
+        e.groupField !== void 0 && (C = K(e.groupField), f = C(I[q]), h = C(I[q - 1]), f && h && f !== h && (M = f));
+        const B = t.cloneElement(
           r,
           {
             ...r.props,
-            className: x("k-table-row", {
-              "k-table-alt-row": o.index % 2 !== 0,
-              "k-focus": o.focused,
-              "k-selected": o.selected,
-              "k-first": !!I,
-              "k-disabled": o.dataItem.disabled
+            className: k("k-table-row", {
+              "k-table-alt-row": a.index % 2 !== 0,
+              "k-focus": a.focused,
+              "k-selected": a.selected,
+              "k-first": !!M,
+              "k-disabled": a.dataItem.disabled
             })
           },
-          c
+          d
         );
-        return t.itemRender ? t.itemRender.call(void 0, G, o) : G;
+        return e.itemRender ? e.itemRender.call(void 0, B, a) : B;
       },
-      [a, t.groupField, t.itemRender, t.data, q]
-    ), n = e.useCallback((r, o) => {
+      [i, e.groupField, e.itemRender, e.data, N]
+    ), o = t.useCallback((r, a) => {
       r && r.call(void 0, {
-        ...o,
-        target: h.current
+        ...a,
+        target: c.current
       });
-    }, []), Z = e.useCallback(
-      (r) => (t.virtual || m(d), n(w, r)),
-      [n, w, t.virtual, d]
-    ), _ = e.useCallback((r) => n(S, r), [S]), ee = e.useCallback((r) => n(F, r), [F]), te = e.useCallback((r) => n(H, r), [H]), re = e.useCallback((r) => n(R, r), [R]), oe = e.useCallback((r) => n(N, r), [N]), ae = e.useCallback(
-      (r) => (m(d), n(E, {
+    }, []), Y = t.useCallback(
+      (r) => (e.virtual || m(n), o(v, r)),
+      [o, v, e.virtual, n]
+    ), Z = t.useCallback((r) => o(w, r), [o, w]), _ = t.useCallback((r) => o(x, r), [o, x]), $ = t.useCallback((r) => o(y, r), [o, y]), ee = t.useCallback(
+      (r) => o(S, r),
+      [o, S]
+    ), te = t.useCallback(
+      (r) => o(F, r),
+      [o, F]
+    ), re = t.useCallback(
+      (r) => (m(n), o(R, {
         ...r,
         mobileMode: r.target.mobileMode
       })),
-      [E]
-    ), ne = e.useCallback((r) => {
+      [o, n, R]
+    ), ae = t.useCallback((r) => {
       m(r.group);
-    }, []), le = e.useCallback((r) => {
+    }, []), oe = t.useCallback((r) => {
       b.current && (b.current.scrollLeft = r.target.scrollLeft);
     }, []);
-    e.useEffect(() => {
-      me();
-    }), e.useEffect(() => {
-      const r = t.data;
-      m(d), r && r.length !== 0 ? B(!0) : B(!1);
-    }, [t.data]);
-    const se = e.useCallback((r) => /* @__PURE__ */ e.createElement(de, { ...r }), []);
-    return /* @__PURE__ */ e.createElement(
-      ge,
+    t.useEffect(() => {
+      pe();
+    }), t.useEffect(() => {
+      const r = e.data;
+      m(n), r && r.length !== 0 ? E(!0) : E(!1);
+    }, [e.data, n]);
+    const ne = t.useCallback((r) => /* @__PURE__ */ t.createElement(ie, { ...r }), []);
+    return /* @__PURE__ */ t.createElement(
+      fe,
       {
         ...D,
-        list: se,
+        list: ne,
         popupSettings: {
           ...p,
-          popupClass: x("k-dropdowngrid-popup", p.popupClass),
-          width: p.width || X,
+          popupClass: k("k-dropdowngrid-popup", p.popupClass),
+          width: p.width,
           className: p.className
         },
-        ref: i,
+        ref: s,
         header: U,
-        itemRender: Y,
-        groupHeaderItemRender: t.groupHeaderItemRender,
-        size: z,
-        rounded: O,
-        fillMode: $,
-        groupField: t.groupField,
+        itemRender: X,
+        groupHeaderItemRender: e.groupHeaderItemRender,
+        size: W,
+        rounded: z,
+        fillMode: O,
+        groupField: e.groupField,
         isMultiColumn: !0,
-        onOpen: Z,
-        onClose: _,
-        onFocus: ee,
-        onBlur: te,
-        onChange: re,
-        onFilterChange: ae,
-        onPageChange: oe,
-        onGroupScroll: ne,
-        onListScroll: le,
-        className: x("k-dropdowngrid", j),
-        required: t.required,
-        adaptive: t.adaptive,
-        adaptiveFilter: t.adaptiveFilter,
-        adaptiveTitle: t.adaptiveTitle,
-        adaptiveSubtitle: t.adaptiveSubtitle,
-        footer: t.footer,
+        onOpen: Y,
+        onClose: Z,
+        onFocus: _,
+        onBlur: $,
+        onChange: ee,
+        onFilterChange: re,
+        onPageChange: te,
+        onGroupScroll: ae,
+        onListScroll: oe,
+        className: k("k-dropdowngrid", V),
+        required: e.required,
+        adaptive: e.adaptive,
+        adaptiveFilter: e.adaptiveFilter,
+        adaptiveTitle: e.adaptiveTitle,
+        adaptiveSubtitle: e.adaptiveSubtitle,
+        footer: e.footer,
         footerClassName: "k-table-footer",
         prefix: J,
         suffix: Q
       }
     );
   }
-), ve = {
-  ...he.propTypes,
-  columns: ue.any.isRequired
+), he = {
+  columns: se.any.isRequired
 }, l = {
   columns: [],
   popupSettings: {},
@@ -181,9 +182,9 @@ const be = (s, g) => s ? typeof s == "number" ? s + "px" : s : g, ke = fe(), P =
   rounded: void 0,
   fillMode: void 0
 };
-P.displayName = "KendoMultiColumnComboBox";
-P.propTypes = ve;
+L.displayName = "KendoMultiColumnComboBox";
+L.propTypes = he;
 export {
-  P as MultiColumnComboBox,
-  ke as MultiColumnComboBoxPropsContext
+  L as MultiColumnComboBox,
+  be as MultiColumnComboBoxPropsContext
 };

package/MultiSelectTree/utils.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("@progress/kendo-react-common"),r=(i,m)=>{const u={};return i&&i.length&&i.forEach(f=>{u[m(f)]=!0}),u},G=(i,m)=>{const{items:u,dataItemKey:f,value:p,subItemsField:w="items",operation:V}=m,t=S.getter(f),I=r(p,t);if(V==="clear")return[];if(V==="delete"){const n=r(u,t);return p.filter(e=>!n[t(e)])}const y=u[0],C=t(y),d=S.getter(w),a=[...i],c=[];let M=[],g;for(;a.length;){const n=a.pop();if(C===t(n)){M=c.map(e=>e.item),g=n;break}else{c&&c.length&&c[c.length-1].parentPosition===a.length&&c.pop();const e=d(n);e&&e.length&&(c.push({item:n,parentPosition:a.length}),a.push(...e))}}const b=[...d(g)||[]],k=[];for(;b.length;){const n=b.pop();k.push(n);const e=d(n);e&&e.length&&b.push(...e)}const P=!I[C],o=[];if(P){o.push(...p),o.push(g),o.push(...k.filter(s=>!I[t(s)]));const n=M.filter(s=>!I[t(s)]),e=r(o,t);for(let s=n.length-1;s>-1;s--){const h=n[s],l=d(h);if(l.filter(T=>e[t(T)]).length<l.length)break;o.push(h),e[t(h)]=!0}}else{const n=t(g),e=r(k,t),s=r(M,t);o.push(...p.filter(h=>{const l=t(h);return!e[l]&&n!==l&&!s[l]}))}return o};exports.getMultiSelectTreeValue=G;exports.getValueMap=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("@progress/kendo-react-common"),r=(i,m)=>{const u={};return i&&i.length&&i.forEach(f=>{u[m(f)]=!0}),u},G=(i,m)=>{const{items:u,dataItemKey:f,value:p,subItemsField:S="items",operation:V}=m,t=C.getter(f),I=r(p,t);if(V==="clear")return[];if(V==="delete"){const n=r(u,t);return p.filter(e=>!n[t(e)])}const y=u[0],w=t(y),d=C.getter(S),a=[...i],l=[];let M=[],g;for(;a.length;){const n=a.pop();if(w===t(n)){M=l.map(e=>e.item),g=n;break}else{const e=d(n);for(e&&e.length&&(l.push({item:n,parentPosition:a.length}),a.push(...e));l.length&&l[l.length-1].parentPosition===a.length;)l.pop()}}const b=[...d(g)||[]],k=[];for(;b.length;){const n=b.pop();k.push(n);const e=d(n);e&&e.length&&b.push(...e)}const P=!I[w],c=[];if(P){c.push(...p),c.push(g),c.push(...k.filter(s=>!I[t(s)]));const n=M.filter(s=>!I[t(s)]),e=r(c,t);for(let s=n.length-1;s>-1;s--){const h=n[s],o=d(h);if(o.filter(T=>e[t(T)]).length<o.length)break;c.push(h),e[t(h)]=!0}}else{const n=t(g),e=r(k,t),s=r(M,t);c.push(...p.filter(h=>{const o=t(h);return!e[o]&&n!==o&&!s[o]}))}return c};exports.getMultiSelectTreeValue=G;exports.getValueMap=r;

package/MultiSelectTree/utils.mjs

@@ -6,12 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 import { getter as V } from "@progress/kendo-react-common";
-const a = (l, f) => {
+const a = (r, f) => {
   const i = {};
-  return l && l.length && l.forEach((g) => {
+  return r && r.length && r.forEach((g) => {
     i[f(g)] = !0;
   }), i;
-}, E = (l, f) => {
+}, E = (r, f) => {
   const { items: i, dataItemKey: g, value: u, subItemsField: x = "items", operation: w } = f, t = V(g), I = a(u, t);
   if (w === "clear")
     return [];
@@ -19,17 +19,17 @@ const a = (l, f) => {
     const n = a(i, t);
     return u.filter((e) => !n[t(e)]);
   }
-  const G = i[0], C = t(G), d = V(x), h = [...l], c = [];
+  const G = i[0], C = t(G), d = V(x), h = [...r], o = [];
   let b = [], m;
   for (; h.length; ) {
     const n = h.pop();
     if (C === t(n)) {
-      b = c.map((e) => e.item), m = n;
+      b = o.map((e) => e.item), m = n;
       break;
     } else {
-      c && c.length && c[c.length - 1].parentPosition === h.length && c.pop();
       const e = d(n);
-      e && e.length && (c.push({ item: n, parentPosition: h.length }), h.push(...e));
+      for (e && e.length && (o.push({ item: n, parentPosition: h.length }), h.push(...e)); o.length && o[o.length - 1].parentPosition === h.length; )
+        o.pop();
     }
   }
   const k = [...d(m) || []], M = [];
@@ -39,26 +39,26 @@ const a = (l, f) => {
     const e = d(n);
     e && e.length && k.push(...e);
   }
-  const L = !I[C], o = [];
+  const L = !I[C], c = [];
   if (L) {
-    o.push(...u), o.push(m), o.push(...M.filter((s) => !I[t(s)]));
-    const n = b.filter((s) => !I[t(s)]), e = a(o, t);
+    c.push(...u), c.push(m), c.push(...M.filter((s) => !I[t(s)]));
+    const n = b.filter((s) => !I[t(s)]), e = a(c, t);
     for (let s = n.length - 1; s > -1; s--) {
-      const p = n[s], r = d(p);
-      if (r.filter((P) => e[t(P)]).length < r.length)
+      const p = n[s], l = d(p);
+      if (l.filter((P) => e[t(P)]).length < l.length)
         break;
-      o.push(p), e[t(p)] = !0;
+      c.push(p), e[t(p)] = !0;
     }
   } else {
     const n = t(m), e = a(M, t), s = a(b, t);
-    o.push(
+    c.push(
       ...u.filter((p) => {
-        const r = t(p);
-        return !e[r] && n !== r && !s[r];
+        const l = t(p);
+        return !e[l] && n !== l && !s[l];
       })
     );
   }
-  return o;
+  return c;
 };
 export {
   E as getMultiSelectTreeValue,

package/common/DropDownBase.js

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