@mui/material 9.0.0-beta.0 → 9.0.0

package/Tabs/Tabs.mjs

@@ -20,7 +20,10 @@ import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
 import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import useSlot from "../utils/useSlot.mjs";
-import { ownerDocument, useForkRef, getActiveElement, useRovingTabIndex } from "../utils/index.mjs";
+import getActiveElement from "../utils/getActiveElement.mjs";
+import ownerDocument from "../utils/ownerDocument.mjs";
+import useForkRef from "../utils/useForkRef.mjs";
+import { RovingTabIndexContext, useRovingTabIndexRoot } from "../utils/useRovingTabIndex.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -287,6 +290,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const [displayStartScroll, setDisplayStartScroll] = React.useState(false);
   const [displayEndScroll, setDisplayEndScroll] = React.useState(false);
   const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);
+  const selectedValue = value === false ? null : value;
+  // Tracks whether DOM focus is currently inside the tab list. When it is, roving focus
+  // should follow in-list keyboard movement instead of snapping back to `selectedValue`.
+  const [isFocusWithinList, setIsFocusWithinList] = React.useState(false);
   const [scrollerStyle, setScrollerStyle] = React.useState({
     overflow: 'hidden',
     scrollbarWidth: 0
@@ -614,6 +621,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/_jsx(IndicatorSlot, {
     ...indicatorSlotProps
   });
+  const rovingContainer = useRovingTabIndexRoot({
+    activeItemId: isFocusWithinList ? undefined : selectedValue,
+    orientation,
+    isRtl
+  });
+  const rovingContainerProps = rovingContainer.getContainerProps();
   const validChildren = React.Children.toArray(childrenProp).filter(React.isValidElement).map((child, index) => {
     const childValue = child.props.value === undefined ? index : child.props.value;
     if (process.env.NODE_ENV !== 'production') {
@@ -628,23 +641,11 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       childValue
     };
   });
-  const focusableIndex = valueToIndex.get(value);
-  const {
-    getContainerProps,
-    getItemProps
-  } = useRovingTabIndex({
-    focusableIndex,
-    orientation,
-    isRtl
-  });
-  const rovingTabIndexContainerProps = getContainerProps();
   const children = validChildren.map(({
     child,
-    index,
     childValue
   }) => {
     const selected = childValue === value;
-    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -652,9 +653,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       selectionFollowsFocus,
       onChange,
       textColor,
-      value: childValue,
-      ref: rovingTabIndexItemProps.ref,
-      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
+      value: childValue
     });
   });
   const conditionalElements = getConditionalElements();
@@ -682,7 +681,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
-  const mergedRef = useForkRef(rovingTabIndexContainerProps.ref, tabListRef);
+  const mergedRef = useForkRef(rovingContainerProps.ref, tabListRef);
   const handleKeyDown = event => {
     const list = tabListRef.current;
     const currentFocus = getActiveElement(ownerDocument(list));
@@ -693,7 +692,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     if (role !== 'tab') {
       return;
     }
-    rovingTabIndexContainerProps.onKeyDown(event);
+    rovingContainerProps.onKeyDown(event);
   };
   const [ListSlot, listSlotProps] = useSlot('list', {
     ref: mergedRef,
@@ -703,12 +702,19 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     ownerState,
     getSlotProps: handlers => ({
       ...handlers,
+      onBlur: event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setIsFocusWithinList(false);
+        }
+        handlers.onBlur?.(event);
+      },
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
       },
       onFocus: event => {
-        rovingTabIndexContainerProps.onFocus(event);
+        setIsFocusWithinList(true);
+        rovingContainerProps.onFocus(event);
         handlers.onFocus?.(event);
       }
     })
@@ -723,7 +729,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         "aria-orientation": orientation === 'vertical' ? 'vertical' : null,
         role: "tablist",
         ...listSlotProps,
-        children: children
+        children: /*#__PURE__*/_jsx(RovingTabIndexContext.Provider, {
+          value: rovingContainer,
+          children: children
+        })
       }), mounted && indicator]
     }), conditionalElements.scrollButtonEnd]
   });

package/TextField/TextField.d.mts

@@ -260,12 +260,12 @@ export type TextFieldOwnerState = BaseTextFieldProps;
  * It's important to understand that the text field is a simple abstraction
  * on top of the following components:
  *
