@syncfusion/ej2-react-inplace-editor 20.4.54 → 21.1.36

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 
 #### Bug Fixes
 
+- `#FB182978` - Resolved an issue Hidden save and cancel icons when focused on using tab key navigation.
+
+## 20.4.54 (2023-03-14)
+
+### In-place Editor
+
+#### Bug Fixes
+
 - `#I440965` - Now, the validation works properly when using two way binding for the `value` property.
 - `#I443357` - Now, when you click the cancel button in the In-place Editor, the Rich Text Editor will no longer be focused.
 

package/dist/ej2-react-inplace-editor.min.js

@@ -1,10 +1,10 @@
 /*!
 *  filename: ej2-react-inplace-editor.min.js
-*  version : 20.4.54
+*  version : 21.1.36
 *  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(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("SyncfusionInplaceEditor"),require("SyncfusionReactBase"),require("React")):"function"==typeof define&&define.amd?define(["SyncfusionInplaceEditor","SyncfusionReactBase","React"],t):"object"==typeof exports?exports.SyncfusionReactInplaceEditor=t(require("SyncfusionInplaceEditor"),require("SyncfusionReactBase"),require("React")):e.SyncfusionReactInplaceEditor=t(e.SyncfusionInplaceEditor,e.SyncfusionReactBase,e.React)}(this,function(e,t,n){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";var r=n(4);n.d(t,"a",function(){return r.a})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2);n.d(t,"InPlaceEditorComponent",function(){return r.a});var o=n(1);n.n(o);n.o(o,"Inject")&&n.d(t,"Inject",function(){return o.Inject});var i=n(0);n.n(i);for(var c in i)["InPlaceEditorComponent","Inject","default"].indexOf(c)<0&&function(e){n.d(t,e,function(){return i[e]})}(c)},function(e,t,n){"use strict";n.d(t,"a",function(){return u});var r=n(5),o=(n.n(r),n(0)),i=(n.n(o),n(1)),c=(n.n(i),this&&this.__extends||function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function r(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}()),u=function(e){function t(t){var n=e.call(this,t)||this;return n.initRenderCalled=!1,n.checkInjectedModules=!0,n.immediateRender=!1,n.portals=[],n}return c(t,e),t.prototype.render=function(){if(!(this.element&&!this.initRenderCalled||this.refreshing)||this.isReactForeceUpdate)return r.createElement("div",this.getDefaultAttributes(),[].concat(this.props.children,this.portals));e.prototype.render.call(this),this.initRenderCalled=!0},t}(o.InPlaceEditor);n.i(i.applyMixins)(u,[i.ComponentBase,r.Component])},function(e,t){e.exports=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("SyncfusionInplaceEditor"),require("SyncfusionReactBase"),require("React")):"function"==typeof define&&define.amd?define(["SyncfusionInplaceEditor","SyncfusionReactBase","React"],t):"object"==typeof exports?exports.SyncfusionReactInplaceEditor=t(require("SyncfusionInplaceEditor"),require("SyncfusionReactBase"),require("React")):e.SyncfusionReactInplaceEditor=t(e.SyncfusionInplaceEditor,e.SyncfusionReactBase,e.React)}(this,function(e,t,n){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";var r=n(4);n.d(t,"a",function(){return r.a})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2);n.d(t,"InPlaceEditorComponent",function(){return r.a});var o=n(1);n.n(o);n.o(o,"Inject")&&n.d(t,"Inject",function(){return o.Inject});var i=n(0);n.n(i);for(var c in i)["InPlaceEditorComponent","Inject","default"].indexOf(c)<0&&function(e){n.d(t,e,function(){return i[e]})}(c)},function(e,t,n){"use strict";n.d(t,"a",function(){return u});var r=n(5),o=(n.n(r),n(0)),i=(n.n(o),n(1)),c=(n.n(i),this&&this.__extends||function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function r(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}()),u=function(e){function t(t){var n=e.call(this,t)||this;return n.initRenderCalled=!1,n.checkInjectedModules=!0,n.statelessTemplateProps=null,n.templateProps=null,n.immediateRender=!1,n.portals=[],n}return c(t,e),t.prototype.render=function(){if(!(this.element&&!this.initRenderCalled||this.refreshing)||this.isReactForeceUpdate)return r.createElement("div",this.getDefaultAttributes(),[].concat(this.props.children,this.portals));e.prototype.render.call(this),this.initRenderCalled=!0},t}(o.InPlaceEditor);n.i(i.applyMixins)(u,[i.ComponentBase,r.Component])},function(e,t){e.exports=n}])});

package/dist/ej2-react-inplace-editor.umd.min.js

@@ -1,11 +1,11 @@
 /*!
 *  filename: ej2-react-inplace-editor.umd.min.js
-*  version : 20.4.54
+*  version : 21.1.36
 *  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(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@syncfusion/ej2-inplace-editor"),require("@syncfusion/ej2-react-base")):"function"==typeof define&&define.amd?define(["exports","react","@syncfusion/ej2-inplace-editor","@syncfusion/ej2-react-base"],t):t(e.ej={},e.React,e.ej2InplaceEditor,e.ej2ReactBase)}(this,function(e,t,n,r){"use strict";var o=function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function r(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),i=function(e){function n(t){var n=e.call(this,t)||this;return n.initRenderCalled=!1,n.checkInjectedModules=!0,n.immediateRender=!1,n.portals=[],n}return o(n,e),n.prototype.render=function(){if(!(this.element&&!this.initRenderCalled||this.refreshing)||this.isReactForeceUpdate)return t.createElement("div",this.getDefaultAttributes(),[].concat(this.props.children,this.portals));e.prototype.render.call(this),this.initRenderCalled=!0},n}(n.InPlaceEditor);r.applyMixins(i,[r.ComponentBase,t.Component]),e.Inject=r.Inject,e.InPlaceEditorComponent=i,Object.keys(n).forEach(function(t){e[t]=n[t]}),Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@syncfusion/ej2-inplace-editor"),require("@syncfusion/ej2-react-base")):"function"==typeof define&&define.amd?define(["exports","react","@syncfusion/ej2-inplace-editor","@syncfusion/ej2-react-base"],t):t(e.ej={},e.React,e.ej2InplaceEditor,e.ej2ReactBase)}(this,function(e,t,n,r){"use strict";var o=function(){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(t,n)};return function(t,n){function r(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),i=function(e){function n(t){var n=e.call(this,t)||this;return n.initRenderCalled=!1,n.checkInjectedModules=!0,n.statelessTemplateProps=null,n.templateProps=null,n.immediateRender=!1,n.portals=[],n}return o(n,e),n.prototype.render=function(){if(!(this.element&&!this.initRenderCalled||this.refreshing)||this.isReactForeceUpdate)return t.createElement("div",this.getDefaultAttributes(),[].concat(this.props.children,this.portals));e.prototype.render.call(this),this.initRenderCalled=!0},n}(n.InPlaceEditor);r.applyMixins(i,[r.ComponentBase,t.Component]),e.Inject=r.Inject,e.InPlaceEditorComponent=i,Object.keys(n).forEach(function(t){e[t]=n[t]}),Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-react-inplace-editor.umd.min.js.map

package/dist/ej2-react-inplace-editor.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"ej2-react-inplace-editor.umd.min.js","sources":["../src/inplace-editor/inplaceeditor.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 * as React from 'react';\nimport { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `InPlaceEditor` represents the react InPlaceEditor.\n * ```tsx\n * <InPlaceEditor />\n * ```\n */\nvar InPlaceEditorComponent = /** @class */ (function (_super) {\n    __extends(InPlaceEditorComponent, _super);\n    function InPlaceEditorComponent(props) {\n        var _this = _super.call(this, props) || this;\n        _this.initRenderCalled = false;\n        _this.checkInjectedModules = true;\n        _this.immediateRender = false;\n        _this.portals = [];\n        return _this;\n    }\n    InPlaceEditorComponent.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 InPlaceEditorComponent;\n}(InPlaceEditor));\nexport { InPlaceEditorComponent };\napplyMixins(InPlaceEditorComponent, [ComponentBase, React.Component]);\n"],"names":["__extends","extendStatics","d","b","Object","setPrototypeOf","__proto__","Array","p","hasOwnProperty","__","this","constructor","prototype","create","InPlaceEditorComponent","_super","props","_this","call","initRenderCalled","checkInjectedModules","immediateRender","portals","render","element","refreshing","isReactForeceUpdate","React.createElement","getDefaultAttributes","concat","children","InPlaceEditor","ej2ReactBase","ComponentBase","React.Component"],"mappings":"4YAAA,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,GAsBxCK,EAAwC,SAAUC,GAElD,SAASD,EAAuBE,GAC5B,IAAIC,EAAQF,EAAOG,KAAKR,KAAMM,IAAUN,KAKxC,OAJAO,EAAME,kBAAmB,EACzBF,EAAMG,sBAAuB,EAC7BH,EAAMI,iBAAkB,EACxBJ,EAAMK,WACCL,EAWX,OAlBAlB,EAAUe,EAAwBC,GASlCD,EAAuBF,UAAUW,OAAS,WACtC,KAAMb,KAAKc,UAAYd,KAAKS,kBAAqBT,KAAKe,aAAgBf,KAAKgB,oBAKvE,OAAOC,gBAAoB,MAAOjB,KAAKkB,0BAA2BC,OAAOnB,KAAKM,MAAMc,SAAUpB,KAAKY,UAJnGP,EAAOH,UAAUW,OAAOL,KAAKR,MAC7BA,KAAKS,kBAAmB,GAMzBL,GACTiB,iBACFC,cACYlB,GAAyBmB,gBAAeC"}
+{"version":3,"file":"ej2-react-inplace-editor.umd.min.js","sources":["../src/inplace-editor/inplaceeditor.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 * as React from 'react';\nimport { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `InPlaceEditor` represents the react InPlaceEditor.\n * ```tsx\n * <InPlaceEditor />\n * ```\n */\nvar InPlaceEditorComponent = /** @class */ (function (_super) {\n    __extends(InPlaceEditorComponent, _super);\n    function InPlaceEditorComponent(props) {\n        var _this = _super.call(this, props) || this;\n        _this.initRenderCalled = false;\n        _this.checkInjectedModules = true;\n        _this.statelessTemplateProps = null;\n        _this.templateProps = null;\n        _this.immediateRender = false;\n        _this.portals = [];\n        return _this;\n    }\n    InPlaceEditorComponent.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 InPlaceEditorComponent;\n}(InPlaceEditor));\nexport { InPlaceEditorComponent };\napplyMixins(InPlaceEditorComponent, [ComponentBase, React.Component]);\n"],"names":["__extends","extendStatics","d","b","Object","setPrototypeOf","__proto__","Array","p","hasOwnProperty","__","this","constructor","prototype","create","InPlaceEditorComponent","_super","props","_this","call","initRenderCalled","checkInjectedModules","statelessTemplateProps","templateProps","immediateRender","portals","render","element","refreshing","isReactForeceUpdate","React.createElement","getDefaultAttributes","concat","children","InPlaceEditor","ej2ReactBase","ComponentBase","React.Component"],"mappings":"4YAAA,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,GAsBxCK,EAAwC,SAAUC,GAElD,SAASD,EAAuBE,GAC5B,IAAIC,EAAQF,EAAOG,KAAKR,KAAMM,IAAUN,KAOxC,OANAO,EAAME,kBAAmB,EACzBF,EAAMG,sBAAuB,EAC7BH,EAAMI,uBAAyB,KAC/BJ,EAAMK,cAAgB,KACtBL,EAAMM,iBAAkB,EACxBN,EAAMO,WACCP,EAWX,OApBAlB,EAAUe,EAAwBC,GAWlCD,EAAuBF,UAAUa,OAAS,WACtC,KAAMf,KAAKgB,UAAYhB,KAAKS,kBAAqBT,KAAKiB,aAAgBjB,KAAKkB,oBAKvE,OAAOC,gBAAoB,MAAOnB,KAAKoB,0BAA2BC,OAAOrB,KAAKM,MAAMgB,SAAUtB,KAAKc,UAJnGT,EAAOH,UAAUa,OAAOP,KAAKR,MAC7BA,KAAKS,kBAAmB,GAMzBL,GACTmB,iBACFC,cACYpB,GAAyBqB,gBAAeC"}

