fix: snackbar crash

DimensionDev · May 31, 2024 · cdc1fec · cdc1fec
1 parent 676666c
commit cdc1fec
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx b/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx
@@ -1,4 +1,4 @@
-import { memo, useRef, useCallback } from 'react'
+import { memo, useRef, useCallback, type RefAttributes } from 'react'
 import { Typography, alpha, collapseClasses } from '@mui/material'
 import {
     SnackbarProvider,
@@ -80,18 +80,18 @@ export const PopupSnackbarProvider = memo<SnackbarProviderProps>(function PopupS
     )
 })
 
-interface PopupSnackbarContentProps {
+interface PopupSnackbarContentProps extends RefAttributes<HTMLDivElement> {
     id: SnackbarKey
     title: SnackbarMessage
     message?: string | React.ReactNode
     variant?: VariantType
 }
 
-function PopupSnackbarContent({ id, title, message, variant }: PopupSnackbarContentProps) {
+function PopupSnackbarContent({ id, title, message, variant, ref }: PopupSnackbarContentProps) {
     const { classes, cx } = useStyles()
 
     return (
-        <SnackbarContent key={id} className={cx(classes.content, classes[variant!])}>
+        <SnackbarContent ref={ref} key={id} className={cx(classes.content, classes[variant!])}>
             <Typography className={classes.title} component="div">
                 {title}
             </Typography>

diff --git a/packages/theme/src/Components/Snackbar/index.tsx b/packages/theme/src/Components/Snackbar/index.tsx
@@ -1,4 +1,4 @@
-import { useRef, memo, useCallback } from 'react'
+import { useRef, memo, useCallback, type RefAttributes } from 'react'
 import { keyframes } from 'tss-react'
 import {
     SnackbarProvider,
@@ -186,7 +186,7 @@ const useStyles = makeStyles<StyleProps, 'title' | 'message'>()((theme, { offset
     }
 })
 
-interface CustomSnackbarContentProps {
+interface CustomSnackbarContentProps extends RefAttributes<HTMLDivElement> {
     id: SnackbarKey
     title: SnackbarMessage
     message?: string | React.ReactNode
@@ -222,7 +222,7 @@ function CustomSnackbarContent(props: CustomSnackbarContentProps) {
         renderedAction = typeof props.action === 'function' ? props.action(props.id) : props.action
     }
     return (
-        <SnackbarContent className={cx(classes.content, classes[props.variant!])}>
+        <SnackbarContent ref={props.ref} className={cx(classes.content, classes[props.variant!])}>
             {variantIcon ?
                 <div className={classes.icon}>{variantIcon}</div>
             :   null}