@mui/material 6.0.0-alpha.2 → 6.0.0-alpha.4

package/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -9,14 +9,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from './toggleButtonGroupClasses';
 import ToggleButtonGroupContext from './ToggleButtonGroupContext';
 import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext';
 import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiToggleButtonGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
     disabled
   } = ownerState;
   const slots = {
-    root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
+    root: ['root', orientation, fullWidth && 'fullWidth'],
     grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
@@ -53,57 +53,69 @@ const ToggleButtonGroupRoot = styled('div', {
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${toggleButtonGroupClasses.grouped}`]: _extends({}, ownerState.orientation === 'horizontal' ? {
-    [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
-      borderLeft: 0,
-      marginLeft: 0
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderTop: 0,
+          marginTop: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginTop: -1,
+        borderTop: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderTop: '1px solid transparent'
+      }
     }
-  } : {
-    [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
-      borderTop: 0,
-      marginTop: 0
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
     }
-  })
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    marginLeft: -1,
-    borderLeft: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }
-} : {
-  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    marginTop: -1,
-    borderTop: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0
-  }
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
-    borderLeft: '1px solid transparent'
-  }
-} : {
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
-    borderTop: '1px solid transparent'
-  }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderLeft: 0,
+          marginLeft: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginLeft: -1,
+        borderLeft: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderLeft: '1px solid transparent'
+      }
+    }
+  }]
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
   const props = useThemeProps({

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -1,15 +1,21 @@
 export interface ToggleButtonGroupClasses {
     /** Styles applied to the root element. */
     root: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
     /** Styles applied to the root element if `orientation="vertical"`. */
     vertical: string;
     /** State class applied to the root element if `disabled={true}`. */
     disabled: string;
     /** Styles applied to the children. */
     grouped: string;
-    /** Styles applied to the children if `orientation="horizontal"`. */
+    /** Styles applied to the children if `orientation="horizontal"`.
+     *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedHorizontal: string;
-    /** Styles applied to the children if `orientation="vertical"`. */
+    /** Styles applied to the children if `orientation="vertical"`.
+     * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     groupedVertical: string;
     /** Styles applied to the root element if `fullWidth={true}`. */
     fullWidth: string;

package/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/Toolbar/Toolbar.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "component", "disableGutters", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -32,25 +32,41 @@ const ToolbarRoot = styled('div', {
     return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
-  alignItems: 'center'
-}, !ownerState.disableGutters && {
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  [theme.breakpoints.up('sm')]: {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3)
-  }
-}, ownerState.variant === 'dense' && {
-  minHeight: 48
+  alignItems: 'center',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
+      }
+    }
+  }, {
+    props: {
+      variant: 'dense'
+    },
+    style: {
+      minHeight: 48
+    }
+  }]
 }), ({
-  theme,
-  ownerState
-}) => ownerState.variant === 'regular' && theme.mixins.toolbar);
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'regular'
+    },
+    style: theme.mixins.toolbar
+  }]
+}));
 const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/Tooltip/Tooltip.js

@@ -417,8 +417,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
      * @param {KeyboardEvent} nativeEvent
      */
     function handleKeyDown(nativeEvent) {
-      // IE11, Edge (prior to using Bink?) use 'Esc'
-      if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+      if (nativeEvent.key === 'Escape') {
         handleClose(nativeEvent);
       }
     }

package/Typography/Typography.js

@@ -43,7 +43,9 @@ export const TypographyRoot = styled('span', {
   margin: 0
 }, ownerState.variant === 'inherit' && {
   // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-  font: 'inherit'
+  font: 'inherit',
+  lineHeight: 'inherit',
+  letterSpacing: 'inherit'
 }, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
   textAlign: ownerState.align
 }, ownerState.noWrap && {
@@ -116,9 +118,10 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
   return /*#__PURE__*/_jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
-    ownerState: ownerState,
     className: clsx(classes.root, className)
-  }, other));
+  }, other, {
+    ownerState: ownerState
+  }));
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.2
+ * @mui/material v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/AppBar/AppBar.js

@@ -77,7 +77,6 @@ const AppBarRoot = styled(Paper, {
       position: 'sticky'
     },
     style: {
-      // ⚠️ sticky is not supported by IE11.
       position: 'sticky',
       zIndex: (theme.vars || theme).zIndex.appBar,
       top: 0,

package/modern/Avatar/Avatar.js

@@ -88,7 +88,7 @@ const AvatarImg = styled('img', {
   width: '100%',
   height: '100%',
   textAlign: 'center',
-  // Handle non-square image. The property isn't supported by IE11.
+  // Handle non-square image.
   objectFit: 'cover',
   // Hide alt text.
   color: 'transparent',

package/modern/CardMedia/CardMedia.js

@@ -53,7 +53,6 @@ const CardMediaRoot = styled('div', {
       isImageComponent: true
     },
     style: {
-      // ⚠️ object-fit is not supported by IE11.
       objectFit: 'cover'
     }
   }]

package/modern/Checkbox/Checkbox.js

@@ -14,10 +14,11 @@ import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank
 import CheckBoxIcon from '../internal/svg-icons/CheckBox';
 import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
+import { createUseThemeProps, styled } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCheckbox');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,25 +43,55 @@ const CheckboxRoot = styled(SwitchBase, {
     return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${capitalize(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  variants: [{
+    props: {
+      color: 'default',
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${checkboxClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.action.disabled
-  }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color,
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
+        color: (theme.vars || theme).palette[color].main
+      },
+      [`&.${checkboxClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: false
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      '&:hover': {
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  }]
 }));
 const defaultCheckedIcon = /*#__PURE__*/_jsx(CheckBoxIcon, {});
 const defaultIcon = /*#__PURE__*/_jsx(CheckBoxOutlineBlankIcon, {});

