@syncfusion/ej2-react-navigations 20.4.43 → 20.4.48

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 ## [Unreleased]
 
+### Tab
+
+#### Bug Fixes
+
+- `#I427978` - Fixed an issue with cyclic navigation using arrow keys, where focus would shift to the first element after reaching the last element, and vice versa. Also, accessibility has been enhanced using the aria-label attributes.
+
+### Menu
+
+#### Bug Fixes
+
+- `#I425152` - The issue with "Menu item not render properly when we use ItemTemplate with custom menu items" has been resolved.
+
+### Sidebar
+
+#### Bug Fixes
+
+- `#F179759` - Console error while using the showBackdrop property in the Sidebar component has been resolved.
+
+### TreeView
+
+#### Bug Fixes
+
+- `#I428488` - Included the "action" and "nodeData" values in the dataSourceChanged event.
+- `#I428766` - Alignment issue in TreeView node without a sub-child has been resolved.
+
+## 20.4.44 (2023-01-18)
+
+### ContextMenu
+
+#### Bug Fixes
+
+- `#I425173` - The issue with "Context menu Submenus not opening properly with multiple levels " has been resolved.
+
+## 20.4.43 (2023-01-10)
+
 ### ContextMenu
 
 #### Bug Fixes

package/dist/ej2-react-navigations.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-navigations.min.js
-*  version : 20.4.43
+*  version : 20.4.48
 *  Copyright Syncfusion Inc. 2001 - 2020. 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/dist/ej2-react-navigations.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-navigations.umd.min.js
-*  version : 20.4.43
+*  version : 20.4.48
 *  Copyright Syncfusion Inc. 2001 - 2020. 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-react-navigations@*",
-  "_id": "@syncfusion/ej2-react-navigations@20.4.42",
+  "_id": "@syncfusion/ej2-react-navigations@20.4.44",
   "_inBundle": false,
-  "_integrity": "sha512-OIZ9Tp6K33aqZO6O+PKIQ4ZsY7Zlv/Ts79Txqg8TOJC8hwfhoe0XKQpJbjUE9ZXa0pnQRMd9AwrL5vYX5J8Xjw==",
+  "_integrity": "sha512-0WhTMUon8rH73zhySx4WK4bpB/JZENM7zEa1Gl05QrkvpOWdp8uuZZ11FQYWNkku/0Y77pOlBtIq5cwHOsbrMQ==",
   "_location": "/@syncfusion/ej2-react-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-navigations/-/ej2-react-navigations-20.4.42.tgz",
-  "_shasum": "24c74aac5c614de957962478772b0eb0b90dbf67",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-navigations/-/ej2-react-navigations-20.4.44.tgz",
+  "_shasum": "6a2a4deaef693ffe1e9a4206f1d0d020d66e6216",
   "_spec": "@syncfusion/ej2-react-navigations@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.42",
-    "@syncfusion/ej2-navigations": "20.4.43",
-    "@syncfusion/ej2-react-base": "~20.4.42"
+    "@syncfusion/ej2-base": "~20.4.48",
+    "@syncfusion/ej2-navigations": "20.4.48",
+    "@syncfusion/ej2-react-base": "~20.4.48"
   },
   "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 for React",
@@ -66,6 +66,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "20.4.43",
+  "version": "20.4.48",
   "sideEffects": false
 }

package/styles/bootstrap4.css

@@ -8098,7 +8098,7 @@
 .e-treeview .e-icon-expandable {
   display: inline-block;
   height: 20px;
-  margin: 0 2px 0 -24px;
+  margin: 0 4px 0 -24px;
   vertical-align: middle;
   width: 20px;
 }

package/styles/bootstrap5-dark.css

@@ -3663,14 +3663,6 @@
 .e-contextmenu-container ul .e-menu-item.e-menu-header {
   border-bottom-color: #444c54;
 }
