@symply.io/basic-components 1.6.11-alpha.6 → 1.7.0-alpha.2

package/VirtualGrid/GridCore/GridBodyRow.js

@@ -0,0 +1,145 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, cloneElement, useState, useMemo } from "react";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+import { useGridVirtualizer } from "../GridVirtualizerContext";
+function VirtualGridBodyRow(props) {
+    var rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    console.log({ virtualRow: virtualRow });
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useGridVirtualizer(), leftShadowVisible = _a.leftShadowVisible, rightShadowVisible = _a.rightShadowVisible, onMeasureElement = _a.onMeasureElement;
+    var row = useMemo(function () { return rows[virtualRow.index]; }, [rows, virtualRow]);
+    var _b = useMemo(function () {
+        if (isUpMd) {
+            var left = columns.filter(function (c) { return c.fixable === "left"; });
+            var right = columns.filter(function (c) { return c.fixable === "right"; });
+            var dynamic = columns.filter(function (c) { return !c.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], columns, []];
+        }
+    }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
+    var _c = useMemo(function () {
+        if (onCustomizeRowBgColor) {
+            var regex = /^#(\d|[a-f]|[A-F]){6}/i;
+            var _a = onCustomizeRowBgColor({ row: row, columns: columns }), normal_1 = _a.normal, hover_1 = _a.hover;
+            return {
+                normal: normal_1 && regex.test(normal_1) ? normal_1 : "#FEFEFE",
+                hover: hover_1 && regex.test(hover_1) ? hover_1 : "#F2F1F3",
+            };
+        }
+        return { normal: "#FEFEFE", hover: "#F2F1F3" };
+    }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
+    var _d = useState(), rowEl = _d[0], setRowEl = _d[1];
+    return (_jsxs(TableRow, __assign({ sx: {
+            backgroundColor: normal,
+            width: "100%",
+            height: "".concat(virtualRow.size, "px"),
+            transform: "translateY(".concat(virtualRow.start - rowIndex * virtualRow.size, "px)"),
+            "&:hover": {
+                cursor: onRowClick ? "pointer" : "default",
+                backgroundColor: onRowClick ? hover : normal,
+            },
+        }, "data-index": virtualRow.index, onMouseEnter: function (event) {
+            setRowEl(event.currentTarget);
+        }, onMouseLeave: function () {
+            setRowEl(undefined);
+        }, onClick: onRowClick
+            ? function () {
+                onRowClick(row);
+            }
+            : undefined, onContextMenu: function (event) {
+            event.preventDefault();
+            if (onContextMenu) {
+                onContextMenu(event, row);
+            }
+        } }, { children: [fixedLeftCols.map(function (col, index) {
+                var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+                var left = fixedLeftCols
+                    .slice(0, index)
+                    .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                return (_jsx(TableCell, __assign({ align: align, sx: {
+                        left: left,
+                        zIndex: 10,
+                        position: "sticky",
+                        width: width,
+                        backgroundColor: onRowClick && rowEl ? hover : normal,
+                        "&::after": index === fixedLeftCols.length - 1 && leftShadowVisible
+                            ? {
+                                position: "absolute",
+                                top: 0,
+                                right: 0,
+                                bottom: "-1px",
+                                width: "20px",
+                                transform: "translateX(100%)",
+                                transition: "box-shadow .3s",
+                                content: "''",
+                                boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                            }
+                            : undefined,
+                    } }, { children: cloneElement(Cell, {
+                        column: col,
+                        rows: rows,
+                        row: row,
+                        rowIndex: virtualRow.index,
+                    }) }), "Virtual_Grid_Body_Row_".concat(virtualRow.index, "_").concat(accessor)));
+            }), dynamicCols.map(function (col) {
+                var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+                return (_jsx(TableCell, __assign({ align: align, sx: {
+                        zIndex: 9,
+                        width: width,
+                        backgroundColor: onRowClick && rowEl ? hover : normal,
+                    } }, { children: cloneElement(Cell, {
+                        column: col,
+                        rows: rows,
+                        row: row,
+                        rowIndex: virtualRow.index,
+                    }) }), "Virtual_Grid_Body_Row_".concat(virtualRow.index, "_").concat(accessor)));
+            }), fixedRightCols.map(function (col, index) {
+                var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+                var right = fixedRightCols
+                    .slice(0, fixedRightCols.length - 1 - index)
+                    .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                return (_jsx(TableCell, __assign({ align: align, sx: {
+                        right: right,
+                        width: width,
+                        position: "sticky",
+                        zIndex: 10,
+                        backgroundColor: onRowClick && rowEl ? hover : normal,
+                        "&::after": index === 0 && rightShadowVisible
+                            ? {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                bottom: "-1px",
+                                width: "20px",
+                                transform: "translateX(-100%)",
+                                transition: "box-shadow .3s",
+                                content: "''",
+                                boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                            }
+                            : undefined,
+                    } }, { children: cloneElement(Cell, {
+                        column: col,
+                        rows: rows,
+                        row: row,
+                        rowIndex: virtualRow.index,
+                    }) }), "Virtual_Grid_Body_Row_".concat(virtualRow.index, "_").concat(accessor)));
+            })] })));
+}
+export default memo(VirtualGridBodyRow);

package/VirtualGrid/GridCore/GridFooter.d.ts

@@ -0,0 +1,4 @@
+import type { VirtualGridFooterProps } from "../types";
+declare function VirtualGridFooter<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: VirtualGridFooterProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof VirtualGridFooter;
+export default _default;

package/VirtualGrid/GridCore/GridFooter.js

@@ -0,0 +1,109 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, cloneElement, useMemo } from "react";
+import TableRow from "@mui/material/TableRow";
+import Footer from "@mui/material/TableFooter";
+import TableCell from "@mui/material/TableCell";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+import { useGridVirtualizer } from "../GridVirtualizerContext";
+function VirtualGridFooter(props) {
+    var _a = props.footers, footers = _a === void 0 ? [] : _a, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, noData = props.noData;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _b = useGridVirtualizer(), leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible;
+    var _c = useMemo(function () {
+        if (isUpMd && !noData) {
+            var left = footers.filter(function (f) { return f.fixable === "left"; });
+            var right = footers.filter(function (f) { return f.fixable === "right"; });
+            var dynamic = footers.filter(function (f) { return !f.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], footers, []];
+        }
+    }, [isUpMd, noData, footers]), fixedLeftFooters = _c[0], dynamicFooters = _c[1], fixedRightFooters = _c[2];
+    return (_jsx(Footer, __assign({ sx: {
+            position: "sticky",
+            bottom: "-1px",
+            zIndex: 20,
+        } }, { children: _jsxs(TableRow, __assign({ sx: {
+                backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                color: "".concat(footerTextColor || "inherit", " !important"),
+                width: "100%",
+            } }, { children: [fixedLeftFooters.map(function (footer, index) {
+                    var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
+                    var left = fixedLeftFooters
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
+                            position: "sticky",
+                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(footerTextColor || "inherit", " !important"),
+                            zIndex: 10,
+                            left: left,
+                            width: width,
+                            userSelect: "none",
+                            "&::after": index === fixedLeftFooters.length - 1 && leftShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    right: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                                }
+                                : undefined,
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Footer_Col_".concat(accessor)));
+                }), dynamicFooters.map(function (footer) {
+                    var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            userSelect: "none",
+                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(footerTextColor || "inherit", " !important"),
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Footer_Col_".concat(accessor)));
+                }), fixedRightFooters.map(function (footer, index) {
+                    var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
+                    var right = fixedRightFooters
+                        .slice(0, fixedRightFooters.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
+                            position: "sticky",
+                            zIndex: 10,
+                            right: right,
+                            width: width,
+                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(footerTextColor || "inherit", " !important"),
+                            userSelect: "none",
+                            "&::after": index === 0 && rightShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(-100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                                }
+                                : undefined,
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Footer_Col_".concat(accessor)));
+                })] })) })));
+}
+export default memo(VirtualGridFooter);

package/VirtualGrid/GridCore/GridHeader.d.ts

@@ -0,0 +1,4 @@
+import type { VirtualGridHeaderProps } from "../types";
+declare function VirtualGridHeader<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: VirtualGridHeaderProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof VirtualGridHeader;
+export default _default;

package/VirtualGrid/GridCore/GridHeader.js

@@ -0,0 +1,114 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, cloneElement, useMemo } from "react";
+import TableRow from "@mui/material/TableRow";
+import TableHead from "@mui/material/TableHead";
+import TableCell from "@mui/material/TableCell";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+import { useGridVirtualizer } from "../GridVirtualizerContext";
+function VirtualGridHeader(props) {
+    var headers = props.headers, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, noData = props.noData;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useGridVirtualizer(), leftShadowVisible = _a.leftShadowVisible, rightShadowVisible = _a.rightShadowVisible;
+    var _b = useMemo(function () {
+        if (isUpMd && !noData) {
+            var left = headers.filter(function (h) { return h.fixable === "left"; });
+            var right = headers.filter(function (h) { return h.fixable === "right"; });
+            var dynamic = headers.filter(function (h) { return !h.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], headers, []];
+        }
+    }, [isUpMd, noData, headers]), fixedLeftHeaders = _b[0], dynamicHeaders = _b[1], fixedRightHeaders = _b[2];
+    return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: {
+                backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                color: "".concat(headerTextColor || "inherit", " !important"),
+                width: "100%",
+            } }, { children: [fixedLeftHeaders.map(function (header, index) {
+                    var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
+                    var left = fixedLeftHeaders
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
+                            position: "sticky",
+                            backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(headerTextColor || "inherit", " !important"),
+                            zIndex: 10,
+                            left: left,
+                            width: width,
+                            userSelect: "none",
+                            cursor: sortable ? "pointer" : "default",
+                            "&::after": index === fixedLeftHeaders.length - 1 && leftShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    right: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                                }
+                                : undefined,
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Header_Col_".concat(accessor)));
+                }), dynamicHeaders.map(function (header) {
+                    var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
+                    return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            userSelect: "none",
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(headerTextColor || "inherit", " !important"),
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Header_Col_".concat(accessor)));
+                }), fixedRightHeaders.map(function (header, index) {
+                    var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
+                    var right = fixedRightHeaders
+                        .slice(0, fixedRightHeaders.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
+                            position: "sticky",
+                            backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(headerTextColor || "inherit", " !important"),
+                            zIndex: 10,
+                            right: right,
+                            width: width,
+                            userSelect: "none",
+                            cursor: sortable ? "pointer" : "default",
+                            "&::after": index === 0 && rightShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(-100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
+                                }
+                                : undefined,
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Header_Col_".concat(accessor)));
+                })] })) })));
+}
+export default memo(VirtualGridHeader);

