@handsontable/react 14.1.0 → 14.2.0-next-4873a35-20240228

package/es/react-handsontable.mjs

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Handsontable from 'handsontable/base';
+import { getRenderer } from 'handsontable/renderers/registry';
+import { getEditor } from 'handsontable/editors/registry';
 
 function _callSuper(t, o, e) {
   return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
@@ -300,23 +302,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.cloneElement(rElement, _objectSpread2({
     key: "".concat(props.row, "-").concat(props.col)
   }, props));
   return {
-    portal: ReactDOM.createPortal(extendedRendererElement, portalContainer, "".concat(props.row, "-").concat(props.col, "-").concat(Math.random())),
+    portal: ReactDOM.createPortal(extendedRendererElement, portalContainer, portalKey),
     portalContainer: portalContainer
   };
 }
@@ -501,7 +507,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React.Component);
 
-var version="14.1.0";
+var version="14.2.0-next-4873a35-20240228";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1682,9 +1688,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.
      *
@@ -1736,6 +1750,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.
      *
@@ -1798,30 +1822,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;
       };
     }
@@ -1930,13 +1968,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 = 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 = getRenderer('text');
+        }
       }
       return newSettings;
     }
@@ -1972,6 +2020,7 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handsontableBeforeViewRender",
     value: function handsontableBeforeViewRender() {
+      this.portalCache.clear();
       this.getRenderedCellCache().clear();
     }
     /**
@@ -1980,11 +2029,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())
       });
     }
     /**
@@ -2020,14 +2066,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.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();
@@ -2061,7 +2107,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;
       };
@@ -2071,14 +2117,14 @@ var HotTableClass = /*#__PURE__*/function (_React$Component) {
         return isHotColumn(childNode);
       }).map(function (childNode, columnIndex) {
         return React.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
         });
       });
@@ -2390,4 +2436,4 @@ var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
   return BaseEditorComponent;
 }(React.Component);
 
-export { BaseEditorComponent, HotColumn, HotTable, HotTable as default };
+export { BaseEditorComponent, HotColumn, HotTable, HotTableClass, HotTable as default };

package/helpers.d.ts

@@ -61,9 +61,11 @@ export declare function getExtendedEditorElement(children: React.ReactNode, edit
  * @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.
  */
-export declare function createPortal(rElement: React.ReactElement, props: any, ownerDocument?: Document): {
+export declare function createPortal(rElement: React.ReactElement, props: any, ownerDocument: Document, portalKey: string, cachedContainer?: HTMLElement): {
     portal: React.ReactPortal;
     portalContainer: HTMLElement;
 };

package/hotTableClass.d.ts

@@ -69,9 +69,17 @@ declare class HotTableClass extends React.Component<HotTableProps, {}> {
      */
     renderersPortalManager: RenderersPortalManager;
     /**
-     * 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>}
      */
-    portalCacheArray: React.ReactPortal[];
+    portalCache: Map<string, React.ReactPortal>;
+    /**
+     * Portal Container Cache
+     *
+     * @private
+     * @type {Map}
+     */
+    private portalContainerCache;
     /**
      * The rendered cells cache.
      *
@@ -113,6 +121,12 @@ declare class HotTableClass extends React.Component<HotTableProps, {}> {
      * Prop types to be checked at runtime.
      */
     static propTypes: object;
+    /**
+     * Get Portal Container Cache
+     *
+     * @returns {Map}
+     */
+    getPortalContainerCache(): Map<string, HTMLElement>;
     /**
      * Get the rendered table cell cache.
      *
@@ -147,7 +161,7 @@ declare class HotTableClass extends React.Component<HotTableProps, {}> {
      * @param {React.ReactElement} rendererElement React renderer component.
      * @returns {Handsontable.renderers.Base} The Handsontable rendering function.
      */
-    getRendererWrapper(rendererElement: React.ReactElement): typeof Handsontable.renderers.BaseRenderer | any;
+    getRendererWrapper(rendererElement: React.ReactElement): typeof Handsontable.renderers.BaseRenderer;
     /**
      * Create a fresh class to be used as an editor, based on the provided editor React element.
      *

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './hotColumn';
 export * from './hotTable';
+export * from './hotTableClass';
 export * from './types';
 export * from './baseEditorComponent';
 export { default } from './hotTable';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handsontable/react",
-  "version": "14.1.0",
+  "version": "14.2.0-next-4873a35-20240228",
   "description": "Best Data Grid for React with Spreadsheet Look and Feel.",
   "author": "Handsoncode <hello@handsoncode.net> (https://handsoncode.net)",
   "homepage": "https://handsontable.com",
@@ -68,7 +68,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "handsontable": "^14.0.0",
+    "handsontable": "14.2.0-next-4873a35-20240228",
     "jest": "^25.1.0",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
@@ -89,7 +89,7 @@
     "uglify-js": "^3.4.9"
   },
   "peerDependencies": {
-    "handsontable": ">=14.0.0"
+    "handsontable": "14.2.0-next-4873a35-20240228"
   },
   "scripts": {
     "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:min",