@commercetools-uikit/rich-text-input 13.0.2 → 14.0.0

package/dist/commercetools-uikit-rich-text-input.cjs.prod.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -11,17 +10,17 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
 var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
 var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
 var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
 var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+require('prop-types');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var _setTimeout = require('@babel/runtime-corejs3/core-js-stable/set-timeout');
 var react = require('react');
-require('prop-types');
-require('react-required-if');
 var slateReact = require('slate-react');
 var pick = require('lodash/pick');
 var utils = require('@commercetools-uikit/utils');
@@ -40,7 +39,6 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -49,6 +47,7 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var _setTimeout__default = /*#__PURE__*/_interopDefault(_setTimeout);
 var pick__default = /*#__PURE__*/_interopDefault(pick);
@@ -58,11 +57,10 @@ var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 
-/* eslint-disable import/prefer-default-export */
 var EditorWrapper = _styled__default["default"]("div", {
-  target: "e125ents0"
+  target: "e1d53kc50"
 } )("align-self:stretch;cursor:", function (props) {
-  return props.isDisabled ? 'not-allowed' : 'inherit';
+  return props.isDisabled || props.isReadOnly ? 'not-allowed' : 'inherit';
 }, ";" + ("" ));
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -70,9 +68,9 @@ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["d
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var COLLAPSED_HEIGHT = 32;
 
-var Editor = function Editor(props) {
+var Editor$1 = function Editor(props) {
   var intl = reactIntl.useIntl();
-  var ref = react.useRef();
+  var ref = react.useRef(null);
   var prevIsFocused = hooks.usePrevious(props.editor.value.selection.isFocused);
 
   var _useState = react.useState(false),
@@ -81,7 +79,9 @@ var Editor = function Editor(props) {
       setRenderToggleButton = _useState2[1];
 
   var updateRenderToggleButton = react.useCallback(function () {
-    var doesExceedCollapsedHeightLimit = ref.current.clientHeight > COLLAPSED_HEIGHT;
+    var _ref$current;
+
+    var doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
 
     if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
       setRenderToggleButton(true);
@@ -108,6 +108,10 @@ var Editor = function Editor(props) {
         toggle();
       }
 
+      var refObj = {
+        containerRef: ref,
+        registerContentNode: registerContentNode
+      };
       return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
         max: props.horizontalConstraint,
         children: jsxRuntime.jsxs(Stack__default["default"], {
@@ -117,22 +121,18 @@ var Editor = function Editor(props) {
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             children: jsxRuntime.jsx(richTextUtils.RichTextBody, {
-              ref: {
-                containerRef: ref,
-                registerContentNode: registerContentNode
-              },
+              ref: refObj,
               hasError: props.hasError,
               isDisabled: props.isDisabled,
               hasWarning: props.hasWarning,
-              isReadOnly: props.isReadOnly,
-              showExpandIcon: props.showExpandIcon,
+              isReadOnly: Boolean(props.isReadOnly),
+              showExpandIcon: Boolean(props.showExpandIcon),
               onClickExpand: props.onClickExpand,
               editor: props.editor,
               containerStyles: containerStyles,
               children: props.children
             })
-          }), renderToggleButton && // <div>
-          jsxRuntime.jsx(FlatButton__default["default"], {
+          }), renderToggleButton && jsxRuntime.jsx(FlatButton__default["default"], {
             onClick: toggle,
             label: isOpen ? intl.formatMessage(inputUtils.messagesMultilineInput.collapse) : intl.formatMessage(inputUtils.messagesMultilineInput.expand),
             icon: isOpen ? jsxRuntime.jsx(icons.AngleUpIcon, {
@@ -140,14 +140,14 @@ var Editor = function Editor(props) {
             }) : jsxRuntime.jsx(icons.AngleDownIcon, {
               size: "small"
             })
-          }) // </div>
-          ]
+          })]
         })
       });
     }
   });
-}; // eslint-disable-next-line react/display-name
+};
 
