@atlaskit/profilecard 22.1.0 → 22.2.2

package/dist/es2019/components/Team/TeamForbiddenErrorState.js

@@ -16,7 +16,7 @@ export default (props => {
     }));
   }, [analytics]);
   return /*#__PURE__*/React.createElement(TeamForbiddenErrorStateWrapper, {
-    "data-testid": "team-profilecard-forbidden-error-state"
+    testId: "team-profilecard-forbidden-error-state"
   }, /*#__PURE__*/React.createElement(EmptyState, {
     header: intl.formatMessage(messages.teamForbiddenErrorStateTitle),
     description: intl.formatMessage(messages.teamForbiddenErrorStateDescription),

package/dist/es2019/components/Team/TeamLoadingState.js

@@ -12,10 +12,10 @@ export default (props => {
     }));
   }, [analytics]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {
     isLoading: true
   }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(LoadingWrapper, {
-    "data-testid": "team-profilecard-spinner"
+    testId: "team-profilecard-spinner"
   }, /*#__PURE__*/React.createElement(Spinner, null))));
 });

package/dist/es2019/components/Team/TeamProfileCard.js

@@ -10,7 +10,7 @@ import { LinkItem, MenuGroup } from '@atlaskit/menu';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
-import { Inline, Text } from '@atlaskit/primitives';
+import { Inline, Text } from '@atlaskit/primitives/compiled';
 import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import messages from '../../messages';
@@ -214,9 +214,10 @@ const TeamProfilecardContent = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {
-    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl
+    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
+    label: team.displayName
   }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: team.displayName
   }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && fg('show_verified_team_icon_in_profile_card') && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
@@ -251,7 +252,7 @@ const ErrorMessage = ({
     }
   }, [analytics, clientFetchProfile]);
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
-    "data-testid": "team-profilecard-error"
+    testId: "team-profilecard-error"
   }, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
     as: "p",
     weight: "semibold"
