@atlaskit/user-picker 11.20.4 → 11.21.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/user-picker
 
+## 11.21.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.21.0
+
+### Minor Changes
+
+- [`9889f45fc6eca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9889f45fc6eca) -
+  fix optionData.data type for user type
+
 ## 11.20.4
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -13,7 +13,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.20.3";
+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/TeamOption/main.js

@@ -61,8 +61,11 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
         memberCount = _this$props2$team.memberCount,
         includesYou = _this$props2$team.includesYou,
         verified = _this$props2$team.verified,
+        teamTypeName = _this$props2$team.teamTypeName,
         includeTeamsUpdates = _this$props2.includeTeamsUpdates;
       var isVerified = includeTeamsUpdates && verified;
+      var hasTeamTypeName = Boolean(teamTypeName);
+      var verifiedIcon = isVerified ? _this.renderVerifiedIcon() : null;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -70,16 +73,18 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon()
+                verifiedIcon: verifiedIcon,
+                teamTypeName: teamTypeName
               }
             })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon(),
-                count: memberCount
+                verifiedIcon: verifiedIcon,
+                count: memberCount,
+                teamTypeName: teamTypeName
               }
             })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
@@ -89,16 +94,18 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithoutYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialPlus50MembersWithoutYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon()
+                verifiedIcon: verifiedIcon,
+                teamTypeName: teamTypeName
               }
             })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, isVerified ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.officialMemberCountWithoutYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon(),
-                count: memberCount
+                verifiedIcon: verifiedIcon,
+                count: memberCount,
+                teamTypeName: teamTypeName
               }
             })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {

package/dist/cjs/components/UserPicker.js

@@ -108,7 +108,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') ? this.props.height : undefined),
+        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, this.props.height),
         components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),
         pickerProps: pickerProps
       })))));

package/dist/cjs/components/i18n.js

@@ -38,17 +38,17 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   },
   officialTeamByline: {
     id: 'fabric.elements.user-picker.team.byline.official',
-    defaultMessage: 'Official team {verifiedIcon}',
-    description: 'Byline for official team'
+    defaultMessage: '{teamTypeName} {verifiedIcon}',
+    description: 'Byline for official/verified team with dynamic team type name'
   },
   officialMemberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count.official',
-    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
+    defaultMessage: '{teamTypeName} {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',
+    defaultMessage: '{teamTypeName} {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: {
@@ -63,12 +63,12 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   },
   officialPlus50MembersWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.50plus.official',
-    defaultMessage: 'Official team {verifiedIcon} • 50+ members',
+    defaultMessage: '{teamTypeName} {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',
+    defaultMessage: '{teamTypeName} {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: {

package/dist/cjs/components/styles.js

@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _colors = require("@atlaskit/theme/colors");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _select = require("@atlaskit/select");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
   _excluded2 = ["paddingTop", "paddingBottom", "position"];
 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; }
@@ -46,9 +45,9 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(_colors.R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(_colors.N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(_colors.N10, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
         }),
         padding: 0,
-        minHeight: height && (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') || isCompact ? 'none' : 44,
+        minHeight: height || isCompact ? 'none' : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
-        height: height && (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') ? height : isCompact || isMulti ? '100%' : 44,
+        height: height ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
       });
     },

package/dist/es2019/analytics.js

@@ -4,7 +4,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.20.3";
+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/TeamOption/main.js

@@ -45,11 +45,14 @@ export class TeamOption extends React.PureComponent {
         team: {
           memberCount,
           includesYou,
-          verified
+          verified,
+          teamTypeName
         },
         includeTeamsUpdates
       } = this.props;
       const isVerified = includeTeamsUpdates && verified;
+      const hasTeamTypeName = Boolean(teamTypeName);
+      const verifiedIcon = isVerified ? this.renderVerifiedIcon() : null;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -57,16 +60,18 @@ export class TeamOption extends React.PureComponent {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithYou, {
+            return this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithYou, {
               values: {
-                verifiedIcon: this.renderVerifiedIcon()
+                verifiedIcon,
+                teamTypeName
               }
             })) : jsx(FormattedMessage, messages.plus50MembersWithYou));
           } else {
-            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithYou, {
+            return this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithYou, {
               values: {
-                verifiedIcon: this.renderVerifiedIcon(),
-                count: memberCount
+                verifiedIcon,
+                count: memberCount,
+                teamTypeName
               }
             })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
               values: {
@@ -76,16 +81,18 @@ export class TeamOption extends React.PureComponent {
           }
         } else {
           if (memberCount > 50) {
-            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithoutYou, {
+            return this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithoutYou, {
               values: {
-                verifiedIcon: this.renderVerifiedIcon()
+                verifiedIcon,
+                teamTypeName
               }
             })) : jsx(FormattedMessage, messages.plus50MembersWithoutYou));
           } else {
-            return this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithoutYou, {
+            return this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithoutYou, {
               values: {
-                verifiedIcon: this.renderVerifiedIcon(),
-                count: memberCount
+                verifiedIcon,
+                count: memberCount,
+                teamTypeName
               }
             })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
               values: {

package/dist/es2019/components/UserPicker.js

@@ -85,7 +85,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
       SelectComponent: SelectComponent
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       ,
-      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
+      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, this.props.height),
       components: getComponents(isMulti, anchor, showClearIndicator, (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.components ? this.props.components : {}),
       pickerProps: pickerProps
     })))));

package/dist/es2019/components/i18n.js

@@ -32,17 +32,17 @@ export const messages = defineMessages({
   },
   officialTeamByline: {
     id: 'fabric.elements.user-picker.team.byline.official',
-    defaultMessage: 'Official team {verifiedIcon}',
-    description: 'Byline for official team'
+    defaultMessage: '{teamTypeName} {verifiedIcon}',
+    description: 'Byline for official/verified team with dynamic team type name'
   },
   officialMemberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count.official',
-    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
+    defaultMessage: '{teamTypeName} {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',
+    defaultMessage: '{teamTypeName} {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: {
@@ -57,12 +57,12 @@ export const messages = defineMessages({
   },
   officialPlus50MembersWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.50plus.official',
-    defaultMessage: 'Official team {verifiedIcon} • 50+ members',
+    defaultMessage: '{teamTypeName} {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',
+    defaultMessage: '{teamTypeName} {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: {

package/dist/es2019/components/styles.js

@@ -1,7 +1,6 @@
 import { B100, N0, N10, N20, N30, N100, R50, R400, N90 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { mergeStyles } from '@atlaskit/select';
-import { fg } from '@atlaskit/platform-feature-flags';
 export const BORDER_PADDING = "var(--ds-space-075, 6px)";
 export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
@@ -33,9 +32,9 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? `var(--ds-background-danger, ${R50})` : state.isFocused ? css[':hover'] ? `var(--ds-background-input, ${css[':hover'].backgroundColor})` : `var(--ds-background-input, ${N0})` : state.isDisabled ? `var(--ds-background-disabled, ${N10})` : `var(--ds-background-input-hovered, ${N30})`
         },
         padding: 0,
-        minHeight: height && fg('jifjam_bulk_operations') || isCompact ? 'none' : 44,
+        minHeight: height || isCompact ? 'none' : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
-        height: height && fg('jifjam_bulk_operations') ? height : isCompact || isMulti ? '100%' : 44,
+        height: height ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
       };
     },

package/dist/esm/analytics.js

@@ -7,7 +7,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.20.3";
+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/TeamOption/main.js

@@ -56,8 +56,11 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
         memberCount = _this$props2$team.memberCount,
         includesYou = _this$props2$team.includesYou,
         verified = _this$props2$team.verified,
+        teamTypeName = _this$props2$team.teamTypeName,
         includeTeamsUpdates = _this$props2.includeTeamsUpdates;
       var isVerified = includeTeamsUpdates && verified;
+      var hasTeamTypeName = Boolean(teamTypeName);
+      var verifiedIcon = isVerified ? _this.renderVerifiedIcon() : null;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -65,16 +68,18 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } else {
         if (includesYou === true) {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon()
+                verifiedIcon: verifiedIcon,
+                teamTypeName: teamTypeName
               }
             })) : jsx(FormattedMessage, messages.plus50MembersWithYou));
           } else {
-            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon(),
-                count: memberCount
+                verifiedIcon: verifiedIcon,
+                count: memberCount,
+                teamTypeName: teamTypeName
               }
             })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithYou, {
               values: {
@@ -84,16 +89,18 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
           }
         } else {
           if (memberCount > 50) {
-            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithoutYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialPlus50MembersWithoutYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon()
+                verifiedIcon: verifiedIcon,
+                teamTypeName: teamTypeName
               }
             })) : jsx(FormattedMessage, messages.plus50MembersWithoutYou));
           } else {
-            return _this.getBylineComponent(isSelected, isVerified ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, hasTeamTypeName ? jsx(FormattedMessage, _extends({}, messages.officialMemberCountWithoutYou, {
               values: {
-                verifiedIcon: _this.renderVerifiedIcon(),
-                count: memberCount
+                verifiedIcon: verifiedIcon,
+                count: memberCount,
+                teamTypeName: teamTypeName
               }
             })) : jsx(FormattedMessage, _extends({}, messages.memberCountWithoutYou, {
               values: {

package/dist/esm/components/UserPicker.js

@@ -100,7 +100,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
+        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('platform-component-visual-refresh'), false, this.props.height),
         components: getComponents(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),
         pickerProps: pickerProps
       })))));

package/dist/esm/components/i18n.js

@@ -32,17 +32,17 @@ export var messages = defineMessages({
   },
   officialTeamByline: {
     id: 'fabric.elements.user-picker.team.byline.official',
-    defaultMessage: 'Official team {verifiedIcon}',
-    description: 'Byline for official team'
+    defaultMessage: '{teamTypeName} {verifiedIcon}',
+    description: 'Byline for official/verified team with dynamic team type name'
   },
   officialMemberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count.official',
-    defaultMessage: 'Official team {verifiedIcon} • {count} {count, plural, one {member} other {members}}',
+    defaultMessage: '{teamTypeName} {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',
+    defaultMessage: '{teamTypeName} {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: {
@@ -57,12 +57,12 @@ export var messages = defineMessages({
   },
   officialPlus50MembersWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.50plus.official',
-    defaultMessage: 'Official team {verifiedIcon} • 50+ members',
+    defaultMessage: '{teamTypeName} {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',
+    defaultMessage: '{teamTypeName} {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: {

package/dist/esm/components/styles.js

@@ -7,7 +7,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { B100, N0, N10, N20, N30, N100, R50, R400, N90 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { mergeStyles } from '@atlaskit/select';
-import { fg } from '@atlaskit/platform-feature-flags';
 export var BORDER_PADDING = "var(--ds-space-075, 6px)";
 export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
@@ -39,9 +38,9 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(N10, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")")
         }),
         padding: 0,
-        minHeight: height && fg('jifjam_bulk_operations') || isCompact ? 'none' : 44,
+        minHeight: height || isCompact ? 'none' : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
-        height: height && fg('jifjam_bulk_operations') ? height : isCompact || isMulti ? '100%' : 44,
+        height: height ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
       });
     },

package/dist/types/types.d.ts

@@ -270,6 +270,7 @@ export interface CustomHighlight {
 export interface OptionData {
     appType?: string | null;
     avatarUrl?: any;
+    data?: any;
     fixed?: boolean;
     icon?: ReactNode;
     iconColor?: string;
@@ -327,6 +328,7 @@ export interface Team extends OptionData {
     includeTeamsUpdates?: boolean;
     memberCount?: number;
     members?: TeamMember[];
+    teamTypeName?: string;
     type: 'team';
     verified?: boolean;
 }

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

@@ -273,6 +273,7 @@ export interface CustomHighlight {
 export interface OptionData {
     appType?: string | null;
     avatarUrl?: any;
+    data?: any;
     fixed?: boolean;
     icon?: ReactNode;
     iconColor?: string;
@@ -330,6 +331,7 @@ export interface Team extends OptionData {
     includeTeamsUpdates?: boolean;
     memberCount?: number;
     members?: TeamMember[];
+    teamTypeName?: string;
     type: 'team';
     verified?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.20.4",
+	"version": "11.21.1",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,12 +52,12 @@
 		"@atlaskit/people-teams-ui-public": "^3.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/select": "^21.7.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/teams-avatar": "^2.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^10.1.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -110,9 +110,6 @@
 		"platform_user_picker_firefox_tab_fix": {
 			"type": "boolean"
 		},
-		"jifjam_bulk_operations": {
-			"type": "boolean"
-		},
 		"twcg-444-invite-usd-improvements-m2-gate": {
 			"type": "boolean"
 		},