@handsontable/react-wrapper 17.0.1 → 17.1.0-rc1

package/es/react-handsontable.mjs

@@ -1,193 +1,9 @@
-import React, { useEffect, createContext, useContext, useRef, useCallback, useMemo, useState, useDeferredValue, useImperativeHandle, forwardRef, Fragment, Children, useId } from 'react';
+import React, { useEffect, useContext, createContext, useRef, useCallback, useMemo, useState, useDeferredValue, useImperativeHandle, forwardRef, Fragment, Children, useId } from 'react';
 import ReactDOM from 'react-dom';
 import Handsontable from 'handsontable/base';
 import { getRenderer } from 'handsontable/renderers/registry';
 import { getEditor } from 'handsontable/editors/registry';
 
-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 {ReactNode} children Component children nodes
- * @param {ComponentType} Component Component type to check
- * @returns {boolean} 'true' if the warning was issued
- */
-function displayChildrenOfTypeWarning(children, Component) {
-  var childrenArray = React.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 {ReactNode} children Component children nodes
- * @returns {boolean} 'true' if the warning was issued
- */
-function displayAnyChildrenWarning(children) {
-  var childrenArray = React.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 {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.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 {ComponentType} Editor Editor component or render function.
- * @returns {ReactPortal} The portal for the editor.
- */
-function createEditorPortal(doc, Editor) {
-  if (!doc || !Editor || typeof Editor === 'boolean') {
-    return null;
-  }
-  var editorElement = React.createElement(Editor, null);
-  var containerProps = getContainerAttributesProps({}, false);
-  containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
-  return ReactDOM.createPortal(React.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: 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.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 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.useRef(false);
-  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];
@@ -228,6 +44,15 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 function _getPrototypeOf(t) {
   return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
     return t.__proto__ || Object.getPrototypeOf(t);
@@ -374,6 +199,281 @@ 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.';
+
+/**
+ * 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 {ReactNode} children Component children nodes
+ * @param {ComponentType} Component Component type to check
+ * @returns {boolean} 'true' if the warning was issued
+ */
+function displayChildrenOfTypeWarning(children, Component) {
+  var childrenArray = React.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 {ReactNode} children Component children nodes
+ * @returns {boolean} 'true' if the warning was issued
+ */
+function displayAnyChildrenWarning(children) {
+  var childrenArray = React.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 {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.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 {ComponentType} Editor Editor component or render function.
+ * @returns {ReactPortal} The portal for the editor.
+ */
+function createEditorPortal(doc, Editor) {
+  if (!doc || !Editor || typeof Editor === 'boolean') {
+    return null;
+  }
+  var editorElement = /*#__PURE__*/React.createElement(Editor, null);
+  var containerProps = getContainerAttributesProps({}, false);
+  containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
+  return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", 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: 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: /*#__PURE__*/ReactDOM.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';
+}
+function isObjectLike(value) {
+  return _typeof(value) === 'object' && value !== null;
+}
+function isPlainObject(value) {
+  if (!isObjectLike(value)) {
+    return false;
+  }
+  var prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+
+/**
+ * Deep-compare plain objects and arrays used by wrapper settings.
+ *
+ * @param {unknown} previousValue Previous value.
+ * @param {unknown} currentValue Current value.
+ * @returns {boolean} `true` if values are equivalent.
+ */
+function areEquivalentSettingsValue(previousValue, currentValue) {
+  if (previousValue === currentValue) {
+    return true;
+  }
+  if (previousValue instanceof RegExp || currentValue instanceof RegExp) {
+    if (!(previousValue instanceof RegExp) || !(currentValue instanceof RegExp)) {
+      return false;
+    }
+    return previousValue.source === currentValue.source && previousValue.flags === currentValue.flags;
+  }
+  if (isArray(previousValue) && isArray(currentValue)) {
+    if (previousValue.length !== currentValue.length) {
+      return false;
+    }
+    for (var index = 0; index < previousValue.length; index++) {
+      if (!areEquivalentSettingsValue(previousValue[index], currentValue[index])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isArray(previousValue) || isArray(currentValue)) {
+    return false;
+  }
+  if (!isObjectLike(previousValue) || !isObjectLike(currentValue)) {
+    return false;
+  }
+  if (!isPlainObject(previousValue) || !isPlainObject(currentValue)) {
+    return false;
+  }
+  var previousKeys = Object.keys(previousValue);
+  var currentKeys = Object.keys(currentValue);
+  if (previousKeys.length !== currentKeys.length) {
+    return false;
+  }
+  for (var _i = 0, _previousKeys = previousKeys; _i < _previousKeys.length; _i++) {
+    var key = _previousKeys[_i];
+    if (!Object.prototype.hasOwnProperty.call(currentValue, key)) {
+      return false;
+    }
+    if (!areEquivalentSettingsValue(previousValue[key], currentValue[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * A variant of 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.useRef(false);
+  useEffect(function () {
+    if (notInitialRender.current) {
+      return effect();
+    } else {
+      notInitialRender.current = true;
+    }
+  }, deps);
+}
+
+/**
+ * Only `dataSchema` and `columns` use deep comparison when diffing props for `updateSettings(false)`.
+ * Other object settings (for example `mergeCells`, `cell`, `nestedHeaders`, hooks) stay on strict
+ * reference equality so we avoid expensive deep walks and accidental false positives where functions
+ * or class instances would not compare meaningfully by keys alone.
+ */
+var DEEP_COMPARABLE_SETTINGS = ['dataSchema', 'columns'];
 var SettingsMapper = /*#__PURE__*/function () {
   function SettingsMapper() {
     _classCallCheck(this, SettingsMapper);
@@ -381,14 +481,14 @@ var SettingsMapper = /*#__PURE__*/function () {
   return _createClass(SettingsMapper, null, [{
     key: "getSettings",
     value:
-    /**
-     * Parse component settings into Handsontable-compatible settings.
-     *
-     * @param {Object} properties Object containing properties from the HotTable object.
-     * @param {Object} additionalSettings Additional settings.
-     * @param {boolean} additionalSettings.isInit Flag determining whether the settings are being set during initialization.
-     * @param {string[]} additionalSettings.initOnlySettingKeys Array of keys that can be set only during initialization.
-     * @returns {Object} Handsontable-compatible settings object.
+    /**
+     * Parse component settings into Handsontable-compatible settings.
+     *
+     * @param {Object} properties Object containing properties from the HotTable object.
+     * @param {Object} additionalSettings Additional settings.
+     * @param {boolean} additionalSettings.isInit Flag determining whether the settings are being set during initialization.
+     * @param {string[]} additionalSettings.initOnlySettingKeys Array of keys that can be set only during initialization.
+     * @returns {Object} Handsontable-compatible settings object.
      */
     function getSettings(properties) {
       var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -399,9 +499,11 @@ var SettingsMapper = /*#__PURE__*/function () {
         _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 && DEEP_COMPARABLE_SETTINGS.includes(key)) {
+          return areEquivalentSettingsValue(prevProps[key], properties[key]);
+        }
         if (!isInit && initOnlySettingKeys.includes(key)) {
-          return prevProps[key] === properties[key];
+          return true;
         }
         return false;
       };
@@ -416,7 +518,7 @@ var SettingsMapper = /*#__PURE__*/function () {
   }]);
 }();
 
-var HotTableContext = createContext(undefined);
+var HotTableContext = /*#__PURE__*/createContext(undefined);
 var HotTableContextProvider = function HotTableContextProvider(_ref) {
   var children = _ref.children;
   var columnsSettings = useRef([]);
@@ -436,6 +538,7 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
   var getRendererWrapper = 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);
@@ -449,11 +552,12 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
         while (TD.firstChild) {
           TD.removeChild(TD.firstChild);
         }
+
         // if portal already exists, do not recreate
         if (cachedPortal && cachedPortalContainer) {
           TD.appendChild(cachedPortalContainer);
         } else {
-          var rendererElement = React.createElement(Renderer, {
+          var rendererElement = /*#__PURE__*/React.createElement(Renderer, {
             instance: instance,
             TD: TD,
             row: row,
@@ -495,20 +599,21 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
       pushCellPortalsIntoPortalManager: pushCellPortalsIntoPortalManager
     };
   }, [setHotColumnSettings, getRendererWrapper, clearRenderedCellCache, setRenderersPortalManagerRef, pushCellPortalsIntoPortalManager]);
-  return React.createElement(HotTableContext.Provider, {
+  return /*#__PURE__*/React.createElement(HotTableContext.Provider, {
     value: contextImpl
   }, children);
 };
-/**
- * Exposes the table context object to components
- *
- * @returns HotTableContext
+
+/**
+ * Exposes the table context object to components
+ *
+ * @returns HotTableContext
  */
 function useHotTableContext() {
   return useContext(HotTableContext);
 }
 
-var HotColumnContext = createContext(undefined);
+var HotColumnContext = /*#__PURE__*/createContext(undefined);
 var HotColumnContextProvider = function HotColumnContextProvider(_ref) {
   var columnIndex = _ref.columnIndex,
     getOwnerDocument = _ref.getOwnerDocument,
@@ -519,7 +624,7 @@ var HotColumnContextProvider = function HotColumnContextProvider(_ref) {
       getOwnerDocument: getOwnerDocument
     };
   }, [columnIndex, getOwnerDocument]);
-  return React.createElement(HotColumnContext.Provider, {
+  return /*#__PURE__*/React.createElement(HotColumnContext.Provider, {
     value: contextImpl
   }, children);
 };
@@ -535,12 +640,13 @@ var MethodsMap = {
   prepare: 'onPrepare',
   focus: 'onFocus'
 };
-/**
- * Create a class to be passed to the Handsontable's settings.
- *
- * @param {RefObject<HotEditorHooks>} hooksRef Reference to component-based editor overridden hooks object.
- * @param {RefObject} instanceRef Reference to Handsontable-native custom editor class instance.
- * @returns {Function} A class to be passed to the Handsontable editor settings.
+
+/**
+ * Create a class to be passed to the Handsontable's settings.
+ *
+ * @param {RefObject<HotEditorHooks>} hooksRef Reference to component-based editor overridden hooks object.
+ * @param {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) {
@@ -564,8 +670,8 @@ function makeEditorClass(hooksRef, instanceRef) {
             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));
+            var _ref;
+            result = (_ref = hooksRef.current[MethodsMap[propName]]).call.apply(_ref, [this].concat(args));
           }
           return result;
         }.bind(_this);
@@ -595,31 +701,31 @@ function makeEditorClass(hooksRef, instanceRef) {
     }]);
   }(Handsontable.editors.BaseEditor);
 }
-/**
- * Context to provide Handsontable-native custom editor class instance to overridden hooks object.
+/**
+ * Context to provide Handsontable-native custom editor class instance to overridden hooks object.
  */
-var EditorContext = createContext(undefined);
-/**
- * Provider of the context that exposes Handsontable-native editor instance and passes hooks object
- * for custom editor components.
- *
- * @param {Ref} hooksRef Reference for component-based editor overridden hooks object.
- * @param {RefObject} hotCustomEditorInstanceRef  Reference to Handsontable-native editor instance.
+var EditorContext = /*#__PURE__*/createContext(undefined);
+/**
+ * Provider of the context that exposes Handsontable-native editor instance and passes hooks object
+ * for custom editor components.
+ *
+ * @param {Ref} hooksRef Reference for component-based editor overridden hooks object.
+ * @param {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.createElement(EditorContext.Provider, {
+var EditorContextProvider = function EditorContextProvider(_ref2) {
+  var hooksRef = _ref2.hooksRef,
+    hotCustomEditorInstanceRef = _ref2.hotCustomEditorInstanceRef,
+    children = _ref2.children;
+  return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       hooksRef: hooksRef,
       hotCustomEditorInstanceRef: hotCustomEditorInstanceRef
     }
   }, children);
 };
-/**
- * Applies editor overlay position/dimensions to an element.
- * @returns true if position was applied, false if editor should close (e.g. cell no longer available).
+/**
+ * Applies editor overlay position/dimensions to an element.
+ * @returns true if position was applied, false if editor should close (e.g. cell no longer available).
  */
 function applyEditorPosition(el, editor, hot, td) {
   var _rootWindow$pageXOffs, _rootWindow$pageYOffs;
@@ -669,17 +775,18 @@ function applyEditorPosition(el, editor, hot, td) {
   }
   return false;
 }
-/**
- * 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 {DependencyList} deps Overridden hooks object React dependency list.
- * @returns {UseHotEditorImpl} Editor API methods
+
+/**
+ * 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 {DependencyList} deps Overridden hooks object React dependency list.
+ * @returns {UseHotEditorImpl} Editor API methods
  */
 function useHotEditor(overriddenHooks, deps) {
-  var _useContext = useContext(EditorContext),
-    hooksRef = _useContext.hooksRef,
-    hotCustomEditorInstanceRef = _useContext.hotCustomEditorInstanceRef;
+  var _ref3 = useContext(EditorContext),
+    hooksRef = _ref3.hooksRef,
+    hotCustomEditorInstanceRef = _ref3.hotCustomEditorInstanceRef;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     rerenderTrigger = _useState2[0],
@@ -688,6 +795,7 @@ function useHotEditor(overriddenHooks, deps) {
     _useState4 = _slicedToArray(_useState3, 2),
     editorValue = _useState4[0],
     setEditorValue = _useState4[1];
+
   // return a deferred value that allows for optimizing performance by delaying the update of a value until the next render.
   var deferredValue = useDeferredValue(editorValue);
   useImperativeHandle(hooksRef, function () {
@@ -731,23 +839,28 @@ function useHotEditor(overriddenHooks, deps) {
     };
   }, [rerenderTrigger, hotCustomEditorInstanceRef, deferredValue]);
 }
-function EditorComponent(_ref2) {
-  var _onPrepare = _ref2.onPrepare,
-    _onClose = _ref2.onClose,
-    _onOpen = _ref2.onOpen,
-    _onFocus = _ref2.onFocus,
-    children = _ref2.children,
-    _ref2$shortcutsGroup = _ref2.shortcutsGroup,
-    shortcutsGroup = _ref2$shortcutsGroup === void 0 ? "custom-editor" : _ref2$shortcutsGroup,
-    shortcuts = _ref2.shortcuts;
+
+// Render prop function type
+
+// EditorComponent props - children typed to work with JSX syntax
+
+function EditorComponent(_ref4) {
+  var _onPrepare = _ref4.onPrepare,
+    _onClose = _ref4.onClose,
+    _onOpen = _ref4.onOpen,
+    _onFocus = _ref4.onFocus,
+    children = _ref4.children,
+    _ref4$shortcutsGroup = _ref4.shortcutsGroup,
+    shortcutsGroup = _ref4$shortcutsGroup === void 0 ? "custom-editor" : _ref4$shortcutsGroup,
+    shortcuts = _ref4.shortcuts;
   var mainElementRef = useRef(null);
   var currentValue = useRef(undefined);
   var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     themeClassName = _useState6[0],
     setThemeClassName = _useState6[1];
-  var _useContext2 = useContext(EditorContext),
-    hotCustomEditorInstanceRef = _useContext2.hotCustomEditorInstanceRef;
+  var _ref5 = useContext(EditorContext),
+    hotCustomEditorInstanceRef = _ref5.hotCustomEditorInstanceRef;
   var registerShortcuts = useCallback(function () {
     var _hotCustomEditorInsta8, _hotCustomEditorInsta9, _hotCustomEditorInsta0;
     if (!((_hotCustomEditorInsta8 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta8 !== void 0 && _hotCustomEditorInsta8.hot)) return;
@@ -850,7 +963,7 @@ function EditorComponent(_ref2) {
   var stopMousedownPropagation = function stopMousedownPropagation(e) {
     e.stopPropagation();
   };
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: mainElementRef,
     className: themeClassName,
     style: {
@@ -885,22 +998,25 @@ var HotColumn = function HotColumn(props) {
   var _useHotColumnContext = useHotColumnContext(),
     columnIndex = _useHotColumnContext.columnIndex,
     getOwnerDocument = _useHotColumnContext.getOwnerDocument;
-  /**
-   * Reference to component-based editor overridden hooks object.
+
+  /**
+   * Reference to component-based editor overridden hooks object.
    */
   var localEditorHooksRef = useRef(null);
-  /**
-   * Reference to HOT-native custom editor class instance.
+
+  /**
+   * Reference to HOT-native custom editor class instance.
    */
   var localEditorClassInstance = useRef(null);
-  /**
-   * Logic performed after mounting & updating of the HotColumn component.
+
+  /**
+   * Logic performed after mounting & updating of the HotColumn component.
    */
   useEffect(function () {
-    /**
-     * Filter out all the internal properties and return an object with just the Handsontable-related props.
-     *
-     * @returns {Object}
+    /**
+     * Filter out all the internal properties and return an object with just the Handsontable-related props.
+     *
+     * @returns {Object}
      */
     var getSettingsProps = function getSettingsProps() {
       return Object.keys(props).filter(function (key) {
@@ -910,8 +1026,9 @@ var HotColumn = function HotColumn(props) {
         return obj;
       }, {});
     };
-    /**
-     * Create the column settings based on the data provided to the `HotColumn` component and its child components.
+
+    /**
+     * Create the column settings based on the data provided to the `HotColumn` component and its child components.
      */
     var createColumnSettings = function createColumnSettings() {
       var columnSettings = SettingsMapper.getSettings(getSettingsProps());
@@ -935,23 +1052,24 @@ var HotColumn = function HotColumn(props) {
     }
   });
   var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
-  /**
-   * Render the portals of the editors, if there are any.
-   *
-   * @returns {ReactElement}
+
+  /**
+   * Render the portals of the editors, if there are any.
+   *
+   * @returns {ReactElement}
    */
-  return React.createElement(EditorContextProvider, {
+  return /*#__PURE__*/React.createElement(EditorContextProvider, {
     hooksRef: localEditorHooksRef,
     hotCustomEditorInstanceRef: localEditorClassInstance
   }, editorPortal);
 };
 
-var version="17.0.1";
+var version="17.1.0-rc1";
 
-/**
- * Component used to manage the renderer component portals.
+/**
+ * Component used to manage the renderer component portals.
  */
-var RenderersPortalManager = forwardRef(function (_, ref) {
+var RenderersPortalManager = /*#__PURE__*/forwardRef(function (_, ref) {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     portals = _useState2[0],
@@ -959,7 +1077,7 @@ var RenderersPortalManager = forwardRef(function (_, ref) {
   useImperativeHandle(ref, function () {
     return setPortals;
   });
-  return React.createElement(Fragment, null, portals);
+  return /*#__PURE__*/React.createElement(Fragment, null, portals);
 });
 
 function getDefaultExportFromCjs (x) {
@@ -2085,33 +2203,39 @@ if (process.env.NODE_ENV !== 'production') {
 var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
-var HotTableInner = forwardRef(function (props, ref) {
-  /**
-   * Reference to the Handsontable instance.
+var HotTableInner = /*#__PURE__*/forwardRef(function (props, ref) {
+  /**
+   * Reference to the Handsontable instance.
    */
   var __hotInstance = useRef(null);
-  /**
-   * Reference to the main Handsontable DOM element.
+
+  /**
+   * Reference to the main Handsontable DOM element.
    */
   var hotElementRef = useRef(null);
-  /**
-   * Reference to component-based editor overridden hooks object.
+
+  /**
+   * Reference to component-based editor overridden hooks object.
    */
   var globalEditorHooksRef = useRef(null);
-  /**
-   * Reference to HOT-native custom editor class instance.
+
+  /**
+   * Reference to HOT-native custom editor class instance.
    */
   var globalEditorClassInstance = useRef(null);
-  /**
-   * Reference to the previous props object.
+
+  /**
+   * Reference to the previous props object.
    */
   var prevProps = useRef();
-  /**
-   * HotTable context exposing helper functions.
+
+  /**
+   * HotTable context exposing helper functions.
    */
   var context = useHotTableContext();
-  /**
-   * Getter for the property storing the Handsontable instance.
+
+  /**
+   * Getter for the property storing the Handsontable instance.
    */
   var getHotInstance = useCallback(function () {
     if (!__hotInstance.current || !__hotInstance.current.isDestroyed) {
@@ -2125,17 +2249,19 @@ var HotTableInner = forwardRef(function (props, ref) {
   var isHotInstanceDestroyed = useCallback(function () {
     return !__hotInstance.current || __hotInstance.current.isDestroyed;
   }, [__hotInstance]);
-  /**
-   * Clear both the editor and the renderer cache.
+
+  /**
+   * Clear both the editor and the renderer cache.
    */
   var clearCache = 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.
+
+  /**
+   * Get the `Document` object corresponding to the main component element.
+   *
+   * @returns The `Document` object used by the component.
    */
   var getOwnerDocument = useCallback(function () {
     if (isCSR()) {
@@ -2143,10 +2269,11 @@ var HotTableInner = forwardRef(function (props, ref) {
     }
     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.
+
+  /**
+   * 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 _getHotInstance;
@@ -2176,8 +2303,9 @@ var HotTableInner = forwardRef(function (props, ref) {
     }
     return newSettings;
   };
-  /**
-   * Detect if `autoRowSize` or `autoColumnSize` is defined, and if so, throw an incompatibility warning.
+
+  /**
+   * Detect if `autoRowSize` or `autoColumnSize` is defined, and if so, throw an incompatibility warning.
    */
   var displayAutoSizeWarning = function displayAutoSizeWarning(hotInstance) {
     var _hotInstance$getPlugi, _hotInstance$getPlugi2;
@@ -2187,23 +2315,27 @@ var HotTableInner = forwardRef(function (props, ref) {
       }
     }
   };
-  /**
-   * Initialize Handsontable after the component has mounted.
+
+  /**
+   * Initialize Handsontable after the component has mounted.
    */
   useEffect(function () {
     var newGlobalSettings = createNewGlobalSettings(true);
+
     // Update prevProps with the current props
     prevProps.current = props;
     __hotInstance.current = new Handsontable.Core(hotElementRef.current, newGlobalSettings);
-    /**
-     * Handsontable's `beforeViewRender` hook callback.
+
+    /**
+     * Handsontable's `beforeViewRender` hook callback.
      */
     __hotInstance.current.addHook('beforeViewRender', function () {
       context.clearPortalCache();
       context.clearRenderedCellCache();
     });
-    /**
-     * Handsontable's `afterViewRender` hook callback.
+
+    /**
+     * Handsontable's `afterViewRender` hook callback.
      */
     __hotInstance.current.addHook('afterViewRender', function () {
       context.pushCellPortalsIntoPortalManager();
@@ -2213,8 +2345,9 @@ var HotTableInner = forwardRef(function (props, ref) {
     if (!displayObsoleteRenderersEditorsWarning(props.children)) {
       displayChildrenOfTypeWarning(props.children, HotColumn);
     }
-    /**
-     * Destroy the Handsontable instance when the parent component unmounts.
+
+    /**
+     * Destroy the Handsontable instance when the parent component unmounts.
      */
     return function () {
       var _getHotInstance2;
@@ -2222,21 +2355,24 @@ var HotTableInner = forwardRef(function (props, ref) {
       (_getHotInstance2 = getHotInstance()) === null || _getHotInstance2 === void 0 || _getHotInstance2.destroy();
     };
   }, []);
-  /**
-   * Logic performed after the component update.
+
+  /**
+   * Logic performed after the component update.
    */
   useUpdateEffect(function () {
     clearCache();
     var hotInstance = getHotInstance();
     var newGlobalSettings = createNewGlobalSettings(false, prevProps.current);
+
     // Update prevProps with the current props
     prevProps.current = props;
     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
+
+  /**
+   * Interface exposed to parent components by HotTable instance via React ref
    */
   useImperativeHandle(ref, function () {
     return {
@@ -2248,11 +2384,12 @@ var HotTableInner = forwardRef(function (props, ref) {
       }
     };
   });
-  /**
-   * Render the component.
+
+  /**
+   * Render the component.
    */
   var hotColumnWrapped = Children.toArray(props.children).filter(isHotColumn).map(function (childNode, columnIndex) {
-    return React.createElement(HotColumnContextProvider, {
+    return /*#__PURE__*/React.createElement(HotColumnContextProvider, {
       columnIndex: columnIndex,
       getOwnerDocument: getOwnerDocument,
       key: columnIndex
@@ -2260,17 +2397,18 @@ var HotTableInner = forwardRef(function (props, ref) {
   });
   var containerProps = getContainerAttributesProps(props);
   var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
-  return React.createElement(Fragment, null, React.createElement("div", Object.assign({
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: hotElementRef
-  }, containerProps), hotColumnWrapped), React.createElement(RenderersPortalManager, {
+  }, containerProps), hotColumnWrapped), /*#__PURE__*/React.createElement(RenderersPortalManager, {
     ref: context.setRenderersPortalManagerRef
-  }), React.createElement(EditorContextProvider, {
+  }), /*#__PURE__*/React.createElement(EditorContextProvider, {
     hooksRef: globalEditorHooksRef,
     hotCustomEditorInstanceRef: globalEditorClassInstance
   }, editorPortal));
 });
-/**
- * Prop types to be checked at runtime.
+
+/**
+ * Prop types to be checked at runtime.
  */
 HotTableInner.propTypes = {
   style: PropTypes.object,
@@ -2279,41 +2417,42 @@ HotTableInner.propTypes = {
 };
 
 var _excluded = ["children"];
-/**
- * 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
- * });
- *
- * ```
+/**
+ * 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 = forwardRef(function (_ref, ref) {
+var HotTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _props$id;
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   var componentId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : useId();
-  return React.createElement(HotTableContextProvider, null, React.createElement(HotTableInner, Object.assign({
+  return /*#__PURE__*/React.createElement(HotTableContextProvider, null, /*#__PURE__*/React.createElement(HotTableInner, _extends({
     id: componentId
   }, props, {
     ref: ref
   }), children));
 });
-/**
- * Package version.
- *
- * @returns The version number of the package.
+
+/**
+ * Package version.
+ *
+ * @returns The version number of the package.
  */
 HotTable.version = version;