@syncfusion/ej2-ribbon 23.1.44 → 23.2.5

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@23.1.43",
+  "_id": "@syncfusion/ej2-ribbon@23.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-bF6XJhfqt4MDcbcZfZCPOoiOasDBmubxKWFQLvT1Ts9lQZEUwdL7xfQ6IuaMCJMQp7jOkZ1mPB8DH+JKRzNu+A==",
+  "_integrity": "sha512-4mMJChA4HNyf9nNf2WRmoD1OrrC73VvmJIN5L4noZmNbMsHvshGiFHXudwOgz3LqH5E6BY703yU90z2/eotwWg==",
   "_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-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.43.tgz",
-  "_shasum": "19d571e0fc8aabc19f75d3e2fe1e644c2cadab2f",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.2.4.tgz",
+  "_shasum": "54f2208318408c2db8cb2d96a575b6d558029913",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.41",
-    "@syncfusion/ej2-buttons": "~23.1.43",
-    "@syncfusion/ej2-dropdowns": "~23.1.44",
-    "@syncfusion/ej2-lists": "~23.1.43",
-    "@syncfusion/ej2-navigations": "~23.1.44",
-    "@syncfusion/ej2-popups": "~23.1.44",
-    "@syncfusion/ej2-splitbuttons": "~23.1.43"
+    "@syncfusion/ej2-base": "~23.2.4",
+    "@syncfusion/ej2-buttons": "~23.2.4",
+    "@syncfusion/ej2-dropdowns": "~23.2.5",
+    "@syncfusion/ej2-lists": "~23.2.4",
+    "@syncfusion/ej2-navigations": "~23.2.5",
+    "@syncfusion/ej2-popups": "~23.2.4",
+    "@syncfusion/ej2-splitbuttons": "~23.2.4"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "23.1.44",
+  "version": "23.2.5",
   "sideEffects": false
 }

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

@@ -240,8 +240,10 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     private checkSimplifiedItemShrinking;
     private checkSimplifiedItemExpanding;
     private createSimplfiedOverflow;
+    private checkEmptyCollection;
     private updatePopupItems;
     private removeSimplfiedOverflow;
+    private checkOverflowHiddenItems;
     private createOverflowPopup;
     private addOverflowEvents;
     private createOfTabContainer;
@@ -449,6 +451,8 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
     showItem(itemId: string): void;
     private showHideItem;
     private updateInitialProps;
