@syncfusion/ej2-ribbon 33.2.5 → 34.1.29

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.5
+*  version : 34.1.29
 *  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.5",
+  "version": "34.1.29",
   "description": "Essential JS 2 Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,13 +9,13 @@
   "es2015": "./dist/es6/ej2-ribbon.es5.js",
   "typings": "index.d.ts",
   "dependencies": {
-    "@syncfusion/ej2-base": "~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.4",
-    "@syncfusion/ej2-popups": "~33.2.5",
-    "@syncfusion/ej2-splitbuttons": "~33.2.3"
+    "@syncfusion/ej2-base": "~34.1.29",
+    "@syncfusion/ej2-buttons": "~34.1.29",
+    "@syncfusion/ej2-dropdowns": "~34.1.29",
+    "@syncfusion/ej2-lists": "~34.1.29",
+    "@syncfusion/ej2-navigations": "~34.1.29",
+    "@syncfusion/ej2-popups": "~34.1.29",
+    "@syncfusion/ej2-splitbuttons": "~34.1.29"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass, L10n } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { ColorPicker } from '@syncfusion/ej2-inputs';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, L10n, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { ColorPicker } from '@syncfusion/ej2-inputs';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/ribbon/base/ribbon.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { addClass, append, Event, Collection, Complex, Component, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEvents } from '@syncfusion/ej2-base';
-import { isNullOrUndefined, isUndefined, NotifyPropertyChanges, Property, remove, removeClass, L10n } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, isUndefined, L10n, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';
 import { Tab, TabAnimationSettings, HScroll, Toolbar } from '@syncfusion/ej2-navigations';
 import { RibbonTab, FileMenuSettings, BackStageMenu, RibbonContextualTabSettings } from '../models/index';
 import { DisplayMode, RibbonLayout } from './interface';
