@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.2

package/styles/experimental_extendTheme.d.ts

@@ -334,6 +334,7 @@ export interface ThemeVars {
   overlays: Overlays;
   shadows: Shadows;
   shape: Theme['shape'];
+  spacing: string;
   zIndex: ZIndex;
 }
 
@@ -431,6 +432,7 @@ export interface CssVarsTheme extends ColorSystem {
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
   generateThemeVars: () => ThemeVars;
   generateStyleSheets: () => Array<Record<string, any>>;
+  generateSpacing: () => Theme['spacing'];
 
   // Default theme tokens
   spacing: Theme['spacing'];

package/styles/experimental_extendTheme.js

@@ -3,7 +3,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"],
   _excluded2 = ["palette"];
 import deepmerge from '@mui/utils/deepmerge';
-import { unstable_createGetCssVar as systemCreateGetCssVar, unstable_prepareCssVars as prepareCssVars } from '@mui/system';
+import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
+import { createUnarySpacing } from '@mui/system/spacing';
+import { prepareCssVars } from '@mui/system/cssVars';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
@@ -42,6 +44,21 @@ function setColorChannel(obj, key) {
     obj[`${key}Channel`] = safeColorChannel(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === 'number') {
+    return `${spacingInput}px`;
+  }
+  if (typeof spacingInput === 'string') {
+    return spacingInput;
+  }
+  if (typeof spacingInput === 'function') {
+    return getSpacingVal(spacingInput(1));
+  }
+  if (Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return '8px';
+}
 const silent = fn => {
   try {
     return fn();
@@ -100,7 +117,8 @@ export default function extendTheme(options = {}, ...args) {
         }, colorSchemesInput.dark?.opacity),
         overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
       })
-    })
+    }),
+    spacing: getSpacingVal(input.spacing)
   });
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
@@ -309,7 +327,11 @@ export default function extendTheme(options = {}, ...args) {
   });
   theme.generateThemeVars = generateThemeVars;
   theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
+    return createSpacing(input.spacing, createUnarySpacing(this));
+  };
   theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
+  theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = _extends({}, defaultSxConfig, input?.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {

package/styles/overrides.d.ts

@@ -77,6 +77,7 @@ import { PaginationItemClassKey } from '../PaginationItem';
 import { PaperClassKey } from '../Paper';
 import { PopoverClassKey } from '../Popover';
 import { RadioClassKey } from '../Radio';
+import { RadioGroupClassKey } from '../RadioGroup';
 import { RatingClassKey } from '../Rating';
 import { ScopedCssBaselineClassKey } from '../ScopedCssBaseline';
 import { SelectClassKey } from '../Select';
@@ -222,6 +223,7 @@ export interface ComponentNameToClassKey {
   MuiPopover: PopoverClassKey;
   MuiPopper: PopperClassKey;
   MuiRadio: RadioClassKey;
+  MuiRadioGroup: RadioGroupClassKey;
   MuiRating: RatingClassKey;
   MuiScopedCssBaseline: ScopedCssBaselineClassKey;
   MuiSelect: SelectClassKey;