@mui/material 5.5.2 → 5.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.5.2",
+  "version": "5.6.1",
   "private": false,
   "author": "MUI Team",
   "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "https://mui.com/",
+  "homepage": "https://mui.com/material-ui/getting-started/installation/",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui"
@@ -29,9 +29,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -46,10 +46,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.73",
-    "@mui/system": "^5.5.2",
+    "@mui/base": "5.0.0-alpha.76",
+    "@mui/system": "^5.6.1",
     "@mui/types": "^7.1.3",
-    "@mui/utils": "^5.4.4",
+    "@mui/utils": "^5.6.1",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.0.11",

package/styles/CssVarsProvider.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { CreateCssVarsProviderResult } from '@mui/system';
+import { ThemeOptions, SupportedColorScheme } from './experimental_extendTheme';
+import { PaletteWithChannels } from './createPalette';
+
+export interface ThemeInput extends Omit<ThemeOptions, 'colorSchemes'> {
+  colorSchemes: Partial<
+    Record<
+      SupportedColorScheme,
+      {
+        palette: PaletteWithChannels;
+      }
+    >
+  >;
+}
+
+type MDCreateCssVarsProviderResult = CreateCssVarsProviderResult<SupportedColorScheme, ThemeInput>;
+
+declare const useColorScheme: MDCreateCssVarsProviderResult['useColorScheme'];
+declare const getInitColorSchemeScript: MDCreateCssVarsProviderResult['getInitColorSchemeScript'];
+
+/**
+ * This component is an experimental Theme Provider that generates CSS variabels out of the theme tokens.
+ * It should preferably be used at **the root of your component tree**.
+ */
+declare const Experimental_CssVarsProvider: MDCreateCssVarsProviderResult['CssVarsProvider'];
+
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/CssVarsProvider.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
+import experimental_extendTheme from './experimental_extendTheme';
+import createTypography from './createTypography';
+const defaultTheme = experimental_extendTheme();
+const {
+  CssVarsProvider: Experimental_CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = createCssVarsProvider({
+  theme: defaultTheme,
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  prefix: 'md',
+  resolveTheme: theme => {
+    const newTheme = _extends({}, theme, {
+      typography: createTypography(theme.palette, theme.typography)
+    });
+
+    return newTheme;
+  },
+  shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+});
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/ThemeProvider.d.ts

@@ -10,7 +10,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](/customization/theming/#themeprovider)
+ * - [ThemeProvider API](/material-ui/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(
   props: ThemeProviderProps<T>,

package/styles/createPalette.d.ts

@@ -98,6 +98,32 @@ export interface Palette {
   augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
 }
 
+export interface Channels {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+}
+
+export interface PaletteWithChannels {
+  common: CommonColors;
+  mode: PaletteMode;
+  contrastThreshold: number;
+  tonalOffset: PaletteTonalOffset;
+  primary: PaletteColor & Channels;
+  secondary: PaletteColor & Channels;
+  error: PaletteColor & Channels;
+  warning: PaletteColor & Channels;
+  info: PaletteColor & Channels;
+  success: PaletteColor & Channels;
+  grey: Color;
+  text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string };
+  divider: TypeDivider;
+  action: TypeAction & { disabledChannel: string };
+  background: TypeBackground;
+  getContrastText: (background: string) => string;
+  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
+}
+
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
 
 export interface PaletteOptions {

package/styles/createTheme.d.ts

@@ -32,7 +32,7 @@ interface BaseTheme extends SystemTheme {
 export {};
 
 /**
- * Our [TypeScript guide on theme customization](https://mui.com/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
  */
 export interface Theme extends BaseTheme {
   components?: Components<BaseTheme>;

package/styles/experimental_extendTheme.d.ts

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Mixins, MixinsOptions } from './createMixins';
+import { Palette, PaletteOptions } from './createPalette';
+import { Typography, TypographyOptions } from './createTypography';
+import { Shadows } from './shadows';
+import { Transitions, TransitionsOptions } from './createTransitions';
+import { ZIndex, ZIndexOptions } from './zIndex';
+import { Components } from './components';
+
+/**
+ * default MD color-schemes
+ */
+export type DefaultColorScheme = 'light' | 'dark';
+
+/**
+ * The application can add more color-scheme by extending this interface via module augmentation
+ *
+ * Ex.
+ * declare module @mui/material/styles {
+ *   interface ColorSchemeOverrides {
+ *     foo: true;
+ *   }
+ * }
+ *
+ * // SupportedColorScheme = 'light' | 'dark' | 'foo';
+ */
+export interface ColorSchemeOverrides {}
+export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
+
+/**
+ * All color-schemes that the application has
+ */
+export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
+
+export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
+  mixins?: MixinsOptions;
+  components?: Components<BaseTheme>;
+  // palette?: PaletteOptions;
+  colorSchemes?: Record<SupportedColorScheme, { palette: PaletteOptions }>;
+  shadows?: Shadows;
+  transitions?: TransitionsOptions;
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+  opacity?: {
+    active?: number;
+    hover?: number;
+    selected?: number;
+    disabled?: number;
+    focus?: number;
+  };
+}
+
+interface BaseTheme extends SystemTheme {
+  mixins: Mixins;
+  palette: Palette;
+  shadows: Shadows;
+  transitions: Transitions;
+  typography: Typography;
+  zIndex: ZIndex;
+  unstable_strictMode?: boolean;
+  colorSchemes: Record<string, { palette: Palette }>;
+  opacity: {
+    active: number;
+    hover: number;
+    selected: number;
+    disabled: number;
+    focus: number;
+  };
+}
+
+// shut off automatic exporting for the `BaseTheme` above
+export {};
+
+/**
+ * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ */
+export interface Theme extends BaseTheme {
+  components?: Components<BaseTheme>;
+}
+
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function experimental_extendTheme(options?: ThemeOptions, ...args: object[]): Theme;

package/styles/experimental_extendTheme.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["colorSchemes", "opacity"],
+      _excluded2 = ["palette"];
+import { deepmerge } from '@mui/utils';
+import { colorChannel } from '@mui/system';
+import createThemeWithoutVars from './createTheme';
+import createPalette from './createPalette';
+export const defaultOpacity = {
+  active: 0.54,
+  hover: 0.04,
+  selected: 0.08,
+  disabled: 0.26,
+  focus: 0.12
+};
+
+function createTheme(options = {}, ...args) {
+  var _colorSchemesInput$li, _colorSchemesInput$da;
+
+  const {
+    colorSchemes: colorSchemesInput = {},
+    opacity: opacityInput = {}
+  } = options,
+        input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
+
+
+  let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
+    palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+  })),
+      {
+    palette: lightPalette
+  } = _createThemeWithoutVa,
+      muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
+
+  const {
+    palette: darkPalette
+  } = createThemeWithoutVars({
+    palette: _extends({
+      mode: 'dark'
+    }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+  });
+  colorSchemesInput.light = {
+    palette: lightPalette
+  };
+  colorSchemesInput.dark = {
+    palette: darkPalette
+  };
+  const colorSchemes = {};
+  Object.keys(colorSchemesInput).forEach(key => {
+    const palette = createPalette(colorSchemesInput[key].palette);
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      if (colors.main) {
+        palette[color].mainChannel = colorChannel(colors.main);
+      }
+
+      if (colors.light) {
+        palette[color].lightChannel = colorChannel(colors.light);
+      }
+
+      if (colors.dark) {
+        palette[color].darkChannel = colorChannel(colors.dark);
+      }
+
+      if (colors.primary) {
+        palette[color].primaryChannel = colorChannel(colors.primary);
+      }
+
+      if (colors.secondary) {
+        palette[color].secondaryChannel = colorChannel(colors.secondary);
+      }
+
+      if (colors.disabled) {
+        palette[color].disabledChannel = colorChannel(colors.disabled);
+      }
+    });
+    colorSchemes[key] = {
+      palette
+    };
+  });
+
+  const opacity = _extends({}, defaultOpacity, opacityInput);
+
+  muiTheme.colorSchemes = colorSchemes;
+  muiTheme.opacity = opacity;
+  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  return muiTheme;
+}
+
+export default createTheme;

package/styles/index.d.ts

@@ -89,3 +89,8 @@ export interface StyledComponentProps<ClassKey extends string = string> {
 export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
+
+export * from './CssVarsProvider';
+
+export { default as experimental_extendTheme } from './experimental_extendTheme';
+export * from './experimental_extendTheme';

package/styles/index.js

@@ -16,4 +16,6 @@ export { StyledEngineProvider } from '@mui/system'; // The legacy utilities from
 
 export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
-export { default as withTheme } from './withTheme';
+export { default as withTheme } from './withTheme';
+export * from './CssVarsProvider';
+export { default as experimental_extendTheme } from './experimental_extendTheme';

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};