feat(fuselage): Add forwardRef on Contextualbar (#1319)

.changeset/short-waves-double.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): Add forwardRef on Contextualbar

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);