@syncfusion/ej2-ribbon 21.1.35 → 21.1.37

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@0.25.0",
+  "_id": "@syncfusion/ej2-ribbon@21.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-Jvszp1M5UlmZ6eU3vdHZNnbMV6Cz58hLLsV9H3bOo/x6ZDnMXwStNO3uoiYpxPdSHBsUYJmTkmbx11w7PwhzWw==",
+  "_integrity": "sha512-/LDAXvqgmh7oonyPvW0RpUpmajmXn6OHEHDWuQN/4ijVcs+G8xOwH5kD5uFdDKX1uY7mgsFS4CxmIIq2G5JJ0A==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-0.25.0.tgz",
-  "_shasum": "6cc9e0a4bb1042e4132ea627aa8e38ba6db0f5ce",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.1.35.tgz",
+  "_shasum": "c0b6b9ec2253aa727068716ab0d79c122c2d2a89",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.35",
-    "@syncfusion/ej2-buttons": "~21.1.35",
-    "@syncfusion/ej2-dropdowns": "~21.1.35",
-    "@syncfusion/ej2-lists": "~21.1.35",
-    "@syncfusion/ej2-navigations": "~21.1.35",
-    "@syncfusion/ej2-popups": "~21.1.35",
-    "@syncfusion/ej2-splitbuttons": "~21.1.35"
+    "@syncfusion/ej2-base": "~21.1.37",
+    "@syncfusion/ej2-buttons": "~21.1.37",
+    "@syncfusion/ej2-dropdowns": "~21.1.37",
+    "@syncfusion/ej2-lists": "~21.1.37",
+    "@syncfusion/ej2-navigations": "~21.1.37",
+    "@syncfusion/ej2-popups": "~21.1.37",
+    "@syncfusion/ej2-splitbuttons": "~21.1.37"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "21.1.35",
+  "version": "21.1.37",
   "sideEffects": false
 }

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

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, EJ2Control, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/ribbon/base/ribbon.js

