@syncfusion/ej2-navigations 34.2.2 → 34.2.3

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

@@ -1430,8 +1430,10 @@ let MenuBase = class MenuBase extends Component {
         if (!active) {
             return;
         }
+        const isInputElement = active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
+            active.contentEditable === 'true';
         const expanded = active.getAttribute('aria-expanded') === 'true';
-        if (!expanded) {
+        if (!expanded || isInputElement) {
             return;
         }
         const ul = this.element;
@@ -1545,13 +1547,19 @@ let MenuBase = class MenuBase extends Component {
         const cli = cul.children[fliIdx];
         fliIdx = this.isValidLI(cli, fliIdx, e.action);
         cul.children[fliIdx].classList.add(FOCUSED);
-        cul.children[fliIdx].focus();
+        const liToFocus = cul.children[fliIdx];
         if (closest(this.element, '.e-popup')) {
-            const focusedLiItem = cul.children[fliIdx];
-            const focusableChild = focusedLiItem.querySelector('[tabindex], span[tabindex], a, button, [tabindex]:not([tabindex="-1"])');
-            if (!focusableChild) {
-                cul.focus();
+            const focusableChild = liToFocus.querySelector('[tabindex], span[tabindex], a, button, [tabindex]:not([tabindex="-1"])');
+            const isSpreadsheet = this.element.id.includes('_cf_menu') && this.element.parentElement.classList.contains('e-cf-menu');
+            if (focusableChild && !isSpreadsheet) {
+                focusableChild.focus();
             }
+            else {
+                liToFocus.focus();
+            }
+        }
+        else {
+            liToFocus.focus();
         }
     }
     isValidLI(cli, index, action) {
@@ -12152,7 +12160,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     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.treeData && this.fields && this.fields.isChecked) {
+                        setValue(this.fields.isChecked, false, this.treeData[parseInt(id.toString(), 10) - 1]);
+                    }
                     if (this.autoCheck && this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].hasChildren) {
                         this.setVirtualChildCheckState(id, false);
                     }
@@ -13085,6 +13095,13 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (!isNullOrUndefined(id) && this.selectedNodes.indexOf(id) === -1) {
             this.selectedNodes.push(id);
         }
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.virtualSelectedNodesSet.add(id);
+            const actualIndex = this.virtualNodeMap.get(id);
+            if (actualIndex && actualIndex > -1) {
+                this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = true;
+            }
+        }
     }
     removeSelect(liEle) {
         if (this.allowMultiSelection) {
@@ -13098,6 +13115,14 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (index > -1) {
             this.selectedNodes.splice(index, 1);
         }
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            const id = liEle.getAttribute('data-uid');
+            this.virtualSelectedNodesSet.delete(id);
+            const actualIndex = this.virtualNodeMap.get(id);
+            if (actualIndex && actualIndex > -1) {
+                this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = false;
+            }
+        }
     }
     removeSelectAll() {
         const selectedLI = this.element.querySelectorAll('.' + ACTIVE);
@@ -13111,6 +13136,15 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         }
         removeClass(selectedLI, ACTIVE);
         this.setProperties({ selectedNodes: [] }, true);
+        if (this.enableVirtualization && !isNullOrUndefined(this.height)) {
+            this.virtualSelectedNodesSet.clear();
+            for (let i = 0; i < this.virtualFlatNodes.length; i++) {
+                const node = this.virtualFlatNodes[parseInt(i.toString(), 10)];
+                if (node.selected) {
+                    node.selected = false;
+                }
+            }
+        }
     }
     getSelectEvent(currLi, action, e) {
         const nodeData = this.getNodeData(currLi);
@@ -16070,6 +16104,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         const imageUrlFieldName = this.fields.imageUrl;
         const idFieldName = this.fields.id;
         const textFieldName = this.fields.text;
+        const selectedFieldName = this.fields.selected;
         const needsSorting = this.sortOrder !== 'None';
         const isDataTypeFlat = this.dataType === 1;
         const enableVirtualization = this.enableVirtualization;
@@ -16080,7 +16115,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             // 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;
+            const expanded = inExpandedNodes || rawExpanded;
             if (rawExpanded && id) {
                 this.expandedNodes.push(id);
                 this.virtualExpandedNodesSet.add(id);
@@ -16107,24 +16142,32 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     }
                 }
             }
+            if (this.initialRender && enableVirtualization && id && selectedFieldName && !this.virtualSelectedNodesSet.has(id)) {
+                const rawSelected = getValue(selectedFieldName, raw);
+                if (!isNullOrUndefined(rawSelected) && rawSelected.toString() === 'true') {
+                    this.virtualSelectedNodesSet.add(id);
+                    if (this.selectedNodes && this.selectedNodes.indexOf(id) === -1) {
+                        this.selectedNodes.push(id);
+                    }
+                }
+            }
             // Use cached Sets for O(1) lookup
-            const isSelected = this.virtualSelectedNodesSet.has(id);
+            const selected = 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
+                id, text, level, parentId, hasChildren, expanded,
+                selected, isChecked, iconCss, imageUrl
             };
             result.push(node);
