@syncfusion/ej2-navigations 20.4.44 → 20.4.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.44
+*  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-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@20.4.43",
+  "_id": "@syncfusion/ej2-navigations@20.4.44",
   "_inBundle": false,
-  "_integrity": "sha512-i+34uRyNysO690StEyuw9/rOtO+ZTePBjmZkoChF7+FhbQx4cE3c/0EPfBsVioKxkwS9iFd1hnJSLL3NpVCiZQ==",
+  "_integrity": "sha512-WBZVEqEUCdzWUNFnD/qGx9OeZ55U7NUCJdnthrTgBQ7JETPKVpwB1xyOlT0NCEFmGvsOONlyJv9qWzzNs4wXTw==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -38,8 +38,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.43.tgz",
-  "_shasum": "a06a120de2a3bb809ab71836f16e3377c797d5ae",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.44.tgz",
+  "_shasum": "47f1f4b77ec688da78a5579c24e16dfb92f9e606",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -50,12 +50,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.44",
-    "@syncfusion/ej2-buttons": "~20.4.44",
-    "@syncfusion/ej2-data": "~20.4.44",
-    "@syncfusion/ej2-inputs": "~20.4.42",
-    "@syncfusion/ej2-lists": "~20.4.42",
-    "@syncfusion/ej2-popups": "~20.4.44"
+    "@syncfusion/ej2-base": "~20.4.48",
+    "@syncfusion/ej2-buttons": "~20.4.48",
+    "@syncfusion/ej2-data": "~20.4.48",
+    "@syncfusion/ej2-inputs": "~20.4.48",
+    "@syncfusion/ej2-lists": "~20.4.48",
+    "@syncfusion/ej2-popups": "~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",
@@ -160,6 +160,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.44",
+  "version": "20.4.48",
   "sideEffects": false
 }

package/src/common/index.d.ts

@@ -5,5 +5,5 @@ export * from './h-scroll';
 export * from './v-scroll';
 export * from './menu-scroll';
 export { MenuEventArgs, OpenCloseMenuEventArgs, BeforeOpenCloseMenuEventArgs, MenuAnimationSettings, MenuEffect } from './menu-base';
-export { MenuItem } from './menu-base';
+export { MenuItem, FieldSettings } from './menu-base';
 export { MenuItemModel, FieldSettingsModel, MenuAnimationSettingsModel } from './menu-base-model';

package/src/common/index.js

@@ -5,4 +5,4 @@ export * from './h-scroll';
 export * from './v-scroll';
 export * from './menu-scroll';
 export { MenuAnimationSettings } from './menu-base';
-export { MenuItem } from './menu-base';
+export { MenuItem, FieldSettings } from './menu-base';

package/src/common/menu-base.js

@@ -1684,6 +1684,11 @@ var MenuBase = /** @class */ (function (_super) {
                             navIdx.length = 0;
                         }
                     }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this_1.isReact && this_1.template) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this_1.portals = [];
+                    }
                     break;
                 }
             }

package/src/menu/menu.js

