@rowsncolumns/grid 9.0.3 → 13.2.32

package/dist/cjs/hooks/useImage.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+// Global cache to share images across all component instances
+var imageCache = new Map();
+var loadImage = function (url, crossOrigin) {
+    var existing = imageCache.get(url);
+    if (existing) {
+        return existing;
+    }
+    var img = new Image();
+    img.crossOrigin = crossOrigin || "anonymous";
+    var entry = {
+        image: img,
+        status: "loading",
+        width: 0,
+        height: 0,
+        subscribers: new Set(),
+    };
+    imageCache.set(url, entry);
+    var onload = function () {
+        entry.status = "loaded";
+        entry.width = img.width;
+        entry.height = img.height;
+        entry.subscribers.forEach(function (callback) { return callback(entry); });
+    };
+    var onerror = function () {
+        entry.status = "failed";
+        entry.subscribers.forEach(function (callback) { return callback(entry); });
+    };
+    img.addEventListener("load", onload);
+    img.addEventListener("error", onerror);
+    img.src = url;
+    return entry;
+};
+var useImage = function (_a) {
+    var url = _a.url, crossOrigin = _a.crossOrigin;
+    var _b = tslib_1.__read((0, react_1.useState)(function () {
+        if (!url) {
+            return {
+                image: undefined,
+                status: "loading",
+                width: 0,
+                height: 0,
+            };
+        }
+        var entry = loadImage(url, crossOrigin);
+        return {
+            image: entry.status === "loaded" ? entry.image : undefined,
+            status: entry.status,
+            width: entry.width,
+            height: entry.height,
+        };
+    }), 2), state = _b[0], setState = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (!url)
+            return;
+        var entry = loadImage(url, crossOrigin);
+        var updateState = function (entry) {
+            setState({
+                image: entry.status === "loaded" ? entry.image : undefined,
+                status: entry.status,
+                width: entry.width,
+                height: entry.height,
+            });
+        };
+        // Subscribe to updates
+        entry.subscribers.add(updateState);
+        // If already loaded, update immediately
+        if (entry.status !== "loading") {
+            updateState(entry);
+        }
+        return function () {
+            entry.subscribers.delete(updateState);
+        };
+    }, [url, crossOrigin]);
+    return state;
+};
+exports.default = useImage;

package/dist/{hooks → cjs/hooks}/usePagination.d.ts

