Upgrade MUI X Data Grid to v8

.changeset/great-pants-create.md

@@ -0,0 +1,11 @@
+---
+"@comet/admin-generator": major
+"@comet/admin": major
+"@comet/brevo-admin": major
+"@comet/cms-admin": major
+"@comet/eslint-config": major
+---
+
+Bump MUI X Data Grid peer dependency to v8
+
+See the migration guide for information on how to upgrade.

demo/admin/package.json

@@ -38,8 +38,8 @@
         "@fontsource-variable/roboto-flex": "^5.2.8",
         "@mui/material": "^7.3.7",
         "@mui/system": "^7.3.7",
-        "@mui/x-data-grid": "^7.29.12",
-        "@mui/x-data-grid-pro": "^7.29.12",
+        "@mui/x-data-grid": "^8.27.5",
+        "@mui/x-data-grid-pro": "^8.27.5",
         "@mui/x-date-pickers": "^7.29.4",
         "@mui/x-license": "^7.29.1",
         "change-case": "^5.4.4",

demo/admin/src/news/blocks/NewsListBlock.tsx

@@ -66,10 +66,11 @@ export const NewsListBlock: BlockInterface<NewsListBlockData, State, NewsListBlo
                     loading={loading}
                     checkboxSelection
                     keepNonExistentRowsSelected
-                    rowSelectionModel={state.ids}
+                    rowSelectionModel={{ type: "include", ids: new Set(state.ids) }}
                     onRowSelectionModelChange={(newSelection) => {
-                        updateState({ ids: newSelection as string[] });
+                        updateState({ ids: Array.from(newSelection.ids) as string[] });
                     }}
+                    disableRowSelectionExcludeModel
                 />
             </Box>
         );

demo/admin/src/products/ManufacturerFilter.tsx

@@ -2,7 +2,7 @@ import { gql, useQuery } from "@apollo/client";
 import { ClearInputAdornment } from "@comet/admin";
 import Autocomplete from "@mui/material/Autocomplete";
 import { type GridFilterInputValueProps, type GridFilterOperator, useGridRootProps } from "@mui/x-data-grid-pro";
-import { useCallback, useState } from "react";
+import { type ChangeEvent, useCallback, useState } from "react";
 import { useIntl } from "react-intl";
 import { useDebounce } from "use-debounce";
 