-.e-contextmenu-wrapper ul .e-menu-item .e-caret,
-.e-contextmenu-container ul .e-menu-item .e-caret {
-  color: #adb5bd;
-}
-.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item .e-menu-icon {
-  color: #adb5bd;
-}
 .e-contextmenu-wrapper ul .e-menu-item .e-menu-url,
 .e-contextmenu-container ul .e-menu-item .e-menu-url {
   color: #fff;
@@ -3682,14 +3674,6 @@
   outline: 0 solid #444c54;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-caret {
-  color: #adb5bd;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-menu-icon {
-  color: #adb5bd;
-}
 .e-contextmenu-wrapper ul .e-menu-item.e-selected,
 .e-contextmenu-container ul .e-menu-item.e-selected {
   background-color: #0d6efd;
@@ -3697,14 +3681,6 @@
   outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
-  color: #adb5bd;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-menu-icon {
-  color: #adb5bd;
-}
 .e-contextmenu-wrapper ul .e-disabled,
 .e-contextmenu-container ul .e-disabled {
   color: rgba(255, 255, 255, 0.65);
@@ -8212,7 +8188,7 @@
 .e-treeview .e-icon-expandable {
   display: inline-block;
   height: 20px;
-  margin: 0 2px 0 -25px;
+  margin: 0 4px 0 -25px;
   vertical-align: middle;
   width: 20px;
 }
@@ -9683,14 +9659,6 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #444c54;
 }
