refactor: update forwarded refs

Author: h2xd

src/modules/Header/HeaderLogo.tsx

@@ -1,4 +1,4 @@
-import { Box, type BoxProps, Image, Text } from "@chakra-ui/react";
+import { Box, type BoxProps, Image, Text, forwardRef } from "@chakra-ui/react";
 
 export type HeaderLogoProps = BoxProps & {
   /**
@@ -11,33 +11,41 @@ export type HeaderLogoProps = BoxProps & {
   alt: string;
 };
 
-export function HeaderLogo({
-  children,
-  src,
-  alt,
-  title,
-  ...props
-}: HeaderLogoProps) {
-  return (
-    <Box
-      as="button"
-      type="button"
-      title={title}
-      display="flex"
-      alignItems="center"
-      gap={2}
-      py={2}
-      pl={2}
-      pr={4}
-      _hover={{
-        backgroundColor: "surface.800",
-      }}
-      {...props}
-    >
-      <Image src={src} alt={alt} />
-      <Text as="span" color="white" fontWeight={700} fontSize="1.1rem">
-        {title}
-      </Text>
-    </Box>
-  );
-}
+/**
+ * HeaderLogo component
+ * Second parameter of the forwardRef generic has to be of the component bound to `as` prop
+ */
+export const HeaderLogo = forwardRef<HeaderLogoProps, 'button'>(
+  ({
+    children,
+    src,
+    alt,
+    title,
+    as = 'button',
+    ...props
+  }, ref) => {
+    return (
+      <Box
+        type="button"
+        title={title}
+        display="flex"
+        alignItems="center"
+        gap={2}
+        py={2}
+        pl={2}
+        pr={4}
+        _hover={{
+          backgroundColor: "surface.800",
+        }}
+        as={as}
+        ref={ref}
+        {...props}
+      >
+        <Image src={src} alt={alt} />
+        <Text as="span" color="white" fontWeight={700} fontSize="1.1rem">
+          {title}
+        </Text>
+      </Box>
+    );
+  }
+)

src/modules/Header/HeaderMenuButton.tsx

@@ -1,4 +1,4 @@
-import { Icon, MenuButton, useMenuContext } from "@chakra-ui/react";
+import { Icon, MenuButton, forwardRef, useMenuContext } from "@chakra-ui/react";
 import { XIcon, type LucideIcon } from "lucide-react";
 
 export type HeaderMenuButtonProps = {
@@ -9,7 +9,7 @@ const OPEN_MARGIN_IN_PIXEL = 4;
 const BORDER_WIDTH_IN_PIXEL = 2;
 const MAX_CONTAINER_SIZE_IN_PIXEL = 56;
 
-export function HeaderMenuButton({ icon }: HeaderMenuButtonProps) {
+export const HeaderMenuButton = forwardRef<HeaderMenuButtonProps, 'button'>(({ icon, as, ...props }, ref) => {
   const { isOpen } = useMenuContext();
 
   const containerSize = isOpen
@@ -35,8 +35,11 @@ export function HeaderMenuButton({ icon }: HeaderMenuButtonProps) {
         margin: isOpen ? `${OPEN_MARGIN_IN_PIXEL}px` : "0px",
         borderRadius: "2px",
       }}
+      as={as}
+      ref={ref}
+      {...props}
     >
       <Icon w={6} height={6} as={isOpen ? XIcon : icon} color="white" />
     </MenuButton>
   );
-}
+})

src/modules/Header/HeaderMenuContentItem.tsx

@@ -1,8 +1,8 @@
-import { MenuItem, type MenuItemProps } from "@chakra-ui/react";
+import { MenuItem, type MenuItemProps, forwardRef } from "@chakra-ui/react";
 
 export type HeaderMenuContentItemProps = MenuItemProps & {};
 
-export function HeaderMenuContentItem({ children, ...props }: HeaderMenuContentItemProps) {
+export const HeaderMenuContentItem = forwardRef<HeaderMenuContentItemProps, 'button'>(({ children, ...props }, ref) => {
   return (
     <MenuItem
       backgroundColor="black"
@@ -12,9 +12,10 @@ export function HeaderMenuContentItem({ children, ...props }: HeaderMenuContentI
       _focusVisible={{
         backgroundColor: "surface.800",
       }}
+      ref={ref}
       {...props}
     >
       {children}
     </MenuItem>
   );
-}
+})

src/modules/Sidebar/SidebarListItem.tsx

@@ -1,4 +1,5 @@
-import { Box, ListItem, type BoxProps } from "@chakra-ui/react";
+import { Box, ListItem, type BoxProps, forwardRef } from "@chakra-ui/react";
+
 
 export type SidebarListItemProps = BoxProps & {
   /**
@@ -7,11 +8,7 @@ export type SidebarListItemProps = BoxProps & {
   isActive?: boolean;
 };
 
-export function SidebarListItem({
-  children,
-  isActive,
-  ...props
-}: SidebarListItemProps) {
+export const SidebarListItem = forwardRef<SidebarListItemProps, 'button'>(({ children, isActive, ...props }, ref) => {
   return (
     <ListItem>
       <Box
@@ -30,10 +27,11 @@ export function SidebarListItem({
           backgroundColor: "surface.200",
         }}
         w="100%"
+        ref={ref}
         {...props}
       >
         {children}
       </Box>
     </ListItem>
   );
-}
+})