Allow dynamic forwardRef

IPG-Automotive-UK · Jan 29, 2025 · 21cba38 · 21cba38
1 parent 7411c14
commit 21cba38
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/Card/DetailCard/DetailCard.tsx b/src/Card/DetailCard/DetailCard.tsx
@@ -6,7 +6,6 @@ import React, { Fragment, useEffect, useRef, useState } from "react";
 import LabelChipGroup from "../../LabelSelector/LabelChipGroup/LabelChipGroup";
 import type { LabelChipGroupProps } from "../../LabelSelector/LabelChipGroup/LabelChipGroup.types";
 import { ResizeObserver } from "@juggle/resize-observer";
-import { Theme } from "@mui/material/styles";
 import TruncatedTooltip from "../../TruncatedTooltip/TruncatedTooltip";
 
 // TODO: add tests in browser once we are done with the migration to cypress. The old tests live in a txt file in this folder until then.
@@ -143,7 +142,7 @@ function DetailCardHeader({
         <Box sx={{ width: headerContentWidth }}>
           <TruncatedTooltip
             component={Typography}
-            sx={(theme: Theme) => ({
+            sx={theme => ({
               color: "black",
               fontSize: 20,
               fontWeight: 700,
@@ -156,7 +155,7 @@ function DetailCardHeader({
           </TruncatedTooltip>
           <TruncatedTooltip
             component={Typography}
-            sx={(theme: Theme) => ({
+            sx={theme => ({
               color: theme.palette.text.secondary,
               fontSize: 14,
               fontWeight: 400

diff --git a/src/TruncatedTooltip/TruncatedTooltip.tsx b/src/TruncatedTooltip/TruncatedTooltip.tsx
@@ -3,14 +3,21 @@ import React, { Children, ReactElement, isValidElement, useState } from "react";
 
 import { TruncatedTooltipProps } from "./TruncatedTooltip.types";
 
+// https://fettblog.eu/typescript-react-generic-forward-refs/#option-3%3A-augment-forwardref
+// Note; In React 19 we will no longer need to use (or augment) the forwardRef type.
+declare module "react" {
+  // eslint-disable-next-line no-unused-vars
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
+  ): (props: P & React.RefAttributes<T>) => React.ReactNode | null;
+}
+
 /**
  * Truncates text and shows a tooltip if the text overflows.
  * Automatically grabs the tooltip from child.
  * Renders a specified MUI component or element otherwise wraps string in a span.
  */
-const TruncatedTooltip = React.forwardRef(function TruncateTooltip<
-  T extends React.ElementType = "span"
->(
+function TruncatedTooltipInner<T extends React.ElementType = "span">(
   {
     children,
     component,
@@ -21,7 +28,7 @@ const TruncatedTooltip = React.forwardRef(function TruncateTooltip<
     TooltipProps = undefined,
     ...rest
   }: TruncatedTooltipProps<T>,
-  ref: React.Ref<T>
+  ref: React.ForwardedRef<T>
 ) {
   // State to determine if the tooltip should show.
   const [open, setOpen] = useState(false);
@@ -93,7 +100,6 @@ const TruncatedTooltip = React.forwardRef(function TruncateTooltip<
     >
       <Box
         component={component || "span"}
-        ref={ref}
         sx={[
           {
             "& > *": {
@@ -118,12 +124,16 @@ const TruncatedTooltip = React.forwardRef(function TruncateTooltip<
           // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
           ...(Array.isArray(sx) ? sx : [sx])
         ]}
+        ref={ref}
         {...rest}
       >
         {children}
       </Box>
     </Tooltip>
   );
-});
+}
+
+// forward ref
+const TruncatedTooltip = React.forwardRef(TruncatedTooltipInner);
 
 export default TruncatedTooltip;