@balena/ui-shared-components 5.5.1 → 5.6.0

package/dist/index.d.ts

@@ -56,5 +56,6 @@ export type { IconButtonWithTrackingProps } from './components/IconButtonWithTra
 export { AnalyticsContextProvider, useAnalyticsContext, AnalyticsStoreActions, } from './contexts/AnalyticsContext';
 export * as Material from '@mui/material';
 export * as MaterialLab from '@mui/lab';
+export * as MaterialDataGrid from '@mui/x-data-grid';
 export { enqueueSnackbar, closeSnackbar } from 'notistack';
 export * as designTokens from '@balena/design-tokens';

package/dist/index.js

@@ -29,5 +29,6 @@ export { IconButtonWithTracking } from './components/IconButtonWithTracking';
 export { AnalyticsContextProvider, useAnalyticsContext, AnalyticsStoreActions, } from './contexts/AnalyticsContext';
 export * as Material from '@mui/material';
 export * as MaterialLab from '@mui/lab';
+export * as MaterialDataGrid from '@mui/x-data-grid';
 export { enqueueSnackbar, closeSnackbar } from 'notistack';
 export * as designTokens from '@balena/design-tokens';

package/dist/theme.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createTheme, } from '@mui/material';
+import { createTheme, tableCellClasses, } from '@mui/material';
 import { color } from '@balena/design-tokens';
 export const theme = createTheme({
     typography: {
@@ -587,6 +587,84 @@ export const theme = createTheme({
                 },
             },
         },
+        MuiTableRow: {
+            styleOverrides: {
+                root: {
+                    '&:nth-of-type(even)': { backgroundColor: color.bg.value },
+                },
+            },
+        },
+        MuiTableCell: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    padding: `14px ${theme.spacing(2)}`,
+                    fontSize: '1rem',
+                    borderBottom: 'none',
+                    [`&.${tableCellClasses.head}`]: {
+                        backgroundColor: color.bg.value,
+                        padding: `10px ${theme.spacing(2)}`,
+                        borderBottom: `1px solid ${color.border.subtle.value}`,
+                        fontWeight: 'bold',
+                    },
+                }),
+            },
+        },
+        MuiTableBody: {
+            styleOverrides: {
+                root: {
+                    borderBottom: `1px solid ${color.border.subtle.value}`,
+                },
+            },
+        },
+        MuiDataGrid: {
+            defaultProps: {
+                columnHeaderHeight: 42,
+                rowHeight: 50,
+                autoHeight: true,
+            },
+            styleOverrides: {
+                root: {
+                    '--DataGrid-rowBorderColor': color.border.subtle.value,
+                    '--DataGrid-containerBackground': '#f2f4fa',
+                    border: 'none',
+                    fontSize: '1rem',
+                    '.MuiDataGrid-columnHeaderTitle': {
+                        fontWeight: 'bold',
+                    },
+                    '.MuiDataGrid-columnSeparator': {
+                        color: color.border.strong.value,
+                    },
+                    '.MuiDataGrid-main > *:first-of-type': { borderRadius: 0 },
+                    '.MuiDataGrid-row': {
+                        '&:hover': {
+                            backgroundColor: `${color.bg.accent.value} !important`,
+                        },
+                        '&:not(.Mui-selected)': {
+                            '&:nth-of-type(odd)': {
+                                backgroundColor: 'white',
+                            },
+                            '&:nth-of-type(even)': {
+                                backgroundColor: color.bg.value,
+                            },
+                        },
+                    },
+                    '.MuiDataGrid-cell': {
+                        borderTop: 'none',
+                    },
+                    '.MuiDataGrid-columnHeader, .MuiDataGrid-cell:not(.MuiDataGrid-cell--editable)': {
+                        '&:focus,& :focus-within': {
+                            outline: 'none',
+                        },
+                        '&:focus-visible': {
+                            outline: `1px solid ${color.border.accent.value}`,
+                        },
+                    },
+                    '.MuiDataGrid-bottomContainer': {
+                        borderBottom: `1px solid ${color.border.subtle.value}`,
+                    },
+                },
+            },
+        },
         MuiFormControl: {
             defaultProps: {
                 variant: 'outlined',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "main": "./dist/index.js",
   "sideEffects": false,
   "files": [
@@ -18,6 +18,7 @@
     "@mui/lab": "^5.0.0-alpha.165",
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
+    "@mui/x-data-grid": "^7.1.0",
     "@react-google-maps/api": "^2.18.1",
     "@rjsf/core": "^5.13.0",
     "@rjsf/mui": "^5.13.0",
@@ -110,6 +111,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2024-04-23T10:36:13.213Z"
+    "publishedAt": "2024-04-23T14:09:14.943Z"
   }
 }