From add569d4c9bb59b90db80a20a375a229378ba388 Mon Sep 17 00:00:00 2001
From: Guilherme Jun Grillo <48109548+guijun13@users.noreply.github.com>
Date: Thu, 14 Jul 2022 01:31:47 -0300
Subject: [PATCH] chore(fuselage): Add forwardRef to TopBarAction and
 SidebarAction (#777)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>
---
 .../src/components/Sidebar/SidebarActions.tsx      | 13 ++++++++-----
 .../fuselage/src/components/Sidebar/TopBar.tsx     | 14 +++++++++-----
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/fuselage/src/components/Sidebar/SidebarActions.tsx b/packages/fuselage/src/components/Sidebar/SidebarActions.tsx
index 4448b17d83..2b22b38f69 100644
--- a/packages/fuselage/src/components/Sidebar/SidebarActions.tsx
+++ b/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} />;
+});
diff --git a/packages/fuselage/src/components/Sidebar/TopBar.tsx b/packages/fuselage/src/components/Sidebar/TopBar.tsx
index a7f9bc3ce4..9b03a58915 100644
--- a/packages/fuselage/src/components/Sidebar/TopBar.tsx
+++ b/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} />;