From b37dd11c9bd0fc4dbdda5ab5e623dfc46c8d8647 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 13 Mar 2024 12:03:48 -0300
Subject: [PATCH] feat(fuselage): Add `forwardRef` on `Contextualbar` (#1319)

---
 .changeset/short-waves-double.md              |  5 ++
 .../Contextualbar/Contextualbar.tsx           | 58 ++++++++++---------
 2 files changed, 35 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/short-waves-double.md

diff --git a/.changeset/short-waves-double.md b/.changeset/short-waves-double.md
new file mode 100644
index 0000000000..0afa86703b
--- /dev/null
+++ b/.changeset/short-waves-double.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): Add forwardRef on Contextualbar
diff --git a/packages/fuselage/src/components/Contextualbar/Contextualbar.tsx b/packages/fuselage/src/components/Contextualbar/Contextualbar.tsx
index aefc6a5022..4724210c60 100644
--- a/packages/fuselage/src/components/Contextualbar/Contextualbar.tsx
+++ b/packages/fuselage/src/components/Contextualbar/Contextualbar.tsx
@@ -1,37 +1,39 @@
 import type { ComponentProps } from 'react';
-import React, { memo } from 'react';
+import React, { forwardRef, memo } from 'react';
 
 import { Box } from '..';
 
 type ContextualbarProps = ComponentProps<typeof Box>;
 
-const Contextualbar = ({
-  children,
-  width,
-  position,
-  bg = 'room',
-  ...props
-}: ContextualbarProps) => (
-  <Box
-    rcx-vertical-bar
-    bg={bg}
-    color='default'
-    display='flex'
-    flexDirection='column'
-    flexShrink={0}
-    width={width}
-    borderInlineStartWidth='default'
-    borderInlineStartColor='extra-light'
-    borderInlineStartStyle='solid'
-    height='full'
-    position={position}
-    insetInlineEnd='none'
-    insetBlockStart='none'
-    zIndex={5}
-    {...props}
-  >
-    {children}
-  </Box>
+const Contextualbar = forwardRef<HTMLElement, ContextualbarProps>(
+  function Contextualbar(
+    { children, width, position, bg = 'room', ...props },
+    ref
+  ) {
+    return (
+      <Box
+        ref={ref}
+        rcx-vertical-bar
+        bg={bg}
+        color='default'
+        display='flex'
+        flexDirection='column'
+        flexShrink={0}
+        width={width}
+        borderInlineStartWidth='default'
+        borderInlineStartColor='extra-light'
+        borderInlineStartStyle='solid'
+        height='full'
+        position={position}
+        insetInlineEnd='none'
+        insetBlockStart='none'
+        zIndex={5}
+        {...props}
+      >
+        {children}
+      </Box>
+    );
+  }
 );
 
 export default memo(Contextualbar);