@data-c/pro 0.2.54 → 0.2.56

package/dist/index.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/DataTable/index.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/DataTable/index.ts
 var _xdatagridpro = require('@mui/x-data-grid-pro');
 
 // src/DataTable/DataTable.tsx
-var _react = require('react');
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _iconsmaterial = require('@mui/icons-material');
 var _material = require('@mui/material');
 
@@ -111,6 +111,8 @@ function DataTableError({
 
 
 
+
+
 var TableRootContext = _react.createContext.call(void 0, {});
 function TableRootProvider({
   children
@@ -152,209 +154,274 @@ function useTableRootContext() {
 
 // src/DataTable/DataTable.tsx
 
-var getFilteredRows = ({ apiRef }) => _xdatagridpro.gridFilteredSortedRowIdsSelector.call(void 0, 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 = _react.useMemo.call(void 0, () => {
-    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 = _react2.default.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();
+    _react2.default.useImperativeHandle(
+      ref,
+      () => ({
+        apiRef: apiRef.current,
+        restoreState: (state) => {
+          if (!_optionalChain([apiRef, 'optionalAccess', _2 => _2.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 _optionalChain([apiRef, 'optionalAccess', _3 => _3.current, 'optionalAccess', _4 => _4.exportState, 'call', _5 => _5({
+            exportOnlyDirtyModels: true
+          })]);
         }
-        return {
-          ...col,
-          flex: col.flex || 1,
-          minWidth: col.minWidth || 100,
-          headerClassName: _optionalChain([col, 'optionalAccess', _2 => _2.enableStickyColumns]) ? "sticky-header" : "",
-          cellClassName: _optionalChain([col, 'optionalAccess', _3 => _3.enableStickyColumns]) ? "sticky-cell" : ""
-        };
+      }),
+      [apiRef]
+    );
+    const columnWidthDebounceRef = _react2.default.useRef(null);
+    const ignoreWarmupRef = _react2.default.useRef(true);
+    _react2.default.useEffect(() => {
+      const timeoutId = window.setTimeout(() => {
+        ignoreWarmupRef.current = false;
+      }, 100);
+      return () => {
+        window.clearTimeout(timeoutId);
+        if (columnWidthDebounceRef.current) {
+          window.clearTimeout(columnWidthDebounceRef.current);
+        }
+      };
+    }, []);
+    _react.useEffect.call(void 0, () => {
+      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 = _react2.default.useCallback(
+      (meta) => {
+        if (!apiRef.current)
+          return;
+        const state = apiRef.current.exportState({
+          exportOnlyDirtyModels: true
+        });
+        _optionalChain([onColumnChange, 'optionalCall', _6 => _6({ state, meta })]);
+      },
+      [apiRef, onColumnChange]
+    );
+    function _onColumnOrderChange(params, event, details) {
+      _optionalChain([onColumnOrderChange, 'optionalCall', _7 => _7(params, event, details)]);
+      emitColumnChange({
+        reason: "order"
       });
-    };
-  }, [columns]);
-  _react.useEffect.call(void 0, () => {
-    if (controlledRowsSelectedId) {
-      setRowsSelectedId(controlledRowsSelectedId);
     }
-  }, [controlledRowsSelectedId]);
-  _react.useEffect.call(void 0, () => {
-    if (clearCallback) {
-      onClearRowsSelectedId && onClearRowsSelectedId({
-        type: "include",
-        ids: /* @__PURE__ */ new Set()
-      });
-      setClearCallback(false);
+    function _onColumnWidthChange(params, event, details) {
+      if (ignoreWarmupRef.current) {
+        return;
+      }
+      _optionalChain([onColumnWidthChange, 'optionalCall', _8 => _8(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 (_optionalChain([apiRef, 'optionalAccess', _4 => _4.current])) {
-            apiRef.current.exportDataAsCsv(options);
-          }
-        };
-        handleExport({ getRowsToExport: getFilteredRows });
-        break;
-      default:
-        break;
+    function _onColumnVisibilityModelChange(params, details) {
+      _optionalChain([onColumnVisibilityModelChange, 'optionalCall', _9 => _9(params, details)]);
+      emitColumnChange({
+        reason: "visibility"
+      });
     }
-  }
-  function handleRowDoubleClick(params, _, details) {
-    if (onRowDoubleClick)
-      onRowDoubleClick("edit", params.id);
-  }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { height: "100%", minHeight: "500px", position: "relative", ...stackProps, children: [
-    !isLoading && isFetching && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _material.LinearProgress,
-      {
-        sx: {
-          position: "absolute",
-          top: 0,
-          right: 0,
-          left: 0,
-          zIndex: 999,
-          height: "3px"
-        }
+    const emitColumnWidthChangeDebounced = _react2.default.useCallback(() => {
+      if (columnWidthDebounceRef.current) {
+        window.clearTimeout(columnWidthDebounceRef.current);
+      }
+      columnWidthDebounceRef.current = window.setTimeout(() => {
+        emitColumnChange({ reason: "width" });
+      }, 250);
+    }, [emitColumnChange]);
+    _react.useEffect.call(void 0, () => {
+      if (controlledRowsSelectedId) {
+        setRowsSelectedId(controlledRowsSelectedId);
+      }
+    }, [controlledRowsSelectedId]);
+    _react.useEffect.call(void 0, () => {
+      if (clearCallback) {
+        onClearRowsSelectedId && onClearRowsSelectedId({
+          type: "include",
+          ids: /* @__PURE__ */ new Set()
+        });
+        setClearCallback(false);
       }
-    ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _xdatagridpro.DataGridPro,
+    }, [clearCallback]);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _material.Stack,
       {
-        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__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.Circle, { color: "error", sx: { fontSize: "10pt" } }),
-          booleanCellTrueIcon: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.Circle, { color: "success", sx: { fontSize: "10pt" } }),
-          noRowsOverlay: () => !isLoading && !!error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTableError, { errorMessage: error }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTableEmptyData, {}),
-          ...slots
-        },
-        slotProps: {
-          loadingOverlay: {
-            variant: "skeleton",
-            noRowsVariant: "skeleton"
-          }
-        },
-        disableColumnFilter: true,
-        localeText: _locales.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__ */ _jsxruntime.jsx.call(void 0, 
+            _material.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"
-          },
-          ".MuiDataGrid-columnHeaderTitle": {
-            fontSize: "12px",
-            color: "#0b0e14",
-            fontWeight: "600"
-          },
-          "& .sticky-cell": {
-            position: "sticky",
-            right: 0,
-            background: "inherit",
-            zIndex: 1
-          },
-          "& .sticky-header": {
-            position: "sticky",
-            right: 0,
-            background: "inherit",
-            zIndex: 2
-          }
-        },
-        ...rest
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _xdatagridpro.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__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.Circle, { color: "error", sx: { fontSize: "10pt" } }),
+                booleanCellTrueIcon: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.Circle, { color: "success", sx: { fontSize: "10pt" } }),
+                noRowsOverlay: () => !isLoading && !!error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTableError, { errorMessage: error }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTableEmptyData, {}),
+                ...slots
+              },
+              slotProps: {
+                loadingOverlay: {
+                  variant: "skeleton",
+                  noRowsVariant: "skeleton"
+                }
+              },
+              disableColumnFilter: true,
+              localeText: _locales.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
 
@@ -376,132 +443,7 @@ function DataTableAction(props) {
 
 
 
-
-// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-
-
-// ../../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
-
-
-// ../../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 = _react.forwardRef.call(void 0, 
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => _react.createElement.call(void 0, 
-    "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]) => _react.createElement.call(void 0, tag, attrs)),
-      ...Array.isArray(children) ? children : [children]
-    ]
-  )
-);
-
-// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var createLucideIcon = (iconName, iconNode) => {
-  const Component = _react.forwardRef.call(void 0, 
-    ({ className, ...props }, ref) => _react.createElement.call(void 0, 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
+var _lucidereact = require('lucide-react');
 
 function DataTableActionDelete(props) {
   const { ref, ...rest } = props;
@@ -510,7 +452,7 @@ function DataTableActionDelete(props) {
     {
       color: "error",
       label: "Deletar",
-      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Trash2, { size: 16 }),
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Trash2, { size: 16 }),
       ...rest,
       ref
     }
@@ -522,6 +464,7 @@ function DataTableActionDelete(props) {
 
 
 
+
 function DataTableActionEdit(props) {
   const { ref, ...rest } = props;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -529,7 +472,7 @@ function DataTableActionEdit(props) {
     {
       label: "Editar",
       color: "primary",
-      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Pencil, { size: 16 }),
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Pencil, { size: 16 }),
       ...rest,
       ref
     }
@@ -566,6 +509,7 @@ function Actions({ children, breakpoints }) {
 
 
 
+
 function DataTableActionTransport(props) {
   const { ref, ...rest } = props;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -573,13 +517,25 @@ function DataTableActionTransport(props) {
     {
       color: "primary",
       label: "Transportar",
-      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowBigDown, { size: 16 }),
+      icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowBigDown, { size: 16 }),
       ...rest,
       ref
     }
   );
 }
 
+// src/DataTable/DataTableAddPanelTrigger.tsx
+
+
+
+
+function DataTableAddPanelTrigger({
+  onClick
+}) {
+  const theme = _material.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xdatagridpro.ToolbarButton, { onClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SquarePlus, { color: theme.palette.primary.main, size: 18 }) });
+}
+
 // src/DataTable/DataTableButton.tsx
 
 
@@ -762,6 +718,16 @@ function CellActionTransport({
   );
 }
 
+// src/DataTable/DataTableColumnsPanelTrigger.tsx
+
+
+
+
+function DataTableColumnsPanelTrigger() {
+  const theme = _material.useTheme.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xdatagridpro.ColumnsPanelTrigger, { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xdatagridpro.ToolbarButton, {}), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Columns3Cog, { color: theme.palette.primary.main, size: 18 }) });
+}
+
 // src/DataTable/DataTableContent.tsx
 
 
@@ -786,11 +752,11 @@ function Content(props) {
 
 
 
-var getFilteredRows2 = ({ apiRef }) => _xdatagridpro.gridFilteredSortedRowIdsSelector.call(void 0, apiRef);
+var getFilteredRows = ({ apiRef }) => _xdatagridpro.gridFilteredSortedRowIdsSelector.call(void 0, apiRef);
 function ExportCsvButton() {
   const { apiRef } = useTableRootContext();
   const handleExport = (options) => {
-    if (_optionalChain([apiRef, 'optionalAccess', _5 => _5.current])) {
+    if (_optionalChain([apiRef, 'optionalAccess', _10 => _10.current])) {
       apiRef.current.exportDataAsCsv(options);
     }
   };
@@ -798,7 +764,7 @@ function ExportCsvButton() {
     DataTableButton,
     {
       startIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.FileDownload, {}),
-      onClick: () => handleExport({ getRowsToExport: getFilteredRows2 }),
+      onClick: () => handleExport({ getRowsToExport: getFilteredRows }),
       children: "Exportar CSV"
     }
   );
@@ -849,7 +815,7 @@ function Pagination(props) {
   } = props;
   const { page, pageSize = 15, totalRecords } = pagination || {};
   const pages = _react.useMemo.call(void 0, () => {
-    if (_optionalChain([pagination, 'optionalAccess', _6 => _6.lastPage]))
+    if (_optionalChain([pagination, 'optionalAccess', _11 => _11.lastPage]))
       return pagination.lastPage;
     if ((totalRecords || 0) < pageSize)
       return 1;
@@ -981,7 +947,7 @@ function Root({ children, height, ...rest }) {
 function SelectionCounter(props) {
   const { countTitle, gender } = props;
   const { rowsSelectedId } = useTableRootContext();
-  const countQuantidade = _optionalChain([rowsSelectedId, 'optionalAccess', _7 => _7.ids, 'access', _8 => _8.size]) || 0;
+  const countQuantidade = _optionalChain([rowsSelectedId, 'optionalAccess', _12 => _12.ids, 'access', _13 => _13.size]) || 0;
   const flexSufixCountTitle = _react.useMemo.call(void 0, () => {
     if (!countTitle)
       return "";
@@ -1033,24 +999,39 @@ function Title({
 // src/DataTable/DataTableToolbar.tsx
 
 
+
 function Toolbar({ children }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.Stack,
+    _xdatagridpro.Toolbar,
     {
-      component: _material.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__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Stack,
+        {
+          component: _material.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
+
+
+function ToolbarActionsContainer({
+  children
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", children });
+}
+
 // src/DataTable/index.ts
 var DataTable = {
   CellActionTransport,
@@ -1063,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: _xdatagridpro.ColumnsPanelTrigger,
+  ColumnsPanelTrigger: DataTableColumnsPanelTrigger,
+  AddPanelTrigger: DataTableAddPanelTrigger,
   useGridApiRef: _xdatagridpro.useGridApiRef
 };
-var DataTable_default = DataTable;
-
-
-exports.DataTable = DataTable_default;
-/*! 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.
-   *)
-*/
+var DataTable_default2 = DataTable;
+
+
+exports.DataTable = DataTable_default2;
 //# sourceMappingURL=index.js.map