@mui/material 5.10.9 → 5.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.10.9",
+  "version": "5.10.10",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
-    "@mui/base": "5.0.0-alpha.101",
-    "@mui/core-downloads-tracker": "^5.10.9",
-    "@mui/system": "^5.10.9",
+    "@mui/base": "5.0.0-alpha.102",
+    "@mui/core-downloads-tracker": "^5.10.10",
+    "@mui/system": "^5.10.10",
     "@mui/types": "^7.2.0",
     "@mui/utils": "^5.10.9",
     "@types/react-transition-group": "^4.4.5",

package/styles/CssVarsProvider.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-import { SupportedColorScheme } from './experimental_extendTheme';
-declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
-    theme?: {
-        cssVarPrefix?: string | undefined;
-        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
-    } | undefined;
-    documentNode?: Document | null | undefined;
-    colorSchemeNode?: Document | HTMLElement | null | undefined;
-    colorSchemeSelector?: string | undefined;
-    storageWindow?: Window | null | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
-export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

package/styles/components.d.ts

@@ -480,6 +480,9 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiSvgIcon'];
     variants?: ComponentsVariants['MuiSvgIcon'];
   };
+  MuiSwipeableDrawer?: {
+    defaultProps?: ComponentsProps['MuiSwipeableDrawer'];
+  };
   MuiSwitch?: {
     defaultProps?: ComponentsProps['MuiSwitch'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiSwitch'];

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
- */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
-export default excludeVariablesFromRoot;
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+export default excludeVariablesFromRoot;

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

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.9
+/** @license MUI v5.10.10
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5896,7 +5896,7 @@
     }
 
     if (transform) {
-      value = transform(value);
+      value = transform(value, userValue);
     }
 
     return value;
@@ -6354,18 +6354,29 @@
   const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
   var grid$1 = grid;
 
+  function transform$1(value, userValue) {
+    if (userValue === 'grey') {
+      return userValue;
+    }
+
+    return value;
+  }
+
   const color = style$2({
     prop: 'color',
-    themeKey: 'palette'
+    themeKey: 'palette',
+    transform: transform$1
   });
   const bgcolor = style$2({
     prop: 'bgcolor',
     cssProperty: 'backgroundColor',
-    themeKey: 'palette'
+    themeKey: 'palette',
+    transform: transform$1
   });
   const backgroundColor = style$2({
     prop: 'backgroundColor',
-    themeKey: 'palette'
+    themeKey: 'palette',
+    transform: transform$1
   });
   const palette = compose(color, bgcolor, backgroundColor);
   var palette$1 = palette;
@@ -7745,7 +7756,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const parsedTheme = {};
     walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
-        if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+        if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
           // only create css & var if `shouldSkipGeneratingVar` return false
           const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
           Object.assign(css, {
@@ -14087,6 +14098,24 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var ModalUnstyled$1 = ModalUnstyled;
 
+  /**
+   * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+   *
+   * This component can be useful in a variety of situations:
+   *
+   * *   Escape hatch for broken dependencies not supporting SSR.
+   * *   Improve the time-to-first paint on the client by only rendering above the fold.
+   * *   Reduce the rendering time on the server.
+   * *   Under too heavy server load, you can turn on service degradation.
+   *
+   * Demos:
+   *
+   * - [No SSR](https://mui.com/base/react-no-ssr/)
+   *
+   * API:
+   *
+   * - [NoSsr API](https://mui.com/base/api/no-ssr/)
+   */
   function NoSsr(props) {
     const {
       children,
@@ -14115,7 +14144,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
     // ----------------------------------------------------------------------
 
     /**
@@ -17191,12 +17220,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var SvgIcon$1 = SvgIcon;
 
   function createSvgIcon(path, displayName) {
-    const Component = (props, ref) => /*#__PURE__*/jsxRuntime_1(SvgIcon$1, _extends({
-      "data-testid": `${displayName}Icon`,
-      ref: ref
-    }, props, {
-      children: path
-    }));
+    function Component(props, ref) {
+      return /*#__PURE__*/jsxRuntime_1(SvgIcon$1, _extends({
+        "data-testid": `${displayName}Icon`,
+        ref: ref
+      }, props, {
+        children: path
+      }));
+    }
 
     {
       // Need to set `displayName` on the inner component for React.memo.
@@ -37657,6 +37688,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         transformOrigin: getTransformOriginValue(elemTransformOrigin)
       };
     }, [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold]);
+    const [isPositioned, setIsPositioned] = React__namespace.useState(open);
     const setPositioningStyles = React__namespace.useCallback(() => {
       const element = paperRef.current;
 
@@ -37675,6 +37707,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
 
       element.style.transformOrigin = positioning.transformOrigin;
+      setIsPositioned(true);
     }, [getPositioningStyle]);
 
     const handleEntering = (element, isAppearing) => {
@@ -37685,6 +37718,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       setPositioningStyles();
     };
 
+    const handleExited = () => {
+      setIsPositioned(false);
+    };
+
     React__namespace.useEffect(() => {
       if (open) {
         setPositioningStyles();
@@ -37734,13 +37771,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         appear: true,
         in: open,
         onEntering: handleEntering,
+        onExited: handleExited,
         timeout: transitionDuration
       }, TransitionProps, {
         children: /*#__PURE__*/jsxRuntime_1(PopoverPaper, _extends({
           elevation: elevation
         }, PaperProps, {
           ref: handlePaperRef,
-          className: clsx(classes.paper, PaperProps.className),
+          className: clsx(classes.paper, PaperProps.className)
+        }, isPositioned ? undefined : {
+          style: _extends({}, PaperProps.style, {
+            opacity: 0
+          })
+        }, {
           ownerState: ownerState,
           children: children
         }))