@handsontable/react 0.0.0-next-e2b07e5-20231213 → 0.0.0-next-d26e81f-20231213

package/Test.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Test: () => React.JSX.Element;

package/commonjs/react-handsontable.js

@@ -12,6 +12,33 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var Handsontable__default = /*#__PURE__*/_interopDefaultLegacy(Handsontable);
 
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -33,6 +60,20 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -146,12 +187,18 @@ function _createSuper(Derived) {
     return _possibleConstructorReturn(this, result);
   };
 }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 function _arrayWithoutHoles(arr) {
   if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 function _iterableToArray(iter) {
   if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -171,22 +218,12 @@ function _arrayLikeToArray(arr, len) {
 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];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 var bulkComponentContainer = null;
+var hasIdWarningBeenPrinted = false;
 /**
  * Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
  */
@@ -251,14 +288,12 @@ function getOriginalEditorClass(editorElement) {
 /**
  * Create an editor portal.
  *
- * @param {Document} [doc] Document to be used.
+ * @param {Document} doc Document to be used.
  * @param {React.ReactElement} editorElement Editor's element.
  * @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) {
+function createEditorPortal(doc, editorElement) {
+  if (typeof doc === 'undefined' || editorElement === null) {
     return null;
   }
   var containerProps = getContainerAttributesProps(editorElement.props, false);
@@ -330,12 +365,47 @@ function createPortal(rElement, props) {
  */
 function getContainerAttributesProps(props) {
   var randomizeId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  if (!hasIdWarningBeenPrinted && !props.id && randomizeId) {
+    hasIdWarningBeenPrinted = true;
+    warn('You have to provide an `id` property for the `HotTable` component.');
+  }
   return {
     id: props.id || (randomizeId ? 'hot-' + Math.random().toString(36).substring(5) : void 0),
     className: props.className || '',
     style: props.style || {}
   };
 }
+/**
+ * Checks if the environment that the code runs in is a browser.
+ *
+ * @returns {boolean}
+ */
+function isCSR() {
+  return typeof window !== 'undefined';
+}
+
+var HotColumn = function HotColumn(props) {
+  var _useState = React.useState(getExtendedEditorElement(props.children, props.getEditorCache(), props.columnIndex)),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorElement = _useState2[0],
+    setEditorElement = _useState2[1];
+  React.useEffect(function () {
+    var rendererElement = props.getChildElementByType(props.children, "hot-renderer");
+    setEditorElement(getExtendedEditorElement(props.children, props.getEditorCache(), props.columnIndex));
+    var columnSettings = {};
+    if (rendererElement !== null) {
+      columnSettings.renderer = props.getRendererWrapper(rendererElement);
+      props.componentRendererColumns.set(props.columnIndex, true);
+    }
+    if (editorElement !== null) {
+      columnSettings.editor = props.getEditorClass(editorElement, props.columnIndex);
+    }
+    props.onColumnSettingsChange(columnSettings, props.columnIndex);
+  }, [props.getChildElementByType, props.children, props.columnIndex, props.getRendererWrapper, props.componentRendererColumns, props.getEditorCache]);
+  var ownerDocument = props.getOwnerDocument();
+  var editorPortal = createEditorPortal(ownerDocument, editorElement);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, editorPortal);
+};
 
 var SettingsMapper = /*#__PURE__*/function () {
   function SettingsMapper() {
@@ -371,105 +441,6 @@ var SettingsMapper = /*#__PURE__*/function () {
   return SettingsMapper;
 }();
 
-var HotColumn = /*#__PURE__*/function (_React$Component) {
-  _inherits(HotColumn, _React$Component);
-  var _super = _createSuper(HotColumn);
-  function HotColumn() {
-    _classCallCheck(this, HotColumn);
-    return _super.apply(this, arguments);
-  }
-  _createClass(HotColumn, [{
-    key: "getSettingsProps",
-    value:
-    /**
-     * Filter out all the internal properties and return an object with just the Handsontable-related props.
-     *
-     * @returns {Object}
-     */
-    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 !_this.internalProps.includes(key);
-      }).reduce(function (obj, key) {
-        obj[key] = _this.props[key];
-        return obj;
-      }, {});
-    }
-    /**
-     * Get the editor element for the current column.
-     *
-     * @returns {React.ReactElement} React editor component element.
-     */
-  }, {
-    key: "getLocalEditorElement",
-    value: function getLocalEditorElement() {
-      return getExtendedEditorElement(this.props.children, this.props._getEditorCache(), this.props._columnIndex);
-    }
-    /**
-     * Create the column settings based on the data provided to the `HotColumn` component and it's child components.
-     */
-  }, {
-    key: "createColumnSettings",
-    value: function createColumnSettings() {
-      var rendererElement = this.props._getChildElementByType(this.props.children, 'hot-renderer');
-      var editorElement = this.getLocalEditorElement();
-      this.columnSettings = SettingsMapper.getSettings(this.getSettingsProps());
-      if (rendererElement !== null) {
-        this.columnSettings.renderer = this.props._getRendererWrapper(rendererElement);
-        this.props._componentRendererColumns.set(this.props._columnIndex, true);
-      }
-      if (editorElement !== null) {
-        this.columnSettings.editor = this.props._getEditorClass(editorElement, this.props._columnIndex);
-      }
-    }
-    /**
-     * Emit the column settings to the parent using a prop passed from the parent.
-     */
-  }, {
-    key: "emitColumnSettings",
-    value: function emitColumnSettings() {
-      this.props._emitColumnSettings(this.columnSettings, this.props._columnIndex);
-    }
-    /*
-    ---------------------------------------
-    ------- React lifecycle methods -------
-    ---------------------------------------
-    */
-    /**
-     * Logic performed after the mounting of the HotColumn component.
-     */
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.createColumnSettings();
-      this.emitColumnSettings();
-    }
-    /**
-     * Logic performed after the updating of the HotColumn component.
-     */
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.createColumnSettings();
-      this.emitColumnSettings();
-    }
-    /**
-     * Render the portals of the editors, if there are any.
-     *
-     * @returns {React.ReactElement}
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      var ownerDocument = this.props._getOwnerDocument();
-      var editorPortal = createEditorPortal(ownerDocument, this.getLocalEditorElement());
-      return React__default["default"].createElement(React__default["default"].Fragment, null, editorPortal);
-    }
-  }]);
-  return HotColumn;
-}(React__default["default"].Component);
-
 /**
  * Component class used to manage the renderer component portals.
  */
@@ -494,7 +465,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React__default["default"].Component);
 
-var version="0.0.0-next-e2b07e5-20231213";
+var version="0.0.0-next-d26e81f-20231213";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1615,6 +1586,13 @@ var propTypes = createCommonjsModule(function (module) {
 });
 var PropTypes = propTypes;
 
+var Test = function Test() {
+  React.useEffect(function () {
+    console.log("hello world");
+  }, []);
+  return React__default["default"].createElement("div", null);
+};
+
 /**
  * A Handsontable-ReactJS wrapper.
  *
@@ -1767,7 +1745,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getOwnerDocument",
     value: function getOwnerDocument() {
-      return this.hotElementRef ? this.hotElementRef.ownerDocument : document;
+      if (isCSR()) {
+        return this.hotElementRef ? this.hotElementRef.ownerDocument : document;
+      }
+      return null;
     }
     /**
      * Set the reference to the main Handsontable DOM element.
@@ -2054,7 +2035,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this5 = this;
-      var containerProps = getContainerAttributesProps(this.props);
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
@@ -2063,6 +2043,17 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       var hotColumnClones = children.filter(function (childNode) {
         return isHotColumn(childNode);
       }).map(function (childNode, columnIndex) {
+        ({
+          columnIndex: columnIndex,
+          children: childNode.props.children,
+          onColumnSettingsChange: _this5.setHotColumnSettings.bind(_this5),
+          componentRendererColumns: _this5.componentRendererColumns,
+          getChildElementByType: getChildElementByType.bind(_this5),
+          getRendererWrapper: _this5.getEditorClass.bind(_this5),
+          getEditorClass: _this5.getEditorClass.bind(_this5),
+          getEditorCache: _this5.getEditorCache.bind(_this5),
+          getOwnerDocument: _this5.getOwnerDocument.bind(_this5)
+        });
         return React__default["default"].cloneElement(childNode, {
           _componentRendererColumns: _this5.componentRendererColumns,
           _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
@@ -2075,12 +2066,13 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
           children: childNode.props.children
         });
       });
+      var containerProps = getContainerAttributesProps(this.props);
       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), hotColumnClones), React__default["default"].createElement(RenderersPortalManager, {
         ref: this.setRenderersPortalManagerRef.bind(this)
-      }), editorPortal);
+      }), editorPortal, React__default["default"].createElement(Test, null));
     }
   }], [{
     key: "version",