From 3d67faf877a72a7eddabf7a3ca8a4d61b0fe5ef1 Mon Sep 17 00:00:00 2001
From: Evan Summers <evan.summers@wandelbots.com>
Date: Mon, 30 Sep 2024 19:38:54 +0200
Subject: [PATCH] fix: Now forwards ref from SelectableFab allowing Tooltip
 usage

---
 src/components/SelectableFab.tsx | 24 ++++++++++++++----------
 stories/MuiSamples/Tooltip.tsx   | 13 ++++++-------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/SelectableFab.tsx b/src/components/SelectableFab.tsx
index 00ac908..0f3b81f 100644
--- a/src/components/SelectableFab.tsx
+++ b/src/components/SelectableFab.tsx
@@ -1,4 +1,5 @@
 import { Fab, styled, type FabProps } from "@mui/material"
+import { forwardRef, type Ref } from "react"
 
 const StyledSelectableFab = styled(Fab, {
   shouldForwardProp: (prop) => prop !== "selected",
@@ -35,13 +36,16 @@ type CodeFabProps = {
   selected?: boolean
 } & Omit<FabProps, "variant" | "color">
 
-export function SelectableFab({ selected, ...props }: CodeFabProps) {
-  return (
-    <StyledSelectableFab
-      selected={selected}
-      {...props}
-      color={"secondary"}
-      variant="circular"
-    />
-  )
-}
+export const SelectableFab = forwardRef(
+  (props: CodeFabProps, ref: Ref<HTMLButtonElement>) => {
+    return (
+      <StyledSelectableFab
+        ref={ref}
+        selected={props.selected}
+        {...props}
+        color={"secondary"}
+        variant="circular"
+      />
+    )
+  },
+)
diff --git a/stories/MuiSamples/Tooltip.tsx b/stories/MuiSamples/Tooltip.tsx
index e05a547..2e9cc59 100644
--- a/stories/MuiSamples/Tooltip.tsx
+++ b/stories/MuiSamples/Tooltip.tsx
@@ -1,9 +1,8 @@
-import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-import Fab from "@mui/material/Fab";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import React from "react";
+import AddIcon from "@mui/icons-material/Add"
+import DeleteIcon from "@mui/icons-material/Delete"
+import Fab from "@mui/material/Fab"
+import IconButton from "@mui/material/IconButton"
+import Tooltip from "@mui/material/Tooltip"
 
 export default function TooltipExample() {
   return (
@@ -24,5 +23,5 @@ export default function TooltipExample() {
         </Fab>
       </Tooltip>
     </div>
-  );
+  )
 }