@syncfusion/ej2-navigations 34.2.2 → 34.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.2.2
+*  version : 34.2.3
 *  Copyright Syncfusion Inc. 2001 - 2025. 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": "34.2.2",
+  "version": "34.2.3",
   "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",
@@ -14,7 +14,7 @@
     "@syncfusion/ej2-inputs": "~34.2.2",
     "@syncfusion/ej2-lists": "~34.2.2",
     "@syncfusion/ej2-notifications": "~34.2.2",
-    "@syncfusion/ej2-popups": "~34.2.2"
+    "@syncfusion/ej2-popups": "~34.2.3"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/menu-base.js

@@ -437,8 +437,10 @@ var MenuBase = /** @class */ (function (_super) {
         if (!active) {
             return;
         }
+        var isInputElement = active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' ||
+            active.contentEditable === 'true';
         var expanded = active.getAttribute('aria-expanded') === 'true';
-        if (!expanded) {
+        if (!expanded || isInputElement) {
             return;
         }
         var ul = this.element;
@@ -552,13 +554,19 @@ var MenuBase = /** @class */ (function (_super) {
         var cli = cul.children[fliIdx];
         fliIdx = this.isValidLI(cli, fliIdx, e.action);
         cul.children[fliIdx].classList.add(FOCUSED);
-        cul.children[fliIdx].focus();
+        var liToFocus = cul.children[fliIdx];
         if (closest(this.element, '.e-popup')) {
-            var focusedLiItem = cul.children[fliIdx];
-            var focusableChild = focusedLiItem.querySelector('[tabindex], span[tabindex], a, button, [tabindex]:not([tabindex="-1"])');
-            if (!focusableChild) {
-                cul.focus();
+            var focusableChild = liToFocus.querySelector('[tabindex], span[tabindex], a, button, [tabindex]:not([tabindex="-1"])');
+            var isSpreadsheet = this.element.id.includes('_cf_menu') && this.element.parentElement.classList.contains('e-cf-menu');
+            if (focusableChild && !isSpreadsheet) {
+                focusableChild.focus();
             }
+            else {
+                liToFocus.focus();
+            }
+        }
+        else {
+            liToFocus.focus();
         }
     };
     MenuBase.prototype.isValidLI = function (cli, index, action) {

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

@@ -222,6 +222,7 @@ export interface TreeViewModel extends ComponentModel{
      * This value is used to calculate the virtual viewport and the total scrollable height.
      *
      * @default undefined
+     * @aspType string
      */
     height?: string | number;
 

package/src/treeview/treeview.d.ts

@@ -662,6 +662,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * This value is used to calculate the virtual viewport and the total scrollable height.
      *
      * @default undefined
+     * @aspType string
      */
     height: string | number;
     /**
@@ -1622,13 +1623,25 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * @private
      */
     private ensureVirtualNodeVisible;
+    /**
+     * Recursively walks the treeData (and any nested `childFieldName` arrays) to
+     * find the node whose `idFieldName` matches the given `id` (compared as
+     * strings).  Used by the virtual-mode expand/collapse handlers so they can
+     * locate nodes at any depth — not just the root level — before writing the
+     * `expanded` flag back to the datasource.
+     *
+     * @param {string} id - The id (as a string) of the node to locate.
+     * @returns {Object | null} The matching raw datasource node, or null if not found.
+     * @private
+     */
+    private findNodeInTreeData;
     private handleVirtualExpand;
     private handleVirtualCollapse;
     /**
      * Updates the selected state of a node in `virtualFlatNodes` and re-renders the window.
      *
      * @param {string} id - The `data-uid` of the target node.
-     * @param {boolean} isSelected - Whether the node is now selected.
+     * @param {boolean} selected - Whether the node is now selected.
      * @returns {void}
      * @private
      */

package/src/treeview/treeview.js

@@ -1707,7 +1707,9 @@ var TreeView = /** @class */ (function (_super) {
                     this.virtualIndeterminateNodesSet.delete(id);
                     this.virtualCheckedNodesSet.delete(id);
                     this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].isChecked = false;
-                    this.treeData[parseInt(id.toString(), 10) - 1].isChecked = false;
+                    if (this.treeData && this.fields && this.fields.isChecked) {
+                        setValue(this.fields.isChecked, false, this.treeData[parseInt(id.toString(), 10) - 1]);
+                    }
                     if (this.autoCheck && this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].hasChildren) {
                         this.setVirtualChildCheckState(id, false);
                     }
@@ -2656,6 +2658,13 @@ var TreeView = /** @class */ (function (_super) {
         if (!isNOU(id) && this.selectedNodes.indexOf(id) === -1) {
             this.selectedNodes.push(id);
         }
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.virtualSelectedNodesSet.add(id);
+            var actualIndex = this.virtualNodeMap.get(id);
+            if (actualIndex && actualIndex > -1) {
+                this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = true;
+            }
+        }
     };
     TreeView.prototype.removeSelect = function (liEle) {
         if (this.allowMultiSelection) {
@@ -2669,6 +2678,14 @@ var TreeView = /** @class */ (function (_super) {
         if (index > -1) {
             this.selectedNodes.splice(index, 1);
         }
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            var id = liEle.getAttribute('data-uid');
+            this.virtualSelectedNodesSet.delete(id);
+            var actualIndex = this.virtualNodeMap.get(id);
+            if (actualIndex && actualIndex > -1) {
+                this.virtualFlatNodes[parseInt(actualIndex.toString(), 10)].selected = false;
+            }
+        }
     };
     TreeView.prototype.removeSelectAll = function () {
         var selectedLI = this.element.querySelectorAll('.' + ACTIVE);
@@ -2683,6 +2700,15 @@ var TreeView = /** @class */ (function (_super) {
         }
         removeClass(selectedLI, ACTIVE);
         this.setProperties({ selectedNodes: [] }, true);
+        if (this.enableVirtualization && !isNOU(this.height)) {
+            this.virtualSelectedNodesSet.clear();
+            for (var i = 0; i < this.virtualFlatNodes.length; i++) {
+                var node = this.virtualFlatNodes[parseInt(i.toString(), 10)];
+                if (node.selected) {
+                    node.selected = false;
+                }
+            }
+        }
     };
     TreeView.prototype.getSelectEvent = function (currLi, action, e) {
         var nodeData = this.getNodeData(currLi);
@@ -5668,6 +5694,7 @@ var TreeView = /** @class */ (function (_super) {
         var imageUrlFieldName = this.fields.imageUrl;
         var idFieldName = this.fields.id;
         var textFieldName = this.fields.text;
+        var selectedFieldName = this.fields.selected;
         var needsSorting = this.sortOrder !== 'None';
         var isDataTypeFlat = this.dataType === 1;
         var enableVirtualization = this.enableVirtualization;
@@ -5678,7 +5705,7 @@ var TreeView = /** @class */ (function (_super) {
             // Use expandedNodes as the single source of truth.
             var inExpandedNodes = this.virtualExpandedNodesSet.has(id);
             var rawExpanded = !inExpandedNodes && getValue(expandedFieldName, raw) === true;
-            var isExpanded = inExpandedNodes || rawExpanded;
+            var expanded = inExpandedNodes || rawExpanded;
             if (rawExpanded && id) {
                 this.expandedNodes.push(id);
                 this.virtualExpandedNodesSet.add(id);
@@ -5705,24 +5732,32 @@ var TreeView = /** @class */ (function (_super) {
                     }
                 }
             }
+            if (this.initialRender && enableVirtualization && id && selectedFieldName && !this.virtualSelectedNodesSet.has(id)) {
+                var rawSelected = getValue(selectedFieldName, raw);
+                if (!isNullOrUndefined(rawSelected) && rawSelected.toString() === 'true') {
+                    this.virtualSelectedNodesSet.add(id);
+                    if (this.selectedNodes && this.selectedNodes.indexOf(id) === -1) {
+                        this.selectedNodes.push(id);
+                    }
+                }
+            }
             // Use cached Sets for O(1) lookup
-            var isSelected = this.virtualSelectedNodesSet.has(id);
+            var selected = this.virtualSelectedNodesSet.has(id);
             // Resolve checkbox state: indeterminate takes precedence over the checked set,
             // because a node can be in the indeterminate state without being in checkedNodes.
             var isChecked = (enableVirtualization && this.virtualIndeterminateNodesSet.has(id))
                 ? 'indeterminate'
                 : this.virtualCheckedNodesSet.has(id);
-            var isDisabled = false; // TODO: Check if any per-node disabled field exists
             var iconCssVal = raw[iconCssFieldName];
             var iconCss = isNOU(iconCssVal) ? '' : iconCssVal.toString();
             var imageUrlVal = raw[imageUrlFieldName];
             var imageUrl = isNOU(imageUrlVal) ? '' : imageUrlVal.toString();
             var node = {
-                id: id, text: text, level: level, parentId: parentId, hasChildren: hasChildren, isExpanded: isExpanded,
-                isSelected: isSelected, isChecked: isChecked, isDisabled: isDisabled, iconCss: iconCss, imageUrl: imageUrl, rawData: raw
+                id: id, text: text, level: level, parentId: parentId, hasChildren: hasChildren, expanded: expanded,
+                selected: selected, isChecked: isChecked, iconCss: iconCss, imageUrl: imageUrl
             };
             result.push(node);
-            if (isExpanded && hasChildren) {
+            if (expanded && hasChildren) {
                 // Determine children list
                 var children = [];
                 if (isDataTypeFlat) {
@@ -5932,7 +5967,7 @@ var TreeView = /** @class */ (function (_super) {
             targetUl.appendChild(li);
             liListBuf.push(li);
             // Register this node so its children in the same window can nest under it
-            if (node.isExpanded && node.hasChildren) {
+            if (node.expanded && node.hasChildren) {
                 renderedParentMap.set(node.id, { li: li, childUl: null });
             }
         }
@@ -6027,7 +6062,7 @@ var TreeView = /** @class */ (function (_super) {
         // Expand/collapse icon
         if (node.hasChildren) {
             var iconSpan = this.createElement('div', {
-                className: ICON + ' ' + (node.isExpanded ? COLLAPSIBLE : EXPANDABLE)
+                className: ICON + ' ' + (node.expanded ? COLLAPSIBLE : EXPANDABLE)
             });
             textWrap.appendChild(iconSpan);
         }
@@ -6066,8 +6101,16 @@ var TreeView = /** @class */ (function (_super) {
         });
         textWrap.appendChild(anchor);
         li.appendChild(textWrap);
+        // nodeTemplate
+        if (!isNOU(this.nodeTemplateFn)) {
+            var rawData = this.findNodeInTreeData(node.id);
+            if (!isNOU(rawData)) {
+                anchor.innerHTML = '';
+                this.renderNodeTemplate(rawData, anchor, node.id);
+            }
+        }
         // State classes
-        if (node.isExpanded) {
+        if (node.expanded) {
             li.classList.add(EXPANDED);
             li.setAttribute('aria-expanded', 'true');
         }
@@ -6075,14 +6118,10 @@ var TreeView = /** @class */ (function (_super) {
             li.classList.add(NODECOLLAPSED);
             li.setAttribute('aria-expanded', 'false');
         }
-        if (node.isSelected) {
+        if (node.selected) {
             li.classList.add(ACTIVE);
             li.setAttribute('aria-selected', 'true');
         }
-        if (node.isDisabled) {
-            li.classList.add(DISABLED);
-            li.setAttribute('aria-disabled', 'true');
-        }
         if (node.hasChildren) {
             li.classList.add(CHILD);
         }
@@ -6385,6 +6424,44 @@ var TreeView = /** @class */ (function (_super) {
         this.virtualEndIndex = win.endIndex;
         this.renderVirtualItems();
     };
+    /**
+     * Recursively walks the treeData (and any nested `childFieldName` arrays) to
+     * find the node whose `idFieldName` matches the given `id` (compared as
+     * strings).  Used by the virtual-mode expand/collapse handlers so they can
+     * locate nodes at any depth — not just the root level — before writing the
+     * `expanded` flag back to the datasource.
+     *
+     * @param {string} id - The id (as a string) of the node to locate.
+     * @returns {Object | null} The matching raw datasource node, or null if not found.
+     * @private
+     */
+    TreeView.prototype.findNodeInTreeData = function (id) {
+        if (!this.treeData) {
+            return null;
+        }
+        var idFieldName = this.fields.id.toString();
+        var childFieldName = this.fields.child.toString();
+        var findRecursive = function (nodes) {
+            if (!nodes || nodes.length === 0) {
+                return null;
+            }
+            for (var i = 0; i < nodes.length; i++) {
+                var node = nodes[i];
+                if (node[idFieldName] && node[idFieldName].toString() === id) {
+                    return node;
+                }
+                var children = getValue(childFieldName, node);
+                if (children && Array.isArray(children)) {
+                    var found = findRecursive(children);
+                    if (found) {
+                        return found;
+                    }
+                }
+            }
+            return null;
+        };
+        return findRecursive(this.treeData);
+    };
     TreeView.prototype.handleVirtualExpand = function (id, isKeyboardNav) {
         // ── Cancel any pending scroll RAF ─────────────────────────────────────────
         // A scroll RAF queued before the expand click would run asynchronously after
@@ -6402,9 +6479,11 @@ var TreeView = /** @class */ (function (_super) {
         if (this.virtualExpandedNodesSet) {
             this.virtualExpandedNodesSet.add(id);
         }
-        if (this.rootData) {
-            var acutalRootData = this.rootData.find(function (item) { return item.id === parseInt(id, 10); });
-            acutalRootData.isExpanded = true;
+        if (this.treeData) {
+            var acutalRootData = this.findNodeInTreeData(id);
+            if (acutalRootData && this.fields && this.fields.expanded) {
+                setValue(this.fields.expanded, true, acutalRootData);
+            }
         }
         // ── Fix: Pin focused ID to the expanding node for keyboard navigation ──
         // When keyboard-triggered, the expanded node IS definitively the focused node
@@ -6483,9 +6562,11 @@ var TreeView = /** @class */ (function (_super) {
         if (this.virtualExpandedNodesSet) {
             this.virtualExpandedNodesSet.delete(id);
         }
-        if (this.rootData) {
-            var acutalRootData = this.rootData.find(function (item) { return item.id === parseInt(id, 10); });
-            acutalRootData.isExpanded = false;
+        if (this.treeData) {
+            var acutalRootData = this.findNodeInTreeData(id);
+            if (acutalRootData && this.fields && this.fields.expanded) {
+                setValue(this.fields.expanded, false, acutalRootData);
+            }
         }
         // ── Fix: Pin focused ID to the collapsing node for keyboard navigation ──
         // Same reasoning as handleVirtualExpand: when keyboard-triggered, `id` is
@@ -6539,14 +6620,14 @@ var TreeView = /** @class */ (function (_super) {
      * Updates the selected state of a node in `virtualFlatNodes` and re-renders the window.
      *
      * @param {string} id - The `data-uid` of the target node.
-     * @param {boolean} isSelected - Whether the node is now selected.
+     * @param {boolean} selected - Whether the node is now selected.
      * @returns {void}
      * @private
      */
-    TreeView.prototype.updateVirtualNodeSelection = function (id, isSelected) {
+    TreeView.prototype.updateVirtualNodeSelection = function (id, selected) {
         var idx = this.virtualNodeMap.get(id);
         if (!isNOU(idx)) {
-            this.virtualFlatNodes[parseInt(idx.toString(), 10)].isSelected = isSelected;
+            this.virtualFlatNodes[parseInt(idx.toString(), 10)].selected = selected;
             this.renderVirtualItems();
         }
     };
@@ -6914,7 +6995,7 @@ var TreeView = /** @class */ (function (_super) {
                 }
                 for (var i = 0; i < nodes.length; i++) {
                     var node = nodes[parseInt(i.toString(), 10)];
-                    node['isExpanded'] = false;
+                    node['expanded'] = false;
                     var children = getValue(_this.fields.child.toString(), node);
                     if (children && Array.isArray(children)) {
                         setAllCollapsed_1(children);
@@ -7014,7 +7095,7 @@ var TreeView = /** @class */ (function (_super) {
                     var nodeId = getValue(idFieldName_1, node);
                     if (node.hasChild) {
                         allParentIds_1.push(nodeId);
-                        node.isExpanded = true;
+                        node.expanded = true;
                     }
                 }
             };

package/styles/bds-lite.css

@@ -1162,6 +1162,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bds.css

@@ -1479,6 +1479,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap-dark-lite.css

@@ -1070,6 +1070,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap-dark.css

@@ -1333,6 +1333,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap-lite.css

@@ -1072,6 +1072,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap.css

@@ -1335,6 +1335,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap4-lite.css

@@ -1072,6 +1072,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap4.css

@@ -1335,6 +1335,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap5-dark-lite.css

@@ -1116,6 +1116,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap5-dark.css

@@ -1391,6 +1391,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap5-lite.css

@@ -1116,6 +1116,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap5.3-lite.css

@@ -1196,6 +1196,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap5.3.css

@@ -1471,6 +1471,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/bootstrap5.css

@@ -1391,6 +1391,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fabric-dark-lite.css

@@ -1070,6 +1070,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fabric-dark.css

@@ -1333,6 +1333,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fabric-lite.css

@@ -1071,6 +1071,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fabric.css

@@ -1334,6 +1334,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fluent-dark-lite.css

@@ -1109,6 +1109,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fluent-dark.css

@@ -1372,6 +1372,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fluent-lite.css

@@ -1109,6 +1109,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fluent.css

@@ -1372,6 +1372,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fluent2-lite.css

@@ -1248,6 +1248,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/fluent2.css

@@ -1529,6 +1529,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;

package/styles/highcontrast-light-lite.css

@@ -1070,6 +1070,9 @@
   white-space: nowrap;
   overflow: hidden;
 }
+.e-toolbar:not(.e-rtl) {
+  text-align: left;
+}
 .e-toolbar.e-spacer-toolbar .e-toolbar-items {
   display: -webkit-box;
   display: -ms-flexbox;