@archbase/components 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -38,9 +38,9 @@
     "react-dom": "^18.3.0 || ^19.2.0"
   },
   "dependencies": {
-    "@archbase/core": "3.0.2",
-    "@archbase/data": "3.0.2",
-    "@archbase/layout": "3.0.2",
+    "@archbase/core": "3.0.4",
+    "@archbase/data": "3.0.4",
+    "@archbase/layout": "3.0.4",
     "@datou/react-vis-timeline": "^1.4.0",
     "@gfazioli/mantine-list-view-table": "^1.1.9",
     "@gfazioli/mantine-onboarding-tour": "^2.6.5",

package/src/datagrid/main/archbase-data-grid-pagination.tsx

@@ -13,7 +13,11 @@ export const ArchbaseDataGridPagination = React.memo<ArchbaseDataGridPaginationP
   onPaginationModelChange,
   paginationLabels,
   bottomToolbarMinHeight,
-  theme
+  theme,
+  // Props para controle de bordas e espaçamento
+  withBorder = true,
+  padding = '8px 12px',
+  borderRadius,
 }) => {
   // Garantir que totalRecords seja um número válido e finito
   const safeTotalRecords = Number.isFinite(totalRecords) && !isNaN(totalRecords) && totalRecords >= 0
@@ -28,14 +32,21 @@ export const ArchbaseDataGridPagination = React.memo<ArchbaseDataGridPaginationP
       Math.max(1, paginationModel.pageSize) : 10
   };
 
