@progress/kendo-react-treeview 13.3.0 → 13.4.0-develop.2

package/TreeViewItem.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TreeFieldsService } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const TreeViewItemPropsContext: React.Context<(props: TreeViewItemProps) => TreeViewItemProps>;
+/**
+ * @hidden
+ */
+export interface TreeViewItemProps {
+    item: any;
+    itemId: string;
+    treeGuid: string;
+    animate: boolean;
+    focusedItemId?: string;
+    tabbableItemId: string;
+    fieldsService: TreeFieldsService;
+    itemUI?: React.ComponentType<{
+        item: any;
+        itemHierarchicalIndex: string;
+    }>;
+    ariaMultiSelectable: boolean;
+    onItemClick: any;
+    expandIcons?: boolean;
+    iconField?: string;
+    onExpandChange: any;
+    onCheckChange: any;
+    checkboxes?: boolean;
+    onFocusDomElNeeded: any;
+    draggable?: boolean;
+    onPress: any;
+    onDrag: any;
+    onRelease: any;
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     *
+     * Internal usage!!!
+     */
+    position?: 'top' | 'mid' | 'bot';
+    /**
+     * Currently for internal usage only! Replicates the current behavior which disables all children
+     * if the parent is disabled, which was previously achieved only though the kendo-themes,
+     * but due to rendering changes had to be replicated programmatically!
+     *
+     * @hidden
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    isRtl?: boolean;
+    /**
+     * @hidden
+     */
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any, itemId: string) => void;
+    /**
+     * @hidden
+     * This prop comes from the `TreeView`component.
+     * It replaces the previously used guid() function and is used to generate unique `id` for
+     * the checkbox and label in the TreeViewItem.
+     */
+    id?: string;
+}
+/**
+ * @hidden
+ */
+declare class TreeViewItemWithoutContext extends React.Component<TreeViewItemProps> {
+    private itemElement;
+    private checkboxElement;
+    static defaultProps: {
+        position: string;
+        iconField: string;
+    };
+    render(): React.JSX.Element;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TreeViewItemProps): void;
+    private renderCheckbox;
+    private renderExpandIcon;
+    private renderSubitemsIfApplicable;
+    private renderSubitemsWithAnimation;
+    private renderItemInPart;
+    private onCheckChange;
+    private onExpandChange;
+    private onItemClick;
+    private onPress;
+    private onDrag;
+    private onRelease;
+    private onContextMenu;
+    private get fieldsSvc();
+    private get itemId();
+    private get item();
+    private get tabIndex();
+    private get ariaExpanded();
+    private get disabled();
+    private get ariaChecked();
+    private get ariaSelected();
+    private getIconProps;
+    private assignDraggableMeta;
+}
+/**
+ * @hidden
+ */
+export declare const TreeViewItem: React.ForwardRefExoticComponent<Omit<TreeViewItemProps & React.RefAttributes<TreeViewItemWithoutContext>, "ref"> & React.RefAttributes<any>>;
+export {};