@@ -221,7 +221,9 @@ var Ribbon = /** @class */ (function (_super) {
             }
             //Adds Scroll if the tabwidth is less the content width even after adding overflow dropdown.
             if ((tabContent.offsetWidth < activeContent.offsetWidth) && (!this.scrollModule)) {
-                this.scrollModule = new HScroll({}, this.tabObj.element.querySelector('.' + constants.TAB_CONTENT));
+                this.scrollModule = new HScroll({
+                    enableRtl: this.enableRtl
+                }, this.tabObj.element.querySelector('.' + constants.TAB_CONTENT));
             }
         }
         else if (!isOverFlow) {
@@ -302,8 +304,8 @@ var Ribbon = /** @class */ (function (_super) {
             var group = orderedGroups[parseInt(i.toString(), 10)];
             var groupEle = tabContent.querySelector('#' + group.id);
             var groupContainer = groupEle.querySelector('#' + group.id + constants.CONTAINER_ID);
-            for (var j = 0; ((j < group.collections.length) && (tabContent.offsetWidth < activeContent.offsetWidth)); j++) {
-                var collection = group.collections[parseInt(j.toString(), 10)];
+            for (var j = group.collections.length; ((j >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); j--) {
+                var collection = group.collections[parseInt((j - 1).toString(), 10)];
                 var collectionEle = groupEle.querySelector('#' + collection.id);
                 for (var k = collection.items.length; ((k >= 1) && (tabContent.offsetWidth < activeContent.offsetWidth)); k--) {
                     var item = collection.items[k - 1];
@@ -370,8 +372,8 @@ var Ribbon = /** @class */ (function (_super) {
                 overflowDDB = this.overflowDDB;
                 overflowtarget = this.overflowDDB ? this.overflowDDB.target : null;
             }
-            for (var j = (group.collections.length); ((j >= 1) && flag); j--) {
-                var collection = group.collections[parseInt((j - 1).toString(), 10)];
+            for (var j = 0; ((j < group.collections.length) && flag); j++) {
+                var collection = group.collections[parseInt(j.toString(), 10)];
                 // eslint-disable-next-line max-len
                 for (var k = 0; ((k < collection.items.length) && flag && !isClear && (tabContent.offsetWidth > activeContent.offsetWidth)); k++) {
                     var item = collection.items[parseInt(k.toString(), 10)];
@@ -1195,11 +1197,11 @@ var Ribbon = /** @class */ (function (_super) {
         this.collapseButton = this.createElement('span', {
             className: constants.RIBBON_COLLAPSE_BUTTON + constants.SPACE + constants.EXPAND_COLLAPSE_ICON,
             id: this.tabObj.element.id + constants.COLLAPSE_BUTTON_ID,
-            attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Layout Switcher' }
+            attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Layout Switcher', 'role': 'button' }
         });
         this.collapseButton.onclick = function () { _this.toggleLayout(); };
         this.collapseButton.onkeydown = function (e) {
-            if (e.key === "Enter") {
+            if (e.key === 'Enter') {
                 _this.toggleLayout();
             }
         };
@@ -1445,13 +1447,13 @@ var Ribbon = /** @class */ (function (_super) {
                 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' }
+                    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") {
+                    if (e.key === 'Enter') {
                         _this.launcherIconClicked(group.id);
                     }
                 }, this_3);
@@ -1479,7 +1481,9 @@ var Ribbon = /** @class */ (function (_super) {
                     for (var j = 0; j < items.length; j++) {
                         var ribbonitem = items[parseInt(j.toString(), 10)];
                         if (!ribbonitem.allowedSizes || (ribbonitem.allowedSizes === 0)) {
-                            ribbonitem.setProperties({ allowedSizes: (RibbonItemSize.Small | RibbonItemSize.Medium | RibbonItemSize.Large) }, true);
+                            ribbonitem.setProperties({
+                                allowedSizes: (RibbonItemSize.Small | RibbonItemSize.Medium | RibbonItemSize.Large)
+                            }, true);
                         }
                         if ((ribbonitem.type === 'ColorPicker') && (ribbonitem.allowedSizes !== RibbonItemSize.Small)) {
                             ribbonitem.setProperties({ allowedSizes: RibbonItemSize.Small }, true);
@@ -2293,6 +2297,7 @@ var Ribbon = /** @class */ (function (_super) {
                     break;
                 case 'isMinimized':
                     this.element.classList.toggle(constants.RIBBON_MINIMIZE, this.isMinimized);
+                    this.tabObj.element.querySelector('.e-content').style.display = this.isMinimized ? 'none' : 'block';
                     break;
                 case 'locale':
                     this.updateCommonProperty({ locale: this.locale });
@@ -2303,6 +2308,9 @@ var Ribbon = /** @class */ (function (_super) {
                 case 'enableRtl':
                     this.element.classList.toggle(constants.RTL_CSS, this.enableRtl);
                     this.updateCommonProperty({ enableRtl: newProp.enableRtl });
+                    if (this.scrollModule) {
+                        this.scrollModule.setProperties({ enableRtl: newProp.enableRtl });
+                    }
                     break;
                 case 'launcherIconCss':
                     for (var i = 0; i < this.tabs.length; i++) {

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

@@ -8,6 +8,7 @@ import { Ribbon } from './ribbon';
  * @param {Array} arr - Gets the array to find index.
  * @param {boolean} condition - Defines whether index matches with the value.
  * @returns {number} - Gets the index value.
+ * @hidden
  */
 export declare function getIndex<T>(arr: Array<T>, condition: (value: T, index: number) => boolean): number;
 /**
@@ -15,6 +16,7 @@ export declare function getIndex<T>(arr: Array<T>, condition: (value: T, index:
  *
  * @param {string | HTMLElement} template - Template property value.
  * @returns {Function} - Return template function.
+ * @hidden
  */
 export declare function getTemplateFunction(template: string | HTMLElement): Function;
 /**
@@ -23,6 +25,7 @@ export declare function getTemplateFunction(template: string | HTMLElement): Fun
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon item.
+ * @hidden
  */
 export declare function getItem(tabs: RibbonTabModel[], id: string): itemProps;
 /**
@@ -31,6 +34,7 @@ export declare function getItem(tabs: RibbonTabModel[], id: string): itemProps;
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon collection.
+ * @hidden
  */
 export declare function getCollection(tabs: RibbonTabModel[], id: string): itemProps;
 /**
@@ -39,12 +43,14 @@ export declare function getCollection(tabs: RibbonTabModel[], id: string): itemP
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon group.
+ * @hidden
  */
 export declare function getGroup(tabs: RibbonTabModel[], id: string): itemProps;
 /**
  * @param {HTMLElement} element - Gets the element to be destroyed.
  * @param {string} moduleName - Gets the module name.
  * @returns {void}
+ * @hidden
  */
 export declare function destroyControl(element: HTMLElement, moduleName: string): void;
 /**
@@ -54,6 +60,7 @@ export declare function destroyControl(element: HTMLElement, moduleName: string)
  * @param {string} moduleName - Gets the module name.
  * @param {commonProperties} commonProp - Gets the common properties to be updated.
  * @returns {void}
+ * @hidden
  */
 export declare function updateCommonProperty(element: HTMLElement, moduleName: string, commonProp: commonProperties): void;
 /**
@@ -63,20 +70,23 @@ export declare function updateCommonProperty(element: HTMLElement, moduleName: s
  * @param {string} moduleName - Gets the module name.
  * @param {boolean} disable - Defines whether the control to be disabled or not.
  * @returns {void}
+ * @hidden
  */
 export declare function updateControlDisabled(element: HTMLElement, moduleName: string, disable: boolean): void;
 /**
  * Gets the ribbon item element.
  *
  * @param {Ribbon} parent - Gets the parent element.
- * @param {itemProps} itemProp - Gets the ribbon item.
  * @param {string} id - Gets the ID of the item.
+ * @param {itemProps} itemProp - Gets the ribbon item.
  * @returns {HTMLElement} - Gets the ribbon item element.
+ * @hidden
  */
 export declare function getItemElement(parent: Ribbon, id: string, itemProp?: itemProps): HTMLElement;
 /**
  * @param {RibbonTooltipModel} tooltip - Gets the property of tooltip.
  * @returns {boolean} - Gets whether the tooltip is present or not.
+ * @hidden
  */
 export declare function isTooltipPresent(tooltip: RibbonTooltipModel): boolean;
 /**
@@ -86,6 +96,7 @@ export declare function isTooltipPresent(tooltip: RibbonTooltipModel): boolean;
  * @param {Tooltip} tooltip - Gets the tooltip to set the content.
  * @param {ribbonTooltipData} tooltipData - Gets the tooltip data.
  * @returns {void}
+ * @hidden
  */
 export declare function setToolTipContent(args: TooltipEventArgs, tooltip: Tooltip, tooltipData: ribbonTooltipData[]): void;
 /**
@@ -94,6 +105,7 @@ export declare function setToolTipContent(args: TooltipEventArgs, tooltip: Toolt
  * @param {HTMLElement} element - Gets the element to add tooltip.
  * @param {Ribbon} ribbon - Gets the ribbon.
  * @returns {void}
+ * @hidden
  */
 export declare function createTooltip(element: HTMLElement, ribbon: Ribbon): void;
 /**
@@ -101,6 +113,7 @@ export declare function createTooltip(element: HTMLElement, ribbon: Ribbon): voi
  *
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be destroyed.
  * @returns {void}
+ * @hidden
  */
 export declare function destroyTooltip(element: HTMLElement): void;
 /**
@@ -109,5 +122,6 @@ export declare function destroyTooltip(element: HTMLElement): void;
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be Updated.
  * @param {commonProperties} prop - Gets the property to be updated.
  * @returns {void}
+ * @hidden
  */
 export declare function updateTooltipProp(element: HTMLElement, prop: commonProperties): void;

package/src/ribbon/base/utils.js

@@ -9,6 +9,7 @@ import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
  * @param {Array} arr - Gets the array to find index.
  * @param {boolean} condition - Defines whether index matches with the value.
  * @returns {number} - Gets the index value.
+ * @hidden
  */
 export function getIndex(arr, condition) {
     for (var i = 0; i < arr.length; i++) {
@@ -23,6 +24,7 @@ export function getIndex(arr, condition) {
  *
  * @param {string | HTMLElement} template - Template property value.
  * @returns {Function} - Return template function.
+ * @hidden
  */
 export function getTemplateFunction(template) {
     if (typeof template === 'string') {
@@ -53,6 +55,7 @@ export function getTemplateFunction(template) {
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon item.
+ * @hidden
  */
 export function getItem(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -81,6 +84,7 @@ export function getItem(tabs, id) {
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon collection.
+ * @hidden
  */
 export function getCollection(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -106,6 +110,7 @@ export function getCollection(tabs, id) {
  * @param {RibbonTabModel} tabs - Gets the ribbon tab model.
  * @param {string} id - Gets the ID of the tab.
  * @returns {itemProps} - Gets the ribbon group.
+ * @hidden
  */
 export function getGroup(tabs, id) {
     for (var i = 0; i < tabs.length; i++) {
@@ -125,6 +130,7 @@ export function getGroup(tabs, id) {
  * @param {HTMLElement} element - Gets the element to be destroyed.
  * @param {string} moduleName - Gets the module name.
  * @returns {void}
+ * @hidden
  */
 export function destroyControl(element, moduleName) {
     var control = getComponent(element, moduleName);
@@ -137,6 +143,7 @@ export function destroyControl(element, moduleName) {
  * @param {string} moduleName - Gets the module name.
  * @param {commonProperties} commonProp - Gets the common properties to be updated.
  * @returns {void}
+ * @hidden
  */
 export function updateCommonProperty(element, moduleName, commonProp) {
     var control = getComponent(element, moduleName);
@@ -149,6 +156,7 @@ export function updateCommonProperty(element, moduleName, commonProp) {
  * @param {string} moduleName - Gets the module name.
  * @param {boolean} disable - Defines whether the control to be disabled or not.
  * @returns {void}
+ * @hidden
  */
 export function updateControlDisabled(element, moduleName, disable) {
     var control = getComponent(element, moduleName);
@@ -158,9 +166,10 @@ export function updateControlDisabled(element, moduleName, disable) {
  * Gets the ribbon item element.
  *
  * @param {Ribbon} parent - Gets the parent element.
- * @param {itemProps} itemProp - Gets the ribbon item.
  * @param {string} id - Gets the ID of the item.
+ * @param {itemProps} itemProp - Gets the ribbon item.
  * @returns {HTMLElement} - Gets the ribbon item element.
+ * @hidden
  */
 export function getItemElement(parent, id, itemProp) {
     if (!itemProp) {
@@ -195,6 +204,7 @@ export function getItemElement(parent, id, itemProp) {
 /**
  * @param {RibbonTooltipModel} tooltip - Gets the property of tooltip.
  * @returns {boolean} - Gets whether the tooltip is present or not.
+ * @hidden
  */
 export function isTooltipPresent(tooltip) {
     return (tooltip.content || tooltip.iconCss || tooltip.title || tooltip.id || tooltip.cssClass) ? true : false;
@@ -206,6 +216,7 @@ export function isTooltipPresent(tooltip) {
  * @param {Tooltip} tooltip - Gets the tooltip to set the content.
  * @param {ribbonTooltipData} tooltipData - Gets the tooltip data.
  * @returns {void}
+ * @hidden
  */
 export function setToolTipContent(args, tooltip, tooltipData) {
     var targetId = args.target.getAttribute('id');
@@ -249,6 +260,7 @@ export function setToolTipContent(args, tooltip, tooltipData) {
  * @param {HTMLElement} element - Gets the element to add tooltip.
  * @param {Ribbon} ribbon - Gets the ribbon.
  * @returns {void}
+ * @hidden
  */
 export function createTooltip(element, ribbon) {
     var ribbonTooltip = new Tooltip({
@@ -260,6 +272,7 @@ export function createTooltip(element, ribbon) {
     /**
      * @param {TooltipEventArgs} args - Gets the tooltip argument.
      * @returns {void}
+     * @hidden
      */
     function beforeTooltipRender(args) {
         setToolTipContent(args, ribbonTooltip, ribbon.tooltipData);
@@ -270,6 +283,7 @@ export function createTooltip(element, ribbon) {
  *
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be destroyed.
  * @returns {void}
+ * @hidden
  */
 export function destroyTooltip(element) {
     var control = getComponent(element, Tooltip);
@@ -281,6 +295,7 @@ export function destroyTooltip(element) {
  * @param {HTMLElement} element - Gets the element in which the tooltip needs to be Updated.
  * @param {commonProperties} prop - Gets the property to be updated.
  * @returns {void}
+ * @hidden
  */
 export function updateTooltipProp(element, prop) {
     var control = getComponent(element, Tooltip);

package/src/ribbon/items/ribbon-button.d.ts

@@ -33,7 +33,6 @@ export declare class RibbonButton {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-button.js

@@ -48,6 +48,7 @@ var RibbonButton = /** @class */ (function () {
                 btnSettings.clicked.call(_this, e);
             }
         };
+        buttonEle.setAttribute('aria-label', btnSettings.content);
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -75,7 +76,6 @@ var RibbonButton = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */
@@ -129,6 +129,7 @@ var RibbonButton = /** @class */ (function () {
         }
         if (prop.content) {
             prop.content = itemProp.item.activeSize === RibbonItemSize.Small ? '' : prop.content;
+            buttonEle.setAttribute('aria-label', prop.content);
         }
         delete prop.clicked;
         buttonObj.setProperties(prop);

package/src/ribbon/items/ribbon-checkbox.d.ts

@@ -33,7 +33,6 @@ export declare class RibbonCheckBox {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-checkbox.js

@@ -73,7 +73,6 @@ var RibbonCheckBox = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-colorpicker.d.ts

@@ -33,7 +33,6 @@ export declare class RibbonColorPicker {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-colorpicker.js

@@ -90,7 +90,6 @@ var RibbonColorPicker = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-combobox.d.ts

@@ -35,7 +35,6 @@ export declare class RibbonComboBox {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-combobox.js

@@ -97,7 +97,6 @@ var RibbonComboBox = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-dropdown.d.ts

@@ -33,7 +33,6 @@ export declare class RibbonDropDown {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-dropdown.js

@@ -85,7 +85,6 @@ var RibbonDropDown = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-splitbutton.d.ts

@@ -33,7 +33,6 @@ export declare class RibbonSplitButton {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/items/ribbon-splitbutton.js

@@ -105,7 +105,6 @@ var RibbonSplitButton = /** @class */ (function () {
      *
      * @param {RibbonItemModel} item - Gets the ribbon item model.
      * @param {HTMLElement} itemEle - Gets the ribbon item element.
-     * @param {DropDownButton} overflowButton - Gets the overflow button.
      * @returns {void}
      * @hidden
      */

package/src/ribbon/modules/ribbon-filemenu.js

@@ -32,7 +32,7 @@ var RibbonFileMenu = /** @class */ (function () {
             return;
         }
         this.ddbElement = this.parent.createElement('button', {
-            id: this.parent.element.id + constants.RIBBON_FILE_MENU_ID,
+            id: this.parent.element.id + constants.RIBBON_FILE_MENU_ID
         });
         var tabEle = this.parent.tabObj.element;
         var toolbarEle = tabEle.querySelector('.e-toolbar');
@@ -124,7 +124,7 @@ var RibbonFileMenu = /** @class */ (function () {
             select: this.menuSelect.bind(this)
         }, ulElem);
         EventHandler.add(ulElem, 'keydown', function (e) {
-            if (e.key === "Tab") {
+            if (e.key === 'Tab') {
                 _this.fileMenuDDB.toggle();
             }
         }, this);
@@ -133,8 +133,10 @@ var RibbonFileMenu = /** @class */ (function () {
         var event = isOpen ? this.parent.fileMenu.beforeOpen :
             this.parent.fileMenu.beforeClose;
         if (event) {
-            var eventArgs = { cancel: args.cancel, element: args.element, event: args.event,
-                items: args.items, parentItem: args.parentItem };
+            var eventArgs = {
+                cancel: args.cancel, element: args.element, event: args.event,
+                items: args.items, parentItem: args.parentItem
+            };
             event.call(this, eventArgs);
             args.cancel = eventArgs.cancel;
         }

package/styles/bootstrap-dark.css

@@ -216,6 +216,9 @@
   height: auto;
   min-height: auto;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
+  box-shadow: none;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -225,6 +228,7 @@
   min-width: auto;
   width: auto;
   border-style: solid;
+  transform: none;
   border-width: 1px;
   border-radius: 2px;
   z-index: 3;
@@ -235,6 +239,7 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 16px;
   height: auto;
+  transform: none;
   line-height: 16px;
   padding: 0 4px;
   width: auto;
@@ -352,6 +357,9 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-right: 30px;
+}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -363,6 +371,9 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-left: 30px;
+}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {

package/styles/bootstrap.css

@@ -221,6 +221,9 @@
   height: auto;
   min-height: auto;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
+  box-shadow: none;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -230,6 +233,7 @@
   min-width: auto;
   width: auto;
   border-style: solid;
+  transform: none;
   border-width: 1px;
   border-radius: 2px;
   z-index: 3;
@@ -240,6 +244,7 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 16px;
   height: auto;
+  transform: none;
   line-height: 16px;
   padding: 0 4px;
   width: auto;
@@ -357,6 +362,9 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-right: 30px;
+}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -368,6 +376,9 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
+.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
+  padding-left: 30px;
+}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {