@atlaskit/user-picker 11.23.3 → 11.25.0

package/dist/es2019/components/i18n.js

@@ -170,6 +170,11 @@ export const messages = defineMessages({
     defaultMessage: 'Guest groups can only access certain spaces and have limited access to user info.',
     description: 'Tooltip text for lozenge showing that a group is for guests in Confluence'
   },
+  archivedLozenge: {
+    id: 'fabric.elements.user-picker.archived.lozenge.text',
+    defaultMessage: 'Archived',
+    description: 'Text within the lozenge when the selected team has been archived/disbanded'
+  },
   userTypeLabel: {
     id: 'fabric.elements.user-picker.user.type.label',
     defaultMessage: 'People',

package/dist/es2019/components/styles.js

@@ -1,6 +1,7 @@
 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;
@@ -22,7 +23,7 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
         ...css,
         width,
         borderColor: state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.isInvalid ? `var(--ds-border-danger, ${R400})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
-        backgroundColor: state.isFocused ? `var(--ds-background-input, ${css['backgroundColor']})` : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? `var(--ds-background-input, ${N10})` : `var(--ds-background-input, ${N20})`,
+        backgroundColor: state.isFocused ? `var(--ds-background-input, ${css['backgroundColor']})` : state.selectProps.subtle ? 'transparent' : state.isDisabled && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? `var(--ds-background-disabled, ${N10})` : state.selectProps.textFieldBackgroundColor ? `var(--ds-background-input, ${N10})` : `var(--ds-background-input, ${N20})`,
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },

package/dist/es2019/components/utils.js

@@ -3,7 +3,7 @@ import { CustomType, EmailType, TeamType, GroupType, UserType, ExternalUserType
 import { PopupSelect } from '@atlaskit/select';
 export const isExternalUser = option => option.type === ExternalUserType || Boolean(option.isExternal);
 export const isUser = option => option.type === undefined || option.type === UserType;
-export const isTeam = option => option.type === TeamType;
+export const isTeam = option => (option === null || option === void 0 ? void 0 : option.type) === TeamType;
 export const isGroup = option => option.type === GroupType;
 export const isEmail = option => option.type === EmailType;
 export const isCustom = option => option.type === CustomType;

package/dist/es2019/util/group-options-by-type/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FormattedMessage } from 'react-intl-next';
 import memoizeOne from 'memoize-one';
 import { messages } from '../../components/i18n';
-const getLabelForType = type => {
+const getLabelForType = (type, customLabels) => {
+  if (customLabels && type in customLabels && fg('jsm-wfo-assignee-recommendation-on-queues')) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, customLabels[type]);
+  }
   switch (type) {
     case 'user':
       return /*#__PURE__*/React.createElement(FormattedMessage, messages.userTypeLabel);
@@ -18,7 +22,7 @@ const getLabelForType = type => {
       return /*#__PURE__*/React.createElement(FormattedMessage, messages.otherTypeLabel);
   }
 };
-export const groupOptionsByType = memoizeOne((options, groupByTypeOrder) => {
+export const groupOptionsByType = memoizeOne((options, groupByTypeOrder, customGroupLabels) => {
   // If groupByTypeOrder is empty, just return the original options
   if (groupByTypeOrder.length === 0) {
     return options;
@@ -38,7 +42,7 @@ export const groupOptionsByType = memoizeOne((options, groupByTypeOrder) => {
   groupByTypeOrder.forEach(type => {
     if (groupedMap.has(type)) {
       result.push({
-        label: getLabelForType(type),
+        label: getLabelForType(type, customGroupLabels),
         options: groupedMap.get(type)
       });
       groupedMap.delete(type);

package/dist/esm/analytics.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead

package/dist/esm/components/AvatarItemOption.js

@@ -6,9 +6,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 import React from 'react';
-// 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
 import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
+import Tag from '@atlaskit/tag';
 import { isLozengeText } from './utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
@@ -107,12 +108,40 @@ export var textWrapper = function textWrapper(color) {
     color: color
   });
 };
+var lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
 export var 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 (isLozengeText(lozenge) && !lozenge.isBold) {
+      var color = lozenge.appearance ? lozengeAppearanceToTagColor[lozenge.appearance] : 'standard';
+      var tag = jsx(Tag, {
+        text: lozenge.text,
+        color: color,
+        isRemovable: false,
+        migration_fallback: "lozenge"
+      });
+      if (lozenge.tooltip) {
+        return jsx(React.Suspense, {
+          fallback: tag
+        }, jsx(AsyncTooltip, {
+          content: lozenge.tooltip
+        }, tag));
+      }
+      return tag;
+    }
+    return renderLozenge();
+  };
   var renderLozenge = function renderLozenge() {
     if (isLozengeText(lozenge)) {
       if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
@@ -140,6 +169,6 @@ export var AvatarItemOption = function AvatarItemOption(_ref) {
       css: getTextStyle(true)
     }, secondaryText))), lozenge && jsx("div", {
       css: additionalInfo
-    }, renderLozenge()))
+    }, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag() : renderLozenge()))
   );
 };

package/dist/esm/components/AvatarOrIcon.js

@@ -5,7 +5,7 @@
 
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarSize } from './utils';
-// 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
 import { css, jsx } from '@emotion/react';
 var iconStyle = css({
   display: 'flex',

package/dist/esm/components/BaseUserPicker.js

@@ -14,6 +14,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
@@ -345,7 +346,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         hoveringClearIndicator: hoveringClearIndicator
       });
     });
-    _defineProperty(_this, "getOptions", function () {
+    _defineProperty(_this, "getOptionsOld", function () {
       var options = getOptions(_this.state.options) || [];
       var _this$props2 = _this.props,
         maxOptions = _this$props2.maxOptions,
@@ -370,6 +371,35 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       }
       return groupByTypeOrder ? groupOptionsByType(options, groupByTypeOrder) : options;
     });
+    _defineProperty(_this, "getOptionsNew", function () {
+      var options = 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 ? groupOptionsByType(filteredOptions.slice(0, maxOptions), groupByTypeOrder, customGroupLabels) : filteredOptions.slice(0, maxOptions);
+      }
+      return groupByTypeOrder ? groupOptionsByType(options, groupByTypeOrder, customGroupLabels) : options;
+    });
+    _defineProperty(_this, "getOptions", function () {
+      return fg('jsm-wfo-assignee-recommendation-on-queues') ? _this.getOptionsNew() : _this.getOptionsOld();
+    });
     _defineProperty(_this, "getAppearance", function () {
       return _this.props.appearance ? _this.props.appearance : 'normal';
     });
@@ -435,9 +465,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
   }, {
     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) {
@@ -505,41 +535,41 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
   }, {
     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/esm/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";

package/dist/esm/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./Control.compiled.css";
 import * as React from 'react';

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

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */
 import { B400, N800, N200 } from '@atlaskit/theme/colors';
-// 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
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
-// 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
 import { jsx } from '@emotion/react';
 import { AddOptionAvatar } from '../AddOptionAvatar';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';

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

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @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
 import { css, jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 var outerWrapper = function outerWrapper(isDisabled) {

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsx jsx
  */
 import { useCallback, useState } from 'react';
-// 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
 import { css, jsx } from '@emotion/react';
 import EditorPanelIcon from '@atlaskit/icon/core/status-information';
 import { N50, N200 } from '@atlaskit/theme/colors';

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-// 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
 import { css, jsx } from '@emotion/react';
 import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import PeopleIcon from '@atlaskit/icon/core/people-group';

package/dist/esm/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";

package/dist/esm/components/MultiValue.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "innerProps"];
+var _excluded = ["children", "innerProps", "removeProps", "data"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 /**
@@ -19,12 +19,19 @@ import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import Avatar from '@atlaskit/avatar';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { AvatarTag, default as Tag } from '@atlaskit/tag';
+import TeamAvatar from '@atlaskit/teams-avatar';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
+import Lozenge from '@atlaskit/lozenge';
 import PeopleIcon from '@atlaskit/icon/core/people-group';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from './i18n';
 export var scrollToValue = function scrollToValue(valueContainer, control) {
   var _valueContainer$getBo = valueContainer.getBoundingClientRect(),
     top = _valueContainer$getBo.top,
@@ -38,14 +45,34 @@ export var scrollToValue = function scrollToValue(valueContainer, control) {
     valueContainer.scrollIntoView(false);
   }
 };
-var groupTagContainer = xcss({
+var groupTagContainerOld = xcss({
   paddingLeft: 'space.025',
   marginTop: 'space.025'
 });
+var groupTagContainer = xcss({
+  paddingLeft: 'space.050'
+});
+var archivedLozengeWrapper = xcss({
+  display: 'flex',
+  paddingLeft: 'space.050'
+});
+var iconStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: '20px',
+  height: '20px'
+});
 var nameWrapper = 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 = 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'
+});
 export var MultiValue = /*#__PURE__*/function (_React$Component) {
   function MultiValue(props) {
     var _this;
@@ -62,7 +89,7 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
       }
       if (isGroup(data)) {
         return jsx(Box, {
-          xcss: groupTagContainer
+          xcss: groupTagContainerOld
         }, jsx(PeopleIcon, {
           color: "currentColor",
           label: "" // This element is a decorative icon and does not require a label
@@ -86,11 +113,19 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "getElemAfter", function () {
       var data = _this.props.data.data;
+      var canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
       if (isGroup(data) && data.includeTeamsUpdates || isTeam(data) && data.verified) {
         return jsx(VerifiedTeamIcon, {
           size: data.includeTeamsUpdates ? 'small' : 'medium'
         });
       }
+      if (canShowArchivedLozenge) {
+        return jsx(Box, {
+          xcss: archivedLozengeWrapper
+        }, jsx(Lozenge, {
+          appearance: "default"
+        }, jsx(FormattedMessage, messages.archivedLozenge)));
+      }
       return null;
     });
     _this.containerRef = /*#__PURE__*/React.createRef();
@@ -109,16 +144,19 @@ export var 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.
@@ -129,9 +167,111 @@ export var 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 = _objectWithoutProperties(_this$props2, _excluded);
+      if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
+        var _this$props$selectPro;
+        var data = option.data,
+          label = option.label;
+        var isTeamOption = isTeam(data);
+        var isGroupOption = isGroup(data);
+        var isEmailOption = isEmail(data);
+        var avatarUrl = 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 = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && 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 jsx("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, jsx(Tag, {
+            text: label,
+            elemBefore: jsx(AddOptionAvatar, {
+              isLozenge: true,
+              isPendingAction: data.isPendingAction
+            }),
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        if (isGroupOption) {
+          return jsx("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, jsx(Tag, {
+            text: label,
+            elemBefore: jsx(Box, {
+              xcss: groupTagContainer
+            }, jsx(PeopleIcon, {
+              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 jsx("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, jsx(Tag, {
+            text: label,
+            elemBefore: jsx("div", {
+              css: iconStyle,
+              style: {
+                color: data.iconColor
+              }
+            }, data.icon),
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        return jsx("span", {
+          ref: this.containerRef,
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, isTeamOption ? jsx(React.Fragment, null, jsx(AvatarTag, {
+          type: "other",
+          text: label,
+          isVerified: isTeamOption ? data.verified : undefined,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction,
+          avatar: function avatar(props) {
+            return jsx(TeamAvatar, _extends({}, props, avatarProps));
+          }
+        }), canShowArchivedLozenge ? jsx(Box, {
+          xcss: archivedLozengeWrapper
+        }, jsx(Lozenge, {
+          appearance: "default"
+        }, jsx(FormattedMessage, messages.archivedLozenge))) : null) : jsx(AvatarTag, {
+          type: "user",
+          text: label,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction,
+          avatar: function avatar(props) {
+            return jsx(Avatar, _extends({}, props, avatarProps));
+          }
+        }));
+      }
       return jsx(components.MultiValue, _extends({}, rest, {
+        data: option,
+        removeProps: removeProps,
         innerProps: {
           ref: this.containerRef
         },

package/dist/esm/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 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";

package/dist/esm/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}