package/VirtualGrid/GridCore/index.d.ts

@@ -0,0 +1,4 @@
+import type { VirtualGridCoreProps } from "../types";
+declare function VirtualGridCore<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: VirtualGridCoreProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof VirtualGridCore;
+export default _default;

package/{DataTable/TableCore → VirtualGrid/GridCore}/index.js

@@ -10,15 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import Grid from "@mui/material/Grid";
 import Table from "@mui/material/Table";
 import TableContainer from "@mui/material/TableContainer";
-import TableBody from "./TableBody";
-import TableHeader from "./TableHeader";
-import TableFooter from "./TableFooter";
-import { useTableVirtualizer } from "../VirtualizerContext";
-function TableCore(props) {
+import TableBody from "./GridBody";
+import TableHeader from "./GridHeader";
+import TableFooter from "./GridFooter";
+import { useGridVirtualizer } from "../GridVirtualizerContext";
+function VirtualGridCore(props) {
     var dense = props.dense, _a = props.rows, rows = _a === void 0 ? [] : _a, _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
-    var _f = useTableVirtualizer(), tableRef = _f.tableRef, onProcessShadowVisible = _f.onProcessShadowVisible;
+    var _f = useGridVirtualizer(), tableRef = _f.tableRef, getTotalSize = _f.getTotalSize, onProcessShadowVisible = _f.onProcessShadowVisible;
     return (_jsx(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
             maxHeight: "inherit",
             borderWidth: "thin",
@@ -27,6 +29,6 @@ function TableCore(props) {
             borderRadius: "4px",
             borderCollapse: "unset !important",
             transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-        } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, headerBgColor: headerBgColor, headerTextColor: headerTextColor, noData: rows.length === 0 }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0 })) : (_jsx(_Fragment, {}))] })) })));