@@ -79,6 +79,7 @@ var Menu = /** @class */ (function (_super) {
             catch (e) {
                 /* action on catch */
             }
+            this.updateMenuItems(this.items);
         }
         else {
             this.updateMenuItems(this.items);

package/src/sidebar/sidebar.js

@@ -198,7 +198,7 @@ var Sidebar = /** @class */ (function (_super) {
     };
     Sidebar.prototype.destroyBackDrop = function () {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
-        if (this.target && this.showBackdrop && sibling) {
+        if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
             removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
         }
         else if (this.showBackdrop && this.modal) {

package/src/tab/tab.js

@@ -427,6 +427,14 @@ var Tab = /** @class */ (function (_super) {
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
         attributes(this.hdrEle, { role: 'tablist' });
+        if (!isNOU(this.element.getAttribute('aria-label'))) {
+            this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));
+            this.element.removeAttribute('aria-label');
+        }
+        else if (!isNOU(this.element.getAttribute('aria-labelledby'))) {
+            this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
+            this.element.removeAttribute('aria-labelledby');
+        }
         this.setCloseButton(this.showCloseButton);
         var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNOU(toolbarHeader)) {
@@ -1100,10 +1108,6 @@ var Tab = /** @class */ (function (_super) {
             return;
         }
         if (!this.isTemplate) {
-            var prev = this.tbItem[this.prevIndex];
-            if (!isNOU(prev)) {
-                prev.firstElementChild.removeAttribute('aria-controls');
-            }
             attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });
         }
         var id = trg.id;

package/src/toolbar/toolbar.js

@@ -438,8 +438,11 @@ var Toolbar = /** @class */ (function (_super) {
                     if (popObj && closest(trgt, '.e-popup')) {
                         var popEle = popObj.element;
                         var popFrstEle = popEle.firstElementChild;
-                        if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {
-                            return;
+                        if ((value === 'previous' && popFrstEle === clst)) {
+                            popEle.lastElementChild.firstChild.focus();
+                        }
+                        else if (value === 'next' && popEle.lastElementChild === clst) {
+                            popFrstEle.firstChild.focus();
                         }
                         else {
                             this.eleFocus(clst, value);
@@ -533,7 +536,7 @@ var Toolbar = /** @class */ (function (_super) {
         }
     };
     Toolbar.prototype.eleContains = function (el) {
-        return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);
+        return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
     };
     Toolbar.prototype.eleFocus = function (closest, pos) {
         var sib = Object(closest)[pos + 'ElementSibling'];
@@ -572,6 +575,15 @@ var Toolbar = /** @class */ (function (_super) {
                 }
             }
         }
+        else if (!isNOU(closest)) {
+            var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE + ')' + ':not(.' + CLS_HIDDEN + ')');
+            if (pos === 'next' && tbrItems) {
+                this.elementFocus(tbrItems[0]);
+            }
+            else if (pos === 'previous' && tbrItems) {
+                this.elementFocus(tbrItems[tbrItems.length - 1]);
+            }
+        }
     };
     Toolbar.prototype.clickHandler = function (e) {
         var _this = this;

package/src/treeview/treeview.d.ts

@@ -275,6 +275,18 @@ export interface DataSourceChangedEventArgs {
     data: {
         [key: string]: Object;
     }[];
+    /**
+     * Return the action which triggers the event
+     *
+     */
+    action: string;
+    /**
+     * Return the new node data of updated data source
+     *
+     */
+    nodeData: {
+        [key: string]: Object;
+    }[];
 }
 /**
  * Interface that holds the node details.
@@ -523,6 +535,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private isFirstRender;
     private isNodeDropped;
     private isInteracted;
+    private isRightClick;
     /**
      * Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
      * desktop, hold the mouse on the node, drag it to the target node and drop the node by releasing

package/src/treeview/treeview.js

@@ -217,6 +217,7 @@ var TreeView = /** @class */ (function (_super) {
         // Specifies whether the node is dropped or not
         _this.isNodeDropped = false;
         _this.isInteracted = false;
+        _this.isRightClick = false;
         _this.mouseDownStatus = false;
         return _this;
     }
@@ -1526,6 +1527,9 @@ var TreeView = /** @class */ (function (_super) {
                     }
                 }
             }
+            if (event.originalEvent.which === 3) {
+                this.isRightClick = true;
+            }
             this.triggerClickEvent(event.originalEvent, li);
         }
     };
@@ -1964,7 +1968,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.isLoaded) {
             eventArgs = this.getSelectEvent(li, 'select', e);
             this.trigger('nodeSelecting', eventArgs, function (observedArgs) {
-                if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
+                if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {
                     _this.nodeSelectAction(li, e, observedArgs, multiSelect);
                 }
             });
@@ -2004,6 +2008,7 @@ var TreeView = /** @class */ (function (_super) {
             eventArgs.nodeData = this.getNodeData(li);
             this.trigger('nodeSelected', eventArgs);
         }
+        this.isRightClick = false;
     };
     TreeView.prototype.unselectNode = function (li, e) {
         var _this = this;
@@ -2831,7 +2836,7 @@ var TreeView = /** @class */ (function (_super) {
             newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
             _this.updateText(liEle, txtEle, newText, isInput);
             if (observedArgs.oldText !== newText) {
-                _this.triggerEvent();
+                _this.triggerEvent('nodeEdited', [_this.getNode(liEle)]);
             }
         });
     };
@@ -3146,10 +3151,12 @@ var TreeView = /** @class */ (function (_super) {
         var level;
         var drop = false;
         var dragInstance;
+        var nodeData = [];
+        var liArray = [];
         dragInstance = e.dragData.draggable;
-        for (var i = 0; i < dragInstance.ej2_instances.length; i++) {
-            if (dragInstance.ej2_instances[i] instanceof TreeView_1) {
-                dragObj = dragInstance.ej2_instances[i];
+        for (var i_1 = 0; i_1 < dragInstance.ej2_instances.length; i_1++) {
+            if (dragInstance.ej2_instances[i_1] instanceof TreeView_1) {
+                dragObj = dragInstance.ej2_instances[i_1];
                 break;
             }
         }
@@ -3157,6 +3164,7 @@ var TreeView = /** @class */ (function (_super) {
             var dragTarget = dragObj.dragTarget;
             var dragLi = (closest(dragTarget, '.' + LISTITEM));
             var dropLi = (closest(dropTarget, '.' + LISTITEM));
+            liArray.push(dragLi);
             if (dropLi == null && dropTarget.classList.contains(ROOT)) {
                 dropLi = dropTarget.firstElementChild;
             }
@@ -3170,20 +3178,21 @@ var TreeView = /** @class */ (function (_super) {
             }
             if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {
                 var sNodes = selectAll('.' + ACTIVE, dragObj.element);
+                liArray = sNodes;
                 if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
-                    for (var i = sNodes.length - 1; i >= 0; i--) {
-                        if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
+                    for (var i_2 = sNodes.length - 1; i_2 >= 0; i_2--) {
+                        if (dropLi.isSameNode(sNodes[i_2]) || this.isDescendant(sNodes[i_2], dropLi)) {
                             continue;
                         }
-                        this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);
+                        this.appendNode(dropTarget, sNodes[i_2], dropLi, e, dragObj, offsetY);
                     }
                 }
                 else {
-                    for (var i = 0; i < sNodes.length; i++) {
-                        if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
+                    for (var i_3 = 0; i_3 < sNodes.length; i_3++) {
+                        if (dropLi.isSameNode(sNodes[i_3]) || this.isDescendant(sNodes[i_3], dropLi)) {
                             continue;
                         }
-                        this.appendNode(dropTarget, sNodes[i], dropLi, e, dragObj, offsetY);
+                        this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
                     }
                 }
             }
@@ -3196,13 +3205,16 @@ var TreeView = /** @class */ (function (_super) {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
+        for (var i = 0; i < liArray.length; i++) {
+            nodeData.push(this.getNode(liArray[i]));
+        }
         this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
         if (dragObj.element.id !== this.element.id) {
-            dragObj.triggerEvent();
+            dragObj.triggerEvent('nodeDropped', nodeData);
             this.isNodeDropped = true;
             this.fields.dataSource = this.treeData;
         }
-        this.triggerEvent();
+        this.triggerEvent('nodeDropped', nodeData);
     };
     TreeView.prototype.appendNode = function (dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
         var checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
@@ -4025,9 +4037,16 @@ var TreeView = /** @class */ (function (_super) {
         }
         return removedData;
     };
-    TreeView.prototype.triggerEvent = function () {
+    TreeView.prototype.triggerEvent = function (action, node) {
         this.renderReactTemplates();
-        var eventArgs = { data: this.treeData };
+        if (action === 'addNodes') {
+            var nodeData = [];
+            for (var i = 0; i < node.length; i++) {
+                nodeData.push(this.getNode(this.getElement(isNOU(node[i][this.fields.id]) ? getValue(this.fields.id, node[i]).toString() : null)));
+            }
+            node = nodeData;
+        }
+        var eventArgs = { data: this.treeData, action: action, nodeData: node };
         this.trigger('dataSourceChanged', eventArgs);
     };
     TreeView.prototype.wireInputEvents = function (inpEle) {
@@ -4405,8 +4424,10 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.deleteSuccess = function (nodes) {
+        var nodeData = [];
         for (var i = 0, len = nodes.length; i < len; i++) {
             var liEle = this.getElement(nodes[i]);
+            nodeData.push(this.getNode(liEle));
             if (isNOU(liEle)) {
                 continue;
             }
@@ -4416,7 +4437,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.dataType === 1) {
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
-        this.triggerEvent();
+        this.triggerEvent('removeNode', nodeData);
     };
     TreeView.prototype.editSucess = function (target, newText, prevent) {
         var liEle = this.getElement(target);
@@ -4432,12 +4453,12 @@ var TreeView = /** @class */ (function (_super) {
             proxy.renderChildNodes(dropLi, null, function () {
                 dropUl = dropLi.querySelector('.' + PARENTITEM);
                 proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);
-                proxy.triggerEvent();
+                proxy.triggerEvent('addNodes', nodes);
             });
         }
         else {
             this.addGivenNodes(nodes, dropLi, index, true);
-            this.triggerEvent();
+            this.triggerEvent('addNodes', nodes);
         }
     };
     TreeView.prototype.dmFailure = function (e, target, prevent) {
@@ -4648,7 +4669,7 @@ var TreeView = /** @class */ (function (_super) {
         }
         if ((this.fields.dataSource instanceof DataManager === false)) {
             this.preventExpand = false;
-            this.triggerEvent();
+            this.triggerEvent('addNodes', nodes);
         }
     };
     /**
@@ -4800,11 +4821,13 @@ var TreeView = /** @class */ (function (_super) {
      */
     TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {
         var dropLi = this.getElement(target);
+        var nodeData = [];
         if (isNOU(dropLi)) {
             return;
         }
         for (var i = 0; i < sourceNodes.length; i++) {
             var dragLi = this.getElement(sourceNodes[i]);
+            nodeData.push(this.getNode(dragLi));
             if (isNOU(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {
                 continue;
             }
@@ -4814,7 +4837,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.fields.dataSource instanceof DataManager === false) {
             this.preventExpand = false;
         }
-        this.triggerEvent();
+        this.triggerEvent('moveNodes', nodeData);
     };
     /**
      * Refreshes a particular node of the TreeView.
@@ -4918,7 +4941,7 @@ var TreeView = /** @class */ (function (_super) {
             addClass([liEle], ACTIVE);
         }
         this.isRefreshed = false;
-        this.triggerEvent();
+        this.triggerEvent('refreshNode', [this.getNode(liEle)]);
     };
     /**
      * Removes the collection of TreeView nodes by passing the array of node details as argument to this method.

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/_theme-mixin.scss

@@ -1,20 +1,24 @@
 @mixin focused-icon-color {
-  & .e-caret {
-    color: $cmenu-caret-color;
-  }
-
-  & .e-menu-icon {
-    color: $cmenu-icon-color;
+  @if $skin-name != 'bootstrap5' {
+    & .e-caret {
+      color: $cmenu-caret-color;
+    }
+  
+    & .e-menu-icon {
+      color: $cmenu-icon-color;
+    }
   }
 }
 
 @mixin selected-icon-color {
-  & .e-caret {
-    color: $cmenu-caret-hover-color;
-  }
-
-  & .e-menu-icon {
-    color: $cmenu-hover-icon-color;
+  @if $skin-name != 'bootstrap5' {
+    & .e-caret {
+      color: $cmenu-caret-hover-color;
+    }
+  
+    & .e-menu-icon {
+      color: $cmenu-hover-icon-color;
+    }
   }
 }
 

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);