@syncfusion/ej2-navigations 34.1.30 → 34.2.2

package/dist/es6/ej2-navigations.es2015.js

@@ -4,6 +4,7 @@ import { getScrollableParent, Popup, getZindexPartial, fit, isCollide, calculate
 import { Button, createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Input } from '@syncfusion/ej2-inputs';
+import { Skeleton } from '@syncfusion/ej2-notifications';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -10563,6 +10564,9 @@ const CHILD = 'e-has-child';
 const ITEM_ANIMATION_ACTIVE = 'e-animation-active';
 const DISABLED$1 = 'e-disabled';
 const PREVENTSELECT = 'e-prevent';
+const VIRTUALIZATION = 'e-virtualization';
+const VIRTUAL_MASK_PARENT = 'e-mask-parent';
+const VIRTUAL_MASK_ITEM = 'e-mask-item';
 const treeAriaAttr = {
     treeRole: 'group',
     itemRole: 'treeitem',
@@ -10686,6 +10690,55 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.isDropIn = false;
         this.OldCheckedData = [];
         this.isHiddenItem = false;
+        // ── Virtualization state ──────────────────────────────────────────────────────────────
+        /** Flat ordered list of all currently-visible (non-collapsed) tree nodes. */
+        this.virtualFlatNodes = [];
+        /** Maps node id → index in virtualFlatNodes for O(1) lookups. */
+        this.virtualNodeMap = new Map();
+        /** Set of expanded node IDs for O(1) lookup performance during flattening (avoids array indexOf). */
+        this.virtualExpandedNodesSet = new Set();
+        /** Set of checked node IDs for O(1) lookup performance during flattening. */
+        this.virtualCheckedNodesSet = new Set();
+        /** Set of indeterminate node IDs — persists across flattenVisibleNodes() rebuilds. */
+        this.virtualIndeterminateNodesSet = new Set();
+        /** Set of selected node IDs for O(1) lookup performance during flattening. */
+        this.virtualSelectedNodesSet = new Set();
+        /** Row height in pixels, measured from the first rendered item or set to 40 as a default. */
+        this.virtualItemHeight = 40;
+        /** Height of the scrollable container in pixels. */
+        this.virtualViewportHeight = 0;
+        /** scrollTop captured during the previous scroll handler invocation. */
+        this.virtualPrevScrollTop = 0;
+        /** Index of the first rendered row in the current window. */
+        this.virtualStartIndex = 0;
+        /** Index one past the last rendered row in the current window. */
+        this.virtualEndIndex = 0;
+        /** Extra rows rendered above and below the visible window to smooth scrolling. */
+        this.virtualOverscanCount = 3;
+        /** RequestAnimationFrame handle used for throttling scroll events. */
+        this.virtualScrollRAF = null;
+        /** The `.e-mask-parent` overlay element shown during fast scroll. */
+        this.virtualMaskElement = null;
+        /** Bound scroll handler stored for later removeEventListener. */
+        this.virtualScrollBound = null;
+        /** Skeleton component instances inside the mask overlay. */
+        this.skeletonInstances = [];
+        /** Set to true whenever the flat node list must be rebuilt on next render. */
+        this.virtualTreeDirty = false;
+        /** The data-uid of the currently keyboard-focused node in virtual mode (persists across re-renders). */
+        this.virtualFocusedId = null;
+        /**
+         * Set to true by the document-level `keydown` handler when the user presses
+         * the Tab key.  The browser will auto-scroll the focused element into view
+         * immediately after focus, which fires a `scroll` event on the TreeView
+         * container.  We want to skip the re-render that the virtual scroll handler
+         * would otherwise trigger, because the element being focused is already
+         * rendered (it is the single `<li tabindex="0">` of the current window) and
+         * re-rendering would tear down the DOM element that is currently holding
+         * focus.  The flag is consumed (reset to `false`) inside `onVirtualScroll`
+         * after the auto-scroll has been handled.
+         */
+        this.virtualSkipNextScrollRender = false;
     }
     /**
      * Get component name.
@@ -10981,6 +11034,24 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     renderItems(isSorted) {
+        // In virtual mode (with a fixed height) create only the container <ul> —
+        // initVirtualization will populate the items directly, avoiding the O(n)
+        // ListBase.createList cost.
+        // updateCheckedStateFromDS / updateParentCheckState are intentionally skipped here:
+        // they call getCheckedNodeDetails which traverses the DOM (no DOM exists yet in
+        // virtual mode) and would throw on empty recursion results. The initial checked
+        // state is derived from the raw data inside flattenNodeRecursive instead.
+        //
+        // When enableVirtualization is true but height is NOT provided, we fall through
+        // to the normal (non-virtualized) rendering path so the tree is still visible.
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.ulElement = this.createElement('ul', {
+                className: PARENTITEM + ' ' + 'e-ul',
+                attrs: { role: 'group' }
+            });
+            this.element.appendChild(this.ulElement);
+            return;
+        }
         this.listBaseOption.ariaAttributes.level = 1;
         const sortedData = this.getSortedData(this.rootData);
         this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : sortedData, this.listBaseOption);
@@ -12016,7 +12087,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         else if (state === 'indeterminate' && this.autoCheck) {
             frameSpan.classList.remove(CHECK);
             frameSpan.classList.add(INDETERMINATE);
-            this.removeCheck(currLi);
+            this.removeCheck(currLi, true);
             ariaState = 'mixed';
         }
         ariaState = state === 'check' ? 'true' : state === 'uncheck' ? 'false' : ariaState;
@@ -12047,12 +12118,110 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (!isNullOrUndefined(id) && this.checkedNodes.indexOf(id) === -1) {
             this.checkDisabledState(id);
         }
+        if (this.enableVirtualization) {
+            // Clear any indeterminate state — node is now fully checked
+            this.virtualIndeterminateNodesSet.delete(id);
+            const actualIndex = this.virtualNodeMap.get(id);
+            if (!isNullOrUndefined(actualIndex) && actualIndex > -1) {
+                this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].isChecked = true;
+                if (this.autoCheck && this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].hasChildren) {
+                    this.setVirtualChildCheckState(id, true);
+                }
+            }
+        }
     }
-    removeCheck(liEle) {
-        const index = this.checkedNodes.indexOf(liEle.getAttribute('data-uid'));
+    removeCheck(liEle, isIndeterminate) {
+        const id = liEle.getAttribute('data-uid');
+        const index = this.checkedNodes.indexOf(id);
         if (index > -1) {
             this.checkedNodes.splice(index, 1);
         }
+        if (this.enableVirtualization) {
+            const actualIndex = this.virtualNodeMap.get(id);
+            if (!isNullOrUndefined(actualIndex) && actualIndex > -1) {
+                if (isIndeterminate) {
+                    // Parent is transitioning to indeterminate — preserve children states
+                    // and mark this node as 'indeterminate' so scroll/collapse re-renders correctly.
+                    this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].isChecked = 'indeterminate';
+                    // Also record it in the persistent indeterminate set so flattenVisibleNodes()
+                    // can restore this state after a full rebuild (e.g. on collapse).
+                    this.virtualIndeterminateNodesSet.add(id);
+                }
+                else {
+                    // Node is being fully unchecked — clear indeterminate tracking too
+                    this.virtualIndeterminateNodesSet.delete(id);
+                    this.virtualCheckedNodesSet.delete(id);
+                    this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].isChecked = false;
+                    this.treeData[parseInt(id.toString(), 10) - 1].isChecked = false;
+                    if (this.autoCheck && this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].hasChildren) {
+                        this.setVirtualChildCheckState(id, false);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Recursively sets the `isChecked` state of all descendants of the node with
+     * `parentId` in `virtualFlatNodes`, keeping `checkedNodes` and
+     * `virtualCheckedNodesSet` in sync.  Used in virtual mode to honor the
+     * `autoCheck` cascade when a parent checkbox is toggled.
+     *
+     * @param {string} parentId - The `data-uid` of the parent whose descendants should be updated.
+     * @param {boolean} isChecked - The new state to apply to every descendant.
+     * @returns {void}
+     * @private
+     */
+    setVirtualChildCheckState(parentId, isChecked) {
+        if (!this.virtualFlatNodes || this.virtualFlatNodes.length === 0) {
+            return;
+        }
+        for (let i = 0; i < this.virtualFlatNodes.length; i++) {
+            const node = this.virtualFlatNodes[parseInt(i.toString(), 10)];
+            if (node.parentId === parentId) {
+                node.isChecked = isChecked;
+                if (isChecked) {
+                    this.virtualCheckedNodesSet.add(node.id);
+                    if (this.checkedNodes && this.checkedNodes.indexOf(node.id) === -1) {
+                        this.checkedNodes.push(node.id);
+                    }
+                }
+                else {
+                    this.virtualCheckedNodesSet.delete(node.id);
+                    const idx = this.checkedNodes ? this.checkedNodes.indexOf(node.id) : -1;
+                    if (idx !== -1) {
+                        this.checkedNodes.splice(idx, 1);
+                    }
+                }
+                if (node.hasChildren) {
+                    this.setVirtualChildCheckState(node.id, isChecked);
+                }
+            }
+        }
+        // Collapsed children are not present in virtualFlatNodes, so walk the raw data
+        // to keep this.treeData and checkedNodes in sync for hidden descendants too.
+        const collapsedChildren = this.getChildNodes(this.treeData, parentId);
+        if (collapsedChildren) {
+            for (let i = 0; i < collapsedChildren.length; i++) {
+                const childId = collapsedChildren[parseInt(i.toString(), 10)][this.fields.id]
+                    ? collapsedChildren[parseInt(i.toString(), 10)][this.fields.id].toString()
+                    : null;
+                if (childId && (!this.virtualNodeMap || !this.virtualNodeMap.has(childId))) {
+                    this.updateField(this.treeData, this.fields, childId, this.fields.isChecked, isChecked);
+                    if (isChecked) {
+                        if (this.checkedNodes && this.checkedNodes.indexOf(childId) === -1) {
+                            this.checkedNodes.push(childId);
+                        }
+                    }
+                    else {
+                        const idx = this.checkedNodes ? this.checkedNodes.indexOf(childId) : -1;
+                        if (idx !== -1) {
+                            this.checkedNodes.splice(idx, 1);
+                        }
+                    }
+                    this.setVirtualChildCheckState(childId, isChecked);
+                }
+            }
+        }
     }
     getCheckEvent(currLi, action, e) {
         this.checkActionNodes.push(this.getNodeData(currLi));
@@ -12084,6 +12253,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             return;
         }
         const liEle = ulEle ? selectAll('.' + LISTITEM, ulEle) : this.liList;
+        if (!liEle) {
+            return;
+        }
         const length = liEle.length;
         for (let i = 0; i < length; i++) {
             this.calculateWrap(liEle[parseInt(i.toString(), 10)]);
@@ -12170,6 +12342,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         this.isLoaded = true;
         this.isNodeDropped = false;
+        // Initialise (or re-initialise) virtual mode after data binding has settled
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.initVirtualization();
+        }
     }
     doSelectionAction() {
         const sNodes = selectAll('.' + SELECTED$1, this.element);
@@ -12303,7 +12479,17 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         };
         this.trigger('nodeClicked', eventArgs);
     }
