@mui/material 5.9.2 → 5.10.1

package/node/Chip/chipClasses.js

@@ -12,6 +12,6 @@ function getChipUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiChip', slot);
 }
 
-const chipClasses = (0, _base.generateUtilityClasses)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'focusVisible']);
+const chipClasses = (0, _base.generateUtilityClasses)('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
 var _default = chipClasses;
 exports.default = _default;

package/node/Grid/Grid.js

@@ -155,6 +155,32 @@ function generateDirection({
     return output;
   });
 }
+/**
+ * Extracts zero value breakpoint keys before a non-zero value breakpoint key.
+ * @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
+ * @returns [xs, sm]
+ */
+
+
+function extractZeroValueBreakpointKeys({
+  breakpoints,
+  values
+}) {
+  let nonZeroKey = '';
+  Object.keys(values).forEach(key => {
+    if (nonZeroKey !== '') {
+      return;
+    }
+
+    if (values[key] !== 0) {
+      nonZeroKey = key;
+    }
+  });
+  const sortedBreakpointKeysByValue = Object.keys(breakpoints).sort((a, b) => {
+    return breakpoints[a] - breakpoints[b];
+  });
+  return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
+}
 
 function generateRowGap({
   theme,
@@ -171,9 +197,20 @@ function generateRowGap({
       values: rowSpacing,
       breakpoints: theme.breakpoints.values
     });
+    let zeroValueBreakpointKeys;
+
+    if (typeof rowSpacingValues === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: rowSpacingValues
+      });
+    }
+
     styles = (0, _system.handleBreakpoints)({
       theme
-    }, rowSpacingValues, propValue => {
+    }, rowSpacingValues, (propValue, breakpoint) => {
+      var _zeroValueBreakpointK;
+
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -185,7 +222,16 @@ function generateRowGap({
         };
       }
 
-      return {};
+      if ((_zeroValueBreakpointK = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK.includes(breakpoint)) {
+        return {};
+      }
+
+      return {
+        marginTop: 0,
+        [`& > .${_gridClasses.default.item}`]: {
+          paddingTop: 0
+        }
+      };
     });
   }
 
@@ -207,9 +253,20 @@ function generateColumnGap({
       values: columnSpacing,
       breakpoints: theme.breakpoints.values
     });
+    let zeroValueBreakpointKeys;
+
+    if (typeof columnSpacingValues === 'object') {
+      zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
+        breakpoints: theme.breakpoints.values,
+        values: columnSpacingValues
+      });
+    }
+
     styles = (0, _system.handleBreakpoints)({
       theme
-    }, columnSpacingValues, propValue => {
+    }, columnSpacingValues, (propValue, breakpoint) => {
+      var _zeroValueBreakpointK2;
+
       const themeSpacing = theme.spacing(propValue);
 
       if (themeSpacing !== '0px') {
@@ -222,7 +279,17 @@ function generateColumnGap({
         };
       }
 
-      return {};
+      if ((_zeroValueBreakpointK2 = zeroValueBreakpointKeys) != null && _zeroValueBreakpointK2.includes(breakpoint)) {
+        return {};
+      }
+
+      return {
+        width: '100%',
+        marginLeft: 0,
+        [`& > .${_gridClasses.default.item}`]: {
+          paddingLeft: 0
+        }
+      };
     });
   }
 

package/node/InputBase/InputBase.js

