@syncfusion/ej2-navigations 29.1.41 → 29.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.1.41
+*  version : 29.2.5
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@29.1.38",
+  "_id": "@syncfusion/ej2-navigations@29.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-/OPUPqbnwIXo36+W0w/F8pH6cNjrJsgEEaZpZP7uklGeqIpyFLrPo4f4uDFKdbgrX+K3Bs01loThHmaB1447ig==",
+  "_integrity": "sha512-imYNz0vrZSUIKlzJTHj+DMHkBWJ/Ze3FW6WNMmX1i43qCgABxXM/hsOWQK3+g217Sw0nF0GKWY0d8N6CVJDC7Q==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -40,8 +40,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-29.1.38.tgz",
-  "_shasum": "f3d612527b73d8271adacdf1811bfdec8e76b0f5",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-29.2.4.tgz",
+  "_shasum": "637997deedf0d6e1670061ec8612e26648b589d1",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
   "author": {
@@ -52,12 +52,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.1.36",
-    "@syncfusion/ej2-buttons": "~29.1.34",
-    "@syncfusion/ej2-data": "~29.1.33",
-    "@syncfusion/ej2-inputs": "~29.1.39",
-    "@syncfusion/ej2-lists": "~29.1.40",
-    "@syncfusion/ej2-popups": "~29.1.37"
+    "@syncfusion/ej2-base": "~29.2.4",
+    "@syncfusion/ej2-buttons": "~29.2.5",
+    "@syncfusion/ej2-data": "~29.2.4",
+    "@syncfusion/ej2-inputs": "~29.2.5",
+    "@syncfusion/ej2-lists": "~29.2.4",
+    "@syncfusion/ej2-popups": "~29.2.4"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -162,6 +162,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "29.1.41",
+  "version": "29.2.5",
   "sideEffects": false
 }

package/src/common/menu-base.d.ts

@@ -385,7 +385,7 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     protected setBlankIconStyle(menu: HTMLElement): void;
     private checkScrollOffset;
     private setPosition;
-    getMenuWidth(cmenu: Element, width: number, isRtl: boolean): number;
+    getMenuWidth(menuElement: Element, width: number, isRtl: boolean): number;
     private toggleVisiblity;
     private createItems;
     private moverHandler;

package/src/common/menu-base.js

@@ -1318,8 +1318,8 @@ var MenuBase = /** @class */ (function (_super) {
             ul.style.left = left + px;
         }
     };