package/modern/CircularProgress/CircularProgress.js

@@ -1,19 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { keyframes, css } from '@mui/system';
+import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCircularProgress');
 const SIZE = 44;
 const circularRotateKeyframe = keyframes`
   0% {
@@ -40,6 +39,16 @@ const circularDashKeyframe = keyframes`
     stroke-dashoffset: -125px;
   }
 `;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const rotateAnimation = typeof circularRotateKeyframe !== 'string' ? css`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== 'string' ? css`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -64,19 +73,32 @@ const CircularProgressRoot = styled('span', {
     return [styles.root, styles[ownerState.variant], styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
-  display: 'inline-block'
-}, ownerState.variant === 'determinate' && {
-  transition: theme.transitions.create('transform')
-}, ownerState.color !== 'inherit' && {
-  color: (theme.vars || theme).palette[ownerState.color].main
-}), ({
-  ownerState
-}) => ownerState.variant === 'indeterminate' && css`
-      animation: ${circularRotateKeyframe} 1.4s linear infinite;
-    `);
+}) => ({
+  display: 'inline-block',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('transform')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: rotateAnimation || {
+      animation: `${circularRotateKeyframe} 1.4s linear infinite`
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
+}));
 const CircularProgressSVG = styled('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg',
@@ -94,21 +116,35 @@ const CircularProgressCircle = styled('circle', {
     return [styles.circle, styles[`circle${capitalize(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
-  stroke: 'currentColor'
-}, ownerState.variant === 'determinate' && {
-  transition: theme.transitions.create('stroke-dashoffset')
-}, ownerState.variant === 'indeterminate' && {
-  // Some default value that looks fine waiting for the animation to kicks in.
-  strokeDasharray: '80px, 200px',
-  strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-}), ({
-  ownerState
-}) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink && css`
-      animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
-    `);
+}) => ({
+  stroke: 'currentColor',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('stroke-dashoffset')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: '80px, 200px',
+      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+    style: dashAnimation || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+    }
+  }]
+}));
 
 /**
  * ## ARIA

package/modern/Dialog/Dialog.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
+const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -171,6 +171,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       fullWidth = false,
       maxWidth = 'sm',
       onBackdropClick,
+      onClick,
       onClose,
       open,
       PaperComponent = Paper,
@@ -196,6 +197,10 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     backdropClick.current = event.target === event.currentTarget;
   };
   const handleBackdropClick = event => {
+    if (onClick) {
+      onClick(event);
+    }
+
     // Ignore the events not coming from the "backdrop".
     if (!backdropClick.current) {
       return;
@@ -334,6 +339,10 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the component requests to be closed.
    *