From 216a44a6862980c9ad9e84bd3782a7933463f6ae Mon Sep 17 00:00:00 2001
From: trevor-anderson <T.AndersonProperty@gmail.com>
Date: Sat, 18 Mar 2023 05:57:58 -0400
Subject: [PATCH] fix: provide 'onClick' prop to styled container for cursor
 styling

---
 src/components/Avatar/Avatar.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 6a9a3c96..0b2ce67b 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -19,6 +19,7 @@ export const Avatar = forwardRef<MaybeAvatarRef, AvatarProps>(function Avatar(
     profile,
     imageSrc,
     showDisplayName = false,
+    onClick,
     containerProps = {},
     avatarProps = {},
     ...props
@@ -30,11 +31,12 @@ export const Avatar = forwardRef<MaybeAvatarRef, AvatarProps>(function Avatar(
   const avatarRef = ref || localRef;
 
   return (
-    <AvatarContainer className="avatar-container" {...containerProps}>
+    <AvatarContainer className="avatar-container" isClickable={!!onClick} {...containerProps}>
       <MuiAvatar
         ref={avatarRef}
         alt={profile?.displayName ?? "User Avatar"}
         src={imageSrc || profile?.photoUrl}
+        onClick={onClick}
         {...avatarProps}
         {...props}
       >
@@ -52,17 +54,20 @@ export const Avatar = forwardRef<MaybeAvatarRef, AvatarProps>(function Avatar(
   );
 });
 
-const AvatarContainer = styled("div")(({ theme: { palette }, onClick }) => ({
+const AvatarContainer = styled("div", {
+  shouldForwardProp: (propName) => propName !== "isClickable"
+})<{ isClickable: boolean }>(({ theme: { palette }, isClickable }) => ({
   height: "100%",
   width: "100%",
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
+
   "& > .MuiAvatar-root": {
     overflow: "hidden !important", // <-- ensure can't be overridden
     background: `-webkit-linear-gradient(135deg, ${palette.primary.dark} 30%, ${palette.primary.light})`,
     "&:hover": {
-      cursor: onClick ? "pointer" : "auto"
+      cursor: isClickable ? "pointer" : "auto"
     }
   },
   "& > .MuiTypography-root": {
@@ -75,7 +80,7 @@ type AvatarProps = {
   profile?: UserProfile;
   imageSrc?: string;
   showDisplayName?: boolean;
-  containerProps?: React.ComponentProps<typeof AvatarContainer>;
+  containerProps?: Omit<React.ComponentProps<typeof AvatarContainer>, "isClickable">;
   avatarProps?: React.ComponentProps<typeof MuiAvatar>;
 } & React.ComponentProps<typeof MuiAvatar>;