@syncfusion/ej2-navigations 28.1.39 → 28.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.39
+*  version : 28.2.3
 *  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@28.1.35",
+  "_id": "@syncfusion/ej2-navigations@28.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-DfoiKu0Ty+W9EEEdLGr+dOBgL49Swh2Atz6fR4L8J6o6KMJYYtoj9OrfZuN20hP5i5WrCVbbu8/ORFHYL6RWTQ==",
+  "_integrity": "sha512-7OXiwVKV1Ks9ltm68eNpD/i2rTvRbiWqiW5JTtn4ltdU7tufPV28u+m7y4ZK6GvriN0EEyUAvhKVpfoR9umePg==",
   "_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-28.1.35.tgz",
-  "_shasum": "685ff5b2d985a4c45b82f43fbb9b78c8f0a8a289",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.1.41.tgz",
+  "_shasum": "ed20851191fb2631662c8e3b1d5ede3964b20b93",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -52,12 +52,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.1.33",
-    "@syncfusion/ej2-buttons": "~28.1.39",
-    "@syncfusion/ej2-data": "~28.1.33",
-    "@syncfusion/ej2-inputs": "~28.1.37",
-    "@syncfusion/ej2-lists": "~28.1.37",
-    "@syncfusion/ej2-popups": "~28.1.39"
+    "@syncfusion/ej2-base": "~28.2.3",
+    "@syncfusion/ej2-buttons": "~28.2.3",
+    "@syncfusion/ej2-data": "~28.2.3",
+    "@syncfusion/ej2-inputs": "~28.2.3",
+    "@syncfusion/ej2-lists": "~28.2.3",
+    "@syncfusion/ej2-popups": "~28.2.3"
   },
   "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": "28.1.39",
+  "version": "28.2.3",
   "sideEffects": false
 }

package/src/common/menu-base.js