package/dist/es6/ej2-react-inplace-editor.es2015.js

@@ -13,6 +13,8 @@ class InPlaceEditorComponent extends InPlaceEditor {
         super(props);
         this.initRenderCalled = false;
         this.checkInjectedModules = true;
+        this.statelessTemplateProps = null;
+        this.templateProps = null;
         this.immediateRender = false;
         this.portals = [];
     }

package/dist/es6/ej2-react-inplace-editor.es2015.js.map

@@ -1 +1 @@
-{"version":3,"file":"ej2-react-inplace-editor.es2015.js","sources":["../src/es6/inplace-editor/inplaceeditor.component.js"],"sourcesContent":["import * as React from 'react';\nimport { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `InPlaceEditor` represents the react InPlaceEditor.\n * ```tsx\n * <InPlaceEditor />\n * ```\n */\nexport class InPlaceEditorComponent extends InPlaceEditor {\n    constructor(props) {\n        super(props);\n        this.initRenderCalled = false;\n        this.checkInjectedModules = true;\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(InPlaceEditorComponent, [ComponentBase, React.Component]);\n"],"names":["React.createElement","React.Component"],"mappings":";;;;AAGA;;;;;;AAMA,AAAO,MAAM,sBAAsB,SAAS,aAAa,CAAC;IACtD,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,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,sBAAsB,EAAE,CAAC,aAAa,EAAEC,SAAe,CAAC,CAAC,CAAC;;;;;;"}
+{"version":3,"file":"ej2-react-inplace-editor.es2015.js","sources":["../src/es6/inplace-editor/inplaceeditor.component.js"],"sourcesContent":["import * as React from 'react';\nimport { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `InPlaceEditor` represents the react InPlaceEditor.\n * ```tsx\n * <InPlaceEditor />\n * ```\n */\nexport class InPlaceEditorComponent extends InPlaceEditor {\n    constructor(props) {\n        super(props);\n        this.initRenderCalled = false;\n        this.checkInjectedModules = true;\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(InPlaceEditorComponent, [ComponentBase, React.Component]);\n"],"names":["React.createElement","React.Component"],"mappings":";;;;AAGA;;;;;;AAMA,AAAO,MAAM,sBAAsB,SAAS,aAAa,CAAC;IACtD,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,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,sBAAsB,EAAE,CAAC,aAAa,EAAEC,SAAe,CAAC,CAAC,CAAC;;;;;;"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-inplace-editor@*",
-  "_id": "@syncfusion/ej2-react-inplace-editor@20.4.48",
+  "_id": "@syncfusion/ej2-react-inplace-editor@22.1.34",
   "_inBundle": false,
-  "_integrity": "sha512-vSPOZ68j7cuYi9BSl+Z6s9mKLB2x3MOHevq1zZxWAKjO5IsGZ/ytPMfnBejhlin+HFeF3Jc+SAEFeUgufzZ7kw==",
+  "_integrity": "sha512-zek6wwhpntA71V+FnPb7aTHXRaRCg1Tl20eyYmh3N/menocRe+cmn54xPsz7GVXcLYZG3yBA62a4s29SjhUXQg==",
   "_location": "/@syncfusion/ej2-react-inplace-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -19,10 +19,10 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-inplace-editor/-/ej2-react-inplace-editor-20.4.48.tgz",
-  "_shasum": "8507aad57b72ae13b06f4e14880bf38f9ec1e67d",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-inplace-editor/-/ej2-react-inplace-editor-22.1.34.tgz",
+  "_shasum": "d4457d9b9441e815d887bf164a80018e9d7f35c3",
   "_spec": "@syncfusion/ej2-react-inplace-editor@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-inplace-editor": "20.4.54",
-    "@syncfusion/ej2-react-base": "~20.4.54"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-inplace-editor": "21.1.36",
+    "@syncfusion/ej2-react-base": "~22.1.34"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 Inplace editor components, which is used to edit and update the value dynamically in server. for React",
@@ -54,6 +54,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "20.4.54",
+  "version": "21.1.36",
   "sideEffects": false
 }

