@symply.io/basic-components 1.6.11-alpha.5 → 1.7.0-alpha.1

package/VirtualGrid/GridCore/TableFooter.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 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 TableFooter(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,
+            display: "grid",
+        } }, { children: _jsxs(TableRow, __assign({ sx: {
+                backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                color: "".concat(footerTextColor || "inherit", " !important"),
+                display: "flex",
+                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,
+                            minWidth: width,
+                            display: "flex",
+                            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) }), 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,
+                            minWidth: width,
+                            display: "flex",
+                            userSelect: "none",
+                            backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(footerTextColor || "inherit", " !important"),
+                        } }, { children: cloneElement(Cell) }), 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,
+                            minWidth: width,
+                            right: right,
+                            display: "flex",
+                            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) }), accessor));
+                })] })) })));
+}
+export default memo(TableFooter);

package/VirtualGrid/GridCore/TableHeader.d.ts

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

package/VirtualGrid/GridCore/TableHeader.js

@@ -0,0 +1,118 @@
+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 TableHeader(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, display: "grid" } }, { children: _jsxs(TableRow, __assign({ sx: {
+                backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                color: "".concat(headerTextColor || "inherit", " !important"),
+                display: "flex",
+                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,
+                            minWidth: width,
+                            left: left,
+                            display: "flex",
+                            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) }), 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: {
+                            minWidth: width,
+                            zIndex: 9,
+                            userSelect: "none",
+                            display: "flex",
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
+                            color: "".concat(headerTextColor || "inherit", " !important"),
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), 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,
+                            minWidth: width,
+                            right: right,
+                            display: "flex",
+                            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) }), accessor));
+                })] })) })));
+}
+export default memo(TableHeader);

package/VirtualGrid/GridCore/index.d.ts

@@ -0,0 +1,3 @@
+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;
+export default VirtualGridCore;

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

@@ -15,10 +15,10 @@ 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 { 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, onProcessShadowVisible = _f.onProcessShadowVisible;
     return (_jsx(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
             maxHeight: "inherit",
             borderWidth: "thin",
@@ -29,4 +29,4 @@ function TableCore(props) {
             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, {}))] })) })));
 }
-export default TableCore;
+export default 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}

