mytek-components 2.0.5 → 2.0.6

package/dist/main.es.js

@@ -5,9 +5,9 @@ import * as React from "react";
 import React__default, { useState, useRef, useEffect, useCallback, useContext, useMemo, useLayoutEffect, createContext, cloneElement, forwardRef, createElement } from "react";
 import emStyled from "@emotion/styled";
 import "@emotion/react";
-import { FormControlLabel, Radio, IconButton, Menu, MenuItem, Divider, Box, TextField, FormControl as FormControl$2, Select, Button as Button$1, Typography, Checkbox, Tabs, Tab, TableContainer, Paper, Table as Table$1, TableHead, TableRow, TableCell, TableBody, useMediaQuery, InputAdornment, Tooltip as Tooltip$3, CircularProgress, ListItemIcon, ListItemText, Popover as Popover$2 } from "@mui/material";
+import { FormControlLabel, Radio, IconButton, Menu, MenuItem, Divider, Box, TextField, FormControl as FormControl$2, Select, Button as Button$1, Typography, Checkbox, Tabs, Tab, TableContainer, Paper, Table as Table$1, TableHead, TableRow, TableCell, TableBody, useMediaQuery, InputAdornment, Popover as Popover$2, Tooltip as Tooltip$3, CircularProgress, ListItemIcon, ListItemText } from "@mui/material";
 import ReactDOM from "react-dom";
-import { useMaterialReactTable, MRT_ToggleFiltersButton, MRT_ToggleDensePaddingButton, MRT_ShowHideColumnsButton, MRT_ToggleFullScreenButton, MaterialReactTable } from "material-react-table";
+import { useMaterialReactTable, MaterialReactTable, MRT_ToggleFiltersButton, MRT_ToggleDensePaddingButton, MRT_ShowHideColumnsButton, MRT_ToggleFullScreenButton } from "material-react-table";
 import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
 import dayjs from "dayjs";
 import * as XLSX from "xlsx";
@@ -18184,104 +18184,18 @@ function SmartGridTable({
       }
     },
     //render top menu
