@handsontable/react 14.1.0 → 14.2.0-next-7ae341f-20240229

package/commonjs/react-handsontable.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var ReactDOM = require('react-dom');
 var Handsontable = require('handsontable/base');
+var registry$1 = require('handsontable/renderers/registry');
+var registry = require('handsontable/editors/registry');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -310,23 +312,27 @@ function getExtendedEditorElement(children, editorCache) {
  * @param {React.ReactElement} rElement React element to be used as a base for the component.
  * @param {Object} props Props to be passed to the cloned element.
  * @param {Document} [ownerDocument] The owner document to set the portal up into.
+ * @param {String} portalKey The key to be used for the portal.
+ * @param {HTMLElement} [cachedContainer] The cached container to be used for the portal.
  * @returns {{portal: React.ReactPortal, portalContainer: HTMLElement}} An object containing the portal and its container.
  */
 function createPortal(rElement, props) {
   var ownerDocument = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document;
+  var portalKey = arguments.length > 3 ? arguments[3] : undefined;
+  var cachedContainer = arguments.length > 4 ? arguments[4] : undefined;
   if (!ownerDocument) {
     ownerDocument = document;
   }
   if (!bulkComponentContainer) {
     bulkComponentContainer = ownerDocument.createDocumentFragment();
   }
-  var portalContainer = ownerDocument.createElement('DIV');
+  var portalContainer = cachedContainer !== null && cachedContainer !== void 0 ? cachedContainer : ownerDocument.createElement('DIV');
   bulkComponentContainer.appendChild(portalContainer);
   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, portalKey),
     portalContainer: portalContainer
   };
 }
@@ -511,7 +517,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React__default["default"].Component);
 
-var version="14.1.0";
+var version="14.2.0-next-7ae341f-20240229";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1692,9 +1698,17 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
      */
     _this.renderersPortalManager = null;
     /**
-     * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
+     * Map that stores React portals.
+     * @type {Map<string, React.ReactPortal>}
      */
