@handsontable/react 12.3.2 → 12.3.3-next-018f495-20230327

package/es/react-handsontable.mjs

@@ -136,6 +136,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];
@@ -336,69 +361,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.createElement(React.Fragment, null, this.state.portals);
-    }
-  }]);
-  return EditorsPortalManager;
-}(React.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;
       }, {});
     }
@@ -429,21 +413,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.
      */
@@ -463,11 +432,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.
@@ -475,11 +441,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.
@@ -489,9 +452,9 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React.createElement(React.Fragment, null, React.createElement(EditorsPortalManager, {
-        ref: this.setEditorsPortalManagerRef.bind(this)
-      }));
+      var ownerDocument = this.props._getOwnerDocument();
+      var editorPortal = createEditorPortal(ownerDocument, this.getLocalEditorElement());
+      return React.createElement(React.Fragment, null, editorPortal);
     }
   }]);
   return HotColumn;
@@ -521,7 +484,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React.Component);
 
-var version="12.3.2";
+var version="12.3.3-next-018f495-20230327";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1702,12 +1665,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.
      */
@@ -1789,7 +1746,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "clearCache",
     value: function clearCache() {
-      this.getEditorCache().clear();
       this.getRenderedCellCache().clear();
       this.componentRendererColumns.clear();
     }
@@ -1941,20 +1897,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.
      *
@@ -2021,12 +1963,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 = [];
       });
     }
     /**
@@ -2051,16 +1991,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 -------
@@ -2073,25 +2003,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.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.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.
@@ -2099,13 +2021,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.
@@ -2113,6 +2032,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      this.clearCache();
       if (this.hotInstance) {
         this.hotInstance.destroy();
       }
@@ -2123,37 +2043,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.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.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.createElement(React.Fragment, null, React.createElement("div", Object.assign({
         ref: this.setHotElementRef.bind(this)
-      }, containerProps), childClones), React.createElement(RenderersPortalManager, {
+      }, containerProps), hotColumnClones), React.createElement(RenderersPortalManager, {
         ref: this.setRenderersPortalManagerRef.bind(this)
-      }), React.createElement(EditorsPortalManager, {
-        ref: this.setEditorsPortalManagerRef.bind(this)
-      }));
+      }), editorPortal);
     }
   }], [{
     key: "version",

package/hotColumn.d.ts

@@ -4,18 +4,6 @@ import Handsontable from 'handsontable/base';
 declare class HotColumn extends React.Component<HotColumnProps, {}> {
     internalProps: string[];
     columnSettings: Handsontable.ColumnSettings;
-    /**
-     * Component used to manage the editor portals.
-     *
-     * @type {React.Component}
-     */
-    private editorsPortalManager;
-    /**
-     * Set the editors portal manager ref.
-     *
-     * @param {React.ReactComponent} pmComponent The PortalManager component.
-     */
-    private setEditorsPortalManagerRef;
     /**
      * Filter out all the internal properties and return an object with just the Handsontable-related props.
      *
@@ -32,12 +20,6 @@ declare class HotColumn extends React.Component<HotColumnProps, {}> {
      * Create the column settings based on the data provided to the `HotColumn` component and it's child components.
      */
     createColumnSettings(): void;
-    /**
-     * 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.
-     */
-    renderLocalEditorPortal(callback: () => void): void;
     /**
      * Emit the column settings to the parent using a prop passed from the parent.
      */

package/hotTable.d.ts

@@ -68,12 +68,6 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      * @type {React.Component}
      */
     renderersPortalManager: RenderersPortalManager;
-    /**
-     * Component used to manage the editor portals.
-     *
-     * @type {React.Component}
-     */
-    private editorsPortalManager;
     /**
      * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
      */
@@ -183,12 +177,6 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      * @returns {React.ReactElement} React editor component element.
      */
     getGlobalEditorElement(): HotEditorElement | null;
-    /**
-     * 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.
-     */
-    renderGlobalEditorPortal(callback: () => void): void;
     /**
      * Create a new settings object containing the column settings and global editors and renderers.
      *
@@ -228,12 +216,6 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      * @param {React.ReactComponent} pmComponent The PortalManager component.
      */
     private setRenderersPortalManagerRef;
-    /**
-     * Set the editors portal manager ref.
-     *
-     * @param {React.ReactComponent} pmComponent The PortalManager component.
-     */
-    private setEditorsPortalManagerRef;
     /**
      * Initialize Handsontable after the component has mounted.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handsontable/react",
-  "version": "12.3.2",
+  "version": "12.3.3-next-018f495-20230327",
   "description": "Best Data Grid for React with Spreadsheet Look and Feel.",
   "author": "Handsoncode <hello@handsoncode.net> (https://handsoncode.net)",
   "homepage": "https://handsontable.com",
@@ -66,7 +66,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "handsontable": "^12.0.0",
+    "handsontable": "12.3.3-next-018f495-20230327",
     "jest": "^25.1.0",
     "prop-types": "^15.7.2",
     "react-dom": "^16.10.2",
@@ -87,7 +87,7 @@
     "uglify-js": "^3.4.9"
   },
   "peerDependencies": {
-    "handsontable": ">=12.0.0"
+    "handsontable": "12.3.3-next-018f495-20230327"
   },
   "scripts": {
     "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:min",

package/editorsPortalManager.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-/**
- * Component class used to manage the editor component portals.
- */
-export declare class EditorsPortalManager extends React.Component<{}, {
-    portals?: React.ReactElement[];
-}> {
-    state: {
-        portals: any[];
-    };
-    render(): JSX.Element;
-}