@atlaskit/user-picker 11.13.2 → 11.15.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/user-picker
 
+## 11.15.0
+
+### Minor Changes
+
+- [`9b49b64b62885`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b49b64b62885) -
+  set avatarAppearanceShape for SingleValue and SingleValueContainer based on appType
+
+## 11.14.0
+
+### Minor Changes
+
+- [`24ef0db8a2bb6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24ef0db8a2bb6) -
+  [ux] Updating verified team icon to surface for all groups and verified teams. Updated bylines for
+  team and group principals to "Official team" and "Admin group".
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.13.2
 
 ### Patch Changes

package/afm-jira/tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"outDir": "../../../../../tsDist/@atlaskit__user-picker/app",
+		"outDir": "../../../../../jira/tsDist/@atlaskit__user-picker/app",
 		"rootDir": "../",
 		"composite": true
 	},

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.13.1";
+var packageVersion = "0.0.0-development";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/BaseUserPicker.js

@@ -25,7 +25,6 @@ var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _groupOptionsByType = require("../util/group-options-by-type");
 var _ufoExperiences = require("../util/ufoExperiences");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["aria-labelledby", "aria-describedby"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -537,10 +536,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         name: name,
         value: value,
         autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
-        labelId: (0, _platformFeatureFlags.fg)('user_picker_migrate_aria_label_description') ? ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabelledByStandard : undefined,
-        "aria-labelledby": (0, _platformFeatureFlags.fg)('user_picker_migrate_aria_label_description') ? undefined : ariaLabelledBy,
-        descriptionId: (0, _platformFeatureFlags.fg)('user_picker_migrate_aria_label_description') ? ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : ariaDescribedByStandard : undefined,
-        "aria-describedby": (0, _platformFeatureFlags.fg)('user_picker_migrate_aria_label_description') ? undefined : ariaDescribedBy,
+        labelId: ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabelledByStandard,
+        descriptionId: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : ariaDescribedByStandard,
         "aria-live": ariaLive,
         "aria-required": required // This has been added as a safety net.
         ,
@@ -593,7 +590,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         textFieldBackgroundColor: textFieldBackgroundColor,
         header: header,
         placeholderAvatar: placeholderAvatar
-      }, (0, _platformFeatureFlags.fg)('user_picker_migrate_aria_label_description') ? restAriaProps : this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
+      }, restAriaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
         onValueContainerClick: this.handleClickDraggableParentComponent
       }, menuOpenDeciderProps));
     }

package/dist/cjs/components/GroupOption/main.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.groupOptionIconWrapper = exports.GroupOption = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -16,6 +17,7 @@ var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _peopleGroupPeople = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group--people"));
+var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _i18n = require("../i18n");
 var _HighlightText = require("../HighlightText");
@@ -67,15 +69,34 @@ var GroupOption = exports.GroupOption = /*#__PURE__*/function (_React$PureCompon
         spacing: "spacious"
       }));
     });
+    (0, _defineProperty2.default)(_this, "renderVerifiedIcon", function () {
+      return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+        label: "",
+        size: "small",
+        spacing: "none"
+      });
+    });
     (0, _defineProperty2.default)(_this, "renderByline", function () {
       var _this$props2 = _this.props,
         isSelected = _this$props2.isSelected,
-        group = _this$props2.group;
+        group = _this$props2.group,
+        includeTeamsUpdates = _this$props2.includeTeamsUpdates;
+      var getGroupByline = function getGroupByline() {
+        if (includeTeamsUpdates) {
+          return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.adminManagedGroupByline, {
+            values: {
+              verifiedIcon: _this.renderVerifiedIcon()
+            }
+          }));
+        } else {
+          return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline);
+        }
+      };
       return (0, _react2.jsx)("span", {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
         "data-testid": "user-picker-group-secondary-text"
-      }, group.byline ? group.byline : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
+      }, group.byline ? group.byline : getGroupByline());
     });
     (0, _defineProperty2.default)(_this, "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {

package/dist/cjs/components/Option.js

@@ -61,13 +61,15 @@ var dataOption = function dataOption(_ref2) {
   if ((0, _utils.isTeam)(data)) {
     return /*#__PURE__*/_react.default.createElement(_TeamOption.default, {
       team: data,
-      isSelected: isSelected
+      isSelected: isSelected,
+      includeTeamsUpdates: data.includeTeamsUpdates
     });
   }
   if ((0, _utils.isGroup)(data)) {
     return /*#__PURE__*/_react.default.createElement(_GroupOption.default, {
       group: data,
-      isSelected: isSelected
+      isSelected: isSelected,
+      includeTeamsUpdates: data.includeTeamsUpdates
     });
   }
   if ((0, _utils.isCustom)(data)) {

package/dist/cjs/components/SingleValue.js

@@ -12,6 +12,8 @@ var _runtime = require("@compiled/react/runtime");
 var _select = require("@atlaskit/select");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
+var _avatar = require("@atlaskit/avatar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -21,8 +23,10 @@ var styles = {
   avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c"
 };
 var ElementAfter = function ElementAfter(props) {
-  var data = props.data.data;
-  if ((0, _utils.isTeam)(data) && data.verified) {
+  var data = props.data.data,
+    shouldShowVerifiedIcon = props.shouldShowVerifiedIcon;
+  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : (0, _utils.isTeam)(data) && data.verified;
+  if (showIcon) {
     return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, null);
   }
   return null;
@@ -39,7 +43,8 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
   }, /*#__PURE__*/React.createElement(_SizeableAvatar.SizeableAvatar, {
     src: (0, _utils.getAvatarUrl)(data),
     appearance: appearance,
-    type: (0, _utils.isTeam)(data) ? 'team' : 'person'
+    type: (0, _utils.isTeam)(data) ? 'team' : 'person',
+    avatarAppearanceShape: (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(data.appType) : undefined
   }), /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.avatarItem
   }, /*#__PURE__*/React.createElement("div", {

package/dist/cjs/components/SingleValueContainer.js

@@ -20,6 +20,8 @@ var _react = _interopRequireDefault(require("react"));
 var _select = require("@atlaskit/select");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _ValueContainerWrapper = _interopRequireDefault(require("./ValueContainerWrapper"));
+var _avatar = require("@atlaskit/avatar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["children"];
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -52,7 +54,8 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
         return /*#__PURE__*/_react.default.createElement(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           type: placeholderAvatar,
-          src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
+          src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined,
+          avatarAppearanceShape: value && value.data && (0, _platformFeatureFlags.fg)('jira_ai_agent_avatar_user_picker_user_option') ? (0, _avatar.getAppearanceForAppType)(value.data.appType) : undefined
         });
       }
       return null;

package/dist/cjs/components/TeamOption/main.js

@@ -36,10 +36,12 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
     }
     _this = _callSuper(this, TeamOption, [].concat(args));
     (0, _defineProperty2.default)(_this, "getPrimaryText", function () {
-      var _this$props$team = _this.props.team,
+      var _this$props = _this.props,
+        _this$props$team = _this$props.team,
         name = _this$props$team.name,
         highlight = _this$props$team.highlight,
-        verified = _this$props$team.verified;
+        verified = _this$props$team.verified,
+        includeTeamsUpdates = _this$props.includeTeamsUpdates;
       return [(0, _react.jsx)("span", {
         key: "name"
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -49,14 +51,17 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
         alignBlock: "center"
       }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
-      }, name), verified && (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, null)))];
+      }, name), verified && !includeTeamsUpdates && _this.renderVerifiedIcon()))];
     });
     (0, _defineProperty2.default)(_this, "renderByline", function () {
-      var _this$props = _this.props,
-        isSelected = _this$props.isSelected,
-        _this$props$team2 = _this$props.team,
-        memberCount = _this$props$team2.memberCount,
-        includesYou = _this$props$team2.includesYou;
+      var _this$props2 = _this.props,
+        isSelected = _this$props2.isSelected,
+        _this$props2$team = _this$props2.team,
+        memberCount = _this$props2$team.memberCount,
+        includesYou = _this$props2$team.includesYou,
+        verified = _this$props2$team.verified,
+        includeTeamsUpdates = _this$props2.includeTeamsUpdates;
+      var isVerified = includeTeamsUpdates && verified;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -64,9 +69,18 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon()
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -74,9 +88,18 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithoutYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon()
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithoutYou, {
+              values: {
+                verifiedIcon: _this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -100,14 +123,24 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
         type: "team"
       });
     });
+    (0, _defineProperty2.default)(_this, "renderVerifiedIcon", function () {
+      if (_this.props.team.verified) {
+        return (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+          label: "",
+          size: "small",
+          spacing: "none"
+        });
+      }
+      return undefined;
+    });
     (0, _defineProperty2.default)(_this, "getLozengeProps", function () {
       return typeof _this.props.team.lozenge === 'string' ? {
         text: _this.props.team.lozenge
       } : _this.props.team.lozenge;
     });
     (0, _defineProperty2.default)(_this, "renderCustomByLine", function () {
-      var _this$props$team3;
-      if (!((_this$props$team3 = _this.props.team) !== null && _this$props$team3 !== void 0 && _this$props$team3.byline)) {
+      var _this$props$team2;
+      if (!((_this$props$team2 = _this.props.team) !== null && _this$props$team2 !== void 0 && _this$props$team2.byline)) {
         return undefined;
       }
       return (0, _react.jsx)("span", {

package/dist/cjs/components/UserPicker.js

@@ -78,7 +78,9 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         _this$props$required = _this$props.required,
         required = _this$props$required === void 0 ? false : _this$props$required,
         _this$props$showClear = _this$props.showClearIndicator,
-        showClearIndicator = _this$props$showClear === void 0 ? false : _this$props$showClear;
+        showClearIndicator = _this$props$showClear === void 0 ? false : _this$props$showClear,
+        _this$props$includeTe = _this$props.includeTeamsUpdates,
+        includeTeamsUpdates = _this$props$includeTe === void 0 ? false : _this$props$includeTe;
       var width = this.props.width;
       var SelectComponent = allowEmail ? _select.CreatableSelect : _select.default;
       var creatableProps = suggestEmailsForDomain ? (0, _creatableEmailSuggestion.getCreatableSuggestedEmailProps)(suggestEmailsForDomain, isValidEmail) : (0, _creatable.getCreatableProps)(isValidEmail);
@@ -88,7 +90,8 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         menuPosition: menuPosition,
         menuShouldBlockScroll: menuShouldBlockScroll,
         captureMenuScroll: captureMenuScroll,
-        required: required
+        required: required,
+        includeTeamsUpdates: includeTeamsUpdates
       };
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel

package/dist/cjs/components/i18n.js

@@ -31,6 +31,26 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Something went wrong',
     description: 'Error message to display when options fail to load.'
   },
+  teamByline: {
+    id: 'fabric.elements.user-picker.team.byline',
+    defaultMessage: 'Team',
+    description: 'Byline for team'
+  },
+  officialTeamByline: {
+    id: 'fabric.elements.user-picker.team.byline.official',
+    defaultMessage: 'Official team {verifiedIcon}',
+    description: 'Byline for official team'
+  },
+  officialMemberCountWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
+    description: 'Byline to show the number of members in the team when the current user is not a member of the team'
+  },
+  officialMemberCountWithYou: {
+    id: 'fabric.elements.user-picker.team.member.count.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}, including you',
+    description: 'Byline to show the number of members in the team when the current user is also a member of the team'
+  },
   memberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count',
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}',
@@ -41,6 +61,16 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}, including you',
     description: 'Byline to show the number of members in the team when the current user is also a member of the team'
   },
+  officialPlus50MembersWithoutYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members',
+    description: 'Byline to show the number of members in the team when the number exceeds 50'
+  },
+  officialPlus50MembersWithYou: {
+    id: 'fabric.elements.user-picker.team.member.50plus.official.including.you',
+    defaultMessage: 'Official team {verifiedIcon} • 50+ members, including you',
+    description: 'Byline to show the number of members in the team when the number exceeds 50 and also includes the current user'
+  },
   plus50MembersWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.50plus',
     defaultMessage: 'Team • 50+ members',
@@ -66,6 +96,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Enter an email address',
     description: 'Byline for a potentially valid email option.'
   },
+  adminManagedGroupByline: {
+    id: 'fabric.elements.user-picker.group.byline.admin-managed',
+    defaultMessage: 'Admin group {verifiedIcon}',
+    description: 'Byline for admin-managed groups with verified icon'
+  },
   groupByline: {
     id: 'fabric.elements.user-picker.group.byline',
     defaultMessage: 'Admin-managed group',

package/dist/cjs/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "PopupUserPicker", {
     return _PopupUserPicker.PopupUserPicker;
   }
 });
+Object.defineProperty(exports, "SingleValue", {
+  enumerable: true,
+  get: function get() {
+    return _SingleValue.SingleValue;
+  }
+});
 Object.defineProperty(exports, "TeamType", {
   enumerable: true,
   get: function get() {
@@ -90,5 +96,6 @@ Object.defineProperty(exports, "isValidEmail", {
 var _emailValidation = require("./components/emailValidation");
 var _UserPicker = require("./components/UserPicker");
 var _PopupUserPicker = require("./components/PopupUserPicker");
+var _SingleValue = require("./components/SingleValue");
 var _utils = require("./components/utils");
 var _types = require("./types");

package/dist/es2019/analytics.js

@@ -3,7 +3,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.13.1";
+const packageVersion = "0.0.0-development";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/BaseUserPicker.js

@@ -13,7 +13,6 @@ import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { groupOptionsByType } from '../util/group-options-by-type';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
-import { fg } from '@atlaskit/platform-feature-flags';
 const loadingMessage = () => null;
 const classNamePrefix = 'fabric-user-picker';
 export class BaseUserPickerWithoutAnalytics extends React.Component {
@@ -518,10 +517,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       name: name,
       value: value,
       autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
-      labelId: fg('user_picker_migrate_aria_label_description') ? ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabelledByStandard : undefined,
-      "aria-labelledby": fg('user_picker_migrate_aria_label_description') ? undefined : ariaLabelledBy,
-      descriptionId: fg('user_picker_migrate_aria_label_description') ? ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : ariaDescribedByStandard : undefined,
-      "aria-describedby": fg('user_picker_migrate_aria_label_description') ? undefined : ariaDescribedBy,
+      labelId: ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabelledByStandard,
+      descriptionId: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : ariaDescribedByStandard,
       "aria-live": ariaLive,
       "aria-required": required // This has been added as a safety net.
       ,
@@ -572,7 +569,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       textFieldBackgroundColor: textFieldBackgroundColor,
       header: header,
       placeholderAvatar: placeholderAvatar
-    }, fg('user_picker_migrate_aria_label_description') ? restAriaProps : this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
+    }, restAriaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
       onValueContainerClick: this.handleClickDraggableParentComponent
     }, menuOpenDeciderProps));
   }

package/dist/es2019/components/GroupOption/main.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
@@ -9,6 +10,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
 import { HighlightText } from '../HighlightText';
@@ -51,16 +53,35 @@ export class GroupOption extends React.PureComponent {
       LEGACY_size: "medium",
       spacing: "spacious"
     })));
+    _defineProperty(this, "renderVerifiedIcon", () => {
+      return jsx(VerifiedTeamIcon, {
+        label: "",
+        size: "small",
+        spacing: "none"
+      });
+    });
     _defineProperty(this, "renderByline", () => {
       const {
         isSelected,
-        group
+        group,
+        includeTeamsUpdates
       } = this.props;
+      const getGroupByline = () => {
+        if (includeTeamsUpdates) {
+          return jsx(FormattedMessage, _extends({}, messages.adminManagedGroupByline, {
+            values: {
+              verifiedIcon: this.renderVerifiedIcon()
+            }
+          }));
+        } else {
+          return jsx(FormattedMessage, messages.groupByline);
+        }
+      };
       return jsx("span", {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
         "data-testid": "user-picker-group-secondary-text"
-      }, group.byline ? group.byline : jsx(FormattedMessage, messages.groupByline));
+      }, group.byline ? group.byline : getGroupByline());
     });
     _defineProperty(this, "getLozengeProps", () => typeof this.props.group.lozenge === 'string' ? {
       text: this.props.group.lozenge

package/dist/es2019/components/Option.js

@@ -57,13 +57,15 @@ const dataOption = ({
   if (isTeam(data)) {
     return /*#__PURE__*/React.createElement(AsyncTeamOption, {
       team: data,
-      isSelected: isSelected
+      isSelected: isSelected,
+      includeTeamsUpdates: data.includeTeamsUpdates
     });
   }
   if (isGroup(data)) {
     return /*#__PURE__*/React.createElement(AsyncGroupOption, {
       group: data,
-      isSelected: isSelected
+      isSelected: isSelected,
+      includeTeamsUpdates: data.includeTeamsUpdates
     });
   }
   if (isCustom(data)) {

package/dist/es2019/components/SingleValue.js

@@ -5,6 +5,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam } from './utils';
+import { getAppearanceForAppType } from '@atlaskit/avatar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
 import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
 const styles = {
@@ -16,9 +18,11 @@ const ElementAfter = props => {
   const {
     data: {
       data
-    }
+    },
+    shouldShowVerifiedIcon
   } = props;
-  if (isTeam(data) && data.verified) {
+  const showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : isTeam(data) && data.verified;
+  if (showIcon) {
     return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
   }
   return null;
@@ -40,7 +44,8 @@ export const SingleValue = props => {
   }, /*#__PURE__*/React.createElement(SizeableAvatar, {
     src: getAvatarUrl(data),
     appearance: appearance,
-    type: isTeam(data) ? 'team' : 'person'
+    type: isTeam(data) ? 'team' : 'person',
+    avatarAppearanceShape: fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(data.appType) : undefined
   }), /*#__PURE__*/React.createElement(Box, {
     xcss: styles.avatarItem
   }, /*#__PURE__*/React.createElement("div", {

package/dist/es2019/components/SingleValueContainer.js

@@ -7,6 +7,8 @@ import React from 'react';
 import { components } from '@atlaskit/select';
 import { SizeableAvatar } from './SizeableAvatar';
 import ValueContainerWrapper from './ValueContainerWrapper';
+import { getAppearanceForAppType } from '@atlaskit/avatar';
+import { fg } from '@atlaskit/platform-feature-flags';
 const valueContainerStyles = {
   root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bvze3t _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
 };
@@ -32,7 +34,8 @@ export class SingleValueContainer extends React.Component {
         return /*#__PURE__*/React.createElement(SizeableAvatar, {
           appearance: appearance,
           type: placeholderAvatar,
-          src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
+          src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined,
+          avatarAppearanceShape: value && value.data && fg('jira_ai_agent_avatar_user_picker_user_option') ? getAppearanceForAppType(value.data.appType) : undefined
         });
       }
       return null;