@mui/material 5.8.7 → 5.9.2

package/node/Slider/Slider.js

@@ -314,7 +314,6 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  transformOrigin: 'bottom center',
   transform: 'translateY(-100%) scale(0)',
   position: 'absolute',
   backgroundColor: (theme.vars || theme).palette.grey[600],
@@ -326,6 +325,7 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   padding: '0.25rem 0.75rem'
 }, ownerState.orientation === 'horizontal' && {
   top: '-10px',
+  transformOrigin: 'bottom center',
   '&:before': {
     position: 'absolute',
     content: '""',
@@ -338,7 +338,8 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   }
 }, ownerState.orientation === 'vertical' && {
   right: '30px',
-  top: '25px',
+  top: '24px',
+  transformOrigin: 'right center',
   '&:before': {
     position: 'absolute',
     content: '""',

package/node/Stack/Stack.js

@@ -67,7 +67,8 @@ const style = ({
   theme
 }) => {
   let styles = (0, _extends2.default)({
-    display: 'flex'
+    display: 'flex',
+    flexDirection: 'column'
   }, (0, _system.handleBreakpoints)({
     theme
   }, (0, _system.unstable_resolveBreakpointValues)({
@@ -95,6 +96,17 @@ const style = ({
       base
     });
 
+    if (typeof directionValues === 'object') {
+      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+        const directionValue = directionValues[breakpoint];
+
+        if (!directionValue) {
+          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+
     const styleFromPropValue = (propValue, breakpoint) => {
       return {
         '& > :not(style) + :not(style)': {

package/node/Tabs/Tabs.js

@@ -802,7 +802,9 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes
    * Determines the color of the indicator.
    * @default 'primary'
    */
-  indicatorColor: _propTypes.default.oneOf(['primary', 'secondary']),
+  indicatorColor: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['primary', 'secondary']), _propTypes.default.string]),
 
   /**
    * Callback fired when the value changes.

package/node/Unstable_Grid2/Grid2.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Unstable_Grid = require("@mui/system/Unstable_Grid");
+
+var _styles = require("../styles");
+
+const Grid2 = (0, _Unstable_Grid.createGrid)({
+  createStyledComponent: (0, _styles.styled)('div', {
+    name: 'MuiGrid2',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  componentName: 'MuiGrid2',
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  useThemeProps: inProps => (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiGrid2'
+  })
+});
+process.env.NODE_ENV !== "production" ? Grid2.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = Grid2;
+exports.default = _default;

package/node/Unstable_Grid2/Grid2Props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/Unstable_Grid2/grid2Classes.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getGrid2UtilityClass = getGrid2UtilityClass;
+
+var _base = require("@mui/base");
+
+function getGrid2UtilityClass(slot) {
+  return (0, _base.generateUtilityClass)('MuiGrid2', slot);
+}
+
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const grid2Classes = (0, _base.generateUtilityClasses)('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth', // spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+var _default = grid2Classes;
+exports.default = _default;

package/node/Unstable_Grid2/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  grid2Classes: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "grid2Classes", {
+  enumerable: true,
+  get: function () {
+    return _grid2Classes.default;
+  }
+});
+
+var _Grid = _interopRequireDefault(require("./Grid2"));
+
+var _Grid2Props = require("./Grid2Props");
+
+Object.keys(_Grid2Props).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Grid2Props[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Grid2Props[key];
+    }
+  });
+});
+
+var _grid2Classes = _interopRequireWildcard(require("./grid2Classes"));
+
+Object.keys(_grid2Classes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _grid2Classes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _grid2Classes[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.7
+/** @license MUI v5.9.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,6 +62,7 @@ var _exportNames = {
   FormHelperText: true,
   FormLabel: true,
   Grid: true,
+  Unstable_Grid2: true,
   Grow: true,
   Hidden: true,
   Icon: true,
@@ -918,6 +919,12 @@ Object.defineProperty(exports, "Typography", {
     return _Typography.default;
   }
 });
+Object.defineProperty(exports, "Unstable_Grid2", {
+  enumerable: true,
+  get: function () {
+    return _Unstable_Grid.default;
+  }
+});
 Object.defineProperty(exports, "Zoom", {
   enumerable: true,
   get: function () {
@@ -1692,6 +1699,20 @@ Object.keys(_Grid).forEach(function (key) {
   });
 });
 
+var _Unstable_Grid = _interopRequireWildcard(require("./Unstable_Grid2"));
+
+Object.keys(_Unstable_Grid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Unstable_Grid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Unstable_Grid[key];
+    }
+  });
+});
+
 var _Grow = _interopRequireWildcard(require("./Grow"));
 
 Object.keys(_Grow).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.8.7",
+  "version": "5.9.2",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,15 +46,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.88",
-    "@mui/system": "^5.8.7",
-    "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.8.6",
+    "@mui/base": "5.0.0-alpha.91",
+    "@mui/system": "^5.9.2",
+    "@mui/types": "^7.1.5",
+    "@mui/utils": "^5.9.1",
     "@types/react-transition-group": "^4.4.5",
-    "clsx": "^1.2.0",
+    "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
-    "react-is": "^17.0.2",
+    "react-is": "^18.2.0",
     "react-transition-group": "^4.4.2"
   },
   "sideEffects": false,

package/styles/components.d.ts

@@ -228,6 +228,11 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiGrid'];
     variants?: ComponentsVariants['MuiGrid'];
   };
+  MuiGrid2?: {
+    defaultProps?: ComponentsProps['MuiGrid2'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiGrid2'];
+    variants?: ComponentsVariants['MuiGrid2'];
+  };
   MuiImageList?: {
     defaultProps?: ComponentsProps['MuiImageList'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiImageList'];

package/styles/createTheme.d.ts

@@ -9,7 +9,7 @@ import { Components } from './components';
 
 export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   mixins?: MixinsOptions;
-  components?: Components<BaseTheme>;
+  components?: Components<Omit<Theme, 'components'>>;
   palette?: PaletteOptions;
   shadows?: Shadows;
   transitions?: TransitionsOptions;

package/styles/experimental_extendTheme.d.ts

@@ -231,6 +231,7 @@ export interface CssVarsPalette {
   error: PaletteColorChannel;
   info: PaletteColorChannel;
   success: PaletteColorChannel;
+  warning: PaletteColorChannel;
   text: PaletteTextChannel;
   dividerChannel: string;
   action: PaletteActionChannel;
@@ -274,7 +275,7 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
 }
 
 // should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
-interface ThemeVars {
+export interface ThemeVars {
   palette: Omit<
     ColorSystem['palette'],
     | 'colorScheme'
@@ -287,13 +288,92 @@ interface ThemeVars {
   opacity: Opacity;
   overlays: Overlays;
   shadows: Shadows;
-  zIndex: ZIndex;
   shape: Theme['shape'];
+  zIndex: ZIndex;
 }
 
-// shut off automatic exporting for the `ThemeVars` above
+type Split<T, K extends keyof T = keyof T> = K extends string | number
+  ? { [k in K]: Exclude<T[K], undefined> }
+  : never;
+
+type ConcatDeep<T> = T extends Record<string | number, infer V>
+  ? keyof T extends string | number
+    ? V extends string | number
+      ? keyof T
+      : keyof V extends string | number
+      ? `${keyof T}-${ConcatDeep<Split<V>>}`
+      : never
+    : never
+  : never;
+
+/**
+ * Does not work for these cases:
+ * - { borderRadius: string | number } // the value can't be a union
+ * - { shadows: [string, string, ..., string] } // the value can't be an array
+ */
+type NormalizeVars<T> = ConcatDeep<Split<T>>;
+
+// shut off automatic exporting for the Generics above
 export {};
 
+export interface ThemeCssVarOverrides {}
+
+export type ThemeCssVar = OverridableStringUnion<
+  | NormalizeVars<Omit<ThemeVars, 'overlays' | 'shadows' | 'shape'>>
+  | 'shape-borderRadius'
+  | 'shadows-0'
+  | 'shadows-1'
+  | 'shadows-2'
+  | 'shadows-3'
+  | 'shadows-4'
+  | 'shadows-5'
+  | 'shadows-6'
+  | 'shadows-7'
+  | 'shadows-8'
+  | 'shadows-9'
+  | 'shadows-10'
+  | 'shadows-11'
+  | 'shadows-12'
+  | 'shadows-13'
+  | 'shadows-14'
+  | 'shadows-15'
+  | 'shadows-16'
+  | 'shadows-17'
+  | 'shadows-18'
+  | 'shadows-19'
+  | 'shadows-20'
+  | 'shadows-21'
+  | 'shadows-22'
+  | 'shadows-23'
+  | 'shadows-24'
+  | 'overlays-0'
+  | 'overlays-1'
+  | 'overlays-2'
+  | 'overlays-3'
+  | 'overlays-4'
+  | 'overlays-5'
+  | 'overlays-6'
+  | 'overlays-7'
+  | 'overlays-8'
+  | 'overlays-9'
+  | 'overlays-10'
+  | 'overlays-11'
+  | 'overlays-12'
+  | 'overlays-13'
+  | 'overlays-14'
+  | 'overlays-15'
+  | 'overlays-16'
+  | 'overlays-17'
+  | 'overlays-18'
+  | 'overlays-19'
+  | 'overlays-20'
+  | 'overlays-21'
+  | 'overlays-22'
+  | 'overlays-23'
+  | 'overlays-24',
+  ThemeCssVarOverrides
+>;
+
 /**
  * Theme properties generated by extendTheme and CssVarsProvider
  */
@@ -301,10 +381,7 @@ export interface CssVarsTheme extends ColorSystem {
   colorSchemes: Record<SupportedColorScheme, ColorSystem>;
   cssVarPrefix: string;
   vars: ThemeVars;
-  getCssVar: <CustomVar extends string = never>(
-    field: string | CustomVar,
-    ...vars: Array<string | CustomVar>
-  ) => string;
+  getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
 }
 

package/styles/index.d.ts

@@ -6,7 +6,10 @@ export {
   Theme,
 } from './createTheme';
 export { default as adaptV4Theme, DeprecatedThemeOptions } from './adaptV4Theme';
+export { Shadows } from './shadows';
+export { ZIndex } from './zIndex';
 export {
+  CommonColors,
   Palette,
   PaletteColor,
   PaletteColorOptions,
@@ -97,8 +100,11 @@ export { default as experimental_extendTheme } from './experimental_extendTheme'
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,
+  ColorSystem,
+  CssVarsPalette,
   Opacity,
   Overlays,
+  PaletteAlert,
   PaletteActionChannel,
   PaletteAppBar,
   PaletteAvatar,
@@ -107,8 +113,10 @@ export type {
   PaletteCommonChannel,
   PaletteFilledInput,
   PaletteLinearProgress,
+  PaletteSkeleton,
   PaletteSlider,
   PaletteSnackbarContent,
+  PaletteSpeedDialAction,
   PaletteStepConnector,
   PaletteStepContent,
   PaletteSwitch,
@@ -117,4 +125,7 @@ export type {
   PaletteTooltip,
   CssVarsThemeOptions,
   CssVarsTheme,
+  ThemeVars,
+  ThemeCssVar,
+  ThemeCssVarOverrides,
 } from './experimental_extendTheme';

package/styles/overrides.d.ts

@@ -44,6 +44,7 @@ import { FormGroupClassKey } from '../FormGroup';
 import { FormHelperTextClassKey } from '../FormHelperText';
 import { FormLabelClassKey } from '../FormLabel';
 import { GridClassKey } from '../Grid';
+import { Grid2Slot } from '../Unstable_Grid2';
 import { IconButtonClassKey } from '../IconButton';
 import { IconClassKey } from '../Icon';
 import { ImageListClassKey } from '../ImageList';
@@ -133,7 +134,7 @@ export type ComponentsOverrides<Theme = unknown> = {
     OverridesStyleRules<ComponentNameToClassKey[Name], Name, Theme>
   >;
 } & {
-  MuiCssBaseline?: CSSObject | string;
+  MuiCssBaseline?: CSSObject | string | ((theme: Theme) => CSSInterpolation);
 };
 
 export interface ComponentNameToClassKey {
@@ -181,6 +182,7 @@ export interface ComponentNameToClassKey {
   MuiFormHelperText: FormHelperTextClassKey;
   MuiFormLabel: FormLabelClassKey;
   MuiGrid: GridClassKey;
+  MuiGrid2: Grid2Slot;
   MuiIcon: IconClassKey;
   MuiIconButton: IconButtonClassKey;
   MuiImageList: ImageListClassKey;

package/styles/props.d.ts

@@ -43,6 +43,7 @@ import { FormGroupProps } from '../FormGroup';
 import { FormHelperTextProps } from '../FormHelperText';
 import { FormLabelProps } from '../FormLabel';
 import { GridProps } from '../Grid';
+import { Grid2Props } from '../Unstable_Grid2';
 import { IconButtonProps } from '../IconButton';
 import { IconProps } from '../Icon';
 import { ImageListProps } from '../ImageList';
@@ -167,6 +168,7 @@ export interface ComponentsPropsList {
   MuiFormHelperText: FormHelperTextProps;
   MuiFormLabel: FormLabelProps;
   MuiGrid: GridProps;
+  MuiGrid2: Grid2Props;
   MuiImageList: ImageListProps;
   MuiImageListItem: ImageListItemProps;
   MuiImageListItemBar: ImageListItemBarProps;

package/themeCssVarsAugmentation/index.d.ts

@@ -15,16 +15,12 @@ declare module '@mui/material/styles' {
   // The palette must be extended in each node.
   interface Theme extends Omit<CssVarsTheme, 'palette'> {}
 
-  // The extended Palette should be in sync with `extendTheme`
-  interface Palette extends CssVarsPalette {}
-}
-
-declare module '@mui/material/styles/createPalette' {
+  // Extend the type that will be used in palette
   interface CommonColors extends PaletteCommonChannel {}
-
   interface PaletteColor extends PaletteColorChannel {}
-
   interface TypeText extends PaletteTextChannel {}
-
   interface TypeAction extends PaletteActionChannel {}
+
+  // The extended Palette should be in sync with `extendTheme`
+  interface Palette extends CssVarsPalette {}
 }