@handsontable/react 0.0.0-next-9ec04ce-20221121

package/helpers.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import { HotEditorCache, HotEditorElement } from './types';
+/**
+ * Warning message for the `autoRowSize`/`autoColumnSize` compatibility check.
+ */
+export declare const AUTOSIZE_WARNING: string;
+/**
+ * Message for the warning thrown if the Handsontable instance has been destroyed.
+ */
+export declare const HOT_DESTROYED_WARNING: string;
+/**
+ * String identifier for the global-scoped editor components.
+ */
+export declare const GLOBAL_EDITOR_SCOPE = "global";
+/**
+ * Logs warn to the console if the `console` object is exposed.
+ *
+ * @param {...*} args Values which will be logged.
+ */
+export declare function warn(...args: any[]): void;
+/**
+ * Filter out and return elements of the provided `type` from the `HotColumn` component's children.
+ *
+ * @param {React.ReactNode} children HotTable children array.
+ * @param {String} type Either `'hot-renderer'` or `'hot-editor'`.
+ * @returns {Object|null} A child (React node) or `null`, if no child of that type was found.
+ */
+export declare function getChildElementByType(children: React.ReactNode, type: string): React.ReactElement | null;
+/**
+ * Get the reference to the original editor class.
+ *
+ * @param {React.ReactElement} editorElement React element of the editor class.
+ * @returns {Function} Original class of the editor component.
+ */
+export declare function getOriginalEditorClass(editorElement: HotEditorElement): any;
+/**
+ * Remove editor containers from DOM.
+ *
+ * @param {Document} [doc] Document to be used.
+ * @param {Map} editorCache The editor cache reference.
+ */
+export declare function removeEditorContainers(doc?: Document): void;
+/**
+ * Create an editor portal.
+ *
+ * @param {Document} [doc] Document to be used.
+ * @param {React.ReactElement} editorElement Editor's element.
+ * @param {Map} editorCache The editor cache reference.
+ * @returns {React.ReactPortal} The portal for the editor.
+ */
+export declare function createEditorPortal(doc: Document, editorElement: HotEditorElement, editorCache: HotEditorCache): React.ReactPortal;
+/**
+ * Get an editor element extended with a instance-emitting method.
+ *
+ * @param {React.ReactNode} children Component children.
+ * @param {Map} editorCache Component's editor cache.
+ * @param {string|number} [editorColumnScope] The editor scope (column index or a 'global' string). Defaults to
+ * 'global'.
+ * @returns {React.ReactElement} An editor element containing the additional methods.
+ */
+export declare function getExtendedEditorElement(children: React.ReactNode, editorCache: HotEditorCache, editorColumnScope?: string | number): React.ReactElement | null;
+/**
+ * Create a react component and render it to an external DOM done.
+ *
+ * @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 {Function} callback Callback to be called after the component has been mounted.
+ * @param {Document} [ownerDocument] The owner document to set the portal up into.
+ * @returns {{portal: React.ReactPortal, portalContainer: HTMLElement}} An object containing the portal and its container.
+ */
+export declare function createPortal(rElement: React.ReactElement, props: any, callback: Function, ownerDocument?: Document): {
+    portal: React.ReactPortal;
+    portalContainer: HTMLElement;
+};
+/**
+ * Get an object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
+ * component.
+ *
+ * @param {Object} props Object containing the react element props.
+ * @param {Boolean} randomizeId If set to `true`, the function will randomize the `id` property when no `id` was present in the `prop` object.
+ * @returns An object containing the `id`, `className` and `style` keys, representing the corresponding props passed to the
+ * component.
+ */
+export declare function getContainerAttributesProps(props: any, randomizeId?: boolean): {
+    id: string;
+    className: string;
+    style: object;
+};
+/**
+ * Add the `UNSAFE_` prefixes to the deprecated lifecycle methods for React >= 16.3.
+ *
+ * @param {Object} instance Instance to have the methods renamed.
+ */
+export declare function addUnsafePrefixes(instance: {
+    UNSAFE_componentWillUpdate?: Function;
+    componentWillUpdate: Function;
+    UNSAFE_componentWillMount?: Function;
+    componentWillMount: Function;
+}): void;

package/hotColumn.d.ts

