@atlaskit/user-picker 11.24.0 → 11.25.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

package/dist/cjs/analytics.js

@@ -11,9 +11,10 @@ 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 = "11.23.3";
+var packageVersion = "0.0.0-development";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/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/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/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
 });
@@ -19,15 +20,19 @@ 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 = require("@atlaskit/tag");
+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 _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
@@ -54,6 +59,10 @@ var groupTagContainerOld = (0, _primitives.xcss)({
 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',
@@ -111,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();
@@ -170,6 +187,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
         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
@@ -181,70 +199,52 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           return true;
         };
         if (isEmailOption) {
-          var emailAvatar = function emailAvatar(props) {
-            return (0, _react2.jsx)(_avatar.default, (0, _extends2.default)({}, props, {
-              children: (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
-                isLozenge: true,
-                isPendingAction: data.isPendingAction
-              })
-            }));
-          };
           return (0, _react2.jsx)("span", {
             ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, (0, _react2.jsx)(_tag.AvatarTag, {
+          }, (0, _react2.jsx)(_tag.default, {
             text: label,
-            type: "other",
-            avatar: emailAvatar,
+            elemBefore: (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
+              isLozenge: true,
+              isPendingAction: data.isPendingAction
+            }),
             isRemovable: !isDisabled,
             onBeforeRemoveAction: removeAction
           }));
         }
         if (isGroupOption) {
-          var groupAvatar = function groupAvatar(props) {
-            return (0, _react2.jsx)(_avatar.default, (0, _extends2.default)({}, props, {
-              children: (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"
-              }))
-            }));
-          };
           return (0, _react2.jsx)("span", {
             ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, (0, _react2.jsx)(_tag.AvatarTag, {
-            type: "other",
+          }, (0, _react2.jsx)(_tag.default, {
             text: label,
-            isVerified: data.includeTeamsUpdates,
+            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,
-            avatar: groupAvatar
+            onBeforeRemoveAction: removeAction
           }));
         }
         if (data.icon) {
-          var iconAvatar = function iconAvatar(props) {
-            return (0, _react2.jsx)(_avatar.default, (0, _extends2.default)({}, props, {
-              children: (0, _react2.jsx)("div", {
-                css: iconStyle,
-                style: {
-                  color: data.iconColor
-                }
-              }, data.icon)
-            }));
-          };
           return (0, _react2.jsx)("span", {
+            ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, (0, _react2.jsx)(_tag.AvatarTag, {
+          }, (0, _react2.jsx)(_tag.default, {
             text: label,
-            type: isTeamOption ? 'other' : 'user',
-            avatar: iconAvatar,
+            elemBefore: (0, _react2.jsx)("div", {
+              css: iconStyle,
+              style: {
+                color: data.iconColor
+              }
+            }, data.icon),
             isRemovable: !isDisabled,
             onBeforeRemoveAction: removeAction
           }));
@@ -253,7 +253,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           ref: this.containerRef,
           css: avatarTagWrapperStyle,
           "data-user-picker-multi-value": true
-        }, isTeamOption ? (0, _react2.jsx)(_tag.AvatarTag, {
+        }, isTeamOption ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tag.AvatarTag, {
           type: "other",
           text: label,
           isVerified: isTeamOption ? data.verified : undefined,
@@ -262,7 +262,11 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           avatar: function avatar(props) {
             return (0, _react2.jsx)(_teamsAvatar.default, (0, _extends2.default)({}, props, avatarProps));
           }
-        }) : (0, _react2.jsx)(_tag.AvatarTag, {
+        }), 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,

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}

package/dist/cjs/components/SingleValue.js

@@ -1,6 +1,7 @@
 /* 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/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/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,10 +1,11 @@
+// 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
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.23.3";
+const packageVersion = "0.0.0-development";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;