@atlaskit/profilecard 24.38.0 → 24.39.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/profilecard
 
+## 24.39.0
+
+### Minor Changes
+
+- [`ab3866dd7f659`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab3866dd7f659) -
+  Focus on the heading in a profile card when it's rendered to keep the user in the focus trap
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.38.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -107,6 +107,9 @@
 		{
 			"path": "../../../design-system/theme/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../editor/tmp-editor-statsig/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -107,6 +107,9 @@
 		{
 			"path": "../../../design-system/theme/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../editor/tmp-editor-statsig/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -107,6 +107,9 @@
 		{
 			"path": "../../../design-system/theme/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../editor/tmp-editor-statsig/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
 		},

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./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', "24.37.3");
+  headers.append('atl-client-version', "24.38.0");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.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', "24.37.3");
+  headers.append('atl-client-version', "24.38.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/User/ProfileCard.js

@@ -170,6 +170,7 @@ var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInte
     actions: realActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
     isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard,
+    isRenderedInPortal: props.isRenderedInPortal,
     fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   }))))));
 };
@@ -178,6 +179,7 @@ var Actions = function Actions(_ref) {
     fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
     fireAnalyticsWithDurationNext = _ref.fireAnalyticsWithDurationNext,
     isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard,
+    isRenderedInPortal = _ref.isRenderedInPortal,
     fullName = _ref.fullName;
   var onActionClick = (0, _react.useCallback)(function (action, args, event, index) {
     if ((0, _platformFeatureFlags.fg)('ptc-enable-profile-card-analytics-refactor')) {
@@ -228,7 +230,7 @@ var Actions = function Actions(_ref) {
       },
       href: action.link || '',
       target: action.target,
-      autoFocus: index === 0 && isTriggeredUsingKeyboard,
+      autoFocus: index === 0 && isTriggeredUsingKeyboard && !isRenderedInPortal,
       id: "action-button-".concat(action.id),
       "aria-labelledby": (0, _platformFeatureFlags.fg)('enable_userprofilecard_arialabelfix') ? "action-button-".concat(action.id, " profilecard-name-label") : ''
     }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null)));

package/dist/cjs/components/User/ProfileCardDetails.js

@@ -17,6 +17,7 @@ var _reactIntlNext = require("react-intl-next");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -35,7 +36,7 @@ var styles = {
   disabledAccount: "_syazi7uo",
   activeAccount: "_syaz15cr"
 };