@@ -72,8 +72,8 @@ function ManufacturerFilter({ item, applyValue, apiRef }: GridFilterInputValuePr
                 <rootProps.slots.baseTextField
                     {...params}
                     placeholder={intl.formatMessage({ id: "manufacturer-filter.placeholder", defaultMessage: "Choose a manufacturer" })}
-                    value={search ? search : null}
-                    onChange={(event) => {
+                    value={search}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
                         setSearch(event.target.value);
                     }}
                     label={apiRef.current.getLocaleText("filterPanelInputLabel")}

demo/admin/src/products/ManufacturersGrid.tsx

@@ -7,6 +7,7 @@ import {
     FillSpace,
     type GridColDef,
     GridFilterButton,
+    GridToolbarQuickFilter,
     muiGridFilterToGql,
     muiGridSortToGql,
     StackLink,
@@ -17,7 +18,7 @@ import {
 } from "@comet/admin";
 import { Add as AddIcon, Edit, Info } from "@comet/admin-icons";
 import { IconButton } from "@mui/material";
-import { DataGridPro, GridColumnHeaderTitle, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro, GridColumnHeaderTitle } from "@mui/x-data-grid-pro";
 import {
     type GQLDeleteManufacturerMutation,
     type GQLDeleteManufacturerMutationVariables,
@@ -161,6 +162,7 @@ export function ManufacturersGrid() {
             slots={{
                 toolbar: ManufacturersGridToolbar,
             }}
+            showToolbar
         />
     );
 }

demo/admin/src/products/ProductCategoryFilter.tsx

@@ -2,7 +2,7 @@ import { gql, useQuery } from "@apollo/client";
 import { ClearInputAdornment } from "@comet/admin";
 import Autocomplete from "@mui/material/Autocomplete";
 import { type GridFilterInputValueProps, type GridFilterOperator, useGridRootProps } from "@mui/x-data-grid-pro";
-import { useCallback, useState } from "react";
+import { type ChangeEvent, useCallback, useState } from "react";
 import { useIntl } from "react-intl";
 import { useDebounce } from "use-debounce";
 
@@ -73,8 +73,8 @@ function ProductCategoryFilter({ item, applyValue, apiRef }: GridFilterInputValu
                     {...params}
                     autoComplete="off"
                     placeholder={intl.formatMessage({ id: "productCategory.placeholder", defaultMessage: "Choose a Product Category" })}
-                    value={search ? search : null}
-                    onChange={(event) => {
+                    value={search}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
                         setSearch(event.target.value);
                     }}
                     label={apiRef.current.getLocaleText("filterPanelInputLabel")}

demo/admin/src/products/ProductVariantsGrid.tsx

@@ -5,6 +5,7 @@ import {
     FillSpace,
     type GridColDef,
     GridFilterButton,
+    GridToolbarQuickFilter,
     muiGridFilterToGql,
     muiGridSortToGql,
     StackLink,
@@ -14,7 +15,7 @@ import {
 } from "@comet/admin";
 import { Add as AddIcon, Edit } from "@comet/admin-icons";
 import { IconButton } from "@mui/material";
-import { DataGridPro, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro } from "@mui/x-data-grid-pro";
 import { FormattedMessage } from "react-intl";
 
 import {
@@ -124,6 +125,7 @@ export function ProductVariantsGrid({ productId }: { productId: string }) {
             slots={{
                 toolbar: ProductVariantsGridToolbar,
             }}
+            showToolbar
         />
     );
 }

demo/admin/src/products/ProductsGrid.tsx

@@ -14,6 +14,7 @@ import {
     type GridColDef,
     GridColumnsButton,
     GridFilterButton,
+    GridToolbarQuickFilter,
     messages,
     muiGridFilterToGql,
     muiGridSortToGql,
@@ -32,7 +33,6 @@ import {
     GridFilterInputSingleSelect,
     type GridRowSelectionModel,
     type GridSlotsComponent,
-    GridToolbarQuickFilter,
 } from "@mui/x-data-grid-pro";
 import { ProductCategoryFilterOperators } from "@src/products/ProductCategoryFilter";
 import { useMemo, useState } from "react";
@@ -81,7 +81,7 @@ function ProductsGridToolbar({ exportApi, selectionModel }: ProductsGridToolbarP
                         label: "Publish",
                         icon: <Online htmlColor={theme.palette.success.main} />,
                         onClick: () => {
-                            for (const id of selectionModel) {
+                            for (const id of Array.from(selectionModel.ids)) {
                                 client.mutate<GQLUpdateProductStatusMutation, GQLUpdateProductStatusMutationVariables>({
                                     mutation: updateProductStatusMutation,
                                     variables: { id: id as string, status: "Published" },
@@ -97,7 +97,7 @@ function ProductsGridToolbar({ exportApi, selectionModel }: ProductsGridToolbarP
                         label: "Unpublish",
                         icon: <Disabled />,
                         onClick: () => {
-                            for (const id of selectionModel) {
+                            for (const id of Array.from(selectionModel.ids)) {
                                 client.mutate<GQLUpdateProductStatusMutation, GQLUpdateProductStatusMutationVariables>({
                                     mutation: updateProductStatusMutation,
                                     variables: { id: id as string, status: "Unpublished" },
@@ -110,7 +110,7 @@ function ProductsGridToolbar({ exportApi, selectionModel }: ProductsGridToolbarP
                         },
                     },
                 ]}
-                selectionSize={selectionModel.length}
+                selectionSize={selectionModel.ids.size}
             />
             <Button responsive startIcon={<AddIcon />} component={StackLink} pageName="add" payload="add">
                 <FormattedMessage id="products.newProduct" defaultMessage="New Product" />
@@ -125,7 +125,10 @@ export function ProductsGrid() {
     const client = useApolloClient();
     const intl = useIntl();
     const theme = useTheme();
-    const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+    const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>({
+        type: "include",
+        ids: new Set([]),
+    });
 
     const columns = useMemo((): GridColDef<GQLProductsListManualFragment>[] => {
         return [
@@ -389,6 +392,8 @@ export function ProductsGrid() {
             onRowSelectionModelChange={(selectionModel) => {
                 setSelectionModel(selectionModel);
             }}
+            disableRowSelectionExcludeModel
+            showToolbar
         />
     );
 }

demo/admin/src/products/categories/ProductCategoriesGrid.tsx

@@ -177,6 +177,7 @@ export function ProductCategoriesGrid() {
             rowReordering
             onRowOrderChange={handleRowOrderChange}
             hideFooterPagination
+            showToolbar
         />
     );
 }

demo/admin/src/products/generator/ManufacturerFilter.tsx

@@ -3,7 +3,7 @@ import { ClearInputAdornment } from "@comet/admin";
 import { ChevronDown } from "@comet/admin-icons";
 import Autocomplete from "@mui/material/Autocomplete";
 import { type GridFilterInputValueProps, type GridFilterOperator, useGridRootProps } from "@mui/x-data-grid-pro";
-import { useCallback, useState } from "react";
+import { type ChangeEvent, useCallback, useState } from "react";
 import { useIntl } from "react-intl";
 import { useDebounce } from "use-debounce";
 
@@ -72,10 +72,9 @@ function ManufacturerFilter({ item, applyValue, apiRef }: GridFilterInputValuePr
                 <rootProps.slots.baseTextField
                     {...params}
                     autoComplete="off"
-                    variant="standard"
                     placeholder={intl.formatMessage({ id: "manufacturer-filter.placeholder", defaultMessage: "Choose a manufacturer" })}
-                    value={search ? search : null}
-                    onChange={(event) => {
+                    value={search}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
                         setSearch(event.target.value);
                     }}
                     label={apiRef.current.getLocaleText("filterPanelInputLabel")}

demo/admin/src/products/highlights/ProductHighlightsGrid.tsx

@@ -103,6 +103,7 @@ export function ProductHighlightsGrid() {
             slots={{
                 toolbar: ProductHighlightsGridToolbar as GridSlotsComponent["toolbar"],
             }}
+            showToolbar
         />
     );
 }

demo/admin/src/products/tags/ProductTagsGrid.tsx

@@ -6,6 +6,7 @@ import {
     FillSpace,
     type GridColDef,
     GridFilterButton,
+    GridToolbarQuickFilter,
     muiGridFilterToGql,
     muiGridSortToGql,
     StackLink,
@@ -15,7 +16,7 @@ import {
 } from "@comet/admin";
 import { Add as AddIcon, Edit as EditIcon } from "@comet/admin-icons";
 import { IconButton } from "@mui/material";
-import { DataGridPro, type GridSlotsComponent, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
+import { DataGridPro, type GridSlotsComponent } from "@mui/x-data-grid-pro";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import {
@@ -124,6 +125,7 @@ export function ProductTagsGrid() {
             slots={{
                 toolbar: ProductTagsGridToolbar as GridSlotsComponent["toolbar"],
             }}
+            showToolbar
         />
     );
 }