@syncfusion/ej2-react-ribbon 21.1.37 → 22.1.34

package/dist/ej2-react-ribbon.umd.min.js

@@ -1,11 +1,11 @@
 /*!
 *  filename: ej2-react-ribbon.umd.min.js
-*  version : 21.1.37
+*  version : 22.1.34
 *  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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under
 *  applicable laws. 
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@syncfusion/ej2-react-base"),require("react"),require("@syncfusion/ej2-ribbon")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-react-base","react","@syncfusion/ej2-ribbon"],e):e(t.ej={},t.ej2ReactBase,t.React,t.ej2Ribbon)}(this,function(t,e,n,o){"use strict";var r=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),i=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return r(e,t),e.moduleName="ribbonTab",e}(e.ComplexBase),u=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return r(e,t),e.propertyName="tabs",e.moduleName="ribbonTabs",e}(e.ComplexBase),c=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),p=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.moduleName="ribbonGroup",e}(e.ComplexBase),s=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.propertyName="groups",e.moduleName="ribbonGroups",e}(e.ComplexBase),a=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),l=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return a(e,t),e.moduleName="ribbonCollection",e}(e.ComplexBase),f=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return a(e,t),e.propertyName="collections",e.moduleName="ribbonCollections",e}(e.ComplexBase),b=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),y=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return b(e,t),e.moduleName="ribbonItem",e}(e.ComplexBase),m=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return b(e,t),e.propertyName="items",e.moduleName="ribbonItems",e}(e.ComplexBase),h=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),_=function(t){function e(e){var n=t.call(this,e)||this;return n.initRenderCalled=!1,n.checkInjectedModules=!0,n.directivekeys={ribbonTabs:{ribbonTab:{ribbonGroups:{ribbonGroup:{ribbonCollections:{ribbonCollection:{ribbonItems:"ribbonItem"}}}}}}},n.statelessTemplateProps=null,n.immediateRender=!1,n.portals=[],n}return h(e,t),e.prototype.render=function(){if(!(this.element&&!this.initRenderCalled||this.refreshing)||this.isReactForeceUpdate)return n.createElement("div",this.getDefaultAttributes(),[].concat(this.props.children,this.portals));t.prototype.render.call(this),this.initRenderCalled=!0},e}(o.Ribbon);e.applyMixins(_,[e.ComponentBase,n.Component]),t.Inject=e.Inject,t.RibbonTabDirective=i,t.RibbonTabsDirective=u,t.RibbonGroupDirective=p,t.RibbonGroupsDirective=s,t.RibbonCollectionDirective=l,t.RibbonCollectionsDirective=f,t.RibbonItemDirective=y,t.RibbonItemsDirective=m,t.RibbonComponent=_,Object.keys(o).forEach(function(e){t[e]=o[e]}),Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@syncfusion/ej2-react-base"),require("react"),require("@syncfusion/ej2-ribbon")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-react-base","react","@syncfusion/ej2-ribbon"],e):e(t.ej={},t.ej2ReactBase,t.React,t.ej2Ribbon)}(this,function(t,e,n,o){"use strict";var r=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),i=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return r(e,t),e.moduleName="ribbonTab",e}(e.ComplexBase),u=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return r(e,t),e.propertyName="tabs",e.moduleName="ribbonTabs",e}(e.ComplexBase),c=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),p=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.moduleName="ribbonGroup",e}(e.ComplexBase),s=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e.propertyName="groups",e.moduleName="ribbonGroups",e}(e.ComplexBase),a=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),l=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return a(e,t),e.moduleName="ribbonCollection",e}(e.ComplexBase),f=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return a(e,t),e.propertyName="collections",e.moduleName="ribbonCollections",e}(e.ComplexBase),b=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),y=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return b(e,t),e.moduleName="ribbonItem",e}(e.ComplexBase),m=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return b(e,t),e.propertyName="items",e.moduleName="ribbonItems",e}(e.ComplexBase),h=function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}}(),_=function(t){function e(e){var n=t.call(this,e)||this;return n.initRenderCalled=!1,n.checkInjectedModules=!0,n.directivekeys={ribbonTabs:{ribbonTab:{ribbonGroups:{ribbonGroup:{ribbonCollections:{ribbonCollection:{ribbonItems:"ribbonItem"}}}}}}},n.statelessTemplateProps=null,n.templateProps=null,n.immediateRender=!1,n.portals=[],n}return h(e,t),e.prototype.render=function(){if(!(this.element&&!this.initRenderCalled||this.refreshing)||this.isReactForeceUpdate)return n.createElement("div",this.getDefaultAttributes(),[].concat(this.props.children,this.portals));t.prototype.render.call(this),this.initRenderCalled=!0},e}(o.Ribbon);e.applyMixins(_,[e.ComponentBase,n.Component]),t.Inject=e.Inject,t.RibbonTabDirective=i,t.RibbonTabsDirective=u,t.RibbonGroupDirective=p,t.RibbonGroupsDirective=s,t.RibbonCollectionDirective=l,t.RibbonCollectionsDirective=f,t.RibbonItemDirective=y,t.RibbonItemsDirective=m,t.RibbonComponent=_,Object.keys(o).forEach(function(e){t[e]=o[e]}),Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-react-ribbon.umd.min.js.map

package/dist/ej2-react-ribbon.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"ej2-react-ribbon.umd.min.js","sources":["../src/ribbon/tabs-directive.js","../src/ribbon/groups-directive.js","../src/ribbon/collections-directive.js","../src/ribbon/items-directive.js","../src/ribbon/ribbon.component.js"],"sourcesContent":["var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonTabDirective` represent a tab of the React Ribbon.\n * It must be contained in a Ribbon component(`RibbonComponent`).\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonTabDirective = /** @class */ (function (_super) {\n    __extends(RibbonTabDirective, _super);\n    function RibbonTabDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonTabDirective.moduleName = 'ribbonTab';\n    return RibbonTabDirective;\n}(ComplexBase));\nexport { RibbonTabDirective };\nvar RibbonTabsDirective = /** @class */ (function (_super) {\n    __extends(RibbonTabsDirective, _super);\n    function RibbonTabsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonTabsDirective.propertyName = 'tabs';\n    RibbonTabsDirective.moduleName = 'ribbonTabs';\n    return RibbonTabsDirective;\n}(ComplexBase));\nexport { RibbonTabsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonGroupDirective` represent a group in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonGroupDirective = /** @class */ (function (_super) {\n    __extends(RibbonGroupDirective, _super);\n    function RibbonGroupDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonGroupDirective.moduleName = 'ribbonGroup';\n    return RibbonGroupDirective;\n}(ComplexBase));\nexport { RibbonGroupDirective };\nvar RibbonGroupsDirective = /** @class */ (function (_super) {\n    __extends(RibbonGroupsDirective, _super);\n    function RibbonGroupsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonGroupsDirective.propertyName = 'groups';\n    RibbonGroupsDirective.moduleName = 'ribbonGroups';\n    return RibbonGroupsDirective;\n}(ComplexBase));\nexport { RibbonGroupsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonCollectionDirective` represent a collection in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonCollectionDirective = /** @class */ (function (_super) {\n    __extends(RibbonCollectionDirective, _super);\n    function RibbonCollectionDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonCollectionDirective.moduleName = 'ribbonCollection';\n    return RibbonCollectionDirective;\n}(ComplexBase));\nexport { RibbonCollectionDirective };\nvar RibbonCollectionsDirective = /** @class */ (function (_super) {\n    __extends(RibbonCollectionsDirective, _super);\n    function RibbonCollectionsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonCollectionsDirective.propertyName = 'collections';\n    RibbonCollectionsDirective.moduleName = 'ribbonCollections';\n    return RibbonCollectionsDirective;\n}(ComplexBase));\nexport { RibbonCollectionsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonItemDirective` represent a item in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective>\n *                     <RibbonItemsDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                     </RibbonItemsDirective>\n *                 </RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonItemDirective = /** @class */ (function (_super) {\n    __extends(RibbonItemDirective, _super);\n    function RibbonItemDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonItemDirective.moduleName = 'ribbonItem';\n    return RibbonItemDirective;\n}(ComplexBase));\nexport { RibbonItemDirective };\nvar RibbonItemsDirective = /** @class */ (function (_super) {\n    __extends(RibbonItemsDirective, _super);\n    function RibbonItemsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonItemsDirective.propertyName = 'items';\n    RibbonItemsDirective.moduleName = 'ribbonItems';\n    return RibbonItemsDirective;\n}(ComplexBase));\nexport { RibbonItemsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport { Ribbon } from '@syncfusion/ej2-ribbon';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Ribbon Component\n * ```tsx\n * <RibbonComponent></RibbonComponent>\n * ```\n */\nvar RibbonComponent = /** @class */ (function (_super) {\n    __extends(RibbonComponent, _super);\n    function RibbonComponent(props) {\n        var _this = _super.call(this, props) || this;\n        _this.initRenderCalled = false;\n        _this.checkInjectedModules = true;\n        _this.directivekeys = { 'ribbonTabs': { 'ribbonTab': { 'ribbonGroups': { 'ribbonGroup': { 'ribbonCollections': { 'ribbonCollection': { 'ribbonItems': 'ribbonItem' } } } } } } };\n        _this.statelessTemplateProps = null;\n        _this.immediateRender = false;\n        _this.portals = [];\n        return _this;\n    }\n    RibbonComponent.prototype.render = function () {\n        if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n            _super.prototype.render.call(this);\n            this.initRenderCalled = true;\n        }\n        else {\n            return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n        }\n    };\n    return RibbonComponent;\n}(Ribbon));\nexport { RibbonComponent };\napplyMixins(RibbonComponent, [ComponentBase, React.Component]);\n"],"names":["__extends","extendStatics","d","b","Object","setPrototypeOf","__proto__","Array","p","hasOwnProperty","__","this","constructor","prototype","create","RibbonTabDirective","_super","apply","arguments","moduleName","ComplexBase","RibbonTabsDirective","propertyName","RibbonGroupDirective","RibbonGroupsDirective","RibbonCollectionDirective","RibbonCollectionsDirective","RibbonItemDirective","RibbonItemsDirective","RibbonComponent","props","_this","call","initRenderCalled","checkInjectedModules","directivekeys","ribbonTabs","ribbonTab","ribbonGroups","ribbonGroup","ribbonCollections","ribbonCollection","ribbonItems","statelessTemplateProps","immediateRender","portals","render","element","refreshing","isReactForeceUpdate","React.createElement","getDefaultAttributes","concat","children","Ribbon","ej2ReactBase","ComponentBase","React.Component"],"mappings":"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"}
+{"version":3,"file":"ej2-react-ribbon.umd.min.js","sources":["../src/ribbon/tabs-directive.js","../src/ribbon/groups-directive.js","../src/ribbon/collections-directive.js","../src/ribbon/items-directive.js","../src/ribbon/ribbon.component.js"],"sourcesContent":["var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonTabDirective` represent a tab of the React Ribbon.\n * It must be contained in a Ribbon component(`RibbonComponent`).\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonTabDirective = /** @class */ (function (_super) {\n    __extends(RibbonTabDirective, _super);\n    function RibbonTabDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonTabDirective.moduleName = 'ribbonTab';\n    return RibbonTabDirective;\n}(ComplexBase));\nexport { RibbonTabDirective };\nvar RibbonTabsDirective = /** @class */ (function (_super) {\n    __extends(RibbonTabsDirective, _super);\n    function RibbonTabsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonTabsDirective.propertyName = 'tabs';\n    RibbonTabsDirective.moduleName = 'ribbonTabs';\n    return RibbonTabsDirective;\n}(ComplexBase));\nexport { RibbonTabsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonGroupDirective` represent a group in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonGroupDirective = /** @class */ (function (_super) {\n    __extends(RibbonGroupDirective, _super);\n    function RibbonGroupDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonGroupDirective.moduleName = 'ribbonGroup';\n    return RibbonGroupDirective;\n}(ComplexBase));\nexport { RibbonGroupDirective };\nvar RibbonGroupsDirective = /** @class */ (function (_super) {\n    __extends(RibbonGroupsDirective, _super);\n    function RibbonGroupsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonGroupsDirective.propertyName = 'groups';\n    RibbonGroupsDirective.moduleName = 'ribbonGroups';\n    return RibbonGroupsDirective;\n}(ComplexBase));\nexport { RibbonGroupsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonCollectionDirective` represent a collection in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonCollectionDirective = /** @class */ (function (_super) {\n    __extends(RibbonCollectionDirective, _super);\n    function RibbonCollectionDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonCollectionDirective.moduleName = 'ribbonCollection';\n    return RibbonCollectionDirective;\n}(ComplexBase));\nexport { RibbonCollectionDirective };\nvar RibbonCollectionsDirective = /** @class */ (function (_super) {\n    __extends(RibbonCollectionsDirective, _super);\n    function RibbonCollectionsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonCollectionsDirective.propertyName = 'collections';\n    RibbonCollectionsDirective.moduleName = 'ribbonCollections';\n    return RibbonCollectionsDirective;\n}(ComplexBase));\nexport { RibbonCollectionsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonItemDirective` represent a item in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective>\n *                     <RibbonItemsDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                     </RibbonItemsDirective>\n *                 </RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nvar RibbonItemDirective = /** @class */ (function (_super) {\n    __extends(RibbonItemDirective, _super);\n    function RibbonItemDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonItemDirective.moduleName = 'ribbonItem';\n    return RibbonItemDirective;\n}(ComplexBase));\nexport { RibbonItemDirective };\nvar RibbonItemsDirective = /** @class */ (function (_super) {\n    __extends(RibbonItemsDirective, _super);\n    function RibbonItemsDirective() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    RibbonItemsDirective.propertyName = 'items';\n    RibbonItemsDirective.moduleName = 'ribbonItems';\n    return RibbonItemsDirective;\n}(ComplexBase));\nexport { RibbonItemsDirective };\n","var __extends = (this && this.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nimport * as React from 'react';\nimport { Ribbon } from '@syncfusion/ej2-ribbon';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Ribbon Component\n * ```tsx\n * <RibbonComponent></RibbonComponent>\n * ```\n */\nvar RibbonComponent = /** @class */ (function (_super) {\n    __extends(RibbonComponent, _super);\n    function RibbonComponent(props) {\n        var _this = _super.call(this, props) || this;\n        _this.initRenderCalled = false;\n        _this.checkInjectedModules = true;\n        _this.directivekeys = { 'ribbonTabs': { 'ribbonTab': { 'ribbonGroups': { 'ribbonGroup': { 'ribbonCollections': { 'ribbonCollection': { 'ribbonItems': 'ribbonItem' } } } } } } };\n        _this.statelessTemplateProps = null;\n        _this.templateProps = null;\n        _this.immediateRender = false;\n        _this.portals = [];\n        return _this;\n    }\n    RibbonComponent.prototype.render = function () {\n        if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n            _super.prototype.render.call(this);\n            this.initRenderCalled = true;\n        }\n        else {\n            return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n        }\n    };\n    return RibbonComponent;\n}(Ribbon));\nexport { RibbonComponent };\napplyMixins(RibbonComponent, [ComponentBase, React.Component]);\n"],"names":["__extends","extendStatics","d","b","Object","setPrototypeOf","__proto__","Array","p","hasOwnProperty","__","this","constructor","prototype","create","RibbonTabDirective","_super","apply","arguments","moduleName","ComplexBase","RibbonTabsDirective","propertyName","RibbonGroupDirective","RibbonGroupsDirective","RibbonCollectionDirective","RibbonCollectionsDirective","RibbonItemDirective","RibbonItemsDirective","RibbonComponent","props","_this","call","initRenderCalled","checkInjectedModules","directivekeys","ribbonTabs","ribbonTab","ribbonGroups","ribbonGroup","ribbonCollections","ribbonCollection","ribbonItems","statelessTemplateProps","templateProps","immediateRender","portals","render","element","refreshing","isReactForeceUpdate","React.createElement","getDefaultAttributes","concat","children","Ribbon","ej2ReactBase","ComponentBase","React.Component"],"mappings":"qXAAA,IAAIA,EAAwC,WACxC,IAAIC,EAAgB,SAAUC,EAAGC,GAI7B,OAHAF,EAAgBG,OAAOC,iBAChBC,wBAA2BC,OAAS,SAAUL,EAAGC,GAAKD,EAAEI,UAAYH,IACvE,SAAUD,EAAGC,GAAK,IAAK,IAAIK,KAAKL,EAAOA,EAAEM,eAAeD,KAAIN,EAAEM,GAAKL,EAAEK,MACpDN,EAAGC,IAE5B,OAAO,SAAUD,EAAGC,GAEhB,SAASO,IAAOC,KAAKC,YAAcV,EADnCD,EAAcC,EAAGC,GAEjBD,EAAEW,UAAkB,OAANV,EAAaC,OAAOU,OAAOX,IAAMO,EAAGG,UAAYV,EAAEU,UAAW,IAAIH,IAV3C,GA0BxCK,EAAoC,SAAUC,GAE9C,SAASD,IACL,OAAkB,OAAXC,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAG/D,OALAX,EAAUe,EAAoBC,GAI9BD,EAAmBI,WAAa,YACzBJ,GACTK,eAEEC,EAAqC,SAAUL,GAE/C,SAASK,IACL,OAAkB,OAAXL,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAI/D,OANAX,EAAUqB,EAAqBL,GAI/BK,EAAoBC,aAAe,OACnCD,EAAoBF,WAAa,aAC1BE,GACTD,eC3CEpB,EAAwC,WACxC,IAAIC,EAAgB,SAAUC,EAAGC,GAI7B,OAHAF,EAAgBG,OAAOC,iBAChBC,wBAA2BC,OAAS,SAAUL,EAAGC,GAAKD,EAAEI,UAAYH,IACvE,SAAUD,EAAGC,GAAK,IAAK,IAAIK,KAAKL,EAAOA,EAAEM,eAAeD,KAAIN,EAAEM,GAAKL,EAAEK,MACpDN,EAAGC,IAE5B,OAAO,SAAUD,EAAGC,GAEhB,SAASO,IAAOC,KAAKC,YAAcV,EADnCD,EAAcC,EAAGC,GAEjBD,EAAEW,UAAkB,OAANV,EAAaC,OAAOU,OAAOX,IAAMO,EAAGG,UAAYV,EAAEU,UAAW,IAAIH,IAV3C,GA8BxCa,EAAsC,SAAUP,GAEhD,SAASO,IACL,OAAkB,OAAXP,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAG/D,OALAX,EAAUuB,EAAsBP,GAIhCO,EAAqBJ,WAAa,cAC3BI,GACTH,eAEEI,EAAuC,SAAUR,GAEjD,SAASQ,IACL,OAAkB,OAAXR,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAI/D,OANAX,EAAUwB,EAAuBR,GAIjCQ,EAAsBF,aAAe,SACrCE,EAAsBL,WAAa,eAC5BK,GACTJ,eC/CEpB,EAAwC,WACxC,IAAIC,EAAgB,SAAUC,EAAGC,GAI7B,OAHAF,EAAgBG,OAAOC,iBAChBC,wBAA2BC,OAAS,SAAUL,EAAGC,GAAKD,EAAEI,UAAYH,IACvE,SAAUD,EAAGC,GAAK,IAAK,IAAIK,KAAKL,EAAOA,EAAEM,eAAeD,KAAIN,EAAEM,GAAKL,EAAEK,MACpDN,EAAGC,IAE5B,OAAO,SAAUD,EAAGC,GAEhB,SAASO,IAAOC,KAAKC,YAAcV,EADnCD,EAAcC,EAAGC,GAEjBD,EAAEW,UAAkB,OAANV,EAAaC,OAAOU,OAAOX,IAAMO,EAAGG,UAAYV,EAAEU,UAAW,IAAIH,IAV3C,GAkCxCe,EAA2C,SAAUT,GAErD,SAASS,IACL,OAAkB,OAAXT,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAG/D,OALAX,EAAUyB,EAA2BT,GAIrCS,EAA0BN,WAAa,mBAChCM,GACTL,eAEEM,EAA4C,SAAUV,GAEtD,SAASU,IACL,OAAkB,OAAXV,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAI/D,OANAX,EAAU0B,EAA4BV,GAItCU,EAA2BJ,aAAe,cAC1CI,EAA2BP,WAAa,oBACjCO,GACTN,eCnDEpB,EAAwC,WACxC,IAAIC,EAAgB,SAAUC,EAAGC,GAI7B,OAHAF,EAAgBG,OAAOC,iBAChBC,wBAA2BC,OAAS,SAAUL,EAAGC,GAAKD,EAAEI,UAAYH,IACvE,SAAUD,EAAGC,GAAK,IAAK,IAAIK,KAAKL,EAAOA,EAAEM,eAAeD,KAAIN,EAAEM,GAAKL,EAAEK,MACpDN,EAAGC,IAE5B,OAAO,SAAUD,EAAGC,GAEhB,SAASO,IAAOC,KAAKC,YAAcV,EADnCD,EAAcC,EAAGC,GAEjBD,EAAEW,UAAkB,OAANV,EAAaC,OAAOU,OAAOX,IAAMO,EAAGG,UAAYV,EAAEU,UAAW,IAAIH,IAV3C,GAsCxCiB,EAAqC,SAAUX,GAE/C,SAASW,IACL,OAAkB,OAAXX,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAG/D,OALAX,EAAU2B,EAAqBX,GAI/BW,EAAoBR,WAAa,aAC1BQ,GACTP,eAEEQ,EAAsC,SAAUZ,GAEhD,SAASY,IACL,OAAkB,OAAXZ,GAAmBA,EAAOC,MAAMN,KAAMO,YAAcP,KAI/D,OANAX,EAAU4B,EAAsBZ,GAIhCY,EAAqBN,aAAe,QACpCM,EAAqBT,WAAa,cAC3BS,GACTR,eCvDEpB,EAAwC,WACxC,IAAIC,EAAgB,SAAUC,EAAGC,GAI7B,OAHAF,EAAgBG,OAAOC,iBAChBC,wBAA2BC,OAAS,SAAUL,EAAGC,GAAKD,EAAEI,UAAYH,IACvE,SAAUD,EAAGC,GAAK,IAAK,IAAIK,KAAKL,EAAOA,EAAEM,eAAeD,KAAIN,EAAEM,GAAKL,EAAEK,MACpDN,EAAGC,IAE5B,OAAO,SAAUD,EAAGC,GAEhB,SAASO,IAAOC,KAAKC,YAAcV,EADnCD,EAAcC,EAAGC,GAEjBD,EAAEW,UAAkB,OAANV,EAAaC,OAAOU,OAAOX,IAAMO,EAAGG,UAAYV,EAAEU,UAAW,IAAIH,IAV3C,GAsBxCmB,EAAiC,SAAUb,GAE3C,SAASa,EAAgBC,GACrB,IAAIC,EAAQf,EAAOgB,KAAKrB,KAAMmB,IAAUnB,KAQxC,OAPAoB,EAAME,kBAAmB,EACzBF,EAAMG,sBAAuB,EAC7BH,EAAMI,eAAkBC,YAAgBC,WAAeC,cAAkBC,aAAiBC,mBAAuBC,kBAAsBC,YAAe,oBACtJX,EAAMY,uBAAyB,KAC/BZ,EAAMa,cAAgB,KACtBb,EAAMc,iBAAkB,EACxBd,EAAMe,WACCf,EAWX,OArBA/B,EAAU6B,EAAiBb,GAY3Ba,EAAgBhB,UAAUkC,OAAS,WAC/B,KAAMpC,KAAKqC,UAAYrC,KAAKsB,kBAAqBtB,KAAKsC,aAAgBtC,KAAKuC,oBAKvE,OAAOC,gBAAoB,MAAOxC,KAAKyC,0BAA2BC,OAAO1C,KAAKmB,MAAMwB,SAAU3C,KAAKmC,UAJnG9B,EAAOH,UAAUkC,OAAOf,KAAKrB,MAC7BA,KAAKsB,kBAAmB,GAMzBJ,GACT0B,UACFC,cACY3B,GAAkB4B,gBAAeC"}

package/dist/es6/ej2-react-ribbon.es2015.js

@@ -119,6 +119,7 @@ class RibbonComponent extends Ribbon {
         this.checkInjectedModules = true;
         this.directivekeys = { 'ribbonTabs': { 'ribbonTab': { 'ribbonGroups': { 'ribbonGroup': { 'ribbonCollections': { 'ribbonCollection': { 'ribbonItems': 'ribbonItem' } } } } } } };
         this.statelessTemplateProps = null;
+        this.templateProps = null;
         this.immediateRender = false;
         this.portals = [];
     }

package/dist/es6/ej2-react-ribbon.es2015.js.map

@@ -1 +1 @@
-{"version":3,"file":"ej2-react-ribbon.es2015.js","sources":["../src/es6/ribbon/tabs-directive.js","../src/es6/ribbon/groups-directive.js","../src/es6/ribbon/collections-directive.js","../src/es6/ribbon/items-directive.js","../src/es6/ribbon/ribbon.component.js"],"sourcesContent":["import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonTabDirective` represent a tab of the React Ribbon.\n * It must be contained in a Ribbon component(`RibbonComponent`).\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonTabDirective extends ComplexBase {\n}\nRibbonTabDirective.moduleName = 'ribbonTab';\nexport class RibbonTabsDirective extends ComplexBase {\n}\nRibbonTabsDirective.propertyName = 'tabs';\nRibbonTabsDirective.moduleName = 'ribbonTabs';\n","import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonGroupDirective` represent a group in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonGroupDirective extends ComplexBase {\n}\nRibbonGroupDirective.moduleName = 'ribbonGroup';\nexport class RibbonGroupsDirective extends ComplexBase {\n}\nRibbonGroupsDirective.propertyName = 'groups';\nRibbonGroupsDirective.moduleName = 'ribbonGroups';\n","import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonCollectionDirective` represent a collection in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonCollectionDirective extends ComplexBase {\n}\nRibbonCollectionDirective.moduleName = 'ribbonCollection';\nexport class RibbonCollectionsDirective extends ComplexBase {\n}\nRibbonCollectionsDirective.propertyName = 'collections';\nRibbonCollectionsDirective.moduleName = 'ribbonCollections';\n","import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonItemDirective` represent a item in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective>\n *                     <RibbonItemsDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                     </RibbonItemsDirective>\n *                 </RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonItemDirective extends ComplexBase {\n}\nRibbonItemDirective.moduleName = 'ribbonItem';\nexport class RibbonItemsDirective extends ComplexBase {\n}\nRibbonItemsDirective.propertyName = 'items';\nRibbonItemsDirective.moduleName = 'ribbonItems';\n","import * as React from 'react';\nimport { Ribbon } from '@syncfusion/ej2-ribbon';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Ribbon Component\n * ```tsx\n * <RibbonComponent></RibbonComponent>\n * ```\n */\nexport class RibbonComponent extends Ribbon {\n    constructor(props) {\n        super(props);\n        this.initRenderCalled = false;\n        this.checkInjectedModules = true;\n        this.directivekeys = { 'ribbonTabs': { 'ribbonTab': { 'ribbonGroups': { 'ribbonGroup': { 'ribbonCollections': { 'ribbonCollection': { 'ribbonItems': 'ribbonItem' } } } } } } };\n        this.statelessTemplateProps = null;\n        this.immediateRender = false;\n        this.portals = [];\n    }\n    render() {\n        if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n            super.render();\n            this.initRenderCalled = true;\n        }\n        else {\n            return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n        }\n    }\n}\napplyMixins(RibbonComponent, [ComponentBase, React.Component]);\n"],"names":["React.createElement","React.Component"],"mappings":";;;;AACA;;;;;;;;;;;;AAYA,AAAO,MAAM,kBAAkB,SAAS,WAAW,CAAC;CACnD;AACD,kBAAkB,CAAC,UAAU,GAAG,WAAW,CAAC;AAC5C,AAAO,MAAM,mBAAmB,SAAS,WAAW,CAAC;CACpD;AACD,mBAAmB,CAAC,YAAY,GAAG,MAAM,CAAC;AAC1C,mBAAmB,CAAC,UAAU,GAAG,YAAY,CAAC;;AClB9C;;;;;;;;;;;;;;;;AAgBA,AAAO,MAAM,oBAAoB,SAAS,WAAW,CAAC;CACrD;AACD,oBAAoB,CAAC,UAAU,GAAG,aAAa,CAAC;AAChD,AAAO,MAAM,qBAAqB,SAAS,WAAW,CAAC;CACtD;AACD,qBAAqB,CAAC,YAAY,GAAG,QAAQ,CAAC;AAC9C,qBAAqB,CAAC,UAAU,GAAG,cAAc,CAAC;;ACtBlD;;;;;;;;;;;;;;;;;;;;AAoBA,AAAO,MAAM,yBAAyB,SAAS,WAAW,CAAC;CAC1D;AACD,yBAAyB,CAAC,UAAU,GAAG,kBAAkB,CAAC;AAC1D,AAAO,MAAM,0BAA0B,SAAS,WAAW,CAAC;CAC3D;AACD,0BAA0B,CAAC,YAAY,GAAG,aAAa,CAAC;AACxD,0BAA0B,CAAC,UAAU,GAAG,mBAAmB,CAAC;;AC1B5D;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,AAAO,MAAM,mBAAmB,SAAS,WAAW,CAAC;CACpD;AACD,mBAAmB,CAAC,UAAU,GAAG,YAAY,CAAC;AAC9C,AAAO,MAAM,oBAAoB,SAAS,WAAW,CAAC;CACrD;AACD,oBAAoB,CAAC,YAAY,GAAG,OAAO,CAAC;AAC5C,oBAAoB,CAAC,UAAU,GAAG,aAAa,CAAC;;AC5BhD;;;;;;AAMA,AAAO,MAAM,eAAe,SAAS,MAAM,CAAC;IACxC,WAAW,CAAC,KAAK,EAAE;QACf,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,aAAa,GAAG,EAAE,YAAY,EAAE,EAAE,WAAW,EAAE,EAAE,cAAc,EAAE,EAAE,aAAa,EAAE,EAAE,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QAChL,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;KACrB;IACD,MAAM,GAAG;QACL,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC5F,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAChC;aACI;YACD,OAAOA,aAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SAChH;KACJ;CACJ;AACD,WAAW,CAAC,eAAe,EAAE,CAAC,aAAa,EAAEC,SAAe,CAAC,CAAC,CAAC;;;;;;"}
+{"version":3,"file":"ej2-react-ribbon.es2015.js","sources":["../src/es6/ribbon/tabs-directive.js","../src/es6/ribbon/groups-directive.js","../src/es6/ribbon/collections-directive.js","../src/es6/ribbon/items-directive.js","../src/es6/ribbon/ribbon.component.js"],"sourcesContent":["import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonTabDirective` represent a tab of the React Ribbon.\n * It must be contained in a Ribbon component(`RibbonComponent`).\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonTabDirective extends ComplexBase {\n}\nRibbonTabDirective.moduleName = 'ribbonTab';\nexport class RibbonTabsDirective extends ComplexBase {\n}\nRibbonTabsDirective.propertyName = 'tabs';\nRibbonTabsDirective.moduleName = 'ribbonTabs';\n","import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonGroupDirective` represent a group in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *         <RibbonGroupDirective></RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonGroupDirective extends ComplexBase {\n}\nRibbonGroupDirective.moduleName = 'ribbonGroup';\nexport class RibbonGroupsDirective extends ComplexBase {\n}\nRibbonGroupsDirective.propertyName = 'groups';\nRibbonGroupsDirective.moduleName = 'ribbonGroups';\n","import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonCollectionDirective` represent a collection in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *                 <RibbonCollectionDirective></RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonCollectionDirective extends ComplexBase {\n}\nRibbonCollectionDirective.moduleName = 'ribbonCollection';\nexport class RibbonCollectionsDirective extends ComplexBase {\n}\nRibbonCollectionsDirective.propertyName = 'collections';\nRibbonCollectionsDirective.moduleName = 'ribbonCollections';\n","import { ComplexBase } from '@syncfusion/ej2-react-base';\n/**\n * `RibbonItemDirective` represent a item in the React Ribbon.\n * ```tsx\n * <RibbonComponent>\n *   <RibbonTabsDirective>\n *     <RibbonTabDirective></RibbonTabDirective>\n *     <RibbonTabDirective>\n *       <RibbonGroupsDirective>\n *         <RibbonGroupDirective>\n *             <RibbonCollectionsDirective>\n *                 <RibbonCollectionDirective>\n *                     <RibbonItemsDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                         <RibbonItemDirective></RibbonItemDirective>\n *                     </RibbonItemsDirective>\n *                 </RibbonCollectionDirective>\n *             </RibbonCollectionsDirective>\n *         </RibbonGroupDirective>\n *       </RibbonGroupsDirective>\n *     </RibbonTabDirective>\n *   <RibbonTabsDirective>\n * </RibbonComponent>\n * ```\n */\nexport class RibbonItemDirective extends ComplexBase {\n}\nRibbonItemDirective.moduleName = 'ribbonItem';\nexport class RibbonItemsDirective extends ComplexBase {\n}\nRibbonItemsDirective.propertyName = 'items';\nRibbonItemsDirective.moduleName = 'ribbonItems';\n","import * as React from 'react';\nimport { Ribbon } from '@syncfusion/ej2-ribbon';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Ribbon Component\n * ```tsx\n * <RibbonComponent></RibbonComponent>\n * ```\n */\nexport class RibbonComponent extends Ribbon {\n    constructor(props) {\n        super(props);\n        this.initRenderCalled = false;\n        this.checkInjectedModules = true;\n        this.directivekeys = { 'ribbonTabs': { 'ribbonTab': { 'ribbonGroups': { 'ribbonGroup': { 'ribbonCollections': { 'ribbonCollection': { 'ribbonItems': 'ribbonItem' } } } } } } };\n        this.statelessTemplateProps = null;\n        this.templateProps = null;\n        this.immediateRender = false;\n        this.portals = [];\n    }\n    render() {\n        if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n            super.render();\n            this.initRenderCalled = true;\n        }\n        else {\n            return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n        }\n    }\n}\napplyMixins(RibbonComponent, [ComponentBase, React.Component]);\n"],"names":["React.createElement","React.Component"],"mappings":";;;;AACA;;;;;;;;;;;;AAYA,AAAO,MAAM,kBAAkB,SAAS,WAAW,CAAC;CACnD;AACD,kBAAkB,CAAC,UAAU,GAAG,WAAW,CAAC;AAC5C,AAAO,MAAM,mBAAmB,SAAS,WAAW,CAAC;CACpD;AACD,mBAAmB,CAAC,YAAY,GAAG,MAAM,CAAC;AAC1C,mBAAmB,CAAC,UAAU,GAAG,YAAY,CAAC;;AClB9C;;;;;;;;;;;;;;;;AAgBA,AAAO,MAAM,oBAAoB,SAAS,WAAW,CAAC;CACrD;AACD,oBAAoB,CAAC,UAAU,GAAG,aAAa,CAAC;AAChD,AAAO,MAAM,qBAAqB,SAAS,WAAW,CAAC;CACtD;AACD,qBAAqB,CAAC,YAAY,GAAG,QAAQ,CAAC;AAC9C,qBAAqB,CAAC,UAAU,GAAG,cAAc,CAAC;;ACtBlD;;;;;;;;;;;;;;;;;;;;AAoBA,AAAO,MAAM,yBAAyB,SAAS,WAAW,CAAC;CAC1D;AACD,yBAAyB,CAAC,UAAU,GAAG,kBAAkB,CAAC;AAC1D,AAAO,MAAM,0BAA0B,SAAS,WAAW,CAAC;CAC3D;AACD,0BAA0B,CAAC,YAAY,GAAG,aAAa,CAAC;AACxD,0BAA0B,CAAC,UAAU,GAAG,mBAAmB,CAAC;;AC1B5D;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,AAAO,MAAM,mBAAmB,SAAS,WAAW,CAAC;CACpD;AACD,mBAAmB,CAAC,UAAU,GAAG,YAAY,CAAC;AAC9C,AAAO,MAAM,oBAAoB,SAAS,WAAW,CAAC;CACrD;AACD,oBAAoB,CAAC,YAAY,GAAG,OAAO,CAAC;AAC5C,oBAAoB,CAAC,UAAU,GAAG,aAAa,CAAC;;AC5BhD;;;;;;AAMA,AAAO,MAAM,eAAe,SAAS,MAAM,CAAC;IACxC,WAAW,CAAC,KAAK,EAAE;QACf,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,aAAa,GAAG,EAAE,YAAY,EAAE,EAAE,WAAW,EAAE,EAAE,cAAc,EAAE,EAAE,aAAa,EAAE,EAAE,mBAAmB,EAAE,EAAE,kBAAkB,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QAChL,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;KACrB;IACD,MAAM,GAAG;QACL,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,UAAU,KAAK,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC5F,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAChC;aACI;YACD,OAAOA,aAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SAChH;KACJ;CACJ;AACD,WAAW,CAAC,eAAe,EAAE,CAAC,aAAa,EAAEC,SAAe,CAAC,CAAC,CAAC;;;;;;"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-ribbon@*",
-  "_id": "@syncfusion/ej2-react-ribbon@21.1.35",
+  "_id": "@syncfusion/ej2-react-ribbon@21.4.0",
   "_inBundle": false,
-  "_integrity": "sha512-1P4O7iX/cxdB8UdeaFVntNlhnM08M0+hp5buu5ZSq5yx33zOpsm2E4mga/NT52TgbWeKpadeMhCXMofg/pcsJQ==",
+  "_integrity": "sha512-6LvI2U4EbIA4XP3UuKvvXlV9+9VPuotjX1vj2GLZhSsfp42EjVa2TgoP/KgRzbr/p3dKA/P5aFw8yZkloktLJA==",
   "_location": "/@syncfusion/ej2-react-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-ribbon/-/ej2-react-ribbon-21.1.35.tgz",
-  "_shasum": "294b2d468bb1d9e360b9100e2fa77c33055b68c7",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-ribbon/-/ej2-react-ribbon-21.4.0.tgz",
+  "_shasum": "1433482b83659c73fb153b138018bbbfeecdd139",
   "_spec": "@syncfusion/ej2-react-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.1.37",
-    "@syncfusion/ej2-react-base": "~21.1.37",
-    "@syncfusion/ej2-ribbon": "21.1.37"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-react-base": "~22.1.34",
+    "@syncfusion/ej2-ribbon": "22.1.34"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component for React",
@@ -54,6 +54,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "21.1.37",
+  "version": "22.1.34",
   "sideEffects": false
 }

package/src/ribbon/ribbon.component.d.ts

@@ -22,6 +22,7 @@ export declare class RibbonComponent extends Ribbon {
         [key: string]: Object;
     };
     private statelessTemplateProps;
+    private templateProps;
     private immediateRender;
     props: Readonly<{
         children?: React.ReactNode | React.ReactNode[];

package/src/ribbon/ribbon.component.js

@@ -28,6 +28,7 @@ var RibbonComponent = /** @class */ (function (_super) {
         _this.checkInjectedModules = true;
         _this.directivekeys = { 'ribbonTabs': { 'ribbonTab': { 'ribbonGroups': { 'ribbonGroup': { 'ribbonCollections': { 'ribbonCollection': { 'ribbonItems': 'ribbonItem' } } } } } } };
         _this.statelessTemplateProps = null;
+        _this.templateProps = null;
         _this.immediateRender = false;
         _this.portals = [];
         return _this;

package/styles/bootstrap-dark.css

@@ -130,9 +130,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-item {
-  width: fit-content;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -141,6 +138,7 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -278,6 +276,7 @@
   border: none;
   height: 32px;
   margin: auto;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -308,6 +307,9 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 2px;
   height: auto;
@@ -414,6 +416,8 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
+  min-height: auto;
+  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -497,6 +501,7 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -595,6 +600,7 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
+  border-radius: 2px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -604,6 +610,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: 2px;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -713,7 +720,8 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -737,22 +745,24 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  margin-left: auto;
-}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 2px 8px;
   font-weight: 400;
   line-height: 22px;
 }
 
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  padding: 8px;
+  margin: 0 0 0 auto;
+}
+
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  margin-right: auto;
-  margin-left: unset;
+  padding: 8px;
+  margin: 0 auto 0 0;
 }
 
 .e-ribbon-menu {
@@ -772,6 +782,17 @@
   padding-left: 37px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 26px;
+  -ms-flex-align: center;
+      align-items: center;
+}
+.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 16px;
+}
+
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -905,6 +926,12 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
+.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1119,7 +1146,9 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1127,6 +1156,27 @@
   margin: 10px;
   padding: 0;
 }
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
+
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 32px;
+}
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 20px;
+  line-height: 20px;
+}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/bootstrap.css

