Adapt to PigmentGrid changes

mui · Jun 28, 2024 · ca92841 · ca92841
1 parent e0397ce
commit ca92841
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/packages/mui-system/src/Unstable_Grid/createGrid.tsx b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
@@ -23,7 +23,9 @@ import {
   generateDirectionClasses,
 } from './gridGenerator';
 import { CreateMUIStyled } from '../createStyled';
-import { GridTypeMap, GridOwnerState, GridProps } from './GridProps';
+import { GridTypeMap, GridOwnerState, GridProps, GridOffset, GridSize } from './GridProps';
+import type { Breakpoint } from '../createTheme';
+import { Breakpoints, ResponsiveStyleValue } from '..';
 
 const defaultTheme = createTheme();
 
@@ -64,14 +66,41 @@ export default function createGrid(
         container && 'container',
         wrap !== 'wrap' && `wrap-xs-${String(wrap)}`,
         ...generateDirectionClasses(direction),
-        ...generateSizeClassNames(size, theme.breakpoints),
+        ...generateSizeClassNames(size),
         ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []),
       ],
     };
 
     return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
   };
 
+  function parseResponsiveProp<T extends GridSize | GridOffset>(
+    propValue: ResponsiveStyleValue<T>,
+    breakpoints: Breakpoints,
+    shouldUseValue: (val: T) => boolean = () => true,
+  ): { [key in Breakpoint]: T } {
+    const parsedProp = {} as { [key in Breakpoint]: T };
+
+    if (Array.isArray(propValue)) {
+      propValue.forEach((value, index) => {
+        if (value !== null && shouldUseValue(value) && breakpoints.keys[index]) {
+          parsedProp[breakpoints.keys[index]] = value;
+        }
+      });
+    } else if (typeof propValue === 'object') {
+      Object.keys(propValue).forEach((key) => {
+        const value = propValue[key];
+        if (value !== null && shouldUseValue(value)) {
+          parsedProp[key as Breakpoint] = value;
+        }
+      });
+    } else {
+      parsedProp[breakpoints.keys[0]] = propValue;
+    }
+
+    return parsedProp;
+  }
+
   const GridRoot = createStyledComponent<{
     ownerState: GridOwnerState;
   }>(
@@ -96,14 +125,16 @@ export default function createGrid(
       component = 'div',
       direction = 'row',
       wrap = 'wrap',
-      size = {},
-      offset = {},
+      size: sizeProp = {},
+      offset: offsetProp = {},
       spacing: spacingProp = 0,
       rowSpacing: rowSpacingProp = spacingProp,
       columnSpacing: columnSpacingProp = spacingProp,
       unstable_level: level = 0,
       ...rest
     } = props;
+    const size = parseResponsiveProp<GridSize>(sizeProp, theme.breakpoints, (val) => val !== false);
+    const offset = parseResponsiveProp<GridOffset>(offsetProp, theme.breakpoints);
 
     const columns = inProps.columns ?? (level ? undefined : columnsProp);
     const spacing = inProps.spacing ?? (level ? undefined : spacingProp);

diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts
@@ -202,28 +202,13 @@ export const generateGridStyles = ({ ownerState }: Props): {} => {
   };
 };
 
-export const generateSizeClassNames = (size: GridOwnerState['size'], breakpoints: Breakpoints) => {
+export const generateSizeClassNames = (size: GridOwnerState['size']) => {
   const classNames: string[] = [];
-
-  function isValidSizeValue(val?: GridSize | null) {
-    return val !== null && val !== undefined && val !== false;
-  }
-
-  if (Array.isArray(size)) {
-    size.forEach((value, index) => {
-      if (isValidSizeValue(value) && breakpoints.keys[index]) {
-        classNames.push(`grid-${breakpoints.keys[index]}-${String(value)}`);
-      }
-    });
-  } else if (typeof size === 'object') {
-    Object.entries(size).forEach(([key, value]) => {
-      if (isValidSizeValue(value) && breakpoints.keys.includes(key as Breakpoint)) {
-        classNames.push(`grid-${key}-${String(value)}`);
-      }
-    });
-  } else if (isValidSizeValue(size)) {
-    classNames.push(`grid-xs-${String(size)}`);
-  }
+  Object.entries(size).forEach(([key, value]) => {
+    if (value !== false && value !== undefined) {
+      classNames.push(`grid-${key}-${String(value)}`);
+    }
+  });
 
   return classNames;
 };