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

package/TreeView.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 m=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),f=require("./utils/getItemIdUponKeyboardNavigation.js"),g=require("./TreeViewItem.js"),b=require("./package-metadata.js"),o=require("./utils/consts.js");function E(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const r=E(m),{sizeMap:F}=l.kendoThemeMaps,c=class c extends r.Component{constructor(t){super(t),this.state={focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:l.treeIdUtils.ZERO_LEVEL_ZERO_NODE_ID},this.fieldsSvc=null,this.allowExplicitFocus=!1,this._element=null,this.onFocusDomElNeeded=e=>{this.allowExplicitFocus&&this.focusDomItem(e)},this.onCheckChange=(e,s,i)=>{this.setFocus(i),this.dispatchCheckChange(e,s,i)},this.onExpandChange=(e,s,i)=>{this.setFocus(i),this.dispatchExpandChange(e,s,i)},this.onPress=(e,s,i)=>{this.props.onItemDragStart&&this.props.onItemDragStart.call(void 0,{target:this,item:s,itemHierarchicalIndex:i})},this.onDrag=(e,s,i)=>{const{pageX:d,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragOver&&this.props.onItemDragOver.call(void 0,{target:this,item:s,itemHierarchicalIndex:i,pageX:d,pageY:h,clientX:u,clientY:p})},this.onRelease=(e,s,i)=>{const{pageX:d,pageY:h,clientX:u,clientY:p}=e;this.props.onItemDragEnd&&this.props.onItemDragEnd.call(void 0,{target:this,item:s,itemHierarchicalIndex:i,pageX:d,pageY:h,clientX:u,clientY:p})},this.onItemClick=(e,s,i)=>{this.setFocus(i),this.dispatchItemClick(e,s,i)},this.onFocus=()=>{clearTimeout(this.blurRequest),this.state.focusedItemId===void 0&&this.data.length&&this.setFocus(this.state.tabbableItemId)},this.onBlur=()=>{clearTimeout(this.blurRequest),this.blurRequest=window.setTimeout(()=>this.setFocus(void 0),0)},this.onKeyDown=e=>{const s=this.getFocusedItem();if(s&&this.fieldsSvc){const i=f(s,this.state.focusedItemId,this.data,e.keyCode,this.fieldsSvc);i!==this.state.focusedItemId&&(e.preventDefault(),this.allowExplicitFocus=!0,this.setFocus(i)),this.dispatchEventsOnKeyDown(e,s)}},this.onContextMenu=(e,s,i)=>{if(this.props.onContextMenu){const d={target:this,syntheticEvent:e,nativeEvent:e.nativeEvent,item:s,itemID:i};this.props.onContextMenu.call(void 0,d)}},l.validatePackage(b.packageMetadata)}get treeGuid(){return this.props.id+"-accessibility-id"}get element(){return this._element}render(){this.fieldsSvc=new l.TreeFieldsService(this.props);const{size:t,className:e}=this.props;return r.createElement("div",{id:this.props.id,style:this.props.style?this.props.style:void 0,className:l.classNames("k-treeview",{[`k-treeview-${F[t]||t}`]:t,"k-user-select-none":this.props.draggable,"k-rtl":this.props.dir==="rtl"},e),onKeyDown:this.onKeyDown,onFocus:this.onFocus,onBlur:this.onBlur,role:"tree","aria-multiselectable":this.ariaMultiSelectable?!0:void 0,"aria-label":this.props["aria-label"],"aria-labelledby":this.props["aria-labelledby"],ref:s=>this._element=s,tabIndex:this.props.tabIndex},r.createElement("ul",{className:"k-treeview-lines k-treeview-group",role:"group"},this.data.map((s,i)=>r.createElement(g.TreeViewItem,{id:this.props.id+"-item-"+i,item:s,position:i===0?"top":i===this.data.length-1?"bot":"mid",itemId:i.toString(),treeGuid:this.treeGuid,animate:this.props.animate,focusedItemId:this.state.focusedItemId,tabbableItemId:this.state.tabbableItemId,fieldsService:this.fieldsSvc,itemUI:this.props.item,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.ariaMultiSelectable,onItemClick:this.onItemClick,onFocusDomElNeeded:this.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease,expandIcons:this.props.expandIcons,onExpandChange:this.onExpandChange,onCheckChange:this.onCheckChange,onContextMenu:this.onContextMenu,key:i,size:t,isRtl:this.props.dir==="rtl"}))))}componentDidUpdate(){this.allowExplicitFocus=!1,this.refocusDueToFocusIdField()}dispatchEventsOnKeyDown(t,e){if(this.fieldsSvc===null)return;const s=()=>this.fieldsSvc&&l.isEnabledAndAllParentsEnabled(this.state.focusedItemId,this.data,this.fieldsSvc);t.keyCode===l.Keys.left&&this.fieldsSvc.expanded(e)&&s()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===l.Keys.right&&!this.fieldsSvc.expanded(e)&&(this.fieldsSvc.hasChildren(e)||l.hasChildren(e,this.props.childrenField))&&s()?this.dispatchExpandChange(t,e,this.state.focusedItemId):t.keyCode===l.Keys.enter&&s()?this.dispatchItemClick(t,e,this.state.focusedItemId):t.keyCode===l.Keys.space&&s()&&(t.preventDefault(),this.dispatchCheckChange(t,e,this.state.focusedItemId))}setFocus(t){if(t&&this.fieldsSvc)if(this.fieldsSvc.focusIdField){const e=this.getItemById(t);this.setState({focusedItemId:t,focusedItemPublicId:this.fieldsSvc.focusId(e)})}else this.setState({focusedItemId:t});else this.setState(e=>({focusedItemId:void 0,focusedItemPublicId:void 0,tabbableItemId:e.focusedItemId}))}getFocusedItem(){return this.state.focusedItemId?this.getItemById(this.state.focusedItemId):void 0}getItemById(t){return l.treeIdUtils.getItemById(t,this.data,this.props.childrenField||o.CHILDREN_FIELD)}dispatchCheckChange(t,e,s){l.dispatchEvent(this.props.onCheckChange,t,this,{item:e,itemHierarchicalIndex:s})}dispatchExpandChange(t,e,s){l.dispatchEvent(this.props.onExpandChange,t,this,{item:e,itemHierarchicalIndex:s})}dispatchItemClick(t,e,s){l.dispatchEvent(this.props.onItemClick,t,this,{item:e,itemHierarchicalIndex:s})}refocusDueToFocusIdField(){if(this.fieldsSvc&&this.fieldsSvc.focusIdField){const t=this.state.focusedItemPublicId;if(t){const e=this.props.getFocusHierarchicalIndex?this.props.getFocusHierarchicalIndex(t):l.resolveItemId(t,this.fieldsSvc.focusIdField,this.data,this.props.childrenField);e!==this.state.focusedItemId&&(this.allowExplicitFocus=!0,this.setState({focusedItemId:e}))}}}get ariaMultiSelectable(){return this.props["aria-multiselectable"]===!0||this.props["aria-multiselectable"]==="true"}get data(){return this.props.data||[]}focusDomItem(t){t.focus()}get guid(){return this.treeGuid}};c.propTypes={data:a.arrayOf(a.any),animate:a.bool,tabIndex:a.number,focusIdField:a.string,getHierarchicalIndexById:a.func,onExpandChange:a.func,onItemClick:a.func,expandField:a.string,selectField:a.string,childrenField:a.string,hasChildrenField:a.string,textField:a.string,disableField:a.string,item:a.any,"aria-multiselectable":(t,e,s)=>t[e]!==void 0&&t[e]!==!0&&t[e]!==!1&&t[e]!=="true"&&t[e]!=="false"?new Error("Invalid prop `"+e+"` supplied to `"+s+"`. Validation failed."):null,"aria-label":a.string,"aria-labelledby":a.string,size:a.oneOf([null,"small","medium","large"]),dir:a.string},c.defaultProps={animate:!0,expandField:o.EXPAND_FIELD,selectField:o.SELECT_FIELD,hasChildrenField:o.HAS_CHILDREN_FIELD,childrenField:o.CHILDREN_FIELD,textField:o.TEXT_FIELD,disableField:o.DISABLED_FIELD,checkField:o.CHECK_FIELD,checkIndeterminateField:o.CHECK_INDETERMINATE_FIELD,size:"medium"};let I=c;exports.TreeView=I;

package/TreeView.mjs

@@ -0,0 +1,256 @@
+/**
+ * @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 o from "react";
+import a from "prop-types";
+import { treeIdUtils as u, validatePackage as f, TreeFieldsService as g, classNames as b, Keys as d, hasChildren as E, dispatchEvent as p, resolveItemId as F, kendoThemeMaps as C, isEnabledAndAllParentsEnabled as v } from "@progress/kendo-react-common";
+import D from "./utils/getItemIdUponKeyboardNavigation.mjs";
+import { TreeViewItem as x } from "./TreeViewItem.mjs";
+import { packageMetadata as k } from "./package-metadata.mjs";
+import { EXPAND_FIELD as S, SELECT_FIELD as y, HAS_CHILDREN_FIELD as w, CHILDREN_FIELD as I, TEXT_FIELD as _, DISABLED_FIELD as H, CHECK_FIELD as L, CHECK_INDETERMINATE_FIELD as M } from "./utils/consts.mjs";
+const { sizeMap: P } = C, h = class h extends o.Component {
+  constructor(t) {
+    super(t), this.state = { focusedItemId: void 0, focusedItemPublicId: void 0, tabbableItemId: u.ZERO_LEVEL_ZERO_NODE_ID }, this.fieldsSvc = null, this.allowExplicitFocus = !1, this._element = null, this.onFocusDomElNeeded = (e) => {
+      this.allowExplicitFocus && this.focusDomItem(e);
+    }, this.onCheckChange = (e, i, s) => {
+      this.setFocus(s), this.dispatchCheckChange(e, i, s);
+    }, this.onExpandChange = (e, i, s) => {
+      this.setFocus(s), this.dispatchExpandChange(e, i, s);
+    }, this.onPress = (e, i, s) => {
+      this.props.onItemDragStart && this.props.onItemDragStart.call(
+        void 0,
+        { target: this, item: i, itemHierarchicalIndex: s }
+      );
+    }, this.onDrag = (e, i, s) => {
+      const { pageX: l, pageY: r, clientX: n, clientY: c } = e;
+      this.props.onItemDragOver && this.props.onItemDragOver.call(
+        void 0,
+        {
+          target: this,
+          item: i,
+          itemHierarchicalIndex: s,
+          pageX: l,
+          pageY: r,
+          clientX: n,
+          clientY: c
+        }
+      );
+    }, this.onRelease = (e, i, s) => {
+      const { pageX: l, pageY: r, clientX: n, clientY: c } = e;
+      this.props.onItemDragEnd && this.props.onItemDragEnd.call(
+        void 0,
+        {
+          target: this,
+          item: i,
+          itemHierarchicalIndex: s,
+          pageX: l,
+          pageY: r,
+          clientX: n,
+          clientY: c
+        }
+      );
+    }, this.onItemClick = (e, i, s) => {
+      this.setFocus(s), this.dispatchItemClick(e, i, s);
+    }, this.onFocus = () => {
+      clearTimeout(this.blurRequest), this.state.focusedItemId === void 0 && this.data.length && this.setFocus(this.state.tabbableItemId);
+    }, this.onBlur = () => {
+      clearTimeout(this.blurRequest), this.blurRequest = window.setTimeout(() => this.setFocus(void 0), 0);
+    }, this.onKeyDown = (e) => {
+      const i = this.getFocusedItem();
+      if (i && this.fieldsSvc) {
+        const s = D(i, this.state.focusedItemId, this.data, e.keyCode, this.fieldsSvc);
+        s !== this.state.focusedItemId && (e.preventDefault(), this.allowExplicitFocus = !0, this.setFocus(s)), this.dispatchEventsOnKeyDown(e, i);
+      }
+    }, this.onContextMenu = (e, i, s) => {
+      if (this.props.onContextMenu) {
+        const l = {
+          target: this,
+          syntheticEvent: e,
+          nativeEvent: e.nativeEvent,
+          item: i,
+          itemID: s
+        };
+        this.props.onContextMenu.call(void 0, l);
+      }
+    }, f(k);
+  }
+  get treeGuid() {
+    return this.props.id + "-accessibility-id";
+  }
+  /**
+   * @hidden
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    this.fieldsSvc = new g(this.props);
+    const { size: t, className: e } = this.props;
+    return /* @__PURE__ */ o.createElement(
+      "div",
+      {
+        id: this.props.id,
+        style: this.props.style ? this.props.style : void 0,
+        className: b(
+          "k-treeview",
+          {
+            [`k-treeview-${P[t] || t}`]: t,
+            "k-user-select-none": this.props.draggable,
+            "k-rtl": this.props.dir === "rtl"
+          },
+          e
+        ),
+        onKeyDown: this.onKeyDown,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        role: "tree",
+        "aria-multiselectable": this.ariaMultiSelectable ? !0 : void 0,
+        "aria-label": this.props["aria-label"],
+        "aria-labelledby": this.props["aria-labelledby"],
+        ref: (i) => this._element = i,
+        tabIndex: this.props.tabIndex
+      },
+      /* @__PURE__ */ o.createElement("ul", { className: "k-treeview-lines k-treeview-group", role: "group" }, this.data.map((i, s) => /* @__PURE__ */ o.createElement(
+        x,
+        {
+          id: this.props.id + "-item-" + s,
+          item: i,
+          position: s === 0 ? "top" : s === this.data.length - 1 ? "bot" : "mid",
+          itemId: s.toString(),
+          treeGuid: this.treeGuid,
+          animate: this.props.animate,
+          focusedItemId: this.state.focusedItemId,
+          tabbableItemId: this.state.tabbableItemId,
+          fieldsService: this.fieldsSvc,
+          itemUI: this.props.item,
+          checkboxes: this.props.checkboxes,
+          ariaMultiSelectable: this.ariaMultiSelectable,
+          onItemClick: this.onItemClick,
+          onFocusDomElNeeded: this.onFocusDomElNeeded,
+          draggable: this.props.draggable,
+          onPress: this.onPress,
+          onDrag: this.onDrag,
+          onRelease: this.onRelease,
+          expandIcons: this.props.expandIcons,
+          onExpandChange: this.onExpandChange,
+          onCheckChange: this.onCheckChange,
+          onContextMenu: this.onContextMenu,
+          key: s,
+          size: t,
+          isRtl: this.props.dir === "rtl"
+        }
+      )))
+    );
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate() {
+    this.allowExplicitFocus = !1, this.refocusDueToFocusIdField();
+  }
+  dispatchEventsOnKeyDown(t, e) {
+    if (this.fieldsSvc === null)
+      return;
+    const i = () => this.fieldsSvc && v(this.state.focusedItemId, this.data, this.fieldsSvc);
+    t.keyCode === d.left && this.fieldsSvc.expanded(e) && i() ? this.dispatchExpandChange(t, e, this.state.focusedItemId) : t.keyCode === d.right && !this.fieldsSvc.expanded(e) && (this.fieldsSvc.hasChildren(e) || E(e, this.props.childrenField)) && i() ? this.dispatchExpandChange(t, e, this.state.focusedItemId) : t.keyCode === d.enter && i() ? this.dispatchItemClick(t, e, this.state.focusedItemId) : t.keyCode === d.space && i() && (t.preventDefault(), this.dispatchCheckChange(t, e, this.state.focusedItemId));
+  }
+  setFocus(t) {
+    if (t && this.fieldsSvc)
+      if (this.fieldsSvc.focusIdField) {
+        const e = this.getItemById(t);
+        this.setState({ focusedItemId: t, focusedItemPublicId: this.fieldsSvc.focusId(e) });
+      } else
+        this.setState({ focusedItemId: t });
+    else
+      this.setState((e) => ({
+        focusedItemId: void 0,
+        focusedItemPublicId: void 0,
+        tabbableItemId: e.focusedItemId
+      }));
+  }
+  getFocusedItem() {
+    return this.state.focusedItemId ? this.getItemById(this.state.focusedItemId) : void 0;
+  }
+  getItemById(t) {
+    return u.getItemById(t, this.data, this.props.childrenField || I);
+  }
+  dispatchCheckChange(t, e, i) {
+    p(this.props.onCheckChange, t, this, { item: e, itemHierarchicalIndex: i });
+  }
+  dispatchExpandChange(t, e, i) {
+    p(this.props.onExpandChange, t, this, { item: e, itemHierarchicalIndex: i });
+  }
+  dispatchItemClick(t, e, i) {
+    p(this.props.onItemClick, t, this, { item: e, itemHierarchicalIndex: i });
+  }
+  refocusDueToFocusIdField() {
+    if (this.fieldsSvc && this.fieldsSvc.focusIdField) {
+      const t = this.state.focusedItemPublicId;
+      if (t) {
+        const e = this.props.getFocusHierarchicalIndex ? this.props.getFocusHierarchicalIndex(t) : F(t, this.fieldsSvc.focusIdField, this.data, this.props.childrenField);
+        e !== this.state.focusedItemId && (this.allowExplicitFocus = !0, this.setState({ focusedItemId: e }));
+      }
+    }
+  }
+  get ariaMultiSelectable() {
+    return this.props["aria-multiselectable"] === !0 || this.props["aria-multiselectable"] === "true";
+  }
+  get data() {
+    return this.props.data || [];
+  }
+  focusDomItem(t) {
+    t.focus();
+  }
+  /**
+   * Returns the `guid` which is associated with the TreeView.
+   */
+  get guid() {
+    return this.treeGuid;
+  }
+};
+h.propTypes = {
+  data: a.arrayOf(a.any),
+  animate: a.bool,
+  tabIndex: a.number,
+  focusIdField: a.string,
+  getHierarchicalIndexById: a.func,
+  onExpandChange: a.func,
+  onItemClick: a.func,
+  expandField: a.string,
+  selectField: a.string,
+  childrenField: a.string,
+  hasChildrenField: a.string,
+  textField: a.string,
+  disableField: a.string,
+  item: a.any,
+  "aria-multiselectable": (t, e, i) => t[e] !== void 0 && t[e] !== !0 && t[e] !== !1 && t[e] !== "true" && t[e] !== "false" ? new Error(
+    "Invalid prop `" + e + "` supplied to `" + i + "`. Validation failed."
+  ) : null,
+  "aria-label": a.string,
+  "aria-labelledby": a.string,
+  size: a.oneOf([null, "small", "medium", "large"]),
+  dir: a.string
+}, h.defaultProps = {
+  animate: !0,
+  expandField: S,
+  selectField: y,
+  hasChildrenField: w,
+  childrenField: I,
+  textField: _,
+  disableField: H,
+  checkField: L,
+  checkIndeterminateField: M,
+  size: "medium"
+};
+let m = h;
+export {
+  m as TreeView
+};

package/TreeViewDragAnalyzer.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 i=require("./utils/consts.js"),s=6;class r{constructor(t){this.event=t,this.initialized=!1,this.destItemId="",this.destTreeViewGuid="",this.itemId=t.itemHierarchicalIndex,this.treeViewGuid=t.target.guid}init(){return this.initialized||(this.setDestimationMeta(document.elementFromPoint(this.event.clientX,this.event.clientY)),this.initialized=!0),this}get isDropAllowed(){return this.initialized&&this.destItemId&&this.destTreeViewGuid?!`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`):!1}get destinationMeta(){return{itemHierarchicalIndex:this.destItemId,treeViewGuid:this.destTreeViewGuid}}getDropOperation(){if(this.initialized&&this.isDropAllowed){const{top:t,height:e}=this.destDomNodeWithMeta.getBoundingClientRect();return t+e-this.event.clientY<s?"after":this.event.clientY-t<s?"before":"child"}else return}setDestimationMeta(t){let e=t;for(;e&&!e[i.DOM_KENDO_ITEM_ID_FIELD];)e=e.parentNode;e&&e[i.DOM_KENDO_ITEM_ID_FIELD]&&(this.destDomNodeWithMeta=e,this.destItemId=e[i.DOM_KENDO_ITEM_ID_FIELD],this.destTreeViewGuid=e[i.DOM_KENDO_TREEVIEW_GUID_FIELD])}}exports.TreeViewDragAnalyzer=r;

