@syncfusion/ej2-ribbon 21.2.3 → 22.1.34

package/dist/es6/ej2-ribbon.es2015.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.
@@ -975,6 +975,7 @@ class RibbonButton {
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
         const buttonEle = itemEle.querySelector('#' + item.id);
+        buttonEle.setAttribute('data-control', item.type.toString());
         const buttonObj = getComponent(buttonEle, Button);
         buttonObj.setProperties({ cssClass: buttonObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         buttonEle.onclick = (e) => {
@@ -1118,6 +1119,7 @@ class RibbonCheckBox {
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
         const inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         const checkBoxObj = getComponent(inputEle, CheckBox);
         checkBoxObj.cssClass = checkBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         checkBoxObj.dataBind();
@@ -1271,6 +1273,7 @@ class RibbonColorPicker {
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
         const colorPickerEle = itemEle.querySelector('#' + item.id);
+        colorPickerEle.setAttribute('data-control', item.type.toString());
         const 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.
@@ -1460,10 +1463,11 @@ class RibbonComboBox {
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
         const inputEle = itemEle.querySelector('#' + item.id);
+        inputEle.setAttribute('data-control', item.type.toString());
         const comboBoxObj = getComponent(inputEle, ComboBox);
         comboBoxObj.setProperties({ cssClass: comboBoxObj.cssClass + SPACE + RIBBON_POPUP_CONTROL });
         comboBoxObj.close = (e) => {
-            let target = e.event ? e.event.target : null;
+            const target = e.event ? e.event.target : null;
             if (item.comboBoxSettings.close) {
                 item.comboBoxSettings.close.call(this, e);
             }
@@ -1629,6 +1633,7 @@ class RibbonDropDown {
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
         const dropdownElement = itemEle.querySelector('#' + item.id);
+        dropdownElement.setAttribute('data-control', item.type.toString());
         const dropdown = getComponent(dropdownElement, DropDownButton);
         dropdown.cssClass = dropdown.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         dropdown.dataBind();
@@ -1685,10 +1690,12 @@ class RibbonDropDown {
      * @returns {void}
      * @hidden
      */
-    createOverFlowDropDown(id, name, iconCss, groupEle, overflowEle) {
+    createOverFlowDropDown(id, name, iconCss, groupEle, overflowEle, enableRtl) {
+        this.enableRtl = enableRtl;
         const buttonEle = this.parent.createElement('button', {
             id: id + OVERFLOW_ID + DROPDOWN_ID
         });
+        groupEle.setAttribute('tabindex', '0');
         overflowEle.appendChild(buttonEle);
         const dropdown = new DropDownButton({
             iconCss: iconCss,
@@ -1704,8 +1711,155 @@ class RibbonDropDown {
             }
         }, buttonEle);
         createTooltip(groupEle, this.parent);
+        buttonEle.onclick = buttonEle.onkeydown = () => { this.itemIndex = 0; };
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        groupEle.onkeydown = (e) => { this.keyActionHandler(e, groupEle), this; };
         return dropdown;
     }
+    keyActionHandler(e, target) {
+        const items = target.querySelectorAll('.e-control');
+        const comboBoxElements = target.querySelectorAll('.e-combobox');
+        let comboBoxEle;
+        if (comboBoxElements) {
+            for (let 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 (let 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);
+            }
+        }
+    }
+    handleNavigation(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')) {
+                let 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')) {
+                let 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--;
+                }
+            }
+        }
+    }
+    focusLauncherIcon(e, items) {
+        const groupContainer = items[parseInt(this.itemIndex.toString(), 10)].closest('.e-ribbon-group-container');
+        let 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;
+        }
+    }
+    updateItemIndex(e, items, enableRtl) {
+        let 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 {
+                    let launcherIcon = false;
+                    launcherIcon = this.focusLauncherIcon(e, items);
+                    if (launcherIcon) {
+                        break;
+                    }
+                    this.itemIndex = 0;
+                }
+            }
+            else {
+                if (this.itemIndex > 0) {
+                    this.itemIndex--;
+                }
+                else {
+                    let 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.
      *
@@ -1904,6 +2058,13 @@ class RibbonSplitButton {
                 }
             }
         }, buttonEle);
+        const dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
+        dropdownEle.onkeydown = (e) => {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
         this.setContent(item, splitbutton);
         const wrapper = splitbutton['wrapper'];
         EventHandler.add(wrapper, 'mouseenter', () => { wrapper.classList.add(RIBBON_HOVER); }, this);
@@ -1920,9 +2081,26 @@ class RibbonSplitButton {
      */
     addOverFlowEvents(item, itemEle, overflowButton) {
         const splitButtonEle = itemEle.querySelector('#' + item.id);
+        splitButtonEle.setAttribute('data-control', item.type.toString());
         const splitbutton = getComponent(splitButtonEle, SplitButton);
         splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
         splitbutton.dataBind();
+        const dropdownEle = splitButtonEle.parentElement.querySelector('.e-dropdown-btn');
+        const ddbId = dropdownEle.getAttribute('id');
+        const popupEle = document.querySelector('#' + ddbId + '-popup');
+        dropdownEle.onkeydown = (e) => {
+            if (e.key === 'Enter') {
+                e.stopImmediatePropagation();
+                dropdownEle.click();
+            }
+        };
+        popupEle.onkeydown = (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                splitbutton['wrapper'].classList.remove('e-ribbon-open');
+                popupEle.querySelector('.e-focused').click();
+            }
+        };
         let target;
         splitbutton.beforeClose = (e) => {
             if (item.splitButtonSettings.beforeClose) {
@@ -2093,7 +2271,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
  */
@@ -2254,16 +2432,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)
         let 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) {
             const dropdown = itemProp.group.enableGroupOverflow ?
                 getComponent(contentEle.querySelector('#' + itemProp.group.id + GROUPOF_BUTTON_ID), DropDownButton)
                 : parent.overflowDDB;
@@ -2407,6 +2590,12 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         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.
@@ -2448,12 +2637,239 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
         }
         this.createHelpPaneTemplate();
+        const toolbar = this.tabObj['tbObj'];
+        toolbar.refreshOverflow();
         createTooltip(this.element, this);
         this.wireEvents();
+        this.wireKeyboardEvent();
+        this.currentControlIndex = 0;
     }
     wireEvents() {
         EventHandler.add(window, 'resize', this.resizeHandler, this);
     }
+    wireKeyboardEvent() {
+        this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    }
+    keyActionHandler(e) {
+        if (((e.key === 'Tab') && (!(e.target.classList.contains('e-tab-wrap')) && !(e.target.classList.contains('e-combobox'))))) {
+            e.preventDefault();
+        }
+        const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
+        const ribbonControls = activeContent.querySelectorAll('.e-control');
+        const comboBoxElements = activeContent.querySelectorAll('.e-combobox');
+        let comboBoxEle;
+        if (comboBoxElements) {
+            for (let 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 (let 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) {
+            let 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;
+                    }
+            }
+        }
+    }
+    handleNavigation(e, enableRtl, ribbonControls) {
+        let groupContainer;
+        let 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 {
+                    const prevGroupContainer = ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].closest('.' + RIBBON_GROUP_CONTAINER);
+                    if (prevGroupContainer) {
+                        prevGroupId = prevGroupContainer.getAttribute('id');
+                    }
+                    this.currentControlIndex--;
+                }
+                let 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) {
+                        let launcherIconEle;
+                        if (groupContainer) {
+                            launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+                        }
+                        if (launcherIconEle) {
+                            const items = groupContainer.querySelectorAll('.e-ribbon-item');
+                            items[items.length - 1].querySelector('.e-control').classList.add('e-ribbon-last-item');
+                        }
+                    }
+                    else {
+                        if (groupContainer) {
+                            const groupContainerId = groupContainer.getAttribute('id');
+                            if (prevGroupId !== groupContainerId) {
+                                const 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') {
+                const 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);
+            const 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;
+                let 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 {
+                const 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;
+                    let 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();
+            }
+        }
+    }
     resizeHandler() {
         const activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + CONTENT_ID);
         this.checkOverflow(this.selectedTab, activeContent);
@@ -2655,7 +3071,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 for (let k = collection.items.length; ((k >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); k--) {
                     const item = collection.items[k - 1];
                     const 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) {
@@ -2725,7 +3142,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     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)) {
                         const width = parseInt(itemContainer.getAttribute('data-simplified-width'), 10);
                         if (!isClear && (tabContent.offsetWidth < width)) {
                             flag = false;
@@ -2815,7 +3233,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             overflowButton = this.overflowDDB;
         }
-        this.addOverflowEvents(item, itemEle, overflowButton);
+        if (itemEle !== null) {
+            this.addOverflowEvents(item, itemEle, overflowButton);
+        }
     }
     addOverflowEvents(item, itemEle, overflowButton) {
         switch (item.type) {
@@ -2864,6 +3284,50 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         return isBreak;
     }
+    checkValidCollectionLength(collections) {
+        let count = 0;
+        for (let i = 0; i < collections.length; i++) {
+            const items = collections[parseInt(i.toString(), 10)].items;
+            for (let 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;
+    }
+    checkClassicCollection(collections, n, isIncrement) {
+        const items = collections[parseInt(n.toString(), 10)].items;
+        for (let 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);
+        }
+    }
+    checkClassicItem(items, n, isIncrement) {
+        const 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);
+        }
+    }
     checkLargeToMedium(tabIndex, tab, groupIndex, tabContent, activeContent, shouldSkip = false) {
         const group = tab.groups[parseInt(groupIndex.toString(), 10)];
         if (group.isCollapsed && !shouldSkip) {
@@ -2895,6 +3359,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 createShrinkEle(collection.id, firstItem, start, end);
             for (let i = start; i <= end; i++) {
                 const item = collection.items[parseInt(i.toString(), 10)];
+                if (!(item.displayOptions & DisplayMode.Classic)) {
+                    continue;
+                }
                 const ele = activeContent.querySelector('#' + item.id + CONTAINER_ID);
                 shrinkEle.appendChild(ele);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
@@ -2919,45 +3386,65 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (orientation === ItemOrientation.Column) {
             for (let 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);
+                let 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)])) {
+                        let 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)) {
                 const collection = group.collections[0];
                 for (let 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);
+                    let 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)])) {
+                            let 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;
                         }
                     }
                 }
