@symply.io/basic-components 1.7.0-alpha.4 → 1.7.0-beta.1

package/README.md

@@ -968,16 +968,16 @@ import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
 
 
 
-<h3>VirtualGird</h3>
+<h3>VirtualDataTable</h3>
 
-Reusable data grid component with virtualizer
+Reusable data table component with virtualizer
 
 <h5>Import</h5>
 
 ```tsx
-import { VirtualGird, useVirtualGrid } from '@symply.io/basic-components';
+import { VirtualDataTablev } from '@symply.io/basic-components';
 // or 
-import VirtualGird, { useVirtualGird } from '@symply.io/basic-components/VirtualGird'; 
+import VirtualDataTable, { useVirtualGird } from '@symply.io/basic-components/VirtualDataTable'; 
 ```
 
 <h5>Column Props</h5>
@@ -1001,43 +1001,26 @@ import VirtualGird, { useVirtualGird } from '@symply.io/basic-components/Virtual
 | accessor | string                    |         | true     | The key of the column. |
 | order    | "ASC" \| "DESC" \| "NONE" |         | true     | The sorting order.     |
 
-<h5>Hook Props</h5>
-
-| Name          | Type                       | Default | Required | Description                                                  |
-| ------------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
-| columns       | Array                      |         | true     | table columns                                                |
-| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                                              |
-| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable.                  |
-| initialState  | { sortBy?: SortingProps}   |         | false    | Set the initial states                                       |
-| onSort        | func                       |         | false    | The function for sorting rows.<br />**Signature:**<br/>`function(props: SortingProps) => unknown` |
-
-<h5>Hook Returns</h5>
-
-| Name           | Type  | Description                                                  |
-| -------------- | ----- | ------------------------------------------------------------ |
-| columns        | Array | The cells for the body.                                      |
-| footers        | Array | The cells for the footer.                                    |
-| headers        | Array | The cells for the header.                                    |
-| rows           | Array | The rows for the table.                                      |
-| onResetSorting | func  | An one-key function for resetting sorting to the initial state. |
 
 <h5>Component Props</h5>
 
-| Name                  | Type                   | Default    | Required | Description                                                  |
-| --------------------- | ---------------------- | ---------- | -------- | ------------------------------------------------------------ |
-| columns               | Array                  | []         | true     | The cells for the body. (from the hook)                      |
-| dense                 | bool                   |            | false    | If `true` the table size/density would be tight.             |
-| footers               | Array                  | []         | false    | The cells for the footer. (from the hook)                    |
-| footerBgColor         | CSSProperties["color"] |            | false    | Customized footer background color.                          |
-| footerTextColor       | CSSProperties["color"] |            | false    | Customized footer text color.                                |
-| headers               | Array                  |            | true     | The cells for the header. (from the hook)                    |
-| headerBgColor         | CSSProperties["color"] |            | false    | Customized header background color.                          |
-| headerTextColor       | CSSProperties["color"] |            | false    | Customized header text color.                                |
-| noDataText            | string                 | 'No Data!' | false    | The text when no data rendered.                              |
-| onContextMenu         | func                   |            | false    | The function for row right-clicking.<br />**Signature:**<br/>`function(event: MouseEvent, row: RowProps) => unknown` |
-| onCustomizeRowBgColor | func                   |            | false    | The function for customizing the row background color.<br />**Signature:**<br/>`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/>  hover?: HexColor;<br/>}` |
-| onRowClick            | func                   |            | false    | The function for row clicking.<br />**Signature:**<br/>`function(row: RowProps) => unknown` |
-| rows                  | Array                  |            | true     | The rows for the table. (from the hook)                      |
+| Name                  | Type                       | Default    | Required | Description                                                  |
+| --------------------- | -------------------------- | ---------- | -------- | ------------------------------------------------------------ |
+| columns               | Array                      | []         | true     | Table columns                                                |
+| dense                 | bool                       |            | false    | If `true` the table size/density would be tight.             |
+| footerBgColor         | CSSProperties["color"]     |            | false    | Customized footer background color.                          |
+| footerTextColor       | CSSProperties["color"]     |            | false    | Customized footer text color.                                |
+|                       |                            |            |          |                                                              |
+| headerBgColor         | CSSProperties["color"]     |            | false    | Customized header background color.                          |
+| headerTextColor       | CSSProperties["color"]     |            | false    | Customized header text color.                                |
+| initialState          | { sortBy?: SortingProps}   |            | false    | Set the initial states                                       |
+| noDataText            | string                     | 'No Data!' | false    | The text when no data rendered.                              |
+| onContextMenu         | func                       |            | false    | The function for row right-clicking.<br />**Signature:**<br/>`function(event: MouseEvent, row: RowProps) => unknown` |
+| onCustomizeRowBgColor | func                       |            | false    | The function for customizing the row background color.<br />**Signature:**<br/>`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/>  hover?: HexColor;<br/>}` |
+| onRowClick            | func                       |            | false    | The function for row clicking.<br />**Signature:**<br/>`function(row: RowProps) => unknown` |
+| onSort                | func                       |            | false    | The function for sorting rows.<br />**Signature:**<br/>`function(props: SortingProps) => unknown` |
+| rows                  | Array<{ [name]: unknown }> |            | true     | table data/rows                                              |
+| sortingDisabled       | bool                       |            | false    | If true, the whole table can't be sortable.                  |
 
 
 