@@ -0,0 +1,82 @@
+import React, { ReactPortal } from 'react';
+import { HotTableProps, HotColumnProps } from './types';
+import Handsontable from 'handsontable/base';
+declare class HotColumn extends React.Component<HotColumnProps, {}> {
+    internalProps: string[];
+    columnSettings: Handsontable.ColumnSettings;
+    /**
+     * Local editor portal cache.
+     *
+     * @private
+     * @type {ReactPortal}
+     */
+    private localEditorPortal;
+    /**
+     * HotColumn class constructor.
+     *
+     * @param {HotColumnProps} props Component props.
+     * @param {*} [context] Component context.
+     */
+    constructor(props: HotColumnProps, context?: any);
+    /**
+     * Get the local editor portal cache property.
+     *
+     * @return {ReactPortal} Local editor portal.
+     */
+    getLocalEditorPortal(): ReactPortal;
+    /**
+     * Set the local editor portal cache property.
+     *
+     * @param {ReactPortal} portal Local editor portal.
+     */
+    setLocalEditorPortal(portal: any): void;
+    /**
+     * Filter out all the internal properties and return an object with just the Handsontable-related props.
+     *
+     * @returns {Object}
+     */
+    getSettingsProps(): HotTableProps;
+    /**
+     * Get the editor element for the current column.
+     *
+     * @returns {React.ReactElement} React editor component element.
+     */
+    getLocalEditorElement(): React.ReactElement | null;
+    /**
+     * Create the column settings based on the data provided to the `HotColumn` component and it's child components.
+     */
+    createColumnSettings(): void;
+    /**
+     * Create the local editor portal and its destination HTML element if needed.
+     *
+     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
+     */
+    createLocalEditorPortal(children?: React.ReactNode): void;
+    /**
+     * Emit the column settings to the parent using a prop passed from the parent.
+     */
+    emitColumnSettings(): void;
+    /**
+     * Logic performed before the mounting of the HotColumn component.
+     */
+    componentWillMount(): void;
+    /**
+     * Logic performed after the mounting of the HotColumn component.
+     */
+    componentDidMount(): void;
+    /**
+     * Logic performed before the updating of the HotColumn component.
+     */
+    componentWillUpdate(nextProps: Readonly<HotColumnProps>, nextState: Readonly<{}>, nextContext: any): void;
+    /**
+     * Logic performed after the updating of the HotColumn component.
+     */
+    componentDidUpdate(): void;
+    /**
+     * Render the portals of the editors, if there are any.
+     *
+     * @returns {React.ReactElement}
+     */
+    render(): React.ReactElement;
+}
+export { HotColumn };

package/hotTable.d.ts

@@ -0,0 +1,277 @@
+import React from 'react';
+import Handsontable from 'handsontable/base';
+import { PortalManager } from './portalManager';
+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}
+     */
+    portalManager: PortalManager;
+    /**
+     * Array containing the portals cashed to be rendered in bulk after Handsontable's render cycle.
+     */
+    portalCacheArray: React.ReactPortal[];
+    /**
+     * Global editor portal cache.
+     *
+     * @private
+     * @type {React.ReactPortal}
+     */
+    private globalEditorPortal;
+    /**
+     * 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;
+    /**
+     * HotTable class constructor.
+     *
+     * @param {HotTableProps} props Component props.
+     * @param {*} [context] Component context.
+     */
+    constructor(props: HotTableProps, context?: any);
+    /**
+     * 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;
+    /**
+     * Get the global editor portal property.
+     *
+     * @return {React.ReactPortal} The global editor portal.
+     */
+    getGlobalEditorPortal(): React.ReactPortal;
+    /**
+     * Set the private editor portal cache property.
+     *
+     * @param {React.ReactPortal} portal Global editor portal.
+     */
+    setGlobalEditorPortal(portal: React.ReactPortal): void;
+    /**
+     * 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(children?: React.ReactNode): HotEditorElement | null;
+    /**
+     * Create the global editor portal and its destination HTML element if needed.
+     *
+     * @param {React.ReactNode} [children] Children of the HotTable instance. Defaults to `this.props.children`.
+     */
+    createGlobalEditorPortal(children?: React.ReactNode): void;
+    /**
+     * 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 portal manager ref.
+     *
+     * @param {React.ReactComponent} pmComponent The PortalManager component.
+     */
+    private setPortalManagerRef;
+    /**
+     * Logic performed before the mounting of the component.
+     */
+    componentWillMount(): void;
+    /**
+     * Initialize Handsontable after the component has mounted.
+     */
+    componentDidMount(): void;
+    /**
+     * Logic performed before the component update.
+     */
+    componentWillUpdate(nextProps: Readonly<HotTableProps>, nextState: Readonly<{}>, nextContext: any): 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;
+}
+export default HotTable;
+export { HotTable };

package/index.d.ts

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

package/package.json

