Merge pull request #859 from capricorn-32/fix/forwardRef

fix(box): add forwardRef to box component

Author: aabidsofi19

src/base/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 import { Accordion as MuiAccordion, type AccordionProps as MuiAccordionProps } from '@mui/material';
+import React from 'react';
 
-export function Accordion(props: MuiAccordionProps): JSX.Element {
-  return <MuiAccordion {...props} />;
-}
+const Accordion = React.forwardRef<HTMLDivElement, MuiAccordionProps>((props, ref) => {
+  return <MuiAccordion {...props} ref={ref} />;
+});
 
 export default Accordion;

src/base/AccordionActions/AccordionActions.tsx

@@ -3,8 +3,12 @@ import {
   type AccordionActionsProps as MuiAccordionActionsProps
 } from '@mui/material';
 
-export function AccordionActions(props: MuiAccordionActionsProps): JSX.Element {
-  return <MuiAccordionActions {...props} />;
-}
+import React from 'react';
+
+const AccordionActions = React.forwardRef<HTMLDivElement, MuiAccordionActionsProps>(
+  (props, ref) => {
+    return <MuiAccordionActions {...props} ref={ref} />;
+  }
+);
 
 export default AccordionActions;

src/base/AccordionDetails/AccordionDetails.tsx

@@ -3,8 +3,12 @@ import {
   type AccordionDetailsProps as MuiAccordionDetailsProps
 } from '@mui/material';
 
-export function AccordionDetails(props: MuiAccordionDetailsProps): JSX.Element {
-  return <MuiAccordionDetails {...props} />;
-}
+import React from 'react';
+
+const AccordionDetails = React.forwardRef<HTMLDivElement, MuiAccordionDetailsProps>(
+  (props, ref) => {
+    return <MuiAccordionDetails {...props} ref={ref} />;
+  }
+);
 
 export default AccordionDetails;

src/base/AccordionSummary/AccordionSummary.tsx

@@ -2,9 +2,12 @@ import {
   AccordionSummary as MuiAccordionSummary,
   type AccordionSummaryProps as MuiAccordionSummaryProps
 } from '@mui/material';
+import React from 'react';
 
-export function AccordionSummary(props: MuiAccordionSummaryProps): JSX.Element {
-  return <MuiAccordionSummary {...props} />;
-}
+const AccordionSummary = React.forwardRef<HTMLDivElement, MuiAccordionSummaryProps>(
+  (props, ref) => {
+    return <MuiAccordionSummary {...props} ref={ref} />;
+  }
+);
 
 export default AccordionSummary;

src/base/AppBar/AppBar.tsx

@@ -1,7 +1,8 @@
 import { AppBar as MuiAppBar, type AppBarProps as MuiAppBarProps } from '@mui/material';
+import React from 'react';
 
-export function AppBar(props: MuiAppBarProps): JSX.Element {
-  return <MuiAppBar {...props} />;
-}
+const AppBar = React.forwardRef<HTMLDivElement, MuiAppBarProps>((props, ref) => {
+  return <MuiAppBar {...props} ref={ref} />;
+});
 
 export default AppBar;

src/base/Avatar/Avatar.tsx

@@ -1,7 +1,8 @@
 import { Avatar as MuiAvatar, type AvatarProps as MuiAvatarProps } from '@mui/material';
+import React from 'react';
 
-export function Avatar(props: MuiAvatarProps): JSX.Element {
-  return <MuiAvatar {...props} />;
-}
+const Avatar = React.forwardRef<HTMLDivElement, MuiAvatarProps>((props, ref) => {
+  return <MuiAvatar {...props} ref={ref} />;
+});
 
 export default Avatar;

src/base/Avatar/index.tsx

@@ -1,5 +1,5 @@
 import { AvatarProps } from '@mui/material';
-import { Avatar } from './Avatar';
+import Avatar from './Avatar';
 
 export { Avatar };
 export type { AvatarProps };

src/base/AvatarGroup/AvatarGroup.tsx

@@ -2,9 +2,10 @@ import {
   AvatarGroup as MuiAvatarGroup,
   type AvatarGroupProps as MuiAvatarGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function AvatarGroup(props: MuiAvatarGroupProps): JSX.Element {
-  return <MuiAvatarGroup {...props} />;
-}
+const AvatarGroup = React.forwardRef<HTMLDivElement, MuiAvatarGroupProps>((props, ref) => {
+  return <MuiAvatarGroup {...props} ref={ref} />;
+});
 
 export default AvatarGroup;

src/base/Backdrop/Backdrop.tsx

@@ -1,7 +1,8 @@
 import { Backdrop as MuiBackdrop, type BackdropProps as MuiBackdropProps } from '@mui/material';
+import React from 'react';
 
-export function Backdrop(props: MuiBackdropProps): JSX.Element {
-  return <MuiBackdrop {...props} />;
-}
+const Backdrop = React.forwardRef<HTMLDivElement, MuiBackdropProps>((props, ref) => {
+  return <MuiBackdrop {...props} ref={ref} />;
+});
 
 export default Backdrop;

src/base/Badge/Badge.tsx

@@ -1,7 +1,8 @@
 import { Badge as MuiBadge, type BadgeProps as MuiBadgeProps } from '@mui/material';
+import React from 'react';
 
-export function Badge(props: MuiBadgeProps): JSX.Element {
-  return <MuiBadge {...props} />;
-}
+const Badge = React.forwardRef<HTMLDivElement, MuiBadgeProps>((props, ref) => {
+  return <MuiBadge {...props} ref={ref} />;
+});
 
 export default Badge;