@handsontable/react 12.3.1 → 12.3.2-next-e75de58-20230322

package/commonjs/react-handsontable.js

@@ -223,48 +223,22 @@ function getOriginalEditorClass(editorElement) {
   }
   return editorElement.type.WrappedComponent ? editorElement.type.WrappedComponent : editorElement.type;
 }
-/**
- * Remove editor containers from DOM.
- *
- * @param {Document} [doc] Document to be used.
- * @param {Map} editorCache The editor cache reference.
- */
-function removeEditorContainers() {
-  var doc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-  doc.querySelectorAll("[class^=\"".concat(DEFAULT_CLASSNAME, "\"]")).forEach(function (domNode) {
-    if (domNode.parentNode) {
-      domNode.parentNode.removeChild(domNode);
-    }
-  });
-}
 /**
  * Create an editor portal.
  *
  * @param {Document} [doc] Document to be used.
  * @param {React.ReactElement} editorElement Editor's element.
- * @param {Map} editorCache The editor cache reference.
  * @returns {React.ReactPortal} The portal for the editor.
  */
 function createEditorPortal() {
   var doc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
   var editorElement = arguments.length > 1 ? arguments[1] : undefined;
   if (editorElement === null) {
-    return;
-  }
-  var editorContainer = doc.createElement('DIV');
-  var _getContainerAttribut = getContainerAttributesProps(editorElement.props, false),
-    id = _getContainerAttribut.id,
-    className = _getContainerAttribut.className,
-    style = _getContainerAttribut.style;
-  if (id) {
-    editorContainer.id = id;
-  }
-  editorContainer.className = [DEFAULT_CLASSNAME, className].join(' ');
-  if (style) {
-    Object.assign(editorContainer.style, style);
+    return null;
   }
-  doc.body.appendChild(editorContainer);
-  return ReactDOM__default["default"].createPortal(editorElement, editorContainer);
+  var containerProps = getContainerAttributesProps(editorElement.props, false);
+  containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
+  return ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", Object.assign({}, containerProps), editorElement), doc.body);
 }
 /**
  * Get an editor element extended with a instance-emitting method.
@@ -299,12 +273,11 @@ function getExtendedEditorElement(children, editorCache) {
  *
  * @param {React.ReactElement} rElement React element to be used as a base for the component.
  * @param {Object} props Props to be passed to the cloned element.
- * @param {Function} callback Callback to be called after the component has been mounted.
  * @param {Document} [ownerDocument] The owner document to set the portal up into.
  * @returns {{portal: React.ReactPortal, portalContainer: HTMLElement}} An object containing the portal and its container.
  */