@@ -11,18 +11,48 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useContext, useCallback, createContext, } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-var VirtualizerContext = createContext({
+import { useVirtualizer, elementScroll } from "@tanstack/react-virtual";
+var PI = 3.1415965359;
+function easeInOutQuint(t) {
+    return t < 0.5
+        ? 6 * PI * t * t * t * t * t
+        : 1 + 4 * PI * --t * t * t * t * t;
+}
+var GridVirtualizerContext = createContext({
     tableRef: { current: null },
     virtualRows: [],
     leftShadowVisible: false,
     rightShadowVisible: false,
+    getTotalSize: function () { return 0; },
     onMeasureElement: function () { },
     onProcessShadowVisible: function () { },
 });
-export function VirtualizerContextProvider(props) {
+export function GridVirtualizerContextProvider(props) {
     var children = props.children, rows = props.rows, columns = props.columns, dense = props.dense;
     var tableRef = useRef(null);
+    var scrollingRef = useRef();
+    var scrollToFn = useCallback(function (offset, canSmooth, instance) {
+        var _a;
+        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 () {
+            if (scrollingRef.current !== startTime)
+                return;
+            var now = Date.now();
+            var elapsed = now - startTime;
+            var progress = easeInOutQuint(Math.min(elapsed / duration, 1));
+            var interpolated = start + (offset - start) * progress;
+            if (elapsed < duration) {
+                elementScroll(interpolated, canSmooth, instance);
+                requestAnimationFrame(run);
+            }
+            else {
+                elementScroll(interpolated, canSmooth, instance);
+            }
+        };
+        requestAnimationFrame(run);
+    }, []);
     var rowVirtualizer = useVirtualizer({
         count: rows.length,
         getScrollElement: function () { return tableRef.current; },
@@ -31,11 +61,12 @@ export function VirtualizerContextProvider(props) {
             navigator.userAgent.indexOf("Firefox") === -1
             ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
             : undefined,
-        overscan: 6,
+        overscan: Math.round(rows.length / 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) {
@@ -59,15 +90,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 primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rows = props.rows, columns = props.columns, dense = props.dense, rest = __rest(props, ["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 }, { children: _jsx(VirtualGridCore, __assign({}, rest, { rows: rows, columns: columns, dense: dense })) })) })));
+}
+export default VirtualGrid;
+export * from "./types";
+export { useVirtualGrid };

package/VirtualGrid/types.d.ts

@@ -0,0 +1,104 @@
+import type { ReactNode, RefObject, MouseEvent, ReactElement, CSSProperties } from "react";
+import type { VirtualItem } from "@tanstack/react-virtual";
+declare type HexColor = `#${string}`;
+export declare type CustomVirtualGridRowBgColor = {
+    normal?: HexColor;
+    hover?: HexColor;
+};
+export declare type VirtualGridOrderType = "ASC" | "DESC" | "NONE";
+export declare type VirtualGridSortingProps = {
+    accessor: string;
+    order: VirtualGridOrderType;
+};
+declare type InitialVirtualGridStateProps = {
+    sortBy?: VirtualGridSortingProps;
+};
+export declare type VirtualGridColumnProps = {
+    headerTip?: string;
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    sortable?: boolean;
+    fixable?: "left" | "right";
+    width: number;
+};
+export declare type UseVirtualGridBaseProps<RowProps extends Record<string, any>> = {
+    data: Array<RowProps>;
+    columns: Array<VirtualGridColumnProps>;
+    initialState?: InitialVirtualGridStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: VirtualGridSortingProps) => unknown;
+};
+export declare type UseVirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = UseVirtualGridBaseProps<RowProps> & ExtendedProps;
+export declare type VirtualGridHeaderCellProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Pick<VirtualGridColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseVirtualGridProps<RowProps, ExtendedProps>, keyof UseVirtualGridBaseProps<RowProps>> & {
+    Cell: ReactElement;
+    title: string;
+    onSort: ({ accessor, }: Pick<VirtualGridSortingProps, "accessor">) => unknown;
+};
+export declare type VirtualGridBodyCellProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Pick<VirtualGridColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseVirtualGridProps<RowProps, ExtendedProps>, keyof UseVirtualGridBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type VirtualGridFooterCellProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Pick<VirtualGridColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseVirtualGridProps<RowProps, ExtendedProps>, keyof UseVirtualGridBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type UseVirtualGridReturns<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    headers: Array<VirtualGridHeaderCellProps<RowProps, ExtendedProps>>;
+    footers: Array<VirtualGridFooterCellProps<RowProps, ExtendedProps>>;
+    columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+    onResetSorting: () => void;
+};
+export declare type VirtualGridHeaderProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    headers: Array<VirtualGridHeaderCellProps<RowProps, ExtendedProps>>;
+    headerBgColor?: CSSProperties["color"];
+    headerTextColor?: CSSProperties["color"];
+    noData?: boolean;
+};
+export declare type VirtualGridBodyProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+    noDataText?: string;
+    onRowClick?: (row: RowProps) => unknown;
+    onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
+    onCustomizeRowBgColor?: ({ row, columns, }: {
+        row: RowProps;
+        columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+    }) => CustomVirtualGridRowBgColor;
+};
+export declare type VirtualGridBodyRowProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Omit<VirtualGridBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
+    rowIndex: number;
+    virtualRow: VirtualItem;
+};
+export declare type VirtualGridFooterProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    footers?: Array<VirtualGridFooterCellProps<RowProps, ExtendedProps>>;
+    footerBgColor?: CSSProperties["color"];
+    footerTextColor?: CSSProperties["color"];
+    noData?: boolean;
+};
+export declare type VirtualGridCoreProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Omit<VirtualGridHeaderProps<RowProps, ExtendedProps>, "noData"> & VirtualGridBodyProps<RowProps, ExtendedProps> & Omit<VirtualGridFooterProps<RowProps, ExtendedProps>, "noData"> & {
+    dense?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export declare type VirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = VirtualGridCoreProps<RowProps, ExtendedProps> & {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export interface GridVirtualizerContextProviderProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> {
+    dense?: boolean;
+    children: ReactNode;
+    rows: Array<RowProps>;
+    columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+}
+export interface IGridVirtualizerContext {
+    tableRef: RefObject<HTMLDivElement>;
+    virtualRows: Array<VirtualItem>;
+    leftShadowVisible: boolean;
+    rightShadowVisible: boolean;
+    getTotalSize: () => number;
+    onMeasureElement: (node: Element | null | undefined) => void;
+    onProcessShadowVisible: () => void;
+}
+export {};

package/VirtualGrid/types.js

@@ -0,0 +1 @@
+export {};

package/VirtualGrid/useVirtualGrid.d.ts

@@ -0,0 +1,3 @@
+import type { UseVirtualGridProps, UseVirtualGridReturns } from "./types";
+declare function useVirtualGrid<T extends Record<string, any>, F extends Record<string, any>>(props: UseVirtualGridProps<T, F>): UseVirtualGridReturns<T, F>;
+export default useVirtualGrid;

package/VirtualGrid/useVirtualGrid.js

@@ -0,0 +1,103 @@
+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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState, useMemo, useCallback } from "react";
+function useVirtualGrid(props) {
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
+    if (!data) {
+        throw new Error('"data" is required but got null or undefined');
+    }
+    if (!columns) {
+        throw new Error('"columns" is required but got null or undefined');
+    }
+    var initialSortingProps = useMemo(function () {
+        var sortBy = (initialState || {}).sortBy;
+        var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
+        return {
+            accessor: accessor || "",
+            order: !!accessor ? order || "NONE" : "NONE",
+        };
+    }, [initialState]);
+    var _a = useState(initialSortingProps), sortingProps = _a[0], setSortingProps = _a[1];
+    var handleSort = useCallback(function (_a) {
+        var accessor = _a.accessor;
+        if (!disableSortBy) {
+            var newSortingProps = __assign({}, sortingProps);
+            if (accessor !== sortingProps.accessor ||
+                sortingProps.order === "NONE") {
+                newSortingProps = { accessor: accessor, order: "ASC" };
+            }
+            else if (sortingProps.order === "ASC") {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "DESC" });
+            }
+            else {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "NONE" });
+            }
+            if (onSort) {
+                onSort(__assign({}, newSortingProps));
+            }
+            setSortingProps(__assign({}, newSortingProps));
+        }
+    }, [disableSortBy, onSort, sortingProps]);
+    var onResetSorting = useCallback(function () {
+        if (onSort) {
+            onSort(__assign({}, initialSortingProps));
+        }
+        setSortingProps(__assign({}, initialSortingProps));
+    }, [initialSortingProps, onSort]);
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.accessor, order = sortingProps.order;
+        if (accessor !== field || order === "NONE") {
+            return "";
+        }
+        if (order === "ASC") {
+            return "↑";
+        }
+        return "↓";
+    }, [sortingProps]);
+    var rows = useMemo(function () { return data.map(function (d) { return d; }); }, [data]);
+    var cols = useMemo(function () {
+        return columns.map(function (col) {
+            var Body = col.Body;
+            return __assign(__assign({ Cell: cloneElement(Body || _jsx(_Fragment, {}), { column: col }) }, col), rest);
+        });
+    }, [columns, rest]);
+    var headers = useMemo(function () {
+        return columns.map(function (col) {
+            var Header = col.Header, accessor = col.accessor, sortable = col.sortable, headerTip = col.headerTip;
+            var canSortBy = sortable && !disableSortBy;
+            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), sortable: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
+        });
+    }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
+    var footers = useMemo(function () {
+        return columns.map(function (col) {
+            var Footer = col.Footer;
+            return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
+                    column: col,
+                    rows: rows,
+                }) }, col), rest);
+        });
+    }, [columns, rest, rows]);
+    return { headers: headers, footers: footers, columns: cols, rows: rows, onResetSorting: onResetSorting };
+}
+export default useVirtualGrid;

package/index.d.ts

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
@@ -57,3 +58,4 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualGrid } from "./VirtualGrid";

package/index.js

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
@@ -57,3 +58,4 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualGrid } from "./VirtualGrid";