@handsontable/react-wrapper 0.0.0-next-21bc714-20260904 → 0.0.0-next-2de1384-20260907

package/commonjs/react-handsontable.js

@@ -246,6 +246,17 @@ var HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component w
  */
 var DEFAULT_CLASSNAME = 'hot-wrapper-editor-container';
 
+/**
+ * Classname for the stable host that holds React editor portals.
+ * Distinct from `DEFAULT_CLASSNAME` so page CSS and `querySelector` do not hit both nodes.
+ */
+var EDITOR_PORTAL_HOST_CLASSNAME = 'hot-wrapper-editor-portal-host';
+
+/**
+ * Warning when the editor portal host cannot be moved into `rootPortalElement`.
+ */
+var MISSING_ROOT_PORTAL_WARNING = 'The React editor portal host could not be attached to `rootPortalElement`. The editor stays on `document.body` and clicks on it may fail to commit.';
+
 /**
  * Logs warn to the console if the `console` object is exposed.
  *
@@ -374,16 +385,17 @@ function resolveEditorSetting(editor, hotEditor) {
  *
  * @param {Document} doc Document to be used.
  * @param {ComponentType} Editor Editor component or render function.
+ * @param {HTMLElement} portalHost Host element to portal into. Required – do not fall back to `doc.body`.
  * @returns {ReactPortal} The portal for the editor.
  */
