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

package/es/react-handsontable.mjs

@@ -1,34 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React 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) {
@@ -50,20 +23,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";
 
@@ -177,18 +136,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);
 }
@@ -208,12 +161,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.
  */
@@ -278,12 +241,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);
@@ -355,47 +320,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 = 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() {
@@ -431,6 +361,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.createElement(React.Fragment, null, editorPortal);
+    }
+  }]);
+  return HotColumn;
+}(React.Component);
+
 /**
  * Component class used to manage the renderer component portals.
  */
@@ -455,7 +484,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React.Component);
 
-var version="0.0.0-next-d26e81f-20231213";
+var version="0.0.0-next-ae2e00f-20231213";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1576,13 +1605,6 @@ 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.
  *
@@ -1735,10 +1757,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.
@@ -2025,6 +2044,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;
       };
@@ -2033,17 +2053,6 @@ 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),
@@ -2056,13 +2065,12 @@ 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, React.createElement(Test, null));
+      }), editorPortal);
     }
   }], [{
     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,9 +81,3 @@ 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,17 +1,42 @@
-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;
+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;
 }
-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 | null;
+    getOwnerDocument(): Document;
     /**
      * Set the reference to the main Handsontable DOM element.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handsontable/react",
-  "version": "0.0.0-next-d26e81f-20231213",
+  "version": "0.0.0-next-ae2e00f-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": "^ 18.2.17",
-    "@types/react-redux": "^ 7.1.33",
-    "@types/react": "^18.2.45",
+    "@types/react-dom": "^16.9.1",
+    "@types/react-redux": "^7.1.7",
+    "@types/react": "^16.9.5",
     "babel-core": "^7.0.0-bridge.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "handsontable": "0.0.0-next-d26e81f-20231213",
+    "handsontable": "0.0.0-next-ae2e00f-20231213",
     "jest": "^25.1.0",
     "prop-types": "^15.7.2",
-    "react-dom": "^18.2.0",
-    "react-redux": "^9.0.4",
-    "react": "^18.2.0",
-    "redux": "^5.0.0",
+    "react-dom": "^16.10.2",
+    "react-redux": "^7.1.1",
+    "react": "^16.10.2",
+    "redux": "^4.0.4",
     "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-d26e81f-20231213"
+    "handsontable": "0.0.0-next-ae2e00f-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,3 +33,17 @@ 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;
+}

package/Test.d.ts

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