ISSUE #5143 - make prop transient

frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx

@@ -18,7 +18,7 @@
 import { getJobAbbreviation } from '@/v5/store/jobs/jobs.helpers';
 import { IJob } from '@/v5/store/jobs/jobs.types';
 import { AvatarWrapper, Data, Heading, PopoverContainer } from '../userPopoverCircle/userPopover/userPopover.styles';
-import { PopoverCircle } from '../popoverCircle.styles';
+import { PopoverCircle } from '../popoverCircle.component';
 
 interface IJobPopover {
 	job: IJob;

frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx

@@ -18,7 +18,7 @@
 import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component';
 import { getJobAbbreviation } from '@/v5/store/jobs/jobs.helpers';
 import { IJob } from '@/v5/store/jobs/jobs.types';
-import { IPopoverCircle, PopoverCircle } from '../popoverCircle.styles';
+import { IPopoverCircle, PopoverCircle } from '../popoverCircle.component';
 import { JobPopover } from './jobPopover.component';
 
 type JobPopoverCircleProps = IPopoverCircle & {

frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.component.tsx

@@ -0,0 +1,29 @@
+/**
+ *  Copyright (C) 2024 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AvatarProps } from '@mui/material';
+import { forwardRef } from 'react';
+import { Popover } from './popoverCircle.styles';
+
+export type IPopoverCircle = AvatarProps & {
+	size?: 'small' | 'medium';
+	backgroundColor?: string;
+};
+
+export const PopoverCircle = forwardRef(({ backgroundColor, ...props }: IPopoverCircle, ref) => (
+	<Popover {...props} $backgroundColor={backgroundColor} ref={ref} />
+));

frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts

@@ -16,7 +16,6 @@
  */
 
 import { AuthAvatarMui } from '@components/authenticatedResource/authAvatarMui.component';
-import { AvatarProps } from '@mui/material';
 import { contrastColor } from 'contrast-color';
 import styled, { css } from 'styled-components';
 
@@ -27,15 +26,10 @@ const CIRCLE_SIZE = {
 
 const isLight = (color) => contrastColor({ bgColor: color, threshold: 170 }) === '#FFFFFF';
 
-export type IPopoverCircle = AvatarProps & {
-	size?: 'small' | 'medium';
-	backgroundColor?: string;
-};
-
-export const PopoverCircle = styled(AuthAvatarMui)<IPopoverCircle>`
+export const Popover = styled(AuthAvatarMui)<{ $backgroundColor }>`
 	margin: 0;
-	color: ${({ backgroundColor, theme }) => (isLight(backgroundColor) ? theme.palette.primary.contrast : theme.palette.secondary.main)};
-	background-color: ${({ backgroundColor, theme }) => backgroundColor || theme.palette.primary.contrast};
+	color: ${({ $backgroundColor, theme }) => (isLight($backgroundColor) ? theme.palette.primary.contrast : theme.palette.secondary.main)};
+	background-color: ${({ $backgroundColor, theme }) => $backgroundColor || theme.palette.primary.contrast};
 	pointer-events: auto;
 	font-size: 9px;
 	${({ size = 'medium' }) => css`

frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx

@@ -17,7 +17,7 @@
 
 import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component';
 import { IUser } from '@/v5/store/users/users.redux';
-import { IPopoverCircle } from '../popoverCircle.styles';
+import { IPopoverCircle } from '../popoverCircle.component';
 import { UserPopover } from './userPopover/userPopover.component';
 import { UserCircle } from './userPopoverCircle.styles';
 

frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts

@@ -18,7 +18,7 @@
 import { getUserInitials } from '@/v5/store/users/users.helpers';
 import styled from 'styled-components';
 import { IUser } from '@/v5/store/users/users.redux';
-import { IPopoverCircle, PopoverCircle } from '../popoverCircle.styles';
+import { IPopoverCircle, PopoverCircle } from '../popoverCircle.component';
 
 type IUserCircle = Omit<IPopoverCircle, 'children'> & {
 	user: IUser;

frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx

@@ -19,7 +19,7 @@ import { useSelector } from 'react-redux';
 import { selectJobs } from '@/v4/modules/jobs/jobs.selectors';
 import { JobPopoverCircle } from '@components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component';
 import { UserPopoverCircle } from '@components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component';
-import { IPopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { IPopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
 import { UsersHooksSelectors, TeamspacesHooksSelectors } from '@/v5/services/selectorsHooks';
 import { memo } from 'react';
 

frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts

@@ -15,7 +15,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
 import { Tooltip as TooltipBase } from '@mui/material';
 import styled from 'styled-components';
 

frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts

@@ -15,7 +15,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
 import styled from 'styled-components';
 
 export const ExtraAssigneesList = styled.ul`

frontend/stories/info/PopoverCircle.stories.tsx

@@ -16,7 +16,7 @@
  */
 import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component';
 import { Meta, StoryObj } from '@storybook/react';
-import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles';
+import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component';
 
 export default {
 	title: 'Info/PopoverCircle',