@@ -0,0 +1,130 @@
+{
+  "name": "@handsontable/react",
+  "version": "0.0.0-next-9ec04ce-20221121",
+  "description": "Best Data Grid for React with Spreadsheet Look and Feel.",
+  "author": "Handsoncode <hello@handsoncode.net> (https://handsoncode.net)",
+  "homepage": "https://handsontable.com",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "main": "./commonjs/react-handsontable.js",
+  "module": "./es/react-handsontable.js",
+  "jsdelivr": "./dist/react-handsontable.min.js",
+  "unpkg": "./dist/react-handsontable.min.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./dist/react-handsontable.js" : "./dist/react-handsontable.js",
+    "./dist/react-handsontable.min.js" : "./dist/react-handsontable.min.js",
+    ".": {
+      "import": "./es/react-handsontable.mjs",
+      "require": "./commonjs/react-handsontable.js"
+    }
+  },
+  "keywords": [
+    "handsontable",
+    "component",
+    "grid",
+    "data",
+    "table",
+    "data table",
+    "data grid",
+    "spreadsheet",
+    "sheet",
+    "excel",
+    "enterprise",
+    "sort",
+    "formulas",
+    "filter",
+    "search",
+    "conditional",
+    "formatting",
+    "csv",
+    "react",
+    "reactjs",
+    "react component",
+    "react grid",
+    "wrapper"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/handsontable/handsontable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/handsontable/handsontable/issues"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@babel/runtime": "^7.9.2",
+    "@types/react": "^16.9.5",
+    "@types/react-dom": "^16.9.1",
+    "@types/react-redux": "^7.1.7",
+    "babel-core": "^7.0.0-bridge.0",
+    "cpy-cli": "^3.1.1",
+    "cross-env": "^5.2.0",
+    "del-cli": "^3.0.1",
+    "handsontable": "0.0.0-next-9ec04ce-20221121",
+    "jest": "^25.1.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-redux": "^7.1.1",
+    "redux": "^4.0.4",
+    "resize-observer-polyfill": "^1.5.1",
+    "rollup": "^2.58.0",
+    "rollup-plugin-alias": "^1.5.2",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.22.1",
+    "typescript": "3.8.2",
+    "uglify-js": "^3.4.9"
+  },
+  "peerDependencies": {
+    "handsontable": "0.0.0-next-9ec04ce-20221121"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:min",
+    "build:commonjs": "cross-env NODE_ENV=cjs rollup -c",
+    "build:umd": "cross-env NODE_ENV=umd rollup -c",
+    "build:es": "cross-env NODE_ENV=es rollup -c",
+    "build:min": "cross-env NODE_ENV=min rollup -c",
+    "clean": "del-cli ./es/ && del-cli ./commonjs/ && del-cli ./dist/ && del-cli ./*.d.ts",
+    "publish-package": "npm publish",
+    "test": "jest",
+    "watch:commonjs": "cross-env NODE_ENV=cjs rollup -c --watch",
+    "watch:es": "cross-env NODE_ENV=es rollup -c --watch"
+  },
+  "jest": {
+    "testURL": "http://localhost/",
+    "transform": {
+      "^.+\\.tsx?$": "babel-jest",
+      "^.+\\.js$": "babel-jest"
+    },
+    "testRegex": "(/test/(.*).(test|spec)).(jsx?|tsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/test/bootstrap.js"
+    ],
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "test-tsconfig.json",
+        "babelConfig": true
+      }
+    }
+  }
+}

package/portalManager.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * Component class used to manage the renderer component portals.
+ */
+export declare class PortalManager extends React.Component<{}, {
+    portals?: React.ReactPortal[];
+}> {
+    constructor(props: any);
+    render(): React.ReactNode;
+}

package/settingsMapper.d.ts

@@ -0,0 +1,11 @@
+import Handsontable from 'handsontable/base';
+import { HotTableProps } from './types';
+export declare class SettingsMapper {
+    /**
+     * Parse component settings into Handosntable-compatible settings.
+     *
+     * @param {Object} properties Object containing properties from the HotTable object.
+     * @returns {Object} Handsontable-compatible settings object.
+     */
+    static getSettings(properties: HotTableProps): Handsontable.GridSettings;
+}

package/types.d.ts

@@ -0,0 +1,49 @@
+import Handsontable from 'handsontable/base';
+import React from 'react';
+import { ConnectedComponent } from 'react-redux';
+/**
+ * Type of the editor component's ReactElement.
+ */
+export declare type HotEditorElement = React.ReactElement<{}, ConnectedComponent<React.FunctionComponent, any> | any>;
+/**
+ * Type of the identifier under which the cached editor components are stored.
+ */
+export declare type EditorScopeIdentifier = 'global' | number;
+/**
+ * Type of the cache map for the Handsontable editor components.
+ */
+export declare type HotEditorCache = Map<Function, Map<EditorScopeIdentifier, React.Component>>;
+/**
+ * Interface for the `prop` of the HotTable component - extending the default Handsontable settings with additional,
+ * component-related properties.
+ */
+export interface HotTableProps extends Handsontable.GridSettings {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    settings?: Handsontable.GridSettings;
+    children?: React.ReactNode;
+}
+/**
+ * Interface for the props of the component-based editors.
+ */
+export interface HotEditorProps {
+    "hot-editor": any;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Properties related to the HotColumn architecture.
+ */
+export interface HotColumnProps extends Handsontable.ColumnSettings {
+    _componentRendererColumns?: Map<number | string, boolean>;
+    _emitColumnSettings?: (columnSettings: Handsontable.ColumnSettings, columnIndex: number) => void;
+    _columnIndex?: number;
+    _getChildElementByType?: (children: React.ReactNode, type: string) => React.ReactElement;
+    _getRendererWrapper?: (rendererNode: React.ReactElement) => typeof Handsontable.renderers.BaseRenderer;
+    _getEditorClass?: (editorElement: React.ReactElement, editorColumnScope: EditorScopeIdentifier) => typeof Handsontable.editors.BaseEditor;
+    _getEditorCache?: () => HotEditorCache;
+    _getOwnerDocument?: () => Document;
+    children?: React.ReactNode;
+}