-    MenuBase.prototype.getMenuWidth = function (cmenu, width, isRtl) {
-        var caretIcon = cmenu.getElementsByClassName(CARET)[0];
+    MenuBase.prototype.getMenuWidth = function (menuElement, width, isRtl) {
+        var caretIcon = menuElement.getElementsByClassName(CARET)[0];
         if (caretIcon) {
             width += parseInt(getComputedStyle(caretIcon)[isRtl ? 'marginRight' : 'marginLeft'], 10);
         }
@@ -1399,7 +1399,7 @@ var MenuBase = /** @class */ (function (_super) {
                     args.item.setAttribute('aria-expanded', 'false');
                     args.item.classList.add('e-menu-caret-icon');
                 }
-                if (_this.isMenu && _this.template) {
+                if (_this.template) {
                     args.item.setAttribute('id', args.curData[args.fields.id].toString());
                     args.item.removeAttribute('data-uid');
                     if (args.item.classList.contains('e-level-1')) {

package/src/toolbar/toolbar.js

@@ -1407,7 +1407,10 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.popupEleWidth = function (el) {
         el.style.position = 'absolute';
-        var elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;
+        var style = window.getComputedStyle(el);
+        var elWidth = this.isVertical
+            ? el.offsetHeight
+            : el.offsetWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
         var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);
         if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {
             var btn = el.children[0];
@@ -2045,6 +2048,10 @@ var Toolbar = /** @class */ (function (_super) {
         return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
     };
     Toolbar.prototype.itemClick = function (e) {
+        var itemClosest = !isNOU(closest(e.currentTarget, '.' + CLS_TEMPLATE));
+        if (itemClosest) {
+            return;
+        }
         this.activeEleSwitch(e.currentTarget);
     };
     Toolbar.prototype.activeEleSwitch = function (ele) {

package/src/treeview/treeview-model.d.ts

@@ -457,6 +457,13 @@ export interface TreeViewModel extends ComponentModel{
      */
     showCheckBox?: boolean;
 
+    /**
+     * Specifies whether the item should be checked or unchecked when the node is clicked.
+     *
+     * @default false
+     */
+    checkOnClick?: boolean;
+
     /**
      * Allow us to specify the parent and child nodes to get auto check while we check or uncheck a node.
      *

package/src/treeview/treeview.d.ts

@@ -828,6 +828,12 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * @default false
      */
     showCheckBox: boolean;
+    /**
+     * Specifies whether the item should be checked or unchecked when the node is clicked.
+     *
+     * @default false
+     */
+    checkOnClick: boolean;
     /**
      * Allow us to specify the parent and child nodes to get auto check while we check or uncheck a node.
      *
@@ -1172,6 +1178,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private checkNode;
     private validateCheckNode;
     private nodeCheckingAction;
+    private updateActiveClass;
     /**
      * Update checkedNodes when UI interaction happens before the child node renders in DOM
      *

package/src/treeview/treeview.js

@@ -1700,8 +1700,9 @@ var TreeView = /** @class */ (function (_super) {
                 var rippleIcons = select('.' + ICON, li);
                 this.removeHover();
                 this.setFocusElement(li);
-                if (this.showCheckBox && !li.classList.contains('e-disable')) {
-                    var checkWrapper = closest(target, '.' + CHECKBOXWRAP);
+                var isExpandCollapseIcon = classList.contains(EXPANDABLE) || classList.contains(COLLAPSIBLE);
+                if (this.showCheckBox && !li.classList.contains('e-disable') && !isExpandCollapseIcon) {
+                    var checkWrapper = this.checkOnClick ? select('.' + CHECKBOXWRAP, li) : closest(target, '.' + CHECKBOXWRAP);
                     if (!isNOU(checkWrapper)) {
                         var checkElement = select('.' + CHECKBOXFRAME, checkWrapper);
                         this.validateCheckNode(checkWrapper, checkElement.classList.contains(CHECK), li, event.originalEvent);
@@ -2263,6 +2264,15 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.selectNode = function (li, e, multiSelect) {
         var _this = this;
         if (isNOU(li) || (!this.allowMultiSelection && this.isActive(li) && !isNOU(e))) {
+            if (this.checkOnClick) {
+                var checkboxElement = select(' .' + CHECKBOXFRAME, li);
+                if (!isNOU(checkboxElement) && checkboxElement.classList.contains(CHECK)) {
+                    addClass([li], ACTIVE);
+                }
+                else {
+                    removeClass([li], ACTIVE);
+                }
+            }
             this.setFocusElement(li);
             return;
         }
@@ -2450,6 +2460,9 @@ var TreeView = /** @class */ (function (_super) {
         else {
             this.isFirstRender = true;
             this.renderChildNodes(currLi, expandChild, callback, null, isFromExpandAll);
+            if (isNullOrUndefined(this.expandChildren) || this.expandChildren.length === 0) {
+                return;
+            }
             var liEles = selectAll('.' + LISTITEM, currLi);
             for (var i = 0; i < liEles.length; i++) {
                 var id = this.getId(liEles[parseInt(i.toString(), 10)]);
@@ -2633,6 +2646,7 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
         this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);
+        this.updateActiveClass(li, isCheck);
         if (this.autoCheck) {
             this.ensureChildCheckState(li);
             this.updateOldCheckedData([this.getNodeData(li)]);
@@ -2648,6 +2662,17 @@ var TreeView = /** @class */ (function (_super) {
         }
         this.nodeCheckedEvent(checkWrap, isCheck, e);
     };
+    TreeView.prototype.updateActiveClass = function (liElement, checkStatus) {
+        if (this.showCheckBox && this.checkOnClick) {
+            if (checkStatus === 'check' || checkStatus === false) {
+                this.removeSelectAll();
+                addClass([liElement], ACTIVE);
+            }
+            else if (checkStatus === 'uncheck' || checkStatus === 'indeterminate' || checkStatus === true) {
+                removeClass([liElement], ACTIVE);
+            }
+        }
+    };
     /**
      * Update checkedNodes when UI interaction happens before the child node renders in DOM
      *
@@ -3080,11 +3105,11 @@ var TreeView = /** @class */ (function (_super) {
             removeClass(hoveredNode, HOVER);
         }
     };
-    TreeView.prototype.getNodeData = function (currLi, fromDS) {
+    TreeView.prototype.getNodeData = function (currLi, fromDS, dragData) {
         if (!isNOU(currLi) && currLi.classList.contains(LISTITEM) &&
             !isNOU(closest(currLi, '.' + CONTROL)) && closest(currLi, '.' + CONTROL).classList.contains(ROOT)) {
             var id = currLi.getAttribute('data-uid');
-            var text = this.getText(currLi, fromDS);
+            var text = this.getText(currLi, fromDS, dragData);
             var pNode = closest(currLi.parentNode, '.' + LISTITEM);
             var pid = pNode ? pNode.getAttribute('data-uid') : null;
             var selected = currLi.classList.contains(ACTIVE);
@@ -3103,12 +3128,12 @@ var TreeView = /** @class */ (function (_super) {
         }
         return { id: '', text: '', parentID: '', selected: false, expanded: false, isChecked: '', hasChildren: false };
     };
-    TreeView.prototype.getText = function (currLi, fromDS) {
+    TreeView.prototype.getText = function (currLi, fromDS, dragData) {
         if (fromDS) {
-            var nodeData = this.getNodeObject(currLi.getAttribute('data-uid'));
+            var nodeData = !isNullOrUndefined(dragData) ? dragData : this.getNodeObject(currLi.getAttribute('data-uid'));
             var level = parseFloat(currLi.getAttribute('aria-level'));
             var nodeFields = this.getFields(this.fields, level, 1);
-            return getValue(nodeFields.text, nodeData);
+            return !isNullOrUndefined(dragData) ? dragData.text : getValue(nodeFields.text, nodeData);
         }
         return select('.' + LISTTEXT, currLi).textContent;
     };
@@ -3667,8 +3692,9 @@ var TreeView = /** @class */ (function (_super) {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
+        var dragData = isNullOrUndefined(dragObj) ? null : dragObj.dragData;
         for (var i = 0; i < liArray.length; i++) {
-            nodeData.push(this.getNode(liArray[parseInt(i.toString(), 10)]));
+            nodeData.push(this.getNodeData(this.getElement(liArray[parseInt(i.toString(), 10)]), true, dragData));
         }
         this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
         if (dragObj.element.id !== this.element.id) {
@@ -3783,7 +3809,7 @@ var TreeView = /** @class */ (function (_super) {
         var id = this.getId(dragLi);
         var removedData = dragObj.updateChildField(dragObj.treeData, dragObj.fields, id, null, null, true);
         var refId = this.getId(dropLi);
-        var index = this.getDataPos(this.treeData, this.fields, refId);
+        var index = refId ? this.getDataPos(this.treeData, this.fields, refId) : null;
         var parentId = this.getId(dropParentLi);
         if (this.dataType === 1) {
             this.updateField(this.treeData, this.fields, parentId, 'hasChildren', true);
@@ -5711,6 +5737,9 @@ var TreeView = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], TreeView.prototype, "showCheckBox", void 0);
+    __decorate([
+        Property(false)
+    ], TreeView.prototype, "checkOnClick", void 0);
     __decorate([
         Property(true)
     ], TreeView.prototype, "autoCheck", void 0);