@handsontable/react 9.0.2 → 11.1.0

package/commonjs/react-handsontable.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var Handsontable = require('handsontable');
+var Handsontable = require('handsontable/base');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,14 +17,9 @@ function ownKeys(object, enumerableOnly) {
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-
-    keys.push.apply(keys, symbols);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -32,19 +27,12 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
   }
 
   return target;
@@ -53,17 +41,11 @@ function _objectSpread2(target) {
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function _classCallCheck(instance, Constructor) {
@@ -85,6 +67,9 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
@@ -115,6 +100,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -158,6 +146,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);
@@ -193,6 +183,11 @@ var AUTOSIZE_WARNING = 'Your `HotTable` configuration includes `autoRowSize`/`au
  */
 
 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.
  */
@@ -220,8 +215,8 @@ function warn() {
  */
 
 function getChildElementByType(children, type) {
-  var childrenArray = React__default['default'].Children.toArray(children);
-  var childrenCount = React__default['default'].Children.count(children);
+  var childrenArray = React__default["default"].Children.toArray(children);
+  var childrenCount = React__default["default"].Children.count(children);
   var wantedChild = null;
 
   if (childrenCount !== 0) {
@@ -300,17 +295,20 @@ function createEditorPortal() {
   }
 
   doc.body.appendChild(editorContainer);
-  return ReactDOM__default['default'].createPortal(editorElement, editorContainer);
+  return ReactDOM__default["default"].createPortal(editorElement, editorContainer);
 }
 /**
  * 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.
  */
 
 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);
 
@@ -318,10 +316,16 @@ function getExtendedEditorElement(children, editorCache) {
     return null;
   }
 
-  return React__default['default'].cloneElement(editorElement, {
-    emitEditorInstance: function emitEditorInstance(editorInstance) {
-      editorCache.set(editorClass, editorInstance);
+  return React__default["default"].cloneElement(editorElement, {
+    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
   });
 }
@@ -348,11 +352,11 @@ function createPortal(rElement, props, callback) {
 
   var portalContainer = ownerDocument.createElement('DIV');
   bulkComponentContainer.appendChild(portalContainer);
-  var extendedRendererElement = React__default['default'].cloneElement(rElement, _objectSpread2({
+  var extendedRendererElement = React__default["default"].cloneElement(rElement, _objectSpread2({
     key: "".concat(props.row, "-").concat(props.col)
   }, props));
   return {
-    portal: ReactDOM__default['default'].createPortal(extendedRendererElement, portalContainer, "".concat(props.row, "-").concat(props.col, "-").concat(Math.random())),
+    portal: ReactDOM__default["default"].createPortal(extendedRendererElement, portalContainer, "".concat(props.row, "-").concat(props.col, "-").concat(Math.random())),
     portalContainer: portalContainer
   };
 }
@@ -381,7 +385,7 @@ function getContainerAttributesProps(props) {
  */
 
 function addUnsafePrefixes(instance) {
-  var reactSemverArray = React__default['default'].version.split('.').map(function (v) {
+  var reactSemverArray = React__default["default"].version.split('.').map(function (v) {
     return parseInt(v);
   });
   var shouldPrefix = reactSemverArray[0] >= 16 && reactSemverArray[1] >= 3;
@@ -525,7 +529,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.
@@ -550,7 +554,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 {
@@ -570,7 +574,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));
@@ -638,12 +642,12 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return React__default['default'].createElement(React__default['default'].Fragment, null, this.getLocalEditorPortal());
+      return React__default["default"].createElement(React__default["default"].Fragment, null, this.getLocalEditorPortal());
     }
   }]);
 
   return HotColumn;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 
 /**
  * Component class used to manage the renderer component portals.
@@ -669,14 +673,14 @@ var PortalManager = /*#__PURE__*/function (_React$Component) {
   _createClass(PortalManager, [{
     key: "render",
     value: function render() {
-      return React__default['default'].createElement(React__default['default'].Fragment, null, this.state.portals);
+      return React__default["default"].createElement(React__default["default"].Fragment, null, this.state.portals);
     }
   }]);
 
   return PortalManager;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 
-var version="9.0.2";
+var version="11.1.0";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1174,12 +1178,14 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
 var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
 
+var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
+
 var printWarning$1 = function printWarning() {};
 
 if (process.env.NODE_ENV !== 'production') {
   var ReactPropTypesSecret = ReactPropTypesSecret_1;
   var loggedTypeFailures = {};
-  var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
+  var has = has$1;
 
   printWarning$1 = function printWarning(text) {
     var message = 'Warning: ' + text;
@@ -1193,7 +1199,9 @@ if (process.env.NODE_ENV !== 'production') {
       // This error was thrown as a convenience so that you can use this stack
       // to find the callsite that caused this warning to fire.
       throw new Error(message);
-    } catch (x) {}
+    } catch (x) {
+      /**/
+    }
   };
 }
 /**
@@ -1212,7 +1220,7 @@ if (process.env.NODE_ENV !== 'production') {
 function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
   if (process.env.NODE_ENV !== 'production') {
     for (var typeSpecName in typeSpecs) {
-      if (has$1(typeSpecs, typeSpecName)) {
+      if (has(typeSpecs, typeSpecName)) {
         var error; // Prop type validation may throw. In case they do, we don't want to
         // fail the render phase where it didn't fail before. So we log it.
         // After these have been cleaned up, we'll let them throw.
@@ -1221,7 +1229,7 @@ function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
           // This is intentionally an invariant that gets caught. It's the same
           // behavior as without this statement except with a better message.
           if (typeof typeSpecs[typeSpecName] !== 'function') {
-            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + _typeof(typeSpecs[typeSpecName]) + '`.');
+            var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + _typeof(typeSpecs[typeSpecName]) + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
             err.name = 'Invariant Violation';
             throw err;
           }
@@ -1261,8 +1269,6 @@ checkPropTypes.resetWarningCache = function () {
 
 var checkPropTypes_1 = checkPropTypes;
 
-var has = Function.call.bind(Object.prototype.hasOwnProperty);
-
 var printWarning = function printWarning() {};
 
 if (process.env.NODE_ENV !== 'production') {
@@ -1366,6 +1372,7 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
 
   var ReactPropTypes = {
     array: createPrimitiveTypeChecker('array'),
+    bigint: createPrimitiveTypeChecker('bigint'),
     bool: createPrimitiveTypeChecker('boolean'),
     func: createPrimitiveTypeChecker('function'),
     number: createPrimitiveTypeChecker('number'),
@@ -1413,8 +1420,9 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
    */
 
 
-  function PropTypeError(message) {
+  function PropTypeError(message, data) {
     this.message = message;
+    this.data = data && _typeof(data) === 'object' ? data : {};
     this.stack = '';
   } // Make `instanceof Error` still work for returned errors.
 
@@ -1480,7 +1488,9 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
         // check, but we can offer a more precise error message here rather than
         // 'of type `object`'.
         var preciseType = getPreciseType(propValue);
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'), {
+          expectedType: expectedType
+        });
       }
 
       return null;
@@ -1615,7 +1625,7 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
       }
 
       for (var key in propValue) {
-        if (has(propValue, key)) {
+        if (has$1(propValue, key)) {
           var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
 
           if (error instanceof Error) {
@@ -1646,15 +1656,23 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
     }
 
     function validate(props, propName, componentName, location, propFullName) {
+      var expectedTypes = [];
+
       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
         var checker = arrayOfTypeCheckers[i];
+        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1);
 
-        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
+        if (checkerResult == null) {
           return null;
         }
+
+        if (checkerResult.data && has$1(checkerResult.data, 'expectedType')) {
+          expectedTypes.push(checkerResult.data.expectedType);
+        }
       }
 
-      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+      var expectedTypesMessage = expectedTypes.length > 0 ? ', expected one of type [' + expectedTypes.join(', ') + ']' : '';
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
     }
 
     return createChainableTypeChecker(validate);
@@ -1672,6 +1690,10 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
     return createChainableTypeChecker(validate);
   }
 
+  function invalidValidatorError(componentName, location, propFullName, key, type) {
+    return new PropTypeError((componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + type + '`.');
+  }
+
   function createShapeTypeChecker(shapeTypes) {
     function validate(props, propName, componentName, location, propFullName) {
       var propValue = props[propName];
@@ -1684,8 +1706,8 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
       for (var key in shapeTypes) {
         var checker = shapeTypes[key];
 
-        if (!checker) {
-          continue;
+        if (typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
         }
 
         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
@@ -1708,8 +1730,7 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
 
       if (propType !== 'object') {
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
-      } // We need to check all keys in case some are required but missing from
-      // props.
+      } // We need to check all keys in case some are required but missing from props.
 
 
       var allKeys = objectAssign({}, props[propName], shapeTypes);
@@ -1717,6 +1738,10 @@ var factoryWithTypeCheckers = function factoryWithTypeCheckers(isValidElement, t
       for (var key in allKeys) {
         var checker = shapeTypes[key];
 
+        if (has$1(shapeTypes, key) && typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
+
         if (!checker) {
           return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + '\nBad object: ' + JSON.stringify(props[propName], null, '  ') + '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  '));
         }
@@ -1915,6 +1940,7 @@ var factoryWithThrowingShims = function factoryWithThrowingShims() {
 
   var ReactPropTypes = {
     array: shim,
+    bigint: shim,
     bool: shim,
     func: shim,
     number: shim,
@@ -1958,6 +1984,7 @@ var propTypes = createCommonjsModule(function (module) {
     module.exports = factoryWithThrowingShims();
   }
 });
+var PropTypes = propTypes;
 
 /**
  * A Handsontable-ReactJS wrapper.
@@ -2233,15 +2260,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);
     }
     /**
@@ -2259,12 +2291,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;
@@ -2288,10 +2320,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
         }]);
 
         return CustomEditor;
-      }(Handsontable__default['default'].editors.BaseEditor); // Fill with the rest of the BaseEditor methods
+      }(Handsontable__default["default"].editors.BaseEditor); // Fill with the rest of the BaseEditor methods
 
 
-      Object.getOwnPropertyNames(Handsontable__default['default'].editors.BaseEditor.prototype).forEach(function (propName) {
+      Object.getOwnPropertyNames(Handsontable__default["default"].editors.BaseEditor.prototype).forEach(function (propName) {
         if (propName === 'constructor') {
           return;
         }
@@ -2364,7 +2396,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);
       }
@@ -2387,7 +2419,9 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "displayAutoSizeWarning",
     value: function displayAutoSizeWarning(newGlobalSettings) {
-      if (this.hotInstance && (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);
         }
@@ -2406,21 +2440,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 () {
@@ -2480,12 +2514,12 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       var hotTableComponent = this;
       var newGlobalSettings = this.createNewGlobalSettings();
-      this.hotInstance = new Handsontable__default['default'].Core(this.hotElementRef, newGlobalSettings);
-      this.hotInstance.addHook('beforeRender', function (isForced) {
-        hotTableComponent.handsontableBeforeRender();
+      this.hotInstance = new Handsontable__default["default"].Core(this.hotElementRef, newGlobalSettings);
+      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();
@@ -2544,14 +2578,14 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
         return childNode.type === HotColumn;
       };
 
-      var children = React__default['default'].Children.toArray(this.props.children); // filter out anything that's not a HotColumn
+      var children = React__default["default"].Children.toArray(this.props.children); // filter out anything that's not a HotColumn
 
       children = children.filter(function (childNode) {
         return isHotColumn(childNode);
       }); // clone the HotColumn nodes and extend them with the callbacks
 
       var childClones = children.map(function (childNode, columnIndex) {
-        return React__default['default'].cloneElement(childNode, {
+        return React__default["default"].cloneElement(childNode, {
           _componentRendererColumns: _this4.componentRendererColumns,
           _emitColumnSettings: _this4.setHotColumnSettings.bind(_this4),
           _columnIndex: columnIndex,
@@ -2565,12 +2599,12 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       }); // add the global editor to the list of children
 
       childClones.push(this.getGlobalEditorPortal());
-      return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement("div", {
+      return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
         ref: this.setHotElementRef.bind(this),
         id: id,
         className: className,
         style: style
-      }, childClones), React__default['default'].createElement(PortalManager, {
+      }, childClones), React__default["default"].createElement(PortalManager, {
         ref: this.setPortalManagerRef.bind(this)
       }));
     }
@@ -2582,16 +2616,16 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }]);
 
   return HotTable;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 /**
  * Prop types to be checked at runtime.
  */
 
 
 HotTable.propTypes = {
-  style: propTypes.object,
-  id: propTypes.string,
-  className: propTypes.string
+  style: PropTypes.object,
+  id: PropTypes.string,
+  className: PropTypes.string
 };
 
 var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
@@ -2619,7 +2653,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;
@@ -2635,7 +2669,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key] = arguments[_key];
       }
 
-      (_Handsontable$editors = Handsontable__default['default'].editors.BaseEditor.prototype._fireCallbacks).call.apply(_Handsontable$editors, [this.hotCustomEditorInstance].concat(args));
+      (_Handsontable$editors = Handsontable__default["default"].editors.BaseEditor.prototype._fireCallbacks).call.apply(_Handsontable$editors, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "beginEditing",
@@ -2646,7 +2680,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key2] = arguments[_key2];
       }
 
-      return (_Handsontable$editors2 = Handsontable__default['default'].editors.BaseEditor.prototype.beginEditing).call.apply(_Handsontable$editors2, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors2 = Handsontable__default["default"].editors.BaseEditor.prototype.beginEditing).call.apply(_Handsontable$editors2, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "cancelChanges",
@@ -2657,7 +2691,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key3] = arguments[_key3];
       }
 
-      return (_Handsontable$editors3 = Handsontable__default['default'].editors.BaseEditor.prototype.cancelChanges).call.apply(_Handsontable$editors3, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors3 = Handsontable__default["default"].editors.BaseEditor.prototype.cancelChanges).call.apply(_Handsontable$editors3, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "checkEditorSection",
@@ -2668,7 +2702,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key4] = arguments[_key4];
       }
 
-      return (_Handsontable$editors4 = Handsontable__default['default'].editors.BaseEditor.prototype.checkEditorSection).call.apply(_Handsontable$editors4, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors4 = Handsontable__default["default"].editors.BaseEditor.prototype.checkEditorSection).call.apply(_Handsontable$editors4, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "close",
@@ -2679,7 +2713,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key5] = arguments[_key5];
       }
 
-      return (_Handsontable$editors5 = Handsontable__default['default'].editors.BaseEditor.prototype.close).call.apply(_Handsontable$editors5, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors5 = Handsontable__default["default"].editors.BaseEditor.prototype.close).call.apply(_Handsontable$editors5, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "discardEditor",
@@ -2690,7 +2724,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key6] = arguments[_key6];
       }
 
-      return (_Handsontable$editors6 = Handsontable__default['default'].editors.BaseEditor.prototype.discardEditor).call.apply(_Handsontable$editors6, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors6 = Handsontable__default["default"].editors.BaseEditor.prototype.discardEditor).call.apply(_Handsontable$editors6, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "enableFullEditMode",
@@ -2701,7 +2735,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key7] = arguments[_key7];
       }
 
-      return (_Handsontable$editors7 = Handsontable__default['default'].editors.BaseEditor.prototype.enableFullEditMode).call.apply(_Handsontable$editors7, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors7 = Handsontable__default["default"].editors.BaseEditor.prototype.enableFullEditMode).call.apply(_Handsontable$editors7, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "extend",
@@ -2712,7 +2746,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key8] = arguments[_key8];
       }
 
