@mui/material 5.9.0 → 5.9.1

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/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.9.0
+/** @license MUI v5.9.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5701,7 +5701,7 @@
   function createEmptyBreakpointObject(breakpointsInput = {}) {
     var _breakpointsInput$key;
 
-    const breakpointsInOrder = breakpointsInput == null ? void 0 : (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
+    const breakpointsInOrder = (_breakpointsInput$key = breakpointsInput.keys) == null ? void 0 : _breakpointsInput$key.reduce((acc, key) => {
       const breakpointStyleKey = breakpointsInput.up(key);
       acc[breakpointStyleKey] = {};
       return acc;
@@ -8601,14 +8601,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       flexWrap: ownerState.wrap
     }, {
       margin: `calc(var(--Grid-rowSpacing) / -2) calc(var(--Grid-columnSpacing) / -2)`
-    }, ownerState.nested ? {
+    }, ownerState.disableEqualOverflow && {
+      margin: `calc(var(--Grid-rowSpacing) * -1) 0px 0px calc(var(--Grid-columnSpacing) * -1)`
+    }, ownerState.nested ? _extends({
       padding: `calc(var(--Grid-nested-rowSpacing) / 2) calc(var(--Grid-nested-columnSpacing) / 2)`
-    } : {
+    }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
+      padding: `calc(var(--Grid-nested-rowSpacing)) 0px 0px calc(var(--Grid-nested-columnSpacing))`
+    }) : {
       '--Grid-nested-rowSpacing': 'var(--Grid-rowSpacing)',
       '--Grid-nested-columnSpacing': 'var(--Grid-columnSpacing)'
-    }) : {
+    }) : _extends({
       padding: `calc(var(--Grid-rowSpacing) / 2) calc(var(--Grid-columnSpacing) / 2)`
-    });
+    }, ownerState.disableEqualOverflow && {
+      padding: `calc(var(--Grid-rowSpacing)) 0px 0px calc(var(--Grid-columnSpacing))`
+    }));
   };
   const generateSizeClassNames = gridSize => {
     const classNames = [];
@@ -8645,7 +8651,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return [];
   };
 
-  const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing"];
+  const _excluded$2f = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing", "disableEqualOverflow"];
   const defaultTheme$4 = createTheme$1(); // widening Theme to any so that the consumer can own the theme structure.
 
   const defaultCreateStyledComponent = systemStyled('div', {
@@ -8670,6 +8676,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       componentName = 'MuiGrid'
     } = options;
     const NestedContext = /*#__PURE__*/React__namespace.createContext(false);
+    const OverflowContext = /*#__PURE__*/React__namespace.createContext(undefined);
 
     const useUtilityClasses = (ownerState, theme) => {
       const {
@@ -8687,13 +8694,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
     const Grid = /*#__PURE__*/React__namespace.forwardRef(function Grid(inProps, ref) {
-      var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin;
+      var _inProps$columns, _inProps$spacing, _ref, _inProps$rowSpacing, _ref2, _inProps$columnSpacin, _ref3, _disableEqualOverflow;
 
       const theme = useTheme$1();
       const themeProps = useThemeProps(inProps);
       const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
 
       const nested = React__namespace.useContext(NestedContext);
+      const overflow = React__namespace.useContext(OverflowContext);
 
       const {
         className,
@@ -8704,9 +8712,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         wrap = 'wrap',
         spacing: spacingProp = 0,
         rowSpacing: rowSpacingProp = spacingProp,
-        columnSpacing: columnSpacingProp = spacingProp
+        columnSpacing: columnSpacingProp = spacingProp,
+        disableEqualOverflow: themeDisableEqualOverflow
       } = props,
-            rest = _objectWithoutPropertiesLoose(props, _excluded$2f); // collect breakpoints related props because they can be custom from the theme.
+            rest = _objectWithoutPropertiesLoose(props, _excluded$2f); // Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
+
+
+      let disableEqualOverflow = themeDisableEqualOverflow;
+
+      if (nested && themeDisableEqualOverflow !== undefined) {
+        disableEqualOverflow = inProps.disableEqualOverflow;
+      } // collect breakpoints related props because they can be customized from the theme.
 
 
       const gridSize = {};
@@ -8736,7 +8752,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         rowSpacing,
         columnSpacing,
         gridSize,
-        gridOffset
+        gridOffset,
+        disableEqualOverflow: (_ref3 = (_disableEqualOverflow = disableEqualOverflow) != null ? _disableEqualOverflow : overflow) != null ? _ref3 : false,
+        // use context value if exists.
+        parentDisableEqualOverflow: overflow // for nested grid
+
       });
 
       const classes = useUtilityClasses(ownerState, theme);
@@ -8755,6 +8775,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         });
       }
 
+      if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow != null ? overflow : false)) {
+        // There are 2 possibilities that should wrap with the OverflowContext to communicate with the nested grids:
+        // 1. It is the root grid with `disableEqualOverflow`.
+        // 2. It is a nested grid with different `disableEqualOverflow` from the context.
+        result = /*#__PURE__*/jsxRuntime_1(OverflowContext.Provider, {
+          value: disableEqualOverflow,
+          children: result
+        });
+      }
+
       return result;
     });
     Grid.propTypes
@@ -8767,6 +8797,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       component: PropTypes.elementType,
       container: PropTypes.bool,
       direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+      disableEqualOverflow: PropTypes.bool,
       lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
       lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
       md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
@@ -9616,7 +9647,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         option
       });
 
-      if (!disableCloseOnSelect && !event.ctrlKey && !event.metaKey) {
+      if (!disableCloseOnSelect && (!event || !event.ctrlKey && !event.metaKey)) {
         handleClose(event, reason);
       }
 
@@ -19159,7 +19190,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         const {
           clientX,
           clientY
-        } = event.touches ? event.touches[0] : event;
+        } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
         rippleX = Math.round(clientX - rect.left);
         rippleY = Math.round(clientY - rect.top);
       }
@@ -42674,7 +42705,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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],
@@ -42686,6 +42716,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     padding: '0.25rem 0.75rem'
   }, ownerState.orientation === 'horizontal' && {
     top: '-10px',
+    transformOrigin: 'bottom center',
     '&:before': {
       position: 'absolute',
       content: '""',
@@ -42698,7 +42729,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.orientation === 'vertical' && {
     right: '30px',
-    top: '25px',
+    top: '24px',
+    transformOrigin: 'right center',
     '&:before': {
       position: 'absolute',
       content: '""',