@progress/kendo-react-dropdowns 7.2.4-develop.3 → 7.3.0-develop.1

package/MultiSelect/TagList.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";const f=require("react"),m=require("@progress/kendo-react-buttons");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const s=g(f),v=e=>e.syntheticEvent.preventDefault(),h=e=>e.syntheticEvent.stopPropagation();class y extends s.Component{render(){const{data:o,guid:n,focused:r,tagRender:c,tag:i,onTagDelete:l,size:p}=this.props;return s.createElement(s.Fragment,null,o.map((t,u)=>{const a=i?s.createElement(i,{key:t.text+u,tagData:t,guid:n,focusedTag:r,onTagDelete:l}):s.createElement(m.Chip,{id:`tag-${n}-${t.text.replace(/\s+/g,"-")}`,"aria-selected":!0,role:"option","aria-setsize":o.length,key:t.text+u,text:t.text,removable:!0,onRemove:d=>l.call(void 0,t.data,d.syntheticEvent),onMouseDown:v,onClick:h,className:t===r?"k-focus":void 0,size:p});return c?c(t,a):a}),this.props.children)}}module.exports=y;

package/MultiSelect/TagList.mjs

@@ -0,0 +1,48 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import { Chip as d } from "@progress/kendo-react-buttons";
+const v = (o) => o.syntheticEvent.preventDefault(), f = (o) => o.syntheticEvent.stopPropagation();
+class g extends t.Component {
+  render() {
+    const { data: n, guid: s, focused: r, tagRender: c, tag: i, onTagDelete: l, size: m } = this.props;
+    return /* @__PURE__ */ t.createElement(t.Fragment, null, n.map((e, p) => {
+      const a = i ? /* @__PURE__ */ t.createElement(
+        i,
+        {
+          key: e.text + p,
+          tagData: e,
+          guid: s,
+          focusedTag: r,
+          onTagDelete: l
+        }
+      ) : /* @__PURE__ */ t.createElement(
+        d,
+        {
+          id: `tag-${s}-${e.text.replace(/\s+/g, "-")}`,
+          "aria-selected": !0,
+          role: "option",
+          "aria-setsize": n.length,
+          key: e.text + p,
+          text: e.text,
+          removable: !0,
+          onRemove: (u) => l.call(void 0, e.data, u.syntheticEvent),
+          onMouseDown: v,
+          onClick: f,
+          className: e === r ? "k-focus" : void 0,
+          size: m
+        }
+      );
+      return c ? c(e, a) : a;
+    }), this.props.children);
+  }
+}
+export {
+  g as default
+};

