@syncfusion/ej2-ribbon 24.1.41 → 24.1.46

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.41
+*  version : 24.1.44
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@21.27.0",
+  "_id": "@syncfusion/ej2-ribbon@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-Yp291W26tAmLS4Vev1bAKc12r3ExMoy1eV3QNuoxM4mysAxjyUBRN0MjP4w8xpLrGgBZqosG3G7Ewc/IphDVww==",
+  "_integrity": "sha512-NBr5Cj/aZzyv/xVtzD/JCgb1R1bn48A6AHCcmJl+Bdq3fH8w4G085HP0mYLwX2M8S0EBcKLeUpnaiAqUDo7trw==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.27.0.tgz",
-  "_shasum": "93461696848f6b7ca64be65ee903922584f6b52c",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-24.1.41.tgz",
+  "_shasum": "bb6d15afff50ba34c654def48c011271701a480a",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.1.41",
-    "@syncfusion/ej2-buttons": "~24.1.41",
-    "@syncfusion/ej2-dropdowns": "~24.1.41",
-    "@syncfusion/ej2-lists": "~24.1.41",
-    "@syncfusion/ej2-navigations": "~24.1.41",
-    "@syncfusion/ej2-popups": "~24.1.41",
-    "@syncfusion/ej2-splitbuttons": "~24.1.41"
+    "@syncfusion/ej2-base": "~24.1.46",
+    "@syncfusion/ej2-buttons": "~24.1.46",
+    "@syncfusion/ej2-dropdowns": "~24.1.46",
+    "@syncfusion/ej2-lists": "~24.1.46",
+    "@syncfusion/ej2-navigations": "~24.1.46",
+    "@syncfusion/ej2-popups": "~24.1.46",
+    "@syncfusion/ej2-splitbuttons": "~24.1.46"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "24.1.41",
+  "version": "24.1.46",
   "sideEffects": false
 }

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

@@ -194,6 +194,8 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private keyboardModuleRibbon;
     private keyConfigs;
     private initialPropsData;
+    private hiddenElements;
+    private hiddenGroups;
     /** @hidden */
     overflowDDB: DropDownButton;
     /** @hidden */
@@ -399,6 +401,13 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      */
     showGroup(groupID: string): void;
     private showHideGroup;
+    private updateHiddenElements;
+    private checkHiddenElements;
+    private updateItemsSimplifiedWidth;
+    private checkWidthDifference;
+    private calculateHiddenElementsWidth;
+    private calculateMediumDataWidth;
+    private calculateOverflowItemsWidth;
     /**
      * Disables a specific group within a ribbon tab.
      *

package/src/ribbon/base/ribbon.js

@@ -59,6 +59,8 @@ var Ribbon = /** @class */ (function (_super) {
         this.idIndex = 0;
         this.tooltipData = [];
         this.initialPropsData = {};
+        this.hiddenElements = {};
+        this.hiddenGroups = [];
         this.isAddRemove = false;
         this.keyConfigs = {
             leftarrow: 'leftarrow',
@@ -431,6 +433,7 @@ var Ribbon = /** @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;
@@ -554,6 +557,7 @@ var Ribbon = /** @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 + constants.CONTAINER_ID);
@@ -565,7 +569,67 @@ var Ribbon = /** @class */ (function (_super) {
                     var itemContainer = collectionEle.querySelector('#' + item.id + constants.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);
@@ -659,31 +723,55 @@ var Ribbon = /** @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('.' + constants.RIBBON_ITEM);
-            if (groupEle.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
-                var itemsLength = groupEle.querySelectorAll('.' + constants.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('.' + constants.RIBBON_ITEM);
+                        if (groupElement.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
+                            var itemsLength = groupElement.querySelectorAll('.' + constants.RIBBON_ITEM);
+                            if (itemsLength) {
+                                isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                                if (!isEmptyCollection) {
+                                    groupElement.classList.remove('e-ribbon-emptyCollection');
+                                }
+                            }
+                        }
                     }
                 }
             }
@@ -705,7 +793,9 @@ var Ribbon = /** @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;
@@ -2042,22 +2132,22 @@ var Ribbon = /** @class */ (function (_super) {
                 var activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.CONTENT_ID);
                 var tabContent = activeContent.closest('.' + constants.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 + constants.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 + constants.HEADER_ID);
                         groupHeader.remove();
@@ -2125,9 +2215,9 @@ var Ribbon = /** @class */ (function (_super) {
                 }
                 else {
                     this.element.classList.remove(constants.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 + constants.CONTAINER_ID);
                         var groupContent = groupContainer.querySelector('#' + group.id + constants.CONTENT_ID);
                         var groupHeader = this.createElement('div', {
@@ -2601,15 +2691,15 @@ var Ribbon = /** @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 + constants.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 + constants.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 + constants.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 + constants.RIBBON_GROUP_BUTTON_ID + i_7);
                                             updateCommonProperty(btnEle, 'btn', commonProp);
                                         }
                                     }
@@ -3041,7 +3131,7 @@ var Ribbon = /** @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);
@@ -3066,7 +3156,244 @@ var Ribbon = /** @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] + constants.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 + constants.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 + constants.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 + constants.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 + constants.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 + constants.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 + constants.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.
@@ -3327,9 +3654,10 @@ var Ribbon = /** @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);
@@ -3896,6 +4224,9 @@ var Ribbon = /** @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();
@@ -3903,6 +4234,7 @@ var Ribbon = /** @class */ (function (_super) {
         this.collapseButton = undefined;
         if (this.scrollModule) {
             this.scrollModule.destroy();
+            this.scrollModule = null;
         }
         if (this.ribbonTempEle) {
             remove(this.ribbonTempEle);
@@ -3912,6 +4244,8 @@ var Ribbon = /** @class */ (function (_super) {
         this.tabObj.destroy();
         this.tabObj = undefined;
         this.initialPropsData = {};
+        this.hiddenGroups = [];
+        this.hiddenElements = {};
         remove(this.element.querySelector('#' + this.element.id + constants.TAB_ID));
         this.element.style.removeProperty(constants.RIBBON_FILE_MENU_WIDTH);
         this.element.style.removeProperty(constants.RIBBON_HELP_PANE_TEMPLATE_WIDTH);

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

@@ -31,6 +31,7 @@ export declare class RibbonGroupButton {
      * @hidden
      */
     switchGroupButton(item: RibbonItemModel, itemElement: HTMLElement): void;
+    private handleFocusState;
     private addGroupButtonHeader;
     private handleGroupButtonNavigation;
     /**