-function createEditorPortal(doc, Editor) {
-  if (!doc || !Editor || typeof Editor === 'boolean') {
+function createEditorPortal(doc, Editor, portalHost) {
+  if (!doc || !Editor || typeof Editor === 'boolean' || !portalHost) {
     return null;
   }
   var editorElement = /*#__PURE__*/React__default["default"].createElement(Editor, null);
   var containerProps = getContainerAttributesProps({}, false);
   containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
-  return /*#__PURE__*/ReactDOM__default["default"].createPortal(/*#__PURE__*/React__default["default"].createElement("div", containerProps, editorElement), doc.body);
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal(/*#__PURE__*/React__default["default"].createElement("div", containerProps, editorElement), portalHost);
 }
 
 /**
@@ -766,13 +778,15 @@ var HotColumnContext = /*#__PURE__*/React.createContext(undefined);
 var HotColumnContextProvider = function HotColumnContextProvider(_ref) {
   var columnIndex = _ref.columnIndex,
     getOwnerDocument = _ref.getOwnerDocument,
+    getEditorPortalHost = _ref.getEditorPortalHost,
     children = _ref.children;
   var contextImpl = React.useMemo(function () {
     return {
       columnIndex: columnIndex,
-      getOwnerDocument: getOwnerDocument
+      getOwnerDocument: getOwnerDocument,
+      getEditorPortalHost: getEditorPortalHost
     };
-  }, [columnIndex, getOwnerDocument]);
+  }, [columnIndex, getOwnerDocument, getEditorPortalHost]);
   return /*#__PURE__*/React__default["default"].createElement(HotColumnContext.Provider, {
     value: contextImpl
   }, children);
@@ -945,9 +959,6 @@ 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 = React.useDeferredValue(editorValue);
   React.useImperativeHandle(hooksRef, function () {
     return _objectSpread2(_objectSpread2({}, overriddenHooks), {}, {
       onOpen: function onOpen() {
@@ -963,7 +974,7 @@ function useHotEditor(overriddenHooks, deps) {
   return React.useMemo(function () {
     return {
       get value() {
-        return deferredValue;
+        return editorValue;
       },
       setValue: function setValue(newValue) {
         var _hotCustomEditorInsta2;
@@ -989,7 +1000,7 @@ function useHotEditor(overriddenHooks, deps) {
         return col !== null && col !== void 0 ? col : undefined;
       }
     };
-  }, [rerenderTrigger, hotCustomEditorInstanceRef, deferredValue]);
+  }, [rerenderTrigger, hotCustomEditorInstanceRef, editorValue]);
 }
 
 // Render prop function type
@@ -1149,7 +1160,8 @@ var HotColumn = function HotColumn(props) {
     getRendererWrapper = _useHotTableContext.getRendererWrapper;
   var _useHotColumnContext = useHotColumnContext(),
     columnIndex = _useHotColumnContext.columnIndex,
-    getOwnerDocument = _useHotColumnContext.getOwnerDocument;
+    getOwnerDocument = _useHotColumnContext.getOwnerDocument,
+    getEditorPortalHost = _useHotColumnContext.getEditorPortalHost;
 
   /**
    * Reference to component-based editor overridden hooks object.
@@ -1210,7 +1222,7 @@ var HotColumn = function HotColumn(props) {
       displayAnyChildrenWarning(props.children);
     }
   });
-  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
+  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor, getEditorPortalHost());
 
   /**
    * Render the portals of the editors, if there are any.
@@ -1223,7 +1235,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="0.0.0-next-21bc714-20260904";
+var version="0.0.0-next-2de1384-20260907";
 
 /**
  * Component used to manage the renderer component portals.
@@ -2383,6 +2395,12 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var globalEditorClassInstance = React.useRef(null);
 
+  /**
+   * Stable host for React editor portals. Appended to `rootPortalElement` after init
+   * so core treats editor UI as inside the grid (see `#isPathWithinGrid`).
+   */
+  var editorPortalHostRef = React.useRef(null);
+
   /**
    * Reference to the previous props object.
    */
@@ -2429,6 +2447,27 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return null;
   }, [hotElementRef]);
 
+  /**
+   * Get or create the stable editor portal host.
+   *
+   * @returns {HTMLElement | null} The host element, or `null` before a document is available.
+   */
+  var getEditorPortalHost = React.useCallback(function () {
+    var doc = getOwnerDocument();
+    if (!doc) {
+      return null;
+    }
+    if (!editorPortalHostRef.current) {
+      var host = doc.createElement('div');
+      host.className = EDITOR_PORTAL_HOST_CLASSNAME;
+      doc.body.appendChild(host);
+      editorPortalHostRef.current = host;
+    } else if (!editorPortalHostRef.current.isConnected) {
+      doc.body.appendChild(editorPortalHostRef.current);
+    }
+    return editorPortalHostRef.current;
+  }, [getOwnerDocument]);
+
   /**
    * Create a new settings object containing the column settings and global editors and renderers.
    *
@@ -2509,6 +2548,15 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
       context.pushCellPortalsIntoPortalManager();
     });
     __hotInstance.current.init();
+    var portalHost = editorPortalHostRef.current;
+    var rootPortalElement = __hotInstance.current.rootPortalElement;
+    if (portalHost && rootPortalElement) {
+      if (portalHost.parentNode !== rootPortalElement) {
+        rootPortalElement.appendChild(portalHost);
+      }
+    } else if (portalHost && !rootPortalElement) {
+      warn(MISSING_ROOT_PORTAL_WARNING);
+    }
     displayAutoSizeWarning(__hotInstance.current);
     if (!displayObsoleteRenderersEditorsWarning(props.children)) {
       displayChildrenOfTypeWarning(props.children, HotColumn);
@@ -2518,7 +2566,8 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
      * Destroy the Handsontable instance when the parent component unmounts.
      */
     return function () {
-      var _getHotInstance2;
+      var _editorPortalHostRef$, _getHotInstance2;
+      (_editorPortalHostRef$ = editorPortalHostRef.current) === null || _editorPortalHostRef$ === void 0 || _editorPortalHostRef$.remove();
       clearCache();
       (_getHotInstance2 = getHotInstance()) === null || _getHotInstance2 === void 0 || _getHotInstance2.destroy();
     };
@@ -2567,11 +2616,12 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React__default["default"].createElement(HotColumnContextProvider, {
       columnIndex: columnIndex,
       getOwnerDocument: getOwnerDocument,
+      getEditorPortalHost: getEditorPortalHost,
       key: columnIndex
     }, childNode);
   });
   var containerProps = getContainerAttributesProps(props);
-  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
+  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor, getEditorPortalHost());
   return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({
     ref: hotElementRef
   }, containerProps, {

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: 0.0.0-next-21bc714-20260904 (built at Fri Sep 04 2026 08:50:38 GMT+0000 (Coordinated Universal Time))
+ * Version: 0.0.0-next-2de1384-20260907 (built at Mon Sep 07 2026 08:34:29 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')) :
@@ -271,6 +271,17 @@ var HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component w
  */
 var DEFAULT_CLASSNAME = 'hot-wrapper-editor-container';
 
+/**
+ * Classname for the stable host that holds React editor portals.
+ * Distinct from `DEFAULT_CLASSNAME` so page CSS and `querySelector` do not hit both nodes.
+ */
+var EDITOR_PORTAL_HOST_CLASSNAME = 'hot-wrapper-editor-portal-host';
+
+/**
+ * Warning when the editor portal host cannot be moved into `rootPortalElement`.
+ */
+var MISSING_ROOT_PORTAL_WARNING = 'The React editor portal host could not be attached to `rootPortalElement`. The editor stays on `document.body` and clicks on it may fail to commit.';
+
 /**
  * Logs warn to the console if the `console` object is exposed.
  *
@@ -399,16 +410,17 @@ function resolveEditorSetting(editor, hotEditor) {
  *
  * @param {Document} doc Document to be used.
  * @param {ComponentType} Editor Editor component or render function.
+ * @param {HTMLElement} portalHost Host element to portal into. Required – do not fall back to `doc.body`.
  * @returns {ReactPortal} The portal for the editor.
  */
-function createEditorPortal(doc, Editor) {
-  if (!doc || !Editor || typeof Editor === 'boolean') {
+function createEditorPortal(doc, Editor, portalHost) {
+  if (!doc || !Editor || typeof Editor === 'boolean' || !portalHost) {
     return null;
   }
   var editorElement = /*#__PURE__*/React__default["default"].createElement(Editor, null);
   var containerProps = getContainerAttributesProps({}, false);
   containerProps.className = "".concat(DEFAULT_CLASSNAME, " ").concat(containerProps.className);
-  return /*#__PURE__*/ReactDOM__default["default"].createPortal(/*#__PURE__*/React__default["default"].createElement("div", containerProps, editorElement), doc.body);
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal(/*#__PURE__*/React__default["default"].createElement("div", containerProps, editorElement), portalHost);
 }
 
 /**
@@ -791,13 +803,15 @@ var HotColumnContext = /*#__PURE__*/React.createContext(undefined);
 var HotColumnContextProvider = function HotColumnContextProvider(_ref) {
   var columnIndex = _ref.columnIndex,
     getOwnerDocument = _ref.getOwnerDocument,
+    getEditorPortalHost = _ref.getEditorPortalHost,
     children = _ref.children;
   var contextImpl = React.useMemo(function () {
     return {
       columnIndex: columnIndex,
-      getOwnerDocument: getOwnerDocument
+      getOwnerDocument: getOwnerDocument,
+      getEditorPortalHost: getEditorPortalHost
     };
-  }, [columnIndex, getOwnerDocument]);
+  }, [columnIndex, getOwnerDocument, getEditorPortalHost]);
   return /*#__PURE__*/React__default["default"].createElement(HotColumnContext.Provider, {
     value: contextImpl
   }, children);
@@ -970,9 +984,6 @@ 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 = React.useDeferredValue(editorValue);
   React.useImperativeHandle(hooksRef, function () {
     return _objectSpread2(_objectSpread2({}, overriddenHooks), {}, {
       onOpen: function onOpen() {
@@ -988,7 +999,7 @@ function useHotEditor(overriddenHooks, deps) {
   return React.useMemo(function () {
     return {
       get value() {
-        return deferredValue;
+        return editorValue;
       },
       setValue: function setValue(newValue) {
         var _hotCustomEditorInsta2;
@@ -1014,7 +1025,7 @@ function useHotEditor(overriddenHooks, deps) {
         return col !== null && col !== void 0 ? col : undefined;
       }
     };
-  }, [rerenderTrigger, hotCustomEditorInstanceRef, deferredValue]);
+  }, [rerenderTrigger, hotCustomEditorInstanceRef, editorValue]);
 }
 
 // Render prop function type
@@ -1174,7 +1185,8 @@ var HotColumn = function HotColumn(props) {
     getRendererWrapper = _useHotTableContext.getRendererWrapper;
   var _useHotColumnContext = useHotColumnContext(),
     columnIndex = _useHotColumnContext.columnIndex,
-    getOwnerDocument = _useHotColumnContext.getOwnerDocument;
+    getOwnerDocument = _useHotColumnContext.getOwnerDocument,
+    getEditorPortalHost = _useHotColumnContext.getEditorPortalHost;
 
   /**
    * Reference to component-based editor overridden hooks object.
@@ -1235,7 +1247,7 @@ var HotColumn = function HotColumn(props) {
       displayAnyChildrenWarning(props.children);
     }
   });
-  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
+  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor, getEditorPortalHost());
 
   /**
    * Render the portals of the editors, if there are any.
@@ -1248,7 +1260,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="0.0.0-next-21bc714-20260904";
+var version="0.0.0-next-2de1384-20260907";
 
 /**
  * Component used to manage the renderer component portals.
@@ -1381,6 +1393,12 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var globalEditorClassInstance = React.useRef(null);
 
+  /**
+   * Stable host for React editor portals. Appended to `rootPortalElement` after init
+   * so core treats editor UI as inside the grid (see `#isPathWithinGrid`).
+   */
+  var editorPortalHostRef = React.useRef(null);
+
   /**
    * Reference to the previous props object.
    */
@@ -1427,6 +1445,27 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return null;
   }, [hotElementRef]);
 
+  /**
+   * Get or create the stable editor portal host.
+   *
+   * @returns {HTMLElement | null} The host element, or `null` before a document is available.
+   */
+  var getEditorPortalHost = React.useCallback(function () {
+    var doc = getOwnerDocument();
+    if (!doc) {
+      return null;
+    }
+    if (!editorPortalHostRef.current) {
+      var host = doc.createElement('div');
+      host.className = EDITOR_PORTAL_HOST_CLASSNAME;
+      doc.body.appendChild(host);
+      editorPortalHostRef.current = host;
+    } else if (!editorPortalHostRef.current.isConnected) {
+      doc.body.appendChild(editorPortalHostRef.current);
+    }
+    return editorPortalHostRef.current;
+  }, [getOwnerDocument]);
+
   /**
    * Create a new settings object containing the column settings and global editors and renderers.
    *
@@ -1507,6 +1546,15 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
       context.pushCellPortalsIntoPortalManager();
     });
     __hotInstance.current.init();
+    var portalHost = editorPortalHostRef.current;
+    var rootPortalElement = __hotInstance.current.rootPortalElement;
+    if (portalHost && rootPortalElement) {
+      if (portalHost.parentNode !== rootPortalElement) {
+        rootPortalElement.appendChild(portalHost);
+      }
+    } else if (portalHost && !rootPortalElement) {
+      warn(MISSING_ROOT_PORTAL_WARNING);
+    }
     displayAutoSizeWarning(__hotInstance.current);
     if (!displayObsoleteRenderersEditorsWarning(props.children)) {
       displayChildrenOfTypeWarning(props.children, HotColumn);
@@ -1516,7 +1564,8 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
      * Destroy the Handsontable instance when the parent component unmounts.
      */
     return function () {
-      var _getHotInstance2;
+      var _editorPortalHostRef$, _getHotInstance2;
+      (_editorPortalHostRef$ = editorPortalHostRef.current) === null || _editorPortalHostRef$ === void 0 || _editorPortalHostRef$.remove();
       clearCache();
       (_getHotInstance2 = getHotInstance()) === null || _getHotInstance2 === void 0 || _getHotInstance2.destroy();
     };
@@ -1565,11 +1614,12 @@ var HotTableInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React__default["default"].createElement(HotColumnContextProvider, {
       columnIndex: columnIndex,
       getOwnerDocument: getOwnerDocument,
+      getEditorPortalHost: getEditorPortalHost,
       key: columnIndex
     }, childNode);
   });
   var containerProps = getContainerAttributesProps(props);
-  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor);
+  var editorPortal = createEditorPortal(getOwnerDocument(), props.editor, getEditorPortalHost());
   return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({
     ref: hotElementRef
   }, containerProps, {