-function createPortal(rElement, props, callback) {
-  var ownerDocument = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
+function createPortal(rElement, props) {
+  var ownerDocument = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document;
   if (!ownerDocument) {
     ownerDocument = document;
   }
@@ -338,23 +311,6 @@ function getContainerAttributesProps(props) {
     style: props.style || {}
   };
 }
-/**
- * Add the `UNSAFE_` prefixes to the deprecated lifecycle methods for React >= 16.3.
- *
- * @param {Object} instance Instance to have the methods renamed.
- */
-function addUnsafePrefixes(instance) {
-  var reactSemverArray = React__default["default"].version.split('.').map(function (v) {
-    return parseInt(v);
-  });
-  var shouldPrefix = reactSemverArray[0] >= 16 && reactSemverArray[1] >= 3 || reactSemverArray[0] >= 17;
-  if (shouldPrefix) {
-    instance.UNSAFE_componentWillUpdate = instance.componentWillUpdate;
-    instance.componentWillUpdate = void 0;
-    instance.UNSAFE_componentWillMount = instance.componentWillMount;
-    instance.componentWillMount = void 0;
-  }
-}
 
 var SettingsMapper = /*#__PURE__*/function () {
   function SettingsMapper() {
@@ -390,48 +346,54 @@ var SettingsMapper = /*#__PURE__*/function () {
   return SettingsMapper;
 }();
 
+/**
+ * Component class used to manage the editor component portals.
+ */
+var EditorsPortalManager = /*#__PURE__*/function (_React$Component) {
+  _inherits(EditorsPortalManager, _React$Component);
+  var _super = _createSuper(EditorsPortalManager);
+  function EditorsPortalManager() {
+    var _this;
+    _classCallCheck(this, EditorsPortalManager);
+    _this = _super.apply(this, arguments);
+    _this.state = {
+      portals: []
+    };
+    return _this;
+  }
+  _createClass(EditorsPortalManager, [{
+    key: "render",
+    value: function render() {
+      return React__default["default"].createElement(React__default["default"].Fragment, null, this.state.portals);
+    }
+  }]);
+  return EditorsPortalManager;
+}(React__default["default"].Component);
+
 var HotColumn = /*#__PURE__*/function (_React$Component) {
   _inherits(HotColumn, _React$Component);
   var _super = _createSuper(HotColumn);
-  /**
-   * HotColumn class constructor.
-   *
-   * @param {HotColumnProps} props Component props.
-   * @param {*} [context] Component context.
-   */
-  function HotColumn(props, context) {
+  function HotColumn() {
     var _this;
     _classCallCheck(this, HotColumn);
-    _this = _super.call(this, props, context);
+    _this = _super.apply(this, arguments);
     /**
-     * Local editor portal cache.
+     * Component used to manage the editor portals.
      *
-     * @private
-     * @type {ReactPortal}
+     * @type {React.Component}
      */
-    _this.localEditorPortal = null;
-    addUnsafePrefixes(_assertThisInitialized(_this));
+    _this.editorsPortalManager = null;
     return _this;
   }
   /**
-   * Get the local editor portal cache property.
+   * Set the editors portal manager ref.
    *
-   * @return {ReactPortal} Local editor portal.
+   * @param {React.ReactComponent} pmComponent The PortalManager component.
    */
   _createClass(HotColumn, [{
-    key: "getLocalEditorPortal",
-    value: function getLocalEditorPortal() {
-      return this.localEditorPortal;
-    }
-    /**
-     * Set the local editor portal cache property.
-     *
-     * @param {ReactPortal} portal Local editor portal.
-     */
-  }, {
-    key: "setLocalEditorPortal",
-    value: function setLocalEditorPortal(portal) {
-      this.localEditorPortal = portal;
+    key: "setEditorsPortalManagerRef",
+    value: function setEditorsPortalManagerRef(pmComponent) {
+      this.editorsPortalManager = pmComponent;
     }
     /**
      * Filter out all the internal properties and return an object with just the Handsontable-related props.
@@ -442,7 +404,7 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
     key: "getSettingsProps",
     value: function getSettingsProps() {
       var _this2 = this;
-      this.internalProps = ['__componentRendererColumns', '_emitColumnSettings', '_columnIndex', '_getChildElementByType', '_getRendererWrapper', '_getEditorClass', '_getEditorCache', '_getOwnerDocument', 'hot-renderer', 'hot-editor', 'children'];
+      this.internalProps = ['_componentRendererColumns', '_emitColumnSettings', '_columnIndex', '_getChildElementByType', '_getRendererWrapper', '_getEditorClass', '_getEditorCache', '_getOwnerDocument', 'hot-renderer', 'hot-editor', 'children'];
       return Object.keys(this.props).filter(function (key) {
         return !_this2.internalProps.includes(key);
       }).reduce(function (obj, key) {
@@ -478,19 +440,19 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
       }
     }
     /**
-     * Create the local editor portal and its destination HTML element if needed.
+     * Creates the local editor portal and renders it within the editors portal manager component.
      *
-     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
+     * @param {Function} callback Callback to call which is triggered after the editors portal is rendered.
      */
   }, {
-    key: "createLocalEditorPortal",
-    value: function createLocalEditorPortal() {
-      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.children;
+    key: "renderLocalEditorPortal",
+    value: function renderLocalEditorPortal(callback) {
       var editorCache = this.props._getEditorCache();
-      var localEditorElement = getExtendedEditorElement(children, editorCache, this.props._columnIndex);
-      if (localEditorElement) {
-        this.setLocalEditorPortal(createEditorPortal(this.props._getOwnerDocument(), localEditorElement, editorCache));
-      }
+      var localEditorElement = getExtendedEditorElement(this.props.children, editorCache, this.props._columnIndex);
+      var editorPortal = createEditorPortal(this.props._getOwnerDocument(), localEditorElement);
+      this.editorsPortalManager.setState({
+        portals: [editorPortal]
+      }, callback);
     }
     /**
      * Emit the column settings to the parent using a prop passed from the parent.
@@ -505,30 +467,17 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
     ------- React lifecycle methods -------
     ---------------------------------------
     */
-    /**
-     * Logic performed before the mounting of the HotColumn component.
-     */
-  }, {
-    key: "componentWillMount",
-    value: function componentWillMount() {
-      this.createLocalEditorPortal();
-    }
     /**
      * Logic performed after the mounting of the HotColumn component.
      */
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.createColumnSettings();
-      this.emitColumnSettings();
-    }
-    /**
-     * Logic performed before the updating of the HotColumn component.
-     */
-  }, {
-    key: "componentWillUpdate",
-    value: function componentWillUpdate(nextProps, nextState, nextContext) {
-      this.createLocalEditorPortal(nextProps.children);
+      var _this3 = this;
+      this.renderLocalEditorPortal(function () {
+        _this3.createColumnSettings();
+        _this3.emitColumnSettings();
+      });
     }
     /**
      * Logic performed after the updating of the HotColumn component.
@@ -536,8 +485,11 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      this.createColumnSettings();
-      this.emitColumnSettings();
+      var _this4 = this;
+      this.renderLocalEditorPortal(function () {
+        _this4.createColumnSettings();
+        _this4.emitColumnSettings();
+      });
     }
     /**
      * Render the portals of the editors, if there are any.
@@ -547,7 +499,9 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React__default["default"].createElement(React__default["default"].Fragment, null, this.getLocalEditorPortal());
+      return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(EditorsPortalManager, {
+        ref: this.setEditorsPortalManagerRef.bind(this)
+      }));
     }
   }]);
   return HotColumn;
@@ -556,28 +510,28 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
 /**
  * Component class used to manage the renderer component portals.
  */
-var PortalManager = /*#__PURE__*/function (_React$Component) {
-  _inherits(PortalManager, _React$Component);
-  var _super = _createSuper(PortalManager);
-  function PortalManager(props) {
+var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
+  _inherits(RenderersPortalManager, _React$Component);
+  var _super = _createSuper(RenderersPortalManager);
+  function RenderersPortalManager() {
     var _this;
-    _classCallCheck(this, PortalManager);
-    _this = _super.call(this, props);
+    _classCallCheck(this, RenderersPortalManager);
+    _this = _super.apply(this, arguments);
     _this.state = {
       portals: []
     };
     return _this;
   }
-  _createClass(PortalManager, [{
+  _createClass(RenderersPortalManager, [{
     key: "render",
     value: function render() {
       return React__default["default"].createElement(React__default["default"].Fragment, null, this.state.portals);
     }
   }]);
-  return PortalManager;
+  return RenderersPortalManager;
 }(React__default["default"].Component);
 
-var version="12.3.1";
+var version="12.3.2-next-e75de58-20230322";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1723,16 +1677,10 @@ var PropTypes = propTypes;
 var HotTable = /*#__PURE__*/function (_React$Component) {
   _inherits(HotTable, _React$Component);
   var _super = _createSuper(HotTable);
-  /**
-   * HotTable class constructor.
-   *
-   * @param {HotTableProps} props Component props.
-   * @param {*} [context] Component context.
-   */
-  function HotTable(props, context) {
+  function HotTable() {
     var _this;
     _classCallCheck(this, HotTable);
-    _this = _super.call(this, props, context);
+    _this = _super.apply(this, arguments);
     /**
      * The `id` of the main Handsontable DOM element.
      *
@@ -1763,18 +1711,17 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
      *
      * @type {React.Component}
      */
-    _this.portalManager = null;
+    _this.renderersPortalManager = null;
     /**
-     * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
+     * Component used to manage the editor portals.
+     *
+     * @type {React.Component}
      */
-    _this.portalCacheArray = [];
+    _this.editorsPortalManager = null;
     /**
-     * Global editor portal cache.
-     *
-     * @private
-     * @type {React.ReactPortal}
+     * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
      */
-    _this.globalEditorPortal = null;
+    _this.portalCacheArray = [];
     /**
      * The rendered cells cache.
      *
@@ -1797,7 +1744,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
      * @type {Map}
      */
     _this.componentRendererColumns = new Map();
-    addUnsafePrefixes(_assertThisInitialized(_this));
     return _this;
   }
   /**
@@ -1847,37 +1793,14 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     value: function getEditorCache() {
       return this.editorCache;
     }
-    /**
-     * Get the global editor portal property.
-     *
-     * @return {React.ReactPortal} The global editor portal.
-     */
-  }, {
-    key: "getGlobalEditorPortal",
-    value: function getGlobalEditorPortal() {
-      return this.globalEditorPortal;
-    }
-    /**
-     * Set the private editor portal cache property.
-     *
-     * @param {React.ReactPortal} portal Global editor portal.
-     */
-  }, {
-    key: "setGlobalEditorPortal",
-    value: function setGlobalEditorPortal(portal) {
-      this.globalEditorPortal = portal;
-    }
     /**
      * Clear both the editor and the renderer cache.
      */
   }, {
     key: "clearCache",
     value: function clearCache() {
-      var renderedCellCache = this.getRenderedCellCache();
-      this.setGlobalEditorPortal(null);
-      removeEditorContainers(this.getOwnerDocument());
       this.getEditorCache().clear();
-      renderedCellCache.clear();
+      this.getRenderedCellCache().clear();
       this.componentRendererColumns.clear();
     }
     /**
@@ -1924,7 +1847,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
               value: value,
               cellProperties: cellProperties,
               isRenderer: true
-            }, function () {}, TD.ownerDocument),
+            }, TD.ownerDocument),
             portal = _createPortal.portal,
             portalContainer = _createPortal.portalContainer;
           while (TD.firstChild) {
@@ -1948,11 +1871,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getEditorClass",
     value: function getEditorClass(editorElement) {
-      var _editorCache$get;
+      var _this$getEditorCache$;
       var editorColumnScope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GLOBAL_EDITOR_SCOPE;
       var editorClass = getOriginalEditorClass(editorElement);
-      var editorCache = this.getEditorCache();
-      var cachedComponent = (_editorCache$get = editorCache.get(editorClass)) === null || _editorCache$get === void 0 ? void 0 : _editorCache$get.get(editorColumnScope);
+      var cachedComponent = (_this$getEditorCache$ = this.getEditorCache().get(editorClass)) === null || _this$getEditorCache$ === void 0 ? void 0 : _this$getEditorCache$.get(editorColumnScope);
       return this.makeEditorClass(cachedComponent);
     }
     /**
@@ -2016,8 +1938,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getGlobalRendererElement",
     value: function getGlobalRendererElement() {
-      var hotTableSlots = this.props.children;
-      return getChildElementByType(hotTableSlots, 'hot-renderer');
+      return getChildElementByType(this.props.children, 'hot-renderer');
     }
     /**
      * Get the editor element for the entire HotTable instance.
@@ -2028,22 +1949,21 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getGlobalEditorElement",
     value: function getGlobalEditorElement() {
-      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.children;
-      return getExtendedEditorElement(children, this.getEditorCache());
+      return getExtendedEditorElement(this.props.children, this.getEditorCache());
     }
     /**
-     * Create the global editor portal and its destination HTML element if needed.
+     * Creates the global editor portal and renders it within the editors portal manager component.
      *
-     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
+     * @param {Function} callback Callback to call which is triggered after the editors portal is rendered.
      */
   }, {
-    key: "createGlobalEditorPortal",
-    value: function createGlobalEditorPortal() {
-      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.children;
-      var globalEditorElement = this.getGlobalEditorElement(children);
-      if (globalEditorElement) {
-        this.setGlobalEditorPortal(createEditorPortal(this.getOwnerDocument(), globalEditorElement, this.getEditorCache()));
-      }
+    key: "renderGlobalEditorPortal",
+    value: function renderGlobalEditorPortal(callback) {
+      var globalEditorElement = this.getGlobalEditorElement();
+      var editorPortal = createEditorPortal(this.getOwnerDocument(), globalEditorElement);
+      this.editorsPortalManager.setState({
+        portals: [editorPortal]
+      }, callback);
     }
     /**
      * Create a new settings object containing the column settings and global editors and renderers.
@@ -2111,7 +2031,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     key: "handsontableAfterViewRender",
     value: function handsontableAfterViewRender() {
       var _this3 = this;
-      this.portalManager.setState(function () {
+      this.renderersPortalManager.setState(function () {
         return Object.assign({}, {
           portals: _this3.portalCacheArray
         });
@@ -2132,57 +2052,56 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       }
     }
     /**
-     * Set the portal manager ref.
+     * Set the renderers portal manager ref.
      *
      * @param {React.ReactComponent} pmComponent The PortalManager component.
      */
   }, {
-    key: "setPortalManagerRef",
-    value: function setPortalManagerRef(pmComponent) {
-      this.portalManager = pmComponent;
+    key: "setRenderersPortalManagerRef",
+    value: function setRenderersPortalManagerRef(pmComponent) {
+      this.renderersPortalManager = pmComponent;
+    }
+    /**
+     * Set the editors portal manager ref.
+     *
+     * @param {React.ReactComponent} pmComponent The PortalManager component.
+     */
+  }, {
+    key: "setEditorsPortalManagerRef",
+    value: function setEditorsPortalManagerRef(pmComponent) {
+      this.editorsPortalManager = pmComponent;
     }
     /*
     ---------------------------------------
     ------- React lifecycle methods -------
     ---------------------------------------
     */
-    /**
-     * Logic performed before the mounting of the component.
-     */
-  }, {
-    key: "componentWillMount",
-    value: function componentWillMount() {
-      this.clearCache();
-      this.createGlobalEditorPortal();
-    }
     /**
      * Initialize Handsontable after the component has mounted.
      */
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var hotTableComponent = this;
-      var newGlobalSettings = this.createNewGlobalSettings();
-      this.hotInstance = new Handsontable__default["default"].Core(this.hotElementRef, newGlobalSettings);
-      this.hotInstance.addHook('beforeViewRender', function (isForced) {
-        hotTableComponent.handsontableBeforeViewRender();
-      });
-      this.hotInstance.addHook('afterViewRender', function () {
-        hotTableComponent.handsontableAfterViewRender();
-      });
-      // `init` missing in Handsontable's type definitions.
-      this.hotInstance.init();
-      this.displayAutoSizeWarning(newGlobalSettings);
-    }
-    /**
-     * Logic performed before the component update.
-     */
-  }, {
-    key: "componentWillUpdate",
-    value: function componentWillUpdate(nextProps, nextState, nextContext) {
+      var _this4 = this;
       this.clearCache();
-      removeEditorContainers(this.getOwnerDocument());
-      this.createGlobalEditorPortal(nextProps.children);
+      this.renderGlobalEditorPortal(function () {
+        // In React strict mode the mount/unmount is triggered twice. The `if` prevents
+        // creating two Handsontable instances for the same component in that mode.
+        if (_this4.hotInstance) {
+          return;
+        }
+        var newGlobalSettings = _this4.createNewGlobalSettings();
+        _this4.hotInstance = new Handsontable__default["default"].Core(_this4.hotElementRef, newGlobalSettings);
+        _this4.hotInstance.addHook('beforeViewRender', function () {
+          return _this4.handsontableBeforeViewRender();
+        });
+        _this4.hotInstance.addHook('afterViewRender', function () {
+          return _this4.handsontableAfterViewRender();
+        });
+        // `init` missing in Handsontable's type definitions.
+        _this4.hotInstance.init();
+        _this4.displayAutoSizeWarning(newGlobalSettings);
+      });
     }
     /**
      * Logic performed after the component update.
@@ -2190,9 +2109,13 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var newGlobalSettings = this.createNewGlobalSettings();
-      this.updateHot(newGlobalSettings);
-      this.displayAutoSizeWarning(newGlobalSettings);
+      var _this5 = this;
+      this.clearCache();
+      this.renderGlobalEditorPortal(function () {
+        var newGlobalSettings = _this5.createNewGlobalSettings();
+        _this5.updateHot(newGlobalSettings);
+        _this5.displayAutoSizeWarning(newGlobalSettings);
+      });
     }
     /**
      * Destroy the Handsontable instance when the parent component unmounts.
@@ -2203,7 +2126,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       if (this.hotInstance) {
         this.hotInstance.destroy();
       }
-      removeEditorContainers(this.getOwnerDocument());
     }
     /**
      * Render the component.
@@ -2211,11 +2133,8 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
-      var _getContainerAttribut = getContainerAttributesProps(this.props),
-        id = _getContainerAttribut.id,
-        className = _getContainerAttribut.className,
-        style = _getContainerAttribut.style;
+      var _this6 = this;
+      var containerProps = getContainerAttributesProps(this.props);
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
@@ -2227,26 +2146,23 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       // clone the HotColumn nodes and extend them with the callbacks
       var childClones = children.map(function (childNode, columnIndex) {
         return React__default["default"].cloneElement(childNode, {
-          _componentRendererColumns: _this4.componentRendererColumns,
-          _emitColumnSettings: _this4.setHotColumnSettings.bind(_this4),
+          _componentRendererColumns: _this6.componentRendererColumns,
+          _emitColumnSettings: _this6.setHotColumnSettings.bind(_this6),
           _columnIndex: columnIndex,
-          _getChildElementByType: getChildElementByType.bind(_this4),
-          _getRendererWrapper: _this4.getRendererWrapper.bind(_this4),
-          _getEditorClass: _this4.getEditorClass.bind(_this4),
-          _getOwnerDocument: _this4.getOwnerDocument.bind(_this4),
-          _getEditorCache: _this4.getEditorCache.bind(_this4),
+          _getChildElementByType: getChildElementByType.bind(_this6),
+          _getRendererWrapper: _this6.getRendererWrapper.bind(_this6),
+          _getEditorClass: _this6.getEditorClass.bind(_this6),
+          _getOwnerDocument: _this6.getOwnerDocument.bind(_this6),
+          _getEditorCache: _this6.getEditorCache.bind(_this6),
           children: childNode.props.children
         });
       });
-      // add the global editor to the list of children
-      childClones.push(this.getGlobalEditorPortal());
-      return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
-        ref: this.setHotElementRef.bind(this),
-        id: id,
-        className: className,
-        style: style
-      }, childClones), React__default["default"].createElement(PortalManager, {
-        ref: this.setPortalManagerRef.bind(this)
+      return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", Object.assign({
+        ref: this.setHotElementRef.bind(this)
+      }, containerProps), childClones), React__default["default"].createElement(RenderersPortalManager, {
+        ref: this.setRenderersPortalManagerRef.bind(this)
+      }), React__default["default"].createElement(EditorsPortalManager, {
+        ref: this.setEditorsPortalManagerRef.bind(this)
       }));
     }
   }], [{
@@ -2269,10 +2185,10 @@ HotTable.propTypes = {
 var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(BaseEditorComponent, _React$Component);
   var _super = _createSuper(BaseEditorComponent);
-  function BaseEditorComponent(props) {
+  function BaseEditorComponent() {
     var _this;
     _classCallCheck(this, BaseEditorComponent);
-    _this = _super.call(this, props);
+    _this = _super.apply(this, arguments);
     _this.name = 'BaseEditorComponent';
     _this.instance = null;
     _this.row = null;
@@ -2285,13 +2201,24 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
     _this.hotInstance = null;
     _this.hotCustomEditorInstance = null;
     _this.hot = null;
-    if (props.emitEditorInstance) {
-      props.emitEditorInstance(_assertThisInitialized(_this), props.editorColumnScope);
-    }
     return _this;
   }
-  // BaseEditor methods:
   _createClass(BaseEditorComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.emitEditorInstance) {
+        this.props.emitEditorInstance(this, this.props.editorColumnScope);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.props.emitEditorInstance) {
+        this.props.emitEditorInstance(this, this.props.editorColumnScope);
+      }
+    }
+    // BaseEditor methods:
+  }, {
     key: "_fireCallbacks",
     value: function _fireCallbacks() {
       var _Handsontable$editors;