@syncfusion/ej2-ribbon 25.2.5 → 26.1.35

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

@@ -66,7 +66,12 @@ var RibbonButton = /** @class */ (function () {
                 btnSettings.clicked.call(_this, e);
             }
         };
-        buttonEle.setAttribute('aria-label', btnSettings.content);
+        if (btnSettings.content) {
+            buttonEle.setAttribute('aria-label', btnSettings.content);
+        }
+        else {
+            buttonEle.setAttribute('aria-label', 'button');
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.

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

@@ -1,6 +1,6 @@
 import { Ribbon } from '../base/index';
 import { RibbonItemModel } from '../models/index';
-import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
+import { Popup } from '@syncfusion/ej2-popups';
 /**
  * Defines the items of Ribbon.
  */
@@ -9,6 +9,7 @@ export declare class RibbonGallery {
     private count;
     private isAdded;
     private galleryItemsIndex;
+    private registeredTemplate;
     constructor(parent: Ribbon);
     protected getModuleName(): string;
     protected destroy(): void;
@@ -26,13 +27,22 @@ export declare class RibbonGallery {
     /**
      * Checks the gallery items height.
      *
-     * @param {number} selectedTab - Gets the current selected tab.
      * @param {HTMLElement} activeContent - Gets the current active content.
      * @returns {void}
      * @hidden
      */
-    checkAvailableHeight(selectedTab: number, activeContent: HTMLElement): void;
-    private checkCollision;
+    checkAvailableHeight(activeContent: HTMLElement): void;
+    /**
+     * Checks the popup collision.
+     *
+     * @param {Popup} popup - Gets the popup.
+     * @param {HTMLElement} popupEle - Gets the popup element.
+     * @param {number} offsetValue - Gets the offset value of gallery popup button.
+     * @returns {void}
+     * @hidden
+     */
+    checkCollision(popup: Popup, popupEle: HTMLElement, offsetValue?: number): void;
+    private setGalleryPopupHeight;
     private createPopup;
     /**
      * Updates gallery in mode switching.
@@ -48,11 +58,10 @@ export declare class RibbonGallery {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */
-    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
     /**
      * Removes the additional event handlers as the item moved into overflow popup.
      *

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

@@ -1,4 +1,4 @@
-import { append, getComponent, remove, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { append, getComponent, remove, formatUnit, isNullOrUndefined, setValue } from '@syncfusion/ej2-base';
 import { getItem, getTemplateFunction, setCustomAttributes } from '../base/index';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import * as constants from '../base/constant';
@@ -11,7 +11,12 @@ var RibbonGallery = /** @class */ (function () {
         this.count = 0;
         this.isAdded = false;
         this.galleryItemsIndex = 0;
+        this.registeredTemplate = {};
         this.parent = parent;
+        var ref = 'viewContainerRef';
+        setValue('registeredTemplate', this.registeredTemplate, this);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setValue(ref, this.parent["" + ref], this);
     }
     RibbonGallery.prototype.getModuleName = function () {
         return 'ribbonGallery';
@@ -35,13 +40,19 @@ var RibbonGallery = /** @class */ (function () {
             id: item.id + '_popupButton',
             className: 'e-ribbon-gallery-button e-icons e-drop-icon'
         });
+        buttonEle.setAttribute('aria-label', 'gallerydropdownbutton');
         itemEle.appendChild(buttonEle);
         this.createPopup(item, buttonEle);
         buttonEle.onclick = function (args) {
             var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
             if (popupEle) {
                 var popup = getComponent(popupEle, Popup);
-                popupEle.classList.contains('e-popup-close') ? _this.showPopup(popup, popupEle, args, gallerySettings, item.id) : _this.hidePopup(popup, popupEle, args, gallerySettings, item.id);
+                if (popupEle.classList.contains('e-popup-close')) {
+                    _this.showPopup(popup, popupEle, args, gallerySettings, item.id);
+                }
+                else {
+                    _this.hidePopup(popup, popupEle, args, gallerySettings, item.id);
+                }
             }
         };
         document.onclick = function (args) {
@@ -97,7 +108,7 @@ var RibbonGallery = /** @class */ (function () {
             var _loop_2 = function (j) {
                 galleryEle = this_1.parent.createElement('li', {
                     className: 'e-ribbon-gallery-item',
-                    id: galleryContainerEle.id + '_gallery' + j,
+                    id: (isPopup ? 'popup_' : '') + galleryContainerEle.id + '_gallery' + j,
                     attrs: { 'tabindex': '0' }
                 });
                 var itemEventArgs = { name: 'beforeItemRender', item: gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)] };
@@ -116,11 +127,11 @@ var RibbonGallery = /** @class */ (function () {
                 }
                 this_1.count = this_1.count + 1;
                 galleryEle.onclick = function (e) {
-                    _this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                    _this.setActiveState(e.currentTarget, gallerySettings, id, true, e, isPopup);
                 };
                 galleryEle.onkeydown = function (e) {
                     if (e.key === 'Enter' || e.key === ' ') {
-                        _this.setActiveState(e.currentTarget, gallerySettings, id, true, e);
+                        _this.setActiveState(e.currentTarget, gallerySettings, id, true, e, isPopup);
                     }
                 };
                 galleryEle.onmouseover = function (e) {
@@ -140,9 +151,12 @@ var RibbonGallery = /** @class */ (function () {
                         galleryContainerEle.style.flexFlow = 'wrap';
                     }
                 }
-                if ((!gallerySettings.template && !gallerySettings.popupTemplate) || ((gallerySettings.template && !gallerySettings.popupTemplate) && isPopup) || ((gallerySettings.popupTemplate && !gallerySettings.template) && !isPopup)) {
+                if ((!gallerySettings.template && !gallerySettings.popupTemplate) ||
+                    ((gallerySettings.template && !gallerySettings.popupTemplate) && isPopup) ||
+                    ((gallerySettings.popupTemplate && !gallerySettings.template) && !isPopup)) {
                     if (gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].htmlAttributes) {
-                        setCustomAttributes(galleryEle, gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].htmlAttributes);
+                        setCustomAttributes(galleryEle, gallerySettings.groups[parseInt(i.toString(), 10)]
+                            .items[parseInt(j.toString(), 10)].htmlAttributes);
                     }
                     if (gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)].iconCss) {
                         var iconEle = this_1.parent.createElement('span', {
@@ -186,7 +200,12 @@ var RibbonGallery = /** @class */ (function () {
             if (this_1.isAdded && !isPopup) {
                 return "break";
             }
-            !isPopup ? galleryWrapper.appendChild(galleryContainerEle) : itemEle.appendChild(galleryContainerEle);
+            if (!isPopup) {
+                galleryWrapper.appendChild(galleryContainerEle);
+            }
+            else {
+                itemEle.appendChild(galleryContainerEle);
+            }
             if (isPopup && gallerySettings.groups[parseInt(i.toString(), 10)].header) {
                 var headerEle = (this_1.parent.createElement('div', {
                     className: 'e-ribbon-gallery-header',
@@ -203,6 +222,14 @@ var RibbonGallery = /** @class */ (function () {
         }
         this.count = 0;
         this.isAdded = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.parent.isReact) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.parent.portals = this.parent.portals.concat(this['portals']);
+            this.parent['renderReactTemplates']();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this['portals'] = undefined;
+        }
     };
     RibbonGallery.prototype.setWrapperWidth = function (itemCount, galleryWrapper, gallerySettings, itemID) {
         var count = 1;
@@ -210,74 +237,77 @@ var RibbonGallery = /** @class */ (function () {
         var isWidthApplied = false;
         for (var i = 0; i < gallerySettings.groups.length; i++) {
             for (var j = 0; j < gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
-                if (gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
-                    if (itemCount >= count) {
-                        var galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
-                        if (galleryItemEle) {
-                            itemsWidth += galleryItemEle.offsetWidth;
-                            var itemStyles = window.getComputedStyle(galleryItemEle);
-                            if (itemStyles) {
-                                var paddingWidth = parseFloat(itemStyles.paddingLeft) + parseFloat(itemStyles.paddingRight);
-                                if (!(isNullOrUndefined(paddingWidth)))
-                                    itemsWidth += paddingWidth;
-                                var marginWidth = parseFloat(itemStyles.marginLeft) + parseFloat(itemStyles.marginRight);
-                                if (!(isNullOrUndefined(marginWidth)))
-                                    itemsWidth += marginWidth;
+                if (itemCount >= count) {
+                    var galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
+                    if (galleryItemEle) {
+                        itemsWidth += galleryItemEle.offsetWidth;
+                        var itemStyles = window.getComputedStyle(galleryItemEle);
+                        if (itemStyles) {
+                            var paddingWidth = parseFloat(itemStyles.paddingLeft) + parseFloat(itemStyles.paddingRight);
+                            if (!(isNullOrUndefined(paddingWidth))) {
+                                itemsWidth += paddingWidth;
+                            }
+                            var marginWidth = parseFloat(itemStyles.marginLeft) + parseFloat(itemStyles.marginRight);
+                            if (!(isNullOrUndefined(marginWidth))) {
+                                itemsWidth += marginWidth;
                             }
                         }
                     }
-                    else {
-                        isWidthApplied = true;
-                        break;
-                    }
-                    count++;
                 }
+                else {
+                    isWidthApplied = true;
+                    break;
+                }
+                count++;
             }
             if (isWidthApplied) {
                 break;
             }
         }
-        if (itemsWidth > 0)
+        if (itemsWidth > 0) {
             galleryWrapper.style.width = itemsWidth + 'px';
+        }
     };
     /**
      * Checks the gallery items height.
      *
-     * @param {number} selectedTab - Gets the current selected tab.
      * @param {HTMLElement} activeContent - Gets the current active content.
      * @returns {void}
      * @hidden
      */
-    RibbonGallery.prototype.checkAvailableHeight = function (selectedTab, activeContent) {
+    RibbonGallery.prototype.checkAvailableHeight = function (activeContent) {
         var galleryWrapperItems = activeContent.querySelectorAll('.e-ribbon-gallery-wrapper');
         for (var n = 0; n < galleryWrapperItems.length; n++) {
+            var count = 0;
+            var simplifiedItemsCount = 0;
             var isHeight = false;
-            var itemsCount = 0;
             var galleryWrapper = galleryWrapperItems[parseInt(n.toString(), 10)];
-            var galleryWrapperHeight = galleryWrapper.offsetHeight;
             var itemID = galleryWrapper.id.replace(/_galleryWrapper/g, '');
+            var galleryWrapperHeight = galleryWrapper.offsetHeight;
             var itemProp = getItem(this.parent.tabs, itemID);
             if (itemProp) {
                 this.setWrapperWidth(itemProp.item.gallerySettings.itemCount, galleryWrapper, itemProp.item.gallerySettings, itemID);
                 for (var i = 0; i < itemProp.item.gallerySettings.groups.length; i++) {
-                    if (itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight && itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].itemHeight !== 'auto') {
-                        for (var j = 0; j < itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
-                            var galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
-                            if (galleryItemEle) {
-                                itemsCount++;
+                    for (var j = 0; j < itemProp.item.gallerySettings.groups[parseInt(i.toString(), 10)].items.length; j++) {
+                        var galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + i + '_gallery' + j);
+                        if (galleryItemEle) {
+                            if (this.parent.activeLayout === 'Classic') {
+                                if (galleryItemEle.classList.contains('e-hidden')) {
+                                    galleryItemEle.classList.remove('e-hidden');
+                                }
                                 if (!isHeight) {
-                                    if (itemsCount === 1) {
-                                        var itemsValues = 0;
-                                        var itemStyles = window.getComputedStyle(galleryItemEle);
-                                        if (itemStyles) {
-                                            var paddingWidth = parseFloat(itemStyles.paddingTop) + parseFloat(itemStyles.paddingBottom);
-                                            if (!(isNullOrUndefined(paddingWidth)))
-                                                itemsValues += paddingWidth;
-                                            var marginWidth = parseFloat(itemStyles.marginTop) + parseFloat(itemStyles.marginBottom);
-                                            if (!(isNullOrUndefined(marginWidth)))
-                                                itemsValues += marginWidth;
+                                    var itemsValues = 0;
+                                    var itemStyles = window.getComputedStyle(galleryItemEle);
+                                    if (itemStyles) {
+                                        var marginWidth = parseFloat(itemStyles.marginTop) + parseFloat(itemStyles.marginBottom);
+                                        if (!(isNullOrUndefined(marginWidth))) {
+                                            itemsValues += marginWidth;
                                         }
-                                        if (galleryWrapperHeight > (galleryItemEle.offsetHeight + itemsValues)) {
+                                    }
+                                    count++;
+                                    if (itemProp.item.gallerySettings.itemCount === count) {
+                                        count = 0;
+                                        if (galleryWrapperHeight >= (galleryItemEle.offsetHeight + itemsValues)) {
                                             galleryWrapperHeight -= (galleryItemEle.offsetHeight + itemsValues);
                                         }
                                         else {
@@ -285,30 +315,49 @@ var RibbonGallery = /** @class */ (function () {
                                             galleryItemEle.remove();
                                         }
                                     }
-                                    if (itemsCount === itemProp.item.gallerySettings.itemCount) {
-                                        itemsCount = 0;
+                                    else if (galleryWrapperHeight < (galleryItemEle.offsetHeight + itemsValues)) {
+                                        isHeight = true;
+                                        galleryItemEle.remove();
                                     }
                                 }
                                 else {
                                     galleryItemEle.remove();
                                 }
                             }
+                            else {
+                                simplifiedItemsCount++;
+                                if (simplifiedItemsCount > itemProp.item.gallerySettings.itemCount) {
+                                    galleryItemEle.classList.add('e-hidden');
+                                }
+                            }
                         }
                     }
                 }
             }
         }
     };
-    RibbonGallery.prototype.checkCollision = function (popup, popupEle) {
+    /**
+     * Checks the popup collision.
+     *
+     * @param {Popup} popup - Gets the popup.
+     * @param {HTMLElement} popupEle - Gets the popup element.
+     * @param {number} offsetValue - Gets the offset value of gallery popup button.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonGallery.prototype.checkCollision = function (popup, popupEle, offsetValue) {
+        if (offsetValue === void 0) { offsetValue = 0; }
         var paddingWidth = 0;
         var marginWidth = 0;
         if (popupEle) {
-            var screenWidth = window.innerWidth;
+            var windowWidth = window.innerWidth;
+            var screenWidth = offsetValue === 0 ? windowWidth : Math.abs(windowWidth - (windowWidth - offsetValue));
             var paddingStyles = window.getComputedStyle(popupEle);
             if (paddingStyles) {
                 paddingWidth = parseFloat(paddingStyles.paddingLeft) + parseFloat(paddingStyles.paddingRight);
-                if (!(isNullOrUndefined(paddingWidth)))
+                if (!(isNullOrUndefined(paddingWidth))) {
                     screenWidth = screenWidth - paddingWidth;
+                }
             }
             var popupContainerItems = popupEle.querySelectorAll('.e-ribbon-gallery-container');
             if (popup.width !== 'auto') {
@@ -320,15 +369,16 @@ var RibbonGallery = /** @class */ (function () {
             for (var i = 0; i < popupContainerItems.length; i++) {
                 var itemsWidth = 0;
                 for (var j = 0; j < popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item').length; j++) {
-                    var marginStyles = window.getComputedStyle(popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)]);
-                    if (marginStyles) {
-                        marginWidth = parseFloat(marginStyles.marginLeft) + parseFloat(marginStyles.marginRight);
-                        if (!(isNullOrUndefined(marginWidth)))
+                    var popupItemStyles = window.getComputedStyle(popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)]);
+                    if (popupItemStyles) {
+                        marginWidth = parseFloat(popupItemStyles.marginLeft) + parseFloat(popupItemStyles.marginRight);
+                        if (!(isNullOrUndefined(marginWidth))) {
                             itemsWidth += marginWidth;
+                        }
                     }
-                    itemsWidth += popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)].offsetWidth;
+                    itemsWidth += Math.round(parseFloat(popupItemStyles.width));
                     if (((screenWidth <= itemsWidth) && popup.width === 'auto') || ((popup.width !== 'auto') && (screenWidth <= parseInt(popup.width.toString(), 10)) && (screenWidth <= itemsWidth))) {
-                        popupEle.style.width = ((itemsWidth + Math.abs(paddingWidth - marginWidth)) - popupContainerItems[parseInt(i.toString(), 10)].querySelectorAll('.e-ribbon-gallery-item')[parseInt(j.toString(), 10)].offsetWidth) + 'px';
+                        popupEle.style.width = ((itemsWidth + Math.abs(paddingWidth - marginWidth)) - Math.round(parseFloat(popupItemStyles.width))) + 'px';
                         isCollideOccurs = true;
                         break;
                     }
@@ -337,6 +387,9 @@ var RibbonGallery = /** @class */ (function () {
                     popupContainerItems.forEach(function (ele) {
                         ele.style.flexFlow = 'wrap';
                     });
+                    if (popup.height === 'auto') {
+                        this.setGalleryPopupHeight(popupEle, parseFloat(paddingStyles.height), parseFloat(paddingStyles.top));
+                    }
                     break;
                 }
             }
@@ -350,9 +403,20 @@ var RibbonGallery = /** @class */ (function () {
                 else {
                     popupEle.style.width = (popup.width).toString();
                 }
+                if (popup.height === 'auto') {
+                    this.setGalleryPopupHeight(popupEle, parseFloat(paddingStyles.height), parseFloat(paddingStyles.top));
+                }
             }
         }
     };
+    RibbonGallery.prototype.setGalleryPopupHeight = function (popupEle, popupHeight, popupTop) {
+        if (window.innerHeight < popupHeight || window.innerHeight < Math.round(popupHeight + popupTop)) {
+            popupEle.style.height = (window.innerHeight - popupTop) + 'px';
+        }
+        else {
+            popupEle.style.height = 'auto';
+        }
+    };
     RibbonGallery.prototype.createPopup = function (item, buttonEle) {
         var popupContainer = this.parent.createElement('div', {
             className: 'e-ribbon-popup-container',
@@ -387,15 +451,18 @@ var RibbonGallery = /** @class */ (function () {
      */
     RibbonGallery.prototype.switchGalleryItems = function (activeLayout, itemID) {
         var itemEle = this.parent.element.querySelector('#' + itemID + constants.CONTAINER_ID);
-        var count = 0;
         var itemProp = getItem(this.parent.tabs, itemID);
         if (itemEle) {
-            var galleryWrapper = itemEle.querySelector('.e-ribbon-gallery-wrapper');
             var galleryIcons = itemEle.querySelectorAll('.e-ribbon-gallery-icons');
             var galleryContainer = itemEle.querySelectorAll('.e-ribbon-gallery-container');
             if (galleryIcons.length) {
                 for (var i = 0; i < galleryIcons.length; i++) {
-                    activeLayout === 'Simplified' ? galleryIcons[parseInt(i.toString(), 10)].classList.add('e-hidden') : galleryIcons[parseInt(i.toString(), 10)].classList.remove('e-hidden');
+                    if (activeLayout === 'Simplified') {
+                        galleryIcons[parseInt(i.toString(), 10)].classList.add('e-hidden');
+                    }
+                    else {
+                        galleryIcons[parseInt(i.toString(), 10)].classList.remove('e-hidden');
+                    }
                 }
             }
             if (galleryContainer.length && itemProp) {
@@ -403,24 +470,20 @@ var RibbonGallery = /** @class */ (function () {
                     for (var i = 0; i < galleryContainer.length; i++) {
                         if (itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].itemHeight && itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].itemHeight !== 'auto') {
                             if (itemID + '_galleryContainer' + n === galleryContainer[parseInt(i.toString(), 10)].id) {
-                                activeLayout === 'Simplified' ? galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'nowrap' : galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'wrap';
+                                if (activeLayout === 'Simplified') {
+                                    galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'nowrap';
+                                }
+                                else {
+                                    galleryContainer[parseInt(i.toString(), 10)].style.flexFlow = 'wrap';
+                                }
                             }
                         }
                     }
                 }
             }
-            if (galleryWrapper) {
-                for (var n = 0; n < itemProp.item.gallerySettings.groups.length; n++) {
-                    for (var i = 0; i < itemProp.item.gallerySettings.groups[parseInt(n.toString(), 10)].items.length; i++) {
-                        count++;
-                        if (count > itemProp.item.gallerySettings.itemCount) {
-                            var galleryItemEle = galleryWrapper.querySelector('#' + itemID + '_galleryContainer' + n + '_gallery' + i);
-                            if (galleryItemEle) {
-                                activeLayout === 'Simplified' ? galleryItemEle.classList.add('e-hidden') : galleryItemEle.classList.remove('e-hidden');
-                            }
-                        }
-                    }
-                }
+            var activeContent = this.parent.tabObj.element.querySelector('#' + this.parent.tabs[this.parent.selectedTab].id + constants.CONTENT_ID);
+            if (activeContent) {
+                this.checkAvailableHeight(activeContent);
             }
         }
     };
@@ -429,15 +492,14 @@ var RibbonGallery = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */
-    RibbonGallery.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+    RibbonGallery.prototype.addOverFlowEvents = function (item, itemEle) {
         var _this = this;
         if (itemEle.closest('.e-ribbon-overflow-target')) {
             var buttonEle = this.parent.createElement('button', {
-                id: item.id,
+                id: item.id
             });
             itemEle.appendChild(buttonEle);
             itemEle.querySelector('.e-ribbon-gallery-wrapper').classList.add('e-hidden');
@@ -445,8 +507,9 @@ var RibbonGallery = /** @class */ (function () {
                 ele.classList.add('e-hidden');
             });
             var popupButton = itemEle.querySelector('#' + item.id + '_popupButton');
-            if (popupButton)
+            if (popupButton) {
                 popupButton.classList.add('e-hidden');
+            }
             var itemProp = getItem(this.parent.tabs, item.id);
             var iconCss = itemProp && itemProp.group.groupIconCss ? itemProp.group.groupIconCss : '';
             var content = itemProp && itemProp.group.header ? itemProp.group.header : '';
@@ -466,7 +529,7 @@ var RibbonGallery = /** @class */ (function () {
             var popupEle = document.querySelector('#' + item.id + '_galleryPopup');
             var popup = getComponent(popupEle, Popup);
             var popupContainerEle_1 = document.querySelector('#' + item.id + '_galleryPopup .e-ribbon-popup-container');
-            var dropdown_1 = new DropDownButton({
+            var dropdown = new DropDownButton({
                 iconCss: iconCss,
                 content: content,
                 target: popupContainerEle_1,
@@ -475,7 +538,6 @@ var RibbonGallery = /** @class */ (function () {
                 disabled: item.disabled,
                 open: function () {
                     _this.setFoucsToFirstItem(popupContainerEle_1, true, item.id);
-                    _this.checkCollision(dropdown_1.dropDown, dropdown_1.dropDown.element);
                 },
                 beforeClose: function (args) {
                     var isCancelled = _this.popupEvents(args.event, item.gallerySettings, 'popupClose', false);
@@ -485,11 +547,11 @@ var RibbonGallery = /** @class */ (function () {
                 }
             }, buttonEle);
             if (popup.width !== 'auto') {
-                dropdown_1.dropDown.width = formatUnit(popup.width);
+                dropdown.dropDown.width = formatUnit(popup.width);
             }
             if (popup.height !== 'auto') {
-                dropdown_1.dropDown.height = formatUnit(popup.height);
-                dropdown_1.dropDown.element.style.height = (popup.height).toString();
+                dropdown.dropDown.height = formatUnit(popup.height);
+                dropdown.dropDown.element.style.height = (popup.height).toString();
             }
         }
     };
@@ -519,7 +581,7 @@ var RibbonGallery = /** @class */ (function () {
             remove(galleryDDBEle);
         }
     };
-    RibbonGallery.prototype.setActiveState = function (galleryEle, gallerySettings, itemID, isInteracted, event) {
+    RibbonGallery.prototype.setActiveState = function (galleryEle, gallerySettings, itemID, isInteracted, event, isPopup) {
         var previousItem;
         var currentItem;
         var itemEle = document.querySelector('#' + itemID + constants.CONTAINER_ID);
@@ -534,12 +596,13 @@ var RibbonGallery = /** @class */ (function () {
                 if (selctedGalleryItem[0].id === itemID + '_galleryContainer' + i + '_gallery' + j) {
                     previousItem = gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)];
                 }
-                if (galleryEle.id === itemID + '_galleryContainer' + i + '_gallery' + j) {
+                if (galleryEle.id === (isPopup ? 'popup_' : '') + itemID + '_galleryContainer' + i + '_gallery' + j) {
                     currentItem = gallerySettings.groups[parseInt(i.toString(), 10)].items[parseInt(j.toString(), 10)];
                 }
             }
         }
-        var galleryItem = document.querySelectorAll('#' + galleryEle.id);
+        var galleryItem = document.getElementById(galleryEle.id);
+        var galleryItemPopup;
         var selectingEventArgs = { cancel: false, name: 'beforeSelect', previousItem: previousItem, currentItem: currentItem, isInteracted: isInteracted, event: event };
         if (gallerySettings.beforeSelect) {
             gallerySettings.beforeSelect.call(this, selectingEventArgs);
@@ -551,9 +614,16 @@ var RibbonGallery = /** @class */ (function () {
             for (var i = 0; i < selctedGalleryItem.length; i++) {
                 selctedGalleryItem[parseInt(i.toString(), 10)].classList.remove('e-ribbon-gallery-selected');
             }
-            for (var i = 0; i < galleryItem.length; i++) {
-                galleryItem[parseInt(i.toString(), 10)].classList.add('e-ribbon-gallery-selected');
+            if (!galleryItem.id.startsWith('popup_')) {
+                galleryItemPopup = document.getElementById('popup_' + galleryEle.id);
+            }
+            else if (document.getElementById(galleryItem.id.slice(6))) {
+                galleryItemPopup = document.getElementById(galleryItem.id.slice(6));
             }
+            if (galleryItemPopup) {
+                galleryItemPopup.classList.add('e-ribbon-gallery-selected');
+            }
+            galleryItem.classList.add('e-ribbon-gallery-selected');
             var selectedEventArgs = { previousItem: previousItem, currentItem: currentItem, name: 'select', isInteracted: isInteracted, event: event };
             var galleryPopupItems = document.querySelectorAll('#' + itemID + '_popupContainer .e-ribbon-gallery-item');
             for (var i = 0; i < galleryPopupItems.length; i++) {
@@ -590,6 +660,9 @@ var RibbonGallery = /** @class */ (function () {
         var buttonEle = document.querySelector('#' + itemID + '_popupButton');
         buttonEle.classList.add('e-gallery-button-active');
         var buttonPosition = buttonEle.getBoundingClientRect();
+        if (popupEle.offsetWidth > buttonPosition.left) {
+            this.checkCollision(popup, popupEle, buttonPosition.left);
+        }
         var offsetX = Math.abs((popupEle.offsetWidth - buttonPosition.left)) + buttonEle.offsetWidth;
         popupEle.style.left = offsetX + 'px';
         popupEle.style.top = popupEle.getBoundingClientRect().top + 2 + 'px';
@@ -671,10 +744,7 @@ var RibbonGallery = /** @class */ (function () {
                     galleryPopupEle[this.galleryItemsIndex].focus();
                 }
             }
-            else if (e.key === 'Enter' || e.code === 'Space') {
-                galleryPopupEle[this.galleryItemsIndex].click();
-            }
-            else if (e.key === 'Escape' && !isDropdown) {
+            else if ((e.key === 'Enter' || e.code === 'Space') || (e.key === 'Escape' && !isDropdown)) {
                 this.hidePopup(popup, popupEle, e, gallerySettings, itemID);
             }
         }
@@ -690,8 +760,7 @@ var RibbonGallery = /** @class */ (function () {
         if (items.cssClass) {
             galleryItemEle.classList.add(items.cssClass);
         }
-        append(templateFunction({ items: items }, this, templateName, (id + 'galleryTemplate'), this.parent.isStringTemplate), galleryItemEle);
-        this.parent['renderReactTemplates']();
+        append(templateFunction({ items: items }, this, templateName, (id + 'galleryTemplate'), this.parent.isStringTemplate, null, null, this.parent), galleryItemEle);
     };
     RibbonGallery.prototype.createGalleryPopupTemplate = function (galleryItemEle, gallerySettings, id, items) {
         galleryItemEle.classList.add('e-ribbon-gallery-popup-template');
@@ -704,8 +773,7 @@ var RibbonGallery = /** @class */ (function () {
         if (items.cssClass) {
             galleryItemEle.classList.add(items.cssClass);
         }
-        append(templateFunction({ items: items }, this, templateName, (id + 'galleryPopupTemplate'), this.parent.isStringTemplate), galleryItemEle);
-        this.parent['renderReactTemplates']();
+        append(templateFunction({ items: items }, this, templateName, (id + 'galleryPopupTemplate'), this.parent.isStringTemplate, null, null, this.parent), galleryItemEle);
     };
     return RibbonGallery;
 }());

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

@@ -39,6 +39,7 @@ export declare class RibbonGroupButton {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */