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

package/DataTable/{TableBody.d.ts → TableCore/TableBody.d.ts}

@@ -1,3 +1,3 @@
-import type { TableBodyProps, KvProps } from "./types";
+import type { TableBodyProps, KvProps } from "../types";
 declare function TBody<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
 export default TBody;

package/DataTable/{TableBody.js → TableCore/TableBody.js}

@@ -25,8 +25,10 @@ import TableRow from "@mui/material/TableRow";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableBodyRow from "./TableBodyRow";
+import { useTableVirtualizer } from "../VirtualizerContext";
 function TBody(props) {
-    var rows = props.rows, columns = props.columns, virtualRows = props.virtualRows, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "virtualRows", "noDataText"]);
+    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 = useTableVirtualizer().virtualRows;
     return (_jsx(TableBody, { children: virtualRows.length > 0 ? (virtualRows.map(function (virtualRow) {
             return (_jsx(TableBodyRow, __assign({ rowIndex: virtualRow.index, virtualRow: virtualRow, rows: rows, columns: columns }, rest), "DataTable_".concat(virtualRow.key || virtualRow.index)));
         })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));

package/DataTable/{TableBodyRow.d.ts → TableCore/TableBodyRow.d.ts}

@@ -1,3 +1,3 @@
-import type { TableBodyRowProps, KvProps } from "./types";
+import type { TableBodyRowProps, KvProps } from "../types";
 declare function TableBodyRow<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyRowProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
 export default TableBodyRow;

package/DataTable/{TableBodyRow.js → TableCore/TableBodyRow.js}

@@ -15,13 +15,15 @@ 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 { useTableVirtualizer } from "../VirtualizerContext";
 function TableBodyRow(props) {
-    var rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _b = useTableVirtualizer(), leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onMeasureElement = _b.onMeasureElement;
     var row = useMemo(function () { return rows[virtualRow.index]; }, [rows, virtualRow]);
-    var _b = useMemo(function () {
+    var _c = useMemo(function () {
         if (isUpMd) {
             var left = columns.filter(function (c) { return c.fixable === "left"; });
             var right = columns.filter(function (c) { return c.fixable === "right"; });
@@ -31,8 +33,8 @@ function TableBodyRow(props) {
         else {
             return [[], columns, []];
         }
-    }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
-    var _c = useMemo(function () {
+    }, [isUpMd, columns]), fixedLeftCols = _c[0], dynamicCols = _c[1], fixedRightCols = _c[2];
+    var _d = 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;
@@ -42,7 +44,7 @@ function TableBodyRow(props) {
             };
         }
         return { normal: "#FEFEFE", hover: "#F2F1F3" };
-    }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
+    }, [row, columns, onCustomizeRowBgColor]), normal = _d.normal, hover = _d.hover;
     return (_jsxs(TableRow, __assign({ sx: {
             backgroundColor: normal,
             transform: "translateY(".concat(virtualRow.start - rowIndex * virtualRow.size, "px)"),
@@ -50,7 +52,7 @@ function TableBodyRow(props) {
                 cursor: onRowClick ? "pointer" : "default",
                 backgroundColor: onRowClick ? hover : normal,
             },
-        }, onMouseEnter: function (event) {
+        }, "data-index": virtualRow.index, ref: function (node) { return onMeasureElement(node); }, onMouseEnter: function (event) {
             setRowEl(event.currentTarget);
         }, onMouseLeave: function () {
             setRowEl(undefined);

package/DataTable/{TableFooter.d.ts → TableCore/TableFooter.d.ts}

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

package/DataTable/{TableFooter.js → TableCore/TableFooter.js}

@@ -16,11 +16,13 @@ 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 { useTableVirtualizer } from "../VirtualizerContext";
 function TableFooter(props) {
-    var _a = props.footers, footers = _a === void 0 ? [] : _a, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    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 = useMemo(function () {
+    var _b = useTableVirtualizer(), 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"; });
@@ -30,7 +32,7 @@ function TableFooter(props) {
         else {
             return [[], footers, []];
         }
-    }, [isUpMd, noData, footers]), fixedLeftFooters = _b[0], dynamicFooters = _b[1], fixedRightFooters = _b[2];
+    }, [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"),

package/DataTable/{TableHeader.d.ts → TableCore/TableHeader.d.ts}

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

package/DataTable/{TableHeader.js → TableCore/TableHeader.js}

@@ -16,11 +16,13 @@ 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 { useTableVirtualizer } from "../VirtualizerContext";
 function TableHeader(props) {
-    var headers = props.headers, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    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 = useMemo(function () {
+    var _a = useTableVirtualizer(), 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"; });
@@ -30,7 +32,7 @@ function TableHeader(props) {
         else {
             return [[], headers, []];
         }
-    }, [isUpMd, noData, headers]), fixedLeftHeaders = _a[0], dynamicHeaders = _a[1], fixedRightHeaders = _a[2];
+    }, [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"),

package/DataTable/TableCore/index.d.ts

@@ -0,0 +1,3 @@
+import type { KvProps, DataTableCoreProps } from "../types";
+declare function TableCore<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableCoreProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+export default TableCore;

package/DataTable/TableCore/index.js

@@ -0,0 +1,32 @@
+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 Table from "@mui/material/Table";
+import TableContainer from "@mui/material/TableContainer";
+import TableBody from "./TableBody";
+import TableHeader from "./TableHeader";
+import TableFooter from "./TableFooter";
+import { useTableVirtualizer } from "../VirtualizerContext";
+function TableCore(props) {
+    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;
+    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: _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;

package/DataTable/VirtualizerContext.d.ts

@@ -0,0 +1,3 @@
+import type { KvProps, IVirtualizerContext, VirtualizerContextProviderProps } from "./types";
+export declare function VirtualizerContextProvider<RowProps extends KvProps, ExtendedProps extends KvProps>(props: VirtualizerContextProviderProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+export declare const useTableVirtualizer: () => IVirtualizerContext;

package/DataTable/VirtualizerContext.js

@@ -0,0 +1,73 @@
+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, useState, useEffect, useContext, useCallback, createContext, } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+var VirtualizerContext = createContext({
+    tableRef: { current: null },
+    virtualRows: [],
+    leftShadowVisible: false,
+    rightShadowVisible: false,
+    onMeasureElement: function () { },
+    onProcessShadowVisible: function () { },
+});
+export function VirtualizerContextProvider(props) {
+    var children = props.children, rows = props.rows, columns = props.columns, dense = props.dense;
+    var tableRef = useRef(null);
+    var rowVirtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: function () { return tableRef.current; },
+        estimateSize: function () { return (dense ? 48 : 72); },
+        measureElement: typeof window !== "undefined" &&
+            navigator.userAgent.indexOf("Firefox") === -1
+            ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
+            : undefined,
+        overscan: 6,
+    });
+    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 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(VirtualizerContext.Provider, __assign({ value: {
+            tableRef: tableRef,
+            virtualRows: virtualRows,
+            leftShadowVisible: leftShadowVisible,
+            rightShadowVisible: rightShadowVisible,
+            onMeasureElement: measureElement,
+            onProcessShadowVisible: onProcessShadowVisible,
+        } }, { children: children })));
+}
+export var useTableVirtualizer = function () {
+    return useContext(VirtualizerContext);
+};

package/DataTable/index.js

@@ -9,66 +9,27 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useRef, useEffect } from "react";
-import Grid from "@mui/material/Grid";
-import Table from "@mui/material/Table";
-import TableContainer from "@mui/material/TableContainer";
+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 { useVirtualizer } from "@tanstack/react-virtual";
 import useCustomTheme from "../useCustomTheme";
 import useDataTable from "./useTable";
-import TableBody from "./TableBody";
-import TableHeader from "./TableHeader";
-import TableFooter from "./TableFooter";
+import TableCore from "./TableCore";
+import { VirtualizerContextProvider } from "./VirtualizerContext";
 function DataTable(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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    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 });
-    var tableRef = useRef(null);
-    var rowVirtualizer = useVirtualizer({
-        count: rows.length,
-        getScrollElement: function () { return tableRef.current; },
-        estimateSize: function () { return (dense ? 48 : 72); },
-        measureElement: typeof window !== "undefined" &&
-            navigator.userAgent.indexOf("Firefox") === -1
-            ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
-            : undefined,
-        overscan: 6,
-    });
-    var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
-    var _g = useState(false), rightShadowVisible = _g[0], setRightShadowVisible = _g[1];
-    var virtualRows = rowVirtualizer.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(ThemeProvider, __assign({ theme: theme }, { children: _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(rowVirtualizer.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, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, virtualRows: virtualRows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(VirtualizerContextProvider, __assign({ rows: rows, columns: columns, dense: dense }, { children: _jsx(TableCore, __assign({}, rest, { rows: rows, columns: columns, dense: dense })) })) })));
 }
 export default DataTable;
 export * from "./types";

package/DataTable/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, CSSProperties, MouseEvent } from "react";
+import type { ReactNode, RefObject, MouseEvent, ReactElement, CSSProperties } from "react";
 import type { VirtualItem } from "@tanstack/react-virtual";
 declare type HexColor = `#${string}`;
 export declare type CustomRowBgColor = {
@@ -56,15 +56,10 @@ export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps ext
     headerBgColor?: CSSProperties["color"];
     headerTextColor?: CSSProperties["color"];
     noData?: boolean;
-    leftShadowVisible?: boolean;
-    rightShadowVisible?: boolean;
 };
 export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
     rows: Array<RowProps>;
-    virtualRows: Array<VirtualItem>;
-    leftShadowVisible?: boolean;
-    rightShadowVisible?: boolean;
     noDataText?: string;
     onRowClick?: (row: RowProps) => unknown;
     onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
@@ -73,7 +68,7 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
         columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
     }) => CustomRowBgColor;
 };
-export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText" | "virtualRows"> & {
+export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
     rowIndex: number;
     virtualRow: VirtualItem;
 };
@@ -82,12 +77,28 @@ export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps ext
     footerBgColor?: CSSProperties["color"];
     footerTextColor?: CSSProperties["color"];
     noData?: boolean;
-    leftShadowVisible?: boolean;
-    rightShadowVisible?: boolean;
 };
-export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "virtualRows"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & {
+export declare type DataTableCoreProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "noData"> & TableBodyProps<RowProps, ExtendedProps> & Omit<TableFooterProps<RowProps, ExtendedProps>, "noData"> & {
     dense?: boolean;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 };
+export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = DataTableCoreProps<RowProps, ExtendedProps> & {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export interface VirtualizerContextProviderProps<RowProps extends KvProps, ExtendedProps extends KvProps> {
+    dense?: boolean;
+    children: ReactNode;
+    rows: Array<RowProps>;
+    columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
+}
+export interface IVirtualizerContext {
+    tableRef: RefObject<HTMLDivElement>;
+    virtualRows: Array<VirtualItem>;
+    leftShadowVisible: boolean;
+    rightShadowVisible: boolean;
+    onMeasureElement: (node: Element | null | undefined) => void;
+    onProcessShadowVisible: () => void;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.6.11-alpha.3",
+  "version": "1.6.11-alpha.5",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",