-    _this.portalCacheArray = [];
+    _this.portalCache = new Map();
+    /**
+     * Portal Container Cache
+     *
+     * @private
+     * @type {Map}
+     */
+    _this.portalContainerCache = new Map();
     /**
      * The rendered cells cache.
      *
@@ -1746,6 +1760,16 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
     set: function set(hotInstance) {
       this.__hotInstance = hotInstance;
     }
+    /**
+     * Get Portal Container Cache
+     *
+     * @returns {Map}
+     */
+  }, {
+    key: "getPortalContainerCache",
+    value: function getPortalContainerCache() {
+      return this.portalContainerCache;
+    }
     /**
      * Get the rendered table cell cache.
      *
@@ -1808,30 +1832,44 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
     key: "getRendererWrapper",
     value: function getRendererWrapper(rendererElement) {
       var hotTableComponent = this;
-      return function (instance, TD, row, col, prop, value, cellProperties) {
+      return function __internalRenderer(instance, TD, row, col, prop, value, cellProperties) {
         var renderedCellCache = hotTableComponent.getRenderedCellCache();
-        if (renderedCellCache.has("".concat(row, "-").concat(col))) {
-          TD.innerHTML = renderedCellCache.get("".concat(row, "-").concat(col)).innerHTML;
+        var portalContainerCache = hotTableComponent.getPortalContainerCache();
+        var key = "".concat(row, "-").concat(col);
+        // Handsontable.Core type is missing guid
+        var instanceGuid = instance.guid;
+        var portalContainerKey = "".concat(instanceGuid, "-").concat(key);
+        var portalKey = "".concat(key, "-").concat(instanceGuid);
+        if (renderedCellCache.has(key)) {
+          TD.innerHTML = renderedCellCache.get(key).innerHTML;
         }
         if (TD && !TD.getAttribute('ghost-table')) {
-          var _createPortal = createPortal(rendererElement, {
-              TD: TD,
-              row: row,
-              col: col,
-              prop: prop,
-              value: value,
-              cellProperties: cellProperties,
-              isRenderer: true
-            }, TD.ownerDocument),
-            portal = _createPortal.portal,
-            portalContainer = _createPortal.portalContainer;
+          var cachedPortal = hotTableComponent.portalCache.get(portalKey);
+          var cachedPortalContainer = portalContainerCache.get(portalContainerKey);
           while (TD.firstChild) {
             TD.removeChild(TD.firstChild);
           }
-          TD.appendChild(portalContainer);
-          hotTableComponent.portalCacheArray.push(portal);
+          // if portal already exists, do not recreate
+          if (cachedPortal && cachedPortalContainer) {
+            TD.appendChild(cachedPortalContainer);
+          } else {
+            var _createPortal = createPortal(rendererElement, {
+                TD: TD,
+                row: row,
+                col: col,
+                prop: prop,
+                value: value,
+                cellProperties: cellProperties,
+                isRenderer: true
+              }, TD.ownerDocument, portalKey, cachedPortalContainer),
+              portal = _createPortal.portal,
+              portalContainer = _createPortal.portalContainer;
+            portalContainerCache.set(portalContainerKey, portalContainer);
+            TD.appendChild(portalContainer);
+            hotTableComponent.portalCache.set(portalKey, portal);
+          }
         }
-        renderedCellCache.set("".concat(row, "-").concat(col), TD);
+        renderedCellCache.set(key, TD);
         return TD;
       };
     }
@@ -1940,13 +1978,23 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
       if (globalEditorNode) {
         newSettings.editor = this.getEditorClass(globalEditorNode, GLOBAL_EDITOR_SCOPE);
       } else {
-        newSettings.editor = this.props.editor || (this.props.settings ? this.props.settings.editor : void 0);
+        var _this$props$settings;
+        if (this.props.editor || (_this$props$settings = this.props.settings) !== null && _this$props$settings !== void 0 && _this$props$settings.editor) {
+          newSettings.editor = this.props.editor || this.props.settings.editor;
+        } else {
+          newSettings.editor = registry.getEditor('text');
+        }
       }
       if (globalRendererNode) {
         newSettings.renderer = this.getRendererWrapper(globalRendererNode);
         this.componentRendererColumns.set('global', true);
       } else {
-        newSettings.renderer = this.props.renderer || (this.props.settings ? this.props.settings.renderer : void 0);
+        var _this$props$settings2;
+        if (this.props.renderer || (_this$props$settings2 = this.props.settings) !== null && _this$props$settings2 !== void 0 && _this$props$settings2.renderer) {
+          newSettings.renderer = this.props.renderer || this.props.settings.renderer;
+        } else {
+          newSettings.renderer = registry$1.getRenderer('text');
+        }
       }
       return newSettings;
     }
@@ -1982,6 +2030,7 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handsontableBeforeViewRender",
     value: function handsontableBeforeViewRender() {
+      this.portalCache.clear();
       this.getRenderedCellCache().clear();
     }
     /**
@@ -1990,11 +2039,8 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handsontableAfterViewRender",
     value: function handsontableAfterViewRender() {
-      var _this3 = this;
       this.renderersPortalManager.setState({
-        portals: _toConsumableArray(this.portalCacheArray)
-      }, function () {
-        _this3.portalCacheArray = [];
+        portals: _toConsumableArray(this.portalCache.values())
       });
     }
     /**
@@ -2030,14 +2076,14 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this4 = this;
+      var _this3 = this;
       var newGlobalSettings = this.createNewGlobalSettings();
       this.hotInstance = new Handsontable__default["default"].Core(this.hotElementRef, newGlobalSettings);
       this.hotInstance.addHook('beforeViewRender', function () {
-        return _this4.handsontableBeforeViewRender();
+        return _this3.handsontableBeforeViewRender();
       });
       this.hotInstance.addHook('afterViewRender', function () {
-        return _this4.handsontableAfterViewRender();
+        return _this3.handsontableAfterViewRender();
       });
       // `init` missing in Handsontable's type definitions.
       this.hotInstance.init();
@@ -2071,7 +2117,7 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this4 = this;
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
@@ -2081,14 +2127,14 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
         return isHotColumn(childNode);
       }).map(function (childNode, columnIndex) {
         return React__default["default"].cloneElement(childNode, {
-          _componentRendererColumns: _this5.componentRendererColumns,
-          _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
+          _componentRendererColumns: _this4.componentRendererColumns,
+          _emitColumnSettings: _this4.setHotColumnSettings.bind(_this4),
           _columnIndex: columnIndex,
-          _getChildElementByType: getChildElementByType.bind(_this5),
-          _getRendererWrapper: _this5.getRendererWrapper.bind(_this5),
-          _getEditorClass: _this5.getEditorClass.bind(_this5),
-          _getOwnerDocument: _this5.getOwnerDocument.bind(_this5),
-          _getEditorCache: _this5.getEditorCache.bind(_this5),
+          _getChildElementByType: getChildElementByType.bind(_this4),
+          _getRendererWrapper: _this4.getRendererWrapper.bind(_this4),
+          _getEditorClass: _this4.getEditorClass.bind(_this4),
+          _getOwnerDocument: _this4.getOwnerDocument.bind(_this4),
+          _getEditorCache: _this4.getEditorCache.bind(_this4),
           children: childNode.props.children
         });
       });
@@ -2403,4 +2449,5 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
 exports.BaseEditorComponent = BaseEditorComponent;
 exports.HotColumn = HotColumn;
 exports.HotTable = HotTable;
+exports.HotTableClass = HotTableClass;
 exports["default"] = HotTable;

package/dist/react-handsontable.js

@@ -25,13 +25,13 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  * 
- * Version: 14.1.0 (built at Tue Jan 16 2024 10:29:21 GMT+0100 (Central European Standard Time))
+ * Version: 14.2.0-next-7ae341f-20240229 (built at Thu Feb 29 2024 08:45: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')) :
-typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'handsontable/base'], factory) :
-(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.Handsontable = global.Handsontable || {}, global.Handsontable.react = {}), global.React, global.ReactDOM, global.Handsontable));
-})(this, (function (exports, React, ReactDOM, Handsontable) { 'use strict';
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('handsontable/base'), require('handsontable/renderers/registry'), require('handsontable/editors/registry')) :
+typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'handsontable/base', 'handsontable/renderers/registry', 'handsontable/editors/registry'], factory) :
+(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.Handsontable = global.Handsontable || {}, global.Handsontable.react = {}), global.React, global.ReactDOM, global.Handsontable, global.Handsontable.renderers, global.Handsontable.editors));
+})(this, (function (exports, React, ReactDOM, Handsontable, registry$1, registry) { 'use strict';
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -337,23 +337,27 @@ function getExtendedEditorElement(children, editorCache) {
  * @param {React.ReactElement} rElement React element to be used as a base for the component.
  * @param {Object} props Props to be passed to the cloned element.
  * @param {Document} [ownerDocument] The owner document to set the portal up into.
+ * @param {String} portalKey The key to be used for the portal.
+ * @param {HTMLElement} [cachedContainer] The cached container to be used for the portal.
  * @returns {{portal: React.ReactPortal, portalContainer: HTMLElement}} An object containing the portal and its container.
  */
 function createPortal(rElement, props) {
   var ownerDocument = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document;
+  var portalKey = arguments.length > 3 ? arguments[3] : undefined;
+  var cachedContainer = arguments.length > 4 ? arguments[4] : undefined;
   if (!ownerDocument) {
     ownerDocument = document;
   }
   if (!bulkComponentContainer) {
     bulkComponentContainer = ownerDocument.createDocumentFragment();
   }
-  var portalContainer = ownerDocument.createElement('DIV');
+  var portalContainer = cachedContainer !== null && cachedContainer !== void 0 ? cachedContainer : ownerDocument.createElement('DIV');
   bulkComponentContainer.appendChild(portalContainer);
   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, portalKey),
     portalContainer: portalContainer
   };
 }