- * * [FormControl](https://next.mui.com/material-ui/api/form-control/)
- * * [InputLabel](https://next.mui.com/material-ui/api/input-label/)
- * * [FilledInput](https://next.mui.com/material-ui/api/filled-input/)
- * * [OutlinedInput](https://next.mui.com/material-ui/api/outlined-input/)
- * * [Input](https://next.mui.com/material-ui/api/input/)
- * * [FormHelperText](https://next.mui.com/material-ui/api/form-helper-text/)
+ * * [FormControl](https://mui.com/material-ui/api/form-control/)
+ * * [InputLabel](https://mui.com/material-ui/api/input-label/)
+ * * [FilledInput](https://mui.com/material-ui/api/filled-input/)
+ * * [OutlinedInput](https://mui.com/material-ui/api/outlined-input/)
+ * * [Input](https://mui.com/material-ui/api/input/)
+ * * [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)
  *
  * If you wish to alter the props applied to the `input` element, you can do so as follows:
  *
@@ -287,13 +287,13 @@ export type TextFieldOwnerState = BaseTextFieldProps;
  *
  * Demos:
  *
- * - [Autocomplete](https://next.mui.com/material-ui/react-autocomplete/)
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [TextField API](https://next.mui.com/material-ui/api/text-field/)
- * - inherits [FormControl API](https://next.mui.com/material-ui/api/form-control/)
+ * - [TextField API](https://mui.com/material-ui/api/text-field/)
+ * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
  */
 export default function TextField<Variant extends TextFieldVariants>(props: {
   /**

package/TextField/TextField.d.ts

@@ -260,12 +260,12 @@ export type TextFieldOwnerState = BaseTextFieldProps;
  * It's important to understand that the text field is a simple abstraction
  * on top of the following components:
  *
- * * [FormControl](https://next.mui.com/material-ui/api/form-control/)
- * * [InputLabel](https://next.mui.com/material-ui/api/input-label/)
- * * [FilledInput](https://next.mui.com/material-ui/api/filled-input/)
- * * [OutlinedInput](https://next.mui.com/material-ui/api/outlined-input/)
- * * [Input](https://next.mui.com/material-ui/api/input/)
- * * [FormHelperText](https://next.mui.com/material-ui/api/form-helper-text/)
+ * * [FormControl](https://mui.com/material-ui/api/form-control/)
+ * * [InputLabel](https://mui.com/material-ui/api/input-label/)
+ * * [FilledInput](https://mui.com/material-ui/api/filled-input/)
+ * * [OutlinedInput](https://mui.com/material-ui/api/outlined-input/)
+ * * [Input](https://mui.com/material-ui/api/input/)
+ * * [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)
  *
  * If you wish to alter the props applied to the `input` element, you can do so as follows:
  *
@@ -287,13 +287,13 @@ export type TextFieldOwnerState = BaseTextFieldProps;
  *
  * Demos:
  *
- * - [Autocomplete](https://next.mui.com/material-ui/react-autocomplete/)
- * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:
  *
- * - [TextField API](https://next.mui.com/material-ui/api/text-field/)
- * - inherits [FormControl API](https://next.mui.com/material-ui/api/form-control/)
+ * - [TextField API](https://mui.com/material-ui/api/text-field/)
+ * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
  */
 export default function TextField<Variant extends TextFieldVariants>(props: {
   /**

package/TextareaAutosize/TextareaAutosize.d.mts

@@ -4,11 +4,11 @@ import { TextareaAutosizeProps } from "./TextareaAutosize.types.mjs";
  *
  * Demos:
  *
- * - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
+ * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
  *
  * API:
  *
- * - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
+ * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
  */
 declare const TextareaAutosize: React.ForwardRefExoticComponent<TextareaAutosizeProps & React.RefAttributes<Element>>;
 export default TextareaAutosize;

package/TextareaAutosize/TextareaAutosize.d.ts

@@ -4,11 +4,11 @@ import { TextareaAutosizeProps } from "./TextareaAutosize.types.js";
  *
  * Demos:
  *
- * - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
+ * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
  *
  * API:
  *
- * - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
+ * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
  */
 declare const TextareaAutosize: React.ForwardRefExoticComponent<TextareaAutosizeProps & React.RefAttributes<Element>>;
 export default TextareaAutosize;

package/TextareaAutosize/TextareaAutosize.js

@@ -48,11 +48,11 @@ function isEmpty(obj) {
  *
  * Demos:
  *
- * - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
+ * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
  *
  * API:
  *
- * - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
+ * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
  */
 const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
   const {

package/TextareaAutosize/TextareaAutosize.mjs

@@ -41,11 +41,11 @@ function isEmpty(obj) {
  *
  * Demos:
  *
- * - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
+ * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
  *
  * API:
  *
- * - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
+ * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
  */
 const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
   const {

package/ToggleButton/ToggleButton.d.mts

@@ -81,12 +81,12 @@ export type ToggleButtonTypeMap<AdditionalProps = {}, RootComponent extends Reac
  *
  * Demos:
  *
- * - [Toggle Button](https://next.mui.com/material-ui/react-toggle-button/)
+ * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
  *
  * API:
  *
- * - [ToggleButton API](https://next.mui.com/material-ui/api/toggle-button/)
- * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ * - [ToggleButton API](https://mui.com/material-ui/api/toggle-button/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
 export type ToggleButtonProps<RootComponent extends React.ElementType = ToggleButtonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ToggleButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/ToggleButton/ToggleButton.d.ts

@@ -81,12 +81,12 @@ export type ToggleButtonTypeMap<AdditionalProps = {}, RootComponent extends Reac
  *
  * Demos:
  *
- * - [Toggle Button](https://next.mui.com/material-ui/react-toggle-button/)
+ * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
  *
  * API:
  *
- * - [ToggleButton API](https://next.mui.com/material-ui/api/toggle-button/)
- * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ * - [ToggleButton API](https://mui.com/material-ui/api/toggle-button/)
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
  */
 declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
 export type ToggleButtonProps<RootComponent extends React.ElementType = ToggleButtonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ToggleButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {

package/ToggleButton/ToggleButton.js

@@ -178,6 +178,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, {
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,

package/ToggleButton/ToggleButton.mjs

@@ -171,6 +171,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/_jsx(ToggleButtonRoot, {
     className: clsx(contextProps.className, classes.root, className, positionClassName),
+    internalNativeButton: true,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,

package/ToggleButtonGroup/ToggleButtonGroup.d.mts

@@ -73,10 +73,10 @@ export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttribut
  *
  * Demos:
  *
- * - [Toggle Button](https://next.mui.com/material-ui/react-toggle-button/)
+ * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
  *
  * API:
  *
- * - [ToggleButtonGroup API](https://next.mui.com/material-ui/api/toggle-button-group/)
+ * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
  */
 export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

package/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -73,10 +73,10 @@ export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttribut
  *
  * Demos:
  *
- * - [Toggle Button](https://next.mui.com/material-ui/react-toggle-button/)
+ * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
  *
  * API:
  *
- * - [ToggleButtonGroup API](https://next.mui.com/material-ui/api/toggle-button-group/)
+ * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
  */
 export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

package/Toolbar/Toolbar.d.mts

@@ -38,11 +38,11 @@ export interface ToolbarTypeMap<AdditionalProps = {}, RootComponent extends Reac
  *
  * Demos:
  *
- * - [App Bar](https://next.mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://mui.com/material-ui/react-app-bar/)
  *
  * API:
  *
- * - [Toolbar API](https://next.mui.com/material-ui/api/toolbar/)
+ * - [Toolbar API](https://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> & {

package/Toolbar/Toolbar.d.ts

@@ -38,11 +38,11 @@ export interface ToolbarTypeMap<AdditionalProps = {}, RootComponent extends Reac
  *
  * Demos:
  *
- * - [App Bar](https://next.mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://mui.com/material-ui/react-app-bar/)
  *
  * API:
  *
- * - [Toolbar API](https://next.mui.com/material-ui/api/toolbar/)
+ * - [Toolbar API](https://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> & {

package/Tooltip/Tooltip.d.mts

@@ -41,7 +41,7 @@ export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
    * By default, the available props are based on the div element.
@@ -167,10 +167,10 @@ export interface TooltipOwnerState extends TooltipProps {}
  *
  * Demos:
  *
- * - [Tooltip](https://next.mui.com/material-ui/react-tooltip/)
+ * - [Tooltip](https://mui.com/material-ui/react-tooltip/)
  *
  * API:
  *
- * - [Tooltip API](https://next.mui.com/material-ui/api/tooltip/)
+ * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
 export default function Tooltip(props: TooltipProps): React.JSX.Element;

package/Tooltip/Tooltip.d.ts

@@ -41,7 +41,7 @@ export type TooltipSlotsAndSlotProps = CreateSlotsAndSlotProps<TooltipSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotProps<React.ElementType, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
+  transition: SlotProps<React.ElementType<TransitionProps>, TransitionProps & TooltipTransitionSlotPropsOverrides, TooltipOwnerState>;
   /**
    * Props forwarded to the tooltip slot.
    * By default, the available props are based on the div element.
@@ -167,10 +167,10 @@ export interface TooltipOwnerState extends TooltipProps {}
  *
  * Demos:
  *
- * - [Tooltip](https://next.mui.com/material-ui/react-tooltip/)
+ * - [Tooltip](https://mui.com/material-ui/react-tooltip/)
  *
  * API:
  *
- * - [Tooltip API](https://next.mui.com/material-ui/api/tooltip/)
+ * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
 export default function Tooltip(props: TooltipProps): React.JSX.Element;

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/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
       });