@@ -5,9 +5,9 @@ export interface PaginationProps {
      */
     pageSize: number;
     /**
-     * Initial page index. Start from 1
+     * Initial current page index. Start from 1
      */
-    initialPage?: number;
+    initialCurrentPage?: number;
     /**
      * Total number of rows
      */
@@ -66,3 +66,4 @@ export interface PaginationResults {
  */
 declare const usePagination: (props: PaginationProps) => PaginationResults;
 export default usePagination;
+//# sourceMappingURL=usePagination.d.ts.map

package/dist/cjs/hooks/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../hooks/usePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EACN,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,GAClC,KAAK,CAAC,cAAc,CAAC,wBAAwB,CAAC,CAAC;CACpD;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,iBAAiB,EACjB,qBAAqB,CACtB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,OAAO,eAAe,KAAG,iBAsC/C,CAAC;AAuCF,eAAe,aAAa,CAAC"}

package/dist/cjs/hooks/usePagination.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+/**
+ * Pagination hook
+ * @param props
+ */
+var usePagination = function (props) {
+    var _a = props.initialCurrentPage, initialCurrentPage = _a === void 0 ? 1 : _a, _b = props.pageSize, pageSize = _b === void 0 ? 10 : _b, _c = props.total, total = _c === void 0 ? 0 : _c, onChange = props.onChange, _d = props.component, component = _d === void 0 ? PaginationComponent : _d;
+    var _e = tslib_1.__read((0, react_1.useState)(initialCurrentPage), 2), currentPage = _e[0], setCurrentPage = _e[1];
+    var totalPages = Math.ceil(total / pageSize);
+    var nextPage = function () {
+        return setCurrentPage(function (prev) { return Math.min(prev + 1, totalPages); });
+    };
+    var prevPage = function () { return setCurrentPage(function (prev) { return Math.max(prev - 1, 1); }); };
+    var goToFirst = function () { return setCurrentPage(1); };
+    var goToLast = function () { return setCurrentPage(totalPages); };
+    var goToPage = function (page) { return setCurrentPage(page); };
+    (0, react_1.useEffect)(function () {
+        onChange && onChange(currentPage);
+    }, [currentPage]);
+    var pageProps = {
+        currentPage: currentPage,
+        totalPages: totalPages,
+        nextPage: nextPage,
+        prevPage: prevPage,
+        goToFirst: goToFirst,
+        goToLast: goToLast,
+        goToPage: goToPage,
+        pageSize: pageSize,
+    };
+    var paginationComponent = react_1.default.createElement(component, pageProps);
+    return tslib_1.__assign({ paginationComponent: paginationComponent }, pageProps);
+};
+var PaginationComponent = function (_a) {
+    var currentPage = _a.currentPage, goToFirst = _a.goToFirst, goToLast = _a.goToLast, goToPage = _a.goToPage, totalPages = _a.totalPages, nextPage = _a.nextPage, prevPage = _a.prevPage;
+    var pages = [];
+    var _loop_1 = function (i) {
+        var isActive = currentPage === i;
+        pages.push(react_1.default.createElement("button", { onClick: function () { return goToPage(i); } }, isActive ? react_1.default.createElement("strong", null, i) : i));
+    };
+    for (var i = 1; i <= totalPages; i++) {
+        _loop_1(i);
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("button", { onClick: goToFirst, disabled: currentPage === 1 }, "First page"),
+        react_1.default.createElement("button", { onClick: prevPage, disabled: currentPage === 1 }, "Prev page"),
+        pages,
+        react_1.default.createElement("button", { onClick: nextPage, disabled: currentPage === totalPages }, "Next page"),
+        react_1.default.createElement("button", { onClick: goToLast, disabled: currentPage === totalPages }, "Last page")));
+};
+exports.default = usePagination;

package/dist/{hooks → cjs/hooks}/useSizer.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import { ViewPortProps, GridRef, CellInterface, ItemSizer } from "./../Grid";
-import { HiddenType } from "./../helpers";
+import type React from "react";
+import type { GridRef, ViewPortProps } from "./../Grid";
+import type { HiddenType } from "./../helpers";
 export interface IProps {
     /**
      * Used to access grid functions
@@ -9,15 +9,17 @@ export interface IProps {
     /**
      * Value getter for a cell
      */
-    getValue: (cell: CellInterface) => any;
+    getTextFormat?: (rowIndex: number, columnIndex: number) => any;
     /**
      * Visible rows when the grid is first visible, Since we do not know how many rows  can fit
      */
     initialVisibleRows?: number;
+    initialVisibleColumns?: number;
     /**
      * Restrict column width by this number
      */
-    minColumnWidth?: number;
+    minColumnDimension?: number;
+    minRowDimension?: number;
     /**
      * Cell padding, used for width calculation
      */
@@ -49,14 +51,11 @@ export interface IProps {
      * No of rows in teh grid
      */
     rowCount?: number;
+    columnCount?: number;
     /**
      * Enable autoresize
      */
     autoResize?: boolean;
-    /**
-     * Map of index to size
-     */
-    columnSizes?: SizeType;
     /**
      * Hidden rows
      */
@@ -69,6 +68,7 @@ export interface IProps {
      * Number of frozen rows
      */
     frozenRows?: number;
+    frozenColumns?: number;
     /**
      * Current scaling factor
      */
@@ -76,27 +76,9 @@ export interface IProps {
     /**
      * Get text value
      */
-    getText: (config: any) => string | undefined;
+    getTextValue?: (rowIndex: number, columnIndex: number) => string | undefined;
 }
 export type ResizeStrategy = "lazy" | "full";
-export interface AutoResizerResults {
-    /**
-     * Column width function consumed by the grid
-     */
-    columnWidth?: ItemSizer;
-    /**
-     * Callback when viewport is changed
-     */
-    onViewChange: (cells: ViewPortProps) => void;
-    /**
-     * Get column width based on resize strategy
-     */
-    getColumnWidth: (columnIndex: number, scale?: number) => number;
-    /**
-     * Text size getter
-     */
-    getTextMetrics: (text: string | number) => TextDimensions;
-}
 export interface TextDimensions {
     width: number;
     height: number;
@@ -104,6 +86,13 @@ export interface TextDimensions {
 export type SizeType = {
     [key: number]: number;
 };
+export interface TextFormat {
+    bold?: boolean;
+    spacing?: number;
+    fontSize?: number;
+    fontFamily?: string;
+    italic?: boolean;
+}
 /**
  * Auto sizer hook
  * @param param
@@ -111,5 +100,15 @@ export type SizeType = {
  * TODO
  * Dynamically resize columns after user has scrolled down/view port changed ?
  */
-declare const useAutoSizer: ({ gridRef, getValue, initialVisibleRows, cellSpacing, minColumnWidth, timeout, resizeStrategy, rowCount, resizeOnScroll, fontFamily, fontSize, fontWeight, fontStyle, autoResize, columnSizes, frozenRows, scale, isHiddenRow, isHiddenColumn, getText, }: IProps) => AutoResizerResults;
+declare const useAutoSizer: ({ gridRef, getTextFormat, initialVisibleRows, initialVisibleColumns, cellSpacing, minColumnDimension, minRowDimension, timeout, resizeStrategy, rowCount, columnCount, resizeOnScroll, fontFamily, fontSize, fontWeight, fontStyle, autoResize, frozenRows, frozenColumns, scale, isHiddenRow, isHiddenColumn, getTextValue, }: IProps) => {
+    getColumnWidth: (columnIndex: number) => number;
+    getRowHeight: (rowIndex: number) => number;
+    onViewChange: (cells: ViewPortProps) => void;
+    getCellDimensions: (rowIndex: number, columnIndex: number, textOverride?: string) => {
+        width: number;
+        height: number;
+    };
+    columnWidth?: ((columnIndex: number) => number) | undefined;
+};
 export default useAutoSizer;
+//# sourceMappingURL=useSizer.d.ts.map

package/dist/cjs/hooks/useSizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSizer.d.ts","sourceRoot":"","sources":["../../../hooks/useSizer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAiB,OAAO,EAAC,aAAa,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,KAAK,EACV,UAAU,EAAC,MAAM,cAAc,CAAC;AAOlC,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IAChD;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,GAAG,CAAC;IAC/D;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,cAAc,EAAE,UAAU,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CAC9E;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAID;;;;;;GAMG;AACH,QAAA,MAAM,YAAY,GAAI,gUAwBnB,MAAM;kCAgFS,MAAM;6BA8CT,MAAM;0BA0CT,aAAa;kCA/HV,MAAM,eAAe,MAAM,iBAAiB,MAAM;;;;iCAuC/C,MAAM;CAuHvB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/cjs/hooks/useSizer.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var tiny_invariant_1 = tslib_1.__importDefault(require("tiny-invariant"));
+var helpers_1 = require("./../helpers");
+var defaultGetText = function (text) { return text; };
+/**
+ * Auto sizer hook
+ * @param param
+ *
+ * TODO
+ * Dynamically resize columns after user has scrolled down/view port changed ?
+ */
+var useAutoSizer = function (_a) {
+    var gridRef = _a.gridRef, getTextFormat = _a.getTextFormat, _b = _a.initialVisibleRows, initialVisibleRows = _b === void 0 ? 20 : _b, _c = _a.initialVisibleColumns, initialVisibleColumns = _c === void 0 ? 20 : _c, _d = _a.cellSpacing, cellSpacing = _d === void 0 ? 10 : _d, _e = _a.minColumnDimension, minColumnDimension = _e === void 0 ? 60 : _e, _f = _a.minRowDimension, minRowDimension = _f === void 0 ? 60 : _f, _g = _a.timeout, timeout = _g === void 0 ? 300 : _g, _h = _a.resizeStrategy, resizeStrategy = _h === void 0 ? "lazy" : _h, rowCount = _a.rowCount, columnCount = _a.columnCount, _j = _a.resizeOnScroll, resizeOnScroll = _j === void 0 ? true : _j, _k = _a.fontFamily, fontFamily = _k === void 0 ? "Arial" : _k, _l = _a.fontSize, fontSize = _l === void 0 ? 12 : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? "" : _m, _o = _a.fontStyle, fontStyle = _o === void 0 ? "" : _o, _p = _a.autoResize, autoResize = _p === void 0 ? true : _p, _q = _a.frozenRows, frozenRows = _q === void 0 ? 0 : _q, _r = _a.frozenColumns, frozenColumns = _r === void 0 ? 0 : _r, _s = _a.scale, scale = _s === void 0 ? 1 : _s, isHiddenRow = _a.isHiddenRow, isHiddenColumn = _a.isHiddenColumn, _t = _a.getTextValue, getTextValue = _t === void 0 ? defaultGetText : _t;
+    (0, tiny_invariant_1.default)(!(resizeStrategy === "full" && rowCount === void 0), "Row count should be specified if resize stragtegy is full");
+    var autoSizer = (0, react_1.useRef)(helpers_1.autoSizerCanvas);
+    var _u = tslib_1.__read((0, react_1.useState)({
+        rowStartIndex: 0,
+        rowStopIndex: 0,
+        columnStartIndex: 0,
+        columnStopIndex: 0,
+        visibleRowStartIndex: 0,
+        visibleRowStopIndex: 0,
+        visibleColumnStartIndex: 0,
+        visibleColumnStopIndex: 0,
+    }), 2), viewport = _u[0], setViewport = _u[1];
+    var isMounted = (0, react_1.useRef)(false);
+    var handleResize = (0, react_1.useCallback)(function (_a) {
+        var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex;
+        gridRef.current &&
+            gridRef.current.resetAfterIndices({ rowIndex: rowIndex, columnIndex: columnIndex });
+    }, []);
+    var debounceResizer = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        isMounted.current = true;
+        debounceResizer.current = (0, helpers_1.debounce)(handleResize, timeout);
+    }, []);
+    /* Update any styles, fonts if necessary */
+    (0, react_1.useEffect)(function () {
+        autoSizer.current.setFont({ fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, fontStyle: fontStyle });
+    }, [fontFamily, fontSize, fontWeight, fontStyle]);
+    /**
+     * Get width of a single cell
+     */
+    var getCellDimensions = (0, react_1.useCallback)(function (rowIndex, columnIndex, textOverride) {
+        var _a, _b, _c, _d;
+        var cell = { rowIndex: rowIndex, columnIndex: columnIndex };
+        var textFormat = getTextFormat === null || getTextFormat === void 0 ? void 0 : getTextFormat(cell.rowIndex, cell.columnIndex);
+        var text = textOverride !== null && textOverride !== void 0 ? textOverride : getTextValue(cell.rowIndex, cell.columnIndex);
+        var width = (_a = textFormat === null || textFormat === void 0 ? void 0 : textFormat.spacing) !== null && _a !== void 0 ? _a : 0;
+        var height = (_b = textFormat === null || textFormat === void 0 ? void 0 : textFormat.spacing) !== null && _b !== void 0 ? _b : 0;
+        /* Check if its null */
+        if (!(0, helpers_1.isNull)(text) && text !== void 0) {
+            /* Reset fonts */
+            autoSizer.current.reset();
+            if (textFormat) {
+                var isBold = textFormat.bold;
+                autoSizer.current.setFont({
+                    fontWeight: isBold ? "bold" : "",
+                    fontSize: ((_c = textFormat.fontSize) !== null && _c !== void 0 ? _c : fontSize) * scale,
+                    fontFamily: (_d = textFormat.fontFamily) !== null && _d !== void 0 ? _d : fontFamily,
+                    fontStyle: textFormat.italic ? "italic" : "",
+                });
+            }
+            var metrics = autoSizer.current.measureText(text);
+            if (metrics) {
+                width += Math.ceil(metrics.width) + cellSpacing;
+                height += Math.ceil(metrics.height) + cellSpacing;
+            }
+        }
+        return { width: width, height: height };
+    }, [scale, getTextFormat, cellSpacing, getTextValue]);
+    /**
+     * Calculate column width
+     */
+    var getColumnWidth = (0, react_1.useCallback)(function (columnIndex) {
+        var _a = viewport !== null && viewport !== void 0 ? viewport : {}, _b = _a.rowStartIndex, rowStartIndex = _b === void 0 ? 0 : _b, _c = _a.rowStopIndex, rowStopIndex = _c === void 0 ? 0 : _c;
+        var visibleRows = resizeStrategy === "full"
+            ? rowCount
+            : rowStopIndex || initialVisibleRows;
+        var start = resizeStrategy === "full" ? 0 : rowStartIndex;
+        var maxWidth = minColumnDimension;
+        /* Calculate for frozen rows */
+        for (var i = 0; i < frozenRows; i++) {
+            if (isHiddenRow(i)) {
+                continue;
+            }
+            var width = getCellDimensions(i, columnIndex).width;
+            if (width > maxWidth)
+                maxWidth = width;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleRows) {
+            if (isHiddenRow(start)) {
+                start++;
+                continue;
+            }
+            var width = getCellDimensions(start, columnIndex).width;
+            if (width > maxWidth)
+                maxWidth = width;
+            start++;
+        }
+        return maxWidth / scale;
+    }, [
+        viewport,
+        initialVisibleRows,
+        minColumnDimension,
+        frozenRows,
+        scale,
+        getCellDimensions,
+        isHiddenRow,
+    ]);
+    /**
+     * Calculate Row height
+     */
+    var getRowHeight = (0, react_1.useCallback)(function (rowIndex) {
+        var _a = viewport !== null && viewport !== void 0 ? viewport : {}, _b = _a.columnStartIndex, columnStartIndex = _b === void 0 ? 0 : _b, _c = _a.columnStopIndex, columnStopIndex = _c === void 0 ? 0 : _c;
+        var visibleColumns = resizeStrategy === "full"
+            ? columnCount
+            : columnStopIndex || initialVisibleColumns;
+        var start = resizeStrategy === "full" ? 0 : columnStartIndex;
+        var maxHeight = minRowDimension;
+        /* Calculate for frozen rows */
+        for (var i = 0; i < frozenColumns; i++) {
+            if (isHiddenColumn(i)) {
+                continue;
+            }
+            var height = getCellDimensions(i, rowIndex).height;
+            if (height > maxHeight)
+                maxHeight = height;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleColumns) {
+            if (isHiddenRow(start)) {
+                start++;
+                continue;
+            }
+            var height = getCellDimensions(rowIndex, start).height;
+            if (height > maxHeight)
+                maxHeight = height;
+            start++;
+        }
+        return maxHeight / scale;
+    }, [
+        viewport,
+        initialVisibleColumns,
+        minRowDimension,
+        isHiddenColumn,
+        frozenColumns,
+        scale,
+        getCellDimensions,
+    ]);
+    var handleViewChange = (0, react_1.useCallback)(function (cells) {
+        /* Update viewport cells */
+        setViewport(cells);
+        /* Check if viewport has changed */
+        if (resizeStrategy === "full" ||
+            !resizeOnScroll ||
+            (cells.rowStartIndex === viewport.rowStartIndex &&
+                cells.columnStartIndex === viewport.columnStartIndex))
+            return;
+        if (gridRef.current) {
+            /* During first mount, column width is calculated. Do not re-calculate */
+            if (!isMounted.current)
+                return;
+            debounceResizer.current({
+                rowIndex: cells.rowStartIndex,
+                columnIndex: cells.columnStartIndex,
+            });
+        }
+    }, [resizeOnScroll, viewport, resizeStrategy]);
+    return tslib_1.__assign(tslib_1.__assign({}, (autoResize ? { columnWidth: getColumnWidth } : undefined)), { getColumnWidth: getColumnWidth, getRowHeight: getRowHeight, onViewChange: handleViewChange, getCellDimensions: getCellDimensions });
+};
+exports.default = useAutoSizer;

package/dist/{hooks → cjs/hooks}/useTooltip.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CellInterface, GridRef } from "../Grid";
+import type { CellInterface, GridRef } from "../Grid";
 export interface TooltipOptions {
     /**
      * Tooltip component
@@ -40,3 +40,4 @@ export interface DefaultTooltipProps {
 }
 declare const useTooltip: ({ gridRef, getTooltip, }: TooltipOptions) => TooltipResults;
 export default useTooltip;
+//# sourceMappingURL=useTooltip.d.ts.map

package/dist/cjs/hooks/useTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../hooks/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGtD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,gBAAgB,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC5C;;OAEG;IACH,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtE;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACxE;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmCD,QAAA,MAAM,UAAU,GAAI,0BAGjB,cAAc,KAAG,cAmFnB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/cjs/hooks/useTooltip.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var helpers_1 = require("../helpers");
+var DefaultTooltipComponent = function (_a) {
+    var _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, _d = _a.scrollLeft, scrollLeft = _d === void 0 ? 0 : _d, _e = _a.scrollTop, scrollTop = _e === void 0 ? 0 : _e, _f = _a.width, width = _f === void 0 ? 0 : _f, _g = _a.height, height = _g === void 0 ? 0 : _g;
+    var posX = x + width - scrollLeft;
+    var posY = y - scrollTop;
+    return (react_1.default.createElement("div", { style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            transform: "translate(".concat(posX, "px, ").concat(posY, "px)"),
+            maxWidth: 200,
+            minWidth: 160,
+            background: "white",
+            boxShadow: "0 4px 8px 3px rgba(60,64,67,.15)",
+            padding: 12,
+            borderRadius: 4,
+            fontSize: 13,
+        } }, x));
+};
+var getDefaultTooltip = function () { return DefaultTooltipComponent; };
+var useTooltip = function (_a) {
+    var gridRef = _a.gridRef, _b = _a.getTooltip, getTooltip = _b === void 0 ? getDefaultTooltip : _b;
+    var _c = tslib_1.__read((0, react_1.useState)(null), 2), activeCell = _c[0], setActiveCell = _c[1];
+    var isTooltipActive = (0, react_1.useRef)(false);
+    var activeCellRef = (0, react_1.useRef)(activeCell);
+    var _d = tslib_1.__read((0, react_1.useState)({}), 2), tooltipPosition = _d[0], setTooltipPosition = _d[1];
+    var showTooltip = !!activeCell;
+    var TooltipComponent = (0, react_1.useMemo)(function () {
+        return getTooltip(activeCell);
+    }, [activeCell, getTooltip]);
+    var handleTooltipMouseEnter = (0, react_1.useCallback)(function () {
+        isTooltipActive.current = true;
+    }, []);
+    var handleTooltipMouseLeave = (0, react_1.useCallback)(function () {
+        isTooltipActive.current = false;
+        setActiveCell(null);
+    }, []);
+    var tooltipComponent = showTooltip && TooltipComponent ? (react_1.default.createElement(TooltipComponent, tslib_1.__assign({}, tooltipPosition, { onMouseEnter: handleTooltipMouseEnter, onMouseLeave: handleTooltipMouseLeave }))) : null;
+    var handleMouseMove = (0, react_1.useCallback)(function (e) {
+        if (!gridRef.current)
+            return;
+        var coords = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY);
+        if (!coords)
+            return;
+        var rowIndex = coords.rowIndex, columnIndex = coords.columnIndex;
+        /* Exit if its the same cell */
+        if (activeCellRef.current &&
+            activeCellRef.current.rowIndex === rowIndex &&
+            activeCellRef.current.columnIndex === columnIndex)
+            return;
+        var pos = gridRef.current.getCellOffsetFromCoords(coords);
+        var scrollPosition = gridRef.current.getScrollPosition();
+        setTooltipPosition(tslib_1.__assign(tslib_1.__assign({}, pos), scrollPosition));
+        setActiveCell({ rowIndex: rowIndex, columnIndex: columnIndex });
+    }, []);
+    var handleMouseLeave = (0, react_1.useCallback)(function () {
+        if (isTooltipActive.current)
+            return;
+        setActiveCell(null);
+    }, []);
+    /* Raf throttler */
+    var mouseMoveThrottler = (0, react_1.useRef)(undefined);
+    var mouseLeaveThrottler = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(function () {
+        mouseMoveThrottler.current = (0, helpers_1.throttle)(handleMouseMove, 100);
+        mouseLeaveThrottler.current = (0, helpers_1.debounce)(handleMouseLeave, 2000);
+    }, []);
+    /* Update activecell ref */
+    (0, react_1.useEffect)(function () {
+        activeCellRef.current = activeCell;
+    }, [activeCell]);
+    return {
+        tooltipComponent: tooltipComponent,
+        onMouseMove: mouseMoveThrottler.current,
+        onMouseLeave: mouseLeaveThrottler.current,
+    };
+};
+exports.default = useTooltip;

package/dist/{hooks → cjs/hooks}/useUndo.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 /**
  * Spec: https://tools.ietf.org/html/rfc6902
  *
@@ -33,3 +33,4 @@ export interface PatchInterface<T> {
  */
 declare const useUndo: <T>(props?: UndoProps) => UndoManager;
 export default useUndo;
+//# sourceMappingURL=useUndo.d.ts.map

package/dist/cjs/hooks/useUndo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUndo.d.ts","sourceRoot":"","sources":["../../../hooks/useUndo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;CAClC;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,GAAG,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,GAAG,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,cAAc,EAAE,CAAC,EAAE,CAAC;CACrB;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,GAAI,CAAC,EAAE,QAAO,SAAc,KAAG,WAsF3C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/cjs/hooks/useUndo.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var types_1 = require("../types");
+/**
+ * Undo/Redo hook
+ * @param
+ */
+var useUndo = function (props) {
+    if (props === void 0) { props = {}; }
+    var enableGlobalKeyHandlers = props.enableGlobalKeyHandlers, onRedo = props.onRedo, onUndo = props.onUndo, identifier = props.identifier;
+    var undoStack = (0, react_1.useRef)([]);
+    var undoStackPointer = (0, react_1.useRef)(-1);
+    var _a = tslib_1.__read((0, react_1.useReducer)(function (s) { return s + 1; }, 0), 2), _ = _a[0], forceRender = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (enableGlobalKeyHandlers)
+            document.addEventListener("keydown", handleKeyDown);
+        return function () { return document.removeEventListener("keydown", handleKeyDown); };
+    }, [enableGlobalKeyHandlers]);
+    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+        /* Is user focused on an input, textarea or select element */
+        var isMeta = e.metaKey || e.ctrlKey;
+        var isUndo = isMeta && e.which === types_1.KeyCodes.Z;
+        var isRedo = (e.shiftKey && isUndo) || e.which === types_1.KeyCodes.KEY_Y;
+        if (!isRedo && !isUndo)
+            return;
+        if (isRedo) {
+            handleRedo();
+        }
+        else {
+            handleUndo();
+        }
+    }, []);
+    var handleUndo = (0, react_1.useCallback)(function () {
+        if (undoStackPointer.current < 0)
+            return;
+        var patches = undoStack.current[undoStackPointer.current].inversePatches;
+        undoStackPointer.current--;
+        onUndo && onUndo(patches);
+        forceRender();
+    }, []);
+    var handleRedo = (0, react_1.useCallback)(function () {
+        if (undoStackPointer.current === undoStack.current.length - 1)
+            return;
+        undoStackPointer.current++;
+        var patches = undoStack.current[undoStackPointer.current].patches;
+        onRedo && onRedo(patches);
+        forceRender();
+    }, []);
+    var addUndoable = (0, react_1.useCallback)(function (history) {
+        var patches = history.patches, inversePatches = history.inversePatches;
+        var pointer = ++undoStackPointer.current;
+        undoStack.current.length = pointer;
+        undoStack.current[pointer] = { patches: patches, inversePatches: inversePatches };
+        forceRender();
+    }, []);
+    /**
+     * Use for async update where you want to replace the last patch
+     */
+    var replaceLastPatch = (0, react_1.useCallback)(function (patches, inversePatches) {
+        var _a, _b;
+        if (patches === void 0) {
+            return;
+        }
+        var currentStack = undoStack.current;
+        var pointer = undoStackPointer.current;
+        var curPatches = currentStack[pointer];
+        if ((curPatches === null || curPatches === void 0 ? void 0 : curPatches.patches) === void 0) {
+            return;
+        }
+        (_a = curPatches.patches).push.apply(_a, tslib_1.__spreadArray([], tslib_1.__read(patches), false));
+        if (inversePatches && (curPatches === null || curPatches === void 0 ? void 0 : curPatches.inversePatches)) {
+            (_b = curPatches.inversePatches).unshift.apply(_b, tslib_1.__spreadArray([], tslib_1.__read(inversePatches), false));
+        }
+    }, []);
+    return {
+        undo: handleUndo,
+        redo: handleRedo,
+        add: addUndoable,
+        replace: replaceLastPatch,
+        onKeyDown: enableGlobalKeyHandlers ? undefined : handleKeyDown,
+        canUndo: !(undoStackPointer.current < 0),
+        canRedo: !(undoStackPointer.current === undoStack.current.length - 1),
+    };
+};
+exports.default = useUndo;