[SwipeableDrawer] Make paper ref accessible

[sai6855]

Fixes: #35069

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35082--material-ui.netlify.app/

Details of bundle changes

Generated by 🚫 dangerJS against 7c6bb24

[ZeeshanTamboli]

The fix should be as simple as doing:

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 89a02141c8..29eed9dd4c 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -574,7 +574,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
             pointerEvents: variant === 'temporary' && !open ? 'none' : '',
             ...PaperProps.style,
           },
-          ref: paperRef,
+          ref: PaperProps.ref || paperRef,
         }}
         anchor={anchor}
         transitionDuration={calculatedDurationRef.current || transitionDuration}

[sai6855]

Thanks for reviewing @ZeeshanTamboli 🙏, I've updated code as described.

[ZeeshanTamboli]

@sai6855 Actually I think your previous logic was correct:

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 89a02141c8..c786d47a40 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -166,7 +166,9 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)

   const swipeAreaRef = React.useRef();
   const backdropRef = React.useRef();
-  const paperRef = React.useRef();
+  const localPaperRef = React.useRef();
+
+  const paperRef = PaperProps.ref || localPaperRef;

   const touchDetected = React.useRef(false);

Because paperRef.current is used in the code below in multiple places and if custom ref is provided via PaperProps.ref it should consider that which does not happen with this change.

I apologize for the mistake.

Test looks good.

Suggested test now applied.

[ZeeshanTamboli]

The fix should be as simple as doing:

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 89a02141c8..29eed9dd4c 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -574,7 +574,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
             pointerEvents: variant === 'temporary' && !open ? 'none' : '',
             ...PaperProps.style,
           },
-          ref: paperRef,
+          ref: PaperProps.ref || paperRef,
         }}
         anchor={anchor}
         transitionDuration={calculatedDurationRef.current || transitionDuration}

This is incorrect

[sai6855]

@sai6855 Actually I think your previous logic was correct:

diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
index 89a02141c8..c786d47a40 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js
@@ -166,7 +166,9 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)

   const swipeAreaRef = React.useRef();
   const backdropRef = React.useRef();
-  const paperRef = React.useRef();
+  const localPaperRef = React.useRef();
+
+  const paperRef = PaperProps.ref || localPaperRef;

   const touchDetected = React.useRef(false);

Because paperRef.current is used in the code below in multiple places and if custom ref is provided via PaperProps.ref it should consider that which does not happen with this change.

I apologize for the mistake.

Test looks good.

okay @ZeeshanTamboli no issues, so according to my previous logic as typeof paperRef would be "any", because of this type "any" eslint is suggesting to include paperRef in dependency array. So is it fine if i include paperRef in useEffect in dependency array or do you have any other solution in mind?

  const localPaperef = React.useRef();
  const paperRef = PaperProps.ref || localPaperef;

[ZeeshanTamboli]

because of this type "any" eslint is suggesting to include paperRef in dependency array. So is it fine if i include paperRef in useEffect in dependency array or do you have any other solution in mind?

It's fine to include it in the dependency array if eslint complains about it. But I think actually the paperRef value never changes.

[ZeeshanTamboli]

LGTM!