@handsontable/react-wrapper 17.1.0-rc9 → 18.0.0-rc1

package/README.md

@@ -56,9 +56,6 @@
 &nbsp;&nbsp;✅&nbsp; [Hiding columns](https://handsontable.com/docs/react-data-grid/column-hiding/) <br>
 &nbsp;&nbsp;✅&nbsp; [Right-click context menu](https://handsontable.com/docs/react-data-grid/context-menu/) <br>
 &nbsp;&nbsp;✅&nbsp; [Row pagination](https://handsontable.com/docs/react-data-grid/rows-pagination/) <br>
-&nbsp;&nbsp;✅&nbsp; [Server-side data](https://handsontable.com/docs/react-data-grid/server-side-data/) <br>
-&nbsp;&nbsp;✅&nbsp; [Notifications](https://handsontable.com/docs/react-data-grid/notification/) <br>
-&nbsp;&nbsp;✅&nbsp; [Export to Excel](https://handsontable.com/docs/react-data-grid/export-to-excel/) <br>
 
 <div id="installation">
 

package/commonjs/react-handsontable.js

@@ -186,7 +186,7 @@ function _toPrimitive(t, r) {
     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");
@@ -355,11 +355,18 @@ function createPortal(rElement) {
   if (!ownerDocument) {
     ownerDocument = document;
   }
-  if (!bulkComponentContainer) {
-    bulkComponentContainer = ownerDocument.createDocumentFragment();
+  var portalContainer = cachedContainer;
+
+  // A new container needs an anchor before React mounts into it. A cached
+  // container is already attached (typically inside its TD) and must be
+  // left in place to avoid wiping the DOM on every grid render.
+  if (!portalContainer) {
+    if (!bulkComponentContainer) {
+      bulkComponentContainer = ownerDocument.createDocumentFragment();
+    }
+    portalContainer = ownerDocument.createElement('DIV');
+    bulkComponentContainer.appendChild(portalContainer);
   }
-  var portalContainer = cachedContainer !== null && cachedContainer !== void 0 ? cachedContainer : ownerDocument.createElement('DIV');
-  bulkComponentContainer.appendChild(portalContainer);
   return {
     portal: /*#__PURE__*/ReactDOM__default["default"].createPortal(rElement, portalContainer, portalKey),
     portalContainer: portalContainer
@@ -535,6 +542,9 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
   var setHotColumnSettings = React.useCallback(function (columnSettings, columnIndex) {
     columnsSettings.current[columnIndex] = columnSettings;
   }, []);
+  var trimColumnSettings = React.useCallback(function (length) {
+    columnsSettings.current.length = length;
+  }, []);
   var componentRendererColumns = React.useRef(new Map());
   var renderedCellCache = React.useRef(new Map());
   var clearRenderedCellCache = React.useCallback(function () {
@@ -553,38 +563,36 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
       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 = /*#__PURE__*/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);
+        // When the cached portal container is still attached to the same
+        // TD as the previous render, the DOM is already correct and must
+        // not be wiped. Wiping detaches the React-managed children, which
+        // forces a full remount of the renderer component on every grid
+        // render (see issue #10800).
+        var containerInPlace = !!cachedPortalContainer && cachedPortalContainer.parentNode === TD;
+        var rendererElement = /*#__PURE__*/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;
+        if (!containerInPlace) {
+          while (TD.firstChild) {
+            TD.removeChild(TD.firstChild);
+          }
           TD.appendChild(portalContainer);
-          portalCache.current.set(portalKey, portal);
         }
+        portalContainerCache.current.set(portalContainerKey, portalContainer);
+        portalCache.current.set(portalKey, portal);
       }
-      renderedCellCache.current.set("".concat(row, "-").concat(col), TD);
+      renderedCellCache.current.set(key, TD);
       return TD;
     };
   }, []);
@@ -602,13 +610,14 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
       componentRendererColumns: componentRendererColumns.current,
       columnsSettings: columnsSettings.current,
       emitColumnSettings: setHotColumnSettings,
+      trimColumnSettings: trimColumnSettings,
       getRendererWrapper: getRendererWrapper,
       clearPortalCache: clearPortalCache,
       clearRenderedCellCache: clearRenderedCellCache,
       setRenderersPortalManagerRef: setRenderersPortalManagerRef,
       pushCellPortalsIntoPortalManager: pushCellPortalsIntoPortalManager
     };
-  }, [setHotColumnSettings, getRendererWrapper, clearRenderedCellCache, setRenderersPortalManagerRef, pushCellPortalsIntoPortalManager]);
+  }, [setHotColumnSettings, trimColumnSettings, getRendererWrapper, clearRenderedCellCache, setRenderersPortalManagerRef, pushCellPortalsIntoPortalManager]);
   return /*#__PURE__*/React__default["default"].createElement(HotTableContext.Provider, {
     value: contextImpl
   }, children);
@@ -677,11 +686,12 @@ function makeEditorClass(hooksRef, instanceRef) {
             args[_key] = arguments[_key];
           }
           if (!AbstractMethods.includes(propName)) {
-            result = baseMethod.call.apply(baseMethod, [this].concat(args)); // call super
+            var _ref;
+            result = (_ref = baseMethod).call.apply(_ref, [this].concat(args)); // call super
           }
           if (MethodsMap[propName] && (_hooksRef$current = hooksRef.current) !== null && _hooksRef$current !== void 0 && _hooksRef$current[MethodsMap[propName]]) {
-            var _ref;
-            result = (_ref = hooksRef.current[MethodsMap[propName]]).call.apply(_ref, [this].concat(args));
+            var _ref2;
+            result = (_ref2 = hooksRef.current[MethodsMap[propName]]).call.apply(_ref2, [this].concat(args));
           }
           return result;
         }.bind(_this);
@@ -722,10 +732,10 @@ var EditorContext = /*#__PURE__*/React.createContext(undefined);
  * @param {Ref} hooksRef Reference for component-based editor overridden hooks object.
  * @param {RefObject} hotCustomEditorInstanceRef  Reference to Handsontable-native editor instance.
  */
-var EditorContextProvider = function EditorContextProvider(_ref2) {
-  var hooksRef = _ref2.hooksRef,
-    hotCustomEditorInstanceRef = _ref2.hotCustomEditorInstanceRef,
-    children = _ref2.children;
+var EditorContextProvider = function EditorContextProvider(_ref3) {
+  var hooksRef = _ref3.hooksRef,
+    hotCustomEditorInstanceRef = _ref3.hotCustomEditorInstanceRef,
+    children = _ref3.children;
   return /*#__PURE__*/React__default["default"].createElement(EditorContext.Provider, {
     value: {
       hooksRef: hooksRef,
@@ -794,9 +804,9 @@ function applyEditorPosition(el, editor, hot, td) {
  * @returns {UseHotEditorImpl} Editor API methods
  */
 function useHotEditor(overriddenHooks, deps) {
-  var _ref3 = React.useContext(EditorContext),
-    hooksRef = _ref3.hooksRef,
-    hotCustomEditorInstanceRef = _ref3.hotCustomEditorInstanceRef;
+  var _ref4 = React.useContext(EditorContext),
+    hooksRef = _ref4.hooksRef,
+    hotCustomEditorInstanceRef = _ref4.hotCustomEditorInstanceRef;
   var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     rerenderTrigger = _useState2[0],
@@ -840,11 +850,13 @@ function useHotEditor(overriddenHooks, deps) {
       },
       get row() {
         var _hotCustomEditorInsta6;
-        return (_hotCustomEditorInsta6 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta6 === void 0 ? void 0 : _hotCustomEditorInsta6.row;
+        var row = (_hotCustomEditorInsta6 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta6 === void 0 ? void 0 : _hotCustomEditorInsta6.row;
+        return row !== null && row !== void 0 ? row : undefined;
       },
       get col() {
         var _hotCustomEditorInsta7;
-        return (_hotCustomEditorInsta7 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta7 === void 0 ? void 0 : _hotCustomEditorInsta7.col;
+        var col = (_hotCustomEditorInsta7 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta7 === void 0 ? void 0 : _hotCustomEditorInsta7.col;
+        return col !== null && col !== void 0 ? col : undefined;
       }
     };
   }, [rerenderTrigger, hotCustomEditorInstanceRef, deferredValue]);
@@ -854,23 +866,23 @@ function useHotEditor(overriddenHooks, deps) {
 
 // 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;
+function EditorComponent(_ref5) {
+  var _onPrepare = _ref5.onPrepare,
+    _onClose = _ref5.onClose,
+    _onOpen = _ref5.onOpen,
+    _onFocus = _ref5.onFocus,
+    children = _ref5.children,
+    _ref5$shortcutsGroup = _ref5.shortcutsGroup,
+    shortcutsGroup = _ref5$shortcutsGroup === void 0 ? "custom-editor" : _ref5$shortcutsGroup,
+    shortcuts = _ref5.shortcuts;
   var mainElementRef = React.useRef(null);
   var currentValue = React.useRef(undefined);
   var _useState5 = React.useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     themeClassName = _useState6[0],
     setThemeClassName = _useState6[1];
-  var _ref5 = React.useContext(EditorContext),
-    hotCustomEditorInstanceRef = _ref5.hotCustomEditorInstanceRef;
+  var _ref6 = React.useContext(EditorContext),
+    hotCustomEditorInstanceRef = _ref6.hotCustomEditorInstanceRef;
   var registerShortcuts = React.useCallback(function () {
     var _hotCustomEditorInsta8, _hotCustomEditorInsta9, _hotCustomEditorInsta0;
     if (!((_hotCustomEditorInsta8 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta8 !== void 0 && _hotCustomEditorInsta8.hot)) return;
@@ -1074,7 +1086,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="17.1.0-rc9";
+var version="18.0.0-rc1";
 
 /**
  * Component used to manage the renderer component portals.
@@ -2330,6 +2342,12 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * Initialize Handsontable after the component has mounted.
    */
   React.useEffect(function () {
+    // React guarantees child effects run before parent effects on each
+    // commit, so by the time this parent useEffect runs, every HotColumn
+    // has already written its slot. Trim to drop any leftover slots from
+    // a previous mount (e.g. StrictMode's double-invoke or HMR).
+    var hotColumnCount = React.Children.toArray(props.children).filter(isHotColumn).length;
+    context.trimColumnSettings(hotColumnCount);
     var newGlobalSettings = createNewGlobalSettings(true);
 
     // Update prevProps with the current props
@@ -2372,6 +2390,13 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useUpdateEffect(function () {
     clearCache();
     var hotInstance = getHotInstance();
+
+    // React guarantees child effects run before parent effects on each
+    // commit, so by the time this parent useUpdateEffect runs, every
+    // surviving HotColumn has already written its slot. Trim to drop
+    // stale entries left behind by HotColumns that unmounted.
+    var hotColumnCount = React.Children.toArray(props.children).filter(isHotColumn).length;
+    context.trimColumnSettings(hotColumnCount);
     var newGlobalSettings = createNewGlobalSettings(false, prevProps.current);
 
     // Update prevProps with the current props
@@ -2409,7 +2434,11 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
   return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({
     ref: hotElementRef
-  }, containerProps), hotColumnWrapped), /*#__PURE__*/React__default["default"].createElement(RenderersPortalManager, {
+  }, containerProps, {
+    style: _objectSpread2({
+      height: '100%'
+    }, containerProps.style)
+  }), hotColumnWrapped), /*#__PURE__*/React__default["default"].createElement(RenderersPortalManager, {
     ref: context.setRenderersPortalManagerRef
   }), /*#__PURE__*/React__default["default"].createElement(EditorContextProvider, {
     hooksRef: globalEditorHooksRef,

package/dist/react-handsontable.js

@@ -25,7 +25,7 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  * 
- * Version: 17.1.0-rc9 (built at Wed May 13 2026 10:01:45 GMT+0000 (Coordinated Universal Time))
+ * Version: 18.0.0-rc1 (built at Tue Jun 16 2026 10:11:54 GMT+0000 (Coordinated Universal Time))
  */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('handsontable/base'), require('handsontable/renderers/registry'), require('handsontable/editors/registry')) :
@@ -211,7 +211,7 @@ function _toPrimitive(t, r) {
     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");
@@ -380,11 +380,18 @@ function createPortal(rElement) {
   if (!ownerDocument) {
     ownerDocument = document;
   }
-  if (!bulkComponentContainer) {
-    bulkComponentContainer = ownerDocument.createDocumentFragment();
+  var portalContainer = cachedContainer;
+
+  // A new container needs an anchor before React mounts into it. A cached
+  // container is already attached (typically inside its TD) and must be
+  // left in place to avoid wiping the DOM on every grid render.
+  if (!portalContainer) {
+    if (!bulkComponentContainer) {
+      bulkComponentContainer = ownerDocument.createDocumentFragment();
+    }
+    portalContainer = ownerDocument.createElement('DIV');
+    bulkComponentContainer.appendChild(portalContainer);
   }
-  var portalContainer = cachedContainer !== null && cachedContainer !== void 0 ? cachedContainer : ownerDocument.createElement('DIV');
-  bulkComponentContainer.appendChild(portalContainer);
   return {
     portal: /*#__PURE__*/ReactDOM__default["default"].createPortal(rElement, portalContainer, portalKey),
     portalContainer: portalContainer
@@ -560,6 +567,9 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
   var setHotColumnSettings = React.useCallback(function (columnSettings, columnIndex) {
     columnsSettings.current[columnIndex] = columnSettings;
   }, []);
+  var trimColumnSettings = React.useCallback(function (length) {
+    columnsSettings.current.length = length;
+  }, []);
   var componentRendererColumns = React.useRef(new Map());
   var renderedCellCache = React.useRef(new Map());
   var clearRenderedCellCache = React.useCallback(function () {
@@ -578,38 +588,36 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
       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 = /*#__PURE__*/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);
+        // When the cached portal container is still attached to the same
+        // TD as the previous render, the DOM is already correct and must
+        // not be wiped. Wiping detaches the React-managed children, which
+        // forces a full remount of the renderer component on every grid
+        // render (see issue #10800).
+        var containerInPlace = !!cachedPortalContainer && cachedPortalContainer.parentNode === TD;
+        var rendererElement = /*#__PURE__*/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;
+        if (!containerInPlace) {
+          while (TD.firstChild) {
+            TD.removeChild(TD.firstChild);
+          }
           TD.appendChild(portalContainer);
-          portalCache.current.set(portalKey, portal);
         }
+        portalContainerCache.current.set(portalContainerKey, portalContainer);
+        portalCache.current.set(portalKey, portal);
       }
-      renderedCellCache.current.set("".concat(row, "-").concat(col), TD);
+      renderedCellCache.current.set(key, TD);
       return TD;
     };
   }, []);
@@ -627,13 +635,14 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
       componentRendererColumns: componentRendererColumns.current,
       columnsSettings: columnsSettings.current,
       emitColumnSettings: setHotColumnSettings,
+      trimColumnSettings: trimColumnSettings,
       getRendererWrapper: getRendererWrapper,
       clearPortalCache: clearPortalCache,
       clearRenderedCellCache: clearRenderedCellCache,
       setRenderersPortalManagerRef: setRenderersPortalManagerRef,
       pushCellPortalsIntoPortalManager: pushCellPortalsIntoPortalManager
     };
-  }, [setHotColumnSettings, getRendererWrapper, clearRenderedCellCache, setRenderersPortalManagerRef, pushCellPortalsIntoPortalManager]);
+  }, [setHotColumnSettings, trimColumnSettings, getRendererWrapper, clearRenderedCellCache, setRenderersPortalManagerRef, pushCellPortalsIntoPortalManager]);
   return /*#__PURE__*/React__default["default"].createElement(HotTableContext.Provider, {
     value: contextImpl
   }, children);
@@ -702,11 +711,12 @@ function makeEditorClass(hooksRef, instanceRef) {
             args[_key] = arguments[_key];
           }
           if (!AbstractMethods.includes(propName)) {
-            result = baseMethod.call.apply(baseMethod, [this].concat(args)); // call super
+            var _ref;
+            result = (_ref = baseMethod).call.apply(_ref, [this].concat(args)); // call super
           }
           if (MethodsMap[propName] && (_hooksRef$current = hooksRef.current) !== null && _hooksRef$current !== void 0 && _hooksRef$current[MethodsMap[propName]]) {
-            var _ref;
-            result = (_ref = hooksRef.current[MethodsMap[propName]]).call.apply(_ref, [this].concat(args));
+            var _ref2;
+            result = (_ref2 = hooksRef.current[MethodsMap[propName]]).call.apply(_ref2, [this].concat(args));
           }
           return result;
         }.bind(_this);
@@ -747,10 +757,10 @@ var EditorContext = /*#__PURE__*/React.createContext(undefined);
  * @param {Ref} hooksRef Reference for component-based editor overridden hooks object.
  * @param {RefObject} hotCustomEditorInstanceRef  Reference to Handsontable-native editor instance.
  */
-var EditorContextProvider = function EditorContextProvider(_ref2) {
-  var hooksRef = _ref2.hooksRef,
-    hotCustomEditorInstanceRef = _ref2.hotCustomEditorInstanceRef,
-    children = _ref2.children;
+var EditorContextProvider = function EditorContextProvider(_ref3) {
+  var hooksRef = _ref3.hooksRef,
+    hotCustomEditorInstanceRef = _ref3.hotCustomEditorInstanceRef,
+    children = _ref3.children;
   return /*#__PURE__*/React__default["default"].createElement(EditorContext.Provider, {
     value: {
       hooksRef: hooksRef,
@@ -819,9 +829,9 @@ function applyEditorPosition(el, editor, hot, td) {
  * @returns {UseHotEditorImpl} Editor API methods
  */
 function useHotEditor(overriddenHooks, deps) {
-  var _ref3 = React.useContext(EditorContext),
-    hooksRef = _ref3.hooksRef,
-    hotCustomEditorInstanceRef = _ref3.hotCustomEditorInstanceRef;
+  var _ref4 = React.useContext(EditorContext),
+    hooksRef = _ref4.hooksRef,
+    hotCustomEditorInstanceRef = _ref4.hotCustomEditorInstanceRef;
   var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     rerenderTrigger = _useState2[0],
@@ -865,11 +875,13 @@ function useHotEditor(overriddenHooks, deps) {
       },
       get row() {
         var _hotCustomEditorInsta6;
-        return (_hotCustomEditorInsta6 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta6 === void 0 ? void 0 : _hotCustomEditorInsta6.row;
+        var row = (_hotCustomEditorInsta6 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta6 === void 0 ? void 0 : _hotCustomEditorInsta6.row;
+        return row !== null && row !== void 0 ? row : undefined;
       },
       get col() {
         var _hotCustomEditorInsta7;
-        return (_hotCustomEditorInsta7 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta7 === void 0 ? void 0 : _hotCustomEditorInsta7.col;
+        var col = (_hotCustomEditorInsta7 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta7 === void 0 ? void 0 : _hotCustomEditorInsta7.col;
+        return col !== null && col !== void 0 ? col : undefined;
       }
     };
   }, [rerenderTrigger, hotCustomEditorInstanceRef, deferredValue]);
@@ -879,23 +891,23 @@ function useHotEditor(overriddenHooks, deps) {
 
 // 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;
+function EditorComponent(_ref5) {
+  var _onPrepare = _ref5.onPrepare,
+    _onClose = _ref5.onClose,
+    _onOpen = _ref5.onOpen,
+    _onFocus = _ref5.onFocus,
+    children = _ref5.children,
+    _ref5$shortcutsGroup = _ref5.shortcutsGroup,
+    shortcutsGroup = _ref5$shortcutsGroup === void 0 ? "custom-editor" : _ref5$shortcutsGroup,
+    shortcuts = _ref5.shortcuts;
   var mainElementRef = React.useRef(null);
   var currentValue = React.useRef(undefined);
   var _useState5 = React.useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     themeClassName = _useState6[0],
     setThemeClassName = _useState6[1];
-  var _ref5 = React.useContext(EditorContext),
-    hotCustomEditorInstanceRef = _ref5.hotCustomEditorInstanceRef;
+  var _ref6 = React.useContext(EditorContext),
+    hotCustomEditorInstanceRef = _ref6.hotCustomEditorInstanceRef;
   var registerShortcuts = React.useCallback(function () {
     var _hotCustomEditorInsta8, _hotCustomEditorInsta9, _hotCustomEditorInsta0;
     if (!((_hotCustomEditorInsta8 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta8 !== void 0 && _hotCustomEditorInsta8.hot)) return;
@@ -1099,7 +1111,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="17.1.0-rc9";
+var version="18.0.0-rc1";
 
 /**
  * Component used to manage the renderer component portals.
@@ -1328,6 +1340,12 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * Initialize Handsontable after the component has mounted.
    */
   React.useEffect(function () {
+    // React guarantees child effects run before parent effects on each
+    // commit, so by the time this parent useEffect runs, every HotColumn
+    // has already written its slot. Trim to drop any leftover slots from
+    // a previous mount (e.g. StrictMode's double-invoke or HMR).
+    var hotColumnCount = React.Children.toArray(props.children).filter(isHotColumn).length;
+    context.trimColumnSettings(hotColumnCount);
     var newGlobalSettings = createNewGlobalSettings(true);
 
     // Update prevProps with the current props
@@ -1370,6 +1388,13 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useUpdateEffect(function () {
     clearCache();
     var hotInstance = getHotInstance();
+
+    // React guarantees child effects run before parent effects on each
+    // commit, so by the time this parent useUpdateEffect runs, every
+    // surviving HotColumn has already written its slot. Trim to drop
+    // stale entries left behind by HotColumns that unmounted.
+    var hotColumnCount = React.Children.toArray(props.children).filter(isHotColumn).length;
+    context.trimColumnSettings(hotColumnCount);
     var newGlobalSettings = createNewGlobalSettings(false, prevProps.current);
 
     // Update prevProps with the current props
@@ -1407,7 +1432,11 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
   return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({
     ref: hotElementRef
-  }, containerProps), hotColumnWrapped), /*#__PURE__*/React__default["default"].createElement(RenderersPortalManager, {
+  }, containerProps, {
+    style: _objectSpread2({
+      height: '100%'
+    }, containerProps.style)
+  }), hotColumnWrapped), /*#__PURE__*/React__default["default"].createElement(RenderersPortalManager, {
     ref: context.setRenderersPortalManagerRef
   }), /*#__PURE__*/React__default["default"].createElement(EditorContextProvider, {
     hooksRef: globalEditorHooksRef,