@syncfusion/ej2-ribbon 33.2.5 → 34.1.29

package/dist/es6/ej2-ribbon.es2015.js

@@ -1694,7 +1694,16 @@ class RibbonColorPicker {
                     colorPickerSettings.beforeClose.call(this);
                 }
             },
-            beforeOpen: colorPickerSettings.beforeOpen,
+            beforeOpen: (e) => {
+                const target = this.parent.getAppendToElement();
+                const 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: (e) => {
@@ -1762,6 +1771,16 @@ class RibbonColorPicker {
                 item.colorPickerSettings.beforeClose.call(this);
             }
         };
+        colorPickerObj.beforeOpen = (e) => {
+            const target = this.parent.getAppendToElement();
+            const 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 = () => {
             if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
                 if (overflowButton.element.classList.contains('e-active')) {
@@ -1931,7 +1950,21 @@ class RibbonComboBox {
             text: comboBoxSettings.text,
             value: comboBoxSettings.value,
             width: comboBoxSettings.width,
-            beforeOpen: comboBoxSettings.beforeOpen,
+            beforeOpen: (e) => {
+                requestAnimationFrame(() => {
+                    if (!this.parent) {
+                        return;
+                    }
+                    const target = this.parent.getAppendToElement();
+                    const 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: (e) => {
@@ -1967,6 +2000,21 @@ class RibbonComboBox {
         const inputEle = itemEle.querySelector('#' + item.id);
         inputEle.setAttribute('data-control', item.type.toString());
         const comboBoxObj = getComponent(inputEle, ComboBox);
+        comboBoxObj.beforeOpen = (e) => {
+            requestAnimationFrame(() => {
+                if (!this.parent) {
+                    return;
+                }
+                const target = this.parent.getAppendToElement();
+                const 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 = (e) => {
             const target = e.event ? e.event.target : null;
@@ -2660,9 +2708,15 @@ class RibbonSplitButton {
             }
         };
         let target;
-        splitbutton.beforeOpen = (e) => {
+        splitbutton.beforeOpen = () => {
+            const splitBtn = getComponent(splitButtonEle, SplitButton);
+            const popupEl = splitBtn && splitBtn.dropDown ? splitBtn.dropDown.element : null;
+            const 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 = (e) => {
@@ -3101,6 +3155,7 @@ function createTooltip(element, ribbon) {
     const ribbonTooltip = new Tooltip({
         target: '.' + RIBBON_TOOLTIP_TARGET,
         beforeRender: beforeTooltipRender.bind(this),
+        beforeOpen: beforeTooltipOpen.bind(this),
         windowCollision: true
     });
     ribbonTooltip.appendTo(element);
@@ -3112,6 +3167,13 @@ function createTooltip(element, ribbon) {
     function beforeTooltipRender(args) {
         setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
     }
+    function beforeTooltipOpen(args) {
+        const target = ribbon.getAppendToElement();
+        const tooltipPopup = args.element;
+        if (tooltipPopup && !target.contains(tooltipPopup)) {
+            target.appendChild(tooltipPopup);
+        }
+    }
 }
 /**
  * Destroys tooltip
@@ -3284,7 +3346,13 @@ class RibbonGroupButton {
                 target: btnContainerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
-                disabled: item.disabled
+                disabled: item.disabled,
+                beforeOpen: () => {
+                    const target = this.parent.getAppendToElement();
+                    if (dropdown && dropdown.dropDown && !target.contains(dropdown.dropDown.element)) {
+                        target.appendChild(dropdown.dropDown.element);
+                    }
+                }
             }, buttonEle);
             if (groupBtnSettings.header) {
                 const dropDownPopup = dropdown.dropDown;
@@ -3459,7 +3527,13 @@ class RibbonGroupButton {
                 target: containerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
-                disabled: item.disabled
+                disabled: item.disabled,
+                beforeOpen: () => {
+                    const target = this.parent.getAppendToElement();
+                    if (dropdown && dropdown.dropDown && !target.contains(dropdown.dropDown.element)) {
+                        target.appendChild(dropdown.dropDown.element);
+                    }
+                }
             }, buttonEle);
             if (groupBtnSettings.header) {
                 const dropDownPopup = dropdown.dropDown;
@@ -4084,7 +4158,8 @@ class RibbonGallery {
             className: 'e-ribbon-gallery-popup',
             id: item.id + '_galleryPopup'
         });
-        document.body.append(gallerypopupElement);
+        const appendTarget = this.parent.getAppendToElement();
+        appendTarget.append(gallerypopupElement);
         const galleryPopup = new Popup(gallerypopupElement, {
             relateTo: buttonEle,
             content: popupContainer,
@@ -4195,6 +4270,13 @@ class RibbonGallery {
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-gallery-dropdown',
                 disabled: item.disabled,
+                beforeOpen: () => {
+                    const target = this.parent.getAppendToElement();
+                    const dropDownPopup = dropdown && dropdown.dropDown ? dropdown.dropDown.element : null;
+                    if (dropDownPopup && !target.contains(dropDownPopup)) {
+                        target.appendChild(dropDownPopup);
+                    }
+                },
                 open: () => {
                     const popupContainerItems = popupContainerEle.querySelectorAll('.e-ribbon-gallery-container');
                     this.setWrapperStyle(popup, popupContainerItems);
@@ -4319,6 +4401,10 @@ class RibbonGallery {
         if (isCancelled) {
             return;
         }
+        const target = this.parent.getAppendToElement();
+        if (!target.contains(popupEle)) {
+            target.appendChild(popupEle);
+        }
         popup.show();
         this.checkCollision(popup, popupEle);
         const buttonEle = document.querySelector('#' + itemID + '_popupButton');
@@ -4844,7 +4930,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
         if (this.activeLayout === 'Simplified') {
-            const activePopups = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            const 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"]');
             const 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((popup) => {
                 const dropDownBtn = getInstance(popup, DropDownButton);
@@ -9206,7 +9292,6 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         super.destroy();
         this.tabObj.destroy();
         this.tabObj = undefined;
-        this.l10n = null;
         this.initialPropsData = {};
         this.hiddenGroups = [];
         this.hiddenElements = {};
@@ -9506,6 +9591,13 @@ class RibbonFileMenu {
         if (!isOpen && args.event && args.event.target.closest('.e-ribbon-menu')) {
             args.cancel = true;
         }
+        if (isOpen && this.fileMenuDDB && this.fileMenuDDB.dropDown) {
+            const target = this.parent.getAppendToElement();
+            const popupEl = this.fileMenuDDB.dropDown.element;
+            if (popupEl && !target.contains(popupEl)) {
+                target.appendChild(popupEl);
+            }
+        }
         const event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {
@@ -9566,6 +9658,13 @@ class RibbonFileMenu {
         }, this);
     }
     menuBeforeEvent(isOpen, args) {
+        if (isOpen) {
+            const target = this.parent.getAppendToElement();
+            const popup = args.element && args.element.closest('.e-popup');
+            if (popup && !target.contains(popup)) {
+                target.appendChild(popup);
+            }
+        }
         const event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {