From 727276b0d477b8a6e628a74c908f63e4a6aa4519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alan=20Fern=C3=A1ndez=20Saavedra?= <alan.f@msn.com>
Date: Thu, 28 Nov 2024 16:14:53 +0100
Subject: [PATCH] fix: add ref support

---
 .../experimental/Snackbar/Snackbar.tsx        | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/experimental/Snackbar/Snackbar.tsx b/src/components/experimental/Snackbar/Snackbar.tsx
index 26804cf1..c96b30df 100644
--- a/src/components/experimental/Snackbar/Snackbar.tsx
+++ b/src/components/experimental/Snackbar/Snackbar.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, type ReactElement } from 'react';
+import React, { forwardRef, ReactNode, type ReactElement } from 'react';
 import styled from 'styled-components';
 import { SpaceProps, LayoutProps, PositionProps, FlexboxProps } from 'styled-system';
 
@@ -32,28 +32,31 @@ const DismissButton = styled(IconButton)`
     padding: 0;
 `;
 
-interface SnackbarProps extends SpaceProps, LayoutProps, PositionProps, FlexboxProps {
+interface SnackbarProps
+    extends SpaceProps,
+        LayoutProps,
+        PositionProps,
+        FlexboxProps,
+        React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     hasDismissButton?: boolean;
     onDismiss?: () => void;
 }
 
-const Snackbar = ({
-    children,
-    hasDismissButton = false,
-    onDismiss = null,
-    ...restProps
-}: SnackbarProps): ReactElement => (
-    <Container {...restProps}>
-        {children}
-        {hasDismissButton && (
-            <DismissButton
-                data-testid="snackbar-close-icon"
-                Icon={() => <XCrossIcon size={24} color={getSemanticValue('inverse-on-surface')} />}
-                onPress={onDismiss}
-            />
-        )}
-    </Container>
+const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
+    ({ children, hasDismissButton = false, onDismiss = null, ...restProps }, ref): ReactElement => (
+        <Container ref={ref} {...restProps}>
+            {children}
+            {hasDismissButton && (
+                <DismissButton
+                    data-testid="snackbar-close-icon"
+                    Icon={() => <XCrossIcon size={24} color={getSemanticValue('inverse-on-surface')} />}
+                    onPress={onDismiss}
+                    aria-label="close"
+                />
+            )}
+        </Container>
+    )
 );
 
 export { Snackbar, SnackbarProps };