@mui/material 9.0.0-beta.0 → 9.0.0

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

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.0-beta.0
+ * @mui/material v9.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.0-beta.0
+ * @mui/material v9.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/SwitchBase.d.mts

@@ -20,13 +20,13 @@ type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
    * Props forwarded to the root slot.
    * By default, the available props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
    */
-  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+  root: SlotProps<React.ElementType<Omit<ButtonBaseProps, 'nativeButton'>>, {}, SwitchBaseOwnerState>;
   /**
    * Props forwarded to the input slot.
    */
   input: SlotProps<'input', {}, SwitchBaseOwnerState>;
 }>;
-export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
+export interface SwitchBaseProps extends StandardProps<Omit<ButtonBaseProps, 'nativeButton'>, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
   autoFocus?: boolean | undefined;
   /**
    * If `true`, the component is checked.

package/internal/SwitchBase.d.ts

@@ -20,13 +20,13 @@ type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
    * Props forwarded to the root slot.
    * By default, the available props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
    */
-  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+  root: SlotProps<React.ElementType<Omit<ButtonBaseProps, 'nativeButton'>>, {}, SwitchBaseOwnerState>;
   /**
    * Props forwarded to the input slot.
    */
   input: SlotProps<'input', {}, SwitchBaseOwnerState>;
 }>;