+        } }, { children: _jsx(Grid, __assign({ sx: { height: "".concat(getTotalSize(), "px") } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, headerBgColor: headerBgColor, headerTextColor: headerTextColor, noData: rows.length === 0 }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0 })) : (_jsx(_Fragment, {}))] })) })) })));
 }
-export default TableCore;
+export default memo(VirtualGridCore);

package/VirtualGrid/GridVirtualizerContext.d.ts

@@ -0,0 +1,3 @@
+import type { IGridVirtualizerContext, GridVirtualizerContextProviderProps } from "./types";
+export declare function GridVirtualizerContextProvider<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: GridVirtualizerContextProviderProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+export declare const useGridVirtualizer: () => IGridVirtualizerContext;

package/{DataTable/VirtualizerContext.js → VirtualGrid/GridVirtualizerContext.js}

@@ -10,26 +10,30 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useContext, useCallback, createContext, } from "react";
+import { useRef, useMemo, useState, useEffect, useContext, useCallback, createContext, } from "react";
 import { useVirtualizer, elementScroll } from "@tanstack/react-virtual";
+var PI = 3.1415965359;
 function easeInOutQuint(t) {
-    return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
+    return t < 0.5
+        ? 6 * PI * t * t * t * t * t
+        : 1 + 4 * PI * --t * t * t * t * t;
 }
