@archbase/components 4.0.22 → 4.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "4.0.22",
+  "version": "4.0.23",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -118,9 +118,9 @@
     "vis-timeline": "^7.7.3",
     "xlsx": "^0.18.5",
     "yet-another-react-lightbox": "^3.21.0",
-    "@archbase/core": "4.0.22",
-    "@archbase/data": "4.0.22",
-    "@archbase/layout": "4.0.22"
+    "@archbase/core": "4.0.23",
+    "@archbase/data": "4.0.23",
+    "@archbase/layout": "4.0.23"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

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

@@ -757,7 +757,11 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
   )
 
   // Configurar estilos personalizados para o grid
-  const getThemedStyles = () => {
+  // Memoizado para evitar regenerar o objeto sx massivo a cada render — sem isso,
+  // o emotion regera centenas de classes CSS sempre que o pai re-renderiza, o que
+  // torna o scroll lento porque cada linha que entra/sai do viewport durante a
+  // virtualização aciona o pipeline de styling pesado.
+  const themedStyles = useMemo(() => {
     return {
       root: {
         height: '100%', // Garante que o DataGrid ocupe toda a altura do container
@@ -1044,7 +1048,23 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         }
       }
     }
-  }
+  }, [
+    theme,
+    colorScheme,
+    withBorder,
+    withColumnBorders,
+    cellPadding,
+    striped,
+    highlightOnHover,
+    fontSize
+  ])
+
+  // Ref estável para getRowId — evita que o MUI DataGrid reconstrua o mapeamento
+  // interno de linhas a cada render, o que invalida virtualização e performance de scroll.
+  const stableGetRowId = useCallback(
+    (row: any) => safeGetRowId(row, getRowId) || '',
+    [getRowId]
+  )
 
   // Calcular a altura total da grid, incluindo os painéis de detalhes
   const gridHeight = useMemo(() => {
@@ -1614,8 +1634,8 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
           onRowSelectionModelChange={handleSelectionModelChange}
           onCellDoubleClick={handleCellDoubleClick}
           onColumnVisibilityModelChange={setColumnVisibilityModel}
-          getRowId={(row) => safeGetRowId(row, getRowId) || ''}
-          sx={getThemedStyles().root}
+          getRowId={stableGetRowId}
+          sx={themedStyles.root}
           disableColumnFilter={!allowColumnFilters}
           disableColumnMenu={true}
           hideFooter={hideFooter}