package/MultiSelectTree/MultiSelectTree.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 Ze=require("react"),a=require("prop-types"),i=require("@progress/kendo-react-common"),et=require("@progress/kendo-react-popup"),tt=require("@progress/kendo-react-intl"),we=require("@progress/kendo-react-treeview"),nt=require("../package-metadata.js"),ee=require("../common/utils.js"),at=require("../DropDownTree/useDropdownWidth.js"),st=require("../DropDownTree/ListNoData.js"),m=require("../messages/index.js"),it=require("@progress/kendo-react-labels"),ot=require("../MultiSelect/TagList.js"),rt=require("../common/ClearButton.js"),Ie=require("../common/ListFilter.js"),lt=require("../common/AdaptiveMode.js"),ct=require("@progress/kendo-react-layout"),ut=require("../common/constants.js");function dt(h){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const w=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(b,t,w.get?w:{enumerable:!0,get:()=>h[t]})}}return b.default=h,Object.freeze(b)}const n=dt(Ze),pt="Please select a value from the list!",{sizeMap:Te,roundedMap:ft}=i.kendoThemeMaps,gt=h=>h.split("_").map(b=>parseInt(b,10)),vt=(h,b)=>{const{validationMessage:t,valid:w,required:I}=h;return{customError:t!==void 0,valid:!!(w!==void 0?w:!I||b),valueMissing:!b}},q={checkField:"checkField",checkIndeterminateField:"checkIndeterminateField",subItemsField:"items",popupSettings:{animate:!0,width:"200px",height:"200px"},size:"medium",rounded:"medium",fillMode:"solid",required:!1,validityStyles:!0},Ke=i.createPropsContext(),te=n.forwardRef((h,b)=>{const t=i.usePropsContext(Ke,h);i.validatePackage(nt.packageMetadata);const w=i.useId(),I=t.id||w,{data:B=[],dataItemKey:T,popupSettings:N={},style:L={},opened:K,disabled:F,onOpen:ne=i.noop,onClose:W=i.noop,placeholder:ue,label:V,name:Me,checkField:de=q.checkField,checkIndeterminateField:pe=q.checkIndeterminateField,subItemsField:fe=q.subItemsField,validationMessage:z,valid:Re,tags:ge,value:g,required:ve=q.required,validityStyles:De=q.validityStyles}=t,_=i.getTabIndex(t.tabIndex,F),r=n.useRef(null),E=n.useRef(null),M=n.useRef(null),ae=n.useRef(null),j=n.useRef(null),x=n.useRef(null),$=n.useRef(!1),H=n.useRef([]),G=n.useRef(null),[O,qe]=n.useState(),[Ne,me]=n.useState(!1),[d,se]=n.useState(!1),[ie,Oe]=n.useState(),[Pe,Le]=n.useState([]),[he,Ve]=n.useState(""),P=!!(ie&&ie<=ut.MOBILE_MEDIUM_DEVISE&&t.adaptive),l=K!==void 0?K:Ne,oe=!!(Array.isArray(g)&&g.length),re=vt({validationMessage:z,valid:Re,required:ve},oe),R=i.useRtl(E,t.dir),Ae={width:at.useDropdownWidth(E,q,N,L),...R!==void 0?{direction:R}:{}},Be=n.useCallback(()=>E.current&&E.current.focus(),[]);H.current=ge===void 0?(g||[]).map(e=>({text:ee.getItemValue(e,t.textField),data:[e]})):[...ge],n.useImperativeHandle(r,()=>({props:t,element:E.current,focus:Be})),n.useImperativeHandle(b,()=>r.current);const We=n.useCallback(()=>{j.current&&j.current.setCustomValidity&&j.current.setCustomValidity(re.valid?"":z===void 0?pt:z)},[z,re]);n.useEffect(We),n.useEffect(()=>{const e=i.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Xe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{e&&e.disconnect()}},[]),n.useEffect(()=>{G.current&&l&&G.current.setPosition(G.current._popup)},[g,l]);const S=n.useCallback((e,s,o)=>{if(t.onChange){const C={items:s,operation:o,...e};t.onChange.call(void 0,C)}},[t.onChange]),U=n.useCallback(e=>{if(ee.areSame(e.item,g,T)||!r.current)return;const{item:s,nativeEvent:o,syntheticEvent:C}=e,D={syntheticEvent:C,nativeEvent:o,target:r.current};S(D,[s],"toggle")},[g,T,S]),J=n.useCallback(e=>{if(!l){if(ne){const s={...e};ne.call(void 0,s)}K===void 0&&(me(!0),Le(g||[]),P&&setTimeout(()=>{var s;u((s=ae.current)==null?void 0:s.element)},300))}},[l,K,ne,P,ae]),v=n.useCallback(e=>{if(l){if(W){const s={...e};W.call(void 0,s)}K===void 0&&me(!1)}},[l,K,W]),k=n.useCallback(e=>{$.current=!0,e(),window.setTimeout(()=>$.current=!1,0)},[]),u=n.useCallback(e=>{e&&k(()=>e.focus())},[k]),ze=n.useCallback(()=>{var e;!d&&l?v({target:r.current}):t.filterable?u((e=M.current)==null?void 0:e.element):u(x.current&&x.current.element)},[d,l,u,v,t.filterable]),_e=n.useCallback(()=>{d&&u(E.current)},[d,u]),je=n.useCallback(e=>{if(!d&&!$.current&&(se(!0),t.onFocus&&r.current)){const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};t.onFocus.call(void 0,s)}},[d,t.onFocus]),$e=n.useCallback(e=>{if(d&&!$.current&&r.current){se(!1);const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};if(t.onBlur){const o={...s};t.onBlur.call(void 0,o)}P||v(s)}},[d,t.onBlur,l,K,W]),He=n.useCallback(()=>{d&&k(i.noop)},[d,k]),Ge=n.useCallback(e=>{if(!e.isDefaultPrevented()&&r.current){se(!0);const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};l||J(s)}},[l,J]),Ue=n.useCallback(e=>{var Z,Se;const{keyCode:s,altKey:o}=e,C=x.current&&x.current.element;if(!r.current||e.isDefaultPrevented()&&((Z=M.current)==null?void 0:Z.element)===e.target)return;const D={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};if(g&&g.length>0&&(s===i.Keys.left||s===i.Keys.right||s===i.Keys.home||s===i.Keys.end||s===i.Keys.delete)){const c=H.current;let p=O?c.findIndex(Ye=>ee.matchTags(Ye,O,T)):-1,f;const ce=p!==-1;s===i.Keys.left?(ce?p=Math.max(0,p-1):p=c.length-1,f=c[p]):s===i.Keys.right?p===c.length-1?f=void 0:ce&&(p=Math.min(c.length-1,p+1),f=c[p]):s===i.Keys.home?f=c[0]:s===i.Keys.end?f=c[c.length-1]:s===i.Keys.delete&&ce&&S(D,c[p].data,"delete"),f!==O&&qe(f)}if(l)if(s===i.Keys.esc||o&&s===i.Keys.up)e.preventDefault(),v(D);else if(C&&C.querySelector(".k-focus")&&(s===i.Keys.up||s===i.Keys.down||s===i.Keys.left||s===i.Keys.right||s===i.Keys.home||s===i.Keys.end)){if(s===i.Keys.up&&((Se=M.current)!=null&&Se.element)){const c=Array.from(C.querySelectorAll(".k-treeview-item")),p=[...c].reverse().find(f=>!!(f&&f.querySelector(".k-focus")));if(p&&c.indexOf(p)===0)return k(()=>{var f;u((f=M.current)==null?void 0:f.element)})}k(i.noop)}else s===i.Keys.down&&k(()=>{var c;u(((c=M.current)==null?void 0:c.element)||C)});else o&&s===i.Keys.down&&(e.preventDefault(),J(D))},[l,v,u,k,J,O,T,g,S]),ye=n.useCallback(e=>{const{keyCode:s,altKey:o}=e;o||s!==i.Keys.up&&s!==i.Keys.down||(e.preventDefault(),k(s===i.Keys.up?()=>{u(E.current)}:()=>{u(x.current&&x.current.element)}))},[u,k]),le=n.useCallback(e=>{if(!r.current)return;const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};S(s,[],"clear"),v(s),e.preventDefault()},[S,v]),Je=n.useCallback((e,s)=>{var o;v({target:r.current}),d||u((o=M.current)==null?void 0:o.element),S({syntheticEvent:s,nativeEvent:s.nativeEvent,target:r.current},e,"delete")},[S,v,u,d]),be=n.useCallback(e=>{if(t.onExpandChange&&r.current){const{item:s,itemHierarchicalIndex:o,nativeEvent:C,syntheticEvent:D}=e,Z={level:gt(o),item:s,nativeEvent:C,syntheticEvent:D,target:r.current};t.onExpandChange.call(void 0,Z)}},[t.onExpandChange]),ke=n.useCallback(e=>{if(t.onFilterChange&&r.current){const o={filter:{field:t.textField,operator:"contains",value:e.target.value},syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,target:r.current};t.onFilterChange.call(void 0,o),t.filter===void 0&&Ve(e.target.value)}},[t.onFilterChange,t.filter,t.textField]),Ce=n.useCallback(e=>{if(!r.current)return;const s={syntheticEvent:e,nativeEvent:e.nativeEvent,target:r.current};t.onCancel&&t.onCancel.call(void 0,s),v(s),e.preventDefault()},[t.onCancel,v]),Qe=()=>{const e=t.filterable?n.createElement(Ie,{value:t.filter===void 0?he:t.filter,ref:ae,onChange:ke,onKeyDown:ye,size:y,rounded:A,fillMode:X}):null,s={adaptiveTitle:t.adaptiveTitle,expand:l,onClose:o=>t.onCancel?Ce(o):le(o),windowWidth:ie,mobileFilter:e,footer:{cancelText:Q.toLanguageString(m.adaptiveModeFooterCancel,m.messages[m.adaptiveModeFooterCancel]),onCancel:o=>t.onCancel?Ce(o):le(o),applyText:Q.toLanguageString(m.adaptiveModeFooterApply,m.messages[m.adaptiveModeFooterApply]),onApply:o=>v(o)}};return n.createElement(lt.AdaptiveMode,{...s},n.createElement(ct.ActionSheetContent,{className:"!k-overflow-hidden"},n.createElement("div",{className:"k-list-container"},n.createElement("div",{className:"k-list k-list-lg"},B.length>0?n.createElement(we.TreeView,{ref:x,tabIndex:_,data:B,focusIdField:T,textField:t.textField,checkField:de,checkIndeterminateField:pe,expandField:t.expandField,childrenField:fe,expandIcons:!0,onItemClick:U,onCheckChange:U,onExpandChange:be,checkboxes:!0,size:y,item:t.item,dir:R}):n.createElement(Ee,null,Q.toLanguageString(m.nodata,m.messages[m.nodata]))))))},Xe=n.useCallback(e=>{for(let s of e)Oe(s.target.clientWidth)},[]),Ee=t.listNoData||st.ListNoData,Q=tt.useLocalization(),Fe=!De||re.valid,{size:y,rounded:A,fillMode:X}=t,Y=P&&l?Pe:H.current,xe=n.createElement(n.Fragment,null,n.createElement("span",{className:i.classNames("k-multiselecttree k-input",t.className,{[`k-input-${Te[y]||y}`]:y,[`k-rounded-${ft[A]||A}`]:A,[`k-input-${X}`]:X,"k-focus":d&&!F,"k-invalid":!Fe,"k-disabled":F,"k-loading":t.loading,"k-required":ve}),tabIndex:_,accessKey:t.accessKey,id:I,style:V?{...L,width:void 0}:L,dir:R,ref:E,onKeyDown:F?void 0:Ue,onMouseDown:He,onFocus:je,onBlur:$e,role:"combobox","aria-haspopup":"tree","aria-expanded":l,"aria-disabled":F,"aria-label":V,"aria-labelledby":t.ariaLabelledBy,"aria-describedby":t.ariaDescribedBy?t.ariaDescribedBy:"tagslist-"+I,"aria-required":t.required,onClick:F?void 0:Ge},n.createElement("div",{id:"tagslist-"+I,className:i.classNames("k-input-values k-chip-list k-selection-multiple",{[`k-chip-list-${Te[y]||y}`]:y})},Y.length>0&&n.createElement(ot,{tag:t.tag,onTagDelete:Je,data:Y,guid:I,focused:O?H.current.find(e=>ee.matchTags(e,O,T)):void 0,size:y})),n.createElement("span",{className:"k-input-inner"},Y.length===0&&n.createElement("span",{className:"k-input-value-text"},ue)),t.loading&&n.createElement(i.IconWrap,{className:"k-input-loading-icon",name:"loading"}),oe&&!F&&Y.length>0&&n.createElement(rt,{onClick:le}),n.createElement("select",{name:Me,ref:j,tabIndex:-1,"aria-hidden":!0,title:V,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},n.createElement("option",{value:t.valueMap?t.valueMap.call(void 0,g):g})),!P&&n.createElement(et.Popup,{...N,popupClass:i.classNames(N.popupClass,"k-multiselecttree-popup"),className:i.classNames(N.className,{"k-rtl":R==="rtl"}),style:Ae,anchor:N.anchor||E.current,show:l,onOpen:ze,onClose:_e,ref:G},t.filterable&&n.createElement(Ie,{value:t.filter===void 0?he:t.filter,ref:M,onChange:ke,onKeyDown:ye,tabIndex:_,size:y,rounded:A,fillMode:X}),B.length>0?n.createElement(we.TreeView,{style:{height:N.height},ref:x,tabIndex:_,data:B,focusIdField:T,textField:t.textField,checkField:de,checkIndeterminateField:pe,expandField:t.expandField,childrenField:fe,expandIcons:!0,onItemClick:U,onCheckChange:U,onExpandChange:be,checkboxes:!0,size:y,item:t.item,dir:R}):n.createElement(Ee,null,Q.toLanguageString(m.nodata,m.messages[m.nodata])))),P&&Qe());return V?n.createElement(it.FloatingLabel,{label:V,editorValue:oe,editorPlaceholder:ue,editorValid:Fe,editorDisabled:F,editorId:I,style:{width:L?L.width:void 0},children:xe,dir:R}):xe}),mt={opened:a.bool,disabled:a.bool,dir:a.string,tabIndex:a.number,accessKey:a.string,data:a.array,value:a.any,valueMap:a.func,placeholder:a.string,dataItemKey:a.string.isRequired,textField:a.string.isRequired,checkField:a.string,checkIndeterminateField:a.string,expandField:a.string,subItemsField:a.string,className:a.string,style:a.object,label:a.string,validationMessage:a.string,validityStyles:a.bool,valid:a.bool,required:a.bool,name:a.string,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,filterable:a.bool,filter:a.string,loading:a.bool,tags:a.arrayOf(a.shape({text:a.string,data:a.arrayOf(a.any)})),popupSettings:a.shape({animate:a.oneOfType([a.bool,a.shape({openDuration:a.number,closeDuration:a.number})]),popupClass:a.string,className:a.string,appendTo:a.any,width:a.oneOfType([a.string,a.number]),height:a.oneOfType([a.string,a.number])}),onOpen:a.func,onClose:a.func,onFocus:a.func,onBlur:a.func,onChange:a.func,onFilterChange:a.func,onExpandChange:a.func,onCancel:a.func,item:a.func,listNoData:a.func,adaptiveTitle:a.string,adaptive:a.bool};te.displayName="KendoReactMultiSelectTree";te.defaultProps=q;te.propTypes=mt;exports.MultiSelectTree=te;exports.MultiSelectTreePropsContext=Ke;

