@syncfusion/ej2-ribbon 23.2.5 → 24.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.5
+*  version : 24.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@23.2.4",
+  "_id": "@syncfusion/ej2-ribbon@21.27.0",
   "_inBundle": false,
-  "_integrity": "sha512-4mMJChA4HNyf9nNf2WRmoD1OrrC73VvmJIN5L4noZmNbMsHvshGiFHXudwOgz3LqH5E6BY703yU90z2/eotwWg==",
+  "_integrity": "sha512-Yp291W26tAmLS4Vev1bAKc12r3ExMoy1eV3QNuoxM4mysAxjyUBRN0MjP4w8xpLrGgBZqosG3G7Ewc/IphDVww==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.2.4.tgz",
-  "_shasum": "54f2208318408c2db8cb2d96a575b6d558029913",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.27.0.tgz",
+  "_shasum": "93461696848f6b7ca64be65ee903922584f6b52c",
   "_spec": "@syncfusion/ej2-ribbon@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-dropdowns": "~23.2.5",
-    "@syncfusion/ej2-lists": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.5",
-    "@syncfusion/ej2-popups": "~23.2.4",
-    "@syncfusion/ej2-splitbuttons": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.41",
+    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@syncfusion/ej2-dropdowns": "~24.1.41",
+    "@syncfusion/ej2-lists": "~24.1.41",
+    "@syncfusion/ej2-navigations": "~24.1.41",
+    "@syncfusion/ej2-popups": "~24.1.41",
+    "@syncfusion/ej2-splitbuttons": "~24.1.41"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.5",
+  "version": "24.1.41",
   "sideEffects": false
 }

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

@@ -200,6 +200,23 @@ export interface ClickGroupButtonEventArgs extends BaseEventArgs {
      */
     selectedItems: RibbonGroupButtonItemModel[];
 }
+/**
+ * Triggers before open / close of overflow popup menu.
+ */
+export interface OverflowPopupEventArgs extends BaseEventArgs {
+    /**
+     *  Provides the HTML element of the overflow popup.
+     */
+    element: HTMLElement;
+    /**
+     *  Defines the original event arguments.
+     */
+    event: Event;
+    /**
+     *  Defines whether to cancel the  overflow popup open or close.
+     */
+    cancel?: boolean;
+}
 /** @hidden */
 export interface itemProps {
     item?: RibbonItemModel;

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 } 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 } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } 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 } 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 { CheckBox } from '@syncfusion/ej2-buttons';
+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 } 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 } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } 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 } 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 { CheckBox } from '@syncfusion/ej2-buttons';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -150,4 +150,18 @@ export interface RibbonModel extends ComponentModel{
      */
     created?: EmitType<Event>;
 
+    /**
+     * Event triggers when the overflow popup opens.
+     *
+     * @event overflowPopupOpen
+     */
+    overflowPopupOpen?: EmitType<OverflowPopupEventArgs>;
+
+    /**
+     * Event triggers when the overflow popup closes.
+     *
+     * @event overflowPopupClose
+     */
+    overflowPopupClose?: EmitType<OverflowPopupEventArgs>;
+
 }

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

@@ -3,7 +3,7 @@ import { INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base'
 import { Tab, TabAnimationSettingsModel } from '@syncfusion/ej2-navigations';
 import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel, BackStageMenuModel } from '../models/index';
 import { RibbonModel } from './ribbon-model';