-      return (_Handsontable$editors8 = Handsontable__default['default'].editors.BaseEditor.prototype.extend).call.apply(_Handsontable$editors8, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors8 = Handsontable__default["default"].editors.BaseEditor.prototype.extend).call.apply(_Handsontable$editors8, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "finishEditing",
@@ -2723,7 +2757,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key9] = arguments[_key9];
       }
 
-      return (_Handsontable$editors9 = Handsontable__default['default'].editors.BaseEditor.prototype.finishEditing).call.apply(_Handsontable$editors9, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors9 = Handsontable__default["default"].editors.BaseEditor.prototype.finishEditing).call.apply(_Handsontable$editors9, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "focus",
@@ -2734,7 +2768,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key10] = arguments[_key10];
       }
 
-      return (_Handsontable$editors10 = Handsontable__default['default'].editors.BaseEditor.prototype.focus).call.apply(_Handsontable$editors10, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors10 = Handsontable__default["default"].editors.BaseEditor.prototype.focus).call.apply(_Handsontable$editors10, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "getValue",
@@ -2745,7 +2779,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key11] = arguments[_key11];
       }
 
-      return (_Handsontable$editors11 = Handsontable__default['default'].editors.BaseEditor.prototype.getValue).call.apply(_Handsontable$editors11, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors11 = Handsontable__default["default"].editors.BaseEditor.prototype.getValue).call.apply(_Handsontable$editors11, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "init",
@@ -2756,7 +2790,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key12] = arguments[_key12];
       }
 