package/MultiSelectTree/MultiSelectTree.mjs

@@ -0,0 +1,590 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"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 { 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";
+import { packageMetadata as mt } from "../package-metadata.mjs";
+import { getItemValue as gt, areSame as vt, matchTags as De } from "../common/utils.mjs";
+import { useDropdownWidth as ht } from "../DropDownTree/useDropdownWidth.mjs";
+import { ListNoData as bt } from "../DropDownTree/ListNoData.mjs";
+import { nodata as te, messages as ne, adaptiveModeFooterCancel as Re, adaptiveModeFooterApply as Me } from "../messages/index.mjs";
+import { FloatingLabel as yt } from "@progress/kendo-react-labels";
+import Ct from "../MultiSelect/TagList.mjs";
+import Et from "../common/ClearButton.mjs";
+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 { validationMessage: n, valid: K, required: F } = O;
+  return {
+    customError: n !== void 0,
+    valid: !!(K !== void 0 ? K : !F || R),
+    valueMissing: !R
+  };
+}, D = {
+  checkField: "checkField",
+  checkIndeterminateField: "checkIndeterminateField",
+  subItemsField: "items",
+  popupSettings: {
+    animate: !0,
+    width: "200px",
+    height: "200px"
+  },
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid",
+  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, {
+    data: q = [],
+    dataItemKey: x,
+    popupSettings: M = {},
+    style: B = {},
+    opened: I,
+    disabled: C,
+    onOpen: ae = Z,
+    onClose: A = Z,
+    placeholder: pe,
+    label: L,
+    name: Oe,
+    checkField: fe = D.checkField,
+    checkIndeterminateField: me = D.checkIndeterminateField,
+    subItemsField: ge = D.subItemsField,
+    validationMessage: W,
+    valid: Be,
+    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 } : {}
+  }, $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,
+    () => ({
+      props: n,
+      element: y.current,
+      focus: $e
+    })
+  ), t.useImperativeHandle(R, () => l.current);
+  const He = t.useCallback(
+    () => {
+      _.current && _.current.setCustomValidity && _.current.setCustomValidity(
+        se.valid ? "" : W === void 0 ? It : W
+      );
+    },
+    [W, se]
+  );
+  t.useEffect(He), t.useEffect(() => {
+    const e = ct && window.ResizeObserver && new window.ResizeObserver(tt.bind(void 0));
+    return document != null && document.body && e && e.observe(document.body), () => {
+      e && e.disconnect();
+    };
+  }, []), t.useEffect(
+    () => {
+      G.current && s && G.current.setPosition(G.current._popup);
+    },
+    [m, s]
+  );
+  const k = t.useCallback(
+    (e, i, o) => {
+      if (n.onChange) {
+        const b = {
+          items: i,
+          operation: o,
+          ...e
+        };
+        n.onChange.call(void 0, b);
+      }
+    },
+    [n.onChange]
+  ), U = t.useCallback(
+    (e) => {
+      if (vt(e.item, m, x) || !l.current)
+        return;
+      const { item: i, nativeEvent: o, syntheticEvent: b } = e, T = {
+        syntheticEvent: b,
+        nativeEvent: o,
+        target: l.current
+      };
+      k(T, [i], "toggle");
+    },
+    [m, x, k]
+  ), j = t.useCallback(
+    (e) => {
+      if (!s) {
+        if (ae) {
+          const i = { ...e };
+          ae.call(void 0, i);
+        }
+        I === void 0 && (be(!0), We(m || []), P && setTimeout(() => {
+          var i;
+          u((i = ie.current) == null ? void 0 : i.element);
+        }, 300));
+      }
+    },
+    [s, I, ae, P, ie]
+  ), g = t.useCallback(
+    (e) => {
+      if (s) {
+        if (A) {
+          const i = { ...e };
+          A.call(void 0, i);
+        }
+        I === void 0 && be(!1);
+      }
+    },
+    [s, I, A]
+  ), h = t.useCallback(
+    (e) => {
+      $.current = !0, e(), window.setTimeout(() => $.current = !1, 0);
+    },
+    []
+  ), u = t.useCallback(
+    (e) => {
+      e && h(() => e.focus());
+    },
+    [h]
+  ), 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, u, g, n.filterable]
+  ), Ue = t.useCallback(
+    () => {
+      d && u(y.current);
+    },
+    [d, u]
+  ), je = t.useCallback(
+    (e) => {
+      if (!d && !$.current && (oe(!0), n.onFocus && l.current)) {
+        const i = {
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          target: l.current
+        };
+        n.onFocus.call(void 0, i);
+      }
+    },
+    [d, n.onFocus]
+  ), Je = t.useCallback(
+    (e) => {
+      if (d && !$.current && l.current) {
+        oe(!1);
+        const i = {
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          target: l.current
+        };
+        if (n.onBlur) {
+          const o = { ...i };
+          n.onBlur.call(void 0, o);
+        }
+        P || g(i);
+      }
+    },
+    [d, n.onBlur, s, I, A]
+  ), Qe = t.useCallback(
+    () => {
+      d && h(Z);
+    },
+    [d, h]
+  ), Xe = t.useCallback(
+    (e) => {
+      if (!e.isDefaultPrevented() && l.current) {
+        oe(!0);
+        const i = {
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          target: l.current
+        };
+        s || j(i);
+      }
+    },
+    [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)
+        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)) {
+        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);
+      }
+      if (s)
+        if (i === r.esc || o && i === r.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)) {
+            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);
+              });
+          }
+          h(Z);
+        } else
+          i === r.down && h(() => {
+            var c;
+            u(((c = w.current) == null ? void 0 : c.element) || b);
+          });
+      else
+        o && i === r.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 ? () => {
+          u(y.current);
+        } : () => {
+          u(E.current && E.current.element);
+        }
+      ));
+    },
+    [u, h]
+  ), ce = t.useCallback(
+    (e) => {
+      if (!l.current)
+        return;
+      const i = {
+        syntheticEvent: e,
+        nativeEvent: e.nativeEvent,
+        target: l.current
+      };
+      k(i, [], "clear"), g(i), 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,
+        target: l.current
+      }, e, "delete");
+    },
+    [k, g, u, d]
+  ), 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,
+          nativeEvent: b,
+          syntheticEvent: T,
+          target: l.current
+        };
+        n.onExpandChange.call(void 0, Y);
+      }
+    },
+    [n.onExpandChange]
+  ), ke = t.useCallback(
+    (e) => {
+      if (n.onFilterChange && l.current) {
+        const o = {
+          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, n.filter, n.textField]
+  ), Fe = t.useCallback(
+    (e) => {
+      if (!l.current)
+        return;
+      const i = {
+        syntheticEvent: e,
+        nativeEvent: e.nativeEvent,
+        target: l.current
+      };
+      n.onCancel && n.onCancel.call(void 0, i), g(i), e.preventDefault();
+    },
+    [n.onCancel, g]
+  ), et = () => {
+    const e = n.filterable ? /* @__PURE__ */ t.createElement(
+      Ne,
+      {
+        value: n.filter === void 0 ? ye : n.filter,
+        ref: ie,
+        onChange: ke,
+        onKeyDown: Ce,
+        size: v,
+        rounded: V,
+        fillMode: Q
+      }
+    ) : null, i = {
+      adaptiveTitle: n.adaptiveTitle,
+      expand: s,
+      onClose: (o) => n.onCancel ? Fe(o) : ce(o),
+      windowWidth: re,
+      mobileFilter: e,
+      footer: {
+        cancelText: J.toLanguageString(Re, ne[Re]),
+        onCancel: (o) => n.onCancel ? Fe(o) : ce(o),
+        applyText: J.toLanguageString(Me, ne[Me]),
+        onApply: (o) => g(o)
+      }
+    };
+    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(
+      Te,
+      {
+        ref: E,
+        tabIndex: z,
+        data: q,
+        focusIdField: x,
+        textField: n.textField,
+        checkField: fe,
+        checkIndeterminateField: me,
+        expandField: n.expandField,
+        childrenField: ge,
+        expandIcons: !0,
+        onItemClick: U,
+        onCheckChange: U,
+        onExpandChange: Ee,
+        checkboxes: !0,
+        size: v,
+        item: n.item,
+        dir: S
+      }
+    ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))))));
+  }, tt = t.useCallback(
+    (e) => {
+      for (let i of e)
+        qe(i.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(
+    "span",
+    {
+      className: ee("k-multiselecttree k-input", n.className, {
+        [`k-input-${Pe[v] || v}`]: v,
+        [`k-rounded-${wt[V] || V}`]: V,
+        [`k-input-${Q}`]: Q,
+        "k-focus": d && !C,
+        "k-invalid": !Ie,
+        "k-disabled": C,
+        "k-loading": n.loading,
+        "k-required": he
+      }),
+      tabIndex: z,
+      accessKey: n.accessKey,
+      id: F,
+      style: L ? { ...B, width: void 0 } : B,
+      dir: S,
+      ref: y,
+      onKeyDown: C ? void 0 : Ye,
+      onMouseDown: Qe,
+      onFocus: je,
+      onBlur: Je,
+      role: "combobox",
+      "aria-haspopup": "tree",
+      "aria-expanded": s,
+      "aria-disabled": C,
+      "aria-label": L,
+      "aria-labelledby": n.ariaLabelledBy,
+      "aria-describedby": n.ariaDescribedBy ? n.ariaDescribedBy : "tagslist-" + F,
+      "aria-required": n.required,
+      onClick: C ? void 0 : Xe
+    },
+    /* @__PURE__ */ t.createElement(
+      "div",
+      {
+        id: "tagslist-" + F,
+        className: ee("k-input-values k-chip-list k-selection-multiple", {
+          [`k-chip-list-${Pe[v] || v}`]: v
+        })
+      },
+      X.length > 0 && /* @__PURE__ */ t.createElement(
+        Ct,
+        {
+          tag: n.tag,
+          onTagDelete: Ze,
+          data: X,
+          guid: F,
+          focused: N ? H.current.find((e) => De(e, N, x)) : void 0,
+          size: v
+        }
+      )
+    ),
+    /* @__PURE__ */ t.createElement("span", { className: "k-input-inner" }, X.length === 0 && /* @__PURE__ */ t.createElement("span", { className: "k-input-value-text" }, pe)),
+    n.loading && /* @__PURE__ */ t.createElement(ut, { className: "k-input-loading-icon", name: "loading" }),
+    le && !C && X.length > 0 && /* @__PURE__ */ t.createElement(Et, { onClick: ce }),
+    /* @__PURE__ */ t.createElement(
+      "select",
+      {
+        name: Oe,
+        ref: _,
+        tabIndex: -1,
+        "aria-hidden": !0,
+        title: L,
+        style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: "absolute", left: "50%" }
+      },
+      /* @__PURE__ */ t.createElement(
+        "option",
+        {
+          value: n.valueMap ? n.valueMap.call(void 0, m) : m
+        }
+      )
+    ),
+    !P && /* @__PURE__ */ t.createElement(
+      pt,
+      {
+        ...M,
+        popupClass: ee(
+          M.popupClass,
+          "k-multiselecttree-popup"
+        ),
+        className: ee(M.className, { "k-rtl": S === "rtl" }),
+        style: _e,
+        anchor: M.anchor || y.current,
+        show: s,
+        onOpen: Ge,
+        onClose: Ue,
+        ref: G
+      },
+      n.filterable && /* @__PURE__ */ t.createElement(
+        Ne,
+        {
+          value: n.filter === void 0 ? ye : n.filter,
+          ref: w,
+          onChange: ke,
+          onKeyDown: Ce,
+          tabIndex: z,
+          size: v,
+          rounded: V,
+          fillMode: Q
+        }
+      ),
+      q.length > 0 ? /* @__PURE__ */ t.createElement(
+        Te,
+        {
+          style: { height: M.height },
+          ref: E,
+          tabIndex: z,
+          data: q,
+          focusIdField: x,
+          textField: n.textField,
+          checkField: fe,
+          checkIndeterminateField: me,
+          expandField: n.expandField,
+          childrenField: ge,
+          expandIcons: !0,
+          onItemClick: U,
+          onCheckChange: U,
+          onExpandChange: Ee,
+          checkboxes: !0,
+          size: v,
+          item: n.item,
+          dir: S
+        }
+      ) : /* @__PURE__ */ t.createElement(xe, null, J.toLanguageString(te, ne[te]))
+    )
+  ), P && et());
+  return L ? /* @__PURE__ */ t.createElement(
+    yt,
+    {
+      label: L,
+      editorValue: le,
+      editorPlaceholder: pe,
+      editorValid: Ie,
+      editorDisabled: C,
+      editorId: F,
+      style: { width: B ? B.width : void 0 },
+      children: we,
+      dir: S
+    }
+  ) : we;
+}), Rt = {
+  opened: a.bool,
+  disabled: a.bool,
+  dir: a.string,
+  tabIndex: a.number,
+  accessKey: a.string,
+  data: a.array,
+  value: a.any,
+  valueMap: a.func,
+  placeholder: a.string,
+  dataItemKey: a.string.isRequired,
+  textField: a.string.isRequired,
+  checkField: a.string,
+  checkIndeterminateField: a.string,
+  expandField: a.string,
+  subItemsField: a.string,
+  className: a.string,
+  style: a.object,
+  label: a.string,
+  validationMessage: a.string,
+  validityStyles: a.bool,
+  valid: a.bool,
+  required: a.bool,
+  name: a.string,
+  id: a.string,
+  ariaLabelledBy: a.string,
+  ariaDescribedBy: a.string,
+  filterable: a.bool,
+  filter: a.string,
+  loading: a.bool,
+  tags: a.arrayOf(a.shape({
+    text: a.string,
+    data: a.arrayOf(a.any)
+  })),
+  popupSettings: a.shape({
+    animate: a.oneOfType([a.bool, a.shape({
+      openDuration: a.number,
+      closeDuration: a.number
+    })]),
+    popupClass: a.string,
+    className: a.string,
+    appendTo: a.any,
+    width: a.oneOfType([a.string, a.number]),
+    height: a.oneOfType([a.string, a.number])
+  }),
+  onOpen: a.func,
+  onClose: a.func,
+  onFocus: a.func,
+  onBlur: a.func,
+  onChange: a.func,
+  onFilterChange: a.func,
+  onExpandChange: a.func,
+  onCancel: a.func,
+  item: a.func,
+  listNoData: a.func,
+  adaptiveTitle: a.string,
+  adaptive: a.bool
+};
+de.displayName = "KendoReactMultiSelectTree";
+de.defaultProps = D;
+de.propTypes = Rt;
+export {
+  de as MultiSelectTree,
+  Dt as MultiSelectTreePropsContext
+};

package/MultiSelectTree/utils.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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 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)||[]];let 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],l=[];if(P){l.push(...p),l.push(g),l.push(...k.filter(s=>!I[t(s)]));const n=M.filter(s=>!I[t(s)]),e=r(l,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;l.push(h),e[t(h)]=!0}}else{const n=t(g),e=r(k,t),s=r(M,t);l.push(...p.filter(h=>{const o=t(h);return!e[o]&&n!==o&&!s[o]}))}return l};exports.getMultiSelectTreeValue=G;exports.getValueMap=r;