@danikokonn/yarik-frontend-lib 2.0.58-test9 → 2.1.0

package/dist/components/SmartTable/SmartTable.d.ts

@@ -1,4 +1,11 @@
-import React from "react";
 import SmartTableProps from "./SmartTableProps";
-export default function SmartTable<T>({ rows, columns, pageN, numPages, perPage, loading, minWidth, width, rowStyles, selectable, selectedRow, sx, disablePerPageSelector, globalSearch, columnAutoWidth, error, globalSearchComponent, ContentWrapper, onRowDoubleClick, onSelectRow, controlComponent: ControlComponent, onToggleSort, onInputSearch, onPageSelect, onChangePerPage, controlComponentColSx, perPageOptions, }: SmartTableProps<T>): React.JSX.Element;
+export default function SmartTable<T extends {
+    id: string | number;
+} = {
+    id: string | number;
+}, P extends {
+    row: T;
+} = {
+    row: T;
+}>({ rows, columns, pageN, numPages, perPage, loading, minWidth, width, rowStyles, selectable, selectedRow, sx, disablePerPageSelector, globalSearch, columnAutoWidth, error, globalSearchComponent, ContentWrapper, ControlComponent, ControlComponentProps, virtuosoRef, controlComponentColSx, perPageOptions, onToggleSort, onInputSearch, onPageSelect, onChangePerPage, onSelectRow, onRowDoubleClick, }: SmartTableProps<T, P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SmartTable.d.ts.map

package/dist/components/SmartTable/SmartTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAsBlD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAiHhD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,EAAE,EACpC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,EAAE,EACF,sBAAsB,EACtB,YAAY,EACZ,eAAe,EACf,KAAK,EACL,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,qBAAqB,EACrB,cAAc,GACf,EAAE,eAAe,CAAC,CAAC,CAAC,qBA4TpB"}
+{"version":3,"file":"SmartTable.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTable.tsx"],"names":[],"mappings":"AAkBA,OAAO,eAAe,MAAM,mBAAmB,CAAC;AA2EhD,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC3D,CAAC,SAAS;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,GAAG;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,EACjC,EACA,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,EAAE,EACF,sBAAsB,EACtB,YAAY,EACZ,eAAe,EACf,KAAK,EACL,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAgB,GACjB,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,2CAiUvB"}

package/dist/components/SmartTable/SmartTable.js

@@ -1,4 +1,5 @@
-import React, { Fragment, Suspense } from "react";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { CircularProgress, Stack, Typography, useTheme } from "@mui/material";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
@@ -8,59 +9,42 @@ import Select from "@mui/material/Select";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
 import TableFooter from "@mui/material/TableFooter";
 import TableRow from "@mui/material/TableRow";
-import TableContainer from "@mui/material/TableContainer";
-import { useTheme, Stack, CircularProgress, Typography, Skeleton, } from "@mui/material";
-import SortBtn from "../SortBtn/SortBtn";
-import ColumnSearchInput from "../ColumnSearchInput/ColumnSearchInput";
+import React, { Fragment, Suspense, useCallback, useMemo } from "react";
 import { TableVirtuoso } from "react-virtuoso";
-import TableHeader from "./TableHeader";
+import ColumnSearchInput from "../ColumnSearchInput/ColumnSearchInput";
+import SortBtn from "../SortBtn/SortBtn";
 import RowContent from "./RowContent";
