@syncfusion/ej2-ribbon 21.1.37 → 22.1.34

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

@@ -1,4 +1,4 @@
-import { ChildProperty, Collection, Complex, Component, Event, EventHandler, NotifyPropertyChanges, Property, addClass, append, closest, compile, formatUnit, getComponent, getInstance, getUniqueID, isNullOrUndefined, isUndefined, merge, remove, removeClass, select } from '@syncfusion/ej2-base';
+import { ChildProperty, Collection, Complex, Component, Event, EventHandler, KeyboardEvents, NotifyPropertyChanges, Property, addClass, append, closest, compile, formatUnit, getComponent, getInstance, getUniqueID, isNullOrUndefined, isUndefined, merge, remove, removeClass, select } from '@syncfusion/ej2-base';
 import { HScroll, Menu, MenuAnimationSettings, MenuItem, Tab, TabAnimationSettings, Toolbar } from '@syncfusion/ej2-navigations';
 import { ComboBox, FieldSettings } from '@syncfusion/ej2-dropdowns';
 import { DropDownButton, Item, SplitButton } from '@syncfusion/ej2-splitbuttons';
@@ -61,6 +61,10 @@ var RibbonItemSize;
  */
 var DisplayMode;
 (function (DisplayMode) {
+    /**
+     * The item appears in the classic layout group.
+     */
+    DisplayMode[DisplayMode["Classic"] = 4] = "Classic";
     /**
      * The item appears in the simplified layout group.
      */
@@ -70,13 +74,9 @@ var DisplayMode;
      */
     DisplayMode[DisplayMode["Overflow"] = 1] = "Overflow";
     /**
-     * The item appears in both simplified layout group and overflow popup based on ribbon overflow state.
-     */
-    DisplayMode[DisplayMode["Auto"] = 3] = "Auto";
-    /**
-     * The item is hidden in simplified mode.
+      * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
      */
-    DisplayMode[DisplayMode["None"] = 0] = "None";
+    DisplayMode[DisplayMode["Auto"] = 7] = "Auto";
 })(DisplayMode || (DisplayMode = {}));
 /**
  * Defines the type of the ribbon item.
@@ -1077,6 +1077,8 @@ var DROPDOWNBUTTON = 'e-dropdown-btn';
 /** @hidden */
 var DROPDOWNBUTTON_HIDE = 'e-caret-hide';
 /** @hidden */
+var RIBBON_TEMPLATE = 'e-ribbon-template';
+/** @hidden */
 var RIBBON_HELP_TEMPLATE = 'e-ribbon-help-template';
 /** @hidden */
 var RIBBON_TOOLTIP = 'e-ribbon-tooltip';