-    renderTopToolbar: ({ table: table2 }) => {
-      const [searchValue, setSearchValue] = useState(
-        table2.getState().globalFilter ?? ""
-      );
-      const disable = isGridDisabled;
-      useEffect(() => {
-        if (disable) return;
-        const timeout2 = setTimeout(() => {
-          table2.setGlobalFilter(searchValue || void 0);
-        }, 300);
-        return () => clearTimeout(timeout2);
-      }, [searchValue, table2, disable]);
-      const exportData = table2.getFilteredRowModel().rows.map((row) => row.original);
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { px: 2, py: 2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Box,
-        {
-          sx: {
-            display: "grid",
-            gridTemplateColumns: {
-              xs: "1fr",
-              sm: "1fr auto"
-            },
-            gap: 2,
-            alignItems: "center",
-            width: "100%"
-          },
-          children: [
-            (topToolbar == null ? void 0 : topToolbar.globalSearch) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              TextField,
-              {
-                size: "small",
-                fullWidth: true,
-                disabled: disable,
-                placeholder: isLoading ? "Loading..." : safeColumns.length === 0 ? "No columns configured" : safeData.length === 0 ? "No data available" : "Search...",
-                value: searchValue,
-                onChange: (e) => setSearchValue(e.target.value),
-                InputProps: {
-                  startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchCheck, {}) })
-                },
-                sx: {
-                  "& .MuiOutlinedInput-root": {
-                    borderRadius: 1.5,
-                    "& fieldset": { borderColor: mergedTheme == null ? void 0 : mergedTheme.headerBg },
-                    "&:hover fieldset": { borderColor: mergedTheme == null ? void 0 : mergedTheme.headerBg },
-                    "&.Mui-focused fieldset": {
-                      borderColor: mergedTheme == null ? void 0 : mergedTheme.headerBg,
-                      borderWidth: 2
-                    }
-                  },
-                  "& .MuiOutlinedInput-input::placeholder": {
-                    opacity: 0.7
-                  },
-                  "& .MuiInputAdornment-root svg": {
-                    color: mergedTheme == null ? void 0 : mergedTheme.headerBg
-                  }
-                }
-              }
-            ),
-            ((topToolbar == null ? void 0 : topToolbar.exportBtn) || (topToolbar == null ? void 0 : topToolbar.columnFilters) || (topToolbar == null ? void 0 : topToolbar.densityToggle) || (topToolbar == null ? void 0 : topToolbar.showHideColumnsBtn) || (topToolbar == null ? void 0 : topToolbar.fullscreenToggle)) && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Paper,
-              {
-                elevation: 3,
-                sx: {
-                  justifySelf: "end",
-                  // ✅ THIS IS THE KEY
-                  display: "inline-flex",
-                  alignItems: "center",
-                  width: "fit-content",
-                  px: 1,
-                  py: 0.2,
-                  borderRadius: 2,
-                  bgcolor: "background.paper",
-                  border: `1px solid ${mergedTheme == null ? void 0 : mergedTheme.headerBg}`,
-                  whiteSpace: "nowrap",
-                  opacity: disable ? 0.6 : 1,
-                  pointerEvents: disable ? "none" : "auto"
-                },
-                children: [
-                  (topToolbar == null ? void 0 : topToolbar.exportBtn) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    ExportButton,
-                    {
-                      data: exportData,
-                      color: mergedTheme == null ? void 0 : mergedTheme.headerBg,
-                      filename: "table-data",
-                      disabled: disable
-                    }
-                  ),
-                  (topToolbar == null ? void 0 : topToolbar.columnFilters) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ToggleFiltersButton, { table: table2, disabled: disable }),
-                  (topToolbar == null ? void 0 : topToolbar.densityToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ToggleDensePaddingButton, { table: table2, disabled: disable }),
-                  (topToolbar == null ? void 0 : topToolbar.showHideColumnsBtn) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ShowHideColumnsButton, { table: table2, disabled: disable }),
-                  (topToolbar == null ? void 0 : topToolbar.fullscreenToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ToggleFullScreenButton, { table: table2, disabled: disable })
-                ]
-              }
-            )
-          ]
-        }
-      ) }) });
-    },
+    renderTopToolbar: ({ table: table2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SmartGridTopToolbar,
+      {
+        table: table2,
+        theme: mergedTheme,
+        topToolbar,
+        isGridDisabled,
+        isLoading,
+        safeColumns,
+        safeData
+      }
+    ),
     /* ===============================
        INITIAL STATE
     ================================ */
@@ -18324,18 +18238,29 @@ function SmartGridTable({
     /* ===============================
        ROOT (TABLE WRAPPER)
     ================================ */
-    muiTablePaperProps: {
-      elevation: 0,
-      sx: {
-        height: height2,
-        width: width2,
-        display: "flex",
-        flexDirection: "column",
-        border: `1px solid ${mergedTheme.border}`,
-        borderRadius: "6px",
-        backgroundColor: mergedTheme.bodyBg
-      }
-    },
+    muiTablePaperProps: useCallback(
+      ({ table: table2 }) => {
+        const isFullScreen = table2.getState().isFullScreen;
+        return {
+          elevation: 0,
+          sx: {
+            height: height2,
+            width: width2,
+            display: "flex",
+            flexDirection: "column",
+            border: `1px solid ${mergedTheme.border}`,
+            backgroundColor: mergedTheme.bodyBg,
+            ...isFullScreen && {
+              position: "fixed",
+              inset: 0,
+              borderRadius: 0,
+              zIndex: "9999999 !important"
+            }
+          }
+        };
+      },
+      [height2, width2, mergedTheme]
+    ),
     /* ===============================
        TOP TOOLBAR (STICKY)
     ================================ */
@@ -18456,6 +18381,112 @@ function SmartGridTable({
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(MaterialReactTable, { table });
 }
+function SmartGridTopToolbar({
+  table,
+  theme,
+  topToolbar,
+  isGridDisabled,
+  isLoading,
+  safeColumns,
+  safeData
+}) {
+  const [searchValue, setSearchValue] = useState(
+    table.getState().globalFilter ?? ""
+  );
+  const disable = isGridDisabled;
+  useEffect(() => {
+    if (disable) return;
+    const t = setTimeout(() => {
+      table.setGlobalFilter(searchValue || void 0);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [searchValue, table, disable]);
+  const exportData = table.getFilteredRowModel().rows.map((row) => row.original);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { px: 2, py: 2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Box,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: "1fr auto"
+        },
+        gap: 2,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: [
+        (topToolbar == null ? void 0 : topToolbar.globalSearch) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TextField,
+          {
+            size: "small",
+            fullWidth: true,
+            disabled: disable,
+            placeholder: isLoading ? "Loading..." : safeColumns.length === 0 ? "No columns configured" : safeData.length === 0 ? "No data available" : "Search...",
+            value: searchValue,
+            onChange: (e) => setSearchValue(e.target.value),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchCheck, {}) })
+            },
+            sx: {
+              "& .MuiOutlinedInput-root": {
+                borderRadius: 1.5,
+                "& fieldset": { borderColor: theme == null ? void 0 : theme.headerBg },
+                "&:hover fieldset": { borderColor: theme == null ? void 0 : theme.headerBg },
+                "&.Mui-focused fieldset": {
+                  borderColor: theme == null ? void 0 : theme.headerBg,
+                  borderWidth: 2
+                }
+              },
+              "& .MuiOutlinedInput-input::placeholder": {
+                opacity: 0.7
+              },
+              "& .MuiInputAdornment-root svg": {
+                color: theme == null ? void 0 : theme.headerBg
+              }
+            }
+          }
+        ),
+        ((topToolbar == null ? void 0 : topToolbar.exportBtn) || (topToolbar == null ? void 0 : topToolbar.columnFilters) || (topToolbar == null ? void 0 : topToolbar.densityToggle) || (topToolbar == null ? void 0 : topToolbar.showHideColumnsBtn) || (topToolbar == null ? void 0 : topToolbar.fullscreenToggle)) && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Paper,
+          {
+            elevation: 3,
+            sx: {
+              justifySelf: "end",
+              // ✅ THIS IS THE KEY
+              display: "inline-flex",
+              alignItems: "center",
+              width: "fit-content",
+              px: 1,
+              py: 0.2,
+              borderRadius: 2,
+              bgcolor: "background.paper",
+              border: `1px solid ${theme == null ? void 0 : theme.headerBg}`,
+              whiteSpace: "nowrap",
+              opacity: disable ? 0.6 : 1,
+              pointerEvents: disable ? "none" : "auto"
+            },
+            children: [
+              (topToolbar == null ? void 0 : topToolbar.exportBtn) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ExportButton,
+                {
+                  data: exportData,
+                  color: theme == null ? void 0 : theme.headerBg,
+                  filename: "table-data",
+                  disabled: disable
+                }
+              ),
+              (topToolbar == null ? void 0 : topToolbar.columnFilters) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ToggleFiltersButton, { table, disabled: disable }),
+              (topToolbar == null ? void 0 : topToolbar.densityToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ToggleDensePaddingButton, { table, disabled: disable }),
+              (topToolbar == null ? void 0 : topToolbar.showHideColumnsBtn) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ShowHideColumnsButton, { table, disabled: disable }),
+              (topToolbar == null ? void 0 : topToolbar.fullscreenToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(MRT_ToggleFullScreenButton, { table, disabled: disable })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
 const ExportButton = ({
   data,
   filename = "data",
@@ -18561,7 +18592,39 @@ const ExportButton = ({
     )
   ] });
 };
-const SmartTable = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SmartGridTable, { ...props }) });
+const SmartTable = ({
+  controls = {
+    columnActions: true,
+    dragging: true,
+    colPinning: true,
+    pagination: true,
+    rowSelection: false,
+    rowPinning: false,
+    grouping: false,
+    sorting: true,
+    editing: false,
+    resizing: true
+  },
+  topToolbar = {
+    enabled: true,
+    globalSearch: true,
+    columnFilters: true,
+    densityToggle: true,
+    fullscreenToggle: true,
+    exportBtn: true,
+    showHideColumnsBtn: true
+  },
+  height: height2 = "100%",
+  width: width2 = "100%",
+  columns = [],
+  data = [],
+  isLoading = false,
+  onRowSelectionChange = () => {
+  }
+}) => {
+  const props = { controls, topToolbar, height: height2, width: width2, isLoading, columns, data, onRowSelectionChange };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SmartGridTable, { ...props }) });
+};
 export {
   ComboDropdown as MytekComboDropdown,
   CustomInput as MytekInputField,