@handsontable/react-wrapper 16.2.0 → 17.0.0-rc3

package/README.md

@@ -67,15 +67,6 @@ Below is the installation guide for the React functional component.
 npm install handsontable @handsontable/react-wrapper
 ```
 
-### Import CSS files
-
-```jsx
-// Base CSS rules
-import 'handsontable/styles/handsontable.min.css';
-// Main theme variables
-import 'handsontable/styles/ht-theme-main.min.css';
-```
-
 ### Register Handsontable's modules
 
 ```jsx
@@ -97,15 +88,12 @@ To set Handsontable's [configuration options](https://handsontable.com/docs/reac
 ```jsx
 import { HotTable, HotColumn } from '@handsontable/react-wrapper';
 import { registerAllModules } from 'handsontable/registry';
-import 'handsontable/styles/handsontable.min.css';
-import 'handsontable/styles/ht-theme-main.min.css';
 
 registerAllModules();
 
 const ExampleComponent = () => {
   return (
     <HotTable
-      theme="ht-theme-main-dark-auto"
       data={[
         { company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },
         { company: 'Zoomzone', country: 'Japan', rating: 4.5 },
@@ -138,7 +126,7 @@ const ExampleComponent = () => {
 - [Website](https://handsontable.com)
 - [Demo](https://handsontable.com/demo)
 - [Documentation](https://handsontable.com/docs/react-data-grid)
-- [npm](https://www.npmjs.com/package/@handsontable/react)
+- [npm](https://www.npmjs.com/package/@handsontable/react-wrapper)
 - [CDN](https://www.jsdelivr.com/package/npm/@handsontable/react-wrapper)
 - [Forum](https://forum.handsontable.com/)
 - [Blog](https://handsontable.com/blog)

package/commonjs/react-handsontable.js

@@ -689,6 +689,113 @@ 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;
+  var mainElementRef = React.useRef(null);
+  var currentValue = React.useRef(undefined);
+  var _useContext2 = React.useContext(EditorContext),
+    hotCustomEditorInstanceRef = _useContext2.hotCustomEditorInstanceRef;
+  var registerShortcuts = React.useCallback(function () {
+    var _hotCustomEditorInsta8, _hotCustomEditorInsta9, _hotCustomEditorInsta0;
+    if (!((_hotCustomEditorInsta8 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta8 !== void 0 && _hotCustomEditorInsta8.hot)) return;
+    (_hotCustomEditorInsta9 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta9 === void 0 || (_hotCustomEditorInsta9 = _hotCustomEditorInsta9.hot) === null || _hotCustomEditorInsta9 === void 0 || _hotCustomEditorInsta9.getShortcutManager().setActiveContextName("editor");
+    var shortcutManager = (_hotCustomEditorInsta0 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta0 === void 0 || (_hotCustomEditorInsta0 = _hotCustomEditorInsta0.hot) === null || _hotCustomEditorInsta0 === void 0 ? void 0 : _hotCustomEditorInsta0.getShortcutManager();
+    var editorContext = shortcutManager.getContext('editor');
+    var contextConfig = {
+      group: shortcutsGroup
+    };
+    if (shortcuts) {
+      editorContext === null || editorContext === void 0 || editorContext.addShortcuts(shortcuts.map(function (shortcut) {
+        return _objectSpread2(_objectSpread2({}, shortcut), {}, {
+          group: shortcut.group || shortcutsGroup,
+          relativeToGroup: shortcut.relativeToGroup || 'editorManager.handlingEditor',
+          position: shortcut.position || 'before',
+          callback: function callback(event) {
+            return shortcut.callback({
+              value: currentValue.current,
+              setValue: setValue,
+              finishEditing: finishEditing
+            }, event);
+          }
+        });
+      }),
+      //@ts-ignore
+      contextConfig);
+    }
+  }, [shortcuts]);
+  var unRegisterShortcuts = React.useCallback(function () {
+    var _hotCustomEditorInsta1, _hotCustomEditorInsta10;
+    if (!((_hotCustomEditorInsta1 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta1 !== void 0 && _hotCustomEditorInsta1.hot)) return;
+    var shortcutManager = (_hotCustomEditorInsta10 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta10 === void 0 || (_hotCustomEditorInsta10 = _hotCustomEditorInsta10.hot) === null || _hotCustomEditorInsta10 === void 0 ? void 0 : _hotCustomEditorInsta10.getShortcutManager();
+    var editorContext = shortcutManager.getContext("editor");
+    editorContext.removeShortcutsByGroup(shortcutsGroup);
+  }, [shortcuts]);
+  var _useHotEditor = useHotEditor({
+      onOpen: function onOpen() {
+        if (!mainElementRef.current) return;
+        mainElementRef.current.style.display = 'block';
+        _onOpen === null || _onOpen === void 0 || _onOpen();
+        registerShortcuts();
+      },
+      onClose: function onClose() {
+        if (!mainElementRef.current) return;
+        mainElementRef.current.style.display = 'none';
+        _onClose === null || _onClose === void 0 || _onClose();
+        unRegisterShortcuts();
+      },
+      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() {
+        _onFocus === null || _onFocus === void 0 || _onFocus();
+      }
+    }),
+    value = _useHotEditor.value,
+    setValue = _useHotEditor.setValue,
+    finishEditing = _useHotEditor.finishEditing,
+    isOpen = _useHotEditor.isOpen,
+    col = _useHotEditor.col,
+    row = _useHotEditor.row;
+  React.useEffect(function () {
+    currentValue.current = value;
+  }, [value]);
+  var stopMousedownPropagation = function stopMousedownPropagation(e) {
+    e.stopPropagation();
+  };
+  return React__default["default"].createElement("div", {
+    ref: mainElementRef,
+    style: {
+      display: 'none',
+      position: 'absolute',
+      background: '#fff',
+      border: '0px',
+      padding: '0px',
+      zIndex: 999
+    },
+    onMouseDown: stopMousedownPropagation
+  }, children({
+    value: value,
+    setValue: setValue,
+    finishEditing: finishEditing,
+    mainElementRef: mainElementRef,
+    isOpen: isOpen,
+    col: col,
+    row: row
+  }));
+}
 
 var isHotColumn = function isHotColumn(childNode) {
   return childNode.type === HotColumn;
@@ -763,7 +870,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="16.2.0";
+var version="17.0.0-rc3";
 
 /**
  * Component used to manage the renderer component portals.
@@ -2134,6 +2241,8 @@ var HotTable = React.forwardRef(function (_ref, ref) {
  */
 HotTable.version = version;
 
+exports.EditorComponent = EditorComponent;
+exports.EditorContext = EditorContext;
 exports.HotColumn = HotColumn;
 exports.HotTable = HotTable;
 exports["default"] = HotTable;

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: 16.2.0 (built at Thu Nov 20 2025 13:27:47 GMT+0100 (Central European Standard Time))
+ * Version: 17.0.0-rc3 (built at Tue Feb 24 2026 09:27:36 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')) :
@@ -705,6 +705,113 @@ 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;
+  var mainElementRef = React.useRef(null);
+  var currentValue = React.useRef(undefined);
+  var _useContext2 = React.useContext(EditorContext),
+    hotCustomEditorInstanceRef = _useContext2.hotCustomEditorInstanceRef;
+  var registerShortcuts = React.useCallback(function () {
+    var _hotCustomEditorInsta8, _hotCustomEditorInsta9, _hotCustomEditorInsta0;
+    if (!((_hotCustomEditorInsta8 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta8 !== void 0 && _hotCustomEditorInsta8.hot)) return;
+    (_hotCustomEditorInsta9 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta9 === void 0 || (_hotCustomEditorInsta9 = _hotCustomEditorInsta9.hot) === null || _hotCustomEditorInsta9 === void 0 || _hotCustomEditorInsta9.getShortcutManager().setActiveContextName("editor");
+    var shortcutManager = (_hotCustomEditorInsta0 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta0 === void 0 || (_hotCustomEditorInsta0 = _hotCustomEditorInsta0.hot) === null || _hotCustomEditorInsta0 === void 0 ? void 0 : _hotCustomEditorInsta0.getShortcutManager();
+    var editorContext = shortcutManager.getContext('editor');
+    var contextConfig = {
+      group: shortcutsGroup
+    };
+    if (shortcuts) {
+      editorContext === null || editorContext === void 0 || editorContext.addShortcuts(shortcuts.map(function (shortcut) {
+        return _objectSpread2(_objectSpread2({}, shortcut), {}, {
+          group: shortcut.group || shortcutsGroup,
+          relativeToGroup: shortcut.relativeToGroup || 'editorManager.handlingEditor',
+          position: shortcut.position || 'before',
+          callback: function callback(event) {
+            return shortcut.callback({
+              value: currentValue.current,
+              setValue: setValue,
+              finishEditing: finishEditing
+            }, event);
+          }
+        });
+      }),
+      //@ts-ignore
+      contextConfig);
+    }
+  }, [shortcuts]);
+  var unRegisterShortcuts = React.useCallback(function () {
+    var _hotCustomEditorInsta1, _hotCustomEditorInsta10;
+    if (!((_hotCustomEditorInsta1 = hotCustomEditorInstanceRef.current) !== null && _hotCustomEditorInsta1 !== void 0 && _hotCustomEditorInsta1.hot)) return;
+    var shortcutManager = (_hotCustomEditorInsta10 = hotCustomEditorInstanceRef.current) === null || _hotCustomEditorInsta10 === void 0 || (_hotCustomEditorInsta10 = _hotCustomEditorInsta10.hot) === null || _hotCustomEditorInsta10 === void 0 ? void 0 : _hotCustomEditorInsta10.getShortcutManager();
+    var editorContext = shortcutManager.getContext("editor");
+    editorContext.removeShortcutsByGroup(shortcutsGroup);
+  }, [shortcuts]);
+  var _useHotEditor = useHotEditor({
+      onOpen: function onOpen() {
+        if (!mainElementRef.current) return;
+        mainElementRef.current.style.display = 'block';
+        _onOpen === null || _onOpen === void 0 || _onOpen();
+        registerShortcuts();
+      },
+      onClose: function onClose() {
+        if (!mainElementRef.current) return;
+        mainElementRef.current.style.display = 'none';
+        _onClose === null || _onClose === void 0 || _onClose();
+        unRegisterShortcuts();
+      },
+      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() {
+        _onFocus === null || _onFocus === void 0 || _onFocus();
+      }
+    }),
+    value = _useHotEditor.value,
+    setValue = _useHotEditor.setValue,
+    finishEditing = _useHotEditor.finishEditing,
+    isOpen = _useHotEditor.isOpen,
+    col = _useHotEditor.col,
+    row = _useHotEditor.row;
+  React.useEffect(function () {
+    currentValue.current = value;
+  }, [value]);
+  var stopMousedownPropagation = function stopMousedownPropagation(e) {
+    e.stopPropagation();
+  };
+  return React__default["default"].createElement("div", {
+    ref: mainElementRef,
+    style: {
+      display: 'none',
+      position: 'absolute',
+      background: '#fff',
+      border: '0px',
+      padding: '0px',
+      zIndex: 999
+    },
+    onMouseDown: stopMousedownPropagation
+  }, children({
+    value: value,
+    setValue: setValue,
+    finishEditing: finishEditing,
+    mainElementRef: mainElementRef,
+    isOpen: isOpen,
+    col: col,
+    row: row
+  }));
+}
 
 var isHotColumn = function isHotColumn(childNode) {
   return childNode.type === HotColumn;
@@ -779,7 +886,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="16.2.0";
+var version="17.0.0-rc3";
 
 /**
  * Component used to manage the renderer component portals.
@@ -1123,6 +1230,8 @@ var HotTable = React.forwardRef(function (_ref, ref) {
  */
 HotTable.version = version;
 
+exports.EditorComponent = EditorComponent;
+exports.EditorContext = EditorContext;
 exports.HotColumn = HotColumn;
 exports.HotTable = HotTable;
 exports["default"] = HotTable;