@handsontable/react-wrapper 17.0.0-rc4 → 17.0.0-rc5

package/commonjs/react-handsontable.js

@@ -627,6 +627,58 @@ var EditorContextProvider = function EditorContextProvider(_ref) {
     }
   }, 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).
+ */
+function applyEditorPosition(el, editor, hot, td) {
+  var _rootWindow$pageXOffs, _rootWindow$pageYOffs;
+  var rootWindow = hot.rootWindow || window;
+  var pageX = (_rootWindow$pageXOffs = rootWindow.pageXOffset) !== null && _rootWindow$pageXOffs !== void 0 ? _rootWindow$pageXOffs : 0;
+  var pageY = (_rootWindow$pageYOffs = rootWindow.pageYOffset) !== null && _rootWindow$pageYOffs !== void 0 ? _rootWindow$pageYOffs : 0;
+  var isRtl = typeof hot.isRtl === 'function' && hot.isRtl();
+  var position = editor.position;
+  var applyTdRect = function applyTdRect(rect) {
+    el.style.top = "".concat(pageY + rect.top - 1, "px");
+    el.style.width = "".concat(rect.width + 1, "px");
+    el.style.height = "".concat(rect.height + 1, "px");
+    if (isRtl) {
+      el.style.right = "".concat(pageX + rect.right, "px");
+      el.style.left = 'auto';
+    } else {
+      el.style.left = "".concat(pageX + rect.left - 1, "px");
+      el.style.right = 'auto';
+    }
+  };
+  if (position === 'portal') {
+    var cell = typeof editor.getEditedCell === 'function' ? editor.getEditedCell.call(editor) : null;
+    if (!(cell !== null && cell !== void 0 && cell.getBoundingClientRect)) {
+      return false;
+    }
+    applyTdRect(cell.getBoundingClientRect());
+    return true;
+  }
+  var getEditedCellRect = editor.getEditedCellRect;
+  var rect = typeof getEditedCellRect === 'function' ? getEditedCellRect.call(editor) : null;
+  if (rect) {
+    var rootElement = hot.rootElement;
+    if (rootElement !== null && rootElement !== void 0 && rootElement.getBoundingClientRect) {
+      var rootRect = rootElement.getBoundingClientRect();
+      el.style.top = "".concat(pageY + rootRect.top + rect.top, "px");
+      el.style.width = "".concat(rect.width, "px");
+      el.style.height = "".concat(rect.height, "px");
+      if (isRtl) {
+        el.style.right = "".concat(pageX + rootRect.right - rect.start, "px");
+        el.style.left = 'auto';
+      } else {
+        el.style.left = "".concat(pageX + rootRect.left + rect.start, "px");
+        el.style.right = 'auto';
+      }
+      return true;
+    }
+  }
+  return false;
+}
 /**
  * Hook that allows encapsulating custom behaviours of component-based editor by customizing passed ref with overridden hooks object.
  *
@@ -700,6 +752,10 @@ function EditorComponent(_ref2) {
     shortcuts = _ref2.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 _useContext2 = React.useContext(EditorContext),
     hotCustomEditorInstanceRef = _useContext2.hotCustomEditorInstanceRef;
   var registerShortcuts = React.useCallback(function () {
@@ -737,26 +793,55 @@ function EditorComponent(_ref2) {
     var editorContext = shortcutManager.getContext("editor");
     editorContext.removeShortcutsByGroup(shortcutsGroup);
   }, [shortcuts]);
+  var refreshDimensions = React.useCallback(function () {
+    var editor = hotCustomEditorInstanceRef.current;
+    var el = mainElementRef.current;
+    if (!editor || !el) return;
+    var hot = editor.hot;
+    if (!hot) return;
+    if (typeof editor.isOpened !== 'function' || !editor.isOpened()) return;
+    if (!applyEditorPosition(el, editor, hot) && typeof editor.close === 'function') {
+      editor.close();
+    }
+  }, []);
+  var unRegisterScrollHooks = React.useCallback(function () {
+    var editor = hotCustomEditorInstanceRef.current;
+    var hot = editor === null || editor === void 0 ? void 0 : editor.hot;
+    if (!hot || typeof hot.removeHook !== 'function') return;
+    hot.removeHook('afterScrollHorizontally', refreshDimensions);
+    hot.removeHook('afterScrollVertically', refreshDimensions);
+  }, [refreshDimensions]);
+  var registerScrollHooks = React.useCallback(function () {
+    var editor = hotCustomEditorInstanceRef.current;
+    var hot = editor === null || editor === void 0 ? void 0 : editor.hot;
+    if (!hot || typeof hot.addHook !== 'function') return;
+    hot.addHook('afterScrollHorizontally', refreshDimensions);
+    hot.addHook('afterScrollVertically', refreshDimensions);
+  }, [refreshDimensions]);
   var _useHotEditor = useHotEditor({
       onOpen: function onOpen() {
+        var _hotCustomEditorInsta11;
         if (!mainElementRef.current) return;
+        var themeName = (_hotCustomEditorInsta11 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta11 === void 0 ? void 0 : _hotCustomEditorInsta11.hot.getCurrentThemeName();
+        if (themeName) setThemeClassName(themeName);
         mainElementRef.current.style.display = 'block';
         _onOpen === null || _onOpen === void 0 || _onOpen();
+        var el = mainElementRef.current;
+        var editor = hotCustomEditorInstanceRef.current;
+        if (el && editor !== null && editor !== void 0 && editor.hot) {
+          applyEditorPosition(el, editor, editor.hot);
+        }
         registerShortcuts();
+        registerScrollHooks();
       },
       onClose: function onClose() {
         if (!mainElementRef.current) return;
         mainElementRef.current.style.display = 'none';
         _onClose === null || _onClose === void 0 || _onClose();
         unRegisterShortcuts();
+        unRegisterScrollHooks();
       },
       onPrepare: function onPrepare(_row, _column, _prop, TD, _originalValue, _cellProperties) {
-        if (!mainElementRef.current) return;
-        var tdPosition = TD.getBoundingClientRect();
-        mainElementRef.current.style.left = "".concat(tdPosition.left + window.pageXOffset - 1, "px");
-        mainElementRef.current.style.top = "".concat(tdPosition.top + window.pageYOffset - 1, "px");
-        mainElementRef.current.style.width = "".concat(tdPosition.width + 1, "px");
-        mainElementRef.current.style.height = "".concat(tdPosition.height + 1, "px");
         _onPrepare === null || _onPrepare === void 0 || _onPrepare(_row, _column, _prop, TD, _originalValue, _cellProperties);
       },
       onFocus: function onFocus() {
@@ -777,13 +862,14 @@ function EditorComponent(_ref2) {
   };
   return React__default["default"].createElement("div", {
     ref: mainElementRef,
+    className: themeClassName,
     style: {
       display: 'none',
       position: 'absolute',
       background: '#fff',
       border: '0px',
       padding: '0px',
-      zIndex: 999
+      zIndex: 100
     },
     onMouseDown: stopMousedownPropagation
   }, children({
@@ -870,7 +956,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="17.0.0-rc4";
+var version="17.0.0-rc5";
 
 /**
  * Component used to manage the renderer component portals.

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.0.0-rc4 (built at Tue Feb 24 2026 10:26:59 GMT+0000 (Coordinated Universal Time))
+ * Version: 17.0.0-rc5 (built at Tue Feb 24 2026 11:31:57 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')) :
@@ -643,6 +643,58 @@ var EditorContextProvider = function EditorContextProvider(_ref) {
     }
   }, 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).
+ */
+function applyEditorPosition(el, editor, hot, td) {
+  var _rootWindow$pageXOffs, _rootWindow$pageYOffs;
+  var rootWindow = hot.rootWindow || window;
+  var pageX = (_rootWindow$pageXOffs = rootWindow.pageXOffset) !== null && _rootWindow$pageXOffs !== void 0 ? _rootWindow$pageXOffs : 0;
+  var pageY = (_rootWindow$pageYOffs = rootWindow.pageYOffset) !== null && _rootWindow$pageYOffs !== void 0 ? _rootWindow$pageYOffs : 0;
+  var isRtl = typeof hot.isRtl === 'function' && hot.isRtl();
+  var position = editor.position;
+  var applyTdRect = function applyTdRect(rect) {
+    el.style.top = "".concat(pageY + rect.top - 1, "px");
+    el.style.width = "".concat(rect.width + 1, "px");
+    el.style.height = "".concat(rect.height + 1, "px");
+    if (isRtl) {
+      el.style.right = "".concat(pageX + rect.right, "px");
+      el.style.left = 'auto';
+    } else {
+      el.style.left = "".concat(pageX + rect.left - 1, "px");
+      el.style.right = 'auto';
+    }
+  };
+  if (position === 'portal') {
+    var cell = typeof editor.getEditedCell === 'function' ? editor.getEditedCell.call(editor) : null;
+    if (!(cell !== null && cell !== void 0 && cell.getBoundingClientRect)) {
+      return false;
+    }
+    applyTdRect(cell.getBoundingClientRect());
+    return true;
+  }
+  var getEditedCellRect = editor.getEditedCellRect;
+  var rect = typeof getEditedCellRect === 'function' ? getEditedCellRect.call(editor) : null;
+  if (rect) {
+    var rootElement = hot.rootElement;
+    if (rootElement !== null && rootElement !== void 0 && rootElement.getBoundingClientRect) {
+      var rootRect = rootElement.getBoundingClientRect();
+      el.style.top = "".concat(pageY + rootRect.top + rect.top, "px");
+      el.style.width = "".concat(rect.width, "px");
+      el.style.height = "".concat(rect.height, "px");
+      if (isRtl) {
+        el.style.right = "".concat(pageX + rootRect.right - rect.start, "px");
+        el.style.left = 'auto';
+      } else {
+        el.style.left = "".concat(pageX + rootRect.left + rect.start, "px");
+        el.style.right = 'auto';
+      }
+      return true;
+    }
+  }
+  return false;
+}
 /**
  * Hook that allows encapsulating custom behaviours of component-based editor by customizing passed ref with overridden hooks object.
  *
@@ -716,6 +768,10 @@ function EditorComponent(_ref2) {
     shortcuts = _ref2.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 _useContext2 = React.useContext(EditorContext),
     hotCustomEditorInstanceRef = _useContext2.hotCustomEditorInstanceRef;
   var registerShortcuts = React.useCallback(function () {
@@ -753,26 +809,55 @@ function EditorComponent(_ref2) {
     var editorContext = shortcutManager.getContext("editor");
     editorContext.removeShortcutsByGroup(shortcutsGroup);
   }, [shortcuts]);
+  var refreshDimensions = React.useCallback(function () {
+    var editor = hotCustomEditorInstanceRef.current;
+    var el = mainElementRef.current;
+    if (!editor || !el) return;
+    var hot = editor.hot;
+    if (!hot) return;
+    if (typeof editor.isOpened !== 'function' || !editor.isOpened()) return;
+    if (!applyEditorPosition(el, editor, hot) && typeof editor.close === 'function') {
+      editor.close();
+    }
+  }, []);
+  var unRegisterScrollHooks = React.useCallback(function () {
+    var editor = hotCustomEditorInstanceRef.current;
+    var hot = editor === null || editor === void 0 ? void 0 : editor.hot;
+    if (!hot || typeof hot.removeHook !== 'function') return;
+    hot.removeHook('afterScrollHorizontally', refreshDimensions);
+    hot.removeHook('afterScrollVertically', refreshDimensions);
+  }, [refreshDimensions]);
+  var registerScrollHooks = React.useCallback(function () {
+    var editor = hotCustomEditorInstanceRef.current;
+    var hot = editor === null || editor === void 0 ? void 0 : editor.hot;
+    if (!hot || typeof hot.addHook !== 'function') return;
+    hot.addHook('afterScrollHorizontally', refreshDimensions);
+    hot.addHook('afterScrollVertically', refreshDimensions);
+  }, [refreshDimensions]);
   var _useHotEditor = useHotEditor({
       onOpen: function onOpen() {
+        var _hotCustomEditorInsta11;
         if (!mainElementRef.current) return;
+        var themeName = (_hotCustomEditorInsta11 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta11 === void 0 ? void 0 : _hotCustomEditorInsta11.hot.getCurrentThemeName();
+        if (themeName) setThemeClassName(themeName);
         mainElementRef.current.style.display = 'block';
         _onOpen === null || _onOpen === void 0 || _onOpen();
+        var el = mainElementRef.current;
+        var editor = hotCustomEditorInstanceRef.current;
+        if (el && editor !== null && editor !== void 0 && editor.hot) {
+          applyEditorPosition(el, editor, editor.hot);
+        }
         registerShortcuts();
+        registerScrollHooks();
       },
       onClose: function onClose() {
         if (!mainElementRef.current) return;
         mainElementRef.current.style.display = 'none';
         _onClose === null || _onClose === void 0 || _onClose();
         unRegisterShortcuts();
+        unRegisterScrollHooks();
       },
       onPrepare: function onPrepare(_row, _column, _prop, TD, _originalValue, _cellProperties) {
-        if (!mainElementRef.current) return;
-        var tdPosition = TD.getBoundingClientRect();
-        mainElementRef.current.style.left = "".concat(tdPosition.left + window.pageXOffset - 1, "px");
-        mainElementRef.current.style.top = "".concat(tdPosition.top + window.pageYOffset - 1, "px");
-        mainElementRef.current.style.width = "".concat(tdPosition.width + 1, "px");
-        mainElementRef.current.style.height = "".concat(tdPosition.height + 1, "px");
         _onPrepare === null || _onPrepare === void 0 || _onPrepare(_row, _column, _prop, TD, _originalValue, _cellProperties);
       },
       onFocus: function onFocus() {
@@ -793,13 +878,14 @@ function EditorComponent(_ref2) {
   };
   return React__default["default"].createElement("div", {
     ref: mainElementRef,
+    className: themeClassName,
     style: {
       display: 'none',
       position: 'absolute',
       background: '#fff',
       border: '0px',
       padding: '0px',
-      zIndex: 999
+      zIndex: 100
     },
     onMouseDown: stopMousedownPropagation
   }, children({
@@ -886,7 +972,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="17.0.0-rc4";
+var version="17.0.0-rc5";
 
 /**
  * Component used to manage the renderer component portals.