@@ -278,7 +279,7 @@ const TeamProfileCard = props => {
       });
     } else {
       return /*#__PURE__*/React.createElement(CardWrapper, {
-        "data-testid": "team-profilecard"
+        testId: "team-profilecard"
       }, /*#__PURE__*/React.createElement(ErrorMessage, {
         analytics: analytics,
         clientFetchProfile: clientFetchProfile,

package/dist/es2019/components/User/ProfileCardTrigger.js

@@ -73,7 +73,8 @@ export default function ProfilecardTriggerNext({
   viewingUserId,
   product,
   agentActions,
-  ariaHideProfileTrigger = false
+  ariaHideProfileTrigger = false,
+  isVisible: propsIsVisible
 }) {
   const {
     createAnalyticsEvent
@@ -82,8 +83,8 @@ export default function ProfilecardTriggerNext({
     formatMessage
   } = useIntl();
   const isMounted = useRef(false);
-  const showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
-  const hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
+  const showDelay = trigger === 'click' || propsIsVisible && fg('fix_profilecard_trigger_isvisible') ? 0 : DELAY_MS_SHOW;
+  const hideDelay = trigger === 'click' || propsIsVisible && fg('fix_profilecard_trigger_isvisible') ? 0 : DELAY_MS_HIDE;
   const showTimer = useRef(0);
   const hideTimer = useRef(0);
   const [visible, setVisible] = useState(false);
@@ -222,6 +223,16 @@ export default function ProfilecardTriggerNext({
   const onFocus = useCallback(() => {
     showProfilecard();
   }, [showProfilecard]);
+  useEffect(() => {
+    if (!fg('fix_profilecard_trigger_isvisible')) {
+      return;
+    }
+    if (propsIsVisible) {
+      showProfilecard();
+    } else {
+      hideProfilecard();
+    }
+  }, [hideProfilecard, propsIsVisible, showProfilecard]);
   const containerListeners = useMemo(() => trigger === 'hover' ? {
     onMouseEnter: onMouseEnter,
     onMouseLeave: hideProfilecard,

package/dist/es2019/styled/Card.js

@@ -1,4 +1,4 @@
-/* Card.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* Card.tsx generated by @compiled/babel-plugin v0.36.1 */
 /* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
 import "./Card.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/styled/Error.compiled.css

@@ -0,0 +1,9 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._y3gn1h6o{text-align:center}

package/dist/es2019/styled/Error.js

@@ -1,26 +1,49 @@
+/* Error.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./Error.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { N200 } from '@atlaskit/theme/colors';
 import { errorIconColor, errorTitleColor } from './constants';
-
+const styles = {
+  errorWrapper: "_y3gn1h6o _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb",
+  errorTitle: "_11c81oud _syaz1fxt _19pku2gc",
+  teamErrorText: "_syaz1wmz _19pku2gc"
+};
+export const ErrorWrapper = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.errorWrapper)
+}, props)) : /*#__PURE__*/React.createElement(ErrorWrapperLegacy, {
+  "data-testId": props.testId
+}, props.children);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ErrorWrapper = styled.div({
+const ErrorWrapperLegacy = styled.div({
   textAlign: 'center',
   padding: "var(--ds-space-300, 24px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   color: errorIconColor
 });
-
+export const ErrorTitle = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.errorTitle)
+}, props.children) : /*#__PURE__*/React.createElement(ErrorTitleLegacy, null, props.children);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ErrorTitle = styled.p({
+const ErrorTitleLegacy = styled.p({
   font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   color: errorTitleColor,
   margin: `${"var(--ds-space-100, 8px)"} 0`
 });
+export const TeamErrorText = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.teamErrorText)
+}, props.children) : /*#__PURE__*/React.createElement(TeamErrorTextLegacy, null, props.children);
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const TeamErrorText = styled.p({
+const TeamErrorTextLegacy = styled.p({
   color: `var(--ds-text-subtlest, ${N200})`,
   marginTop: "var(--ds-space-100, 8px)"
 });

package/dist/es2019/styled/ReportingLines.js

@@ -1,4 +1,4 @@
-/* ReportingLines.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* ReportingLines.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ReportingLines.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/es2019/styled/TeamCard.compiled.css

@@ -0,0 +1,40 @@
+._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._12vemgnk{background-repeat:no-repeat}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._18u0x0bf{margin-left:var(--ds-space-negative-100,-8px)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._19pk1jfw{margin-top:var(--ds-space-500,40px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1bsbnklw{width:20pc}
+._1e0c1kw7{display:inherit}
+._1e0c1txw{display:flex}
+._1e0ccj1k{display:-webkit-box}
+._1lrw1dfr{background-size:cover}
+._1p1dglyw{text-transform:none}
+._1reo15vq{overflow-x:hidden}
+._1tke1l8a{min-height:78pt}
+._2hwx10v4{margin-right:var(--ds-space-negative-300,-24px)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1qr7{height:8pc}
+._c71l1wqb{max-height:60px}
+._c71lckbl{max-height:3pc}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._i0dlidpf{flex-basis:0}
+._kqswh2mm{position:relative}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
+._otyr1jfw{margin-bottom:var(--ds-space-500,40px)}
+._otyridpf{margin-bottom:0}
+._ouxl1ssb{background-position:50%}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._y3gn1h6o{text-align:center}

package/dist/es2019/styled/TeamCard.js

@@ -1,16 +1,53 @@
+/* TeamCard.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./TeamCard.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import styled from '@emotion/styled';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import { N20, N200 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { bgColor, teamHeaderBgColor } from './constants';
-
+const styles = {
+  cardtriggerwrapper: "_1e0c1kw7",
+  cardwrapper: "_2rkoglpi _1bsbnklw _kqswh2mm",
+  teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
+  cardheader: "_12vemgnk _ouxl1ssb _1lrw1dfr _4t3i1qr7",
+  cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
+  teamname: "_11c8o0gd _1reo15vq _18m915vq _1p1dglyw _c71lckbl _1e0ccj1k",
+  membercount: "_syaz1wmz _19pk1b66",
+  avatarsection: "_19pkpxbi _18u01i6y",
+  descriptionwrapper: "_19pkpxbi _4cvr1h6o _1e0c1txw",
+  description: "_1reo15vq _18m915vq _c71l1wqb _1e0ccj1k",
+  actionbuttons: "_1bsb1osq _1e0c1txw _1bah1yb4 _19pk1ejb _2hwx10v4 _otyridpf _18u0x0bf",
+  wrappedbutton: "_i0dlidpf _16jlkb7n _18u0u2gc",
+  morebutton: "_18u0u2gc",
+  loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw",
+  accesslocksvgwrapper: "_otyr1ejb"
+};
+export const CardTriggerWrapper = () => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.cardtriggerwrapper)
+}) : /*#__PURE__*/React.createElement(CardTriggerWrapperLegacy, null);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CardTriggerWrapper = styled.div({
+const CardTriggerWrapperLegacy = styled.div({
   display: 'inherit'
 });
-
+export const CardWrapper = ({
+  testId,
+  children
+}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.cardwrapper),
+  backgroundColor: "elevation.surface.overlay",
+  testId: testId
+}, children) : /*#__PURE__*/React.createElement(CardWrapperLegacy, {
+  "data-testid": testId
+}, children);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CardWrapper = styled.div({
+const CardWrapperLegacy = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: bgColor,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -21,16 +58,37 @@ export const CardWrapper = styled.div({
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale'
 });
-
+export const TeamForbiddenErrorStateWrapper = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.teamforbiddenerrorstatewrapper)
+}, props)) : /*#__PURE__*/React.createElement(TeamForbiddenErrorStateWrapperLegacy, {
+  "data-testid": props.testId
+}, props.children);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const TeamForbiddenErrorStateWrapper = styled.div({
+const TeamForbiddenErrorStateWrapperLegacy = styled.div({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: '320px',
   position: 'relative'
 });
+export const CardHeader = ({
+  image,
+  isLoading,
+  label
+}) => fg('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.cardheader),
+  backgroundColor: "color.background.neutral"
+}) : /*#__PURE__*/React.createElement(Box, {
+  as: "img",
+  alt: label || '',
+  src: image,
+  xcss: cx(styles.cardheader),
+  backgroundColor: "color.background.neutral"
+}) : /*#__PURE__*/React.createElement(CardHeaderLegacy, {
+  image: image,
+  isLoading: isLoading
+});
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CardHeader = styled.div`
+const CardHeaderLegacy = styled.div`
 	background-color: ${props => props.isLoading ? `var(--ds-background-neutral, ${N20})` : props.image ? '' : teamHeaderBgColor};
 	background-image: ${props => props.image ? `url(${props.image})` : ''};
 	background-repeat: no-repeat;
@@ -39,18 +97,22 @@ export const CardHeader = styled.div`
 	box-sizing: content-box;
 	height: 128px;
 `;
-
+export const CardContent = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.cardcontent)
+}, props)) : /*#__PURE__*/React.createElement(CardContentLegacy, props);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const CardContent = styled.div({
+const CardContentLegacy = styled.div({
   display: 'flex',
   flexDirection: 'column',
   padding: "var(--ds-space-300, 24px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   minHeight: '104px'
 });
-
+export const TeamName = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.teamname)
+}, props)) : /*#__PURE__*/React.createElement(TeamNameLegacy, props);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-export const TeamName = styled.h6({
+const TeamNameLegacy = styled.h6({
   font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   textTransform: 'none',
   overflow: 'hidden',
@@ -59,78 +121,86 @@ export const TeamName = styled.h6({
   WebkitLineClamp: 2,
   WebkitBoxOrient: 'vertical'
 });
-
+export const MemberCount = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.membercount)
+}, props)) : /*#__PURE__*/React.createElement(MemberCountLegacy, props);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const MemberCount = styled.div({
+const MemberCountLegacy = styled.div({
   color: `var(--ds-text-subtlest, ${N200})`,
   marginTop: "var(--ds-space-050, 4px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const AvatarSection = styled.div({
+export const AvatarSection = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.avatarsection)
+}, props)) : /*#__PURE__*/React.createElement(AvatarSectionLegacy, props);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+const AvatarSectionLegacy = styled.div({
   marginTop: "var(--ds-space-200, 16px)",
   marginLeft: "var(--ds-space-negative-025, -2px)"
 });
-
+export const DescriptionWrapper = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.descriptionwrapper)
+}, props)) : /*#__PURE__*/React.createElement(DescriptionWrapperLegacy, props);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const DescriptionWrapper = styled.div({
+const DescriptionWrapperLegacy = styled.div({
   marginTop: "var(--ds-space-200, 16px)",
   alignItems: 'center',
   display: 'flex'
 });
-
+export const Description = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
+  xcss: cx(styles.description)
+}, /*#__PURE__*/React.createElement(Text, _extends({
+  maxLines: 3
+}, props))) : /*#__PURE__*/React.createElement(DescriptionLegacy, props);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const Description = styled.span({
+const DescriptionLegacy = styled.span({
   overflow: 'hidden',
   maxHeight: '60px',
   display: '-webkit-box',
   WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical'
 });
-
+export const ActionButtons = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.actionbuttons),
+  backgroundColor: "elevation.surface.overlay"
+}, props)) : /*#__PURE__*/React.createElement(ActionButtonsLegacy, props);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ActionButtons = styled.div({
+const ActionButtonsLegacy = styled.div({
   width: 'calc(100% + 8px)',
   display: 'flex',
   justifyContent: 'space-between',
   margin: `${"var(--ds-space-300, 24px)"} ${"var(--ds-space-negative-300, -24px)"} 0 ${"var(--ds-space-negative-100, -8px)"}`,
   backgroundColor: "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))"
 });
-
+export const WrappedButton = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.wrappedbutton)
+}, props)) : /*#__PURE__*/React.createElement(WrappedButtonLegacy, props);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const WrappedButton = styled.div({
+const WrappedButtonLegacy = styled.div({
   flexBasis: 0,
   flexGrow: 1,
   marginLeft: "var(--ds-space-100, 8px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const MoreButton = styled.div({
+export const MoreButton = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.morebutton)
+}, props)) : /*#__PURE__*/React.createElement(MoreButtonLegacy, props);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+const MoreButtonLegacy = styled.div({
   marginLeft: "var(--ds-space-100, 8px)"
 });