@@ -2976,28 +3463,42 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const canReduceItem = (item) => {
             return (item.allowedSizes & RibbonItemSize.Small) && (item.activeSize === RibbonItemSize.Medium);
         };
-        const reduceItemsToSmall = (collectionIndex, start, end) => {
+        const reduceItemsToSmall = (collectionIndex, start, end, middle = null) => {
             const collection = this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections[parseInt(collectionIndex.toString(), 10)];
-            for (let i = start; i <= end; i++) {
+            const reduce = (i) => {
                 const item = collection.items[parseInt(i.toString(), 10)];
-                const ele = activeContent.querySelector('#' + item.id);
-                item.setProperties({ activeSize: RibbonItemSize.Small }, true);
-                this.setItemSize(ele, item);
+                if (item.displayOptions & DisplayMode.Classic) {
+                    const ele = activeContent.querySelector('#' + item.id);
+                    item.setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    this.setItemSize(ele, item);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
         };
-        const reduceCollectionsToSmall = (index, start, end) => {
+        const reduceCollectionsToSmall = (index, start, end, middle = null) => {
             const 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 (let i = start; i <= end; i++) {
+            const reduce = (i) => {
                 const collection = group.collections[parseInt(i.toString(), 10)];
-                const ele = activeContent.querySelector('#' + collection.items[0].id);
-                collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
-                this.setItemSize(ele, collection.items[0]);
+                if (collection.items[0].displayOptions & DisplayMode.Classic) {
+                    const ele = activeContent.querySelector('#' + collection.items[0].id);
+                    collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    this.setItemSize(ele, collection.items[0]);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
         };
         const setWidth = (id) => {
             if (!shouldSkip) {
@@ -3011,13 +3512,14 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const start = parseInt(shrinkColumns[parseInt(k.toString(), 10)].getAttribute('data-start'), 10);
                     const end = parseInt(shrinkColumns[parseInt(k.toString(), 10)].getAttribute('data-end'), 10);
                     //only 2 or 3 itmes alone can be present in shrinked column
+                    const 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;
@@ -3027,16 +3529,22 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
             for (let k = (group.collections.length - 1); k >= 0; k--) {
                 const collection = group.collections[parseInt(k.toString(), 10)];
+                const classicItems = [];
+                for (let 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;
@@ -3046,22 +3554,24 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             }
         }
         else {
-            if (group.collections.length === 1) {
+            if (this.checkValidCollectionLength(group.collections)) {
                 if (shrinkColumns.length > 0) {
                     for (let k = (shrinkColumns.length - 1); k >= 0; k--) {
                         const shrinkColumn = shrinkColumns[parseInt(k.toString(), 10)];
                         const start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                         const end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                         //only 2 or 3 itmes alone can be present in shrinked column
+                        const collection = group.collections[0];
+                        const 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;
@@ -3074,6 +3584,10 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 for (let k = (group.collections.length - 1); k >= 0; k--) {
                     const collection = group.collections[parseInt(k.toString(), 10)];
                     for (let l = (collection.items.length - 1); l >= 0; l--) {
+                        l = this.checkClassicItem(collection.items, l, false);
+                        if (l < 0) {
+                            continue;
+                        }
                         const item = collection.items[parseInt(l.toString(), 10)];
                         if (canReduceItem(item)) {
                             setWidth(item.id);
@@ -3106,20 +3620,21 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         const canExpandItem = (item) => {
             return (item.allowedSizes & RibbonItemSize.Medium) && (item.activeSize === RibbonItemSize.Small);
         };
-        const expandItemsToMedium = (collectionIndex, start, end, parentEle) => {
+        const expandItemToMedium = (collectionIndex, index, parentEle) => {
             const collection = this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections[parseInt(collectionIndex.toString(), 10)];
-            for (let i = start; i <= end; i++) {
-                const item = collection.items[parseInt(i.toString(), 10)];
+            const item = collection.items[parseInt(index.toString(), 10)];
+            if (item.displayOptions & DisplayMode.Classic) {
                 const ele = parentEle.id === item.id ? parentEle : parentEle.querySelector('#' + item.id);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                 this.setItemSize(ele, item);
             }
         };
-        const expandCollectionsToMedium = (start, end) => {
+        const expandCollectionsToMedium = (i) => {
             const collections = this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections;
-            for (let i = start; i <= end; i++) {
+            const item = collections[parseInt(i.toString(), 10)].items[0];
+            if (item.displayOptions & DisplayMode.Classic) {
                 const ele = 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, collections[parseInt(i.toString(), 10)].items[0]);
@@ -3127,17 +3642,21 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         };
         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 (let k = 0; k < group.collections.length; k++) {
                     const collection = group.collections[parseInt(k.toString(), 10)];
                     for (let l = 0; l < collection.items.length; l++) {
+                        l = this.checkClassicItem(collection.items, l, true);
+                        if (l === collection.items.length) {
+                            continue;
+                        }
                         const item = collection.items[parseInt(l.toString(), 10)];
                         if (canExpandItem(item)) {
                             const itemEle = activeContent.querySelector('#' + item.id);
                             const valString = itemEle.getAttribute('data-medium-width');
                             const 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');
                                 }
@@ -3158,8 +3677,18 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const itemEle = activeContent.querySelector('#' + collection.id);
                     const valString = itemEle.getAttribute('data-medium-width');
                     const value = valString ? parseInt(valString, 10) : null;
-                    if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
-                        expandItemsToMedium(k, 0, (collection.items.length === 2) ? 1 : 2, itemEle);
+                    const classicItems = [];
+                    for (let 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');
                         }
@@ -3179,10 +3708,22 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     const start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                     const end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                     if (orientation === ItemOrientation.Row) {
-                        expandItemsToMedium(0, start, end, shrinkColumn);
+                        const collection = group.collections[0];
+                        const 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);
+                        const 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');
@@ -3203,32 +3744,46 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         if (shrinkColumns.length === 0) {
             return false;
         }
-        const expandItemsToLarge = (start, end, parentEle) => {
+        const expandItemsToLarge = (start, end, parentEle, middle) => {
             const items = this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].collections[0].items;
-            for (let i = end; i >= start; i--) {
+            const reduce = (i) => {
                 const item = items[parseInt(i.toString(), 10)];
-                const container = parentEle.querySelector('#' + item.id + CONTAINER_ID);
-                const ele = container.querySelector('#' + item.id);
-                item.setProperties({ activeSize: RibbonItemSize.Large }, true);
-                this.setItemSize(ele, item);
-                parentEle.insertAdjacentElement('afterend', container);
+                if (item.displayOptions & DisplayMode.Classic) {
+                    const container = parentEle.querySelector('#' + item.id + CONTAINER_ID);
+                    const ele = container.querySelector('#' + item.id);
+                    item.setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    this.setItemSize(ele, item);
+                    parentEle.insertAdjacentElement('afterend', container);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
             if (!shouldSkip || shouldClear) {
                 remove(parentEle);
             }
         };
-        const expandCollectionsToLarge = (start, end, parentEle) => {
+        const expandCollectionsToLarge = (start, end, parentEle, middle) => {
             const collections = this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].collections;
-            for (let i = end; i >= start; i--) {
+            const reduce = (i) => {
                 const collection = collections[parseInt(i.toString(), 10)];
-                const collectionEle = parentEle.querySelector('#' + collection.id);
-                const ele = collectionEle.querySelector('#' + collection.items[0].id);
-                collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
-                this.setItemSize(ele, collection.items[0]);
-                parentEle.insertAdjacentElement('afterend', collectionEle);
+                if (collection.items[0].displayOptions & DisplayMode.Classic) {
+                    const collectionEle = parentEle.querySelector('#' + collection.id);
+                    const ele = collectionEle.querySelector('#' + collection.items[0].id);
+                    collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    this.setItemSize(ele, collection.items[0]);
+                    parentEle.insertAdjacentElement('afterend', collectionEle);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
             if (!shouldSkip || shouldClear) {
                 remove(parentEle);
             }
@@ -3241,10 +3796,23 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 const start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                 const end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                 if (orientation === ItemOrientation.Row) {
-                    expandItemsToLarge(start, end, shrinkColumn);
+                    const collection = group.collections[0];
+                    const 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);
+                    const 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');
@@ -3300,7 +3868,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             //Expanding the items in the group to their original expanded state
             this.checkSmallToMedium(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             this.checkMediumToLarge(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
-            const dropdown = this.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow);
+            const dropdown = this.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow, this.enableRtl);
             this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].setProperties({ isCollapsed: true }, true);
             for (let j = 0; j < group.collections.length; j++) {
@@ -3309,7 +3877,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 for (let k = 0; k < collection.items.length; k++) {
                     const item = collection.items[parseInt(k.toString(), 10)];
                     const itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
-                    this.addOverflowEvents(item, itemEle, dropdown);
+                    if (itemEle !== null) {
+                        this.addOverflowEvents(item, itemEle, dropdown);
+                    }
                 }
             }
         }
@@ -3344,7 +3914,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 for (let k = 0; k < collection.items.length; k++) {
                     const item = collection.items[parseInt(k.toString(), 10)];
                     const itemEle = collectionEle.querySelector('#' + item.id + CONTAINER_ID);
-                    this.removeOverflowEvent(item, itemEle);
+                    if (itemEle !== null) {
+                        this.removeOverflowEvent(item, itemEle);
+                    }
                 }
             }
         }
@@ -3392,6 +3964,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
     }
     ribbonTabSelecting(e) {
+        this.currentControlIndex = 0;
         const nextTabId = e.selectingItem.getAttribute('data-id');
         const previousTabId = e.previousItem.getAttribute('data-id');
         let nextIndex = getIndex(this.tabs, ((tab) => (tab.id === nextTabId)));
@@ -3451,7 +4024,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             id: btnId
         });
         const overflowTarget = this.createElement('div', {
-            className: RIBBON_OVERFLOW_TARGET
+            className: RIBBON_OVERFLOW_TARGET,
+            attrs: { 'tabindex': '0' }
         });
         const overflowDDB = new DropDownButton({
             iconCss: OVERFLOW_ICON,
@@ -3469,8 +4043,112 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }, overflowButton);
         this.element.classList.add(RIBBON_OVERFLOW);
         createTooltip(overflowTarget, this);
+        let isGroupOf;
+        overflowButton.onkeydown = overflowButton.onclick = () => { this.itemIndex = -1; isGroupOf = overflowButton.classList.contains('e-ribbon-overall-of-btn') ? false : true; };
+        overflowTarget.onkeydown = (e) => (this.upDownKeyHandler(e, overflowTarget, isGroupOf), this);
         return overflowDDB;
     }
+    upDownKeyHandler(e, target, isGroupOf) {
+        let items;
+        if (isGroupOf) {
+            items = target.getElementsByClassName('e-ribbon-item');
+        }
+        else {
+            const currentList = target.querySelector('.e-ribbon-of-tab.e-ribbon-active');
+            items = currentList.getElementsByClassName('e-ribbon-item');
+        }
+        const 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;
+        let 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());
+        }
+        const currentItemIndex = parseInt(target.getAttribute('index'), 10);
+        const 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')) {
+                const checkBoxEle = items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control');
+                const 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;
+        }
+    }
+    findDisabledItem(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');
+        }
+    }
     removeOverflowButton(overflowDDB) {
         if (overflowDDB) {
             const btnEle = overflowDDB.element;
@@ -3558,6 +4236,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
     }
     switchLayout() {
+        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');
@@ -3572,6 +4251,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 if (this.activeLayout === 'Simplified') {
                     for (let i = 0; i < groupList.length; i++) {
                         const group = groupList[parseInt(i.toString(), 10)];
+                        const alignType = groupList[parseInt(i.toString(), 10)].orientation;
                         if (group.isCollapsed) {
                             group.setProperties({ isCollapsed: false }, true);
                             this.removeDropdown(group.id);
@@ -3599,7 +4279,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 const itemList = collection.items;
                                 let item = collection.items[parseInt(k.toString(), 10)];
                                 let flag = true;
-                                while ((flag) && (item.displayOptions === DisplayMode.None)) {
+                                while ((flag) && (item.displayOptions === DisplayMode.Classic)) {
                                     k++;
                                     const itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
                                     const ele = itemEle.querySelector('#' + item.id);
@@ -3615,19 +4295,29 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 if (!flag) {
                                     break;
                                 }
-                                const itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
-                                const ele = itemEle.querySelector('#' + item.id);
                                 let 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;
+                                let itemEle;
+                                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);
+                                    const ele = itemEle.querySelector('#' + item.id);
+                                    this.setItemSize(ele, item);
+                                }
                             }
                         }
                         if (!(group.enableGroupOverflow || groupEle.querySelector('.' + RIBBON_ITEM))) {
@@ -3674,22 +4364,37 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 groupCollection.classList.replace(RIBBON_COLUMN, RIBBON_ROW);
                             }
                             for (let k = 0; k < collection.items.length; k++) {
-                                const item = collection.items[parseInt(k.toString(), 10)];
-                                if (item.displayOptions === DisplayMode.None) {
-                                    const itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex)[0];
-                                    groupCollection.append(itemEle);
-                                }
-                                else if ((item.displayOptions === DisplayMode.Overflow)) {
-                                    const itemEle = overflowtarget.querySelector('#' + item.id + CONTAINER_ID);
-                                    if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
-                                        this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
+                                const itemList = collection.items;
+                                let item = collection.items[parseInt(k.toString(), 10)];
+                                let flag = true;
+                                while ((flag) && !(item.displayOptions & DisplayMode.Classic)) {
+                                    k++;
+                                    let itemEle;
+                                    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) {
+                                            const ele = itemEle.querySelector('#' + item.id);
+                                            this.destroyFunction(item, ele);
+                                            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
-                                    const itemEle = groupContainer.querySelector('#' + item.id + CONTAINER_ID);
+                                if (!flag) {
+                                    break;
+                                }
+                                if (!(item.displayOptions & (DisplayMode.Simplified | DisplayMode.Overflow))) {
+                                    const itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex)[0];
                                     groupCollection.append(itemEle);
                                 }
                                 else {
@@ -3727,6 +4432,21 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             this.overflowDDB = null;
         }
     }
+    createLauncherIcon(groupId, groupContainer) {
+        const 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', (e) => {
+            if (e.key === 'Enter') {
+                this.launcherIconClicked(groupId);
+            }
+        }, this);
+    }
     launcherIconClicked(id) {
         const eventArgs = { groupId: id };
         this.trigger('launcherIconClick', eventArgs);
@@ -3763,19 +4483,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 groupContainer.appendChild(groupHeader);
             }
             if (group.showLauncherIcon) {
-                const launcherIcon = this.createElement('div', {
-                    className: RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss ? this.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.launcherIconClicked.bind(this, group.id), this);
-                EventHandler.add(launcherIcon, 'keydown', (e) => {
-                    if (e.key === 'Enter') {
-                        this.launcherIconClicked(group.id);
-                    }
-                }, this);
+                this.createLauncherIcon(group.id, groupContainer);
             }
             const elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
@@ -3843,13 +4551,40 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         }
         return collectionElements;
     }
+    createRibbonItem(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;
+        }
+    }
     createItems(itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
         const itemElements = [];
         for (let i = 0; i < itemList.length; i++) {
             let item = itemList[parseInt(i.toString(), 10)];
             //To stop rendering of items with simplified mode position type as none
             let 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)];
@@ -3883,30 +4618,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             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);
@@ -4010,13 +4723,15 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     for (const item of collection.items) {
                         let 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);
@@ -4069,15 +4784,17 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     for (const item of collection.items) {
                         let ele;
                         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;
                             }
                         }
@@ -4493,16 +5210,376 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
             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}
+     */
+    updateTab(tab) {
+        const tabId = tab.id;
+        const index = getIndex(this.tabs, (e) => { return e.id === tabId; });
+        if (index === -1) {
+            return;
+        }
+        const contentEle = this.tabObj.items[parseInt(index.toString(), 10)].content;
+        const groups = this.tabs[parseInt(index.toString(), 10)].groups;
+        const 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 (const group of groups) {
+                    const dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID) : null;
+                    for (const collection of group.collections) {
+                        for (const item of collection.items) {
+                            const ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            if (ele) {
+                                this.destroyFunction(item, ele);
+                            }
+                        }
+                    }
+                    if (dropdownElement) {
+                        this.ribbonDropDownModule.removeOverFlowDropDown(dropdownElement);
+                    }
+                }
+                const groupElements = contentEle.querySelectorAll('.e-ribbon-group');
+                // eslint-disable-next-line @typescript-eslint/tslint/config
+                groupElements.forEach(groupEle => { groupEle.remove(); });
+            }
+        }
+        if (index === this.selectedTab) {
+            this.isAddRemove = true;
+        }
+        const 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) {
+                const 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}
+     */
+    updateGroup(group) {
+        const groupId = group.id;
+        const itemProp = getGroup(this.tabs, groupId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        const contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        const groupEle = contentEle.querySelector('#' + groupId);
+        const groupContainer = groupEle.querySelector('#' + group.id + CONTAINER_ID);
+        let dropdownElement;
+        let 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 (const collection of itemProp.group.collections) {
+                        for (const item of collection.items) {
+                            this.removeItemElement(contentEle, item, dropdown);
+                        }
+                    }
+                    const collectionElements = groupEle.querySelectorAll('.e-ribbon-collection');
+                    // eslint-disable-next-line @typescript-eslint/tslint/config
+                    collectionElements.forEach(collectionEle => { collectionEle.remove(); });
+                    if (group.orientation) {
+                        const groupContent = groupContainer.querySelector('.e-ribbon-group-content');
+                        const 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 {
+                    const ofGroupContainer = dropdown.target.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+                    if (ofGroupContainer && ofGroupContainer.childElementCount === 1) {
+                        ofGroupContainer.remove();
+                    }
+                    const ofTabContainer = dropdown.target.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + OVERFLOW_ID);
+                    if (ofTabContainer && ofTabContainer.childElementCount === 0) {
+                        ofTabContainer.remove();
+                    }
+                }
+            }
+        }
+        const 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) {
+                const groupContent = groupContainer.querySelector('.e-ribbon-group-content');
+                groupContent.classList.add(((ribbongroup.orientation === 'Column') || (this.activeLayout === 'Simplified')) ? RIBBON_COLUMN : RIBBON_ROW);
+                const 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) {
+                    const 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) {
+                    const overflowEle = groupEle.querySelector('#' + ribbongroup.id + OVERFLOW_ID + DROPDOWN_ID);
+                    // need to set instance for dropdown
+                    const dropDownBtn = getInstance(overflowEle, DropDownButton);
+                    const 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}
+     */
+    updateCollection(collection) {
+        const collectionId = collection.id;
+        const itemProp = getCollection(this.tabs, collectionId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        const contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        const collectionEle = contentEle.querySelector('#' + collectionId);
+        if (contentEle.innerHTML !== '') {
+            let dropdownElement;
+            let dropdown;
+            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 (const item of itemProp.collection.items) {
+                        this.removeItemElement(contentEle, item, dropdown);
+                    }
+                }
+            }
+        }
+        const 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) {
+                const groupContainer = contentEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+                const 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}
+     */
+    updateItem(item) {
+        const itemId = item.id;
+        const itemProp = getItem(this.tabs, itemId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        const contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        const groupEle = contentEle.querySelector('#' + itemProp.group.id);
+        const groupContainer = groupEle.querySelector('#' + itemProp.group.id + CONTAINER_ID);
+        let itemContainer = null;
+        let itemEle = null;
+        let dropdownElement;
+        let 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) {
+                    const 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();
+            const removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+            if (removeCss) {
+                removeClass([itemContainer], removeCss);
+            }
+        }
+        const 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 });
+            }
+            let 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);
+        }
+    }
     removeItemElement(contentEle, item, dropdown) {
         let 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);
             }
         }
@@ -4553,6 +5630,8 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
         EventHandler.remove(window, 'resize', this.resizeHandler);
     }
     destroy() {
+        this.keyboardModuleRibbon.destroy();
+        this.keyboardModuleRibbon = null;
         destroyTooltip(this.element);
         this.destroyTabItems(this.tabs);
         this.removeExpandCollapse();
@@ -4602,6 +5681,9 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                 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 });
@@ -4625,7 +5707,7 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                                 if (group.showLauncherIcon) {
                                     const className = RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss || RIBBON_LAUNCHER_ICON);
                                     if (group.isCollapsed) {
-                                        const element = tabContent.querySelector('.' + RIBBON_GROUP_OVERFLOW_DDB);
+                                        const element = tabContent.querySelector('#' + group.id + OVERFLOW_ID + DROPDOWN_ID);
                                         const dropdown = getComponent(element, DropDownButton);
                                         const launcherIconEle = dropdown.target.querySelector('#' + group.id + LAUNCHER_ID);
                                         launcherIconEle.className = className;
@@ -4656,14 +5738,20 @@ let Ribbon = Ribbon_1 = class Ribbon extends Component {
                     if (this.ribbonFileMenuModule) {
                         this.ribbonFileMenuModule.updateFileMenu(this.fileMenu);
                     }
+                    const 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();
                     }
+                    const toolbar = this.tabObj['tbObj'];
+                    toolbar.refreshOverflow();
                     break;
             }
         }