package/src/inplace-editor/inplaceeditor.component.d.ts

@@ -18,6 +18,8 @@ export declare class InPlaceEditorComponent extends InPlaceEditor {
     private getDefaultAttributes;
     initRenderCalled: boolean;
     private checkInjectedModules;
+    private statelessTemplateProps;
+    private templateProps;
     private immediateRender;
     props: Readonly<{
         children?: React.ReactNode | React.ReactNode[];

package/src/inplace-editor/inplaceeditor.component.js

@@ -26,6 +26,8 @@ var InPlaceEditorComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.initRenderCalled = false;
         _this.checkInjectedModules = true;
+        _this.statelessTemplateProps = null;
+        _this.templateProps = null;
         _this.immediateRender = false;
         _this.portals = [];
         return _this;

package/styles/bootstrap.css

@@ -197,8 +197,8 @@
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-fontcolor-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-numberformatlist-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-bulletformatlist-dropdown {
-  padding-bottom: 0;
-  padding-top: 0;
+  padding-bottom: 1px;
+  padding-top: 1px;
 }
 .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn:hover, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active:hover,
 .e-rte-toolbar .e-toolbar-items .e-rte-fontcolor-dropdown.e-tbar-btn.e-btn:hover,

package/styles/bootstrap4.css

@@ -284,8 +284,8 @@
 }
 .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn, .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn {
   border: 1px solid transparent;
-  padding-bottom: 1px;
-  padding-top: 1px;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 .e-richtexteditor .e-rte-content {
   border-bottom-left-radius: 4px;
@@ -1066,6 +1066,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,
@@ -1080,18 +1088,21 @@
   background-color: #545b62;
   border: 1px solid #4e555b;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons {
+  color: #fff;
+}
 
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #fff;

package/styles/bootstrap5-dark.css

@@ -777,19 +777,23 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #212529;
+  border: 1px solid #444c54;
+  border-radius: 4px;
+}
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;

package/styles/bootstrap5.css

@@ -777,19 +777,23 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+}
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;

