@wandelbots/wandelbots-js-react-components 5.4.2 → 5.5.0

package/dist/components/DataGrid.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("@mui/icons-material/Clear"),F=require("@mui/icons-material/FilterList"),j=require("@mui/icons-material/Search"),L=require("@mui/material/styles"),a=require("@mui/material/Box"),W=require("@mui/material/Divider"),H=require("@mui/material/Typography"),t=require("@mui/x-data-grid"),Q=require("mobx-react-lite"),s=require("react"),E=require("../externalizeComponent.cjs"),M=E.externalizeComponent(Q.observer(({data:l,columns:u,getRowData:c,onRowClick:b,selectedItem:p,getItemId:m,title:v,showCount:y=!0,searchPlaceholder:D="Search programs",dataGridProps:r,CustomToolbar:z,selectFirstByDefault:w=!1,sx:R})=>{var k;const x=L.useTheme(),i=t.useGridApiRef(),h=s.useRef(null),[f,C]=s.useState(null),d=s.useMemo(()=>l.map(c),[l,c]);s.useEffect(()=>{i.current&&d.length>0&&i.current.autosizeColumns({includeOutliers:!0,includeHeaders:!0,expand:!0,columns:u.map(o=>o.field)})},[d,u,i]),s.useEffect(()=>{if(!h.current||!i.current)return;const o=new ResizeObserver(()=>{setTimeout(()=>{i.current&&d.length>0&&i.current.autosizeColumns({includeOutliers:!0,includeHeaders:!0,expand:!0,columns:u.map(n=>n.field)})},100)});return o.observe(h.current),()=>{o.disconnect()}},[i,d.length,u]);const g=s.useMemo(()=>{if(p!==void 0)return p;if(f!==null)return f;if(w&&l.length>0){const o=l[0];return C(o),o}return null},[w,l,p,f]),B=o=>{const n=l.find(I=>c(I).id===o.id);n&&(p===void 0&&C(n),b&&b(n,o))},S=s.useMemo(()=>!g||!m?null:m(g),[g,m]);function O(){return e.jsx(t.Toolbar,{children:e.jsxs(a,{sx:{display:"flex",width:"100%",gap:1,p:.5,alignItems:"center"},children:[v&&e.jsxs(H,{variant:"h6",sx:{fontWeight:500,color:"white"},children:[v,y&&` (${l.length})`]}),e.jsxs(a,{sx:{ml:"auto",display:"flex",gap:.5,alignItems:"center",pr:1},children:[e.jsx(t.FilterPanelTrigger,{render:e.jsx(t.ToolbarButton,{"aria-label":"Show filters",children:e.jsx(F,{fontSize:"small"})})}),e.jsx(W,{orientation:"vertical",flexItem:!0,sx:{height:"24px",alignSelf:"center"}}),e.jsx(t.QuickFilter,{render:(o,n)=>e.jsxs(a,{...o,sx:{display:"flex",overflow:"hidden"},children:[!n.expanded&&e.jsx(t.QuickFilterTrigger,{render:e.jsx(t.ToolbarButton,{"aria-label":"Search",children:e.jsx(j,{fontSize:"small"})})}),e.jsxs(a,{sx:{display:"flex",overflow:"hidden",transition:"all 0.3s ease-in-out",width:n.expanded?"200px":"0px",position:"relative"},children:[e.jsxs(a,{sx:{flex:1,position:"relative","& .MuiInputBase-root":{height:"32px",borderRadius:"16px",backgroundColor:"#171927",paddingLeft:"40px",paddingRight:n.expanded&&n.value!==""?"40px":"12px",color:"white",fontSize:"14px",border:"none !important",outline:"none !important",boxShadow:"none !important","&::before":{display:"none !important",border:"none !important"},"&::after":{display:"none !important",border:"none !important"},"&:hover":{"&::before":{display:"none !important",border:"none !important"},"&::after":{display:"none !important",border:"none !important"}},"&:focus-within":{outline:"none !important",boxShadow:"none !important","&::before":{display:"none !important",border:"none !important"},"&::after":{display:"none !important",border:"none !important"}},"&.Mui-focused":{outline:"none !important",boxShadow:"none !important","&::before":{display:"none !important",border:"none !important"},"&::after":{display:"none !important",border:"none !important"}},"& .MuiInputBase-input":{padding:"8px 0",border:"none !important",outline:"none !important",boxShadow:"none !important","&:focus":{outline:"none !important",boxShadow:"none !important",border:"none !important"},"&::placeholder":{color:"rgba(255, 255, 255, 0.3)",opacity:1}},"& fieldset":{border:"none !important",display:"none !important"},"& .MuiOutlinedInput-notchedOutline":{border:"none !important",display:"none !important"}}},children:[n.expanded&&e.jsx(j,{fontSize:"small",sx:{position:"absolute",left:"12px",top:"50%",transform:"translateY(-50%)",color:"rgba(255, 255, 255, 0.6)",zIndex:1,pointerEvents:"none"}}),e.jsx(t.QuickFilterControl,{placeholder:D})]}),n.expanded&&n.value!==""&&e.jsx(t.QuickFilterClear,{render:e.jsx(a,{sx:{position:"absolute",right:"8px",top:"50%",transform:"translateY(-50%)",zIndex:1},children:e.jsx(a,{sx:{minWidth:"24px",width:"24px",height:"24px",padding:0,color:"rgba(255, 255, 255, 0.6)","&:hover":{backgroundColor:"rgba(255, 255, 255, 0.1)"}},children:e.jsx(t.ToolbarButton,{"aria-label":"Clear",children:e.jsx(q,{fontSize:"small"})})})})})]})]})})]})]})})}const T=z||O;return e.jsx(a,{ref:h,sx:{height:"100%",display:"flex",flexDirection:"column","& *":{scrollbarWidth:"none",msOverflowStyle:"none","&::-webkit-scrollbar":{display:"none"}},"&:hover *":{scrollbarWidth:"thin",scrollbarColor:`${x.palette.divider} transparent`,"&::-webkit-scrollbar":{display:"block",width:"8px",height:"8px"},"&::-webkit-scrollbar-track":{background:"transparent"},"&::-webkit-scrollbar-thumb":{background:x.palette.divider,borderRadius:"4px"},"&::-webkit-scrollbar-thumb:hover":{background:x.palette.action.hover}},...R},children:e.jsx(t.DataGrid,{apiRef:i,rows:d,columns:u,onRowClick:B,disableColumnMenu:!1,disableRowSelectionOnClick:!0,disableMultipleRowSelection:!0,hideFooterSelectedRowCount:!0,filterMode:"client",sortingOrder:["desc","asc"],hideFooter:!1,showToolbar:!0,slots:{toolbar:T},initialState:{sorting:{sortModel:[]},filter:{filterModel:{items:[]}},...r==null?void 0:r.initialState},...r,autosizeOnMount:!0,autosizeOptions:{...(r==null?void 0:r.autosizeOptions)||{},includeOutliers:!0,includeHeaders:!0,expand:!0,columns:((k=r==null?void 0:r.autosizeOptions)==null?void 0:k.columns)||u.map(o=>o.field)},sx:{border:"none",width:"100%","& .MuiPaper-root":{boxShadow:"none !important"},"& .MuiDataGrid-overlay":{},"& .MuiDataGrid-main":{border:"none","& .MuiPaper-root":{}},"& .MuiDataGrid-container--top [role=row]":{},"& .MuiDataGrid-topContainer":{borderBottom:"none !important"},"& .MuiDataGrid-columnHeaders":{border:"none",borderBottom:"none !important"},"& .MuiDataGrid-row":{cursor:b?"pointer":"default",border:"none",margin:"1px 0",position:"relative",backgroundColor:"transparent !important","&:hover":{backgroundColor:"transparent !important","&::before":{content:'""',position:"absolute",top:0,left:"16px",right:"16px",bottom:0,backgroundColor:"action.hover",borderRadius:"16px",zIndex:0}},"&.Mui-selected":{backgroundColor:"transparent !important","&:hover":{backgroundColor:"transparent !important"}},...S!==null&&{[`&[data-id="${S}"]`]:{backgroundColor:"transparent !important","&::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":{backgroundColor:"transparent !important"},"&: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"},"&:hover":{backgroundColor:"transparent !important"}},"& .MuiDataGrid-columnHeader":{border:"none",paddingLeft:"40px",paddingRight:"40px","& .MuiDataGrid-columnHeaderTitle":{color:"rgba(255, 255, 255, 0.6)"}},"& .MuiDataGrid-toolbarContainer":{padding:"8px",border:"none !important",borderBottom:"none !important","& .MuiBox-root":{},"& .MuiFormControl-root":{},"& .MuiInputBase-root":{},"& .MuiPaper-root":{boxShadow:"none !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"},"& .MuiBackdrop-root":{},"& .MuiModal-backdrop":{},...r==null?void 0:r.sx}})})}));M.displayName="WandelbotsDataGrid";exports.WandelbotsDataGrid=M;exports.default=M;
+//# sourceMappingURL=DataGrid.cjs.map

package/dist/components/DataGrid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.cjs","sources":["../../src/components/DataGrid.tsx"],"sourcesContent":["import ClearIcon from \"@mui/icons-material/Clear\"\nimport FilterListIcon from \"@mui/icons-material/FilterList\"\nimport SearchIcon from \"@mui/icons-material/Search\"\nimport { useTheme } from \"@mui/material/styles\"\nimport Box from \"@mui/material/Box\"\nimport Divider from \"@mui/material/Divider\"\nimport Typography from \"@mui/material/Typography\"\nimport {\n  DataGrid,\n  type DataGridProps,\n  FilterPanelTrigger,\n  type GridColDef,\n  type GridRowParams,\n  QuickFilter,\n  QuickFilterClear,\n  QuickFilterControl,\n  QuickFilterTrigger,\n  Toolbar,\n  ToolbarButton,\n  useGridApiRef,\n} from \"@mui/x-data-grid\"\nimport { observer } from \"mobx-react-lite\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport { externalizeComponent } from \"../externalizeComponent\"\n\nexport interface WandelbotsDataGridProps<T = Record<string, unknown>> {\n  /**\n   * Array of data items to display in the grid\n   */\n  data: T[]\n\n  /**\n   * Column definitions for the DataGrid\n   */\n  columns: GridColDef[]\n\n  /**\n   * Function to transform data items into DataGrid rows\n   * Should return an object with an 'id' field and other fields matching column definitions\n   */\n  getRowData: (item: T) => Record<string, unknown> & { id: string | number }\n\n  /**\n   * Callback when a row is clicked\n   */\n  onRowClick?: (item: T, params: GridRowParams) => void\n\n  /**\n   * Currently selected item (for highlighting)\n   */\n  selectedItem?: T | null\n\n  /**\n   * Function to get the ID of an item (used for selection highlighting)\n   */\n  getItemId?: (item: T) => string | number\n\n  /**\n   * Title displayed in the toolbar\n   */\n  title?: string\n\n  /**\n   * Show item count in title\n   * @default true\n   */\n  showCount?: boolean\n\n  /**\n   * Placeholder text for the search input\n   * @default \"Search programs\"\n   */\n  searchPlaceholder?: string\n\n  /**\n   * Additional DataGrid props to pass through\n   */\n  dataGridProps?: Partial<DataGridProps>\n\n  /**\n   * Custom toolbar component to replace the default one\n   */\n  CustomToolbar?: React.ComponentType\n\n  /**\n   * Select the first item by default\n   * @default false\n   */\n  selectFirstByDefault?: boolean\n\n  /**\n   * Custom sx styles for the root container\n   */\n  sx?: React.ComponentProps<typeof Box>[\"sx\"]\n}\n\nexport const WandelbotsDataGrid = externalizeComponent(\n  observer(\n    <T,>({\n      data,\n      columns,\n      getRowData,\n      onRowClick,\n      selectedItem,\n      getItemId,\n      title,\n      showCount = true,\n      searchPlaceholder = \"Search programs\",\n      dataGridProps,\n      CustomToolbar,\n      selectFirstByDefault = false,\n      sx,\n    }: WandelbotsDataGridProps<T>) => {\n      const theme = useTheme()\n      const apiRef = useGridApiRef()\n      const containerRef = useRef<HTMLDivElement>(null)\n\n      // Internal state for selection when not controlled\n      const [internalSelectedItem, setInternalSelectedItem] =\n        useState<T | null>(null)\n\n      // Prepare rows for the DataGrid\n      const rows = useMemo(() => data.map(getRowData), [data, getRowData])\n\n      // Auto-resize columns when data changes\n      useEffect(() => {\n        if (apiRef.current && rows.length > 0) {\n          apiRef.current.autosizeColumns({\n            includeOutliers: true,\n            includeHeaders: true,\n            expand: true,\n            columns: columns.map((col) => col.field),\n          })\n        }\n      }, [rows, columns, apiRef])\n\n      // Auto-resize columns when the DataGrid container is resized\n      useEffect(() => {\n        if (!containerRef.current || !apiRef.current) return\n\n        const resizeObserver = new ResizeObserver(() => {\n          // Use a small timeout to ensure the DataGrid has processed the size change\n          setTimeout(() => {\n            if (apiRef.current && rows.length > 0) {\n              apiRef.current.autosizeColumns({\n                includeOutliers: true,\n                includeHeaders: true,\n                expand: true,\n                columns: columns.map((col) => col.field),\n              })\n            }\n          }, 100)\n        })\n\n        resizeObserver.observe(containerRef.current)\n\n        return () => {\n          resizeObserver.disconnect()\n        }\n      }, [apiRef, rows.length, columns])\n\n      // Handle default selection - only use if no selectedItem is explicitly provided\n      const effectiveSelectedItem = useMemo(() => {\n        // If selectedItem is explicitly provided, use it (including null)\n        if (selectedItem !== undefined) {\n          return selectedItem\n        }\n        // If we have an internal selection, use it\n        if (internalSelectedItem !== null) {\n          return internalSelectedItem\n        }\n        // Otherwise, use first item if selectFirstByDefault is true\n        if (selectFirstByDefault && data.length > 0) {\n          const firstItem = data[0]\n          // Set internal state to first item on initial load\n          setInternalSelectedItem(firstItem)\n          return firstItem\n        }\n        return null\n      }, [selectFirstByDefault, data, selectedItem, internalSelectedItem])\n\n      // Handle row click\n      const handleRowClick = (params: GridRowParams) => {\n        const item = data.find((item) => {\n          const rowData = getRowData(item)\n          return rowData.id === params.id\n        })\n\n        if (item) {\n          // Update internal selection state if not controlled by props\n          if (selectedItem === undefined) {\n            setInternalSelectedItem(item)\n          }\n\n          // Call the user's onRowClick callback\n          if (onRowClick) {\n            onRowClick(item, params)\n          }\n        }\n      }\n\n      // Get selected row ID for highlighting\n      const selectedRowId = useMemo(() => {\n        if (!effectiveSelectedItem || !getItemId) return null\n        return getItemId(effectiveSelectedItem)\n      }, [effectiveSelectedItem, getItemId])\n\n      // Default toolbar with filter and quick filter\n      function DefaultToolbar() {\n        return (\n          <Toolbar>\n            <Box\n              sx={{\n                display: \"flex\",\n                width: \"100%\",\n                gap: 1,\n                p: 0.5,\n                alignItems: \"center\",\n              }}\n            >\n              {title && (\n                <Typography\n                  variant=\"h6\"\n                  sx={{\n                    fontWeight: 500,\n                    color: \"white\",\n                  }}\n                >\n                  {title}\n                  {showCount && ` (${data.length})`}\n                </Typography>\n              )}\n              <Box\n                sx={{\n                  ml: \"auto\",\n                  display: \"flex\",\n                  gap: 0.5,\n                  alignItems: \"center\",\n                  pr: 1,\n                }}\n              >\n                <FilterPanelTrigger\n                  render={\n                    <ToolbarButton aria-label=\"Show filters\">\n                      <FilterListIcon fontSize=\"small\" />\n                    </ToolbarButton>\n                  }\n                />\n                <Divider\n                  orientation=\"vertical\"\n                  flexItem\n                  sx={{\n                    height: \"24px\",\n                    alignSelf: \"center\",\n                  }}\n                />\n                <QuickFilter\n                  render={(props, state) => (\n                    <Box\n                      {...props}\n                      sx={{\n                        display: \"flex\",\n                        overflow: \"hidden\",\n                      }}\n                    >\n                      {!state.expanded && (\n                        <QuickFilterTrigger\n                          render={\n                            <ToolbarButton aria-label=\"Search\">\n                              <SearchIcon fontSize=\"small\" />\n                            </ToolbarButton>\n                          }\n                        />\n                      )}\n                      <Box\n                        sx={{\n                          display: \"flex\",\n                          overflow: \"hidden\",\n                          transition: \"all 0.3s ease-in-out\",\n                          width: state.expanded ? \"200px\" : \"0px\",\n                          position: \"relative\",\n                        }}\n                      >\n                        <Box\n                          sx={{\n                            flex: 1,\n                            position: \"relative\",\n                            \"& .MuiInputBase-root\": {\n                              height: \"32px\",\n                              borderRadius: \"16px\",\n                              backgroundColor: \"#171927\",\n                              paddingLeft: \"40px\",\n                              paddingRight:\n                                state.expanded && state.value !== \"\"\n                                  ? \"40px\"\n                                  : \"12px\",\n                              color: \"white\",\n                              fontSize: \"14px\",\n                              border: \"none !important\",\n                              outline: \"none !important\",\n                              boxShadow: \"none !important\",\n                              \"&::before\": {\n                                display: \"none !important\",\n                                border: \"none !important\",\n                              },\n                              \"&::after\": {\n                                display: \"none !important\",\n                                border: \"none !important\",\n                              },\n                              \"&:hover\": {\n                                \"&::before\": {\n                                  display: \"none !important\",\n                                  border: \"none !important\",\n                                },\n                                \"&::after\": {\n                                  display: \"none !important\",\n                                  border: \"none !important\",\n                                },\n                              },\n                              \"&:focus-within\": {\n                                outline: \"none !important\",\n                                boxShadow: \"none !important\",\n                                \"&::before\": {\n                                  display: \"none !important\",\n                                  border: \"none !important\",\n                                },\n                                \"&::after\": {\n                                  display: \"none !important\",\n                                  border: \"none !important\",\n                                },\n                              },\n                              \"&.Mui-focused\": {\n                                outline: \"none !important\",\n                                boxShadow: \"none !important\",\n                                \"&::before\": {\n                                  display: \"none !important\",\n                                  border: \"none !important\",\n                                },\n                                \"&::after\": {\n                                  display: \"none !important\",\n                                  border: \"none !important\",\n                                },\n                              },\n                              \"& .MuiInputBase-input\": {\n                                padding: \"8px 0\",\n                                border: \"none !important\",\n                                outline: \"none !important\",\n                                boxShadow: \"none !important\",\n                                \"&:focus\": {\n                                  outline: \"none !important\",\n                                  boxShadow: \"none !important\",\n                                  border: \"none !important\",\n                                },\n                                \"&::placeholder\": {\n                                  color: \"rgba(255, 255, 255, 0.3)\",\n                                  opacity: 1,\n                                },\n                              },\n                              \"& fieldset\": {\n                                border: \"none !important\",\n                                display: \"none !important\",\n                              },\n                              \"& .MuiOutlinedInput-notchedOutline\": {\n                                border: \"none !important\",\n                                display: \"none !important\",\n                              },\n                            },\n                          }}\n                        >\n                          {state.expanded && (\n                            <SearchIcon\n                              fontSize=\"small\"\n                              sx={{\n                                position: \"absolute\",\n                                left: \"12px\",\n                                top: \"50%\",\n                                transform: \"translateY(-50%)\",\n                                color: \"rgba(255, 255, 255, 0.6)\",\n                                zIndex: 1,\n                                pointerEvents: \"none\",\n                              }}\n                            />\n                          )}\n                          <QuickFilterControl placeholder={searchPlaceholder} />\n                        </Box>\n                        {state.expanded && state.value !== \"\" && (\n                          <QuickFilterClear\n                            render={\n                              <Box\n                                sx={{\n                                  position: \"absolute\",\n                                  right: \"8px\",\n                                  top: \"50%\",\n                                  transform: \"translateY(-50%)\",\n                                  zIndex: 1,\n                                }}\n                              >\n                                <Box\n                                  sx={{\n                                    minWidth: \"24px\",\n                                    width: \"24px\",\n                                    height: \"24px\",\n                                    padding: 0,\n                                    color: \"rgba(255, 255, 255, 0.6)\",\n                                    \"&:hover\": {\n                                      backgroundColor:\n                                        \"rgba(255, 255, 255, 0.1)\",\n                                    },\n                                  }}\n                                >\n                                  <ToolbarButton aria-label=\"Clear\">\n                                    <ClearIcon fontSize=\"small\" />\n                                  </ToolbarButton>\n                                </Box>\n                              </Box>\n                            }\n                          />\n                        )}\n                      </Box>\n                    </Box>\n                  )}\n                />\n              </Box>\n            </Box>\n          </Toolbar>\n        )\n      }\n\n      const ToolbarComponent = CustomToolbar || DefaultToolbar\n\n      return (\n        <Box\n          ref={containerRef}\n          sx={{\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            // Apply scrollbar styling like in the theme\n            \"& *\": {\n              scrollbarWidth: \"none\",\n              msOverflowStyle: \"none\",\n              \"&::-webkit-scrollbar\": {\n                display: \"none\",\n              },\n            },\n            \"&:hover *\": {\n              scrollbarWidth: \"thin\",\n              scrollbarColor: `${theme.palette.divider} transparent`,\n              \"&::-webkit-scrollbar\": {\n                display: \"block\",\n                width: \"8px\",\n                height: \"8px\",\n              },\n              \"&::-webkit-scrollbar-track\": {\n                background: \"transparent\",\n              },\n              \"&::-webkit-scrollbar-thumb\": {\n                background: theme.palette.divider,\n                borderRadius: \"4px\",\n              },\n              \"&::-webkit-scrollbar-thumb:hover\": {\n                background: theme.palette.action.hover,\n              },\n            },\n            ...sx,\n          }}\n        >\n          <DataGrid\n            apiRef={apiRef}\n            rows={rows}\n            columns={columns}\n            onRowClick={handleRowClick}\n            disableColumnMenu={false}\n            disableRowSelectionOnClick={true}\n            disableMultipleRowSelection={true}\n            hideFooterSelectedRowCount={true}\n            filterMode=\"client\"\n            sortingOrder={[\"desc\", \"asc\"]}\n            hideFooter={false}\n            showToolbar={true}\n            slots={{\n              toolbar: ToolbarComponent,\n            }}\n            initialState={{\n              sorting: {\n                sortModel: [],\n              },\n              filter: {\n                filterModel: {\n                  items: [],\n                },\n              },\n              ...dataGridProps?.initialState,\n            }}\n            {...dataGridProps}\n            // Ensure autosize properties are always enabled and not overridden by dataGridProps\n            autosizeOnMount={true}\n            autosizeOptions={{\n              // Merge any custom autosize options first\n              ...(dataGridProps?.autosizeOptions || {}),\n              // Force these key properties to always be true to maintain autosize behavior\n              includeOutliers: true,\n              includeHeaders: true,\n              expand: true,\n              // Auto-size all columns by default (can be overridden by dataGridProps)\n              columns:\n                dataGridProps?.autosizeOptions?.columns ||\n                columns.map((col) => col.field),\n            }}\n            sx={{\n              border: \"none\",\n\n              width: \"100%\",\n              // Remove any MUI overlays and elevation effects\n              \"& .MuiPaper-root\": {\n                boxShadow: \"none !important\",\n              },\n              \"& .MuiDataGrid-overlay\": {},\n              \"& .MuiDataGrid-main\": {\n                border: \"none\",\n\n                // Remove any surface or paper overlays\n                \"& .MuiPaper-root\": {},\n              },\n              \"& .MuiDataGrid-container--top [role=row]\": {},\n              \"& .MuiDataGrid-topContainer\": {\n                borderBottom: \"none !important\",\n              },\n              \"& .MuiDataGrid-columnHeaders\": {\n                border: \"none\",\n                borderBottom: \"none !important\",\n              },\n              \"& .MuiDataGrid-row\": {\n                cursor: onRowClick ? \"pointer\" : \"default\",\n                border: \"none\",\n                margin: \"1px 0\",\n                position: \"relative\",\n                // Disable all default MUI hover effects\n                backgroundColor: \"transparent !important\",\n                \"&:hover\": {\n                  backgroundColor: \"transparent !important\",\n                  \"&::before\": {\n                    content: '\"\"',\n                    position: \"absolute\",\n                    top: 0,\n                    left: \"16px\",\n                    right: \"16px\",\n                    bottom: 0,\n                    backgroundColor: \"action.hover\",\n                    borderRadius: \"16px\",\n                    zIndex: 0,\n                  },\n                },\n                // Disable MUI's built-in selection styling completely\n                \"&.Mui-selected\": {\n                  backgroundColor: \"transparent !important\",\n                  \"&:hover\": {\n                    backgroundColor: \"transparent !important\",\n                  },\n                },\n                // Highlight selected row with a distinct color using data attribute\n                ...(selectedRowId !== null && {\n                  [`&[data-id=\"${selectedRowId}\"]`]: {\n                    backgroundColor: \"transparent !important\",\n                    \"&::before\": {\n                      content: '\"\"',\n                      position: \"absolute\",\n                      top: 0,\n                      left: \"16px\",\n                      right: \"16px\",\n                      bottom: 0,\n                      backgroundColor: \"rgba(255, 255, 255, 0.08) !important\",\n                      borderRadius: \"16px\",\n                      zIndex: 0,\n                    },\n                    \"&:hover\": {\n                      backgroundColor: \"transparent !important\",\n                    },\n                    \"&:hover::before\": {\n                      backgroundColor: \"rgba(255, 255, 255, 0.12) !important\",\n                    },\n                  },\n                }),\n              },\n              \"& .MuiDataGrid-cell--textLeft\": {\n                paddingLeft: \"40px\",\n              },\n              \"& .MuiDataGrid-cell\": {\n                border: \"none\",\n                position: \"relative\",\n                zIndex: 1,\n                \"&:focus\": {\n                  outline: \"none\",\n                },\n                \"&:focus-within\": {\n                  outline: \"none\",\n                },\n                \"&:hover\": {\n                  backgroundColor: \"transparent !important\",\n                },\n              },\n              \"& .MuiDataGrid-columnHeader\": {\n                border: \"none\",\n                paddingLeft: \"40px\",\n                paddingRight: \"40px\",\n\n                \"& .MuiDataGrid-columnHeaderTitle\": {\n                  color: \"rgba(255, 255, 255, 0.6)\",\n                },\n              },\n              \"& .MuiDataGrid-toolbarContainer\": {\n                padding: \"8px\",\n                border: \"none !important\",\n                borderBottom: \"none !important\",\n\n                \"& .MuiBox-root\": {},\n                \"& .MuiFormControl-root\": {},\n                \"& .MuiInputBase-root\": {},\n                \"& .MuiPaper-root\": {\n                  boxShadow: \"none !important\",\n                },\n                \"& *\": {\n                  borderBottom: \"none !important\",\n                },\n              },\n              \"& .MuiDataGrid-toolbar\": {\n                borderBottom: \"none !important\",\n              },\n              \"& .MuiDataGrid-toolbarFilterList\": {\n                border: \"none\",\n              },\n              \"& .MuiDataGrid-withBorderColor\": {\n                borderColor: \"transparent !important\",\n              },\n              \"& .MuiDataGrid-columnSeparator\": {\n                display: \"none\",\n              },\n              \"& .MuiDataGrid-footerContainer\": {\n                display: \"none\",\n              },\n              \"& .MuiDataGrid-filler\": {\n                border: \"none !important\",\n                borderTop: \"none !important\",\n                borderBottom: \"none !important\",\n                borderLeft: \"none !important\",\n                borderRight: \"none !important\",\n\n                \"--rowBorderColor\": \"none !important\",\n              },\n              // Remove any remaining MUI background overlays\n              \"& .MuiBackdrop-root\": {},\n              \"& .MuiModal-backdrop\": {},\n              ...dataGridProps?.sx,\n            }}\n          />\n        </Box>\n      )\n    },\n  ),\n)\n\nWandelbotsDataGrid.displayName = \"WandelbotsDataGrid\"\n\nexport default WandelbotsDataGrid\n"],"names":["WandelbotsDataGrid","externalizeComponent","observer","data","columns","getRowData","onRowClick","selectedItem","getItemId","title","showCount","searchPlaceholder","dataGridProps","CustomToolbar","selectFirstByDefault","sx","theme","useTheme","apiRef","useGridApiRef","containerRef","useRef","internalSelectedItem","setInternalSelectedItem","useState","rows","useMemo","useEffect","col","resizeObserver","effectiveSelectedItem","firstItem","handleRowClick","params","item","selectedRowId","DefaultToolbar","Toolbar","jsxs","Box","Typography","jsx","FilterPanelTrigger","ToolbarButton","FilterListIcon","Divider","QuickFilter","props","state","QuickFilterTrigger","SearchIcon","QuickFilterControl","QuickFilterClear","ClearIcon","ToolbarComponent","DataGrid","_a"],"mappings":"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"}

