@atlaskit/user-picker 11.23.3 → 11.25.0

package/dist/cjs/components/SingleValue.js

@@ -1,6 +1,7 @@
-/* SingleValue.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,18 +11,22 @@ require("./SingleValue.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _select = require("@atlaskit/select");
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
 var _avatar = require("@atlaskit/avatar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _reactIntlNext = require("react-intl-next");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _i18n = require("./i18n");
 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 styles = {
   avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
   avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
-  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c"
+  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c",
+  archivedLozengeWrapper: "_1e0c1txw _19bv1b66"
 };
 var ElementAfter = function ElementAfter(props) {
   var data = props.data.data,
@@ -41,6 +46,7 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     _props$selectProps = props.selectProps,
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
+  var canShowArchivedLozenge = (0, _utils.isTeam)(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && (0, _platformFeatureFlags.fg)('enable-sup-archive-experience');
   return !isFocused ? /*#__PURE__*/React.createElement(_select.components.SingleValue, props, /*#__PURE__*/React.createElement(_compiled.Flex, {
     xcss: styles.avatarItem
   }, data.icon ? /*#__PURE__*/React.createElement(_AvatarOrIcon.AvatarOrIcon, {
@@ -63,5 +69,9 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     xcss: styles.avatarItemText
   }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     alignBlock: "center"
-  }, label, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
+  }, label, canShowArchivedLozenge ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.archivedLozengeWrapper
+  }, /*#__PURE__*/React.createElement(_lozenge.default, {
+    appearance: "default"
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.archivedLozenge))) : null, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
 };

package/dist/cjs/components/SingleValueContainer.js

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

package/dist/cjs/components/UserPicker.js

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

package/dist/cjs/components/i18n.js

@@ -176,6 +176,11 @@ var messages = exports.messages = (0, _reactIntlNext.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/cjs/components/styles.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _colors = require("@atlaskit/theme/colors");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _select = require("@atlaskit/select");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["_paddingTop", "_paddingBottom", "_paddingLeft", "_paddingRight"],
   _excluded2 = ["_paddingTop", "_paddingBottom", "_position"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -36,7 +37,7 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
         borderColor: state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
-        backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(_colors.N10, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")"),
+        backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.isDisabled && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-background-disabled, ".concat(_colors.N10, ")") : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(_colors.N10, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")"),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },

package/dist/cjs/components/utils.js

@@ -19,7 +19,7 @@ var isUser = exports.isUser = function isUser(option) {
   return option.type === undefined || option.type === _types.UserType;
 };
 var isTeam = exports.isTeam = function isTeam(option) {
-  return option.type === _types.TeamType;
+  return (option === null || option === void 0 ? void 0 : option.type) === _types.TeamType;
 };
 var isGroup = exports.isGroup = function isGroup(option) {
   return option.type === _types.GroupType;

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

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.groupOptionsByType = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactIntlNext = require("react-intl-next");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _i18n = require("../../components/i18n");
-var getLabelForType = function getLabelForType(type) {
+var getLabelForType = function getLabelForType(type, customLabels) {
+  if (customLabels && type in customLabels && (0, _platformFeatureFlags.fg)('jsm-wfo-assignee-recommendation-on-queues')) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customLabels[type]);
+  }
   switch (type) {
     case 'user':
       return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.userTypeLabel);
@@ -25,7 +29,7 @@ var getLabelForType = function getLabelForType(type) {
       return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.otherTypeLabel);
   }
 };
