@syncfusion/ej2-ribbon 33.2.3 → 33.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.3
+*  version : 33.2.5
 *  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-ribbon",
-  "version": "33.2.3",
+  "version": "33.2.5",
   "description": "Essential JS 2 Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -10,11 +10,11 @@
   "typings": "index.d.ts",
   "dependencies": {
     "@syncfusion/ej2-base": "~33.2.3",
-    "@syncfusion/ej2-buttons": "~33.2.3",
-    "@syncfusion/ej2-dropdowns": "~33.2.3",
+    "@syncfusion/ej2-buttons": "~33.2.5",
+    "@syncfusion/ej2-dropdowns": "~33.2.5",
     "@syncfusion/ej2-lists": "~33.2.3",
-    "@syncfusion/ej2-navigations": "~33.2.3",
-    "@syncfusion/ej2-popups": "~33.2.3",
+    "@syncfusion/ej2-navigations": "~33.2.4",
+    "@syncfusion/ej2-popups": "~33.2.5",
     "@syncfusion/ej2-splitbuttons": "~33.2.3"
   },
   "devDependencies": {},

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

@@ -290,6 +290,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @hidden
      */
     protected requiredModules(): ModuleDeclaration[];
+    getAppendToElement(): HTMLElement;
     private initialize;
     private initializeLocale;
     private wireEvents;

package/src/ribbon/base/ribbon.js

@@ -124,6 +124,16 @@ var Ribbon = /** @class */ (function (_super) {
         }
         return modules;
     };