package/dist/components/DataGrid.d.ts

@@ -63,4 +63,5 @@ export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
 export declare const WandelbotsDataGrid: (<T>({ data, columns, getRowData, onRowClick, selectedItem, getItemId, title, showCount, searchPlaceholder, dataGridProps, CustomToolbar, selectFirstByDefault, sx, }: WandelbotsDataGridProps<T>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
+export default WandelbotsDataGrid;
 //# sourceMappingURL=DataGrid.d.ts.map

package/dist/components/DataGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../src/components/DataGrid.tsx"],"names":[],"mappings":"AAIA,OAAO,GAAG,MAAM,mBAAmB,CAAA;AAGnC,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,UAAU,EACf,KAAK,aAAa,EAQnB,MAAM,kBAAkB,CAAA;AAKzB,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAA;IAET;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAA;IAErB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAE1E;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IAErD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAA;IAExC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAEnC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;CAC5C;AAED,eAAO,MAAM,kBAAkB,IAE1B,CAAC,oKAcC,uBAAuB,CAAC,CAAC,CAAC;;CAmiBhC,CAAA"}
+{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../src/components/DataGrid.tsx"],"names":[],"mappings":"AAIA,OAAO,GAAG,MAAM,mBAAmB,CAAA;AAGnC,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,UAAU,EACf,KAAK,aAAa,EAQnB,MAAM,kBAAkB,CAAA;AAKzB,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAA;IAET;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAA;IAErB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAA;IAE1E;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IAErD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAA;IAExC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAEnC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;CAC5C;AAED,eAAO,MAAM,kBAAkB,IAE1B,CAAC,oKAcC,uBAAuB,CAAC,CAAC,CAAC;;CAmiBhC,CAAA;AAID,eAAe,kBAAkB,CAAA"}

package/dist/components/DataGrid.js

@@ -0,0 +1,535 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import H from "@mui/icons-material/Clear";
+import W from "@mui/icons-material/FilterList";
+import y from "@mui/icons-material/Search";
+import { useTheme as Q } from "@mui/material/styles";
+import i from "@mui/material/Box";
+import $ from "@mui/material/Divider";
+import j from "@mui/material/Typography";
+import { useGridApiRef as E, DataGrid as Y, Toolbar as A, FilterPanelTrigger as G, ToolbarButton as g, QuickFilter as N, QuickFilterTrigger as q, QuickFilterControl as J, QuickFilterClear as K } from "@mui/x-data-grid";
+import { observer as U } from "mobx-react-lite";
+import { useRef as V, useState as X, useMemo as M, useEffect as D } from "react";
+import { externalizeComponent as Z } from "../externalizeComponent.js";
+const _ = Z(
+  U(
+    ({
+      data: a,
+      columns: l,
+      getRowData: s,
+      onRowClick: m,
+      selectedItem: u,
+      getItemId: c,
+      title: w,
+      showCount: z = !0,
+      searchPlaceholder: B = "Search programs",
+      dataGridProps: r,
+      CustomToolbar: I,
+      selectFirstByDefault: v = !1,
+      sx: O
+    }) => {
+      var S;
+      const b = Q(), t = E(), f = V(null), [h, C] = X(null), d = M(() => a.map(s), [a, s]);
+      D(() => {
+        t.current && d.length > 0 && t.current.autosizeColumns({
+          includeOutliers: !0,
+          includeHeaders: !0,
+          expand: !0,
+          columns: l.map((e) => e.field)
+        });
+      }, [d, l, t]), D(() => {
+        if (!f.current || !t.current) return;
+        const e = new ResizeObserver(() => {
+          setTimeout(() => {
+            t.current && d.length > 0 && t.current.autosizeColumns({
+              includeOutliers: !0,
+              includeHeaders: !0,
+              expand: !0,
+              columns: l.map((n) => n.field)
+            });
+          }, 100);
+        });
+        return e.observe(f.current), () => {
+          e.disconnect();
+        };
+      }, [t, d.length, l]);
+      const x = M(() => {
+        if (u !== void 0)
+          return u;
+        if (h !== null)
+          return h;
+        if (v && a.length > 0) {
+          const e = a[0];
+          return C(e), e;
+        }
+        return null;
+      }, [v, a, u, h]), R = (e) => {
+        const n = a.find((L) => s(L).id === e.id);
+        n && (u === void 0 && C(n), m && m(n, e));
+      }, k = M(() => !x || !c ? null : c(x), [x, c]);
+      function T() {
+        return /* @__PURE__ */ o(A, { children: /* @__PURE__ */ p(
+          i,
+          {
+            sx: {
+              display: "flex",
+              width: "100%",
+              gap: 1,
+              p: 0.5,
+              alignItems: "center"
+            },
+            children: [
+              w && /* @__PURE__ */ p(
+                j,
+                {
+                  variant: "h6",
+                  sx: {
+                    fontWeight: 500,
+                    color: "white"
+                  },
+                  children: [
+                    w,
+                    z && ` (${a.length})`
+                  ]
+                }
+              ),
+              /* @__PURE__ */ p(
+                i,
+                {
+                  sx: {
+                    ml: "auto",
+                    display: "flex",
+                    gap: 0.5,
+                    alignItems: "center",
+                    pr: 1
+                  },
+                  children: [
+                    /* @__PURE__ */ o(
+                      G,
+                      {
+                        render: /* @__PURE__ */ o(g, { "aria-label": "Show filters", children: /* @__PURE__ */ o(W, { fontSize: "small" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      $,
+                      {
+                        orientation: "vertical",
+                        flexItem: !0,
+                        sx: {
+                          height: "24px",
+                          alignSelf: "center"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      N,
+                      {
+                        render: (e, n) => /* @__PURE__ */ p(
+                          i,
+                          {
+                            ...e,
+                            sx: {
+                              display: "flex",
+                              overflow: "hidden"
+                            },
+                            children: [
+                              !n.expanded && /* @__PURE__ */ o(
+                                q,
+                                {
+                                  render: /* @__PURE__ */ o(g, { "aria-label": "Search", children: /* @__PURE__ */ o(y, { fontSize: "small" }) })
+                                }
+                              ),
+                              /* @__PURE__ */ p(
+                                i,
+                                {
+                                  sx: {
+                                    display: "flex",
+                                    overflow: "hidden",
+                                    transition: "all 0.3s ease-in-out",
+                                    width: n.expanded ? "200px" : "0px",
+                                    position: "relative"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ p(
+                                      i,
+                                      {
+                                        sx: {
+                                          flex: 1,
+                                          position: "relative",
+                                          "& .MuiInputBase-root": {
+                                            height: "32px",
+                                            borderRadius: "16px",
+                                            backgroundColor: "#171927",
+                                            paddingLeft: "40px",
+                                            paddingRight: n.expanded && n.value !== "" ? "40px" : "12px",
+                                            color: "white",
+                                            fontSize: "14px",
+                                            border: "none !important",
+                                            outline: "none !important",
+                                            boxShadow: "none !important",
+                                            "&::before": {
+                                              display: "none !important",
+                                              border: "none !important"
+                                            },
+                                            "&::after": {
+                                              display: "none !important",
+                                              border: "none !important"
+                                            },
+                                            "&:hover": {
+                                              "&::before": {
+                                                display: "none !important",
+                                                border: "none !important"
+                                              },
+                                              "&::after": {
+                                                display: "none !important",
+                                                border: "none !important"
+                                              }
+                                            },
+                                            "&:focus-within": {
+                                              outline: "none !important",
+                                              boxShadow: "none !important",
+                                              "&::before": {
+                                                display: "none !important",
+                                                border: "none !important"
+                                              },
+                                              "&::after": {
+                                                display: "none !important",
+                                                border: "none !important"
+                                              }
+                                            },
+                                            "&.Mui-focused": {
+                                              outline: "none !important",
+                                              boxShadow: "none !important",
+                                              "&::before": {
+                                                display: "none !important",
+                                                border: "none !important"
+                                              },
+                                              "&::after": {
+                                                display: "none !important",
+                                                border: "none !important"
+                                              }
+                                            },
+                                            "& .MuiInputBase-input": {
+                                              padding: "8px 0",
+                                              border: "none !important",
+                                              outline: "none !important",
+                                              boxShadow: "none !important",
+                                              "&:focus": {
+                                                outline: "none !important",
+                                                boxShadow: "none !important",
+                                                border: "none !important"
+                                              },
+                                              "&::placeholder": {
+                                                color: "rgba(255, 255, 255, 0.3)",
+                                                opacity: 1
+                                              }
+                                            },
+                                            "& fieldset": {
+                                              border: "none !important",
+                                              display: "none !important"
+                                            },
+                                            "& .MuiOutlinedInput-notchedOutline": {
+                                              border: "none !important",
+                                              display: "none !important"
+                                            }
+                                          }
+                                        },
+                                        children: [
+                                          n.expanded && /* @__PURE__ */ o(
+                                            y,
+                                            {
+                                              fontSize: "small",
+                                              sx: {
+                                                position: "absolute",
+                                                left: "12px",
+                                                top: "50%",
+                                                transform: "translateY(-50%)",
+                                                color: "rgba(255, 255, 255, 0.6)",
+                                                zIndex: 1,
+                                                pointerEvents: "none"
+                                              }
+                                            }
+                                          ),
+                                          /* @__PURE__ */ o(J, { placeholder: B })
+                                        ]
+                                      }
+                                    ),
+                                    n.expanded && n.value !== "" && /* @__PURE__ */ o(
+                                      K,
+                                      {
+                                        render: /* @__PURE__ */ o(
+                                          i,
+                                          {
+                                            sx: {
+                                              position: "absolute",
+                                              right: "8px",
+                                              top: "50%",
+                                              transform: "translateY(-50%)",
+                                              zIndex: 1
+                                            },
+                                            children: /* @__PURE__ */ o(
+                                              i,
+                                              {
+                                                sx: {
+                                                  minWidth: "24px",
+                                                  width: "24px",
+                                                  height: "24px",
+                                                  padding: 0,
+                                                  color: "rgba(255, 255, 255, 0.6)",
+                                                  "&:hover": {
+                                                    backgroundColor: "rgba(255, 255, 255, 0.1)"
+                                                  }
+                                                },
+                                                children: /* @__PURE__ */ o(g, { "aria-label": "Clear", children: /* @__PURE__ */ o(H, { fontSize: "small" }) })
+                                              }
+                                            )
+                                          }
+                                        )
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) });
+      }
+      const F = I || T;
+      return /* @__PURE__ */ o(
+        i,
+        {
+          ref: f,
+          sx: {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            // Apply scrollbar styling like in the theme
+            "& *": {
+              scrollbarWidth: "none",
+              msOverflowStyle: "none",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            "&:hover *": {
+              scrollbarWidth: "thin",
+              scrollbarColor: `${b.palette.divider} transparent`,
+              "&::-webkit-scrollbar": {
+                display: "block",
+                width: "8px",
+                height: "8px"
+              },
+              "&::-webkit-scrollbar-track": {
+                background: "transparent"
+              },
+              "&::-webkit-scrollbar-thumb": {
+                background: b.palette.divider,
+                borderRadius: "4px"
+              },
+              "&::-webkit-scrollbar-thumb:hover": {
+                background: b.palette.action.hover
+              }
+            },
+            ...O
+          },
+          children: /* @__PURE__ */ o(
+            Y,
+            {
+              apiRef: t,
+              rows: d,
+              columns: l,
+              onRowClick: R,
+              disableColumnMenu: !1,
+              disableRowSelectionOnClick: !0,
+              disableMultipleRowSelection: !0,
+              hideFooterSelectedRowCount: !0,
+              filterMode: "client",
+              sortingOrder: ["desc", "asc"],
+              hideFooter: !1,
+              showToolbar: !0,
+              slots: {
+                toolbar: F
+              },
+              initialState: {
+                sorting: {
+                  sortModel: []
+                },
+                filter: {
+                  filterModel: {
+                    items: []
+                  }
+                },
+                ...r == null ? void 0 : r.initialState
+              },
+              ...r,
+              autosizeOnMount: !0,
+              autosizeOptions: {
+                // Merge any custom autosize options first
+                ...(r == null ? void 0 : r.autosizeOptions) || {},
+                // Force these key properties to always be true to maintain autosize behavior
+                includeOutliers: !0,
+                includeHeaders: !0,
+                expand: !0,
+                // Auto-size all columns by default (can be overridden by dataGridProps)
+                columns: ((S = r == null ? void 0 : r.autosizeOptions) == null ? void 0 : S.columns) || l.map((e) => e.field)
+              },
+              sx: {
+                border: "none",
+                width: "100%",
+                // Remove any MUI overlays and elevation effects
+                "& .MuiPaper-root": {
+                  boxShadow: "none !important"
+                },
+                "& .MuiDataGrid-overlay": {},
+                "& .MuiDataGrid-main": {
+                  border: "none",
+                  // 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"
+                },
+                "& .MuiDataGrid-row": {
+                  cursor: m ? "pointer" : "default",
+                  border: "none",
+                  margin: "1px 0",
+                  position: "relative",
+                  // Disable all default MUI hover effects
+                  backgroundColor: "transparent !important",
+                  "&: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
+                  ...k !== null && {
+                    [`&[data-id="${k}"]`]: {
+                      backgroundColor: "transparent !important",
+                      "&::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": {
+                        backgroundColor: "transparent !important"
+                      },
+                      "&: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"
+                  },
+                  "&:hover": {
+                    backgroundColor: "transparent !important"
+                  }
+                },
+                "& .MuiDataGrid-columnHeader": {
+                  border: "none",
+                  paddingLeft: "40px",
+                  paddingRight: "40px",
+                  "& .MuiDataGrid-columnHeaderTitle": {
+                    color: "rgba(255, 255, 255, 0.6)"
+                  }
+                },
+                "& .MuiDataGrid-toolbarContainer": {
+                  padding: "8px",
+                  border: "none !important",
+                  borderBottom: "none !important",
+                  "& .MuiBox-root": {},
+                  "& .MuiFormControl-root": {},
+                  "& .MuiInputBase-root": {},
+                  "& .MuiPaper-root": {
+                    boxShadow: "none !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"
+                },
+                // Remove any remaining MUI background overlays
+                "& .MuiBackdrop-root": {},
+                "& .MuiModal-backdrop": {},
+                ...r == null ? void 0 : r.sx
+              }
+            }
+          )
+        }
+      );
+    }
+  )
+);
+_.displayName = "WandelbotsDataGrid";
+export {
+  _ as WandelbotsDataGrid,
+  _ as default
+};
+//# sourceMappingURL=DataGrid.js.map