@syncfusion/ej2-ribbon 23.2.4 → 23.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.4
+*  version : 23.2.7
 *  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.44",
+  "_id": "@syncfusion/ej2-ribbon@23.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-xT6KW19AWenecFnlvwMfgBJ0UPFa9L7EMy7QCj6X6AVb5+r01bwmcAZ+/2pgb8IEyfpRcfJvfy1jsWqk7pkgSQ==",
+  "_integrity": "sha512-yaxRdEtxHw8Ko6CIOCA3KeaoQuBu8pNB/hDtISHgRg+VlFVdvfxy450RiOQFaN8ivXOiwi7jyGT4NvHA4E+qlA==",
   "_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.44.tgz",
-  "_shasum": "77c3d9e46f87b29534cde8f8d6417a66289bc5a7",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.2.5.tgz",
+  "_shasum": "249585a25ef9d78e2207bdcecd2ee38fd2d74c05",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -35,11 +35,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-dropdowns": "~23.2.4",
+    "@syncfusion/ej2-base": "~23.2.6",
+    "@syncfusion/ej2-buttons": "~23.2.7",
+    "@syncfusion/ej2-dropdowns": "~23.2.7",
     "@syncfusion/ej2-lists": "~23.2.4",
-    "@syncfusion/ej2-navigations": "~23.2.4",
+    "@syncfusion/ej2-navigations": "~23.2.7",
     "@syncfusion/ej2-popups": "~23.2.4",
     "@syncfusion/ej2-splitbuttons": "~23.2.4"
   },
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "23.2.4",
+  "version": "23.2.7",
   "sideEffects": false
 }

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

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

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

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -150,4 +150,18 @@ export interface RibbonModel extends ComponentModel{
      */
     created?: EmitType<Event>;
 
+    /**
+     * Event triggers when the overflow popup opens.
+     *
+     * @event overflowPopupOpen
+     */
+    overflowPopupOpen?: EmitType<OverflowPopupEventArgs>;
+
+    /**
+     * Event triggers when the overflow popup closes.
+     *
+     * @event overflowPopupClose
+     */
+    overflowPopupClose?: EmitType<OverflowPopupEventArgs>;
+
 }

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

@@ -3,7 +3,7 @@ import { INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base'
 import { Tab, TabAnimationSettingsModel } from '@syncfusion/ej2-navigations';
 import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel, BackStageMenuModel } from '../models/index';
 import { RibbonModel } from './ribbon-model';
-import { ExpandCollapseEventArgs, LauncherClickEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
+import { ExpandCollapseEventArgs, LauncherClickEventArgs, OverflowPopupEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
 import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';
 import { RibbonFileMenu, RibbonBackstage } from '../modules/index';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -136,6 +136,18 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @event created
      */
     created: EmitType<Event>;
+    /**
+     * Event triggers when the overflow popup opens.
+     *
+     * @event overflowPopupOpen
+     */
+    overflowPopupOpen: EmitType<OverflowPopupEventArgs>;
+    /**
+     * Event triggers when the overflow popup closes.
+     *
+     * @event overflowPopupClose
+     */
+    overflowPopupClose: EmitType<OverflowPopupEventArgs>;
     /**
      * The `ribbonButtonModule` is used to create and manipulate buttons in ribbon item.
      */
@@ -240,8 +252,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 +463,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,7 +567,25 @@ 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);
@@ -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) {
@@ -1607,11 +1695,22 @@ var Ribbon = /** @class */ (function (_super) {
             locale: this.locale,
             enableRtl: this.enableRtl,
             enablePersistence: this.enablePersistence,
+            beforeOpen: function (args) {
+                var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                _this.trigger('overflowPopupOpen', eventArgs, function (ribbonArgs) {
+                    if (ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
+            },
             beforeClose: function (args) {
                 var ele = args.event ? closest(args.event.target, '.' + constants.RIBBON_POPUP_CONTROL) : null;
-                if (ele) {
-                    args.cancel = true;
-                }
+                var eventArgs = { element: args.element, event: args.event, cancel: args.cancel };
+                _this.trigger('overflowPopupClose', eventArgs, function (ribbonArgs) {
+                    if (ele || ribbonArgs.cancel) {
+                        args.cancel = true;
+                    }
+                });
             }
         }, overflowButton);
         this.element.classList.add(constants.RIBBON_OVERFLOW);
@@ -2142,6 +2241,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 +3271,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 +3304,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.
      *
@@ -3852,6 +4036,12 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Ribbon.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "overflowPopupOpen", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "overflowPopupClose", void 0);
     Ribbon = Ribbon_1 = __decorate([
         NotifyPropertyChanges
     ], Ribbon);

package/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 {