@syncfusion/ej2-ribbon 29.2.4 → 30.1.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.2.4
+*  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,67 +1,32 @@
 {
-  "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@29.1.39",
-  "_inBundle": false,
-  "_integrity": "sha512-uWxAO/a66JBCPRD1+9sNCDclv47jYNuP3B9Dyk7E+sT3MX/n9CxUpDHi478WkxcLHP7SC6zp0nRCGHZ2yvu/Zg==",
-  "_location": "/@syncfusion/ej2-ribbon",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-ribbon@*",
-    "name": "@syncfusion/ej2-ribbon",
-    "escapedName": "@syncfusion%2fej2-ribbon",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-ribbon",
-    "/@syncfusion/ej2-react-ribbon",
-    "/@syncfusion/ej2-vue-ribbon"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-29.1.39.tgz",
-  "_shasum": "44bf98bdf5b77f4e99fce2e988508db8d2db0e62",
-  "_spec": "@syncfusion/ej2-ribbon@*",
-  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-ribbon-component/issues"
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-ribbon",
+  "version": "30.1.39",
+  "description": "Essential JS 2 Component",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-ribbon.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-ribbon.es5.js",
+  "typings": "index.d.ts",
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.2.4",
-    "@syncfusion/ej2-buttons": "~29.2.4",
-    "@syncfusion/ej2-dropdowns": "~29.2.4",
-    "@syncfusion/ej2-lists": "~29.2.4",
-    "@syncfusion/ej2-navigations": "~29.2.4",
-    "@syncfusion/ej2-popups": "~29.2.4",
-    "@syncfusion/ej2-splitbuttons": "~29.2.4"
+    "@syncfusion/ej2-base": "~30.1.38",
+    "@syncfusion/ej2-buttons": "~30.1.37",
+    "@syncfusion/ej2-dropdowns": "~30.1.39",
+    "@syncfusion/ej2-lists": "~30.1.37",
+    "@syncfusion/ej2-navigations": "~30.1.39",
+    "@syncfusion/ej2-popups": "~30.1.37",
+    "@syncfusion/ej2-splitbuttons": "~30.1.39"
   },
-  "deprecated": false,
-  "description": "Essential JS 2 Component",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-ribbon.es5.js",
-  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
     "ej2-ribbon"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-ribbon.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-ribbon",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
+    "url": "https://github.com/syncfusion/ej2-ribbon-component.git"
   },
-  "typings": "index.d.ts",
-  "version": "29.2.4",
-  "sideEffects": false
+  "sideEffects": false,
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/ribbon/base/ribbon.d.ts

@@ -237,6 +237,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private itemsModel;
     private targetTabs;
     private isUpdateItems;
+    private resizeListener;
     /** @hidden */
     keysPress: string;
     /** @hidden */

package/src/ribbon/base/ribbon.js