@@ -366,6 +366,9 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.domKeyHandler = function (e) {
         if (e.keyCode === 27) {
+            if (this.isMenuVisible()) {
+                e.stopImmediatePropagation();
+            }
             e.action = ESCAPE;
             this.leftEscKeyHandler(e);
         }
@@ -1299,7 +1302,12 @@ var MenuBase = /** @class */ (function (_super) {
                     args.curData[args.fields[fields.id]] = getUniqueID('menuitem');
                 }
                 if (isNullOrUndefined(args.curData.htmlAttributes)) {
-                    args.curData.htmlAttributes = {};
+                    Object.defineProperty(args.curData, 'htmlAttributes', {
+                        value: {},
+                        writable: true,
+                        enumerable: true,
+                        configurable: true
+                    });
                 }
                 if (Browser.isIE) {
                     if (!args.curData.htmlAttributes.role) {

package/src/treeview/treeview.d.ts

@@ -1505,4 +1505,5 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     uncheckAll(nodes?: string[] | Element[]): void;
+    private setNodeFocusable;
 }

package/src/treeview/treeview.js

@@ -1516,11 +1516,7 @@ var TreeView = /** @class */ (function (_super) {
         if (!isNullOrUndefined(firstUl)) {
             firstUl.setAttribute('role', treeAriaAttr.treeRole);
             this.setMultiSelect(this.allowMultiSelection);
-            var firstNode = select('.' + LISTITEM, this.element);
-            if (firstNode) {
-                firstNode.setAttribute('tabindex', '0');
-                this.updateIdAttr(null, firstNode);
-            }
+            this.setNodeFocusable();
             if (this.allowTextWrap) {
                 this.updateWrap();
             }
@@ -5218,6 +5214,7 @@ var TreeView = /** @class */ (function (_super) {
             }
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
+        this.setNodeFocusable();
         this.updateCheckedStateFromDS();
         if (this.showCheckBox && dropLi) {
             this.ensureParentCheckState(dropLi);
@@ -5615,6 +5612,13 @@ var TreeView = /** @class */ (function (_super) {
             this.doCheckBoxAction(nodes, false);
         }
     };
+    TreeView.prototype.setNodeFocusable = function () {
+        var firstNode = select('.' + LISTITEM, this.element);
+        if (firstNode) {
+            firstNode.setAttribute('tabindex', '0');
+            this.updateIdAttr(null, firstNode);
+        }
+    };
     var TreeView_1;
     __decorate([
         Property(false)

package/styles/fluent-dark-lite.css

@@ -6340,19 +6340,17 @@
   float: left;
 }
 .e-treeview.e-drag-item .e-text-content .e-list-text {
-  padding: 0 12px;
+  padding: 0px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible,
 .e-treeview.e-drag-item .e-icon-expandable {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   padding-left: 12px;
-  padding-top: 8px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 12px;
-  padding: 12px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;

package/styles/fluent-dark.css

@@ -8209,19 +8209,17 @@
   float: left;
 }
 .e-treeview.e-drag-item .e-text-content .e-list-text {
-  padding: 0 12px;
+  padding: 0px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible,
 .e-treeview.e-drag-item .e-icon-expandable {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   padding-left: 12px;
-  padding-top: 8px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 12px;
-  padding: 12px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;

package/styles/fluent-lite.css

@@ -6340,19 +6340,17 @@
   float: left;
 }
 .e-treeview.e-drag-item .e-text-content .e-list-text {
-  padding: 0 12px;
+  padding: 0px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible,
 .e-treeview.e-drag-item .e-icon-expandable {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   padding-left: 12px;
-  padding-top: 8px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 12px;
-  padding: 12px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;

package/styles/fluent.css

@@ -8209,19 +8209,17 @@
   float: left;
 }
 .e-treeview.e-drag-item .e-text-content .e-list-text {
-  padding: 0 12px;
+  padding: 0px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible,
 .e-treeview.e-drag-item .e-icon-expandable {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   padding-left: 12px;
-  padding-top: 8px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 12px;
-  padding: 12px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;

package/styles/fluent2-lite.css

@@ -109,6 +109,9 @@
   padding: 13px 12px 10px;
   text-align: center;
 }
+.e-pager.e-mac-safari .e-numericitem {
+  vertical-align: top;
+}
 .e-pager div.e-pagermsgdiv {
   padding-right: 6px;
   padding-top: 4px;

package/styles/fluent2.css

@@ -109,6 +109,9 @@
   padding: 13px 12px 10px;
   text-align: center;
 }
+.e-pager.e-mac-safari .e-numericitem {
+  vertical-align: top;
+}
 .e-pager div.e-pagermsgdiv {
   padding-right: 6px;
   padding-top: 4px;

package/styles/pager/_layout.scss

@@ -131,6 +131,12 @@
       }
     }
 
+    &.e-mac-safari .e-numericitem {
+      @if $pager-skin == 'fluent2' {
+        vertical-align: top;
+      }
+    }
+
     div.e-pagermsgdiv {
       padding-right: 6px;
       padding-top: 4px;

package/styles/pager/fluent2.css

@@ -109,6 +109,9 @@
   padding: 13px 12px 10px;
   text-align: center;
 }
+.e-pager.e-mac-safari .e-numericitem {
+  vertical-align: top;
+}
 .e-pager div.e-pagermsgdiv {
   padding-right: 6px;
   padding-top: 4px;

package/styles/tab/_tailwind-definition.scss

@@ -116,7 +116,7 @@ $tab-big-item-last-child-padding-bottom: 0 !default;
 $tab-nrml-item-last-child-padding-bottom: 0 !default;
 $tab-big-wrap-padding: 0 12px !default;
 $tab-nrml-wrap-padding: 0 8px !default;
-$tab-mob-wrap-padding: 12px 16px !default;
+$tab-mob-wrap-padding: 0 15px !default;
 $tab-pop-padding: 0 !default;
 $tab-big-pop-item-wrap-padding: 0 16px !default;
 $tab-nrml-pop-item-wrap-padding: 0 16px !default;

package/styles/tab/tailwind-dark.css

@@ -231,7 +231,7 @@
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
@@ -1718,7 +1718,7 @@
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab-clone-element .e-text-wrap {
@@ -3060,7 +3060,7 @@
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
   .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-text-wrap,
@@ -4095,7 +4095,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab-clone-element .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab-clone-element .e-text-wrap {

package/styles/tab/tailwind.css

@@ -231,7 +231,7 @@
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
@@ -1718,7 +1718,7 @@
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab-clone-element .e-text-wrap {
@@ -3060,7 +3060,7 @@
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
   .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-text-wrap,
@@ -4095,7 +4095,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab-clone-element .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab-clone-element .e-text-wrap {

package/styles/tailwind-dark-lite.css

@@ -3352,7 +3352,7 @@
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
@@ -4839,7 +4839,7 @@
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab-clone-element .e-text-wrap {

package/styles/tailwind-dark.css

@@ -4088,7 +4088,7 @@
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
@@ -5575,7 +5575,7 @@
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab-clone-element .e-text-wrap {
@@ -6917,7 +6917,7 @@
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
   .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-text-wrap,
@@ -7952,7 +7952,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab-clone-element .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab-clone-element .e-text-wrap {

package/styles/tailwind-lite.css

@@ -3352,7 +3352,7 @@
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
@@ -4839,7 +4839,7 @@
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab-clone-element .e-text-wrap {

package/styles/tailwind.css

@@ -4088,7 +4088,7 @@
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item .e-text-wrap {
@@ -5575,7 +5575,7 @@
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-tab-wrap {
     height: 48px;
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-tab-clone-element .e-text-wrap {
@@ -6917,7 +6917,7 @@
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
   .e-tab.e-bigger .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-text-wrap,
@@ -7952,7 +7952,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-bigger .e-tab-clone-element .e-tab-wrap {
-    padding: 12px 16px;
+    padding: 0 15px;
   }
 }
 .e-bigger .e-tab-clone-element .e-text-wrap {

package/styles/treeview/_layout.scss

@@ -546,7 +546,10 @@
         }
 
         .e-list-text {
-          @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI') {
+            padding: $treeview-icon-padding;
+          }
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
             padding: 0 $treeview-drag-icon-padding;
           }
           @if $skin-name == 'fluent2' {
@@ -570,9 +573,6 @@
           @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
             box-sizing: content-box;
             padding-left: $treeview-drag-icon-padding;
-            @if ($skin-name == 'FluentUI') {
-              padding-top: 8px;
-            }
           }
         }
       }
@@ -580,7 +580,7 @@
       .e-icon-collapsible::before,
       .e-icon-expandable::before {
         font-size: $treeview-drag-icon-font-size;
-        @if ($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3' and $skin-name != 'FluentUI') {
+        @if (($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3') and $skin-name != 'FluentUI') {
           padding: $treeview-drag-icon-padding;
         }
         @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {

package/styles/treeview/fluent-dark.css

@@ -349,19 +349,17 @@
   float: left;
 }
 .e-treeview.e-drag-item .e-text-content .e-list-text {
-  padding: 0 12px;
+  padding: 0px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible,
 .e-treeview.e-drag-item .e-icon-expandable {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   padding-left: 12px;
-  padding-top: 8px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 12px;
-  padding: 12px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;

package/styles/treeview/fluent.css

@@ -349,19 +349,17 @@
   float: left;
 }
 .e-treeview.e-drag-item .e-text-content .e-list-text {
-  padding: 0 12px;
+  padding: 0px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible,
 .e-treeview.e-drag-item .e-icon-expandable {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   padding-left: 12px;
-  padding-top: 8px;
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 12px;
-  padding: 12px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;