-import { ExpandCollapseEventArgs, LauncherClickEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
+import { ExpandCollapseEventArgs, LauncherClickEventArgs, OverflowPopupEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
 import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';
 import { RibbonFileMenu, RibbonBackstage } from '../modules/index';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -136,6 +136,18 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @event created
      */
     created: EmitType<Event>;
+    /**
+     * Event triggers when the overflow popup opens.
+     *
+     * @event overflowPopupOpen
+     */
+    overflowPopupOpen: EmitType<OverflowPopupEventArgs>;
+    /**
+     * Event triggers when the overflow popup closes.
+     *
+     * @event overflowPopupClose
+     */
+    overflowPopupClose: EmitType<OverflowPopupEventArgs>;
     /**
      * The `ribbonButtonModule` is used to create and manipulate buttons in ribbon item.
      */
@@ -371,6 +383,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @returns {void}
      */
     removeGroup(groupId: string): void;
+    private isHeaderVisible;
     /**
      * Hides a specific group within a ribbon tab.
      *

package/src/ribbon/base/ribbon.js

@@ -132,7 +132,9 @@ var Ribbon = /** @class */ (function (_super) {
             e.preventDefault();
         }
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
-        var ribbonControls = activeContent.querySelectorAll('.e-control');
+        var controlElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-control'));
+        var templateElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-template'));
+        var ribbonControls = controlElements.concat(templateElements);
         var comboBoxElements = activeContent.querySelectorAll('.e-combobox');
         var comboBoxEle;
         if (comboBoxElements) {
@@ -161,7 +163,7 @@ var Ribbon = /** @class */ (function (_super) {
         if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
             e.target.classList.contains('e-ribbon-collapse-btn') || e.target.classList.contains('e-ribbon-last-item') ||
             e.target.classList.contains('e-ribbon-first-item') || e.target.classList.contains('e-ribbon-group-of-btn') ||
-            e.target.classList.contains('e-ribbon-overall-of-btn')) {
+            e.target.classList.contains('e-ribbon-overall-of-btn') || e.target.classList.contains('e-ribbon-template')) {
             switch (e.action) {
                 case 'rightarrow':
                     this.handleNavigation(e, !this.enableRtl, ribbonControls);
@@ -203,7 +205,7 @@ var Ribbon = /** @class */ (function (_super) {
             }
         }
         if ((!enableRtl && (this.currentControlIndex > 0)) || (enableRtl && (this.currentControlIndex < ribbonControls.length - 1))) {
-            if (!e.target.classList.contains('e-combobox') && e.target.classList.contains('e-control') && !e.target.classList.contains('e-ribbon-last-item')) {
+            if (!e.target.classList.contains('e-combobox') && (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template')) && !e.target.classList.contains('e-ribbon-last-item')) {
                 if (enableRtl) {
                     this.currentControlIndex++;
                 }
@@ -237,7 +239,10 @@ var Ribbon = /** @class */ (function (_super) {
                         }
                         if (launcherIconEle) {
                             var items = groupContainer.querySelectorAll('.e-ribbon-item');
-                            items[items.length - 1].querySelector('.e-control').classList.add('e-ribbon-last-item');
+                            var elem = items[items.length - 1].querySelector('.e-control');
+                            if (elem) {
+                                elem.classList.add('e-ribbon-last-item');
+                            }
                         }
                     }
                     else {
@@ -350,6 +355,15 @@ var Ribbon = /** @class */ (function (_super) {
             var scrollEle = this.tabObj.element.querySelector('.' + constants.HORIZONTAL_SCROLLBAR);
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
+        if (this.activeLayout === 'Simplified') {
+            var activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            if (activePopup.length) {
+                for (var i = 0; i < activePopup.length; i++) {
+                    var dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+                    dropDownBtn.toggle();
+                }
+            }
+        }
     };
     Ribbon.prototype.renderTabs = function () {
         this.tabsInternal = this.tabs.slice();
@@ -675,7 +689,7 @@ var Ribbon = /** @class */ (function (_super) {
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
-                    if (overflowtarget.childElementCount === 0) {
+                    if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                         this.removeOverflowButton(overflowDDB);
                     }
                 }
@@ -747,6 +761,7 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         var overflowButton;
+        var itemProp = getGroup(this.tabs, groupId);
         var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
         var groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
@@ -760,6 +775,17 @@ var Ribbon = /** @class */ (function (_super) {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             var overflowBtnTarget = overflowButton.target;
+            var headerEle = overflowBtnTarget.querySelector('#' + groupId + constants.GROUPOF_BUTTON_ID + constants.HEADER_ID);
+            if (!headerEle) {
+                if (itemProp.group.overflowHeader) {
+                    var groupHeader_1 = this.createElement('div', {
+                        className: constants.RIBBON_OVERFLOW_HEADER,
+                        id: groupId + constants.GROUPOF_BUTTON_ID + constants.HEADER_ID,
+                        innerHTML: itemProp.group.overflowHeader
+                    });
+                    overflowBtnTarget.append(groupHeader_1);
+                }
+            }
             if (groupEle) {
                 if (groupEle.classList.contains('e-disabled')) {
                     overflowBtnTarget.classList.add('e-disabled');
@@ -788,7 +814,7 @@ var Ribbon = /** @class */ (function (_super) {
                 if (ofTabContainer) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + constants.CONTAINER_ID);
                     if (!ofGroupContainer) {
-                        ofGroupContainer = this.createGroupContainer(groupId, groupHeader);
+                        ofGroupContainer = itemProp.group.overflowHeader ? this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
                         if (groupEle) {
                             if (groupEle.classList.contains('e-disabled')) {
                                 ofGroupContainer.classList.add('e-disabled');
@@ -836,7 +862,7 @@ var Ribbon = /** @class */ (function (_super) {
                 break;
             case 'GroupButton':
                 if (this.activeLayout === 'Simplified') {
-                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle);
+                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
                     break;
                 }
         }
@@ -848,7 +874,8 @@ var Ribbon = /** @class */ (function (_super) {
         });
         var overflowtarget = this.overflowDDB.target;
         overflowtarget.append(ofTabContainer);
-        var ofGroupContainer = this.createGroupContainer(groupId, groupHeader);
+        var itemProp = getGroup(this.tabs, groupId);
+        var ofGroupContainer = itemProp.group.overflowHeader ? this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
         ofGroupContainer.append(itemEle);
         ofTabContainer.append(ofGroupContainer);
         if (tabIndex === this.selectedTab) {
@@ -1695,11 +1722,23 @@ var Ribbon = /** @class */ (function (_super) {
             locale: this.locale,
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
+            beforeOpen: function (args) {
+                var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                _this.trigger('overflowPopupOpen', eventArgs, function (ribbonArgs) {
+                    if (ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
+            },
             beforeClose: function (args) {
                 var ele = args.event ? closest(args.event.target, '.' + constants.RIBBON_POPUP_CONTROL) : null;
-                if (ele) {
-                    args.cancel = true;
-                }
+                var groupButtonEle = args.event ? closest(args.event.target, '.e-ribbon-group-button-overflow-popup') : null;
+                var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                _this.trigger('overflowPopupClose', eventArgs, function (ribbonArgs) {
+                    if (ele || ribbonArgs.cancel || groupButtonEle) {
+                        args.cancel = true;
+                    }
+                });
             }
         }, overflowButton);
         this.element.classList.add(constants.RIBBON_OVERFLOW);
@@ -1718,8 +1757,10 @@ var Ribbon = /** @class */ (function (_super) {
             var currentList = target.querySelector('.e-ribbon-of-tab.e-ribbon-active');
             items = currentList.getElementsByClassName('e-ribbon-item');
         }
-        var comboBoxEle = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control').classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
+        var control = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control');
+        var comboBoxEle = control && control.classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
         var ribbonItem;
+        var templateEle;
         if (comboBoxEle === null || (e.key === 'Tab') || this.itemIndex < 0) {
             if (e.key === 'ArrowDown' || (!e.shiftKey && e.key === 'Tab')) {
                 if ((!this.itemIndex && this.itemIndex !== 0) || this.itemIndex < 0 || this.itemIndex === items.length - 1) {
@@ -1728,13 +1769,21 @@ var Ribbon = /** @class */ (function (_super) {
                     this.findDisabledItem(ribbonItem, items, true);
                     if (comboBoxEle && e.key === 'Tab') {
                         e.preventDefault();
-                        items[this.itemIndex].querySelector('.e-control').focus();
+                        var item = items[this.itemIndex].querySelector('.e-control');
+                        if (item) {
+                            item.focus();
+                        }
                     }
+                    templateEle = items[this.itemIndex].querySelector('.e-ribbon-template');
                 }
                 else if (this.itemIndex < items.length - 1 && this.itemIndex >= 0) {
                     this.itemIndex++;
                     ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
                     this.findDisabledItem(ribbonItem, items, true);
+                    templateEle = items[this.itemIndex].querySelector('.e-ribbon-template');
+                }
+                if (templateEle) {
+                    templateEle.focus();
                 }
             }
             else if (e.key === 'ArrowUp' || (e.shiftKey && e.key === 'Tab')) {
@@ -1745,20 +1794,32 @@ var Ribbon = /** @class */ (function (_super) {
                         this.findDisabledItem(ribbonItem, items, false);
                         if (comboBoxEle && (e.shiftKey && e.key === 'Tab')) {
                             e.preventDefault();
-                            items[this.itemIndex].querySelector('.e-control').focus();
+                            var item = items[this.itemIndex].querySelector('.e-control');
+                            if (item) {
+                                item.focus();
+                            }
                         }
+                        templateEle = items[this.itemIndex].querySelector('.e-ribbon-template');
                     }
                     else if (this.itemIndex <= items.length - 1 && this.itemIndex > 0) {
                         this.itemIndex--;
                         ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
                         this.findDisabledItem(ribbonItem, items, false);
+                        templateEle = items[this.itemIndex].querySelector('.e-ribbon-template');
+                    }
+                    if (templateEle) {
+                        templateEle.focus();
                     }
                 }
             }
             target.setAttribute('index', this.itemIndex.toString());
         }
         var currentItemIndex = parseInt(target.getAttribute('index'), 10);
-        var itemType = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').getAttribute('data-control') : null;
+        var itemType = "";
+        var controlItem = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control') : null;
+        if (controlItem) {
+            itemType = controlItem.getAttribute('data-control');
+        }
         if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === ' ' || e.key === 'Tab') {
             if (itemType === 'ColorPicker') {
                 if (e.key === 'Tab') {
@@ -1770,7 +1831,10 @@ var Ribbon = /** @class */ (function (_super) {
                 if (e.key === 'Tab') {
                     e.preventDefault();
                 }
-                items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+                var elem = items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control');
+                if (elem) {
+                    elem.focus();
+                }
             }
             if (e.key === ' ' && (itemType === 'CheckBox')) {
                 var checkBoxEle = items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control');
@@ -2157,7 +2221,7 @@ var Ribbon = /** @class */ (function (_super) {
                                 this.setItemSize(ele, item);
                             }
                             if (group.enableGroupOverflow && overflowDDB) {
-                                if (overflowtarget.childElementCount === 0) {
+                                if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                                     this.removeOverflowButton(overflowDDB);
                                 }
                             }
@@ -2442,7 +2506,8 @@ var Ribbon = /** @class */ (function (_super) {
     Ribbon.prototype.createTemplateContent = function (item, itemElement) {
         var itemEle = this.createElement('div', {
             className: item.cssClass ? (constants.RIBBON_TEMPLATE + constants.SPACE + item.cssClass) : constants.RIBBON_TEMPLATE,
-            id: item.id
+            id: item.id,
+            attrs: { 'tabindex': '-1' }
         });
         if (item.disabled) {
             itemEle.classList.add(constants.DISABLED_CSS);
@@ -2918,7 +2983,7 @@ var Ribbon = /** @class */ (function (_super) {
             }
             if (this.activeLayout === RibbonLayout.Simplified) {
                 if (itemProp.group.enableGroupOverflow) {
-                    if (dropdown.target.childElementCount === 0) {
+                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
                         this.removeOverflowButton(dropdown);
                     }
                 }
@@ -2945,6 +3010,9 @@ var Ribbon = /** @class */ (function (_super) {
             this.refreshLayout();
         }
     };
+    Ribbon.prototype.isHeaderVisible = function (headerEle, groupID) {
+        return headerEle.querySelector('#' + groupID + constants.GROUPOF_BUTTON_ID + constants.HEADER_ID) ? true : false;
+    };
     /**
      * Hides a specific group within a ribbon tab.
      *
@@ -3504,7 +3572,7 @@ var Ribbon = /** @class */ (function (_super) {
             }
             if (this.activeLayout === RibbonLayout.Simplified) {
                 if (itemProp.group.enableGroupOverflow) {
-                    if (dropdown.target.childElementCount === 0) {
+                    if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
                         this.removeOverflowButton(dropdown);
                     }
                 }
@@ -3723,7 +3791,7 @@ var Ribbon = /** @class */ (function (_super) {
             }
             this.createRibbonItem(ribbonItem, itemContainer);
             if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
-                if (dropdown.target.childElementCount === 0) {
+                if (dropdown.target.childElementCount === 0 || (dropdown.target.childElementCount === 1 && this.isHeaderVisible(dropdown.target, itemProp.group.id))) {
                     this.removeOverflowButton(dropdown);
                 }
             }
@@ -4025,6 +4093,12 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Ribbon.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "overflowPopupOpen", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "overflowPopupClose", void 0);
     Ribbon = Ribbon_1 = __decorate([
         NotifyPropertyChanges
     ], Ribbon);

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

@@ -88,6 +88,15 @@ var RibbonColorPicker = /** @class */ (function () {
      */
     RibbonColorPicker.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
+        var colorPickerSettings = item.colorPickerSettings;
+        if (colorPickerSettings.label && this.parent.activeLayout === 'Simplified') {
+            var label = this.parent.createElement('div', {
+                className: 'e-ribbon-colorpicker-label',
+                id: item.id + '_label',
+                innerHTML: colorPickerSettings.label
+            });
+            itemEle.insertBefore(label, itemEle.firstChild);
+        }
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         colorPickerEle.setAttribute('data-control', item.type.toString());
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
@@ -118,6 +127,13 @@ var RibbonColorPicker = /** @class */ (function () {
      */
     RibbonColorPicker.prototype.removeOverFlowEvents = function (item, itemEle) {
         var _this = this;
+        var colorPickerSettings = item.colorPickerSettings;
+        if (colorPickerSettings.label) {
+            var label = itemEle.querySelector('#' + item.id + '_label');
+            if (label) {
+                label.remove();
+            }
+        }
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         var cssClass = colorPickerObj.cssClass.split(SPACE);

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

@@ -83,6 +83,15 @@ var RibbonComboBox = /** @class */ (function () {
      */
     RibbonComboBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
+        var comboBoxSettings = item.comboBoxSettings;
+        if (comboBoxSettings.label && this.parent.activeLayout === 'Simplified') {
+            var label = this.parent.createElement('div', {
+                className: 'e-ribbon-combobox-label',
+                id: item.id + '_label',
+                innerHTML: comboBoxSettings.label
+            });
+            itemEle.insertBefore(label, itemEle.firstChild);
+        }
         var inputEle = itemEle.querySelector('#' + item.id);
         inputEle.setAttribute('data-control', item.type.toString());
         var comboBoxObj = getComponent(inputEle, ComboBox);
@@ -107,6 +116,13 @@ var RibbonComboBox = /** @class */ (function () {
      */
     RibbonComboBox.prototype.removeOverFlowEvents = function (item, itemEle) {
         var _this = this;
+        var comboBoxSettings = item.comboBoxSettings;
+        if (comboBoxSettings.label) {
+            var label = itemEle.querySelector('#' + item.id + '_label');
+            if (label) {
+                label.remove();
+            }
+        }
         var inputEle = itemEle.querySelector('#' + item.id);
         var comboBoxObj = getComponent(inputEle, ComboBox);
         var cssClass = comboBoxObj.cssClass.split(SPACE);

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

@@ -164,7 +164,9 @@ var RibbonDropDown = /** @class */ (function () {
         return dropdown;
     };
     RibbonDropDown.prototype.keyActionHandler = function (e, target) {
-        var items = target.querySelectorAll('.e-control');
+        var controlElements = Array.prototype.slice.call(target.querySelectorAll('.e-control'));
+        var templateElements = Array.prototype.slice.call(target.querySelectorAll('.e-ribbon-template'));
+        var items = controlElements.concat(templateElements);
         var comboBoxElements = target.querySelectorAll('.e-combobox');
         var comboBoxEle;
         if (comboBoxElements) {
@@ -183,7 +185,7 @@ var RibbonDropDown = /** @class */ (function () {
                 }
             }
         }
-        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
+        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template') || e.target.classList.contains('e-ribbon-launcher-icon') ||
             e.target.classList.contains('e-ribbon-last-item') || e.target.classList.contains('e-ribbon-first-item')) {
             if (e.key === 'ArrowRight' || (!e.shiftKey && e.key === 'Tab')) {
                 this.handleNavigation(e, !this.enableRtl, items);
@@ -206,7 +208,7 @@ var RibbonDropDown = /** @class */ (function () {
             }
             if (!e.target.classList.contains('e-combobox') && !e.target.classList.contains('e-ribbon-last-item') &&
                 !e.target.classList.contains('e-ribbon-group-container') && (e.target.classList.contains('e-ribbon-first-item')
-                || this.itemIndex !== 0) && e.target.classList.contains('e-control')) {
+                || this.itemIndex !== 0) && (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template'))) {
                 this.itemIndex++;
                 this.updateItemIndex(e, items, true);
             }

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

@@ -1,5 +1,6 @@
 import { Ribbon } from '../base/ribbon';
 import { RibbonItemModel } from '../models';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 /**
  * Defines the items of Ribbon.
  */
@@ -30,6 +31,7 @@ export declare class RibbonGroupButton {
      * @hidden
      */
     switchGroupButton(item: RibbonItemModel, itemElement: HTMLElement): void;
+    private addGroupButtonHeader;
     private handleGroupButtonNavigation;
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -39,7 +41,7 @@ export declare class RibbonGroupButton {
      * @returns {void}
      * @hidden
      */
-    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
     /**
      * Removes the additional event handlers as the item moved into overflow popup.
      *