-.e-menu-wrapper .e-menu .e-menu-item .e-caret,
-.e-menu-container .e-menu .e-menu-item .e-caret {
-  color: #adb5bd;
-}
-.e-menu-wrapper .e-menu .e-menu-item .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item .e-menu-icon {
-  color: #adb5bd;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-menu-header,
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #444c54;
@@ -9706,14 +9674,6 @@ ejs-sidebar {
   outline-offset: 0;
   background-color: #495057;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
-  color: #adb5bd;
-}
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
-  color: #adb5bd;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-selected {
   color: #fff;

package/styles/bootstrap5.css

@@ -3663,14 +3663,6 @@
 .e-contextmenu-container ul .e-menu-item.e-menu-header {
   border-bottom-color: #dee2e6;
 }
-.e-contextmenu-wrapper ul .e-menu-item .e-caret,
-.e-contextmenu-container ul .e-menu-item .e-caret {
-  color: #6c757d;
-}
-.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item .e-menu-icon {
-  color: #6c757d;
-}
 .e-contextmenu-wrapper ul .e-menu-item .e-menu-url,
 .e-contextmenu-container ul .e-menu-item .e-menu-url {
   color: #212529;
@@ -3682,14 +3674,6 @@
   outline: 0 solid #dee2e6;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-caret {
-  color: #6c757d;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-menu-icon {
-  color: #6c757d;
-}
 .e-contextmenu-wrapper ul .e-menu-item.e-selected,
 .e-contextmenu-container ul .e-menu-item.e-selected {
   background-color: #0d6efd;
@@ -3697,14 +3681,6 @@
   outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
-  color: #6c757d;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-menu-icon {
-  color: #6c757d;
-}
 .e-contextmenu-wrapper ul .e-disabled,
 .e-contextmenu-container ul .e-disabled {
   color: rgba(33, 37, 41, 0.65);
@@ -8212,7 +8188,7 @@
 .e-treeview .e-icon-expandable {
   display: inline-block;
   height: 20px;
-  margin: 0 2px 0 -25px;
+  margin: 0 4px 0 -25px;
   vertical-align: middle;
   width: 20px;
 }
@@ -9683,14 +9659,6 @@ ejs-sidebar {
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #dee2e6;
 }
-.e-menu-wrapper .e-menu .e-menu-item .e-caret,
-.e-menu-container .e-menu .e-menu-item .e-caret {
-  color: #6c757d;
-}
-.e-menu-wrapper .e-menu .e-menu-item .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item .e-menu-icon {
-  color: #6c757d;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-menu-header,
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #dee2e6;
@@ -9706,14 +9674,6 @@ ejs-sidebar {
   outline-offset: 0;
   background-color: #dee2e6;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
-  color: #6c757d;
-}
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
-  color: #6c757d;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-selected {
   color: #212529;

package/styles/context-menu/bootstrap5-dark.css

@@ -304,14 +304,6 @@
 .e-contextmenu-container ul .e-menu-item.e-menu-header {
   border-bottom-color: #444c54;
 }
-.e-contextmenu-wrapper ul .e-menu-item .e-caret,
-.e-contextmenu-container ul .e-menu-item .e-caret {
-  color: #adb5bd;
-}
-.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item .e-menu-icon {
-  color: #adb5bd;
-}
 .e-contextmenu-wrapper ul .e-menu-item .e-menu-url,
 .e-contextmenu-container ul .e-menu-item .e-menu-url {
   color: #fff;
@@ -323,14 +315,6 @@
   outline: 0 solid #444c54;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-caret {
-  color: #adb5bd;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-menu-icon {
-  color: #adb5bd;
-}
 .e-contextmenu-wrapper ul .e-menu-item.e-selected,
 .e-contextmenu-container ul .e-menu-item.e-selected {
   background-color: #0d6efd;
@@ -338,14 +322,6 @@
   outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
-  color: #adb5bd;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-menu-icon {
-  color: #adb5bd;
-}
 .e-contextmenu-wrapper ul .e-disabled,
 .e-contextmenu-container ul .e-disabled {
   color: rgba(255, 255, 255, 0.65);

package/styles/context-menu/bootstrap5.css

@@ -304,14 +304,6 @@
 .e-contextmenu-container ul .e-menu-item.e-menu-header {
   border-bottom-color: #dee2e6;
 }
-.e-contextmenu-wrapper ul .e-menu-item .e-caret,
-.e-contextmenu-container ul .e-menu-item .e-caret {
-  color: #6c757d;
-}
-.e-contextmenu-wrapper ul .e-menu-item .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item .e-menu-icon {
-  color: #6c757d;
-}
 .e-contextmenu-wrapper ul .e-menu-item .e-menu-url,
 .e-contextmenu-container ul .e-menu-item .e-menu-url {
   color: #212529;
@@ -323,14 +315,6 @@
   outline: 0 solid #dee2e6;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-caret {
-  color: #6c757d;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-focused .e-menu-icon {
-  color: #6c757d;
-}
 .e-contextmenu-wrapper ul .e-menu-item.e-selected,
 .e-contextmenu-container ul .e-menu-item.e-selected {
   background-color: #0d6efd;
@@ -338,14 +322,6 @@
   outline: 0 solid #0d6efd;
   outline-offset: 0;
 }
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-caret,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
-  color: #6c757d;
-}
-.e-contextmenu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
-.e-contextmenu-container ul .e-menu-item.e-selected .e-menu-icon {
-  color: #6c757d;
-}
 .e-contextmenu-wrapper ul .e-disabled,
 .e-contextmenu-container ul .e-disabled {
   color: rgba(33, 37, 41, 0.65);

package/styles/menu/bootstrap5-dark.css

@@ -921,14 +921,6 @@
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #444c54;
 }
-.e-menu-wrapper .e-menu .e-menu-item .e-caret,
-.e-menu-container .e-menu .e-menu-item .e-caret {
-  color: #adb5bd;
-}
-.e-menu-wrapper .e-menu .e-menu-item .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item .e-menu-icon {
-  color: #adb5bd;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-menu-header,
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #444c54;
@@ -944,14 +936,6 @@
   outline-offset: 0;
   background-color: #495057;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
-  color: #adb5bd;
-}
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
-  color: #adb5bd;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-selected {
   color: #fff;

package/styles/menu/bootstrap5.css

@@ -921,14 +921,6 @@
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #dee2e6;
 }
-.e-menu-wrapper .e-menu .e-menu-item .e-caret,
-.e-menu-container .e-menu .e-menu-item .e-caret {
-  color: #6c757d;
-}
-.e-menu-wrapper .e-menu .e-menu-item .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item .e-menu-icon {
-  color: #6c757d;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-menu-header,
 .e-menu-container .e-menu .e-menu-item.e-menu-header {
   border-bottom-color: #dee2e6;
@@ -944,14 +936,6 @@
   outline-offset: 0;
   background-color: #dee2e6;
 }
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
-  color: #6c757d;
-}
-.e-menu-wrapper .e-menu .e-menu-item.e-focused .e-menu-icon,
-.e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
-  color: #6c757d;
-}
 .e-menu-wrapper .e-menu .e-menu-item.e-selected,
 .e-menu-container .e-menu .e-menu-item.e-selected {
   color: #212529;

package/styles/treeview/bootstrap4.css

@@ -410,7 +410,7 @@
 .e-treeview .e-icon-expandable {
   display: inline-block;
   height: 20px;
-  margin: 0 2px 0 -24px;
+  margin: 0 4px 0 -24px;
   vertical-align: middle;
   width: 20px;
 }

package/styles/treeview/bootstrap5-dark.css

@@ -446,7 +446,7 @@
 .e-treeview .e-icon-expandable {
   display: inline-block;
   height: 20px;
-  margin: 0 2px 0 -25px;
+  margin: 0 4px 0 -25px;
   vertical-align: middle;
   width: 20px;
 }

package/styles/treeview/bootstrap5.css

@@ -446,7 +446,7 @@
 .e-treeview .e-icon-expandable {
   display: inline-block;
   height: 20px;
-  margin: 0 2px 0 -25px;
+  margin: 0 4px 0 -25px;
   vertical-align: middle;
   width: 20px;
 }