+    private checkHiddenItems;
+    private checkOverflowItems;
     /**
      * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
      *

package/src/ribbon/base/ribbon.js

@@ -428,6 +428,7 @@ var Ribbon = /** @class */ (function (_super) {
             if (activeTab) {
                 activeTab.classList.add(constants.RIBBON_TAB_ACTIVE);
                 this.overflowDDB.element.classList.remove(constants.HIDE_CSS);
+                this.checkOverflowHiddenItems(false, selectedIndex);
             }
             else {
                 this.overflowDDB.element.classList.add(constants.HIDE_CSS);
@@ -537,6 +538,7 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.createSimplfiedOverflow = function (tabContent, activeContent, tabIndex) {
         var orderedGroups = this.getGroupResizeOrder(true, tabIndex);
+        var isEmptyCollection;
         for (var i = 0; ((i < orderedGroups.length) && (tabContent.offsetWidth < activeContent.offsetWidth)); i++) {
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var groupEle = tabContent.querySelector('#' + group.id);
@@ -565,8 +567,26 @@ var Ribbon = /** @class */ (function (_super) {
             if (!(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
+            var itemsLength = groupEle.querySelectorAll('.' + constants.RIBBON_ITEM);
+            if (itemsLength && !group.enableGroupOverflow) {
+                isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                if (isEmptyCollection) {
+                    groupEle.classList.add('e-ribbon-emptyCollection');
+                }
+            }
+            this.checkOverflowHiddenItems(group.enableGroupOverflow, tabIndex, group.id);
         }
     };
+    Ribbon.prototype.checkEmptyCollection = function (itemsLength) {
+        var isEmptyCollection = true;
+        for (var i = 0; i < itemsLength.length; i++) {
+            if (!(itemsLength[parseInt(i.toString(), 10)].classList.contains('e-hidden'))) {
+                isEmptyCollection = false;
+                break;
+            }
+        }
+        return isEmptyCollection;
+    };
     Ribbon.prototype.updatePopupItems = function (item, itemEle, isGroupOF, isMenu) {
         var dropdown = getComponent(itemEle.querySelector('#' + item.id), (item.type === RibbonItemType.DropDown || item.type === RibbonItemType.GroupButton) ? DropDownButton : SplitButton);
         var dropDownPopup = dropdown.dropDown;
@@ -597,6 +617,7 @@ var Ribbon = /** @class */ (function (_super) {
         if (isClear === void 0) { isClear = false; }
         var orderedGroups = this.getGroupResizeOrder(false, tabIndex);
         var flag = true;
+        var isEmptyCollection;
         for (var i = 0; ((i < orderedGroups.length) && flag); i++) {
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var overflowDDB = void 0;
@@ -644,7 +665,13 @@ var Ribbon = /** @class */ (function (_super) {
             var groupEle = tabContent.querySelector('#' + group.id);
             var itemEle = groupEle.querySelector('.' + constants.RIBBON_ITEM);
             if (groupEle.classList.contains('e-ribbon-emptyCollection') && itemEle !== null) {
-                groupEle.classList.remove('e-ribbon-emptyCollection');
+                var itemsLength = groupEle.querySelectorAll('.' + constants.RIBBON_ITEM);
+                if (itemsLength) {
+                    isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                    if (!isEmptyCollection) {
+                        groupEle.classList.remove('e-ribbon-emptyCollection');
+                    }
+                }
             }
             if (overflowDDB) {
                 if (group.enableGroupOverflow) {
@@ -664,6 +691,7 @@ var Ribbon = /** @class */ (function (_super) {
                     }
                 }
             }
+            this.checkOverflowHiddenItems(group.enableGroupOverflow, tabIndex, group.id);
         }
         if (this.overflowDDB) {
             var overflowEle = this.overflowDDB.target;
@@ -673,6 +701,50 @@ var Ribbon = /** @class */ (function (_super) {
             }
         }
     };
+    Ribbon.prototype.checkOverflowHiddenItems = function (isGroupOF, tabIndex, groupId) {
+        if (isGroupOF) {
+            var overflowDDB = document.querySelector('#' + groupId + constants.GROUPOF_BUTTON_ID);
+            if (overflowDDB) {
+                var overflowButton = getInstance(overflowDDB, DropDownButton);
+                var overflowBtnTarget = overflowButton.target;
+                var itemEle = overflowBtnTarget.querySelectorAll('.e-ribbon-item');
+                var isHidden = true;
+                for (var i = 0; i < itemEle.length; i++) {
+                    if (!(itemEle[parseInt(i.toString(), 10)].classList.contains('e-hidden'))) {
+                        isHidden = false;
+                        break;
+                    }
+                }
+                overflowButton.element.classList[isHidden ? 'add' : 'remove']('e-hidden');
+            }
+        }
+        else {
+            if (this.overflowDDB) {
+                var isGroupHidden = true;
+                var isItemHidden = void 0;
+                var overflowEle = this.overflowDDB.target;
+                var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
+                if (ofTabContainer) {
+                    for (var k = 0; k < ofTabContainer.children.length; k++) {
+                        isItemHidden = true;
+                        var overflowTab = ofTabContainer.children[parseInt(k.toString(), 10)];
+                        var groupTabContainer = overflowTab.querySelectorAll('.e-ribbon-item');
+                        for (var n = 0; n < groupTabContainer.length; n++) {
+                            if (!(groupTabContainer[parseInt(n.toString(), 10)].classList.contains('e-hidden'))) {
+                                isItemHidden = false;
+                                break;
+                            }
+                        }
+                        overflowTab.classList[isItemHidden ? 'add' : 'remove']('e-hide-group');
+                        if (!(overflowTab.classList.contains('e-hide-group')) && !(overflowTab.classList.contains('e-hidden'))) {
+                            isGroupHidden = false;
+                        }
+                    }
+                    this.overflowDDB.element.classList[isGroupHidden ? 'add' : 'remove'](constants.HIDE_CSS);
+                }
+            }
+        }
+    };
     Ribbon.prototype.createOverflowPopup = function (item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer, isResize) {
         var overflowButton;
         var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
@@ -688,11 +760,16 @@ var Ribbon = /** @class */ (function (_super) {
                 overflowButton = getInstance(overflowDDB, DropDownButton);
             }
             var overflowBtnTarget = overflowButton.target;
-            if (groupEle && groupEle.classList.contains('e-disabled')) {
-                overflowBtnTarget.classList.add('e-disabled');
-            }
-            if (groupEle && groupEle.classList.contains('e-hidden')) {
-                overflowBtnTarget.classList.add('e-hidden');
+            if (groupEle) {
+                if (groupEle.classList.contains('e-disabled')) {
+                    overflowBtnTarget.classList.add('e-disabled');
+                }
+                if (groupEle.classList.contains('e-hidden')) {
+                    overflowBtnTarget.classList.add('e-hidden');
+                }
+                if (groupEle.classList.contains('e-hide-group')) {
+                    overflowBtnTarget.classList.add('e-hide-group');
+                }
             }
             isResize ? overflowBtnTarget.insertBefore(itemEle, overflowBtnTarget.querySelector('.' + constants.RIBBON_ITEM))
                 : overflowBtnTarget.append(itemEle);
@@ -712,8 +789,16 @@ var Ribbon = /** @class */ (function (_super) {
                     var ofGroupContainer = overflowEle.querySelector('#' + groupId + constants.CONTAINER_ID);
                     if (!ofGroupContainer) {
                         ofGroupContainer = this.createGroupContainer(groupId, groupHeader);
-                        if (groupEle && groupEle.classList.contains('e-disabled')) {
-                            ofGroupContainer.classList.add('e-disabled');
+                        if (groupEle) {
+                            if (groupEle.classList.contains('e-disabled')) {
+                                ofGroupContainer.classList.add('e-disabled');
+                            }
+                            if (groupEle.classList.contains('e-hidden')) {
+                                ofGroupContainer.classList.add('e-hidden');
+                            }
+                            if (groupEle.classList.contains('e-hide-group')) {
+                                ofGroupContainer.classList.add('e-hide-group');
+                            }
                         }
                         ofTabContainer.append(ofGroupContainer);
                     }
@@ -777,6 +862,9 @@ var Ribbon = /** @class */ (function (_super) {
             if (groupEle.classList.contains('e-hidden')) {
                 ofGroupContainer.classList.add('e-hidden');
             }
+            if (groupEle.classList.contains('e-hide-group')) {
+                ofGroupContainer.classList.add('e-hide-group');
+            }
         }
     };
     Ribbon.prototype.checkGroupShrinking = function (tabIndex, tabContent, activeContent, isLarge) {
@@ -2142,6 +2230,20 @@ var Ribbon = /** @class */ (function (_super) {
             }
             var elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
+            var isItemsHidden = true;
+            for (var j = 0; j < elements.length; j++) {
+                if (isItemsHidden) {
+                    for (var k = 0; k < elements[parseInt(j.toString(), 10)].children.length; k++) {
+                        if (!(elements[parseInt(j.toString(), 10)].children[parseInt(k.toString(), 10)].classList.contains('e-hidden'))) {
+                            isItemsHidden = false;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (isItemsHidden) {
+                groupEle.classList.add('e-hide-group');
+            }
             if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
@@ -3158,6 +3260,7 @@ 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();
         }
         else {
@@ -3190,6 +3293,76 @@ var Ribbon = /** @class */ (function (_super) {
             }
         }
     };
+    Ribbon.prototype.checkHiddenItems = function (group, isHidden, tabIndex) {
+        var isItemsHidden = true;
+        var isEmptyCollection;
+        var contentEle = this.tabObj.items[parseInt(tabIndex.toString(), 10)].content;
+        var groupEle = contentEle.querySelector('#' + group.id);
+        if (isHidden) {
+            for (var i = 0; i < group.collections.length; i++) {
+                if (isItemsHidden) {
+                    var collection = group.collections[parseInt(i.toString(), 10)];
+                    for (var j = 0; j < collection.items.length; j++) {
+                        var item = collection.items[parseInt(j.toString(), 10)];
+                        var itemEle = void 0;
+                        if (item.type === 'GroupButton') {
+                            var itemProp = getItem(this.tabs, item.id);
+                            itemEle = getItemElement(this, item.id + constants.RIBBON_GROUP_BUTTON_ID, itemProp);
+                        }
+                        else {
+                            itemEle = getItemElement(this, item.id);
+                        }
+                        var itemContainer = itemEle ? itemEle.closest('.e-ribbon-item') : null;
+                        if (!(itemContainer.classList.contains('e-hidden'))) {
+                            isItemsHidden = false;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (isItemsHidden) {
+                groupEle.classList.add('e-hide-group');
+                this.checkOverflowItems(isHidden, contentEle, group.enableGroupOverflow, tabIndex, group.id);
+            }
+        }
+        else {
+            groupEle.classList.remove('e-hide-group');
+            this.checkOverflowItems(isHidden, contentEle, group.enableGroupOverflow, tabIndex, group.id);
+        }
+        if (this.activeLayout === 'Simplified' && !group.enableGroupOverflow) {
+            var itemsLength = groupEle.querySelectorAll('.' + constants.RIBBON_ITEM);
+            if (itemsLength) {
+                isEmptyCollection = this.checkEmptyCollection(itemsLength);
+                groupEle.classList[isEmptyCollection ? 'add' : 'remove']('e-ribbon-emptyCollection');
+            }
+        }
+    };
+    Ribbon.prototype.checkOverflowItems = function (isHidden, contentEle, isGroupOF, tabIndex, groupID) {
+        var overflowDDB;
+        var overflowtarget;
+        if (isGroupOF) {
+            var overflowDDBEle = contentEle.querySelector('#' + groupID + constants.GROUPOF_BUTTON_ID);
+            if (overflowDDBEle) {
+                overflowDDB = getInstance(overflowDDBEle, DropDownButton);
+                overflowtarget = overflowDDB.target;
+            }
+            if (overflowtarget) {
+                isHidden ? overflowtarget.classList.add('e-hide-group') : overflowtarget.classList.remove('e-hide-group');
+            }
+        }
+        else {
+            if (this.overflowDDB) {
+                var overflowEle = this.overflowDDB.target;
+                var ofTabContainer = overflowEle.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
+                if (ofTabContainer) {
+                    var grpContainer = ofTabContainer.querySelector('#' + groupID + constants.CONTAINER_ID);
+                    if (grpContainer) {
+                        isHidden ? grpContainer.classList.add('e-hide-group') : grpContainer.classList.remove('e-hide-group');
+                    }
+                }
+            }
+        }
+    };
     /**
      * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
      *

package/styles/bootstrap-dark.css

@@ -298,6 +298,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 4px;
   position: absolute;
@@ -349,7 +353,7 @@
   padding-top: 6px;
   height: 140px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -850,13 +854,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {

package/styles/bootstrap.css

@@ -303,6 +303,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 4px;
   position: absolute;
@@ -354,7 +358,7 @@
   padding-top: 6px;
   height: 140px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -855,13 +859,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {

package/styles/bootstrap4.css

@@ -364,6 +364,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 4px;
   position: absolute;
@@ -415,7 +419,7 @@
   padding-top: 6px;
   height: 134px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -916,13 +920,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {

package/styles/bootstrap5-dark.css

@@ -382,6 +382,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 3px;
   position: absolute;
@@ -433,7 +437,7 @@
   padding-top: 6px;
   height: 120px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -934,13 +938,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {

package/styles/bootstrap5.css

@@ -382,6 +382,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 3px;
   position: absolute;
@@ -433,7 +437,7 @@
   padding-top: 6px;
   height: 120px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -934,13 +938,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {

package/styles/fabric-dark.css

@@ -274,6 +274,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 0;
   position: absolute;
@@ -325,7 +329,7 @@
   padding-top: 6px;
   height: 135px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -826,13 +830,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {

package/styles/fabric.css

@@ -272,6 +272,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 0;
   position: absolute;
@@ -323,7 +327,7 @@
   padding-top: 4px;
   height: 133px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -824,13 +828,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {

package/styles/fluent-dark.css

@@ -358,6 +358,10 @@
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn:focus {
   outline: none;
 }
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn.e-hidden,
+.e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn.e-hidden {
+  display: none;
+}
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn {
   bottom: 3px;
   position: absolute;
@@ -409,7 +413,7 @@
   padding-top: 6px;
   height: 120px;
 }
-.e-ribbon.e-rbn .e-ribbon-group.e-hidden {
+.e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
   display: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group.e-disabled {
@@ -910,13 +914,13 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-disabled {
   pointer-events: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group {
   display: none;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {