@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.cb3db34 → 2.33.0-pr.feature-robot-precondition-list.372.b6e19a9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.33.0-pr.feature-robot-precondition-list.372.cb3db34",
+  "version": "2.33.0-pr.feature-robot-precondition-list.372.b6e19a9",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/DataGrid.tsx

@@ -14,9 +14,10 @@ import {
   QuickFilterTrigger,
   Toolbar,
   ToolbarButton,
+  useGridApiRef,
 } from "@mui/x-data-grid"
 import { observer } from "mobx-react-lite"
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
 
 export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
@@ -83,6 +84,11 @@ export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
    * @default false
    */
   selectFirstByDefault?: boolean
+
+  /**
+   * Custom sx styles for the root container
+   */
+  sx?: React.ComponentProps<typeof Box>["sx"]
 }
 
 export const WandelbotsDataGrid = externalizeComponent(
@@ -100,8 +106,10 @@ export const WandelbotsDataGrid = externalizeComponent(
       dataGridProps,
       CustomToolbar,
       selectFirstByDefault = false,
+      sx,
     }: WandelbotsDataGridProps<T>) => {
       const theme = useTheme()
+      const apiRef = useGridApiRef()
 
       // Internal state for selection when not controlled
       const [internalSelectedItem, setInternalSelectedItem] =
@@ -110,6 +118,18 @@ export const WandelbotsDataGrid = externalizeComponent(
       // Prepare rows for the DataGrid
       const rows = useMemo(() => data.map(getRowData), [data, getRowData])
 
+      // Auto-resize columns when data changes
+      useEffect(() => {
+        if (apiRef.current && rows.length > 0) {
+          apiRef.current.autosizeColumns({
+            includeOutliers: true,
+            includeHeaders: true,
+            expand: true,
+            columns: columns.map((col) => col.field),
+          })
+        }
+      }, [rows, columns, apiRef])
+
       // Handle default selection - only use if no selectedItem is explicitly provided
       const effectiveSelectedItem = useMemo(() => {
         // If selectedItem is explicitly provided, use it (including null)
@@ -278,11 +298,13 @@ export const WandelbotsDataGrid = externalizeComponent(
             height: "100%",
             display: "flex",
             flexDirection: "column",
-            background:
+            backgroundColor:
               theme.palette.backgroundPaperElevation?.[5] || "#202233",
+            ...sx, // Your custom styles will override the theme default
           }}
         >
           <DataGrid
+            apiRef={apiRef}
             rows={rows}
             columns={columns}
             onRowClick={handleRowClick}
@@ -309,21 +331,39 @@ export const WandelbotsDataGrid = externalizeComponent(
               ...dataGridProps?.initialState,
             }}
             {...dataGridProps}
-            // Ensure autosize properties are not overridden by dataGridProps
-            autosizeOnMount={dataGridProps?.autosizeOnMount ?? true}
+            // Ensure autosize properties are always enabled and not overridden by dataGridProps
+            autosizeOnMount={true}
             autosizeOptions={{
+              // Merge any custom autosize options first
+              ...(dataGridProps?.autosizeOptions || {}),
+              // Force these key properties to always be true to maintain autosize behavior
               includeOutliers: true,
               includeHeaders: true,
               expand: true,
-              ...dataGridProps?.autosizeOptions,
+              // Auto-size all columns by default (can be overridden by dataGridProps)
+              columns:
+                dataGridProps?.autosizeOptions?.columns ||
+                columns.map((col) => col.field),
             }}
             sx={{
               border: "none",
               backgroundColor: "transparent",
               width: "100%",
+              // Remove any MUI overlays and elevation effects
+              "& .MuiPaper-root": {
+                backgroundColor: "transparent !important",
+                boxShadow: "none !important",
+              },
+              "& .MuiDataGrid-overlay": {
+                backgroundColor: "transparent !important",
+              },
               "& .MuiDataGrid-main": {
                 border: "none",
                 backgroundColor: "transparent",
+                // Remove any surface or paper overlays
+                "& .MuiPaper-root": {
+                  backgroundColor: "transparent !important",
+                },
               },
               "& .MuiDataGrid-container--top [role=row]": {
                 backgroundColor: "transparent !important",
@@ -410,6 +450,7 @@ export const WandelbotsDataGrid = externalizeComponent(
                 padding: "8px",
                 border: "none !important",
                 borderBottom: "none !important",
+                backgroundColor: "transparent !important",
                 "& .MuiBox-root": {
                   backgroundColor: "transparent !important",
                 },
@@ -419,6 +460,10 @@ export const WandelbotsDataGrid = externalizeComponent(
                 "& .MuiInputBase-root": {
                   backgroundColor: "transparent !important",
                 },
+                "& .MuiPaper-root": {
+                  backgroundColor: "transparent !important",
+                  boxShadow: "none !important",
+                },
                 "& *": {
                   borderBottom: "none !important",
                 },
@@ -444,8 +489,16 @@ export const WandelbotsDataGrid = externalizeComponent(
                 borderBottom: "none !important",
                 borderLeft: "none !important",
                 borderRight: "none !important",
+                backgroundColor: "transparent !important",
                 "--rowBorderColor": "none !important",
               },
+              // Remove any remaining MUI background overlays
+              "& .MuiBackdrop-root": {
+                backgroundColor: "transparent !important",
+              },
+              "& .MuiModal-backdrop": {
+                backgroundColor: "transparent !important",
+              },
               ...dataGridProps?.sx,
             }}
           />