@handsontable/react 0.0.0-next-eaf150e-20240823 → 0.0.0-next-0306a1a-20240826

package/commonjs/react-handsontable.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var ReactDOM = require('react-dom');
 var Handsontable = require('handsontable/base');
-var registry$1 = require('handsontable/renderers/registry');
-var registry = require('handsontable/editors/registry');
+var registry = require('handsontable/renderers/registry');
+var registry$1 = require('handsontable/editors/registry');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -14,11 +14,198 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
 var Handsontable__default = /*#__PURE__*/_interopDefaultCompat(Handsontable);
 
+var bulkComponentContainer = null;
+/**
+ * Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
+ */
+var AUTOSIZE_WARNING = 'Your `HotTable` configuration includes `autoRowSize`/`autoColumnSize` options, which are not compatible with ' + ' the component-based renderers`. Disable `autoRowSize` and `autoColumnSize` to prevent row and column misalignment.';
+/**
+ * Warning message for the `hot-renderer` obsolete renderer passing method.
+ */
+var OBSOLETE_HOTRENDERER_WARNING = 'Providing a component-based renderer using `hot-renderer`-annotated component is no longer supported. ' + 'Pass your component using `renderer` prop of the `HotTable` or `HotColumn` component instead.';
+/**
+ * Warning message for the `hot-editor` obsolete editor passing method.
+ */
+var OBSOLETE_HOTEDITOR_WARNING = 'Providing a component-based editor using `hot-editor`-annotated component is no longer supported. ' + 'Pass your component using `editor` prop of the `HotTable` or `HotColumn` component instead.';
+/**
+ * Warning message for the unexpected children of HotTable component.
+ */
+var UNEXPECTED_HOTTABLE_CHILDREN_WARNING = 'Unexpected children nodes found in HotTable component. ' + 'Only HotColumn components are allowed.';
+/**
+ * Warning message for the unexpected children of HotColumn component.
+ */
+var UNEXPECTED_HOTCOLUMN_CHILDREN_WARNING = 'Unexpected children nodes found in HotColumn component. ' + 'HotColumn components do not support any children.';
+/**
+ * Message for the warning thrown if the Handsontable instance has been destroyed.
+ */
+var HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be' + ' used properly.';
+/**
+ * Default classname given to the wrapper container.
+ */
+var DEFAULT_CLASSNAME = 'hot-wrapper-editor-container';
+/**
+ * Logs warn to the console if the `console` object is exposed.
+ *
+ * @param {...*} args Values which will be logged.
+ */
+function warn() {
+  if (typeof console !== 'undefined') {
+    var _console;
+    (_console = console).warn.apply(_console, arguments);
+  }
+}
+/**
+ * Detect if `hot-renderer` or `hot-editor` is defined, and if so, throw an incompatibility warning.
+ *
+ * @returns {boolean} 'true' if the warning was issued
+ */
+function displayObsoleteRenderersEditorsWarning(children) {
+  if (hasChildElementOfType(children, 'hot-renderer')) {
+    warn(OBSOLETE_HOTRENDERER_WARNING);
+    return true;
+  }
+  if (hasChildElementOfType(children, 'hot-editor')) {
+    warn(OBSOLETE_HOTEDITOR_WARNING);
+    return true;
+  }
+  return false;
+}
+/**
+ * Detect if children of specified type are defined, and if so, throw an incompatibility warning.
+ *
+ * @param {React.ReactNode} children Component children nodes
+ * @param {React.ComponentType} Component Component type to check
+ * @returns {boolean} 'true' if the warning was issued
+ */
+function displayChildrenOfTypeWarning(children, Component) {
+  var childrenArray = React__default["default"].Children.toArray(children);
+  if (childrenArray.some(function (child) {
+    return child.type !== Component;
+  })) {
+    warn(UNEXPECTED_HOTTABLE_CHILDREN_WARNING);
+    return true;
+  }
+  return false;
+}
+/**
+ * Detect if children is defined, and if so, throw an incompatibility warning.
+ *
+ * @param {React.ReactNode} children Component children nodes
+ * @returns {boolean} 'true' if the warning was issued
+ */
+function displayAnyChildrenWarning(children) {
+  var childrenArray = React__default["default"].Children.toArray(children);
+  if (childrenArray.length) {
+    warn(UNEXPECTED_HOTCOLUMN_CHILDREN_WARNING);
+    return true;
+  }
+  return false;
+}
+/**
+ * Check the existence of elements of the provided `type` from the `HotColumn` component's children.
+ *
+ * @param {React.ReactNode} children HotTable children array.
+ * @param {String} type Either `'hot-renderer'` or `'hot-editor'`.
+ * @returns {boolean} `true` if the child of that type was found, `false` otherwise.
+ */
+function hasChildElementOfType(children, type) {
+  var childrenArray = React__default["default"].Children.toArray(children);
+  return childrenArray.some(function (child) {
+    return child.props[type] !== void 0;
+  });
+}
+/**
+ * Create an editor portal.
+ *
+ * @param {Document} doc Document to be used.
+ * @param {React.ComponentType} Editor Editor component or render function.
+ * @returns {React.ReactPortal} The portal for the editor.
+ */
+function createEditorPortal(doc, Editor) {
+  if (!doc || !Editor) {
+    return null;
+  }
+  var editorElement = React__default["default"].createElement(Editor, null);
+  var containerProps = getContainerAttributesProps({}, false);
+  containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
+  return ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", Object.assign({}, containerProps), editorElement), doc.body);
+}
+/**
+ * Render a cell component to an external DOM node.
+ *
+ * @param {React.ReactElement} rElement React element to be used as a base for the component.
+ * @param {Document} [ownerDocument] The owner document to set the portal up into.
+ * @param {String} portalKey The key to be used for the portal.
+ * @param {HTMLElement} [cachedContainer] The cached container to be used for the portal.
+ * @returns {{portal: React.ReactPortal, portalContainer: HTMLElement}} An object containing the portal and its container.
+ */
+function createPortal(rElement) {
+  var ownerDocument = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+  var portalKey = arguments.length > 2 ? arguments[2] : undefined;
+  var cachedContainer = arguments.length > 3 ? arguments[3] : undefined;
+  if (!ownerDocument) {
+    ownerDocument = document;
+  }
+  if (!bulkComponentContainer) {
+    bulkComponentContainer = ownerDocument.createDocumentFragment();
+  }
+  var portalContainer = cachedContainer !== null && cachedContainer !== void 0 ? cachedContainer : ownerDocument.createElement('DIV');
+  bulkComponentContainer.appendChild(portalContainer);
+  return {
+    portal: ReactDOM__default["default"].createPortal(rElement, portalContainer, portalKey),
+    portalContainer: portalContainer
+  };
+}
+/**
+ * Get an object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
+ * component.
+ *
+ * @param {HotTableProps} props Object containing the React element props.
+ * @param {Boolean} randomizeId If set to `true`, the function will randomize the `id` property when no `id` was present in the `prop` object.
+ * @returns An object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
+ * component.
+ */
+function getContainerAttributesProps(props) {
+  var randomizeId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return {
+    id: props.id || (randomizeId ? 'hot-' + Math.random().toString(36).substring(5) : undefined),
+    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';
+}
+/**
+ * A variant of React.useEffect hook that does not trigger on initial mount, only updates
+ *
+ * @param effect Effect function
+ * @param deps Effect dependencies
+ */
+function useUpdateEffect(effect, deps) {
+  var notInitialRender = React__default["default"].useRef(false);
+  React__default["default"].useEffect(function () {
+    if (notInitialRender.current) {
+      return effect();
+    } else {
+      notInitialRender.current = true;
+    }
+  }, deps);
+}
+
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
   return n;
 }
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
 function _arrayWithoutHoles(r) {
   if (Array.isArray(r)) return _arrayLikeToArray(r);
 }
@@ -79,6 +266,33 @@ function _isNativeReflectConstruct() {
 function _iterableToArray(r) {
   if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
+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) ; 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 _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 _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.");
 }
@@ -109,8 +323,8 @@ function _objectWithoutProperties(e, t) {
     r,
     i = _objectWithoutPropertiesLoose(e, t);
   if (Object.getOwnPropertySymbols) {
-    var s = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
   return i;
 }
@@ -118,7 +332,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (e.indexOf(n) >= 0) continue;
     t[n] = r[n];
   }
   return t;
@@ -133,6 +347,9 @@ function _setPrototypeOf(t, e) {
     return t.__proto__ = e, t;
   }, _setPrototypeOf(t, e);
 }
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
 function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