+Editor$1.propTypes = {};
 
 var renderEditor = function renderEditor(props, editor, next) {
   var internalId = "".concat(props.id, "__internal__id");
@@ -159,11 +159,11 @@ var renderEditor = function renderEditor(props, editor, next) {
   var passedProps = _objectSpread$1(_objectSpread$1({
     name: props.name,
     id: props.id,
-    isReadOnly: props.readOnly,
-    isDisabled: props.disabled
+    isReadOnly: Boolean(props.readOnly),
+    isDisabled: Boolean(props.disabled)
   }, pick__default["default"](props.options, ['horizontalConstraint', 'defaultExpandMultilineText', 'showExpandIcon', 'onClickExpand', 'hasError', 'hasWarning'])), utils.filterDataAttributes(props));
 
-  return jsxRuntime.jsxs(Editor, _objectSpread$1(_objectSpread$1({
+  return jsxRuntime.jsxs(Editor$1, _objectSpread$1(_objectSpread$1({
     editor: editor
   }, passedProps), {}, {
     children: [children, jsxRuntime.jsx(richTextUtils.HiddenInput, {
@@ -171,22 +171,29 @@ var renderEditor = function renderEditor(props, editor, next) {
       handleFocus: editor.focus,
       id: props.id,
       disabled: props.disabled,
-      readOnly: props.readOnly
+      readOnly: Boolean(props.readOnly)
     })]
   }));
 };
-Editor.displayName = 'Editor';
-Editor.propTypes = {};
-renderEditor.propTypes = {};
+
+Editor$1.displayName = 'Editor';
 var renderEditor$1 = renderEditor;
 
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+// This is a temporary wrapper component helping to mitigate typing issues of `slate-react@0.22.10` package.
+// TODO: remove after upgrade of `slate-react` to the latest version
+var Editor = function Editor(props) {
+  return jsxRuntime.jsx(slateReact.Editor, _objectSpread({}, props));
+};
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct__default["default"]) return false; if (_Reflect$construct__default["default"].sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); return true; } catch (e) { return false; } }
+Editor.propTypes = {};
 
 var RichTextInput = /*#__PURE__*/function (_PureComponent) {
   _inherits(RichTextInput, _PureComponent);
@@ -205,7 +212,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
     }
 
     _this = _super.call.apply(_super, _concatInstanceProperty__default["default"](_context = [this]).call(_context, args));
-    _this.serializedValue = _this.props.value || '';
+    _this.serializedValue = _this.props.value;
     _this.internalSlateValue = richTextUtils.html.deserialize(_this.props.value || '');
 
     _this.onValueChange = function (event) {
@@ -222,6 +229,8 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
       // onChange unless this value changes.
 
       if (hasSerializedValueChanged) {
+        var _this$props$onChange, _this$props;
+
         var fakeEvent = {
           target: {
             id: _this.props.id,
@@ -229,8 +238,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
             value: serializedValue
           }
         };
-
-        _this.props.onChange(fakeEvent);
+        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, fakeEvent);
       }
 
       if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
@@ -239,7 +247,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
       }
     };
 
-    _this.onBlur = function (event, editor, next) {
+    _this.onBlur = function (_event, _editor, next) {
       next();
 
       if (_this.props.onBlur) {
@@ -251,12 +259,14 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
         };
 
         _setTimeout__default["default"](function () {
-          return _this.props.onBlur(fakeEvent);
+          var _this$props$onBlur, _this$props2;
+
+          return (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, fakeEvent);
         }, 0);
       }
     };
 
-    _this.onFocus = function (event, editor, next) {
+    _this.onFocus = function (_event, _editor, next) {
       next();
 
       if (_this.props.onFocus) {
@@ -268,7 +278,9 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
         };
 
         _setTimeout__default["default"](function () {
-          return _this.props.onFocus(fakeEvent);
+          var _this$props$onFocus, _this$props3;
+
+          return (_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, fakeEvent);
         }, 0);
       }
     };
@@ -288,15 +300,20 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
       // can understand, save this value to our class variable, and forceUpdate
       // this keeps the component in sync.
       if (this.props.value !== this.serializedValue) {
-        this.internalSlateValue = richTextUtils.html.deserialize(this.props.value);
-        this.serializedValue = this.props.value;
+        var value = this.props.value || '';
+        this.internalSlateValue = richTextUtils.html.deserialize(value);
+        this.serializedValue = value;
         this.forceUpdate();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      return jsxRuntime.jsx(slateReact.Editor, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
+      if (!this.props.isReadOnly) ;
+
+      if (this.props.showExpandIcon) ;
+
+      return jsxRuntime.jsx(Editor, _objectSpread(_objectSpread({}, utils.filterDataAttributes(this.props)), {}, {
         autoFocus: this.props.isAutofocussed,
         id: this.props.id,
         name: this.props.name,
@@ -336,7 +353,7 @@ RichTextInput.propTypes = {};
 var RichTextInput$1 = RichTextInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.2";
+var version = "14.0.0";
 
 exports["default"] = RichTextInput$1;
 exports.version = version;

package/dist/commercetools-uikit-rich-text-input.esm.js

@@ -1,4 +1,3 @@
-import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -7,20 +6,20 @@ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
-import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
 import _classCallCheck from '@babel/runtime-corejs3/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
 import _inherits from '@babel/runtime-corejs3/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
+import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
+import _pt from 'prop-types';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
 import { cloneElement, useRef, useState, useCallback, useEffect, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import requiredIf from 'react-required-if';
-import { Editor as Editor$1 } from 'slate-react';
+import { Editor as Editor$2 } from 'slate-react';
 import pick from 'lodash/pick';
-import { filterDataAttributes } from '@commercetools-uikit/utils';
+import { filterDataAttributes, warning } from '@commercetools-uikit/utils';
 import { HiddenInput, RichTextBody, html, richTextPlugins, isEmpty } from '@commercetools-uikit/rich-text-utils';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import { useIntl } from 'react-intl';
@@ -34,24 +33,23 @@ import { messagesMultilineInput } from '@commercetools-uikit/input-utils';
 import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-/* eslint-disable import/prefer-default-export */
 var EditorWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e125ents0"
+  target: "e1d53kc50"
 } : {
-  target: "e125ents0",
+  target: "e1d53kc50",
   label: "EditorWrapper"
 })("align-self:stretch;cursor:", function (props) {
-  return props.isDisabled ? 'not-allowed' : 'inherit';
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci5zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2dDIiwiZmlsZSI6ImVkaXRvci5zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0ICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmNvbnN0IEVkaXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICBjdXJzb3I6ICR7KHByb3BzKSA9PiAocHJvcHMuaXNEaXNhYmxlZCA/ICdub3QtYWxsb3dlZCcgOiAnaW5oZXJpdCcpfTtcbmA7XG5cbmV4cG9ydCB7IEVkaXRvcldyYXBwZXIgfTtcbiJdfQ== */"));
+  return props.isDisabled || props.isReadOnly ? 'not-allowed' : 'inherit';
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImVkaXRvci5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3FEIiwiZmlsZSI6ImVkaXRvci5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgdHlwZSB7IFRFZGl0b3JQcm9wcyB9IGZyb20gJy4vZWRpdG9yJztcblxudHlwZSBURWRpdG9yV3JhcHBlclByb3BzID0gUGljazxURWRpdG9yUHJvcHMsICdpc0Rpc2FibGVkJyB8ICdpc1JlYWRPbmx5Jz47XG5cbmNvbnN0IEVkaXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2PFRFZGl0b3JXcmFwcGVyUHJvcHM+YFxuICBhbGlnbi1zZWxmOiBzdHJldGNoO1xuICBjdXJzb3I6ICR7KHByb3BzKSA9PlxuICAgIHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuaXNSZWFkT25seSA/ICdub3QtYWxsb3dlZCcgOiAnaW5oZXJpdCd9O1xuYDtcblxuZXhwb3J0IHsgRWRpdG9yV3JhcHBlciB9O1xuIl19 */"));
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var COLLAPSED_HEIGHT = 32;
 
-var Editor = function Editor(props) {
+var Editor$1 = function Editor(props) {
   var intl = useIntl();
-  var ref = useRef();
+  var ref = useRef(null);
   var prevIsFocused = usePrevious(props.editor.value.selection.isFocused);
 
   var _useState = useState(false),
@@ -60,7 +58,9 @@ var Editor = function Editor(props) {
       setRenderToggleButton = _useState2[1];
 
   var updateRenderToggleButton = useCallback(function () {
-    var doesExceedCollapsedHeightLimit = ref.current.clientHeight > COLLAPSED_HEIGHT;
+    var _ref$current;
+
+    var doesExceedCollapsedHeightLimit = Number((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) > COLLAPSED_HEIGHT;
 
     if (doesExceedCollapsedHeightLimit && !renderToggleButton) {
       setRenderToggleButton(true);
@@ -87,6 +87,10 @@ var Editor = function Editor(props) {
         toggle();
       }
 
+      var refObj = {
+        containerRef: ref,
+        registerContentNode: registerContentNode
+      };
       return jsx(Constraints.Horizontal, {
         max: props.horizontalConstraint,
         children: jsxs(Stack, {
@@ -96,22 +100,18 @@ var Editor = function Editor(props) {
             isDisabled: props.isDisabled,
             isReadOnly: props.isReadOnly,
             children: jsx(RichTextBody, {
-              ref: {
-                containerRef: ref,
-                registerContentNode: registerContentNode
-              },
+              ref: refObj,
               hasError: props.hasError,
               isDisabled: props.isDisabled,
               hasWarning: props.hasWarning,
-              isReadOnly: props.isReadOnly,
-              showExpandIcon: props.showExpandIcon,
+              isReadOnly: Boolean(props.isReadOnly),
+              showExpandIcon: Boolean(props.showExpandIcon),
               onClickExpand: props.onClickExpand,
               editor: props.editor,
               containerStyles: containerStyles,
               children: props.children
             })
-          }), renderToggleButton && // <div>
-          jsx(FlatButton, {
+          }), renderToggleButton && jsx(FlatButton, {
             onClick: toggle,
             label: isOpen ? intl.formatMessage(messagesMultilineInput.collapse) : intl.formatMessage(messagesMultilineInput.expand),
             icon: isOpen ? jsx(AngleUpIcon, {
@@ -119,14 +119,30 @@ var Editor = function Editor(props) {
             }) : jsx(AngleDownIcon, {
               size: "small"
             })
-          }) // </div>
-          ]
+          })]
         })
       });
     }
   });
-}; // eslint-disable-next-line react/display-name
+};
 
+Editor$1.propTypes = process.env.NODE_ENV !== "production" ? {
+  editor: _pt.any.isRequired,
+  id: _pt.string,
+  name: _pt.string,
+  placeholder: _pt.string,
+  disabled: _pt.bool,
+  readOnly: _pt.bool,
+  horizontalConstraint: _pt.oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
+  children: _pt.node,
+  isDisabled: _pt.bool,
+  isReadOnly: _pt.bool,
+  showExpandIcon: _pt.bool.isRequired,
+  onClickExpand: _pt.func,
+  hasWarning: _pt.bool,
+  hasError: _pt.bool,
+  defaultExpandMultilineText: _pt.bool
+} : {};
 
 var renderEditor = function renderEditor(props, editor, next) {
   var internalId = "".concat(props.id, "__internal__id");
@@ -138,11 +154,11 @@ var renderEditor = function renderEditor(props, editor, next) {
   var passedProps = _objectSpread$1(_objectSpread$1({
     name: props.name,
     id: props.id,
-    isReadOnly: props.readOnly,
-    isDisabled: props.disabled
+    isReadOnly: Boolean(props.readOnly),
+    isDisabled: Boolean(props.disabled)
   }, pick(props.options, ['horizontalConstraint', 'defaultExpandMultilineText', 'showExpandIcon', 'onClickExpand', 'hasError', 'hasWarning'])), filterDataAttributes(props));
 
-  return jsxs(Editor, _objectSpread$1(_objectSpread$1({
+  return jsxs(Editor$1, _objectSpread$1(_objectSpread$1({
     editor: editor
   }, passedProps), {}, {
     children: [children, jsx(HiddenInput, {
@@ -150,38 +166,40 @@ var renderEditor = function renderEditor(props, editor, next) {
       handleFocus: editor.focus,
       id: props.id,
       disabled: props.disabled,
-      readOnly: props.readOnly
+      readOnly: Boolean(props.readOnly)
     })]
   }));
 };
 
-var sharedProps = process.env.NODE_ENV !== "production" ? {
-  id: PropTypes.string,
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  horizontalConstraint: PropTypes.oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
-} : {};
-Editor.displayName = 'Editor';
-Editor.propTypes = process.env.NODE_ENV !== "production" ? _objectSpread$1(_objectSpread$1({}, sharedProps), {}, {
-  editor: PropTypes.any
-}) : {};
-renderEditor.propTypes = process.env.NODE_ENV !== "production" ? _objectSpread$1(_objectSpread$1({}, sharedProps), {}, {
-  options: PropTypes.shape({
-    hasWarning: PropTypes.bool,
-    hasError: PropTypes.bool
-  })
-}) : {};
+Editor$1.displayName = 'Editor';
 var renderEditor$1 = renderEditor;
 
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+// This is a temporary wrapper component helping to mitigate typing issues of `slate-react@0.22.10` package.
+// TODO: remove after upgrade of `slate-react` to the latest version
+var Editor = function Editor(props) {
+  return jsx(Editor$2, _objectSpread({}, props));
+};
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+Editor.propTypes = process.env.NODE_ENV !== "production" ? {
+  autoFocus: _pt.bool,
+  id: _pt.string,
+  name: _pt.string,
+  onFocus: _pt.func,
+  onBlur: _pt.func,
+  value: _pt.any.isRequired,
+  options: _pt.any.isRequired,
+  onChange: _pt.func,
+  plugins: _pt.any.isRequired,
+  renderEditor: _pt.any.isRequired
+} : {};
 
 var RichTextInput = /*#__PURE__*/function (_PureComponent) {
   _inherits(RichTextInput, _PureComponent);
@@ -200,7 +218,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
     }
 
     _this = _super.call.apply(_super, _concatInstanceProperty(_context = [this]).call(_context, args));
-    _this.serializedValue = _this.props.value || '';
+    _this.serializedValue = _this.props.value;
     _this.internalSlateValue = html.deserialize(_this.props.value || '');
 
     _this.onValueChange = function (event) {
@@ -217,6 +235,8 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
       // onChange unless this value changes.
 
       if (hasSerializedValueChanged) {
+        var _this$props$onChange, _this$props;
+
         var fakeEvent = {
           target: {
             id: _this.props.id,
@@ -224,8 +244,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
             value: serializedValue
           }
         };
-
-        _this.props.onChange(fakeEvent);
+        (_this$props$onChange = (_this$props = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, fakeEvent);
       }
 
       if (hasInternalSlateValueChanged && !hasSerializedValueChanged) {
@@ -234,7 +253,7 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
       }
     };
 
-    _this.onBlur = function (event, editor, next) {
+    _this.onBlur = function (_event, _editor, next) {
       next();
 
       if (_this.props.onBlur) {
@@ -246,12 +265,14 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
         };
 
         _setTimeout(function () {
-          return _this.props.onBlur(fakeEvent);
+          var _this$props$onBlur, _this$props2;
+
+          return (_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, fakeEvent);
         }, 0);
       }
     };
 
-    _this.onFocus = function (event, editor, next) {
+    _this.onFocus = function (_event, _editor, next) {
       next();
 
       if (_this.props.onFocus) {
@@ -263,7 +284,9 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
         };
 
         _setTimeout(function () {
-          return _this.props.onFocus(fakeEvent);
+          var _this$props$onFocus, _this$props3;
+
+          return (_this$props$onFocus = (_this$props3 = _this.props).onFocus) === null || _this$props$onFocus === void 0 ? void 0 : _this$props$onFocus.call(_this$props3, fakeEvent);
         }, 0);
       }
     };
@@ -283,15 +306,24 @@ var RichTextInput = /*#__PURE__*/function (_PureComponent) {
       // can understand, save this value to our class variable, and forceUpdate
       // this keeps the component in sync.
       if (this.props.value !== this.serializedValue) {
-        this.internalSlateValue = html.deserialize(this.props.value);
-        this.serializedValue = this.props.value;
+        var value = this.props.value || '';
+        this.internalSlateValue = html.deserialize(value);
+        this.serializedValue = value;
         this.forceUpdate();
       }
     }
   }, {
     key: "render",
     value: function render() {
-      return jsx(Editor$1, _objectSpread(_objectSpread({}, filterDataAttributes(this.props)), {}, {
+      if (!this.props.isReadOnly) {
+        process.env.NODE_ENV !== "production" ? warning(typeof this.props.onChange === 'function', 'RichTextInput: "onChange" is required when field is not read only.') : void 0;
+      }
+
+      if (this.props.showExpandIcon) {
+        process.env.NODE_ENV !== "production" ? warning(typeof this.props.onClickExpand === 'function', 'RichTextInput: "onClickExpand" is required when showExpandIcon is true') : void 0;
+      }
+
+      return jsx(Editor, _objectSpread(_objectSpread({}, filterDataAttributes(this.props)), {}, {
         autoFocus: this.props.isAutofocussed,
         id: this.props.id,
         name: this.props.name,
@@ -328,30 +360,18 @@ RichTextInput.isTouched = function (touched) {
 };
 
 RichTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  isAutofocussed: PropTypes.bool,
-  defaultExpandMultilineText: PropTypes.bool,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  placeholder: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  horizontalConstraint: PropTypes.oneOf([7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
-  onChange: requiredIf(PropTypes.func, function (props) {
-    return !props.isReadOnly;
-  }),
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  value: PropTypes.string,
-  showExpandIcon: PropTypes.bool.isRequired,
-  onClickExpand: requiredIf(PropTypes.func, function (props) {
-    return props.showExpandIcon;
-  })
+  isAutofocussed: _pt.bool,
+  id: _pt.string,
+  name: _pt.string,
+  placeholder: _pt.string,
+  onChange: _pt.func,
+  onFocus: _pt.func,
+  onBlur: _pt.func,
+  value: _pt.string
 } : {};
 var RichTextInput$1 = RichTextInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.2";
+var version = "14.0.0";
 
 export { RichTextInput$1 as default, version };