@wandelbots/wandelbots-js-react-components 2.32.0-pr.feature-robot-precondition-list.372.5bce944 → 2.32.0-pr.feature-robot-precondition-list.372.8bd8d01

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.32.0-pr.feature-robot-precondition-list.372.5bce944",
+  "version": "2.32.0-pr.feature-robot-precondition-list.372.8bd8d01",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -139,6 +139,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@mui/x-charts": "^8.9.0",
+    "@mui/x-data-grid": "^8.10.1",
     "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",

package/src/components/DataGrid.tsx

@@ -0,0 +1,454 @@
+import ClearIcon from "@mui/icons-material/Clear"
+import FilterListIcon from "@mui/icons-material/FilterList"
+import SearchIcon from "@mui/icons-material/Search"
+import { Box, Divider, Typography } from "@mui/material"
+import {
+  DataGrid,
+  type DataGridProps,
+  FilterPanelTrigger,
+  type GridColDef,
+  type GridRowParams,
+  QuickFilter,
+  QuickFilterClear,
+  QuickFilterControl,
+  QuickFilterTrigger,
+  Toolbar,
+  ToolbarButton,
+} from "@mui/x-data-grid"
+import { observer } from "mobx-react-lite"
+import { useMemo, useState } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+
+export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
+  /**
+   * Array of data items to display in the grid
+   */
+  data: T[]
+
+  /**
+   * Column definitions for the DataGrid
+   */
+  columns: GridColDef[]
+
+  /**
+   * Function to transform data items into DataGrid rows
+   * Should return an object with an 'id' field and other fields matching column definitions
+   */
+  getRowData: (item: T) => Record<string, unknown> & { id: string | number }
+
+  /**
+   * Callback when a row is clicked
+   */
+  onRowClick?: (item: T, params: GridRowParams) => void
+
+  /**
+   * Currently selected item (for highlighting)
+   */
+  selectedItem?: T | null
+
+  /**
+   * Function to get the ID of an item (used for selection highlighting)
+   */
+  getItemId?: (item: T) => string | number
+
+  /**
+   * Title displayed in the toolbar
+   */
+  title?: string
+
+  /**
+   * Show item count in title
+   * @default true
+   */
+  showCount?: boolean
+
+  /**
+   * Placeholder text for the search input
+   * @default "Search"
+   */
+  searchPlaceholder?: string
+
+  /**
+   * Additional DataGrid props to pass through
+   */
+  dataGridProps?: Partial<DataGridProps>
+
+  /**
+   * Custom toolbar component to replace the default one
+   */
+  CustomToolbar?: React.ComponentType
+
+  /**
+   * Select the first item by default
+   * @default false
+   */
+  selectFirstByDefault?: boolean
+}
+
+export const WandelbotsDataGrid = externalizeComponent(
+  observer(
+    <T,>({
+      data,
+      columns,
+      getRowData,
+      onRowClick,
+      selectedItem,
+      getItemId,
+      title,
+      showCount = true,
+      searchPlaceholder = "Search",
+      dataGridProps,
+      CustomToolbar,
+      selectFirstByDefault = false,
+    }: WandelbotsDataGridProps<T>) => {
+      // Internal state for selection when not controlled
+      const [internalSelectedItem, setInternalSelectedItem] =
+        useState<T | null>(null)
+
+      // Prepare rows for the DataGrid
+      const rows = useMemo(() => data.map(getRowData), [data, getRowData])
+
+      // Handle default selection - only use if no selectedItem is explicitly provided
+      const effectiveSelectedItem = useMemo(() => {
+        // If selectedItem is explicitly provided, use it (including null)
+        if (selectedItem !== undefined) {
+          return selectedItem
+        }
+        // If we have an internal selection, use it
+        if (internalSelectedItem !== null) {
+          return internalSelectedItem
+        }
+        // Otherwise, use first item if selectFirstByDefault is true
+        if (selectFirstByDefault && data.length > 0) {
+          const firstItem = data[0]
+          // Set internal state to first item on initial load
+          setInternalSelectedItem(firstItem)
+          return firstItem
+        }
+        return null
+      }, [selectFirstByDefault, data, selectedItem, internalSelectedItem])
+
+      // Handle row click
+      const handleRowClick = (params: GridRowParams) => {
+        const item = data.find((item) => {
+          const rowData = getRowData(item)
+          return rowData.id === params.id
+        })
+
+        if (item) {
+          // Update internal selection state if not controlled by props
+          if (selectedItem === undefined) {
+            setInternalSelectedItem(item)
+          }
+
+          // Call the user's onRowClick callback
+          if (onRowClick) {
+            onRowClick(item, params)
+          }
+        }
+      }
+
+      // Get selected row ID for highlighting
+      const selectedRowId = useMemo(() => {
+        if (!effectiveSelectedItem || !getItemId) return null
+        return getItemId(effectiveSelectedItem)
+      }, [effectiveSelectedItem, getItemId])
+
+      // Default toolbar with filter and quick filter
+      function DefaultToolbar() {
+        return (
+          <Toolbar>
+            <Box
+              sx={{
+                display: "flex",
+                width: "100%",
+                gap: 1,
+                p: 1,
+                alignItems: "center",
+              }}
+            >
+              {title && (
+                <Typography
+                  variant="h6"
+                  sx={{
+                    fontWeight: 500,
+                    color: "white",
+                  }}
+                >
+                  {title}
+                  {showCount && ` (${data.length})`}
+                </Typography>
+              )}
+              <Box
+                sx={{
+                  ml: "auto",
+                  display: "flex",
+                  gap: 1,
+                  alignItems: "center",
+                }}
+              >
+                <FilterPanelTrigger
+                  render={
+                    <ToolbarButton aria-label="Show filters">
+                      <FilterListIcon fontSize="small" />
+                    </ToolbarButton>
+                  }
+                />
+                <Divider
+                  orientation="vertical"
+                  flexItem
+                  sx={{
+                    height: "24px",
+                    alignSelf: "center",
+                  }}
+                />
+                <QuickFilter
+                  render={(props, state) => (
+                    <Box
+                      {...props}
+                      sx={{
+                        display: "flex",
+                        overflow: "hidden",
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          borderRadius: state.expanded ? "4px 0 0 4px" : "4px",
+                          borderRight: state.expanded ? "none" : undefined,
+                        }}
+                      >
+                        <QuickFilterTrigger
+                          render={
+                            <ToolbarButton aria-label="Search">
+                              <SearchIcon fontSize="small" />
+                            </ToolbarButton>
+                          }
+                        />
+                      </Box>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          overflow: "hidden",
+                          transition: "all 0.3s ease-in-out",
+                          width: state.expanded ? "192px" : "0px",
+                        }}
+                      >
+                        <Box
+                          sx={{
+                            flex: 1,
+                            "& .MuiInputBase-root": {
+                              height: "32px",
+                              borderRadius:
+                                state.expanded && state.value !== ""
+                                  ? "0"
+                                  : "0 4px 4px 0",
+                            },
+                          }}
+                        >
+                          <QuickFilterControl placeholder={searchPlaceholder} />
+                        </Box>
+                        {state.expanded && state.value !== "" && (
+                          <QuickFilterClear
+                            render={
+                              <Box sx={{ borderRadius: "0 4px 4px 0" }}>
+                                <ToolbarButton aria-label="Clear">
+                                  <ClearIcon fontSize="small" />
+                                </ToolbarButton>
+                              </Box>
+                            }
+                          />
+                        )}
+                      </Box>
+                    </Box>
+                  )}
+                />
+              </Box>
+            </Box>
+          </Toolbar>
+        )
+      }
+
+      const ToolbarComponent = CustomToolbar || DefaultToolbar
+
+      return (
+        <Box
+          sx={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            background: "var(--background-paper-elevation-5, #202233)",
+          }}
+        >
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            onRowClick={handleRowClick}
+            disableColumnMenu={false}
+            disableRowSelectionOnClick={true}
+            disableMultipleRowSelection={true}
+            hideFooterSelectedRowCount={true}
+            filterMode="client"
+            sortingOrder={["desc", "asc"]}
+            hideFooter={false}
+            showToolbar={true}
+            slots={{
+              toolbar: ToolbarComponent,
+            }}
+            initialState={{
+              sorting: {
+                sortModel: [],
+              },
+              filter: {
+                filterModel: {
+                  items: [],
+                },
+              },
+              ...dataGridProps?.initialState,
+            }}
+            {...dataGridProps}
+            // Ensure autosize properties are not overridden by dataGridProps
+            autosizeOnMount={dataGridProps?.autosizeOnMount ?? true}
+            autosizeOptions={{
+              includeOutliers: true,
+              includeHeaders: true,
+              expand: true,
+              ...dataGridProps?.autosizeOptions,
+            }}
+            sx={{
+              border: "none",
+              backgroundColor: "transparent",
+              width: "100%",
+              "& .MuiDataGrid-main": {
+                border: "none",
+                backgroundColor: "transparent",
+              },
+              "& .MuiDataGrid-container--top [role=row]": {
+                backgroundColor: "transparent !important",
+              },
+              "& .MuiDataGrid-topContainer": {
+                borderBottom: "none !important",
+              },
+              "& .MuiDataGrid-columnHeaders": {
+                border: "none",
+                borderBottom: "none !important",
+                backgroundColor: "var(--background-paper-elevation-5, #202233)",
+              },
+              "& .MuiDataGrid-row": {
+                cursor: onRowClick ? "pointer" : "default",
+                border: "none",
+                margin: "0px 0",
+                position: "relative",
+                "&:hover": {
+                  backgroundColor: "transparent !important",
+                  "&::before": {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "16px",
+                    right: "16px",
+                    bottom: 0,
+                    backgroundColor: "action.hover",
+                    borderRadius: "16px",
+                    zIndex: 0,
+                  },
+                },
+                // Disable MUI's built-in selection styling completely
+                "&.Mui-selected": {
+                  backgroundColor: "transparent !important",
+                  "&:hover": {
+                    backgroundColor: "transparent !important",
+                  },
+                },
+                // Highlight selected row with a distinct color using data attribute
+                ...(selectedRowId !== null && {
+                  [`&[data-id="${selectedRowId}"]`]: {
+                    "&::before": {
+                      content: '""',
+                      position: "absolute",
+                      top: 0,
+                      left: "16px",
+                      right: "16px",
+                      bottom: 0,
+                      backgroundColor: "rgba(255, 255, 255, 0.08) !important",
+                      borderRadius: "16px",
+                      zIndex: 0,
+                    },
+                    "&:hover::before": {
+                      backgroundColor: "rgba(255, 255, 255, 0.12) !important",
+                    },
+                  },
+                }),
+              },
+              "& .MuiDataGrid-cell--textLeft": {
+                paddingLeft: "40px",
+              },
+              "& .MuiDataGrid-cell": {
+                border: "none",
+                position: "relative",
+                zIndex: 1,
+                "&:focus": {
+                  outline: "none",
+                },
+                "&:focus-within": {
+                  outline: "none",
+                },
+              },
+              "& .MuiDataGrid-columnHeader": {
+                border: "none",
+                paddingLeft: "40px",
+                paddingRight: "40px",
+                backgroundColor: "transparent !important",
+                "& .MuiDataGrid-columnHeaderTitle": {
+                  color: "rgba(255, 255, 255, 0.6)",
+                },
+              },
+              "& .MuiDataGrid-toolbarContainer": {
+                padding: "8px",
+                border: "none !important",
+                borderBottom: "none !important",
+                "& .MuiBox-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& .MuiFormControl-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& .MuiInputBase-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& *": {
+                  borderBottom: "none !important",
+                },
+              },
+              "& .MuiDataGrid-toolbar": {
+                borderBottom: "none !important",
+              },
+              "& .MuiDataGrid-toolbarFilterList": {
+                border: "none",
+              },
+              "& .MuiDataGrid-withBorderColor": {
+                borderColor: "transparent !important",
+              },
+              "& .MuiDataGrid-columnSeparator": {
+                display: "none",
+              },
+              "& .MuiDataGrid-footerContainer": {
+                display: "none",
+              },
+              "& .MuiDataGrid-filler": {
+                border: "none !important",
+                borderTop: "none !important",
+                borderBottom: "none !important",
+                borderLeft: "none !important",
+                borderRight: "none !important",
+                "--rowBorderColor": "none !important",
+              },
+              ...dataGridProps?.sx,
+            }}
+          />
+        </Box>
+      )
+    },
+  ),
+)
+
+WandelbotsDataGrid.displayName = "WandelbotsDataGrid"

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
 export * from "./components/CycleTimer"
+export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"
 export * from "./components/jogging/JoggingPanel"