-            if (isExpanded && hasChildren) {
+            if (expanded && hasChildren) {
                 // Determine children list
                 let children = [];
                 if (isDataTypeFlat) {
@@ -16334,7 +16377,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             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) {
+            if (node.expanded && node.hasChildren) {
                 renderedParentMap.set(node.id, { li, childUl: null });
             }
         }
@@ -16429,7 +16472,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         // Expand/collapse icon
         if (node.hasChildren) {
             const iconSpan = this.createElement('div', {
-                className: ICON + ' ' + (node.isExpanded ? COLLAPSIBLE : EXPANDABLE)
+                className: ICON + ' ' + (node.expanded ? COLLAPSIBLE : EXPANDABLE)
             });
             textWrap.appendChild(iconSpan);
         }
@@ -16468,8 +16511,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         });
         textWrap.appendChild(anchor);
         li.appendChild(textWrap);
+        // nodeTemplate
+        if (!isNullOrUndefined(this.nodeTemplateFn)) {
+            const rawData = this.findNodeInTreeData(node.id);
+            if (!isNullOrUndefined(rawData)) {
+                anchor.innerHTML = '';
+                this.renderNodeTemplate(rawData, anchor, node.id);
+            }
+        }
         // State classes
-        if (node.isExpanded) {
+        if (node.expanded) {
             li.classList.add(EXPANDED);
             li.setAttribute('aria-expanded', 'true');
         }
@@ -16477,14 +16528,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
             li.classList.add(NODECOLLAPSED);
             li.setAttribute('aria-expanded', 'false');
         }
-        if (node.isSelected) {
+        if (node.selected) {
             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);
         }
@@ -16786,6 +16833,44 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         this.virtualEndIndex = win.endIndex;
         this.renderVirtualItems();
     }
+    /**
+     * Recursively walks the treeData (and any nested `childFieldName` arrays) to
+     * find the node whose `idFieldName` matches the given `id` (compared as
+     * strings).  Used by the virtual-mode expand/collapse handlers so they can
+     * locate nodes at any depth — not just the root level — before writing the
+     * `expanded` flag back to the datasource.
+     *
+     * @param {string} id - The id (as a string) of the node to locate.
+     * @returns {Object | null} The matching raw datasource node, or null if not found.
+     * @private
+     */
+    findNodeInTreeData(id) {
+        if (!this.treeData) {
+            return null;
+        }
+        const idFieldName = this.fields.id.toString();
+        const childFieldName = this.fields.child.toString();
+        const findRecursive = (nodes) => {
+            if (!nodes || nodes.length === 0) {
+                return null;
+            }
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                if (node[idFieldName] && node[idFieldName].toString() === id) {
+                    return node;
+                }
+                const children = getValue(childFieldName, node);
+                if (children && Array.isArray(children)) {
+                    const found = findRecursive(children);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            return null;
+        };
+        return findRecursive(this.treeData);
+    }
     handleVirtualExpand(id, isKeyboardNav) {
         // ── Cancel any pending scroll RAF ─────────────────────────────────────────
         // A scroll RAF queued before the expand click would run asynchronously after
@@ -16803,9 +16888,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.virtualExpandedNodesSet) {
             this.virtualExpandedNodesSet.add(id);
         }
-        if (this.rootData) {
-            const acutalRootData = this.rootData.find((item) => item.id === parseInt(id, 10));
-            acutalRootData.isExpanded = true;
+        if (this.treeData) {
+            const acutalRootData = this.findNodeInTreeData(id);
+            if (acutalRootData && this.fields && this.fields.expanded) {
+                setValue(this.fields.expanded, true, acutalRootData);
+            }
         }
         // ── Fix: Pin focused ID to the expanding node for keyboard navigation ──
         // When keyboard-triggered, the expanded node IS definitively the focused node
@@ -16884,9 +16971,11 @@ let TreeView = TreeView_1 = class TreeView extends Component {
         if (this.virtualExpandedNodesSet) {
             this.virtualExpandedNodesSet.delete(id);
         }
-        if (this.rootData) {
-            const acutalRootData = this.rootData.find((item) => item.id === parseInt(id, 10));
-            acutalRootData.isExpanded = false;
+        if (this.treeData) {
+            const acutalRootData = this.findNodeInTreeData(id);
+            if (acutalRootData && this.fields && this.fields.expanded) {
+                setValue(this.fields.expanded, false, acutalRootData);
+            }
         }
         // ── Fix: Pin focused ID to the collapsing node for keyboard navigation ──
         // Same reasoning as handleVirtualExpand: when keyboard-triggered, `id` is
@@ -16940,14 +17029,14 @@ let TreeView = TreeView_1 = class TreeView extends Component {
      * 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.
+     * @param {boolean} selected - Whether the node is now selected.
      * @returns {void}
      * @private
      */
-    updateVirtualNodeSelection(id, isSelected) {
+    updateVirtualNodeSelection(id, selected) {
         const idx = this.virtualNodeMap.get(id);
         if (!isNullOrUndefined(idx)) {
-            this.virtualFlatNodes[parseInt(idx.toString(), 10)].isSelected = isSelected;
+            this.virtualFlatNodes[parseInt(idx.toString(), 10)].selected = selected;
             this.renderVirtualItems();
         }
     }
@@ -17313,7 +17402,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                 }
                 for (let i = 0; i < nodes.length; i++) {
                     const node = nodes[parseInt(i.toString(), 10)];
-                    node['isExpanded'] = false;
+                    node['expanded'] = false;
                     const children = getValue(this.fields.child.toString(), node);
                     if (children && Array.isArray(children)) {
                         setAllCollapsed(children);
@@ -17413,7 +17502,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
                     const nodeId = getValue(idFieldName, node);
                     if (node.hasChild) {
                         allParentIds.push(nodeId);
-                        node.isExpanded = true;
+                        node.expanded = true;
                     }
                 }
             };