[Grid] Prevent crash if spacing is set to zero in theme

docs/data/material/customization/density/DensityTool.js

@@ -25,9 +25,20 @@ export default function DensityTool() {
   };
 
   const handleSpacingChange = (event, value) => {
+    let spacing = value || +event.target.value;
+
+    //  If the entered value is greater than maxSpacing, setting up maxSpacing as value
+    if (spacing > maxSpacing) {
+      spacing = maxSpacing;
+    }
+    //  If the entered value is less than minSpacing, setting up minSpacing as value
+    else if (spacing < minSpacing) {
+      spacing = minSpacing;
+    }
+
     dispatch({
       type: 'SET_SPACING',
-      payload: value || +event.target.value,
+      payload: spacing,
     });
   };
 
@@ -71,7 +82,11 @@ export default function DensityTool() {
           </Typography>
         </Grid>
         <Grid item>
-          <IconButton aria-label={t('increaseSpacing')} onClick={decreaseSpacing}>
+          <IconButton
+            aria-label={t('increaseSpacing')}
+            onClick={decreaseSpacing}
+            disabled={spacingUnit === minSpacing}
+          >
             <DecreaseIcon />
           </IconButton>
           <Input
@@ -86,7 +101,11 @@ export default function DensityTool() {
               'aria-labelledby': 'input-slider',
             }}
           />
-          <IconButton aria-label={t('decreaseSpacing')} onClick={increaseSpacing}>
+          <IconButton
+            aria-label={t('decreaseSpacing')}
+            onClick={increaseSpacing}
+            disabled={spacingUnit === maxSpacing}
+          >
             <IncreaseIcon />
           </IconButton>
         </Grid>

packages/mui-material/src/Grid/Grid.js

@@ -181,7 +181,8 @@ export function generateRowGap({ theme, ownerState }) {
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      // Issue - #33771 - Code crashes from Demo DensityTool screen when we set it 0
+      if (zeroValueBreakpointKeys && zeroValueBreakpointKeys.includes(breakpoint)) {
         return {};
       }
 
@@ -227,7 +228,8 @@ export function generateColumnGap({ theme, ownerState }) {
         };
       }
 
-      if (zeroValueBreakpointKeys.includes(breakpoint)) {
+      // Issue - #33771 - Code crashes from Demo DensityTool screen when we set it 0
+      if (zeroValueBreakpointKeys && zeroValueBreakpointKeys.includes(breakpoint)) {
         return {};
       }