@atlaskit/user-picker 11.13.2 → 11.15.0

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/es2019/index.js

@@ -1,6 +1,7 @@
 export { isValidEmail } from './components/emailValidation';
 export { UserPicker as default } from './components/UserPicker';
 export { PopupUserPicker } from './components/PopupUserPicker';
+export { SingleValue } from './components/SingleValue';
 export { isEmail, isExternalUser, isTeam, isUser, isGroup } from './components/utils';
 export {
 // Constants

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 = "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/esm/components/BaseUserPicker.js

@@ -27,7 +27,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';
 var loadingMessage = function loadingMessage() {
   return null;
 };
@@ -531,10 +530,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         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.
         ,
@@ -587,7 +584,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         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/esm/components/GroupOption/main.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -16,6 +17,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';
@@ -63,15 +65,34 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
         spacing: "spacious"
       }));
     });
+    _defineProperty(_this, "renderVerifiedIcon", function () {
+      return jsx(VerifiedTeamIcon, {
+        label: "",
+        size: "small",
+        spacing: "none"
+      });
+    });
     _defineProperty(_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 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, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
         "data-testid": "user-picker-group-secondary-text"
-      }, group.byline ? group.byline : jsx(FormattedMessage, messages.groupByline));
+      }, group.byline ? group.byline : getGroupByline());
     });
     _defineProperty(_this, "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {

package/dist/esm/components/Option.js

@@ -54,13 +54,15 @@ var dataOption = function dataOption(_ref2) {
   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/esm/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';
 var styles = {
@@ -13,8 +15,10 @@ var styles = {
   avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c"
 };
 var ElementAfter = function ElementAfter(props) {
-  var data = props.data.data;
-  if (isTeam(data) && data.verified) {
+  var data = props.data.data,
+    shouldShowVerifiedIcon = props.shouldShowVerifiedIcon;
+  var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : isTeam(data) && data.verified;
+  if (showIcon) {
     return /*#__PURE__*/React.createElement(VerifiedTeamIcon, null);
   }
   return null;
@@ -31,7 +35,8 @@ export var SingleValue = function 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/esm/components/SingleValueContainer.js

@@ -16,6 +16,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';
 var valueContainerStyles = {
   root: "_yv0e5bpd _ca0q12x7 _n3td12x7 _19bvze3t _1reo15vq _18m91wug _1fjgglyw _c71l1osq _1suq1j28 _1ke8idpf"
 };
@@ -45,7 +47,8 @@ export var SingleValueContainer = /*#__PURE__*/function (_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;

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

@@ -31,10 +31,12 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     }
     _this = _callSuper(this, TeamOption, [].concat(args));
     _defineProperty(_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 [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
@@ -44,14 +46,17 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
         alignBlock: "center"
       }, jsx(HighlightText, {
         highlights: highlight && highlight.name
-      }, name), verified && jsx(VerifiedTeamIcon, null)))];
+      }, name), verified && !includeTeamsUpdates && _this.renderVerifiedIcon()))];
     });
     _defineProperty(_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') {
@@ -59,9 +64,18 @@ export var TeamOption = /*#__PURE__*/function (_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
               }
@@ -69,9 +83,18 @@ export var TeamOption = /*#__PURE__*/function (_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
               }
@@ -95,14 +118,24 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
         type: "team"
       });
     });
