@mui/material 5.8.0 → 5.8.3

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.0
+/** @license MUI v5.8.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/styles/CssVarsProvider.js

@@ -23,6 +23,9 @@ const {
   getInitColorSchemeScript
 } = (0, _system.unstable_createCssVarsProvider)({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'

package/node/styles/createMixins.js

@@ -13,8 +13,10 @@ function createMixins(breakpoints, mixins) {
   return (0, _extends2.default)({
     toolbar: {
       minHeight: 56,
-      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
-        minHeight: 48
+      [breakpoints.up('xs')]: {
+        '@media (orientation: landscape)': {
+          minHeight: 48
+        }
       },
       [breakpoints.up('sm')]: {
         minHeight: 64

package/node/styles/experimental_extendTheme.js

@@ -17,11 +17,21 @@ var _system = require("@mui/system");
 
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 
+var _Paper = require("../Paper/Paper");
+
 const _excluded = ["colorSchemes"],
       _excluded2 = ["palette"];
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+
+  const overlay = (0, _Paper.getOverlayAlpha)(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
 
 function extendTheme(options = {}, ...args) {
-  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
+  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
     colorSchemes: colorSchemesInput = {}
@@ -50,14 +60,16 @@ function extendTheme(options = {}, ...args) {
         opacity: (0, _extends2.default)({
           placeholder: 0.42,
           inputTouchBottomLine: 0.42
-        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity)
+        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
+        overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
       dark: (0, _extends2.default)({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: (0, _extends2.default)({
           placeholder: 0.5,
           inputTouchBottomLine: 0.7
-        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity)
+        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
+        overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
     })
   });
@@ -107,6 +119,11 @@ function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = (0, _system.colorChannel)(colors.secondary);
+      } // Action colors: action.activeChannel
+
+
+      if (colors.active) {
+        palette[color].activeChannel = (0, _system.colorChannel)(colors.active);
       }
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.8.0",
+  "version": "5.8.3",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,13 +46,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.81",
-    "@mui/system": "^5.8.0",
+    "@mui/base": "5.0.0-alpha.84",
+    "@mui/system": "^5.8.3",
     "@mui/types": "^7.1.3",
     "@mui/utils": "^5.8.0",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.11",
+    "csstype": "^3.1.0",
     "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1",
     "react-is": "^17.0.2",

package/styles/CssVarsProvider.js

@@ -11,6 +11,9 @@ const {
   getInitColorSchemeScript
 } = createCssVarsProvider({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'

package/styles/createMixins.js

@@ -3,8 +3,10 @@ export default function createMixins(breakpoints, mixins) {
   return _extends({
     toolbar: {
       minHeight: 56,
-      [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
-        minHeight: 48
+      [breakpoints.up('xs')]: {
+        '@media (orientation: landscape)': {
+          minHeight: 48
+        }
       },
       [breakpoints.up('sm')]: {
         minHeight: 64

package/styles/createPalette.d.ts

@@ -125,7 +125,7 @@ export interface PaletteWithChannels {
   text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string };
   divider: TypeDivider;
   dividerChannel: TypeDivider;
-  action: TypeAction & { disabledChannel: string };
+  action: TypeAction & { disabledChannel: string; activeChannel: string };
   background: TypeBackground;
   getContrastText: (background: string) => string;
   augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;

package/styles/experimental_extendTheme.d.ts

@@ -39,6 +39,34 @@ export interface Opacity {
   inputTouchBottomLine: number;
 }
 
+export type Overlays = [
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+  string | undefined,
+];
+
 export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   mixins?: MixinsOptions;
   components?: Components<BaseTheme>;
@@ -47,6 +75,7 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
     {
       palette?: PaletteOptions;
       opacity?: Partial<Opacity>;
+      overlays?: Overlays;
     }
   >;
   shadows?: Shadows;
@@ -60,6 +89,7 @@ interface BaseTheme extends SystemTheme {
   mixins: Mixins;
   palette: Palette;
   opacity: Opacity;
+  overlays: Overlays;
   shadows: Shadows;
   transitions: Transitions;
   typography: Typography;

package/styles/experimental_extendTheme.js

@@ -5,8 +5,17 @@ const _excluded = ["colorSchemes"],
 import { deepmerge } from '@mui/utils';
 import { colorChannel } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
+import { getOverlayAlpha } from '../Paper/Paper';
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
 export default function extendTheme(options = {}, ...args) {
-  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
+  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
     colorSchemes: colorSchemesInput = {}
@@ -36,14 +45,16 @@ export default function extendTheme(options = {}, ...args) {
         opacity: _extends({
           placeholder: 0.42,
           inputTouchBottomLine: 0.42
-        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity)
+        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
+        overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
       dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: _extends({
           placeholder: 0.5,
           inputTouchBottomLine: 0.7
-        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity)
+        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
+        overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
     })
   });
@@ -94,6 +105,11 @@ export default function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
+      } // Action colors: action.activeChannel
+
+
+      if (colors.active) {
+        palette[color].activeChannel = colorChannel(colors.active);
       }
     });
   });

package/styles/index.d.ts

@@ -32,6 +32,7 @@ export {
   duration,
   easing,
 } from './createTransitions';
+export { Mixins } from './createMixins';
 export {
   Direction,
   Breakpoint,

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 {};