@mui/material 7.3.8 → 7.3.10

package/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -14,29 +14,29 @@ export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttribut
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ToggleButtonGroupClasses>;
+  classes?: Partial<ToggleButtonGroupClasses> | undefined;
   /**
    * The color of the button when it is selected.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
-  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ToggleButtonGroupPropsColorOverrides>;
+  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ToggleButtonGroupPropsColorOverrides> | undefined;
   /**
    * If `true`, only allow one of the child ToggleButton values to be selected.
    * @default false
    */
-  exclusive?: boolean;
+  exclusive?: boolean | undefined;
   /**
    * If `true`, the component is disabled. This implies that all ToggleButton children will be disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the button group will take up the full width of its container.
    * @default false
    */
-  fullWidth?: boolean;
+  fullWidth?: boolean | undefined;
   /**
    * Callback fired when the value changes.
    *
@@ -45,21 +45,21 @@ export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttribut
    * this is a single value; when false an array of selected values. If no value
    * is selected and `exclusive` is true the value is null; when false an empty array.
    */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  onChange?: ((event: React.MouseEvent<HTMLElement>, value: any) => void) | undefined;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: 'horizontal' | 'vertical' | undefined;
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonGroupPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonGroupPropsSizeOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The currently selected value within the group or an array of selected
    * values when `exclusive` is false.
@@ -73,10 +73,10 @@ export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttribut
  *
  * Demos:
  *
- * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
+ * - [Toggle Button](https://v7.mui.com/material-ui/react-toggle-button/)
  *
  * API:
  *
- * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
+ * - [ToggleButtonGroup API](https://v7.mui.com/material-ui/api/toggle-button-group/)
  */
 export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

package/ToggleButtonGroup/ToggleButtonGroupContext.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import type { ToggleButtonGroupProps } from "./ToggleButtonGroup.js";
 interface ToggleButtonGroupContextType {
-  className?: string;
-  onChange?: ToggleButtonGroupProps['onChange'];
-  value?: ToggleButtonGroupProps['value'];
-  size?: ToggleButtonGroupProps['size'];
-  fullWidth?: ToggleButtonGroupProps['fullWidth'];
-  color?: ToggleButtonGroupProps['color'];
-  disabled?: ToggleButtonGroupProps['disabled'];
+  className?: string | undefined;
+  onChange?: ToggleButtonGroupProps['onChange'] | undefined;
+  value?: ToggleButtonGroupProps['value'] | undefined;
+  size?: ToggleButtonGroupProps['size'] | undefined;
+  fullWidth?: ToggleButtonGroupProps['fullWidth'] | undefined;
+  color?: ToggleButtonGroupProps['color'] | undefined;
+  disabled?: ToggleButtonGroupProps['disabled'] | undefined;
 }
 /**
  * @ignore - internal component.

package/Toolbar/Toolbar.d.ts

@@ -14,21 +14,21 @@ export interface ToolbarOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ToolbarClasses>;
+  classes?: Partial<ToolbarClasses> | undefined;
   /**
    * If `true`, disables gutter padding.
    * @default false
    */
-  disableGutters?: boolean;
+  disableGutters?: boolean | undefined;
   /**
    * The variant to use.
    * @default 'regular'
    */
-  variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides>;
+  variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface ToolbarTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & ToolbarOwnProps;
@@ -38,14 +38,14 @@ export interface ToolbarTypeMap<AdditionalProps = {}, RootComponent extends Reac
  *
  * Demos:
  *
- * - [App Bar](https://mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://v7.mui.com/material-ui/react-app-bar/)
  *
  * API:
  *
- * - [Toolbar API](https://mui.com/material-ui/api/toolbar/)
+ * - [Toolbar API](https://v7.mui.com/material-ui/api/toolbar/)
  */
 declare const Toolbar: OverridableComponent<ToolbarTypeMap>;
 export type ToolbarProps<RootComponent extends React.ElementType = ToolbarTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ToolbarTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Toolbar;

package/Tooltip/Tooltip.d.ts

@@ -59,7 +59,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * If `true`, adds an arrow to the tooltip.
    * @default false
    */
-  arrow?: boolean;
+  arrow?: boolean | undefined;
   /**
    * Tooltip reference element.
    */
@@ -67,7 +67,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TooltipClasses>;
+  classes?: Partial<TooltipClasses> | undefined;
   /**
    * The components used for each slot inside.
    *
@@ -76,11 +76,11 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * @default {}
    */
   components?: {
-    Popper?: React.ElementType<PopperProps>;
-    Transition?: React.ElementType;
-    Tooltip?: React.ElementType;
-    Arrow?: React.ElementType;
-  };
+    Popper?: React.ElementType<PopperProps> | undefined;
+    Transition?: React.ElementType | undefined;
+    Tooltip?: React.ElementType | undefined;
+    Arrow?: React.ElementType | undefined;
+  } | undefined;
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
@@ -90,111 +90,111 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * @default {}
    */
   componentsProps?: {
-    popper?: Partial<PopperProps> & TooltipComponentsPropsOverrides;
-    transition?: TransitionProps & TooltipComponentsPropsOverrides;
-    tooltip?: React.HTMLProps<HTMLDivElement> & MUIStyledCommonProps & TooltipComponentsPropsOverrides;
-    arrow?: React.HTMLProps<HTMLSpanElement> & MUIStyledCommonProps & TooltipComponentsPropsOverrides;
-  };
+    popper?: (Partial<PopperProps> & TooltipComponentsPropsOverrides) | undefined;
+    transition?: (TransitionProps & TooltipComponentsPropsOverrides) | undefined;
+    tooltip?: (React.HTMLProps<HTMLDivElement> & MUIStyledCommonProps & TooltipComponentsPropsOverrides) | undefined;
+    arrow?: (React.HTMLProps<HTMLSpanElement> & MUIStyledCommonProps & TooltipComponentsPropsOverrides) | undefined;
+  } | undefined;
   /**
    * Set to `true` if the `title` acts as an accessible description.
    * By default the `title` acts as an accessible label for the child.
    * @default false
    */
-  describeChild?: boolean;
+  describeChild?: boolean | undefined;
   /**
    * Do not respond to focus-visible events.
    * @default false
    */
-  disableFocusListener?: boolean;
+  disableFocusListener?: boolean | undefined;
   /**
    * Do not respond to hover events.
    * @default false
    */
-  disableHoverListener?: boolean;
+  disableHoverListener?: boolean | undefined;
   /**
    * Makes a tooltip not interactive, i.e. it will close when the user
    * hovers over the tooltip before the `leaveDelay` is expired.
    * @default false
    */
-  disableInteractive?: boolean;
+  disableInteractive?: boolean | undefined;
   /**
    * Do not respond to long press touch events.
    * @default false
    */
-  disableTouchListener?: boolean;
+  disableTouchListener?: boolean | undefined;
   /**
    * The number of milliseconds to wait before showing the tooltip.
    * This prop won't impact the enter touch delay (`enterTouchDelay`).
    * @default 100
    */
-  enterDelay?: number;
+  enterDelay?: number | undefined;
   /**
    * The number of milliseconds to wait before showing the tooltip when one was already recently opened.
    * @default 0
    */
-  enterNextDelay?: number;
+  enterNextDelay?: number | undefined;
   /**
    * The number of milliseconds a user must touch the element before showing the tooltip.
    * @default 700
    */
-  enterTouchDelay?: number;
+  enterTouchDelay?: number | undefined;
   /**
    * If `true`, the tooltip follow the cursor over the wrapped element.
    * @default false
    */
-  followCursor?: boolean;
+  followCursor?: boolean | undefined;
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * The number of milliseconds to wait before hiding the tooltip.
    * This prop won't impact the leave touch delay (`leaveTouchDelay`).
    * @default 0
    */
-  leaveDelay?: number;
+  leaveDelay?: number | undefined;
   /**
    * The number of milliseconds after the user stops touching an element before hiding the tooltip.
    * @default 1500
    */
-  leaveTouchDelay?: number;
+  leaveTouchDelay?: number | undefined;
   /**
    * Callback fired when the component requests to be closed.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
-  onClose?: (event: React.SyntheticEvent | Event) => void;
+  onClose?: ((event: React.SyntheticEvent | Event) => void) | undefined;
   /**
    * Callback fired when the component requests to be open.
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
-  onOpen?: (event: React.SyntheticEvent) => void;
+  onOpen?: ((event: React.SyntheticEvent) => void) | undefined;
   /**
    * If `true`, the component is shown.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Tooltip placement.
    * @default 'bottom'
    */
-  placement?: PopperProps['placement'];
+  placement?: PopperProps['placement'] | undefined;
   /**
    * The component used for the popper.
    * @deprecated use the `slots.popper` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  PopperComponent?: React.JSXElementConstructor<PopperProps>;
+  PopperComponent?: React.JSXElementConstructor<PopperProps> | undefined;
   /**
    * Props applied to the [`Popper`](https://mui.com/material-ui/api/popper/) element.
    * @deprecated use the `slotProps.popper` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
-  PopperProps?: Partial<PopperProps>;
+  PopperProps?: Partial<PopperProps> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
@@ -206,14 +206,14 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    */
   TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
     children: React.ReactElement<unknown, any>;
-  }>;
+  }> | undefined;
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
-  TransitionProps?: TransitionProps;
+  TransitionProps?: TransitionProps | undefined;
 }
 export interface TooltipOwnerState extends TooltipProps {}
 