@@ -81,13 +81,14 @@ const useUtilityClasses = ownerState => {
     fullWidth,
     hiddenLabel,
     multiline,
+    readOnly,
     size,
     startAdornment,
     type
   } = ownerState;
   const slots = {
-    root: ['root', `color${(0, _capitalize.default)(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel'],
-    input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd']
+    root: ['root', `color${(0, _capitalize.default)(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+    input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
   };
   return (0, _base.unstable_composeClasses)(slots, _inputBaseClasses.getInputBaseUtilityClass, classes);
 };

package/node/InputBase/inputBaseClasses.js

@@ -12,6 +12,6 @@ function getInputBaseUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiInputBase', slot);
 }
 
-const inputBaseClasses = (0, _base.generateUtilityClasses)('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
+const inputBaseClasses = (0, _base.generateUtilityClasses)('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 var _default = inputBaseClasses;
 exports.default = _default;

package/node/Select/SelectInput.js

@@ -533,7 +533,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onFocus: onFocus
     }, SelectDisplayProps, {
       ownerState: ownerState,
-      className: (0, _clsx.default)(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
+      className: (0, _clsx.default)(SelectDisplayProps.className, classes.select, className) // The id is required for proper a11y
       ,
       id: buttonId,
       children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue

package/node/Skeleton/Skeleton.js

@@ -111,6 +111,8 @@ const SkeletonRoot = (0, _styled.default)('span', {
     }
   }, ownerState.variant === 'circular' && {
     borderRadius: '50%'
+  }, ownerState.variant === 'rounded' && {
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.hasChildren && {
     '& > *': {
       visibility: 'hidden'
@@ -243,7 +245,7 @@ process.env.NODE_ENV !== "production" ? Skeleton.propTypes
    */
   variant: _propTypes.default
   /* @typescript-to-proptypes-ignore */
-  .oneOfType([_propTypes.default.oneOf(['circular', 'rectangular', 'text']), _propTypes.default.string]),
+  .oneOfType([_propTypes.default.oneOf(['circular', 'rectangular', 'rounded', 'text']), _propTypes.default.string]),
 
   /**
    * Width of the skeleton.

package/node/Skeleton/skeletonClasses.js

@@ -12,6 +12,6 @@ function getSkeletonUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiSkeleton', slot);
 }
 
-const skeletonClasses = (0, _base.generateUtilityClasses)('MuiSkeleton', ['root', 'text', 'rectangular', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
+const skeletonClasses = (0, _base.generateUtilityClasses)('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
 var _default = skeletonClasses;
 exports.default = _default;

package/node/Stack/Stack.js

@@ -121,6 +121,7 @@ const style = ({
     }, spacingValues, styleFromPropValue));
   }
 
+  styles = (0, _system.mergeBreakpointsInOrder)(theme.breakpoints, styles);
   return styles;
 };
 

package/node/StepLabel/StepLabel.js

@@ -52,7 +52,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', orientation, error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     label: ['label', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
-    iconContainer: ['iconContainer', alternativeLabel && 'alternativeLabel'],
+    iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     labelContainer: ['labelContainer']
   };
   return (0, _base.unstable_composeClasses)(slots, _stepLabelClasses.getStepLabelUtilityClass, classes);

package/node/TableCell/TableCell.js

@@ -235,7 +235,9 @@ process.env.NODE_ENV !== "production" ? TableCell.propTypes
    * Specify the size of the cell.
    * The prop defaults to the value (`'medium'`) inherited from the parent Table component.
    */
-  size: _propTypes.default.oneOf(['small', 'medium']),
+  size: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
 
   /**
    * Set aria-sort direction.
@@ -251,7 +253,9 @@ process.env.NODE_ENV !== "production" ? TableCell.propTypes
    * Specify the cell type.
    * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components.
    */
-  variant: _propTypes.default.oneOf(['body', 'footer', 'head'])
+  variant: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['body', 'footer', 'head']), _propTypes.default.string])
 } : void 0;
 var _default = TableCell;
 exports.default = _default;

package/node/Tooltip/Tooltip.js

@@ -219,7 +219,7 @@ const TooltipArrow = (0, _styled.default)('span', {
   /* = width / sqrt(2) = (length of the hypotenuse) */
   ,
   boxSizing: 'border-box',
-  color: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)` : (0, _system.alpha)(theme.palette.grey[700], 0.9),
+  color: theme.vars ? theme.vars.palette.Tooltip.bg : (0, _system.alpha)(theme.palette.grey[700], 0.9),
   '&::before': {
     content: '""',
     margin: 'auto',

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.2
+/** @license MUI v5.10.1
  *
  * 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/createTheme.js

@@ -40,6 +40,12 @@ function createTheme(options = {}, ...args) {
     typography: typographyInput = {}
   } = options,
         other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+
+  if (options.vars) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
+Please use another name.` : (0, _utils.formatMuiErrorMessage)(18));
+  }
+
   const palette = (0, _createPalette.default)(paletteInput);
   const systemTheme = (0, _system.createTheme)(options);
   let muiTheme = (0, _utils.deepmerge)(systemTheme, {

package/node/useScrollTrigger/useScrollTrigger.js

@@ -60,9 +60,13 @@ function useScrollTrigger(options = {}) {
 
     handleScroll(); // Re-evaluate trigger when dependencies change
 
-    target.addEventListener('scroll', handleScroll);
+    target.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
     return () => {
-      target.removeEventListener('scroll', handleScroll);
+      target.removeEventListener('scroll', handleScroll, {
+        passive: true
+      });
     }; // See Option 3. https://github.com/facebook/react/issues/14476#issuecomment-471199055
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [target, getTrigger, JSON.stringify(other)]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.9.2",
+  "version": "5.10.1",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,16 +46,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/base": "5.0.0-alpha.91",
-    "@mui/system": "^5.9.2",
+    "@mui/base": "5.0.0-alpha.93",
+    "@mui/core-downloads-tracker": "^5.10.1",
+    "@mui/system": "^5.10.1",
     "@mui/types": "^7.1.5",
-    "@mui/utils": "^5.9.1",
+    "@mui/utils": "^5.9.3",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "csstype": "^3.1.0",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
-    "react-transition-group": "^4.4.2"
+    "react-transition-group": "^4.4.5"
   },
   "sideEffects": false,
   "publishConfig": {

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/createTheme.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 import { deepmerge } from '@mui/utils';
 import { generateUtilityClass } from '@mui/base';
@@ -20,6 +21,11 @@ function createTheme(options = {}, ...args) {
   } = options,
         other = _objectWithoutPropertiesLoose(options, _excluded);
 
+  if (options.vars) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
+Please use another name.` : _formatMuiErrorMessage(18));
+  }
+
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);
   let muiTheme = deepmerge(systemTheme, {

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