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

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.56785bf",
   "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,11 @@ export const WandelbotsDataGrid = externalizeComponent(
             height: "100%",
             display: "flex",
             flexDirection: "column",
-            background:
-              theme.palette.backgroundPaperElevation?.[5] || "#202233",
+            ...sx,
           }}
         >
           <DataGrid
+            apiRef={apiRef}
             rows={rows}
             columns={columns}
             onRowClick={handleRowClick}
@@ -309,33 +329,42 @@ 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": {
+                boxShadow: "none !important",
+              },
+              "& .MuiDataGrid-overlay": {},
               "& .MuiDataGrid-main": {
                 border: "none",
-                backgroundColor: "transparent",
-              },
-              "& .MuiDataGrid-container--top [role=row]": {
-                backgroundColor: "transparent !important",
+
+                // Remove any surface or paper overlays
+                "& .MuiPaper-root": {},
               },
+              "& .MuiDataGrid-container--top [role=row]": {},
               "& .MuiDataGrid-topContainer": {
                 borderBottom: "none !important",
               },
               "& .MuiDataGrid-columnHeaders": {
                 border: "none",
                 borderBottom: "none !important",
-                backgroundColor:
-                  theme.palette.backgroundPaperElevation?.[5] || "#202233",
               },
               "& .MuiDataGrid-row": {
                 cursor: onRowClick ? "pointer" : "default",
@@ -343,7 +372,6 @@ export const WandelbotsDataGrid = externalizeComponent(
                 margin: "1px 0",
                 position: "relative",
                 "&:hover": {
-                  backgroundColor: "transparent !important",
                   "&::before": {
                     content: '""',
                     position: "absolute",
@@ -358,10 +386,7 @@ export const WandelbotsDataGrid = externalizeComponent(
                 },
                 // Disable MUI's built-in selection styling completely
                 "&.Mui-selected": {
-                  backgroundColor: "transparent !important",
-                  "&:hover": {
-                    backgroundColor: "transparent !important",
-                  },
+                  "&:hover": {},
                 },
                 // Highlight selected row with a distinct color using data attribute
                 ...(selectedRowId !== null && {
@@ -401,7 +426,7 @@ export const WandelbotsDataGrid = externalizeComponent(
                 border: "none",
                 paddingLeft: "40px",
                 paddingRight: "40px",
-                backgroundColor: "transparent !important",
+
                 "& .MuiDataGrid-columnHeaderTitle": {
                   color: "rgba(255, 255, 255, 0.6)",
                 },
@@ -410,14 +435,12 @@ export const WandelbotsDataGrid = externalizeComponent(
                 padding: "8px",
                 border: "none !important",
                 borderBottom: "none !important",
-                "& .MuiBox-root": {
-                  backgroundColor: "transparent !important",
-                },
-                "& .MuiFormControl-root": {
-                  backgroundColor: "transparent !important",
-                },
-                "& .MuiInputBase-root": {
-                  backgroundColor: "transparent !important",
+
+                "& .MuiBox-root": {},
+                "& .MuiFormControl-root": {},
+                "& .MuiInputBase-root": {},
+                "& .MuiPaper-root": {
+                  boxShadow: "none !important",
                 },
                 "& *": {
                   borderBottom: "none !important",
@@ -444,8 +467,12 @@ export const WandelbotsDataGrid = externalizeComponent(
                 borderBottom: "none !important",
                 borderLeft: "none !important",
                 borderRight: "none !important",
+
                 "--rowBorderColor": "none !important",
               },
+              // Remove any remaining MUI background overlays
+              "& .MuiBackdrop-root": {},
+              "& .MuiModal-backdrop": {},
               ...dataGridProps?.sx,
             }}
           />