chore(fuselage): Add forwardRef to TopBarAction and SidebarAction (#777)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>

packages/fuselage/src/components/Sidebar/SidebarActions.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps } from 'react';
-import React from 'react';
+import type { ComponentProps, Ref } from 'react';
+import React, { forwardRef } from 'react';
 
 import { IconButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
@@ -12,6 +12,9 @@ export const SidebarActions = (props: SidebarActionsProps) => (
 
 type SidebarActionProps = ComponentProps<typeof IconButton>;
 
-export const SidebarAction = (props: SidebarActionProps) => (
-  <IconButton small {...props} />
-);
+export const SidebarAction = forwardRef(function SidebarAction(
+  props: SidebarActionProps,
+  ref: Ref<HTMLElement>
+) {
+  return <IconButton small ref={ref} {...props} />;
+});

packages/fuselage/src/components/Sidebar/TopBar.tsx

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from 'react';
-import React from 'react';
+import type { ComponentProps, ReactNode, Ref } from 'react';
+import React, { forwardRef } from 'react';
 
 import Box from '../Box';
 import { Divider } from '../Divider';
@@ -79,9 +79,13 @@ export const TopBarAvatar = Avatar;
 export const TopBarActions = SidebarActions;
 
 type TopBarActionProps = ComponentProps<typeof SidebarAction>;
-export const TopBarAction = (props: TopBarActionProps) => (
-  <SidebarAction {...props} />
-);
+
+export const TopBarAction = forwardRef(function TopBarAction(
+  props: TopBarActionProps,
+  ref: Ref<HTMLElement>
+) {
+  return <SidebarAction ref={ref} {...props} />;
+});
 
 export const TopBarDivider = () => <Divider mbs='neg-x2' mbe={0} />;