package/TreeViewItem.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 p=require("react"),s=require("@progress/kendo-react-common"),o=require("@progress/kendo-svg-icons"),m=require("@progress/kendo-react-animation"),h=require("./utils/consts.js"),I=require("./utils/utils.js");function u(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const i=u(p),{sizeMap:b}=s.kendoThemeMaps,l=i.createContext(r=>r),c=class c extends i.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.renderItemInPart();return i.createElement("li",{className:s.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:t=>{this.itemElement=t}},i.createElement("span",{className:`k-treeview-${this.props.position}`,ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?i.createElement(s.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},e):e),this.renderSubitemsWithAnimation())}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 n=this.fieldsSvc.checkIndeterminate(this.item);this.checkboxElement.indeterminate!==n&&(this.checkboxElement.indeterminate=n)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size;return i.createElement("span",{className:s.classNames("k-checkbox-wrap")},i.createElement("input",{type:"checkbox",className:s.classNames("k-checkbox k-rounded-md",{[`k-checkbox-${b[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}}))}}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&i.createElement("span",{className:s.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},i.createElement(s.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return s.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?i.createElement("ul",{className:"k-treeview-group",role:"group"},e.map((t,n)=>i.createElement(d,{item:t,position:I.getNodePosition(n,e),itemId:s.treeIdUtils.createId(n,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,iconField:this.props.iconField,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:n,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl}))):void 0}renderSubitemsWithAnimation(){const e=this.renderSubitemsIfApplicable(),t=this.fieldsSvc.children(this.item).length>0;return this.props.animate&&t?i.createElement(m.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"}},e):e}renderItemInPart(){const e=this.props.iconField,t=e&&this.item[e];return i.createElement("span",{className:s.classNames("k-treeview-leaf",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled,"k-touch-action-none":this.props.draggable}),onClick:this.onItemClick,onContextMenu:this.onContextMenu},t&&i.createElement(s.IconWrap,{name:t.name,icon:t}),i.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?i.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)||s.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(){if(this.fieldsSvc.selected(this.item))return!0;if(this.props.ariaMultiSelectable)return this.disabled?void 0:!1}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!s.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",iconField:"svgIcon"};let a=c;const d=s.withIdHOC(i.forwardRef((r,e)=>{const n=i.useContext(l).call(void 0,r);return i.createElement(a,{ref:e,...n})}));d.displayName="TreeViewItem";exports.TreeViewItem=d;exports.TreeViewItemPropsContext=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),s=require("@progress/kendo-react-common"),o=require("@progress/kendo-svg-icons"),m=require("@progress/kendo-react-animation"),d=require("./utils/consts.js"),I=require("./utils/utils.js");function u(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const i=u(p),{sizeMap:b}=s.kendoThemeMaps,l=i.createContext(r=>r),h=class h extends i.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[d.DOM_KENDO_ITEM_ID_FIELD]=this.props.itemId,e[d.DOM_KENDO_TREEVIEW_GUID_FIELD]=this.props.treeGuid)}}render(){const e=this.renderItemInPart(),t=this.props.itemId.split("_").length;return i.createElement("li",{className:s.classNames("k-treeview-item"),style:{"--kendo-treeview-level":t},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:n=>{this.itemElement=n}},i.createElement("span",{className:s.classNames("k-treeview-item-content",{"k-focus":this.props.focusedItemId===this.itemId,"k-selected":this.fieldsSvc.selected(this.item),"k-disabled":this.disabled,"k-touch-action-none":this.props.draggable}),ref:this.assignDraggableMeta},this.renderExpandIcon(),this.renderCheckbox(),this.props.draggable?i.createElement(s.Draggable,{onPress:this.onPress,onDrag:this.onDrag,onRelease:this.onRelease},e):e),this.renderSubitemsWithAnimation())}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 n=this.fieldsSvc.checkIndeterminate(this.item);this.checkboxElement.indeterminate!==n&&(this.checkboxElement.indeterminate=n)}}renderCheckbox(){if(this.props.checkboxes){const e=this.props.size,t=!!this.fieldsSvc.checked(this.item);return i.createElement("span",{className:s.classNames("k-checkbox-wrap")},i.createElement("input",{type:"checkbox",className:s.classNames("k-checkbox",{[`k-checkbox-${b[e]||e}`]:e,"k-disabled":this.disabled,"k-checked":t}),"aria-label":this.item.text,checked:t,id:this.props.id,tabIndex:-1,onChange:this.onCheckChange,ref:n=>{this.checkboxElement=n}}))}}renderExpandIcon(){return this.props.expandIcons&&(this.fieldsSvc.hasChildren(this.item)||s.hasChildren(this.item,this.fieldsSvc.getChildrenField()))&&i.createElement("span",{className:s.classNames("k-treeview-toggle",{"k-disabled":this.disabled}),onClick:this.onExpandChange},i.createElement(s.IconWrap,{...this.getIconProps()}))}renderSubitemsIfApplicable(){const e=this.fieldsSvc.children(this.item);return s.isItemExpandedAndWithChildren(this.item,this.fieldsSvc)?i.createElement("ul",{className:"k-treeview-group",role:"group"},e.map((t,n)=>i.createElement(c,{item:t,position:I.getNodePosition(n,e),itemId:s.treeIdUtils.createId(n,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,iconField:this.props.iconField,onExpandChange:this.props.onExpandChange,onCheckChange:this.props.onCheckChange,onContextMenu:this.props.onContextMenu,key:n,size:this.props.size,disabled:this.disabled,isRtl:this.props.isRtl}))):void 0}renderSubitemsWithAnimation(){const e=this.renderSubitemsIfApplicable(),t=this.fieldsSvc.children(this.item).length>0;return this.props.animate&&t?i.createElement(m.Reveal,{transitionEnterDuration:200,transitionExitDuration:200,style:{display:"block"}},e):e}renderItemInPart(){const e=this.props.iconField,t=e&&this.item[e];return i.createElement("span",{className:s.classNames("k-treeview-leaf"),onClick:this.onItemClick,onContextMenu:this.onContextMenu},t&&i.createElement(s.IconWrap,{name:t.name,icon:t}),i.createElement("span",{className:"k-treeview-leaf-text"},this.props.itemUI?i.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)||s.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(){if(this.fieldsSvc.selected(this.item))return!0;if(this.props.ariaMultiSelectable)return this.disabled?void 0:!1}getIconProps(){const e=this.fieldsSvc.expanded(this.item);return e&&!s.hasChildren(this.item,this.fieldsSvc.getChildrenField())?{name:"loading"}:e?{name:"chevron-down",icon:o.chevronDownIcon}:{name:this.props.isRtl?"chevron-left":"chevron-right",icon:this.props.isRtl?o.chevronLeftIcon:o.chevronRightIcon}}};h.defaultProps={position:"top",iconField:"svgIcon"};let a=h;const c=s.withIdHOC(i.forwardRef((r,e)=>{const n=i.useContext(l).call(void 0,r);return i.createElement(a,{ref:e,...n})}));c.displayName="TreeViewItem";exports.TreeViewItem=c;exports.TreeViewItemPropsContext=l;

package/TreeViewItem.mjs

@@ -6,14 +6,14 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as i from "react";
-import { classNames as n, Draggable as l, hasChildren as o, IconWrap as d, isItemExpandedAndWithChildren as p, treeIdUtils as m, withIdHOC as I, kendoThemeMaps as u } from "@progress/kendo-react-common";
-import { caretAltDownIcon as f, caretAltLeftIcon as b, caretAltRightIcon as g } from "@progress/kendo-svg-icons";
-import { Reveal as k } from "@progress/kendo-react-animation";
-import { DOM_KENDO_ITEM_ID_FIELD as x, DOM_KENDO_TREEVIEW_GUID_FIELD as E } from "./utils/consts.mjs";
-import { getNodePosition as C } from "./utils/utils.mjs";
-const { sizeMap: v } = u, S = i.createContext(
+import { withIdHOC as l, classNames as n, Draggable as p, kendoThemeMaps as m, hasChildren as o, IconWrap as d, isItemExpandedAndWithChildren as I, treeIdUtils as u } from "@progress/kendo-react-common";
+import { chevronDownIcon as f, chevronLeftIcon as b, chevronRightIcon 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 v } from "./utils/consts.mjs";
+import { getNodePosition as E } from "./utils/utils.mjs";
+const { sizeMap: C } = m, S = i.createContext(
   (r) => r
-), h = class h extends i.Component {
+), a = class a extends i.Component {
   constructor() {
     super(...arguments), this.onCheckChange = (e) => {
       this.props.onCheckChange(e, this.item, this.itemId);
@@ -30,26 +30,41 @@ const { sizeMap: v } = u, S = i.createContext(
     }, 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);
+      e && (e[x] = this.props.itemId, e[v] = this.props.treeGuid);
     };
   }
   render() {
-    const e = this.renderItemInPart();
+    const e = this.renderItemInPart(), t = this.props.itemId.split("_").length;
     return /* @__PURE__ */ i.createElement(
       "li",
       {
         className: n("k-treeview-item"),
+        style: { "--kendo-treeview-level": t },
         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: (t) => {
-          this.itemElement = t;
+        ref: (s) => {
+          this.itemElement = s;
         }
       },
-      /* @__PURE__ */ i.createElement("span", { className: `k-treeview-${this.props.position}`, ref: this.assignDraggableMeta }, this.renderExpandIcon(), this.renderCheckbox(), this.props.draggable ? /* @__PURE__ */ i.createElement(l, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease }, e) : e),
+      /* @__PURE__ */ i.createElement(
+        "span",
+        {
+          className: n("k-treeview-item-content", {
+            "k-focus": this.props.focusedItemId === this.itemId,
+            "k-selected": this.fieldsSvc.selected(this.item),
+            "k-disabled": this.disabled,
+            "k-touch-action-none": this.props.draggable
+          }),
+          ref: this.assignDraggableMeta
+        },
+        this.renderExpandIcon(),
+        this.renderCheckbox(),
+        this.props.draggable ? /* @__PURE__ */ i.createElement(p, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease }, e) : e
+      ),
       this.renderSubitemsWithAnimation()
     );
   }
@@ -66,22 +81,23 @@ const { sizeMap: v } = u, S = i.createContext(
   }
   renderCheckbox() {
     if (this.props.checkboxes) {
-      const e = this.props.size;
+      const e = this.props.size, t = !!this.fieldsSvc.checked(this.item);
       return /* @__PURE__ */ i.createElement("span", { className: n("k-checkbox-wrap") }, /* @__PURE__ */ i.createElement(
         "input",
         {
           type: "checkbox",
-          className: n("k-checkbox k-rounded-md", {
-            [`k-checkbox-${v[e] || e}`]: e,
-            "k-disabled": this.disabled
+          className: n("k-checkbox", {
+            [`k-checkbox-${C[e] || e}`]: e,
+            "k-disabled": this.disabled,
+            "k-checked": t
           }),
           "aria-label": this.item.text,
-          checked: !!this.fieldsSvc.checked(this.item),
+          checked: t,
           id: this.props.id,
           tabIndex: -1,
           onChange: this.onCheckChange,
-          ref: (t) => {
-            this.checkboxElement = t;
+          ref: (s) => {
+            this.checkboxElement = s;
           }
         }
       ));
@@ -103,12 +119,12 @@ const { sizeMap: v } = u, S = i.createContext(
   }
   renderSubitemsIfApplicable() {
     const e = this.fieldsSvc.children(this.item);
-    return p(this.item, this.fieldsSvc) ? /* @__PURE__ */ i.createElement("ul", { className: "k-treeview-group", role: "group" }, e.map((t, s) => /* @__PURE__ */ i.createElement(
+    return I(this.item, this.fieldsSvc) ? /* @__PURE__ */ i.createElement("ul", { className: "k-treeview-group", role: "group" }, e.map((t, s) => /* @__PURE__ */ i.createElement(
       c,
       {
         item: t,
-        position: C(s, e),
-        itemId: m.createId(s, this.itemId),
+        position: E(s, e),
+        itemId: u.createId(s, this.itemId),
         treeGuid: this.props.treeGuid,
         animate: this.props.animate,
         focusedItemId: this.props.focusedItemId,
@@ -137,19 +153,14 @@ const { sizeMap: v } = u, S = i.createContext(
   }
   renderSubitemsWithAnimation() {
     const e = this.renderSubitemsIfApplicable(), t = this.fieldsSvc.children(this.item).length > 0;
-    return this.props.animate && t ? /* @__PURE__ */ i.createElement(k, { transitionEnterDuration: 200, transitionExitDuration: 200, style: { display: "block" } }, e) : e;
+    return this.props.animate && t ? /* @__PURE__ */ i.createElement(g, { transitionEnterDuration: 200, transitionExitDuration: 200, style: { display: "block" } }, e) : e;
   }
   renderItemInPart() {
     const e = this.props.iconField, t = e && this.item[e];
     return /* @__PURE__ */ i.createElement(
       "span",
       {
-        className: n("k-treeview-leaf", {
-          "k-focus": this.props.focusedItemId === this.itemId,
-          "k-selected": this.fieldsSvc.selected(this.item),
-          "k-disabled": this.disabled,
-          "k-touch-action-none": this.props.draggable
-        }),
+        className: n("k-treeview-leaf"),
         onClick: this.onItemClick,
         onContextMenu: this.onContextMenu
       },
@@ -187,21 +198,21 @@ const { sizeMap: v } = u, S = i.createContext(
   }
   getIconProps() {
     const e = this.fieldsSvc.expanded(this.item);
-    return e && !o(this.item, this.fieldsSvc.getChildrenField()) ? { name: "loading" } : e ? { name: "caret-alt-down", icon: f } : {
-      name: this.props.isRtl ? "caret-alt-left" : "caret-alt-right",
-      icon: this.props.isRtl ? b : g
+    return e && !o(this.item, this.fieldsSvc.getChildrenField()) ? { name: "loading" } : e ? { name: "chevron-down", icon: f } : {
+      name: this.props.isRtl ? "chevron-left" : "chevron-right",
+      icon: this.props.isRtl ? b : k
     };
   }
 };
-h.defaultProps = {
+a.defaultProps = {
   position: "top",
   iconField: "svgIcon"
 };
-let a = h;
-const c = I(
+let h = a;
+const c = l(
   i.forwardRef((r, e) => {
     const s = i.useContext(S).call(void 0, r);
-    return /* @__PURE__ */ i.createElement(a, { ref: e, ...s });
+    return /* @__PURE__ */ i.createElement(h, { ref: e, ...s });
   })
 );
 c.displayName = "TreeViewItem";

package/TreeViewOperationDescriptors.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The descriptors of the data operations which are applied to the TreeView component.
+ */
+export interface TreeViewOperationDescriptors {
+    /**
+     * The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
+     */
+    expand?: string[] | TreeViewOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
+     */
+    select?: string[] | TreeViewOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
+     */
+    check?: string[] | TreeViewCheckDescriptor;
+    /**
+     * When the operations are applied, the corresponding items and their parents are cloned.
+     * For performance reasons, TreeView items are cloned only once.
+     * The name of the field which provides a Boolean representation of whether an item is already cloned.
+     * Defaults to `cloned`.
+     */
+    cloneField?: string;
+    /**
+     * The expand field of the item.
+     */
+    expandField?: string;
+    /**
+     * The select field of the item.
+     */
+    selectField?: string;
+    /**
+     * The check field of the item.
+     */
+    checkField?: string;
+    /**
+     * The children field of the item.
+     */
+    childrenField?: string;
+}
+/**
+ * The descriptor which is used for expanding, selecting, and checking.
+ */
+export interface TreeViewOperationDescriptor {
+    /**
+     * The IDs of the items to which the operation will be applied. By default, the TreeView applies the hierarchical indices of the items. These indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
+     */
+    ids?: any[];
+    /**
+     * The name of the field which will provide a Boolean representation for the operation state of the item.
+     *
+     * The default fields are:
+     * * `expanded`—Indicates that an item is expanded.
+     * * `selected`—Indicates that an item is selected.
+     * * `checked`—Indicates that an item is checked.
+     */
+    operationField?: string;
+    /**
+     * The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
+     */
+    idField?: string;
+}
+/**
+ * The descriptor which is used for checking.
+ */
+export interface TreeViewCheckDescriptor extends TreeViewOperationDescriptor {
+    /**
+     * Determines if a parent item will have an indeterminate state when not all its children are checked.
+     */
+    applyCheckIndeterminate?: boolean;
+    /**
+     * The name of the field which will provide a Boolean representation for the indeterminate state of a parent item.
+     * Defaults to `checkIndeterminate`.
+     */
+    checkIndeterminateField?: string;
+}