-
+export const LoadingWrapper = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.loadingwrapper)
+}, props)) : /*#__PURE__*/React.createElement(LoadingWrapperLegacy, {
+  "data-testid": props.testId
+}, props.children);
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LoadingWrapper = styled.div({
+const LoadingWrapperLegacy = styled.div({
   textAlign: 'center',
   marginTop: "var(--ds-space-500, 40px)"
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const AccessLockSVGWrapper = styled.div({
+export const AccessLockSVGWrapper = props => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
+  xcss: cx(styles.accesslocksvgwrapper)
+}, props)) : /*#__PURE__*/React.createElement(AccessLockSVGWrapperLegacy, props);
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
+const AccessLockSVGWrapperLegacy = styled.div({
   marginBottom: "var(--ds-space-300, 24px)"
-});
-
-// export const LoadingTeamName = styled.div`
-//   width: 175px;
-//   height: ${gridSize () *3)px;
-//   border-radius: ${borderRadius}px;
-//   background-color: #f4f5f7;
-// `;
-
-// export const LoadingMemberCount = styled.div`
-//   width: 81px;
-//   height: ${gridSize () *2)px;
-//   border-radius: 3px;
-//   background-color: #f4f5f7;
-//   margin: 4px 0;
-// `;
+});

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "22.1.0",
+    packageVersion: "22.2.2",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "22.1.0");
+  headers.append('atl-client-version', "22.2.2");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "22.1.0");
+  headers.append('atl-client-version', "22.2.2");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/Error/ErrorMessage.js

