Skip to content

Resolve Grid2 TypeScript build break by removing @mui/material/Grid2 subpath dependency #1355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Resolve Grid2 TypeScript build break by removing @mui/material/Grid2 subpath dependency #1355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b8e878
Initial plan
Copilot Mar 5, 2026
fd79c44
fix: use MUI Grid2 barrel import for compatibility
Copilot Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/base/Grid2/Grid2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import MuiGrid, { Grid2Props as MuiGridProps } from '@mui/material/Grid2';
import { Grid2 as MuiGrid } from '@mui/material';
import React from 'react';

type MuiGridProps = React.ComponentProps<typeof MuiGrid>;

const Grid2 = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
return <MuiGrid {...props} ref={ref} />;
});
Expand Down
3 changes: 1 addition & 2 deletions src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import Grid2 from '@mui/material/Grid2';
import { SwipeableDrawer } from '@mui/material';
import { Grid2, SwipeableDrawer } from '@mui/material';
import { useState } from 'react';
import {
Comment on lines +2 to 4
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file already imports several base components from ../../../base. Consider importing Grid2 from ../../../base as well, and keep SwipeableDrawer coming from @mui/material, so Grid2 usage remains consistent with other components that go through the base wrapper layer.

Suggested change
import { Grid2, SwipeableDrawer } from '@mui/material';
import { useState } from 'react';
import {
import { SwipeableDrawer } from '@mui/material';
import { useState } from 'react';
import {
Grid2,

Copilot uses AI. Check for mistakes.
Backdrop,
Expand Down
3 changes: 1 addition & 2 deletions src/custom/InputSearchField/InputSearchField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Grid2 from '@mui/material/Grid2';
import { Autocomplete } from '@mui/material';
import { Autocomplete, Grid2 } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react';
import { Box, Chip, CircularProgress, TextField, Tooltip, Typography } from '../../base';
Comment on lines +1 to 3
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component already relies on ../../base for several MUI wrappers (Box/Chip/CircularProgress/TextField/etc.). Consider importing Grid2 from ../../base too, so layout components go through the same wrapper layer as the rest of the UI primitives.

Suggested change
import { Autocomplete, Grid2 } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react';
import { Box, Chip, CircularProgress, TextField, Tooltip, Typography } from '../../base';
import { Autocomplete } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react';
import { Box, Chip, CircularProgress, Grid2, TextField, Tooltip, Typography } from '../../base';

Copilot uses AI. Check for mistakes.

Expand Down
3 changes: 1 addition & 2 deletions src/custom/ResourceDetailFormatters/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Grid2 from '@mui/material/Grid2';
import { alpha } from '@mui/material';
import { alpha, Grid2 } from '@mui/material';
import { Box, Chip, IconButton, Typography } from '../../base';
Comment on lines +1 to 2
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This styles module already uses base wrappers for other components (Box/Chip/IconButton/Typography). Consider importing Grid2 from ../../base as well, and keep alpha from @mui/material, to maintain the “base component” abstraction consistently across the codebase.

Suggested change
import { alpha, Grid2 } from '@mui/material';
import { Box, Chip, IconButton, Typography } from '../../base';
import { alpha } from '@mui/material';
import { Box, Chip, Grid2, IconButton, Typography } from '../../base';

Copilot uses AI. Check for mistakes.

import { charcoal, KEPPEL, styled } from '../../theme';
Expand Down
3 changes: 1 addition & 2 deletions src/custom/TeamTable/TeamTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import Grid2 from '@mui/material/Grid2';
import { TableCell } from '@mui/material';
import { Grid2, TableCell } from '@mui/material';
import { MUIDataTableColumn } from '@sistent/mui-datatables';
import { styled, useTheme } from '../../theme';
import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
Comment on lines +2 to 5
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most custom components use the Grid2 wrapper exported from ../../base (and src/base/index.tsx re-exports it). Consider switching this Grid2 import to ../../base to keep custom code aligned with the base-component abstraction.

Suggested change
import { Grid2, TableCell } from '@mui/material';
import { MUIDataTableColumn } from '@sistent/mui-datatables';
import { styled, useTheme } from '../../theme';
import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
import { TableCell } from '@mui/material';
import { MUIDataTableColumn } from '@sistent/mui-datatables';
import { styled, useTheme } from '../../theme';
import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary.js';
import { Grid2 } from '../../base';

Copilot uses AI. Check for mistakes.
Expand Down
3 changes: 1 addition & 2 deletions src/custom/TransferModal/TransferList/style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Grid2 from '@mui/material/Grid2';
import { styled } from '@mui/material';
import { Grid2, styled } from '@mui/material';
import { Button, Chip, Paper, Typography } from '../../../base';
Comment on lines +1 to 2
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This module already pulls UI primitives from ../../../base. For consistency and to reduce direct dependency on MUI exports in custom components, consider using the Grid2 wrapper from ../../../base here as well (keeping styled from @mui/material if needed).

Suggested change
import { Grid2, styled } from '@mui/material';
import { Button, Chip, Paper, Typography } from '../../../base';
import { styled } from '@mui/material';
import { Button, Chip, Paper, Typography, Grid2 } from '../../../base';

Copilot uses AI. Check for mistakes.

export const StyledChip = styled(Chip)(({ theme }) => ({
Expand Down
3 changes: 1 addition & 2 deletions src/custom/Workspaces/WorkspaceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Grid2 from '@mui/material/Grid2';
import { useTheme } from '@mui/material';
import { Grid2, useTheme } from '@mui/material';
import { Backdrop, CircularProgress } from '../../base';
Comment on lines +1 to 2
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this file we already import components from ../../base (e.g., Backdrop/CircularProgress). To keep Grid usage consistent with the rest of the codebase and avoid direct coupling to MUI’s export surface, consider importing Grid2 from ../../base instead of @mui/material.

Suggested change
import { Grid2, useTheme } from '@mui/material';
import { Backdrop, CircularProgress } from '../../base';
import { useTheme } from '@mui/material';
import { Backdrop, CircularProgress, Grid2 } from '../../base';

Copilot uses AI. Check for mistakes.

import { getRelativeTime } from '../../utils';
Expand Down