@@ -135,9 +135,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-item {
-  width: fit-content;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -146,6 +143,7 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -283,6 +281,7 @@
   border: none;
   height: 32px;
   margin: auto;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -313,6 +312,9 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
+.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 2px;
   height: auto;
@@ -419,6 +421,8 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
+  min-height: auto;
+  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -502,6 +506,7 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -600,6 +605,7 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
+  border-radius: 4px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -609,6 +615,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: 4px;
+  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -718,7 +725,8 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -742,22 +750,24 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  margin-left: auto;
-}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 2px 8px;
   font-weight: 400;
   line-height: 22px;
 }
 
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  padding: 8px;
+  margin: 0 0 0 auto;
+}
+
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  margin-right: auto;
-  margin-left: unset;
+  padding: 8px;
+  margin: 0 auto 0 0;
 }
 
 .e-ribbon-menu {
@@ -777,6 +787,17 @@
   padding-left: 34px !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 26px;
+  -ms-flex-align: center;
+      align-items: center;
+}
+.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 16px;
+  line-height: 16px;
+}
+
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -910,6 +931,12 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
+.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
+.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
+  margin-bottom: 0;
+}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1124,7 +1151,9 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
+.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
   margin: 2px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1132,6 +1161,27 @@
   margin: 10px;
   padding: 0;
 }
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
+  padding: 10px;
+}
+
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
+  font-size: 14px;
+  height: 32px;
+}
+.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 20px;
+  line-height: 20px;
+}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,