@handsontable/react 14.0.0 → 14.1.0-next-514dcd3-20240109

package/es/react-handsontable.mjs

@@ -2,6 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Handsontable from 'handsontable/base';
 
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -23,6 +34,20 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -97,16 +122,32 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
   }
+  return target;
 }
 function _assertThisInitialized(self) {
   if (self === void 0) {
@@ -122,20 +163,6 @@ function _possibleConstructorReturn(self, call) {
   }
   return _assertThisInitialized(self);
 }
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-      result;
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-    return _possibleConstructorReturn(this, result);
-  };
-}
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
@@ -161,20 +188,6 @@ function _arrayLikeToArray(arr, len) {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
 
 var bulkComponentContainer = null;
 /**
@@ -241,14 +254,12 @@ function getOriginalEditorClass(editorElement) {
 /**
  * Create an editor portal.
  *
- * @param {Document} [doc] Document to be used.
+ * @param {Document} doc Document to be used.
  * @param {React.ReactElement} editorElement Editor's element.
  * @returns {React.ReactPortal} The portal for the editor.
  */
-function createEditorPortal() {
-  var doc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
-  var editorElement = arguments.length > 1 ? arguments[1] : undefined;
-  if (editorElement === null) {
+function createEditorPortal(doc, editorElement) {
+  if (typeof doc === 'undefined' || editorElement === null) {
     return null;
   }
   var containerProps = getContainerAttributesProps(editorElement.props, false);
@@ -321,11 +332,19 @@ function createPortal(rElement, props) {
 function getContainerAttributesProps(props) {
   var randomizeId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   return {
-    id: props.id || (randomizeId ? 'hot-' + Math.random().toString(36).substring(5) : void 0),
+    id: props.id || (randomizeId ? 'hot-' + Math.random().toString(36).substring(5) : undefined),
     className: props.className || '',
     style: props.style || {}
   };
 }
+/**
+ * Checks if the environment that the code runs in is a browser.
+ *
+ * @returns {boolean}
+ */
+function isCSR() {
+  return typeof window !== 'undefined';
+}
 
 var SettingsMapper = /*#__PURE__*/function () {
   function SettingsMapper() {
@@ -363,10 +382,9 @@ var SettingsMapper = /*#__PURE__*/function () {
 
 var HotColumn = /*#__PURE__*/function (_React$Component) {
   _inherits(HotColumn, _React$Component);
-  var _super = _createSuper(HotColumn);
   function HotColumn() {
     _classCallCheck(this, HotColumn);
-    return _super.apply(this, arguments);
+    return _callSuper(this, HotColumn, arguments);
   }
   _createClass(HotColumn, [{
     key: "getSettingsProps",
@@ -465,11 +483,10 @@ var HotColumn = /*#__PURE__*/function (_React$Component) {
  */
 var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   _inherits(RenderersPortalManager, _React$Component);
-  var _super = _createSuper(RenderersPortalManager);
   function RenderersPortalManager() {
     var _this;
     _classCallCheck(this, RenderersPortalManager);
-    _this = _super.apply(this, arguments);
+    _this = _callSuper(this, RenderersPortalManager, arguments);
     _this.state = {
       portals: []
     };
@@ -484,7 +501,7 @@ var RenderersPortalManager = /*#__PURE__*/function (_React$Component) {
   return RenderersPortalManager;
 }(React.Component);
 
-var version="14.0.0";
+var version="14.1.0-next-514dcd3-20240109";
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1625,15 +1642,14 @@ var PropTypes = propTypes;
  *
  * ```
  *
- * @class HotTable
+ * @class HotTableCB
  */
-var HotTable = /*#__PURE__*/function (_React$Component) {
-  _inherits(HotTable, _React$Component);
-  var _super = _createSuper(HotTable);
-  function HotTable() {
+var HotTableClass = /*#__PURE__*/function (_React$Component) {
+  _inherits(HotTableClass, _React$Component);
+  function HotTableClass() {
     var _this;
-    _classCallCheck(this, HotTable);
-    _this = _super.apply(this, arguments);
+    _classCallCheck(this, HotTableClass);
+    _this = _callSuper(this, HotTableClass, arguments);
     /**
      * The `id` of the main Handsontable DOM element.
      *
@@ -1698,7 +1714,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
    *
    * @returns The version number of the package.
    */
-  _createClass(HotTable, [{
+  _createClass(HotTableClass, [{
     key: "hotInstance",
     get:
     /**
@@ -1757,7 +1773,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getOwnerDocument",
     value: function getOwnerDocument() {
-      return this.hotElementRef ? this.hotElementRef.ownerDocument : document;
+      if (isCSR()) {
+        return this.hotElementRef ? this.hotElementRef.ownerDocument : document;
+      }
+      return null;
     }
     /**
      * Set the reference to the main Handsontable DOM element.
@@ -1834,11 +1853,10 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     value: function makeEditorClass(editorComponent) {
       var customEditorClass = /*#__PURE__*/function (_Handsontable$editors) {
         _inherits(CustomEditor, _Handsontable$editors);
-        var _super2 = _createSuper(CustomEditor);
         function CustomEditor(hotInstance) {
           var _this2;
           _classCallCheck(this, CustomEditor);
-          _this2 = _super2.call(this, hotInstance);
+          _this2 = _callSuper(this, CustomEditor, [hotInstance]);
           editorComponent.hotCustomEditorInstance = _assertThisInitialized(_this2);
           _this2.editorComponent = editorComponent;
           return _this2;
@@ -2044,7 +2062,6 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this5 = this;
-      var containerProps = getContainerAttributesProps(this.props);
       var isHotColumn = function isHotColumn(childNode) {
         return childNode.type === HotColumn;
       };
@@ -2065,6 +2082,7 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
           children: childNode.props.children
         });
       });
+      var containerProps = getContainerAttributesProps(this.props);
       var editorPortal = createEditorPortal(this.getOwnerDocument(), this.getGlobalEditorElement());
       return React.createElement(React.Fragment, null, React.createElement("div", Object.assign({
         ref: this.setHotElementRef.bind(this)
@@ -2078,24 +2096,39 @@ var HotTable = /*#__PURE__*/function (_React$Component) {
       return version;
     }
   }]);
-  return HotTable;
+  return HotTableClass;
 }(React.Component);
 /**
  * Prop types to be checked at runtime.
  */
-HotTable.propTypes = {
+HotTableClass.propTypes = {
   style: PropTypes.object,
   id: PropTypes.string,
   className: PropTypes.string
 };
 
+var _excluded = ["children"];
+// Use global React variable for `forwardRef` access (React 16 support)
+var HotTable = React.forwardRef(function (_ref, ref) {
+  var _props$id;
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var generatedId = typeof React.useId === 'function' ? React.useId() : undefined;
+  var componentId = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : generatedId;
+  return React.createElement(HotTableClass, Object.assign({
+    id: componentId
+  }, props, {
+    ref: ref
+  }), children);
+});
+HotTable.version = HotTableClass.version;
+
 var BaseEditorComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(BaseEditorComponent, _React$Component);
-  var _super = _createSuper(BaseEditorComponent);
   function BaseEditorComponent() {
     var _this;
     _classCallCheck(this, BaseEditorComponent);
-    _this = _super.apply(this, arguments);
+    _this = _callSuper(this, BaseEditorComponent, arguments);
     _this.name = 'BaseEditorComponent';
     _this.instance = null;
     _this.row = null;

package/helpers.d.ts

@@ -40,7 +40,7 @@ export declare function getOriginalEditorClass(editorElement: HotEditorElement):
 /**
  * Create an editor portal.
  *
- * @param {Document} [doc] Document to be used.
+ * @param {Document} doc Document to be used.
  * @param {React.ReactElement} editorElement Editor's element.
  * @returns {React.ReactPortal} The portal for the editor.
  */
@@ -81,3 +81,9 @@ export declare function getContainerAttributesProps(props: any, randomizeId?: bo
     className: string;
     style: object;
 };
+/**
+ * Checks if the environment that the code runs in is a browser.
+ *
+ * @returns {boolean}
+ */
+export declare function isCSR(): boolean;

package/hotTable.d.ts

@@ -1,237 +1,10 @@
-import React from 'react';
-import Handsontable from 'handsontable/base';
-import { RenderersPortalManager } from './renderersPortalManager';
-import { HotTableProps, HotEditorElement, HotEditorCache, EditorScopeIdentifier } from './types';
-/**
- * A Handsontable-ReactJS wrapper.
- *
- * To implement, use the `HotTable` tag with properties corresponding to Handsontable options.
- * For example:
- *
- * ```js
- * <HotTable id="hot" data={dataObject} contextMenu={true} colHeaders={true} width={600} height={300} stretchH="all" />
- *
- * // is analogous to
- * let hot = new Handsontable(document.getElementById('hot'), {
- *    data: dataObject,
- *    contextMenu: true,
- *    colHeaders: true,
- *    width: 600
- *    height: 300
- * });
- *
- * ```
- *
- * @class HotTable
- */
-declare class HotTable extends React.Component<HotTableProps, {}> {
-    /**
-     * The `id` of the main Handsontable DOM element.
-     *
-     * @type {String}
-     */
-    id: string;
-    /**
-     * Reference to the Handsontable instance.
-     *
-     * @private
-     * @type {Object}
-     */
-    __hotInstance: Handsontable | null;
-    /**
-     * Reference to the main Handsontable DOM element.
-     *
-     * @type {HTMLElement}
-     */
-    hotElementRef: HTMLElement;
-    /**
-     * Class name added to the component DOM element.
-     *
-     * @type {String}
-     */
-    className: string;
-    /**
-     * Style object passed to the component.
-     *
-     * @type {React.CSSProperties}
-     */
-    style: React.CSSProperties;
-    /**
-     * Array of object containing the column settings.
-     *
-     * @type {Array}
-     */
-    columnSettings: Handsontable.ColumnSettings[];
-    /**
-     * Component used to manage the renderer portals.
-     *
-     * @type {React.Component}
-     */
-    renderersPortalManager: RenderersPortalManager;
-    /**
-     * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
-     */
-    portalCacheArray: React.ReactPortal[];
-    /**
-     * The rendered cells cache.
-     *
-     * @private
-     * @type {Map}
-     */
-    private renderedCellCache;
-    /**
-     * Editor cache.
-     *
-     * @private
-     * @type {Map}
-     */
-    private editorCache;
-    /**
-     * Map with column indexes (or a string = 'global') as keys, and booleans as values. Each key represents a component-based editor
-     * declared for the used column index, or a global one, if the key is the `global` string.
-     *
-     * @private
-     * @type {Map}
-     */
-    private componentRendererColumns;
-    /**
-     * Package version getter.
-     *
-     * @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.
-     */
-    static propTypes: object;
-    /**
-     * Get the rendered table cell cache.
-     *
-     * @returns {Map}
-     */
-    getRenderedCellCache(): Map<string, HTMLTableCellElement>;
-    /**
-     * Get the editor cache and return it.
-     *
-     * @returns {Map}
-     */
-    getEditorCache(): HotEditorCache;
-    /**
-     * Clear both the editor and the renderer cache.
-     */
-    clearCache(): void;
-    /**
-     * Get the `Document` object corresponding to the main component element.
-     *
-     * @returns The `Document` object used by the component.
-     */
-    getOwnerDocument(): Document;
-    /**
-     * Set the reference to the main Handsontable DOM element.
-     *
-     * @param {HTMLElement} element The main Handsontable DOM element.
-     */
-    private setHotElementRef;
-    /**
-     * Return a renderer wrapper function for the provided renderer component.
-     *
-     * @param {React.ReactElement} rendererElement React renderer component.
-     * @returns {Handsontable.renderers.Base} The Handsontable rendering function.
-     */
-    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, editorColumnScope?: EditorScopeIdentifier): typeof Handsontable.editors.BaseEditor;
-    /**
-     * Create a class to be passed to the Handsontable's settings.
-     *
-     * @param {React.ReactElement} editorComponent React editor component.
-     * @returns {Function} A class to be passed to the Handsontable editor settings.
-     */
-    makeEditorClass(editorComponent: React.Component): typeof Handsontable.editors.BaseEditor;
-    /**
-     * Get the renderer element for the entire HotTable instance.
-     *
-     * @returns {React.ReactElement} React renderer component element.
-     */
-    getGlobalRendererElement(): React.ReactElement;
-    /**
-     * Get the editor element for the entire HotTable instance.
-     *
-     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
-     * @returns {React.ReactElement} React editor component element.
-     */
-    getGlobalEditorElement(): HotEditorElement | null;
-    /**
-     * Create a new settings object containing the column settings and global editors and renderers.
-     *
-     * @returns {Handsontable.GridSettings} New global set of settings for Handsontable.
-     */
-    createNewGlobalSettings(): Handsontable.GridSettings;
-    /**
-     * Detect if `autoRowSize` or `autoColumnSize` is defined, and if so, throw an incompatibility warning.
-     *
-     * @param {Handsontable.GridSettings} newGlobalSettings New global settings passed as Handsontable config.
-     */
-    displayAutoSizeWarning(newGlobalSettings: Handsontable.GridSettings): void;
-    /**
-     * Sets the column settings based on information received from HotColumn.
-     *
-     * @param {HotTableProps} columnSettings Column settings object.
-     * @param {Number} columnIndex Column index.
-     */
-    setHotColumnSettings(columnSettings: Handsontable.ColumnSettings, columnIndex: number): void;
-    /**
-     * Handsontable's `beforeViewRender` hook callback.
-     */
-    handsontableBeforeViewRender(): void;
-    /**
-     * Handsontable's `afterViewRender` hook callback.
-     */
-    handsontableAfterViewRender(): void;
-    /**
-     * Call the `updateSettings` method for the Handsontable instance.
-     *
-     * @param {Object} newSettings The settings object.
-     */
-    private updateHot;
-    /**
-     * Set the renderers portal manager ref.
-     *
-     * @param {React.ReactComponent} pmComponent The PortalManager component.
-     */
-    private setRenderersPortalManagerRef;
-    /**
-     * Initialize Handsontable after the component has mounted.
-     */
-    componentDidMount(): void;
-    /**
-     * Logic performed after the component update.
-     */
-    componentDidUpdate(): void;
-    /**
-     * Destroy the Handsontable instance when the parent component unmounts.
-     */
-    componentWillUnmount(): void;
-    /**
-     * Render the component.
-     */
-    render(): React.ReactElement;
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HotTableClass } from './hotTableClass';
+import { HotTableProps } from './types';
+interface Version {
+    version?: string;
 }
+declare type HotTable = ForwardRefExoticComponent<HotTableProps & RefAttributes<HotTableClass>> & Version;
+declare const HotTable: HotTable;
 export default HotTable;
 export { HotTable };