@syncfusion/ej2-navigations 35.1.40 → 35.1.43

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 35.1.40
+*  version : 35.1.43
 *  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": "35.1.40",
+  "version": "35.1.43",
   "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",
@@ -9,12 +9,12 @@
   "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~35.1.37",
-    "@syncfusion/ej2-buttons": "~35.1.37",
+    "@syncfusion/ej2-buttons": "~35.1.41",
     "@syncfusion/ej2-data": "~35.1.37",
-    "@syncfusion/ej2-inputs": "~35.1.37",
-    "@syncfusion/ej2-lists": "~35.1.37",
+    "@syncfusion/ej2-inputs": "~35.1.43",
+    "@syncfusion/ej2-lists": "~35.1.43",
     "@syncfusion/ej2-notifications": "~35.1.37",
-    "@syncfusion/ej2-popups": "~35.1.39"
+    "@syncfusion/ej2-popups": "~35.1.42"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/menu-base.js

@@ -603,7 +603,7 @@ var MenuBase = /** @class */ (function (_super) {
             var popups_1 = [];
             var allPopup = selectAll('.' + POPUP);
             allPopup.forEach(function (elem) {
-                if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {
+                if (_this.element.id === elem.id.split('-')[2] || (_this.element.id.includes('-') && elem.id.includes(_this.element.id))) {
                     popups_1.push(elem);
                 }
             });

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

@@ -1,4 +1,4 @@
-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 { Component, EventHandler, Property, Event, EmitType, BaseEventArgs, L10n } 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,KeyDownEventArgs} from "./toolbar";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/toolbar/toolbar.d.ts

@@ -266,6 +266,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private tempId;
     private isExtendedOpen;
     private popupTriggeredByToolbar;
+    private l10n;
     private clickEvent;
     private scrollEvent;
     private resizeContext;
@@ -507,6 +508,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private buttonRendering;
     private renderSubComponent;
     private getDataTabindex;
+    private isDropDownList;
     private itemClick;
     private activeEleSwitch;
     private activeEleRemove;

package/src/toolbar/toolbar.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Property, Event, L10n } from '@syncfusion/ej2-base';
 import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';
 import { selectAll, setStyleAttribute as setStyle, select } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';
@@ -252,6 +252,8 @@ var Toolbar = /** @class */ (function (_super) {
         this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;
         this.isExtendedOpen = false;
         this.popupPriCount = 0;
+        var localeText = { overflow: 'overflow' };
+        this.l10n = new L10n(this.getModuleName(), localeText, this.locale);
         if (this.enableRtl) {
             this.add(this.element, CLS_RTL);
         }
@@ -446,10 +448,15 @@ var Toolbar = /** @class */ (function (_super) {
                     return;
                 }
                 if (rootEle === trgt) {
-                    this.elementFocus(clst);
+                    if (this.isDropDownList(clst.firstElementChild)) {
+                        this.eleFocus(clst, 'next', true);
+                    }
+                    else {
+                        this.elementFocus(clst);
+                    }
                 }
                 else if (!navChk) {
-                    this.eleFocus(clst, 'next');
+                    this.eleFocus(clst, 'next', true);
                 }
                 break;
             case 'moveLeft':
@@ -457,7 +464,7 @@ var Toolbar = /** @class */ (function (_super) {
                     return;
                 }
                 if (!navChk) {
-                    this.eleFocus(clst, 'previous');
+                    this.eleFocus(clst, 'previous', true);
                 }
                 break;
             case 'home':
@@ -648,12 +655,14 @@ var Toolbar = /** @class */ (function (_super) {
         }
         return element;
     };
-    Toolbar.prototype.eleFocus = function (closest, pos) {
+    Toolbar.prototype.eleFocus = function (closest, pos, skipDropDownList) {
+        if (skipDropDownList === void 0) { skipDropDownList = false; }
         var sib = Object(closest)[pos + 'ElementSibling'];
         if (sib) {
-            var skipEle = this.eleContains(sib);
+            var skipEle = this.eleContains(sib) ||
+                (skipDropDownList && this.isDropDownList(sib.firstElementChild));
             if (skipEle) {
-                this.eleFocus(sib, pos);
+                this.eleFocus(sib, pos, skipDropDownList);
                 return;
             }
             this.elementFocus(sib);
@@ -666,8 +675,8 @@ var Toolbar = /** @class */ (function (_super) {
             if (!isNOU(elem) && elem.children.length > 0) {
                 if (pos === 'next') {
                     var el = elem.querySelector('.' + CLS_ITEM);
-                    if (this.eleContains(el)) {
-                        this.eleFocus(el, pos);
+                    if (this.eleContains(el) || (skipDropDownList && this.isDropDownList(el.firstElementChild))) {
+                        this.eleFocus(el, pos, skipDropDownList);
                     }
                     else {
                         el.firstElementChild.focus();
@@ -676,8 +685,8 @@ var Toolbar = /** @class */ (function (_super) {
                 }
                 else {
                     var el = elem.lastElementChild;
-                    if (this.eleContains(el)) {
-                        this.eleFocus(el, pos);
+                    if (this.eleContains(el) || (skipDropDownList && this.isDropDownList(el.firstElementChild))) {
+                        this.eleFocus(el, pos, skipDropDownList);
                     }
                     else {
                         this.elementFocus(el);
@@ -688,10 +697,24 @@ 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]);
+                var index = 0;
+                while (skipDropDownList && index < tbrItems.length &&
+                    this.isDropDownList(tbrItems[index].firstElementChild)) {
+                    index++;
+                }
+                if (index < tbrItems.length) {
+                    this.elementFocus(tbrItems[index]);
+                }
             }
             else if (pos === 'previous' && tbrItems) {
-                this.elementFocus(tbrItems[tbrItems.length - 1]);
+                var index = tbrItems.length - 1;
+                while (skipDropDownList && index >= 0 &&
+                    this.isDropDownList(tbrItems[index].firstElementChild)) {
+                    index--;
+                }
+                if (index >= 0) {
+                    this.elementFocus(tbrItems[index]);
+                }
             }
         }
     };
@@ -1028,7 +1051,7 @@ var Toolbar = /** @class */ (function (_super) {
         this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
         var ariaAttr = {
             'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',
-            'aria-label': 'overflow'
+            'aria-label': this.l10n.getConstant('overflow')
         };
         attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);
     };
@@ -2038,7 +2061,9 @@ var Toolbar = /** @class */ (function (_super) {
         this.add(innerEle, CLS_TEMPLATE);
         var firstChild = innerEle.firstElementChild;
         if (!isNOU(firstChild)) {
-            firstChild.setAttribute('tabindex', isNOU(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));
+            if (!this.isDropDownList(firstChild)) {
+                firstChild.setAttribute('tabindex', isNOU(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));
+            }
             firstChild.setAttribute('data-tabindex', isNOU(firstChild.getAttribute('tabIndex')) ? '-1' : this.getDataTabindex(firstChild));
         }
         this.tbarEle.push(innerEle);
@@ -2156,6 +2181,17 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.getDataTabindex = function (ele) {
         return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');
     };
+    Toolbar.prototype.isDropDownList = function (ele) {
+        if (isNOU(ele)) {
+            return false;
+        }
+        var input = ele.querySelector('input.e-control');
+        if (isNOU(input) || isNOU(input.ej2_instances) || isNOU(input.ej2_instances[0])) {
+            return false;
+        }
+        var instance = input.ej2_instances[0];
+        return instance.getModuleName() === 'dropdownlist';
+    };
     Toolbar.prototype.itemClick = function (e) {
         this.activeEleSwitch(e.currentTarget);
     };