package/TreeViewDragAnalyzer.mjs

@@ -0,0 +1,66 @@
+/**
+ * @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 { DOM_KENDO_ITEM_ID_FIELD as i, DOM_KENDO_TREEVIEW_GUID_FIELD as r } from "./utils/consts.mjs";
+const s = 6;
+class h {
+  /**
+   * @param event - The event that will be analyzed.
+   */
+  constructor(t) {
+    this.event = t, this.initialized = !1, this.destItemId = "", this.destTreeViewGuid = "", this.itemId = t.itemHierarchicalIndex, this.treeViewGuid = t.target.guid;
+  }
+  /**
+   * The method which initializes the analyzer.
+   * Invoke the method before you call any other methods.
+   *
+   * @returns - The analyzer object of the `drag` event.
+   */
+  init() {
+    return this.initialized || (this.setDestimationMeta(document.elementFromPoint(this.event.clientX, this.event.clientY)), this.initialized = !0), this;
+  }
+  /**
+   * Returns `true` if dropping is allowed. Otherwise, returns `false`.
+   */
+  get isDropAllowed() {
+    return this.initialized && this.destItemId && this.destTreeViewGuid ? !`${this.destTreeViewGuid}_${this.destItemId}_`.startsWith(`${this.treeViewGuid}_${this.itemId}_`) : !1;
+  }
+  /**
+   * Returns an object which contains:
+   * * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
+   * * The `guid` of the destination TreeView (the TreeView which renders the destination item).
+   */
+  get destinationMeta() {
+    return { itemHierarchicalIndex: this.destItemId, treeViewGuid: this.destTreeViewGuid };
+  }
+  /**
+   * Returns the specific drop operation.
+   *
+   * @returns - The following values are returned:
+   * * `before`—Indicates that the dragged item is positioned at the beginning of the destination item.
+   * * `after`—Indicates that the dragged item is positioned at the end of the destination item.
+   * * `child`—Indicates that the dragged item is positioned in the middle of the destination item.
+   * * `undefined`—Indicates that dropping is not allowed.
+   */
+  getDropOperation() {
+    if (this.initialized && this.isDropAllowed) {
+      const { top: t, height: e } = this.destDomNodeWithMeta.getBoundingClientRect();
+      return t + e - this.event.clientY < s ? "after" : this.event.clientY - t < s ? "before" : "child";
+    } else
+      return;
+  }
+  setDestimationMeta(t) {
+    let e = t;
+    for (; e && !e[i]; )
+      e = e.parentNode;
+    e && e[i] && (this.destDomNodeWithMeta = e, this.destItemId = e[i], this.destTreeViewGuid = e[r]);
+  }
+}
+export {
+  h as TreeViewDragAnalyzer
+};

package/TreeViewDragClue.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 p=require("react"),i=require("@progress/kendo-react-common"),a=require("@progress/kendo-svg-icons");function u(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const n=u(p),l=class l extends n.PureComponent{constructor(){super(...arguments),this.state={visible:!1,top:0,left:0,text:"",operationClassName:"cancel"}}render(){const e={top:this.state.top+"px",left:this.state.left+"px"};return this.state.visible&&n.createElement("div",{className:"k-header k-drag-clue",style:{...this.props.style,...e}},n.createElement(i.IconWrap,{className:i.classNames("k-drag-status"),name:this.state.operationClassName&&i.toIconName(this.state.operationClassName),icon:this.state.operationClassName==="k-i-plus"?a.plusIcon:this.state.operationClassName==="k-i-insert-up"?a.insertTopIcon:this.state.operationClassName==="k-i-insert-down"?a.insertBottomIcon:this.state.operationClassName==="k-i-insert-middle"?a.insertMiddleIcon:a.cancelIcon}),this.state.text)}show(e,t,o,c){this.setState({visible:!0,top:e,left:t,text:o,operationClassName:c})}hide(){this.setState({visible:!1})}};l.defaultProps={style:{display:"block",position:"absolute",zIndex:2e4,padding:"4px 6px"}};let r=l;exports.TreeViewDragClue=r;

package/TreeViewDragClue.mjs

@@ -0,0 +1,58 @@
+/**
+ * @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 s from "react";
+import { IconWrap as l, classNames as r, toIconName as p } from "@progress/kendo-react-common";
+import { plusIcon as c, insertTopIcon as m, insertBottomIcon as d, insertMiddleIcon as h, cancelIcon as u } from "@progress/kendo-svg-icons";
+const e = class e extends s.PureComponent {
+  constructor() {
+    super(...arguments), this.state = {
+      visible: !1,
+      top: 0,
+      left: 0,
+      text: "",
+      operationClassName: "cancel"
+    };
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const t = { top: this.state.top + "px", left: this.state.left + "px" };
+    return this.state.visible && /* @__PURE__ */ s.createElement("div", { className: "k-header k-drag-clue", style: { ...this.props.style, ...t } }, /* @__PURE__ */ s.createElement(
+      l,
+      {
+        className: r("k-drag-status"),
+        name: this.state.operationClassName && p(this.state.operationClassName),
+        icon: this.state.operationClassName === "k-i-plus" ? c : this.state.operationClassName === "k-i-insert-up" ? m : this.state.operationClassName === "k-i-insert-down" ? d : this.state.operationClassName === "k-i-insert-middle" ? h : u
+      }
+    ), this.state.text);
+  }
+  /**
+   * Displays the TreeViewDragClue component.
+   *
+   * @param top - The `top` CSS position of the component.
+   * @param left - The `left` CSS position of the component.
+   * @param text - The text of the component.
+   * @param operationClassName - The CSS class name which is related to the specific drop operation.
+   */
+  show(t, i, o, n) {
+    this.setState({ visible: !0, top: t, left: i, text: o, operationClassName: n });
+  }
+  /**
+   * Hides the TreeViewDragClue component.
+   */
+  hide() {
+    this.setState({ visible: !1 });
+  }
+};
+e.defaultProps = { style: { display: "block", position: "absolute", zIndex: 2e4, padding: "4px 6px" } };
+let a = e;
+export {
+  a as TreeViewDragClue
+};

