TD-3284 Truncated Tooltip (#1034)

* Manually bring in all changes from #1032

* 10.4.1-1

* 10.4.1-2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipguk/react-ui",
-  "version": "10.4.0",
+  "version": "10.4.1-2",
   "description": "React UI component library for IPG web applications",
   "author": {
     "name": "IPG-Automotive-UK"

src/TextField/TextField.tsx

@@ -4,14 +4,15 @@ import React from "react";
 import { TextFieldProps } from "./TextField.types";
 
 // masked input
-const MaskedTextField = React.forwardRef((props, ref) => (
-  <MaskedInput
-    {...props}
-    mask={[/[1-9]/, /\d/, /\d/, "/", /[1-9]/, /\d/, "R", /[1-9]/, /\d/]}
-    keepCharPositions={true}
-  />
-));
-MaskedTextField.displayName = "MaskedTextField";
+const MaskedTextField = React.forwardRef(function MaskedTextField(props, ref) {
+  return (
+    <MaskedInput
+      {...props}
+      mask={[/[1-9]/, /\d/, /\d/, "/", /[1-9]/, /\d/, "R", /[1-9]/, /\d/]}
+      keepCharPositions={true}
+    />
+  );
+});
 
 /**
  * TextField components are used for collecting user provided information as a string.

src/TruncatedTooltip/TruncatedTooltip.stories.tsx

@@ -2,14 +2,13 @@ import { Box, Link as MuiLink, Typography } from "@mui/material";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React from "react";
 import TruncatedTooltip from "./TruncatedTooltip";
-import { TruncatedTooltipProps } from "./TruncatedTooltip.types";
 
 export default {
   component: TruncatedTooltip,
   title: "General/TruncatedTooltip"
 } satisfies Meta<typeof TruncatedTooltip>;
 
-const Template: StoryFn<TruncatedTooltipProps> = args => {
+const Template: StoryFn<typeof TruncatedTooltip> = args => {
   return (
     <Box
       sx={{

src/TruncatedTooltip/TruncatedTooltip.tsx

@@ -1,31 +1,35 @@
 import { Box, Tooltip } from "@mui/material";
-import React, {
-  Children,
-  ReactElement,
-  isValidElement,
-  useRef,
-  useState
-} from "react";
+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.ForwardedRef<T>) => React.ReactNode
+  ): (props: P & React.RefAttributes<T>) => React.ReactNode;
+}
+
 /**
  * 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 = <T extends React.ElementType = "span">({
-  children,
-  component,
-  multiline,
-  sx,
-  tooltip,
-  alwaysShowTooltip = false,
-  TooltipProps = undefined,
-  ...rest
-}: TruncatedTooltipProps<T>) => {
-  // Ref to the text element.
-  const textElementRef = useRef<HTMLInputElement | null>(null);
+function TruncatedTooltipInner<T extends React.ElementType = "span">(
+  {
+    children,
+    component,
+    multiline,
+    sx,
+    tooltip,
+    alwaysShowTooltip = false,
+    TooltipProps = undefined,
+    ...rest
+  }: TruncatedTooltipProps<T>,
+  ref: React.ForwardedRef<T>
+) {
   // State to determine if the tooltip should show.
   const [open, setOpen] = useState(false);
 
@@ -96,7 +100,6 @@ const TruncatedTooltip = <T extends React.ElementType = "span">({
     >
       <Box
         component={component || "span"}
-        ref={textElementRef}
         sx={[
           {
             "& > *": {
@@ -121,12 +124,16 @@ const TruncatedTooltip = <T extends React.ElementType = "span">({
           // 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;