[material-ui] Prevent ownerState propagation for transition slots

packages/mui-material/src/Accordion/Accordion.js

@@ -205,6 +205,7 @@ const Accordion = React.forwardRef(function Accordion(inProps, ref) {
     elementType: Collapse,
     externalForwardedProps,
     ownerState,
+    shouldAppendOwnerState: false,
   });
 
   return (

packages/mui-material/src/Backdrop/Backdrop.js

@@ -9,11 +9,6 @@ import useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 
-const removeOwnerState = (props) => {
-  const { ownerState, ...rest } = props;
-  return rest;
-};
-
 const useUtilityClasses = (ownerState) => {
   const { classes, invisible } = ownerState;
 
@@ -100,11 +95,11 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
     elementType: Fade,
     externalForwardedProps,
     ownerState,
+    shouldAppendOwnerState: false,
   });
-  const transitionPropsRemoved = removeOwnerState(transitionProps);
 
   return (
-    <TransitionSlot in={open} timeout={transitionDuration} {...other} {...transitionPropsRemoved}>
+    <TransitionSlot in={open} timeout={transitionDuration} {...other} {...transitionProps}>
       <RootSlot aria-hidden {...rootProps} classes={classes} ref={ref}>
         {children}
       </RootSlot>

packages/mui-material/src/Collapse/Collapse.js

@@ -323,11 +323,9 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) {
             [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize,
             ...style,
           }}
+          ownerState={{ ...ownerState, state }}
           ref={handleRef}
           {...childProps}
-          // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
-          // that might have been forwarded from the Transition component.
-          ownerState={{ ...ownerState, state }}
         >
           <CollapseWrapper
             ownerState={{ ...ownerState, state }}

packages/mui-material/src/utils/useSlot.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
+import Fade from '@mui/material/Fade';
+import { TransitionProps } from '@mui/material/transitions';
 import Popper from '../Popper/BasePopper';
 import { styled } from '../styles';
 import { SlotProps } from './types';
@@ -36,6 +38,38 @@ describe('useSlot', () => {
     });
   });
 
+  describe('transition slot', () => {
+    function Transition(
+      props: TransitionProps & {
+        component?: React.ElementType;
+        slots?: {
+          transition?: React.ElementType;
+        };
+        slotProps?: {
+          transition?: SlotProps<React.ElementType, Record<string, any>, {}>;
+        };
+      },
+    ) {
+      const [SlotTransition, transitionProps] = useSlot('transition', {
+        className: 'transition',
+        elementType: Fade,
+        externalForwardedProps: props,
+        ownerState: { disabled: true },
+        shouldAppendOwnerState: false,
+      });
+      return (
+        <SlotTransition {...transitionProps}>
+          <div data-testid="root" />
+        </SlotTransition>
+      );
+    }
+
+    it('should not propagate ownerState props to the DOM', () => {
+      const { getByTestId } = render(<Transition />);
+      expect(getByTestId('root')).not.to.have.attribute('ownerstate');
+    });
+  });
+
   describe('multiple slots', () => {
     const ItemRoot = styled('button')({});
     const ItemDecorator = styled('span')({});

packages/mui-material/src/utils/useSlot.ts

@@ -98,9 +98,16 @@ export default function useSlot<
      * e.g. Autocomplete's listbox uses Popper + StyledComponent
      */
     internalForwardedProps?: any;
+    /**
+     * If `false`, does not append `ownerState` prop to the element.
+     *
+     * @default true
+     */
+    shouldAppendOwnerState?: boolean;
   },
 ) {
   const {
+    shouldAppendOwnerState = true,
     className,
     elementType: initialElementType,
     ownerState,
@@ -141,19 +148,19 @@ export default function useSlot<
     | React.ElementType
     | undefined;
 
-  const props = appendOwnerState(
-    elementType,
-    {
-      ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
-      ...(name !== 'root' && !slots[name] && internalForwardedProps),
-      ...mergedProps,
-      ...(LeafComponent && {
-        as: LeafComponent,
-      }),
-      ref,
-    },
-    finalOwnerState,
-  );
+  let props = {
+    ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
+    ...(name !== 'root' && !slots[name] && internalForwardedProps),
+    ...mergedProps,
+    ...(LeafComponent && {
+      as: LeafComponent,
+    }),
+    ref,
+  };
+
+  if (shouldAppendOwnerState) {
+    props = appendOwnerState(elementType, props, finalOwnerState);
+  }
 
   Object.keys(slotOwnerState).forEach((propName) => {
     delete props[propName];