+    Ribbon.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     Ribbon.prototype.initialize = function () {
         this.element.id = this.element.id || getUniqueID('e-' + this.getModuleName());
         this.initializeLocale();
@@ -2126,6 +2136,10 @@ var Ribbon = /** @class */ (function (_super) {
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
             beforeOpen: function (args) {
+                var target = _this.getAppendToElement();
+                if (overflowDDB && overflowDDB.dropDown && !target.contains(overflowDDB.dropDown.element)) {
+                    target.appendChild(overflowDDB.dropDown.element);
+                }
                 var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
                 _this.trigger('overflowPopupOpen', eventArgs, function (ribbonArgs) {
                     if (ribbonArgs.cancel) {

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

@@ -52,7 +52,16 @@ var RibbonDropDown = /** @class */ (function () {
                 }
             },
             beforeItemRender: dropDownSettings.beforeItemRender,
-            beforeOpen: dropDownSettings.beforeOpen,
+            beforeOpen: function (e) {
+                var ddb = getComponent(buttonEle, DropDownButton);
+                var target = _this.parent.getAppendToElement();
+                if (ddb && ddb.dropDown && !target.contains(ddb.dropDown.element)) {
+                    target.appendChild(ddb.dropDown.element);
+                }
+                if (dropDownSettings.beforeOpen) {
+                    dropDownSettings.beforeOpen.call(_this, e);
+                }
+            },
             close: function (e) {
                 if (dropDownSettings.close) {
                     dropDownSettings.close.call(_this, e);
@@ -158,6 +167,12 @@ var RibbonDropDown = /** @class */ (function () {
             cssClass: VERTICAL_DDB + SPACE + RIBBON_GROUP_OVERFLOW_DDB,
             iconPosition: 'Top',
             content: name,
+            beforeOpen: function () {
+                var target = _this.parent.getAppendToElement();
+                if (dropdown && dropdown.dropDown && !target.contains(dropdown.dropDown.element)) {
+                    target.appendChild(dropdown.dropDown.element);
+                }
+            },
             beforeClose: function (args) {
                 args.cancel = !isNullOrUndefined(args.event && closest(args.event.target, '.' + RIBBON_POPUP_CONTROL));
             }

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

@@ -91,6 +91,7 @@ export declare class RibbonGallery {
      */
     hideGalleryPopup(id: string): void;
     private setFoucsToFirstItem;
+    private alignGalleryPopupLeft;
     private handleGalleryPopupNavigation;
     private createGalleryTemplate;
     private createGalleryPopupTemplate;

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

@@ -269,7 +269,7 @@ var RibbonGallery = /** @class */ (function () {
     RibbonGallery.prototype.setWrapperStyle = function (popup, popupContainerItems) {
         if (popup.width !== 'auto') {
             popupContainerItems.forEach(function (ele) {
-                ele.style.flexFlow = 'wrap';
+                ele.style.flexFlow = 'column wrap';
             });
         }
     };
@@ -499,12 +499,12 @@ var RibbonGallery = /** @class */ (function () {
     RibbonGallery.prototype.addOverFlowEvents = function (item, itemEle) {
         var _this = this;
         if (itemEle.closest('.e-ribbon-overflow-target')) {
-            var buttonEle = this.parent.createElement('button', {
+            var buttonEle_1 = this.parent.createElement('button', {
                 id: item.id
             });
-            itemEle.appendChild(buttonEle);
+            itemEle.appendChild(buttonEle_1);
             if (itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.contains('e-disabled')) {
-                buttonEle.classList.add('e-disabled');
+                buttonEle_1.classList.add('e-disabled');
             }
             itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
             itemEle.querySelectorAll('.e-ribbon-gallery-container').forEach(function (ele) {
@@ -544,6 +544,9 @@ var RibbonGallery = /** @class */ (function () {
                     var popupContainerItems = popupContainerEle_1.querySelectorAll('.e-ribbon-gallery-container');
                     _this.setWrapperStyle(popup_1, popupContainerItems);
                     _this.setFoucsToFirstItem(popupContainerEle_1, true, item.id);
+                    if (popup_1.width !== 'auto') {
+                        _this.alignGalleryPopupLeft(popupContainerEle_1, buttonEle_1);
+                    }
                 },
                 beforeClose: function (args) {
                     var isCancelled = _this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
@@ -551,7 +554,7 @@ var RibbonGallery = /** @class */ (function () {
                         args.cancel = true;
                     }
                 }
-            }, buttonEle);
+            }, buttonEle_1);
             if (popup_1.width !== 'auto') {
                 dropdown.dropDown.width = formatUnit(popup_1.width);
             }
@@ -715,6 +718,22 @@ var RibbonGallery = /** @class */ (function () {
             _this.handleGalleryPopupNavigation(e, popupEle, isDropdown, itemID, popup, gallerySettings);
         };
     };
+    RibbonGallery.prototype.alignGalleryPopupLeft = function (popup, buttonEle) {
+        var popupEl = popup.parentElement;
+        if (!popupEl) {
+            return;
+        }
+        var currentLeft = parseFloat(popupEl.style.left);
+        var buttonRect = buttonEle.getBoundingClientRect();
+        var popupWidth = popupEl.offsetWidth;
+        var targetLeft = buttonRect.left - popupWidth - 1;
+        if (targetLeft < 0) {
+            targetLeft = 1;
+        }
+        if (Math.abs(currentLeft - targetLeft) > 1) {
+            popupEl.style.left = targetLeft + "px";
+        }
+    };
     RibbonGallery.prototype.handleGalleryPopupNavigation = function (e, popupEle, isDropdown, itemID, popup, gallerySettings) {
         var galleryPopupEle = popupEle.querySelectorAll('.e-ribbon-gallery-item');
         if (galleryPopupEle) {

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

@@ -49,7 +49,16 @@ var RibbonSplitButton = /** @class */ (function () {
                 }
             },
             beforeItemRender: splitButtonSettings.beforeItemRender,
-            beforeOpen: splitButtonSettings.beforeOpen,
+            beforeOpen: function () {
+                var popupEl = splitbutton.dropDown.element;
+                var target = _this.parent.getAppendToElement();
+                if (popupEl && !target.contains(popupEl)) {
+                    target.appendChild(popupEl);
+                }
+                if (splitButtonSettings.beforeOpen) {
+                    splitButtonSettings.beforeOpen.call(_this);
+                }
+            },
             close: function () {
                 splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
                 if (splitButtonSettings.close) {