@@ -221,10 +221,10 @@ export interface TooltipOwnerState extends TooltipProps {}
  *
  * Demos:
  *
- * - [Tooltip](https://mui.com/material-ui/react-tooltip/)
+ * - [Tooltip](https://v7.mui.com/material-ui/react-tooltip/)
  *
  * API:
  *
- * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
+ * - [Tooltip API](https://v7.mui.com/material-ui/api/tooltip/)
  */
 export default function Tooltip(props: TooltipProps): React.JSX.Element;

package/Tooltip/Tooltip.js

@@ -456,9 +456,26 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   };
   const [, setChildIsFocusVisible] = React.useState(false);
   const handleBlur = event => {
-    if (!(0, _isFocusVisible.default)(event.target)) {
+    // Needed for https://github.com/mui/material-ui/issues/45373
+    const target = event?.target ?? childNode;
+    if (!target || !(0, _isFocusVisible.default)(target)) {
       setChildIsFocusVisible(false);
-      handleMouseLeave(event);
+
+      // InputBase can call onBlur() without an event when the input becomes disabled.
+      // Tooltip must not assume an event object exists.
+      const closeEvent = event ?? new Event('blur');
+
+      // `new Event('blur')` has `target/currentTarget === null`, but Tooltip's close logic
+      // (and user callbacks like onClose) may expect them to reference the anchor element.
+      if (!event && target) {
+        Object.defineProperty(closeEvent, 'target', {
+          value: target
+        });
+        Object.defineProperty(closeEvent, 'currentTarget', {
+          value: target
+        });
+      }
+      handleMouseLeave(closeEvent);
     }
   };
   const handleFocus = event => {

package/Typography/Typography.d.ts

@@ -12,7 +12,7 @@ export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
    * Set the text-align on the component.
    * @default 'inherit'
    */
-  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify' | undefined;
   /**
    * The content of the component.
    */
@@ -20,18 +20,18 @@ export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TypographyClasses>;
+  classes?: Partial<TypographyClasses> | undefined;
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    */
-  color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | `text${Capitalize<keyof TypeText>}`, TypographyPropsColorOverrides> | (string & {}); // to work with v5 color prop type which allows any string
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | `text${Capitalize<keyof TypeText>}`, TypographyPropsColorOverrides> | (string & {}) | undefined; // to work with v5 color prop type which allows any string
   /**
    * If `true`, the text will have a bottom margin.
    * @default false
    */
-  gutterBottom?: boolean;
+  gutterBottom?: boolean | undefined;
   /**
    * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
    *
@@ -39,22 +39,22 @@ export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
    * (the element needs to have a width in order to overflow).
    * @default false
    */
-  noWrap?: boolean;
+  noWrap?: boolean | undefined;
   /**
    * If `true`, the element will be a paragraph element.
    * @default false
    * @deprecated Use the `component` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  paragraph?: boolean;
+  paragraph?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * Applies the theme typography styles.
    * @default 'body1'
    */
-  variant?: OverridableStringUnion<TypographyVariant | 'inherit', TypographyPropsVariantOverrides>;
+  variant?: OverridableStringUnion<TypographyVariant | 'inherit', TypographyPropsVariantOverrides> | undefined;
   /**
    * The component maps the variant prop to a range of different HTML element types.
    * For instance, subtitle1 to `<h6>`.
@@ -74,7 +74,7 @@ export interface TypographyOwnProps extends Omit<SystemProps<Theme>, 'color'> {
    *   inherit: 'p',
    * }
    */
-  variantMapping?: Partial<Record<OverridableStringUnion<TypographyVariant | 'inherit', TypographyPropsVariantOverrides>, string>>;
+  variantMapping?: Partial<Record<OverridableStringUnion<TypographyVariant | 'inherit', TypographyPropsVariantOverrides>, string>> | undefined;
 }
 export interface TypographyTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> {
   props: AdditionalProps & TypographyOwnProps;
@@ -85,15 +85,16 @@ export interface TypographyTypeMap<AdditionalProps = {}, RootComponent extends R
  *
  * Demos:
  *
- * - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
- * - [Typography](https://mui.com/material-ui/react-typography/)
+ * - [Breadcrumbs](https://v7.mui.com/material-ui/react-breadcrumbs/)
+ * - [Menubar](https://v7.mui.com/material-ui/react-menubar/)
+ * - [Typography](https://v7.mui.com/material-ui/react-typography/)
  *
  * API:
  *
- * - [Typography API](https://mui.com/material-ui/api/typography/)
+ * - [Typography API](https://v7.mui.com/material-ui/api/typography/)
  */
 declare const Typography: OverridableComponent<TypographyTypeMap>;
 export type TypographyProps<RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<TypographyTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Typography;

package/Unstable_TrapFocus/FocusTrap.types.d.ts

@@ -9,7 +9,7 @@ export interface FocusTrapProps {
    * For instance, you can provide the "tabbable" npm dependency.
    * @param {HTMLElement} root
    */
-  getTabbable?: (root: HTMLElement) => ReadonlyArray<HTMLElement>;
+  getTabbable?: ((root: HTMLElement) => ReadonlyArray<HTMLElement>) | undefined;
   /**
    * This prop extends the `open` prop.
    * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.
@@ -19,13 +19,13 @@ export interface FocusTrapProps {
    *   return true;
    * }
    */
-  isEnabled?: () => boolean;
+  isEnabled?: (() => boolean) | undefined;
   /**
    * A single child content element.
    */
   children: React.ReactElement<{
-    onFocus?: React.FocusEventHandler;
-    ref?: React.RefCallback<any> | null;
+    onFocus?: React.FocusEventHandler | undefined;
+    ref?: React.RefCallback<any> | null | undefined;
   }>;
   /**
    * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
@@ -36,7 +36,7 @@ export interface FocusTrapProps {
    * accessible to assistive technologies, like screen readers.
    * @default false
    */
-  disableAutoFocus?: boolean;
+  disableAutoFocus?: boolean | undefined;
   /**
    * If `true`, the focus trap will not prevent focus from leaving the focus trap while open.
    *
@@ -44,11 +44,11 @@ export interface FocusTrapProps {
    * accessible to assistive technologies, like screen readers.
    * @default false
    */
-  disableEnforceFocus?: boolean;
+  disableEnforceFocus?: boolean | undefined;
   /**
    * If `true`, the focus trap will not restore focus to previously focused element once
    * focus trap is hidden or unmounted.
    * @default false
    */
-  disableRestoreFocus?: boolean;
+  disableRestoreFocus?: boolean | undefined;
 }

package/Zoom/Zoom.d.ts

@@ -6,7 +6,7 @@ export interface ZoomProps extends TransitionProps {
    * Set this to `false` to disable this behavior.
    * @default true
    */
-  appear?: boolean;
+  appear?: boolean | undefined;
   /**
    * A single child content element.
    */
@@ -15,12 +15,12 @@ export interface ZoomProps extends TransitionProps {
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
    */
-  easing?: TransitionProps['easing'];
+  easing?: TransitionProps['easing'] | undefined;
   /**
    * If `true`, the component will transition in.
    */
-  in?: boolean;
-  ref?: React.Ref<unknown>;
+  in?: boolean | undefined;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -29,21 +29,21 @@ export interface ZoomProps extends TransitionProps {
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  timeout?: TransitionProps['timeout'];
+  timeout?: TransitionProps['timeout'] | undefined;
 }
 
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](https://mui.com/material-ui/react-floating-action-button/#animation) component.
+ * [Button](https://v7.mui.com/material-ui/react-floating-action-button/#animation) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Transitions](https://v7.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Zoom API](https://mui.com/material-ui/api/zoom/)
+ * - [Zoom API](https://v7.mui.com/material-ui/api/zoom/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Zoom(props: ZoomProps): React.JSX.Element;

package/Zoom/Zoom.js

@@ -22,8 +22,18 @@ const styles = {
   },
   entered: {
     transform: 'none'
+  },
+  exiting: {
+    transform: 'scale(0)'
+  },
+  exited: {
+    transform: 'scale(0)'
   }
 };
+const hiddenStyles = {
+  transform: 'scale(0)',
+  visibility: 'hidden'
+};
 
 /**
  * The Zoom transition can be used for the floating variant of the
@@ -50,26 +60,12 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = _reactTransitionGroup.Transition,
     ...other
   } = props;
   const nodeRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
-  const normalizedTransitionCallback = callback => maybeIsAppearing => {
-    if (callback) {
-      const node = nodeRef.current;
-
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (maybeIsAppearing === undefined) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = (0, _utils.normalizedTransitionCallback)(nodeRef, onEntering);
+  const handleEnter = (0, _utils.normalizedTransitionCallback)(nodeRef, (node, isAppearing) => {
     (0, _utils.reflow)(node); // So the animation always start from the start.
 
     const transitionProps = (0, _utils.getTransitionProps)({
@@ -79,15 +75,14 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = (0, _utils.normalizedTransitionCallback)(nodeRef, onEntered);
+  const handleExiting = (0, _utils.normalizedTransitionCallback)(nodeRef, onExiting);
+  const handleExit = (0, _utils.normalizedTransitionCallback)(nodeRef, node => {
     const transitionProps = (0, _utils.getTransitionProps)({
       style,
       timeout,
@@ -95,20 +90,24 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = (0, _utils.normalizedTransitionCallback)(nodeRef, node => {
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = next => {
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -125,14 +124,9 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = (0, _utils.getTransitionChildStyle)(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
-        style: {
-          transform: 'scale(0)',
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-          ...styles[state],
-          ...style,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });