@handsontable/react 0.0.0-next-0eba994-20231213 → 0.0.0-next-ae2e00f-20231213

package/commonjs/react-handsontable.js

@@ -12,33 +12,6 @@ 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) {
@@ -60,20 +33,6 @@ 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";
 
@@ -187,18 +146,12 @@ 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);
 }
@@ -218,12 +171,22 @@ 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 _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.");
+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);
 }
 
 var bulkComponentContainer = null;
-var hasIdWarningBeenPrinted = false;
 /**
  * Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
  */
@@ -288,12 +251,14 @@ 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(doc, editorElement) {
-  if (typeof doc === 'undefined' || editorElement === null) {
+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 null;
   }
   var containerProps = getContainerAttributesProps(editorElement.props, false);
@@ -365,47 +330,12 @@ 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() {
@@ -441,6 +371,105 @@ 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.
  */
@@ -465,7 +494,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React__default["default"].Component);
 
-var version="0.0.0-next-0eba994-20231213";
+var version="0.0.0-next-ae2e00f-20231213";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1586,13 +1615,6 @@ 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.
  *
@@ -1745,10 +1767,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getOwnerDocument",
     value: function getOwnerDocument() {
-      if (isCSR()) {
-        return this.hotElementRef ? this.hotElementRef.ownerDocument : document;
-      }
-      return null;
+      return this.hotElementRef ? this.hotElementRef.ownerDocument : document;
     }
     /**
      * Set the reference to the main Handsontable DOM element.
@@ -2035,6 +2054,7 @@ 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;
       };
@@ -2043,26 +2063,24 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       var hotColumnClones = children.filter(function (childNode) {
         return isHotColumn(childNode);
       }).map(function (childNode, columnIndex) {
-        var hotColumnProps = {
-          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, hotColumnProps);
+        return React__default["default"].cloneElement(childNode, {
+          _componentRendererColumns: _this5.componentRendererColumns,
+          _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
+          _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),
+          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, React__default["default"].createElement(Test, null));
+      }), editorPortal);
     }
   }], [{
     key: "version",