@@ -538,7 +542,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React__default["default"].Component);
 
-var version="14.1.0";
+var version="14.2.0-next-7ae341f-20240229";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -941,9 +945,17 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
      */
     _this.renderersPortalManager = null;
     /**
-     * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
+     * Map that stores React portals.
+     * @type {Map<string, React.ReactPortal>}
      */
-    _this.portalCacheArray = [];
+    _this.portalCache = new Map();
+    /**
+     * Portal Container Cache
+     *
+     * @private
+     * @type {Map}
+     */
+    _this.portalContainerCache = new Map();
     /**
      * The rendered cells cache.
      *
@@ -995,6 +1007,16 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
     set: function set(hotInstance) {
       this.__hotInstance = hotInstance;
     }
+    /**
+     * Get Portal Container Cache
+     *
+     * @returns {Map}
+     */
+  }, {
+    key: "getPortalContainerCache",
+    value: function getPortalContainerCache() {
+      return this.portalContainerCache;
+    }
     /**
      * Get the rendered table cell cache.
      *
@@ -1057,30 +1079,44 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
     key: "getRendererWrapper",
     value: function getRendererWrapper(rendererElement) {
       var hotTableComponent = this;
-      return function (instance, TD, row, col, prop, value, cellProperties) {
+      return function __internalRenderer(instance, TD, row, col, prop, value, cellProperties) {
         var renderedCellCache = hotTableComponent.getRenderedCellCache();
-        if (renderedCellCache.has("".concat(row, "-").concat(col))) {
-          TD.innerHTML = renderedCellCache.get("".concat(row, "-").concat(col)).innerHTML;
+        var portalContainerCache = hotTableComponent.getPortalContainerCache();
+        var key = "".concat(row, "-").concat(col);
+        // Handsontable.Core type is missing guid
+        var instanceGuid = instance.guid;
+        var portalContainerKey = "".concat(instanceGuid, "-").concat(key);
+        var portalKey = "".concat(key, "-").concat(instanceGuid);
+        if (renderedCellCache.has(key)) {
+          TD.innerHTML = renderedCellCache.get(key).innerHTML;
         }
         if (TD && !TD.getAttribute('ghost-table')) {
-          var _createPortal = createPortal(rendererElement, {
-              TD: TD,
-              row: row,
-              col: col,
-              prop: prop,
-              value: value,
-              cellProperties: cellProperties,
-              isRenderer: true
-            }, TD.ownerDocument),
-            portal = _createPortal.portal,
-            portalContainer = _createPortal.portalContainer;
+          var cachedPortal = hotTableComponent.portalCache.get(portalKey);
+          var cachedPortalContainer = portalContainerCache.get(portalContainerKey);
           while (TD.firstChild) {
             TD.removeChild(TD.firstChild);
           }
-          TD.appendChild(portalContainer);
-          hotTableComponent.portalCacheArray.push(portal);
+          // if portal already exists, do not recreate
+          if (cachedPortal && cachedPortalContainer) {
+            TD.appendChild(cachedPortalContainer);
+          } else {
+            var _createPortal = createPortal(rendererElement, {
+                TD: TD,
+                row: row,
+                col: col,
+                prop: prop,
+                value: value,
+                cellProperties: cellProperties,
+                isRenderer: true
+              }, TD.ownerDocument, portalKey, cachedPortalContainer),
+              portal = _createPortal.portal,
+              portalContainer = _createPortal.portalContainer;
+            portalContainerCache.set(portalContainerKey, portalContainer);
+            TD.appendChild(portalContainer);
+            hotTableComponent.portalCache.set(portalKey, portal);
+          }
         }
-        renderedCellCache.set("".concat(row, "-").concat(col), TD);
+        renderedCellCache.set(key, TD);
         return TD;
       };
     }
@@ -1189,13 +1225,23 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
       if (globalEditorNode) {
         newSettings.editor = this.getEditorClass(globalEditorNode, GLOBAL_EDITOR_SCOPE);
       } else {
-        newSettings.editor = this.props.editor || (this.props.settings ? this.props.settings.editor : void 0);
+        var _this$props$settings;
+        if (this.props.editor || (_this$props$settings = this.props.settings) !== null && _this$props$settings !== void 0 && _this$props$settings.editor) {
+          newSettings.editor = this.props.editor || this.props.settings.editor;
+        } else {
+          newSettings.editor = registry.getEditor('text');
+        }
       }
       if (globalRendererNode) {
         newSettings.renderer = this.getRendererWrapper(globalRendererNode);
         this.componentRendererColumns.set('global', true);
       } else {
-        newSettings.renderer = this.props.renderer || (this.props.settings ? this.props.settings.renderer : void 0);
+        var _this$props$settings2;
+        if (this.props.renderer || (_this$props$settings2 = this.props.settings) !== null && _this$props$settings2 !== void 0 && _this$props$settings2.renderer) {
+          newSettings.renderer = this.props.renderer || this.props.settings.renderer;
+        } else {
+          newSettings.renderer = registry$1.getRenderer('text');
+        }
       }
       return newSettings;
     }
@@ -1231,6 +1277,7 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handsontableBeforeViewRender",
     value: function handsontableBeforeViewRender() {
+      this.portalCache.clear();
       this.getRenderedCellCache().clear();
     }
     /**
@@ -1239,11 +1286,8 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handsontableAfterViewRender",
     value: function handsontableAfterViewRender() {
-      var _this3 = this;
       this.renderersPortalManager.setState({
-        portals: _toConsumableArray(this.portalCacheArray)
-      }, function () {
-        _this3.portalCacheArray = [];
+        portals: _toConsumableArray(this.portalCache.values())
       });
     }
     /**
@@ -1279,14 +1323,14 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this4 = this;
+      var _this3 = this;
       var newGlobalSettings = this.createNewGlobalSettings();
       this.hotInstance = new Handsontable__default["default"].Core(this.hotElementRef, newGlobalSettings);
       this.hotInstance.addHook('beforeViewRender', function () {
-        return _this4.handsontableBeforeViewRender();
+        return _this3.handsontableBeforeViewRender();
       });
       this.hotInstance.addHook('afterViewRender', function () {
-        return _this4.handsontableAfterViewRender();
+        return _this3.handsontableAfterViewRender();
       });
       // `init` missing in Handsontable's type definitions.
       this.hotInstance.init();
@@ -1320,7 +1364,7 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this4 = this;
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
@@ -1330,14 +1374,14 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
         return isHotColumn(childNode);
       }).map(function (childNode, columnIndex) {
         return React__default["default"].cloneElement(childNode, {
-          _componentRendererColumns: _this5.componentRendererColumns,
-          _emitColumnSettings: _this5.setHotColumnSettings.bind(_this5),
+          _componentRendererColumns: _this4.componentRendererColumns,
+          _emitColumnSettings: _this4.setHotColumnSettings.bind(_this4),
           _columnIndex: columnIndex,
-          _getChildElementByType: getChildElementByType.bind(_this5),
-          _getRendererWrapper: _this5.getRendererWrapper.bind(_this5),
-          _getEditorClass: _this5.getEditorClass.bind(_this5),
-          _getOwnerDocument: _this5.getOwnerDocument.bind(_this5),
-          _getEditorCache: _this5.getEditorCache.bind(_this5),
+          _getChildElementByType: getChildElementByType.bind(_this4),
+          _getRendererWrapper: _this4.getRendererWrapper.bind(_this4),
+          _getEditorClass: _this4.getEditorClass.bind(_this4),
+          _getOwnerDocument: _this4.getOwnerDocument.bind(_this4),
+          _getEditorCache: _this4.getEditorCache.bind(_this4),
           children: childNode.props.children
         });
       });
@@ -1652,6 +1696,7 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
 exports.BaseEditorComponent = BaseEditorComponent;
 exports.HotColumn = HotColumn;
 exports.HotTable = HotTable;
+exports.HotTableClass = HotTableClass;
 exports["default"] = HotTable;
 
 Object.defineProperty(exports, '__esModule', { value: true });