@@ -415,7 +415,7 @@ var Ribbon = /** @class */ (function (_super) {
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
         if (this.activeLayout === 'Simplified') {
-            var activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            var activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active[aria-expanded="true"], .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active[aria-expanded="true"]');
             var colorPickerPopups = document.querySelectorAll('.e-ribbon .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker, .e-ribbon-group-overflow-ddb .e-colorpicker-wrapper.e-ribbon-control.e-ribbon-open .e-colorpicker');
             activePopups.forEach(function (popup) {
                 var dropDownBtn = getInstance(popup, DropDownButton);
@@ -4853,7 +4853,6 @@ var Ribbon = /** @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         this.tabObj.destroy();
         this.tabObj = undefined;
-        this.l10n = null;
         this.initialPropsData = {};
         this.hiddenGroups = [];
         this.hiddenElements = {};

package/src/ribbon/base/utils.js

@@ -273,6 +273,7 @@ export function createTooltip(element, ribbon) {
     var ribbonTooltip = new Tooltip({
         target: '.' + constants.RIBBON_TOOLTIP_TARGET,
         beforeRender: beforeTooltipRender.bind(this),
+        beforeOpen: beforeTooltipOpen.bind(this),
         windowCollision: true
     });
     ribbonTooltip.appendTo(element);
@@ -284,6 +285,13 @@ export function createTooltip(element, ribbon) {
     function beforeTooltipRender(args) {
         setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
     }
+    function beforeTooltipOpen(args) {
+        var target = ribbon.getAppendToElement();
+        var tooltipPopup = args.element;
+        if (tooltipPopup && !target.contains(tooltipPopup)) {
+            target.appendChild(tooltipPopup);
+        }
+    }
 }
 /**
  * Destroys tooltip

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

@@ -50,7 +50,16 @@ var RibbonColorPicker = /** @class */ (function () {
                     colorPickerSettings.beforeClose.call(_this);
                 }
             },
-            beforeOpen: colorPickerSettings.beforeOpen,
+            beforeOpen: function (e) {
+                var target = _this.parent.getAppendToElement();
+                var splitBtn = colorPicker['splitBtn'];
+                if (splitBtn && splitBtn.dropDown && !target.contains(splitBtn.dropDown.element)) {
+                    target.appendChild(splitBtn.dropDown.element);
+                }
+                if (colorPickerSettings.beforeOpen) {
+                    colorPickerSettings.beforeOpen.call(_this, e);
+                }
+            },
             beforeTileRender: colorPickerSettings.beforeTileRender,
             created: colorPickerSettings.created,
             change: function (e) {
@@ -119,6 +128,16 @@ var RibbonColorPicker = /** @class */ (function () {
                 item.colorPickerSettings.beforeClose.call(_this);
             }
         };
+        colorPickerObj.beforeOpen = function (e) {
+            var target = _this.parent.getAppendToElement();
+            var splitBtn = colorPickerObj['splitBtn'];
+            if (splitBtn && splitBtn.dropDown && !target.contains(splitBtn.dropDown.element)) {
+                target.appendChild(splitBtn.dropDown.element);
+            }
+            if (item.colorPickerSettings.beforeOpen) {
+                item.colorPickerSettings.beforeOpen.call(_this, e);
+            }
+        };
         splitBtn.close = function () {
             if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
                 if (overflowButton.element.classList.contains('e-active')) {

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

@@ -63,7 +63,21 @@ var RibbonComboBox = /** @class */ (function () {
             text: comboBoxSettings.text,
             value: comboBoxSettings.value,
             width: comboBoxSettings.width,
-            beforeOpen: comboBoxSettings.beforeOpen,
+            beforeOpen: function (e) {
+                requestAnimationFrame(function () {
+                    if (!_this.parent) {
+                        return;
+                    }
+                    var target = _this.parent.getAppendToElement();
+                    var popupEle = document.getElementById(inputEle.id + '_popup');
+                    if (popupEle && !target.contains(popupEle)) {
+                        target.appendChild(popupEle);
+                    }
+                });
+                if (comboBoxSettings.beforeOpen) {
+                    comboBoxSettings.beforeOpen.call(_this, e);
+                }
+            },
             open: comboBoxSettings.open,
             htmlAttributes: comboBoxSettings.htmlAttributes,
             close: function (e) {
@@ -100,6 +114,21 @@ var RibbonComboBox = /** @class */ (function () {
         var inputEle = itemEle.querySelector('#' + item.id);
         inputEle.setAttribute('data-control', item.type.toString());
         var comboBoxObj = getComponent(inputEle, ComboBox);
+        comboBoxObj.beforeOpen = function (e) {
+            requestAnimationFrame(function () {
+                if (!_this.parent) {
+                    return;
+                }
+                var target = _this.parent.getAppendToElement();
+                var popupEle = document.getElementById(item.id + '_popup');
+                if (popupEle && !target.contains(popupEle)) {
+                    target.appendChild(popupEle);
+                }
+            });
+            if (item.comboBoxSettings.beforeOpen) {
+                item.comboBoxSettings.beforeOpen.call(_this, e);
+            }
+        };
         comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         comboBoxObj.close = function (e) {
             var target = e.event ? e.event.target : null;

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

@@ -428,7 +428,8 @@ var RibbonGallery = /** @class */ (function () {
             className: 'e-ribbon-gallery-popup',
             id: item.id + '_galleryPopup'
         });
-        document.body.append(gallerypopupElement);
+        var appendTarget = this.parent.getAppendToElement();
+        appendTarget.append(gallerypopupElement);
         var galleryPopup = new Popup(gallerypopupElement, {
             relateTo: buttonEle,
             content: popupContainer,
@@ -533,13 +534,20 @@ var RibbonGallery = /** @class */ (function () {
             var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
             var popup_1 = getComponent(popupEle, Popup);
             var popupContainerEle_1 = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
-            var dropdown = new DropDownButton({
+            var dropdown_1 = new DropDownButton({
                 iconCss: iconCss,
                 content: content,
                 target: popupContainerEle_1,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-gallery-dropdown',
                 disabled: item.disabled,
+                beforeOpen: function () {
+                    var target = _this.parent.getAppendToElement();
+                    var dropDownPopup = dropdown_1 && dropdown_1.dropDown ? dropdown_1.dropDown.element : null;
+                    if (dropDownPopup && !target.contains(dropDownPopup)) {
+                        target.appendChild(dropDownPopup);
+                    }
+                },
                 open: function () {
                     var popupContainerItems = popupContainerEle_1.querySelectorAll('.e-ribbon-gallery-container');
                     _this.setWrapperStyle(popup_1, popupContainerItems);
@@ -556,11 +564,11 @@ var RibbonGallery = /** @class */ (function () {
                 }
             }, buttonEle_1);
             if (popup_1.width !== 'auto') {
-                dropdown.dropDown.width = formatUnit(popup_1.width);
+                dropdown_1.dropDown.width = formatUnit(popup_1.width);
             }
             if (popup_1.height !== 'auto') {
-                dropdown.dropDown.height = formatUnit(popup_1.height);
-                dropdown.dropDown.element.style.height = (popup_1.height).toString();
+                dropdown_1.dropDown.height = formatUnit(popup_1.height);
+                dropdown_1.dropDown.element.style.height = (popup_1.height).toString();
             }
         }
     };
@@ -664,6 +672,10 @@ var RibbonGallery = /** @class */ (function () {
         if (isCancelled) {
             return;
         }
+        var target = this.parent.getAppendToElement();
+        if (!target.contains(popupEle)) {
+            target.appendChild(popupEle);
+        }
         popup.show();
         this.checkCollision(popup, popupEle);
         var buttonEle = document.querySelector('#' + itemID + '_popupButton');

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

@@ -122,15 +122,21 @@ var RibbonGroupButton = /** @class */ (function () {
                 }
                 count++;
             }
-            var dropdown = new DropDownButton({
+            var dropdown_1 = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: btnContainerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
-                disabled: item.disabled
+                disabled: item.disabled,
+                beforeOpen: function () {
+                    var target = _this.parent.getAppendToElement();
+                    if (dropdown_1 && dropdown_1.dropDown && !target.contains(dropdown_1.dropDown.element)) {
+                        target.appendChild(dropdown_1.dropDown.element);
+                    }
+                }
             }, buttonEle);
             if (groupBtnSettings.header) {
-                var dropDownPopup = dropdown.dropDown;
+                var dropDownPopup = dropdown_1.dropDown;
                 this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
             }
             buttonEle.onclick = buttonEle.onkeydown = function () {
@@ -298,15 +304,21 @@ var RibbonGroupButton = /** @class */ (function () {
                 }
                 itemsCount++;
             }
-            var dropdown = new DropDownButton({
+            var dropdown_2 = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: containerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
-                disabled: item.disabled
+                disabled: item.disabled,
+                beforeOpen: function () {
+                    var target = _this.parent.getAppendToElement();
+                    if (dropdown_2 && dropdown_2.dropDown && !target.contains(dropdown_2.dropDown.element)) {
+                        target.appendChild(dropdown_2.dropDown.element);
+                    }
+                }
             }, buttonEle);
             if (groupBtnSettings.header) {
-                var dropDownPopup = dropdown.dropDown;
+                var dropDownPopup = dropdown_2.dropDown;
                 this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
             }
             buttonEle.onclick = buttonEle.onkeydown = function () {

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

@@ -130,9 +130,15 @@ var RibbonSplitButton = /** @class */ (function () {
             }
         };
         var target;
-        splitbutton.beforeOpen = function (e) {
+        splitbutton.beforeOpen = function () {
+            var splitBtn = getComponent(splitButtonEle, SplitButton);
+            var popupEl = splitBtn && splitBtn.dropDown ? splitBtn.dropDown.element : null;
+            var target = _this.parent.getAppendToElement();
+            if (popupEl && !target.contains(popupEl)) {
+                target.appendChild(popupEl);
+            }
             if (item.splitButtonSettings.beforeOpen) {
-                item.splitButtonSettings.beforeOpen.call(_this, e);
+                item.splitButtonSettings.beforeOpen.call(_this);
             }
         };
         splitbutton.beforeClose = function (e) {

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

@@ -76,6 +76,13 @@ var RibbonFileMenu = /** @class */ (function () {
         if (!isOpen && args.event && args.event.target.closest('.e-ribbon-menu')) {
             args.cancel = true;
         }
+        if (isOpen && this.fileMenuDDB && this.fileMenuDDB.dropDown) {
+            var target = this.parent.getAppendToElement();
+            var popupEl = this.fileMenuDDB.dropDown.element;
+            if (popupEl && !target.contains(popupEl)) {
+                target.appendChild(popupEl);
+            }
+        }
         var event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {
@@ -137,6 +144,13 @@ var RibbonFileMenu = /** @class */ (function () {
         }, this);
     };
     RibbonFileMenu.prototype.menuBeforeEvent = function (isOpen, args) {
+        if (isOpen) {
+            var target = this.parent.getAppendToElement();
+            var popup = args.element && args.element.closest('.e-popup');
+            if (popup && !target.contains(popup)) {
+                target.appendChild(popup);
+            }
+        }
         var event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {