@handsontable/react 0.0.0-next-460cf29-20230220 → 0.0.0-next-bbc9650-20230220

package/commonjs/react-handsontable.js

@@ -223,6 +223,49 @@ 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);
+  }
+  doc.body.appendChild(editorContainer);
+  return ReactDOM__default["default"].createPortal(editorElement, editorContainer);
+}
 /**
  * Get an editor element extended with a instance-emitting method.
  *
@@ -256,11 +299,12 @@ 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) {
-  var ownerDocument = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document;
+function createPortal(rElement, props, callback) {
+  var ownerDocument = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : document;
   if (!ownerDocument) {
     ownerDocument = document;
   }
@@ -294,6 +338,23 @@ 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() {
@@ -329,41 +390,63 @@ var SettingsMapper = /*#__PURE__*/function () {
   return SettingsMapper;
 }();
 
-/**
- * Component provides an editor container for custom editors.
- */
-function EditorHolder(_ref) {
-  var editorElement = _ref.editorElement;
-  if (editorElement === null) {
-    return null;
-  }
-  var containerProps = getContainerAttributesProps(editorElement.props, false);
-  containerProps.className = [DEFAULT_CLASSNAME, containerProps.className].join(' ');
-  return React__default["default"].createElement("div", Object.assign({}, containerProps), editorElement);
-}
-
 var HotColumn = /*#__PURE__*/function (_React$Component) {
   _inherits(HotColumn, _React$Component);
   var _super = _createSuper(HotColumn);
-  function HotColumn() {
+  /**
+   * HotColumn class constructor.
+   *
+   * @param {HotColumnProps} props Component props.
+   * @param {*} [context] Component context.
+   */
+  function HotColumn(props, context) {
+    var _this;
     _classCallCheck(this, HotColumn);
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props, context);
+    /**
+     * Local editor portal cache.
+     *
+     * @private
+     * @type {ReactPortal}
+     */
+    _this.localEditorPortal = null;
+    addUnsafePrefixes(_assertThisInitialized(_this));
+    return _this;
   }
+  /**
+   * Get the local editor portal cache property.
+   *
+   * @return {ReactPortal} Local editor portal.
+   */
   _createClass(HotColumn, [{
-    key: "getSettingsProps",
-    value:
+    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;
+    }
     /**
      * Filter out all the internal properties and return an object with just the Handsontable-related props.
      *
      * @returns {Object}
      */
-    function getSettingsProps() {
-      var _this = this;
+  }, {
+    key: "getSettingsProps",
+    value: function getSettingsProps() {
+      var _this2 = this;
       this.internalProps = ['__componentRendererColumns', '_emitColumnSettings', '_columnIndex', '_getChildElementByType', '_getRendererWrapper', '_getEditorClass', '_getEditorCache', '_getOwnerDocument', 'hot-renderer', 'hot-editor', 'children'];
       return Object.keys(this.props).filter(function (key) {
-        return !_this.internalProps.includes(key);
+        return !_this2.internalProps.includes(key);
       }).reduce(function (obj, key) {
-        obj[key] = _this.props[key];
+        obj[key] = _this2.props[key];
         return obj;
       }, {});
     }
@@ -394,6 +477,21 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
         this.columnSettings.editor = this.props._getEditorClass(editorElement, this.props._columnIndex);
       }
     }
+    /**
+     * Create the local editor portal and its destination HTML element if needed.
+     *
+     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
+     */
+  }, {
+    key: "createLocalEditorPortal",
+    value: function createLocalEditorPortal() {
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.children;
+      var editorCache = this.props._getEditorCache();
+      var localEditorElement = getExtendedEditorElement(children, editorCache, this.props._columnIndex);
+      if (localEditorElement) {
+        this.setLocalEditorPortal(createEditorPortal(this.props._getOwnerDocument(), localEditorElement, editorCache));
+      }
+    }
     /**
      * Emit the column settings to the parent using a prop passed from the parent.
      */
@@ -407,6 +505,14 @@ 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.
      */
@@ -416,6 +522,14 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
       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);
+    }
     /**
      * Logic performed after the updating of the HotColumn component.
      */
@@ -433,9 +547,7 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(EditorHolder, {
-        editorElement: this.getLocalEditorElement()
-      }));
+      return React__default["default"].createElement(React__default["default"].Fragment, null, this.getLocalEditorPortal());
     }
   }]);
   return HotColumn;
