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

package/es/react-handsontable.mjs

@@ -1,7 +1,34 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import Handsontable from 'handsontable/base';
 
+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) {
@@ -23,6 +50,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";
 
@@ -136,12 +177,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);
 }
@@ -161,22 +208,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.
  */
@@ -241,14 +278,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);
@@ -320,12 +355,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 = useState(getExtendedEditorElement(props.children, props.getEditorCache(), props.columnIndex)),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorElement = _useState2[0],
+    setEditorElement = _useState2[1];
+  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.createElement(React.Fragment, null, editorPortal);
+};
 
 var SettingsMapper = /*#__PURE__*/function () {
   function SettingsMapper() {
@@ -361,105 +431,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.createElement(React.Fragment, null, editorPortal);
-    }
-  }]);
-  return HotColumn;
-}(React.Component);
-
 /**
  * Component class used to manage the renderer component portals.
  */
@@ -484,7 +455,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React.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;
@@ -1605,6 +1576,13 @@ var propTypes = createCommonjsModule(function (module) {
 });
 var PropTypes = propTypes;
 
+var Test = function Test() {
+  useEffect(function () {
+    console.log("hello world");
+  }, []);
+  return React.createElement("div", null);
+};
+
 /**
  * A Handsontable-ReactJS wrapper.
  *
@@ -1757,7 +1735,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.
@@ -2044,7 +2025,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;
       };
@@ -2053,6 +2033,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.cloneElement(childNode, {
           _componentRendererColumns: _this5.componentRendererColumns,
           _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
@@ -2065,12 +2056,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.createElement(React.Fragment, null, React.createElement("div", Object.assign({
         ref: this.setHotElementRef.bind(this)
       }, containerProps), hotColumnClones), React.createElement(RenderersPortalManager, {
         ref: this.setRenderersPortalManagerRef.bind(this)
-      }), editorPortal);
+      }), editorPortal, React.createElement(Test, null));
     }
   }], [{
     key: "version",

package/helpers.d.ts

@@ -40,7 +40,7 @@ export declare function getOriginalEditorClass(editorElement: HotEditorElement):
 /**
  * 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.
  */
@@ -81,3 +81,9 @@ export declare function getContainerAttributesProps(props: any, randomizeId?: bo
     className: string;
     style: object;
 };
+/**
+ * Checks if the environment that the code runs in is a browser.
+ *
+ * @returns {boolean}
+ */
+export declare function isCSR(): boolean;

package/hotColumn.d.ts