-var renderName = function renderName(nickname, fullName, meta, nameRef) {
+var renderName = function renderName(nickname, fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard) {
   if (!fullName && !nickname) {
     return null;
   }
@@ -58,12 +59,15 @@ var renderName = function renderName(nickname, fullName, meta, nameRef) {
     as: "h2",
     xcss: (0, _react2.cx)(styles.fullNameLabel, styles.activeAccount, meta ? (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
-    id: "profilecard-name-label"
+    id: "profilecard-name-label",
+    tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
   }, displayName)) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    ref: nameRef,
     as: "h2",
     xcss: (0, _react2.cx)(styles.fullNameLabel, styles.activeAccount, meta ? (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : (0, _platformFeatureFlags.fg)('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
-    id: "profilecard-name-label"
+    id: "profilecard-name-label",
+    tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
   }, displayName);
 };
 var disabledAccountDesc = function disabledAccountDesc(statusModifiedDate, disabledAccountMessage) {
@@ -129,8 +133,21 @@ var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
 };
 var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetails(props) {
   var meta = props.meta,
-    status = props.status;
+    status = props.status,
+    isRenderedInPortal = props.isRenderedInPortal,
+    isTriggeredUsingKeyboard = props.isTriggeredUsingKeyboard;
   var nameRef = (0, _react.useRef)(null);
+  _react.default.useEffect(function () {
+    if (nameRef !== null && nameRef !== void 0 && nameRef.current && isRenderedInPortal && isTriggeredUsingKeyboard && (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)) {
+      var rafId = requestAnimationFrame(function () {
+        var _nameRef$current;
+        (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 || _nameRef$current.focus();
+      });
+      return function () {
+        cancelAnimationFrame(rafId);
+      };
+    }
+  }, [isRenderedInPortal, isTriggeredUsingKeyboard]);
   if (props.isServiceAccount) {
     return /*#__PURE__*/_react.default.createElement(ServiceAccountProfileCardDetails, props);
   }
@@ -145,7 +162,7 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
   var lozenges = /*#__PURE__*/_react.default.createElement(CustomLozenges, {
     lozenges: props.customLozenges
   });
-  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+  return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     paddingBlockStart: "space.150"
   }, lozenges) : lozenges, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.detailedListWrapperNext

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

@@ -20,6 +20,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
 var _constants = require("@atlaskit/theme/constants");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _filterActions = _interopRequireDefault(require("../../internal/filterActions"));
 var _getLabelMessage = _interopRequireDefault(require("../../internal/getLabelMessage"));
 var _UserTrigger = require("../../styled/UserTrigger");
@@ -45,6 +46,7 @@ function ProfileCardContent(_ref) {
     hasError = _ref.hasError,
     errorType = _ref.errorType,
     agentActions = _ref.agentActions,
+    isRenderedInPortal = _ref.isRenderedInPortal,
     addFlag = _ref.addFlag,
     hideAgentMoreActions = _ref.hideAgentMoreActions,
     hideAiDisclaimer = _ref.hideAiDisclaimer;
@@ -64,6 +66,7 @@ function ProfileCardContent(_ref) {
     return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
       fallback: null
     }, /*#__PURE__*/_react.default.createElement(_lazyProfileCard.ProfileCardLazy, (0, _extends2.default)({}, profilecardProps, {
+      isRenderedInPortal: isRenderedInPortal,
       actions: profileCardAction,
       hasError: hasError,
       errorType: errorType,
@@ -100,6 +103,7 @@ function ProfilecardTriggerNext(_ref2) {
     _ref2$ariaHideProfile = _ref2.ariaHideProfileTrigger,
     ariaHideProfileTrigger = _ref2$ariaHideProfile === void 0 ? false : _ref2$ariaHideProfile,
     propsIsVisible = _ref2.isVisible,
+    isRenderedInPortal = _ref2.isRenderedInPortal,
     ssrPlaceholderId = _ref2.ssrPlaceholderId,
     customShowDelay = _ref2.showDelay,
     customHideDelay = _ref2.hideDelay;
@@ -395,7 +399,8 @@ function ProfilecardTriggerNext(_ref2) {
         agentActions: agentActions,
         addFlag: addFlag,
         hideAgentMoreActions: hideAgentMoreActions,
-        hideAiDisclaimer: hideAiDisclaimer
+        hideAiDisclaimer: hideAiDisclaimer,
+        isRenderedInPortal: isRenderedInPortal
       }));
     },
     trigger: function trigger(triggerProps) {
@@ -426,7 +431,7 @@ function ProfilecardTriggerNext(_ref2) {
     },
     zIndex: _constants.layers.modal(),
     shouldUseCaptureOnOutsideClick: true,
-    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
+    autoFocus: (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? isRenderedInPortal && isTriggeredUsingKeyboard ? false : autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click' : autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
     // This feature gate is currently enabled only for Jira_Web to avoid UI issues in Confluence_Web.
     ,
     shouldRenderToParent: (0, _platformFeatureFlags.fg)('enable_appropriate_reading_order_in_profile_card'),

package/dist/cjs/util/analytics.js

@@ -13,7 +13,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var ANALYTICS_CHANNEL = 'peopleTeams';
 var PACKAGE_META_DATA = exports.PACKAGE_META_DATA = {
   packageName: "@atlaskit/profilecard",
-  packageVersion: "24.37.3"
+  packageVersion: "24.38.0"
 };
 var runItLater = function runItLater(cb) {
   var requestIdleCallback = window.requestIdleCallback;
@@ -58,7 +58,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "24.37.3"
+      packageVersion: "24.38.0"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "24.37.3");
+  headers.append('atl-client-version', "24.38.0");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -78,7 +78,7 @@ export const 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', "24.37.3");
+  headers.append('atl-client-version', "24.38.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

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

@@ -155,6 +155,7 @@ export const ProfilecardInternal = props => {
     actions: realActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
     isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard,
+    isRenderedInPortal: props.isRenderedInPortal,
     fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   }))))));
 };