-    expandNode(currLi, icon, loaded) {
+    expandNode(currLi, icon, loaded, isKeyboardNav) {
+        // Virtual mode fast-path: rebuild the flat list and re-render the window.
+        // Only engage when height is also set; without a fixed height the tree falls
+        // back to normal rendering and the standard expand path must be used.
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            const id = currLi ? currLi.getAttribute('data-uid') : null;
+            if (id) {
+                this.handleVirtualExpand(id, isKeyboardNav);
+            }
+            return;
+        }
         this.renderReactTemplates();
         if (icon.classList.contains(LOAD)) {
             this.hideSpinner(icon);
@@ -12410,15 +12596,29 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     removeClass([icon], PROCESS);
                 }
                 else {
-                    this.nodeCollapseAction(currLi, icon, observedArgs);
+                    // Detect if event is keyboard navigation by checking for 'action' property
+                    const isKeyboardNav = e && e.action !== undefined;
+                    this.nodeCollapseAction(currLi, icon, observedArgs, isKeyboardNav);
                 }
             });
         }
         else {
-            this.nodeCollapseAction(currLi, icon, colArgs);
+            // Detect if event is keyboard navigation by checking for 'action' property
+            const isKeyboardNav = e && e.action !== undefined;
+            this.nodeCollapseAction(currLi, icon, colArgs, isKeyboardNav);
         }
     }
-    nodeCollapseAction(currLi, icon, colArgs) {
+    nodeCollapseAction(currLi, icon, colArgs, isKeyboardNav) {
+        // Virtual mode fast-path: rebuild the flat list and re-render the window.
+        // Only engage when height is also set; without a fixed height the tree falls
+        // back to normal rendering and the standard collapse path must be used.
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            const id = currLi ? currLi.getAttribute('data-uid') : null;
+            if (id) {
+                this.handleVirtualCollapse(id, isKeyboardNav);
+            }
+            return;
+        }
         removeClass([icon], COLLAPSIBLE);
         addClass([icon], EXPANDABLE);
         let start = 0;
@@ -12778,7 +12978,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     }
     selectNode(li, e, multiSelect) {
         if (isNullOrUndefined(li) || (!this.allowMultiSelection && this.isActive(li) && !isNullOrUndefined(e))) {
-            if (this.checkOnClick) {
+            const isDropDownTree = this.element.closest('.e-ddt');
+            const handleCheckOnClick = isDropDownTree ? (this.checkOnClick && this.showCheckBox) : this.checkOnClick;
+            if (handleCheckOnClick) {
                 const checkboxElement = select(' .' + CHECKBOXFRAME, li);
                 if (!isNullOrUndefined(checkboxElement) && checkboxElement.classList.contains(CHECK)) {
                     addClass([li], ACTIVE);
@@ -12870,6 +13072,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             li.setAttribute('tabindex', '0');
             EventHandler.add(li, 'blur', this.focusOut, this);
             this.updateIdAttr(focusedNode, li);
+            // Track focused id for virtual mode re-render restoration
+            if (this.enableVirtualization) {
+                this.virtualFocusedId = li.getAttribute('data-uid');
+            }
         }
     }
     addSelect(liEle) {
@@ -12927,6 +13133,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
     }
     expandCollapseAction(currLi, e) {
+        if (this.enableVirtualization && !isNullOrUndefined(this.height) && currLi.classList.contains(EDITING)) {
+            return;
+        }
         const icon = select('div.' + ICON, currLi);
         if (!icon || icon.classList.contains(PROCESS)) {
             return;
@@ -12956,15 +13165,29 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     removeClass([icon], PROCESS);
                 }
                 else {
-                    this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll);
+                    // Detect if event is keyboard navigation by checking for 'action' property
+                    const isKeyboardNav = e && e.action !== undefined;
+                    this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll, isKeyboardNav);
                 }
             });
         }
         else {
-            this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll);
+            // Detect if event is keyboard navigation by checking for 'action' property
+            const isKeyboardNav = e && e.action !== undefined;
+            this.nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll, isKeyboardNav);
+        }
+    }
+    nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll, isKeyboardNav) {
+        // In virtual mode (with a fixed height) the flat <li> never has a child <ul>
+        // in the DOM, so the PARENTITEM check below would always fail and fall into
+        // renderChildNodes(), which corrupts the virtual DOM.
+        // Delegate directly to expandNode() which has the handleVirtualExpand fast-path.
+        // When height is not provided, fall through to normal expand logic below since
+        // the tree is rendered with a full nested DOM structure.
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.expandNode(currLi, icon, undefined, isKeyboardNav);
+            return;
         }
-    }
-    nodeExpandAction(currLi, icon, expandChild, callback, isFromExpandAll) {
         const ul = select('.' + PARENTITEM, currLi);
         if (ul && ul.nodeName === 'UL') {
             this.expandNode(currLi, icon);
@@ -13077,6 +13300,19 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         });
     }
     navigateToFocus(isUp) {
+        // In virtual mode (with a fixed height) the element itself is the scroll
+        // container; use ensureVirtualNodeVisible.  When height is not provided,
+        // the tree uses normal rendering, so fall through to the standard scroll logic.
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            const focusedLi = this.getFocusedNode();
+            if (focusedLi) {
+                const id = focusedLi.getAttribute('data-uid');
+                if (id) {
+                    this.ensureVirtualNodeVisible(id);
+                }
+            }
+            return;
+        }
         const focusNode = this.getFocusedNode().querySelector('.' + TEXTWRAP);
         const pos = focusNode.getBoundingClientRect();
         const parent = this.getScrollParent(this.element);
@@ -13495,6 +13731,46 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         return isNullOrUndefined(fNode) ? (isNullOrUndefined(selectedItem) ? this.element.firstElementChild : selectedItem) : fNode;
     }
     focusNextNode(li, isTowards) {
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            // Determine the id of the node one step in the requested direction
+            const currentId = li ? li.getAttribute('data-uid') : null;
+            let currentIdx = -1;
+            if (!isNullOrUndefined(currentId)) {
+                const idx = this.virtualNodeMap.get(currentId);
+                currentIdx = !isNullOrUndefined(idx) ? idx : -1;
+            }
+            const targetIdx = isTowards ? currentIdx + 1 : currentIdx - 1;
+            if (targetIdx < 0 || targetIdx >= this.virtualFlatNodes.length) {
+                return;
+            }
+            const targetId = this.virtualFlatNodes[parseInt(targetIdx.toString(), 10)].id;
+            // ── Fix 1: set virtualFocusedId BEFORE calling ensureVirtualNodeVisible ──
+            // renderVirtualItems() is called synchronously inside ensureVirtualNodeVisible
+            // when a re-render is needed. If virtualFocusedId is still the old value at
+            // that point, focus restoration falls back to the first item. Setting it here
+            // ensures renderVirtualItems always restores focus to the correct target node.
+            this.virtualFocusedId = targetId;
+            // ── Fix 2: clear focus classes from ALL nested list items, not just top-level ones ──
+            // With hierarchical virtual DOM, the currently focused <li> may be nested inside
+            // a child <ul>. Using ':scope > li' only cleans up direct children and leaves
+            // stale e-focused / e-node-focus classes on nested nodes across re-renders.
+            const allLi = this.element.querySelectorAll('.' + LISTITEM + '.' + FOCUS);
+            for (let k = 0; k < allLi.length; k++) {
+                allLi[parseInt(k.toString(), 10)].classList.remove(FOCUS);
+                allLi[parseInt(k.toString(), 10)].classList.remove(FOCUSED$1);
+                allLi[parseInt(k.toString(), 10)].setAttribute('tabindex', '-1');
+            }
+            // Ensure the target <li> is in the DOM window (may trigger a re-render).
+            // virtualFocusedId is already set above so renderVirtualItems restores focus correctly.
+            this.ensureVirtualNodeVisible(targetId);
+            // Re-query both nodes after the potential re-render so setFocus gets live DOM elements
+            const prevNode = currentId ? this.getElement(currentId) : li;
+            const nextNode = this.getElement(targetId);
+            if (!isNullOrUndefined(nextNode)) {
+                this.setFocus(isNullOrUndefined(prevNode) ? nextNode : prevNode, nextNode);
+            }
+            return;
+        }
         const nextNode = isTowards ? this.getNextNode(li) : this.getPrevNode(li);
         this.setFocus(li, nextNode);
         this.navigateToFocus(!isTowards);