@@ -1191,6 +1193,7 @@ var RibbonButton = /** @__PURE__ @class */ (function () {
     RibbonButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var buttonEle = itemEle.querySelector('#' + item.id);
+        buttonEle.setAttribute('data-control', item.type.toString());
         var buttonObj = getComponent(buttonEle, Button);
         buttonObj.setProperties({ cssClass: buttonObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         buttonEle.onclick = function (e) {
@@ -1338,6 +1341,7 @@ var RibbonCheckBox = /** @__PURE__ @class */ (function () {
     RibbonCheckBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         var checkBoxObj = getComponent(inputEle, CheckBox);
         checkBoxObj.cssClass = checkBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         checkBoxObj.dataBind();
@@ -1472,8 +1476,16 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
             select: colorPickerSettings.select
         }, inputEle);
         var wrapper = colorPicker.element.parentElement;
-        EventHandler.add(wrapper, 'mouseenter', function () { wrapper.classList.add(RIBBON_HOVER); }, this);
-        EventHandler.add(wrapper, 'mouseleave', function () { wrapper.classList.remove(RIBBON_HOVER); }, this);
+        EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
+        EventHandler.add(wrapper, 'mouseleave', this.toggleWrapperHover.bind(this, wrapper, false), this);
+    };
+    RibbonColorPicker.prototype.toggleWrapperHover = function (wrapper, isAdd) {
+        if (isAdd) {
+            wrapper.classList.add(RIBBON_HOVER);
+        }
+        else {
+            wrapper.classList.remove(RIBBON_HOVER);
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -1485,13 +1497,25 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
      * @hidden
      */
     RibbonColorPicker.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
+        colorPickerEle.setAttribute('data-control', item.type.toString());
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         colorPickerObj.setProperties({ cssClass: colorPickerObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.
         var splitBtn = colorPickerObj['splitBtn'];
+        var target;
+        colorPickerObj.beforeClose = function (e) {
+            target = e.event ? e.event.target : null;
+            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
+            if (item.colorPickerSettings.beforeClose) {
+                item.colorPickerSettings.beforeClose.call(_this);
+            }
+        };
         splitBtn.close = function () {
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -1503,6 +1527,7 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
      * @hidden
      */
     RibbonColorPicker.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         var cssClass = colorPickerObj.cssClass.split(SPACE);
@@ -1511,6 +1536,12 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
         var splitBtn = colorPickerObj['splitBtn'];
         //Accessing the private property 'splitBtn' of ColorPicker component to get the colorpicker instance as there is no close event in colorpicker.
         splitBtn.close = null;
+        colorPickerObj.beforeClose = function (e) {
+            colorPickerObj.element.parentElement.classList.remove(RIBBON_POPUP_OPEN);
+            if (item.colorPickerSettings.beforeClose) {
+                item.colorPickerSettings.beforeClose.call(_this);
+            }
+        };
     };
     RibbonColorPicker.prototype.getColorPickerObj = function (controlId) {
         var inputEle = getItemElement(this.parent, controlId);
@@ -1566,6 +1597,17 @@ var RibbonColorPicker = /** @__PURE__ @class */ (function () {
         var colorPickerObj = getComponent(inputEle, ColorPicker);
         colorPickerObj.setProperties(prop);
     };
+    /**
+     * @param {HTMLElement} element - Gets the colorpicker element to be destroyed.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonColorPicker.prototype.unwireColorPickerEvents = function (element) {
+        var colorPickerObj = getComponent(element, ColorPicker);
+        var wrapper = colorPickerObj.element.parentElement;
+        EventHandler.remove(wrapper, 'mouseenter', this.toggleWrapperHover);
+        EventHandler.remove(wrapper, 'mouseleave', this.toggleWrapperHover);
+    };
     return RibbonColorPicker;
 }());
 
@@ -1651,13 +1693,17 @@ var RibbonComboBox = /** @__PURE__ @class */ (function () {
     RibbonComboBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         var comboBoxObj = getComponent(inputEle, ComboBox);
         comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         comboBoxObj.close = function (e) {
+            var target = e.event ? e.event.target : null;
             if (item.comboBoxSettings.close) {
                 item.comboBoxSettings.close.call(_this, e);
             }
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -1792,7 +1838,11 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             iconCss: dropDownSettings.iconCss,
             items: dropDownSettings.items,
             target: dropDownSettings.target,
-            beforeClose: dropDownSettings.beforeClose,
+            beforeClose: function (e) {
+                if (dropDownSettings.beforeClose) {
+                    dropDownSettings.beforeClose.call(_this, e);
+                }
+            },
             beforeItemRender: dropDownSettings.beforeItemRender,
             beforeOpen: dropDownSettings.beforeOpen,
             close: function (e) {
@@ -1817,14 +1867,24 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
     RibbonDropDown.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var dropdownElement = itemEle.querySelector('#' + item.id);
+        dropdownElement.setAttribute('data-control', item.type.toString());
         var dropdown = getComponent(dropdownElement, DropDownButton);
         dropdown.cssClass = dropdown.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         dropdown.dataBind();
+        var target;
+        dropdown.beforeClose = function (e) {
+            if (item.dropDownSettings.beforeClose) {
+                item.dropDownSettings.beforeClose.call(_this, e);
+            }
+            target = e.event ? e.event.target : null;
+        };
         dropdown.close = function (e) {
             if (item.dropDownSettings.close) {
                 item.dropDownSettings.close.call(_this, e);
             }
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -1848,6 +1908,11 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
                 item.dropDownSettings.close.call(_this, e);
             }
         };
+        dropdown.beforeClose = function (e) {
+            if (item.dropDownSettings.beforeClose) {
+                item.dropDownSettings.beforeClose.call(_this, e);
+            }
+        };
     };
     /**
      * Creates Overflow DropDown.
@@ -1860,10 +1925,13 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
      * @returns {void}
      * @hidden
      */
-    RibbonDropDown.prototype.createOverFlowDropDown = function (id, name, iconCss, groupEle, overflowEle) {
+    RibbonDropDown.prototype.createOverFlowDropDown = function (id, name, iconCss, groupEle, overflowEle, enableRtl) {
+        var _this = this;
+        this.enableRtl = enableRtl;
         var buttonEle = this.parent.createElement('button', {
             id: id + OVERFLOW_ID + DROPDOWN_ID
         });
+        groupEle.setAttribute('tabindex', '0');
         overflowEle.appendChild(buttonEle);
         var dropdown = new DropDownButton({
             iconCss: iconCss,
@@ -1879,8 +1947,155 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             }
         }, buttonEle);
         createTooltip(groupEle, this.parent);
+        buttonEle.onclick = buttonEle.onkeydown = function () { _this.itemIndex = 0; };
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        groupEle.onkeydown = function (e) { _this.keyActionHandler(e, groupEle), _this; };
         return dropdown;
     };
+    RibbonDropDown.prototype.keyActionHandler = function (e, target) {
+        var items = target.querySelectorAll('.e-control');
+        var comboBoxElements = target.querySelectorAll('.e-combobox');
+        var comboBoxEle;
+        if (comboBoxElements) {
+            for (var i = 0; i < comboBoxElements.length; i++) {
+                if (comboBoxElements[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                    comboBoxEle = comboBoxElements[parseInt(i.toString(), 10)];
+                }
+            }
+        }
+        if (comboBoxEle) {
+            for (var i = 0; i < items.length; i++) {
+                if (items[parseInt(i.toString(), 10)].classList.contains('e-combobox')) {
+                    if (items[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                        this.itemIndex = i;
+                    }
+                }
+            }
+        }
+        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
+            e.target.classList.contains('e-ribbon-last-item') || e.target.classList.contains('e-ribbon-first-item')) {
+            if (e.key === 'ArrowRight' || (!e.shiftKey && e.key === 'Tab')) {
+                this.handleNavigation(e, !this.enableRtl, items);
+            }
+            if (e.key === 'ArrowLeft' || (e.shiftKey && e.key === 'Tab')) {
+                this.handleNavigation(e, this.enableRtl, items);
+            }
+        }
+    };
+    RibbonDropDown.prototype.handleNavigation = function (e, enableRtl, items) {
+        if (!(items[0].classList.contains('e-ribbon-first-item'))) {
+            items[0].classList.add('e-ribbon-first-item');
+        }
+        if (!(items[items.length - 1].classList.contains('e-ribbon-last-item'))) {
+            items[items.length - 1].classList.add('e-ribbon-last-item');
+        }
+        if (enableRtl) {
+            if (this.itemIndex === 0 && items[parseInt(this.itemIndex.toString(), 10)].classList.contains('e-ribbon-first-item')) {
+                this.updateItemIndex(e, items, true);
+            }
+            if (!e.target.classList.contains('e-combobox') && !e.target.classList.contains('e-ribbon-last-item') &&
+                !e.target.classList.contains('e-ribbon-group-container') && (e.target.classList.contains('e-ribbon-first-item')
+                || this.itemIndex !== 0) && e.target.classList.contains('e-control')) {
+                this.itemIndex++;
+                this.updateItemIndex(e, items, true);
+            }
+            if (e.target.classList.contains('e-ribbon-last-item')) {
+                var launcherIcon = false;
+                launcherIcon = this.focusLauncherIcon(e, items);
+                if (!launcherIcon) {
+                    this.itemIndex = 0;
+                    this.updateItemIndex(e, items, true);
+                }
+            }
+            if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+                this.itemIndex = 0;
+                this.updateItemIndex(e, items, true);
+            }
+        }
+        else {
+            if (!e.target.classList.contains('e-combobox') && this.itemIndex !== 0) {
+                this.itemIndex--;
+                this.updateItemIndex(e, items, false);
+            }
+            if (e.target.classList.contains('e-ribbon-first-item')) {
+                var launcherIcon = false;
+                launcherIcon = this.focusLauncherIcon(e, items);
+                if (!launcherIcon) {
+                    this.itemIndex = items.length - 1;
+                    this.updateItemIndex(e, items, false);
+                }
+            }
+            if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+                this.itemIndex = items.length - 1;
+                this.updateItemIndex(e, items, false);
+            }
+        }
+        if (e.target.classList.contains('e-combobox') && (e.key === 'Tab')) {
+            if (enableRtl) {
+                if (this.itemIndex < items.length - 1) {
+                    this.itemIndex++;
+                }
+            }
+            else {
+                if (this.itemIndex > 0) {
+                    this.itemIndex--;
+                }
+            }
+        }
+    };
+    RibbonDropDown.prototype.focusLauncherIcon = function (e, items) {
+        var groupContainer = items[parseInt(this.itemIndex.toString(), 10)].closest('.e-ribbon-group-container');
+        var launcherIconEle;
+        if (groupContainer) {
+            launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+        }
+        if (launcherIconEle) {
+            if (e.key === 'Tab') {
+                e.preventDefault();
+            }
+            groupContainer.querySelector('.e-ribbon-launcher-icon').focus();
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    RibbonDropDown.prototype.updateItemIndex = function (e, items, enableRtl) {
+        var ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+            if (enableRtl) {
+                if (this.itemIndex < items.length - 1) {
+                    this.itemIndex++;
+                }
+                else {
+                    var launcherIcon = false;
+                    launcherIcon = this.focusLauncherIcon(e, items);
+                    if (launcherIcon) {
+                        break;
+                    }
+                    this.itemIndex = 0;
+                }
+            }
+            else {
+                if (this.itemIndex > 0) {
+                    this.itemIndex--;
+                }
+                else {
+                    var launcherIcon = false;
+                    launcherIcon = this.focusLauncherIcon(e, items);
+                    if (launcherIcon) {
+                        break;
+                    }
+                    this.itemIndex = items.length - 1;
+                }
+            }
+            ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        }
+        if (e.key === 'Tab') {
+            e.preventDefault();
+        }
+        items[parseInt(this.itemIndex.toString(), 10)].focus();
+    };
     /**
      * Removes Overflow DropDown.
      *
@@ -1983,6 +2198,7 @@ var RibbonDropDown = /** @__PURE__ @class */ (function () {
             control.cssClass = prop.cssClass;
         }
         delete prop.close;
+        delete prop.beforeClose;
         if (prop.content) {
             prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
         }
@@ -2053,7 +2269,11 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
             iconCss: splitButtonSettings.iconCss,
             items: splitButtonSettings.items,
             target: splitButtonSettings.target,
-            beforeClose: splitButtonSettings.beforeClose,
+            beforeClose: function (e) {
+                if (splitButtonSettings.beforeClose) {
+                    splitButtonSettings.beforeClose.call(_this, e);
+                }
+            },
             beforeItemRender: splitButtonSettings.beforeItemRender,
             beforeOpen: splitButtonSettings.beforeOpen,
             close: function () {
@@ -2076,6 +2296,13 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
                 }
             }
         }, buttonEle);
+        var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
+        dropdownEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
         this.setContent(item, splitbutton);
         var wrapper = splitbutton['wrapper'];
         EventHandler.add(wrapper, 'mouseenter', function () { wrapper.classList.add(RIBBON_HOVER); }, this);
@@ -2093,9 +2320,33 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
     RibbonSplitButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
         var splitButtonEle = itemEle.querySelector('#' + item.id);
+        splitButtonEle.setAttribute('data-control', item.type.toString());
         var splitbutton = getComponent(splitButtonEle, SplitButton);
         splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         splitbutton.dataBind();
+        var dropdownEle = splitButtonEle.parentElement.querySelector('.e-dropdown-btn');
+        var ddbId = dropdownEle.getAttribute('id');
+        var popupEle = document.querySelector('#' + ddbId + '-popup');
+        dropdownEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
+        popupEle.onkeydown = function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                splitbutton['wrapper'].classList.remove('e-ribbon-open');
+                popupEle.querySelector('.e-focused').click();
+            }
+        };
+        var target;
+        splitbutton.beforeClose = function (e) {
+            if (item.splitButtonSettings.beforeClose) {
+                item.splitButtonSettings.beforeClose.call(_this, e);
+            }
+            target = e.event ? e.event.target : null;
+        };
         splitbutton.click = function (e) {
             if (item.splitButtonSettings.click) {
                 item.splitButtonSettings.click.call(_this, e);
@@ -2107,7 +2358,9 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
                 item.splitButtonSettings.close.call(_this, e);
             }
             splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
-            overflowButton.toggle();
+            if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**
@@ -2126,6 +2379,11 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
         cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
         splitbutton.cssClass = cssClass.join(SPACE);
         splitbutton.dataBind();
+        splitbutton.beforeClose = function (e) {
+            if (item.splitButtonSettings.beforeClose) {
+                item.splitButtonSettings.beforeClose.call(_this, e);
+            }
+        };
         splitbutton.click = function (e) {
             if (item.splitButtonSettings.click) {
                 item.splitButtonSettings.click.call(_this, e);
@@ -2205,6 +2463,7 @@ var RibbonSplitButton = /** @__PURE__ @class */ (function () {
         delete prop.open;
         delete prop.click;
         delete prop.close;
+        delete prop.beforeClose;
         control.setProperties(prop);
         if (prop.content) {
             this.setContent(itemProp.item, control);
@@ -2253,7 +2512,7 @@ function getIndex(arr, condition) {
 /**
  * Gets template content based on the template property value.
  *
- * @param {string | HTMLElement} template - Template property value.
+ * @param {string | HTMLElement| Function} template - Template property value.
  * @returns {Function} - Return template function.
  * @hidden
  */
@@ -2414,16 +2673,21 @@ function getItemElement(parent, id, itemProp) {
         return null;
     }
     if (parent.activeLayout === RibbonLayout.Classic) {
-        contentEle = (itemProp.group.isCollapsed) ? parent.ribbonDropDownModule.getOverflowDropDownPopup(itemProp, contentEle)
-            : contentEle;
-        return contentEle.querySelector('#' + id);
+        if (itemProp.item.displayOptions & DisplayMode.Classic) {
+            contentEle = (itemProp.group.isCollapsed) ? parent.ribbonDropDownModule.getOverflowDropDownPopup(itemProp, contentEle)
+                : contentEle;
+            return contentEle.querySelector('#' + id);
+        }
+        else {
+            return null;
+        }
     }
     else {
-        //Checks for Simplified and Auto options (Auto = simplified + popup)
+        //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
         var ele = (itemProp.item.displayOptions & DisplayMode.Simplified) ?
             contentEle.querySelector('#' + itemProp.item.id) : null;
         // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-        if (!ele && (DisplayMode.Simplified !== DisplayMode.None)) {
+        if (!ele) {
             var dropdown = itemProp.group.enableGroupOverflow ?
                 getComponent(contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID), DropDownButton)
                 : parent.overflowDDB;
@@ -2583,6 +2847,12 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.idIndex = 0;
         this.tooltipData = [];
         this.isAddRemove = false;
+        this.keyConfigs = {
+            leftarrow: 'leftarrow',
+            rightarrow: 'rightarrow',
+            tab: 'tab',
+            shiftTab: 'shift+tab'
+        };
     };
     /**
      * Get the properties to be maintained in the persisted state.
@@ -2624,12 +2894,239 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
         }
         this.createHelpPaneTemplate();
+        var toolbar = this.tabObj['tbObj'];
+        toolbar.refreshOverflow();
         createTooltip(this.element, this);
         this.wireEvents();
+        this.wireKeyboardEvent();
+        this.currentControlIndex = 0;
     };
     Ribbon.prototype.wireEvents = function () {
         EventHandler.add(window, 'resize', this.resizeHandler, this);
     };
+    Ribbon.prototype.wireKeyboardEvent = function () {
+        this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    };
+    Ribbon.prototype.keyActionHandler = function (e) {
+        if (((e.key === 'Tab') && (!(e.target.classList.contains('e-tab-wrap')) && !(e.target.classList.contains('e-combobox'))))) {
+            e.preventDefault();
+        }
+        var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
+        var ribbonControls = activeContent.querySelectorAll('.e-control');
+        var comboBoxElements = activeContent.querySelectorAll('.e-combobox');
+        var comboBoxEle;
+        if (comboBoxElements) {
+            for (var i = 0; i < comboBoxElements.length; i++) {
+                if (comboBoxElements[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                    comboBoxEle = comboBoxElements[parseInt(i.toString(), 10)];
+                }
+            }
+        }
+        if (comboBoxEle) {
+            for (var i = 0; i < ribbonControls.length; i++) {
+                if (ribbonControls[parseInt(i.toString(), 10)].classList.contains('e-combobox')) {
+                    if (ribbonControls[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                        this.currentControlIndex = i;
+                    }
+                }
+            }
+        }
+        if (this.currentControlIndex === 0) {
+            var item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+            while (item && item.classList.contains('e-disabled')) {
+                this.currentControlIndex++;
+                item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+            }
+        }
+        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
+            e.target.classList.contains('e-ribbon-collapse-btn') || e.target.classList.contains('e-ribbon-last-item') ||
+            e.target.classList.contains('e-ribbon-first-item') || e.target.classList.contains('e-ribbon-group-of-btn') ||
+            e.target.classList.contains('e-ribbon-overall-of-btn')) {
+            switch (e.action) {
+                case 'rightarrow':
+                    this.handleNavigation(e, !this.enableRtl, ribbonControls);
+                    break;
+                case 'leftarrow':
+                    this.handleNavigation(e, this.enableRtl, ribbonControls);
+                    break;
+                case 'tab':
+                    if (e.target.classList.contains('e-combobox')) {
+                        if (this.currentControlIndex < ribbonControls.length - 1) {
+                            this.currentControlIndex++;
+                        }
+                    }
+                    break;
+                case 'shiftTab':
+                    if (e.target.classList.contains('e-combobox')) {
+                        if (this.currentControlIndex > 0) {
+                            this.currentControlIndex--;
+                        }
+                    }
+                    else {
+                        this.tabObj.element.querySelector('.e-toolbar-item.e-active').querySelector('.e-tab-wrap').focus();
+                        this.currentControlIndex = 0;
+                    }
+            }
+        }
+    };
+    Ribbon.prototype.handleNavigation = function (e, enableRtl, ribbonControls) {
+        var groupContainer;
+        var prevGroupId;
+        if (enableRtl) {
+            if (this.currentControlIndex < ribbonControls.length - 1 && ribbonControls[this.currentControlIndex + 1].classList.contains('e-colorpicker')) {
+                this.currentControlIndex++;
+            }
+        }
+        else {
+            if (this.currentControlIndex > 0 && ribbonControls[this.currentControlIndex - 1].classList.contains('e-colorpicker')) {
+                this.currentControlIndex--;
+            }
+        }
+        if ((!enableRtl && (this.currentControlIndex > 0)) || (enableRtl && (this.currentControlIndex < ribbonControls.length - 1))) {
+            if (!e.target.classList.contains('e-combobox') && e.target.classList.contains('e-control') && !e.target.classList.contains('e-ribbon-last-item')) {
+                if (enableRtl) {
+                    this.currentControlIndex++;
+                }
+                else {
+                    var prevGroupContainer = ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].closest('.' + RIBBON_GROUP_CONTAINER);
+                    if (prevGroupContainer) {
+                        prevGroupId = prevGroupContainer.getAttribute('id');
+                    }
+                    this.currentControlIndex--;
+                }
+                var item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                while (item && item.classList.contains('e-disabled')) {
+                    if (((enableRtl && this.currentControlIndex === ribbonControls.length - 1) ||
+                        (!enableRtl && this.currentControlIndex === 0))) {
+                        if (ribbonControls[this.currentControlIndex].closest('.e-ribbon-item').classList.contains('e-disabled')) {
+                            this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+                            break;
+                        }
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    enableRtl ? this.currentControlIndex++ : this.currentControlIndex--;
+                    item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                }
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+                if (this.activeLayout === 'Classic') {
+                    groupContainer = ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].closest('.' + RIBBON_GROUP_CONTAINER);
+                    if (enableRtl) {
+                        var launcherIconEle = void 0;
+                        if (groupContainer) {
+                            launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+                        }
+                        if (launcherIconEle) {
+                            var items = groupContainer.querySelectorAll('.e-ribbon-item');
+                            items[items.length - 1].querySelector('.e-control').classList.add('e-ribbon-last-item');
+                        }
+                    }
+                    else {
+                        if (groupContainer) {
+                            var groupContainerId = groupContainer.getAttribute('id');
+                            if (prevGroupId !== groupContainerId) {
+                                var launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+                                if (launcherIconEle) {
+                                    ribbonControls[parseInt((this.currentControlIndex + 1).toString(), 10)].classList.add('e-ribbon-first-item');
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.contains('e-ribbon-first-item')) {
+                        ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.remove('e-ribbon-first-item');
+                    }
+                    else if (ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.contains('e-ribbon-last-item')) {
+                        ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.remove('e-ribbon-last-item');
+                    }
+                }
+            }
+        }
+        else {
+            if (this.activeLayout === 'Classic') {
+                this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+            }
+            if (this.activeLayout === 'Simplified') {
+                var overflowButton = this.tabObj.element.querySelector('.e-ribbon-overall-of-btn');
+                if (enableRtl && (overflowButton && !overflowButton.classList.contains('e-ribbon-hide'))) {
+                    overflowButton.focus();
+                }
+                else {
+                    this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+                }
+            }
+        }
+        if (e.target.classList.contains('e-ribbon-last-item')) {
+            if (enableRtl) {
+                groupContainer = ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].closest('.' + RIBBON_GROUP_CONTAINER);
+                groupContainer.querySelector('.e-ribbon-launcher-icon').focus();
+            }
+            else {
+                this.currentControlIndex--;
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+            }
+        }
+        if (!enableRtl && e.target.classList.contains('e-ribbon-first-item')) {
+            groupContainer = ribbonControls[parseInt((this.currentControlIndex - 1).toString(), 10)].closest('.' + RIBBON_GROUP_CONTAINER);
+            var launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+            if (launcherIconEle) {
+                groupContainer.querySelector('.e-ribbon-launcher-icon').focus();
+            }
+        }
+        if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+            if (enableRtl) {
+                this.currentControlIndex++;
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+                if (ribbonControls[parseInt((this.currentControlIndex - 1).toString(), 10)].classList.contains('e-ribbon-last-item')) {
+                    ribbonControls[parseInt((this.currentControlIndex - 1).toString(), 10)].classList.remove('e-ribbon-last-item');
+                }
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                this.currentControlIndex;
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+            }
+        }
+        if (e.target.classList.contains('e-ribbon-collapse-btn')) {
+            if (enableRtl) {
+                this.currentControlIndex = 0;
+                var ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+                    this.currentControlIndex++;
+                    ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                }
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+            }
+            else {
+                var overflowButton = this.tabObj.element.querySelector('.e-ribbon-overall-of-btn');
+                if ((overflowButton && !overflowButton.classList.contains('e-ribbon-hide'))) {
+                    overflowButton.focus();
+                }
+                else {
+                    this.currentControlIndex = ribbonControls.length - 1;
+                    var ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                    while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+                        this.currentControlIndex--;
+                        ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                    }
+                    ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+                }
+            }
+        }
+        if (this.activeLayout === 'Simplified' && e.target.classList.contains('e-ribbon-overall-of-btn')) {
+            if (enableRtl) {
+                this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+            }
+            else {
+                this.currentControlIndex = ribbonControls.length - 1;
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+            }
+        }
+    };
     Ribbon.prototype.resizeHandler = function () {
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
         this.checkOverflow(this.selectedTab, activeContent);
@@ -2702,7 +3199,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
         var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
         this.setProperties({ selectedTab: selectedIndex }, true);
-        this.checkOverflow(selectedIndex, e.selectedContent);
+        this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + RIBBON_TAB_ACTIVE);
@@ -2721,9 +3218,6 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.trigger('tabSelected', eventArgs);
     };
     Ribbon.prototype.checkOverflow = function (tabIndex, activeContent) {
-        if (!activeContent) {
-            activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + CONTENT_ID);
-        }
         var tabContent = activeContent.closest('.' + TAB_CONTENT);
         var isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
         if (isOverFlow && !this.scrollModule) {
@@ -2835,7 +3329,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 for (var k = collection.items.length; ((k >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); k--) {
                     var item = collection.items[k - 1];
                     var itemContainer = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
-                    if ((item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow)) && !isNullOrUndefined(itemContainer)) {
+                    if (((item.displayOptions === DisplayMode.Auto) ||
+                        (item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow))) && !isNullOrUndefined(itemContainer)) {
                         itemContainer.setAttribute('data-simplified-width', activeContent.offsetWidth.toString());
                         this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemContainer, groupContainer);
                         if (item.activeSize === RibbonItemSize.Small) {
@@ -2906,7 +3401,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     if (overflowtarget) {
                         itemContainer = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
                     }
-                    if ((item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow)) && !isNullOrUndefined(itemContainer)) {
+                    if (((item.displayOptions === DisplayMode.Auto) ||
+                        (item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow))) && !isNullOrUndefined(itemContainer)) {
                         var width = parseInt(itemContainer.getAttribute('data-simplified-width'), 10);
                         if (!isClear && (tabContent.offsetWidth < width)) {
                             flag = false;
@@ -2996,7 +3492,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             overflowButton = this.overflowDDB;
         }
-        this.addOverflowEvents(item, itemEle, overflowButton);
+        if (itemEle !== null) {
+            this.addOverflowEvents(item, itemEle, overflowButton);
+        }
     };
     Ribbon.prototype.addOverflowEvents = function (item, itemEle, overflowButton) {
         switch (item.type) {
@@ -3045,6 +3543,50 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         return isBreak;
     };
+    Ribbon.prototype.checkValidCollectionLength = function (collections) {
+        var count = 0;
+        for (var i = 0; i < collections.length; i++) {
+            var items = collections[parseInt(i.toString(), 10)].items;
+            for (var ind = 0; ind < items.length; ind++) {
+                if (items[parseInt(ind.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                    count++;
+                    break;
+                }
+            }
+            if (count > 1) {
+                return false;
+            }
+        }
+        return count === 1;
+    };
+    Ribbon.prototype.checkClassicCollection = function (collections, n, isIncrement) {
+        var items = collections[parseInt(n.toString(), 10)].items;
+        for (var ind = 0; ind < items.length; ind++) {
+            if (items[parseInt(ind.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                return n;
+            }
+        }
+        n = isIncrement ? n + 1 : n - 1;
+        if (isIncrement) {
+            return (n === collections.length) ? n : this.checkClassicCollection(collections, n, isIncrement);
+        }
+        else {
+            return (n < 0) ? n : this.checkClassicCollection(collections, n, isIncrement);
+        }
+    };
+    Ribbon.prototype.checkClassicItem = function (items, n, isIncrement) {
+        var item = items[parseInt(n.toString(), 10)];
+        if (item.displayOptions & DisplayMode.Classic) {
+            return n;
+        }
+        n = isIncrement ? n + 1 : n - 1;
+        if (isIncrement) {
+            return (n === items.length) ? n : this.checkClassicItem(items, n, isIncrement);
+        }
+        else {
+            return (n < 0) ? n : this.checkClassicItem(items, n, isIncrement);
+        }
+    };
     Ribbon.prototype.checkLargeToMedium = function (tabIndex, tab, groupIndex, tabContent, activeContent, shouldSkip) {
         var _this = this;
         if (shouldSkip === void 0) { shouldSkip = false; }
@@ -3078,6 +3620,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 createShrinkEle(collection.id, firstItem, start, end);
             for (var i = start; i <= end; i++) {
                 var item = collection.items[parseInt(i.toString(), 10)];
+                if (!(item.displayOptions & DisplayMode.Classic)) {
+                    continue;
+                }
                 var ele = activeContent.querySelector('#' + item.id + CONTAINER_ID);
                 shrinkEle.appendChild(ele);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
@@ -3102,45 +3647,65 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (orientation === ItemOrientation.Column) {
             for (var k = (group.collections.length - 1); k > 0; k--) {
                 //to avoid negative index while checking for the second collection
-                if (((k - 1) >= 0) && canReduceCollection(group.collections[parseInt(k.toString(), 10)])) {
-                    if (canReduceCollection(group.collections[k - 1])) {
-                        if (((k - 2) >= 0) && canReduceCollection(group.collections[k - 2])) {
-                            moveCollectionToColumn(k - 2, k);
+                k = this.checkClassicCollection(group.collections, k, false);
+                var l = k - 1;
+                //Checks the element rendered at position n
+                if ((l >= 0) && canReduceCollection(group.collections[parseInt(k.toString(), 10)])) {
+                    l = this.checkClassicCollection(group.collections, l, false);
+                    //Checks the element rendered at position n-1
+                    if ((l >= 0) && canReduceCollection(group.collections[parseInt(l.toString(), 10)])) {
+                        var m = l - 1;
+                        if (m >= 0) {
+                            m = this.checkClassicCollection(group.collections, m, false);
+                        }
+                        //Checks the element rendered at position n-2
+                        if ((m >= 0) && canReduceCollection(group.collections[parseInt(m.toString(), 10)])) {
+                            moveCollectionToColumn(m, k);
                         }
                         else {
-                            moveCollectionToColumn(k - 1, k);
+                            moveCollectionToColumn(l, k);
                         }
-                        k -= 2;
+                        k = m;
                         if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                             return true;
                         }
                     }
                     else {
-                        k--;
+                        k = l;
                     }
                 }
             }
         }
         else {
-            if (group.collections.length === 1) {
+            if (this.checkValidCollectionLength(group.collections)) {
                 var collection = group.collections[0];
                 for (var k = (collection.items.length - 1); k > 0; k--) {
                     //to avoid negative index while checking for the second item
-                    if (((k - 1) >= 0) && canReduceItem(collection.items[parseInt(k.toString(), 10)])) {
-                        if (canReduceItem(collection.items[k - 1])) {
-                            if (((k - 2) >= 0) && canReduceItem(collection.items[k - 2])) {
-                                moveItemToColumn(k - 2, k);
+                    k = this.checkClassicItem(collection.items, k, false);
+                    var l = k - 1;
+                    //Checks the element rendered at position n
+                    if ((l >= 0) && canReduceItem(collection.items[parseInt(k.toString(), 10)])) {
+                        l = this.checkClassicItem(collection.items, l, false);
+                        //Checks the element rendered at position n-1
+                        if ((l >= 0) && canReduceItem(collection.items[parseInt(l.toString(), 10)])) {
+                            var m = l - 1;
+                            //Checks the element rendered at position n-2
+                            if (m >= 0) {
+                                m = this.checkClassicItem(collection.items, m, false);
+                            }
+                            if ((m >= 0) && canReduceItem(collection.items[parseInt(m.toString(), 10)])) {
+                                moveItemToColumn(m, k);
                             }
                             else {
-                                moveItemToColumn(k - 1, k);
+                                moveItemToColumn(l, k);
                             }
-                            k -= 2;
+                            k = m;
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
                             }
                         }
                         else {
-                            k--;
+                            k = l;
                         }
                     }
                 }
@@ -3161,28 +3726,44 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var canReduceItem = function (item) {
             return (item.allowedSizes & RibbonItemSize.Small) && (item.activeSize === RibbonItemSize.Medium);
         };
-        var reduceItemsToSmall = function (collectionIndex, start, end) {
+        var reduceItemsToSmall = function (collectionIndex, start, end, middle) {
+            if (middle === void 0) { middle = null; }
             var collection = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections[parseInt(collectionIndex.toString(), 10)];
-            for (var i = start; i <= end; i++) {
+            var reduce = function (i) {
                 var item = collection.items[parseInt(i.toString(), 10)];
-                var ele_1 = activeContent.querySelector('#' + item.id);
-                item.setProperties({ activeSize: RibbonItemSize.Small }, true);
-                _this.setItemSize(ele_1, item);
+                if (item.displayOptions & DisplayMode.Classic) {
+                    var ele_1 = activeContent.querySelector('#' + item.id);
+                    item.setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    _this.setItemSize(ele_1, item);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
         };
-        var reduceCollectionsToSmall = function (index, start, end) {
+        var reduceCollectionsToSmall = function (index, start, end, middle) {
+            if (middle === void 0) { middle = null; }
             var group = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)];
             if (!shouldSkip) {
                 shrinkColumns[parseInt(index.toString(), 10)].setAttribute('data-medium-width', activeContent.offsetWidth.toString());
             }
-            for (var i = start; i <= end; i++) {
+            var reduce = function (i) {
                 var collection = group.collections[parseInt(i.toString(), 10)];
-                var ele_2 = activeContent.querySelector('#' + collection.items[0].id);
-                collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
-                _this.setItemSize(ele_2, collection.items[0]);
+                if (collection.items[0].displayOptions & DisplayMode.Classic) {
+                    var ele_2 = activeContent.querySelector('#' + collection.items[0].id);
+                    collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    _this.setItemSize(ele_2, collection.items[0]);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
         };
         var setWidth = function (id) {
             if (!shouldSkip) {
@@ -3196,13 +3777,14 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var start = parseInt(shrinkColumns[parseInt(k.toString(), 10)].getAttribute('data-start'), 10);
                     var end = parseInt(shrinkColumns[parseInt(k.toString(), 10)].getAttribute('data-end'), 10);
                     //only 2 or 3 itmes alone can be present in shrinked column
+                    var l = this.checkClassicCollection(group.collections, start + 1, false); //next valid item
                     if (canReduceItem(group.collections[parseInt(start.toString(), 10)].items[0])
-                        && canReduceItem(group.collections[start + 1].items[0])) {
-                        if ((end - start) === 1) { //if only 2 item, the difference will be 1, else check for 3 rd item satus.
+                        && canReduceItem(group.collections[parseInt(l.toString(), 10)].items[0])) {
+                        if (end === l) { //if only 2 item, then next valid item will be the end item, else check for 3 rd item satus.
                             reduceCollectionsToSmall(k, start, end);
                         }
-                        else if (canReduceItem(group.collections[parseInt(start.toString(), 10)].items[0])) {
-                            reduceCollectionsToSmall(k, start, end);
+                        else if (canReduceItem(group.collections[parseInt(end.toString(), 10)].items[0])) {
+                            reduceCollectionsToSmall(k, start, end, l);
                         }
                         if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                             return true;
@@ -3212,16 +3794,22 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
             for (var k = (group.collections.length - 1); k >= 0; k--) {
                 var collection = group.collections[parseInt(k.toString(), 10)];
+                var classicItems = [];
+                for (var i = 0; i < collection.items.length; i++) {
+                    if (collection.items[parseInt(i.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                        classicItems.push(i);
+                    }
+                }
                 //If items length is 1 then, it would have been already check for shrinked column
-                if ((collection.items.length > 1)) {
-                    if (canReduceItem(collection.items[0]) && canReduceItem(collection.items[1])) {
-                        if (collection.items.length === 2) {
+                if ((classicItems.length > 1)) {
+                    if (canReduceItem(collection.items[classicItems[0]]) && canReduceItem(collection.items[classicItems[1]])) {
+                        if (classicItems.length === 2) {
                             setWidth(collection.id);
-                            reduceItemsToSmall(k, 0, 1);
+                            reduceItemsToSmall(k, classicItems[0], classicItems[1]);
                         }
-                        else if (canReduceItem(collection.items[2])) {
+                        else if (canReduceItem(collection.items[classicItems[2]])) {
                             setWidth(collection.id);
-                            reduceItemsToSmall(k, 0, 2);
+                            reduceItemsToSmall(k, classicItems[0], classicItems[2], classicItems[1]);
                         }
                         if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                             return true;
@@ -3231,22 +3819,24 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
-            if (group.collections.length === 1) {
+            if (this.checkValidCollectionLength(group.collections)) {
                 if (shrinkColumns.length > 0) {
                     for (var k = (shrinkColumns.length - 1); k >= 0; k--) {
                         var shrinkColumn = shrinkColumns[parseInt(k.toString(), 10)];
                         var start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                         var end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                         //only 2 or 3 itmes alone can be present in shrinked column
+                        var collection = group.collections[0];
+                        var l = this.checkClassicItem(collection.items, start + 1, false); //next valid item
                         if (canReduceItem(group.collections[0].items[parseInt(start.toString(), 10)])
-                            && canReduceItem(group.collections[0].items[start + 1])) {
-                            if ((end - start) === 1) { //if only 2 item, the difference will be 1, else check for 3 rd item satus.
+                            && canReduceItem(group.collections[0].items[parseInt(l.toString(), 10)])) {
+                            if (end === l) { //if only 2 item, then next valid item will be the end item, else check for 3 rd item satus.
                                 setWidth(shrinkColumn.id);
                                 reduceItemsToSmall(0, start, end);
                             }
                             else if (canReduceItem(group.collections[0].items[parseInt(end.toString(), 10)])) {
                                 setWidth(shrinkColumn.id);
-                                reduceItemsToSmall(0, start, end);
+                                reduceItemsToSmall(0, start, end, l);
                             }
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
@@ -3259,6 +3849,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 for (var k = (group.collections.length - 1); k >= 0; k--) {
                     var collection = group.collections[parseInt(k.toString(), 10)];
                     for (var l = (collection.items.length - 1); l >= 0; l--) {
+                        l = this.checkClassicItem(collection.items, l, false);
+                        if (l < 0) {
+                            continue;
+                        }
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canReduceItem(item)) {
                             setWidth(item.id);
@@ -3292,20 +3886,21 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         var canExpandItem = function (item) {
             return (item.allowedSizes & RibbonItemSize.Medium) && (item.activeSize === RibbonItemSize.Small);
         };
-        var expandItemsToMedium = function (collectionIndex, start, end, parentEle) {
+        var expandItemToMedium = function (collectionIndex, index, parentEle) {
             var collection = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections[parseInt(collectionIndex.toString(), 10)];
-            for (var i = start; i <= end; i++) {
-                var item = collection.items[parseInt(i.toString(), 10)];
+            var item = collection.items[parseInt(index.toString(), 10)];
+            if (item.displayOptions & DisplayMode.Classic) {
                 var ele_4 = parentEle.id === item.id ? parentEle : parentEle.querySelector('#' + item.id);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                 _this.setItemSize(ele_4, item);
             }
         };
-        var expandCollectionsToMedium = function (start, end) {
+        var expandCollectionsToMedium = function (i) {
             var collections = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections;
-            for (var i = start; i <= end; i++) {
+            var item = collections[parseInt(i.toString(), 10)].items[0];
+            if (item.displayOptions & DisplayMode.Classic) {
                 var ele_5 = activeContent.querySelector('#' + collections[parseInt(i.toString(), 10)].items[0].id);
                 collections[parseInt(i.toString(), 10)].items[0].setProperties({ activeSize: RibbonItemSize.Medium }, true);
                 _this.setItemSize(ele_5, collections[parseInt(i.toString(), 10)].items[0]);
@@ -3313,17 +3908,21 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         };
         if (orientation === ItemOrientation.Row) {
             // collection length is 1, then the it wll be covered in shrinked columns
-            if (group.collections.length !== 1) {
+            if (!this.checkValidCollectionLength(group.collections)) {
                 for (var k = 0; k < group.collections.length; k++) {
                     var collection = group.collections[parseInt(k.toString(), 10)];
                     for (var l = 0; l < collection.items.length; l++) {
+                        l = this.checkClassicItem(collection.items, l, true);
+                        if (l === collection.items.length) {
+                            continue;
+                        }
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canExpandItem(item)) {
                             var itemEle = activeContent.querySelector('#' + item.id);
                             var valString = itemEle.getAttribute('data-medium-width');
                             var value = valString ? parseInt(valString, 10) : null;
                             if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
-                                expandItemsToMedium(k, l, l, itemEle);
+                                expandItemToMedium(k, l, itemEle);
                                 if (!shouldSkip || shouldClear) {
                                     itemEle.removeAttribute('data-medium-width');
                                 }
@@ -3344,8 +3943,18 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var itemEle = activeContent.querySelector('#' + collection.id);
                     var valString = itemEle.getAttribute('data-medium-width');
                     var value = valString ? parseInt(valString, 10) : null;
-                    if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
-                        expandItemsToMedium(k, 0, (collection.items.length === 2) ? 1 : 2, itemEle);
+                    var classicItems = [];
+                    for (var i = 0; i < collection.items.length; i++) {
+                        if (collection.items[parseInt(i.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                            classicItems.push(i);
+                        }
+                    }
+                    if ((classicItems.length > 1) && value && (shouldSkip || (tabContent.offsetWidth > value))) {
+                        expandItemToMedium(k, classicItems[0], itemEle);
+                        expandItemToMedium(k, classicItems[1], itemEle);
+                        if (classicItems.length === 3) {
+                            expandItemToMedium(k, classicItems[2], itemEle);
+                        }
                         if (!shouldSkip || shouldClear) {
                             itemEle.removeAttribute('data-medium-width');
                         }
@@ -3365,10 +3974,22 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     var start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                     var end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                     if (orientation === ItemOrientation.Row) {
-                        expandItemsToMedium(0, start, end, shrinkColumn);
+                        var collection = group.collections[0];
+                        var l = this.checkClassicItem(collection.items, start + 1, true); //next valid item
+                        expandItemToMedium(0, start, shrinkColumn);
+                        expandItemToMedium(0, l, shrinkColumn);
+                        // if l == end, then l is the last item, else L is the middle item. If l is middle then call the method for end.
+                        if (l !== end) {
+                            expandItemToMedium(0, end, shrinkColumn);
+                        }
                     }
                     else {
-                        expandCollectionsToMedium(start, end);
+                        var m = this.checkClassicCollection(group.collections, start + 1, true); //next valid item
+                        expandCollectionsToMedium(start);
+                        expandCollectionsToMedium(m);
+                        if (m !== end) {
+                            expandCollectionsToMedium(end);
+                        }
                     }
                     if (!shouldSkip || shouldClear) {
                         shrinkColumn.removeAttribute('data-medium-width');
@@ -3390,32 +4011,46 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         if (shrinkColumns.length === 0) {
             return false;
         }
-        var expandItemsToLarge = function (start, end, parentEle) {
+        var expandItemsToLarge = function (start, end, parentEle, middle) {
             var items = _this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].collections[0].items;
-            for (var i = end; i >= start; i--) {
+            var reduce = function (i) {
                 var item = items[parseInt(i.toString(), 10)];
-                var container = parentEle.querySelector('#' + item.id + CONTAINER_ID);
-                var ele_6 = container.querySelector('#' + item.id);
-                item.setProperties({ activeSize: RibbonItemSize.Large }, true);
-                _this.setItemSize(ele_6, item);
-                parentEle.insertAdjacentElement('afterend', container);
+                if (item.displayOptions & DisplayMode.Classic) {
+                    var container = parentEle.querySelector('#' + item.id + CONTAINER_ID);
+                    var ele_6 = container.querySelector('#' + item.id);
+                    item.setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    _this.setItemSize(ele_6, item);
+                    parentEle.insertAdjacentElement('afterend', container);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
             if (!shouldSkip || shouldClear) {
                 remove(parentEle);
             }
         };
-        var expandCollectionsToLarge = function (start, end, parentEle) {
+        var expandCollectionsToLarge = function (start, end, parentEle, middle) {
             var collections = _this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].collections;
-            for (var i = end; i >= start; i--) {
+            var reduce = function (i) {
                 var collection = collections[parseInt(i.toString(), 10)];
-                var collectionEle = parentEle.querySelector('#' + collection.id);
-                var ele_7 = collectionEle.querySelector('#' + collection.items[0].id);
-                collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
-                _this.setItemSize(ele_7, collection.items[0]);
-                parentEle.insertAdjacentElement('afterend', collectionEle);
+                if (collection.items[0].displayOptions & DisplayMode.Classic) {
+                    var collectionEle = parentEle.querySelector('#' + collection.id);
+                    var ele_7 = collectionEle.querySelector('#' + collection.items[0].id);
+                    collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    _this.setItemSize(ele_7, collection.items[0]);
+                    parentEle.insertAdjacentElement('afterend', collectionEle);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
             if (!shouldSkip || shouldClear) {
                 remove(parentEle);
             }
@@ -3428,10 +4063,23 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 var start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                 var end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                 if (orientation === ItemOrientation.Row) {
-                    expandItemsToLarge(start, end, shrinkColumn);
+                    var collection = group.collections[0];
+                    var l = this.checkClassicItem(collection.items, start + 1, true); //next valid item
+                    if (l === end) {
+                        expandItemsToLarge(start, end, shrinkColumn);
+                    }
+                    else {
+                        expandItemsToLarge(start, end, shrinkColumn, l);
+                    }
                 }
                 else {
-                    expandCollectionsToLarge(start, end, shrinkColumn);
+                    var m = this.checkClassicCollection(group.collections, start + 1, true); //next valid item
+                    if (m === end) {
+                        expandCollectionsToLarge(start, end, shrinkColumn);
+                    }
+                    else {
+                        expandCollectionsToLarge(start, end, shrinkColumn, m);
+                    }
                 }
                 if (!shouldSkip || shouldClear) {
                     shrinkColumn.removeAttribute('data-large-width');
@@ -3487,7 +4135,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             //Expanding the items in the group to their original expanded state
             this_1.checkSmallToMedium(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             this_1.checkMediumToLarge(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
-            var dropdown = this_1.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow);
+            var dropdown = this_1.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow, this_1.enableRtl);
             this_1.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].setProperties({ isCollapsed: true }, true);
             for (var j = 0; j < group.collections.length; j++) {
@@ -3496,7 +4144,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 for (var k = 0; k < collection.items.length; k++) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
-                    this_1.addOverflowEvents(item, itemEle, dropdown);
+                    if (itemEle !== null) {
+                        this_1.addOverflowEvents(item, itemEle, dropdown);
+                    }
                 }
             }
         };
@@ -3536,7 +4186,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 for (var k = 0; k < collection.items.length; k++) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
-                    this_2.removeOverflowEvent(item, itemEle);
+                    if (itemEle !== null) {
+                        this_2.removeOverflowEvent(item, itemEle);
+                    }
                 }
             }
         };
@@ -3594,6 +4246,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.ribbonTabSelecting = function (e) {
         var _this = this;
+        this.currentControlIndex = 0;
         var nextTabId = e.selectingItem.getAttribute('data-id');
         var previousTabId = e.previousItem.getAttribute('data-id');
         var nextIndex = getIndex(this.tabs, (function (tab) { return (tab.id === nextTabId); }));
@@ -3650,11 +4303,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         this.checkOverflow(this.selectedTab, activeContent);
     };
     Ribbon.prototype.addOverflowButton = function (btnId) {
+        var _this = this;
         var overflowButton = this.createElement('button', {
             id: btnId
         });
         var overflowTarget = this.createElement('div', {
-            className: RIBBON_OVERFLOW_TARGET
+            className: RIBBON_OVERFLOW_TARGET,
+            attrs: { 'tabindex': '0' }
         });
         var overflowDDB = new DropDownButton({
             iconCss: OVERFLOW_ICON,
@@ -3672,8 +4327,112 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }, overflowButton);
         this.element.classList.add(RIBBON_OVERFLOW);
         createTooltip(overflowTarget, this);
+        var isGroupOf;
+        overflowButton.onkeydown = overflowButton.onclick = function () { _this.itemIndex = -1; isGroupOf = overflowButton.classList.contains('e-ribbon-overall-of-btn') ? false : true; };
+        overflowTarget.onkeydown = function (e) { return (_this.upDownKeyHandler(e, overflowTarget, isGroupOf), _this); };
         return overflowDDB;
     };
+    Ribbon.prototype.upDownKeyHandler = function (e, target, isGroupOf) {
+        var items;
+        if (isGroupOf) {
+            items = target.getElementsByClassName('e-ribbon-item');
+        }
+        else {
+            var currentList = target.querySelector('.e-ribbon-of-tab.e-ribbon-active');
+            items = currentList.getElementsByClassName('e-ribbon-item');
+        }
+        var comboBoxEle = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control').classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
+        var ribbonItem;
+        if (comboBoxEle === null || (e.key === 'Tab') || this.itemIndex < 0) {
+            if (e.key === 'ArrowDown' || (!e.shiftKey && e.key === 'Tab')) {
+                if ((!this.itemIndex && this.itemIndex !== 0) || this.itemIndex < 0 || this.itemIndex === items.length - 1) {
+                    this.itemIndex = 0;
+                    ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                    this.findDisabledItem(ribbonItem, items, true);
+                    if (comboBoxEle && e.key === 'Tab') {
+                        e.preventDefault();
+                        items[this.itemIndex].querySelector('.e-control').focus();
+                    }
+                }
+                else if (this.itemIndex < items.length - 1 && this.itemIndex >= 0) {
+                    this.itemIndex++;
+                    ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                    this.findDisabledItem(ribbonItem, items, true);
+                }
+            }
+            else if (e.key === 'ArrowUp' || (e.shiftKey && e.key === 'Tab')) {
+                if (comboBoxEle === null || (e.key === 'Tab')) {
+                    if (!this.itemIndex || this.itemIndex === -1) {
+                        this.itemIndex = items.length - 1;
+                        ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                        this.findDisabledItem(ribbonItem, items, false);
+                        if (comboBoxEle && (e.shiftKey && e.key === 'Tab')) {
+                            e.preventDefault();
+                            items[this.itemIndex].querySelector('.e-control').focus();
+                        }
+                    }
+                    else if (this.itemIndex <= items.length - 1 && this.itemIndex > 0) {
+                        this.itemIndex--;
+                        ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                        this.findDisabledItem(ribbonItem, items, false);
+                    }
+                }
+            }
+            target.setAttribute('index', this.itemIndex.toString());
+        }
+        var currentItemIndex = parseInt(target.getAttribute('index'), 10);
+        var itemType = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').getAttribute('data-control') : null;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === ' ' || e.key === 'Tab') {
+            if (itemType === 'ColorPicker') {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                }
+                items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-split-colorpicker').focus();
+            }
+            else {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                }
+                items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+            }
+            if (e.key === ' ' && (itemType === 'CheckBox')) {
+                var checkBoxEle = items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control');
+                var checkBox = getComponent(checkBoxEle, CheckBox);
+                this.itemIndex = -1;
+                checkBox.click();
+            }
+        }
+        if (((itemType === 'SplitButton') && (e.key === 'ArrowRight' || e.key === 'ArrowLeft'))) {
+            if (e.key === 'ArrowRight') {
+                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus() :
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus();
+            }
+            if (e.key === 'ArrowLeft') {
+                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus() :
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+            }
+        }
+        if (e.key === 'Enter') {
+            this.itemIndex = -1;
+        }
+    };
+    Ribbon.prototype.findDisabledItem = function (ribbonItem, items, isIncrease) {
+        while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+            if (isIncrease) {
+                if (this.itemIndex === items.length - 1 && items[this.itemIndex].closest('.e-ribbon-item').classList.contains('e-disabled')) {
+                    this.itemIndex = -1;
+                }
+            }
+            else {
+                if (this.itemIndex === 0 && items[this.itemIndex].closest('.e-ribbon-item').classList.contains('e-disabled')) {
+                    this.itemIndex = items.length;
+                }
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            isIncrease ? this.itemIndex++ : this.itemIndex--;
+            ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        }
+    };
     Ribbon.prototype.removeOverflowButton = function (overflowDDB) {
         if (overflowDDB) {
             var btnEle = overflowDDB.element;
@@ -3763,6 +4522,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Ribbon.prototype.switchLayout = function () {
+        this.currentControlIndex = 0;
         this.destroyScroll();
         this.collapseButton.classList.toggle(RIBBON_EXPAND_BUTTON, this.activeLayout === 'Simplified');
         this.element.classList.toggle(RIBBON_SIMPLIFIED_MODE, this.activeLayout === 'Simplified');
@@ -3777,6 +4537,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 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;
                         if (group.isCollapsed) {
                             group.setProperties({ isCollapsed: false }, true);
                             this.removeDropdown(group.id);
@@ -3804,11 +4565,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 var itemList = collection.items;
                                 var item = collection.items[parseInt(k.toString(), 10)];
                                 var flag = true;
-                                while ((flag) && (item.displayOptions === DisplayMode.None)) {
+                                while ((flag) && (item.displayOptions === DisplayMode.Classic)) {
                                     k++;
                                     var itemEle_1 = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
-                                    var ele_8 = itemEle_1.querySelector('#' + item.id);
-                                    this.destroyFunction(item, ele_8);
+                                    var ele = itemEle_1.querySelector('#' + item.id);
+                                    this.destroyFunction(item, ele);
                                     itemEle_1.remove();
                                     if (k < itemList.length) {
                                         item = itemList[parseInt(k.toString(), 10)];
@@ -3820,19 +4581,29 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 if (!flag) {
                                     break;
                                 }
-                                var itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
-                                var ele = itemEle.querySelector('#' + item.id);
                                 var size = ((item.allowedSizes === RibbonItemSize.Large) ||
                                     (item.allowedSizes & RibbonItemSize.Medium)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                                if (item.displayOptions === DisplayMode.Overflow) {
-                                    this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
-                                    size = RibbonItemSize.Medium;
-                                    if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
-                                        this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
+                                size = (!(item.displayOptions & DisplayMode.Simplified) && (item.displayOptions & DisplayMode.Overflow))
+                                    ? RibbonItemSize.Medium : size;
+                                var itemEle = void 0;
+                                if (!(item.displayOptions & DisplayMode.Classic)) {
+                                    itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer)[0];
+                                    if (item.displayOptions & DisplayMode.Simplified) {
+                                        groupCollection.append(itemEle);
                                     }
                                 }
-                                item.setProperties({ activeSize: size }, true);
-                                this.setItemSize(ele, item);
+                                else {
+                                    itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
+                                    if (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)) {
+                                        this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
+                                            this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
+                                        }
+                                    }
+                                    item.setProperties({ activeSize: size }, true);
+                                    var ele = itemEle.querySelector('#' + item.id);
+                                    this.setItemSize(ele, item);
+                                }
                             }
                         }
                         if (!(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
@@ -3879,22 +4650,37 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 groupCollection.classList.replace(RIBBON_COLUMN, RIBBON_ROW);
                             }
                             for (var k = 0; k < collection.items.length; k++) {
+                                var itemList = collection.items;
                                 var item = collection.items[parseInt(k.toString(), 10)];
-                                if (item.displayOptions === DisplayMode.None) {
-                                    var itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex)[0];
-                                    groupCollection.append(itemEle);
-                                }
-                                else if ((item.displayOptions === DisplayMode.Overflow)) {
-                                    var itemEle = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
-                                    if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
-                                        this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
+                                var flag = true;
+                                while ((flag) && !(item.displayOptions & DisplayMode.Classic)) {
+                                    k++;
+                                    var itemEle = void 0;
+                                    if ((item.displayOptions & DisplayMode.Simplified) || (item.displayOptions & DisplayMode.Overflow)) {
+                                        if (item.displayOptions & DisplayMode.Simplified) {
+                                            itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
+                                        }
+                                        else {
+                                            itemEle = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
+                                        }
+                                        if (itemEle !== null) {
+                                            var ele_8 = itemEle.querySelector('#' + item.id);
+                                            this.destroyFunction(item, ele_8);
+                                            itemEle.remove();
+                                        }
+                                    }
+                                    if (k < itemList.length) {
+                                        item = itemList[parseInt(k.toString(), 10)];
+                                    }
+                                    else {
+                                        flag = false;
                                     }
-                                    groupCollection.append(itemEle);
-                                    this.removeOverflowEvent(item, itemEle);
                                 }
-                                else if ((item.displayOptions === DisplayMode.Simplified)) {
-                                    //To make sure the items are in proper order
-                                    var itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
+                                if (!flag) {
+                                    break;
+                                }
+                                if (!(item.displayOptions & (DisplayMode.Simplified | DisplayMode.Overflow))) {
+                                    var itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex)[0];
                                     groupCollection.append(itemEle);
                                 }
                                 else {
@@ -3932,36 +4718,51 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.overflowDDB = null;
         }
     };
+    Ribbon.prototype.createLauncherIcon = function (groupId, groupContainer) {
+        var _this = this;
+        var launcherIcon = this.createElement('div', {
+            className: RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss ? this.launcherIconCss : RIBBON_LAUNCHER_ICON),
+            id: groupId + LAUNCHER_ID,
+            attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Launcher Icon', 'role': 'button' }
+        });
+        groupContainer.appendChild(launcherIcon);
+        groupContainer.classList.add(RIBBON_LAUNCHER);
+        EventHandler.add(launcherIcon, 'click', this.launcherIconClicked.bind(this, groupId), this);
+        EventHandler.add(launcherIcon, 'keydown', function (e) {
+            if (e.key === 'Enter') {
+                _this.launcherIconClicked(groupId);
+            }
+        }, this);
+    };
     Ribbon.prototype.launcherIconClicked = function (id) {
         var eventArgs = { groupId: id };
         this.trigger('launcherIconClick', eventArgs);
     };
     Ribbon.prototype.createGroups = function (groupList, tabIndex) {
-        var _this = this;
         var groupElements = [];
-        var _loop_3 = function (i) {
+        for (var i = 0; i < groupList.length; i++) {
             var group = groupList[parseInt(i.toString(), 10)];
             var alignType = group.orientation;
-            var groupEle = this_3.createElement('div', {
+            var groupEle = this.createElement('div', {
                 className: group.cssClass,
                 id: group.id
             });
             groupEle.classList.add(RIBBON_GROUP);
             groupElements.push(groupEle);
-            var groupContainer = this_3.createElement('div', {
+            var groupContainer = this.createElement('div', {
                 className: group.cssClass,
                 id: group.id + CONTAINER_ID
             });
             groupContainer.classList.add(RIBBON_GROUP_CONTAINER);
             groupEle.appendChild(groupContainer);
-            var groupContent = this_3.createElement('div', {
-                className: this_3.activeLayout === 'Simplified' ? RIBBON_GROUP_CONTENT : (RIBBON_GROUP_CONTENT + SPACE + RIBBON_CONTENT_HEIGHT),
+            var groupContent = this.createElement('div', {
+                className: this.activeLayout === 'Simplified' ? RIBBON_GROUP_CONTENT : (RIBBON_GROUP_CONTENT + SPACE + RIBBON_CONTENT_HEIGHT),
                 id: group.id + CONTENT_ID
             });
-            groupContent.classList.add(((alignType === 'Column') || (this_3.activeLayout === 'Simplified')) ? RIBBON_COLUMN : RIBBON_ROW);
+            groupContent.classList.add(((alignType === 'Column') || (this.activeLayout === 'Simplified')) ? RIBBON_COLUMN : RIBBON_ROW);
             groupContainer.appendChild(groupContent);
-            if (this_3.activeLayout === 'Classic') {
-                var groupHeader = this_3.createElement('div', {
+            if (this.activeLayout === 'Classic') {
+                var groupHeader = this.createElement('div', {
                     className: RIBBON_GROUP_HEADER,
                     id: group.id + HEADER_ID,
                     innerHTML: group.header
@@ -3969,29 +4770,13 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 groupContainer.appendChild(groupHeader);
             }
             if (group.showLauncherIcon) {
-                var launcherIcon = this_3.createElement('div', {
-                    className: RIBBON_LAUNCHER_ICON_ELE + ' ' + (this_3.launcherIconCss ? this_3.launcherIconCss : RIBBON_LAUNCHER_ICON),
-                    id: group.id + LAUNCHER_ID,
-                    attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Launcher Icon', 'role': 'button' }
-                });
-                groupContainer.appendChild(launcherIcon);
-                groupContainer.classList.add(RIBBON_LAUNCHER);
-                EventHandler.add(launcherIcon, 'click', this_3.launcherIconClicked.bind(this_3, group.id), this_3);
-                EventHandler.add(launcherIcon, 'keydown', function (e) {
-                    if (e.key === 'Enter') {
-                        _this.launcherIconClicked(group.id);
-                    }
-                }, this_3);
+                this.createLauncherIcon(group.id, groupContainer);
             }
-            var elements = this_3.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
+            var elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
-            if ((this_3.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
+            if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
-        };
-        var this_3 = this;
-        for (var i = 0; i < groupList.length; i++) {
-            _loop_3(i);
         }
         return groupElements;
     };
@@ -4053,6 +4838,31 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         }
         return collectionElements;
     };
+    Ribbon.prototype.createRibbonItem = function (item, itemEle) {
+        switch (item.type) {
+            case 'Button':
+                this.ribbonButtonModule.createButton(item, itemEle);
+                break;
+            case 'DropDown':
+                this.ribbonDropDownModule.createDropDown(item, itemEle);
+                break;
+            case 'SplitButton':
+                this.ribbonSplitButtonModule.createSplitButton(item, itemEle);
+                break;
+            case 'CheckBox':
+                this.ribbonCheckBoxModule.createCheckBox(item, itemEle);
+                break;
+            case 'ColorPicker':
+                this.ribbonColorPickerModule.createColorPicker(item, itemEle);
+                break;
+            case 'ComboBox':
+                this.ribbonComboBoxModule.createComboBox(item, itemEle);
+                break;
+            case 'Template':
+                this.createTemplateContent(item, itemEle);
+                break;
+        }
+    };
     Ribbon.prototype.createItems = function (itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
         var _a;
         var itemElements = [];
@@ -4060,7 +4870,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             var item = itemList[parseInt(i.toString(), 10)];
             //To stop rendering of items with simplified mode position type as none
             var flag = true;
-            while ((this.activeLayout === 'Simplified') && (flag) && (item.displayOptions === DisplayMode.None)) {
+            while (flag &&
+                (((this.activeLayout === 'Simplified') && !(item.displayOptions & (DisplayMode.Simplified | DisplayMode.Overflow))) ||
+                    ((this.activeLayout === 'Classic') && !(item.displayOptions & DisplayMode.Classic)))) {
                 i++;
                 if (i < itemList.length) {
                     item = itemList[parseInt(i.toString(), 10)];
@@ -4094,30 +4906,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             else {
                 itemEle.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
             }
-            switch (item.type) {
-                case 'Button':
-                    this.ribbonButtonModule.createButton(item, itemEle);
-                    break;
-                case 'DropDown':
-                    this.ribbonDropDownModule.createDropDown(item, itemEle);
-                    break;
-                case 'SplitButton':
-                    this.ribbonSplitButtonModule.createSplitButton(item, itemEle);
-                    break;
-                case 'CheckBox':
-                    this.ribbonCheckBoxModule.createCheckBox(item, itemEle);
-                    break;
-                case 'ColorPicker':
-                    this.ribbonColorPickerModule.createColorPicker(item, itemEle);
-                    break;
-                case 'ComboBox':
-                    this.ribbonComboBoxModule.createComboBox(item, itemEle);
-                    break;
-                case 'Template':
-                    this.createTemplateContent(item, itemEle);
-                    break;
-            }
-            if ((this.activeLayout === 'Simplified') && (item.displayOptions === DisplayMode.Overflow)) {
+            this.createRibbonItem(item, itemEle);
+            if ((this.activeLayout === 'Simplified') && ((item.displayOptions === DisplayMode.Overflow) || (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)))) {
                 this.createOverflowPopup(item, tabIndex, isGroupOF, groupId, groupHeader, itemEle, groupContainer);
                 if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
                     this.updatePopupItems(item, itemEle, isGroupOF, true);
@@ -4152,10 +4942,11 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.createTemplateContent = function (item, itemElement) {
         var itemEle = this.createElement('div', {
-            className: item.disabled ? DISABLED_CSS + SPACE + item.cssClass : item.cssClass,
+            className: item.cssClass ? (RIBBON_TEMPLATE + SPACE + item.cssClass) : RIBBON_TEMPLATE,
             id: item.id
         });
         if (item.disabled) {
+            itemEle.classList.add(DISABLED_CSS);
             itemEle.setAttribute('disabled', '');
         }
         itemElement.appendChild(itemEle);
@@ -4223,13 +5014,15 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         var item = _e[_d];
                         var ele = null;
                         if (this.activeLayout === RibbonLayout.Classic) {
-                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            if (item.displayOptions & DisplayMode.Classic) {
+                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            }
                         }
                         else {
-                            //Checks for Simplified and Auto options (Auto = simplified + popup)
+                            //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
                             ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id) : null;
                             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-                            if (!ele && (item.displayOptions !== DisplayMode.None)) {
+                            if (!ele) {
                                 ele = dropdown.target.querySelector('#' + item.id);
                                 if (item.type === 'DropDown') {
                                     this.updatePopupItems(item, dropdown.target, group.enableGroupOverflow, true);
@@ -4285,15 +5078,17 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                         var item = _e[_d];
                         var ele = void 0;
                         if (this.activeLayout === RibbonLayout.Classic) {
-                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) :
-                                contentEle.querySelector('#' + item.id);
+                            if (item.displayOptions & DisplayMode.Classic) {
+                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) :
+                                    contentEle.querySelector('#' + item.id);
+                            }
                         }
                         else {
-                            //Checks for Simplified and Auto options (Auto = simplified + popup)
+                            //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
                             ele = (item.displayOptions & DisplayMode.Simplified) ?
                                 contentEle.querySelector('#' + item.id) : null;
                             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-                            if (!ele && (item.displayOptions !== DisplayMode.None)) {
+                            if (!ele) {
                                 ele = dropdown ? dropdown.target.querySelector('#' + item.id) : null;
                             }
                         }
@@ -4317,7 +5112,10 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
     };
     Ribbon.prototype.destroyFunction = function (item, ele) {
         var moduleName = this.getItemModuleName(item);
-        if (moduleName !== 'template') {
+        if (moduleName === 'colorpicker') {
+            this.ribbonColorPickerModule.unwireColorPickerEvents(ele);
+        }
+        else if (moduleName !== 'template') {
             destroyControl(ele, moduleName);
         }
         if (item.ribbonTooltipSettings) {
@@ -4712,16 +5510,382 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
             this.refreshLayout();
         }
     };
+    /**
+     * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
+     *
+     * @param {RibbonTabModel} tab - Gets the ribbon tab model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateTab = function (tab) {
+        var tabId = tab.id;
+        var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
+        if (index === -1) {
+            return;
+        }
+        var contentEle = this.tabObj.items[parseInt(index.toString(), 10)].content;
+        var groups = this.tabs[parseInt(index.toString(), 10)].groups;
+        var tabEle = this.tabObj.element;
+        if (groups && (contentEle.innerHTML !== '')) {
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (tab.cssClass) {
+                if (this.tabs[parseInt(index.toString(), 10)].cssClass) {
+                    contentEle.classList.remove(this.tabs[parseInt(index.toString(), 10)].cssClass);
+                    tabEle.querySelector('.e-active').classList.remove(this.tabs[parseInt(index.toString(), 10)].cssClass);
+                }
+            }
+            // Check whether group is passed by the user, and if it is, then remove the old values.
+            if (tab.groups) {
+                for (var _i = 0, groups_2 = groups; _i < groups_2.length; _i++) {
+                    var group = groups_2[_i];
+                    var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
+                    for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
+                        var collection = _b[_a];
+                        for (var _c = 0, _d = collection.items; _c < _d.length; _c++) {
+                            var item = _d[_c];
+                            var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            if (ele) {
+                                this.destroyFunction(item, ele);
+                            }
+                        }
+                    }
+                    if (dropdownElement) {
+                        this.ribbonDropDownModule.removeOverFlowDropDown(dropdownElement);
+                    }
+                }
+                var groupElements = contentEle.querySelectorAll('.e-ribbon-group');
+                // eslint-disable-next-line @typescript-eslint/tslint/config
+                groupElements.forEach(function (groupEle) { groupEle.remove(); });
+            }
+        }
+        if (index === this.selectedTab) {
+            this.isAddRemove = true;
+        }
+        var ribbonTab = this.tabs[parseInt(index.toString(), 10)];
+        ribbonTab.setProperties(tab, true);
+        this.setProperties({ groups: this.checkID(ribbonTab.groups, 'group', ribbonTab.id) }, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML === '') {
+            // Check whether group is passed by the user and sets the updated values.
+            if (tab.groups) {
+                var elements = this.createGroups(ribbonTab.groups, index);
+                append(elements, contentEle);
+            }
+            if (this.selectedTab === index) {
+                this.refreshLayout();
+            }
+            // Check whether cssClass is passed by the user and sets the updated values.
+            if (tab.cssClass) {
+                contentEle.classList.add(ribbonTab.cssClass);
+                tabEle.querySelector('.e-active').classList.add(ribbonTab.cssClass);
+            }
+            // Check whether header is passed by the user and sets the updated values.
+            if (tab.header) {
+                tabEle.querySelector('#' + tabId + HEADER_ID).innerText = ribbonTab.header;
+            }
+        }
+    };
+    /**
+     * group - Gets the ribbon group to be updated. The id of the group is a required property. Other properties are optional.
+     *
+     * @param {RibbonGroupModel} group - Gets the ribbon group model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateGroup = function (group) {
+        var groupId = group.id;
+        var itemProp = getGroup(this.tabs, groupId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var groupEle = contentEle.querySelector('#' + groupId);
+        var groupContainer = groupEle.querySelector('#' + group.id + CONTAINER_ID);
+        var dropdownElement;
+        var dropdown;
+        if (contentEle.innerHTML !== '') {
+            if (itemProp.group.showLauncherIcon) {
+                this.removeLauncherIcon(itemProp.group.id, null, contentEle);
+            }
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                dropdownElement = itemProp.group.enableGroupOverflow ?
+                    contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID) : null;
+                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+            }
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (group.cssClass) {
+                if (itemProp.group.cssClass) {
+                    groupEle.classList.remove(itemProp.group.cssClass);
+                    if (groupContainer) {
+                        groupContainer.classList.remove(itemProp.group.cssClass);
+                    }
+                }
+            }
+            // Check whether collections or orientation is passed by the user, and if it is, then remove the old values.
+            if (group.collections || group.orientation) {
+                if (itemProp.group.collections || itemProp.group.orientation) {
+                    for (var _i = 0, _a = itemProp.group.collections; _i < _a.length; _i++) {
+                        var collection = _a[_i];
+                        for (var _b = 0, _c = collection.items; _b < _c.length; _b++) {
+                            var item = _c[_b];
+                            this.removeItemElement(contentEle, item, dropdown);
+                        }
+                    }
+                    var collectionElements = groupEle.querySelectorAll('.e-ribbon-collection');
+                    // eslint-disable-next-line @typescript-eslint/tslint/config
+                    collectionElements.forEach(function (collectionEle) { collectionEle.remove(); });
+                    if (group.orientation) {
+                        var groupContent = groupContainer.querySelector('.e-ribbon-group-content');
+                        var removeCss = groupContent.classList.value.match(/(e-ribbon-[column|row]+)/g);
+                        if (removeCss) {
+                            removeClass([groupContent], removeCss);
+                        }
+                    }
+                }
+            }
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                if (itemProp.group.enableGroupOverflow) {
+                    if (dropdown.target.childElementCount === 0) {
+                        this.removeOverflowButton(dropdown);
+                    }
+                }
+                else {
+                    var ofGroupContainer = dropdown.target.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+                    if (ofGroupContainer && ofGroupContainer.childElementCount === 1) {
+                        ofGroupContainer.remove();
+                    }
+                    var ofTabContainer = dropdown.target.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                    if (ofTabContainer && ofTabContainer.childElementCount === 0) {
+                        ofTabContainer.remove();
+                    }
+                }
+            }
+        }
+        var ribbongroup = itemProp.group;
+        ribbongroup.setProperties(group, true);
+        ribbongroup.setProperties({ collections: this.checkID(ribbongroup.collections, 'collection', ribbongroup.id) }, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML !== '') {
+            // Check whether showLauncherIcon or orientation is passed by the user and sets the updated values.
+            if (group.showLauncherIcon) {
+                this.createLauncherIcon(ribbongroup.id, groupContainer);
+            }
+            // Check whether collections or orientation is passed by the user and sets the updated values.
+            if (group.collections || group.orientation) {
+                var groupContent = groupContainer.querySelector('.e-ribbon-group-content');
+                groupContent.classList.add(((ribbongroup.orientation === 'Column') || (this.activeLayout === 'Simplified')) ? RIBBON_COLUMN : RIBBON_ROW);
+                var elements = this.createCollection(ribbongroup.collections, ribbongroup.orientation, ribbongroup.id, ribbongroup.header, ribbongroup.enableGroupOverflow, itemProp.tabIndex, groupContainer);
+                append(elements, groupContent);
+            }
+            if (this.selectedTab === itemProp.tabIndex) {
+                this.refreshLayout();
+            }
+            // Check whether cssClass is passed by the user and sets the updated values.
+            if (group.cssClass) {
+                groupEle.classList.add(ribbongroup.cssClass);
+                if (groupContainer) {
+                    groupContainer.classList.add(ribbongroup.cssClass);
+                }
+            }
+            // Check whether header is passed by the user and sets the updated values.
+            if (group.header) {
+                if (this.activeLayout === RibbonLayout.Simplified && !group.enableGroupOverflow) {
+                    var overflowHeader = dropdown.target.querySelector('#' + group.id + HEADER_ID);
+                    if (overflowHeader) {
+                        overflowHeader.innerText = ribbongroup.header;
+                    }
+                }
+                else if (this.activeLayout === RibbonLayout.Classic && !ribbongroup.isCollapsed) {
+                    groupEle.querySelector('.e-ribbon-group-header').innerText = ribbongroup.header;
+                }
+                else if (this.activeLayout === RibbonLayout.Classic && ribbongroup.isCollapsed) {
+                    var overflowEle = groupEle.querySelector('#' + ribbongroup.id + OVERFLOW_ID + DROPDOWN_ID);
+                    // need to set instance for dropdown
+                    var dropDownBtn = getInstance(overflowEle, DropDownButton);
+                    var overflowHeader = dropDownBtn.target.querySelector('#' + group.id + HEADER_ID);
+                    if (overflowHeader) {
+                        overflowHeader.innerText = ribbongroup.header;
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * collection - Gets the ribbon collection to be updated. The id of the collection is a required property. Other properties are optional.
+     *
+     * @param {RibbonCollectionModel} collection - Gets the ribbon collection model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateCollection = function (collection) {
+        var collectionId = collection.id;
+        var itemProp = getCollection(this.tabs, collectionId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var collectionEle = contentEle.querySelector('#' + collectionId);
+        if (contentEle.innerHTML !== '') {
+            var dropdownElement = void 0;
+            var dropdown = void 0;
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                dropdownElement = itemProp.group.enableGroupOverflow ?
+                    contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID) : null;
+                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+            }
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (collection.cssClass) {
+                if (itemProp.collection.cssClass) {
+                    collectionEle.classList.remove(itemProp.collection.cssClass);
+                }
+            }
+            if (collection.items) {
+                if (itemProp.collection.items) {
+                    for (var _i = 0, _a = itemProp.collection.items; _i < _a.length; _i++) {
+                        var item = _a[_i];
+                        this.removeItemElement(contentEle, item, dropdown);
+                    }
+                }
+            }
+        }
+        var ribboncollection = itemProp.collection;
+        ribboncollection.setProperties(collection, true);
+        ribboncollection.setProperties({ items: this.checkID(ribboncollection.items, 'item', ribboncollection.id) }, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML !== '') {
+            if (collection.items) {
+                var groupContainer = contentEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+                var elements = this.createItems(ribboncollection.items, itemProp.group.orientation, itemProp.group.id, itemProp.group.header, itemProp.group.enableGroupOverflow, itemProp.tabIndex, groupContainer);
+                append(elements, collectionEle);
+            }
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.refreshLayout();
+        }
+        // Check whether cssClass is passed by the user and sets the updated values.
+        if (collection.cssClass) {
+            collectionEle.classList.add(ribboncollection.cssClass);
+        }
+    };
+    /**
+     * item - Gets the ribbon item to be updated. The id of the item is a required property. Other properties are optional.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateItem = function (item) {
+        var itemId = item.id;
+        var itemProp = getItem(this.tabs, itemId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var groupEle = contentEle.querySelector('#' + itemProp.group.id);
+        var groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+        var itemContainer = null;
+        var itemEle = null;
+        var dropdownElement;
+        var dropdown;
+        if (contentEle.innerHTML !== '') {
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                dropdownElement = itemProp.group.enableGroupOverflow ?
+                    contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID) : null;
+                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+            }
+            if (this.activeLayout === RibbonLayout.Simplified && itemProp.item.displayOptions === DisplayMode.Overflow) {
+                itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
+                itemEle = dropdown.target.querySelector('#' + itemId);
+                if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
+                    var collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
+                    if (collectionEle) {
+                        collectionEle.appendChild(itemContainer);
+                    }
+                }
+            }
+            else {
+                itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
+                itemEle = contentEle.querySelector('#' + itemId);
+                if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
+                    this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
+                    if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton)) {
+                        this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                    }
+                }
+            }
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (item.cssClass) {
+                if (itemProp.item.cssClass) {
+                    itemContainer.classList.remove(itemProp.item.cssClass);
+                }
+            }
+            this.destroyFunction(itemProp.item, itemEle);
+            itemEle.remove();
+            var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+            if (removeCss) {
+                removeClass([itemContainer], removeCss);
+            }
+        }
+        var ribbonItem = itemProp.item;
+        ribbonItem.setProperties(item, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML !== '') {
+            if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
+                itemContainer = groupContainer.querySelector('#' + itemId + CONTAINER_ID);
+            }
+            else {
+                itemContainer = dropdown.target.querySelector('#' + itemId + CONTAINER_ID);
+            }
+            // To avoid undefined items condition is added
+            if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
+                itemContainer.classList.add(RIBBON_TOOLTIP_TARGET);
+                this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
+            }
+            var size = ribbonItem.activeSize;
+            if (this.activeLayout === 'Simplified') {
+                size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
+                    (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                ribbonItem.setProperties({ activeSize: size }, true);
+            }
+            if (size & RibbonItemSize.Large) {
+                itemContainer.classList.add(RIBBON_LARGE_ITEM, RIBBON_CONTENT_HEIGHT);
+            }
+            else {
+                itemContainer.classList.add((size & RibbonItemSize.Medium) ? RIBBON_MEDIUM_ITEM : RIBBON_SMALL_ITEM);
+            }
+            this.createRibbonItem(ribbonItem, itemContainer);
+            if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                if (dropdown.target.childElementCount === 0) {
+                    this.removeOverflowButton(dropdown);
+                }
+            }
+            if (this.selectedTab === itemProp.tabIndex) {
+                this.refreshLayout();
+            }
+            if (item.cssClass) {
+                itemContainer.classList.add(ribbonItem.cssClass);
+            }
+            this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
+        }
+    };
     Ribbon.prototype.removeItemElement = function (contentEle, item, dropdown) {
         var ele = null;
         if (this.activeLayout === RibbonLayout.Classic) {
-            ele = contentEle.querySelector('#' + item.id);
+            ele = (item.displayOptions & DisplayMode.Classic) ? contentEle.querySelector('#' + item.id) : null;
         }
         else {
-            //Checks for Simplified and Auto options (Auto = simplified + popup)
+            //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
             ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id) : null;
             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-            if (!ele && (item.displayOptions !== DisplayMode.None)) {
+            if (!ele) {
                 ele = dropdown.target.querySelector('#' + item.id);
             }
         }
@@ -4772,6 +5936,8 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(window, 'resize', this.resizeHandler);
     };
     Ribbon.prototype.destroy = function () {
+        this.keyboardModuleRibbon.destroy();
+        this.keyboardModuleRibbon = null;
         destroyTooltip(this.element);
         this.destroyTabItems(this.tabs);
         this.removeExpandCollapse();
@@ -4823,6 +5989,9 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                 case 'isMinimized':
                     this.element.classList.toggle(RIBBON_MINIMIZE, this.isMinimized);
                     this.tabObj.element.querySelector('.e-content').style.display = this.isMinimized ? 'none' : 'block';
+                    if (!this.isMinimized) {
+                        this.refreshLayout();
+                    }
                     break;
                 case 'locale':
                     this.updateCommonProperty({ locale: this.locale });
@@ -4847,7 +6016,7 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                                 if (group.showLauncherIcon) {
                                     var className = RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss || RIBBON_LAUNCHER_ICON);
                                     if (group.isCollapsed) {
-                                        var element = tabContent.querySelector('.' + RIBBON_GROUP_OVERFLOW_DDB);
+                                        var element = tabContent.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID);
                                         var dropdown = getComponent(element, DropDownButton);
                                         var launcherIconEle = dropdown.target.querySelector('#' + group.id + LAUNCHER_ID);
                                         launcherIconEle.className = className;
@@ -4872,19 +6041,26 @@ var Ribbon = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
+                    this.refreshLayout();
                     break;
                 case 'fileMenu':
                     if (this.ribbonFileMenuModule) {
                         this.ribbonFileMenuModule.updateFileMenu(this.fileMenu);
                     }
+                    var toolbarEle = this.tabObj['tbObj'];
+                    toolbarEle.refreshOverflow();
                     break;
                 case 'helpPaneTemplate':
                     if (this.ribbonTempEle) {
                         remove(this.ribbonTempEle);
+                        this.ribbonTempEle = null;
+                        this.tabObj.element.style.setProperty(RIBBON_HELP_PANE_TEMPLATE_WIDTH, '0px');
                     }
                     if (this.helpPaneTemplate) {
                         this.createHelpPaneTemplate();
                     }
+                    var toolbar_1 = this.tabObj['tbObj'];
+                    toolbar_1.refreshOverflow();
                     break;
             }
         }
@@ -5270,5 +6446,5 @@ var RibbonFileMenu = /** @__PURE__ @class */ (function () {
 // export all modules from current location
 // example: export * from './module'
 
-export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_FILE_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, RibbonTooltip, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonFileMenu };
+export { Ribbon, RibbonLayout, ItemOrientation, RibbonItemSize, DisplayMode, RibbonItemType, ITEM_VERTICAL_CENTER, EXPAND_COLLAPSE_ICON, OVERFLOW_ICON, VERTICAL_DDB, DISABLED_CSS, RTL_CSS, RIBBON_HOVER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, HORIZONTAL_SCROLLBAR, HIDE_CSS, RIBBON_TAB, RIBBON_TAB_ACTIVE, RIBBON_TAB_ITEM, RIBBON_COLLAPSE_BUTTON, RIBBON_EXPAND_BUTTON, RIBBON_COLLAPSIBLE, RIBBON_OVERALL_OF_BUTTON, RIBBON_GROUP_OF_BUTTON, RIBBON_OVERFLOW_TARGET, RIBBON_OVERFLOW, TAB_CONTENT, RIBBON_MINIMIZE, RIBBON_GROUP, RIBBON_GROUP_CONTAINER, RIBBON_OF_TAB_CONTAINER, RIBBON_OF_GROUP_CONTAINER, RIBBON_GROUP_CONTENT, RIBBON_GROUP_HEADER, RIBBON_OVERFLOW_HEADER, RIBBON_GROUP_OVERFLOW, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_LAUNCHER, RIBBON_LAUNCHER_ICON_ELE, RIBBON_LAUNCHER_ICON, RIBBON_COLLECTION, RIBBON_ITEM, RIBBON_ROW, RIBBON_COLUMN, RIBBON_LARGE_ITEM, RIBBON_MEDIUM_ITEM, RIBBON_SMALL_ITEM, RIBBON_CONTENT_HEIGHT, DROPDOWNBUTTON, DROPDOWNBUTTON_HIDE, RIBBON_TEMPLATE, RIBBON_HELP_TEMPLATE, RIBBON_TOOLTIP, RIBBON_TOOLTIP_TARGET, RIBBON_TOOLTIP_TITLE, RIBBON_TOOLTIP_CONTENT, RIBBON_TOOLTIP_ICON, RIBBON_TOOLTIP_CONTAINER, RIBBON_TEXT_CONTAINER, RIBBON_SIMPLIFIED_MODE, TAB_ID, GROUP_ID, COLLECTION_ID, ITEM_ID, COLLAPSE_BUTTON_ID, OVRLOF_BUTTON_ID, GROUPOF_BUTTON_ID, HEADER_ID, LAUNCHER_ID, CONTENT_ID, CONTAINER_ID, OVERFLOW_ID, DROPDOWN_ID, RIBBON_FILE_MENU_ID, RIBBON_FILE_MENU_LIST, RIBBON_HELP_PANE_TEMPLATE_ID, RIBBON_FILE_MENU_WIDTH, RIBBON_HELP_PANE_TEMPLATE_WIDTH, getIndex, getTemplateFunction, getItem, getCollection, getGroup, destroyControl, updateCommonProperty, updateControlDisabled, getItemElement, isTooltipPresent, setToolTipContent, createTooltip, destroyTooltip, updateTooltipProp, RibbonTab, RibbonGroup, RibbonCollection, RibbonItem, RibbonButtonSettings, RibbonCheckBoxSettings, RibbonColorPickerSettings, RibbonComboBoxSettings, RibbonDropDownSettings, RibbonSplitButtonSettings, FileMenuSettings, RibbonTooltip, RibbonButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonDropDown, RibbonSplitButton, RibbonFileMenu };
 //# sourceMappingURL=ej2-ribbon.es5.js.map