package/TreeViewItem.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 p=require("react"),n=require("@progress/kendo-react-common"),o=require("@progress/kendo-svg-icons"),m=require("@progress/kendo-react-animation"),h=require("./utils/consts.js");function I(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const s=I(p),{sizeMap:u}=n.kendoThemeMaps,l=s.createContext(r=>r),c=class c extends s.Component{constructor(){super(...arguments),this.onCheckChange=e=>{this.props.onCheckChange(e,this.item,this.itemId)},this.onExpandChange=e=>{this.props.onExpandChange(e,this.item,this.itemId)},this.onItemClick=e=>{this.props.onItemClick(e,this.item,this.itemId)},this.onPress=e=>{this.props.onPress(e.event,this.item,this.itemId)},this.onDrag=e=>{this.props.onDrag(e.event,this.item,this.itemId)},this.onRelease=e=>{this.props.onRelease(e.event,this.item,this.itemId)},this.onContextMenu=e=>{this.props.onContextMenu(e,this.item,this.itemId)},this.assignDraggableMeta=e=>{e&&(e[h.DOM_KENDO_ITEM_ID_FIELD]=this.props.itemId,e[h.DOM_KENDO_TREEVIEW_GUID_FIELD]=this.props.treeGuid)}}render(){const e=this.renderSubitemsIfApplicable(),t=this.renderItemInPart();return s.createElement("li",{className:n.classNames("k-treeview-item"),tabIndex:this.tabIndex,role:"treeitem","aria-expanded":this.ariaExpanded,"aria-selected":this.ariaSelected,"aria-checked":this.ariaChecked,"aria-disabled":this.disabled?!0:void 0,ref:i=>this.itemElement=i},s.createElement("div",{className:`k-treeview-${this.props.position}`,ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?s.createElement(n.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},t):t),this.props.animate?s.createElement(m.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"},children:e}):e)}componentDidMount(){const e=this.props.focusedItemId,t=this.itemId;e&&e===t&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement&&(this.checkboxElement.indeterminate=this.fieldsSvc.checkIndeterminate(this.item))}componentDidUpdate(e){const t=this.props.focusedItemId;if(t&&t!==e.focusedItemId&&t===this.itemId&&this.props.onFocusDomElNeeded(this.itemElement),this.checkboxElement){const i=this.fieldsSvc.checkIndeterminate(this.item);i!==e.fieldsService.checkIndeterminate(e.item)&&(this.checkboxElement.indeterminate=i)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size;return s.createElement("div",{className:n.classNames("k-checkbox-wrap")},s.createElement("input",{type:"checkbox",className:n.classNames("k-checkbox k-rounded-md",{[`k-checkbox-${u[e]||e}`]:e,"k-disabled":this.disabled}),"aria-label":this.item.text,checked:!!this.fieldsSvc.checked(this.item),id:this.props.id,tabIndex:-1,onChange:this.onCheckChange,ref:t=>this.checkboxElement=t}),s.createElement("label",{className:"k-checkbox-label",htmlFor:this.props.id}))}else return}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||n.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&s.createElement("span",{className:n.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},s.createElement(n.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return n.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?s.createElement("ul",{className:"k-treeview-group",role:"group"},e.map((t,i)=>s.createElement(d,{item:t,position:i===0?"top":i===e.length-1?"bot":"mid",itemId:n.treeIdUtils.createId(i,this.itemId),treeGuid:this.props.treeGuid,animate:this.props.animate,focusedItemId:this.props.focusedItemId,tabbableItemId:this.props.tabbableItemId,fieldsService:this.props.fieldsService,itemUI:this.props.itemUI,checkboxes:this.props.checkboxes,ariaMultiSelectable:this.props.ariaMultiSelectable,onItemClick:this.props.onItemClick,onFocusDomElNeeded:this.props.onFocusDomElNeeded,draggable:this.props.draggable,onPress:this.props.onPress,onDrag:this.props.onDrag,onRelease:this.props.onRelease,expandIcons:this.props.expandIcons,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:i,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl}))):void 0}renderItemInPart(){return s.createElement("span",{className:n.classNames("k-treeview-leaf",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled}),style:{touchAction:"none"},onClick:this.onItemClick,onContextMenu:this.onContextMenu},s.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?s.createElement(this.props.itemUI,{item:this.item,itemHierarchicalIndex:this.itemId}):this.fieldsSvc.text(this.item)))}get fieldsSvc(){return this.props.fieldsService}get itemId(){return this.props.itemId}get item(){return this.props.item}get tabIndex(){return(this.props.focusedItemId||this.props.tabbableItemId)===this.itemId?0:-1}get ariaExpanded(){return this.fieldsSvc.hasChildren(this.item)||n.hasChildren(this.item,this.fieldsSvc.getChildrenField())?!!this.fieldsSvc.expanded(this.item):void 0}get disabled(){return this.props.disabled||this.fieldsSvc.disabled(this.item)}get ariaChecked(){if(this.props.checkboxes)return this.fieldsSvc.checked(this.item)?"true":this.fieldsSvc.checkIndeterminate(this.item)?"mixed":"false"}get ariaSelected(){return this.fieldsSvc.selected(this.item)?!0:this.props.ariaMultiSelectable?this.disabled?void 0:!1:void 0}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!n.hasChildren(this.item,this.fieldsSvc.getChildrenField())?{name:"loading"}:e?{name:"caret-alt-down",icon:o.caretAltDownIcon}:{name:this.props.isRtl?"caret-alt-left":"caret-alt-right",icon:this.props.isRtl?o.caretAltLeftIcon:o.caretAltRightIcon}}};c.defaultProps={position:"top"};let a=c;const d=n.withIdHOC(s.forwardRef((r,e)=>{const i=s.useContext(l).call(void 0,r);return s.createElement(a,{ref:e,...i})}));d.displayName="TreeViewItem";exports.TreeViewItem=d;exports.TreeViewItemPropsContext=l;

package/TreeViewItem.mjs

@@ -0,0 +1,203 @@
+/**
+ * @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 { classNames as r, Draggable as c, hasChildren as o, IconWrap as l, isItemExpandedAndWithChildren as p, treeIdUtils as m, withIdHOC as I, kendoThemeMaps as u } from "@progress/kendo-react-common";
+import { caretAltDownIcon as b, caretAltLeftIcon as f, caretAltRightIcon as k } from "@progress/kendo-svg-icons";
+import { Reveal as g } from "@progress/kendo-react-animation";
+import { DOM_KENDO_ITEM_ID_FIELD as x, DOM_KENDO_TREEVIEW_GUID_FIELD as E } from "./utils/consts.mjs";
+const { sizeMap: C } = u, v = t.createContext((n) => n), h = class h extends t.Component {
+  constructor() {
+    super(...arguments), this.onCheckChange = (e) => {
+      this.props.onCheckChange(e, this.item, this.itemId);
+    }, this.onExpandChange = (e) => {
+      this.props.onExpandChange(e, this.item, this.itemId);
+    }, this.onItemClick = (e) => {
+      this.props.onItemClick(e, this.item, this.itemId);
+    }, this.onPress = (e) => {
+      this.props.onPress(e.event, this.item, this.itemId);
+    }, this.onDrag = (e) => {
+      this.props.onDrag(e.event, this.item, this.itemId);
+    }, this.onRelease = (e) => {
+      this.props.onRelease(e.event, this.item, this.itemId);
+    }, this.onContextMenu = (e) => {
+      this.props.onContextMenu(e, this.item, this.itemId);
+    }, this.assignDraggableMeta = (e) => {
+      e && (e[x] = this.props.itemId, e[E] = this.props.treeGuid);
+    };
+  }
+  render() {
+    const e = this.renderSubitemsIfApplicable(), i = this.renderItemInPart();
+    return /* @__PURE__ */ t.createElement(
+      "li",
+      {
+        className: r("k-treeview-item"),
+        tabIndex: this.tabIndex,
+        role: "treeitem",
+        "aria-expanded": this.ariaExpanded,
+        "aria-selected": this.ariaSelected,
+        "aria-checked": this.ariaChecked,
+        "aria-disabled": this.disabled ? !0 : void 0,
+        ref: (s) => this.itemElement = s
+      },
+      /* @__PURE__ */ t.createElement("div", { className: `k-treeview-${this.props.position}`, ref: this.assignDraggableMeta }, this.renderExpandIcon(), this.renderCheckbox(), this.props.draggable ? /* @__PURE__ */ t.createElement(c, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease }, i) : i),
+      this.props.animate ? /* @__PURE__ */ t.createElement(
+        g,
+        {
+          transitionEnterDuration: 200,
+          transitionExitDuration: 200,
+          style: { display: "block" },
+          children: e
+        }
+      ) : e
+    );
+  }
+  componentDidMount() {
+    const e = this.props.focusedItemId, i = this.itemId;
+    e && e === i && this.props.onFocusDomElNeeded(this.itemElement), this.checkboxElement && (this.checkboxElement.indeterminate = this.fieldsSvc.checkIndeterminate(this.item));
+  }
+  componentDidUpdate(e) {
+    const i = this.props.focusedItemId;
+    if (i && i !== e.focusedItemId && i === this.itemId && this.props.onFocusDomElNeeded(this.itemElement), this.checkboxElement) {
+      const s = this.fieldsSvc.checkIndeterminate(this.item);
+      s !== e.fieldsService.checkIndeterminate(e.item) && (this.checkboxElement.indeterminate = s);
+    }
+  }
+  renderCheckbox() {
+    if (this.props.checkboxes) {
+      const e = this.props.size;
+      return /* @__PURE__ */ t.createElement("div", { className: r("k-checkbox-wrap") }, /* @__PURE__ */ t.createElement(
+        "input",
+        {
+          type: "checkbox",
+          className: r(
+            "k-checkbox k-rounded-md",
+            {
+              [`k-checkbox-${C[e] || e}`]: e,
+              "k-disabled": this.disabled
+            }
+          ),
+          "aria-label": this.item.text,
+          checked: !!this.fieldsSvc.checked(this.item),
+          id: this.props.id,
+          tabIndex: -1,
+          onChange: this.onCheckChange,
+          ref: (i) => this.checkboxElement = i
+        }
+      ), /* @__PURE__ */ t.createElement("label", { className: "k-checkbox-label", htmlFor: this.props.id }));
+    } else
+      return;
+  }
+  renderExpandIcon() {
+    return this.props.expandIcons && // If it is explicitly said that the item has children (even not loaded yet)
+    // or if the item actually has children, then render the icon.
+    (this.fieldsSvc.hasChildren(this.item) || o(this.item, this.fieldsSvc.getChildrenField())) && // Allowing the toggle-button even with `disabled=true` might be a valid case!
+    // Re-evaluate the classes bellow if such scenario occurs
+    /* @__PURE__ */ t.createElement("span", { className: r("k-treeview-toggle", { "k-disabled": this.disabled }), onClick: this.onExpandChange }, /* @__PURE__ */ t.createElement(l, { ...this.getIconProps() }));
+  }
+  renderSubitemsIfApplicable() {
+    const e = this.fieldsSvc.children(this.item);
+    return p(this.item, this.fieldsSvc) ? /* @__PURE__ */ t.createElement("ul", { className: "k-treeview-group", role: "group" }, e.map((i, s) => /* @__PURE__ */ t.createElement(
+      d,
+      {
+        item: i,
+        position: s === 0 ? "top" : s === e.length - 1 ? "bot" : "mid",
+        itemId: m.createId(s, this.itemId),
+        treeGuid: this.props.treeGuid,
+        animate: this.props.animate,
+        focusedItemId: this.props.focusedItemId,
+        tabbableItemId: this.props.tabbableItemId,
+        fieldsService: this.props.fieldsService,
+        itemUI: this.props.itemUI,
+        checkboxes: this.props.checkboxes,
+        ariaMultiSelectable: this.props.ariaMultiSelectable,
+        onItemClick: this.props.onItemClick,
+        onFocusDomElNeeded: this.props.onFocusDomElNeeded,
+        draggable: this.props.draggable,
+        onPress: this.props.onPress,
+        onDrag: this.props.onDrag,
+        onRelease: this.props.onRelease,
+        expandIcons: this.props.expandIcons,
+        onExpandChange: this.props.onExpandChange,
+        onCheckChange: this.props.onCheckChange,
+        onContextMenu: this.props.onContextMenu,
+        key: s,
+        size: this.props.size,
+        disabled: this.disabled,
+        isRtl: this.props.isRtl
+      }
+    ))) : void 0;
+  }
+  renderItemInPart() {
+    return /* @__PURE__ */ t.createElement(
+      "span",
+      {
+        className: r(
+          "k-treeview-leaf",
+          {
+            "k-focus": this.props.focusedItemId === this.itemId,
+            "k-selected": this.fieldsSvc.selected(this.item),
+            "k-disabled": this.disabled
+          }
+        ),
+        style: { touchAction: "none" },
+        onClick: this.onItemClick,
+        onContextMenu: this.onContextMenu
+      },
+      /* @__PURE__ */ t.createElement("span", { className: "k-treeview-leaf-text" }, this.props.itemUI ? /* @__PURE__ */ t.createElement(this.props.itemUI, { item: this.item, itemHierarchicalIndex: this.itemId }) : this.fieldsSvc.text(this.item))
+    );
+  }
+  get fieldsSvc() {
+    return this.props.fieldsService;
+  }
+  get itemId() {
+    return this.props.itemId;
+  }
+  get item() {
+    return this.props.item;
+  }
+  get tabIndex() {
+    return (this.props.focusedItemId || this.props.tabbableItemId) === this.itemId ? 0 : -1;
+  }
+  get ariaExpanded() {
+    return this.fieldsSvc.hasChildren(this.item) || o(this.item, this.fieldsSvc.getChildrenField()) ? !!this.fieldsSvc.expanded(this.item) : void 0;
+  }
+  get disabled() {
+    return this.props.disabled || this.fieldsSvc.disabled(this.item);
+  }
+  get ariaChecked() {
+    if (this.props.checkboxes)
+      return this.fieldsSvc.checked(this.item) ? "true" : this.fieldsSvc.checkIndeterminate(this.item) ? "mixed" : "false";
+  }
+  get ariaSelected() {
+    return this.fieldsSvc.selected(this.item) ? !0 : this.props.ariaMultiSelectable ? this.disabled ? void 0 : !1 : void 0;
+  }
+  getIconProps() {
+    const e = this.fieldsSvc.expanded(this.item);
+    return e && !o(this.item, this.fieldsSvc.getChildrenField()) ? { name: "loading" } : e ? { name: "caret-alt-down", icon: b } : { name: this.props.isRtl ? "caret-alt-left" : "caret-alt-right", icon: this.props.isRtl ? f : k };
+  }
+};
+h.defaultProps = {
+  position: "top"
+};
+let a = h;
+const d = I(t.forwardRef((n, e) => {
+  const s = t.useContext(v).call(void 0, n);
+  return /* @__PURE__ */ t.createElement(
+    a,
+    {
+      ref: e,
+      ...s
+    }
+  );
+}));
+d.displayName = "TreeViewItem";
+export {
+  d as TreeViewItem,
+  v as TreeViewItemPropsContext
+};