-      return (_Handsontable$editors12 = Handsontable__default['default'].editors.BaseEditor.prototype.init).call.apply(_Handsontable$editors12, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors12 = Handsontable__default["default"].editors.BaseEditor.prototype.init).call.apply(_Handsontable$editors12, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "isInFullEditMode",
@@ -2767,7 +2801,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key13] = arguments[_key13];
       }
 
-      return (_Handsontable$editors13 = Handsontable__default['default'].editors.BaseEditor.prototype.isInFullEditMode).call.apply(_Handsontable$editors13, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors13 = Handsontable__default["default"].editors.BaseEditor.prototype.isInFullEditMode).call.apply(_Handsontable$editors13, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "isOpened",
@@ -2778,7 +2812,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key14] = arguments[_key14];
       }
 
-      return (_Handsontable$editors14 = Handsontable__default['default'].editors.BaseEditor.prototype.isOpened).call.apply(_Handsontable$editors14, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors14 = Handsontable__default["default"].editors.BaseEditor.prototype.isOpened).call.apply(_Handsontable$editors14, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "isWaiting",
@@ -2789,7 +2823,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key15] = arguments[_key15];
       }
 
-      return (_Handsontable$editors15 = Handsontable__default['default'].editors.BaseEditor.prototype.isWaiting).call.apply(_Handsontable$editors15, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors15 = Handsontable__default["default"].editors.BaseEditor.prototype.isWaiting).call.apply(_Handsontable$editors15, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "open",
@@ -2800,7 +2834,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key16] = arguments[_key16];
       }
 
-      return (_Handsontable$editors16 = Handsontable__default['default'].editors.BaseEditor.prototype.open).call.apply(_Handsontable$editors16, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors16 = Handsontable__default["default"].editors.BaseEditor.prototype.open).call.apply(_Handsontable$editors16, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "prepare",
@@ -2812,7 +2846,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
       this.TD = TD;
       this.originalValue = originalValue;
       this.cellProperties = cellProperties;
-      return Handsontable__default['default'].editors.BaseEditor.prototype.prepare.call(this.hotCustomEditorInstance, row, col, prop, TD, originalValue, cellProperties);
+      return Handsontable__default["default"].editors.BaseEditor.prototype.prepare.call(this.hotCustomEditorInstance, row, col, prop, TD, originalValue, cellProperties);
     }
   }, {
     key: "saveValue",
@@ -2823,7 +2857,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key17] = arguments[_key17];
       }
 
-      return (_Handsontable$editors17 = Handsontable__default['default'].editors.BaseEditor.prototype.saveValue).call.apply(_Handsontable$editors17, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors17 = Handsontable__default["default"].editors.BaseEditor.prototype.saveValue).call.apply(_Handsontable$editors17, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "setValue",
@@ -2834,7 +2868,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key18] = arguments[_key18];
       }
 
