From 362229dcbcf1e35ed22f69526e13ab791050b41c Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Wed, 14 Dec 2022 17:57:44 +0700
Subject: [PATCH] [Tooltip][Joy] Fix arrow does not appear (#35473)

---
 docs/data/joy/components/tooltip/ArrowTooltips.js      |  9 ++++++---
 docs/data/joy/components/tooltip/ArrowTooltips.tsx     |  9 ++++++---
 .../joy/components/tooltip/ArrowTooltips.tsx.preview   |  8 +++++---
 packages/mui-joy/src/Tooltip/Tooltip.tsx               |  4 +---
 packages/mui-joy/src/utils/useSlot.ts                  | 10 ++++------
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/docs/data/joy/components/tooltip/ArrowTooltips.js b/docs/data/joy/components/tooltip/ArrowTooltips.js
index 9adbf036cfe59b..3699ca7d80b14d 100644
--- a/docs/data/joy/components/tooltip/ArrowTooltips.js
+++ b/docs/data/joy/components/tooltip/ArrowTooltips.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import Button from '@mui/joy/Button';
+import Sheet from '@mui/joy/Sheet';
 import Tooltip from '@mui/joy/Tooltip';
 
 export default function ArrowTooltips() {
   return (
-    <Tooltip title="Add" arrow>
-      <Button variant="plain">Arrow</Button>
-    </Tooltip>
+    <Sheet sx={{ pr: 7 }}>
+      <Tooltip title="Add" arrow open placement="right">
+        <Button variant="plain">Arrow</Button>
+      </Tooltip>
+    </Sheet>
   );
 }
diff --git a/docs/data/joy/components/tooltip/ArrowTooltips.tsx b/docs/data/joy/components/tooltip/ArrowTooltips.tsx
index 9adbf036cfe59b..3699ca7d80b14d 100644
--- a/docs/data/joy/components/tooltip/ArrowTooltips.tsx
+++ b/docs/data/joy/components/tooltip/ArrowTooltips.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import Button from '@mui/joy/Button';
+import Sheet from '@mui/joy/Sheet';
 import Tooltip from '@mui/joy/Tooltip';
 
 export default function ArrowTooltips() {
   return (
-    <Tooltip title="Add" arrow>
-      <Button variant="plain">Arrow</Button>
-    </Tooltip>
+    <Sheet sx={{ pr: 7 }}>
+      <Tooltip title="Add" arrow open placement="right">
+        <Button variant="plain">Arrow</Button>
+      </Tooltip>
+    </Sheet>
   );
 }
diff --git a/docs/data/joy/components/tooltip/ArrowTooltips.tsx.preview b/docs/data/joy/components/tooltip/ArrowTooltips.tsx.preview
index 609cf9ae271afc..8b6d7d124e1790 100644
--- a/docs/data/joy/components/tooltip/ArrowTooltips.tsx.preview
+++ b/docs/data/joy/components/tooltip/ArrowTooltips.tsx.preview
@@ -1,3 +1,5 @@
-<Tooltip title="Add" arrow>
-  <Button variant="plain">Arrow</Button>
-</Tooltip>
\ No newline at end of file
+<Sheet sx={{ pr: 7 }}>
+  <Tooltip title="Add" arrow open placement="right">
+    <Button variant="plain">Arrow</Button>
+  </Tooltip>
+</Sheet>
\ No newline at end of file
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
index 3bba6eaad4ae8d..ed56ebaa61d076 100644
--- a/packages/mui-joy/src/Tooltip/Tooltip.tsx
+++ b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -588,9 +588,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
   });
 
   const [SlotArrow, arrowProps] = useSlot('arrow', {
-    additionalProps: {
-      ref: setArrowRef,
-    },
+    ref: setArrowRef,
     className: classes.arrow,
     elementType: TooltipArrow,
     externalForwardedProps: other,
diff --git a/packages/mui-joy/src/utils/useSlot.ts b/packages/mui-joy/src/utils/useSlot.ts
index 915668fabef754..f3e6400aefe8e6 100644
--- a/packages/mui-joy/src/utils/useSlot.ts
+++ b/packages/mui-joy/src/utils/useSlot.ts
@@ -52,7 +52,9 @@ export default function useSlot<
    * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
    */
   name: T,
-  parameters: (T extends 'root' ? { ref: React.ForwardedRef<any> } : {}) & {
+  parameters: (T extends 'root' // root slot must pass a `ref` as a parameter
+    ? { ref: React.ForwardedRef<any> }
+    : { ref?: React.ForwardedRef<any> }) & {
     /**
      * The slot's className
      */
@@ -129,11 +131,7 @@ export default function useSlot<
     externalSlotProps: resolvedComponentsProps,
   });
 
-  const ref = useForkRef(
-    internalRef,
-    // @ts-ignore `ref` is required for the 'root' slot
-    useForkRef(resolvedComponentsProps?.ref, name === 'root' ? parameters.ref : undefined),
-  ) as ((instance: any | null) => void) | null;
+  const ref = useForkRef(internalRef, resolvedComponentsProps?.ref, parameters.ref);
 
   const finalOwnerState = getSlotOwnerState
     ? { ...ownerState, ...getSlotOwnerState(mergedProps as any) }