@atlaskit/user-picker 11.23.3 → 11.25.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/user-picker
 
+## 11.25.0
+
+### Minor Changes
+
+- [`e40e50d76e29c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e40e50d76e29c) -
+  [ux] Updates user picker to use ADS tags in cases where we see icons in tags, insead of using ADS
+  Avatar tags.
+
+## 11.24.0
+
+### Minor Changes
+
+- [`1ad583e025c33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1ad583e025c33) -
+  [ux] Updates User picker, behind a feature gate, to use @atlaski/tag component when isMulti is
+  true.
+
 ## 11.23.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -59,6 +59,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tag/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -59,6 +59,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tag/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -59,6 +59,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tag/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../people-and-teams/teams-avatar/afm-products/tsconfig.json"
 		},

package/dist/cjs/analytics.js

@@ -11,7 +11,8 @@ var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gat
 var _uuid = require("uuid");
 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
+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 @typescript-eslint/consistent-type-imports
+// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
 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}$/;

package/dist/cjs/components/AvatarItemOption.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _tag = _interopRequireDefault(require("@atlaskit/tag"));
 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; }
@@ -17,7 +18,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); } /**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 var AsyncTooltip = /*#__PURE__*/_react.default.lazy(function () {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip'));
@@ -116,12 +117,40 @@ var textWrapper = exports.textWrapper = function textWrapper(color) {
     color: color
   });
 };
+var lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
 var AvatarItemOption = exports.AvatarItemOption = function AvatarItemOption(_ref) {
   var avatar = _ref.avatar,
     isDisabled = _ref.isDisabled,
     lozenge = _ref.lozenge,
     primaryText = _ref.primaryText,
     secondaryText = _ref.secondaryText;
+  var renderTag = function renderTag() {
+    if ((0, _utils.isLozengeText)(lozenge) && !lozenge.isBold) {
+      var color = lozenge.appearance ? lozengeAppearanceToTagColor[lozenge.appearance] : 'standard';
+      var tag = (0, _react2.jsx)(_tag.default, {
+        text: lozenge.text,
+        color: color,
+        isRemovable: false,
+        migration_fallback: "lozenge"
+      });
+      if (lozenge.tooltip) {
+        return (0, _react2.jsx)(_react.default.Suspense, {
+          fallback: tag
+        }, (0, _react2.jsx)(AsyncTooltip, {
+          content: lozenge.tooltip
+        }, tag));
+      }
+      return tag;
+    }
+    return renderLozenge();
+  };
   var renderLozenge = function renderLozenge() {
     if ((0, _utils.isLozengeText)(lozenge)) {
       if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
@@ -149,6 +178,6 @@ var AvatarItemOption = exports.AvatarItemOption = function AvatarItemOption(_ref
       css: getTextStyle(true)
     }, secondaryText))), lozenge && (0, _react2.jsx)("div", {
       css: additionalInfo
-    }, renderLozenge()))
+    }, (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag() : renderLozenge()))
   );
 };

package/dist/cjs/components/AvatarOrIcon.js

@@ -12,7 +12,7 @@ var _react = require("@emotion/react");
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
 var iconStyle = (0, _react.css)({
   display: 'flex',

package/dist/cjs/components/BaseUserPicker.js

@@ -13,6 +13,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _ufo = require("@atlaskit/ufo");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -351,7 +352,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         hoveringClearIndicator: hoveringClearIndicator
       });
     });