@@ -140,11 +357,11 @@ 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 );
+    var i = e.call(t, r || "default");
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (String )(t);
+  return ("string" === r ? String : Number)(t);
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
@@ -167,167 +384,6 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var bulkComponentContainer = null;
-/**
- * Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
- */
-var AUTOSIZE_WARNING = 'Your `HotTable` configuration includes `autoRowSize`/`autoColumnSize` options, which are not compatible with ' + ' the component-based renderers`. Disable `autoRowSize` and `autoColumnSize` to prevent row and column misalignment.';
-/**
- * Message for the warning thrown if the Handsontable instance has been destroyed.
- */
-var HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be' + ' used properly.';
-/**
- * String identifier for the global-scoped editor components.
- */
-var GLOBAL_EDITOR_SCOPE = 'global';
-/**
- * Default classname given to the wrapper container.
- */
-var DEFAULT_CLASSNAME = 'hot-wrapper-editor-container';
-/**
- * Logs warn to the console if the `console` object is exposed.
- *
- * @param {...*} args Values which will be logged.
- */
-function warn() {
-  if (typeof console !== 'undefined') {
-    var _console;
-    (_console = console).warn.apply(_console, arguments);
-  }
-}
-/**
- * Filter out and return elements of the provided `type` from the `HotColumn` component's children.
- *
- * @param {React.ReactNode} children HotTable children array.
- * @param {String} type Either `'hot-renderer'` or `'hot-editor'`.
- * @returns {Object|null} A child (React node) or `null`, if no child of that type was found.
- */
-function getChildElementByType(children, type) {
-  var childrenArray = React__default["default"].Children.toArray(children);
-  var childrenCount = React__default["default"].Children.count(children);
-  var wantedChild = null;
-  if (childrenCount !== 0) {
-    if (childrenCount === 1 && childrenArray[0].props[type]) {
-      wantedChild = childrenArray[0];
-    } else {
-      wantedChild = childrenArray.find(function (child) {
-        return child.props[type] !== void 0;
-      });
-    }
-  }
-  return wantedChild || null;
-}
-/**
- * Get the reference to the original editor class.
- *
- * @param {React.ReactElement} editorElement React element of the editor class.
- * @returns {Function} Original class of the editor component.
- */
-function getOriginalEditorClass(editorElement) {
-  if (!editorElement) {
-    return null;
-  }
-  return editorElement.type.WrappedComponent ? editorElement.type.WrappedComponent : editorElement.type;
-}
-/**
- * Create an editor portal.
- *
- * @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) {
-    return null;
-  }
-  var containerProps = getContainerAttributesProps(editorElement.props, false);
-  containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
-  return ReactDOM__default["default"].createPortal(React__default["default"].createElement("div", Object.assign({}, containerProps), editorElement), doc.body);
-}
-/**
- * Get an editor element extended with an instance-emitting method.
- *
- * @param {React.ReactNode} children Component children.
- * @param {Map} editorCache Component's editor cache.
- * @param {EditorScopeIdentifier} [editorColumnScope] The editor scope (column index or a 'global' string). Defaults to
- * 'global'.
- * @returns {React.ReactElement} An editor element containing the additional methods.
- */
-function getExtendedEditorElement(children, editorCache) {
-  var editorColumnScope = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : GLOBAL_EDITOR_SCOPE;
-  var editorElement = getChildElementByType(children, 'hot-editor');
-  var editorClass = getOriginalEditorClass(editorElement);
-  if (!editorElement) {
-    return null;
-  }
-  return React__default["default"].cloneElement(editorElement, {
-    emitEditorInstance: function emitEditorInstance(editorInstance, editorColumnScope) {
-      if (!editorCache.get(editorClass)) {
-        editorCache.set(editorClass, new Map());
-      }
-      var cacheEntry = editorCache.get(editorClass);
-      cacheEntry.set(editorColumnScope !== null && editorColumnScope !== void 0 ? editorColumnScope : GLOBAL_EDITOR_SCOPE, editorInstance);
-    },
-    editorColumnScope: editorColumnScope,
-    isEditor: true
-  });
-}
-/**
- * Create a react component and render it to an external DOM done.
- *
- * @param {React.ReactElement} rElement React element to be used as a base for the component.
- * @param {Object} props Props to be passed to the cloned element.
- * @param {Document} [ownerDocument] The owner document to set the portal up into.
- * @param {String} portalKey The key to be used for the portal.
- * @param {HTMLElement} [cachedContainer] The cached container to be used for the portal.
- * @returns {{portal: React.ReactPortal, portalContainer: HTMLElement}} An object containing the portal and its container.
- */
-function createPortal(rElement, props) {
-  var ownerDocument = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document;
-  var portalKey = arguments.length > 3 ? arguments[3] : undefined;
-  var cachedContainer = arguments.length > 4 ? arguments[4] : undefined;
-  if (!ownerDocument) {
-    ownerDocument = document;
-  }
-  if (!bulkComponentContainer) {
-    bulkComponentContainer = ownerDocument.createDocumentFragment();
-  }
-  var portalContainer = cachedContainer !== null && cachedContainer !== void 0 ? cachedContainer : ownerDocument.createElement('DIV');
-  bulkComponentContainer.appendChild(portalContainer);
-  var extendedRendererElement = React__default["default"].cloneElement(rElement, _objectSpread2({
-    key: "".concat(props.row, "-").concat(props.col)
-  }, props));
-  return {
-    portal: ReactDOM__default["default"].createPortal(extendedRendererElement, portalContainer, portalKey),
-    portalContainer: portalContainer
-  };
-}
-/**
- * Get an object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
- * component.
- *
- * @param {Object} props Object containing the react element props.
- * @param {Boolean} randomizeId If set to `true`, the function will randomize the `id` property when no `id` was present in the `prop` object.
- * @returns An object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
- * component.
- */
-function getContainerAttributesProps(props) {
-  var randomizeId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return {
-    id: props.id || (randomizeId ? 'hot-' + Math.random().toString(36).substring(5) : undefined),
-    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 SettingsMapper = /*#__PURE__*/function () {
   function SettingsMapper() {
     _classCallCheck(this, SettingsMapper);
@@ -336,7 +392,7 @@ var SettingsMapper = /*#__PURE__*/function () {
     key: "getSettings",
     value:
     /**
-     * Parse component settings into Handosntable-compatible settings.
+     * Parse component settings into Handsontable-compatible settings.
      *
      * @param {Object} properties Object containing properties from the HotTable object.
      * @param {Object} additionalSettings Additional settings.
@@ -345,32 +401,14 @@ var SettingsMapper = /*#__PURE__*/function () {
      * @returns {Object} Handsontable-compatible settings object.
      */
     function getSettings(properties) {
-      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        _ref$prevProps = _ref.prevProps,
-        prevProps = _ref$prevProps === void 0 ? {} : _ref$prevProps,
-        _ref$isInit = _ref.isInit,
-        isInit = _ref$isInit === void 0 ? false : _ref$isInit,
-        _ref$initOnlySettingK = _ref.initOnlySettingKeys,
-        initOnlySettingKeys = _ref$initOnlySettingK === void 0 ? [] : _ref$initOnlySettingK;
-      var shouldSkipProp = function shouldSkipProp(key) {
-        // Omit settings that can be set only during initialization and are intentionally modified.
-        if (!isInit && initOnlySettingKeys.includes(key)) {
-          return prevProps[key] === properties[key];
-        }
-        return false;
-      };
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        _ref.prevProps;
+        _ref.isInit;
+        _ref.initOnlySettingKeys;
       var newSettings = {};
-      if (properties.settings) {
-        var settings = properties.settings;
-        for (var key in settings) {
-          if (settings.hasOwnProperty(key) && !shouldSkipProp(key)) {
-            newSettings[key] = settings[key];
-          }
-        }
-      }
-      for (var _key in properties) {
-        if (_key !== 'settings' && _key !== 'children' && !shouldSkipProp(_key) && properties.hasOwnProperty(_key)) {
-          newSettings[_key] = properties[_key];
+      for (var key in properties) {
+        if (key !== 'children' && properties.hasOwnProperty(key)) {
+          newSettings[key] = properties[key];
         }
       }
       return newSettings;
@@ -378,126 +416,358 @@ var SettingsMapper = /*#__PURE__*/function () {
   }]);
 }();
 
-var HotColumn = /*#__PURE__*/function (_React$Component) {
-  function HotColumn() {
-    _classCallCheck(this, HotColumn);
-    return _callSuper(this, HotColumn, arguments);
-  }
-  _inherits(HotColumn, _React$Component);
-  return _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);
+var HotTableContext = React__default["default"].createContext(undefined);
+var HotTableContextProvider = function HotTableContextProvider(_ref) {
+  var children = _ref.children;
+  var columnsSettings = React__default["default"].useRef([]);
+  var setHotColumnSettings = React__default["default"].useCallback(function (columnSettings, columnIndex) {
+    columnsSettings.current[columnIndex] = columnSettings;
+  }, []);
+  var componentRendererColumns = React__default["default"].useRef(new Map());
+  var renderedCellCache = React__default["default"].useRef(new Map());
+  var clearRenderedCellCache = React__default["default"].useCallback(function () {
+    return renderedCellCache.current.clear();
+  }, []);
+  var portalCache = React__default["default"].useRef(new Map());
+  var clearPortalCache = React__default["default"].useCallback(function () {
+    return portalCache.current.clear();
+  }, []);
+  var portalContainerCache = React__default["default"].useRef(new Map());
+  var getRendererWrapper = React__default["default"].useCallback(function (Renderer) {
+    return function __internalRenderer(instance, TD, row, col, prop, value, cellProperties) {
+      var key = "".concat(row, "-").concat(col);
+      // Handsontable.Core type is missing guid
+      var instanceGuid = instance.guid;
+      var portalContainerKey = "".concat(instanceGuid, "-").concat(key);
+      var portalKey = "".concat(key, "-").concat(instanceGuid);
+      if (renderedCellCache.current.has(key)) {
+        TD.innerHTML = renderedCellCache.current.get(key).innerHTML;
+      }
+      if (TD && !TD.getAttribute('ghost-table')) {
+        var cachedPortal = portalCache.current.get(portalKey);
+        var cachedPortalContainer = portalContainerCache.current.get(portalContainerKey);
+        while (TD.firstChild) {
+          TD.removeChild(TD.firstChild);
+        }
+        // if portal already exists, do not recreate
+        if (cachedPortal && cachedPortalContainer) {
+          TD.appendChild(cachedPortalContainer);
+        } else {
+          var rendererElement = React__default["default"].createElement(Renderer, {
+            instance: instance,
+            TD: TD,
+            row: row,
+            col: col,
+            prop: prop,
+            value: value,
+            cellProperties: cellProperties
+          });
+          var _createPortal = createPortal(rendererElement, TD.ownerDocument, portalKey, cachedPortalContainer),
+            portal = _createPortal.portal,
+            portalContainer = _createPortal.portalContainer;
+          portalContainerCache.current.set(portalContainerKey, portalContainer);
+          TD.appendChild(portalContainer);
+          portalCache.current.set(portalKey, portal);
+        }
       }
-    }
-    /**
-     * 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();
-    }
+      renderedCellCache.current.set("".concat(row, "-").concat(col), TD);
+      return TD;
+    };
+  }, []);
+  var renderersPortalManager = React__default["default"].useRef(function () {
+    return undefined;
+  });
+  var setRenderersPortalManagerRef = React__default["default"].useCallback(function (pmComponent) {
+    renderersPortalManager.current = pmComponent;
+  }, []);
+  var pushCellPortalsIntoPortalManager = React__default["default"].useCallback(function () {
+    renderersPortalManager.current(_toConsumableArray(portalCache.current.values()));
+  }, []);
+  var contextImpl = React__default["default"].useMemo(function () {
+    return {
+      componentRendererColumns: componentRendererColumns.current,
+      columnsSettings: columnsSettings.current,
+      emitColumnSettings: setHotColumnSettings,
+      getRendererWrapper: getRendererWrapper,
+      clearPortalCache: clearPortalCache,
+      clearRenderedCellCache: clearRenderedCellCache,
+      setRenderersPortalManagerRef: setRenderersPortalManagerRef,
+      pushCellPortalsIntoPortalManager: pushCellPortalsIntoPortalManager
+    };
+  }, [setHotColumnSettings, getRendererWrapper, clearRenderedCellCache, setRenderersPortalManagerRef, pushCellPortalsIntoPortalManager]);
+  return React__default["default"].createElement(HotTableContext.Provider, {
+    value: contextImpl
+  }, children);
+};
+/**
+ * Exposes the table context object to components
+ *
+ * @returns HotTableContext
+ */
+function useHotTableContext() {
+  return React__default["default"].useContext(HotTableContext);
+}
+
+var HotColumnContext = React__default["default"].createContext(undefined);
+var HotColumnContextProvider = function HotColumnContextProvider(_ref) {
+  var columnIndex = _ref.columnIndex,
+    getOwnerDocument = _ref.getOwnerDocument,
+    children = _ref.children;
+  var contextImpl = React__default["default"].useMemo(function () {
+    return {
+      columnIndex: columnIndex,
+      getOwnerDocument: getOwnerDocument
+    };
+  }, [columnIndex, getOwnerDocument]);
+  return React__default["default"].createElement(HotColumnContext.Provider, {
+    value: contextImpl
+  }, children);
+};
+var useHotColumnContext = function useHotColumnContext() {
+  return React__default["default"].useContext(HotColumnContext);
+};
+
+var AbstractMethods = ["close", "focus", "open"];
+var ExcludedMethods = ["getValue", "setValue"];
+var MethodsMap = {
+  open: "onOpen",
+  close: "onClose",
+  prepare: "onPrepare",
+  focus: "onFocus"
+};
+/**
+ * Create a class to be passed to the Handsontable's settings.
+ *
+ * @param {React.RefObject<HotEditorHooks>} hooksRef Reference to component-based editor overridden hooks object.
+ * @param {React.RefObject} instanceRef Reference to Handsontable-native custom editor class instance.
+ * @returns {Function} A class to be passed to the Handsontable editor settings.
+ */
+function makeEditorClass(hooksRef, instanceRef) {
+  return /*#__PURE__*/function (_Handsontable$editors) {
+    function CustomEditor(hotInstance) {
+      var _this;
+      _classCallCheck(this, CustomEditor);
+      _this = _callSuper(this, CustomEditor, [hotInstance]);
+      instanceRef.current = _this;
+      Object.getOwnPropertyNames(Handsontable__default["default"].editors.BaseEditor.prototype).forEach(function (propName) {
+        if (propName === "constructor" || ExcludedMethods.includes(propName)) {
+          return;
+        }
+        var baseMethod = Handsontable__default["default"].editors.BaseEditor.prototype[propName];
+        CustomEditor.prototype[propName] = function () {
+          var _hooksRef$current;
+          var result;
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          if (!AbstractMethods.includes(propName)) {
+            result = baseMethod.call.apply(baseMethod, [this].concat(args)); // call super
+          }
+          if (MethodsMap[propName] && (_hooksRef$current = hooksRef.current) !== null && _hooksRef$current !== void 0 && _hooksRef$current[MethodsMap[propName]]) {
+            var _hooksRef$current$Met;
+            result = (_hooksRef$current$Met = hooksRef.current[MethodsMap[propName]]).call.apply(_hooksRef$current$Met, [this].concat(args));
+          }
+          return result;
+        }.bind(_this);
+      });
+      return _this;
+    }
+    _inherits(CustomEditor, _Handsontable$editors);
+    return _createClass(CustomEditor, [{
+      key: "focus",
+      value: function focus() {}
+    }, {
+      key: "getValue",
+      value: function getValue() {
+        return this.value;
+      }
+    }, {
+      key: "setValue",
+      value: function setValue(newValue) {
+        this.value = newValue;
+      }
+    }, {
+      key: "open",
+      value: function open() {}
+    }, {
+      key: "close",
+      value: function close() {}
+    }]);
+  }(Handsontable__default["default"].editors.BaseEditor);
+}
+/**
+ * Context to provide Handsontable-native custom editor class instance to overridden hooks object.
+ */
+var EditorContext = React__default["default"].createContext(undefined);
+/**
+ * Provider of the context that exposes Handsontable-native editor instance and passes hooks object
+ * for custom editor components.
+ *
+ * @param {React.Ref} hooksRef Reference for component-based editor overridden hooks object.
+ * @param {React.RefObject} hotCustomEditorInstanceRef  Reference to Handsontable-native editor instance.
+ */
+var EditorContextProvider = function EditorContextProvider(_ref) {
+  var hooksRef = _ref.hooksRef,
+    hotCustomEditorInstanceRef = _ref.hotCustomEditorInstanceRef,
+    children = _ref.children;
+  return React__default["default"].createElement(EditorContext.Provider, {
+    value: {
+      hooksRef: hooksRef,
+      hotCustomEditorInstanceRef: hotCustomEditorInstanceRef
+    }
+  }, children);
+};
+/**
+ * Hook that allows encapsulating custom behaviours of component-based editor by customizing passed ref with overridden hooks object.
+ *
+ * @param {HotEditorHooks} overriddenHooks Overrides specific for the custom editor.
+ * @param {React.DependencyList} deps Overridden hooks object React dependency list.
+ * @returns {UseHotEditorImpl} Editor API methods
+ */
+function useHotEditor(overriddenHooks, deps) {
+  var _React$useContext = React__default["default"].useContext(EditorContext),
+    hooksRef = _React$useContext.hooksRef,
+    hotCustomEditorInstanceRef = _React$useContext.hotCustomEditorInstanceRef;
+  var _React$useState = React__default["default"].useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    rerenderTrigger = _React$useState2[0],
+    setRerenderTrigger = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    editorValue = _React$useState4[0],
+    setEditorValue = _React$useState4[1];
+  // return a deferred value that allows for optimizing performance by delaying the update of a value until the next render.
+  var deferredValue = React.useDeferredValue(editorValue);
+  React__default["default"].useImperativeHandle(hooksRef, function () {
+    return _objectSpread2(_objectSpread2({}, overriddenHooks), {}, {
+      onOpen: function onOpen() {
+        var _hotCustomEditorInsta, _overriddenHooks$onOp;
+        setEditorValue((_hotCustomEditorInsta = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta === void 0 ? void 0 : _hotCustomEditorInsta.getValue());
+        overriddenHooks === null || overriddenHooks === void 0 || (_overriddenHooks$onOp = overriddenHooks.onOpen) === null || _overriddenHooks$onOp === void 0 || _overriddenHooks$onOp.call(overriddenHooks);
+        setRerenderTrigger(function (t) {
+          return t + 1;
+        });
+      }
+    });
+  }, deps);
+  return React__default["default"].useMemo(function () {
+    return {
+      get value() {
+        return deferredValue;
+      },
+      setValue: function setValue(newValue) {
+        var _hotCustomEditorInsta2;
+        setEditorValue(newValue);
+        (_hotCustomEditorInsta2 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta2 === void 0 || _hotCustomEditorInsta2.setValue(newValue);
+      },
+      get isOpen() {
+        var _hotCustomEditorInsta3, _hotCustomEditorInsta4;
+        return (_hotCustomEditorInsta3 = (_hotCustomEditorInsta4 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta4 === void 0 ? void 0 : _hotCustomEditorInsta4.isOpened()) !== null && _hotCustomEditorInsta3 !== void 0 ? _hotCustomEditorInsta3 : false;
+      },
+      finishEditing: function finishEditing() {
+        var _hotCustomEditorInsta5;
+        (_hotCustomEditorInsta5 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta5 === void 0 || _hotCustomEditorInsta5.finishEditing();
+      },
+      get row() {
+        var _hotCustomEditorInsta6;
+        return (_hotCustomEditorInsta6 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta6 === void 0 ? void 0 : _hotCustomEditorInsta6.row;
+      },
+      get col() {
+        var _hotCustomEditorInsta7;
+        return (_hotCustomEditorInsta7 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta7 === void 0 ? void 0 : _hotCustomEditorInsta7.col;
+      }
+    };
+  }, [rerenderTrigger, hotCustomEditorInstanceRef, deferredValue]);
+}
+
+var isHotColumn = function isHotColumn(childNode) {
+  return childNode.type === HotColumn;
+};
+var internalProps = ['_columnIndex', '_getOwnerDocument', 'children'];
+var HotColumn = function HotColumn(props) {
+  var _useHotTableContext = useHotTableContext(),
+    componentRendererColumns = _useHotTableContext.componentRendererColumns,
+    emitColumnSettings = _useHotTableContext.emitColumnSettings,
+    getRendererWrapper = _useHotTableContext.getRendererWrapper;
+  var _useHotColumnContext = useHotColumnContext(),
+    columnIndex = _useHotColumnContext.columnIndex,
+    getOwnerDocument = _useHotColumnContext.getOwnerDocument;
+  /**
+   * Reference to component-based editor overridden hooks object.
+   */
+  var localEditorHooksRef = React__default["default"].useRef(null);
+  /**
+   * Reference to HOT-native custom editor class instance.
+   */
+  var localEditorClassInstance = React__default["default"].useRef(null);
+  /**
+   * Logic performed after mounting & updating of the HotColumn component.
+   */
+  React__default["default"].useEffect(function () {
     /**
-     * Logic performed after the updating of the HotColumn component.
+     * Filter out all the internal properties and return an object with just the Handsontable-related props.
+     *
+     * @returns {Object}
      */
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.createColumnSettings();
-      this.emitColumnSettings();
-    }
+    var getSettingsProps = function getSettingsProps() {
+      return Object.keys(props).filter(function (key) {
+        return !internalProps.includes(key);
+      }).reduce(function (obj, key) {
+        obj[key] = props[key];
+        return obj;
+      }, {});
+    };
     /**
-     * Render the portals of the editors, if there are any.
-     *
-     * @returns {React.ReactElement}
+     * Create the column settings based on the data provided to the `HotColumn` component and its child components.
      */
-  }, {
-    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);
+    var createColumnSettings = function createColumnSettings() {
+      var columnSettings = SettingsMapper.getSettings(getSettingsProps());
+      if (props.renderer) {
+        columnSettings.renderer = getRendererWrapper(props.renderer);
+        componentRendererColumns.set(columnIndex, true);
+      } else if (props.hotRenderer) {
+        columnSettings.renderer = props.hotRenderer;
+      }
+      if (props.editor) {
+        columnSettings.editor = makeEditorClass(localEditorHooksRef, localEditorClassInstance);
+      } else if (props.hotEditor) {
+        columnSettings.editor = props.hotEditor;
+      }
+      return columnSettings;
+    };
+    var columnSettings = createColumnSettings();
+    emitColumnSettings(columnSettings, columnIndex);
+    if (!displayObsoleteRenderersEditorsWarning(props.children)) {
+      displayAnyChildrenWarning(props.children);
     }
-  }]);
-}(React__default["default"].Component);
+  });
+  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
+  /**
+   * Render the portals of the editors, if there are any.
+   *
+   * @returns {React.ReactElement}
+   */
+  return React__default["default"].createElement(EditorContextProvider, {
+    hooksRef: localEditorHooksRef,
+    hotCustomEditorInstanceRef: localEditorClassInstance
+  }, editorPortal);
+};
+
+var version="0.0.0-next-0306a1a-20240826";
 
 /**
- * Component class used to manage the renderer component portals.
+ * Component used to manage the renderer component portals.
  */
-var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
-  function RenderersPortalManager() {
-    var _this;
-    _classCallCheck(this, RenderersPortalManager);
-    _this = _callSuper(this, RenderersPortalManager, arguments);
-    _this.state = {
-      portals: []
-    };
-    return _this;
-  }
-  _inherits(RenderersPortalManager, _React$Component);
-  return _createClass(RenderersPortalManager, [{
-    key: "render",
-    value: function render() {
-      return React__default["default"].createElement(React__default["default"].Fragment, null, this.state.portals);
-    }
-  }]);
-}(React__default["default"].Component);
-
-var version="0.0.0-next-eaf150e-20240823";
+var RenderersPortalManager = React__default["default"].forwardRef(function (_, ref) {
+  var _React$useState = React__default["default"].useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    portals = _React$useState2[0],
+    setPortals = _React$useState2[1];
+  React__default["default"].useImperativeHandle(ref, function () {
+    return setPortals;
+  });
+  return React__default["default"].createElement(React__default["default"].Fragment, null, portals);
+});
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1622,837 +1892,218 @@ if (process.env.NODE_ENV !== 'production') {
 var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
-/**
- * A Handsontable-ReactJS wrapper.
- *
- * To implement, use the `HotTable` tag with properties corresponding to Handsontable options.
- * For example:
- *
- * ```js
- * <HotTable id="hot" data={dataObject} contextMenu={true} colHeaders={true} width={600} height={300} stretchH="all" />
- *
- * // is analogous to
- * let hot = new Handsontable(document.getElementById('hot'), {
- *    data: dataObject,
- *    contextMenu: true,
- *    colHeaders: true,
- *    width: 600
- *    height: 300
- * });
- *
- * ```
- *
- * @class HotTableCB
- */
-var HotTableClass = /*#__PURE__*/function (_React$Component) {
-  function HotTableClass() {
-    var _this;
-    _classCallCheck(this, HotTableClass);
-    _this = _callSuper(this, HotTableClass, arguments);
-    /**
-     * The `id` of the main Handsontable DOM element.
-     *
-     * @type {String}
-     */
-    _this.id = null;
-    /**
-     * Reference to the Handsontable instance.
-     *
-     * @private
-     * @type {Object}
-     */
-    _this.__hotInstance = null;
-    /**
-     * Reference to the main Handsontable DOM element.
-     *
-     * @type {HTMLElement}
-     */
-    _this.hotElementRef = null;
-    /**
-     * Array of object containing the column settings.
-     *
-     * @type {Array}
-     */
-    _this.columnSettings = [];
-    /**
-     * Component used to manage the renderer portals.
-     *
-     * @type {React.Component}
-     */
-    _this.renderersPortalManager = null;
-    /**
-     * Map that stores React portals.
-     * @type {Map<string, React.ReactPortal>}
-     */
-    _this.portalCache = new Map();
-    /**
-     * Portal Container Cache
-     *
-     * @private
-     * @type {Map}
-     */
-    _this.portalContainerCache = new Map();
-    /**
-     * The rendered cells cache.
-     *
-     * @private
-     * @type {Map}
-     */
-    _this.renderedCellCache = new Map();
-    /**
-     * Editor cache.
-     *
-     * @private
-     * @type {Map}
-     */
-    _this.editorCache = new Map();
-    /**
-     * Map with column indexes (or a string = 'global') as keys, and booleans as values. Each key represents a component-based editor
-     * declared for the used column index, or a global one, if the key is the `global` string.
-     *
-     * @private
-     * @type {Map}
-     */
-    _this.componentRendererColumns = new Map();
-    return _this;
-  }
+var HotTableInner = React__default["default"].forwardRef(function (props, ref) {
   /**
-   * Package version getter.
-   *
-   * @returns The version number of the package.
+   * Reference to the Handsontable instance.
    */
-  _inherits(HotTableClass, _React$Component);
-  return _createClass(HotTableClass, [{
-    key: "hotInstance",
-    get:
-    /**
-     * Getter for the property storing the Handsontable instance.
-     */
-    function get() {
-      if (!this.__hotInstance || this.__hotInstance && !this.__hotInstance.isDestroyed) {
-        // Will return the Handsontable instance or `null` if it's not yet been created.
-        return this.__hotInstance;
-      } else {
-        console.warn(HOT_DESTROYED_WARNING);
-        return null;
-      }
-    }
-    /**
-     * Returns `true` if the `hotInstance` exists, but was destroyed.
-     *
-     * @private
-     * @returns {boolean}
-     */,
-    set:
-    /**
-     * Setter for the property storing the Handsontable instance.
-     * @param {Handsontable} hotInstance The Handsontable instance.
-     */
-    function set(hotInstance) {
-      this.__hotInstance = hotInstance;
-    }
-    /**
-     * Get Portal Container Cache
-     *
-     * @returns {Map}
-     */
-  }, {
-    key: "_isHotInstanceDestroyed",
-    value: function _isHotInstanceDestroyed() {
-      return this.__hotInstance && this.__hotInstance.isDestroyed;
-    }
-  }, {
-    key: "getPortalContainerCache",
-    value: function getPortalContainerCache() {
-      return this.portalContainerCache;
-    }
-    /**
-     * Get the rendered table cell cache.
-     *
-     * @returns {Map}
-     */
-  }, {
-    key: "getRenderedCellCache",
-    value: function getRenderedCellCache() {
-      return this.renderedCellCache;
-    }
-    /**
-     * Get the editor cache and return it.
-     *
-     * @returns {Map}
-     */
-  }, {
-    key: "getEditorCache",
-    value: function getEditorCache() {
-      return this.editorCache;
-    }
-    /**
-     * Clear both the editor and the renderer cache.
-     */
-  }, {
-    key: "clearCache",
-    value: function clearCache() {
-      this.getRenderedCellCache().clear();
-      this.componentRendererColumns.clear();
-    }
-    /**
-     * Get the `Document` object corresponding to the main component element.
-     *
-     * @returns The `Document` object used by the component.
-     */
-  }, {
-    key: "getOwnerDocument",
-    value: function getOwnerDocument() {
-      if (isCSR()) {
-        return this.hotElementRef ? this.hotElementRef.ownerDocument : document;
-      }
+  var __hotInstance = React__default["default"].useRef(null);
+  /**
+   * Reference to the main Handsontable DOM element.
+   */
+  var hotElementRef = React__default["default"].useRef(null);
+  /**
+   * Reference to component-based editor overridden hooks object.
+   */
+  var globalEditorHooksRef = React__default["default"].useRef(null);
+  /**
+   * Reference to HOT-native custom editor class instance.
+   */
+  var globalEditorClassInstance = React__default["default"].useRef(null);
+  /**
+   * HotTable context exposing helper functions.
+   */
+  var context = useHotTableContext();
+  /**
+   * Getter for the property storing the Handsontable instance.
+   */
+  var getHotInstance = React__default["default"].useCallback(function () {
+    if (!__hotInstance.current || !__hotInstance.current.isDestroyed) {
+      // Will return the Handsontable instance or `null` if it's not yet been created.
+      return __hotInstance.current;
+    } else {
+      console.warn(HOT_DESTROYED_WARNING);
       return null;
     }
-    /**
-     * Set the reference to the main Handsontable DOM element.
-     *
-     * @param {HTMLElement} element The main Handsontable DOM element.
-     */
-  }, {
-    key: "setHotElementRef",
-    value: function setHotElementRef(element) {
-      this.hotElementRef = element;
-    }
-    /**
-     * Return a renderer wrapper function for the provided renderer component.
-     *
-     * @param {React.ReactElement} rendererElement React renderer component.
-     * @returns {Handsontable.renderers.Base} The Handsontable rendering function.
-     */
-  }, {
-    key: "getRendererWrapper",
-    value: function getRendererWrapper(rendererElement) {
-      var hotTableComponent = this;
-      return function __internalRenderer(instance, TD, row, col, prop, value, cellProperties) {
-        var renderedCellCache = hotTableComponent.getRenderedCellCache();
-        var portalContainerCache = hotTableComponent.getPortalContainerCache();
-        var key = "".concat(row, "-").concat(col);
-        // Handsontable.Core type is missing guid
-        var instanceGuid = instance.guid;
-        var portalContainerKey = "".concat(instanceGuid, "-").concat(key);
-        var portalKey = "".concat(key, "-").concat(instanceGuid);
-        if (renderedCellCache.has(key)) {
-          TD.innerHTML = renderedCellCache.get(key).innerHTML;
-        }
-        if (TD && !TD.getAttribute('ghost-table')) {
-          var cachedPortal = hotTableComponent.portalCache.get(portalKey);
-          var cachedPortalContainer = portalContainerCache.get(portalContainerKey);
-          while (TD.firstChild) {
-            TD.removeChild(TD.firstChild);
-          }
-          // if portal already exists, do not recreate
-          if (cachedPortal && cachedPortalContainer) {
-            TD.appendChild(cachedPortalContainer);
-          } else {
-            var _createPortal = createPortal(rendererElement, {
-                TD: TD,
-                row: row,
-                col: col,
-                prop: prop,
-                value: value,
-                cellProperties: cellProperties,
-                isRenderer: true
-              }, TD.ownerDocument, portalKey, cachedPortalContainer),
-              portal = _createPortal.portal,
-              portalContainer = _createPortal.portalContainer;
-            portalContainerCache.set(portalContainerKey, portalContainer);
-            TD.appendChild(portalContainer);
-            hotTableComponent.portalCache.set(portalKey, portal);
-          }
-        }
-        renderedCellCache.set(key, TD);
-        return TD;
-      };
-    }
-    /**
-     * Create a fresh class to be used as an editor, based on the provided editor React element.
-     *
-     * @param {React.ReactElement} editorElement React editor component.
-     * @param {string|number} [editorColumnScope] The editor scope (column index or a 'global' string). Defaults to
-     * 'global'.
-     * @returns {Function} A class to be passed to the Handsontable editor settings.
-     */
-  }, {
-    key: "getEditorClass",
-    value: function getEditorClass(editorElement) {
-      var _this$getEditorCache$;
-      var editorColumnScope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GLOBAL_EDITOR_SCOPE;
-      var editorClass = getOriginalEditorClass(editorElement);
-      var cachedComponent = (_this$getEditorCache$ = this.getEditorCache().get(editorClass)) === null || _this$getEditorCache$ === void 0 ? void 0 : _this$getEditorCache$.get(editorColumnScope);
-      return this.makeEditorClass(cachedComponent);
-    }
-    /**
-     * Create a class to be passed to the Handsontable's settings.
-     *
-     * @param {React.ReactElement} editorComponent React editor component.
-     * @returns {Function} A class to be passed to the Handsontable editor settings.
-     */
-  }, {
-    key: "makeEditorClass",
-    value: function makeEditorClass(editorComponent) {
-      var customEditorClass = /*#__PURE__*/function (_Handsontable$editors) {
-        function CustomEditor(hotInstance) {
-          var _this2;
-          _classCallCheck(this, CustomEditor);
-          _this2 = _callSuper(this, CustomEditor, [hotInstance]);
-          editorComponent.hotCustomEditorInstance = _this2;
-          _this2.editorComponent = editorComponent;
-          return _this2;
-        }
-        _inherits(CustomEditor, _Handsontable$editors);
-        return _createClass(CustomEditor, [{
-          key: "focus",
-          value: function focus() {}
-        }, {
-          key: "getValue",
-          value: function getValue() {}
-        }, {
-          key: "setValue",
-          value: function setValue() {}
-        }, {
-          key: "open",
-          value: function open() {}
-        }, {
-          key: "close",
-          value: function close() {}
-        }]);
-      }(Handsontable__default["default"].editors.BaseEditor);
-      // Fill with the rest of the BaseEditor methods
-      Object.getOwnPropertyNames(Handsontable__default["default"].editors.BaseEditor.prototype).forEach(function (propName) {
-        if (propName === 'constructor') {
-          return;
-        }
-        customEditorClass.prototype[propName] = function () {
-          var _editorComponent$prop;
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-          return (_editorComponent$prop = editorComponent[propName]).call.apply(_editorComponent$prop, [editorComponent].concat(args));
-        };
-      });
-      return customEditorClass;
-    }
-    /**
-     * Get the renderer element for the entire HotTable instance.
-     *
-     * @returns {React.ReactElement} React renderer component element.
-     */
-  }, {
-    key: "getGlobalRendererElement",
-    value: function getGlobalRendererElement() {
-      return getChildElementByType(this.props.children, 'hot-renderer');
+  }, [__hotInstance]);
+  /**
+   * Clear both the editor and the renderer cache.
+   */
+  var clearCache = React__default["default"].useCallback(function () {
+    context.clearRenderedCellCache();
+    context.componentRendererColumns.clear();
+  }, [context]);
+  /**
+   * Get the `Document` object corresponding to the main component element.
+   *
+   * @returns The `Document` object used by the component.
+   */
+  var getOwnerDocument = React__default["default"].useCallback(function () {
+    if (isCSR()) {
+      return hotElementRef.current ? hotElementRef.current.ownerDocument : document;
     }
-    /**
-     * Get the editor element for the entire HotTable instance.
-     *
-     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
-     * @returns {React.ReactElement} React editor component element.
-     */
-  }, {
-    key: "getGlobalEditorElement",
-    value: function getGlobalEditorElement() {
-      return getExtendedEditorElement(this.props.children, this.getEditorCache());
+    return null;
+  }, [hotElementRef]);
+  /**
+   * Create a new settings object containing the column settings and global editors and renderers.
+   *
+   * @returns {Handsontable.GridSettings} New global set of settings for Handsontable.
+   */
+  var createNewGlobalSettings = function createNewGlobalSettings() {
+    var newSettings = SettingsMapper.getSettings(props);
+    newSettings.columns = context.columnsSettings.length ? context.columnsSettings : newSettings.columns;
+    if (props.renderer) {
+      newSettings.renderer = context.getRendererWrapper(props.renderer);
+      context.componentRendererColumns.set('global', true);
+    } else {
+      newSettings.renderer = props.hotRenderer || registry.getRenderer('text');
     }
-    /**
-     * Create a new settings object containing the column settings and global editors and renderers.
-     *
-     * @param {boolean} [init=false] `true` if called on Handsontable initialization.
-     * @param {HotTableProps} [prevProps] The previous properties object.
-     * @returns {Handsontable.GridSettings} New global set of settings for Handsontable.
-     */
-  }, {
-    key: "createNewGlobalSettings",
-    value: function createNewGlobalSettings() {
-      var _this$hotInstance;
-      var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var prevProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var initOnlySettingKeys = !this._isHotInstanceDestroyed() ?
-      // Needed for React's double-rendering.
-      ((_this$hotInstance = this.hotInstance) === null || _this$hotInstance === void 0 || (_this$hotInstance = _this$hotInstance.getSettings()) === null || _this$hotInstance === void 0 ? void 0 : _this$hotInstance._initOnlySettings) || [] : [];
-      var newSettings = SettingsMapper.getSettings(this.props, {
-        prevProps: prevProps,
-        isInit: init,
-        initOnlySettingKeys: initOnlySettingKeys
-      });
-      var globalRendererNode = this.getGlobalRendererElement();
-      var globalEditorNode = this.getGlobalEditorElement();
-      newSettings.columns = this.columnSettings.length ? this.columnSettings : newSettings.columns;
-      if (globalEditorNode) {
-        newSettings.editor = this.getEditorClass(globalEditorNode, GLOBAL_EDITOR_SCOPE);
-      } else {
-        var _this$props$settings;
-        if (this.props.editor || (_this$props$settings = this.props.settings) !== null && _this$props$settings !== void 0 && _this$props$settings.editor) {
-          newSettings.editor = this.props.editor || this.props.settings.editor;
-        } else {
-          newSettings.editor = registry.getEditor('text');
-        }
-      }
-      if (globalRendererNode) {
-        newSettings.renderer = this.getRendererWrapper(globalRendererNode);
-        this.componentRendererColumns.set('global', true);
-      } else {
-        var _this$props$settings2;
-        if (this.props.renderer || (_this$props$settings2 = this.props.settings) !== null && _this$props$settings2 !== void 0 && _this$props$settings2.renderer) {
-          newSettings.renderer = this.props.renderer || this.props.settings.renderer;
-        } else {
-          newSettings.renderer = registry$1.getRenderer('text');
-        }
-      }
-      return newSettings;
+    if (props.editor) {
+      newSettings.editor = makeEditorClass(globalEditorHooksRef, globalEditorClassInstance);
+    } else {
+      newSettings.editor = props.hotEditor || registry$1.getEditor('text');
     }
-    /**
-     * Detect if `autoRowSize` or `autoColumnSize` is defined, and if so, throw an incompatibility warning.
-     *
-     * @param {Handsontable.GridSettings} newGlobalSettings New global settings passed as Handsontable config.
-     */
-  }, {
-    key: "displayAutoSizeWarning",
-    value: function displayAutoSizeWarning(newGlobalSettings) {
-      var _this$hotInstance$get, _this$hotInstance$get2;
-      if (this.hotInstance && ((_this$hotInstance$get = this.hotInstance.getPlugin('autoRowSize')) !== null && _this$hotInstance$get !== void 0 && _this$hotInstance$get.enabled || (_this$hotInstance$get2 = this.hotInstance.getPlugin('autoColumnSize')) !== null && _this$hotInstance$get2 !== void 0 && _this$hotInstance$get2.enabled)) {
-        if (this.componentRendererColumns.size > 0) {
-          warn(AUTOSIZE_WARNING);
-        }
+    return newSettings;
+  };
+  /**
+   * Detect if `autoRowSize` or `autoColumnSize` is defined, and if so, throw an incompatibility warning.
+   */
+  var displayAutoSizeWarning = function displayAutoSizeWarning(hotInstance) {
+    var _hotInstance$getPlugi, _hotInstance$getPlugi2;
+    if (hotInstance && ((_hotInstance$getPlugi = hotInstance.getPlugin('autoRowSize')) !== null && _hotInstance$getPlugi !== void 0 && _hotInstance$getPlugi.enabled || (_hotInstance$getPlugi2 = hotInstance.getPlugin('autoColumnSize')) !== null && _hotInstance$getPlugi2 !== void 0 && _hotInstance$getPlugi2.enabled)) {
+      if (context.componentRendererColumns.size > 0) {
+        warn(AUTOSIZE_WARNING);
       }
     }
-    /**
-     * Sets the column settings based on information received from HotColumn.
-     *
-     * @param {HotTableProps} columnSettings Column settings object.
-     * @param {Number} columnIndex Column index.
-     */
-  }, {
-    key: "setHotColumnSettings",
-    value: function setHotColumnSettings(columnSettings, columnIndex) {
-      this.columnSettings[columnIndex] = columnSettings;
-    }
+  };
+  /**
+   * Initialize Handsontable after the component has mounted.
+   */
+  React__default["default"].useEffect(function () {
+    var newGlobalSettings = createNewGlobalSettings();
+    __hotInstance.current = new Handsontable__default["default"].Core(hotElementRef.current, newGlobalSettings);
     /**
      * Handsontable's `beforeViewRender` hook callback.
      */
-  }, {
-    key: "handsontableBeforeViewRender",
-    value: function handsontableBeforeViewRender() {
-      this.portalCache.clear();
-      this.getRenderedCellCache().clear();
-    }
+    __hotInstance.current.addHook('beforeViewRender', function () {
+      context.clearPortalCache();
+      context.clearRenderedCellCache();
+    });
     /**
      * Handsontable's `afterViewRender` hook callback.
      */
-  }, {
-    key: "handsontableAfterViewRender",
-    value: function handsontableAfterViewRender() {
-      this.renderersPortalManager.setState({
-        portals: _toConsumableArray(this.portalCache.values())
-      });
-    }
-    /**
-     * Call the `updateSettings` method for the Handsontable instance.
-     *
-     * @param {Object} newSettings The settings object.
-     */
-  }, {
-    key: "updateHot",
-    value: function updateHot(newSettings) {
-      if (this.hotInstance) {
-        this.hotInstance.updateSettings(newSettings, false);
-      }
-    }
-    /**
-     * Set the renderers portal manager ref.
-     *
-     * @param {React.ReactComponent} pmComponent The PortalManager component.
-     */
-  }, {
-    key: "setRenderersPortalManagerRef",
-    value: function setRenderersPortalManagerRef(pmComponent) {
-      this.renderersPortalManager = pmComponent;
-    }
-    /*
-    ---------------------------------------
-    ------- React lifecycle methods -------
-    ---------------------------------------
-    */
-    /**
-     * Initialize Handsontable after the component has mounted.
-     */
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this3 = this;
-      var newGlobalSettings = this.createNewGlobalSettings(true);
-      this.hotInstance = new Handsontable__default["default"].Core(this.hotElementRef, newGlobalSettings);
-      this.hotInstance.addHook('beforeViewRender', function () {
-        return _this3.handsontableBeforeViewRender();
-      });
-      this.hotInstance.addHook('afterViewRender', function () {
-        return _this3.handsontableAfterViewRender();
-      });
-      // `init` missing in Handsontable's type definitions.
-      this.hotInstance.init();
-      this.displayAutoSizeWarning(newGlobalSettings);
-    }
-    /**
-     * Logic performed after the component update.
-     */
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      this.clearCache();
-      var newGlobalSettings = this.createNewGlobalSettings(false, prevProps);
-      this.updateHot(newGlobalSettings);
-      this.displayAutoSizeWarning(newGlobalSettings);
+    __hotInstance.current.addHook('afterViewRender', function () {
+      context.pushCellPortalsIntoPortalManager();
+    });
+    __hotInstance.current.init();
+    displayAutoSizeWarning(__hotInstance.current);
+    if (!displayObsoleteRenderersEditorsWarning(props.children)) {
+      displayChildrenOfTypeWarning(props.children, HotColumn);
     }
     /**
      * Destroy the Handsontable instance when the parent component unmounts.
      */
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.clearCache();
-      if (this.hotInstance) {
-        this.hotInstance.destroy();
+    return function () {
+      var _getHotInstance;
+      clearCache();
+      (_getHotInstance = getHotInstance()) === null || _getHotInstance === void 0 || _getHotInstance.destroy();
+    };
+  }, []);
+  /**
+   * Logic performed after the component update.
+   */
+  useUpdateEffect(function () {
+    clearCache();
+    var hotInstance = getHotInstance();
+    var newGlobalSettings = createNewGlobalSettings();
+    hotInstance === null || hotInstance === void 0 || hotInstance.updateSettings(newGlobalSettings, false);
+    displayAutoSizeWarning(hotInstance);
+    displayObsoleteRenderersEditorsWarning(props.children);
+  });
+  /**
+   * Interface exposed to parent components by HotTable instance via React ref
+   */
+  React__default["default"].useImperativeHandle(ref, function () {
+    return {
+      get hotElementRef() {
+        return hotElementRef.current;
+      },
+      get hotInstance() {
+        return getHotInstance();
       }
-    }
-    /**
-     * Render the component.
-     */
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-      var isHotColumn = function isHotColumn(childNode) {
-        return childNode.type === HotColumn;
-      };
-      var children = React__default["default"].Children.toArray(this.props.children);
-      // clone the HotColumn nodes and extend them with the callbacks
-      var hotColumnClones = children.filter(function (childNode) {
-        return isHotColumn(childNode);
-      }).map(function (childNode, columnIndex) {
-        return React__default["default"].cloneElement(childNode, {
-          _componentRendererColumns: _this4.componentRendererColumns,
-          _emitColumnSettings: _this4.setHotColumnSettings.bind(_this4),
-          _columnIndex: columnIndex,
-          _getChildElementByType: getChildElementByType.bind(_this4),
-          _getRendererWrapper: _this4.getRendererWrapper.bind(_this4),
-          _getEditorClass: _this4.getEditorClass.bind(_this4),
-          _getOwnerDocument: _this4.getOwnerDocument.bind(_this4),
-          _getEditorCache: _this4.getEditorCache.bind(_this4),
-          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);
-    }
-  }], [{
-    key: "version",
-    get: function get() {
-      return version;
-    }
-  }]);
-}(React__default["default"].Component);
+    };
+  });
+  /**
+   * Render the component.
+   */
+  var hotColumnWrapped = React__default["default"].Children.toArray(props.children).filter(isHotColumn).map(function (childNode, columnIndex) {
+    return React__default["default"].createElement(HotColumnContextProvider, {
+      columnIndex: columnIndex,
+      getOwnerDocument: getOwnerDocument,
+      key: columnIndex
+    }, childNode);
+  });
+  var containerProps = getContainerAttributesProps(props);
+  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", Object.assign({
+    ref: hotElementRef
+  }, containerProps), hotColumnWrapped), React__default["default"].createElement(RenderersPortalManager, {
+    ref: context.setRenderersPortalManagerRef
+  }), React__default["default"].createElement(EditorContextProvider, {
+    hooksRef: globalEditorHooksRef,
+    hotCustomEditorInstanceRef: globalEditorClassInstance
+  }, editorPortal));
+});
 /**
  * Prop types to be checked at runtime.
  */
-HotTableClass.propTypes = {
+HotTableInner.propTypes = {
   style: PropTypes.object,
   id: PropTypes.string,
   className: PropTypes.string
 };
 
 var _excluded = ["children"];
-// Use global React variable for `forwardRef` access (React 16 support)
+/**
+ * A Handsontable-ReactJS wrapper.
+ *
+ * To implement, use the `HotTable` tag with properties corresponding to Handsontable options.
+ * For example:
+ *
+ * ```js
+ * <HotTable id="hot" data={dataObject} contextMenu={true} colHeaders={true} width={600} height={300} stretchH="all" />
+ *
+ * // is analogous to
+ * let hot = new Handsontable(document.getElementById('hot'), {
+ *    data: dataObject,
+ *    contextMenu: true,
+ *    colHeaders: true,
+ *    width: 600
+ *    height: 300
+ * });
+ *
+ * ```
+ */
 var HotTable = React__default["default"].forwardRef(function (_ref, ref) {
   var _props$id;
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var generatedId = typeof React__default["default"].useId === 'function' ? React__default["default"].useId() : undefined;
   var componentId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : generatedId;
-  return React__default["default"].createElement(HotTableClass, Object.assign({
+  return React__default["default"].createElement(HotTableContextProvider, null, React__default["default"].createElement(HotTableInner, Object.assign({
     id: componentId
   }, props, {
     ref: ref
-  }), children);
+  }), children));
 });
-HotTable.version = HotTableClass.version;
-
-var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
-  function BaseEditorComponent() {
-    var _this;
-    _classCallCheck(this, BaseEditorComponent);
-    _this = _callSuper(this, BaseEditorComponent, arguments);
-    _this.name = 'BaseEditorComponent';
-    _this.instance = null;
-    _this.row = null;
-    _this.col = null;
-    _this.prop = null;
-    _this.TD = null;
-    _this.originalValue = null;
-    _this.cellProperties = null;
-    _this.state = null;
-    _this.hotInstance = null;
-    _this.hotCustomEditorInstance = null;
-    _this.hot = null;
-    return _this;
-  }
-  _inherits(BaseEditorComponent, _React$Component);
-  return _createClass(BaseEditorComponent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.emitEditorInstance) {
-        this.props.emitEditorInstance(this, this.props.editorColumnScope);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.props.emitEditorInstance) {
-        this.props.emitEditorInstance(this, this.props.editorColumnScope);
-      }
-    }
-    // BaseEditor methods:
-  }, {
-    key: "_fireCallbacks",
-    value: function _fireCallbacks() {
-      var _Handsontable$editors;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      (_Handsontable$editors = Handsontable__default["default"].editors.BaseEditor.prototype._fireCallbacks).call.apply(_Handsontable$editors, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "beginEditing",
-    value: function beginEditing() {
-      var _Handsontable$editors2;
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-      return (_Handsontable$editors2 = Handsontable__default["default"].editors.BaseEditor.prototype.beginEditing).call.apply(_Handsontable$editors2, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "cancelChanges",
-    value: function cancelChanges() {
-      var _Handsontable$editors3;
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-      return (_Handsontable$editors3 = Handsontable__default["default"].editors.BaseEditor.prototype.cancelChanges).call.apply(_Handsontable$editors3, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "checkEditorSection",
-    value: function checkEditorSection() {
-      var _Handsontable$editors4;
-      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-        args[_key4] = arguments[_key4];
-      }
-      return (_Handsontable$editors4 = Handsontable__default["default"].editors.BaseEditor.prototype.checkEditorSection).call.apply(_Handsontable$editors4, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "close",
-    value: function close() {
-      var _Handsontable$editors5;
-      for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-        args[_key5] = arguments[_key5];
-      }
-      return (_Handsontable$editors5 = Handsontable__default["default"].editors.BaseEditor.prototype.close).call.apply(_Handsontable$editors5, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "discardEditor",
-    value: function discardEditor() {
-      var _Handsontable$editors6;
-      for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-        args[_key6] = arguments[_key6];
-      }
-      return (_Handsontable$editors6 = Handsontable__default["default"].editors.BaseEditor.prototype.discardEditor).call.apply(_Handsontable$editors6, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "enableFullEditMode",
-    value: function enableFullEditMode() {
-      var _Handsontable$editors7;
-      for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-        args[_key7] = arguments[_key7];
-      }
-      return (_Handsontable$editors7 = Handsontable__default["default"].editors.BaseEditor.prototype.enableFullEditMode).call.apply(_Handsontable$editors7, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "extend",
-    value: function extend() {
-      var _Handsontable$editors8;
-      for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-        args[_key8] = arguments[_key8];
-      }
-      return (_Handsontable$editors8 = Handsontable__default["default"].editors.BaseEditor.prototype.extend).call.apply(_Handsontable$editors8, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "finishEditing",
-    value: function finishEditing() {
-      var _Handsontable$editors9;
-      for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-        args[_key9] = arguments[_key9];
-      }
-      return (_Handsontable$editors9 = Handsontable__default["default"].editors.BaseEditor.prototype.finishEditing).call.apply(_Handsontable$editors9, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var _Handsontable$editors10;
-      for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-        args[_key10] = arguments[_key10];
-      }
-      return (_Handsontable$editors10 = Handsontable__default["default"].editors.BaseEditor.prototype.focus).call.apply(_Handsontable$editors10, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "getValue",
-    value: function getValue() {
-      var _Handsontable$editors11;
-      for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-        args[_key11] = arguments[_key11];
-      }
-      return (_Handsontable$editors11 = Handsontable__default["default"].editors.BaseEditor.prototype.getValue).call.apply(_Handsontable$editors11, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "init",
-    value: function init() {
-      var _Handsontable$editors12;
-      for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
-        args[_key12] = arguments[_key12];
-      }
-      return (_Handsontable$editors12 = Handsontable__default["default"].editors.BaseEditor.prototype.init).call.apply(_Handsontable$editors12, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "isInFullEditMode",
-    value: function isInFullEditMode() {
-      var _Handsontable$editors13;
-      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
-        args[_key13] = arguments[_key13];
-      }
-      return (_Handsontable$editors13 = Handsontable__default["default"].editors.BaseEditor.prototype.isInFullEditMode).call.apply(_Handsontable$editors13, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "isOpened",
-    value: function isOpened() {
-      var _Handsontable$editors14;
-      for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
-        args[_key14] = arguments[_key14];
-      }
-      return (_Handsontable$editors14 = Handsontable__default["default"].editors.BaseEditor.prototype.isOpened).call.apply(_Handsontable$editors14, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "isWaiting",
-    value: function isWaiting() {
-      var _Handsontable$editors15;
-      for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
-        args[_key15] = arguments[_key15];
-      }
-      return (_Handsontable$editors15 = Handsontable__default["default"].editors.BaseEditor.prototype.isWaiting).call.apply(_Handsontable$editors15, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "open",
-    value: function open() {
-      var _Handsontable$editors16;
-      for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
-        args[_key16] = arguments[_key16];
-      }
-      return (_Handsontable$editors16 = Handsontable__default["default"].editors.BaseEditor.prototype.open).call.apply(_Handsontable$editors16, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "prepare",
-    value: function prepare(row, col, prop, TD, originalValue, cellProperties) {
-      this.hotInstance = cellProperties.instance;
-      this.row = row;
-      this.col = col;
-      this.prop = prop;
-      this.TD = TD;
-      this.originalValue = originalValue;
-      this.cellProperties = cellProperties;
-      return Handsontable__default["default"].editors.BaseEditor.prototype.prepare.call(this.hotCustomEditorInstance, row, col, prop, TD, originalValue, cellProperties);
-    }
-  }, {
-    key: "saveValue",
-    value: function saveValue() {
-      var _Handsontable$editors17;
-      for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
-        args[_key17] = arguments[_key17];
-      }
-      return (_Handsontable$editors17 = Handsontable__default["default"].editors.BaseEditor.prototype.saveValue).call.apply(_Handsontable$editors17, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "setValue",
-    value: function setValue() {
-      var _Handsontable$editors18;
-      for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
-        args[_key18] = arguments[_key18];
-      }
-      return (_Handsontable$editors18 = Handsontable__default["default"].editors.BaseEditor.prototype.setValue).call.apply(_Handsontable$editors18, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "addHook",
-    value: function addHook() {
-      var _Handsontable$editors19;
-      for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
-        args[_key19] = arguments[_key19];
-      }
-      return (_Handsontable$editors19 = Handsontable__default["default"].editors.BaseEditor.prototype.addHook).call.apply(_Handsontable$editors19, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "removeHooksByKey",
-    value: function removeHooksByKey() {
-      var _Handsontable$editors20;
-      for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
-        args[_key20] = arguments[_key20];
-      }
-      return (_Handsontable$editors20 = Handsontable__default["default"].editors.BaseEditor.prototype.removeHooksByKey).call.apply(_Handsontable$editors20, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "clearHooks",
-    value: function clearHooks() {
-      var _Handsontable$editors21;
-      for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
-        args[_key21] = arguments[_key21];
-      }
-      return (_Handsontable$editors21 = Handsontable__default["default"].editors.BaseEditor.prototype.clearHooks).call.apply(_Handsontable$editors21, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "getEditedCell",
-    value: function getEditedCell() {
-      var _Handsontable$editors22;
-      for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
-        args[_key22] = arguments[_key22];
-      }
-      return (_Handsontable$editors22 = Handsontable__default["default"].editors.BaseEditor.prototype.getEditedCell).call.apply(_Handsontable$editors22, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "getEditedCellRect",
-    value: function getEditedCellRect() {
-      var _Handsontable$editors23;
-      for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
-        args[_key23] = arguments[_key23];
-      }
-      return (_Handsontable$editors23 = Handsontable__default["default"].editors.BaseEditor.prototype.getEditedCellRect).call.apply(_Handsontable$editors23, [this.hotCustomEditorInstance].concat(args));
-    }
-  }, {
-    key: "getEditedCellsZIndex",
-    value: function getEditedCellsZIndex() {
-      var _Handsontable$editors24;
-      for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
-        args[_key24] = arguments[_key24];
-      }
-      return (_Handsontable$editors24 = Handsontable__default["default"].editors.BaseEditor.prototype.getEditedCellsZIndex).call.apply(_Handsontable$editors24, [this.hotCustomEditorInstance].concat(args));
-    }
-  }]);
-}(React__default["default"].Component);
+/**
+ * Package version.
+ *
+ * @returns The version number of the package.
+ */
+HotTable.version = version;
 
-exports.BaseEditorComponent = BaseEditorComponent;
 exports.HotColumn = HotColumn;
 exports.HotTable = HotTable;
-exports.HotTableClass = HotTableClass;
 exports["default"] = HotTable;
+exports.isHotColumn = isHotColumn;
+exports.useHotEditor = useHotEditor;