@atlaskit/user-picker 11.23.3 → 11.24.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/user-picker
 
+## 11.24.0
+
+### Minor Changes
+
+- [`1ad583e025c33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1ad583e025c33) -
+  [ux] Updates User picker, behind a feature gate, to use @atlaski/tag component when isMulti is
+  true.
+
 ## 11.23.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

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

package/afm-jira/tsconfig.json

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

package/afm-products/tsconfig.json

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

package/dist/cjs/analytics.js

@@ -13,7 +13,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "0.0.0-development";
+var packageVersion = "11.23.3";
 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/ClearIndicator.js

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

package/dist/cjs/components/Control.js

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

package/dist/cjs/components/Input.js

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

package/dist/cjs/components/MultiValue.js

@@ -17,13 +17,17 @@ var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
 var _react2 = require("@emotion/react");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tag = 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 _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/core/people-group"));
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
-var _excluded = ["children", "innerProps"];
+var _excluded = ["children", "innerProps", "removeProps", "data"];
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -43,14 +47,30 @@ var scrollToValue = exports.scrollToValue = function scrollToValue(valueContaine
     valueContainer.scrollIntoView(false);
   }
 };
-var groupTagContainer = (0, _primitives.xcss)({
+var groupTagContainerOld = (0, _primitives.xcss)({
   paddingLeft: 'space.025',
   marginTop: 'space.025'
 });
+var groupTagContainer = (0, _primitives.xcss)({
+  paddingLeft: 'space.050'
+});
+var iconStyle = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: '20px',
+  height: '20px'
+});
 var nameWrapper = (0, _react2.css)({
   font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   paddingLeft: "var(--ds-space-050, 4px)"
 });
+var avatarTagWrapperStyle = (0, _react2.css)({
+  display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- offsets AvatarTag's built-in space.050 margin down to space.025
+  margin: '-2px'
+});
 var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
   function MultiValue(props) {
     var _this;
@@ -67,7 +87,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
       }
       if ((0, _utils.isGroup)(data)) {
         return (0, _react2.jsx)(_primitives.Box, {
-          xcss: groupTagContainer
+          xcss: groupTagContainerOld
         }, (0, _react2.jsx)(_peopleGroup.default, {
           color: "currentColor",
           label: "" // This element is a decorative icon and does not require a label
@@ -114,16 +134,19 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
       var _this$props = this.props,
-        _this$props$data = _this$props.data,
-        label = _this$props$data.label,
-        data = _this$props$data.data,
+        option = _this$props.data,
         innerProps = _this$props.innerProps,
         isFocused = _this$props.isFocused;
-      var _nextProps$data = nextProps.data,
-        nextLabel = _nextProps$data.label,
-        nextData = _nextProps$data.data,
+      var nextOption = nextProps.data,
         nextInnerProps = nextProps.innerProps,
         nextIsFocused = nextProps.isFocused;
+      if (option == null || nextOption == null) {
+        return option !== nextOption || innerProps !== nextInnerProps || isFocused !== nextIsFocused;
+      }
+      var label = option.label,
+        data = option.data;
+      var nextLabel = nextOption.label,
+        nextData = nextOption.data;
 
       // We can ignore onRemove here because it is an anonymous function
       // that will be recreated every time but with the same implementation.
@@ -134,9 +157,124 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props2 = this.props,
         children = _this$props2.children,
-        innerProps = _this$props2.innerProps,
+        _innerProps = _this$props2.innerProps,
+        removeProps = _this$props2.removeProps,
+        option = _this$props2.data,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+      if ((0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
+        var _this$props$selectPro;
+        var data = option.data,
+          label = option.label;
+        var isTeamOption = (0, _utils.isTeam)(data);
+        var isGroupOption = (0, _utils.isGroup)(data);
+        var isEmailOption = (0, _utils.isEmail)(data);
+        var avatarUrl = (0, _utils.getAvatarUrl)(data);
+        var isDisabled = Boolean((_this$props$selectPro = this.props.selectProps) === null || _this$props$selectPro === void 0 ? void 0 : _this$props$selectPro.isDisabled);
+        var avatarProps = avatarUrl ? {
+          name: data.name,
+          src: avatarUrl
+        } : {
+          name: data.name
+        };
+        var removeAction = function removeAction() {
+          removeProps.onClick({});
+          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, {
+            text: label,
+            type: "other",
+            avatar: emailAvatar,
+            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",
+            text: label,
+            isVerified: data.includeTeamsUpdates,
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction,
+            avatar: groupAvatar
+          }));
+        }
+        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", {
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, (0, _react2.jsx)(_tag.AvatarTag, {
+            text: label,
+            type: isTeamOption ? 'other' : 'user',
+            avatar: iconAvatar,
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        return (0, _react2.jsx)("span", {
+          ref: this.containerRef,
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, isTeamOption ? (0, _react2.jsx)(_tag.AvatarTag, {
+          type: "other",
+          text: label,
+          isVerified: isTeamOption ? data.verified : undefined,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction,
+          avatar: function avatar(props) {
+            return (0, _react2.jsx)(_teamsAvatar.default, (0, _extends2.default)({}, props, avatarProps));
+          }
+        }) : (0, _react2.jsx)(_tag.AvatarTag, {
+          type: "user",
+          text: label,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction,
+          avatar: function avatar(props) {
+            return (0, _react2.jsx)(_avatar.default, (0, _extends2.default)({}, props, avatarProps));
+          }
+        }));
+      }
       return (0, _react2.jsx)(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
+        data: option,
+        removeProps: removeProps,
         innerProps: {
           ref: this.containerRef
         },

package/dist/cjs/components/MultiValueContainer.js

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

package/dist/cjs/components/SingleValue.js

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

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/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/es2019/analytics.js

@@ -4,7 +4,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "0.0.0-development";
+const packageVersion = "11.23.3";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/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/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,6 +10,10 @@ 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 } from '@atlaskit/tag';
+import TeamAvatar from '@atlaskit/teams-avatar';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
@@ -31,14 +35,30 @@ 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 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 +77,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
@@ -104,21 +124,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 +152,117 @@ 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 avatarProps = avatarUrl ? {
+        name: data.name,
+        src: avatarUrl
+      } : {
+        name: data.name
+      };
+      const removeAction = () => {
+        removeProps.onClick({});
+        return true;
+      };
+      if (isEmailOption) {
+        const emailAvatar = props => jsx(Avatar, _extends({}, props, {
+          children: jsx(AddOptionAvatar, {
+            isLozenge: true,
+            isPendingAction: data.isPendingAction
+          })
+        }));
+        return jsx("span", {
+          ref: this.containerRef,
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, jsx(AvatarTag, {
+          text: label,
+          type: "other",
+          avatar: emailAvatar,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction
+        }));
+      }
+      if (isGroupOption) {
+        const groupAvatar = props => jsx(Avatar, _extends({}, props, {
+          children: jsx(Box, {
+            xcss: groupTagContainer
+          }, jsx(PeopleIcon, {
+            color: "currentColor",
+            label: "" // This element is a decorative icon and does not require a label
+            ,
+            size: "small"
+          }))
+        }));
+        return jsx("span", {
+          ref: this.containerRef,
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, jsx(AvatarTag, {
+          type: "other",
+          text: label,
+          isVerified: data.includeTeamsUpdates,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction,
+          avatar: groupAvatar
+        }));
+      }
+      if (data.icon) {
+        const iconAvatar = props => jsx(Avatar, _extends({}, props, {
+          children: jsx("div", {
+            css: iconStyle,
+            style: {
+              color: data.iconColor
+            }
+          }, data.icon)
+        }));
+        return jsx("span", {
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, jsx(AvatarTag, {
+          text: label,
+          type: isTeamOption ? 'other' : 'user',
+          avatar: iconAvatar,
+          isRemovable: !isDisabled,
+          onBeforeRemoveAction: removeAction
+        }));
+      }
+      return jsx("span", {
+        ref: this.containerRef,
+        css: avatarTagWrapperStyle,
+        "data-user-picker-multi-value": true
+      }, isTeamOption ? jsx(AvatarTag, {
+        type: "other",
+        text: label,
+        isVerified: isTeamOption ? data.verified : undefined,
+        isRemovable: !isDisabled,
+        onBeforeRemoveAction: removeAction,
+        avatar: props => jsx(TeamAvatar, _extends({}, props, avatarProps))
+      }) : 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.js

@@ -1,4 +1,4 @@
-/* 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";

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";

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/esm/analytics.js

@@ -7,7 +7,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "0.0.0-development";
+var packageVersion = "11.23.3";
 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/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/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,6 +19,10 @@ 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 } from '@atlaskit/tag';
+import TeamAvatar from '@atlaskit/teams-avatar';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
@@ -38,14 +42,30 @@ 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 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 +82,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
@@ -109,16 +129,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 +152,124 @@ 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 avatarProps = avatarUrl ? {
+          name: data.name,
+          src: avatarUrl
+        } : {
+          name: data.name
+        };
+        var removeAction = function removeAction() {
+          removeProps.onClick({});
+          return true;
+        };
+        if (isEmailOption) {
+          var emailAvatar = function emailAvatar(props) {
+            return jsx(Avatar, _extends({}, props, {
+              children: jsx(AddOptionAvatar, {
+                isLozenge: true,
+                isPendingAction: data.isPendingAction
+              })
+            }));
+          };
+          return jsx("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, jsx(AvatarTag, {
+            text: label,
+            type: "other",
+            avatar: emailAvatar,
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        if (isGroupOption) {
+          var groupAvatar = function groupAvatar(props) {
+            return jsx(Avatar, _extends({}, props, {
+              children: jsx(Box, {
+                xcss: groupTagContainer
+              }, jsx(PeopleIcon, {
+                color: "currentColor",
+                label: "" // This element is a decorative icon and does not require a label
+                ,
+                size: "small"
+              }))
+            }));
+          };
+          return jsx("span", {
+            ref: this.containerRef,
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, jsx(AvatarTag, {
+            type: "other",
+            text: label,
+            isVerified: data.includeTeamsUpdates,
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction,
+            avatar: groupAvatar
+          }));
+        }
+        if (data.icon) {
+          var iconAvatar = function iconAvatar(props) {
+            return jsx(Avatar, _extends({}, props, {
+              children: jsx("div", {
+                css: iconStyle,
+                style: {
+                  color: data.iconColor
+                }
+              }, data.icon)
+            }));
+          };
+          return jsx("span", {
+            css: avatarTagWrapperStyle,
+            "data-user-picker-multi-value": true
+          }, jsx(AvatarTag, {
+            text: label,
+            type: isTeamOption ? 'other' : 'user',
+            avatar: iconAvatar,
+            isRemovable: !isDisabled,
+            onBeforeRemoveAction: removeAction
+          }));
+        }
+        return jsx("span", {
+          ref: this.containerRef,
+          css: avatarTagWrapperStyle,
+          "data-user-picker-multi-value": true
+        }, isTeamOption ? 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));
+          }
+        }) : 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.js

@@ -1,4 +1,4 @@
-/* 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";

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

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

package/dist/esm/components/styles.js

@@ -7,6 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 var BORDER_PADDING = "var(--ds-space-075, 6px)";
 export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
@@ -29,7 +30,7 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
         borderColor: state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
-        backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(N10, ")") : "var(--ds-background-input, ".concat(N20, ")"),
+        backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.isDisabled && fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-background-disabled, ".concat(N10, ")") : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(N10, ")") : "var(--ds-background-input, ".concat(N20, ")"),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.23.3",
+	"version": "11.24.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -55,6 +55,7 @@
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/select": "^21.7.0",
 		"@atlaskit/spinner": "^19.0.0",
+		"@atlaskit/tag": "^14.5.0",
 		"@atlaskit/teams-avatar": "^2.4.0",
 		"@atlaskit/theme": "^22.0.0",
 		"@atlaskit/tokens": "^11.0.0",
@@ -118,6 +119,9 @@
 		},
 		"jira_ai_agent_avatar_user_picker_user_option": {
 			"type": "boolean"
+		},
+		"platform-dst-lozenge-tag-badge-visual-uplifts": {
+			"type": "boolean"
 		}
 	}
 }