@@ -13564,6 +13840,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             addClass([nextNode], FOCUS);
             addClass([nextNode], FOCUSED$1);
             nextNode.setAttribute('tabindex', '0');
+            if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+                nextNode.focus({ preventScroll: true });
+            }
+            else {
+                nextNode.focus();
+            }
             nextNode.focus();
             EventHandler.add(nextNode, 'blur', this.focusOut, this);
             this.updateIdAttr(preNode, nextNode);
@@ -13582,6 +13864,30 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (!focusedElement) {
             return;
         }
+        // Virtual-mode guard: when the browser moves focus into the TreeView (e.g. via
+        // the Tab key) it always lands on the single `<li tabindex="0">`.  In that
+        // case the element is already the focusable one, FOCUS is already applied
+        // and the only thing left to do is the keyboard focus styling.  Skip the
+        // redundant setAttribute/EventHandler.add work so we never re-render the
+        // virtual window as a side effect of focusing the existing `tabindex="0"`
+        // item.
+        // ── Fix: Use document.activeElement to detect browser-focused node ──
+        // After renderVirtualItems() restores focus, the browser-focused element is
+        // the authoritative source, not getFocusedNode(). If they don't match, it means
+        // renderVirtualItems already correctly set up the element, so we must not
+        // override its setup by calling setFocus again.
+        const actuallyFocusedElement = document.activeElement;
+        const isAlreadyFocusedInVirtualMode = this.enableVirtualization
+            && actuallyFocusedElement === focusedElement
+            && actuallyFocusedElement.getAttribute('tabindex') === '0'
+            && actuallyFocusedElement.classList.contains(FOCUS);
+        if (isAlreadyFocusedInVirtualMode) {
+            if (this.isKeyboardFocus && !actuallyFocusedElement.classList.contains(FOCUSED$1)) {
+                addClass([actuallyFocusedElement], FOCUSED$1);
+            }
+            this.isKeyboardFocus = false;
+            return;
+        }
         if (!this.mouseDownStatus) {
             if (focusedElement.classList.contains('e-disable')) {
                 focusedElement.setAttribute('tabindex', '-1');
@@ -13608,6 +13914,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             removeClass([focusedElement], FOCUS);
             removeClass([focusedElement], FOCUSED$1);
             EventHandler.remove(focusedElement, 'blur', this.focusOut);
+            if (this.enableVirtualization) {
+                this.virtualFocusedId = null;
+            }
         }
     }
     onMouseOver(e) {
@@ -13819,6 +14128,19 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         else {
             txtEle[ListBase.getDomSetter(this.listBaseOption)] = ListBase.getSanitizedText(newText, this.listBaseOption);
         }
+        // ── Virtual mode: sync the flat-node snapshot so re-renders show updated text ──
+        // virtualFlatNodes is rebuilt from this.treeData (via flattenVisibleNodes) only on
+        // expand/collapse/scroll. Between those events the snapshot is the single source of
+        // truth used by createVirtualListItem. setValue() above updates this.editData (which
+        // IS the treeData object reference), but virtualFlatNodes[idx].text still holds the
+        // old value. Update it here so the next renderVirtualItems() call shows the new text.
+        if (this.enableVirtualization) {
+            const id = liEle.getAttribute('data-uid');
+            const idx = this.virtualNodeMap ? this.virtualNodeMap.get(id) : undefined;
+            if (!isNullOrUndefined(idx) && idx > -1) {
+                this.virtualFlatNodes[parseInt(idx.toString(), 10)].text = newText;
+            }
+        }
         if (isInput) {
             removeClass([liEle], EDITING);
             liEle.focus();
@@ -15188,6 +15510,31 @@ let TreeView = TreeView_1 = class TreeView extends Component {
     keyDownHandler(e) {
         if (e.key === 'Tab' || e.keyCode === 9) {
             this.isKeyboardFocus = true;
+            // Mark the upcoming scroll event (if any) as Tab-induced so the
+            // virtual scroll handler skips its re-render path.  The browser
+            // calls `Element.scrollIntoView` semantics on focus, which scrolls
+            // a `<li tabindex="0">` in the middle of the tree into view and
+            // therefore fires `scroll` on the container.  Without this guard
+            // the scroll handler would tear down the focused `<li>` and move
+            // focus elsewhere.
+            if (this.enableVirtualization) {
+                this.virtualSkipNextScrollRender = true;
+            }
+        }
+        // ── Fix: Also skip scroll render for arrow key navigation ──────────────────
+        // Arrow Down/Up calls focusNextNode() which calls ensureVirtualNodeVisible()
+        // to scroll the target node into view. Without this guard, the scroll event
+        // would trigger onVirtualScroll() which re-renders the window and resets the
+        // focus that focusNextNode() just set. This manifests as tabindex resetting
+        // to the first item instead of staying on the arrow-navigated target.
+        // Arrow Right/Left (expand/collapse) also calls renderVirtualItems() which
+        // calls li.focus() in branch 2; that can trigger a scroll on an edge node,
+        // so we consume it here to prevent a stale RAF re-render.
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.keyCode === 40 || e.keyCode === 38
+            || e.key === 'ArrowRight' || e.key === 'ArrowLeft' || e.keyCode === 39 || e.keyCode === 37) {
+            if (this.enableVirtualization) {
+                this.virtualSkipNextScrollRender = true;
+            }
         }
     }
     preventContextMenu(e) {
@@ -15541,6 +15888,18 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.dataType === 1) {
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
+        // In virtual mode (with a fixed height), rebuild the flat node list and re-render
+        // after deletion so the removed nodes are correctly reflected in the hierarchical
+        // virtual DOM. When height is not provided, the tree uses normal rendering and
+        // the DOM is already updated by removeNode() above.
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.virtualFlatNodes = this.flattenVisibleNodes();
+            this.rebuildVirtualNodeMap();
+            const win = this.getVirtualWindow();
+            this.virtualStartIndex = win.startIndex;
+            this.virtualEndIndex = win.endIndex;
+            this.renderVirtualItems();
+        }
         this.triggerEvent('removeNode', nodeData);
     }
     editSucess(target, newText, prevent) {
@@ -15595,6 +15954,1030 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         return parentsID;
     }
+    // ═══════════════════════════════════════════════════════════════════════════════
+    //  VIRTUALIZATION — private helpers
+    // ═══════════════════════════════════════════════════════════════════════════════
+    /**
+     * Parses the `height` property (string like '400px' or number) to a pixel value.
+     * Returns 0 if the value cannot be determined.
+     *
+     * @returns {number} Pixel height.
+     * @private
+     */
+    parseHeightToPixels() {
+        const h = this.height;
+        if (isNullOrUndefined(h)) {
+            return 0;
+        }
+        if (typeof h === 'number') {
+            return h;
+        }
+        const parsed = parseFloat(h);
+        return isNaN(parsed) ? 0 : parsed;
+    }
+    /**
+     * Measures the height of the first rendered list item so subsequent calculations
+     * use real layout values.  Falls back to the stored `virtualItemHeight` default (40).
+     *
+     * @returns {number} Row height in pixels.
+     * @private
+     */
+    measureVirtualItemHeight() {
+        const firstLi = select('.' + LISTITEM, this.element);
+        if (firstLi && firstLi.offsetHeight > 0) {
+            return firstLi.offsetHeight;
+        }
+        return this.virtualItemHeight;
+    }
+    /**
+     * Rebuilds the cached Sets for checked/selected nodes to enable O(1) lookup
+     * during the flatten operation instead of O(n) array indexOf calls.
+     *
+     * @returns {void}
+     * @private
+     */
+    rebuildVirtualCheckCache() {
+        this.virtualExpandedNodesSet.clear();
+        this.virtualCheckedNodesSet.clear();
+        this.virtualSelectedNodesSet.clear();
+        if (this.expandedNodes && Array.isArray(this.expandedNodes)) {
+            for (let i = 0; i < this.expandedNodes.length; i++) {
+                this.virtualExpandedNodesSet.add(this.expandedNodes[i]);
+            }
+        }
+        if (this.checkedNodes && Array.isArray(this.checkedNodes)) {
+            for (let i = 0; i < this.checkedNodes.length; i++) {
+                this.virtualCheckedNodesSet.add(this.checkedNodes[i]);
+            }
+        }
+        if (this.selectedNodes && Array.isArray(this.selectedNodes)) {
+            for (let i = 0; i < this.selectedNodes.length; i++) {
+                this.virtualSelectedNodesSet.add(this.selectedNodes[i]);
+            }
+        }
+    }
+    /**
+     * Recursively walks the treeData (or groupedData for flat lists) and builds
+     * `virtualFlatNodes` — an ordered list of every node that is currently visible
+     * (i.e. its ancestors are all expanded). Uses cached Sets for O(1) state lookups.
+     *
+     * @returns {VirtualNodeData[]} Ordered flat list of visible nodes.
+     * @private
+     */
+    flattenVisibleNodes() {
+        // Build cached Sets for fast lookups
+        this.rebuildVirtualCheckCache();
+        const result = [];
+        if (this.dataType === 1) {
+            // Flat data with parentID field — use getChildGroup to find root nodes
+            let rootNodes = [];
+            if (this.groupedData) {
+                rootNodes = this.getChildGroup(this.groupedData, null, true);
+            }
+            if (!rootNodes || rootNodes.length === 0) {
+                rootNodes = this.rootData;
+            }
+            // Apply sortOrder to root-level nodes for flat data (same as hierarchical path below)
+            rootNodes = this.getSortedData(rootNodes);
+            this.flattenNodeRecursive(rootNodes, 1, null, result);
+        }
+        else {
+            // Hierarchical data
+            const sorted = this.getSortedData(this.rootData);
+            this.flattenNodeRecursive(sorted, 1, null, result);
+        }
+        return result;
+    }
+    /**
+     * Recursive helper for `flattenVisibleNodes`.
+     *
+     * @param {Object[]} nodes - Array of raw data objects at this level.
+     * @param {number} level - 1-based depth level.
+     * @param {string | null} parentId - The parent node id, or null for root.
+     * @param {VirtualNodeData[]} result - Accumulator array.
+     * @returns {void}
+     * @private
+     */
+    flattenNodeRecursive(nodes, level, parentId, result) {
+        if (!nodes || nodes.length === 0) {
+            return;
+        }
+        // Cache field names and settings outside the loop to avoid repeated conversions
+        const childFieldName = this.fields.child.toString();
+        const expandedFieldName = this.fields.expanded;
+        const isCheckedFieldName = this.fields.isChecked;
+        const iconCssFieldName = this.fields.iconCss;
+        const imageUrlFieldName = this.fields.imageUrl;
+        const idFieldName = this.fields.id;
+        const textFieldName = this.fields.text;
+        const needsSorting = this.sortOrder !== 'None';
+        const isDataTypeFlat = this.dataType === 1;
+        const enableVirtualization = this.enableVirtualization;
+        for (let i = 0; i < nodes.length; i++) {
+            const raw = nodes[i];
+            const id = isNullOrUndefined(raw[idFieldName]) ? '' : raw[idFieldName].toString();
+            const text = isNullOrUndefined(raw[textFieldName]) ? '' : raw[textFieldName].toString();
+            // Use expandedNodes as the single source of truth.
+            const inExpandedNodes = this.virtualExpandedNodesSet.has(id);
+            const rawExpanded = !inExpandedNodes && getValue(expandedFieldName, raw) === true;
+            const isExpanded = inExpandedNodes || rawExpanded;
+            if (rawExpanded && id) {
+                this.expandedNodes.push(id);
+                this.virtualExpandedNodesSet.add(id);
+            }
+            // Inline hasChildRecords check to avoid function call (optimization)
+            let hasChildren = false;
+            if (isDataTypeFlat) {
+                if (this.groupedData) {
+                    const groupedChild = this.getChildGroup(this.groupedData, id, false);
+                    hasChildren = !isNullOrUndefined(groupedChild) && groupedChild.length > 0;
+                }
+            }
+            else {
+                const childrenObj = getValue(childFieldName, raw);
+                hasChildren = !isNullOrUndefined(childrenObj) && Array.isArray(childrenObj) && childrenObj.length > 0;
+            }
+            // Virtual-mode only: honour fields.isChecked === true on initial render
+            if (enableVirtualization && id && isCheckedFieldName && !this.virtualCheckedNodesSet.has(id)) {
+                const rawChecked = getValue(isCheckedFieldName, raw);
+                if (!isNullOrUndefined(rawChecked) && rawChecked.toString() === 'true') {
+                    this.virtualCheckedNodesSet.add(id);
+                    if (this.checkedNodes && this.checkedNodes.indexOf(id) === -1) {
+                        this.checkedNodes.push(id);
+                    }
+                }
+            }
+            // Use cached Sets for O(1) lookup
+            const isSelected = this.virtualSelectedNodesSet.has(id);
+            // Resolve checkbox state: indeterminate takes precedence over the checked set,
+            // because a node can be in the indeterminate state without being in checkedNodes.
+            const isChecked = (enableVirtualization && this.virtualIndeterminateNodesSet.has(id))
+                ? 'indeterminate'
+                : this.virtualCheckedNodesSet.has(id);
+            const isDisabled = false; // TODO: Check if any per-node disabled field exists
+            const iconCssVal = raw[iconCssFieldName];
+            const iconCss = isNullOrUndefined(iconCssVal) ? '' : iconCssVal.toString();
+            const imageUrlVal = raw[imageUrlFieldName];
+            const imageUrl = isNullOrUndefined(imageUrlVal) ? '' : imageUrlVal.toString();
+            const node = {
+                id, text, level, parentId, hasChildren, isExpanded,
+                isSelected, isChecked, isDisabled, iconCss, imageUrl, rawData: raw
+            };
+            result.push(node);
+            if (isExpanded && hasChildren) {
+                // Determine children list
+                let children = [];
+                if (isDataTypeFlat) {
+                    if (this.groupedData) {
+                        children = this.getChildGroup(this.groupedData, id, false);
+                        // Apply sortOrder to flat-data children (same as hierarchical path)
+                        if (needsSorting) {
+                            children = ListBase.getDataSource(children, ListBase.addSorting(this.sortOrder, this.fields.text));
+                        }
+                    }
+                }
+                else {
+                    const rawChildren = getValue(childFieldName, raw);
+                    if (!isNullOrUndefined(rawChildren) && Array.isArray(rawChildren)) {
+                        children = rawChildren;
+                        // Only sort if needed
+                        if (needsSorting) {
+                            children = ListBase.getDataSource(children, ListBase.addSorting(this.sortOrder, this.fields.text));
+                        }
+                    }
+                }
+                this.flattenNodeRecursive(children, level + 1, id, result);
+            }
+        }
+    }
+    /**
+     * Checks whether a raw datasource node has child records.
+     *
+     * @param {Object} raw - Raw datasource object.
+     * @returns {boolean} True if children exist.
+     * @private
+     */
+    hasChildRecords(raw) {
+        if (this.dataType === 1) {
+            if (!this.groupedData) {
+                return false;
+            }
+            const rawId = raw[this.fields.id];
+            if (isNullOrUndefined(rawId)) {
+                return false;
+            }
+            const groupedChild = this.getChildGroup(this.groupedData, rawId.toString(), false);
+            return !isNullOrUndefined(groupedChild) && groupedChild.length > 0;
+        }
+        const childField = this.fields.child.toString();
+        const children = getValue(childField, raw);
+        return !isNullOrUndefined(children) && Array.isArray(children) && children.length > 0;
+    }
+    /**
+     * Rebuilds `virtualNodeMap` (id → index) from the current `virtualFlatNodes`.
+     *
+     * @returns {void}
+     * @private
+     */
+    rebuildVirtualNodeMap() {
+        this.virtualNodeMap.clear();
+        for (let i = 0; i < this.virtualFlatNodes.length; i++) {
+            this.virtualNodeMap.set(this.virtualFlatNodes[parseInt(i.toString(), 10)].id, i);
+        }
+    }
+    getVirtualWindow(scrollTop) {
+        const total = this.virtualFlatNodes.length;
+        if (total === 0) {
+            return { startIndex: 0, endIndex: 0 };
+        }
+        const st = scrollTop !== undefined ? scrollTop : this.element.scrollTop;
+        const itemH = this.virtualItemHeight;
+        const vpH = this.virtualViewportHeight;
+        const rawStart = Math.floor(st / itemH) - this.virtualOverscanCount;
+        const rawEnd = Math.ceil((st + vpH) / itemH) + this.virtualOverscanCount;
+        const startIndex = Math.max(0, rawStart);
+        const endIndex = Math.min(total, rawEnd);
+        return { startIndex, endIndex };
+    }
+    getVirtualWindowAt(scrollTop) {
+        return this.getVirtualWindow(scrollTop);
+    }
+    getVirtualPadding() {
+        const total = this.virtualFlatNodes.length;
+        const itemH = this.virtualItemHeight;
+        const start = this.virtualStartIndex;
+        const end = this.virtualEndIndex;
+        const paddingTop = start * itemH;
+        const paddingBottom = Math.max(0, (total - end) * itemH);
+        return { paddingTop, paddingBottom };
+    }
+    /**
+     * Renders the virtual window into a **nested** `<ul>/<li>` hierarchy identical to
+     * the non-virtualized DOM structure.
+     *
+     * ## Scroll math
+     * The flat-index ↔ pixel mapping stays unchanged: every entry in
+     * `virtualFlatNodes` represents exactly one `itemHeight` row.
+     * `paddingTop = startIndex * itemHeight` and
+     * `paddingBottom = (total - endIndex) * itemHeight` keep the scrollbar
+     * thumb in the correct position.
+     *
+     * ## Ancestor injection
+     * When `startIndex` points at a child node whose ancestor(s) have already
+     * scrolled above the viewport (their flat indices are < startIndex), the
+     * ancestors would normally be missing from the DOM, forcing the children to
+     * fall back to the root `<ul>` as flat siblings — producing wrong HTML.
+     *
+     * To fix this, before rendering the window we walk the ancestor chain of the
+     * first visible node and collect every ancestor that lies **outside** the
+     * window.  Those ancestors are injected as real `<li>` containers at the
+     * very top of the root `<ul>`.  To compensate for their presence, `paddingTop`
+     * is reduced by `injectedCount * itemHeight` so the total scroll height
+     * remains the same.
+     *
+     * Once the ancestors are in the DOM they are registered in `renderedParentMap`
+     * so the normal window-rendering loop can nest children inside them exactly
+     * as it does when both parent and child are in the same window.
+     *
+     * @returns {void}
+     * @private
+     */
+    renderVirtualItems() {
+        if (!this.ulElement) {
+            return;
+        }
+        const ul = this.ulElement;
+        // ── Snapshot focused ID BEFORE clearing the DOM ───────────────────────────
+        // Removing a focused <li> from the DOM triggers a synchronous `blur` event,
+        // which calls focusOut() and sets virtualFocusedId = null.  Capturing the id
+        // here (before any removeChild) ensures focus is correctly restored to the
+        // same node after re-render even when keyboard navigation was in progress.
+        const focusedUid = this.virtualFocusedId || null;
+        // ── Clear previous render (direct children only) ─────────────────────────
+        const existingItems = ul.querySelectorAll(':scope > li');
+        for (let i = existingItems.length - 1; i >= 0; i--) {
+            ul.removeChild(existingItems[parseInt(i.toString(), 10)]);
+        }
+        const renderedParentMap = new Map();
+        const itemH = this.virtualItemHeight;
+        let injectedCount = 0;
+        if (this.virtualStartIndex < this.virtualFlatNodes.length) {
+            const firstNode = this.virtualFlatNodes[this.virtualStartIndex];
+            if (firstNode.parentId) {
+                // Build the ancestor chain from root down to the immediate parent
+                const ancestors = [];
+                let searchId = firstNode.parentId;
+                while (searchId) {
+                    const ancestorIdx = this.virtualNodeMap.get(searchId);
+                    if (!isNullOrUndefined(ancestorIdx) && ancestorIdx < this.virtualStartIndex) {
+                        const ancestor = this.virtualFlatNodes[parseInt(ancestorIdx.toString(), 10)];
+                        ancestors.unshift(ancestor); // prepend so root comes first
+                        searchId = ancestor.parentId;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // Inject each ancestor as a real <li> into the root <ul>
+                // and register it in renderedParentMap for child-nesting below.
+                for (let a = 0; a < ancestors.length; a++) {
+                    const ancestor = ancestors[parseInt(a.toString(), 10)];
+                    const ancestorLi = this.createVirtualListItem(ancestor, false);
+                    // Find the correct container: root or a previously injected ancestor's <ul>
+                    let targetUl = ul;
+                    if (ancestor.parentId && renderedParentMap.has(ancestor.parentId)) {
+                        const pe = renderedParentMap.get(ancestor.parentId);
+                        if (!pe.childUl) {
+                            pe.childUl = this.createElement('ul', {
+                                className: PARENTITEM + ' e-ul',
+                                attrs: { role: 'group' }
+                            });
+                            pe.li.appendChild(pe.childUl);
+                        }
+                        targetUl = pe.childUl;
+                    }
+                    targetUl.appendChild(ancestorLi);
+                    renderedParentMap.set(ancestor.id, { li: ancestorLi, childUl: null });
+                    injectedCount++;
+                }
+            }
+        }
+        // ── Scroll-space padding (adjusted for injected ancestors) ────────────────
+        const total = this.virtualFlatNodes.length;
+        const start = this.virtualStartIndex;
+        const end = this.virtualEndIndex;
+        const rawPaddingTop = start * itemH;
+        // Subtract the height of injected ancestors so the scroll position is
+        // exact: those ancestor rows are now real DOM elements, not hidden space.
+        const adjustedPaddingTop = Math.max(0, rawPaddingTop - injectedCount * itemH);
+        ul.style.paddingTop = adjustedPaddingTop + 'px';
+        ul.style.paddingBottom = Math.max(0, (total - end) * itemH) + 'px';
+        // ── Render window items (nested via renderedParentMap) ────────────────────
+        const liListBuf = [];
+        for (let i = start; i < end; i++) {
+            const node = this.virtualFlatNodes[parseInt(i.toString(), 10)];
+            const li = this.createVirtualListItem(node, i === start);
+            // Find the correct parent container
+            let targetUl = ul;
+            if (node.parentId && renderedParentMap.has(node.parentId)) {
+                const parentEntry = renderedParentMap.get(node.parentId);
+                // Lazily create the child <ul> the first time a child needs it
+                if (!parentEntry.childUl) {
+                    parentEntry.childUl = this.createElement('ul', {
+                        className: PARENTITEM + ' e-ul',
+                        attrs: { role: 'group' }
+                    });
+                    parentEntry.li.appendChild(parentEntry.childUl);
+                }
+                targetUl = parentEntry.childUl;
+            }
+            targetUl.appendChild(li);
+            liListBuf.push(li);
+            // Register this node so its children in the same window can nest under it
+            if (node.isExpanded && node.hasChildren) {
+                renderedParentMap.set(node.id, { li, childUl: null });
+            }
+        }
+        // ── Restore focus / tabindex ──────────────────────────────────────────────
+        // In virtual mode only the li that carries the 'e-active' class should be
+        // focusable (tabindex='0'). All other rendered li elements must be set
+        // to tabindex='-1' so the tab order remains unambiguous as the window
+        // changes during scrolling.
+        let focusRestored = false;
+        // 1. Prefer the currently active node if it is in the rendered window.
+        for (let k = 0; k < liListBuf.length; k++) {
+            const li = liListBuf[parseInt(k.toString(), 10)];
+            if (li.classList.contains(ACTIVE)) {
+                li.setAttribute('tabindex', '0');
+                // ── Fix: ensure FOCUS class set on active node too ──
+                // This ensures focusIn() guard condition is met: tabindex='0' && FOCUS class
+                addClass([li], FOCUS);
+                focusRestored = true;
+                break;
+            }
+        }
+        // 2. Otherwise fall back to the previously focused node (if it is in window).
+        if (!focusRestored && focusedUid) {
+            for (let k = 0; k < liListBuf.length; k++) {
+                const li = liListBuf[parseInt(k.toString(), 10)];
+                if (li.getAttribute('data-uid') === focusedUid) {
+                    li.setAttribute('tabindex', '0');
+                    addClass([li], FOCUS);
+                    addClass([li], FOCUSED$1);
+                    // ── Fix: restore actual browser focus so keyboard events keep working ──
+                    // After renderVirtualItems() replaces all <li> elements the old element
+                    // is gone from the DOM and document.activeElement falls back to
+                    // document.body.  Setting tabindex + classes is not enough — the new
+                    // element also needs a programmatic .focus() call so subsequent keyboard
+                    // events (Arrow keys, Home, End, etc.) are delivered to the TreeView.
+                    // Re-attach the blur→focusOut handler so virtualFocusedId is cleared
+                    // correctly when the user tabs away.
+                    // ── Use preventScroll:true ────────────────────────────────────────────
+                    // Without preventScroll the browser scrolls the container to bring this
+                    // node into view during the re-render, changing scrollTop AFTER the
+                    // correct paddingTop has been applied. This is the root cause of the
+                    // KBN expand position-jump bug: the render is correct but the browser
+                    // silently scrolls the viewport, making the parent node appear to jump.
+                    // ensureVirtualNodeVisible() handles any legitimate scroll-into-view
+                    // needs before renderVirtualItems() is called, so scroll here is wrong.
+                    EventHandler.add(li, 'blur', this.focusOut, this);
+                    li.focus({ preventScroll: true });
+                    focusRestored = true;
+                    break;
+                }
+            }
+        }
+        // 3. Finally default to the first item in the window.
+        if (!focusRestored && liListBuf.length > 0) {
+            const firstLi = liListBuf[0];
+            firstLi.setAttribute('tabindex', '0');
+        }
+        // ── Fix: Ensure all other rendered nodes have tabindex="-1" ──
+        // This prevents stale tabindex="0" on multiple nodes which breaks Tab order
+        for (let k = 0; k < liListBuf.length; k++) {
+            const li = liListBuf[parseInt(k.toString(), 10)];
+            if (li.getAttribute('tabindex') !== '0') {
+                li.setAttribute('tabindex', '-1');
+            }
+        }
+        // Keep liList in sync so keyboard-navigation helpers stay functional.
+        this.liList = liListBuf;
+    }
+    /**
+     * Creates a single `<li>` element for the virtual window representing `node`.
+     *
+     * @param {VirtualNodeData} node - The node data.
+     * @param {boolean} _isFirst - True if this is the first rendered item (unused here but kept for potential override).
+     * @returns {HTMLElement} The constructed `<li>` element.
+     * @private
+     */
+    createVirtualListItem(node, _isFirst) {
+        const li = this.createElement('li', { className: LISTITEM });
+        // Level class for CSS indentation
+        li.classList.add('e-level-' + node.level);
+        li.setAttribute('data-uid', node.id);
+        li.setAttribute('aria-level', node.level.toString());
+        li.setAttribute('role', 'treeitem');
+        li.setAttribute('tabindex', '-1');
+        // Full-row overlay (required for fullRowSelect mode)
+        if (this.fullRowSelect) {
+            const fullRow = this.createElement('div', { className: FULLROW });
+            li.appendChild(fullRow);
+        }
+        // Text/icon wrapper
+        const textWrap = this.createElement('div', { className: TEXTWRAP });
+        // Expand/collapse icon
+        if (node.hasChildren) {
+            const iconSpan = this.createElement('div', {
+                className: ICON + ' ' + (node.isExpanded ? COLLAPSIBLE : EXPANDABLE)
+            });
+            textWrap.appendChild(iconSpan);
+        }
+        // Checkbox
+        if (this.showCheckBox) {
+            const checkWrap = createCheckBox(this.createElement, false, {
+                checked: node.isChecked === true,
+                cssClass: CHECKBOXWRAP
+            });
+            if (node.isChecked === 'indeterminate') {
+                const frame = checkWrap.querySelector('.' + CHECKBOXFRAME);
+                if (frame) {
+                    frame.classList.add(INDETERMINATE);
+                }
+            }
+            textWrap.appendChild(checkWrap);
+        }
+        // Icon
+        if (node.iconCss) {
+            const iconEl = this.createElement('span', {
+                className: ICON + ' ' + node.iconCss
+            });
+            textWrap.appendChild(iconEl);
+        }
+        // Image
+        if (node.imageUrl) {
+            const img = document.createElement('img');
+            img.src = node.imageUrl;
+            img.classList.add(IMAGE);
+            textWrap.appendChild(img);
+        }
+        // Text anchor
+        const anchor = this.createElement('span', {
+            className: 'e-list-text',
+            innerHTML: node.text
+        });
+        textWrap.appendChild(anchor);
+        li.appendChild(textWrap);
+        // State classes
+        if (node.isExpanded) {
+            li.classList.add(EXPANDED);
+            li.setAttribute('aria-expanded', 'true');
+        }
+        else if (node.hasChildren) {
+            li.classList.add(NODECOLLAPSED);
+            li.setAttribute('aria-expanded', 'false');
+        }
+        if (node.isSelected) {
+            li.classList.add(ACTIVE);
+            li.setAttribute('aria-selected', 'true');
+        }
+        if (node.isDisabled) {
+            li.classList.add(DISABLED$1);
+            li.setAttribute('aria-disabled', 'true');
+        }
+        if (node.hasChildren) {
+            li.classList.add(CHILD);
+        }
+        // Wire the focus event so `focusIn()` fires when the user Tabs into this
+        // item.  The non-virtualized path registers this in `beforeNodeCreate()`,
+        // but virtual items never go through that callback, so we must register
+        // it here to keep focus styling (e.g. `e-focused`) consistent between
+        // virtual and non-virtual modes.  `unWireEvents()` already removes this
+        // handler during teardown by iterating over the rendered `<li>`s.
+        EventHandler.add(li, 'focus', this.focusIn, this);
+        return li;
+    }
+    /**
+     * Initialises the virtual-scrolling layout:
+     * 1. Adds the `e-virtualization` CSS class and applies a fixed `height` + `overflow-y`.
+     * 2. Flattens all visible nodes into `virtualFlatNodes`.
+     * 3. Measures item height and viewport height.
+     * 4. Computes the initial window and renders it.
+     * 5. Wires the scroll event handler.
+     *
+     * @returns {void}
+     * @private
+     */
+    initVirtualization() {
+        addClass([this.element], VIRTUALIZATION);
+        // Apply container height
+        const px = this.parseHeightToPixels();
+        if (px > 0) {
+            this.element.style.height = px + 'px';
+            this.element.style.overflowY = 'auto';
+        }
+        // Ensure the inner UL is ready
+        if (!this.ulElement) {
+            this.ulElement = select('.' + PARENTITEM, this.element);
+        }
+        if (!this.ulElement) {
+            return;
+        }
+        // Make the UL position-relative for the absolute spacers
+        this.ulElement.style.position = 'relative';
+        // Rebuild flat list
+        this.virtualFlatNodes = this.flattenVisibleNodes();
+        this.rebuildVirtualNodeMap();
+        // Measure dimensions
+        this.virtualViewportHeight = px > 0 ? px : this.element.offsetHeight;
+        // Render a single probe item to measure the real item height before the full render
+        if (this.virtualFlatNodes.length > 0) {
+            const probe = this.createVirtualListItem(this.virtualFlatNodes[0], true);
+            this.ulElement.appendChild(probe);
+            this.virtualItemHeight = probe.offsetHeight > 0 ? probe.offsetHeight : this.virtualItemHeight;
+            this.ulElement.removeChild(probe);
+        }
+        // Compute window and render all items in the initial viewport
+        const win = this.getVirtualWindow();
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        this.renderVirtualItems();
+        // Wire scroll
+        this.wireVirtualScrollEvents();
+    }
+    /**
+     * Wires the scroll event listener on the TreeView element.
+     *
+     * @returns {void}
+     * @private
+     */
+    wireVirtualScrollEvents() {
+        this.unwireVirtualScrollEvents();
+        this.virtualScrollBound = this.onVirtualScroll.bind(this);
+        this.element.addEventListener('scroll', this.virtualScrollBound, { passive: true });
+    }
+    /**
+     * Removes the scroll event listener previously wired by `wireVirtualScrollEvents`.
+     *
+     * @returns {void}
+     * @private
+     */
+    unwireVirtualScrollEvents() {
+        if (this.virtualScrollBound) {
+            this.element.removeEventListener('scroll', this.virtualScrollBound);
+            this.virtualScrollBound = null;
+        }
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+            this.virtualScrollRAF = null;
+        }
+    }
+    /**
+     * Scroll handler for the virtual TreeView.  Throttled via `requestAnimationFrame`.
+     * Shows the loading mask during fast scrolls, re-renders the window, then hides the mask.
+     *
+     * @returns {void}
+     * @private
+     */
+    onVirtualScroll() {
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+        }
+        // ── Tab-induced focus guard ────────────────────────────────────────────────
+        // When the user Tabs into a `<li tabindex="0">` that is in the middle of
+        // the treeview, the browser auto-scrolls the container so the focused
+        // element becomes visible.  That fires a `scroll` event here, but the
+        // virtual window already contains the focused element — re-rendering
+        // would destroy the focused `<li>` and break focus.  Detect this case
+        // via the flag set in `keyDownHandler` and skip the re-render entirely.
+        if (this.virtualSkipNextScrollRender) {
+            this.virtualSkipNextScrollRender = false;
+            // Update prev scrollTop so a subsequent user-driven scroll still
+            // calculates the correct delta.
+            this.virtualPrevScrollTop = this.element.scrollTop;
+            return;
+        }
+        const currentScrollTop = this.element.scrollTop;
+        const delta = Math.abs(currentScrollTop - this.virtualPrevScrollTop);
+        const fastScrollThreshold = this.virtualViewportHeight * 2;
+        if (delta > fastScrollThreshold) {
+            this.showVirtualMask(currentScrollTop);
+        }
+        this.virtualScrollRAF = requestAnimationFrame(() => {
+            this.virtualScrollRAF = null;
+            this.virtualPrevScrollTop = this.element.scrollTop;
+            const win = this.getVirtualWindow();
+            this.virtualStartIndex = win.startIndex;
+            this.virtualEndIndex = win.endIndex;
+            this.renderVirtualItems();
+            // Hide the skeleton mask after a short delay so it stays visible long enough
+            // for the user to perceive the loading indicator even on short scrolls.
+            setTimeout(() => {
+                this.hideVirtualMask();
+                // Keep the (now hidden) mask's coords fresh for the next show.
+                this.updateMaskPosition();
+            }, 200);
+        });
+    }
+    /**
+     * Creates the skeleton mask overlay used to indicate loading during fast scrolls.
+     * Skeleton instances are stored in `skeletonInstances` for later disposal.
+     *
+     * @returns {void}
+     * @private
+     */
+    createVirtualMask() {
+        if (this.virtualMaskElement) {
+            return;
+        }
+        // Use position:fixed so the mask is anchored to the visible viewport (not to the
+        // scrolling container). Width/height/left/top are set/refreshed by
+        // updateMaskPosition() so the mask always covers the TreeView's visible area
+        // regardless of how the page itself is scrolled.
+        const rect = this.element.getBoundingClientRect();
+        const scrollBarWidth = this.element.offsetWidth - this.element.clientWidth;
+        const maskParent = this.createElement('div', {
+            className: VIRTUAL_MASK_PARENT,
+            styles: `position:fixed;top:${rect.top}px;left:${rect.left}px;width:${rect.width - scrollBarWidth}px;height:${rect.height}px;z-index:10;overflow:hidden;background:#fff;pointer-events:none;display:none;`
+        });
+        const visibleRows = Math.ceil(this.virtualViewportHeight / this.virtualItemHeight) + 1;
+        for (let r = 0; r < visibleRows; r++) {
+            const maskItem = this.createElement('div', {
+                className: VIRTUAL_MASK_ITEM,
+                styles: `display:flex;align-items:center;height:${this.virtualItemHeight}px;padding:0 12px;gap:8px;`
+            });
+            // Skeleton circle for icon placeholder
+            // const iconHolder: HTMLElement = this.createElement('span', {
+            //     styles: `width:20px;height:20px;`
+            // });
+            // maskItem.appendChild(iconHolder);
+            // const iconSkel: Skeleton = new Skeleton({
+            //     shape: 'Circle',
+            //     width: '20px',
+            //     height: '20px',
+            //     cssClass: 'e-virtual-skel-icon'
+            // });
+            // iconSkel.appendTo(iconHolder);
+            // this.skeletonInstances.push(iconSkel);
+            // Skeleton text bar
+            const textHolder = this.createElement('span');
+            textHolder.style.flex = '1';
+            textHolder.style.height = '14px';
+            maskItem.appendChild(textHolder);
+            const textSkel = new Skeleton({
+                shape: 'Text',
+                width: '80%',
+                height: '14px',
+                cssClass: 'e-virtual-skel-text'
+            });
+            textSkel.appendTo(textHolder);
+            this.skeletonInstances.push(textSkel);
+            maskParent.appendChild(maskItem);
+        }
+        this.virtualMaskElement = maskParent;
+        this.element.appendChild(maskParent);
+    }
+    /**
+     * Refreshes the mask position so it always overlays the TreeView's viewport.
+     * Called on every show / scroll, since `position:fixed` is relative to the
+     * page viewport, not to the TreeView scroll container.
+     *
+     * @returns {void}
+     * @private
+     */
+    updateMaskPosition() {
+        if (!this.virtualMaskElement) {
+            return;
+        }
+        const rect = this.element.getBoundingClientRect();
+        const scrollBarWidth = this.element.offsetWidth - this.element.clientWidth;
+        this.virtualMaskElement.style.top = rect.top + 'px';
+        this.virtualMaskElement.style.left = rect.left + 'px';
+        this.virtualMaskElement.style.width = (rect.width - scrollBarWidth) + 'px';
+        this.virtualMaskElement.style.height = rect.height + 'px';
+    }
+    /**
+     * Destroys all skeleton instances and removes the mask overlay from the DOM.
+     *
+     * @returns {void}
+     * @private
+     */
+    destroyVirtualMask() {
+        for (let i = this.skeletonInstances.length - 1; i >= 0; i--) {
+            this.skeletonInstances[parseInt(i.toString(), 10)].destroy();
+        }
+        this.skeletonInstances = [];
+        if (this.virtualMaskElement) {
+            if (this.virtualMaskElement.parentElement) {
+                this.virtualMaskElement.parentElement.removeChild(this.virtualMaskElement);
+            }
+            this.virtualMaskElement = null;
+        }
+    }
+    /**
+     * Positions and shows the skeleton mask at the current `scrollTop` position.
+     *
+     * @param {number} _scrollTop - Current scrollTop of the container.
+     * @returns {void}
+     * @private
+     */
+    showVirtualMask(_scrollTop) {
+        if (!this.virtualMaskElement) {
+            this.createVirtualMask();
+        }
+        if (this.virtualMaskElement) {
+            // Refresh the fixed-position coords in case the TreeView was moved/resized
+            // since the last time the mask was shown.
+            this.updateMaskPosition();
+            this.virtualMaskElement.style.display = 'block';
+            // Visually hide the real list while the skeleton is shown
+            if (this.ulElement) {
+                this.ulElement.style.visibility = 'hidden';
+            }
+        }
+    }
+    /**
+     * Hides the skeleton mask overlay after the virtual window has been rendered.
+     *
+     * @returns {void}
+     * @private
+     */
+    hideVirtualMask() {
+        if (this.virtualMaskElement) {
+            this.virtualMaskElement.style.display = 'none';
+            // Restore real list visibility
+            if (this.ulElement) {
+                this.ulElement.style.visibility = '';
+            }
+        }
+    }
+    /**
+     * Ensures the node identified by `id` is scrolled into view inside the virtual container.
+     * If the node falls outside the rendered window, the container's `scrollTop` is adjusted so
+     * that the node becomes visible, the window is re-computed and `renderVirtualItems` is called.
+     *
+     * @param {string} id - The `data-uid` of the target node.
+     * @returns {void}
+     * @private
+     */
+    ensureVirtualNodeVisible(id) {
+        const idx = this.virtualNodeMap.get(id);
+        if (isNullOrUndefined(idx)) {
+            return;
+        }
+        const itemH = this.virtualItemHeight;
+        const vpH = this.virtualViewportHeight;
+        const nodeTop = idx * itemH;
+        const nodeBottom = nodeTop + itemH;
+        const currentTop = this.element.scrollTop;
+        const currentBottom = currentTop + vpH;
+        if (nodeTop < currentTop) {
+            this.element.scrollTop = nodeTop;
+        }
+        else if (nodeBottom > currentBottom) {
+            this.element.scrollTop = nodeBottom - vpH;
+        }
+        else {
+            return; // already visible, no re-render needed
+        }
+        // Re-render the new window synchronously so the <li> is in the DOM
+        const win = this.getVirtualWindow();
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        this.renderVirtualItems();
+    }
+    handleVirtualExpand(id, isKeyboardNav) {
+        // ── Cancel any pending scroll RAF ─────────────────────────────────────────
+        // A scroll RAF queued before the expand click would run asynchronously after
+        // this synchronous expand completes, re-rendering the window from a stale
+        // scrollTop and moving the parent node to the wrong position.  Cancel it now
+        // so the expand render is authoritative.
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+            this.virtualScrollRAF = null;
+        }
+        if (this.expandedNodes.indexOf(id) === -1) {
+            this.expandedNodes.push(id);
+        }
+        // Also update virtualExpandedNodesSet to keep it in sync
+        if (this.virtualExpandedNodesSet) {
+            this.virtualExpandedNodesSet.add(id);
+        }
+        if (this.rootData) {
+            const acutalRootData = this.rootData.find((item) => item.id === parseInt(id, 10));
+            acutalRootData.isExpanded = true;
+        }
+        // ── Fix: Pin focused ID to the expanding node for keyboard navigation ──
+        // When keyboard-triggered, the expanded node IS definitively the focused node
+        // (`id` comes from currLi.getAttribute('data-uid') in expandNode, where currLi
+        // is getFocusedNode()). Set unconditionally — the old conditional guard
+        // `!this.virtualFocusedId` could leave a stale or null value if a previous
+        // RAF render (from arrow-key scroll) hadn't yet completed, causing branch 3
+        // (first item) to fire in renderVirtualItems() instead of branch 2.
+        // For mouse clicks (isKeyboardNav=false), clear virtualFocusedId so that
+        // renderVirtualItems() Branch 2 does NOT apply the FOCUS/FOCUSED classes —
+        // mouse-based expand/collapse should never add the e-focused class.
+        if (isKeyboardNav) {
+            this.virtualFocusedId = id;
+        }
+        else {
+            this.virtualFocusedId = null;
+        }
+        this.virtualFlatNodes = this.flattenVisibleNodes();
+        this.rebuildVirtualNodeMap();
+        // ── Snapshot scrollTop before computing the window ────────────────────────
+        // Read scrollTop once here and pass it into getVirtualWindow so that any
+        // browser scroll-anchoring adjustment that happens when the padding values
+        // change cannot affect which window we render.
+        const scrollTopSnapshot = this.element.scrollTop;
+        const win = this.getVirtualWindowAt(scrollTopSnapshot);
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        // ── Block ALL scroll-triggered re-renders during this expand ─────────────
+        // renderVirtualItems() calls li.focus() in branch 2 (keyboard focus restore).
+        // The post-render focus() call below can also trigger browser scroll.  Both
+        // can fire the 'scroll' event and cause onVirtualScroll() to queue a RAF.
+        // We set the skip flag ONCE here; it is consumed by the first scroll event.
+        // To cover the second potential scroll (from the focus() call below) we use
+        // preventScroll:true on that call so it never moves the container at all.
+        this.virtualSkipNextScrollRender = true;
+        this.renderVirtualItems();
+        // renderVirtualItems() replaces all <li> elements so the old icon element that
+        // had the PROCESS class is gone. Remove PROCESS from the newly rendered icon
+        // so the node can be collapsed/expanded again without being blocked.
+        const newLi = this.getElement(id);
+        if (newLi) {
+            const icon = select('.' + ICON, newLi);
+            if (icon) {
+                removeClass([icon], PROCESS);
+            }
+            // ── Use preventScroll:true ────────────────────────────────────────────
+            // Without preventScroll the browser scrolls the container to bring this
+            // node into view, which fires a second 'scroll' event.  The first scroll
+            // was already consumed by virtualSkipNextScrollRender (set above), so the
+            // second scroll would queue a new RAF that re-renders from the
+            // focus-adjusted scrollTop — moving the parent node to the wrong position.
+            newLi.focus({ preventScroll: true });
+        }
+        if (this.isLoaded) {
+            const currLi = this.getElement(id);
+            if (currLi) {
+                const expandArgs = this.getExpandEvent(currLi, null);
+                expandArgs.isInteracted = this.isInteracted;
+                this.trigger('nodeExpanded', expandArgs);
+            }
+        }
+    }
+    handleVirtualCollapse(id, isKeyboardNav) {
+        // ── Cancel any pending scroll RAF ─────────────────────────────────────────
+        // Mirrors handleVirtualExpand: a queued RAF from a previous scroll event
+        // must not override the collapse render with a stale window.
+        if (this.virtualScrollRAF !== null) {
+            cancelAnimationFrame(this.virtualScrollRAF);
+            this.virtualScrollRAF = null;
+        }
+        const idx = this.expandedNodes.indexOf(id);
+        if (idx !== -1) {
+            this.expandedNodes.splice(idx, 1);
+        }
+        // Also update virtualExpandedNodesSet to keep it in sync
+        if (this.virtualExpandedNodesSet) {
+            this.virtualExpandedNodesSet.delete(id);
+        }
+        if (this.rootData) {
+            const acutalRootData = this.rootData.find((item) => item.id === parseInt(id, 10));
+            acutalRootData.isExpanded = false;
+        }
+        // ── Fix: Pin focused ID to the collapsing node for keyboard navigation ──
+        // Same reasoning as handleVirtualExpand: when keyboard-triggered, `id` is
+        // definitively the focused node. Set unconditionally to avoid the stale/null
+        // state that could cause the RAF re-render to fall through to branch 3.
+        // For mouse clicks (isKeyboardNav=false), clear virtualFocusedId so that
+        // renderVirtualItems() Branch 2 does NOT apply the FOCUS/FOCUSED classes —
+        // mouse-based expand/collapse should never add the e-focused class.
+        if (isKeyboardNav) {
+            this.virtualFocusedId = id;
+        }
+        else {
+            this.virtualFocusedId = null;
+        }
+        this.virtualFlatNodes = this.flattenVisibleNodes();
+        this.rebuildVirtualNodeMap();
+        // ── Snapshot scrollTop before computing the window ────────────────────────
+        // Same rationale as handleVirtualExpand: capture scrollTop before any focus()
+        // call or padding change can cause the browser to auto-scroll.
+        const scrollTopSnapshot = this.element.scrollTop;
+        const win = this.getVirtualWindowAt(scrollTopSnapshot);
+        this.virtualStartIndex = win.startIndex;
+        this.virtualEndIndex = win.endIndex;
+        // ── Block ALL scroll-triggered re-renders during this collapse ────────────
+        // Same as handleVirtualExpand: use preventScroll:true on the focus() call
+        // below so the second potential scroll event is never fired.
+        this.virtualSkipNextScrollRender = true;
+        this.renderVirtualItems();
+        // renderVirtualItems() replaces all <li> elements so the old icon element that
+        // had the PROCESS class is gone. Remove PROCESS from the newly rendered icon
+        // so the node can be expanded/collapsed again without being blocked.
+        const newLi = this.getElement(id);
+        if (newLi) {
+            const icon = select('.' + ICON, newLi);
+            if (icon) {
+                removeClass([icon], PROCESS);
+            }
+            // ── Use preventScroll:true to avoid consuming virtualSkipNextScrollRender ─
+            newLi.focus({ preventScroll: true });
+        }
+        if (this.isLoaded) {
+            const currLi = this.getElement(id);
+            if (currLi) {
+                const colArgs = this.getExpandEvent(currLi, null);
+                colArgs.isInteracted = this.isInteracted;
+                this.trigger('nodeCollapsed', colArgs);
+            }
+        }
+    }
+    /**
+     * Updates the selected state of a node in `virtualFlatNodes` and re-renders the window.
+     *
+     * @param {string} id - The `data-uid` of the target node.
+     * @param {boolean} isSelected - Whether the node is now selected.
+     * @returns {void}
+     * @private
+     */
+    updateVirtualNodeSelection(id, isSelected) {
+        const idx = this.virtualNodeMap.get(id);
+        if (!isNullOrUndefined(idx)) {
+            this.virtualFlatNodes[parseInt(idx.toString(), 10)].isSelected = isSelected;
+            this.renderVirtualItems();
+        }
+    }
+    /**
+     * Updates the checkbox state of a node in `virtualFlatNodes` and re-renders the window.
+     *
+     * @param {string} id - The `data-uid` of the target node.
+     * @param {'check' | 'uncheck' | 'indeterminate'} state - The new check state.
+     * @returns {void}
+     * @private
+     */
+    updateVirtualNodeCheckState(id, state) {
+        const idx = this.virtualNodeMap.get(id);
+        if (!isNullOrUndefined(idx)) {
+            this.virtualFlatNodes[parseInt(idx.toString(), 10)].isChecked =
+                state === 'check' ? true : state === 'indeterminate' ? 'indeterminate' : false;
+            // Keep the persistent indeterminate set in sync so flattenVisibleNodes()
+            // correctly restores state after any full list rebuild (e.g. collapse).
+            if (state === 'indeterminate') {
+                this.virtualIndeterminateNodesSet.add(id);
+            }
+            else {
+                this.virtualIndeterminateNodesSet.delete(id);
+            }
+            this.renderVirtualItems();
+        }
+    }
+    // ═══════════════════════════════════════════════════════════════════════════════
+    //  END VIRTUALIZATION
+    // ═══════════════════════════════════════════════════════════════════════════════
     /**
      * Called internally if any of the property value changed.
      *
@@ -15731,6 +17114,33 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     this.listBaseOption.itemNavigable = newProp.fullRowNavigable;
                     this.reRenderNodes();
                     break;
+                case 'enableVirtualization':
+                    if (this.enableVirtualization) {
+                        if (!isNullOrUndefined(this.height)) {
+                            this.initVirtualization();
+                        }
+                    }
+                    else {
+                        // Tear down virtualization and do a full re-render
+                        this.unwireVirtualScrollEvents();
+                        this.destroyVirtualMask();
+                        removeClass([this.element], VIRTUALIZATION);
+                        this.element.style.height = '';
+                        this.element.style.overflowY = '';
+                        this.reRenderNodes();
+                    }
+                    break;
+                case 'height':
+                    if (this.enableVirtualization) {
+                        // Re-initialise so the new height takes effect
+                        this.unwireVirtualScrollEvents();
+                        this.initVirtualization();
+                    }
+                    else {
+                        const px = this.parseHeightToPixels();
+                        this.element.style.height = px > 0 ? px + 'px' : '';
+                    }
+                    break;
             }
         }
     }
@@ -15740,6 +17150,13 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      * @returns {void}
      */
     destroy() {
+        // Tear down virtualization before standard cleanup
+        if (this.enableVirtualization) {
+            this.unwireVirtualScrollEvents();
+            this.destroyVirtualMask();
+            this.virtualFlatNodes = [];
+            this.virtualNodeMap.clear();
+        }
         this.clearTemplate();
         this.element.removeAttribute('aria-activedescendant');
         this.unWireEvents();
@@ -15824,9 +17241,25 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (isNullOrUndefined(fNode)) {
             this.setNodeFocusable();
         }
-        this.updateCheckedStateFromDS();
-        if (this.showCheckBox && dropLi && this.autoCheck) {
-            this.ensureParentCheckState(dropLi);
+        // In virtual mode (with a fixed height), rebuild the flat node list and re-render
+        // the window so the newly added nodes appear in the correct hierarchical position.
+        // When height is not provided, the tree uses normal rendering and the DOM is
+        // already updated by addGivenNodes() above.
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.setRootData();
+            this.rebuildVirtualCheckCache();
+            this.virtualFlatNodes = this.flattenVisibleNodes();
+            this.rebuildVirtualNodeMap();
+            const win = this.getVirtualWindow();
+            this.virtualStartIndex = win.startIndex;
+            this.virtualEndIndex = win.endIndex;
+            this.renderVirtualItems();
+        }
+        else {
+            this.updateCheckedStateFromDS();
+            if (this.showCheckBox && dropLi && this.autoCheck) {
+                this.ensureParentCheckState(dropLi);
+            }
         }
         if ((this.fields.dataSource instanceof DataManager === false)) {
             this.preventExpand = false;
@@ -15871,6 +17304,24 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      * @returns {void}
      */
     collapseAll(nodes, level, excludeHiddenNodes) {
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.virtualExpandedNodesSet.clear();
+            this.setProperties({ expandedNodes: [] }, true);
+            const setAllCollapsed = (nodes) => {
+                if (!nodes) {
+                    return;
+                }
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[parseInt(i.toString(), 10)];
+                    node['isExpanded'] = false;
+                    const children = getValue(this.fields.child.toString(), node);
+                    if (children && Array.isArray(children)) {
+                        setAllCollapsed(children);
+                    }
+                }
+            };
+            setAllCollapsed(this.treeData);
+        }
         if (!isNullOrUndefined(nodes)) {
             this.doGivenAction(nodes, COLLAPSIBLE, false);
         }
@@ -15948,6 +17399,33 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      */
     expandAll(nodes, level, excludeHiddenNodes, preventAnimation) {
         this.isAnimate = !preventAnimation;
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            const allParentIds = [];
+            const idFieldName = this.fields.id;
+            const childFieldName = this.fields.child.toString();
+            const isDataTypeFlat = this.dataType === 1;
+            const processAllParents = (nodeList) => {
+                if (!nodeList) {
+                    return;
+                }
+                for (let i = 0; i < nodeList.length; i++) {
+                    const node = nodeList[parseInt(i.toString(), 10)];
+                    const nodeId = getValue(idFieldName, node);
+                    if (node.hasChild) {
+                        allParentIds.push(nodeId);
+                        node.isExpanded = true;
+                    }
+                }
+            };
+            processAllParents(this.treeData);
+            for (let i = 0; i < allParentIds.length; i++) {
+                const id = allParentIds[parseInt(i.toString(), 10)];
+                if (!this.virtualExpandedNodesSet.has(id)) {
+                    this.virtualExpandedNodesSet.add(id);
+                }
+            }
+            this.setProperties({ expandedNodes: allParentIds }, true);
+        }
         if (!isNullOrUndefined(nodes)) {
             this.doGivenAction(nodes, EXPANDABLE, true);
         }
@@ -16249,6 +17727,12 @@ __decorate$8([
 __decorate$8([
     Property(false)
 ], TreeView.prototype, "allowTextWrap", void 0);
+__decorate$8([
+    Property(false)
+], TreeView.prototype, "enableVirtualization", void 0);
+__decorate$8([
+    Property()
+], TreeView.prototype, "height", void 0);
 __decorate$8([
     Complex({}, NodeAnimationSettings)
 ], TreeView.prototype, "animation", void 0);