@@ -27,7 +27,7 @@ var ErrorMessage = function ErrorMessage(props) {
     }, "Try again and we\u2019ll give it another shot"));
   };
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
-    "data-testid": "profilecard-error"
+    testId: "profilecard-error"
   }, /*#__PURE__*/React.createElement(IconError, {
     label: "icon error",
     size: "xlarge"

package/dist/esm/components/Team/TeamForbiddenErrorState.js

@@ -16,7 +16,7 @@ export default (function (props) {
     });
   }, [analytics]);
   return /*#__PURE__*/React.createElement(TeamForbiddenErrorStateWrapper, {
-    "data-testid": "team-profilecard-forbidden-error-state"
+    testId: "team-profilecard-forbidden-error-state"
   }, /*#__PURE__*/React.createElement(EmptyState, {
     header: intl.formatMessage(messages.teamForbiddenErrorStateTitle),
     description: intl.formatMessage(messages.teamForbiddenErrorStateDescription),

package/dist/esm/components/Team/TeamLoadingState.js

@@ -12,10 +12,10 @@ export default (function (props) {
     });
   }, [analytics]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {
     isLoading: true
   }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(LoadingWrapper, {
-    "data-testid": "team-profilecard-spinner"
+    testId: "team-profilecard-spinner"
   }, /*#__PURE__*/React.createElement(Spinner, null))));
 });

