@atlaskit/user-picker 11.13.0 → 11.13.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/user-picker
 
+## 11.13.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.13.1
+
+### Patch Changes
+
+- [`ce660199aaa9a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ce660199aaa9a) -
+  [ux] Fix keyboard tab navigation between multiple user pickers in Firefox behind feature gate
+  'user-dialog-tab-fix'
+- Updated dependencies
+
 ## 11.13.0
 
 ### Minor Changes

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.12.0";
+var packageVersion = "11.13.1";
 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/AddOptionAvatar.js

@@ -19,7 +19,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 
 var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge, isPendingAction) {
   var padding = isLozenge ? "var(--ds-space-0, 0px)" : "var(--ds-space-050, 4px)";
-  var backgroundColor = isPendingAction && (0, _platformFeatureFlags.fg)('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF7D6)" : "var(--ds-background-neutral, ".concat(_colors.N40, ")");
+  var backgroundColor = isPendingAction && (0, _platformFeatureFlags.fg)('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF5DB)" : "var(--ds-background-neutral, ".concat(_colors.N40, ")");
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     padding: padding,
@@ -44,7 +44,7 @@ var AddOptionAvatar = exports.AddOptionAvatar = function AddOptionAvatar(_ref) {
       label: label || '',
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
-      color: isPendingAction && (0, _platformFeatureFlags.fg)('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #A54800)" : "var(--ds-text-subtle, ".concat(_colors.N500, ")")
+      color: isPendingAction && (0, _platformFeatureFlags.fg)('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #9E4C00)" : "var(--ds-text-subtle, ".concat(_colors.N500, ")")
     }))
   );
 };

package/dist/cjs/components/AvatarItemOption.js

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _utils = require("./utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); } /**
@@ -27,6 +28,20 @@ var AsyncTooltip = /*#__PURE__*/_react.default.lazy(function () {
   });
 });
 var wrapper = function wrapper(isDisabled) {
+  if ((0, _platformFeatureFlags.fg)('platform_user_picker_firefox_tab_fix')) {
+    return (0, _react2.css)({
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      display: 'flex',
+      outline: 'none',
+      margin: 0,
+      width: '100%',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      opacity: isDisabled ? "var(--ds-opacity-disabled, 0.4)" : undefined
+    });
+  }
   return (0, _react2.css)({
     alignItems: 'center',
     boxSizing: 'border-box',
@@ -49,10 +64,26 @@ var optionWrapper = (0, _react2.css)({
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
 });
+var optionWrapperFix = (0, _react2.css)({
+  display: 'inline-block',
+  overflow: 'hidden',
+  minWidth: 0,
+  maxWidth: '100%',
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 var getTextStyle = function getTextStyle(isSecondary) {
   var secondaryCssArgs = isSecondary ? {
     font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
+  if ((0, _platformFeatureFlags.fg)('platform_user_picker_firefox_tab_fix')) {
+    return (0, _react2.css)(_objectSpread({
+      margin: 0,
+      maxWidth: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }, secondaryCssArgs));
+  }
   return (0, _react2.css)(_objectSpread({
     margin: 0,
     overflowX: 'hidden',
@@ -65,6 +96,18 @@ var additionalInfo = (0, _react2.css)({
   marginLeft: "var(--ds-space-100, 8px)"
 });
 var textWrapper = exports.textWrapper = function textWrapper(color) {
+  if ((0, _platformFeatureFlags.fg)('platform_user_picker_firefox_tab_fix')) {
+    return (0, _react2.css)({
+      display: 'inline-block',
+      verticalAlign: 'bottom',
+      maxWidth: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      color: color
+    });
+  }
   return (0, _react2.css)({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -99,7 +142,7 @@ var AvatarItemOption = exports.AvatarItemOption = function AvatarItemOption(_ref
     (0, _react2.jsx)("span", {
       css: wrapper(isDisabled)
     }, avatar, (0, _react2.jsx)("div", {
-      css: optionWrapper
+      css: (0, _platformFeatureFlags.fg)('platform_user_picker_firefox_tab_fix') ? optionWrapperFix : optionWrapper
     }, (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
       css: getTextStyle()
     }, primaryText), secondaryText && (0, _react2.jsx)("div", {

package/dist/cjs/components/Control.compiled.css

@@ -1,8 +1,8 @@
 
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
-._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
 ._1h6d1j28{border-color:transparent}
-._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._14regrf3 .fabric-user-picker__clear-indicator{opacity:0!important}
+._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
+._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}._14regrf3 .fabric-user-picker__clear-indicator{opacity:0!important}
 ._19bvidpf{padding-left:0}
 ._1a98zg3v:hover .fabric-user-picker__clear-indicator{opacity:1!important}
 ._1tke1wug{min-height:auto}
@@ -13,10 +13,10 @@
 ._p12f1osq{max-width:100%}
 ._u5f3idpf{padding-right:0}
 ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
-._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
 ._4cvx1j28:hover{border-color:transparent}
-._4cvx1p6i:hover{border-color:var(--ds-border-focused,#388bff)}
-._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._4cvx1v1w:hover{border-color:var(--ds-border-focused,#4688ec)}
+._4cvxrsbi:hover{border-color:var(--ds-border-input,#8c8f97)}
 ._irr31gly:hover{background-color:var(--ds-background-danger,#ffeceb)}
 ._irr31j9a:hover{background-color:var(--ds-background-input,#fff)}
-._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}
+._irr3by5v:hover{background-color:var(--ds-background-disabled,#17171708)}
+._irr3l4ek:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}

package/dist/cjs/components/Control.js

@@ -16,10 +16,10 @@ var _react2 = require("@compiled/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var controlStyles = {
   invalid: "_1h6d1bqt _4cvx1bqt",
-  focused: "_1h6d1p6i _bfhk1j9a _4cvx1p6i _irr31j9a",
-  disabled: "_irr3syzs",
+  focused: "_1h6d1v1w _bfhk1j9a _4cvx1v1w _irr31j9a",
+  disabled: "_irr3by5v",
   subtle: "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31gly",
-  root: "_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1h6d1elr _bfhk1j9a _p12f1osq _14regrf3 _4cvx1elr _irr31d5g _1a98zg3v",
+  root: "_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1h6drsbi _bfhk1j9a _p12f1osq _14regrf3 _4cvxrsbi _irr3l4ek _1a98zg3v",
   compact: "_1tke1wug"
 };
 var Control = function Control(props) {

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

@@ -5,7 +5,6 @@ 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"));
@@ -17,8 +16,6 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _i18n = require("../i18n");
 var _HighlightText = require("../HighlightText");
@@ -70,33 +67,15 @@ 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;
-      var getGroupByline = function getGroupByline() {
-        if ((0, _platformFeatureFlags.fg)('confluence_frontend_perms_exp_teams_as_principals')) {
-          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 : getGroupByline());
+      }, group.byline ? group.byline : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)(_this, "getLozengeProps", function () {
       return typeof _this.props.group.lozenge === 'string' ? {

package/dist/cjs/components/Input.compiled.css

@@ -1,5 +1,5 @@
 ._1ir3kb7n input::-ms-input-placeholder{opacity:1}
 ._1ir3kb7n input::placeholder{opacity:1}
-._5ce6131l input::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
-._5ce6131l input::placeholder{color:var(--ds-text-subtlest,#626f86)}
-._h5gq131l input:-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
+._5ce61rpy input::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
+._5ce61rpy input::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
+._h5gq1rpy input:-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}

package/dist/cjs/components/Input.js

@@ -20,7 +20,7 @@ var _select = require("@atlaskit/select");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var inputStyles = {
-  root: "_5ce6131l _1ir3kb7n _h5gq131l"
+  root: "_5ce61rpy _1ir3kb7n _h5gq1rpy"
 };
 var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
   function Input() {

package/dist/cjs/components/SingleValue.compiled.css

@@ -10,5 +10,5 @@
 ._i0dl1osq{flex-basis:100%}
 ._o5721q9c{white-space:nowrap}
 ._p12f1osq{max-width:100%}
-._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._vwz419ii{line-height:1.4}

package/dist/cjs/components/SingleValue.js

@@ -18,7 +18,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var styles = {
   avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
   avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
-  avatarItemText: "_syaz1fxt _1reo15vq _1bto1l2s _o5721q9c"
+  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c"
 };
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data;

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

@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _colors = require("@atlaskit/theme/colors");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -39,7 +38,8 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
     (0, _defineProperty2.default)(_this, "getPrimaryText", function () {
       var _this$props$team = _this.props.team,
         name = _this$props$team.name,
-        highlight = _this$props$team.highlight;
+        highlight = _this$props$team.highlight,
+        verified = _this$props$team.verified;
       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,16 +49,14 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
         alignBlock: "center"
       }, (0, _react.jsx)(_HighlightText.HighlightText, {
         highlights: highlight && highlight.name
-      }, name), !(0, _platformFeatureFlags.fg)('confluence_frontend_perms_exp_teams_as_principals') && _this.renderVerifiedIcon()))];
+      }, name), verified && (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, null)))];
     });
     (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,
-        verified = _this$props$team2.verified;
-      var isVerified = (0, _platformFeatureFlags.fg)('confluence_frontend_perms_exp_teams_as_principals') && verified;
+        includesYou = _this$props$team2.includesYou;
 
       // if Member count is missing, do not show the byline, regardless of the availability of includesYou
       if (memberCount === null || typeof memberCount === 'undefined') {
@@ -66,18 +64,9 @@ 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, {
-              values: {
-                verifiedIcon: _this.renderVerifiedIcon()
-              }
-            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithYou));
+            return _this.getBylineComponent(isSelected, (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, {
-              values: {
-                verifiedIcon: _this.renderVerifiedIcon(),
-                count: memberCount
-              }
-            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithYou, {
               values: {
                 count: memberCount
               }
@@ -85,18 +74,9 @@ 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, {
-              values: {
-                verifiedIcon: _this.renderVerifiedIcon()
-              }
-            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.plus50MembersWithoutYou));
+            return _this.getBylineComponent(isSelected, (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, {
-              values: {
-                verifiedIcon: _this.renderVerifiedIcon(),
-                count: memberCount
-              }
-            })) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
+            return _this.getBylineComponent(isSelected, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.memberCountWithoutYou, {
               values: {
                 count: memberCount
               }
@@ -120,16 +100,6 @@ 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

package/dist/cjs/components/UserOption.js

@@ -25,6 +25,16 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var styles = function styles(color) {
+  return (0, _react.css)({
+    display: 'inline',
+    verticalAlign: 'top',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+    color: color
+  });
+};
 var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponent) {
   function UserOption() {
     var _this;
@@ -47,11 +57,12 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         highlights: highlight && highlight.name
       }, name))];
       if ((0, _utils.hasValue)(publicName) && name.trim() !== publicName.trim()) {
+        var color = _this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")");
         result.push((0, _react.jsx)(_react2.default.Fragment, {
           key: "publicName"
         }, ' ', (0, _react.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)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+          css: (0, _platformFeatureFlags.fg)('platform_user_picker_firefox_tab_fix') ? styles(color) : (0, _AvatarItemOption.textWrapper)(color)
         }, "(", (0, _react.jsx)(_HighlightText.HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));

package/dist/cjs/components/i18n.js

@@ -31,26 +31,6 @@ 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}}',
@@ -61,16 +41,6 @@ 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',
@@ -96,11 +66,6 @@ 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.12.0";
+const packageVersion = "11.13.1";
 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/AddOptionAvatar.js

@@ -10,7 +10,7 @@ import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 const getEmailAvatarWrapperStyle = (isLozenge, isPendingAction) => {
   const padding = isLozenge ? `${"var(--ds-space-0, 0px)"}` : `${"var(--ds-space-050, 4px)"}`;
-  const backgroundColor = isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF7D6)" : `var(--ds-background-neutral, ${N40})`;
+  const backgroundColor = isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-background-warning, #FFF5DB)" : `var(--ds-background-neutral, ${N40})`;
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     padding,
@@ -36,7 +36,7 @@ export const AddOptionAvatar = ({
       label: label || '',
       LEGACY_size: isLozenge ? 'small' : 'medium',
       LEGACY_margin: "0 0 0 -2px",
-      color: isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #A54800)" : `var(--ds-text-subtle, ${N500})`
+      color: isPendingAction && fg('twcg-444-invite-usd-improvements-m2-gate') ? "var(--ds-text-warning, #9E4C00)" : `var(--ds-text-subtle, ${N500})`
     }))
   );
 };

package/dist/es2019/components/AvatarItemOption.js

@@ -7,25 +7,42 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { isLozengeText } from './utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
   return {
     default: module.default
   };
 }));
-const wrapper = isDisabled => css({
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 1,
-  outline: 'none',
-  margin: 0,
-  width: '100%',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  cursor: isDisabled ? 'not-allowed' : 'pointer',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  opacity: isDisabled ? "var(--ds-opacity-disabled, 0.4)" : undefined
-});
+const wrapper = isDisabled => {
+  if (fg('platform_user_picker_firefox_tab_fix')) {
+    return css({
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      display: 'flex',
+      outline: 'none',
+      margin: 0,
+      width: '100%',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      opacity: isDisabled ? "var(--ds-opacity-disabled, 0.4)" : undefined
+    });
+  }
+  return css({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 1,
+    outline: 'none',
+    margin: 0,
+    width: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    opacity: isDisabled ? "var(--ds-opacity-disabled, 0.4)" : undefined
+  });
+};
 const optionWrapper = css({
   maxWidth: '100%',
   minWidth: 0,
@@ -33,10 +50,28 @@ const optionWrapper = css({
   lineHeight: '1.4',
   paddingLeft: "var(--ds-space-100, 8px)"
 });
+const optionWrapperFix = css({
+  display: 'inline-block',
+  overflow: 'hidden',
+  minWidth: 0,
+  maxWidth: '100%',
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 const getTextStyle = isSecondary => {
   const secondaryCssArgs = isSecondary ? {
     font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   } : {};
+  if (fg('platform_user_picker_firefox_tab_fix')) {
+    return css({
+      margin: 0,
+      maxWidth: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      ...secondaryCssArgs
+    });
+  }
   return css({
     margin: 0,
     overflowX: 'hidden',
@@ -50,13 +85,27 @@ const additionalInfo = css({
   float: 'right',
   marginLeft: "var(--ds-space-100, 8px)"
 });
-export const textWrapper = color => css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  display: 'inline',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  color
-});
+export const textWrapper = color => {
+  if (fg('platform_user_picker_firefox_tab_fix')) {
+    return css({
+      display: 'inline-block',
+      verticalAlign: 'bottom',
+      maxWidth: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      color
+    });
+  }
+  return css({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'inline',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    color
+  });
+};
 export const AvatarItemOption = ({
   avatar,
   isDisabled,
@@ -84,7 +133,7 @@ export const AvatarItemOption = ({
     jsx("span", {
       css: wrapper(isDisabled)
     }, avatar, jsx("div", {
-      css: optionWrapper
+      css: fg('platform_user_picker_firefox_tab_fix') ? optionWrapperFix : optionWrapper
     }, jsx("div", null, jsx("div", {
       css: getTextStyle()
     }, primaryText), secondaryText && jsx("div", {

package/dist/es2019/components/Control.compiled.css

@@ -1,8 +1,8 @@
 
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
-._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
 ._1h6d1j28{border-color:transparent}
-._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}._14regrf3 .fabric-user-picker__clear-indicator{opacity:0!important}
+._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
+._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}._14regrf3 .fabric-user-picker__clear-indicator{opacity:0!important}
 ._19bvidpf{padding-left:0}
 ._1a98zg3v:hover .fabric-user-picker__clear-indicator{opacity:1!important}
 ._1tke1wug{min-height:auto}
@@ -13,10 +13,10 @@
 ._p12f1osq{max-width:100%}
 ._u5f3idpf{padding-right:0}
 ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
-._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
 ._4cvx1j28:hover{border-color:transparent}
-._4cvx1p6i:hover{border-color:var(--ds-border-focused,#388bff)}
-._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._4cvx1v1w:hover{border-color:var(--ds-border-focused,#4688ec)}
+._4cvxrsbi:hover{border-color:var(--ds-border-input,#8c8f97)}
 ._irr31gly:hover{background-color:var(--ds-background-danger,#ffeceb)}
 ._irr31j9a:hover{background-color:var(--ds-background-input,#fff)}
-._irr3syzs:hover{background-color:var(--ds-background-disabled,#091e4208)}
+._irr3by5v:hover{background-color:var(--ds-background-disabled,#17171708)}
+._irr3l4ek:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}