@@ -1,42 +1,17 @@
-import React from 'react';
-import { HotTableProps, HotColumnProps } from './types';
-import Handsontable from 'handsontable/base';
-declare class HotColumn extends React.Component<HotColumnProps, {}> {
-    internalProps: string[];
-    columnSettings: Handsontable.ColumnSettings;
-    /**
-     * Filter out all the internal properties and return an object with just the Handsontable-related props.
-     *
-     * @returns {Object}
-     */
-    getSettingsProps(): HotTableProps;
-    /**
-     * Get the editor element for the current column.
-     *
-     * @returns {React.ReactElement} React editor component element.
-     */
-    getLocalEditorElement(): React.ReactElement | null;
-    /**
-     * Create the column settings based on the data provided to the `HotColumn` component and it's child components.
-     */
-    createColumnSettings(): void;
-    /**
-     * Emit the column settings to the parent using a prop passed from the parent.
-     */
-    emitColumnSettings(): void;
-    /**
-     * Logic performed after the mounting of the HotColumn component.
-     */
-    componentDidMount(): void;
-    /**
-     * Logic performed after the updating of the HotColumn component.
-     */
-    componentDidUpdate(): void;
-    /**
-     * Render the portals of the editors, if there are any.
-     *
-     * @returns {React.ReactElement}
-     */
-    render(): React.ReactElement;
+import React from "react";
+import { HotEditorCache, EditorScopeIdentifier } from "./types";
+import Handsontable from "handsontable/base";
+export interface HotColumnProps {
+    columnIndex: number;
+    children: React.ReactNode;
+    onColumnSettingsChange: (columnSettings: Handsontable.ColumnSettings, columnIndex: number) => void;
+    componentRendererColumns?: Map<number | string, boolean>;
+    getChildElementByType?: (children: React.ReactNode, type: string) => React.ReactElement;
+    getRendererWrapper?: (rendererNode: React.ReactElement) => typeof Handsontable.renderers.BaseRenderer;
+    getEditorClass?: (editorElement: React.ReactElement, editorColumnScope: EditorScopeIdentifier) => typeof Handsontable.editors.BaseEditor;
+    getEditorCache?: () => HotEditorCache;
+    getOwnerDocument?: () => Document;
 }
+declare const HotColumn: (props: HotColumnProps) => React.JSX.Element;
+export default HotColumn;
 export { HotColumn };

package/hotTable.d.ts

@@ -134,7 +134,7 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      *
      * @returns The `Document` object used by the component.
      */
-    getOwnerDocument(): Document;
+    getOwnerDocument(): Document | null;
     /**
      * Set the reference to the main Handsontable DOM element.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handsontable/react",
-  "version": "0.0.0-next-e2b07e5-20231213",
+  "version": "0.0.0-next-d26e81f-20231213",
   "description": "Best Data Grid for React with Spreadsheet Look and Feel.",
   "author": "Handsoncode <hello@handsoncode.net> (https://handsoncode.net)",
   "homepage": "https://handsontable.com",
@@ -61,19 +61,19 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
     "@babel/runtime": "^7.9.2",
-    "@types/react-dom": "^16.9.1",
-    "@types/react-redux": "^7.1.7",
-    "@types/react": "^16.9.5",
+    "@types/react-dom": "^ 18.2.17",
+    "@types/react-redux": "^ 7.1.33",
+    "@types/react": "^18.2.45",
     "babel-core": "^7.0.0-bridge.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "handsontable": "0.0.0-next-e2b07e5-20231213",
+    "handsontable": "0.0.0-next-d26e81f-20231213",
     "jest": "^25.1.0",
     "prop-types": "^15.7.2",
-    "react-dom": "^16.10.2",
-    "react-redux": "^7.1.1",
-    "react": "^16.10.2",
-    "redux": "^4.0.4",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.0.4",
+    "react": "^18.2.0",
+    "redux": "^5.0.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-alias": "^1.5.2",
     "rollup-plugin-babel": "^4.3.3",
@@ -88,7 +88,7 @@
     "uglify-js": "^3.4.9"
   },
   "peerDependencies": {
-    "handsontable": "0.0.0-next-e2b07e5-20231213"
+    "handsontable": "0.0.0-next-d26e81f-20231213"
   },
   "scripts": {
     "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:min",

package/types.d.ts

@@ -33,17 +33,3 @@ export interface HotEditorProps {
     className?: string;
     style?: React.CSSProperties;
 }
-/**
- * Properties related to the HotColumn architecture.
- */
-export interface HotColumnProps extends Handsontable.ColumnSettings {
-    _componentRendererColumns?: Map<number | string, boolean>;
-    _emitColumnSettings?: (columnSettings: Handsontable.ColumnSettings, columnIndex: number) => void;
-    _columnIndex?: number;
-    _getChildElementByType?: (children: React.ReactNode, type: string) => React.ReactElement;
-    _getRendererWrapper?: (rendererNode: React.ReactElement) => typeof Handsontable.renderers.BaseRenderer;
-    _getEditorClass?: (editorElement: React.ReactElement, editorColumnScope: EditorScopeIdentifier) => typeof Handsontable.editors.BaseEditor;
-    _getEditorCache?: () => HotEditorCache;
-    _getOwnerDocument?: () => Document;
-    children?: React.ReactNode;
-}