@syncfusion/ej2-navigations 28.2.3 → 28.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.2.3
+*  version : 28.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@28.1.41",
+  "_id": "@syncfusion/ej2-navigations@28.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-7OXiwVKV1Ks9ltm68eNpD/i2rTvRbiWqiW5JTtn4ltdU7tufPV28u+m7y4ZK6GvriN0EEyUAvhKVpfoR9umePg==",
+  "_integrity": "sha512-AKvTyY3in+EMengMf8P8Hj0m6AOjc32uFLUp9WhgKoKNzd/MzTTv6Y2Vjd9FC4ws1aJPRg45effz9nUquLlAcw==",
   "_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.41.tgz",
-  "_shasum": "ed20851191fb2631662c8e3b1d5ede3964b20b93",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.2.4.tgz",
+  "_shasum": "0da922773b22bbbd212ba4c68c35cfb4fe0c27ad",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -52,7 +52,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.3",
+    "@syncfusion/ej2-base": "~28.2.5",
     "@syncfusion/ej2-buttons": "~28.2.3",
     "@syncfusion/ej2-data": "~28.2.3",
     "@syncfusion/ej2-inputs": "~28.2.3",
@@ -162,6 +162,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "28.2.3",
+  "version": "28.2.5",
   "sideEffects": false
 }

package/src/tab/tab.js

@@ -1011,9 +1011,6 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
         }
-        if (this.prevIndex !== this.selectedItem) {
-            ele.classList.remove(CLS_ACTIVE);
-        }
     };
     Tab.prototype.loadContentElement = function () {
         if (!this.isTemplate) {
@@ -1077,6 +1074,9 @@ var Tab = /** @class */ (function (_super) {
                     this.getContent(ele, this.items[0].content, 'render', 0);
                 }
                 this.loadContentInitMode(ele);
+                if (this.prevIndex !== this.selectedItem) {
+                    ele.classList.remove(CLS_ACTIVE);
+                }
             }
             setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });
         }

package/src/treeview/treeview.js

@@ -343,7 +343,9 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.initialize = function () {
         this.element.setAttribute('role', 'tree');
-        this.element.setAttribute('aria-activedescendant', this.element.id + '_active');
+        if (!isNOU(this.fields.dataSource) && Array.isArray(this.fields.dataSource) && this.fields.dataSource.length !== 0) {
+            this.element.setAttribute('aria-activedescendant', this.element.id + '_active');
+        }
         this.setCssClass(null, this.cssClass);
         this.setEnableRtl();
         this.setFullRow(this.fullRowSelect);
@@ -1942,6 +1944,9 @@ var TreeView = /** @class */ (function (_super) {
         ul.style.visibility = '';
     };
     TreeView.prototype.animateHeight = function (args, start, end) {
+        if (isNullOrUndefined(args.element.parentElement)) {
+            return;
+        }
         var remaining = (args.duration - args.timeStamp) / args.duration;
         var currentHeight = (end - start) * remaining + start;
         args.element.parentElement.style.height = currentHeight + 'px';
@@ -5029,9 +5034,11 @@ var TreeView = /** @class */ (function (_super) {
                     this.updateWrap();
                     break;
                 case 'checkedNodes':
-                    if (this.showCheckBox) {
-                        this.checkedNodes = oldProp.checkedNodes;
-                        this.setCheckedNodes(newProp.checkedNodes);
+                    if (JSON.stringify(oldProp.checkedNodes) !== JSON.stringify(newProp.checkedNodes)) {
+                        if (this.showCheckBox) {
+                            this.checkedNodes = oldProp.checkedNodes;
+                            this.setCheckedNodes(newProp.checkedNodes);
+                        }
                     }
                     break;
                 case 'autoCheck':

package/styles/bootstrap5.3-lite.css

@@ -1923,6 +1923,10 @@
   -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
           box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
 }
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: var(--color-sf-secondary-bg-color-hover);
   border-radius: 4px;
@@ -1930,6 +1934,10 @@
   border-style: solid;
   border-width: 0;
 }
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons.e-btn-icon {
+  color: var(--color-sf-primary-text-color);
+}
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: var(--color-sf-secondary-bg-color-pressed);
   border-radius: 4px;

package/styles/bootstrap5.3.css

@@ -2198,6 +2198,10 @@
   -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
           box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
 }
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: var(--color-sf-secondary-bg-color-hover);
   border-radius: 4px;
@@ -2205,6 +2209,10 @@
   border-style: solid;
   border-width: 0;
 }
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons.e-btn-icon {
+  color: var(--color-sf-primary-text-color);
+}
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: var(--color-sf-secondary-bg-color-pressed);
   border-radius: 4px;

package/styles/fluent2-lite.css

@@ -7964,6 +7964,15 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: var(--color-sf-icon-color-pressed);
 }
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
+  color: var(--color-sf-content-text-color);
+}
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
 .e-menu-container .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -7987,8 +7996,8 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-separator {
   border-bottom-color: var(--color-sf-border-light);
 }
-.e-menu-wrapper .e-menu .e-menu-item:focus-visible,
-.e-menu-container .e-menu .e-menu-item:focus-visible {
+.e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
+.e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
   border-radius: 4px;
   background-color: var(--color-sf-content-bg-color);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -8056,7 +8065,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
 .e-menu-container .e-ul .e-menu-item:focus-visible {
-  background-color: var(--color-sf-content-bg-color);
+  background-color: var(--color-sf-flyout-bg-color-focus);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
   border-radius: 4px;

package/styles/fluent2.css

@@ -10107,6 +10107,15 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: var(--color-sf-icon-color-pressed);
 }
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
+  color: var(--color-sf-content-text-color);
+}
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
 .e-menu-container .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -10130,8 +10139,8 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-separator {
   border-bottom-color: var(--color-sf-border-light);
 }
-.e-menu-wrapper .e-menu .e-menu-item:focus-visible,
-.e-menu-container .e-menu .e-menu-item:focus-visible {
+.e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
+.e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
   border-radius: 4px;
   background-color: var(--color-sf-content-bg-color);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -10199,7 +10208,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
 .e-menu-container .e-ul .e-menu-item:focus-visible {
-  background-color: var(--color-sf-content-bg-color);
+  background-color: var(--color-sf-flyout-bg-color-focus);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
   border-radius: 4px;

package/styles/menu/_theme.scss

@@ -73,6 +73,13 @@
               }
               @if $skin-name == 'fluent2' {
                 border-radius: 4px;
+                &:focus-visible {
+                  color: $content-text-color;
+                  & .e-caret,
+                  & .e-menu-icon {
+                    color: $icon-color;
+                  }
+                }
               }
             }
           }
@@ -123,9 +130,11 @@
 
           &:focus-visible {
             @if $skin-name == 'fluent2' {
-              border-radius: 4px;
-              background-color: $content-bg-color;
-              box-shadow: $shadow-focus-ring1;
+              &:not(.e-selected) {
+                border-radius: 4px;
+                background-color: $content-bg-color;
+                box-shadow: $shadow-focus-ring1;
+              }
             }
             @if $skin-name == 'tailwind3' {
               box-shadow: $shadow-focus-ring2;
@@ -216,7 +225,7 @@
 
           &:focus-visible {
             @if $skin-name == 'fluent2' {
-              background-color: $content-bg-color;
+              background-color: $flyout-bg-color-focus;
               box-shadow: $shadow-focus-ring1;
               border-radius: 4px;
             }

package/styles/menu/fluent2.css

@@ -680,6 +680,15 @@
 .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
   color: var(--color-sf-icon-color-pressed);
 }
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
+  color: var(--color-sf-content-text-color);
+}
+.e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
+.e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
 .e-menu-container .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -703,8 +712,8 @@
 .e-menu-container .e-menu .e-menu-item.e-separator {
   border-bottom-color: var(--color-sf-border-light);
 }
-.e-menu-wrapper .e-menu .e-menu-item:focus-visible,
-.e-menu-container .e-menu .e-menu-item:focus-visible {
+.e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
+.e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
   border-radius: 4px;
   background-color: var(--color-sf-content-bg-color);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -772,7 +781,7 @@
 }
 .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
 .e-menu-container .e-ul .e-menu-item:focus-visible {
-  background-color: var(--color-sf-content-bg-color);
+  background-color: var(--color-sf-flyout-bg-color-focus);
   -webkit-box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
           box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
   border-radius: 4px;

package/styles/toolbar/_theme.scss

@@ -369,6 +369,12 @@
               @else {
                 box-shadow: $tbar-ext-btn-focus-box-shadow;
               }
+              @if $skin-name == 'bootstrap5.3' {
+                .e-tbar-btn-text,
+                .e-icons.e-btn-icon {
+                  color: $tbar-default-icon-color;
+                }
+              }
             }
 
             @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
@@ -392,6 +398,13 @@
               border-color: $tbar-ext-btn-hover-border-color;
               border-style: $tbar-border-nav-type;
               border-width: $tbar-btn-hover-border-size;
+
+              @if $skin-name == 'bootstrap5.3' {
+                .e-tbar-btn-text,
+                .e-icons.e-btn-icon {
+                  color: $tbar-btn-text-focus-color;
+                }
+              }
             }
   
             &:active {

package/styles/toolbar/bootstrap5.3.css

@@ -870,6 +870,10 @@
   -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
           box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
 }
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus .e-icons.e-btn-icon {
+  color: var(--color-sf-icon-color);
+}
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: var(--color-sf-secondary-bg-color-hover);
   border-radius: 4px;
@@ -877,6 +881,10 @@
   border-style: solid;
   border-width: 0;
 }
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text,
+.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover .e-icons.e-btn-icon {
+  color: var(--color-sf-primary-text-color);
+}
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: var(--color-sf-secondary-bg-color-pressed);
   border-radius: 4px;