@syncfusion/ej2-ribbon 23.2.5 → 24.1.41

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

@@ -244,11 +244,14 @@ __decorate$7([
 __decorate$7([
     Property('')
 ], RibbonColorPickerSettings.prototype, "cssClass", void 0);
+__decorate$7([
+    Property('')
+], RibbonColorPickerSettings.prototype, "label", void 0);
 __decorate$7([
     Property(true)
 ], RibbonColorPickerSettings.prototype, "enableOpacity", void 0);
 __decorate$7([
-    Property('Picker')
+    Property('Palette')
 ], RibbonColorPickerSettings.prototype, "mode", void 0);
 __decorate$7([
     Property(true)
@@ -319,6 +322,9 @@ __decorate$8([
 __decorate$8([
     Property('')
 ], RibbonComboBoxSettings.prototype, "cssClass", void 0);
+__decorate$8([
+    Property('')
+], RibbonComboBoxSettings.prototype, "label", void 0);
 __decorate$8([
     Property([])
 ], RibbonComboBoxSettings.prototype, "dataSource", void 0);
@@ -598,6 +604,9 @@ var __decorate$12 = (undefined && undefined.__decorate) || function (decorators,
  */
 class RibbonGroupButtonSettings extends ChildProperty {
 }
+__decorate$12([
+    Property('')
+], RibbonGroupButtonSettings.prototype, "header", void 0);
 __decorate$12([
     Property('Single')
 ], RibbonGroupButtonSettings.prototype, "selection", void 0);
@@ -751,6 +760,9 @@ __decorate$2([
 __decorate$2([
     Property('Column')
 ], RibbonGroup.prototype, "orientation", void 0);
+__decorate$2([
+    Property('')
+], RibbonGroup.prototype, "overflowHeader", void 0);
 __decorate$2([
     Property(0)
 ], RibbonGroup.prototype, "priority", void 0);
@@ -1517,6 +1529,15 @@ class RibbonColorPicker {
      * @hidden
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
+        let colorPickerSettings = item.colorPickerSettings;
+        if (colorPickerSettings.label && this.parent.activeLayout === 'Simplified') {
+            const label = this.parent.createElement('div', {
+                className: 'e-ribbon-colorpicker-label',
+                id: item.id + '_label',
+                innerHTML: colorPickerSettings.label
+            });
+            itemEle.insertBefore(label, itemEle.firstChild);
+        }
         const colorPickerEle = itemEle.querySelector('#' + item.id);
         colorPickerEle.setAttribute('data-control', item.type.toString());
         const colorPickerObj = getComponent(colorPickerEle, ColorPicker);
@@ -1546,6 +1567,13 @@ class RibbonColorPicker {
      * @hidden
      */
     removeOverFlowEvents(item, itemEle) {
+        let colorPickerSettings = item.colorPickerSettings;
+        if (colorPickerSettings.label) {
+            const label = itemEle.querySelector('#' + item.id + '_label');
+            if (label) {
+                label.remove();
+            }
+        }
         const colorPickerEle = itemEle.querySelector('#' + item.id);
         const colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         let cssClass = colorPickerObj.cssClass.split(SPACE);
@@ -1708,6 +1736,15 @@ class RibbonComboBox {
      * @hidden
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
+        const comboBoxSettings = item.comboBoxSettings;
+        if (comboBoxSettings.label && this.parent.activeLayout === 'Simplified') {
+            const label = this.parent.createElement('div', {
+                className: 'e-ribbon-combobox-label',
+                id: item.id + '_label',
+                innerHTML: comboBoxSettings.label
+            });
+            itemEle.insertBefore(label, itemEle.firstChild);
+        }
         const inputEle = itemEle.querySelector('#' + item.id);
         inputEle.setAttribute('data-control', item.type.toString());
         const comboBoxObj = getComponent(inputEle, ComboBox);
@@ -1731,6 +1768,13 @@ class RibbonComboBox {
      * @hidden
      */
     removeOverFlowEvents(item, itemEle) {
+        const comboBoxSettings = item.comboBoxSettings;
+        if (comboBoxSettings.label) {
+            const label = itemEle.querySelector('#' + item.id + '_label');
+            if (label) {
+                label.remove();
+            }
+        }
         const inputEle = itemEle.querySelector('#' + item.id);
         const comboBoxObj = getComponent(inputEle, ComboBox);
         let cssClass = comboBoxObj.cssClass.split(SPACE);
@@ -1967,7 +2011,9 @@ class RibbonDropDown {
         return dropdown;
     }
     keyActionHandler(e, target) {
-        const items = target.querySelectorAll('.e-control');
+        const controlElements = Array.prototype.slice.call(target.querySelectorAll('.e-control'));
+        const templateElements = Array.prototype.slice.call(target.querySelectorAll('.e-ribbon-template'));
+        const items = controlElements.concat(templateElements);
         const comboBoxElements = target.querySelectorAll('.e-combobox');
         let comboBoxEle;
         if (comboBoxElements) {
@@ -1986,7 +2032,7 @@ class RibbonDropDown {
                 }
             }
         }
-        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);
@@ -2009,7 +2055,7 @@ class RibbonDropDown {
             }
             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);
             }
@@ -2943,13 +2989,17 @@ class RibbonGroupButton {
                 }
                 count++;
             }
-            new DropDownButton({
+            const dropdown = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: btnContainerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
                 disabled: item.disabled
             }, buttonEle);
+            if (groupBtnSettings.header) {
+                const dropDownPopup = dropdown.dropDown;
+                this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
+            }
             buttonEle.onclick = buttonEle.onkeydown = () => {
                 if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
                     document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
@@ -2966,7 +3016,9 @@ class RibbonGroupButton {
         }
     }
     groupButtonClicked(itemIndex, item, grpBtnSettings) {
-        const previousItems = [], selectingItems = [], selectedItems = [];
+        const previousItems = [];
+        const selectingItems = [];
+        const selectedItems = [];
         let groupButtonEle;
         let dropdown;
         for (let j = 0; j < grpBtnSettings.items.length; j++) {
@@ -2997,9 +3049,11 @@ class RibbonGroupButton {
                 for (let j = 0; j < grpBtnSettings.items.length; j++) {
                     if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
                         document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
+                        grpBtnSettings.items[parseInt(j.toString(), 10)].selected = false;
                     }
                 }
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
+                grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
                 if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active') && this.parent.activeLayout === 'Simplified') {
                     this.grpBtnIndex = itemIndex;
                     groupButtonEle = document.querySelector('#' + item.id);
@@ -3015,6 +3069,12 @@ class RibbonGroupButton {
                     document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID).classList.add(RIBBON_MULTIPLE_BUTTON_SELECTION);
                 }
                 document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
+                if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
+                }
+                else {
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = false;
+                }
                 let activeEleCount = 0;
                 for (let n = 0; n < grpBtnSettings.items.length; n++) {
                     if (document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + n) && document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + n).classList.contains('e-active') && this.parent.activeLayout === 'Simplified' && n !== itemIndex) {
@@ -3102,13 +3162,17 @@ class RibbonGroupButton {
                 }
                 itemsCount++;
             }
-            new DropDownButton({
+            const dropdown = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: containerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
                 disabled: item.disabled
             }, buttonEle);
+            if (groupBtnSettings.header) {
+                const dropDownPopup = dropdown.dropDown;
+                this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
+            }
             buttonEle.onclick = buttonEle.onkeydown = () => {
                 if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
                     document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
@@ -3132,6 +3196,14 @@ class RibbonGroupButton {
             }
         }
     }
+    addGroupButtonHeader(itemID, groupBtnSettings, popupEle) {
+        const groupButtonHeader = this.parent.createElement('div', {
+            className: 'e-ribbon-groupbutton-header',
+            id: itemID + HEADER_ID,
+            innerHTML: groupBtnSettings.header
+        });
+        popupEle.insertBefore(groupButtonHeader, popupEle.firstChild);
+    }
     handleGroupButtonNavigation(e, item) {
         const groupButtonEle = document.querySelector('#' + item.id);
         const dropdown = getComponent(groupButtonEle, DropDownButton);
@@ -3197,15 +3269,28 @@ class RibbonGroupButton {
      * @returns {void}
      * @hidden
      */
-    addOverFlowEvents(item, itemEle) {
+    addOverFlowEvents(item, itemEle, overflowButton) {
+        const groupBtnSettings = item.groupButtonSettings;
+        let isIconOnly = true;
         const groupButtonEle = itemEle.querySelector('#' + item.id);
         const dropdown = getComponent(groupButtonEle, DropDownButton);
-        dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP });
+        dropdown.setProperties({ cssClass: dropdown.cssClass + SPACE + RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
         const targetEle = dropdown.target;
+        if (targetEle.children.length) {
+            for (let i = 0; i < targetEle.children.length; i++) {
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
+                    isIconOnly = false;
+                    break;
+                }
+            }
+            if (isIconOnly) {
+                targetEle.classList.add('e-icon-btn');
+            }
+        }
         targetEle.onclick = () => {
             if (this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
-                dropdown.element.focus();
                 dropdown.toggle();
+                overflowButton.toggle();
             }
         };
     }
@@ -3221,9 +3306,13 @@ class RibbonGroupButton {
         const groupButtonEle = itemEle.querySelector('#' + item.id);
         if (groupButtonEle) {
             const dropdown = getComponent(groupButtonEle, DropDownButton);
+            const targetEle = dropdown.target;
+            if (targetEle.classList.contains('e-icon-btn')) {
+                targetEle.classList.remove('e-icon-btn');
+            }
             let cssClass = dropdown.cssClass.split(SPACE);
             cssClass = cssClass.filter((value) => value !== RIBBON_GROUP_BUTTON_OVERFLOW_POPUP);
-            dropdown.setProperties({ cssClass: cssClass.join(SPACE) });
+            dropdown.setProperties({ cssClass: cssClass.join(SPACE), content: '' });
         }
     }
     /**
@@ -3379,7 +3468,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             e.preventDefault();
         }
         const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
-        const ribbonControls = activeContent.querySelectorAll('.e-control');
+        const controlElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-control'));
+        const templateElements = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-template'));
+        const ribbonControls = controlElements.concat(templateElements);
         const comboBoxElements = activeContent.querySelectorAll('.e-combobox');
         let comboBoxEle;
         if (comboBoxElements) {
@@ -3408,7 +3499,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         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);
@@ -3450,7 +3541,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
         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++;
                 }
@@ -3484,7 +3575,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         }
                         if (launcherIconEle) {
                             const items = groupContainer.querySelectorAll('.e-ribbon-item');
-                            items[items.length - 1].querySelector('.e-control').classList.add('e-ribbon-last-item');
+                            const elem = items[items.length - 1].querySelector('.e-control');
+                            if (elem) {
+                                elem.classList.add('e-ribbon-last-item');
+                            }
                         }
                     }
                     else {
@@ -3597,6 +3691,15 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             const scrollEle = this.tabObj.element.querySelector('.' + HORIZONTAL_SCROLLBAR);
             this.scrollModule.scrollStep = scrollEle.offsetWidth;
         }
+        if (this.activeLayout === 'Simplified') {
+            const activePopup = document.querySelectorAll('.e-ribbon .e-dropdown-btn.e-active, .e-ribbon-group-overflow-ddb .e-dropdown-btn.e-active');
+            if (activePopup.length) {
+                for (let i = 0; i < activePopup.length; i++) {
+                    const dropDownBtn = getInstance(activePopup[parseInt(i.toString(), 10)], DropDownButton);
+                    dropDownBtn.toggle();
+                }
+            }
+        }
     }
     renderTabs() {
         this.tabsInternal = this.tabs.slice();
@@ -3920,7 +4023,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
-                    if (overflowtarget.childElementCount === 0) {
+                    if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                         this.removeOverflowButton(overflowDDB);
                     }
                 }
@@ -3992,6 +4095,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     }
     createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         let overflowButton;
+        const itemProp = getGroup(this.tabs, groupId);
         const contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
         const groupEle = contentEle.querySelector('#' + groupId);
         if (isGroupOF) {
@@ -4005,6 +4109,17 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             const overflowBtnTarget = overflowButton.target;
+            let headerEle = overflowBtnTarget.querySelector('#' + groupId + GROUPOF_BUTTON_ID + HEADER_ID);
+            if (!headerEle) {
+                if (itemProp.group.overflowHeader) {
+                    const groupHeader = this.createElement('div', {
+                        className: RIBBON_OVERFLOW_HEADER,
+                        id: groupId + GROUPOF_BUTTON_ID + HEADER_ID,
+                        innerHTML: itemProp.group.overflowHeader
+                    });
+                    overflowBtnTarget.append(groupHeader);
+                }
+            }
             if (groupEle) {
                 if (groupEle.classList.contains('e-disabled')) {
                     overflowBtnTarget.classList.add('e-disabled');
@@ -4033,7 +4148,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 if (ofTabContainer) {
                     let ofGroupContainer = overflowEle.querySelector('#' + groupId + 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');
@@ -4081,7 +4196,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 break;
             case 'GroupButton':
                 if (this.activeLayout === 'Simplified') {
-                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle);
+                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
                     break;
                 }
         }
@@ -4093,7 +4208,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         });
         const overflowtarget = this.overflowDDB.target;
         overflowtarget.append(ofTabContainer);
-        const ofGroupContainer = this.createGroupContainer(groupId, groupHeader);
+        const itemProp = getGroup(this.tabs, groupId);
+        let ofGroupContainer = itemProp.group.overflowHeader ? this.createGroupContainer(groupId, itemProp.group.overflowHeader) : this.createGroupContainer(groupId, groupHeader);
         ofGroupContainer.append(itemEle);
         ofTabContainer.append(ofGroupContainer);
         if (tabIndex === this.selectedTab) {
@@ -4915,11 +5031,23 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             locale: this.locale,
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
+            beforeOpen: (args) => {
+                const eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                this.trigger('overflowPopupOpen', eventArgs, (ribbonArgs) => {
+                    if (ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
+            },
             beforeClose: (args) => {
                 const ele = args.event ? closest(args.event.target, '.' + RIBBON_POPUP_CONTROL) : null;
-                if (ele) {
-                    args.cancel = true;
-                }
+                const groupButtonEle = args.event ? closest(args.event.target, '.e-ribbon-group-button-overflow-popup') : null;
+                const eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                this.trigger('overflowPopupClose', eventArgs, (ribbonArgs) => {
+                    if (ele || ribbonArgs.cancel || groupButtonEle) {
+                        args.cancel = true;
+                    }
+                });
             }
         }, overflowButton);
         this.element.classList.add(RIBBON_OVERFLOW);
@@ -4938,8 +5066,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             const currentList = target.querySelector('.e-ribbon-of-tab.e-ribbon-active');
             items = currentList.getElementsByClassName('e-ribbon-item');
         }
-        const 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;
+        const control = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control');
+        const comboBoxEle = control && control.classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
         let ribbonItem;
+        let 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) {
@@ -4948,13 +5078,21 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     this.findDisabledItem(ribbonItem, items, true);
                     if (comboBoxEle && e.key === 'Tab') {
                         e.preventDefault();
-                        items[this.itemIndex].querySelector('.e-control').focus();
+                        const 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')) {
@@ -4965,20 +5103,32 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                         this.findDisabledItem(ribbonItem, items, false);
                         if (comboBoxEle && (e.shiftKey && e.key === 'Tab')) {
                             e.preventDefault();
-                            items[this.itemIndex].querySelector('.e-control').focus();
+                            const 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());
         }
         const currentItemIndex = parseInt(target.getAttribute('index'), 10);
-        const itemType = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').getAttribute('data-control') : null;
+        let itemType = "";
+        const 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') {
@@ -4990,7 +5140,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 if (e.key === 'Tab') {
                     e.preventDefault();
                 }
-                items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+                const elem = items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control');
+                if (elem) {
+                    elem.focus();
+                }
             }
             if (e.key === ' ' && (itemType === 'CheckBox')) {
                 const checkBoxEle = items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control');
@@ -5372,7 +5525,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 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);
                                 }
                             }
@@ -5655,7 +5808,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
     createTemplateContent(item, itemElement) {
         const itemEle = this.createElement('div', {
             className: item.cssClass ? (RIBBON_TEMPLATE + SPACE + item.cssClass) : RIBBON_TEMPLATE,
-            id: item.id
+            id: item.id,
+            attrs: { 'tabindex': '-1' }
         });
         if (item.disabled) {
             itemEle.classList.add(DISABLED_CSS);
@@ -6116,7 +6270,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             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);
                     }
                 }
@@ -6143,6 +6297,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.refreshLayout();
         }
     }
+    isHeaderVisible(headerEle, groupID) {
+        return headerEle.querySelector('#' + groupID + GROUPOF_BUTTON_ID + HEADER_ID) ? true : false;
+    }
     /**
      * Hides a specific group within a ribbon tab.
      *
@@ -6696,7 +6853,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             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);
                     }
                 }
@@ -6914,7 +7071,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             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);
                 }
             }
@@ -7213,6 +7370,12 @@ __decorate([
 __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);
@@ -7892,6 +8055,9 @@ class RibbonBackstage extends Component {
                         this.closeBtn.setProperties(commonProp);
                     }
                 }
+                if (this.footerMenuCtrl) {
+                    this.footerMenuCtrl.setProperties(commonProp);
+                }
             }
         }
     }