package/VirtualDataTable/index.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
+import { useMemo, useState, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
 import { TableVirtuoso } from "react-virtuoso";
 import Table from "@mui/material/Table";
 import TableRow from "@mui/material/TableRow";
@@ -22,16 +22,30 @@ import TableContainer from "@mui/material/TableContainer";
 import Typography from "@mui/material/Typography";
 import useInteractions from "./useInteractions";
 var VirtualDataTable = function (props, ref) {
-    var rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled, options = props.options;
-    var _b = useInteractions({ rows: rows, columns: columns }), normalCols = _b.normalCols, pinnedLeftCols = _b.pinnedLeftCols, pinnedRightCols = _b.pinnedRightCols, leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onScroll = _b.onScroll, handleSort = _b.handleSort, onResetSorting = _b.onResetSorting, renderSortingSymbol = _b.renderSortingSymbol;
+    var rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled, options = props.options, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var _b = useState(null), rowDataIndex = _b[0], setRowDataIndex = _b[1];
+    var _c = useInteractions({ rows: rows, columns: columns, initialState: initialState, sortingDisabled: sortingDisabled, onSort: onSort }), normalCols = _c.normalCols, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, renderSortingSymbol = _c.renderSortingSymbol;
     useImperativeHandle(ref, function () { return ({
         onResetSorting: onResetSorting,
     }); }, [onResetSorting]);
+    var handleCustomizeRowBgColor = useCallback(function (row, columns) {
+        var regex = /^#(\d|[a-f]|[A-F]){6}/i;
+        var _a = onCustomizeRowBgColor
+            ? onCustomizeRowBgColor({ row: row, columns: columns })
+            : { normal: "#FEFEFE", hover: "#F2F1F3" }, normal = _a.normal, hover = _a.hover;
+        if (!(normal && regex.test(normal))) {
+            normal = "#FEFEFE";
+        }
+        if (!(hover && regex.test(hover))) {
+            hover = "#F2F1F3";
+        }
+        return { normal: normal, hover: hover };
+    }, []);
     var fixedHeaderContent = useCallback(function () {
         return (_jsxs(TableRow, __assign({ sx: {
                 backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                 color: "".concat(headerTextColor || "inherit", " !important"),
-                width: "100%F",
+                width: "100%",
             } }, { children: [pinnedLeftCols.map(function (column, index) {
                     var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
                     var canSortBy = sortable && !sortingDisabled;
@@ -46,7 +60,8 @@ var VirtualDataTable = function (props, ref) {
                             position: "sticky",
                             left: left,
                             width: width,
-                            cursor: sortable ? "pointer" : "default",
+                            userSelect: "none",
+                            cursor: canSortBy ? "pointer" : "default",
                             backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(headerTextColor || "inherit", " !important"),
                             "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
@@ -72,7 +87,8 @@ var VirtualDataTable = function (props, ref) {
                             }
                         }, sx: {
                             width: width,
-                            cursor: sortable ? "pointer" : "default",
+                            userSelect: "none",
+                            cursor: canSortBy ? "pointer" : "default",
                             backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(headerTextColor || "inherit", " !important"),
                         } }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
@@ -90,7 +106,8 @@ var VirtualDataTable = function (props, ref) {
                             position: "sticky",
                             right: right,
                             width: width,
-                            cursor: sortable ? "pointer" : "default",
+                            userSelect: "none",
+                            cursor: canSortBy ? "pointer" : "default",
                             backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(headerTextColor || "inherit", " !important"),
                             "&::after": index === 0 && rightShadowVisible
@@ -134,6 +151,7 @@ var VirtualDataTable = function (props, ref) {
                             position: "sticky",
                             left: left,
                             width: width,
+                            userSelect: "none",
                             backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(footerTextColor || "inherit", " !important"),
                             "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
@@ -154,6 +172,7 @@ var VirtualDataTable = function (props, ref) {
                     var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
                     return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
                             width: width,
+                            userSelect: "none",
                             backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(footerTextColor || "inherit", " !important"),
                         } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
@@ -166,6 +185,7 @@ var VirtualDataTable = function (props, ref) {
                             position: "sticky",
                             right: right,
                             width: width,
+                            userSelect: "none",
                             backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(footerTextColor || "inherit", " !important"),
                             "&::after": index === 0 && rightShadowVisible
@@ -193,6 +213,7 @@ var VirtualDataTable = function (props, ref) {
         rightShadowVisible,
     ]);
     var itemContent = useCallback(function (rowIndex, row) {
+        var _a = handleCustomizeRowBgColor(row, columns), normal = _a.normal, hover = _a.hover;
         return (_jsxs(_Fragment, { children: [pinnedLeftCols.map(function (column, index) {
                     var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
                     var left = pinnedLeftCols
@@ -203,7 +224,9 @@ var VirtualDataTable = function (props, ref) {
                             left: left,
                             zIndex: 1,
                             width: width,
-                            backgroundColor: "background.paper",
+                            backgroundColor: (onRowClick && rowDataIndex === rowIndex
+                                ? hover
+                                : normal) || "background.paper",
                             "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
                                 ? {
                                     position: "absolute",
@@ -222,7 +245,9 @@ var VirtualDataTable = function (props, ref) {
                     var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
                     return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
                             width: width,
-                            backgroundColor: "background.paper",
+                            backgroundColor: (onRowClick && rowDataIndex === rowIndex
+                                ? hover
+                                : normal) || "background.paper",
                         } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
                 }), pinnedRightCols.map(function (column, index) {
                     var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
@@ -234,7 +259,9 @@ var VirtualDataTable = function (props, ref) {
                             right: right,
                             zIndex: 1,
                             width: width,
-                            backgroundColor: "background.paper",
+                            backgroundColor: (onRowClick && rowDataIndex === rowIndex
+                                ? hover
+                                : normal) || "background.paper",
                             "&::after": index === 0 && rightShadowVisible
                                 ? {
                                     position: "absolute",
@@ -252,11 +279,13 @@ var VirtualDataTable = function (props, ref) {
                 })] }));
     }, [
         rows,
+        rowDataIndex,
         normalCols,
         pinnedLeftCols,
         pinnedRightCols,
         leftShadowVisible,
         rightShadowVisible,
+        handleCustomizeRowBgColor,
     ]);
     var VirtuosoTableComponents = useMemo(function () { return ({
         EmptyPlaceholder: function () { return (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length }, { children: _jsx(Typography, __assign({ align: "center", variant: "body1", fontSize: 14, fontWeight: 600 }, { children: noDataText })) })) })); },
@@ -275,10 +304,32 @@ var VirtualDataTable = function (props, ref) {
                 tableLayout: "fixed",
             } }))); },
         TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
-        TableRow: TableRow,
+        TableRow: function (props) {
+            var _a = handleCustomizeRowBgColor(props.item, columns), normal = _a.normal, hover = _a.hover;
+            return (_jsx(TableRow, __assign({}, props, { sx: {
+                    backgroundColor: normal,
+                    "&:hover": {
+                        cursor: onRowClick ? "pointer" : "default",
+                        backgroundColor: onRowClick ? hover : normal,
+                    },
+                }, onMouseEnter: function () {
+                    setRowDataIndex(props["data-index"] || props["data-item-index"]);
+                }, onMouseLeave: function () {
+                    setRowDataIndex(null);
+                }, onClick: onRowClick
+                    ? function () {
+                        onRowClick(props.item);
+                    }
+                    : undefined, onContextMenu: function (event) {
+                    event.preventDefault();
+                    if (onContextMenu) {
+                        onContextMenu(event, props.item);
+                    }
+                } })));
+        },
         TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
         TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
-    }); }, []);
+    }); }, [onRowClick, onContextMenu, handleCustomizeRowBgColor]);
     return (_jsx(TableVirtuoso, { data: rows, style: { height: height }, onResize: onScroll, onScroll: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", increaseViewportBy: 5 }));
 };
 export default forwardRef(VirtualDataTable);

package/VirtualDataTable/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement, CSSProperties, MouseEvent } from "react";
 declare type HexColor = `#${string}`;
-declare type CustomVirtualTableRowBgColor = {
+export declare type CustomVirtualTableRowBgColor = {
     normal?: HexColor;
     hover?: HexColor;
 };
@@ -44,7 +44,7 @@ export interface VirtualTableProps<RowProps extends TVirtualTableRow, OptionProp
     onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
     onCustomizeRowBgColor?: ({ row, columns, }: {
         row: RowProps;
-        columns: TVirtualTableColumn;
+        columns: Array<TVirtualTableColumn>;
     }) => CustomVirtualTableRowBgColor;
     options?: OptionProps;
 }

package/index.d.ts

@@ -30,7 +30,6 @@ export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
 export * from "./VirtualDataTable";
-export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
@@ -60,4 +59,3 @@ export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
 export { default as VirtualDataTable } from "./VirtualDataTable";
-export { default as VirtualGrid } from "./VirtualGrid";

package/index.js

@@ -30,7 +30,6 @@ export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
 export * from "./VirtualDataTable";
-export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
@@ -60,4 +59,3 @@ export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
 export { default as VirtualDataTable } from "./VirtualDataTable";
-export { default as VirtualGrid } from "./VirtualGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.7.0-alpha.4",
+  "version": "1.7.0-beta.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -56,7 +56,6 @@
     "@mui/material": "5.11.0",
     "@mui/system": "5.11.0",
     "@reach/router": "^1.3.4",
-    "@tanstack/react-virtual": "^3.10.8",
     "color-alpha": "^1.1.3",
     "react-dropzone": "14.2.3",
     "react-player": "2.11.0",

package/VirtualGrid/GridCore/GridBody.d.ts

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

package/VirtualGrid/GridCore/GridBody.js

@@ -1,37 +0,0 @@
-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 { memo } from "react";
-import TableRow from "@mui/material/TableRow";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import GridBodyRow from "./GridBodyRow";
-import { useGridVirtualizer } from "../GridVirtualizerContext";
-function VirtualGridBody(props) {
-    var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
-    var virtualRows = useGridVirtualizer().virtualRows;
-    return (_jsx(TableBody, { children: virtualRows.length > 0 ? (virtualRows.map(function (virtualRow, index) {
-            return (_jsx(GridBodyRow, __assign({ rowIndex: index, virtualRow: virtualRow, rows: rows, columns: columns }, rest), "Virtual_Grid_Body_Row_".concat(virtualRow.key)));
-        })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
-}
-export default memo(VirtualGridBody);

package/VirtualGrid/GridCore/GridBodyRow.d.ts

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

package/VirtualGrid/GridCore/GridBodyRow.js

@@ -1,144 +0,0 @@
-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;
-    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

@@ -1,4 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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/VirtualGrid/GridCore/index.js

@@ -1,34 +0,0 @@
-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, 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 "./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 = useGridVirtualizer(), tableRef = _f.tableRef, getTotalSize = _f.getTotalSize, onProcessShadowVisible = _f.onProcessShadowVisible;
-    return (_jsx(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
-            maxHeight: "inherit",
-            borderWidth: "thin",
-            borderColor: "#e5e5e5",
-            borderStyle: "solid",
-            borderRadius: "4px",
-            borderCollapse: "unset !important",
-            transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-        } }, { 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 memo(VirtualGridCore);

package/VirtualGrid/GridVirtualizerContext.d.ts

@@ -1,3 +0,0 @@
-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/VirtualGrid/GridVirtualizerContext.js

@@ -1,108 +0,0 @@
-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 } from "react/jsx-runtime";
-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
-        ? 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 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 = 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 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 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, getTotalSize = rowVirtualizer.getTotalSize;
-    var virtualRows = getVirtualItems();
-    var onProcessShadowVisible = useCallback(function () {
-        if (tableRef.current) {
-            var target = tableRef.current;
-            var scrollLeft = target.scrollLeft;
-            var scrollWidth = target.scrollWidth;
-            var clientWidth = target.clientWidth;
-            var hasScrollBar = scrollWidth > clientWidth;
-            setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
-            setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
-        }
-    }, []);
-    useEffect(function () {
-        if (columns) {
-            onProcessShadowVisible();
-        }
-    }, [columns, onProcessShadowVisible]);
-    useEffect(function () {
-        window.addEventListener("resize", onProcessShadowVisible);
-    }, [onProcessShadowVisible]);
-    useEffect(function () { return function () {
-        window.removeEventListener("scroll", onProcessShadowVisible);
-    }; }, [onProcessShadowVisible]);
-    return (_jsx(GridVirtualizerContext.Provider, __assign({ value: {
-            tableRef: tableRef,
-            virtualRows: virtualRows,
-            leftShadowVisible: leftShadowVisible,
-            rightShadowVisible: rightShadowVisible,
-            getTotalSize: getTotalSize,
-            onMeasureElement: measureElement,
-            onProcessShadowVisible: onProcessShadowVisible,
-        } }, { children: children })));
-}
-export var useGridVirtualizer = function () {
-    return useContext(GridVirtualizerContext);
-};

package/VirtualGrid/index.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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 };

package/VirtualGrid/types.d.ts

@@ -1,104 +0,0 @@
-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;
-};
-export declare type VirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = VirtualGridCoreProps<RowProps, ExtendedProps> & {
-    estimateRowHeight?: number;
-    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>;
-    estimateRowHeight?: number;
-    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

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

package/VirtualGrid/useVirtualGrid.d.ts

@@ -1,3 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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;