@syncfusion/ej2-ribbon 23.2.7 → 24.1.44

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

@@ -296,11 +296,14 @@ var RibbonColorPickerSettings = /** @__PURE__ @class */ (function (_super) {
     __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)
@@ -389,6 +392,9 @@ var RibbonComboBoxSettings = /** @__PURE__ @class */ (function (_super) {
     __decorate$8([
         Property('')
     ], RibbonComboBoxSettings.prototype, "cssClass", void 0);
+    __decorate$8([
+        Property('')
+    ], RibbonComboBoxSettings.prototype, "label", void 0);
     __decorate$8([
         Property([])
     ], RibbonComboBoxSettings.prototype, "dataSource", void 0);
@@ -758,6 +764,9 @@ var RibbonGroupButtonSettings = /** @__PURE__ @class */ (function (_super) {
     function RibbonGroupButtonSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate$12([
+        Property('')
+    ], RibbonGroupButtonSettings.prototype, "header", void 0);
     __decorate$12([
         Property('Single')
     ], RibbonGroupButtonSettings.prototype, "selection", void 0);
@@ -965,6 +974,9 @@ var RibbonGroup = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -1833,6 +1845,15 @@ var RibbonColorPicker = /** @__PURE__ @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);
@@ -1863,6 +1884,13 @@ var RibbonColorPicker = /** @__PURE__ @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);
@@ -2028,6 +2056,15 @@ var RibbonComboBox = /** @__PURE__ @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);
@@ -2052,6 +2089,13 @@ var RibbonComboBox = /** @__PURE__ @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);
@@ -2293,7 +2337,9 @@ var RibbonDropDown = /** @__PURE__ @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) {
@@ -2312,7 +2358,7 @@ var RibbonDropDown = /** @__PURE__ @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);
@@ -2335,7 +2381,7 @@ var RibbonDropDown = /** @__PURE__ @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);
             }
@@ -3275,18 +3321,19 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 }
                 count++;
             }
-            new DropDownButton({
+            var dropdown = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: btnContainerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
                 disabled: item.disabled
             }, buttonEle);
+            if (groupBtnSettings.header) {
+                var dropDownPopup = dropdown.dropDown;
+                this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
+            }
             buttonEle.onclick = buttonEle.onkeydown = function () {
-                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
-                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
-                    _this.grpBtnIndex = 0;
-                }
+                _this.handleFocusState(item, itemElement);
             };
             btnContainerEle.onkeydown = function (e) {
                 if (_this.parent.activeLayout === 'Simplified') {
@@ -3298,7 +3345,9 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
         }
     };
     RibbonGroupButton.prototype.groupButtonClicked = function (itemIndex, item, grpBtnSettings) {
-        var previousItems = [], selectingItems = [], selectedItems = [];
+        var previousItems = [];
+        var selectingItems = [];
+        var selectedItems = [];
         var groupButtonEle;
         var dropdown;
         for (var j = 0; j < grpBtnSettings.items.length; j++) {
@@ -3329,9 +3378,11 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 for (var 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);
@@ -3347,6 +3398,12 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                     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;
+                }
                 var activeEleCount = 0;
                 for (var 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) {
@@ -3435,18 +3492,19 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
                 }
                 itemsCount++;
             }
-            new DropDownButton({
+            var dropdown = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: containerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
                 disabled: item.disabled
             }, buttonEle);
+            if (groupBtnSettings.header) {
+                var dropDownPopup = dropdown.dropDown;
+                this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
+            }
             buttonEle.onclick = buttonEle.onkeydown = function () {
-                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
-                    document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
-                    _this.grpBtnIndex = 0;
-                }
+                _this.handleFocusState(item, itemElement);
             };
             containerEle.onkeydown = function (e) {
                 if (_this.parent.activeLayout === 'Simplified') {
@@ -3465,6 +3523,26 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    RibbonGroupButton.prototype.handleFocusState = function (item, itemElement) {
+        if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
+            var defaultSelectedBtn = document.querySelector('#' + item.id + '_grpbtn').querySelector('.' + RIBBON_GROUP_BUTTON + '.e-active');
+            if (defaultSelectedBtn) {
+                defaultSelectedBtn.focus();
+            }
+            else {
+                document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + 0).focus();
+            }
+            this.grpBtnIndex = 0;
+        }
+    };
+    RibbonGroupButton.prototype.addGroupButtonHeader = function (itemID, groupBtnSettings, popupEle) {
+        var groupButtonHeader = this.parent.createElement('div', {
+            className: 'e-ribbon-groupbutton-header',
+            id: itemID + HEADER_ID,
+            innerHTML: groupBtnSettings.header
+        });
+        popupEle.insertBefore(groupButtonHeader, popupEle.firstChild);
+    };
     RibbonGroupButton.prototype.handleGroupButtonNavigation = function (e, item) {
         var groupButtonEle = document.querySelector('#' + item.id);
         var dropdown = getComponent(groupButtonEle, DropDownButton);
@@ -3530,16 +3608,29 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @hidden
      */
-    RibbonGroupButton.prototype.addOverFlowEvents = function (item, itemEle) {
+    RibbonGroupButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
+        var groupBtnSettings = item.groupButtonSettings;
+        var isIconOnly = true;
         var groupButtonEle = itemEle.querySelector('#' + item.id);
         var 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 : '' });
         var targetEle = dropdown.target;
+        if (targetEle.children.length) {
+            for (var 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 = function () {
             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();
             }
         };
     };
@@ -3555,9 +3646,13 @@ var RibbonGroupButton = /** @__PURE__ @class */ (function () {
         var groupButtonEle = itemEle.querySelector('#' + item.id);
         if (groupButtonEle) {
             var dropdown = getComponent(groupButtonEle, DropDownButton);
+            var targetEle = dropdown.target;
+            if (targetEle.classList.contains('e-icon-btn')) {
+                targetEle.classList.remove('e-icon-btn');
+            }
             var cssClass = dropdown.cssClass.split(SPACE);
             cssClass = cssClass.filter(function (value) { return value !== RIBBON_GROUP_BUTTON_OVERFLOW_POPUP; });
-            dropdown.setProperties({ cssClass: cssClass.join(SPACE) });
+            dropdown.setProperties({ cssClass: cssClass.join(SPACE), content: '' });
         }
     };
     /**
@@ -3657,6 +3752,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.idIndex = 0;
         this.tooltipData = [];
         this.initialPropsData = {};
+        this.hiddenElements = {};
+        this.hiddenGroups = [];
         this.isAddRemove = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
@@ -3730,7 +3827,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             e.preventDefault();
         }
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + 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) {
@@ -3759,7 +3858,7 @@ var Ribbon = /** @__PURE__ @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);
@@ -3801,7 +3900,7 @@ var Ribbon = /** @__PURE__ @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++;
                 }
@@ -3835,7 +3934,10 @@ var Ribbon = /** @__PURE__ @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 {
@@ -3948,6 +4050,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             var scrollEle = this.tabObj.element.querySelector('.' + 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();
@@ -4015,6 +4126,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
         var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
         this.setProperties({ selectedTab: selectedIndex }, true);
+        this.calculateHiddenElementsWidth(selectedIndex);
         this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
@@ -4138,6 +4250,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var orderedGroups = this.getGroupResizeOrder(true, tabIndex);
         var isEmptyCollection;
         for (var i = 0; ((i < orderedGroups.length) && (tabContent.offsetWidth < activeContent.offsetWidth)); i++) {
+            var isGroupUpdated = false;
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var groupEle = tabContent.querySelector('#' + group.id);
             var groupContainer = groupEle.querySelector('#' + group.id + CONTAINER_ID);
@@ -4149,7 +4262,67 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var itemContainer = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
                     if (((item.displayOptions === DisplayMode.Auto) ||
                         (item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow))) && !isNullOrUndefined(itemContainer)) {
-                        itemContainer.setAttribute('data-simplified-width', activeContent.offsetWidth.toString());
+                        var groupHidden = false;
+                        var itemHidden = false;
+                        var isAllItemHidden = false;
+                        var isEmptyCollection_1 = false;
+                        var groupItems = void 0;
+                        if (groupEle.classList.contains('e-hidden') || groupEle.classList.contains('e-hide-group')) {
+                            groupItems = groupEle.querySelectorAll('.e-ribbon-item.e-hidden');
+                            if (groupItems.length) {
+                                for (var i_1 = 0; i_1 < groupItems.length; i_1++) {
+                                    groupItems[parseInt(i_1.toString(), 10)].classList.remove('e-hidden');
+                                }
+                            }
+                            if (groupEle.classList.contains('e-hide-group')) {
+                                isAllItemHidden = true;
+                                groupEle.classList.remove('e-hide-group');
+                                groupEle.classList.remove('e-ribbon-emptyCollection');
+                                if (this.hiddenGroups.indexOf(groupEle.id) !== -1) {
+                                    this.hiddenGroups.splice(this.hiddenGroups.indexOf(groupEle.id), 1);
+                                }
+                            }
+                            else {
+                                groupHidden = true;
+                                groupEle.classList.remove('e-hidden');
+                            }
+                            if (!isGroupUpdated) {
+                                this.calculateOverflowItemsWidth(groupEle.offsetWidth, false, tabIndex);
+                                this.calculateMediumDataWidth(groupEle.offsetWidth, tabIndex, false);
+                                isGroupUpdated = true;
+                            }
+                        }
+                        else {
+                            if (itemContainer.classList.contains('e-hidden')) {
+                                itemHidden = true;
+                                itemContainer.classList.remove('e-hidden');
+                                if (groupEle.classList.contains('e-ribbon-emptyCollection')) {
+                                    isEmptyCollection_1 = true;
+                                    groupEle.classList.remove('e-ribbon-emptyCollection');
+                                }
+                                this.calculateOverflowItemsWidth(itemContainer.offsetWidth, false, tabIndex);
+                                this.calculateMediumDataWidth(itemContainer.offsetWidth, tabIndex, false);
+                            }
+                        }
+                        itemContainer.setAttribute('data-simplified-width', (activeContent.offsetWidth).toString());
+                        if (itemHidden) {
+                            itemContainer.classList.add('e-hidden');
+                        }
+                        if (groupItems && groupItems.length) {
+                            for (var i_2 = 0; i_2 < groupItems.length; i_2++) {
+                                groupItems[parseInt(i_2.toString(), 10)].classList.add('e-hidden');
+                            }
+                        }
+                        if (groupHidden) {
+                            groupEle.classList.add('e-hidden');
+                        }
+                        if (isAllItemHidden) {
+                            groupEle.classList.add('e-hide-group');
+                            groupEle.classList.add('e-ribbon-emptyCollection');
+                        }
+                        if (isEmptyCollection_1) {
+                            groupEle.classList.add('e-ribbon-emptyCollection');
+                        }
                         this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemContainer, groupContainer, true);
                         if (item.activeSize === RibbonItemSize.Small) {
                             var itemEle = itemContainer.querySelector('#' + item.id);
@@ -4243,37 +4416,61 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     if (((item.displayOptions === DisplayMode.Auto) ||
                         (item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow))) && !isNullOrUndefined(itemContainer)) {
                         var width = parseInt(itemContainer.getAttribute('data-simplified-width'), 10);
+                        var groupItemEle = tabContent.querySelector('#' + group.id);
+                        if (itemContainer.classList.contains('e-hidden') || groupItemEle.classList.contains('e-hidden')) {
+                            width = Math.abs(width - activeContent.offsetWidth);
+                        }
                         if (!isClear && (tabContent.offsetWidth < width)) {
                             flag = false;
                             break;
                         }
-                        var groupEle_1 = tabContent.querySelector('#' + collection.id);
+                        var groupEle = tabContent.querySelector('#' + collection.id);
                         if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton) || (item.type === RibbonItemType.GroupButton)) {
                             this.updatePopupItems(item, itemContainer, group.enableGroupOverflow, false);
                         }
-                        groupEle_1.append(itemContainer);
+                        groupEle.append(itemContainer);
+                        if (itemContainer.classList.contains('e-hidden') || groupItemEle.classList.contains('e-hidden')) {
+                            itemContainer.setAttribute('data-simplified-width', width.toString());
+                            var isGroupHidden = false;
+                            var widthDifference = 0;
+                            if (itemContainer.classList.contains('e-hidden')) {
+                                itemContainer.classList.remove('e-hidden');
+                                if (groupItemEle.classList.contains('e-hide-group')) {
+                                    isGroupHidden = true;
+                                    widthDifference = this.checkWidthDifference(itemContainer, groupItemEle);
+                                }
+                                width = itemContainer.offsetWidth + widthDifference;
+                                itemContainer.classList.add('e-hidden');
+                            }
+                            this.calculateOverflowItemsWidth(width, true, tabIndex);
+                            this.calculateMediumDataWidth(width, tabIndex, true);
+                            if (isGroupHidden) {
+                                groupItemEle.classList.add('e-hide-group');
+                                groupItemEle.classList.add('e-ribbon-emptyCollection');
+                            }
+                        }
                         this.removeOverflowEvent(item, itemContainer);
                         if (item.allowedSizes & RibbonItemSize.Small) {
                             item.setProperties({ activeSize: RibbonItemSize.Small }, true);
                             this.setItemSize(itemContainer.querySelector('#' + item.id), item);
                         }
-                    }
-                }
-            }
-            var groupEle = tabContent.querySelector('#' + group.id);
-            var itemEle = groupEle.querySelector('.' + RIBBON_ITEM);
-            if (groupEle.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
-                var itemsLength = groupEle.querySelectorAll('.' + RIBBON_ITEM);
-                if (itemsLength) {
-                    isEmptyCollection = this.checkEmptyCollection(itemsLength);
-                    if (!isEmptyCollection) {
-                        groupEle.classList.remove('e-ribbon-emptyCollection');
+                        var groupElement = tabContent.querySelector('#' + group.id);
+                        var itemEle = groupElement.querySelector('.' + RIBBON_ITEM);
+                        if (groupElement.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
+                            var itemsLength = groupElement.querySelectorAll('.' + RIBBON_ITEM);
+                            if (itemsLength) {
+                                isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                                if (!isEmptyCollection) {
+                                    groupElement.classList.remove('e-ribbon-emptyCollection');
+                                }
+                            }
+                        }
                     }
                 }
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
-                    if (overflowtarget.childElementCount === 0) {
+                    if (overflowtarget.childElementCount === 0 || (overflowtarget.childElementCount === 1 && this.isHeaderVisible(overflowtarget, group.id))) {
                         this.removeOverflowButton(overflowDDB);
                     }
                 }
@@ -4289,7 +4486,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
-            this.checkOverflowHiddenItems(group.enableGroupOverflow, tabIndex, group.id);
+        }
+        for (var i = 0; i < orderedGroups.length; i++) {
+            this.checkOverflowHiddenItems(orderedGroups[parseInt(i.toString(), 10)].enableGroupOverflow, tabIndex, orderedGroups[parseInt(i.toString(), 10)].id);
         }
         if (this.overflowDDB) {
             var overflowEle = this.overflowDDB.target;
@@ -4345,6 +4544,7 @@ var Ribbon = /** @__PURE__ @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) {
@@ -4358,6 +4558,17 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             var overflowBtnTarget = overflowButton.target;
+            var headerEle = overflowBtnTarget.querySelector('#' + groupId + GROUPOF_BUTTON_ID + HEADER_ID);
+            if (!headerEle) {
+                if (itemProp.group.overflowHeader) {
+                    var groupHeader_1 = this.createElement('div', {
+                        className: RIBBON_OVERFLOW_HEADER,
+                        id: groupId + GROUPOF_BUTTON_ID + HEADER_ID,
+                        innerHTML: itemProp.group.overflowHeader
+                    });
+                    overflowBtnTarget.append(groupHeader_1);
+                }
+            }
             if (groupEle) {
                 if (groupEle.classList.contains('e-disabled')) {
                     overflowBtnTarget.classList.add('e-disabled');
@@ -4386,7 +4597,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 if (ofTabContainer) {
                     var 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');
@@ -4434,7 +4645,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 break;
             case 'GroupButton':
                 if (this.activeLayout === 'Simplified') {
-                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle);
+                    this.ribbonGroupButtonModule.addOverFlowEvents(item, itemEle, overflowButton);
                     break;
                 }
         }
@@ -4446,7 +4657,8 @@ var Ribbon = /** @__PURE__ @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) {
@@ -5303,9 +5515,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             },
             beforeClose: function (args) {
                 var ele = args.event ? closest(args.event.target, '.' + RIBBON_POPUP_CONTROL) : null;
+                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) {
+                    if (ele || ribbonArgs.cancel || groupButtonEle) {
                         args.cancel = true;
                     }
                 });
@@ -5327,8 +5540,10 @@ var Ribbon = /** @__PURE__ @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) {
@@ -5337,13 +5552,21 @@ var Ribbon = /** @__PURE__ @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')) {
@@ -5354,20 +5577,32 @@ var Ribbon = /** @__PURE__ @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') {
@@ -5379,7 +5614,10 @@ var Ribbon = /** @__PURE__ @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');
@@ -5587,22 +5825,22 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 var activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + CONTENT_ID);
                 var tabContent = activeContent.closest('.' + TAB_CONTENT);
                 if (this.activeLayout === 'Simplified') {
-                    for (var i_1 = 0; i_1 < groupList.length; i_1++) {
-                        var group = groupList[parseInt(i_1.toString(), 10)];
-                        var alignType = groupList[parseInt(i_1.toString(), 10)].orientation;
+                    for (var i_3 = 0; i_3 < groupList.length; i_3++) {
+                        var group = groupList[parseInt(i_3.toString(), 10)];
+                        var alignType = groupList[parseInt(i_3.toString(), 10)].orientation;
                         if (group.isCollapsed) {
                             group.setProperties({ isCollapsed: false }, true);
                             this.removeDropdown(group.id);
                         }
                         else {
-                            this.checkSmallToMedium(tabIndex, tab, i_1, tabContent, activeContent, true, false);
-                            this.checkMediumToLarge(tabIndex, tab, i_1, tabContent, activeContent, true, false);
+                            this.checkSmallToMedium(tabIndex, tab, i_3, tabContent, activeContent, true, false);
+                            this.checkMediumToLarge(tabIndex, tab, i_3, tabContent, activeContent, true, false);
                         }
                         var groupEle = tabContent.querySelector('#' + group.id);
                         var groupContainer = groupEle.querySelector('#' + group.id + CONTAINER_ID);
                         var shrinkColumns = groupContainer.querySelectorAll('.' + 'e-ribbon-shrink');
-                        for (var i_2 = 0; i_2 < shrinkColumns.length; i_2++) {
-                            shrinkColumns[parseInt(i_2.toString(), 10)].remove();
+                        for (var i_4 = 0; i_4 < shrinkColumns.length; i_4++) {
+                            shrinkColumns[parseInt(i_4.toString(), 10)].remove();
                         }
                         var groupHeader = groupContainer.querySelector('#' + group.id + HEADER_ID);
                         groupHeader.remove();
@@ -5670,9 +5908,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
                 else {
                     this.element.classList.remove(RIBBON_OVERFLOW);
-                    for (var i_3 = 0; i_3 < groupList.length; i_3++) {
-                        var group = groupList[parseInt(i_3.toString(), 10)];
-                        var alignType = groupList[parseInt(i_3.toString(), 10)].orientation;
+                    for (var i_5 = 0; i_5 < groupList.length; i_5++) {
+                        var group = groupList[parseInt(i_5.toString(), 10)];
+                        var alignType = groupList[parseInt(i_5.toString(), 10)].orientation;
                         var groupContainer = tabContent.querySelector('#' + group.id + CONTAINER_ID);
                         var groupContent = groupContainer.querySelector('#' + group.id + CONTENT_ID);
                         var groupHeader = this.createElement('div', {
@@ -5766,7 +6004,7 @@ var Ribbon = /** @__PURE__ @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);
                                 }
                             }
@@ -6051,7 +6289,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     Ribbon.prototype.createTemplateContent = function (item, itemElement) {
         var 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);
@@ -6145,15 +6384,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 var moduleName = this.getItemModuleName(item);
                                 if (moduleName !== 'template') {
                                     if (moduleName === 'group-btn' && this.activeLayout === 'Classic') {
-                                        for (var i_4 = 0; i_4 < item.groupButtonSettings.items.length; i_4++) {
-                                            var btnEle = ele.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_4);
+                                        for (var i_6 = 0; i_6 < item.groupButtonSettings.items.length; i_6++) {
+                                            var btnEle = ele.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_6);
                                             updateCommonProperty(btnEle, 'btn', commonProp);
                                         }
                                     }
                                     else if (moduleName === 'group-btn' && this.activeLayout === 'Simplified') {
                                         updateCommonProperty(ele, 'dropdown-btn', commonProp);
-                                        for (var i_5 = 0; i_5 < item.groupButtonSettings.items.length; i_5++) {
-                                            var btnEle = document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_5);
+                                        for (var i_7 = 0; i_7 < item.groupButtonSettings.items.length; i_7++) {
+                                            var btnEle = document.querySelector('#' + item.id + RIBBON_GROUP_BUTTON_ID + i_7);
                                             updateCommonProperty(btnEle, 'btn', commonProp);
                                         }
                                     }
@@ -6527,7 +6766,7 @@ var Ribbon = /** @__PURE__ @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);
                     }
                 }
@@ -6554,6 +6793,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.refreshLayout();
         }
     };
+    Ribbon.prototype.isHeaderVisible = function (headerEle, groupID) {
+        return headerEle.querySelector('#' + groupID + GROUPOF_BUTTON_ID + HEADER_ID) ? true : false;
+    };
     /**
      * Hides a specific group within a ribbon tab.
      *
@@ -6582,7 +6824,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var contentEle = this.tabObj.items[itemProp.tabIndex].content;
         var groupEle = contentEle.querySelector('#' + groupID);
         if (groupEle) {
-            isHidden ? groupEle.classList.add('e-hidden') : groupEle.classList.remove('e-hidden');
+            this.updateHiddenElements(itemProp.tabIndex, isHidden ? 'hideGroup' : 'showGroup', groupID, isHidden, groupEle);
         }
         else {
             this.updateInitialProps(itemProp.tabIndex, groupID, 'hiddenGroups', isHidden);
@@ -6607,7 +6849,244 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
-        this.refreshLayout();
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.refreshLayout();
+        }
+    };
+    Ribbon.prototype.updateHiddenElements = function (tabIndex, key, id, isHidden, element, group) {
+        if (isHidden) {
+            if (!(element.classList.contains('e-hidden'))) {
+                this.checkHiddenElements(key, id, tabIndex);
+                element.classList.add('e-hidden');
+                if (key === 'hideItem') {
+                    this.checkHiddenItems(group, isHidden, tabIndex);
+                }
+                this.calculateHiddenElementsWidth(tabIndex);
+            }
+        }
+        else {
+            if (element.classList.contains('e-hidden')) {
+                this.checkHiddenElements(key, id, tabIndex);
+                element.classList.remove('e-hidden');
+                this.calculateHiddenElementsWidth(tabIndex);
+                if (key === 'showItem') {
+                    this.checkHiddenItems(group, isHidden, tabIndex);
+                }
+            }
+        }
+    };
+    Ribbon.prototype.checkHiddenElements = function (key, id, tabIndex) {
+        if (this.activeLayout === 'Simplified') {
+            var hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
+            if (!hiddenProps) {
+                this.hiddenElements[parseInt(tabIndex.toString(), 10)] = {};
+                hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
+            }
+            if (hiddenProps) {
+                /* eslint-disable */
+                if (!hiddenProps[key]) {
+                    hiddenProps[key] = [];
+                }
+                if (hiddenProps[key].length) {
+                    var index = hiddenProps[key].indexOf(id);
+                    if (index === -1) {
+                        hiddenProps[key].push(id);
+                    }
+                }
+                else {
+                    hiddenProps[key].push(id);
+                }
+                /* eslint-enable */
+            }
+        }
+    };
+    Ribbon.prototype.updateItemsSimplifiedWidth = function (tabIndex, key) {
+        var hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
+        /* eslint-disable */
+        if (hiddenProps && hiddenProps[key] && hiddenProps[key].length) {
+            var _loop_4 = function (i) {
+                var contentEle = this_4.tabObj.items[tabIndex].content;
+                var hiddenEle;
+                var groupEle = void 0;
+                var isGroupHidden = false;
+                var widthDifference = 0;
+                if (key === 'hideGroup' || key === 'showGroup') {
+                    hiddenEle = contentEle.querySelector('#' + hiddenProps[key][i]);
+                }
+                else {
+                    hiddenEle = contentEle.querySelector('#' + hiddenProps[key][i] + CONTAINER_ID);
+                }
+                if (hiddenEle) {
+                    if (key === 'hideGroup' || key === 'hideItem') {
+                        var isHidden = false;
+                        if (hiddenEle.classList.contains('e-hidden')) {
+                            isHidden = true;
+                            hiddenEle.classList.remove('e-hidden');
+                        }
+                        if (key === 'hideItem') {
+                            groupEle = hiddenEle.closest('.e-ribbon-group');
+                            if (groupEle.classList.contains('e-hide-group')) {
+                                isGroupHidden = true;
+                                widthDifference = this_4.checkWidthDifference(hiddenEle, groupEle);
+                            }
+                        }
+                        this_4.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, true, tabIndex);
+                        this_4.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, true);
+                        if (isHidden) {
+                            hiddenEle.classList.add('e-hidden');
+                        }
+                    }
+                    else {
+                        if (key === 'showItem') {
+                            groupEle = hiddenEle.closest('.e-ribbon-group');
+                            if (groupEle.classList.contains('e-hide-group')) {
+                                isGroupHidden = true;
+                                groupEle.classList.remove('e-hide-group');
+                                groupEle.classList.remove('e-ribbon-emptyCollection');
+                                widthDifference = Math.abs(hiddenEle.offsetWidth - groupEle.offsetWidth);
+                                if (this_4.hiddenGroups.indexOf(groupEle.id) !== -1) {
+                                    this_4.hiddenGroups.splice(this_4.hiddenGroups.indexOf(groupEle.id), 1);
+                                }
+                            }
+                            else {
+                                if (this_4.hiddenGroups.indexOf(groupEle.id) !== -1) {
+                                    var hiddenItems = groupEle.querySelectorAll('.e-ribbon-item:not(.e-hidden)');
+                                    hiddenItems.forEach(function (item) {
+                                        if (item.id !== hiddenEle.id) {
+                                            item.classList.add('e-hidden');
+                                        }
+                                    });
+                                    widthDifference = Math.abs(hiddenEle.offsetWidth - groupEle.offsetWidth);
+                                    hiddenItems.forEach(function (item) {
+                                        if (item.id !== hiddenEle.id) {
+                                            item.classList.remove('e-hidden');
+                                        }
+                                    });
+                                    this_4.hiddenGroups.splice(this_4.hiddenGroups.indexOf(groupEle.id), 1);
+                                }
+                            }
+                        }
+                        this_4.calculateOverflowItemsWidth(hiddenEle.offsetWidth + widthDifference, false, tabIndex);
+                        this_4.calculateMediumDataWidth(hiddenEle.offsetWidth + widthDifference, tabIndex, false);
+                    }
+                    if (isGroupHidden) {
+                        groupEle.classList.add('e-hide-group');
+                        groupEle.classList.add('e-ribbon-emptyCollection');
+                    }
+                }
+                var index = hiddenProps[key].indexOf(hiddenProps[key][i]);
+                if (index !== -1) {
+                    hiddenProps[key].splice(index, 1);
+                    i--;
+                }
+                out_i_1 = i;
+            };
+            var this_4 = this, out_i_1;
+            for (var i = 0; i < hiddenProps[key].length; i++) {
+                _loop_4(i);
+                i = out_i_1;
+            }
+        }
+    };
+    Ribbon.prototype.checkWidthDifference = function (hiddenEle, groupEle) {
+        var widthDifference = 0;
+        groupEle.classList.remove('e-hide-group');
+        groupEle.classList.remove('e-ribbon-emptyCollection');
+        if (this.hiddenGroups.length) {
+            if (this.hiddenGroups.indexOf(groupEle.id) === -1) {
+                this.hiddenGroups.push(groupEle.id);
+                widthDifference = Math.abs(hiddenEle.offsetWidth - groupEle.offsetWidth);
+            }
+        }
+        else {
+            this.hiddenGroups.push(groupEle.id);
+            widthDifference = Math.abs(hiddenEle.offsetWidth - groupEle.offsetWidth);
+        }
+        return widthDifference;
+    };
+    Ribbon.prototype.calculateHiddenElementsWidth = function (tabIndex) {
+        if (tabIndex === this.selectedTab && this.activeLayout === 'Simplified') {
+            var hiddenProps = this.hiddenElements[parseInt(tabIndex.toString(), 10)];
+            if (hiddenProps) {
+                for (var i = 0; i < Object.keys(hiddenProps).length; i++) {
+                    this.updateItemsSimplifiedWidth(tabIndex, Object.keys(hiddenProps)[parseInt(i.toString(), 10)]);
+                }
+            }
+        }
+    };
+    Ribbon.prototype.calculateMediumDataWidth = function (hiddenWidth, tabIndex, isHidden) {
+        if (this.selectedTab === tabIndex && this.activeLayout === 'Simplified') {
+            var activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + CONTENT_ID);
+            var mediumDataItems = Array.prototype.slice.call(activeContent.querySelectorAll('.e-ribbon-item'));
+            if (this.overflowDDB) {
+                var overflowEle = this.overflowDDB.target;
+                var overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
+                var selectedOFTab = document.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                for (var i = 0; i < overflowItems.length; i++) {
+                    var ofTab = overflowItems[parseInt(i.toString(), 10)].closest('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                    if (selectedOFTab && ofTab && selectedOFTab.id === ofTab.id && overflowItems[parseInt(i.toString(), 10)].hasAttribute('data-medium-width')) {
+                        mediumDataItems.push(overflowItems[parseInt(i.toString(), 10)]);
+                    }
+                }
+            }
+            var groupOFButton = activeContent.querySelectorAll('.e-ribbon-group-of-btn');
+            for (var i = 0; i < groupOFButton.length; i++) {
+                var overflowButton = getInstance(groupOFButton[parseInt(i.toString(), 10)], DropDownButton);
+                var overflowBtnTarget = overflowButton.target;
+                var overflowItems = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
+                for (var i_8 = 0; i_8 < overflowItems.length; i_8++) {
+                    if (overflowItems[parseInt(i_8.toString(), 10)].hasAttribute('data-medium-width')) {
+                        mediumDataItems.push(overflowItems[parseInt(i_8.toString(), 10)]);
+                    }
+                }
+            }
+            for (var i = 0; i < mediumDataItems.length; i++) {
+                if (mediumDataItems[parseInt(i.toString(), 10)].hasAttribute('data-medium-width')) {
+                    var previousWidth = parseInt(mediumDataItems[parseInt(i.toString(), 10)].getAttribute('data-medium-width'), 10);
+                    mediumDataItems[parseInt(i.toString(), 10)].setAttribute('data-medium-width', isHidden ? (previousWidth - hiddenWidth).toString() : (previousWidth + hiddenWidth).toString());
+                }
+            }
+        }
+    };
+    Ribbon.prototype.calculateOverflowItemsWidth = function (hiddenItem, isHidden, tabIndex) {
+        if (this.selectedTab === tabIndex && this.activeLayout === 'Simplified') {
+            var groupList = this.tabs[parseInt(tabIndex.toString(), 10)].groups;
+            for (var i = 0; i < groupList.length; i++) {
+                var group = groupList[parseInt(i.toString(), 10)];
+                if (group.enableGroupOverflow) {
+                    var groupContainer = document.querySelector('#' + group.id);
+                    var overflowButton = void 0;
+                    var overflowDDB = groupContainer.querySelector('#' + group.id + GROUPOF_BUTTON_ID);
+                    if (overflowDDB) {
+                        overflowButton = getInstance(overflowDDB, DropDownButton);
+                    }
+                    if (overflowButton) {
+                        var overflowEle = overflowButton.target;
+                        var overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
+                        for (var i_9 = 0; i_9 < overflowItems.length; i_9++) {
+                            var previousWidth = parseInt(overflowItems[parseInt(i_9.toString(), 10)].getAttribute('data-simplified-width'), 10);
+                            if (previousWidth) {
+                                overflowItems[parseInt(i_9.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (this.overflowDDB) {
+            var selectedOFTab = document.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+            var overflowEle = this.overflowDDB.target;
+            var overflowItems = overflowEle.querySelectorAll('.e-ribbon-item');
+            for (var i = 0; i < overflowItems.length; i++) {
+                var ofTab = overflowItems[parseInt(i.toString(), 10)].closest('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                if (selectedOFTab && ofTab && selectedOFTab.id === ofTab.id) {
+                    var previousWidth = parseInt(overflowItems[parseInt(i.toString(), 10)].getAttribute('data-simplified-width'), 10);
+                    if (previousWidth) {
+                        overflowItems[parseInt(i.toString(), 10)].setAttribute('data-simplified-width', isHidden ? (previousWidth - hiddenItem).toString() : (previousWidth + hiddenItem).toString());
+                    }
+                }
+            }
+        }
     };
     /**
      * Disables a specific group within a ribbon tab.
@@ -6868,9 +7347,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         if (ele) {
             var itemEle = closest(ele, '.e-ribbon-item');
-            isHidden ? itemEle.classList.add('e-hidden') : itemEle.classList.remove('e-hidden');
-            this.checkHiddenItems(itemProp.group, isHidden, itemProp.tabIndex);
-            this.refreshLayout();
+            this.updateHiddenElements(itemProp.tabIndex, isHidden ? 'hideItem' : 'showItem', itemId, isHidden, itemEle, itemProp.group);
+            if (this.selectedTab === itemProp.tabIndex) {
+                this.refreshLayout();
+            }
         }
         else {
             this.updateInitialProps(itemProp.tabIndex, itemId, 'hiddenItems', isHidden);
@@ -7113,7 +7593,7 @@ var Ribbon = /** @__PURE__ @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);
                     }
                 }
@@ -7332,7 +7812,7 @@ var Ribbon = /** @__PURE__ @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);
                 }
             }
@@ -7437,6 +7917,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.keyboardModuleRibbon.destroy();
         this.keyboardModuleRibbon = null;
         destroyTooltip(this.element);
+        if (this.refreshing) {
+            this.clearOverflowDropDown(this.selectedTab);
+        }
         this.destroyTabItems(this.tabs);
         if (!this.hideLayoutSwitcher) {
             this.removeExpandCollapse();
@@ -7444,6 +7927,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.collapseButton = undefined;
         if (this.scrollModule) {
             this.scrollModule.destroy();
+            this.scrollModule = null;
         }
         if (this.ribbonTempEle) {
             remove(this.ribbonTempEle);
@@ -7453,6 +7937,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.tabObj.destroy();
         this.tabObj = undefined;
         this.initialPropsData = {};
+        this.hiddenGroups = [];
+        this.hiddenElements = {};
         remove(this.element.querySelector('#' + this.element.id + TAB_ID));
         this.element.style.removeProperty(RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(RIBBON_HELP_PANE_TEMPLATE_WIDTH);
@@ -8343,6 +8829,9 @@ var RibbonBackstage = /** @__PURE__ @class */ (function (_super) {
                         this.closeBtn.setProperties(commonProp);
                     }
                 }
+                if (this.footerMenuCtrl) {
+                    this.footerMenuCtrl.setProperties(commonProp);
+                }
             }
         }
     };