@@ -151,7 +151,8 @@ var Ribbon = /** @class */ (function (_super) {
         this.currentControlIndex = 0;
     };
     Ribbon.prototype.wireEvents = function () {
-        EventHandler.add(window, 'resize', this.resizeHandler, this);
+        this.resizeListener = this.resizeHandler.bind(this);
+        EventHandler.add(window, 'resize', this.resizeListener);
         EventHandler.add(document.body, 'keydown', this.keytipActionHandler, this);
         EventHandler.add(document, 'mousedown', this.mouseEventHandler, this);
         EventHandler.add(document, 'scroll', this.mouseEventHandler, this);
@@ -869,7 +870,7 @@ var Ribbon = /** @class */ (function (_super) {
         if (dropDownPopup) {
             dropDownPopup.setProperties({ position: { X: isLeft ? 'left' : 'right', Y: isMenu ? 'top' : 'bottom' } }, true);
             if (isMenu) {
-                dropdown.beforeOpen = function () {
+                dropdown.beforeOpen = function (e) {
                     if (isLeft) {
                         if (item.type === RibbonItemType.Gallery && _this.ribbonGalleryModule) {
                             _this.ribbonGalleryModule.checkCollision(dropDownPopup, dropDownPopup.element);
@@ -880,6 +881,12 @@ var Ribbon = /** @class */ (function (_super) {
                         dropDownPopup.element.style.removeProperty('display');
                         dropDownPopup.element.style.removeProperty('visibility');
                     }
+                    if (item.splitButtonSettings.beforeOpen) {
+                        item.splitButtonSettings.beforeOpen.call(_this, e);
+                    }
+                    if (item.dropDownSettings.beforeOpen) {
+                        item.dropDownSettings.beforeOpen.call(_this, e);
+                    }
                 };
             }
             else {
@@ -1174,10 +1181,8 @@ var Ribbon = /** @class */ (function (_super) {
                 }
                 break;
             case 'GroupButton':
-                if (this.activeLayout === 'Simplified') {
-                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
-                    break;
-                }
+                this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
+                break;
         }
     };
     Ribbon.prototype.createOfTabContainer = function (groupId, groupHeader, itemEle, tabIndex) {
@@ -2092,9 +2097,10 @@ var Ribbon = /** @class */ (function (_super) {
             className: constants.RIBBON_OVERFLOW_TARGET,
             attrs: { 'tabindex': '0' }
         });
+        var overFlowCss = this.cssClass ? constants.SPACE + this.cssClass : '';
         var overflowDDB = new DropDownButton({
             iconCss: constants.OVERFLOW_ICON,
-            cssClass: constants.DROPDOWNBUTTON_HIDE + constants.SPACE + constants.RIBBON_GROUP_OVERFLOW_DDB,
+            cssClass: constants.DROPDOWNBUTTON_HIDE + constants.SPACE + constants.RIBBON_GROUP_OVERFLOW_DDB + overFlowCss,
             target: overflowTarget,
             locale: this.locale,
             enableRtl: this.enableRtl,
@@ -2113,6 +2119,7 @@ var Ribbon = /** @class */ (function (_super) {
                 var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
                 _this.trigger('overflowPopupClose', eventArgs, function (ribbonArgs) {
                     if (ele || ribbonArgs.cancel || groupButtonEle) {
+                        args.element = null;
                         args.cancel = true;
                     }
                 });
@@ -4641,7 +4648,7 @@ var Ribbon = /** @class */ (function (_super) {
                 if (itemProp.item.type === 'Gallery' && document.querySelector('#' + itemId + '_container').closest('.e-ribbon-overflow-target') && item.displayOptions !== DisplayMode.Overflow) {
                     this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
                 }
-                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow && dropdown) {
                     if (dropdown.target.childElementCount === 0 ||
                         (dropdown.target.childElementCount === 1 &&
                             this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
@@ -4784,7 +4791,7 @@ var Ribbon = /** @class */ (function (_super) {
         }
     };
     Ribbon.prototype.unwireEvents = function () {
-        EventHandler.remove(window, 'resize', this.resizeHandler);
+        EventHandler.remove(window, 'resize', this.resizeListener);
         EventHandler.remove(document.body, 'keydown', this.keytipActionHandler);
         EventHandler.remove(document, 'mousedown', this.mouseEventHandler);
         EventHandler.remove(document, 'scroll', this.mouseEventHandler);

package/src/ribbon/items/ribbon-gallery.d.ts

@@ -24,6 +24,7 @@ export declare class RibbonGallery {
     createGallery(item: RibbonItemModel, itemEle: HTMLElement): void;
     private renderGalleryItems;
     private setWrapperWidth;
+    private setWrapperStyle;
     /**
      * Checks the gallery items height.
      *

package/src/ribbon/items/ribbon-gallery.js

@@ -145,8 +145,6 @@ var RibbonGallery = /** @class */ (function () {
                 }
                 if (gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
                     galleryEle.style.height = gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight + 'px';
-                    galleryEle.style.paddingTop = '0px';
-                    galleryEle.style.paddingBottom = '0px';
                     if (this_1.parent.activeLayout !== 'Simplified' && !isPopup) {
                         galleryContainerEle.style.flexFlow = 'wrap';
                     }
@@ -268,6 +266,13 @@ var RibbonGallery = /** @class */ (function () {
             galleryWrapper.style.width = itemsWidth + 'px';
         }
     };
+    RibbonGallery.prototype.setWrapperStyle = function (popup, popupContainerItems) {
+        if (popup.width !== 'auto') {
+            popupContainerItems.forEach(function (ele) {
+                ele.style.flexFlow = 'wrap';
+            });
+        }
+    };
     /**
      * Checks the gallery items height.
      *
@@ -360,11 +365,7 @@ var RibbonGallery = /** @class */ (function () {
                 }
             }
             var popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
-            if (popup.width !== 'auto') {
-                popupContainerItems.forEach(function (ele) {
-                    ele.style.flexFlow = 'wrap';
-                });
-            }
+            this.setWrapperStyle(popup, popupContainerItems);
             var isCollideOccurs = false;
             for (var i = 0; i < popupContainerItems.length; i++) {
                 var itemsWidth = 0;
@@ -530,7 +531,7 @@ var RibbonGallery = /** @class */ (function () {
                 }
             }
             var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
-            var popup = getComponent(popupEle, Popup);
+            var popup_1 = getComponent(popupEle, Popup);
             var popupContainerEle_1 = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
             var dropdown = new DropDownButton({
                 iconCss: iconCss,
@@ -540,6 +541,8 @@ var RibbonGallery = /** @class */ (function () {
                 cssClass: 'e-ribbon-gallery-dropdown',
                 disabled: item.disabled,
                 open: function () {
+                    var popupContainerItems = popupContainerEle_1.querySelectorAll('.e-ribbon-gallery-container');
+                    _this.setWrapperStyle(popup_1, popupContainerItems);
                     _this.setFoucsToFirstItem(popupContainerEle_1, true, item.id);
                 },
                 beforeClose: function (args) {
@@ -549,12 +552,12 @@ var RibbonGallery = /** @class */ (function () {
                     }
                 }
             }, buttonEle);
-            if (popup.width !== 'auto') {
-                dropdown.dropDown.width = formatUnit(popup.width);
+            if (popup_1.width !== 'auto') {
+                dropdown.dropDown.width = formatUnit(popup_1.width);
             }
-            if (popup.height !== 'auto') {
-                dropdown.dropDown.height = formatUnit(popup.height);
-                dropdown.dropDown.element.style.height = (popup.height).toString();
+            if (popup_1.height !== 'auto') {
+                dropdown.dropDown.height = formatUnit(popup_1.height);
+                dropdown.dropDown.element.style.height = (popup_1.height).toString();
             }
         }
     };

package/src/ribbon/items/ribbon-groupbutton.js

@@ -10,6 +10,7 @@ import { Tooltip } from '@syncfusion/ej2-popups';
  */
 var RibbonGroupButton = /** @class */ (function () {
     function RibbonGroupButton(parent) {
+        this.grpBtnIndex = 0;
         this.parent = parent;
         this.isSelected = false;
     }
@@ -77,6 +78,7 @@ var RibbonGroupButton = /** @class */ (function () {
                             this.count++;
                         }
                     }
+                    this.grpBtnIndex = i;
                 }
                 if (groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings &&
                     isTooltipPresent(groupBtnSettings.items[parseInt(i.toString(), 10)].ribbonTooltipSettings)) {
@@ -147,7 +149,7 @@ var RibbonGroupButton = /** @class */ (function () {
         var previousItems = [];
         var selectingItems = [];
         var selectedItems = [];
-        var groupButtonEle;
+        var groupButtonEle = document.querySelector('#' + item.id);
         var dropdown;
         for (var j = 0; j < grpBtnSettings.items.length; j++) {
             if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j)) {
@@ -185,7 +187,6 @@ var RibbonGroupButton = /** @class */ (function () {
                 grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].setProperties({ selected: true }, true);
                 if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active') && this.parent.activeLayout === 'Simplified') {
                     this.grpBtnIndex = itemIndex;
-                    groupButtonEle = document.querySelector('#' + item.id);
                     dropdown = getComponent(groupButtonEle, DropDownButton);
                     dropdown.setProperties({
                         iconCss: grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].iconCss
@@ -216,7 +217,6 @@ var RibbonGroupButton = /** @class */ (function () {
                 if (this.parent.activeLayout === 'Simplified') {
                     var dropdownIcon = null;
                     var itemsCount = 0;
-                    groupButtonEle = document.querySelector('#' + item.id);
                     dropdown = getComponent(groupButtonEle, DropDownButton);
                     if (!this.isSelected) {
                         if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
@@ -250,6 +250,10 @@ var RibbonGroupButton = /** @class */ (function () {
             if (grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click) {
                 grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].click.call(this, eventArgs_1);
             }
+            if (this.parent.activeLayout === 'Simplified' && groupButtonEle) {
+                dropdown = getComponent(groupButtonEle, DropDownButton);
+                dropdown.toggle();
+            }
         }
     };
     /**
@@ -334,7 +338,6 @@ var RibbonGroupButton = /** @class */ (function () {
             else {
                 document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + 0).focus();
             }
-            this.grpBtnIndex = 0;
         }
     };
     RibbonGroupButton.prototype.addGroupButtonHeader = function (itemID, groupBtnSettings, popupEle) {
@@ -416,28 +419,37 @@ var RibbonGroupButton = /** @class */ (function () {
         var groupBtnSettings = item.groupButtonSettings;
         var isIconOnly = true;
         var groupButtonEle = itemEle.querySelector('#' + item.id);
-        var dropdown = getComponent(groupButtonEle, DropDownButton);
-        dropdown.setProperties({ cssClass: dropdown.cssClass + constants.SPACE + constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
-        var targetEle = dropdown.target;
-        if (targetEle.children.length) {
-            for (var i = 0; i < targetEle.children.length; i++) {
-                if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
-                    isIconOnly = false;
-                    break;
+        if (groupButtonEle) {
+            var dropdown = getComponent(groupButtonEle, DropDownButton);
+            dropdown.setProperties({ cssClass: dropdown.cssClass + constants.SPACE + constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
+            var targetEle_1 = dropdown.target;
+            if (targetEle_1.children.length) {
+                for (var i = 0; i < targetEle_1.children.length; i++) {
+                    if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
+                        isIconOnly = false;
+                        break;
+                    }
+                }
+                if (isIconOnly) {
+                    targetEle_1.classList.add('e-icon-btn');
                 }
             }
-            if (isIconOnly) {
-                targetEle.classList.add('e-icon-btn');
-            }
+            targetEle_1.onclick = function () {
+                if (_this.parent.activeLayout === 'Simplified' && targetEle_1.closest('.e-ribbon-dropdown-group-button').classList.contains(constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
+                    if (overflowButton.element.classList.contains('e-active')) {
+                        overflowButton.toggle();
+                    }
+                }
+            };
         }
-        targetEle.onclick = function () {
-            if (_this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
-                dropdown.toggle();
+        var overflowGroupButtonEle = itemEle.querySelector('#' + item.id + '_grpbtn');
+        if (this.parent.activeLayout === 'Classic' && overflowGroupButtonEle) {
+            overflowGroupButtonEle.onclick = function () {
                 if (overflowButton.element.classList.contains('e-active')) {
                     overflowButton.toggle();
                 }
-            }
-        };
+            };
+        }
     };
     /**
      * Removes the additional event handlers as the item moved into overflow popup.

package/src/ribbon/modules/ribbon-filemenu.js

@@ -167,9 +167,14 @@ var RibbonFileMenu = /** @class */ (function () {
         if (event) {
             var eventArgs = { element: args.element, item: args.item, event: args.event };
             event.call(this, eventArgs);
-            if (!args.element.classList.contains('e-menu-caret-icon')) {
-                this.fileMenuDDB.toggle();
-            }
+        }
+        var menuOpen = !!args.element.closest('.e-ribbon-menu.e-popup-open');
+        var fileTriggerOpen = !!args.element.closest('.e-ribbon-file-menu.e-popup-open');
+        var fileMenuOpen = !!document.querySelector('.e-ribbon-file-menu.e-popup-open');
+        // True if the file trigger was clicked open, or if the ribbon menu is open and the file menu popup is actually present
+        var isMenuOpen = fileTriggerOpen || (menuOpen && fileMenuOpen);
+        if (!args.element.classList.contains('e-menu-caret-icon') && isMenuOpen) {
+            this.fileMenuDDB.toggle();
         }
     };
     /**