@handsontable/react 9.0.0 → 11.0.0

package/es/react-handsontable.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Handsontable from 'handsontable';
+import Handsontable from 'handsontable/base';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -148,6 +148,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -178,6 +180,16 @@ var bulkComponentContainer = null;
  */
 
 var AUTOSIZE_WARNING = 'Your `HotTable` configuration includes `autoRowSize`/`autoColumnSize` options, which are not compatible with ' + ' the component-based renderers`. Disable `autoRowSize` and `autoColumnSize` to prevent row and column misalignment.';
+/**
+ * Message for the warning thrown if the Handsontable instance has been destroyed.
+ */
+
+var HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be' + ' used properly.';
+/**
+ * String identifier for the global-scoped editor components.
+ */
+
+var GLOBAL_EDITOR_SCOPE = 'global';
 /**
  * Default classname given to the wrapper container.
  */
@@ -292,10 +304,13 @@ function createEditorPortal() {
  *
  * @param {React.ReactNode} children Component children.
  * @param {Map} editorCache Component's editor cache.
+ * @param {string|number} [editorColumnScope] The editor scope (column index or a 'global' string). Defaults to
+ * 'global'.
  * @returns {React.ReactElement} An editor element containing the additional methods.
  */
 
 function getExtendedEditorElement(children, editorCache) {
+  var editorColumnScope = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : GLOBAL_EDITOR_SCOPE;
   var editorElement = getChildElementByType(children, 'hot-editor');
   var editorClass = getOriginalEditorClass(editorElement);
 
@@ -304,9 +319,15 @@ function getExtendedEditorElement(children, editorCache) {
   }
 
   return React.cloneElement(editorElement, {
-    emitEditorInstance: function emitEditorInstance(editorInstance) {
-      editorCache.set(editorClass, editorInstance);
+    emitEditorInstance: function emitEditorInstance(editorInstance, editorColumnScope) {
+      if (!editorCache.get(editorClass)) {
+        editorCache.set(editorClass, new Map());
+      }
+
+      var cacheEntry = editorCache.get(editorClass);
+      cacheEntry.set(editorColumnScope !== null && editorColumnScope !== void 0 ? editorColumnScope : GLOBAL_EDITOR_SCOPE, editorInstance);
     },
+    editorColumnScope: editorColumnScope,
     isEditor: true
   });
 }
@@ -510,7 +531,7 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getLocalEditorElement",
     value: function getLocalEditorElement() {
-      return getExtendedEditorElement(this.props.children, this.props._getEditorCache());
+      return getExtendedEditorElement(this.props.children, this.props._getEditorCache(), this.props._columnIndex);
     }
     /**
      * Create the column settings based on the data provided to the `HotColumn` component and it's child components.
@@ -535,7 +556,7 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
       }
 
       if (editorElement !== null) {
-        this.columnSettings.editor = this.props._getEditorClass(editorElement);
+        this.columnSettings.editor = this.props._getEditorClass(editorElement, this.props._columnIndex);
       } else if (this.hasProp('editor')) {
         this.columnSettings.editor = this.props.editor;
       } else {
@@ -555,7 +576,7 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
 
       var editorCache = this.props._getEditorCache();
 
-      var localEditorElement = getExtendedEditorElement(children, editorCache);
+      var localEditorElement = getExtendedEditorElement(children, editorCache, this.props._columnIndex);
 
       if (localEditorElement) {
         this.setLocalEditorPortal(createEditorPortal(this.props._getOwnerDocument(), localEditorElement, editorCache));
@@ -661,7 +682,7 @@ var PortalManager = /*#__PURE__*/function (_React$Component) {
   return PortalManager;
 }(React.Component);
 
-var version="9.0.0";
+var version="11.0.0";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1994,10 +2015,11 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     /**
      * Reference to the Handsontable instance.
      *
+     * @private
      * @type {Object}
      */
 
-    _this.hotInstance = null;
+    _this.__hotInstance = null;
     /**
      * Reference to the main Handsontable DOM element.
      *
@@ -2068,14 +2090,37 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
 
 
   _createClass(HotTable, [{
-    key: "getRenderedCellCache",
-    value:
+    key: "hotInstance",
+    get:
+    /**
+     * Getter for the property storing the Handsontable instance.
+     */
+    function get() {
+      if (!this.__hotInstance || this.__hotInstance && !this.__hotInstance.isDestroyed) {
+        // Will return the Handsontable instance or `null` if it's not yet been created.
+        return this.__hotInstance;
+      } else {
+        console.warn(HOT_DESTROYED_WARNING);
+        return null;
+      }
+    }
+    /**
+     * Setter for the property storing the Handsontable instance.
+     * @param {Handsontable} hotInstance The Handsontable instance.
+     */
+    ,
+    set: function set(hotInstance) {
+      this.__hotInstance = hotInstance;
+    }
     /**
      * Get the rendered table cell cache.
      *
      * @returns {Map}
      */
-    function getRenderedCellCache() {
+
+  }, {
+    key: "getRenderedCellCache",
+    value: function getRenderedCellCache() {
       return this.renderedCellCache;
     }
     /**
@@ -2194,15 +2239,20 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
      * Create a fresh class to be used as an editor, based on the provided editor React element.
      *
      * @param {React.ReactElement} editorElement React editor component.
+     * @param {string|number} [editorColumnScope] The editor scope (column index or a 'global' string). Defaults to
+     * 'global'.
      * @returns {Function} A class to be passed to the Handsontable editor settings.
      */
 
   }, {
     key: "getEditorClass",
     value: function getEditorClass(editorElement) {
+      var _editorCache$get;
+
+      var editorColumnScope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GLOBAL_EDITOR_SCOPE;
       var editorClass = getOriginalEditorClass(editorElement);
       var editorCache = this.getEditorCache();
-      var cachedComponent = editorCache.get(editorClass);
+      var cachedComponent = (_editorCache$get = editorCache.get(editorClass)) === null || _editorCache$get === void 0 ? void 0 : _editorCache$get.get(editorColumnScope);
       return this.makeEditorClass(cachedComponent);
     }
     /**
@@ -2220,12 +2270,12 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
 
         var _super2 = _createSuper(CustomEditor);
 
-        function CustomEditor(hotInstance, row, col, prop, TD, cellProperties) {
+        function CustomEditor(hotInstance) {
           var _this2;
 
           _classCallCheck(this, CustomEditor);
 
-          _this2 = _super2.call(this, hotInstance, row, col, prop, TD, cellProperties);
+          _this2 = _super2.call(this, hotInstance);
           editorComponent.hotCustomEditorInstance = _assertThisInitialized(_this2);
           _this2.editorComponent = editorComponent;
           return _this2;
@@ -2325,7 +2375,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       newSettings.columns = this.columnSettings.length ? this.columnSettings : newSettings.columns;
 
       if (globalEditorNode) {
-        newSettings.editor = this.getEditorClass(globalEditorNode);
+        newSettings.editor = this.getEditorClass(globalEditorNode, GLOBAL_EDITOR_SCOPE);
       } else {
         newSettings.editor = this.props.editor || (this.props.settings ? this.props.settings.editor : void 0);
       }
@@ -2348,7 +2398,9 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "displayAutoSizeWarning",
     value: function displayAutoSizeWarning(newGlobalSettings) {
-      if (this.hotInstance.getPlugin('autoRowSize').enabled || this.hotInstance.getPlugin('autoColumnSize').enabled) {
+      var _this$hotInstance$get, _this$hotInstance$get2;
+
+      if (this.hotInstance && ((_this$hotInstance$get = this.hotInstance.getPlugin('autoRowSize')) !== null && _this$hotInstance$get !== void 0 && _this$hotInstance$get.enabled || (_this$hotInstance$get2 = this.hotInstance.getPlugin('autoColumnSize')) !== null && _this$hotInstance$get2 !== void 0 && _this$hotInstance$get2.enabled)) {
         if (this.componentRendererColumns.size > 0) {
           warn(AUTOSIZE_WARNING);
         }
@@ -2367,21 +2419,21 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       this.columnSettings[columnIndex] = columnSettings;
     }
     /**
-     * Handsontable's `beforeRender` hook callback.
+     * Handsontable's `beforeViewRender` hook callback.
      */
 
   }, {
-    key: "handsontableBeforeRender",
-    value: function handsontableBeforeRender() {
+    key: "handsontableBeforeViewRender",
+    value: function handsontableBeforeViewRender() {
       this.getRenderedCellCache().clear();
     }
     /**
-     * Handsontable's `afterRender` hook callback.
+     * Handsontable's `afterViewRender` hook callback.
      */
 
   }, {
-    key: "handsontableAfterRender",
-    value: function handsontableAfterRender() {
+    key: "handsontableAfterViewRender",
+    value: function handsontableAfterViewRender() {
       var _this3 = this;
 
       this.portalManager.setState(function () {
@@ -2401,7 +2453,9 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "updateHot",
     value: function updateHot(newSettings) {
-      this.hotInstance.updateSettings(newSettings, false);
+      if (this.hotInstance) {
+        this.hotInstance.updateSettings(newSettings, false);
+      }
     }
     /**
      * Set the portal manager ref.
@@ -2440,11 +2494,11 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       var hotTableComponent = this;
       var newGlobalSettings = this.createNewGlobalSettings();
       this.hotInstance = new Handsontable.Core(this.hotElementRef, newGlobalSettings);
-      this.hotInstance.addHook('beforeRender', function (isForced) {
-        hotTableComponent.handsontableBeforeRender();
+      this.hotInstance.addHook('beforeViewRender', function (isForced) {
+        hotTableComponent.handsontableBeforeViewRender();
       });
-      this.hotInstance.addHook('afterRender', function () {
-        hotTableComponent.handsontableAfterRender();
+      this.hotInstance.addHook('afterViewRender', function () {
+        hotTableComponent.handsontableAfterViewRender();
       }); // `init` missing in Handsontable's type definitions.
 
       this.hotInstance.init();
@@ -2479,7 +2533,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.hotInstance.destroy();
+      if (this.hotInstance) {
+        this.hotInstance.destroy();
+      }
+
       removeEditorContainers(this.getOwnerDocument());
     }
     /**
@@ -2575,7 +2632,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
     _this.hot = null;
 
     if (props.emitEditorInstance) {
-      props.emitEditorInstance(_assertThisInitialized(_this));
+      props.emitEditorInstance(_assertThisInitialized(_this), props.editorColumnScope);
     }
 
     return _this;
@@ -2852,5 +2909,4 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
   return BaseEditorComponent;
 }(React.Component);
 
-export default HotTable;
-export { BaseEditorComponent, HotColumn, HotTable };
+export { BaseEditorComponent, HotColumn, HotTable, HotTable as default };

package/helpers.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
-import { HotEditorElement } from './types';
+import { HotEditorCache, HotEditorElement } from './types';
 /**
  * Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
  */
 export declare const AUTOSIZE_WARNING: string;
+/**
+ * Message for the warning thrown if the Handsontable instance has been destroyed.
+ */
+export declare const HOT_DESTROYED_WARNING: string;
+/**
+ * String identifier for the global-scoped editor components.
+ */
+export declare const GLOBAL_EDITOR_SCOPE = "global";
 /**
  * Logs warn to the console if the `console` object is exposed.
  *
@@ -40,15 +48,17 @@ export declare function removeEditorContainers(doc?: Document): void;
  * @param {Map} editorCache The editor cache reference.
  * @returns {React.ReactPortal} The portal for the editor.
  */
-export declare function createEditorPortal(doc: Document, editorElement: HotEditorElement, editorCache: Map<Function, React.Component>): React.ReactPortal;
+export declare function createEditorPortal(doc: Document, editorElement: HotEditorElement, editorCache: HotEditorCache): React.ReactPortal;
 /**
  * Get an editor element extended with a instance-emitting method.
  *
  * @param {React.ReactNode} children Component children.
  * @param {Map} editorCache Component's editor cache.
+ * @param {string|number} [editorColumnScope] The editor scope (column index or a 'global' string). Defaults to
+ * 'global'.
  * @returns {React.ReactElement} An editor element containing the additional methods.
  */
-export declare function getExtendedEditorElement(children: React.ReactNode, editorCache: Map<Function, object>): React.ReactElement | null;
+export declare function getExtendedEditorElement(children: React.ReactNode, editorCache: HotEditorCache, editorColumnScope?: string | number): React.ReactElement | null;
 /**
  * Create a react component and render it to an external DOM done.
  *

package/hotColumn.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactPortal } from 'react';
 import { HotTableProps, HotColumnProps } from './types';
-import Handsontable from 'handsontable';
+import Handsontable from 'handsontable/base';
 declare class HotColumn extends React.Component<HotColumnProps, {}> {
     internalProps: string[];
     columnSettings: Handsontable.ColumnSettings;

package/hotTable.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import Handsontable from 'handsontable';
+import Handsontable from 'handsontable/base';
 import { PortalManager } from './portalManager';
-import { HotTableProps, HotEditorElement } from './types';
+import { HotTableProps, HotEditorElement, HotEditorCache, EditorScopeIdentifier } from './types';
 /**
  * A Handsontable-ReactJS wrapper.
  *
@@ -34,9 +34,10 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
     /**
      * Reference to the Handsontable instance.
      *
+     * @private
      * @type {Object}
      */
-    hotInstance: Handsontable;
+    __hotInstance: Handsontable | null;
     /**
      * Reference to the main Handsontable DOM element.
      *
@@ -113,6 +114,15 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      * @returns The version number of the package.
      */
     static get version(): string;
+    /**
+     * Getter for the property storing the Handsontable instance.
+     */
+    get hotInstance(): Handsontable | null;
+    /**
+     * Setter for the property storing the Handsontable instance.
+     * @param {Handsontable} hotInstance The Handsontable instance.
+     */
+    set hotInstance(hotInstance: Handsontable | null);
     /**
      * Prop types to be checked at runtime.
      */
@@ -128,7 +138,7 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      *
      * @returns {Map}
      */
-    getEditorCache(): Map<Function, React.Component>;
+    getEditorCache(): HotEditorCache;
     /**
      * Get the global editor portal property.
      *
@@ -163,14 +173,16 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      * @param {React.ReactElement} rendererElement React renderer component.
      * @returns {Handsontable.renderers.Base} The Handsontable rendering function.
      */
-    getRendererWrapper(rendererElement: React.ReactElement): Handsontable.renderers.Base | any;
+    getRendererWrapper(rendererElement: React.ReactElement): typeof Handsontable.renderers.BaseRenderer | any;
     /**
      * Create a fresh class to be used as an editor, based on the provided editor React element.
      *
      * @param {React.ReactElement} editorElement React editor component.
+     * @param {string|number} [editorColumnScope] The editor scope (column index or a 'global' string). Defaults to
+     * 'global'.
      * @returns {Function} A class to be passed to the Handsontable editor settings.
      */
-    getEditorClass(editorElement: HotEditorElement): typeof Handsontable.editors.BaseEditor;
+    getEditorClass(editorElement: HotEditorElement, editorColumnScope?: EditorScopeIdentifier): typeof Handsontable.editors.BaseEditor;
     /**
      * Create a class to be passed to the Handsontable's settings.
      *
@@ -217,13 +229,13 @@ declare class HotTable extends React.Component<HotTableProps, {}> {
      */
     setHotColumnSettings(columnSettings: Handsontable.ColumnSettings, columnIndex: number): void;
     /**
-     * Handsontable's `beforeRender` hook callback.
+     * Handsontable's `beforeViewRender` hook callback.
      */
-    handsontableBeforeRender(): void;
+    handsontableBeforeViewRender(): void;
     /**
-     * Handsontable's `afterRender` hook callback.
+     * Handsontable's `afterViewRender` hook callback.
      */
-    handsontableAfterRender(): void;
+    handsontableAfterViewRender(): void;
     /**
      * Call the `updateSettings` method for the Handsontable instance.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handsontable/react",
-  "version": "9.0.0",
+  "version": "11.0.0",
   "description": "Best Data Grid for React with Spreadsheet Look and Feel.",
   "author": "Handsoncode <hello@handsoncode.net> (https://handsoncode.net)",
   "homepage": "https://handsontable.com",
@@ -64,27 +64,27 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.4.0",
-    "handsontable": "^9.0.0",
+    "handsontable": "^11.0.0",
     "jest": "^25.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-redux": "^7.1.1",
     "redux": "^4.0.4",
-    "rollup": "^2.0.0",
+    "rollup": "^2.58.0",
     "rollup-plugin-alias": "^1.5.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.1",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-typescript2": "^0.22.1",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.22.1",
     "typescript": "3.8.2",
     "uglify-js": "^3.4.9"
   },
   "peerDependencies": {
-    "handsontable": ">=9.0.0"
+    "handsontable": ">=11.0.0"
   },
   "scripts": {
     "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:min",

package/settingsMapper.d.ts

@@ -1,4 +1,4 @@
-import Handsontable from 'handsontable';
+import Handsontable from 'handsontable/base';
 import { HotTableProps } from './types';
 export declare class SettingsMapper {
     /**

package/types.d.ts

@@ -1,10 +1,18 @@
-import Handsontable from 'handsontable';
+import Handsontable from 'handsontable/base';
 import React from 'react';
 import { ConnectedComponent } from 'react-redux';
 /**
  * Type of the editor component's ReactElement.
  */
 export declare type HotEditorElement = React.ReactElement<{}, ConnectedComponent<React.FunctionComponent, any> | any>;
+/**
+ * Type of the identifier under which the cached editor components are stored.
+ */
+export declare type EditorScopeIdentifier = 'global' | number;
+/**
+ * Type of the cache map for the Handsontable editor components.
+ */
+export declare type HotEditorCache = Map<Function, Map<EditorScopeIdentifier, React.Component>>;
 /**
  * Interface for the `prop` of the HotTable component - extending the default Handsontable settings with additional,
  * component-related properties.
@@ -34,8 +42,8 @@ export interface HotColumnProps extends Handsontable.ColumnSettings {
     _columnIndex?: number;
     _getChildElementByType?: (children: React.ReactNode, type: string) => React.ReactElement;
     _getRendererWrapper?: (rendererNode: React.ReactElement) => Handsontable.renderers.Base;
-    _getEditorClass?: (editorElement: React.ReactElement) => typeof Handsontable.editors.BaseEditor;
-    _getEditorCache?: () => Map<Function, React.Component>;
+    _getEditorClass?: (editorElement: React.ReactElement, editorColumnScope: EditorScopeIdentifier) => typeof Handsontable.editors.BaseEditor;
+    _getEditorCache?: () => HotEditorCache;
     _getOwnerDocument?: () => Document;
     children?: React.ReactNode;
 }