+  // Calcular o padding final
+  const finalPadding = typeof padding === 'number' ? `${padding}px` : padding;
+  // Calcular o border radius final
+  const finalBorderRadius = borderRadius !== undefined
+    ? (typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius)
+    : theme.radius.sm;
+
   return (
     <Paper
       style={{
         minHeight: bottomToolbarMinHeight || 'auto',
-        padding: '8px 16px',
-        borderTop: `1px solid ${theme.colors.gray[theme.colorScheme === 'dark' ? 8 : 3]}`,
-        borderBottomLeftRadius: theme.radius.sm,
-        borderBottomRightRadius: theme.radius.sm
+        padding: finalPadding,
+        borderTop: withBorder ? `1px solid ${theme.colors.gray[theme.colorScheme === 'dark' ? 8 : 3]}` : 'none',
+        borderBottomLeftRadius: finalBorderRadius,
+        borderBottomRightRadius: finalBorderRadius
       }}
     >
       <GridPagination

package/src/datagrid/main/archbase-data-grid-toolbar.tsx

@@ -35,6 +35,10 @@ export const ArchbaseDataGridToolbar = React.memo<ArchbaseDataGridToolbarProps>(
   activeFilters,
   onFiltersChange,
   hideMuiFilters = false,
+  // Props para controle de bordas e espaçamento
+  withBorder = true,
+  padding = '8px 12px',
+  borderRadius,
 }) => {
   // Estado local para o filtro global para manter o valor entre re-renderizações
   const [globalFilterValue, setGlobalFilterValue] = useState(filterModel.quickFilterValues?.[0] || '');
@@ -83,15 +87,22 @@ export const ArchbaseDataGridToolbar = React.memo<ArchbaseDataGridToolbarProps>(
   if (!toolbarLeftContent && !enableGlobalFilter && !enableTopToolbarActions) {
     return null;
   }
+  // Calcular o padding final
+  const finalPadding = typeof padding === 'number' ? `${padding}px` : padding;
+  // Calcular o border radius final
+  const finalBorderRadius = borderRadius !== undefined
+    ? (typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius)
+    : theme.radius.sm;
+
   return (
     <Paper
       style={{
         display: 'flex',
         justifyContent: 'space-between',
-        padding: '8px 16px',
-        borderBottom: `1px solid ${theme.colors.gray[theme.colorScheme === 'dark' ? 8 : 3]}`,
-        borderTopLeftRadius: theme.radius.sm,
-        borderTopRightRadius: theme.radius.sm
+        padding: finalPadding,
+        borderBottom: withBorder ? `1px solid ${theme.colors.gray[theme.colorScheme === 'dark' ? 8 : 3]}` : 'none',
+        borderTopLeftRadius: finalBorderRadius,
+        borderTopRightRadius: finalBorderRadius
       }}
     >
       {/* Lado esquerdo da toolbar */}

package/src/datagrid/main/archbase-data-grid-types.tsx

@@ -84,6 +84,14 @@ export interface ArchbaseDataGridToolbarProps {
   activeFilters?: ArchbaseActiveFilter[];
   onFiltersChange?: (filters: ArchbaseActiveFilter[], rsql?: string) => void;
   hideMuiFilters?: boolean;
+
+  // Props para controle de bordas e espaçamento
+  /** Exibir borda inferior da toolbar. Default: true */
+  withBorder?: boolean;
+  /** Padding da toolbar. Default: '8px 12px' */
+  padding?: string | number;
+  /** Border radius da toolbar. Default: theme.radius.sm */
+  borderRadius?: string | number;
 }
 
 // Props para o componente ArchbaseDataGridPagination
@@ -99,6 +107,14 @@ export interface ArchbaseDataGridPaginationProps {
   };
   bottomToolbarMinHeight?: string | number;
   theme: any;
+
+  // Props para controle de bordas e espaçamento
+  /** Exibir borda superior da paginação. Default: true */
+  withBorder?: boolean;
+  /** Padding da paginação. Default: '8px 12px' */
+  padding?: string | number;
+  /** Border radius da paginação. Default: theme.radius.sm */
+  borderRadius?: string | number;
 }
 
 /**
@@ -244,6 +260,16 @@ export interface ArchbaseDataGridProps<T extends object = any, ID = any> {
   columnAutoWidth?: boolean;
   rowHeight?: number;
 
+  // Propriedades de controle de bordas internas
+  /** Exibir borda inferior da toolbar. Default: true */
+  withToolbarBorder?: boolean;
+  /** Exibir borda superior da paginação. Default: true */
+  withPaginationBorder?: boolean;
+  /** Padding da toolbar. Default: '8px 12px' */
+  toolbarPadding?: string | number;
+  /** Padding da paginação. Default: '8px 12px' */
+  paginationPadding?: string | number;
+
   // Propriedades de exportação e impressão
   printTitle?: string;
   logoPrint?: string;
@@ -253,6 +279,7 @@ export interface ArchbaseDataGridProps<T extends object = any, ID = any> {
   // Propriedades de layout
   toolbarAlignment?: 'left' | 'right' | 'center';
   positionActionsColumn?: 'first' | 'last';
+  actionsColumnWidth?: number;
   toolbarLeftContent?: ReactNode;
   bottomToolbarMinHeight?: string | number;
 
@@ -261,6 +288,8 @@ export interface ArchbaseDataGridProps<T extends object = any, ID = any> {
 
   // Flags de exibição
   showProgressBars?: boolean;
+  /** Oculta o footer interno do MUI DataGrid. Default: true (footer é gerenciado externamente) */
+  hideFooter?: boolean;
 
   // Callbacks
   onSelectedRowsChanged?: (rows: T[]) => void;

package/src/datagrid/main/archbase-data-grid.tsx

@@ -156,6 +156,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
     csvOptions,
     toolbarAlignment = 'right',
     positionActionsColumn = 'first',
+    actionsColumnWidth = 60,
     toolbarLeftContent,
     columnAutoWidth = false,
     rowHeight = 52,
@@ -164,6 +165,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
     onPrint,
     onFilterModelChange,
     showProgressBars = true,
+    hideFooter = true,
     variant = 'filled',
     fontSize,
     cellPadding,
@@ -193,6 +195,11 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
     activeFilters: externalActiveFilters,
     onFiltersChange: externalOnFiltersChange,
     hideMuiFilters = false,
+    // Props para controle de bordas internas
+    withToolbarBorder = true,
+    withPaginationBorder = true,
+    toolbarPadding,
+    paginationPadding,
   } = props
   const theme = useArchbaseTheme()
   const { colorScheme } = useMantineColorScheme();
@@ -743,6 +750,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
   const getThemedStyles = () => {
     return {
       root: {
+        height: '100%', // Garante que o DataGrid ocupe toda a altura do container
         border: withBorder
           ? `1px solid ${theme.colors.gray[colorScheme === 'dark' ? 8 : 3]}`
           : '0',
@@ -750,6 +758,46 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         overflow: 'hidden', // Garante que o conteúdo respeite o border-radius
         backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
         color: colorScheme === 'dark' ? theme.colors.gray[0] : theme.colors.dark[9],
+
+        // Scrollbar customizada do MUI DataGrid - estilo Mantine (mais fina e elegante)
+        '& .MuiDataGrid-scrollbar': {
+          '&.MuiDataGrid-scrollbar--horizontal': {
+            height: '8px !important',
+          },
+          '&.MuiDataGrid-scrollbar--vertical': {
+            width: '8px !important',
+          },
+          backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+          borderRadius: '4px',
+          '& .MuiDataGrid-scrollbarContent': {
+            borderRadius: '4px',
+          },
+        },
+
+        // Scrollbar nativa (fallback) - estilo Mantine
+        '& .MuiDataGrid-virtualScroller': {
+          '&::-webkit-scrollbar': {
+            width: '8px',
+            height: '8px',
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+            borderRadius: '4px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],
+            borderRadius: '4px',
+            '&:hover': {
+              backgroundColor: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
+            },
+          },
+          // Firefox
+          scrollbarWidth: 'thin',
+          scrollbarColor: colorScheme === 'dark'
+            ? `${theme.colors.dark[3]} ${theme.colors.dark[6]}`
+            : `${theme.colors.gray[4]} ${theme.colors.gray[1]}`,
+        },
+
         fontSize:
           typeof fontSize === 'string' &&
           ['xs', 'sm', 'md', 'lg', 'xl'].includes(fontSize as string)
@@ -838,7 +886,19 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         },
         
         '& .MuiDataGrid-virtualScroller': {
-          paddingBottom: '14px !important'
+          paddingBottom: '0px !important',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+
+        '& .MuiDataGrid-virtualScrollerContent': {
+          flexBasis: 'auto !important',
+          flexGrow: '1 !important',
+          flexShrink: '0 !important',
+        },
+
+        '& .MuiDataGrid-filler': {
+          display: 'none !important',
         }
       }
     }
@@ -875,7 +935,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         type: 'string' as const,
         sortable: false,
         filterable: false,
-        width: 60,
+        width: actionsColumnWidth,
         renderCell: (params) => renderRowActions(params.row as T)
       }
 
@@ -1375,6 +1435,9 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
           activeFilters={activeFilters}
           onFiltersChange={handleCompositeFiltersChange}
           hideMuiFilters={hideMuiFilters}
+          // Props para controle de bordas
+          withBorder={withToolbarBorder}
+          padding={toolbarPadding}
         />
       )}
 
@@ -1384,7 +1447,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         renderFixedDetailPanel()}
 
       {/* Grid sem toolbar interna */}
-      <Box style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+      <Box style={{ flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0 }}>
         <DataGrid
           apiRef={apiRef}
           rows={rows}
@@ -1413,6 +1476,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
           sx={getThemedStyles().root}
           disableColumnFilter={!allowColumnFilters}
           disableColumnMenu={true}
+          hideFooter={hideFooter}
           slots={{
             // Removemos os slots de toolbar e paginação pois eles agora estão fora da grid
             toolbar: null,
@@ -1434,6 +1498,9 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         paginationLabels={paginationLabels}
         bottomToolbarMinHeight={bottomToolbarMinHeight}
         theme={theme}
+        // Props para controle de bordas
+        withBorder={withPaginationBorder}
+        padding={paginationPadding}
       />:null}
 
       {/* Painéis de detalhes nos modos não-inline (modal/drawer) */}