@data-c/pro 0.2.55 → 0.2.57

package/dist/index.mjs

@@ -1,8 +1,8 @@
 // src/DataTable/index.ts
-import { ColumnsPanelTrigger, useGridApiRef as useGridApiRef2 } from "@mui/x-data-grid-pro";
+import { useGridApiRef as useGridApiRef2 } from "@mui/x-data-grid-pro";
 
 // src/DataTable/DataTable.tsx
-import { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";
 import { Circle } from "@mui/icons-material";
 import { LinearProgress, Stack as Stack3 } from "@mui/material";
 import {
@@ -109,7 +109,9 @@ import {
   useContext,
   useState
 } from "react";
-import { useGridApiRef } from "@mui/x-data-grid-pro";
+import {
+  useGridApiRef
+} from "@mui/x-data-grid-pro";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var TableRootContext = createContext({});
 function TableRootProvider({
@@ -152,216 +154,274 @@ function useTableRootContext() {
 
 // src/DataTable/DataTable.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var getFilteredRows = ({ apiRef }) => gridFilteredSortedRowIdsSelector(apiRef);
-function Table(props) {
-  const {
-    error,
-    isLoading,
-    isFetching,
-    data,
-    columns,
-    controlledRowsSelectedId,
-    onClearRowsSelectedId,
-    onRowSelectionChange,
-    onCellKeyDown,
-    onRowDoubleClick,
-    stackProps,
-    slots,
-    ...rest
-  } = props;
-  const {
-    rowsSelectedId,
-    setRowsSelectedId,
-    clearCallback,
-    setClearCallback,
-    apiRef
-  } = useTableRootContext();
-  const parsedColumns = useMemo(() => {
-    return (columns2) => {
-      return columns2.map((col) => {
-        if (col.headerName === "A\xE7\xF5es") {
-          return {
-            ...col,
-            minWidth: col.minWidth || 80,
-            maxWidth: col.maxWidth || col.width || 80,
-            headerClassName: "sticky-header",
-            cellClassName: "sticky-cell"
-          };
+var _DataTable = React.forwardRef(
+  function Table(props, ref) {
+    const {
+      error,
+      isLoading,
+      isFetching,
+      data,
+      columns,
+      onColumnChange,
+      onColumnVisibilityModelChange,
+      onColumnOrderChange,
+      onColumnWidthChange,
+      controlledRowsSelectedId,
+      onClearRowsSelectedId,
+      onRowSelectionChange,
+      onCellKeyDown,
+      onRowDoubleClick,
+      stackProps,
+      slots,
+      restoreFromState,
+      ...rest
+    } = props;
+    const {
+      rowsSelectedId,
+      setRowsSelectedId,
+      clearCallback,
+      setClearCallback,
+      apiRef
+    } = useTableRootContext();
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        apiRef: apiRef.current,
+        restoreState: (state) => {
+          if (!apiRef?.current || !state)
+            return;
+          const cleanState = Object.entries(state).reduce(
+            (acc, [key, value]) => {
+              if (value !== null) {
+                acc[key] = value;
+              }
+              return acc;
+            },
+            {}
+          );
+          if (Object.keys(cleanState).length > 0) {
+            console.log("Restaurando estado da tabela:", cleanState);
+            apiRef.current.restoreState(cleanState);
+          }
+        },
+        exportState: () => {
+          return apiRef?.current?.exportState({
+            exportOnlyDirtyModels: true
+          });
+        }
+      }),
+      [apiRef]
+    );
+    const columnWidthDebounceRef = React.useRef(null);
+    const ignoreWarmupRef = React.useRef(true);
+    React.useEffect(() => {
+      const timeoutId = window.setTimeout(() => {
+        ignoreWarmupRef.current = false;
+      }, 100);
+      return () => {
+        window.clearTimeout(timeoutId);
+        if (columnWidthDebounceRef.current) {
+          window.clearTimeout(columnWidthDebounceRef.current);
         }
-        return {
-          ...col,
-          flex: col.flex || 1,
-          minWidth: col.minWidth || 100,
-          headerClassName: col?.enableStickyColumns ? "sticky-header" : "",
-          cellClassName: col?.enableStickyColumns ? "sticky-cell" : ""
-        };
+      };
+    }, []);
+    useEffect(() => {
+      if (!apiRef.current)
+        return;
+      if (!restoreFromState)
+        return;
+      const cleanState = Object.entries(restoreFromState).reduce(
+        (acc, [key, value]) => {
+          if (value !== null) {
+            acc[key] = value;
+          }
+          return acc;
+        },
+        {}
+      );
+      if (Object.keys(cleanState).length > 0) {
+        apiRef.current.restoreState(cleanState);
+      }
+    }, [apiRef, restoreFromState]);
+    const emitColumnChange = React.useCallback(
+      (meta) => {
+        if (!apiRef.current)
+          return;
+        const state = apiRef.current.exportState({
+          exportOnlyDirtyModels: true
+        });
+        onColumnChange?.({ state, meta });
+      },
+      [apiRef, onColumnChange]
+    );
+    function _onColumnOrderChange(params, event, details) {
+      onColumnOrderChange?.(params, event, details);
+      emitColumnChange({
+        reason: "order"
       });
-    };
-  }, [columns]);
-  useEffect(() => {
-    if (controlledRowsSelectedId) {
-      setRowsSelectedId(controlledRowsSelectedId);
     }
-  }, [controlledRowsSelectedId]);
-  useEffect(() => {
-    if (clearCallback) {
-      onClearRowsSelectedId && onClearRowsSelectedId({
-        type: "include",
-        ids: /* @__PURE__ */ new Set()
-      });
-      setClearCallback(false);
+    function _onColumnWidthChange(params, event, details) {
+      if (ignoreWarmupRef.current) {
+        return;
+      }
+      onColumnWidthChange?.(params, event, details);
+      emitColumnWidthChangeDebounced();
     }
-  }, [clearCallback]);
-  function handleCellKeyDown(params, event, details) {
-    const eventCode = event.ctrlKey && event.code === "KeyE" ? "ctrl+e" : event.code;
-    switch (eventCode) {
-      case "Enter":
-        event.preventDefault();
-        if (onCellKeyDown)
-          onCellKeyDown("edit", params.id);
-        break;
-      case "F3":
-        event.preventDefault();
-        if (onCellKeyDown)
-          onCellKeyDown("edit", params.id);
-        break;
-      case "Delete":
-        event.preventDefault();
-        if (onCellKeyDown)
-          onCellKeyDown("delete", params.id);
-        break;
-      case "ctrl+e":
-        event.preventDefault();
-        const handleExport = (options) => {
-          if (apiRef?.current) {
-            apiRef.current.exportDataAsCsv(options);
-          }
-        };
-        handleExport({ getRowsToExport: getFilteredRows });
-        break;
-      default:
-        break;
+    function _onColumnVisibilityModelChange(params, details) {
+      onColumnVisibilityModelChange?.(params, details);
+      emitColumnChange({
+        reason: "visibility"
+      });
     }
-  }
-  function handleRowDoubleClick(params, _, details) {
-    if (onRowDoubleClick)
-      onRowDoubleClick("edit", params.id);
-  }
-  return /* @__PURE__ */ jsxs3(Stack3, { height: "100%", minHeight: "500px", position: "relative", ...stackProps, children: [
-    !isLoading && isFetching && /* @__PURE__ */ jsx4(
-      LinearProgress,
-      {
-        sx: {
-          position: "absolute",
-          top: 0,
-          right: 0,
-          left: 0,
-          zIndex: 999,
-          height: "3px"
-        }
+    const emitColumnWidthChangeDebounced = React.useCallback(() => {
+      if (columnWidthDebounceRef.current) {
+        window.clearTimeout(columnWidthDebounceRef.current);
       }
-    ),
-    /* @__PURE__ */ jsx4(
-      DataGridPro,
+      columnWidthDebounceRef.current = window.setTimeout(() => {
+        emitColumnChange({ reason: "width" });
+      }, 250);
+    }, [emitColumnChange]);
+    useEffect(() => {
+      if (controlledRowsSelectedId) {
+        setRowsSelectedId(controlledRowsSelectedId);
+      }
+    }, [controlledRowsSelectedId]);
+    useEffect(() => {
+      if (clearCallback) {
+        onClearRowsSelectedId && onClearRowsSelectedId({
+          type: "include",
+          ids: /* @__PURE__ */ new Set()
+        });
+        setClearCallback(false);
+      }
+    }, [clearCallback]);
+    return /* @__PURE__ */ jsxs3(
+      Stack3,
       {
-        apiRef,
-        rows: data,
-        columns: parsedColumns(columns),
-        density: "compact",
-        hideFooterPagination: true,
-        hideFooter: true,
-        loading: isLoading,
-        rowHeight: 43,
-        columnHeaderHeight: 43,
-        disableVirtualization: true,
-        onRowDoubleClick: handleRowDoubleClick,
-        onCellKeyDown: handleCellKeyDown,
-        disableRowSelectionOnClick: true,
-        rowSelectionModel: rowsSelectedId,
-        onRowSelectionModelChange: (rowSelectionModel, details) => {
-          if (onRowSelectionChange) {
-            onRowSelectionChange(rowSelectionModel, details);
-          }
-          if (controlledRowsSelectedId)
-            return;
-          setRowsSelectedId(rowSelectionModel);
-        },
-        slots: {
-          booleanCellFalseIcon: () => /* @__PURE__ */ jsx4(Circle, { color: "error", sx: { fontSize: "10pt" } }),
-          booleanCellTrueIcon: () => /* @__PURE__ */ jsx4(Circle, { color: "success", sx: { fontSize: "10pt" } }),
-          noRowsOverlay: () => !isLoading && !!error ? /* @__PURE__ */ jsx4(DataTableError, { errorMessage: error }) : /* @__PURE__ */ jsx4(DataTableEmptyData, {}),
-          ...slots
-        },
-        slotProps: {
-          loadingOverlay: {
-            variant: "skeleton",
-            noRowsVariant: "skeleton"
-          }
-        },
-        disableColumnFilter: true,
-        localeText: ptBR.components.MuiDataGrid.defaultProps.localeText,
-        sx: {
-          border: "none",
-          borderRadius: 0,
-          "--DataGrid-rowBorderColor": "#edf2f9",
-          "--DataGrid-containerBackground": "#f4f6fa",
-          ".MuiDataGrid-overlayWrapperInner": {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          ".MuiDataGrid-row": {
-            backgroundColor: "white",
-            "&:nth-of-type(even)": {
-              backgroundColor: "#f9fafd"
-            },
-            ":hover": {
-              backgroundColor: "#e9e9e9"
-            },
-            "&.Mui-selected": {
-              backgroundColor: "rgb(238, 249, 252)",
-              "&:hover": {
-                backgroundColor: "rgb(222, 243, 249)"
+        height: "100%",
+        minHeight: "500px",
+        position: "relative",
+        ...stackProps,
+        children: [
+          !isLoading && isFetching && /* @__PURE__ */ jsx4(
+            LinearProgress,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                right: 0,
+                left: 0,
+                zIndex: 999,
+                height: "3px"
               }
             }
-          },
-          ".MuiDataGrid-cell": {
-            fontSize: "12px",
-            color: "#0b0e14"
-          },
-          ".MuiDataGrid-columnHeaders": {
-            border: "solid 1px #edf2f9",
-            backgroundColor: "#f4f6fa"
-          },
-          ".MuiDataGrid-columnHeader": {
-            backgroundColor: "#f4f6fa"
-          },
-          ".MuiDataGrid-columnHeaders .MuiDataGrid-filler": {
-            backgroundColor: "#f4f6fa"
-          },
-          ".MuiDataGrid-columnHeaderTitle": {
-            fontSize: "12px",
-            color: "#0b0e14",
-            fontWeight: "600"
-          },
-          "& .sticky-cell": {
-            position: "sticky",
-            right: 0,
-            background: "inherit",
-            zIndex: 1
-          },
-          "& .sticky-header": {
-            position: "sticky",
-            right: 0,
-            backgroundColor: "#f4f6fa",
-            zIndex: 2
-          }
-        },
-        ...rest
+          ),
+          /* @__PURE__ */ jsx4(
+            DataGridPro,
+            {
+              apiRef,
+              rows: data,
+              columns,
+              onColumnOrderChange: _onColumnOrderChange,
+              onColumnWidthChange: _onColumnWidthChange,
+              onColumnVisibilityModelChange: _onColumnVisibilityModelChange,
+              density: "compact",
+              hideFooterPagination: true,
+              hideFooter: true,
+              loading: isLoading,
+              rowHeight: 43,
+              columnHeaderHeight: 43,
+              disableVirtualization: true,
+              disableRowSelectionOnClick: true,
+              rowSelectionModel: rowsSelectedId,
+              onRowSelectionModelChange: (rowSelectionModel, details) => {
+                if (onRowSelectionChange) {
+                  onRowSelectionChange(rowSelectionModel, details);
+                }
+                if (controlledRowsSelectedId)
+                  return;
+                setRowsSelectedId(rowSelectionModel);
+              },
+              slots: {
+                booleanCellFalseIcon: () => /* @__PURE__ */ jsx4(Circle, { color: "error", sx: { fontSize: "10pt" } }),
+                booleanCellTrueIcon: () => /* @__PURE__ */ jsx4(Circle, { color: "success", sx: { fontSize: "10pt" } }),
+                noRowsOverlay: () => !isLoading && !!error ? /* @__PURE__ */ jsx4(DataTableError, { errorMessage: error }) : /* @__PURE__ */ jsx4(DataTableEmptyData, {}),
+                ...slots
+              },
+              slotProps: {
+                loadingOverlay: {
+                  variant: "skeleton",
+                  noRowsVariant: "skeleton"
+                }
+              },
+              disableColumnFilter: true,
+              localeText: ptBR.components.MuiDataGrid.defaultProps.localeText,
+              sx: {
+                border: "none",
+                borderRadius: 0,
+                "--DataGrid-rowBorderColor": "#edf2f9",
+                "--DataGrid-containerBackground": "#f4f6fa",
+                ".MuiDataGrid-overlayWrapperInner": {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                ".MuiDataGrid-row": {
+                  backgroundColor: "white",
+                  "&:nth-of-type(even)": {
+                    backgroundColor: "#f9fafd"
+                  },
+                  ":hover": {
+                    backgroundColor: "#e9e9e9"
+                  },
+                  "&.Mui-selected": {
+                    backgroundColor: "rgb(238, 249, 252)",
+                    "&:hover": {
+                      backgroundColor: "rgb(222, 243, 249)"
+                    }
+                  }
+                },
+                ".MuiDataGrid-cell": {
+                  fontSize: "12px",
+                  color: "#0b0e14"
+                },
+                ".MuiDataGrid-columnHeaders": {
+                  border: "solid 1px #edf2f9",
+                  backgroundColor: "#f4f6fa"
+                },
+                ".MuiDataGrid-columnHeader": {
+                  backgroundColor: "#f4f6fa"
+                },
+                ".MuiDataGrid-columnHeaders .MuiDataGrid-filler": {
+                  backgroundColor: "#f4f6fa"
+                },
+                ".MuiDataGrid-columnHeaderTitle": {
+                  fontSize: "12px",
+                  color: "#0b0e14",
+                  fontWeight: "600"
+                },
+                "& .sticky-cell": {
+                  position: "sticky",
+                  right: 0,
+                  background: "inherit",
+                  zIndex: 1
+                },
+                "& .sticky-header": {
+                  position: "sticky",
+                  right: 0,
+                  backgroundColor: "#f4f6fa",
+                  zIndex: 2
+                }
+              },
+              ...rest
+            }
+          )
+        ]
       }
-    )
-  ] });
-}
+    );
+  }
+);
+var DataTable_default = _DataTable;
 
 // src/DataTable/DataTableAction.tsx
 import {
@@ -383,132 +443,7 @@ function DataTableAction(props) {
 import {
   GridActionsCellItem as GridActionsCellItem2
 } from "@mui/x-data-grid-pro";
-
-// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
-
-// ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
-var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-var toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-var toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-var mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-var hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-};
-
-// ../../node_modules/lucide-react/dist/esm/Icon.js
-import { forwardRef, createElement } from "react";
-
-// ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-// ../../node_modules/lucide-react/dist/esm/Icon.js
-var Icon = forwardRef(
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => createElement(
-    "svg",
-    {
-      ref,
-      ...defaultAttributes,
-      width: size,
-      height: size,
-      stroke: color,
-      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-      className: mergeClasses("lucide", className),
-      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
-      ...rest
-    },
-    [
-      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-      ...Array.isArray(children) ? children : [children]
-    ]
-  )
-);
-
-// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef2(
-    ({ className, ...props }, ref) => createElement2(Icon, {
-      ref,
-      iconNode,
-      className: mergeClasses(
-        `lucide-${toKebabCase(toPascalCase(iconName))}`,
-        `lucide-${iconName}`,
-        className
-      ),
-      ...props
-    })
-  );
-  Component.displayName = toPascalCase(iconName);
-  return Component;
-};
-
-// ../../node_modules/lucide-react/dist/esm/icons/arrow-big-down.js
-var __iconNode = [
-  [
-    "path",
-    {
-      d: "M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z",
-      key: "1eaqc3"
-    }
-  ]
-];
-var ArrowBigDown = createLucideIcon("arrow-big-down", __iconNode);
-
-// ../../node_modules/lucide-react/dist/esm/icons/pencil.js
-var __iconNode2 = [
-  [
-    "path",
-    {
-      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
-      key: "1a8usu"
-    }
-  ],
-  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
-];
-var Pencil = createLucideIcon("pencil", __iconNode2);
-
-// ../../node_modules/lucide-react/dist/esm/icons/trash-2.js
-var __iconNode3 = [
-  ["path", { d: "M10 11v6", key: "nco0om" }],
-  ["path", { d: "M14 11v6", key: "outv1u" }],
-  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
-  ["path", { d: "M3 6h18", key: "d0wm0j" }],
-  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
-];
-var Trash2 = createLucideIcon("trash-2", __iconNode3);
-
-// src/DataTable/DataTableActionDelete.tsx
+import { Trash2 } from "lucide-react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function DataTableActionDelete(props) {
   const { ref, ...rest } = props;
@@ -528,6 +463,7 @@ function DataTableActionDelete(props) {
 import {
   GridActionsCellItem as GridActionsCellItem3
 } from "@mui/x-data-grid-pro";
+import { Pencil } from "lucide-react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function DataTableActionEdit(props) {
   const { ref, ...rest } = props;
@@ -572,6 +508,7 @@ function Actions({ children, breakpoints }) {
 import {
   GridActionsCellItem as GridActionsCellItem4
 } from "@mui/x-data-grid-pro";
+import { ArrowBigDown } from "lucide-react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function DataTableActionTransport(props) {
   const { ref, ...rest } = props;
@@ -587,6 +524,18 @@ function DataTableActionTransport(props) {
   );
 }
 
+// src/DataTable/DataTableAddPanelTrigger.tsx
+import { useTheme as useTheme2 } from "@mui/material";
+import { ToolbarButton } from "@mui/x-data-grid-pro";
+import { SquarePlus } from "lucide-react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function DataTableAddPanelTrigger({
+  onClick
+}) {
+  const theme = useTheme2();
+  return /* @__PURE__ */ jsx10(ToolbarButton, { onClick, children: /* @__PURE__ */ jsx10(SquarePlus, { color: theme.palette.primary.main, size: 18 }) });
+}
+
 // src/DataTable/DataTableButton.tsx
 import {
   Button as MuiButton,
@@ -595,11 +544,11 @@ import {
   Tooltip,
   Box
 } from "@mui/material";
-import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function DataTableButton(props) {
   const { isLoading, startIcon, children, title, ...rest } = props;
   const { breakpoint } = useTableRootContext();
-  return /* @__PURE__ */ jsx10(Fragment, { children: breakpoint ? /* @__PURE__ */ jsx10(Tooltip, { title: children, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx11(Fragment, { children: breakpoint ? /* @__PURE__ */ jsx11(Tooltip, { title: children, children: /* @__PURE__ */ jsxs4(
     IconButton,
     {
       ...rest,
@@ -607,7 +556,7 @@ function DataTableButton(props) {
       disabled: isLoading ? true : rest.disabled,
       children: [
         startIcon,
-        isLoading && /* @__PURE__ */ jsx10(
+        isLoading && /* @__PURE__ */ jsx11(
           CircularProgress,
           {
             color: "secondary",
@@ -624,7 +573,7 @@ function DataTableButton(props) {
         )
       ]
     }
-  ) }) : /* @__PURE__ */ jsx10(
+  ) }) : /* @__PURE__ */ jsx11(
     MuiButton,
     {
       startIcon,
@@ -655,7 +604,7 @@ function DataTableButton(props) {
             textOverflow: "ellipsis"
           },
           children: [
-            isLoading && /* @__PURE__ */ jsx10(
+            isLoading && /* @__PURE__ */ jsx11(
               CircularProgress,
               {
                 color: "secondary",
@@ -678,16 +627,16 @@ function DataTableButton(props) {
 
 // src/DataTable/DataTableCellAction.tsx
 import { GridActionsCellItem as GridActionsCellItem5 } from "@mui/x-data-grid-pro";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function CellAction(props) {
   const { event, onClick, ...rest } = props;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     GridActionsCellItem5,
     {
       label: "A\xE7\xE3o",
       onClick: () => {
       },
-      icon: /* @__PURE__ */ jsx11("span", { children: "\u{1F527}" })
+      icon: /* @__PURE__ */ jsx12("span", { children: "\u{1F527}" })
     }
   );
 }
@@ -695,15 +644,15 @@ function CellAction(props) {
 // src/DataTable/DataTableCellActionDelete.tsx
 import { Delete as DeleteIcon } from "@mui/icons-material";
 import { GridActionsCellItem as GridActionsCellItem6 } from "@mui/x-data-grid-pro";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function CellActionDelete({
   onClick,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     GridActionsCellItem6,
     {
-      icon: /* @__PURE__ */ jsx12(DeleteIcon, {}),
+      icon: /* @__PURE__ */ jsx13(DeleteIcon, {}),
       label: "Delete",
       color: "primary",
       onClick: () => {
@@ -718,15 +667,15 @@ function CellActionDelete({
 // src/DataTable/DataTableCellActionEdit.tsx
 import { Edit as EditIcon } from "@mui/icons-material";
 import { GridActionsCellItem as GridActionsCellItem7 } from "@mui/x-data-grid-pro";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function CellActionEdit({
   onClick,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     GridActionsCellItem7,
     {
-      icon: /* @__PURE__ */ jsx13(EditIcon, {}),
+      icon: /* @__PURE__ */ jsx14(EditIcon, {}),
       label: "Edit",
       color: "primary",
       onClick: () => onClick && onClick("edit"),
@@ -737,10 +686,10 @@ function CellActionEdit({
 
 // src/DataTable/DataTableCellActions.tsx
 import { Children, cloneElement, isValidElement } from "react";
-import { Fragment as Fragment2, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15 } from "react/jsx-runtime";
 function CellActions(props) {
   const { children, onClick: onItemClick } = props;
-  return /* @__PURE__ */ jsx14(Fragment2, { children: Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx15(Fragment2, { children: Children.map(children, (child) => {
     if (isValidElement(child)) {
       return cloneElement(child, {
         onClick: onItemClick
@@ -752,15 +701,15 @@ function CellActions(props) {
 // src/DataTable/DataTableCellActionTransport.tsx
 import { GetApp as TransportIcon } from "@mui/icons-material";
 import { GridActionsCellItem as GridActionsCellItem8 } from "@mui/x-data-grid-pro";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function CellActionTransport({
   onClick,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     GridActionsCellItem8,
     {
-      icon: /* @__PURE__ */ jsx15(TransportIcon, {}),
+      icon: /* @__PURE__ */ jsx16(TransportIcon, {}),
       label: "Transport",
       color: "primary",
       onClick: () => onClick && onClick("transport"),
@@ -769,11 +718,21 @@ function CellActionTransport({
   );
 }
 
+// src/DataTable/DataTableColumnsPanelTrigger.tsx
+import { useTheme as useTheme3 } from "@mui/material";
+import { ColumnsPanelTrigger, ToolbarButton as ToolbarButton2 } from "@mui/x-data-grid-pro";
+import { Columns3Cog } from "lucide-react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function DataTableColumnsPanelTrigger() {
+  const theme = useTheme3();
+  return /* @__PURE__ */ jsx17(ColumnsPanelTrigger, { render: /* @__PURE__ */ jsx17(ToolbarButton2, {}), children: /* @__PURE__ */ jsx17(Columns3Cog, { color: theme.palette.primary.main, size: 18 }) });
+}
+
 // src/DataTable/DataTableContent.tsx
 import { Stack as Stack5 } from "@mui/material";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Content(props) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     Stack5,
     {
       direction: "row",
@@ -792,8 +751,8 @@ import { FileDownload as FileDownloadIcon } from "@mui/icons-material";
 import {
   gridFilteredSortedRowIdsSelector as gridFilteredSortedRowIdsSelector2
 } from "@mui/x-data-grid-pro";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var getFilteredRows2 = ({ apiRef }) => gridFilteredSortedRowIdsSelector2(apiRef);
+import { jsx as jsx19 } from "react/jsx-runtime";
+var getFilteredRows = ({ apiRef }) => gridFilteredSortedRowIdsSelector2(apiRef);
 function ExportCsvButton() {
   const { apiRef } = useTableRootContext();
   const handleExport = (options) => {
@@ -801,11 +760,11 @@ function ExportCsvButton() {
       apiRef.current.exportDataAsCsv(options);
     }
   };
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     DataTableButton,
     {
-      startIcon: /* @__PURE__ */ jsx17(FileDownloadIcon, {}),
-      onClick: () => handleExport({ getRowsToExport: getFilteredRows2 }),
+      startIcon: /* @__PURE__ */ jsx19(FileDownloadIcon, {}),
+      onClick: () => handleExport({ getRowsToExport: getFilteredRows }),
       children: "Exportar CSV"
     }
   );
@@ -813,9 +772,9 @@ function ExportCsvButton() {
 
 // src/DataTable/DataTableFooter.tsx
 import { TableFooter } from "@mui/material";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function Footer(props) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     TableFooter,
     {
       ...props,
@@ -845,8 +804,8 @@ import {
   TextField,
   Typography as Typography3
 } from "@mui/material";
-import { useMemo as useMemo2 } from "react";
-import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
 function Pagination(props) {
   const {
     onChangePageSize,
@@ -855,14 +814,14 @@ function Pagination(props) {
     rowsPerPageOptions = [15, 50, 100, 200]
   } = props;
   const { page, pageSize = 15, totalRecords } = pagination || {};
-  const pages = useMemo2(() => {
+  const pages = useMemo(() => {
     if (pagination?.lastPage)
       return pagination.lastPage;
     if ((totalRecords || 0) < pageSize)
       return 1;
     return Math.max(Math.ceil((totalRecords || 0) / pageSize));
   }, [totalRecords, pageSize]);
-  const totalRecordsLabel = useMemo2(() => {
+  const totalRecordsLabel = useMemo(() => {
     if ((totalRecords || 0) < pageSize)
       return `Exibindo ${pluralizar(
         totalRecords || 0,
@@ -892,7 +851,7 @@ function Pagination(props) {
       gap: 2,
       marginLeft: "auto",
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx21(
           Typography3,
           {
             variant: "body2",
@@ -903,7 +862,7 @@ function Pagination(props) {
           }
         ),
         showPagination && /* @__PURE__ */ jsxs5(Stack6, { direction: "row", alignItems: "center", gap: 2, marginLeft: "auto", children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx21(
             TextField,
             {
               sx: {
@@ -918,10 +877,10 @@ function Pagination(props) {
                   onChangePageSize(parseInt(e.target.value));
                 }
               },
-              children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsx19(MenuItem, { value: option, children: option }, option))
+              children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsx21(MenuItem, { value: option, children: option }, option))
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx21(
             MuiPagination,
             {
               variant: "outlined",
@@ -946,7 +905,7 @@ function Pagination(props) {
 // src/DataTable/DataTableRoot.tsx
 import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
 import { Stack as Stack7 } from "@mui/material";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Root({ children, height, ...rest }) {
   const tableContainerRef = useRef(null);
   const [tableHeight, setTableHeight] = useState2(500);
@@ -964,7 +923,7 @@ function Root({ children, height, ...rest }) {
       window.removeEventListener("resize", calculateHeight);
     };
   }, []);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     Stack7,
     {
       ref: tableContainerRef,
@@ -976,20 +935,20 @@ function Root({ children, height, ...rest }) {
         ...rest.sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx20(TableRootProvider, { children })
+      children: /* @__PURE__ */ jsx22(TableRootProvider, { children })
     }
   );
 }
 
 // src/DataTable/DataTableSelectionCounter.tsx
 import { Stack as Stack8, Typography as Typography4 } from "@mui/material";
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
 function SelectionCounter(props) {
   const { countTitle, gender } = props;
   const { rowsSelectedId } = useTableRootContext();
   const countQuantidade = rowsSelectedId?.ids.size || 0;
-  const flexSufixCountTitle = useMemo3(() => {
+  const flexSufixCountTitle = useMemo2(() => {
     if (!countTitle)
       return "";
     const selecionadoText = gender === "feminino" ? "selecionada" : "selecionado";
@@ -997,7 +956,7 @@ function SelectionCounter(props) {
     const nenhumText = gender === "feminino" ? "Nenhuma" : "Nenhum";
     return countQuantidade === 1 ? `${countTitle} ${selecionadoText}` : countQuantidade && countQuantidade > 1 ? `${countTitle.split(" ").map((item) => `${item}s`).join("  ")} ${selecionadosText}` : `${nenhumText} ${countTitle} ${selecionadoText}`;
   }, [countQuantidade]);
-  return /* @__PURE__ */ jsx21(Stack8, { children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx23(Stack8, { children: /* @__PURE__ */ jsxs6(
     Typography4,
     {
       variant: "body2",
@@ -1014,15 +973,15 @@ function SelectionCounter(props) {
 }
 
 // src/DataTable/DataTableTitle.tsx
-import { Typography as Typography5, useTheme as useTheme2 } from "@mui/material";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { Typography as Typography5, useTheme as useTheme4 } from "@mui/material";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Title({
   children,
   titleDivider = false,
   sx
 }) {
-  const theme = useTheme2();
-  return /* @__PURE__ */ jsx22(
+  const theme = useTheme4();
+  return /* @__PURE__ */ jsx24(
     Typography5,
     {
       variant: "h6",
@@ -1039,25 +998,40 @@ function Title({
 
 // src/DataTable/DataTableToolbar.tsx
 import { Paper, Stack as Stack9 } from "@mui/material";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { Toolbar as MuiToolbar } from "@mui/x-data-grid-pro";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Toolbar({ children }) {
-  return /* @__PURE__ */ jsx23(
-    Stack9,
+  return /* @__PURE__ */ jsx25(
+    MuiToolbar,
     {
-      component: Paper,
-      elevation: 0,
-      gap: 1.5,
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      p: 1,
-      borderRadius: "8px 8px 0 0",
-      sx: { width: "100%" },
-      children
+      render: /* @__PURE__ */ jsx25(
+        Stack9,
+        {
+          component: Paper,
+          elevation: 0,
+          gap: 1.5,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          p: 1,
+          borderRadius: "8px 8px 0 0",
+          sx: { width: "100%" },
+          children
+        }
+      )
     }
   );
 }
 
+// src/DataTable/DataTableToolbarActionsContainer.tsx
+import { Stack as Stack10 } from "@mui/material";
+import { jsx as jsx26 } from "react/jsx-runtime";
+function ToolbarActionsContainer({
+  children
+}) {
+  return /* @__PURE__ */ jsx26(Stack10, { direction: "row", alignItems: "center", justifyContent: "flex-end", children });
+}
+
 // src/DataTable/index.ts
 var DataTable = {
   CellActionTransport,
@@ -1070,87 +1044,23 @@ var DataTable = {
   Pagination,
   Actions,
   Toolbar,
+  ToolbarActionsContainer,
   Content,
   Button: DataTableButton,
   Footer,
-  Table,
+  Table: DataTable_default,
   Title,
   Root,
   Action: DataTableAction,
   ActionEdit: DataTableActionEdit,
   ActionDelete: DataTableActionDelete,
   ActionTransport: DataTableActionTransport,
-  ColumnsPanelTrigger,
+  ColumnsPanelTrigger: DataTableColumnsPanelTrigger,
+  AddPanelTrigger: DataTableAddPanelTrigger,
   useGridApiRef: useGridApiRef2
 };
-var DataTable_default = DataTable;
+var DataTable_default2 = DataTable;
 export {
-  DataTable_default as DataTable
+  DataTable_default2 as DataTable
 };
-/*! Bundled license information:
-
-lucide-react/dist/esm/shared/src/utils.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/defaultAttributes.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/Icon.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/createLucideIcon.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/icons/arrow-big-down.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/icons/pencil.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/icons/trash-2.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-
-lucide-react/dist/esm/lucide-react.js:
-  (**
-   * @license lucide-react v0.536.0 - ISC
-   *
-   * This source code is licensed under the ISC license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-*/
 //# sourceMappingURL=index.mjs.map