-var groupOptionsByType = exports.groupOptionsByType = (0, _memoizeOne.default)(function (options, groupByTypeOrder) {
+var groupOptionsByType = exports.groupOptionsByType = (0, _memoizeOne.default)(function (options, groupByTypeOrder, customGroupLabels) {
   // If groupByTypeOrder is empty, just return the original options
   if (groupByTypeOrder.length === 0) {
     return options;
@@ -45,7 +49,7 @@ var groupOptionsByType = exports.groupOptionsByType = (0, _memoizeOne.default)(f
   groupByTypeOrder.forEach(function (type) {
     if (groupedMap.has(type)) {
       result.push({
-        label: getLabelForType(type),
+        label: getLabelForType(type, customGroupLabels),
         options: groupedMap.get(type)
       });
       groupedMap.delete(type);

package/dist/es2019/analytics.js

@@ -1,3 +1,4 @@
+// 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/es2019/components/AvatarItemOption.js

@@ -3,9 +3,10 @@
  * @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';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
@@ -106,6 +107,14 @@ export const textWrapper = color => {
     color
   });
 };
+const lozengeAppearanceToTagColor = {
+  default: 'standard',
+  success: 'lime',
+  removed: 'red',
+  inprogress: 'blue',
+  new: 'purple',
+  moved: 'orange'
+};
 export const AvatarItemOption = ({
   avatar,
   isDisabled,
@@ -113,6 +122,26 @@ export const AvatarItemOption = ({
   primaryText,
   secondaryText
 }) => {
+  const renderTag = () => {
+    if (isLozengeText(lozenge) && !lozenge.isBold) {
+      const color = lozenge.appearance ? lozengeAppearanceToTagColor[lozenge.appearance] : 'standard';
+      const 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();
+  };
   const renderLozenge = () => {
     if (isLozengeText(lozenge)) {
       if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
@@ -140,6 +169,6 @@ export const AvatarItemOption = ({
       css: getTextStyle(true)
     }, secondaryText))), lozenge && jsx("div", {
       css: additionalInfo
-    }, renderLozenge()))
+    }, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag() : renderLozenge()))
   );
 };

package/dist/es2019/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';
 const iconStyle = css({
   display: 'flex',

package/dist/es2019/components/BaseUserPicker.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
@@ -341,7 +342,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         hoveringClearIndicator
       });
     });
-    _defineProperty(this, "getOptions", () => {
+    _defineProperty(this, "getOptionsOld", () => {
       const options = getOptions(this.state.options) || [];
       const {
         maxOptions,
@@ -365,6 +366,34 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       }
       return groupByTypeOrder ? groupOptionsByType(options, groupByTypeOrder) : options;
     });
+    _defineProperty(this, "getOptionsNew", () => {
+      const options = getOptions(this.state.options) || [];
+      const {
+        maxOptions,
+        isMulti,
+        groupByTypeOrder,
+        customGroupLabels
+      } = this.props;
+      if (maxOptions === 0) {
+        return [];
+      }
+      if (maxOptions && maxOptions > 0 && maxOptions < options.length) {
+        const {
+          value
+        } = this.state;
+        let filteredOptions = options;
+        // Filter out previously selected options
+        if (isMulti && Array.isArray(value)) {
+          const valueIds = value.map(item => item.data.id);
+          filteredOptions = options.filter(option => 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", () => {
+      return fg('jsm-wfo-assignee-recommendation-on-queues') ? this.getOptionsNew() : this.getOptionsOld();
+    });
     _defineProperty(this, "getAppearance", () => this.props.appearance ? this.props.appearance : 'normal');
     _defineProperty(this, "handleClickDraggableParentComponent", () => {
       if (this.state.initialFocusHandled) {

package/dist/es2019/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 _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./ClearIndicator.compiled.css";

package/dist/es2019/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/es2019/components/CustomOption/main.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @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/es2019/components/EmailOption/main.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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/es2019/components/ExternalUserOption/ExternalAvatarItemOption.js

@@ -3,7 +3,7 @@
  * @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';
 const outerWrapper = isDisabled => css({

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

@@ -3,7 +3,7 @@
  * @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/es2019/components/GroupOption/main.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 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/es2019/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 _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./Input.compiled.css";

package/dist/es2019/components/MultiValue.js

@@ -10,12 +10,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 const scrollToValue = (valueContainer, control) => {
   const {
     top,
@@ -31,14 +38,34 @@ export const scrollToValue = (valueContainer, control) => {
     valueContainer.scrollIntoView(false);
   }
 };
-const groupTagContainer = xcss({
+const groupTagContainerOld = xcss({
   paddingLeft: 'space.025',
   marginTop: 'space.025'
 });
+const groupTagContainer = xcss({
+  paddingLeft: 'space.050'
+});
+const archivedLozengeWrapper = xcss({
+  display: 'flex',
+  paddingLeft: 'space.050'
+});
+const iconStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: '20px',
+  height: '20px'
+});
 const 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)"
 });
+const 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 class MultiValue extends React.Component {
   constructor(props) {
     super(props);
@@ -57,7 +84,7 @@ export class MultiValue extends 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
@@ -85,11 +112,19 @@ export class MultiValue extends React.Component {
           data
         }
       } = this.props;
+      const 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();
@@ -104,21 +139,26 @@ export class MultiValue extends React.Component {
   }
   shouldComponentUpdate(nextProps) {
     const {
-      data: {
-        label,
-        data
-      },
+      data: option,
       innerProps,
       isFocused
     } = this.props;
     const {
-      data: {
-        label: nextLabel,
-        data: nextData
-      },
+      data: nextOption,
       innerProps: nextInnerProps,
       isFocused: nextIsFocused
     } = nextProps;
+    if (option == null || nextOption == null) {
+      return option !== nextOption || innerProps !== nextInnerProps || isFocused !== nextIsFocused;
+    }
+    const {
+      label,
+      data
+    } = option;
+    const {
+      label: nextLabel,
+      data: nextData
+    } = nextOption;
 
     // We can ignore onRemove here because it is an anonymous function
     // that will be recreated every time but with the same implementation.
@@ -127,10 +167,110 @@ export class MultiValue extends React.Component {
   render() {
     const {
       children,
-      innerProps,
+      innerProps: _innerProps,
+      removeProps,
+      data: option,
       ...rest
     } = this.props;
+    if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
+      var _this$props$selectPro;
+      const {
+        data,
+        label
+      } = option;
+      const isTeamOption = isTeam(data);
+      const isGroupOption = isGroup(data);
+      const isEmailOption = isEmail(data);
+      const avatarUrl = getAvatarUrl(data);
+      const isDisabled = Boolean((_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.isDisabled);
+      const canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
+      const avatarProps = avatarUrl ? {
+        name: data.name,
+        src: avatarUrl
+      } : {
+        name: data.name
+      };
+      const 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: props => 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: props => jsx(Avatar, _extends({}, props, avatarProps))
+      }));
+    }
     return jsx(components.MultiValue, _extends({}, rest, {
+      data: option,
+      removeProps: removeProps,
       innerProps: {
         ref: this.containerRef
       },

package/dist/es2019/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 _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./MultiValueContainer.compiled.css";

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

package/dist/es2019/components/SingleValue.js

@@ -1,19 +1,23 @@
-/* SingleValue.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* SingleValue.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./SingleValue.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
+import Lozenge from '@atlaskit/lozenge';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isTeam, isGroup } from './utils';
 import { getAppearanceForAppType } from '@atlaskit/avatar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { FormattedMessage } from 'react-intl-next';
 import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+import { messages } from './i18n';
 const styles = {
   avatarItem: "_1reo15vq _18m915vq _4cvr1h6o _1ul953f4",
   avatarItemTextWrapper: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _bozgu2gc _vwz419ii",
-  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c"
+  avatarItemText: "_syazi7uo _1reo15vq _1bto1l2s _o5721q9c",
+  archivedLozengeWrapper: "_1e0c1txw _19bv1b66"
 };
 const ElementAfter = props => {
   const {
@@ -42,6 +46,7 @@ export const SingleValue = props => {
       isFocused
     }
   } = props;
+  const canShowArchivedLozenge = isTeam(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED' && fg('enable-sup-archive-experience');
   return !isFocused ? /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(Flex, {
     xcss: styles.avatarItem
   }, data.icon ? /*#__PURE__*/React.createElement(AvatarOrIcon, {
@@ -64,5 +69,9 @@ export const SingleValue = props => {
     xcss: styles.avatarItemText
   }, /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center"
-  }, label, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
+  }, label, canShowArchivedLozenge ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.archivedLozengeWrapper
+  }, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "default"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.archivedLozenge))) : null, /*#__PURE__*/React.createElement(ElementAfter, props))))))) : null;
 };

package/dist/es2019/components/SingleValueContainer.js

@@ -1,4 +1,4 @@
-/* SingleValueContainer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* SingleValueContainer.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./SingleValueContainer.compiled.css";

package/dist/es2019/components/UserPicker.js

@@ -1,4 +1,4 @@
-/* UserPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* UserPicker.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ax, ix } from "@compiled/react/runtime";