package/styles/inplace-editor/bootstrap.css

@@ -197,8 +197,8 @@
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-fontcolor-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-numberformatlist-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-bulletformatlist-dropdown {
-  padding-bottom: 0;
-  padding-top: 0;
+  padding-bottom: 1px;
+  padding-top: 1px;
 }
 .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn:hover, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active:hover,
 .e-rte-toolbar .e-toolbar-items .e-rte-fontcolor-dropdown.e-tbar-btn.e-btn:hover,

package/styles/inplace-editor/bootstrap4.css

@@ -284,8 +284,8 @@
 }
 .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn, .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn {
   border: 1px solid transparent;
-  padding-bottom: 1px;
-  padding-top: 1px;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 .e-richtexteditor .e-rte-content {
   border-bottom-left-radius: 4px;
@@ -1066,6 +1066,14 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
+}
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus,
@@ -1080,18 +1088,21 @@
   background-color: #545b62;
   border: 1px solid #4e555b;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons {
+  color: #fff;
+}
 
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #fff;

package/styles/inplace-editor/bootstrap5-dark.css

@@ -777,19 +777,23 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #212529;
+  border: 1px solid #444c54;
+  border-radius: 4px;
+}
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;

package/styles/inplace-editor/bootstrap5.css

@@ -777,19 +777,23 @@
   background-color: #5a6268;
   border: 1px solid #545b62;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:disabled,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:disabled {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+}
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;