@@ -163,6 +164,7 @@ const Actions = ({
   fireAnalyticsWithDuration,
   fireAnalyticsWithDurationNext,
   isTriggeredUsingKeyboard,
+  isRenderedInPortal,
   fullName
 }) => {
   const onActionClick = useCallback((action, args, event, index) => {
@@ -206,7 +208,7 @@ const Actions = ({
       onClick: (event, ...args) => onActionClick(action, args, event, index),
       href: action.link || '',
       target: action.target,
-      autoFocus: index === 0 && isTriggeredUsingKeyboard,
+      autoFocus: index === 0 && isTriggeredUsingKeyboard && !isRenderedInPortal,
       id: `action-button-${action.id}`,
       "aria-labelledby": fg('enable_userprofilecard_arialabelfix') ? `action-button-${action.id} profilecard-name-label` : ''
     }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null)));

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

@@ -8,6 +8,7 @@ import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -24,7 +25,7 @@ const styles = {
   disabledAccount: "_syazi7uo",
   activeAccount: "_syaz15cr"
 };
-const renderName = (nickname, fullName, meta, nameRef) => {
+const renderName = (nickname, fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard) => {
   if (!fullName && !nickname) {
     return null;
   }
@@ -47,12 +48,15 @@ const renderName = (nickname, fullName, meta, nameRef) => {
     as: "h2",
     xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
-    id: "profilecard-name-label"
+    id: "profilecard-name-label",
+    tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
   }, displayName)) : /*#__PURE__*/React.createElement(Box, {
+    ref: nameRef,
     as: "h2",
     xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
-    id: "profilecard-name-label"
+    id: "profilecard-name-label",
+    tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
   }, displayName);
 };
 const disabledAccountDesc = (statusModifiedDate, disabledAccountMessage, status = 'closed') => {
@@ -122,9 +126,22 @@ const DisabledProfileCardDetails = props => {
 export const ProfileCardDetails = props => {
   const {
     meta,
-    status
+    status,
+    isRenderedInPortal,
+    isTriggeredUsingKeyboard
   } = props;
   const nameRef = useRef(null);
+  React.useEffect(() => {
+    if (nameRef !== null && nameRef !== void 0 && nameRef.current && isRenderedInPortal && isTriggeredUsingKeyboard && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)) {
+      const rafId = requestAnimationFrame(() => {
+        var _nameRef$current;
+        (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 ? void 0 : _nameRef$current.focus();
+      });
+      return () => {
+        cancelAnimationFrame(rafId);
+      };
+    }
+  }, [isRenderedInPortal, isTriggeredUsingKeyboard]);
   if (props.isServiceAccount) {
     return /*#__PURE__*/React.createElement(ServiceAccountProfileCardDetails, props);
   }
@@ -139,7 +156,7 @@ export const ProfileCardDetails = props => {
   const lozenges = /*#__PURE__*/React.createElement(CustomLozenges, {
     lozenges: props.customLozenges
   });
-  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/React.createElement(Box, {
     paddingBlockStart: "space.150"
   }, lozenges) : lozenges, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.detailedListWrapperNext

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

@@ -6,6 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
 import { layers } from '@atlaskit/theme/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import filterActionsInner from '../../internal/filterActions';
 import getLabelMessage from '../../internal/getLabelMessage';
 import { CardWrapper } from '../../styled/UserTrigger';
@@ -26,6 +27,7 @@ function ProfileCardContent({
   hasError,
   errorType,
   agentActions,
+  isRenderedInPortal,
   addFlag,
   hideAgentMoreActions,
   hideAiDisclaimer
@@ -46,6 +48,7 @@ function ProfileCardContent({
     return /*#__PURE__*/React.createElement(Suspense, {
       fallback: null
     }, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
+      isRenderedInPortal: isRenderedInPortal,
       actions: profileCardAction,
       hasError: hasError,
       errorType: errorType,
@@ -78,6 +81,7 @@ export default function ProfilecardTriggerNext({
   hideAiDisclaimer,
   ariaHideProfileTrigger = false,
   isVisible: propsIsVisible,
+  isRenderedInPortal,
   ssrPlaceholderId,
   showDelay: customShowDelay,
   hideDelay: customHideDelay
@@ -324,7 +328,8 @@ export default function ProfilecardTriggerNext({
       agentActions: agentActions,
       addFlag: addFlag,
       hideAgentMoreActions: hideAgentMoreActions,
-      hideAiDisclaimer: hideAiDisclaimer
+      hideAiDisclaimer: hideAiDisclaimer,
+      isRenderedInPortal: isRenderedInPortal
     })),
     trigger: triggerProps => {
       const {
@@ -358,7 +363,7 @@ export default function ProfilecardTriggerNext({
     },
     zIndex: layers.modal(),
     shouldUseCaptureOnOutsideClick: true,
-    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
+    autoFocus: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? isRenderedInPortal && isTriggeredUsingKeyboard ? false : autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click' : autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
     // This feature gate is currently enabled only for Jira_Web to avoid UI issues in Confluence_Web.
     ,
     shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card'),

package/dist/es2019/util/analytics.js

@@ -4,7 +4,7 @@ import { getPageTime } from './performance';
 const ANALYTICS_CHANNEL = 'peopleTeams';
 export const PACKAGE_META_DATA = {
   packageName: "@atlaskit/profilecard",
-  packageVersion: "24.37.3"
+  packageVersion: "24.38.0"
 };
 const runItLater = cb => {
   const requestIdleCallback = window.requestIdleCallback;
@@ -45,7 +45,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "24.37.3",
+    packageVersion: "24.38.0",
     ...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', "24.37.3");
+  headers.append('atl-client-version', "24.38.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -59,7 +59,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', "24.37.3");
+  headers.append('atl-client-version', "24.38.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -161,6 +161,7 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     actions: realActions,
     fireAnalyticsWithDuration: fireAnalyticsWithDuration,
     isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard,
+    isRenderedInPortal: props.isRenderedInPortal,
     fireAnalyticsWithDurationNext: fireAnalyticsWithDurationNext
   }))))));
 };
@@ -169,6 +170,7 @@ var Actions = function Actions(_ref) {
     fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
     fireAnalyticsWithDurationNext = _ref.fireAnalyticsWithDurationNext,
     isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard,
+    isRenderedInPortal = _ref.isRenderedInPortal,
     fullName = _ref.fullName;
   var onActionClick = useCallback(function (action, args, event, index) {
     if (fg('ptc-enable-profile-card-analytics-refactor')) {
@@ -219,7 +221,7 @@ var Actions = function Actions(_ref) {
       },
       href: action.link || '',
       target: action.target,
-      autoFocus: index === 0 && isTriggeredUsingKeyboard,
+      autoFocus: index === 0 && isTriggeredUsingKeyboard && !isRenderedInPortal,
       id: "action-button-".concat(action.id),
       "aria-labelledby": fg('enable_userprofilecard_arialabelfix') ? "action-button-".concat(action.id, " profilecard-name-label") : ''
     }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null)));

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

@@ -10,6 +10,7 @@ import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -26,7 +27,7 @@ var styles = {
   disabledAccount: "_syazi7uo",
   activeAccount: "_syaz15cr"
 };
-var renderName = function renderName(nickname, fullName, meta, nameRef) {
+var renderName = function renderName(nickname, fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard) {
   if (!fullName && !nickname) {
     return null;
   }
@@ -49,12 +50,15 @@ var renderName = function renderName(nickname, fullName, meta, nameRef) {
     as: "h2",
     xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
-    id: "profilecard-name-label"
+    id: "profilecard-name-label",
+    tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
   }, displayName)) : /*#__PURE__*/React.createElement(Box, {
+    ref: nameRef,
     as: "h2",
     xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? fg('enable_absolute_positioning_profile_card') ? styles.metaLabelWithHighSpecificity : styles.metaLabel : fg('enable_absolute_positioning_profile_card') ? styles.noMetaLabelWithHighSpecificity : styles.noMetaLabel),
     testId: "profilecard-name",
-    id: "profilecard-name-label"
+    id: "profilecard-name-label",
+    tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
   }, displayName);
 };
 var disabledAccountDesc = function disabledAccountDesc(statusModifiedDate, disabledAccountMessage) {
@@ -120,8 +124,21 @@ var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
 };
 export var ProfileCardDetails = function ProfileCardDetails(props) {
   var meta = props.meta,
-    status = props.status;
+    status = props.status,
+    isRenderedInPortal = props.isRenderedInPortal,
+    isTriggeredUsingKeyboard = props.isTriggeredUsingKeyboard;
   var nameRef = useRef(null);
+  React.useEffect(function () {
+    if (nameRef !== null && nameRef !== void 0 && nameRef.current && isRenderedInPortal && isTriggeredUsingKeyboard && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)) {
+      var rafId = requestAnimationFrame(function () {
+        var _nameRef$current;
+        (_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 || _nameRef$current.focus();
+      });
+      return function () {
+        cancelAnimationFrame(rafId);
+      };
+    }
+  }, [isRenderedInPortal, isTriggeredUsingKeyboard]);
   if (props.isServiceAccount) {
     return /*#__PURE__*/React.createElement(ServiceAccountProfileCardDetails, props);
   }
@@ -136,7 +153,7 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
   var lozenges = /*#__PURE__*/React.createElement(CustomLozenges, {
     lozenges: props.customLozenges
   });
-  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/React.createElement(Box, {
     paddingBlockStart: "space.150"
   }, lozenges) : lozenges, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.detailedListWrapperNext

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

@@ -16,6 +16,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
 import { layers } from '@atlaskit/theme/constants';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import filterActionsInner from '../../internal/filterActions';
 import getLabelMessage from '../../internal/getLabelMessage';
 import { CardWrapper } from '../../styled/UserTrigger';
@@ -36,6 +37,7 @@ function ProfileCardContent(_ref) {
     hasError = _ref.hasError,
     errorType = _ref.errorType,
     agentActions = _ref.agentActions,
+    isRenderedInPortal = _ref.isRenderedInPortal,
     addFlag = _ref.addFlag,
     hideAgentMoreActions = _ref.hideAgentMoreActions,
     hideAiDisclaimer = _ref.hideAiDisclaimer;
@@ -55,6 +57,7 @@ function ProfileCardContent(_ref) {
     return /*#__PURE__*/React.createElement(Suspense, {
       fallback: null
     }, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
+      isRenderedInPortal: isRenderedInPortal,
       actions: profileCardAction,
       hasError: hasError,
       errorType: errorType,
@@ -91,6 +94,7 @@ export default function ProfilecardTriggerNext(_ref2) {
     _ref2$ariaHideProfile = _ref2.ariaHideProfileTrigger,
     ariaHideProfileTrigger = _ref2$ariaHideProfile === void 0 ? false : _ref2$ariaHideProfile,
     propsIsVisible = _ref2.isVisible,
+    isRenderedInPortal = _ref2.isRenderedInPortal,
     ssrPlaceholderId = _ref2.ssrPlaceholderId,
     customShowDelay = _ref2.showDelay,
     customHideDelay = _ref2.hideDelay;
@@ -386,7 +390,8 @@ export default function ProfilecardTriggerNext(_ref2) {
         agentActions: agentActions,
         addFlag: addFlag,
         hideAgentMoreActions: hideAgentMoreActions,
-        hideAiDisclaimer: hideAiDisclaimer
+        hideAiDisclaimer: hideAiDisclaimer,
+        isRenderedInPortal: isRenderedInPortal
       }));
     },
     trigger: function trigger(triggerProps) {
@@ -417,7 +422,7 @@ export default function ProfilecardTriggerNext(_ref2) {
     },
     zIndex: layers.modal(),
     shouldUseCaptureOnOutsideClick: true,
-    autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
+    autoFocus: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? isRenderedInPortal && isTriggeredUsingKeyboard ? false : autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click' : autoFocus !== null && autoFocus !== void 0 ? autoFocus : trigger === 'click'
     // This feature gate is currently enabled only for Jira_Web to avoid UI issues in Confluence_Web.
     ,
     shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card'),

package/dist/esm/util/analytics.js

@@ -7,7 +7,7 @@ import { getPageTime } from './performance';
 var ANALYTICS_CHANNEL = 'peopleTeams';
 export var PACKAGE_META_DATA = {
   packageName: "@atlaskit/profilecard",
-  packageVersion: "24.37.3"
+  packageVersion: "24.38.0"
 };
 var runItLater = function runItLater(cb) {
   var requestIdleCallback = window.requestIdleCallback;
@@ -52,7 +52,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "24.37.3"
+      packageVersion: "24.38.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/components/User/ProfileCardTrigger.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type ProfileCardTriggerProps } from '../../types';
-export default function ProfilecardTriggerNext({ autoFocus, trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, offset, viewingUserId, product, agentActions, hideAgentMoreActions, hideAiDisclaimer, ariaHideProfileTrigger, isVisible: propsIsVisible, ssrPlaceholderId, showDelay: customShowDelay, hideDelay: customHideDelay, }: ProfileCardTriggerProps): React.JSX.Element;
+export default function ProfilecardTriggerNext({ autoFocus, trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, offset, viewingUserId, product, agentActions, hideAgentMoreActions, hideAiDisclaimer, ariaHideProfileTrigger, isVisible: propsIsVisible, isRenderedInPortal, ssrPlaceholderId, showDelay: customShowDelay, hideDelay: customHideDelay, }: ProfileCardTriggerProps): React.JSX.Element;

package/dist/types/types.d.ts

@@ -189,6 +189,13 @@ export interface ProfileCardTriggerProps {
     disabledAriaAttributes?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
     isVisible?: boolean;
+    /**
+     * Indicates whether the profile card is rendered in a portal.
+     *
+     * If true, the profile card will auto-focus the name element when opened for better accessibility,
+     * keeping the user's focus in the tab trap.
+     */
+    isRenderedInPortal?: boolean;
     offset?: [number, number];
     product?: string;
     viewingUserId?: string;
@@ -437,6 +444,13 @@ export interface ProfilecardProps {
     teamCentralBaseUrl?: string;
     addFlag?: (flag: any) => void;
     cloudId?: string;
+    /**
+     * Indicates whether the profile card is rendered in a portal.
+     *
+     * If true, the profile card will auto-focus the name element when opened for better accessibility,
+     * keeping the user's focus in the tab trap.
+     */
+    isRenderedInPortal?: boolean;
     disabledAccountMessage?: React.ReactNode;
     hasDisabledAccountLozenge?: boolean;
     customLozenges?: LozengeProps[];

package/dist/types-ts4.5/components/User/ProfileCardTrigger.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type ProfileCardTriggerProps } from '../../types';
-export default function ProfilecardTriggerNext({ autoFocus, trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, offset, viewingUserId, product, agentActions, hideAgentMoreActions, hideAiDisclaimer, ariaHideProfileTrigger, isVisible: propsIsVisible, ssrPlaceholderId, showDelay: customShowDelay, hideDelay: customHideDelay, }: ProfileCardTriggerProps): React.JSX.Element;
+export default function ProfilecardTriggerNext({ autoFocus, trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, offset, viewingUserId, product, agentActions, hideAgentMoreActions, hideAiDisclaimer, ariaHideProfileTrigger, isVisible: propsIsVisible, isRenderedInPortal, ssrPlaceholderId, showDelay: customShowDelay, hideDelay: customHideDelay, }: ProfileCardTriggerProps): React.JSX.Element;

package/dist/types-ts4.5/types.d.ts

@@ -189,6 +189,13 @@ export interface ProfileCardTriggerProps {
     disabledAriaAttributes?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
     isVisible?: boolean;
+    /**
+     * Indicates whether the profile card is rendered in a portal.
+     *
+     * If true, the profile card will auto-focus the name element when opened for better accessibility,
+     * keeping the user's focus in the tab trap.
+     */
+    isRenderedInPortal?: boolean;
     offset?: [
         number,
         number
@@ -443,6 +450,13 @@ export interface ProfilecardProps {
     teamCentralBaseUrl?: string;
     addFlag?: (flag: any) => void;
     cloudId?: string;
+    /**
+     * Indicates whether the profile card is rendered in a portal.
+     *
+     * If true, the profile card will auto-focus the name element when opened for better accessibility,
+     * keeping the user's focus in the tab trap.
+     */
+    isRenderedInPortal?: boolean;
     disabledAccountMessage?: React.ReactNode;
     hasDisabledAccountLozenge?: boolean;
     customLozenges?: LozengeProps[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "24.38.0",
+	"version": "24.39.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/dropdown-menu": "^16.5.0",
 		"@atlaskit/empty-state": "^10.1.0",
-		"@atlaskit/give-kudos": "^4.14.0",
+		"@atlaskit/give-kudos": "^4.15.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/link": "3.3.3",
@@ -68,6 +68,7 @@
 		"@atlaskit/teams-avatar": "^2.4.0",
 		"@atlaskit/teams-public": "^0.70.0",
 		"@atlaskit/theme": "^21.0.0",
+		"@atlaskit/tmp-editor-statsig": "^32.5.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",