@handsontable/react 0.0.0-next-95920ca-20230215 → 0.0.0-next-460cf29-20230220

package/commonjs/react-handsontable.js

@@ -223,49 +223,6 @@ 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.
  *
@@ -299,12 +256,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 +294,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,63 +329,41 @@ 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);
-  /**
-   * HotColumn class constructor.
-   *
-   * @param {HotColumnProps} props Component props.
-   * @param {*} [context] Component context.
-   */
-  function HotColumn(props, context) {
-    var _this;
+  function HotColumn() {
     _classCallCheck(this, HotColumn);
-    _this = _super.call(this, props, context);
-    /**
-     * Local editor portal cache.
-     *
-     * @private
-     * @type {ReactPortal}
-     */
-    _this.localEditorPortal = null;
-    addUnsafePrefixes(_assertThisInitialized(_this));
-    return _this;
+    return _super.apply(this, arguments);
   }
-  /**
-   * Get the local editor portal cache property.
-   *
-   * @return {ReactPortal} Local editor portal.
-   */
   _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: "getSettingsProps",
+    value:
     /**
      * Filter out all the internal properties and return an object with just the Handsontable-related props.
      *
      * @returns {Object}
      */
-  }, {
-    key: "getSettingsProps",
-    value: function getSettingsProps() {
-      var _this2 = this;
+    function getSettingsProps() {
+      var _this = 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 !_this2.internalProps.includes(key);
+        return !_this.internalProps.includes(key);
       }).reduce(function (obj, key) {
-        obj[key] = _this2.props[key];
+        obj[key] = _this.props[key];
         return obj;
       }, {});
     }
@@ -477,21 +394,6 @@ 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.
      */
@@ -505,14 +407,6 @@ 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.
      */
@@ -522,14 +416,6 @@ 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.
      */
@@ -547,7 +433,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(EditorHolder, {
+        editorElement: this.getLocalEditorElement()
+      }));
     }
   }]);
   return HotColumn;
@@ -559,10 +447,10 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
 var PortalManager = /*#__PURE__*/function (_React$Component) {
   _inherits(PortalManager, _React$Component);
   var _super = _createSuper(PortalManager);
-  function PortalManager(props) {
+  function PortalManager() {
     var _this;
     _classCallCheck(this, PortalManager);
-    _this = _super.call(this, props);
+    _this = _super.apply(this, arguments);
     _this.state = {
       portals: []
     };
@@ -577,7 +465,7 @@ var PortalManager = /*#__PURE__*/function (_React$Component) {
   return PortalManager;
 }(React__default["default"].Component);
 
-var version="0.0.0-next-95920ca-20230215";
+var version="0.0.0-next-460cf29-20230220";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1723,16 +1611,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.
      *
@@ -1768,13 +1650,6 @@ 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.
      *
@@ -1797,7 +1672,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
      * @type {Map}
      */
     _this.componentRendererColumns = new Map();
-    addUnsafePrefixes(_assertThisInitialized(_this));
     return _this;
   }
   /**
@@ -1847,37 +1721,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 +1775,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) {
@@ -2016,34 +1867,17 @@ 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.
      *
-     * @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() {
-      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()));
-      }
+      return getExtendedEditorElement(this.props.children, this.getEditorCache());
     }
     /**
      * Create a new settings object containing the column settings and global editors and renderers.
@@ -2146,44 +1980,25 @@ 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 hotTableComponent = this;
+      var _this4 = 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('beforeViewRender', function () {
+        return _this4.handsontableBeforeViewRender();
       });
       this.hotInstance.addHook('afterViewRender', function () {
-        hotTableComponent.handsontableAfterViewRender();
+        return _this4.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.
      */
@@ -2200,10 +2015,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.
@@ -2211,11 +2026,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 _this5 = this;
+      var containerProps = getContainerAttributesProps(this.props);
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
@@ -2227,25 +2039,22 @@ 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: _this5.componentRendererColumns,
+          _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
           _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(_this5),
+          _getRendererWrapper: _this5.getRendererWrapper.bind(_this5),
+          _getEditorClass: _this5.getEditorClass.bind(_this5),
+          _getOwnerDocument: _this5.getOwnerDocument.bind(_this5),
+          _getEditorCache: _this5.getEditorCache.bind(_this5),
           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, {
+      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, {
         ref: this.setPortalManagerRef.bind(this)
       }));
     }