mytek-components 2.0.5 → 2.0.7

package/dist/main.umd.js

@@ -18196,104 +18196,18 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
         }
       },
       //render top menu
-      renderTopToolbar: ({ table: table2 }) => {
-        const [searchValue, setSearchValue] = React.useState(
-          table2.getState().globalFilter ?? ""
-        );
-        const disable = isGridDisabled;
-        React.useEffect(() => {
-          if (disable) return;
-          const timeout = setTimeout(() => {
-            table2.setGlobalFilter(searchValue || void 0);
-          }, 300);
-          return () => clearTimeout(timeout);
-        }, [searchValue, table2, disable]);
-        const exportData = table2.getFilteredRowModel().rows.map((row) => row.original);
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(material.Box, { sx: { px: 2, py: 2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          material.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(
-                material.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(material.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(
-                material.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(materialReactTable.MRT_ToggleFiltersButton, { table: table2, disabled: disable }),
-                    (topToolbar == null ? void 0 : topToolbar.densityToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(materialReactTable.MRT_ToggleDensePaddingButton, { table: table2, disabled: disable }),
-                    (topToolbar == null ? void 0 : topToolbar.showHideColumnsBtn) && /* @__PURE__ */ jsxRuntimeExports.jsx(materialReactTable.MRT_ShowHideColumnsButton, { table: table2, disabled: disable }),
-                    (topToolbar == null ? void 0 : topToolbar.fullscreenToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(materialReactTable.MRT_ToggleFullScreenButton, { table: table2, disabled: disable })
-                  ]
-                }
-              )
-            ]
-          }
-        ) }) });
-      },
+      renderTopToolbar: ({ table: table2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SmartGridTopToolbar,
+        {
+          table: table2,
+          theme: mergedTheme,
+          topToolbar,
+          isGridDisabled,
+          isLoading,
+          safeColumns,
+          safeData
+        }
+      ),
       /* ===============================
          INITIAL STATE
       ================================ */
@@ -18336,18 +18250,29 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       /* ===============================
          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: React.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)
       ================================ */
@@ -18468,6 +18393,112 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsx(materialReactTable.MaterialReactTable, { table });
   }
+  function SmartGridTopToolbar({
+    table,
+    theme,
+    topToolbar,
+    isGridDisabled,
+    isLoading,
+    safeColumns,
+    safeData
+  }) {
+    const [searchValue, setSearchValue] = React.useState(
+      table.getState().globalFilter ?? ""
+    );
+    const disable = isGridDisabled;
+    React.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(material.Box, { sx: { px: 2, py: 2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      material.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(
+            material.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(material.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(
+            material.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(materialReactTable.MRT_ToggleFiltersButton, { table, disabled: disable }),
+                (topToolbar == null ? void 0 : topToolbar.densityToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(materialReactTable.MRT_ToggleDensePaddingButton, { table, disabled: disable }),
+                (topToolbar == null ? void 0 : topToolbar.showHideColumnsBtn) && /* @__PURE__ */ jsxRuntimeExports.jsx(materialReactTable.MRT_ShowHideColumnsButton, { table, disabled: disable }),
+                (topToolbar == null ? void 0 : topToolbar.fullscreenToggle) && /* @__PURE__ */ jsxRuntimeExports.jsx(materialReactTable.MRT_ToggleFullScreenButton, { table, disabled: disable })
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
   const ExportButton = ({
     data,
     filename = "data",
@@ -18573,7 +18604,39 @@ To suppress this warning, you need to explicitly provide the \`palette.${key}Cha
       )
     ] });
   };
-  const SmartTable = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(xDatePickers.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(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SmartGridTable, { ...props }) });
+  };
   exports2.MytekComboDropdown = ComboDropdown;
   exports2.MytekInputField = CustomInput;
   exports2.MytekLoader = Loader;