-    (0, _defineProperty2.default)(_this, "getOptions", function () {
+    (0, _defineProperty2.default)(_this, "getOptionsOld", function () {
       var options = (0, _utils.getOptions)(_this.state.options) || [];
       var _this$props2 = _this.props,
         maxOptions = _this$props2.maxOptions,
@@ -376,6 +377,35 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       }
       return groupByTypeOrder ? (0, _groupOptionsByType.groupOptionsByType)(options, groupByTypeOrder) : options;
     });
+    (0, _defineProperty2.default)(_this, "getOptionsNew", function () {
+      var options = (0, _utils.getOptions)(_this.state.options) || [];
+      var _this$props3 = _this.props,
+        maxOptions = _this$props3.maxOptions,
+        isMulti = _this$props3.isMulti,
+        groupByTypeOrder = _this$props3.groupByTypeOrder,
+        customGroupLabels = _this$props3.customGroupLabels;
+      if (maxOptions === 0) {
+        return [];
+      }
+      if (maxOptions && maxOptions > 0 && maxOptions < options.length) {
+        var _value3 = _this.state.value;
+        var filteredOptions = options;
+        // Filter out previously selected options
+        if (isMulti && Array.isArray(_value3)) {
+          var valueIds = _value3.map(function (item) {
+            return item.data.id;
+          });
+          filteredOptions = options.filter(function (option) {
+            return valueIds.indexOf(option.data.id) === -1;
+          });
+        }
+        return groupByTypeOrder ? (0, _groupOptionsByType.groupOptionsByType)(filteredOptions.slice(0, maxOptions), groupByTypeOrder, customGroupLabels) : filteredOptions.slice(0, maxOptions);
+      }
+      return groupByTypeOrder ? (0, _groupOptionsByType.groupOptionsByType)(options, groupByTypeOrder, customGroupLabels) : options;
+    });
+    (0, _defineProperty2.default)(_this, "getOptions", function () {
+      return (0, _platformFeatureFlags.fg)('jsm-wfo-assignee-recommendation-on-queues') ? _this.getOptionsNew() : _this.getOptionsOld();
+    });
     (0, _defineProperty2.default)(_this, "getAppearance", function () {
       return _this.props.appearance ? _this.props.appearance : 'normal';
     });
@@ -441,9 +471,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props3 = this.props,
-        open = _this$props3.open,
-        search = _this$props3.search;
+      var _this$props4 = this.props,
+        open = _this$props4.open,
+        search = _this$props4.search;
       // load options when the picker open
       if (open) {
         if (!this.session) {
@@ -511,41 +541,41 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-        isMulti = _this$props4.isMulti,
-        isLoading = _this$props4.isLoading,
-        subtle = _this$props4.subtle,
-        noBorder = _this$props4.noBorder,
-        placeholder = _this$props4.placeholder,
-        isClearable = _this$props4.isClearable,
-        isDisabled = _this$props4.isDisabled,
-        isInvalid = _this$props4.isInvalid,
-        clearValueLabel = _this$props4.clearValueLabel,
-        menuMinWidth = _this$props4.menuMinWidth,
-        menuPortalTarget = _this$props4.menuPortalTarget,
-        loadOptionsErrorMessage = _this$props4.loadOptionsErrorMessage,
-        addMoreMessage = _this$props4.addMoreMessage,
-        noOptionsMessage = _this$props4.noOptionsMessage,
-        footer = _this$props4.footer,
-        disableInput = _this$props4.disableInput,
-        components = _this$props4.components,
-        pickerProps = _this$props4.pickerProps,
-        SelectComponent = _this$props4.SelectComponent,
-        styles = _this$props4.styles,
-        autoFocus = _this$props4.autoFocus,
-        fieldId = _this$props4.fieldId,
-        inputId = _this$props4.inputId,
-        maxPickerHeight = _this$props4.maxPickerHeight,
-        textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
-        ariaLabelledBy = _this$props4.ariaLabelledBy,
-        ariaDescribedBy = _this$props4.ariaDescribedBy,
-        ariaLive = _this$props4.ariaLive,
-        ariaLabel = _this$props4.ariaLabel,
-        name = _this$props4.name,
-        header = _this$props4.header,
-        required = _this$props4.required,
-        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent,
-        placeholderAvatar = _this$props4.placeholderAvatar;
+      var _this$props5 = this.props,
+        isMulti = _this$props5.isMulti,
+        isLoading = _this$props5.isLoading,
+        subtle = _this$props5.subtle,
+        noBorder = _this$props5.noBorder,
+        placeholder = _this$props5.placeholder,
+        isClearable = _this$props5.isClearable,
+        isDisabled = _this$props5.isDisabled,
+        isInvalid = _this$props5.isInvalid,
+        clearValueLabel = _this$props5.clearValueLabel,
+        menuMinWidth = _this$props5.menuMinWidth,
+        menuPortalTarget = _this$props5.menuPortalTarget,
+        loadOptionsErrorMessage = _this$props5.loadOptionsErrorMessage,
+        addMoreMessage = _this$props5.addMoreMessage,
+        noOptionsMessage = _this$props5.noOptionsMessage,
+        footer = _this$props5.footer,
+        disableInput = _this$props5.disableInput,
+        components = _this$props5.components,
+        pickerProps = _this$props5.pickerProps,
+        SelectComponent = _this$props5.SelectComponent,
+        styles = _this$props5.styles,
+        autoFocus = _this$props5.autoFocus,
+        fieldId = _this$props5.fieldId,
+        inputId = _this$props5.inputId,
+        maxPickerHeight = _this$props5.maxPickerHeight,
+        textFieldBackgroundColor = _this$props5.textFieldBackgroundColor,
+        ariaLabelledBy = _this$props5.ariaLabelledBy,
+        ariaDescribedBy = _this$props5.ariaDescribedBy,
+        ariaLive = _this$props5.ariaLive,
+        ariaLabel = _this$props5.ariaLabel,
+        name = _this$props5.name,
+        header = _this$props5.header,
+        required = _this$props5.required,
+        UNSAFE_hasDraggableParentComponent = _this$props5.UNSAFE_hasDraggableParentComponent,
+        placeholderAvatar = _this$props5.placeholderAvatar;
       var _this$state3 = this.state,
         count = _this$state3.count,
         hoveringClearIndicator = _this$state3.hoveringClearIndicator,

package/dist/cjs/components/ClearIndicator.js

@@ -1,4 +1,4 @@
-/* ClearIndicator.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* ClearIndicator.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/Control.js

@@ -1,4 +1,4 @@
-/* Control.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Control.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -22,7 +22,7 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 var CustomOption = exports.CustomOption = /*#__PURE__*/function (_React$PureComponent) {
   function CustomOption() {
     var _this;

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

@@ -22,7 +22,7 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 var getAddEmailMessage = function getAddEmailMessage(validity) {
   return validity === 'POTENTIAL' ? _i18n.messages.continueToAddEmail : _i18n.messages.selectToAddEmail;
 };

package/dist/cjs/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -12,7 +12,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 var outerWrapper = function outerWrapper(isDisabled) {
   return (0, _react.css)({
     alignItems: 'center',

package/dist/cjs/components/ExternalUserOption/InfoIcon.js

@@ -15,7 +15,7 @@ var _colors = require("@atlaskit/theme/colors");
  * @jsx jsx
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 
 var wrapper = (0, _react2.css)({
   display: 'flex',

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

@@ -25,7 +25,7 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var groupOptionIconWrapper = exports.groupOptionIconWrapper = (0, _react2.css)({
   padding: "var(--ds-space-025, 2px)",

package/dist/cjs/components/Input.js

@@ -1,4 +1,4 @@
-/* Input.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* Input.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/MultiValue.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,13 +18,21 @@ var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
 var _react2 = require("@emotion/react");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tag = _interopRequireWildcard(require("@atlaskit/tag"));
+var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
 var _AddOptionAvatar = require("./AddOptionAvatar");
 var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/core/people-group"));
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
-var _excluded = ["children", "innerProps"];
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("./i18n");
+var _excluded = ["children", "innerProps", "removeProps", "data"];
+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); }
 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; })(); } /**
  * @jsxRuntime classic
@@ -43,14 +52,34 @@ var scrollToValue = exports.scrollToValue = function scrollToValue(valueContaine
     valueContainer.scrollIntoView(false);
   }
 };
-var groupTagContainer = (0, _primitives.xcss)({
+var groupTagContainerOld = (0, _primitives.xcss)({
   paddingLeft: 'space.025',
   marginTop: 'space.025'
 });
+var groupTagContainer = (0, _primitives.xcss)({
+  paddingLeft: 'space.050'
+});
+var archivedLozengeWrapper = (0, _primitives.xcss)({
+  display: 'flex',
+  paddingLeft: 'space.050'
+});
+var iconStyle = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: '20px',
+  height: '20px'
+});
 var nameWrapper = (0, _react2.css)({
   font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   paddingLeft: "var(--ds-space-050, 4px)"
 });
+var avatarTagWrapperStyle = (0, _react2.css)({
+  display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- offsets AvatarTag's built-in space.050 margin down to space.025
+  margin: '-2px'
+});
 var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
   function MultiValue(props) {
     var _this;
@@ -67,7 +96,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
       }
       if ((0, _utils.isGroup)(data)) {
         return (0, _react2.jsx)(_primitives.Box, {
-          xcss: groupTagContainer
+          xcss: groupTagContainerOld
         }, (0, _react2.jsx)(_peopleGroup.default, {
           color: "currentColor",
           label: "" // This element is a decorative icon and does not require a label
@@ -91,11 +120,19 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)(_this, "getElemAfter", function () {
       var data = _this.props.data.data;
+      var canShowArchivedLozenge = (0, _utils.isTeam)(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && (0, _platformFeatureFlags.fg)('enable-sup-archive-experience');
       if ((0, _utils.isGroup)(data) && data.includeTeamsUpdates || (0, _utils.isTeam)(data) && data.verified) {
         return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
           size: data.includeTeamsUpdates ? 'small' : 'medium'
         });
       }
+      if (canShowArchivedLozenge) {
+        return (0, _react2.jsx)(_primitives.Box, {
+          xcss: archivedLozengeWrapper
+        }, (0, _react2.jsx)(_lozenge.default, {
+          appearance: "default"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.archivedLozenge)));
+      }
       return null;
     });
     _this.containerRef = /*#__PURE__*/_react.default.createRef();
@@ -114,16 +151,19 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
       var _this$props = this.props,
-        _this$props$data = _this$props.data,
-        label = _this$props$data.label,
-        data = _this$props$data.data,
+        option = _this$props.data,
         innerProps = _this$props.innerProps,
         isFocused = _this$props.isFocused;
-      var _nextProps$data = nextProps.data,
-        nextLabel = _nextProps$data.label,
-        nextData = _nextProps$data.data,
+      var nextOption = nextProps.data,
         nextInnerProps = nextProps.innerProps,
         nextIsFocused = nextProps.isFocused;
+      if (option == null || nextOption == null) {
+        return option !== nextOption || innerProps !== nextInnerProps || isFocused !== nextIsFocused;
+      }
+      var label = option.label,
+        data = option.data;
+      var nextLabel = nextOption.label,
+        nextData = nextOption.data;
 
       // We can ignore onRemove here because it is an anonymous function
       // that will be recreated every time but with the same implementation.
@@ -134,9 +174,111 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props2 = this.props,
         children = _this$props2.children,
-        innerProps = _this$props2.innerProps,
+        _innerProps = _this$props2.innerProps,
+        removeProps = _this$props2.removeProps,
+        option = _this$props2.data,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+      if ((0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
+        var _this$props$selectPro;
+        var data = option.data,
+          label = option.label;
+        var isTeamOption = (0, _utils.isTeam)(data);
+        var isGroupOption = (0, _utils.isGroup)(data);
+        var isEmailOption = (0, _utils.isEmail)(data);
+        var avatarUrl = (0, _utils.getAvatarUrl)(data);
+        var isDisabled = Boolean((_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.isDisabled);
+        var canShowArchivedLozenge = (0, _utils.isTeam)(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && (0, _platformFeatureFlags.fg)('enable-sup-archive-experience');
+        var avatarProps = avatarUrl ? {
+          name: data.name,
+          src: avatarUrl
+        } : {
+          name: data.name
+        };
+        var removeAction = function removeAction() {
+          removeProps.onClick({});
+          return true;
+        };
+        if (isEmailOption) {
+          return (0, _react2.jsx)("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, (0, _react2.jsx)(_tag.default, {
+            text: label,
+            elemBefore: (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
+              isLozenge: true,
+              isPendingAction: data.isPendingAction
+            }),
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        if (isGroupOption) {
+          return (0, _react2.jsx)("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, (0, _react2.jsx)(_tag.default, {
+            text: label,
+            elemBefore: (0, _react2.jsx)(_primitives.Box, {
+              xcss: groupTagContainer
+            }, (0, _react2.jsx)(_peopleGroup.default, {
+              color: "currentColor",
+              label: "" // This element is a decorative icon and does not require a label
+              ,
+              size: "small"
+            })),
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        if (data.icon) {
+          return (0, _react2.jsx)("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, (0, _react2.jsx)(_tag.default, {
+            text: label,
+            elemBefore: (0, _react2.jsx)("div", {
+              css: iconStyle,
+              style: {
+                color: data.iconColor
+              }
+            }, data.icon),
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        return (0, _react2.jsx)("span", {
+          ref: this.containerRef,
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, isTeamOption ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tag.AvatarTag, {
+          type: "other",
+          text: label,
+          isVerified: isTeamOption ? data.verified : undefined,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction,
+          avatar: function avatar(props) {
+            return (0, _react2.jsx)(_teamsAvatar.default, (0, _extends2.default)({}, props, avatarProps));
+          }
+        }), canShowArchivedLozenge ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: archivedLozengeWrapper
+        }, (0, _react2.jsx)(_lozenge.default, {
+          appearance: "default"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.archivedLozenge))) : null) : (0, _react2.jsx)(_tag.AvatarTag, {
+          type: "user",
+          text: label,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction,
+          avatar: function avatar(props) {
+            return (0, _react2.jsx)(_avatar.default, (0, _extends2.default)({}, props, avatarProps));
+          }
+        }));
+      }
       return (0, _react2.jsx)(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
+        data: option,
+        removeProps: removeProps,
         innerProps: {
           ref: this.containerRef
         },

package/dist/cjs/components/MultiValueContainer.js

@@ -1,4 +1,4 @@
-/* MultiValueContainer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* MultiValueContainer.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,6 +1,8 @@
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1reo15vq{overflow-x:hidden}
 ._1ul953f4{min-width:75pt}