-export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
+export interface SwitchBaseProps extends StandardProps<Omit<ButtonBaseProps, 'nativeButton'>, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
   autoFocus?: boolean | undefined;
   /**
    * If `true`, the component is checked.

package/internal/SwitchBase.js

@@ -114,6 +114,10 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const [checked, setCheckedState] = (0, _useControlled.default)({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -176,7 +180,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     externalForwardedProps: {
       ...externalForwardedProps,
       component: 'span',
-      ...other
+      ...buttonBaseProps
     },
     getSlotProps: handlers => ({
       ...handlers,

package/internal/SwitchBase.mjs

@@ -107,6 +107,10 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     slotProps = {},
     ...other
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = other;
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -169,7 +173,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     externalForwardedProps: {
       ...externalForwardedProps,
       component: 'span',
-      ...other
+      ...buttonBaseProps
     },
     getSlotProps: handlers => ({
       ...handlers,

package/locale/psAF.js

@@ -47,7 +47,7 @@ const psAF = exports.psAF = {
       defaultProps: {
         clearText: 'پاک کول',
         closeText: 'تړل',
-        loadingText: '... لوډ کیږی',
+        loadingText: '… لوډ کیږی',
         noOptionsText: 'بی پایلی',
         openText: 'خلاصول'
       }

package/locale/psAF.mjs

@@ -40,7 +40,7 @@ export const psAF = {
       defaultProps: {
         clearText: 'پاک کول',
         closeText: 'تړل',
-        loadingText: '... لوډ کیږی',
+        loadingText: '… لوډ کیږی',
         noOptionsText: 'بی پایلی',
         openText: 'خلاصول'
       }

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@mui/material",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0",
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
+  "license": "MIT",
   "keywords": [
     "react",
     "react-component",
@@ -15,7 +16,6 @@
     "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-material"
   },
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
@@ -33,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.4",
     "react-transition-group": "^4.4.5",
-    "@mui/types": "^9.0.0-beta.0",
-    "@mui/core-downloads-tracker": "^9.0.0-beta.0",
-    "@mui/system": "9.0.0-beta.0",
-    "@mui/utils": "9.0.0-beta.0"
+    "@mui/core-downloads-tracker": "^9.0.0",
+    "@mui/types": "^9.0.0",
+    "@mui/system": "^9.0.0",
+    "@mui/utils": "^9.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,7 +44,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "9.0.0-beta.0"
+    "@mui/material-pigment-css": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -573,154 +573,154 @@
       }
     },
     "./Box": {
-      "import": {
-        "types": "./Box/index.d.mts",
-        "default": "./Box/index.mjs"
-      },
       "require": {
         "types": "./Box/index.d.ts",
         "default": "./Box/index.js"
       },
+      "import": {
+        "types": "./Box/index.d.mts",
+        "default": "./Box/index.mjs"
+      },
       "default": {
         "types": "./Box/index.d.mts",
         "default": "./Box/index.mjs"
       }
     },
     "./Breadcrumbs": {
-      "import": {
-        "types": "./Breadcrumbs/index.d.mts",
-        "default": "./Breadcrumbs/index.mjs"
-      },
       "require": {
         "types": "./Breadcrumbs/index.d.ts",
         "default": "./Breadcrumbs/index.js"
       },
+      "import": {
+        "types": "./Breadcrumbs/index.d.mts",
+        "default": "./Breadcrumbs/index.mjs"
+      },
       "default": {
         "types": "./Breadcrumbs/index.d.mts",
         "default": "./Breadcrumbs/index.mjs"
       }
     },
     "./Button": {
-      "import": {
-        "types": "./Button/index.d.mts",
-        "default": "./Button/index.mjs"
-      },
       "require": {
         "types": "./Button/index.d.ts",
         "default": "./Button/index.js"
       },
+      "import": {
+        "types": "./Button/index.d.mts",
+        "default": "./Button/index.mjs"
+      },
       "default": {
         "types": "./Button/index.d.mts",
         "default": "./Button/index.mjs"
       }
     },
     "./ButtonBase": {
-      "import": {
-        "types": "./ButtonBase/index.d.mts",
-        "default": "./ButtonBase/index.mjs"
-      },
       "require": {
         "types": "./ButtonBase/index.d.ts",
         "default": "./ButtonBase/index.js"
       },
+      "import": {
+        "types": "./ButtonBase/index.d.mts",
+        "default": "./ButtonBase/index.mjs"
+      },
       "default": {
         "types": "./ButtonBase/index.d.mts",
         "default": "./ButtonBase/index.mjs"
       }
     },
     "./ButtonGroup": {
-      "import": {
-        "types": "./ButtonGroup/index.d.mts",
-        "default": "./ButtonGroup/index.mjs"
-      },
       "require": {
         "types": "./ButtonGroup/index.d.ts",
         "default": "./ButtonGroup/index.js"
       },
+      "import": {
+        "types": "./ButtonGroup/index.d.mts",
+        "default": "./ButtonGroup/index.mjs"
+      },
       "default": {
         "types": "./ButtonGroup/index.d.mts",
         "default": "./ButtonGroup/index.mjs"
       }
     },
     "./Card": {
-      "import": {
-        "types": "./Card/index.d.mts",
-        "default": "./Card/index.mjs"
-      },
       "require": {
         "types": "./Card/index.d.ts",
         "default": "./Card/index.js"
       },
+      "import": {
+        "types": "./Card/index.d.mts",
+        "default": "./Card/index.mjs"
+      },
       "default": {
         "types": "./Card/index.d.mts",
         "default": "./Card/index.mjs"
       }
     },
     "./CardActionArea": {
-      "import": {
-        "types": "./CardActionArea/index.d.mts",
-        "default": "./CardActionArea/index.mjs"
-      },
       "require": {
         "types": "./CardActionArea/index.d.ts",
         "default": "./CardActionArea/index.js"
       },
+      "import": {
+        "types": "./CardActionArea/index.d.mts",
+        "default": "./CardActionArea/index.mjs"
+      },
       "default": {
         "types": "./CardActionArea/index.d.mts",
         "default": "./CardActionArea/index.mjs"
       }
     },
     "./CardActions": {
-      "import": {
-        "types": "./CardActions/index.d.mts",
-        "default": "./CardActions/index.mjs"
-      },
       "require": {
         "types": "./CardActions/index.d.ts",
         "default": "./CardActions/index.js"
       },
+      "import": {
+        "types": "./CardActions/index.d.mts",
+        "default": "./CardActions/index.mjs"
+      },
       "default": {
         "types": "./CardActions/index.d.mts",
         "default": "./CardActions/index.mjs"
       }
     },
     "./CardContent": {
-      "import": {
-        "types": "./CardContent/index.d.mts",
-        "default": "./CardContent/index.mjs"
-      },
       "require": {
         "types": "./CardContent/index.d.ts",
         "default": "./CardContent/index.js"
       },
+      "import": {
+        "types": "./CardContent/index.d.mts",
+        "default": "./CardContent/index.mjs"
+      },
       "default": {
         "types": "./CardContent/index.d.mts",
         "default": "./CardContent/index.mjs"
       }
     },
     "./CardHeader": {
-      "import": {
-        "types": "./CardHeader/index.d.mts",
-        "default": "./CardHeader/index.mjs"
-      },
       "require": {
         "types": "./CardHeader/index.d.ts",
         "default": "./CardHeader/index.js"
       },
+      "import": {
+        "types": "./CardHeader/index.d.mts",
+        "default": "./CardHeader/index.mjs"
+      },
       "default": {
         "types": "./CardHeader/index.d.mts",
         "default": "./CardHeader/index.mjs"
       }
     },
     "./CardMedia": {
-      "import": {
-        "types": "./CardMedia/index.d.mts",
-        "default": "./CardMedia/index.mjs"
-      },
       "require": {
         "types": "./CardMedia/index.d.ts",
         "default": "./CardMedia/index.js"
       },
+      "import": {
+        "types": "./CardMedia/index.d.mts",
+        "default": "./CardMedia/index.mjs"
+      },
       "default": {
         "types": "./CardMedia/index.d.mts",
         "default": "./CardMedia/index.mjs"

package/styles/createThemeNoVars.js

@@ -89,7 +89,7 @@ function createThemeNoVars(options = {}, ...args) {
   options.generateThemeVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
     // #host-reference
-    'Please use another name or follow the [docs](https://next.mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage.default)(22));
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage.default)(22));
   }
   const palette = (0, _createPalette.default)({
     ...paletteInput,

package/styles/createThemeNoVars.mjs

@@ -81,7 +81,7 @@ function createThemeNoVars(options = {}, ...args) {
   options.generateThemeVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
     // #host-reference
-    'Please use another name or follow the [docs](https://next.mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatErrorMessage(22));
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatErrorMessage(22));
   }
   const palette = createPalette({
     ...paletteInput,

package/styles/createThemeWithVars.js

@@ -339,21 +339,21 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.TableCell, 'border', colorMix(_colorManipulator.private_safeDarken, (0, _colorManipulator.private_safeAlpha)(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', colorMix(_colorManipulator.private_safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
+    if (!nativeColor) {
+      setColorChannel(palette.background, 'default');
 
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-    setColorChannel(palette, 'divider');
+      // added for consistency with the `background.default` token
+      setColorChannel(palette.background, 'paper');
+      setColorChannel(palette.common, 'background');
+      setColorChannel(palette.common, 'onBackground');
+      setColorChannel(palette, 'divider');
+    }
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && !nativeColor && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.main)));

package/styles/createThemeWithVars.mjs

@@ -329,21 +329,21 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.TableCell, 'border', colorMix(safeDarken, safeAlpha(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
+    if (!nativeColor) {
+      setColorChannel(palette.background, 'default');
 
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-    setColorChannel(palette, 'divider');
+      // added for consistency with the `background.default` token
+      setColorChannel(palette.background, 'paper');
+      setColorChannel(palette.common, 'background');
+      setColorChannel(palette.common, 'onBackground');
+      setColorChannel(palette, 'divider');
+    }
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && !nativeColor && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));

package/transitions/utils.d.mts

@@ -19,5 +19,12 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
+type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
 export {};

package/transitions/utils.d.ts

@@ -19,5 +19,12 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
+type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
 export {};

package/transitions/utils.js

@@ -3,10 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getTransitionChildStyle = getTransitionChildStyle;
 exports.getTransitionProps = getTransitionProps;
+exports.normalizedTransitionCallback = normalizedTransitionCallback;
 exports.reflow = void 0;
 const reflow = node => node.scrollTop;
 exports.reflow = reflow;
+function normalizedTransitionCallback(nodeRef, callback) {
+  return 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);
+      }
+    }
+  };
+}
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
+  const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 function getTransitionProps(props, options) {
   const {
     timeout,

package/transitions/utils.mjs

@@ -1,4 +1,29 @@
 export const reflow = node => node.scrollTop;
+export function normalizedTransitionCallback(nodeRef, callback) {
+  return 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);
+      }
+    }
+  };
+}
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
+  const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 export function getTransitionProps(props, options) {
   const {
     timeout,