@atlaskit/user-picker 11.13.2 → 11.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 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 = "11.13.2";
 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/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/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 = "11.13.2";
 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/TeamOption/main.js

@@ -24,7 +24,8 @@ export class TeamOption extends React.PureComponent {
           name,
           highlight,
           verified
-        }
+        },
+        includeTeamsUpdates
       } = this.props;
       return [jsx("span", {
         key: "name"
@@ -35,16 +36,19 @@ export class TeamOption extends React.PureComponent {
         alignBlock: "center"
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
-      }, name), verified && jsx(VerifiedTeamIcon, null)))];
+      }, name), verified && !includeTeamsUpdates && this.renderVerifiedIcon()))];
     });
     _defineProperty(this, "renderByline", () => {
       const {
         isSelected,
         team: {
           memberCount,
-          includesYou
-        }
+          includesYou,
+          verified
+        },
+        includeTeamsUpdates
       } = this.props;
+      const 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') {
@@ -52,9 +56,18 @@ export class TeamOption extends React.PureComponent {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithYou));
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon()
+              }
+            })) : jsx(FormattedMessage, messages.plus50MembersWithYou));
           } else {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -62,9 +75,18 @@ export class TeamOption extends React.PureComponent {
           }
         } else {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, messages.plus50MembersWithoutYou));
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithoutYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon()
+              }
+            })) : jsx(FormattedMessage, messages.plus50MembersWithoutYou));
           } else {
-            return this.getBylineComponent(isSelected, jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
+            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithoutYou, {
+              values: {
+                verifiedIcon: this.renderVerifiedIcon(),
+                count: memberCount
+              }
+            })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -90,6 +112,16 @@ export class TeamOption extends React.PureComponent {
         type: "team"
       });
     });
+    _defineProperty(this, "renderVerifiedIcon", () => {
+      if (this.props.team.verified) {
+        return jsx(VerifiedTeamIcon, {
+          label: "",
+          size: "small",
+          spacing: "none"
+        });
+      }
+      return undefined;
+    });
     _defineProperty(this, "getLozengeProps", () => typeof this.props.team.lozenge === 'string' ? {
       text: this.props.team.lozenge
     } : this.props.team.lozenge);

package/dist/es2019/components/UserPicker.js

@@ -51,7 +51,8 @@ export class UserPickerWithoutAnalytics extends React.Component {
       closeMenuOnScroll,
       loadUserSource,
       required = false,
-      showClearIndicator = false
+      showClearIndicator = false,
+      includeTeamsUpdates = false
     } = this.props;
     const width = this.props.width;
     const SelectComponent = allowEmail ? CreatableSelect : Select;
@@ -62,7 +63,8 @@ export class UserPickerWithoutAnalytics extends React.Component {
       menuPosition,
       menuShouldBlockScroll,
       captureMenuScroll,
-      required
+      required,
+      includeTeamsUpdates
     };
     const pickerProps = allowEmail ? {
       ...defaultPickerProps,

package/dist/es2019/components/i18n.js

@@ -25,6 +25,26 @@ export const messages = 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}}',
@@ -35,6 +55,16 @@ export const messages = 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',
@@ -60,6 +90,11 @@ export const messages = 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/esm/analytics.js

@@ -6,7 +6,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.13.1";
+var packageVersion = "11.13.2";
 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}$/;