-// eslint-disable-next-line react/display-name
-const Scroller = React.forwardRef((props, ref) => (React.createElement(TableContainer, { component: Paper, ...props, ref: ref, sx: {
+import TableHeader from "./TableHeader";
+const Scroller = React.forwardRef((props, ref) => (_jsxs(TableContainer, { component: Paper, ...props, ref: ref, sx: {
         minWidth: Object(props).context.minWidth || "100%",
         flexGrow: 1,
         overflowX: "auto",
-    } },
-    Object(props).children,
-    Object(props).context.placeholder)));
-const TableHead = 
-// eslint-disable-next-line react/display-name
-React.forwardRef((props, ref) => (React.createElement(TableHeader, { ...props, ref: ref })));
-const TableBodyWrapper = 
-// eslint-disable-next-line react/display-name
-React.forwardRef((props, ref) => (React.createElement(TableBody, { ...props, ref: ref })));
+    }, children: [Object(props).children, Object(props).context.placeholder] })));
+const TableHead = React.forwardRef((props, ref) => (_jsx(TableHeader, { ...props, ref: ref })));
+const TableBodyWrapper = React.forwardRef((props, ref) => _jsx(TableBody, { ...props, ref: ref }));
 const Row = (props) => {
     const ContentWrapper = Object(props).context.ContentWrapper;
     const selectedRow = Object(props).context.selectedRow;
     const rowStyles = Object(props).context.rowStyles;
     const selectable = Object(props).context.selectable;
-    return ContentWrapper ? (React.createElement(ContentWrapper, { dagId: Object(props).item.id, rowProps: {
+    return ContentWrapper ? (_jsx(ContentWrapper, { rowProps: {
             selected: Object(props).item.id === selectedRow,
             ...props,
-        }, ...props })) : (React.createElement(TableRow, { hover: true, sx: {
+        }, ...props })) : (_jsx(TableRow, { hover: true, sx: {
             height: "3rem",
             overflowY: "hidden",
             ...rowStyles,
             cursor: selectable ? "pointer" : "default",
         }, selected: Object(props).item.id === selectedRow, ...props }));
 };
-const TableWrapper = (props) => (React.createElement(Table, { ...props, stickyHeader: true, sx: {
+const TableWrapper = (props) => (_jsx(Table, { ...props, stickyHeader: true, sx: {
         ...Object(props).context.tableStyle,
         minWidth: Object(props).context.minWidth || "100%",
     } }));
-const ItemContent = (_index, row, context) => (React.createElement(RowContent, { key: Object(row).id, row: row, columns: Object(context).columns, controlComponent: Object(context).ControlComponent, onDoubleClick: Object(context).onRowDoubleClick, onSelectRow: Object(context).selectable ? Object(context).handleSelectRow : () => { } }));
-const ScrollSeekPlaceholder = (props) => (
-// eslint-disable-next-line react/prop-types
-React.createElement(TableRow, { sx: { height: Object(props).height } }, Object(props).context.columns.map((col, i) => (React.createElement(TableCell, { sx: {
-        paddingTop: "0.25rem",
-        paddingBottom: "0.25rem",
-        py: 0,
-        ...col.colSx,
-    }, key: i },
-    React.createElement(Skeleton, { variant: "rectangular", width: "100%" }))))));
-export default function SmartTable({ rows, columns, pageN, numPages, perPage, loading, minWidth, width, rowStyles, selectable, selectedRow, sx, disablePerPageSelector, globalSearch, columnAutoWidth, error, globalSearchComponent, ContentWrapper, onRowDoubleClick, onSelectRow, controlComponent: ControlComponent, onToggleSort, onInputSearch, onPageSelect, onChangePerPage, controlComponentColSx, perPageOptions, }) {
+export default function SmartTable({ rows, columns, pageN, numPages, perPage, loading, minWidth, width, rowStyles, selectable, selectedRow, sx, disablePerPageSelector, globalSearch, columnAutoWidth, error, globalSearchComponent, ContentWrapper, ControlComponent, ControlComponentProps, virtuosoRef, controlComponentColSx, perPageOptions, onToggleSort, onInputSearch, onPageSelect, onChangePerPage, onSelectRow, onRowDoubleClick, }) {
     const theme = useTheme();
     const tableStyle = {
         width: columnAutoWidth ? "auto" : "100%",
@@ -68,24 +52,20 @@ export default function SmartTable({ rows, columns, pageN, numPages, perPage, lo
         borderCollapse: "separate",
         borderSpacing: 0,
     };
-    function handleSelectRow(rowId) {
+    const handleSelectRow = (rowId) => {
         if (selectable && onSelectRow) {
             onSelectRow(rowId);
         }
-    }
+    };
     const hasSearchableColumns = columns.some((col) => col.searchable);
     const hasGlobalSearch = globalSearch && globalSearchComponent;
-    const searchCols = () => columns.map((col, idx) => (React.createElement(TableCell, { key: idx, scope: "col", sx: { ...col.colSx } }, col.searchable ? ((col.searchComponent && col.searchComponent()) || (React.createElement(ColumnSearchInput, { field: col.fieldName, searchStr: col.searchStr, onInputSearch: onInputSearch }))) : (React.createElement(React.Fragment, null)))));
-    const headerTitleRow = (React.createElement(TableRow, { key: 0 },
-        columns.map((col, idx) => (React.createElement(TableCell, { key: idx, scope: "col", sx: {
-                resize: col.resizable ? "horizontal" : "none",
-                overflowX: col.resizable ? "hidden" : "inherit",
-                ...col.colSx,
-            } }, col.sortable ? (React.createElement(SortBtn, { field: col.fieldName, order: col.order || "none", onToggleSort: onToggleSort }, col.displayName)) : (col.displayName)))),
-        ControlComponent && (React.createElement(TableCell, { sx: { ...controlComponentColSx }, scope: "col" }))));
-    const headerSearchRow = (React.createElement(TableRow, { key: 1 }, globalSearch && globalSearchComponent ? (React.createElement(TableCell, { scope: "col", colSpan: columns.length + 1 }, globalSearchComponent)) : (React.createElement(React.Fragment, null,
-        hasSearchableColumns ? searchCols() : React.createElement(React.Fragment, null),
-        ControlComponent && (React.createElement(TableCell, { sx: { ...controlComponentColSx }, scope: "col" }))))));
+    const searchCols = () => columns.map((col, idx) => (_jsx(TableCell, { scope: "col", sx: { ...col.colSx }, children: col.searchable ? ((col.SearchComponent && (_jsx(col.SearchComponent, { ...col.SearchComponentProps }))) || (_jsx(ColumnSearchInput, { field: col.fieldName, searchStr: col.searchStr, onInputSearch: onInputSearch }))) : (_jsx(_Fragment, {})) }, idx)));
+    const headerTitleRow = (_jsxs(TableRow, { children: [columns.map((col, idx) => (_jsx(TableCell, { scope: "col", sx: {
+                    resize: col.resizable ? "horizontal" : "none",
+                    overflowX: col.resizable ? "hidden" : "inherit",
+                    ...col.colSx,
+                }, children: col.sortable ? (_jsx(SortBtn, { field: col.fieldName, order: col.order || "none", onToggleSort: onToggleSort, children: col.displayName })) : (col.displayName) }, idx))), ControlComponent && (_jsx(TableCell, { sx: { ...controlComponentColSx }, scope: "col" }))] }, 0));
+    const headerSearchRow = (_jsx(TableRow, { children: globalSearch && globalSearchComponent ? (_jsx(TableCell, { scope: "col", colSpan: columns.length + 1, children: globalSearchComponent })) : (_jsxs(_Fragment, { children: [hasSearchableColumns ? searchCols() : _jsx(_Fragment, {}), ControlComponent && (_jsx(TableCell, { sx: { ...controlComponentColSx }, scope: "col" }))] })) }, 1));
     const centerStyle = {
         position: "absolute",
         left: "50%",
@@ -93,39 +73,56 @@ export default function SmartTable({ rows, columns, pageN, numPages, perPage, lo
         transform: "translate(-50%, -50%)",
     };
     const headerRows = [headerTitleRow, headerSearchRow];
-    let placeholder = React.createElement(React.Fragment, null);
-    if (error && rows.length === 0) {
-        placeholder = (React.createElement(Typography, { variant: "h6", color: "textSecondary", sx: centerStyle }, "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435"));
-    }
-    else if (loading) {
-        placeholder = React.createElement(CircularProgress, { sx: centerStyle });
-    }
-    else if (rows.length === 0) {
-        placeholder = (React.createElement(Typography, { variant: "h6", color: "textSecondary", sx: centerStyle }, "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"));
-    }
-    const fixedHeaderContent = () => (React.createElement(Fragment, null, hasGlobalSearch ? headerRows[0] : headerRows));
-    const tableContext = {
-        columns: columns,
-        minWidth: minWidth,
-        rowStyles: rowStyles,
-        selectable: selectable,
-        tableStyle: tableStyle,
-        placeholder: placeholder,
-        selectedRow: selectedRow,
-        ContentWrapper: ContentWrapper,
-        ControlComponent: ControlComponent,
-        onRowDoubleClick: onRowDoubleClick,
-        handleSelectRow: handleSelectRow,
-    };
+    const placeholder = useMemo(() => {
+        if (error && rows.length === 0) {
+            return (_jsx(Typography, { variant: "h6", color: "textSecondary", sx: centerStyle, children: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435" }));
+        }
+        if (loading) {
+            return _jsx(CircularProgress, { sx: centerStyle });
+        }
+        if (rows.length === 0) {
+            return (_jsx(Typography, { variant: "h6", color: "textSecondary", sx: centerStyle, children: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }));
+        }
+        return _jsx(_Fragment, {});
+    }, [error, loading, rows.length]);
+    const fixedHeaderContent = useCallback(() => _jsx(Fragment, { children: hasGlobalSearch ? headerRows[0] : headerRows }), [hasGlobalSearch, headerRows]);
+    const tableContext = useMemo(() => ({
+        columns,
+        minWidth,
+        rowStyles,
+        selectable,
+        tableStyle,
+        placeholder,
+        selectedRow,
+        ContentWrapper,
+        ControlComponent,
+        ControlComponentProps,
+        onRowDoubleClick,
+        handleSelectRow,
+    }), [
+        columns,
+        minWidth,
+        rowStyles,
+        selectable,
+        tableStyle,
+        placeholder,
+        selectedRow,
+        ContentWrapper,
+        ControlComponent,
+        ControlComponentProps,
+        onRowDoubleClick,
+        handleSelectRow,
+    ]);
     const VirtuosoTableComponents = {
         Scroller: Scroller,
         Table: TableWrapper,
         TableRow: Row,
         TableHead: TableHead,
         TableBody: TableBodyWrapper,
-        ScrollSeekPlaceholder: ScrollSeekPlaceholder,
+        // ScrollSeekPlaceholder: ScrollSeekPlaceholder,
     };
-    return (React.createElement(Paper, { sx: {
+    const itemContent = (_index, row, context) => (_jsx(RowContent, { row: row, columns: context.columns, ControlComponent: context.ControlComponent, ControlComponentProps: context.ControlComponentProps, onDoubleClick: context.onRowDoubleClick, onSelectRow: context.selectable ? context.handleSelectRow : () => { } }, row.id));
+    return (_jsxs(Paper, { sx: {
             height: "74vh",
             position: "relative",
             display: "flex",
@@ -133,43 +130,34 @@ export default function SmartTable({ rows, columns, pageN, numPages, perPage, lo
             width: (width && (typeof width === "number" ? `${width}%` : width)) ||
                 "100%",
             ...sx,
-        } },
-        React.createElement(Stack, { direction: "column", sx: {
-                flexGrow: 1,
-                overflowX: "auto",
-                width: "100%",
-            } },
-            hasGlobalSearch && (React.createElement(Table, { size: "small", className: "rulesTable", stickyHeader: true, sx: { ...tableStyle, minWidth: minWidth || "100%", height: "auto" } },
-                React.createElement(TableHeader, null, headerRows[1]))),
-            React.createElement(Suspense, { fallback: React.createElement(CircularProgress, { sx: { position: "absolute", left: "50%", top: "50%" } }) },
-                React.createElement(TableVirtuoso, { style: { height: "100%" }, totalCount: rows.length, data: rows, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, itemContent: (ItemContent), context: tableContext, scrollSeekConfiguration: {
-                        // «входим» в режим плейсхолдеров при скорости >200px/фрейм
-                        enter: (velocity) => Math.abs(velocity) > 50,
-                        // «выходим» обратно, когда скорость опустилась ниже 30px/фрейм
-                        exit: (velocity) => Math.abs(velocity) < 10,
-                    }, increaseViewportBy: { top: 800, bottom: 800 } }))),
-        React.createElement(Table, { sx: { ...tableStyle, height: "auto", minWidth: minWidth || "100%" } },
-            React.createElement(TableFooter, { sx: {
-                    bottom: "0%",
-                    zIndex: 600,
-                    position: "sticky",
-                    backgroundColor: theme.palette.background.default,
-                } },
-                React.createElement(TableRow, null,
-                    React.createElement(TableCell, { colSpan: 11 },
-                        React.createElement("div", { style: {
-                                display: "flex",
-                                justifyContent: "space-between",
-                                alignItems: "center",
-                            } },
-                            React.createElement(Pagination, { count: numPages, page: pageN, onChange: (_, p) => {
-                                    onPageSelect(p);
-                                }, showLastButton: true, showFirstButton: true, color: "primary", sx: { display: { xs: "none", md: "flex" } } }),
-                            React.createElement(Pagination, { count: numPages, page: pageN, onChange: (_, p) => {
-                                    onPageSelect(p);
-                                }, siblingCount: 0, boundaryCount: 0, color: "primary", sx: { display: { xs: "flex", md: "none" } } }),
-                            disablePerPageSelector ? (React.createElement(React.Fragment, null)) : (React.createElement(FormControl, { size: "small" },
-                                React.createElement(InputLabel, { id: "perPageInputLabel" }, "\u0421\u0442\u0440\u043E\u043A"),
-                                React.createElement(Select, { label: "\u0421\u0442\u0440\u043E\u043A", labelId: "perPageInputLabel", value: String(perPage), autoWidth: true, onChange: (e) => onChangePerPage &&
-                                        onChangePerPage(Number(e.target.value)), sx: { minWidth: "2rem" } }, (perPageOptions || [5, 10, 15, 20, 25, 50, 100]).map((v, idx) => (React.createElement(MenuItem, { key: idx, value: v }, v)))))))))))));
+        }, children: [_jsxs(Stack, { direction: "column", sx: {
+                    flexGrow: 1,
+                    overflowX: "auto",
+                    width: "100%",
+                }, children: [hasGlobalSearch && (_jsx(Table, { size: "small", className: "rulesTable", stickyHeader: true, sx: { ...tableStyle, minWidth: minWidth || "100%", height: "auto" }, children: _jsx(TableHeader, { children: headerRows[1] }) })), _jsx(Suspense, { fallback: _jsx(CircularProgress, { sx: { position: "absolute", left: "50%", top: "50%" } }), children: _jsx(TableVirtuoso, { ref: virtuosoRef, style: { height: "100%" }, totalCount: rows.length, data: rows, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, itemContent: itemContent, context: tableContext, 
+                            // scrollSeekConfiguration={{
+                            //   // Enter placeholder mode only on truly fast scroll (>150px/frame, ~keyboard=100-120)
+                            //   // This filters out slow mouse drags
+                            //   enter: (velocity) => Math.abs(velocity) > 150,
+                            //   // Exit when user clearly stops (velocity drops below 30)
+                            //   exit: (velocity) => Math.abs(velocity) < 30,
+                            // }}
+                            // Render only 150px above/below viewport instead of 800px
+                            // This dramatically improves keyboard scroll performance
+                            increaseViewportBy: { top: 200, bottom: 200 } }) })] }), _jsx(Table, { sx: { ...tableStyle, height: "auto", minWidth: minWidth || "100%" }, children: _jsx(TableFooter, { sx: {
+                        bottom: "0%",
+                        zIndex: 600,
+                        position: "sticky",
+                        backgroundColor: theme.vars?.palette.background.default ||
+                            theme.palette.background.default,
+                    }, children: _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 11, children: _jsxs("div", { style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                }, children: [_jsx(Pagination, { count: numPages, page: pageN, onChange: (_, p) => {
+                                            onPageSelect(p);
+                                        }, showLastButton: true, showFirstButton: true, color: "primary", sx: { display: { xs: "none", md: "flex" } } }), _jsx(Pagination, { count: numPages, page: pageN, onChange: (_, p) => {
+                                            onPageSelect(p);
+                                        }, siblingCount: 0, boundaryCount: 0, color: "primary", sx: { display: { xs: "flex", md: "none" } } }), disablePerPageSelector ? (_jsx(_Fragment, {})) : (_jsxs(FormControl, { size: "small", children: [_jsx(InputLabel, { id: "perPageInputLabel", children: "\u0421\u0442\u0440\u043E\u043A" }), _jsx(Select, { label: "\u0421\u0442\u0440\u043E\u043A", labelId: "perPageInputLabel", value: String(perPage), autoWidth: true, onChange: (e) => onChangePerPage &&
+                                                    onChangePerPage(Number(e.target.value)), sx: { minWidth: "2rem" }, children: (perPageOptions || [5, 10, 15, 20, 25, 50, 100]).map((v, idx) => (_jsx(MenuItem, { value: v, children: v }, idx))) })] }))] }) }) }) }) })] }));
 }

package/dist/components/SmartTable/SmartTableProps.d.ts

@@ -1,7 +1,16 @@
-import { ReactElement, ReactNode } from "react";
-import { Column } from "../../types";
 import { SxProps, TableRowProps, Theme } from "@mui/material";
-export default interface SmartTableProps<T> {
+import { ComponentType, ReactElement, ReactNode } from "react";
+import { TableVirtuosoHandle } from "react-virtuoso";
+import { Column } from "../../types";
+export default interface SmartTableProps<T extends {
+    id: string | number;
+} = {
+    id: string | number;
+}, P extends {
+    row: T;
+} = {
+    row: T;
+}> {
     rows: T[];
     columns: Column<T>[];
     pageN: number;
@@ -18,13 +27,17 @@ export default interface SmartTableProps<T> {
     disablePerPageSelector?: boolean;
     globalSearch?: boolean;
     globalSearchComponent?: ReactElement;
-    ContentWrapper?({ children, dagId, rowProps, }: {
+    error?: boolean;
+    perPageOptions?: number[];
+    ContentWrapper?: ComponentType<{
         children?: ReactNode;
-        dagId: string;
         rowProps: TableRowProps;
-    }): React.JSX.Element;
+    }>;
+    ControlComponent?: ComponentType<P>;
+    ControlComponentProps?: Omit<P, "row">;
+    controlComponentColSx?: SxProps<Theme>;
+    virtuosoRef?: React.Ref<TableVirtuosoHandle> | undefined;
     onSelectRow?(rowId: string): void;
-    controlComponent?(row: T): ReactNode;
     onRowDoubleClick?(rowId: string | null): void;
     onToggleSort(field: string, order: "asc" | "desc" | "none"): void;
     onInputSearch(options: {
@@ -33,8 +46,5 @@ export default interface SmartTableProps<T> {
     }[]): void;
     onPageSelect(pageN: number): void;
     onChangePerPage?(perPage: number): void;
-    controlComponentColSx?: SxProps<Theme>;
-    error?: boolean;
-    perPageOptions?: number[];
 }
 //# sourceMappingURL=SmartTableProps.d.ts.map

package/dist/components/SmartTable/SmartTableProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartTableProps.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTableProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,CAAC,OAAO,WAAW,eAAe,CAAC,CAAC;IACxC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,YAAY,CAAC;IACrC,cAAc,CAAC,CAAC,EACd,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE;QACD,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,aAAa,CAAC;KACzB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACtB,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IACrC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClE,aAAa,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,IAAI,CAAC;IAClE,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B"}
+{"version":3,"file":"SmartTableProps.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTableProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,OAAO,WAAW,eAAe,CACtC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC3D,CAAC,SAAS;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE,GAAG;IAAE,GAAG,EAAE,CAAC,CAAA;CAAE;IAEjC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,YAAY,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC;QAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,QAAQ,EAAE,aAAa,CAAC;KACzB,CAAC,CAAC;IACH,gBAAgB,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACzD,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClE,aAAa,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,IAAI,CAAC;IAClE,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CACzC"}

package/dist/components/SmartTable/TableHeader.d.ts

@@ -1,5 +1,4 @@
-import React from "react";
 import { TableHeadProps } from "@mui/material/TableHead";
-declare const TableHeader: ({ ref, ...props }: TableHeadProps) => React.JSX.Element;
+declare const TableHeader: ({ ref, ...props }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
 export default TableHeader;
 //# sourceMappingURL=TableHeader.d.ts.map

package/dist/components/SmartTable/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAkB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGpE,QAAA,MAAM,WAAW,GAAI,mBAAmB,cAAc,sBAerD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAkB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,QAAA,MAAM,WAAW,GAAI,mBAAmB,cAAc,4CAiBrD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/SmartTable/TableHeader.js

@@ -1,13 +1,14 @@
-import React from "react";
-import TableHead from "@mui/material/TableHead";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "@mui/material";
+import TableHead from "@mui/material/TableHead";
 const TableHeader = ({ ref, ...props }) => {
     const theme = useTheme();
-    return (React.createElement(TableHead, { sx: {
+    return (_jsx(TableHead, { sx: {
             top: "0",
             zIndex: 600,
             position: "sticky",
-            backgroundColor: theme.palette.background.default,
+            backgroundColor: theme.vars?.palette.background.default ||
+                theme.palette.background.default,
         }, ...props, ref: ref }));
 };
 export default TableHeader;

package/dist/components/SmartTable/index.d.ts

@@ -1,5 +1,5 @@
-export { default } from "./SmartTable";
 export * from "./SmartTable";
-export { default as SmartTableProps } from "./SmartTableProps";
+export { default } from "./SmartTable";
 export * from "./SmartTableProps";
+export { type default as SmartTableProps } from "./SmartTableProps";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SmartTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,KAAK,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/SmartTable/index.js

@@ -1,3 +1,3 @@
-export { default } from "./SmartTable";
 export * from "./SmartTable";
+export { default } from "./SmartTable";
 export * from "./SmartTableProps";

package/dist/components/SortBtn/SortBtn.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import SortBtnProps from "./SortBtnProps";
-export default function SortBtn({ children, field, order: _order, onToggleSort, }: SortBtnProps): React.JSX.Element;
+export default function SortBtn({ children, field, order: _order, onToggleSort, }: SortBtnProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SortBtn.d.ts.map

package/dist/components/SortBtn/SortBtn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortBtn.d.ts","sourceRoot":"","sources":["../../../src/components/SortBtn/SortBtn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAG1C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,KAAK,EAAE,MAAM,EACb,YAAY,GACb,EAAE,YAAY,qBAgCd"}
+{"version":3,"file":"SortBtn.d.ts","sourceRoot":"","sources":["../../../src/components/SortBtn/SortBtn.tsx"],"names":[],"mappings":"AAEA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,KAAK,EAAE,MAAM,EACb,YAAY,GACb,EAAE,YAAY,2CAgCd"}

package/dist/components/SortBtn/SortBtn.js

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TableSortLabel } from "@mui/material";
+import { useEffect, useState } from "react";
 export default function SortBtn({ children, field, order: _order, onToggleSort, }) {
     const [order, setOrder] = useState(_order || "none");
     useEffect(() => setOrder(_order), [_order]);
@@ -19,5 +20,5 @@ export default function SortBtn({ children, field, order: _order, onToggleSort,
         onToggleSort(field, newOrder);
         setOrder(newOrder);
     }
-    return (React.createElement(TableSortLabel, { active: order !== "none", direction: order !== "none" ? order : undefined, id: "toggleSortBtn", onClick: handleToggleSort }, children));
+    return (_jsx(TableSortLabel, { active: order !== "none", direction: order !== "none" ? order : undefined, id: "toggleSortBtn", onClick: handleToggleSort, children: children }));
 }

package/dist/components/SortBtn/index.d.ts

@@ -1,5 +1,5 @@
-export { default } from "./SortBtn";
 export * from "./SortBtn";
-export { default as SortBtnProps } from "./SortBtnProps";
+export { default } from "./SortBtn";
 export * from "./SortBtnProps";
+export { type default as SortBtnProps } from "./SortBtnProps";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SortBtn/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortBtn/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC;AAE1B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SortBtn/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,KAAK,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/SortBtn/index.js

@@ -1,3 +1,3 @@
-export { default } from "./SortBtn";
 export * from "./SortBtn";
+export { default } from "./SortBtn";
 export * from "./SortBtnProps";

package/dist/components/SubtaskItem/SubtaskItem.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import SubtaskItemProps from "./SubtaskItemProps";
-export default function SubtaskItem({ taskInstance, logs, expanded, onShowLogs, expandedLogContainerRef, }: SubtaskItemProps): React.JSX.Element;
+export default function SubtaskItem({ taskInstance, logs, expanded, onShowLogs, expandedLogContainerRef, }: SubtaskItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SubtaskItem.d.ts.map

package/dist/components/SubtaskItem/SubtaskItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubtaskItem.d.ts","sourceRoot":"","sources":["../../../src/components/SubtaskItem/SubtaskItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,uBAAuB,GACxB,EAAE,gBAAgB,qBAkFlB"}
+{"version":3,"file":"SubtaskItem.d.ts","sourceRoot":"","sources":["../../../src/components/SubtaskItem/SubtaskItem.tsx"],"names":[],"mappings":"AAgBA,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAmBlD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,uBAAuB,GACxB,EAAE,gBAAgB,2CAwIlB"}