@mui/material 9.0.0-beta.1 → 9.0.1

package/Tooltip/Tooltip.mjs

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import useTimeout, { Timeout } from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from "../zero-styled/index.mjs";
@@ -56,17 +55,11 @@ const TooltipPopper = styled(Popper, {
   pointerEvents: 'none',
   variants: [{
     props: ({
-      ownerState
-    }) => !ownerState.disableInteractive,
-    style: {
-      pointerEvents: 'auto'
-    }
-  }, {
-    props: ({
+      ownerState,
       open
-    }) => !open,
+    }) => open && !ownerState.disableInteractive,
     style: {
-      pointerEvents: 'none'
+      pointerEvents: 'auto'
     }
   }, {
     props: ({
@@ -90,6 +83,8 @@ const TooltipPopper = styled(Popper, {
       [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineStart: 0,
+        marginInlineStart: '-0.71em',
         '&::before': {
           transformOrigin: '100% 100%'
         }
@@ -97,51 +92,13 @@ const TooltipPopper = styled(Popper, {
       [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
         height: '1em',
         width: '0.71em',
+        insetInlineEnd: 0,
+        marginInlineEnd: '-0.71em',
         '&::before': {
           transformOrigin: '0 0'
         }
       }
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="right"] .${tooltipClasses.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
-        right: 0,
-        marginRight: '-0.71em'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.arrow && !!ownerState.isRtl,
-    style: {
-      [`&[data-popper-placement*="left"] .${tooltipClasses.arrow}`]: {
-        left: 0,
-        marginLeft: '-0.71em'
-      }
-    }
   }]
 })));
 const TooltipTooltip = styled('div', {
@@ -167,10 +124,12 @@ const TooltipTooltip = styled('div', {
   wordWrap: 'break-word',
   fontWeight: theme.typography.fontWeightMedium,
   [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-    transformOrigin: 'right center'
+    transformOrigin: 'right center',
+    marginInlineEnd: '14px'
   },
   [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-    transformOrigin: 'left center'
+    transformOrigin: 'left center',
+    marginInlineStart: '14px'
   },
   [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
     transformOrigin: 'center bottom',
@@ -186,7 +145,7 @@ const TooltipTooltip = styled('div', {
     }) => ownerState.arrow,
     style: {
       position: 'relative',
-      margin: 0
+      marginBlock: 0
     }
   }, {
     props: ({
@@ -201,65 +160,17 @@ const TooltipTooltip = styled('div', {
   }, {
     props: ({
       ownerState
-    }) => !ownerState.isRtl,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '14px'
-      },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState.isRtl && ownerState.touch,
+    }) => ownerState.touch,
     style: {
       [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginRight: '24px'
+        marginInlineEnd: '24px'
       },
       [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginLeft: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '14px'
+        marginInlineStart: '24px'
       },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '14px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !!ownerState.isRtl && ownerState.touch,
-    style: {
-      [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-        marginLeft: '24px'
-      },
-      [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-        marginRight: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
       [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
         marginBottom: '24px'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.touch,
-    style: {
+      },
       [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
         marginTop: '24px'
       }
@@ -342,7 +253,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     children: childrenProp
   });
   const theme = useTheme();
-  const isRtl = useRtl();
   const [childNode, setChildNode] = React.useState();
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
@@ -442,7 +352,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleBlur = event => {
     // Needed for https://github.com/mui/material-ui/issues/45373
     const target = event?.target ?? childNode;
-    if (!target || !isFocusVisible(target)) {
+    if (!target || target.disabled || !isFocusVisible(target)) {
       setChildIsFocusVisible(false);
 
       // InputBase can call onBlur() without an event when the input becomes disabled.
@@ -470,6 +380,15 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       setChildNode(event.currentTarget);
     }
     if (isFocusVisible(event.target)) {
+      // Workaround for https://github.com/facebook/react/issues/9142.
+      // React does not fire blur when a focused element becomes disabled.
+      const handleNativeBlur = blurEvent => {
+        if (blurEvent.target.disabled) {
+          handleBlur(blurEvent);
+        }
+        blurEvent.target.removeEventListener('blur', handleNativeBlur);
+      };
+      event.target.addEventListener('blur', handleNativeBlur);
       setChildIsFocusVisible(true);
       handleMouseOver(event);
     }
@@ -601,7 +520,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const ownerState = {
     ...props,
-    isRtl,
     arrow,
     disableInteractive,
     placement,

package/Typography/Typography.d.mts

@@ -79,13 +79,13 @@ export interface TypographyTypeMap<AdditionalProps = {}, RootComponent extends R
  *
  * Demos:
  *
- * - [Breadcrumbs](https://next.mui.com/material-ui/react-breadcrumbs/)
- * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
- * - [Typography](https://next.mui.com/material-ui/react-typography/)
+ * - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
+ * - [Menubar](https://mui.com/material-ui/react-menubar/)
+ * - [Typography](https://mui.com/material-ui/react-typography/)
  *
  * API:
  *
- * - [Typography API](https://next.mui.com/material-ui/api/typography/)
+ * - [Typography API](https://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> & {

package/Typography/Typography.d.ts

@@ -79,13 +79,13 @@ export interface TypographyTypeMap<AdditionalProps = {}, RootComponent extends R
  *
  * Demos:
  *
- * - [Breadcrumbs](https://next.mui.com/material-ui/react-breadcrumbs/)
- * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
- * - [Typography](https://next.mui.com/material-ui/react-typography/)
+ * - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
+ * - [Menubar](https://mui.com/material-ui/react-menubar/)
+ * - [Typography](https://mui.com/material-ui/react-typography/)
  *
  * API:
  *
- * - [Typography API](https://next.mui.com/material-ui/api/typography/)
+ * - [Typography API](https://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> & {

package/Unstable_TrapFocus/FocusTrap.js

@@ -15,7 +15,9 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
+var _focusable = require("../utils/focusable");
 var _jsxRuntime = require("react/jsx-runtime");
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -114,34 +116,36 @@ function FocusTrap(props) {
     activated.current = !disableAutoFocus;
   }, [disableAutoFocus, open]);
   React.useEffect(() => {
+    // Reset on every mount — React 18 Strict Mode double-mounts leave this
+    // stuck at `true` after the cleanup of the previous mount set it.
+    ignoreNextEnforceFocus.current = false;
+
     // We might render an empty child.
     if (!open || !rootRef.current) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
     const activeElement = (0, _getActiveElement.default)(doc);
-    if (!rootRef.current.contains(activeElement)) {
-      if (!rootRef.current.hasAttribute('tabIndex')) {
+
+    // Prefer the explicitly marked focusable element. Fall back to the root
+    // element for generic FocusTrap usage.
+    const focusTarget = (0, _focusable.getFocusTarget)(rootRef.current) ?? rootRef.current;
+    if (!(0, _contains.default)(rootRef.current, activeElement)) {
+      if (!focusTarget.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
         }
-        rootRef.current.setAttribute('tabIndex', '-1');
+        focusTarget.setAttribute('tabIndex', '-1');
       }
       if (activated.current) {
-        rootRef.current.focus();
+        focusTarget.focus();
       }
     }
     return () => {
       // restoreLastFocus()
-      if (!disableRestoreFocus) {
-        // In IE11 it is possible for document.activeElement to be null resulting
-        // in nodeToRestore.current being null.
-        // Not all elements in IE11 have a focus method.
-        // Once IE11 support is dropped the focus() call can be unconditional.
-        if (nodeToRestore.current && nodeToRestore.current.focus) {
-          ignoreNextEnforceFocus.current = true;
-          nodeToRestore.current.focus();
-        }
+      if (!disableRestoreFocus && nodeToRestore.current) {
+        ignoreNextEnforceFocus.current = true;
+        nodeToRestore.current.focus();
         nodeToRestore.current = null;
       }
     };
@@ -188,7 +192,7 @@ function FocusTrap(props) {
       }
 
       // The focus is already inside
-      if (rootElement.contains(activeEl)) {
+      if ((0, _contains.default)(rootElement, activeEl)) {
         return;
       }
 

package/Unstable_TrapFocus/FocusTrap.mjs

@@ -8,7 +8,9 @@ import ownerDocument from '@mui/utils/ownerDocument';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import exactProp from '@mui/utils/exactProp';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import contains from "../utils/contains.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
+import { getFocusTarget } from "../utils/focusable.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -107,34 +109,36 @@ function FocusTrap(props) {
     activated.current = !disableAutoFocus;
   }, [disableAutoFocus, open]);
   React.useEffect(() => {
+    // Reset on every mount — React 18 Strict Mode double-mounts leave this
+    // stuck at `true` after the cleanup of the previous mount set it.
+    ignoreNextEnforceFocus.current = false;
+
     // We might render an empty child.
     if (!open || !rootRef.current) {
       return;
     }
     const doc = ownerDocument(rootRef.current);
     const activeElement = getActiveElement(doc);
-    if (!rootRef.current.contains(activeElement)) {
-      if (!rootRef.current.hasAttribute('tabIndex')) {
+
+    // Prefer the explicitly marked focusable element. Fall back to the root
+    // element for generic FocusTrap usage.
+    const focusTarget = getFocusTarget(rootRef.current) ?? rootRef.current;
+    if (!contains(rootRef.current, activeElement)) {
+      if (!focusTarget.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
         }
-        rootRef.current.setAttribute('tabIndex', '-1');
+        focusTarget.setAttribute('tabIndex', '-1');
       }
       if (activated.current) {
-        rootRef.current.focus();
+        focusTarget.focus();
       }
     }
     return () => {
       // restoreLastFocus()
-      if (!disableRestoreFocus) {
-        // In IE11 it is possible for document.activeElement to be null resulting
-        // in nodeToRestore.current being null.
-        // Not all elements in IE11 have a focus method.
-        // Once IE11 support is dropped the focus() call can be unconditional.
-        if (nodeToRestore.current && nodeToRestore.current.focus) {
-          ignoreNextEnforceFocus.current = true;
-          nodeToRestore.current.focus();
-        }
+      if (!disableRestoreFocus && nodeToRestore.current) {
+        ignoreNextEnforceFocus.current = true;
+        nodeToRestore.current.focus();
         nodeToRestore.current = null;
       }
     };
@@ -181,7 +185,7 @@ function FocusTrap(props) {
       }
 
       // The focus is already inside
-      if (rootElement.contains(activeEl)) {
+      if (contains(rootElement, activeEl)) {
         return;
       }
 

package/Zoom/Zoom.d.mts

@@ -34,16 +34,16 @@ export interface ZoomProps extends TransitionProps {
 
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](https://next.mui.com/material-ui/react-floating-action-button/#animation) component.
+ * [Button](https://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://next.mui.com/material-ui/transitions/)
+ * - [Transitions](https://mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Zoom API](https://next.mui.com/material-ui/api/zoom/)
+ * - [Zoom API](https://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.d.ts

@@ -34,16 +34,16 @@ export interface ZoomProps extends TransitionProps {
 
 /**
  * The Zoom transition can be used for the floating variant of the
- * [Button](https://next.mui.com/material-ui/react-floating-action-button/#animation) component.
+ * [Button](https://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://next.mui.com/material-ui/transitions/)
+ * - [Transitions](https://mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Zoom API](https://next.mui.com/material-ui/api/zoom/)
+ * - [Zoom API](https://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
       });

package/Zoom/Zoom.mjs

@@ -6,7 +6,7 @@ import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.mjs";
-import { reflow, getTransitionProps } from "../transitions/utils.mjs";
+import { normalizedTransitionCallback, reflow, getTransitionProps, getTransitionChildStyle } from "../transitions/utils.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -15,8 +15,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
@@ -43,26 +53,12 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(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 = normalizedTransitionCallback(nodeRef, onEntering);
+  const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
     reflow(node); // So the animation always start from the start.
 
     const transitionProps = getTransitionProps({
@@ -72,15 +68,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 = normalizedTransitionCallback(nodeRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(nodeRef, onExiting);
+  const handleExit = normalizedTransitionCallback(nodeRef, node => {
     const transitionProps = getTransitionProps({
       style,
       timeout,
@@ -88,20 +83,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 = 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__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(Transition, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -118,14 +117,9 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = 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
       });