-      return (_Handsontable$editors18 = Handsontable__default['default'].editors.BaseEditor.prototype.setValue).call.apply(_Handsontable$editors18, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors18 = Handsontable__default["default"].editors.BaseEditor.prototype.setValue).call.apply(_Handsontable$editors18, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "addHook",
@@ -2845,7 +2879,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key19] = arguments[_key19];
       }
 
-      return (_Handsontable$editors19 = Handsontable__default['default'].editors.BaseEditor.prototype.addHook).call.apply(_Handsontable$editors19, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors19 = Handsontable__default["default"].editors.BaseEditor.prototype.addHook).call.apply(_Handsontable$editors19, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "removeHooksByKey",
@@ -2856,7 +2890,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key20] = arguments[_key20];
       }
 
-      return (_Handsontable$editors20 = Handsontable__default['default'].editors.BaseEditor.prototype.removeHooksByKey).call.apply(_Handsontable$editors20, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors20 = Handsontable__default["default"].editors.BaseEditor.prototype.removeHooksByKey).call.apply(_Handsontable$editors20, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "clearHooks",
@@ -2867,7 +2901,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key21] = arguments[_key21];
       }
 
-      return (_Handsontable$editors21 = Handsontable__default['default'].editors.BaseEditor.prototype.clearHooks).call.apply(_Handsontable$editors21, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors21 = Handsontable__default["default"].editors.BaseEditor.prototype.clearHooks).call.apply(_Handsontable$editors21, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "getEditedCell",
@@ -2878,7 +2912,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key22] = arguments[_key22];
       }
 
-      return (_Handsontable$editors22 = Handsontable__default['default'].editors.BaseEditor.prototype.getEditedCell).call.apply(_Handsontable$editors22, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors22 = Handsontable__default["default"].editors.BaseEditor.prototype.getEditedCell).call.apply(_Handsontable$editors22, [this.hotCustomEditorInstance].concat(args));
     }
   }, {
     key: "getEditedCellsZIndex",
@@ -2889,14 +2923,14 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
         args[_key23] = arguments[_key23];
       }
 
-      return (_Handsontable$editors23 = Handsontable__default['default'].editors.BaseEditor.prototype.getEditedCellsZIndex).call.apply(_Handsontable$editors23, [this.hotCustomEditorInstance].concat(args));
+      return (_Handsontable$editors23 = Handsontable__default["default"].editors.BaseEditor.prototype.getEditedCellsZIndex).call.apply(_Handsontable$editors23, [this.hotCustomEditorInstance].concat(args));
     }
   }]);
 
   return BaseEditorComponent;
-}(React__default['default'].Component);
+}(React__default["default"].Component);
 
 exports.BaseEditorComponent = BaseEditorComponent;
 exports.HotColumn = HotColumn;
 exports.HotTable = HotTable;
-exports.default = HotTable;
+exports["default"] = HotTable;