package/dist/esm/components/Team/TeamProfileCard.js

@@ -15,7 +15,7 @@ import { LinkItem, MenuGroup } from '@atlaskit/menu';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
-import { Inline, Text } from '@atlaskit/primitives';
+import { Inline, Text } from '@atlaskit/primitives/compiled';
 import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import messages from '../../messages';
@@ -240,9 +240,10 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
-    "data-testid": "team-profilecard"
+    testId: "team-profilecard"
   }, /*#__PURE__*/React.createElement(CardHeader, {
-    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl
+    image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
+    label: team.displayName
   }), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Tooltip, {
     content: team.displayName
   }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && fg('show_verified_team_icon_in_profile_card') && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
@@ -280,7 +281,7 @@ var ErrorMessage = function ErrorMessage(_ref6) {
     }
   }, [analytics, clientFetchProfile]);
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
-    "data-testid": "team-profilecard-error"
+    testId: "team-profilecard-error"
   }, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
     as: "p",
     weight: "semibold"
@@ -305,7 +306,7 @@ var TeamProfileCard = function TeamProfileCard(props) {
       });
     } else {
       return /*#__PURE__*/React.createElement(CardWrapper, {
-        "data-testid": "team-profilecard"
+        testId: "team-profilecard"
       }, /*#__PURE__*/React.createElement(ErrorMessage, {
         analytics: analytics,
         clientFetchProfile: clientFetchProfile,

package/dist/esm/components/User/ProfileCardTrigger.js

@@ -86,14 +86,15 @@ export default function ProfilecardTriggerNext(_ref2) {
     product = _ref2.product,
     agentActions = _ref2.agentActions,
     _ref2$ariaHideProfile = _ref2.ariaHideProfileTrigger,
-    ariaHideProfileTrigger = _ref2$ariaHideProfile === void 0 ? false : _ref2$ariaHideProfile;
+    ariaHideProfileTrigger = _ref2$ariaHideProfile === void 0 ? false : _ref2$ariaHideProfile,
+    propsIsVisible = _ref2.isVisible;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var isMounted = useRef(false);
-  var showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
-  var hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
+  var showDelay = trigger === 'click' || propsIsVisible && fg('fix_profilecard_trigger_isvisible') ? 0 : DELAY_MS_SHOW;
+  var hideDelay = trigger === 'click' || propsIsVisible && fg('fix_profilecard_trigger_isvisible') ? 0 : DELAY_MS_HIDE;
   var showTimer = useRef(0);
   var hideTimer = useRef(0);
   var _useState = useState(false),
@@ -279,6 +280,16 @@ export default function ProfilecardTriggerNext(_ref2) {
   var onFocus = useCallback(function () {
     showProfilecard();
   }, [showProfilecard]);
+  useEffect(function () {
+    if (!fg('fix_profilecard_trigger_isvisible')) {
+      return;
+    }
+    if (propsIsVisible) {
+      showProfilecard();
+    } else {
+      hideProfilecard();
+    }
+  }, [hideProfilecard, propsIsVisible, showProfilecard]);
   var containerListeners = useMemo(function () {
     return trigger === 'hover' ? {
       onMouseEnter: onMouseEnter,

package/dist/esm/styled/Card.js

@@ -1,4 +1,4 @@
-/* Card.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* Card.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 import "./Card.compiled.css";

package/dist/esm/styled/Error.compiled.css

@@ -0,0 +1,9 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._y3gn1h6o{text-align:center}