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

package/es/react-handsontable.mjs

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, createContext, useRef, useCallback, useMemo, useState, useDeferredValue, useImperativeHandle, forwardRef, Fragment, Children, useId } from 'react';
+import React, { useEffect, useContext, useRef, useCallback, useMemo, createContext, 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';
@@ -176,7 +176,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");
@@ -345,11 +345,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.createPortal(rElement, portalContainer, portalKey),
     portalContainer: portalContainer
@@ -525,6 +532,9 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
   var setHotColumnSettings = useCallback(function (columnSettings, columnIndex) {
     columnsSettings.current[columnIndex] = columnSettings;
   }, []);
+  var trimColumnSettings = useCallback(function (length) {
+    columnsSettings.current.length = length;
+  }, []);
   var componentRendererColumns = useRef(new Map());
   var renderedCellCache = useRef(new Map());
   var clearRenderedCellCache = useCallback(function () {
@@ -543,38 +553,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.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.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;
     };
   }, []);
@@ -592,13 +600,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.createElement(HotTableContext.Provider, {
     value: contextImpl
   }, children);
@@ -667,11 +676,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);
@@ -712,10 +722,10 @@ var EditorContext = /*#__PURE__*/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.createElement(EditorContext.Provider, {
     value: {
       hooksRef: hooksRef,
@@ -784,9 +794,9 @@ function applyEditorPosition(el, editor, hot, td) {
  * @returns {UseHotEditorImpl} Editor API methods
  */
 function useHotEditor(overriddenHooks, deps) {
-  var _ref3 = useContext(EditorContext),
-    hooksRef = _ref3.hooksRef,
-    hotCustomEditorInstanceRef = _ref3.hotCustomEditorInstanceRef;
+  var _ref4 = useContext(EditorContext),
+    hooksRef = _ref4.hooksRef,
+    hotCustomEditorInstanceRef = _ref4.hotCustomEditorInstanceRef;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     rerenderTrigger = _useState2[0],
@@ -830,11 +840,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]);
@@ -844,23 +856,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 = useRef(null);
   var currentValue = useRef(undefined);
   var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     themeClassName = _useState6[0],
     setThemeClassName = _useState6[1];
-  var _ref5 = useContext(EditorContext),
-    hotCustomEditorInstanceRef = _ref5.hotCustomEditorInstanceRef;
+  var _ref6 = useContext(EditorContext),
+    hotCustomEditorInstanceRef = _ref6.hotCustomEditorInstanceRef;
   var registerShortcuts = useCallback(function () {
     var _hotCustomEditorInsta8, _hotCustomEditorInsta9, _hotCustomEditorInsta0;
     if (!((_hotCustomEditorInsta8 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta8 !== void 0 && _hotCustomEditorInsta8.hot)) return;
@@ -1064,7 +1076,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.
@@ -2320,6 +2332,12 @@ var HotTableInner = /*#__PURE__*/forwardRef(function (props, ref) {
    * Initialize Handsontable after the component has mounted.
    */
   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 = Children.toArray(props.children).filter(isHotColumn).length;
+    context.trimColumnSettings(hotColumnCount);
     var newGlobalSettings = createNewGlobalSettings(true);
 
     // Update prevProps with the current props
@@ -2362,6 +2380,13 @@ var HotTableInner = /*#__PURE__*/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 = Children.toArray(props.children).filter(isHotColumn).length;
+    context.trimColumnSettings(hotColumnCount);
     var newGlobalSettings = createNewGlobalSettings(false, prevProps.current);
 
     // Update prevProps with the current props
@@ -2399,7 +2424,11 @@ var HotTableInner = /*#__PURE__*/forwardRef(function (props, ref) {
   var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: hotElementRef
-  }, containerProps), hotColumnWrapped), /*#__PURE__*/React.createElement(RenderersPortalManager, {
+  }, containerProps, {
+    style: _objectSpread2({
+      height: '100%'
+    }, containerProps.style)
+  }), hotColumnWrapped), /*#__PURE__*/React.createElement(RenderersPortalManager, {
     ref: context.setRenderersPortalManagerRef
   }), /*#__PURE__*/React.createElement(EditorContextProvider, {
     hooksRef: globalEditorHooksRef,

package/hotTableContext.d.ts

@@ -19,6 +19,13 @@ export interface HotTableContextImpl {
      * @param {Number} columnIndex Column index.
      */
     readonly emitColumnSettings: (columnSettings: Handsontable.ColumnSettings, columnIndex: number) => void;
+    /**
+     * Trim the column settings array to the given length. Used to drop slots
+     * left over from HotColumn children that have unmounted.
+     *
+     * @param {Number} length Target length for the column settings array.
+     */
+    readonly trimColumnSettings: (length: number) => void;
     /**
      * Return a renderer wrapper function for the provided renderer component.
      *

package/hotTableInner.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { HotTableProps, HotTableRef } from './types';
-declare const HotTableInner: React.ForwardRefExoticComponent<HotTableProps & React.RefAttributes<HotTableRef>>;
+declare const HotTableInner: React.ForwardRefExoticComponent<Pick<HotTableProps, string | number> & React.RefAttributes<HotTableRef>>;
 export default HotTableInner;
 export { HotTableInner };

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@handsontable/react-wrapper",
-  "version": "17.1.0-rc9",
+  "version": "18.0.0-rc1",
   "description": "Best Data Grid for React with Spreadsheet Look and Feel.",
   "author": "Handsoncode <hello@handsoncode.net> (https://handsoncode.net)",
   "homepage": "https://handsontable.com",
   "license": "SEE LICENSE IN LICENSE.txt",
+  "sideEffects": false,
   "main": "./commonjs/react-handsontable.js",
   "module": "./es/react-handsontable.mjs",
   "jsdelivr": "./dist/react-handsontable.min.js",
@@ -72,7 +73,7 @@
     "@types/react-dom": "^18.2.0",
     "@types/react-redux": "^7.1.7",
     "cross-env": "^7.0.3",
-    "handsontable": "^17.0.0",
+    "handsontable": "^18.0.0",
     "jest": "^27.5.1",
     "jest-environment-jsdom": "^27.5.1",
     "prop-types": "^15.7.2",
@@ -87,7 +88,7 @@
     "uglify-js": "^3.4.9"
   },
   "peerDependencies": {
-    "handsontable": "^17.0.0"
+    "handsontable": "^18.0.0"
   },
   "scripts": {
     "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:min && npm run prepare:types",
@@ -107,6 +108,7 @@
   "jest": {
     "testEnvironment": "jsdom",
     "testURL": "http://localhost/",
+    "testTimeout": 60000,
     "transform": {
       "^.+\\.tsx?$": "babel-jest",
       "^.+\\.js$": "babel-jest"

package/types.d.ts

@@ -38,12 +38,17 @@ export interface UseHotEditorImpl<T> {
 }
 /**
  * Helper type to expose GridSettings/ColumnSettings props with native renderers/editors separately
- *  from component-based render prop.
+ * from component-based render prop. Uses conditional types so it works with both GridSettings
+ * and ColumnSettings (ColumnSettings' index signature can make it incompatible with strict Pick<>).
  */
-declare type ReplaceRenderersEditors<T extends Pick<Handsontable.GridSettings, 'renderer' | 'editor'>> = Omit<T, 'renderer' | 'editor'> & {
-    hotRenderer?: T['renderer'];
+declare type ReplaceRenderersEditors<T> = Omit<T, 'renderer' | 'editor'> & {
+    hotRenderer?: T extends {
+        renderer?: infer R;
+    } ? R : never;
     renderer?: ComponentType<HotRendererProps>;
-    hotEditor?: T['editor'];
+    hotEditor?: T extends {
+        editor?: infer E;
+    } ? E : never;
     editor?: ComponentType | boolean;
 };
 /**