@rowsncolumns/grid 9.0.3 → 13.2.32

package/dist/esm/hooks/useImage.d.ts

@@ -0,0 +1,13 @@
+export interface UseImageProps {
+    url: string;
+    crossOrigin?: string;
+}
+export interface UseImageResults {
+    image?: HTMLImageElement;
+    width: number;
+    height: number;
+    status: string;
+}
+declare const useImage: ({ url, crossOrigin }: UseImageProps) => UseImageResults;
+export default useImage;
+//# sourceMappingURL=useImage.d.ts.map

package/dist/esm/hooks/useImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImage.d.ts","sourceRoot":"","sources":["../../../hooks/useImage.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAmDD,QAAA,MAAM,QAAQ,GAAI,sBAAsB,aAAa,oBAgDpD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/hooks/useImage.js

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+// Global cache to share images across all component instances
+const imageCache = new Map();
+const loadImage = (url, crossOrigin) => {
+    const existing = imageCache.get(url);
+    if (existing) {
+        return existing;
+    }
+    const img = new Image();
+    img.crossOrigin = crossOrigin || "anonymous";
+    const entry = {
+        image: img,
+        status: "loading",
+        width: 0,
+        height: 0,
+        subscribers: new Set(),
+    };
+    imageCache.set(url, entry);
+    const onload = () => {
+        entry.status = "loaded";
+        entry.width = img.width;
+        entry.height = img.height;
+        entry.subscribers.forEach((callback) => callback(entry));
+    };
+    const onerror = () => {
+        entry.status = "failed";
+        entry.subscribers.forEach((callback) => callback(entry));
+    };
+    img.addEventListener("load", onload);
+    img.addEventListener("error", onerror);
+    img.src = url;
+    return entry;
+};
+const useImage = ({ url, crossOrigin }) => {
+    const [state, setState] = useState(() => {
+        if (!url) {
+            return {
+                image: undefined,
+                status: "loading",
+                width: 0,
+                height: 0,
+            };
+        }
+        const entry = loadImage(url, crossOrigin);
+        return {
+            image: entry.status === "loaded" ? entry.image : undefined,
+            status: entry.status,
+            width: entry.width,
+            height: entry.height,
+        };
+    });
+    useEffect(() => {
+        if (!url)
+            return;
+        const entry = loadImage(url, crossOrigin);
+        const updateState = (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 () => {
+            entry.subscribers.delete(updateState);
+        };
+    }, [url, crossOrigin]);
+    return state;
+};
+export default useImage;

package/dist/esm/hooks/usePagination.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+export interface PaginationProps {
+    /**
+     * No of items in each page
+     */
+    pageSize: number;
+    /**
+     * Initial current page index. Start from 1
+     */
+    initialCurrentPage?: number;
+    /**
+     * Total number of rows
+     */
+    total: number;
+    /**
+     * Callback when page is changed
+     */
+    onChange?: (page: number) => void;
+    /**
+     * Pagination Component
+     */
+    component?: React.FC<PaginationComponentProps> | React.ComponentClass<PaginationComponentProps>;
+}
+export type PaginationComponentProps = Omit<PaginationResults, "paginationComponent">;
+export interface PaginationResults {
+    /**
+     * Current page number
+     */
+    currentPage: number;
+    /**
+     * Total pages
+     */
+    totalPages: number;
+    /**
+     * No of items in each page
+     */
+    pageSize: number;
+    /**
+     * Pagination component
+     */
+    paginationComponent: React.ReactNode;
+    /**
+     * Navigate to next page
+     */
+    nextPage: () => void;
+    /**
+     * Navigate to prev page
+     */
+    prevPage: () => void;
+    /**
+     * Navigate to first page
+     */
+    goToFirst: () => void;
+    /**
+     * Navigate to last page
+     */
+    goToLast: () => void;
+    /**
+     * Navigate to specific page
+     */
+    goToPage: (page: number) => void;
+}
+/**
+ * Pagination hook
+ * @param props
+ */
+declare const usePagination: (props: PaginationProps) => PaginationResults;
+export default usePagination;
+//# sourceMappingURL=usePagination.d.ts.map

package/dist/esm/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/esm/hooks/usePagination.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+/**
+ * Pagination hook
+ * @param props
+ */
+const usePagination = (props) => {
+    const { initialCurrentPage = 1, pageSize = 10, total = 0, onChange, component = PaginationComponent, } = props;
+    const [currentPage, setCurrentPage] = useState(initialCurrentPage);
+    const totalPages = Math.ceil(total / pageSize);
+    const nextPage = () => setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+    const prevPage = () => setCurrentPage((prev) => Math.max(prev - 1, 1));
+    const goToFirst = () => setCurrentPage(1);
+    const goToLast = () => setCurrentPage(totalPages);
+    const goToPage = (page) => setCurrentPage(page);
+    useEffect(() => {
+        onChange && onChange(currentPage);
+    }, [currentPage]);
+    const pageProps = {
+        currentPage,
+        totalPages,
+        nextPage,
+        prevPage,
+        goToFirst,
+        goToLast,
+        goToPage,
+        pageSize,
+    };
+    const paginationComponent = React.createElement(component, pageProps);
+    return {
+        paginationComponent,
+        ...pageProps,
+    };
+};
+const PaginationComponent = ({ currentPage, goToFirst, goToLast, goToPage, totalPages, nextPage, prevPage, }) => {
+    const pages = [];
+    for (let i = 1; i <= totalPages; i++) {
+        const isActive = currentPage === i;
+        pages.push(React.createElement("button", { onClick: () => goToPage(i) }, isActive ? React.createElement("strong", null, i) : i));
+    }
+    return (React.createElement("div", null,
+        React.createElement("button", { onClick: goToFirst, disabled: currentPage === 1 }, "First page"),
+        React.createElement("button", { onClick: prevPage, disabled: currentPage === 1 }, "Prev page"),
+        pages,
+        React.createElement("button", { onClick: nextPage, disabled: currentPage === totalPages }, "Next page"),
+        React.createElement("button", { onClick: goToLast, disabled: currentPage === totalPages }, "Last page")));
+};
+export default usePagination;

package/dist/esm/hooks/useSizer.d.ts

@@ -0,0 +1,114 @@
+import type React from "react";
+import type { GridRef, ViewPortProps } from "./../Grid";
+import type { HiddenType } from "./../helpers";
+export interface IProps {
+    /**
+     * Used to access grid functions
+     */
+    gridRef: React.MutableRefObject<GridRef | null>;
+    /**
+     * Value getter for a cell
+     */
+    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
+     */
+    minColumnDimension?: number;
+    minRowDimension?: number;
+    /**
+     * Cell padding, used for width calculation
+     */
+    cellSpacing?: number;
+    /**
+     * Scroll timeout
+     */
+    timeout?: number;
+    /**
+     * Calculate width and resize the grid on scroll
+     */
+    resizeOnScroll?: boolean;
+    /**
+     * Font used to calculate width
+     */
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    fontStyle?: string;
+    /**
+     * Strategy used to calculate column width
+     * lazy = visible rows
+     * full = all rows
+     *
+     * columns are always lazy
+     */
+    resizeStrategy?: ResizeStrategy;
+    /**
+     * No of rows in teh grid
+     */
+    rowCount?: number;
+    columnCount?: number;
+    /**
+     * Enable autoresize
+     */
+    autoResize?: boolean;
+    /**
+     * Hidden rows
+     */
+    isHiddenRow: HiddenType;
+    /**
+     * Hidden columns
+     */
+    isHiddenColumn: HiddenType;
+    /**
+     * Number of frozen rows
+     */
+    frozenRows?: number;
+    frozenColumns?: number;
+    /**
+     * Current scaling factor
+     */
+    scale?: number;
+    /**
+     * Get text value
+     */
+    getTextValue?: (rowIndex: number, columnIndex: number) => string | undefined;
+}
+export type ResizeStrategy = "lazy" | "full";
+export interface TextDimensions {
+    width: number;
+    height: number;
+}
+export type SizeType = {
+    [key: number]: number;
+};
+export interface TextFormat {
+    bold?: boolean;
+    spacing?: number;
+    fontSize?: number;
+    fontFamily?: string;
+    italic?: boolean;
+}
+/**
+ * Auto sizer hook
+ * @param param
+ *
+ * TODO
+ * Dynamically resize columns after user has scrolled down/view port changed ?
+ */
+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/esm/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/esm/hooks/useSizer.js

@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import invariant from "tiny-invariant";
+import { autoSizerCanvas, debounce, isNull, } from "./../helpers";
+const defaultGetText = (text) => text;
+/**
+ * Auto sizer hook
+ * @param param
+ *
+ * TODO
+ * Dynamically resize columns after user has scrolled down/view port changed ?
+ */
+const useAutoSizer = ({ gridRef, getTextFormat, initialVisibleRows = 20, initialVisibleColumns = 20, cellSpacing = 10, minColumnDimension = 60, minRowDimension = 60, timeout = 300, resizeStrategy = "lazy", rowCount, columnCount, resizeOnScroll = true, fontFamily = "Arial", fontSize = 12, fontWeight = "", fontStyle = "", autoResize = true, frozenRows = 0, frozenColumns = 0, scale = 1, isHiddenRow, isHiddenColumn, getTextValue = defaultGetText, }) => {
+    invariant(!(resizeStrategy === "full" && rowCount === void 0), "Row count should be specified if resize stragtegy is full");
+    const autoSizer = useRef(autoSizerCanvas);
+    const [viewport, setViewport] = useState({
+        rowStartIndex: 0,
+        rowStopIndex: 0,
+        columnStartIndex: 0,
+        columnStopIndex: 0,
+        visibleRowStartIndex: 0,
+        visibleRowStopIndex: 0,
+        visibleColumnStartIndex: 0,
+        visibleColumnStopIndex: 0,
+    });
+    const isMounted = useRef(false);
+    const handleResize = useCallback(({ rowIndex, columnIndex }) => {
+        gridRef.current &&
+            gridRef.current.resetAfterIndices({ rowIndex, columnIndex });
+    }, []);
+    const debounceResizer = useRef(null);
+    useEffect(() => {
+        isMounted.current = true;
+        debounceResizer.current = debounce(handleResize, timeout);
+    }, []);
+    /* Update any styles, fonts if necessary */
+    useEffect(() => {
+        autoSizer.current.setFont({ fontFamily, fontSize, fontWeight, fontStyle });
+    }, [fontFamily, fontSize, fontWeight, fontStyle]);
+    /**
+     * Get width of a single cell
+     */
+    const getCellDimensions = useCallback((rowIndex, columnIndex, textOverride) => {
+        const cell = { rowIndex, columnIndex };
+        const textFormat = getTextFormat?.(cell.rowIndex, cell.columnIndex);
+        const text = textOverride ?? getTextValue(cell.rowIndex, cell.columnIndex);
+        let width = textFormat?.spacing ?? 0;
+        let height = textFormat?.spacing ?? 0;
+        /* Check if its null */
+        if (!isNull(text) && text !== void 0) {
+            /* Reset fonts */
+            autoSizer.current.reset();
+            if (textFormat) {
+                const isBold = textFormat.bold;
+                autoSizer.current.setFont({
+                    fontWeight: isBold ? "bold" : "",
+                    fontSize: (textFormat.fontSize ?? fontSize) * scale,
+                    fontFamily: textFormat.fontFamily ?? fontFamily,
+                    fontStyle: textFormat.italic ? "italic" : "",
+                });
+            }
+            const metrics = autoSizer.current.measureText(text);
+            if (metrics) {
+                width += Math.ceil(metrics.width) + cellSpacing;
+                height += Math.ceil(metrics.height) + cellSpacing;
+            }
+        }
+        return { width, height };
+    }, [scale, getTextFormat, cellSpacing, getTextValue]);
+    /**
+     * Calculate column width
+     */
+    const getColumnWidth = useCallback((columnIndex) => {
+        const { rowStartIndex = 0, rowStopIndex = 0 } = viewport ?? {};
+        const visibleRows = resizeStrategy === "full"
+            ? rowCount
+            : rowStopIndex || initialVisibleRows;
+        let start = resizeStrategy === "full" ? 0 : rowStartIndex;
+        let maxWidth = minColumnDimension;
+        /* Calculate for frozen rows */
+        for (let i = 0; i < frozenRows; i++) {
+            if (isHiddenRow(i)) {
+                continue;
+            }
+            const { width } = getCellDimensions(i, columnIndex);
+            if (width > maxWidth)
+                maxWidth = width;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleRows) {
+            if (isHiddenRow(start)) {
+                start++;
+                continue;
+            }
+            const { width } = getCellDimensions(start, columnIndex);
+            if (width > maxWidth)
+                maxWidth = width;
+            start++;
+        }
+        return maxWidth / scale;
+    }, [
+        viewport,
+        initialVisibleRows,
+        minColumnDimension,
+        frozenRows,
+        scale,
+        getCellDimensions,
+        isHiddenRow,
+    ]);
+    /**
+     * Calculate Row height
+     */
+    const getRowHeight = useCallback((rowIndex) => {
+        const { columnStartIndex = 0, columnStopIndex = 0 } = viewport ?? {};
+        const visibleColumns = resizeStrategy === "full"
+            ? columnCount
+            : columnStopIndex || initialVisibleColumns;
+        let start = resizeStrategy === "full" ? 0 : columnStartIndex;
+        let maxHeight = minRowDimension;
+        /* Calculate for frozen rows */
+        for (let i = 0; i < frozenColumns; i++) {
+            if (isHiddenColumn(i)) {
+                continue;
+            }
+            const { height } = getCellDimensions(i, rowIndex);
+            if (height > maxHeight)
+                maxHeight = height;
+        }
+        /* Loop through all visible rows */
+        while (start < visibleColumns) {
+            if (isHiddenRow(start)) {
+                start++;
+                continue;
+            }
+            const { height } = getCellDimensions(rowIndex, start);
+            if (height > maxHeight)
+                maxHeight = height;
+            start++;
+        }
+        return maxHeight / scale;
+    }, [
+        viewport,
+        initialVisibleColumns,
+        minRowDimension,
+        isHiddenColumn,
+        frozenColumns,
+        scale,
+        getCellDimensions,
+    ]);
+    const handleViewChange = useCallback((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 {
+        ...(autoResize ? { columnWidth: getColumnWidth } : undefined),
+        getColumnWidth,
+        getRowHeight,
+        onViewChange: handleViewChange,
+        getCellDimensions,
+    };
+};
+export default useAutoSizer;

package/dist/esm/hooks/useTooltip.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import type { CellInterface, GridRef } from "../Grid";
+export interface TooltipOptions {
+    /**
+     * Tooltip component
+     */
+    getTooltip?: (cell: CellInterface | null) => React.ElementType | null;
+    /**
+     * Grid references
+     */
+    gridRef: React.MutableRefObject<GridRef | null>;
+}
+export interface TooltipResults {
+    /**
+     * Tooltip component to inject into the page
+     */
+    tooltipComponent: React.ReactElement | null;
+    /**
+     * Mousemove listener to align tooltip
+     */
+    onMouseMove: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+    /**
+     * Mouse leave listener to hide tooltip
+     */
+    onMouseLeave: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+}
+export interface DefaultTooltipProps {
+    /**
+     * Tooltip x position
+     */
+    x?: number;
+    /**
+     * Tooltip y position
+     */
+    y?: number;
+    width?: number;
+    height?: number;
+    scrollLeft?: number;
+    scrollTop?: number;
+}
+declare const useTooltip: ({ gridRef, getTooltip, }: TooltipOptions) => TooltipResults;
+export default useTooltip;
+//# sourceMappingURL=useTooltip.d.ts.map

package/dist/esm/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/esm/hooks/useTooltip.js

@@ -0,0 +1,80 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { debounce, throttle } from "../helpers";
+const DefaultTooltipComponent = ({ x = 0, y = 0, scrollLeft = 0, scrollTop = 0, width = 0, height = 0, }) => {
+    const posX = x + width - scrollLeft;
+    const posY = y - scrollTop;
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            transform: `translate(${posX}px, ${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));
+};
+const getDefaultTooltip = () => DefaultTooltipComponent;
+const useTooltip = ({ gridRef, getTooltip = getDefaultTooltip, }) => {
+    const [activeCell, setActiveCell] = useState(null);
+    const isTooltipActive = useRef(false);
+    const activeCellRef = useRef(activeCell);
+    const [tooltipPosition, setTooltipPosition] = useState({});
+    const showTooltip = !!activeCell;
+    const TooltipComponent = useMemo(() => {
+        return getTooltip(activeCell);
+    }, [activeCell, getTooltip]);
+    const handleTooltipMouseEnter = useCallback(() => {
+        isTooltipActive.current = true;
+    }, []);
+    const handleTooltipMouseLeave = useCallback(() => {
+        isTooltipActive.current = false;
+        setActiveCell(null);
+    }, []);
+    const tooltipComponent = showTooltip && TooltipComponent ? (React.createElement(TooltipComponent, { ...tooltipPosition, onMouseEnter: handleTooltipMouseEnter, onMouseLeave: handleTooltipMouseLeave })) : null;
+    const handleMouseMove = useCallback((e) => {
+        if (!gridRef.current)
+            return;
+        const coords = gridRef.current.getCellCoordsFromOffset(e.clientX, e.clientY);
+        if (!coords)
+            return;
+        const { rowIndex, columnIndex } = coords;
+        /* Exit if its the same cell */
+        if (activeCellRef.current &&
+            activeCellRef.current.rowIndex === rowIndex &&
+            activeCellRef.current.columnIndex === columnIndex)
+            return;
+        const pos = gridRef.current.getCellOffsetFromCoords(coords);
+        const scrollPosition = gridRef.current.getScrollPosition();
+        setTooltipPosition({
+            ...pos,
+            ...scrollPosition,
+        });
+        setActiveCell({ rowIndex, columnIndex });
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        if (isTooltipActive.current)
+            return;
+        setActiveCell(null);
+    }, []);
+    /* Raf throttler */
+    const mouseMoveThrottler = useRef(undefined);
+    const mouseLeaveThrottler = useRef(undefined);
+    useEffect(() => {
+        mouseMoveThrottler.current = throttle(handleMouseMove, 100);
+        mouseLeaveThrottler.current = debounce(handleMouseLeave, 2000);
+    }, []);
+    /* Update activecell ref */
+    useEffect(() => {
+        activeCellRef.current = activeCell;
+    }, [activeCell]);
+    return {
+        tooltipComponent,
+        onMouseMove: mouseMoveThrottler.current,
+        onMouseLeave: mouseLeaveThrottler.current,
+    };
+};
+export default useTooltip;

package/dist/esm/hooks/useUndo.d.ts

@@ -0,0 +1,36 @@
+import type React from "react";
+/**
+ * Spec: https://tools.ietf.org/html/rfc6902
+ *
+ * add, { "op": "add", "path": ["data", "1,2"], "value": "hello world" }
+ * remove { "op": "remove", "path": ["data", "1,2"], "value": "hello world" }
+ * replace { "op": "replace", "path": ["data", "1,2"], "value": "hello world" }
+ * move { "op": "move", "from": "/a/b/c", "path": "/a/b/d" }
+ * copy
+ */
+export interface UndoProps {
+    enableGlobalKeyHandlers?: boolean;
+    onRedo?: (patches: any) => void;
+    onUndo?: (patches: any) => void;
+    identifier?: (patch: any) => any;
+}
+export interface UndoManager {
+    undo: () => void;
+    redo: () => void;
+    add: (patches: any) => void;
+    replace: (patches: any, inversePatches: any) => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export interface PatchInterface<T> {
+    patches: T[];
+    inversePatches: T[];
+}
+/**
+ * Undo/Redo hook
+ * @param
+ */
+declare const useUndo: <T>(props?: UndoProps) => UndoManager;
+export default useUndo;
+//# sourceMappingURL=useUndo.d.ts.map

package/dist/esm/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"}