@syncfusion/ej2-navigations 29.2.8 → 30.1.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.2.8
+*  version : 30.1.39
 *  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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-navigations",
-  "version": "29.2.8",
+  "version": "30.1.39",
   "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",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,12 +8,12 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
-    "@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.8"
+    "@syncfusion/ej2-base": "~30.1.38",
+    "@syncfusion/ej2-buttons": "~30.1.37",
+    "@syncfusion/ej2-data": "~30.1.38",
+    "@syncfusion/ej2-inputs": "~30.1.38",
+    "@syncfusion/ej2-lists": "~30.1.37",
+    "@syncfusion/ej2-popups": "~30.1.37"
   },
   "devDependencies": {},
   "keywords": [

package/src/carousel/carousel.js

@@ -167,9 +167,6 @@ var Carousel = /** @class */ (function (_super) {
                     }
                     break;
                 case 'enableTouchSwipe':
-                    if (!this.enableTouchSwipe && this.touchModule) {
-                        this.touchModule.destroy();
-                    }
                     if (this.element.querySelector("." + CLS_ITEMS)) {
                         this.renderTouchActions();
                     }
@@ -572,9 +569,6 @@ var Carousel = /** @class */ (function (_super) {
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     };
     Carousel.prototype.renderTouchActions = function () {
-        if (!this.enableTouchSwipe) {
-            return;
-        }
         this.touchModule = new Touch(this.element, { swipe: this.swipeHandler.bind(this) });
     };
     Carousel.prototype.applyAnimation = function () {
@@ -1142,7 +1136,7 @@ var Carousel = /** @class */ (function (_super) {
         }
     };
     Carousel.prototype.wireEvents = function () {
-        if (this.animationEffect !== 'Custom' && this.enableTouchSwipe) {
+        if (this.animationEffect !== 'Custom') {
             this.swipeModehandlers();
         }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);

package/src/context-menu/context-menu-model.d.ts

@@ -1,4 +1,4 @@
-import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { getZindexPartial } from '@syncfusion/ej2-popups';import { MenuBase, MenuItem } from '../common/menu-base';import { MenuItemModel } from './../common/menu-base-model';
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, INotifyPropertyChanged, Property, isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';import { getZindexPartial } from '@syncfusion/ej2-popups';import { MenuBase, MenuItem } from '../common/menu-base';import { MenuItemModel } from './../common/menu-base-model';
 import {MenuBaseModel} from "../common/menu-base-model";
 
 /**

package/src/context-menu/context-menu.d.ts

@@ -82,6 +82,7 @@ export declare class ContextMenu extends MenuBase implements INotifyPropertyChan
      * @returns {void}
      */
     close(): void;
+    private addTemplateClass;
     /**
      * Called internally if any of the property value changed.
      *

package/src/context-menu/context-menu.js

@@ -19,9 +19,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 /* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path='../common/menu-base-model.d.ts'/>
-import { attributes, getUniqueID, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';
+import { attributes, getUniqueID, Collection, NotifyPropertyChanges, Property, isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';
 import { getZindexPartial } from '@syncfusion/ej2-popups';
 import { MenuBase, MenuItem } from '../common/menu-base';
+var CONTEXTMENUTEMPLATE = 'e-contextmenu-template';
 /**
  * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.
  * ```html
@@ -59,6 +60,7 @@ var ContextMenu = /** @class */ (function (_super) {
     };
     ContextMenu.prototype.initialize = function () {
         this.template = this.itemTemplate ? this.itemTemplate : null;
+        this.addTemplateClass();
         _super.prototype.initialize.call(this);
         attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
@@ -84,6 +86,12 @@ var ContextMenu = /** @class */ (function (_super) {
     ContextMenu.prototype.close = function () {
         _super.prototype.closeMenu.call(this);
     };
+    ContextMenu.prototype.addTemplateClass = function () {
+        if (!isNullOrUndefined(this.itemTemplate) && typeof this.itemTemplate === 'function' ||
+            (typeof this.itemTemplate === 'string' && this.itemTemplate !== '')) {
+            addClass([this.element], CONTEXTMENUTEMPLATE);
+        }
+    };
     /**
      * Called internally if any of the property value changed.
      *
@@ -107,6 +115,8 @@ var ContextMenu = /** @class */ (function (_super) {
                     break;
                 case 'itemTemplate':
                     this.itemTemplate = newProp.itemTemplate;
+                    removeClass([this.element], CONTEXTMENUTEMPLATE);
+                    this.addTemplateClass();
                     this.refresh();
             }
         }

package/src/sidebar/sidebar.js

@@ -202,6 +202,8 @@ var Sidebar = /** @class */ (function (_super) {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
             removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
+            this.defaultBackdropDiv.remove();
+            this.defaultBackdropDiv = null;
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -304,7 +306,9 @@ var Sidebar = /** @class */ (function (_super) {
                 removeClass([_this.element], CLOSE);
                 setStyle(_this.element, { 'width': formatUnit(_this.width) });
                 _this.setType(_this.type);
-                _this.createBackDrop();
+                if (_this.targetEle && !_this.targetEle.querySelector('.e-sidebar-overlay')) {
+                    _this.createBackDrop();
+                }
                 _this.setAnimation();
                 if (_this.type === 'Slide') {
                     document.body.classList.add('e-sidebar-overflow');

package/src/stepper/stepper.js

@@ -225,11 +225,6 @@ var Stepper = /** @class */ (function (_super) {
     Stepper.prototype.updateAnimation = function () {
         var progressEle = this.element.querySelector('.e-progressbar-value');
         if (this.animation.enable) {
-            if (this.animation.duration >= 0) {
-                if (progressEle) {
-                    progressEle.style.setProperty('--duration', ((this.animation.duration) + 'ms'));
-                }
-            }
             if (this.animation.delay >= 0) {
                 if (progressEle) {
                     progressEle.style.setProperty('--delay', ((this.animation.delay) + 'ms'));
@@ -808,6 +803,9 @@ var Stepper = /** @class */ (function (_super) {
         }
     };
     Stepper.prototype.navigationHandler = function (index, stepStatus, isUpdated) {
+        if (index !== this.activeStep && this.progressbar) {
+            this.progressbar.style.transitionDuration = this.animation.duration + 'ms';
+        }
         index = Math.min(index, this.steps.length - 1);
         var Itemslength = this.stepperItemElements.length;
         if (index >= 0 && index < Itemslength - 1) {
@@ -878,6 +876,9 @@ var Stepper = /** @class */ (function (_super) {
             this.updateIndicatorStatus(i, itemElement);
         }
         this.updateStepInteractions();
+        if (this.progressbar) {
+            this.progressbar.style.transitionDuration = '0ms';
+        }
     };
     Stepper.prototype.calculateProgressbarPos = function () {
         var _this = this;

package/src/tab/tab.js

@@ -1408,7 +1408,9 @@ var Tab = /** @class */ (function (_super) {
                 }
                 break;
             case 'openPopup':
-                e.preventDefault();
+                if (!isNOU(e.target) && (e.target.classList.contains(CLS_WRAP))) {
+                    e.preventDefault();
+                }
                 if (!isNOU(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {
                     this.popObj.show(this.show);
                 }

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

@@ -1,5 +1,5 @@
 import { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';import { selectAll, setStyleAttribute as setStyle, KeyboardEventArgs, select } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { VScroll } from '../common/v-scroll';
-import {OverflowOption,ItemType,DisplayMode,ItemAlign,ClickEventArgs,OverflowMode,BeforeCreateArgs} from "./toolbar";
+import {OverflowOption,ItemType,DisplayMode,ItemAlign,ClickEventArgs,OverflowMode,BeforeCreateArgs,KeyDownEventArgs} from "./toolbar";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -284,4 +284,11 @@ export interface ToolbarModel extends ComponentModel{
      */
     beforeCreate?: EmitType<BeforeCreateArgs>;
 
+    /**
+     * The event will be fired when the keyboard interaction occurs on the Toolbar.
+     *
+     * @event keyDown
+     */
+    keyDown?: EmitType<KeyDownEventArgs>;
+
 }

package/src/toolbar/toolbar.d.ts

@@ -1,4 +1,5 @@
 import { Component, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
+import { KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
 import { ToolbarModel, ItemModel } from './toolbar-model';
 /**
@@ -65,6 +66,17 @@ export interface BeforeCreateArgs extends BaseEventArgs {
     /** Specifies the scrolling distance in scroller. */
     scrollStep: number;
 }
+/** An interface that holds options to control keyDown event in the toolbar. */
+export interface KeyDownEventArgs extends BaseEventArgs {
+    /** Defines the keyboard event arguments. */
+    originalEvent: KeyboardEventArgs;
+    /** Defines the prevent action. */
+    cancel?: boolean;
+    /** Defines the current Toolbar item. */
+    currentItem?: HTMLElement;
+    /** Defines the next Toolbar item. */
+    nextItem?: HTMLElement;
+}
 /**
  * An item object that is used to configure Toolbar commands.
  */
@@ -347,6 +359,12 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
      * @event beforeCreate
      */
     beforeCreate: EmitType<BeforeCreateArgs>;
+    /**
+     * The event will be fired when the keyboard interaction occurs on the Toolbar.
+     *
+     * @event keyDown
+     */
+    keyDown: EmitType<KeyDownEventArgs>;
     /**
      * Removes the control from the DOM and also removes all its related events.
      *
@@ -382,6 +400,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private remove;
     private elementFocus;
     private clstElement;
+    private getNextFocusableItem;
     private keyHandling;
     private keyActionHandler;
     /**

package/src/toolbar/toolbar.js

@@ -377,6 +377,38 @@ var Toolbar = /** @class */ (function (_super) {
         }
         return clst;
     };
+    Toolbar.prototype.getNextFocusableItem = function (currentItem, action) {
+        var selector = "." + CLS_ITEM + ":not(." + CLS_DISABLE + "):not(." + CLS_SEPARATOR + "):not(." + CLS_HIDDEN + ")";
+        var items = Array.from(this.element.querySelectorAll(selector));
+        var currentIndex = items.indexOf(currentItem);
+        if (currentIndex < 0) {
+            return null;
+        }
+        var nextIndex;
+        switch (action) {
+            case 'moveRight':
+            case 'moveDown':
+            case 'tab':
+                nextIndex = (currentIndex + 1) % items.length;
+                break;
+            case 'moveLeft':
+            case 'moveUp':
+                nextIndex = (currentIndex - 1 + items.length) % items.length;
+                break;
+            case 'home':
+                nextIndex = 0;
+                break;
+            case 'end':
+                nextIndex = items.length - 1;
+                break;
+            default:
+                nextIndex = currentIndex;
+        }
+        if (nextIndex >= 0 && nextIndex < items.length) {
+            return items[parseInt(nextIndex.toString(), 10)];
+        }
+        return null;
+    };
     Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {
         var popObj = this.popObj;
         var rootEle = this.element;
@@ -442,19 +474,30 @@ var Toolbar = /** @class */ (function (_super) {
                 if (!this.isVertical) {
                     if (popObj && closest(trgt, '.e-popup')) {
                         var popEle = popObj.element;
-                        var popFrstEle = popEle.firstElementChild;
-                        if ((value === 'previous' && popFrstEle === clst)) {
-                            popEle.lastElementChild.firstChild.focus();
+                        if ((value === 'previous' && popEle.firstElementChild === clst)) {
+                            var lastVisibleEle = this.focusLastVisibleEle([].slice.call(popEle.children));
+                            if (lastVisibleEle) {
+                                this.elementFocus(lastVisibleEle);
+                            }
                         }
                         else if (value === 'next' && popEle.lastElementChild === clst) {
-                            popFrstEle.firstChild.focus();
+                            var firstVisibleEle = this.focusFirstVisibleEle([].slice.call(popEle.children));
+                            if (firstVisibleEle) {
+                                this.elementFocus(firstVisibleEle);
+                            }
                         }
                         else {
                             this.eleFocus(clst, value);
                         }
                     }
                     else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {
-                        this.elementFocus(clst);
+                        var skipEle = this.eleContains(clst);
+                        if (skipEle) {
+                            this.eleFocus(clst, value);
+                        }
+                        else {
+                            this.elementFocus(clst);
+                        }
                     }
                 }
                 else {
@@ -500,8 +543,10 @@ var Toolbar = /** @class */ (function (_super) {
         }
     };
     Toolbar.prototype.keyActionHandler = function (e) {
+        var _this = this;
         var trgt = e.target;
-        if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE)) {
+        if ((e.action === 'home' || e.action === 'end' || e.action === 'moveRight' || e.action === 'moveLeft' || e.action === 'moveUp' || e.action === 'moveDown')
+            && (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE))) {
             return;
         }
         e.preventDefault();
@@ -509,7 +554,19 @@ var Toolbar = /** @class */ (function (_super) {
         var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
         var clst = this.clstElement(tbrNavChk, trgt);
         if (clst || tbarScrollChk) {
-            this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+            var currentItem = clst;
+            var nextItem = this.getNextFocusableItem(currentItem, e.action);
+            var keyDownEventArgs = {
+                originalEvent: e,
+                currentItem: currentItem,
+                nextItem: nextItem,
+                cancel: false
+            };
+            this.trigger('keyDown', keyDownEventArgs, function (keyDownArgs) {
+                if (!keyDownArgs.cancel) {
+                    _this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
+                }
+            });
         }
     };
     /**
@@ -548,7 +605,7 @@ var Toolbar = /** @class */ (function (_super) {
         var index = 0;
         while (index < nodes.length) {
             var ele = nodes[parseInt(index.toString(), 10)];
-            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
+            if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
                 return ele;
             }
             index++;
@@ -560,7 +617,7 @@ var Toolbar = /** @class */ (function (_super) {
         var index = nodes.length - 1;
         while (index >= 0) {
             var ele = nodes[parseInt(index.toString(), 10)];
-            if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
+            if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
                 return ele;
             }
             index--;
@@ -2048,10 +2105,6 @@ 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) {
@@ -2414,6 +2467,9 @@ var Toolbar = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Toolbar.prototype, "beforeCreate", void 0);
+    __decorate([
+        Event()
+    ], Toolbar.prototype, "keyDown", void 0);
     Toolbar = __decorate([
         NotifyPropertyChanges
     ], Toolbar);

package/src/treeview/treeview.js

@@ -1810,7 +1810,10 @@ var TreeView = /** @class */ (function (_super) {
                                 activeElement_1.classList.add(ITEM_ANIMATION_ACTIVE);
                             }
                             start_1 = liEle_1.offsetHeight;
-                            end_1 = select('.' + TEXTWRAP, currLi).offsetHeight;
+                            var computedStyle = window.getComputedStyle(liEle_1);
+                            var paddingTop = parseFloat(computedStyle.paddingTop);
+                            var paddingBottom = parseFloat(computedStyle.paddingBottom);
+                            end_1 = select('.' + TEXTWRAP, currLi).offsetHeight + paddingBottom + paddingTop;
                         },
                         progress: function (args) {
                             args.element.style.display = 'block';
@@ -3461,6 +3464,15 @@ var TreeView = /** @class */ (function (_super) {
                 _this.dragAction(e, virtualEle);
             },
             dragStop: function (e) {
+                if (!e.target) {
+                    if (e.helper && e.helper.parentNode) {
+                        detach(e.helper);
+                    }
+                    document.body.style.cursor = '';
+                    removeClass([_this.element], DRAGGING);
+                    _this.dragStartAction = false;
+                    return;
+                }
                 removeClass([_this.element], DRAGGING);
                 if (!e.target.classList.contains('e-sibling')) {
                     _this.removeVirtualEle();
@@ -3500,6 +3512,9 @@ var TreeView = /** @class */ (function (_super) {
         });
         this.dropObj = new Droppable(this.element, {
             out: function (e) {
+                if (!e.target) {
+                    return;
+                }
                 if (!isNOU(e) && !e.target.classList.contains(SIBLING) &&
                     (_this.dropObj.dragData.default && _this.dropObj.dragData.default.helper.classList.contains(ROOT))) {
                     document.body.style.cursor = 'not-allowed';
@@ -3538,6 +3553,9 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.dragAction = function (e, virtualEle) {
+        if (!e.target) {
+            return;
+        }
         var dropRoot = closest(e.target, '.' + DROPPABLE);
         var dropWrap = closest(e.target, '.' + TEXTWRAP);
         var icon = select('div.' + ICON, virtualEle);
@@ -5265,7 +5283,10 @@ var TreeView = /** @class */ (function (_super) {
             }
             this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
         }
-        this.setNodeFocusable();
+        var fNode = select('.' + LISTITEM + '[tabindex="0"]', this.element);
+        if (isNOU(fNode)) {
+            this.setNodeFocusable();
+        }
         this.updateCheckedStateFromDS();
         if (this.showCheckBox && dropLi) {
             this.ensureParentCheckState(dropLi);
@@ -5659,7 +5680,7 @@ var TreeView = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.uncheckAll = function (nodes) {
-        if (this.showCheckBox) {
+        if (this.showCheckBox && this.checkedNodes.length > 0) {
             this.doCheckBoxAction(nodes, false);
         }
     };

package/styles/bds-lite.css

@@ -72,6 +72,9 @@
   padding-top: 6px;
   line-height: 18px;
 }
+.e-pager div.e-parentmsgbar span.e-rightalign {
+  text-align: right;
+}
 .e-pager .e-pagesizes {
   display: inline;
 }
@@ -325,6 +328,12 @@
 }
 @media (max-width: 769px) {
   .e-pager {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
     padding: 13px 0;
   }
   .e-pager div.e-parentmsgbar {
@@ -523,7 +532,8 @@
   .e-pager.e-rtl.e-rtl div.e-parentmsgbar {
     float: initial;
     margin-left: 0;
-    margin-top: 10px;
+    margin-top: 0;
+    padding-top: 0;
   }
   .e-pager.e-rtl .e-parentmsgbar {
     float: right;
@@ -1713,6 +1723,9 @@
 .e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-right: 8px;
 }
+.e-toolbar.e-rtl:not(.e-spacer-toolbar) .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
+  margin-left: 8px;
+}
 .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 4px;
 }
@@ -1743,6 +1756,7 @@
 }
 .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 0;
+  margin-right: 8px;
 }
 .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-left .e-toolbar-item:last-child {
   margin-left: 8px;
@@ -1750,11 +1764,13 @@
 .e-toolbar.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
   margin-left: 0;
 }
-.e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child,
+.e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child {
+  margin-right: 0;
+}
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
   margin-right: 0;
+  margin-left: 8px;
 }
-.e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:first-child,
 .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:first-child {
   margin-right: 8px;
 }
@@ -2936,6 +2952,12 @@
           box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
   padding: 4px 0;
 }
+.e-contextmenu-wrapper ul.e-contextmenu.e-contextmenu-template .e-menu-caret-icon,
+.e-contextmenu-container ul.e-contextmenu.e-contextmenu-template .e-menu-caret-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
   font-family: "Inter";
@@ -6406,6 +6428,9 @@
 .e-treeview.e-virtualization .e-ul {
   overflow: unset;
 }
+.e-treeview .e-mask-parent {
+  display: none;
+}
 .e-treeview > .e-ul {
   -webkit-overflow-scrolling: touch;
   overflow: auto;
@@ -8278,6 +8303,21 @@ ejs-sidebar {
   padding-right: 8px;
 }
 
+.e-breadcrumb-menu-item {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.e-hidden-popup {
+  visibility: hidden;
+}
+
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
   color: var(--color-sf-text-secondary);
 }