@@ -447,10 +559,10 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
 var PortalManager = /*#__PURE__*/function (_React$Component) {
   _inherits(PortalManager, _React$Component);
   var _super = _createSuper(PortalManager);
-  function PortalManager() {
+  function PortalManager(props) {
     var _this;
     _classCallCheck(this, PortalManager);
-    _this = _super.apply(this, arguments);
+    _this = _super.call(this, props);
     _this.state = {
       portals: []
     };
@@ -465,7 +577,7 @@ var PortalManager = /*#__PURE__*/function (_React$Component) {
   return PortalManager;
 }(React__default["default"].Component);
 
-var version="0.0.0-next-460cf29-20230220";
+var version="0.0.0-next-bbc9650-20230220";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1611,10 +1723,16 @@ var PropTypes = propTypes;
 var HotTable = /*#__PURE__*/function (_React$Component) {
   _inherits(HotTable, _React$Component);
   var _super = _createSuper(HotTable);
-  function HotTable() {
+  /**
+   * HotTable class constructor.
+   *
+   * @param {HotTableProps} props Component props.
+   * @param {*} [context] Component context.
+   */
+  function HotTable(props, context) {
     var _this;
     _classCallCheck(this, HotTable);
-    _this = _super.apply(this, arguments);
+    _this = _super.call(this, props, context);
     /**
      * The `id` of the main Handsontable DOM element.
      *
@@ -1650,6 +1768,13 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
      * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
      */
     _this.portalCacheArray = [];
+    /**
+     * Global editor portal cache.
+     *
+     * @private
+     * @type {React.ReactPortal}
+     */
+    _this.globalEditorPortal = null;
     /**
      * The rendered cells cache.
      *
@@ -1672,6 +1797,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
      * @type {Map}
      */
     _this.componentRendererColumns = new Map();
+    addUnsafePrefixes(_assertThisInitialized(_this));
     return _this;
   }
   /**
@@ -1721,14 +1847,37 @@ 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();
-      this.getRenderedCellCache().clear();
+      renderedCellCache.clear();
       this.componentRendererColumns.clear();
     }
     /**
@@ -1775,7 +1924,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
               value: value,
               cellProperties: cellProperties,
               isRenderer: true
-            }, TD.ownerDocument),
+            }, function () {}, TD.ownerDocument),
             portal = _createPortal.portal,
             portalContainer = _createPortal.portalContainer;
           while (TD.firstChild) {
@@ -1867,17 +2016,34 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getGlobalRendererElement",
     value: function getGlobalRendererElement() {
-      return getChildElementByType(this.props.children, 'hot-renderer');
+      var hotTableSlots = this.props.children;
+      return getChildElementByType(hotTableSlots, 'hot-renderer');
     }
     /**
      * Get the editor element for the entire HotTable instance.
      *
+     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
      * @returns {React.ReactElement} React editor component element.
      */
   }, {
     key: "getGlobalEditorElement",
     value: function getGlobalEditorElement() {
-      return getExtendedEditorElement(this.props.children, this.getEditorCache());
+      var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.children;
+      return getExtendedEditorElement(children, this.getEditorCache());
+    }
+    /**
+     * Create the global editor portal and its destination HTML element if needed.
+     *
+     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
+     */
+  }, {
+    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()));
+      }
     }
     /**
      * Create a new settings object containing the column settings and global editors and renderers.
@@ -1980,25 +2146,44 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     ------- 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 _this4 = this;
+      var hotTableComponent = this;
       var newGlobalSettings = this.createNewGlobalSettings();
       this.hotInstance = new Handsontable__default["default"].Core(this.hotElementRef, newGlobalSettings);
-      this.hotInstance.addHook('beforeViewRender', function () {
-        return _this4.handsontableBeforeViewRender();
+      this.hotInstance.addHook('beforeViewRender', function (isForced) {
+        hotTableComponent.handsontableBeforeViewRender();
       });
       this.hotInstance.addHook('afterViewRender', function () {
-        return _this4.handsontableAfterViewRender();
+        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) {
+      this.clearCache();
+      removeEditorContainers(this.getOwnerDocument());
+      this.createGlobalEditorPortal(nextProps.children);
+    }
     /**
      * Logic performed after the component update.
      */
@@ -2015,10 +2200,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.clearCache();
       if (this.hotInstance) {
         this.hotInstance.destroy();
       }
+      removeEditorContainers(this.getOwnerDocument());
     }
     /**
      * Render the component.
@@ -2026,8 +2211,11 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
-      var containerProps = getContainerAttributesProps(this.props);
+      var _this4 = this;
+      var _getContainerAttribut = getContainerAttributesProps(this.props),
+        id = _getContainerAttribut.id,
+        className = _getContainerAttribut.className,
+        style = _getContainerAttribut.style;
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
@@ -2039,22 +2227,25 @@ 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: _this5.componentRendererColumns,
-          _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
+          _componentRendererColumns: _this4.componentRendererColumns,
+          _emitColumnSettings: _this4.setHotColumnSettings.bind(_this4),
           _columnIndex: columnIndex,
-          _getChildElementByType: getChildElementByType.bind(_this5),
-          _getRendererWrapper: _this5.getRendererWrapper.bind(_this5),
-          _getEditorClass: _this5.getEditorClass.bind(_this5),
-          _getOwnerDocument: _this5.getOwnerDocument.bind(_this5),
-          _getEditorCache: _this5.getEditorCache.bind(_this5),
+          _getChildElementByType: getChildElementByType.bind(_this4),
+          _getRendererWrapper: _this4.getRendererWrapper.bind(_this4),
+          _getEditorClass: _this4.getEditorClass.bind(_this4),
+          _getOwnerDocument: _this4.getOwnerDocument.bind(_this4),
+          _getEditorCache: _this4.getEditorCache.bind(_this4),
           children: childNode.props.children
         });
       });
-      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(EditorHolder, {
-        editorElement: this.getGlobalEditorElement()
-      })), React__default["default"].createElement(PortalManager, {
+      // 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)
       }));
     }