From 7ba4b130e49844a792ec4fc4067ce49b9cfbe65f Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 13 Nov 2024 13:08:21 +0530
Subject: [PATCH 1/5] remove ownerState if custom transition slot is provided

---
 .../mui-material/src/Accordion/Accordion.js   |  1 +
 .../mui-material/src/Backdrop/Backdrop.js     |  9 ++----
 .../mui-material/src/Collapse/Collapse.js     |  4 +--
 packages/mui-material/src/utils/useSlot.ts    | 28 ++++++++++---------
 4 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js
index fd74ca6f342d29..a6b30227d025be 100644
--- a/packages/mui-material/src/Accordion/Accordion.js
+++ b/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 (
diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js
index 1c906c65260986..5c7da4b449eb93 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.js
+++ b/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>
diff --git a/packages/mui-material/src/Collapse/Collapse.js b/packages/mui-material/src/Collapse/Collapse.js
index 276056ecd58d1e..0b371daea02296 100644
--- a/packages/mui-material/src/Collapse/Collapse.js
+++ b/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 }}
diff --git a/packages/mui-material/src/utils/useSlot.ts b/packages/mui-material/src/utils/useSlot.ts
index 94203e7356a431..bd224133181073 100644
--- a/packages/mui-material/src/utils/useSlot.ts
+++ b/packages/mui-material/src/utils/useSlot.ts
@@ -98,9 +98,11 @@ export default function useSlot<
      * e.g. Autocomplete's listbox uses Popper + StyledComponent
      */
     internalForwardedProps?: any;
+    shouldAppendOwnerState?: boolean;
   },
 ) {
   const {
+    shouldAppendOwnerState = true,
     className,
     elementType: initialElementType,
     ownerState,
@@ -141,19 +143,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];

From ac5ca15facae2116bdb23c97280cd96a6e845b29 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 13 Nov 2024 13:09:07 +0530
Subject: [PATCH 2/5] prettier

---
 packages/mui-material/src/Accordion/Accordion.js | 2 +-
 packages/mui-material/src/Backdrop/Backdrop.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Accordion/Accordion.js b/packages/mui-material/src/Accordion/Accordion.js
index a6b30227d025be..ec831b89f5510d 100644
--- a/packages/mui-material/src/Accordion/Accordion.js
+++ b/packages/mui-material/src/Accordion/Accordion.js
@@ -205,7 +205,7 @@ const Accordion = React.forwardRef(function Accordion(inProps, ref) {
     elementType: Collapse,
     externalForwardedProps,
     ownerState,
-    shouldAppendOwnerState: false
+    shouldAppendOwnerState: false,
   });
 
   return (
diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js
index 5c7da4b449eb93..fe93a8b5e5b564 100644
--- a/packages/mui-material/src/Backdrop/Backdrop.js
+++ b/packages/mui-material/src/Backdrop/Backdrop.js
@@ -95,7 +95,7 @@ const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
     elementType: Fade,
     externalForwardedProps,
     ownerState,
-    shouldAppendOwnerState: false
+    shouldAppendOwnerState: false,
   });
 
   return (

From abc5ada741d644e5bb5f89e9349e3a0b92c09e51 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 13 Nov 2024 17:05:10 +0530
Subject: [PATCH 3/5] add description and test

---
 .../mui-material/src/utils/useSlot.test.tsx   | 23 +++++++++++++++++++
 packages/mui-material/src/utils/useSlot.ts    |  5 ++++
 2 files changed, 28 insertions(+)

diff --git a/packages/mui-material/src/utils/useSlot.test.tsx b/packages/mui-material/src/utils/useSlot.test.tsx
index 62b0b3ea9a7356..f87f21b42e1758 100644
--- a/packages/mui-material/src/utils/useSlot.test.tsx
+++ b/packages/mui-material/src/utils/useSlot.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
+import Fade, { FadeProps } from '@mui/material/Fade';
 import Popper from '../Popper/BasePopper';
 import { styled } from '../styles';
 import { SlotProps } from './types';
@@ -36,6 +37,28 @@ describe('useSlot', () => {
     });
   });
 
+  describe('transition slot', () => {
+    function Transition(props: FadeProps) {
+      const [SlotTransition, transitionProps] = useSlot('transition', {
+        className: 'transition',
+        elementType: Fade,
+        externalForwardedProps: {},
+        ownerState: { disabled: true },
+        shouldAppendOwnerState: false,
+      });
+      return <SlotTransition {...transitionProps}>{props.children}</SlotTransition>;
+    }
+
+    it('should not propagate ownerState props to the DOM', () => {
+      const { getByTestId } = render(
+        <Transition>
+          <div data-testid="root" />
+        </Transition>,
+      );
+      expect(getByTestId('root')).not.to.have.attribute('ownerstate');
+    });
+  });
+
   describe('multiple slots', () => {
     const ItemRoot = styled('button')({});
     const ItemDecorator = styled('span')({});
diff --git a/packages/mui-material/src/utils/useSlot.ts b/packages/mui-material/src/utils/useSlot.ts
index bd224133181073..b9ec758121d6a1 100644
--- a/packages/mui-material/src/utils/useSlot.ts
+++ b/packages/mui-material/src/utils/useSlot.ts
@@ -98,6 +98,11 @@ 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;
   },
 ) {

From 131adc56d87d3198e1f2296627739abce8c13ae2 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Wed, 13 Nov 2024 17:21:13 +0530
Subject: [PATCH 4/5] fix test

---
 .../mui-material/src/utils/useSlot.test.tsx   | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/mui-material/src/utils/useSlot.test.tsx b/packages/mui-material/src/utils/useSlot.test.tsx
index f87f21b42e1758..f412dbc1439617 100644
--- a/packages/mui-material/src/utils/useSlot.test.tsx
+++ b/packages/mui-material/src/utils/useSlot.test.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
-import Fade, { FadeProps } from '@mui/material/Fade';
+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';
@@ -38,23 +39,33 @@ describe('useSlot', () => {
   });
 
   describe('transition slot', () => {
-    function Transition(props: FadeProps) {
+    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: {},
+        externalForwardedProps: props,
         ownerState: { disabled: true },
         shouldAppendOwnerState: false,
       });
-      return <SlotTransition {...transitionProps}>{props.children}</SlotTransition>;
+      return (
+        <SlotTransition {...transitionProps}>
+          <div data-testid="root" />
+        </SlotTransition>
+      );
     }
 
     it('should not propagate ownerState props to the DOM', () => {
-      const { getByTestId } = render(
-        <Transition>
-          <div data-testid="root" />
-        </Transition>,
-      );
+      const { getByTestId } = render(<Transition />);
       expect(getByTestId('root')).not.to.have.attribute('ownerstate');
     });
   });

From 17478d6fc2a68b245cf5063aeb5bb55e2cbf0770 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Sat, 16 Nov 2024 11:56:45 +0530
Subject: [PATCH 5/5] Update packages/mui-material/src/utils/useSlot.ts

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 packages/mui-material/src/utils/useSlot.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mui-material/src/utils/useSlot.ts b/packages/mui-material/src/utils/useSlot.ts
index b9ec758121d6a1..6d1b5ee6a8d79f 100644
--- a/packages/mui-material/src/utils/useSlot.ts
+++ b/packages/mui-material/src/utils/useSlot.ts
@@ -100,7 +100,6 @@ export default function useSlot<
     internalForwardedProps?: any;
     /**
      * If `false`, does not append `ownerState` prop to the element.
-     *
      * @default true
      */
     shouldAppendOwnerState?: boolean;