+    _defineProperty(_this, "renderVerifiedIcon", function () {
+      if (_this.props.team.verified) {
+        return jsx(VerifiedTeamIcon, {
+          label: "",
+          size: "small",
+          spacing: "none"
+        });
+      }
+      return undefined;
+    });
     _defineProperty(_this, "getLozengeProps", function () {
       return typeof _this.props.team.lozenge === 'string' ? {
         text: _this.props.team.lozenge
       } : _this.props.team.lozenge;
     });
     _defineProperty(_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 jsx("span", {

package/dist/esm/components/UserPicker.js

@@ -70,7 +70,9 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         _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 ? CreatableSelect : Select;
       var creatableProps = suggestEmailsForDomain ? getCreatableSuggestedEmailProps(suggestEmailsForDomain, isValidEmail) : getCreatableProps(isValidEmail);
@@ -80,7 +82,8 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         menuPosition: menuPosition,
         menuShouldBlockScroll: menuShouldBlockScroll,
         captureMenuScroll: captureMenuScroll,
-        required: required
+        required: required,
+        includeTeamsUpdates: includeTeamsUpdates
       };
       var pickerProps = allowEmail ? _objectSpread(_objectSpread(_objectSpread({}, defaultPickerProps), creatableProps), {}, {
         emailLabel: emailLabel

package/dist/esm/components/i18n.js

@@ -25,6 +25,26 @@ export var 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 var 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 var 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/index.js

@@ -1,6 +1,7 @@
 export { isValidEmail } from './components/emailValidation';
 export { UserPicker as default } from './components/UserPicker';
 export { PopupUserPicker } from './components/PopupUserPicker';
+export { SingleValue } from './components/SingleValue';
 export { isEmail, isExternalUser, isTeam, isUser, isGroup } from './components/utils';
 export {
 // Constants

package/dist/types/components/BaseUserPicker.d.ts

@@ -88,6 +88,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     groupByTypeOrder?: NonNullable<OptionData["type"]>[];
     header?: React.ReactNode;
     height?: number | string;
+    includeTeamsUpdates?: boolean;
     inputId?: string;
     isClearable?: boolean;
     isDisabled?: boolean;
@@ -150,7 +151,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
     width: string | number;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "footer" | "defaultValue" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "disableInput" | "emailLabel" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "pickerProps" | "SelectComponent"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "onChange" | "onInputChange" | "value" | "appearance" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onFocus" | "onKeyDown" | "options" | "styles" | "required" | "footer" | "defaultValue" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "disableInput" | "emailLabel" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "includeTeamsUpdates" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "popupSelectProps" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "pickerProps" | "SelectComponent"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

package/dist/types/components/GroupOption/main.d.ts

@@ -8,11 +8,13 @@ import { type Group } from '../../types';
 export declare const groupOptionIconWrapper: import("@emotion/react").SerializedStyles;
 export type GroupOptionProps = {
     group: Group;
+    includeTeamsUpdates?: boolean;
     isSelected: boolean;
 };
 export declare class GroupOption extends React.PureComponent<GroupOptionProps> {
     private getPrimaryText;
     private renderAvatar;
+    private renderVerifiedIcon;
     private renderByline;
     private getLozengeProps;
     render(): jsx.JSX.Element;

package/dist/types/components/Option.d.ts

@@ -3,6 +3,7 @@ import { type FC } from 'react';
 import { type Option as OptionType } from '../types';
 export type OptionProps = AkOptionProps & {
     data: OptionType;
+    includeTeamsUpdates?: boolean;
     isDisabled: boolean;
     isFocused: boolean;
     isSelected: boolean;

package/dist/types/components/PopupUserPicker.d.ts

@@ -42,6 +42,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     groupByTypeOrder?: NonNullable<import("../types").OptionData["type"]>[];
     header?: React.ReactNode;
     height?: number | string;
+    includeTeamsUpdates?: boolean;
     inputId?: string;
     isClearable?: boolean;
     isDisabled?: boolean;
@@ -149,6 +150,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     groupByTypeOrder?: NonNullable<import("../types").OptionData["type"]>[] | undefined;
     header?: React.ReactNode;
     height?: number | string | undefined;
+    includeTeamsUpdates?: boolean | undefined;
     isValidEmail?: import("./emailValidation").EmailValidator | undefined;
     loadOptions?: import("../types").LoadOptions | undefined;
     loadOptionsErrorMessage?: ((value: {

package/dist/types/components/SingleValue.d.ts

@@ -1,4 +1,6 @@
-import { type Option } from '../types';
+import { type Option, type OptionData } from '../types';
 import { type SingleValueProps } from '@atlaskit/select';
-export type Props = SingleValueProps<Option>;
+export type Props = SingleValueProps<Option> & {
+    shouldShowVerifiedIcon?: (data: OptionData) => boolean;
+};
 export declare const SingleValue: (props: Props) => JSX.Element | null;

package/dist/types/components/TeamOption/main.d.ts

@@ -2,6 +2,7 @@ import { jsx } from '@emotion/react';
 import React from 'react';
 import { type Team } from '../../types';
 export type TeamOptionProps = {
+    includeTeamsUpdates?: boolean;
     isSelected: boolean;
     team: Team;
 };
@@ -10,6 +11,7 @@ export declare class TeamOption extends React.PureComponent<TeamOptionProps> {
     private renderByline;
     private getBylineComponent;
     private renderAvatar;
+    private renderVerifiedIcon;
     private getLozengeProps;
     private renderCustomByLine;
     render(): jsx.JSX.Element;