@syncfusion/ej2-ribbon 21.1.37 → 22.1.34

package/src/ribbon/base/ribbon.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { addClass, append, Event, Collection, Complex, Component, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest } from '@syncfusion/ej2-base';
+import { addClass, append, Event, Collection, Complex, Component, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEvents } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, isUndefined, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';
 import { Tab, TabAnimationSettings, HScroll, Toolbar } from '@syncfusion/ej2-navigations';
 import { RibbonTab, FileMenuSettings } from '../models/index';
@@ -27,6 +27,7 @@ import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonSpl
 import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';
 import * as constants from './constant';
 import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { CheckBox } from '@syncfusion/ej2-buttons';
 /**
  * The Ribbon Component is a structured layout to manage tools with tabs and groups.
  */
@@ -58,6 +59,12 @@ var Ribbon = /** @class */ (function (_super) {
         this.idIndex = 0;
         this.tooltipData = [];
         this.isAddRemove = false;
+        this.keyConfigs = {
+            leftarrow: 'leftarrow',
+            rightarrow: 'rightarrow',
+            tab: 'tab',
+            shiftTab: 'shift+tab'
+        };
     };
     /**
      * Get the properties to be maintained in the persisted state.
@@ -99,12 +106,239 @@ var Ribbon = /** @class */ (function (_super) {
             this.ribbonFileMenuModule.createFileMenu(this.fileMenu);
         }
         this.createHelpPaneTemplate();
+        var toolbar = this.tabObj['tbObj'];
+        toolbar.refreshOverflow();
         createTooltip(this.element, this);
         this.wireEvents();
+        this.wireKeyboardEvent();
+        this.currentControlIndex = 0;
     };
     Ribbon.prototype.wireEvents = function () {
         EventHandler.add(window, 'resize', this.resizeHandler, this);
     };
+    Ribbon.prototype.wireKeyboardEvent = function () {
+        this.keyboardModuleRibbon = new KeyboardEvents(this.element, {
+            keyAction: this.keyActionHandler.bind(this),
+            keyConfigs: this.keyConfigs,
+            eventName: 'keydown'
+        });
+    };
+    Ribbon.prototype.keyActionHandler = function (e) {
+        if (((e.key === 'Tab') && (!(e.target.classList.contains('e-tab-wrap')) && !(e.target.classList.contains('e-combobox'))))) {
+            e.preventDefault();
+        }
+        var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
+        var ribbonControls = activeContent.querySelectorAll('.e-control');
+        var comboBoxElements = activeContent.querySelectorAll('.e-combobox');
+        var comboBoxEle;
+        if (comboBoxElements) {
+            for (var i = 0; i < comboBoxElements.length; i++) {
+                if (comboBoxElements[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                    comboBoxEle = comboBoxElements[parseInt(i.toString(), 10)];
+                }
+            }
+        }
+        if (comboBoxEle) {
+            for (var i = 0; i < ribbonControls.length; i++) {
+                if (ribbonControls[parseInt(i.toString(), 10)].classList.contains('e-combobox')) {
+                    if (ribbonControls[parseInt(i.toString(), 10)].closest('.e-input-focus')) {
+                        this.currentControlIndex = i;
+                    }
+                }
+            }
+        }
+        if (this.currentControlIndex === 0) {
+            var item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+            while (item && item.classList.contains('e-disabled')) {
+                this.currentControlIndex++;
+                item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+            }
+        }
+        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
+            e.target.classList.contains('e-ribbon-collapse-btn') || e.target.classList.contains('e-ribbon-last-item') ||
+            e.target.classList.contains('e-ribbon-first-item') || e.target.classList.contains('e-ribbon-group-of-btn') ||
+            e.target.classList.contains('e-ribbon-overall-of-btn')) {
+            switch (e.action) {
+                case 'rightarrow':
+                    this.handleNavigation(e, !this.enableRtl, ribbonControls);
+                    break;
+                case 'leftarrow':
+                    this.handleNavigation(e, this.enableRtl, ribbonControls);
+                    break;
+                case 'tab':
+                    if (e.target.classList.contains('e-combobox')) {
+                        if (this.currentControlIndex < ribbonControls.length - 1) {
+                            this.currentControlIndex++;
+                        }
+                    }
+                    break;
+                case 'shiftTab':
+                    if (e.target.classList.contains('e-combobox')) {
+                        if (this.currentControlIndex > 0) {
+                            this.currentControlIndex--;
+                        }
+                    }
+                    else {
+                        this.tabObj.element.querySelector('.e-toolbar-item.e-active').querySelector('.e-tab-wrap').focus();
+                        this.currentControlIndex = 0;
+                    }
+            }
+        }
+    };
+    Ribbon.prototype.handleNavigation = function (e, enableRtl, ribbonControls) {
+        var groupContainer;
+        var prevGroupId;
+        if (enableRtl) {
+            if (this.currentControlIndex < ribbonControls.length - 1 && ribbonControls[this.currentControlIndex + 1].classList.contains('e-colorpicker')) {
+                this.currentControlIndex++;
+            }
+        }
+        else {
+            if (this.currentControlIndex > 0 && ribbonControls[this.currentControlIndex - 1].classList.contains('e-colorpicker')) {
+                this.currentControlIndex--;
+            }
+        }
+        if ((!enableRtl && (this.currentControlIndex > 0)) || (enableRtl && (this.currentControlIndex < ribbonControls.length - 1))) {
+            if (!e.target.classList.contains('e-combobox') && e.target.classList.contains('e-control') && !e.target.classList.contains('e-ribbon-last-item')) {
+                if (enableRtl) {
+                    this.currentControlIndex++;
+                }
+                else {
+                    var prevGroupContainer = ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].closest('.' + constants.RIBBON_GROUP_CONTAINER);
+                    if (prevGroupContainer) {
+                        prevGroupId = prevGroupContainer.getAttribute('id');
+                    }
+                    this.currentControlIndex--;
+                }
+                var item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                while (item && item.classList.contains('e-disabled')) {
+                    if (((enableRtl && this.currentControlIndex === ribbonControls.length - 1) ||
+                        (!enableRtl && this.currentControlIndex === 0))) {
+                        if (ribbonControls[this.currentControlIndex].closest('.e-ribbon-item').classList.contains('e-disabled')) {
+                            this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+                            break;
+                        }
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    enableRtl ? this.currentControlIndex++ : this.currentControlIndex--;
+                    item = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                }
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+                if (this.activeLayout === 'Classic') {
+                    groupContainer = ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].closest('.' + constants.RIBBON_GROUP_CONTAINER);
+                    if (enableRtl) {
+                        var launcherIconEle = void 0;
+                        if (groupContainer) {
+                            launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+                        }
+                        if (launcherIconEle) {
+                            var items = groupContainer.querySelectorAll('.e-ribbon-item');
+                            items[items.length - 1].querySelector('.e-control').classList.add('e-ribbon-last-item');
+                        }
+                    }
+                    else {
+                        if (groupContainer) {
+                            var groupContainerId = groupContainer.getAttribute('id');
+                            if (prevGroupId !== groupContainerId) {
+                                var launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+                                if (launcherIconEle) {
+                                    ribbonControls[parseInt((this.currentControlIndex + 1).toString(), 10)].classList.add('e-ribbon-first-item');
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.contains('e-ribbon-first-item')) {
+                        ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.remove('e-ribbon-first-item');
+                    }
+                    else if (ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.contains('e-ribbon-last-item')) {
+                        ribbonControls[parseInt((this.currentControlIndex).toString(), 10)].classList.remove('e-ribbon-last-item');
+                    }
+                }
+            }
+        }
+        else {
+            if (this.activeLayout === 'Classic') {
+                this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+            }
+            if (this.activeLayout === 'Simplified') {
+                var overflowButton = this.tabObj.element.querySelector('.e-ribbon-overall-of-btn');
+                if (enableRtl && (overflowButton && !overflowButton.classList.contains('e-ribbon-hide'))) {
+                    overflowButton.focus();
+                }
+                else {
+                    this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+                }
+            }
+        }
+        if (e.target.classList.contains('e-ribbon-last-item')) {
+            if (enableRtl) {
+                groupContainer = ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].closest('.' + constants.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('.' + constants.RIBBON_GROUP_CONTAINER);
+            var launcherIconEle = groupContainer.querySelector('.e-ribbon-launcher-icon');
+            if (launcherIconEle) {
+                groupContainer.querySelector('.e-ribbon-launcher-icon').focus();
+            }
+        }
+        if (e.target.classList.contains('e-ribbon-launcher-icon')) {
+            if (enableRtl) {
+                this.currentControlIndex++;
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+                if (ribbonControls[parseInt((this.currentControlIndex - 1).toString(), 10)].classList.contains('e-ribbon-last-item')) {
+                    ribbonControls[parseInt((this.currentControlIndex - 1).toString(), 10)].classList.remove('e-ribbon-last-item');
+                }
+            }
+            else {
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                this.currentControlIndex;
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+            }
+        }
+        if (e.target.classList.contains('e-ribbon-collapse-btn')) {
+            if (enableRtl) {
+                this.currentControlIndex = 0;
+                var ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+                    this.currentControlIndex++;
+                    ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                }
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+            }
+            else {
+                var overflowButton = this.tabObj.element.querySelector('.e-ribbon-overall-of-btn');
+                if ((overflowButton && !overflowButton.classList.contains('e-ribbon-hide'))) {
+                    overflowButton.focus();
+                }
+                else {
+                    this.currentControlIndex = ribbonControls.length - 1;
+                    var ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                    while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+                        this.currentControlIndex--;
+                        ribbonItem = ribbonControls[this.currentControlIndex].closest('.e-ribbon-item');
+                    }
+                    ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+                }
+            }
+        }
+        if (this.activeLayout === 'Simplified' && e.target.classList.contains('e-ribbon-overall-of-btn')) {
+            if (enableRtl) {
+                this.tabObj.element.querySelector('.e-ribbon-collapse-btn').focus();
+            }
+            else {
+                this.currentControlIndex = ribbonControls.length - 1;
+                ribbonControls[parseInt(this.currentControlIndex.toString(), 10)].focus();
+            }
+        }
+    };
     Ribbon.prototype.resizeHandler = function () {
         var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
         this.checkOverflow(this.selectedTab, activeContent);
@@ -177,7 +411,7 @@ var Ribbon = /** @class */ (function (_super) {
         selectedIndex = selectedIndex === -1 ? this.selectedTab : selectedIndex;
         var eventArgs = { previousIndex: this.selectedTab, selectedIndex: selectedIndex };
         this.setProperties({ selectedTab: selectedIndex }, true);
-        this.checkOverflow(selectedIndex, e.selectedContent);
+        this.checkOverflow(selectedIndex, e.selectedContent.firstChild);
         if (this.activeLayout === 'Simplified' && this.overflowDDB) {
             var overflowTarget = this.overflowDDB.target;
             var ofTabContainer = overflowTarget.querySelector('.' + constants.RIBBON_TAB_ACTIVE);
@@ -196,9 +430,6 @@ var Ribbon = /** @class */ (function (_super) {
         this.trigger('tabSelected', eventArgs);
     };
     Ribbon.prototype.checkOverflow = function (tabIndex, activeContent) {
-        if (!activeContent) {
-            activeContent = this.tabObj.element.querySelector('#' + this.tabs[parseInt(tabIndex.toString(), 10)].id + constants.CONTENT_ID);
-        }
         var tabContent = activeContent.closest('.' + constants.TAB_CONTENT);
         var isOverFlow = tabContent.offsetWidth < activeContent.offsetWidth;
         if (isOverFlow && !this.scrollModule) {
@@ -310,7 +541,8 @@ var Ribbon = /** @class */ (function (_super) {
                 for (var k = collection.items.length; ((k >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); k--) {
                     var item = collection.items[k - 1];
                     var itemContainer = collectionEle.querySelector('#' + item.id + constants.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) {
@@ -381,7 +613,8 @@ var Ribbon = /** @class */ (function (_super) {
                     if (overflowtarget) {
                         itemContainer = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
                     }
-                    if ((item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow)) && !isNullOrUndefined(itemContainer)) {
+                    if (((item.displayOptions === DisplayMode.Auto) ||
+                        (item.displayOptions === (DisplayMode.Simplified | DisplayMode.Overflow))) && !isNullOrUndefined(itemContainer)) {
                         var width = parseInt(itemContainer.getAttribute('data-simplified-width'), 10);
                         if (!isClear && (tabContent.offsetWidth < width)) {
                             flag = false;
@@ -471,7 +704,9 @@ var Ribbon = /** @class */ (function (_super) {
             }
             overflowButton = this.overflowDDB;
         }
-        this.addOverflowEvents(item, itemEle, overflowButton);
+        if (itemEle !== null) {
+            this.addOverflowEvents(item, itemEle, overflowButton);
+        }
     };
     Ribbon.prototype.addOverflowEvents = function (item, itemEle, overflowButton) {
         switch (item.type) {
@@ -520,6 +755,50 @@ var Ribbon = /** @class */ (function (_super) {
         }
         return isBreak;
     };
+    Ribbon.prototype.checkValidCollectionLength = function (collections) {
+        var count = 0;
+        for (var i = 0; i < collections.length; i++) {
+            var items = collections[parseInt(i.toString(), 10)].items;
+            for (var ind = 0; ind < items.length; ind++) {
+                if (items[parseInt(ind.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                    count++;
+                    break;
+                }
+            }
+            if (count > 1) {
+                return false;
+            }
+        }
+        return count === 1;
+    };
+    Ribbon.prototype.checkClassicCollection = function (collections, n, isIncrement) {
+        var items = collections[parseInt(n.toString(), 10)].items;
+        for (var ind = 0; ind < items.length; ind++) {
+            if (items[parseInt(ind.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                return n;
+            }
+        }
+        n = isIncrement ? n + 1 : n - 1;
+        if (isIncrement) {
+            return (n === collections.length) ? n : this.checkClassicCollection(collections, n, isIncrement);
+        }
+        else {
+            return (n < 0) ? n : this.checkClassicCollection(collections, n, isIncrement);
+        }
+    };
+    Ribbon.prototype.checkClassicItem = function (items, n, isIncrement) {
+        var item = items[parseInt(n.toString(), 10)];
+        if (item.displayOptions & DisplayMode.Classic) {
+            return n;
+        }
+        n = isIncrement ? n + 1 : n - 1;
+        if (isIncrement) {
+            return (n === items.length) ? n : this.checkClassicItem(items, n, isIncrement);
+        }
+        else {
+            return (n < 0) ? n : this.checkClassicItem(items, n, isIncrement);
+        }
+    };
     Ribbon.prototype.checkLargeToMedium = function (tabIndex, tab, groupIndex, tabContent, activeContent, shouldSkip) {
         var _this = this;
         if (shouldSkip === void 0) { shouldSkip = false; }
@@ -553,6 +832,9 @@ var Ribbon = /** @class */ (function (_super) {
                 createShrinkEle(collection.id, firstItem, start, end);
             for (var i = start; i <= end; i++) {
                 var item = collection.items[parseInt(i.toString(), 10)];
+                if (!(item.displayOptions & DisplayMode.Classic)) {
+                    continue;
+                }
                 var ele = activeContent.querySelector('#' + item.id + constants.CONTAINER_ID);
                 shrinkEle.appendChild(ele);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
@@ -577,45 +859,65 @@ var Ribbon = /** @class */ (function (_super) {
         if (orientation === ItemOrientation.Column) {
             for (var k = (group.collections.length - 1); k > 0; k--) {
                 //to avoid negative index while checking for the second collection
-                if (((k - 1) >= 0) && canReduceCollection(group.collections[parseInt(k.toString(), 10)])) {
-                    if (canReduceCollection(group.collections[k - 1])) {
-                        if (((k - 2) >= 0) && canReduceCollection(group.collections[k - 2])) {
-                            moveCollectionToColumn(k - 2, k);
+                k = this.checkClassicCollection(group.collections, k, false);
+                var l = k - 1;
+                //Checks the element rendered at position n
+                if ((l >= 0) && canReduceCollection(group.collections[parseInt(k.toString(), 10)])) {
+                    l = this.checkClassicCollection(group.collections, l, false);
+                    //Checks the element rendered at position n-1
+                    if ((l >= 0) && canReduceCollection(group.collections[parseInt(l.toString(), 10)])) {
+                        var m = l - 1;
+                        if (m >= 0) {
+                            m = this.checkClassicCollection(group.collections, m, false);
+                        }
+                        //Checks the element rendered at position n-2
+                        if ((m >= 0) && canReduceCollection(group.collections[parseInt(m.toString(), 10)])) {
+                            moveCollectionToColumn(m, k);
                         }
                         else {
-                            moveCollectionToColumn(k - 1, k);
+                            moveCollectionToColumn(l, k);
                         }
-                        k -= 2;
+                        k = m;
                         if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                             return true;
                         }
                     }
                     else {
-                        k--;
+                        k = l;
                     }
                 }
             }
         }
         else {
-            if (group.collections.length === 1) {
+            if (this.checkValidCollectionLength(group.collections)) {
                 var collection = group.collections[0];
                 for (var k = (collection.items.length - 1); k > 0; k--) {
                     //to avoid negative index while checking for the second item
-                    if (((k - 1) >= 0) && canReduceItem(collection.items[parseInt(k.toString(), 10)])) {
-                        if (canReduceItem(collection.items[k - 1])) {
-                            if (((k - 2) >= 0) && canReduceItem(collection.items[k - 2])) {
-                                moveItemToColumn(k - 2, k);
+                    k = this.checkClassicItem(collection.items, k, false);
+                    var l = k - 1;
+                    //Checks the element rendered at position n
+                    if ((l >= 0) && canReduceItem(collection.items[parseInt(k.toString(), 10)])) {
+                        l = this.checkClassicItem(collection.items, l, false);
+                        //Checks the element rendered at position n-1
+                        if ((l >= 0) && canReduceItem(collection.items[parseInt(l.toString(), 10)])) {
+                            var m = l - 1;
+                            //Checks the element rendered at position n-2
+                            if (m >= 0) {
+                                m = this.checkClassicItem(collection.items, m, false);
+                            }
+                            if ((m >= 0) && canReduceItem(collection.items[parseInt(m.toString(), 10)])) {
+                                moveItemToColumn(m, k);
                             }
                             else {
-                                moveItemToColumn(k - 1, k);
+                                moveItemToColumn(l, k);
                             }
-                            k -= 2;
+                            k = m;
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
                             }
                         }
                         else {
-                            k--;
+                            k = l;
                         }
                     }
                 }
@@ -636,28 +938,44 @@ var Ribbon = /** @class */ (function (_super) {
         var canReduceItem = function (item) {
             return (item.allowedSizes & RibbonItemSize.Small) && (item.activeSize === RibbonItemSize.Medium);
         };
-        var reduceItemsToSmall = function (collectionIndex, start, end) {
+        var reduceItemsToSmall = function (collectionIndex, start, end, middle) {
+            if (middle === void 0) { middle = null; }
             var collection = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections[parseInt(collectionIndex.toString(), 10)];
-            for (var i = start; i <= end; i++) {
+            var reduce = function (i) {
                 var item = collection.items[parseInt(i.toString(), 10)];
-                var ele_1 = activeContent.querySelector('#' + item.id);
-                item.setProperties({ activeSize: RibbonItemSize.Small }, true);
-                _this.setItemSize(ele_1, item);
+                if (item.displayOptions & DisplayMode.Classic) {
+                    var ele_1 = activeContent.querySelector('#' + item.id);
+                    item.setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    _this.setItemSize(ele_1, item);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
         };
-        var reduceCollectionsToSmall = function (index, start, end) {
+        var reduceCollectionsToSmall = function (index, start, end, middle) {
+            if (middle === void 0) { middle = null; }
             var group = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)];
             if (!shouldSkip) {
                 shrinkColumns[parseInt(index.toString(), 10)].setAttribute('data-medium-width', activeContent.offsetWidth.toString());
             }
-            for (var i = start; i <= end; i++) {
+            var reduce = function (i) {
                 var collection = group.collections[parseInt(i.toString(), 10)];
-                var ele_2 = activeContent.querySelector('#' + collection.items[0].id);
-                collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
-                _this.setItemSize(ele_2, collection.items[0]);
+                if (collection.items[0].displayOptions & DisplayMode.Classic) {
+                    var ele_2 = activeContent.querySelector('#' + collection.items[0].id);
+                    collection.items[0].setProperties({ activeSize: RibbonItemSize.Small }, true);
+                    _this.setItemSize(ele_2, collection.items[0]);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
         };
         var setWidth = function (id) {
             if (!shouldSkip) {
@@ -671,13 +989,14 @@ var Ribbon = /** @class */ (function (_super) {
                     var start = parseInt(shrinkColumns[parseInt(k.toString(), 10)].getAttribute('data-start'), 10);
                     var end = parseInt(shrinkColumns[parseInt(k.toString(), 10)].getAttribute('data-end'), 10);
                     //only 2 or 3 itmes alone can be present in shrinked column
+                    var l = this.checkClassicCollection(group.collections, start + 1, false); //next valid item
                     if (canReduceItem(group.collections[parseInt(start.toString(), 10)].items[0])
-                        && canReduceItem(group.collections[start + 1].items[0])) {
-                        if ((end - start) === 1) { //if only 2 item, the difference will be 1, else check for 3 rd item satus.
+                        && canReduceItem(group.collections[parseInt(l.toString(), 10)].items[0])) {
+                        if (end === l) { //if only 2 item, then next valid item will be the end item, else check for 3 rd item satus.
                             reduceCollectionsToSmall(k, start, end);
                         }
-                        else if (canReduceItem(group.collections[parseInt(start.toString(), 10)].items[0])) {
-                            reduceCollectionsToSmall(k, start, end);
+                        else if (canReduceItem(group.collections[parseInt(end.toString(), 10)].items[0])) {
+                            reduceCollectionsToSmall(k, start, end, l);
                         }
                         if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                             return true;
@@ -687,16 +1006,22 @@ var Ribbon = /** @class */ (function (_super) {
             }
             for (var k = (group.collections.length - 1); k >= 0; k--) {
                 var collection = group.collections[parseInt(k.toString(), 10)];
+                var classicItems = [];
+                for (var i = 0; i < collection.items.length; i++) {
+                    if (collection.items[parseInt(i.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                        classicItems.push(i);
+                    }
+                }
                 //If items length is 1 then, it would have been already check for shrinked column
-                if ((collection.items.length > 1)) {
-                    if (canReduceItem(collection.items[0]) && canReduceItem(collection.items[1])) {
-                        if (collection.items.length === 2) {
+                if ((classicItems.length > 1)) {
+                    if (canReduceItem(collection.items[classicItems[0]]) && canReduceItem(collection.items[classicItems[1]])) {
+                        if (classicItems.length === 2) {
                             setWidth(collection.id);
-                            reduceItemsToSmall(k, 0, 1);
+                            reduceItemsToSmall(k, classicItems[0], classicItems[1]);
                         }
-                        else if (canReduceItem(collection.items[2])) {
+                        else if (canReduceItem(collection.items[classicItems[2]])) {
                             setWidth(collection.id);
-                            reduceItemsToSmall(k, 0, 2);
+                            reduceItemsToSmall(k, classicItems[0], classicItems[2], classicItems[1]);
                         }
                         if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                             return true;
@@ -706,22 +1031,24 @@ var Ribbon = /** @class */ (function (_super) {
             }
         }
         else {
-            if (group.collections.length === 1) {
+            if (this.checkValidCollectionLength(group.collections)) {
                 if (shrinkColumns.length > 0) {
                     for (var k = (shrinkColumns.length - 1); k >= 0; k--) {
                         var shrinkColumn = shrinkColumns[parseInt(k.toString(), 10)];
                         var start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                         var end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                         //only 2 or 3 itmes alone can be present in shrinked column
+                        var collection = group.collections[0];
+                        var l = this.checkClassicItem(collection.items, start + 1, false); //next valid item
                         if (canReduceItem(group.collections[0].items[parseInt(start.toString(), 10)])
-                            && canReduceItem(group.collections[0].items[start + 1])) {
-                            if ((end - start) === 1) { //if only 2 item, the difference will be 1, else check for 3 rd item satus.
+                            && canReduceItem(group.collections[0].items[parseInt(l.toString(), 10)])) {
+                            if (end === l) { //if only 2 item, then next valid item will be the end item, else check for 3 rd item satus.
                                 setWidth(shrinkColumn.id);
                                 reduceItemsToSmall(0, start, end);
                             }
                             else if (canReduceItem(group.collections[0].items[parseInt(end.toString(), 10)])) {
                                 setWidth(shrinkColumn.id);
-                                reduceItemsToSmall(0, start, end);
+                                reduceItemsToSmall(0, start, end, l);
                             }
                             if (!shouldSkip && (tabContent.offsetWidth > activeContent.offsetWidth)) {
                                 return true;
@@ -734,6 +1061,10 @@ var Ribbon = /** @class */ (function (_super) {
                 for (var k = (group.collections.length - 1); k >= 0; k--) {
                     var collection = group.collections[parseInt(k.toString(), 10)];
                     for (var l = (collection.items.length - 1); l >= 0; l--) {
+                        l = this.checkClassicItem(collection.items, l, false);
+                        if (l < 0) {
+                            continue;
+                        }
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canReduceItem(item)) {
                             setWidth(item.id);
@@ -767,20 +1098,21 @@ var Ribbon = /** @class */ (function (_super) {
         var canExpandItem = function (item) {
             return (item.allowedSizes & RibbonItemSize.Medium) && (item.activeSize === RibbonItemSize.Small);
         };
-        var expandItemsToMedium = function (collectionIndex, start, end, parentEle) {
+        var expandItemToMedium = function (collectionIndex, index, parentEle) {
             var collection = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections[parseInt(collectionIndex.toString(), 10)];
-            for (var i = start; i <= end; i++) {
-                var item = collection.items[parseInt(i.toString(), 10)];
+            var item = collection.items[parseInt(index.toString(), 10)];
+            if (item.displayOptions & DisplayMode.Classic) {
                 var ele_4 = parentEle.id === item.id ? parentEle : parentEle.querySelector('#' + item.id);
                 item.setProperties({ activeSize: RibbonItemSize.Medium }, true);
                 _this.setItemSize(ele_4, item);
             }
         };
-        var expandCollectionsToMedium = function (start, end) {
+        var expandCollectionsToMedium = function (i) {
             var collections = _this.tabs[parseInt(tabIndex.toString(), 10)]
                 .groups[parseInt(groupIndex.toString(), 10)].collections;
-            for (var i = start; i <= end; i++) {
+            var item = collections[parseInt(i.toString(), 10)].items[0];
+            if (item.displayOptions & DisplayMode.Classic) {
                 var ele_5 = activeContent.querySelector('#' + collections[parseInt(i.toString(), 10)].items[0].id);
                 collections[parseInt(i.toString(), 10)].items[0].setProperties({ activeSize: RibbonItemSize.Medium }, true);
                 _this.setItemSize(ele_5, collections[parseInt(i.toString(), 10)].items[0]);
@@ -788,17 +1120,21 @@ var Ribbon = /** @class */ (function (_super) {
         };
         if (orientation === ItemOrientation.Row) {
             // collection length is 1, then the it wll be covered in shrinked columns
-            if (group.collections.length !== 1) {
+            if (!this.checkValidCollectionLength(group.collections)) {
                 for (var k = 0; k < group.collections.length; k++) {
                     var collection = group.collections[parseInt(k.toString(), 10)];
                     for (var l = 0; l < collection.items.length; l++) {
+                        l = this.checkClassicItem(collection.items, l, true);
+                        if (l === collection.items.length) {
+                            continue;
+                        }
                         var item = collection.items[parseInt(l.toString(), 10)];
                         if (canExpandItem(item)) {
                             var itemEle = activeContent.querySelector('#' + item.id);
                             var valString = itemEle.getAttribute('data-medium-width');
                             var value = valString ? parseInt(valString, 10) : null;
                             if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
-                                expandItemsToMedium(k, l, l, itemEle);
+                                expandItemToMedium(k, l, itemEle);
                                 if (!shouldSkip || shouldClear) {
                                     itemEle.removeAttribute('data-medium-width');
                                 }
@@ -819,8 +1155,18 @@ var Ribbon = /** @class */ (function (_super) {
                     var itemEle = activeContent.querySelector('#' + collection.id);
                     var valString = itemEle.getAttribute('data-medium-width');
                     var value = valString ? parseInt(valString, 10) : null;
-                    if (value && (shouldSkip || (tabContent.offsetWidth > value))) {
-                        expandItemsToMedium(k, 0, (collection.items.length === 2) ? 1 : 2, itemEle);
+                    var classicItems = [];
+                    for (var i = 0; i < collection.items.length; i++) {
+                        if (collection.items[parseInt(i.toString(), 10)].displayOptions & DisplayMode.Classic) {
+                            classicItems.push(i);
+                        }
+                    }
+                    if ((classicItems.length > 1) && value && (shouldSkip || (tabContent.offsetWidth > value))) {
+                        expandItemToMedium(k, classicItems[0], itemEle);
+                        expandItemToMedium(k, classicItems[1], itemEle);
+                        if (classicItems.length === 3) {
+                            expandItemToMedium(k, classicItems[2], itemEle);
+                        }
                         if (!shouldSkip || shouldClear) {
                             itemEle.removeAttribute('data-medium-width');
                         }
@@ -840,10 +1186,22 @@ var Ribbon = /** @class */ (function (_super) {
                     var start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                     var end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                     if (orientation === ItemOrientation.Row) {
-                        expandItemsToMedium(0, start, end, shrinkColumn);
+                        var collection = group.collections[0];
+                        var l = this.checkClassicItem(collection.items, start + 1, true); //next valid item
+                        expandItemToMedium(0, start, shrinkColumn);
+                        expandItemToMedium(0, l, shrinkColumn);
+                        // if l == end, then l is the last item, else L is the middle item. If l is middle then call the method for end.
+                        if (l !== end) {
+                            expandItemToMedium(0, end, shrinkColumn);
+                        }
                     }
                     else {
-                        expandCollectionsToMedium(start, end);
+                        var m = this.checkClassicCollection(group.collections, start + 1, true); //next valid item
+                        expandCollectionsToMedium(start);
+                        expandCollectionsToMedium(m);
+                        if (m !== end) {
+                            expandCollectionsToMedium(end);
+                        }
                     }
                     if (!shouldSkip || shouldClear) {
                         shrinkColumn.removeAttribute('data-medium-width');
@@ -865,32 +1223,46 @@ var Ribbon = /** @class */ (function (_super) {
         if (shrinkColumns.length === 0) {
             return false;
         }
-        var expandItemsToLarge = function (start, end, parentEle) {
+        var expandItemsToLarge = function (start, end, parentEle, middle) {
             var items = _this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].collections[0].items;
-            for (var i = end; i >= start; i--) {
+            var reduce = function (i) {
                 var item = items[parseInt(i.toString(), 10)];
-                var container = parentEle.querySelector('#' + item.id + constants.CONTAINER_ID);
-                var ele_6 = container.querySelector('#' + item.id);
-                item.setProperties({ activeSize: RibbonItemSize.Large }, true);
-                _this.setItemSize(ele_6, item);
-                parentEle.insertAdjacentElement('afterend', container);
+                if (item.displayOptions & DisplayMode.Classic) {
+                    var container = parentEle.querySelector('#' + item.id + constants.CONTAINER_ID);
+                    var ele_6 = container.querySelector('#' + item.id);
+                    item.setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    _this.setItemSize(ele_6, item);
+                    parentEle.insertAdjacentElement('afterend', container);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
             if (!shouldSkip || shouldClear) {
                 remove(parentEle);
             }
         };
-        var expandCollectionsToLarge = function (start, end, parentEle) {
+        var expandCollectionsToLarge = function (start, end, parentEle, middle) {
             var collections = _this.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].collections;
-            for (var i = end; i >= start; i--) {
+            var reduce = function (i) {
                 var collection = collections[parseInt(i.toString(), 10)];
-                var collectionEle = parentEle.querySelector('#' + collection.id);
-                var ele_7 = collectionEle.querySelector('#' + collection.items[0].id);
-                collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
-                _this.setItemSize(ele_7, collection.items[0]);
-                parentEle.insertAdjacentElement('afterend', collectionEle);
+                if (collection.items[0].displayOptions & DisplayMode.Classic) {
+                    var collectionEle = parentEle.querySelector('#' + collection.id);
+                    var ele_7 = collectionEle.querySelector('#' + collection.items[0].id);
+                    collection.items[0].setProperties({ activeSize: RibbonItemSize.Large }, true);
+                    _this.setItemSize(ele_7, collection.items[0]);
+                    parentEle.insertAdjacentElement('afterend', collectionEle);
+                }
+            };
+            reduce(start);
+            if (middle) {
+                reduce(middle);
             }
+            reduce(end);
             if (!shouldSkip || shouldClear) {
                 remove(parentEle);
             }
@@ -903,10 +1275,23 @@ var Ribbon = /** @class */ (function (_super) {
                 var start = parseInt(shrinkColumn.getAttribute('data-start'), 10);
                 var end = parseInt(shrinkColumn.getAttribute('data-end'), 10);
                 if (orientation === ItemOrientation.Row) {
-                    expandItemsToLarge(start, end, shrinkColumn);
+                    var collection = group.collections[0];
+                    var l = this.checkClassicItem(collection.items, start + 1, true); //next valid item
+                    if (l === end) {
+                        expandItemsToLarge(start, end, shrinkColumn);
+                    }
+                    else {
+                        expandItemsToLarge(start, end, shrinkColumn, l);
+                    }
                 }
                 else {
-                    expandCollectionsToLarge(start, end, shrinkColumn);
+                    var m = this.checkClassicCollection(group.collections, start + 1, true); //next valid item
+                    if (m === end) {
+                        expandCollectionsToLarge(start, end, shrinkColumn);
+                    }
+                    else {
+                        expandCollectionsToLarge(start, end, shrinkColumn, m);
+                    }
                 }
                 if (!shouldSkip || shouldClear) {
                     shrinkColumn.removeAttribute('data-large-width');
@@ -962,7 +1347,7 @@ var Ribbon = /** @class */ (function (_super) {
             //Expanding the items in the group to their original expanded state
             this_1.checkSmallToMedium(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
             this_1.checkMediumToLarge(tabIndex, tab, groupIndex, tabContent, activeContent, true, false);
-            var dropdown = this_1.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow);
+            var dropdown = this_1.ribbonDropDownModule.createOverFlowDropDown(group.id, group.header, group.groupIconCss, groupContainer, groupOverFlow, this_1.enableRtl);
             this_1.tabs[parseInt(tabIndex.toString(), 10)].
                 groups[parseInt(groupIndex.toString(), 10)].setProperties({ isCollapsed: true }, true);
             for (var j = 0; j < group.collections.length; j++) {
@@ -971,7 +1356,9 @@ var Ribbon = /** @class */ (function (_super) {
                 for (var k = 0; k < collection.items.length; k++) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + constants.CONTAINER_ID);
-                    this_1.addOverflowEvents(item, itemEle, dropdown);
+                    if (itemEle !== null) {
+                        this_1.addOverflowEvents(item, itemEle, dropdown);
+                    }
                 }
             }
         };
@@ -1011,7 +1398,9 @@ var Ribbon = /** @class */ (function (_super) {
                 for (var k = 0; k < collection.items.length; k++) {
                     var item = collection.items[parseInt(k.toString(), 10)];
                     var itemEle = collectionEle.querySelector('#' + item.id + constants.CONTAINER_ID);
-                    this_2.removeOverflowEvent(item, itemEle);
+                    if (itemEle !== null) {
+                        this_2.removeOverflowEvent(item, itemEle);
+                    }
                 }
             }
         };
@@ -1069,6 +1458,7 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.ribbonTabSelecting = function (e) {
         var _this = this;
+        this.currentControlIndex = 0;
         var nextTabId = e.selectingItem.getAttribute('data-id');
         var previousTabId = e.previousItem.getAttribute('data-id');
         var nextIndex = getIndex(this.tabs, (function (tab) { return (tab.id === nextTabId); }));
@@ -1125,11 +1515,13 @@ var Ribbon = /** @class */ (function (_super) {
         this.checkOverflow(this.selectedTab, activeContent);
     };
     Ribbon.prototype.addOverflowButton = function (btnId) {
+        var _this = this;
         var overflowButton = this.createElement('button', {
             id: btnId
         });
         var overflowTarget = this.createElement('div', {
-            className: constants.RIBBON_OVERFLOW_TARGET
+            className: constants.RIBBON_OVERFLOW_TARGET,
+            attrs: { 'tabindex': '0' }
         });
         var overflowDDB = new DropDownButton({
             iconCss: constants.OVERFLOW_ICON,
@@ -1147,8 +1539,112 @@ var Ribbon = /** @class */ (function (_super) {
         }, overflowButton);
         this.element.classList.add(constants.RIBBON_OVERFLOW);
         createTooltip(overflowTarget, this);
+        var isGroupOf;
+        overflowButton.onkeydown = overflowButton.onclick = function () { _this.itemIndex = -1; isGroupOf = overflowButton.classList.contains('e-ribbon-overall-of-btn') ? false : true; };
+        overflowTarget.onkeydown = function (e) { return (_this.upDownKeyHandler(e, overflowTarget, isGroupOf), _this); };
         return overflowDDB;
     };
+    Ribbon.prototype.upDownKeyHandler = function (e, target, isGroupOf) {
+        var items;
+        if (isGroupOf) {
+            items = target.getElementsByClassName('e-ribbon-item');
+        }
+        else {
+            var currentList = target.querySelector('.e-ribbon-of-tab.e-ribbon-active');
+            items = currentList.getElementsByClassName('e-ribbon-item');
+        }
+        var comboBoxEle = items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-control').classList.contains('e-combobox') ? items[(!this.itemIndex || this.itemIndex < 0) ? 0 : this.itemIndex].querySelector('.e-combobox') : null;
+        var ribbonItem;
+        if (comboBoxEle === null || (e.key === 'Tab') || this.itemIndex < 0) {
+            if (e.key === 'ArrowDown' || (!e.shiftKey && e.key === 'Tab')) {
+                if ((!this.itemIndex && this.itemIndex !== 0) || this.itemIndex < 0 || this.itemIndex === items.length - 1) {
+                    this.itemIndex = 0;
+                    ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                    this.findDisabledItem(ribbonItem, items, true);
+                    if (comboBoxEle && e.key === 'Tab') {
+                        e.preventDefault();
+                        items[this.itemIndex].querySelector('.e-control').focus();
+                    }
+                }
+                else if (this.itemIndex < items.length - 1 && this.itemIndex >= 0) {
+                    this.itemIndex++;
+                    ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                    this.findDisabledItem(ribbonItem, items, true);
+                }
+            }
+            else if (e.key === 'ArrowUp' || (e.shiftKey && e.key === 'Tab')) {
+                if (comboBoxEle === null || (e.key === 'Tab')) {
+                    if (!this.itemIndex || this.itemIndex === -1) {
+                        this.itemIndex = items.length - 1;
+                        ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                        this.findDisabledItem(ribbonItem, items, false);
+                        if (comboBoxEle && (e.shiftKey && e.key === 'Tab')) {
+                            e.preventDefault();
+                            items[this.itemIndex].querySelector('.e-control').focus();
+                        }
+                    }
+                    else if (this.itemIndex <= items.length - 1 && this.itemIndex > 0) {
+                        this.itemIndex--;
+                        ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+                        this.findDisabledItem(ribbonItem, items, false);
+                    }
+                }
+            }
+            target.setAttribute('index', this.itemIndex.toString());
+        }
+        var currentItemIndex = parseInt(target.getAttribute('index'), 10);
+        var itemType = items[parseInt(currentItemIndex.toString(), 10)] ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').getAttribute('data-control') : null;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === ' ' || e.key === 'Tab') {
+            if (itemType === 'ColorPicker') {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                }
+                items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-split-colorpicker').focus();
+            }
+            else {
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                }
+                items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+            }
+            if (e.key === ' ' && (itemType === 'CheckBox')) {
+                var checkBoxEle = items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control');
+                var checkBox = getComponent(checkBoxEle, CheckBox);
+                this.itemIndex = -1;
+                checkBox.click();
+            }
+        }
+        if (((itemType === 'SplitButton') && (e.key === 'ArrowRight' || e.key === 'ArrowLeft'))) {
+            if (e.key === 'ArrowRight') {
+                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus() :
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus();
+            }
+            if (e.key === 'ArrowLeft') {
+                this.enableRtl ? items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-dropdown-btn').focus() :
+                    items[parseInt(currentItemIndex.toString(), 10)].querySelector('.e-control').focus();
+            }
+        }
+        if (e.key === 'Enter') {
+            this.itemIndex = -1;
+        }
+    };
+    Ribbon.prototype.findDisabledItem = function (ribbonItem, items, isIncrease) {
+        while (ribbonItem && ribbonItem.classList.contains('e-disabled')) {
+            if (isIncrease) {
+                if (this.itemIndex === items.length - 1 && items[this.itemIndex].closest('.e-ribbon-item').classList.contains('e-disabled')) {
+                    this.itemIndex = -1;
+                }
+            }
+            else {
+                if (this.itemIndex === 0 && items[this.itemIndex].closest('.e-ribbon-item').classList.contains('e-disabled')) {
+                    this.itemIndex = items.length;
+                }
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            isIncrease ? this.itemIndex++ : this.itemIndex--;
+            ribbonItem = items[this.itemIndex].closest('.e-ribbon-item');
+        }
+    };
     Ribbon.prototype.removeOverflowButton = function (overflowDDB) {
         if (overflowDDB) {
             var btnEle = overflowDDB.element;
@@ -1238,6 +1734,7 @@ var Ribbon = /** @class */ (function (_super) {
         }
     };
     Ribbon.prototype.switchLayout = function () {
+        this.currentControlIndex = 0;
         this.destroyScroll();
         this.collapseButton.classList.toggle(constants.RIBBON_EXPAND_BUTTON, this.activeLayout === 'Simplified');
         this.element.classList.toggle(constants.RIBBON_SIMPLIFIED_MODE, this.activeLayout === 'Simplified');
@@ -1252,6 +1749,7 @@ var Ribbon = /** @class */ (function (_super) {
                 if (this.activeLayout === 'Simplified') {
                     for (var i_1 = 0; i_1 < groupList.length; i_1++) {
                         var group = groupList[parseInt(i_1.toString(), 10)];
+                        var alignType = groupList[parseInt(i_1.toString(), 10)].orientation;
                         if (group.isCollapsed) {
                             group.setProperties({ isCollapsed: false }, true);
                             this.removeDropdown(group.id);
@@ -1279,11 +1777,11 @@ var Ribbon = /** @class */ (function (_super) {
                                 var itemList = collection.items;
                                 var item = collection.items[parseInt(k.toString(), 10)];
                                 var flag = true;
-                                while ((flag) && (item.displayOptions === DisplayMode.None)) {
+                                while ((flag) && (item.displayOptions === DisplayMode.Classic)) {
                                     k++;
                                     var itemEle_1 = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                    var ele_8 = itemEle_1.querySelector('#' + item.id);
-                                    this.destroyFunction(item, ele_8);
+                                    var ele = itemEle_1.querySelector('#' + item.id);
+                                    this.destroyFunction(item, ele);
                                     itemEle_1.remove();
                                     if (k < itemList.length) {
                                         item = itemList[parseInt(k.toString(), 10)];
@@ -1295,19 +1793,29 @@ var Ribbon = /** @class */ (function (_super) {
                                 if (!flag) {
                                     break;
                                 }
-                                var itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                var ele = itemEle.querySelector('#' + item.id);
                                 var size = ((item.allowedSizes === RibbonItemSize.Large) ||
                                     (item.allowedSizes & RibbonItemSize.Medium)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
-                                if (item.displayOptions === DisplayMode.Overflow) {
-                                    this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
-                                    size = RibbonItemSize.Medium;
-                                    if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
-                                        this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
+                                size = (!(item.displayOptions & DisplayMode.Simplified) && (item.displayOptions & DisplayMode.Overflow))
+                                    ? RibbonItemSize.Medium : size;
+                                var itemEle = void 0;
+                                if (!(item.displayOptions & DisplayMode.Classic)) {
+                                    itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer)[0];
+                                    if (item.displayOptions & DisplayMode.Simplified) {
+                                        groupCollection.append(itemEle);
                                     }
                                 }
-                                item.setProperties({ activeSize: size }, true);
-                                this.setItemSize(ele, item);
+                                else {
+                                    itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
+                                    if (item.displayOptions === (DisplayMode.Classic | DisplayMode.Overflow)) {
+                                        this.createOverflowPopup(item, tabIndex, group.enableGroupOverflow, group.id, group.header, itemEle, groupContainer);
+                                        if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
+                                            this.updatePopupItems(item, itemEle, group.enableGroupOverflow, true);
+                                        }
+                                    }
+                                    item.setProperties({ activeSize: size }, true);
+                                    var ele = itemEle.querySelector('#' + item.id);
+                                    this.setItemSize(ele, item);
+                                }
                             }
                         }
                         if (!(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
@@ -1354,22 +1862,37 @@ var Ribbon = /** @class */ (function (_super) {
                                 groupCollection.classList.replace(constants.RIBBON_COLUMN, constants.RIBBON_ROW);
                             }
                             for (var k = 0; k < collection.items.length; k++) {
+                                var itemList = collection.items;
                                 var item = collection.items[parseInt(k.toString(), 10)];
-                                if (item.displayOptions === DisplayMode.None) {
-                                    var itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex)[0];
-                                    groupCollection.append(itemEle);
-                                }
-                                else if ((item.displayOptions === DisplayMode.Overflow)) {
-                                    var itemEle = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
-                                    if ((item.type === RibbonItemType.DropDown) || (item.type === RibbonItemType.SplitButton)) {
-                                        this.updatePopupItems(item, itemEle, group.enableGroupOverflow, false);
+                                var flag = true;
+                                while ((flag) && !(item.displayOptions & DisplayMode.Classic)) {
+                                    k++;
+                                    var itemEle = void 0;
+                                    if ((item.displayOptions & DisplayMode.Simplified) || (item.displayOptions & DisplayMode.Overflow)) {
+                                        if (item.displayOptions & DisplayMode.Simplified) {
+                                            itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
+                                        }
+                                        else {
+                                            itemEle = overflowtarget.querySelector('#' + item.id + constants.CONTAINER_ID);
+                                        }
+                                        if (itemEle !== null) {
+                                            var ele_8 = itemEle.querySelector('#' + item.id);
+                                            this.destroyFunction(item, ele_8);
+                                            itemEle.remove();
+                                        }
+                                    }
+                                    if (k < itemList.length) {
+                                        item = itemList[parseInt(k.toString(), 10)];
+                                    }
+                                    else {
+                                        flag = false;
                                     }
-                                    groupCollection.append(itemEle);
-                                    this.removeOverflowEvent(item, itemEle);
                                 }
-                                else if ((item.displayOptions === DisplayMode.Simplified)) {
-                                    //To make sure the items are in proper order
-                                    var itemEle = groupContainer.querySelector('#' + item.id + constants.CONTAINER_ID);
+                                if (!flag) {
+                                    break;
+                                }
+                                if (!(item.displayOptions & (DisplayMode.Simplified | DisplayMode.Overflow))) {
+                                    var itemEle = this.createItems([item], alignType, group.id, group.header, group.enableGroupOverflow, tabIndex)[0];
                                     groupCollection.append(itemEle);
                                 }
                                 else {
@@ -1407,36 +1930,51 @@ var Ribbon = /** @class */ (function (_super) {
             this.overflowDDB = null;
         }
     };
+    Ribbon.prototype.createLauncherIcon = function (groupId, groupContainer) {
+        var _this = this;
+        var launcherIcon = this.createElement('div', {
+            className: constants.RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss ? this.launcherIconCss : constants.RIBBON_LAUNCHER_ICON),
+            id: groupId + constants.LAUNCHER_ID,
+            attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Launcher Icon', 'role': 'button' }
+        });
+        groupContainer.appendChild(launcherIcon);
+        groupContainer.classList.add(constants.RIBBON_LAUNCHER);
+        EventHandler.add(launcherIcon, 'click', this.launcherIconClicked.bind(this, groupId), this);
+        EventHandler.add(launcherIcon, 'keydown', function (e) {
+            if (e.key === 'Enter') {
+                _this.launcherIconClicked(groupId);
+            }
+        }, this);
+    };
     Ribbon.prototype.launcherIconClicked = function (id) {
         var eventArgs = { groupId: id };
         this.trigger('launcherIconClick', eventArgs);
     };
     Ribbon.prototype.createGroups = function (groupList, tabIndex) {
-        var _this = this;
         var groupElements = [];
-        var _loop_3 = function (i) {
+        for (var i = 0; i < groupList.length; i++) {
             var group = groupList[parseInt(i.toString(), 10)];
             var alignType = group.orientation;
-            var groupEle = this_3.createElement('div', {
+            var groupEle = this.createElement('div', {
                 className: group.cssClass,
                 id: group.id
             });
             groupEle.classList.add(constants.RIBBON_GROUP);
             groupElements.push(groupEle);
-            var groupContainer = this_3.createElement('div', {
+            var groupContainer = this.createElement('div', {
                 className: group.cssClass,
                 id: group.id + constants.CONTAINER_ID
             });
             groupContainer.classList.add(constants.RIBBON_GROUP_CONTAINER);
             groupEle.appendChild(groupContainer);
-            var groupContent = this_3.createElement('div', {
-                className: this_3.activeLayout === 'Simplified' ? constants.RIBBON_GROUP_CONTENT : (constants.RIBBON_GROUP_CONTENT + constants.SPACE + constants.RIBBON_CONTENT_HEIGHT),
+            var groupContent = this.createElement('div', {
+                className: this.activeLayout === 'Simplified' ? constants.RIBBON_GROUP_CONTENT : (constants.RIBBON_GROUP_CONTENT + constants.SPACE + constants.RIBBON_CONTENT_HEIGHT),
                 id: group.id + constants.CONTENT_ID
             });
-            groupContent.classList.add(((alignType === 'Column') || (this_3.activeLayout === 'Simplified')) ? constants.RIBBON_COLUMN : constants.RIBBON_ROW);
+            groupContent.classList.add(((alignType === 'Column') || (this.activeLayout === 'Simplified')) ? constants.RIBBON_COLUMN : constants.RIBBON_ROW);
             groupContainer.appendChild(groupContent);
-            if (this_3.activeLayout === 'Classic') {
-                var groupHeader = this_3.createElement('div', {
+            if (this.activeLayout === 'Classic') {
+                var groupHeader = this.createElement('div', {
                     className: constants.RIBBON_GROUP_HEADER,
                     id: group.id + constants.HEADER_ID,
                     innerHTML: group.header
@@ -1444,29 +1982,13 @@ var Ribbon = /** @class */ (function (_super) {
                 groupContainer.appendChild(groupHeader);
             }
             if (group.showLauncherIcon) {
-                var launcherIcon = this_3.createElement('div', {
-                    className: constants.RIBBON_LAUNCHER_ICON_ELE + ' ' + (this_3.launcherIconCss ? this_3.launcherIconCss : constants.RIBBON_LAUNCHER_ICON),
-                    id: group.id + constants.LAUNCHER_ID,
-                    attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Launcher Icon', 'role': 'button' }
-                });
-                groupContainer.appendChild(launcherIcon);
-                groupContainer.classList.add(constants.RIBBON_LAUNCHER);
-                EventHandler.add(launcherIcon, 'click', this_3.launcherIconClicked.bind(this_3, group.id), this_3);
-                EventHandler.add(launcherIcon, 'keydown', function (e) {
-                    if (e.key === 'Enter') {
-                        _this.launcherIconClicked(group.id);
-                    }
-                }, this_3);
+                this.createLauncherIcon(group.id, groupContainer);
             }
-            var elements = this_3.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
+            var elements = this.createCollection(group.collections, group.orientation, group.id, group.header, group.enableGroupOverflow, tabIndex, groupContainer);
             append(elements, groupContent);
-            if ((this_3.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
+            if ((this.activeLayout === 'Simplified') && !(group.enableGroupOverflow || groupEle.querySelector('.' + constants.RIBBON_ITEM))) {
                 groupEle.classList.add('e-ribbon-emptyCollection');
             }
-        };
-        var this_3 = this;
-        for (var i = 0; i < groupList.length; i++) {
-            _loop_3(i);
         }
         return groupElements;
     };
@@ -1528,6 +2050,31 @@ var Ribbon = /** @class */ (function (_super) {
         }
         return collectionElements;
     };
+    Ribbon.prototype.createRibbonItem = function (item, itemEle) {
+        switch (item.type) {
+            case 'Button':
+                this.ribbonButtonModule.createButton(item, itemEle);
+                break;
+            case 'DropDown':
+                this.ribbonDropDownModule.createDropDown(item, itemEle);
+                break;
+            case 'SplitButton':
+                this.ribbonSplitButtonModule.createSplitButton(item, itemEle);
+                break;
+            case 'CheckBox':
+                this.ribbonCheckBoxModule.createCheckBox(item, itemEle);
+                break;
+            case 'ColorPicker':
+                this.ribbonColorPickerModule.createColorPicker(item, itemEle);
+                break;
+            case 'ComboBox':
+                this.ribbonComboBoxModule.createComboBox(item, itemEle);
+                break;
+            case 'Template':
+                this.createTemplateContent(item, itemEle);
+                break;
+        }
+    };
     Ribbon.prototype.createItems = function (itemList, alignType, groupId, groupHeader, isGroupOF, tabIndex, groupContainer) {
         var _a;
         var itemElements = [];
@@ -1535,7 +2082,9 @@ var Ribbon = /** @class */ (function (_super) {
             var item = itemList[parseInt(i.toString(), 10)];
             //To stop rendering of items with simplified mode position type as none
             var flag = true;
-            while ((this.activeLayout === 'Simplified') && (flag) && (item.displayOptions === DisplayMode.None)) {
+            while (flag &&
+                (((this.activeLayout === 'Simplified') && !(item.displayOptions & (DisplayMode.Simplified | DisplayMode.Overflow))) ||
+                    ((this.activeLayout === 'Classic') && !(item.displayOptions & DisplayMode.Classic)))) {
                 i++;
                 if (i < itemList.length) {
                     item = itemList[parseInt(i.toString(), 10)];
@@ -1569,30 +2118,8 @@ var Ribbon = /** @class */ (function (_super) {
             else {
                 itemEle.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.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);
@@ -1627,10 +2154,11 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.createTemplateContent = function (item, itemElement) {
         var itemEle = this.createElement('div', {
-            className: item.disabled ? constants.DISABLED_CSS + constants.SPACE + item.cssClass : item.cssClass,
+            className: item.cssClass ? (constants.RIBBON_TEMPLATE + constants.SPACE + item.cssClass) : constants.RIBBON_TEMPLATE,
             id: item.id
         });
         if (item.disabled) {
+            itemEle.classList.add(constants.DISABLED_CSS);
             itemEle.setAttribute('disabled', '');
         }
         itemElement.appendChild(itemEle);
@@ -1698,13 +2226,15 @@ var Ribbon = /** @class */ (function (_super) {
                         var item = _e[_d];
                         var ele = null;
                         if (this.activeLayout === RibbonLayout.Classic) {
-                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            if (item.displayOptions & DisplayMode.Classic) {
+                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            }
                         }
                         else {
-                            //Checks for Simplified and Auto options (Auto = simplified + popup)
+                            //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
                             ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id) : null;
                             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-                            if (!ele && (item.displayOptions !== DisplayMode.None)) {
+                            if (!ele) {
                                 ele = dropdown.target.querySelector('#' + item.id);
                                 if (item.type === 'DropDown') {
                                     this.updatePopupItems(item, dropdown.target, group.enableGroupOverflow, true);
@@ -1760,15 +2290,17 @@ var Ribbon = /** @class */ (function (_super) {
                         var item = _e[_d];
                         var ele = void 0;
                         if (this.activeLayout === RibbonLayout.Classic) {
-                            ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) :
-                                contentEle.querySelector('#' + item.id);
+                            if (item.displayOptions & DisplayMode.Classic) {
+                                ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) :
+                                    contentEle.querySelector('#' + item.id);
+                            }
                         }
                         else {
-                            //Checks for Simplified and Auto options (Auto = simplified + popup)
+                            //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
                             ele = (item.displayOptions & DisplayMode.Simplified) ?
                                 contentEle.querySelector('#' + item.id) : null;
                             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-                            if (!ele && (item.displayOptions !== DisplayMode.None)) {
+                            if (!ele) {
                                 ele = dropdown ? dropdown.target.querySelector('#' + item.id) : null;
                             }
                         }
@@ -1792,7 +2324,10 @@ var Ribbon = /** @class */ (function (_super) {
     };
     Ribbon.prototype.destroyFunction = function (item, ele) {
         var moduleName = this.getItemModuleName(item);
-        if (moduleName !== 'template') {
+        if (moduleName === 'colorpicker') {
+            this.ribbonColorPickerModule.unwireColorPickerEvents(ele);
+        }
+        else if (moduleName !== 'template') {
             destroyControl(ele, moduleName);
         }
         if (item.ribbonTooltipSettings) {
@@ -2187,16 +2722,382 @@ var Ribbon = /** @class */ (function (_super) {
             this.refreshLayout();
         }
     };
+    /**
+     * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
+     *
+     * @param {RibbonTabModel} tab - Gets the ribbon tab model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateTab = function (tab) {
+        var tabId = tab.id;
+        var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
+        if (index === -1) {
+            return;
+        }
+        var contentEle = this.tabObj.items[parseInt(index.toString(), 10)].content;
+        var groups = this.tabs[parseInt(index.toString(), 10)].groups;
+        var tabEle = this.tabObj.element;
+        if (groups && (contentEle.innerHTML !== '')) {
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (tab.cssClass) {
+                if (this.tabs[parseInt(index.toString(), 10)].cssClass) {
+                    contentEle.classList.remove(this.tabs[parseInt(index.toString(), 10)].cssClass);
+                    tabEle.querySelector('.e-active').classList.remove(this.tabs[parseInt(index.toString(), 10)].cssClass);
+                }
+            }
+            // Check whether group is passed by the user, and if it is, then remove the old values.
+            if (tab.groups) {
+                for (var _i = 0, groups_2 = groups; _i < groups_2.length; _i++) {
+                    var group = groups_2[_i];
+                    var dropdownElement = group.isCollapsed ? contentEle.querySelector('#' + group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID) : null;
+                    for (var _a = 0, _b = group.collections; _a < _b.length; _a++) {
+                        var collection = _b[_a];
+                        for (var _c = 0, _d = collection.items; _c < _d.length; _c++) {
+                            var item = _d[_c];
+                            var ele = dropdownElement ? this.ribbonDropDownModule.getDDBItemElement(dropdownElement, item.id) : contentEle.querySelector('#' + item.id);
+                            if (ele) {
+                                this.destroyFunction(item, ele);
+                            }
+                        }
+                    }
+                    if (dropdownElement) {
+                        this.ribbonDropDownModule.removeOverFlowDropDown(dropdownElement);
+                    }
+                }
+                var groupElements = contentEle.querySelectorAll('.e-ribbon-group');
+                // eslint-disable-next-line @typescript-eslint/tslint/config
+                groupElements.forEach(function (groupEle) { groupEle.remove(); });
+            }
+        }
+        if (index === this.selectedTab) {
+            this.isAddRemove = true;
+        }
+        var ribbonTab = this.tabs[parseInt(index.toString(), 10)];
+        ribbonTab.setProperties(tab, true);
+        this.setProperties({ groups: this.checkID(ribbonTab.groups, 'group', ribbonTab.id) }, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML === '') {
+            // Check whether group is passed by the user and sets the updated values.
+            if (tab.groups) {
+                var elements = this.createGroups(ribbonTab.groups, index);
+                append(elements, contentEle);
+            }
+            if (this.selectedTab === index) {
+                this.refreshLayout();
+            }
+            // Check whether cssClass is passed by the user and sets the updated values.
+            if (tab.cssClass) {
+                contentEle.classList.add(ribbonTab.cssClass);
+                tabEle.querySelector('.e-active').classList.add(ribbonTab.cssClass);
+            }
+            // Check whether header is passed by the user and sets the updated values.
+            if (tab.header) {
+                tabEle.querySelector('#' + tabId + constants.HEADER_ID).innerText = ribbonTab.header;
+            }
+        }
+    };
+    /**
+     * group - Gets the ribbon group to be updated. The id of the group is a required property. Other properties are optional.
+     *
+     * @param {RibbonGroupModel} group - Gets the ribbon group model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateGroup = function (group) {
+        var groupId = group.id;
+        var itemProp = getGroup(this.tabs, groupId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var groupEle = contentEle.querySelector('#' + groupId);
+        var groupContainer = groupEle.querySelector('#' + group.id + constants.CONTAINER_ID);
+        var dropdownElement;
+        var dropdown;
+        if (contentEle.innerHTML !== '') {
+            if (itemProp.group.showLauncherIcon) {
+                this.removeLauncherIcon(itemProp.group.id, null, contentEle);
+            }
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                dropdownElement = itemProp.group.enableGroupOverflow ?
+                    contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID) : null;
+                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+            }
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (group.cssClass) {
+                if (itemProp.group.cssClass) {
+                    groupEle.classList.remove(itemProp.group.cssClass);
+                    if (groupContainer) {
+                        groupContainer.classList.remove(itemProp.group.cssClass);
+                    }
+                }
+            }
+            // Check whether collections or orientation is passed by the user, and if it is, then remove the old values.
+            if (group.collections || group.orientation) {
+                if (itemProp.group.collections || itemProp.group.orientation) {
+                    for (var _i = 0, _a = itemProp.group.collections; _i < _a.length; _i++) {
+                        var collection = _a[_i];
+                        for (var _b = 0, _c = collection.items; _b < _c.length; _b++) {
+                            var item = _c[_b];
+                            this.removeItemElement(contentEle, item, dropdown);
+                        }
+                    }
+                    var collectionElements = groupEle.querySelectorAll('.e-ribbon-collection');
+                    // eslint-disable-next-line @typescript-eslint/tslint/config
+                    collectionElements.forEach(function (collectionEle) { collectionEle.remove(); });
+                    if (group.orientation) {
+                        var groupContent = groupContainer.querySelector('.e-ribbon-group-content');
+                        var removeCss = groupContent.classList.value.match(/(e-ribbon-[column|row]+)/g);
+                        if (removeCss) {
+                            removeClass([groupContent], removeCss);
+                        }
+                    }
+                }
+            }
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                if (itemProp.group.enableGroupOverflow) {
+                    if (dropdown.target.childElementCount === 0) {
+                        this.removeOverflowButton(dropdown);
+                    }
+                }
+                else {
+                    var ofGroupContainer = dropdown.target.querySelector('#' + itemProp.group.id + constants.CONTAINER_ID);
+                    if (ofGroupContainer && ofGroupContainer.childElementCount === 1) {
+                        ofGroupContainer.remove();
+                    }
+                    var ofTabContainer = dropdown.target.querySelector('#' + this.tabs[parseInt(itemProp.tabIndex.toString(), 10)].id + constants.OVERFLOW_ID);
+                    if (ofTabContainer && ofTabContainer.childElementCount === 0) {
+                        ofTabContainer.remove();
+                    }
+                }
+            }
+        }
+        var ribbongroup = itemProp.group;
+        ribbongroup.setProperties(group, true);
+        ribbongroup.setProperties({ collections: this.checkID(ribbongroup.collections, 'collection', ribbongroup.id) }, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML !== '') {
+            // Check whether showLauncherIcon or orientation is passed by the user and sets the updated values.
+            if (group.showLauncherIcon) {
+                this.createLauncherIcon(ribbongroup.id, groupContainer);
+            }
+            // Check whether collections or orientation is passed by the user and sets the updated values.
+            if (group.collections || group.orientation) {
+                var groupContent = groupContainer.querySelector('.e-ribbon-group-content');
+                groupContent.classList.add(((ribbongroup.orientation === 'Column') || (this.activeLayout === 'Simplified')) ? constants.RIBBON_COLUMN : constants.RIBBON_ROW);
+                var elements = this.createCollection(ribbongroup.collections, ribbongroup.orientation, ribbongroup.id, ribbongroup.header, ribbongroup.enableGroupOverflow, itemProp.tabIndex, groupContainer);
+                append(elements, groupContent);
+            }
+            if (this.selectedTab === itemProp.tabIndex) {
+                this.refreshLayout();
+            }
+            // Check whether cssClass is passed by the user and sets the updated values.
+            if (group.cssClass) {
+                groupEle.classList.add(ribbongroup.cssClass);
+                if (groupContainer) {
+                    groupContainer.classList.add(ribbongroup.cssClass);
+                }
+            }
+            // Check whether header is passed by the user and sets the updated values.
+            if (group.header) {
+                if (this.activeLayout === RibbonLayout.Simplified && !group.enableGroupOverflow) {
+                    var overflowHeader = dropdown.target.querySelector('#' + group.id + constants.HEADER_ID);
+                    if (overflowHeader) {
+                        overflowHeader.innerText = ribbongroup.header;
+                    }
+                }
+                else if (this.activeLayout === RibbonLayout.Classic && !ribbongroup.isCollapsed) {
+                    groupEle.querySelector('.e-ribbon-group-header').innerText = ribbongroup.header;
+                }
+                else if (this.activeLayout === RibbonLayout.Classic && ribbongroup.isCollapsed) {
+                    var overflowEle = groupEle.querySelector('#' + ribbongroup.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID);
+                    // need to set instance for dropdown
+                    var dropDownBtn = getInstance(overflowEle, DropDownButton);
+                    var overflowHeader = dropDownBtn.target.querySelector('#' + group.id + constants.HEADER_ID);
+                    if (overflowHeader) {
+                        overflowHeader.innerText = ribbongroup.header;
+                    }
+                }
+            }
+        }
+    };
+    /**
+     * collection - Gets the ribbon collection to be updated. The id of the collection is a required property. Other properties are optional.
+     *
+     * @param {RibbonCollectionModel} collection - Gets the ribbon collection model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateCollection = function (collection) {
+        var collectionId = collection.id;
+        var itemProp = getCollection(this.tabs, collectionId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var collectionEle = contentEle.querySelector('#' + collectionId);
+        if (contentEle.innerHTML !== '') {
+            var dropdownElement = void 0;
+            var dropdown = void 0;
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                dropdownElement = itemProp.group.enableGroupOverflow ?
+                    contentEle.querySelector('#' + itemProp.group.id + constants.GROUPOF_BUTTON_ID) : null;
+                dropdown = dropdownElement ? getComponent(dropdownElement, DropDownButton) : this.overflowDDB;
+            }
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (collection.cssClass) {
+                if (itemProp.collection.cssClass) {
+                    collectionEle.classList.remove(itemProp.collection.cssClass);
+                }
+            }
+            if (collection.items) {
+                if (itemProp.collection.items) {
+                    for (var _i = 0, _a = itemProp.collection.items; _i < _a.length; _i++) {
+                        var item = _a[_i];
+                        this.removeItemElement(contentEle, item, dropdown);
+                    }
+                }
+            }
+        }
+        var ribboncollection = itemProp.collection;
+        ribboncollection.setProperties(collection, true);
+        ribboncollection.setProperties({ items: this.checkID(ribboncollection.items, 'item', ribboncollection.id) }, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML !== '') {
+            if (collection.items) {
+                var groupContainer = contentEle.querySelector('#' + itemProp.group.id + constants.CONTAINER_ID);
+                var elements = this.createItems(ribboncollection.items, itemProp.group.orientation, itemProp.group.id, itemProp.group.header, itemProp.group.enableGroupOverflow, itemProp.tabIndex, groupContainer);
+                append(elements, collectionEle);
+            }
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.refreshLayout();
+        }
+        // Check whether cssClass is passed by the user and sets the updated values.
+        if (collection.cssClass) {
+            collectionEle.classList.add(ribboncollection.cssClass);
+        }
+    };
+    /**
+     * item - Gets the ribbon item to be updated. The id of the item is a required property. Other properties are optional.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     */
+    Ribbon.prototype.updateItem = function (item) {
+        var itemId = item.id;
+        var itemProp = getItem(this.tabs, itemId);
+        if (!itemProp) {
+            return;
+        }
+        if (this.selectedTab === itemProp.tabIndex) {
+            this.clearOverflowResize();
+        }
+        //Check whether the tab items are rendered
+        var contentEle = this.tabObj.items[itemProp.tabIndex].content;
+        var groupEle = contentEle.querySelector('#' + itemProp.group.id);
+        var groupContainer = groupEle.querySelector('#' + itemProp.group.id + constants.CONTAINER_ID);
+        var itemContainer = null;
+        var itemEle = null;
+        var dropdownElement;
+        var dropdown;
+        if (contentEle.innerHTML !== '') {
+            if (this.activeLayout === RibbonLayout.Simplified) {
+                dropdownElement = itemProp.group.enableGroupOverflow ?
+                    contentEle.querySelector('#' + itemProp.group.id + constants.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 + constants.CONTAINER_ID);
+                itemEle = dropdown.target.querySelector('#' + itemId);
+                if (item.displayOptions && item.displayOptions !== DisplayMode.Overflow) {
+                    var collectionEle = groupContainer.querySelector('#' + itemProp.collection.id);
+                    if (collectionEle) {
+                        collectionEle.appendChild(itemContainer);
+                    }
+                }
+            }
+            else {
+                itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
+                itemEle = contentEle.querySelector('#' + itemId);
+                if (this.activeLayout === RibbonLayout.Simplified && item.displayOptions === DisplayMode.Overflow) {
+                    this.createOverflowPopup(itemProp.item, itemProp.tabIndex, itemProp.group.enableGroupOverflow, itemProp.group.id, itemProp.group.header, itemContainer, groupContainer);
+                    if ((itemProp.item.type === RibbonItemType.DropDown) || (itemProp.item.type === RibbonItemType.SplitButton)) {
+                        this.updatePopupItems(itemProp.item, itemContainer, itemProp.group.enableGroupOverflow, true);
+                    }
+                }
+            }
+            // Check whether cssClass is passed by the user, and if it is, then remove the old values.
+            if (item.cssClass) {
+                if (itemProp.item.cssClass) {
+                    itemContainer.classList.remove(itemProp.item.cssClass);
+                }
+            }
+            this.destroyFunction(itemProp.item, itemEle);
+            itemEle.remove();
+            var removeCss = itemContainer.classList.value.match(/(e-ribbon-[large|medium|small]+-item)/g);
+            if (removeCss) {
+                removeClass([itemContainer], removeCss);
+            }
+        }
+        var ribbonItem = itemProp.item;
+        ribbonItem.setProperties(item, true);
+        this.validateItemSize();
+        if (contentEle.innerHTML !== '') {
+            if (!(this.activeLayout === RibbonLayout.Simplified && ribbonItem.displayOptions === DisplayMode.Overflow)) {
+                itemContainer = groupContainer.querySelector('#' + itemId + constants.CONTAINER_ID);
+            }
+            else {
+                itemContainer = dropdown.target.querySelector('#' + itemId + constants.CONTAINER_ID);
+            }
+            // To avoid undefined items condition is added
+            if (ribbonItem.ribbonTooltipSettings && isTooltipPresent(ribbonItem.ribbonTooltipSettings)) {
+                itemContainer.classList.add(constants.RIBBON_TOOLTIP_TARGET);
+                this.tooltipData.push({ id: itemContainer.id, data: ribbonItem.ribbonTooltipSettings });
+            }
+            var size = ribbonItem.activeSize;
+            if (this.activeLayout === 'Simplified') {
+                size = ((ribbonItem.allowedSizes === RibbonItemSize.Large) || (ribbonItem.allowedSizes & RibbonItemSize.Medium) ||
+                    (ribbonItem.displayOptions === DisplayMode.Overflow)) ? RibbonItemSize.Medium : RibbonItemSize.Small;
+                ribbonItem.setProperties({ activeSize: size }, true);
+            }
+            if (size & RibbonItemSize.Large) {
+                itemContainer.classList.add(constants.RIBBON_LARGE_ITEM, constants.RIBBON_CONTENT_HEIGHT);
+            }
+            else {
+                itemContainer.classList.add((size & RibbonItemSize.Medium) ? constants.RIBBON_MEDIUM_ITEM : constants.RIBBON_SMALL_ITEM);
+            }
+            this.createRibbonItem(ribbonItem, itemContainer);
+            if (this.activeLayout === 'Simplified' && itemProp.group.enableGroupOverflow) {
+                if (dropdown.target.childElementCount === 0) {
+                    this.removeOverflowButton(dropdown);
+                }
+            }
+            if (this.selectedTab === itemProp.tabIndex) {
+                this.refreshLayout();
+            }
+            if (item.cssClass) {
+                itemContainer.classList.add(ribbonItem.cssClass);
+            }
+            this.enableDisableItem(ribbonItem.id, ribbonItem.disabled);
+        }
+    };
     Ribbon.prototype.removeItemElement = function (contentEle, item, dropdown) {
         var ele = null;
         if (this.activeLayout === RibbonLayout.Classic) {
-            ele = contentEle.querySelector('#' + item.id);
+            ele = (item.displayOptions & DisplayMode.Classic) ? contentEle.querySelector('#' + item.id) : null;
         }
         else {
-            //Checks for Simplified and Auto options (Auto = simplified + popup)
+            //Checks for Simplified and Auto options (Auto = classic + simplified + popup)
             ele = (item.displayOptions & DisplayMode.Simplified) ? contentEle.querySelector('#' + item.id) : null;
             // element will be null for "Popup" and if the item is moved to overflow in "Auto" mode
-            if (!ele && (item.displayOptions !== DisplayMode.None)) {
+            if (!ele) {
                 ele = dropdown.target.querySelector('#' + item.id);
             }
         }
@@ -2247,6 +3148,8 @@ var Ribbon = /** @class */ (function (_super) {
         EventHandler.remove(window, 'resize', this.resizeHandler);
     };
     Ribbon.prototype.destroy = function () {
+        this.keyboardModuleRibbon.destroy();
+        this.keyboardModuleRibbon = null;
         destroyTooltip(this.element);
         this.destroyTabItems(this.tabs);
         this.removeExpandCollapse();
@@ -2298,6 +3201,9 @@ var Ribbon = /** @class */ (function (_super) {
                 case 'isMinimized':
                     this.element.classList.toggle(constants.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 });
@@ -2322,7 +3228,7 @@ var Ribbon = /** @class */ (function (_super) {
                                 if (group.showLauncherIcon) {
                                     var className = constants.RIBBON_LAUNCHER_ICON_ELE + ' ' + (this.launcherIconCss || constants.RIBBON_LAUNCHER_ICON);
                                     if (group.isCollapsed) {
-                                        var element = tabContent.querySelector('.' + constants.RIBBON_GROUP_OVERFLOW_DDB);
+                                        var element = tabContent.querySelector('#' + group.id + constants.OVERFLOW_ID + constants.DROPDOWN_ID);
                                         var dropdown = getComponent(element, DropDownButton);
                                         var launcherIconEle = dropdown.target.querySelector('#' + group.id + constants.LAUNCHER_ID);
                                         launcherIconEle.className = className;
@@ -2347,19 +3253,26 @@ var Ribbon = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     this.element.style.width = formatUnit(newProp.width);
+                    this.refreshLayout();
                     break;
                 case 'fileMenu':
                     if (this.ribbonFileMenuModule) {
                         this.ribbonFileMenuModule.updateFileMenu(this.fileMenu);
                     }
+                    var toolbarEle = this.tabObj['tbObj'];
+                    toolbarEle.refreshOverflow();
                     break;
                 case 'helpPaneTemplate':
                     if (this.ribbonTempEle) {
                         remove(this.ribbonTempEle);
+                        this.ribbonTempEle = null;
+                        this.tabObj.element.style.setProperty(constants.RIBBON_HELP_PANE_TEMPLATE_WIDTH, '0px');
                     }
                     if (this.helpPaneTemplate) {
                         this.createHelpPaneTemplate();
                     }
+                    var toolbar_1 = this.tabObj['tbObj'];
+                    toolbar_1.refreshOverflow();
                     break;
             }
         }