-var VirtualizerContext = createContext({
+var GridVirtualizerContext = createContext({
     tableRef: { current: null },
     virtualRows: [],
     leftShadowVisible: false,
     rightShadowVisible: false,
+    getTotalSize: function () { return 0; },
     onMeasureElement: function () { },
     onProcessShadowVisible: function () { },
 });
-export function VirtualizerContextProvider(props) {
-    var children = props.children, rows = props.rows, columns = props.columns, dense = props.dense;
+export function GridVirtualizerContextProvider(props) {
+    var children = props.children, rows = props.rows, columns = props.columns, dense = props.dense, estimateRowHeight = props.estimateRowHeight;
     var tableRef = useRef(null);
     var scrollingRef = useRef();
     var scrollToFn = useCallback(function (offset, canSmooth, instance) {
         var _a;
-        var duration = 1000;
+        var duration = 2000;
         var start = ((_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0;
         var startTime = (scrollingRef.current = Date.now());
         var run = function () {
@@ -49,20 +53,23 @@ export function VirtualizerContextProvider(props) {
         };
         requestAnimationFrame(run);
     }, []);
+    var measureElementHeight = useMemo(function () {
+        return typeof window !== "undefined" &&
+            navigator.userAgent.indexOf("Firefox") === -1
+            ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
+            : undefined;
+    }, []);
     var rowVirtualizer = useVirtualizer({
         count: rows.length,
         getScrollElement: function () { return tableRef.current; },
-        estimateSize: function () { return (dense ? 48 : 72); },
-        measureElement: typeof window !== "undefined" &&
-            navigator.userAgent.indexOf("Firefox") === -1
-            ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
-            : undefined,
-        overscan: 12,
+        estimateSize: function () { return estimateRowHeight || (dense ? 48 : 72); },
+        measureElement: measureElementHeight,
+        overscan: Math.round(rows.length / (2 * PI)),
         scrollToFn: scrollToFn,
     });
     var _a = useState(false), leftShadowVisible = _a[0], setLeftShadowVisible = _a[1];
     var _b = useState(false), rightShadowVisible = _b[0], setRightShadowVisible = _b[1];
-    var measureElement = rowVirtualizer.measureElement, getVirtualItems = rowVirtualizer.getVirtualItems;
+    var measureElement = rowVirtualizer.measureElement, getVirtualItems = rowVirtualizer.getVirtualItems, getTotalSize = rowVirtualizer.getTotalSize;
     var virtualRows = getVirtualItems();
     var onProcessShadowVisible = useCallback(function () {
         if (tableRef.current) {
@@ -86,15 +93,16 @@ export function VirtualizerContextProvider(props) {
     useEffect(function () { return function () {
         window.removeEventListener("scroll", onProcessShadowVisible);
     }; }, [onProcessShadowVisible]);
-    return (_jsx(VirtualizerContext.Provider, __assign({ value: {
+    return (_jsx(GridVirtualizerContext.Provider, __assign({ value: {
             tableRef: tableRef,
             virtualRows: virtualRows,
             leftShadowVisible: leftShadowVisible,
             rightShadowVisible: rightShadowVisible,
+            getTotalSize: getTotalSize,
             onMeasureElement: measureElement,
             onProcessShadowVisible: onProcessShadowVisible,
         } }, { children: children })));
 }
-export var useTableVirtualizer = function () {
-    return useContext(VirtualizerContext);
+export var useGridVirtualizer = function () {
+    return useContext(GridVirtualizerContext);
 };

package/VirtualGrid/index.d.ts

@@ -0,0 +1,6 @@
+import useVirtualGrid from "./useVirtualGrid";
+import type { VirtualGridProps } from "./types";
+declare function VirtualGrid<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: VirtualGridProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+export default VirtualGrid;
+export * from "./types";
+export { useVirtualGrid };

package/VirtualGrid/index.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+import useVirtualGrid from "./useVirtualGrid";
+import VirtualGridCore from "./GridCore";
+import { GridVirtualizerContextProvider } from "./GridVirtualizerContext";
+function VirtualGrid(props) {
+    var estimateRowHeight = props.estimateRowHeight, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rows = props.rows, columns = props.columns, dense = props.dense, rest = __rest(props, ["estimateRowHeight", "primaryColor", "secondaryColor", "rows", "columns", "dense"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(GridVirtualizerContextProvider, __assign({ rows: rows, columns: columns, dense: dense, estimateRowHeight: estimateRowHeight }, { children: _jsx(VirtualGridCore, __assign({}, rest, { rows: rows, columns: columns, dense: dense })) })) })));
+}
+export default VirtualGrid;
+export * from "./types";
+export { useVirtualGrid };