@handsontable/react 12.3.2 → 12.3.3-next-629d606-20230327

package/commonjs/react-handsontable.js

@@ -146,6 +146,31 @@ function _createSuper(Derived) {
     return _possibleConstructorReturn(this, result);
   };
 }
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _toPrimitive(input, hint) {
   if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -346,69 +371,28 @@ 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);
   function HotColumn() {
-    var _this;
     _classCallCheck(this, HotColumn);
-    _this = _super.apply(this, arguments);
-    /**
-     * Component used to manage the editor portals.
-     *
-     * @type {React.Component}
-     */
-    _this.editorsPortalManager = null;
-    return _this;
+    return _super.apply(this, arguments);
   }
-  /**
-   * Set the editors portal manager ref.
-   *
-   * @param {React.ReactComponent} pmComponent The PortalManager component.
-   */
   _createClass(HotColumn, [{
-    key: "setEditorsPortalManagerRef",
-    value: function setEditorsPortalManagerRef(pmComponent) {
-      this.editorsPortalManager = pmComponent;
-    }
+    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;
       }, {});
     }
@@ -439,21 +423,6 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
         this.columnSettings.editor = this.props._getEditorClass(editorElement, this.props._columnIndex);
       }
     }
-    /**
-     * Creates the local editor portal and renders it within the editors portal manager component.
-     *
-     * @param {Function} callback Callback to call which is triggered after the editors portal is rendered.
-     */
-  }, {
-    key: "renderLocalEditorPortal",
-    value: function renderLocalEditorPortal(callback) {
-      var editorCache = this.props._getEditorCache();
-      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.
      */
@@ -473,11 +442,8 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this3 = this;
-      this.renderLocalEditorPortal(function () {
-        _this3.createColumnSettings();
-        _this3.emitColumnSettings();
-      });
+      this.createColumnSettings();
+      this.emitColumnSettings();
     }
     /**
      * Logic performed after the updating of the HotColumn component.
@@ -485,11 +451,8 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this4 = this;
-      this.renderLocalEditorPortal(function () {
-        _this4.createColumnSettings();
-        _this4.emitColumnSettings();
-      });
+      this.createColumnSettings();
+      this.emitColumnSettings();
     }
     /**
      * Render the portals of the editors, if there are any.
@@ -499,9 +462,9 @@ 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(EditorsPortalManager, {
-        ref: this.setEditorsPortalManagerRef.bind(this)
-      }));
+      var ownerDocument = this.props._getOwnerDocument();
+      var editorPortal = createEditorPortal(ownerDocument, this.getLocalEditorElement());
+      return React__default["default"].createElement(React__default["default"].Fragment, null, editorPortal);
     }
   }]);
   return HotColumn;
@@ -531,7 +494,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React__default["default"].Component);
 
-var version="12.3.2";
+var version="12.3.3-next-629d606-20230327";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1712,12 +1675,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
      * @type {React.Component}
      */
     _this.renderersPortalManager = null;
-    /**
-     * Component used to manage the editor portals.
-     *
-     * @type {React.Component}
-     */
-    _this.editorsPortalManager = null;
     /**
      * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
      */
@@ -1799,7 +1756,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "clearCache",
     value: function clearCache() {
-      this.getEditorCache().clear();
       this.getRenderedCellCache().clear();
       this.componentRendererColumns.clear();
     }
@@ -1951,20 +1907,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     value: function getGlobalEditorElement() {
       return getExtendedEditorElement(this.props.children, this.getEditorCache());
     }
-    /**
-     * Creates the global editor portal and renders it within the editors portal manager component.
-     *
-     * @param {Function} callback Callback to call which is triggered after the editors portal is rendered.
-     */
-  }, {
-    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.
      *
@@ -2031,12 +1973,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     key: "handsontableAfterViewRender",
     value: function handsontableAfterViewRender() {
       var _this3 = this;
-      this.renderersPortalManager.setState(function () {
-        return Object.assign({}, {
-          portals: _this3.portalCacheArray
-        });
+      this.renderersPortalManager.setState({
+        portals: _toConsumableArray(this.portalCacheArray)
       }, function () {
-        _this3.portalCacheArray.length = 0;
+        _this3.portalCacheArray = [];
       });
     }
     /**
@@ -2061,16 +2001,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     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 -------
@@ -2083,25 +2013,17 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this4 = this;
-      this.clearCache();
-      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);
+      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('afterViewRender', function () {
+        return _this4.handsontableAfterViewRender();
       });
+      // `init` missing in Handsontable's type definitions.
+      this.hotInstance.init();
+      this.displayAutoSizeWarning(newGlobalSettings);
     }
     /**
      * Logic performed after the component update.
@@ -2109,13 +2031,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this5 = this;
       this.clearCache();
-      this.renderGlobalEditorPortal(function () {
-        var newGlobalSettings = _this5.createNewGlobalSettings();
-        _this5.updateHot(newGlobalSettings);
-        _this5.displayAutoSizeWarning(newGlobalSettings);
-      });
+      var newGlobalSettings = this.createNewGlobalSettings();
+      this.updateHot(newGlobalSettings);
+      this.displayAutoSizeWarning(newGlobalSettings);
     }
     /**
      * Destroy the Handsontable instance when the parent component unmounts.
@@ -2123,6 +2042,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      this.clearCache();
       if (this.hotInstance) {
         this.hotInstance.destroy();
       }
@@ -2133,37 +2053,34 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this5 = this;
       var containerProps = getContainerAttributesProps(this.props);
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
       var children = React__default["default"].Children.toArray(this.props.children);
-      // filter out anything that's not a HotColumn
-      children = children.filter(function (childNode) {
-        return isHotColumn(childNode);
-      });
       // clone the HotColumn nodes and extend them with the callbacks
-      var childClones = children.map(function (childNode, columnIndex) {
+      var hotColumnClones = children.filter(function (childNode) {
+        return isHotColumn(childNode);
+      }).map(function (childNode, columnIndex) {
         return React__default["default"].cloneElement(childNode, {
-          _componentRendererColumns: _this6.componentRendererColumns,
-          _emitColumnSettings: _this6.setHotColumnSettings.bind(_this6),
+          _componentRendererColumns: _this5.componentRendererColumns,
+          _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
           _columnIndex: columnIndex,
-          _getChildElementByType: getChildElementByType.bind(_this6),
-          _getRendererWrapper: _this6.getRendererWrapper.bind(_this6),
-          _getEditorClass: _this6.getEditorClass.bind(_this6),
-          _getOwnerDocument: _this6.getOwnerDocument.bind(_this6),
-          _getEditorCache: _this6.getEditorCache.bind(_this6),
+          _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
         });
       });
+      var editorPortal = createEditorPortal(this.getOwnerDocument(), this.getGlobalEditorElement());
       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, {
+      }, containerProps), hotColumnClones), React__default["default"].createElement(RenderersPortalManager, {
         ref: this.setRenderersPortalManagerRef.bind(this)
-      }), React__default["default"].createElement(EditorsPortalManager, {
-        ref: this.setEditorsPortalManagerRef.bind(this)
-      }));
+      }), editorPortal);
     }
   }], [{
     key: "version",