@atlaskit/user-picker 13.8.8 → 13.10.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @atlaskit/user-picker
 
+## 13.10.0
+
+### Minor Changes
+
+- [`ef98af289c49b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef98af289c49b) -
+  Add motion to Tag, AvatarTag, TagDropdownTrigger, Tag Group, Select, React Select, and User Picker
+  tag values. Tags use `motion.label.enter` and `motion.label.exit` for entry and exit, while
+  interactive tags and dropdown triggers use the button hover and pressed motion tokens; Tag
+  Dropdown Trigger also fades between its content and loading spinner. The remove control is removed
+  when exit begins so it cannot linger while the tag collapses.
+
+  Motion is gated by `platform-dst-motion-uplift-labels`. Compatibility and adoption paths for the
+  visually uplifted Tag, Tag Group, Select, React Select, and User Picker additionally remain behind
+  `platform-dst-lozenge-tag-badge-visual-uplifts`.
+
+  `@atlaskit/react-select` also adds an optional `onMotionFinish` callback to the exported
+  `MultiValueProps` interface so the Select can restore its placeholder after the final multi-value
+  exit completes.
+
+  ```tsx
+  import Tag from '@atlaskit/tag/new';
+
+  <Tag text="Status" />;
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.9.0
+
+### Minor Changes
+
+- [`079dc2326a811`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/079dc2326a811) -
+  Added an optional `renderOptionContent` prop to `Option`'s props, letting consumers wrap the
+  default rendered option content (e.g. to add a profile card) without losing the built-in avatar,
+  name, and email rendering.
+
+  ```tsx
+  <Option
+  	renderOptionContent={(content) => <ProfileCard accountId={accountId}>{content}</ProfileCard>}
+  />
+  ```
+
 ## 13.8.8
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.userInfoEvent = exports.startSession = exports.selectEvent = exports.searchedEvent = exports.focusEvent = exports.failedEvent = exports.deleteEvent = exports.createAndFireEventInElementsChannel = exports.clearEvent = exports.cancelEvent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _createAndFireEvents = _interopRequireDefault(require("@atlaskit/analytics-next/createAndFireEvents"));
+var _featureGates = _interopRequireDefault(require("@atlaskit/feature-gate-js-client/feature-gates"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 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 @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 = "13.8.7";
+var packageVersion = "13.9.0";
 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}$/;
@@ -30,7 +30,7 @@ var startSession = exports.startSession = function startSession() {
     lastKey: undefined
   };
 };
-var createAndFireEventInElementsChannel = exports.createAndFireEventInElementsChannel = (0, _analyticsNext.createAndFireEvent)('fabric-elements');
+var createAndFireEventInElementsChannel = exports.createAndFireEventInElementsChannel = (0, _createAndFireEvents.default)('fabric-elements');
 var createEvent = function createEvent(eventType, action, actionSubject) {
   var attributes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   return {
@@ -121,7 +121,7 @@ var deleteEvent = exports.deleteEvent = function deleteEvent(props, state, sessi
     journeyId: journeyId,
     value: optionData2Analytics(args[0]),
     pickerOpen: state.menuIsOpen
-  }, _featureGateJsClient.default.getExperimentValue('team_member_suggestions_while_creating_team', 'isEnabled', false) && ((_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.isSuggestedMember) !== undefined ? {
+  }, _featureGates.default.getExperimentValue('team_member_suggestions_while_creating_team', 'isEnabled', false) && ((_args$ = args[0]) === null || _args$ === void 0 ? void 0 : _args$.isSuggestedMember) !== undefined ? {
     isSuggestedMember: args[0].isSuggestedMember
   } : {}));
 };
@@ -144,7 +144,7 @@ var selectEvent = exports.selectEvent = function selectEvent(props, state, sessi
     downKeyCount: downKeyCount(session),
     result: result(arguments.length <= 4 ? undefined : arguments[4]),
     numberOfResults: numberOfResults(state)
-  }, (0, _platformFeatureFlags.fg)('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, arguments.length <= 4 ? undefined : arguments[4]) : {}));
+  }, (0, _fg.fg)('jsm_routing_recommended_agent_minor_fix') ? selectedCustomGroupAnalyticsAttributes(props, arguments.length <= 4 ? undefined : arguments[4]) : {}));
 };
 var searchedEvent = exports.searchedEvent = function searchedEvent(props, state, session, journeyId) {
   var searchResults = results(state);

package/dist/cjs/components/AvatarItemOption.js

@@ -9,10 +9,10 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
-var _tag = _interopRequireDefault(require("@atlaskit/tag"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/lozenge"));
+var _removableTag = _interopRequireDefault(require("@atlaskit/tag/removable-tag"));
 var _utils = require("./utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 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; }
 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); } /**
@@ -92,7 +92,7 @@ var AvatarItemOption = exports.AvatarItemOption = function AvatarItemOption(_ref
   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, {
+      var tag = (0, _react2.jsx)(_removableTag.default, {
         text: lozenge.text,
         color: color,
         isRemovable: false,
@@ -136,6 +136,6 @@ var AvatarItemOption = exports.AvatarItemOption = function AvatarItemOption(_ref
       css: getTextStyle(true)
     }, secondaryText))), lozenge && (0, _react2.jsx)("div", {
       css: additionalInfo
-    }, (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag() : renderLozenge()))
+    }, (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? renderTag() : renderLozenge()))
   );
 };

package/dist/cjs/components/BaseUserPicker.js

@@ -13,9 +13,9 @@ 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 _fg = require("@atlaskit/platform-feature-flags/fg");
+var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
+var _experienceState = require("@atlaskit/ufo/experience-state");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
@@ -193,7 +193,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       }
     }, 200));
     (0, _defineProperty2.default)(_this, "abortOptionsShownUfoExperience", function () {
-      if (_this.optionsShownUfoExperienceInstance.state.id === _ufo.UFOExperienceState.STARTED.id) {
+      if (_this.optionsShownUfoExperienceInstance.state.id === _experienceState.UFOExperienceState.STARTED.id) {
         // There may be an existing UFO timing running from previous key entry or focus,
         // so abort it and restart it just in case.
         _this.optionsShownUfoExperienceInstance.abort();
@@ -406,7 +406,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       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();
+      return (0, _fg.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';
@@ -525,7 +525,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
           this.session.inputChangeTime = Date.now();
         }
       }
-      if (menuIsOpen && (!prevProps.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [_ufo.UFOExperienceState.STARTED.id, _ufo.UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
+      if (menuIsOpen && (!prevProps.loadOptions || prevState.menuIsOpen) && count === 0 && !resolving && [_experienceState.UFOExperienceState.STARTED.id, _experienceState.UFOExperienceState.IN_PROGRESS.id].includes(this.optionsShownUfoExperienceInstance.state.id)) {
         this.optionsShownUfoExperienceInstance.success();
       }
     }
@@ -699,4 +699,4 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
   },
   openMenuOnClick: false
 });
-var BaseUserPicker = exports.BaseUserPicker = (0, _analyticsNext.withAnalyticsEvents)()(BaseUserPickerWithoutAnalytics);
+var BaseUserPicker = exports.BaseUserPicker = (0, _withAnalyticsEvents.default)()(BaseUserPickerWithoutAnalytics);

package/dist/cjs/components/ClearIndicator.js

@@ -17,7 +17,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _select = require("@atlaskit/select");
+var _reactSelect = require("@atlaskit/select/react-select");
 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; }
 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)); }
@@ -52,7 +52,6 @@ var ClearIndicator = exports.ClearIndicator = /*#__PURE__*/function (_React$Pure
         clearValue = _this$props.clearValue,
         selectProps = _this$props.selectProps;
       clearValue();
-      //@ts-ignore react-select unsupported props
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();
       }
@@ -64,7 +63,7 @@ var ClearIndicator = exports.ClearIndicator = /*#__PURE__*/function (_React$Pure
     key: "render",
     value: function render() {
       var clearValueLabel = this.props.selectProps.clearValueLabel;
-      var Indicator = /*#__PURE__*/_react.default.createElement(_select.components.ClearIndicator, (0, _extends2.default)({}, this.props, {
+      var Indicator = /*#__PURE__*/_react.default.createElement(_reactSelect.components.ClearIndicator, (0, _extends2.default)({}, this.props, {
         innerProps: _objectSpread(_objectSpread({}, this.props.innerProps), {}, {
           onMouseDown: this.handleMouseDown
         }),

package/dist/cjs/components/Control.js

@@ -11,7 +11,7 @@ require("./Control.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _select = require("@atlaskit/select");
+var _reactSelect = require("@atlaskit/select/react-select");
 var _react2 = require("@compiled/react");
 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 controlStyles = {
@@ -24,7 +24,7 @@ var controlStyles = {
 };
 var Control = function Control(props) {
   var isCompact = props.appearance === 'compact';
-  return /*#__PURE__*/React.createElement(_select.components.Control, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/React.createElement(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     xcss: (0, _react2.cx)(controlStyles.root, isCompact && controlStyles.compact, (props.selectProps.subtle || props.selectProps.noBorder) && controlStyles.subtle, props.isFocused && controlStyles.focused, props.isInvalid && controlStyles.invalid, props.isDisabled && controlStyles.disabled)
   }));
 };

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

@@ -8,13 +8,14 @@ exports.SourcesTooltipContent = void 0;
 var _primitives = require("@atlaskit/primitives");
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _atlassianIcon = require("@atlaskit/logo/atlassian-icon");
 var _logo = require("@atlaskit/logo");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _slack = require("../assets/slack");
 var _google = require("../assets/google");
 var _microsoft = require("../assets/microsoft");
 var _i18n = require("../i18n");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 
 var sourcesTooltipContainer = (0, _primitives.xcss)({
@@ -40,7 +41,7 @@ var SUPPORTED_SOURCES_APPIFY = [{
   label: _i18n.messages.confluenceSource
 }, {
   sourceType: 'other-atlassian',
-  icon: /*#__PURE__*/_react.default.createElement(_logo.AtlassianIcon, {
+  icon: /*#__PURE__*/_react.default.createElement(_atlassianIcon.AtlassianIcon, {
     size: 'xxsmall'
   }),
   label: _i18n.messages.otherAtlassianSourceAppify
@@ -71,7 +72,7 @@ var SUPPORTED_SOURCES = [{
   label: _i18n.messages.confluenceSource
 }, {
   sourceType: 'other-atlassian',
-  icon: /*#__PURE__*/_react.default.createElement(_logo.AtlassianIcon, {
+  icon: /*#__PURE__*/_react.default.createElement(_atlassianIcon.AtlassianIcon, {
     size: 'xxsmall'
   }),
   label: _i18n.messages.otherAtlassianSource
@@ -100,7 +101,7 @@ var SourcesTooltipContent = exports.SourcesTooltipContent = function SourcesTool
   var sources = _ref.sources,
     sourcesLoading = _ref.sourcesLoading;
   var sourcesToRender = _react.default.useMemo(function () {
-    return (0, _platformFeatureFlags.fg)('product-terminology-refresh') ? SUPPORTED_SOURCES_APPIFY.filter(function (supportedSource) {
+    return (0, _fg.fg)('product-terminology-refresh') ? SUPPORTED_SOURCES_APPIFY.filter(function (supportedSource) {
       return sources.includes(supportedSource.sourceType);
     }) : SUPPORTED_SOURCES.filter(function (supportedSource) {
       return sources.includes(supportedSource.sourceType);

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

@@ -14,8 +14,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _analyticsNext = require("@atlaskit/analytics-next");
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
+var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _analytics = require("../../analytics");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _AvatarOrIcon = require("../AvatarOrIcon");
@@ -24,7 +24,7 @@ var _ExternalUserSourcesContainer = require("../ExternalUserSourcesContainer");
 var _InfoIcon = _interopRequireDefault(require("./InfoIcon"));
 var _ExternalAvatarItemOption = require("./ExternalAvatarItemOption");
 var _SourcesTooltipContent = require("./SourcesTooltipContent");
-var _avatar = require("@atlaskit/avatar");
+var _getAppearance = _interopRequireDefault(require("@atlaskit/avatar/get-appearance"));
 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
@@ -111,7 +111,7 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
           iconColor: iconColor,
           src: avatarUrl,
           presence: status,
-          avatarAppearanceShape: (0, _avatar.getAppearanceForAppType)(appType)
+          avatarAppearanceShape: (0, _getAppearance.default)(appType)
         });
       }
       // Fallback to original behavior
@@ -119,7 +119,7 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
         appearance: "big",
         src: avatarUrl,
         presence: status,
-        avatarAppearanceShape: (0, _avatar.getAppearanceForAppType)(appType)
+        avatarAppearanceShape: (0, _getAppearance.default)(appType)
       });
     });
     (0, _defineProperty2.default)(_this, "fireEvent", function (eventCreator) {
@@ -136,7 +136,7 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
       _this.fireEvent(_analytics.userInfoEvent, user.sources, user.id);
     });
     (0, _defineProperty2.default)(_this, "getSourcesInfoTooltip", function () {
-      return _this.props.user.isExternal ? (0, _react2.jsx)(_tooltip.default, {
+      return _this.props.user.isExternal ? (0, _react2.jsx)(_Tooltip.default, {
         content: _this.formattedTooltipContent(),
         position: 'right-start',
         onShow: _this.onShow
@@ -173,4 +173,4 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(_react.default.PureComponent);
-var ExternalUserOption = exports.ExternalUserOption = (0, _analyticsNext.withAnalyticsEvents)()(ExternalUserOptionImpl);
+var ExternalUserOption = exports.ExternalUserOption = (0, _withAnalyticsEvents.default)()(ExternalUserOptionImpl);

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

@@ -16,7 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _react2 = require("@emotion/react");
 var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/core/people-group"));
-var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _main = require("@atlaskit/people-teams-ui-public/verified-team-icon/main");
 var _AvatarItemOption = require("../AvatarItemOption");
 var _i18n = require("../i18n");
 var _HighlightText = require("../HighlightText");
@@ -68,7 +68,7 @@ var GroupOption = exports.GroupOption = /*#__PURE__*/function (_React$PureCompon
       }));
     });
     (0, _defineProperty2.default)(_this, "renderVerifiedIcon", function () {
-      return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+      return (0, _react2.jsx)(_main.VerifiedTeamIcon, {
         label: "",
         size: "small",
         spacing: "none"

package/dist/cjs/components/Input.js

@@ -16,7 +16,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _select = require("@atlaskit/select");
+var _reactSelect = require("@atlaskit/select/react-select");
 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; })(); }
 var inputStyles = {
@@ -37,7 +37,6 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
       if (e.key === 'Enter') {
         e.preventDefault();
       }
-      //@ts-ignore react-select unsupported props
       if ((_this$props$selectPro = _this.props.selectProps) !== null && _this$props$selectPro !== void 0 && _this$props$selectPro.disableInput) {
         e.preventDefault();
       }
@@ -82,7 +81,7 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_select.components.Input, (0, _extends2.default)({}, this.props, {
+      return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Input, (0, _extends2.default)({}, this.props, {
         "aria-labelledby": this.ariaLabelledBy,
         "aria-describedby": this.ariaDescribedBy,
         innerRef: this.props.innerRef,

package/dist/cjs/components/Menu.js

@@ -11,7 +11,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
-var _select = require("@atlaskit/select");
+var _reactSelect = require("@atlaskit/select/react-select");
 var _react2 = require("@emotion/react");
 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; })(); } /**
@@ -32,7 +32,7 @@ var Menu = exports.Menu = /*#__PURE__*/function (_React$Component) {
   return (0, _createClass2.default)(Menu, [{
     key: "render",
     value: function render() {
-      return (0, _react2.jsx)(_select.components.Menu, this.props, this.props.selectProps.header, this.props.children, this.props.selectProps.footer &&
+      return (0, _react2.jsx)(_reactSelect.components.Menu, this.props, this.props.selectProps.header, this.props.children, this.props.selectProps.footer &&
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       (0, _react2.jsx)("div", {
         css: getFooterStyle()

package/dist/cjs/components/MultiValue.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,23 +15,23 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
-var _select = require("@atlaskit/select");
+var _reactSelect = require("@atlaskit/select/react-select");
 var _react2 = require("@emotion/react");
-var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _tag = _interopRequireWildcard(require("@atlaskit/tag"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar/avatar"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _avatarTag = _interopRequireDefault(require("@atlaskit/tag/avatar-tag"));
+var _removableTag = _interopRequireDefault(require("@atlaskit/tag/removable-tag"));
 var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar/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 _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/lozenge"));
 var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/core/people-group"));
-var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _main = require("@atlaskit/people-teams-ui-public/verified-team-icon/main");
 var _reactIntl = require("react-intl");
 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
@@ -121,7 +120,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
       var data = _this.props.data.data;
       var canShowArchivedLozenge = (0, _utils.isTeam)(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED';
       if ((0, _utils.isGroup)(data) && data.includeTeamsUpdates || (0, _utils.isTeam)(data) && data.verified) {
-        return (0, _react2.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+        return (0, _react2.jsx)(_main.VerifiedTeamIcon, {
           size: data.includeTeamsUpdates ? 'small' : 'medium'
         });
       }
@@ -177,7 +176,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
         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')) {
+      if ((0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
         var _this$props$selectPro;
         var data = option.data,
           label = option.label;
@@ -201,7 +200,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
             ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, (0, _react2.jsx)(_tag.default, {
+          }, (0, _react2.jsx)(_removableTag.default, {
             text: label,
             elemBefore: (0, _react2.jsx)(_AddOptionAvatar.AddOptionAvatar, {
               isLozenge: true,
@@ -217,7 +216,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
             ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, (0, _react2.jsx)(_tag.default, {
+          }, (0, _react2.jsx)(_removableTag.default, {
             text: label,
             elemBefore: (0, _react2.jsx)(_primitives.Box, {
               xcss: groupTagContainer
@@ -237,7 +236,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
             ref: this.containerRef,
             css: avatarTagWrapperStyle,
             "data-user-picker-multi-value": true
-          }, (0, _react2.jsx)(_tag.default, {
+          }, (0, _react2.jsx)(_removableTag.default, {
             text: label,
             elemBefore: (0, _react2.jsx)("div", {
               css: iconStyle,
@@ -254,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)(_react.default.Fragment, null, (0, _react2.jsx)(_tag.AvatarTag, {
+        }, isTeamOption ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_avatarTag.default, {
           type: "other",
           text: label,
           isVerified: isTeamOption ? data.verified : undefined,
@@ -272,7 +271,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           xcss: archivedLozengeWrapper
         }, (0, _react2.jsx)(_lozenge.default, {
           appearance: "neutral"
-        }, (0, _react2.jsx)(_reactIntl.FormattedMessage, _i18n.messages.archivedLozenge))) : null) : (0, _react2.jsx)(_tag.AvatarTag, {
+        }, (0, _react2.jsx)(_reactIntl.FormattedMessage, _i18n.messages.archivedLozenge))) : null) : (0, _react2.jsx)(_avatarTag.default, {
           type: "user",
           text: label,
           isRemovable: !isDisabled,
@@ -283,7 +282,7 @@ var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
           hasMargin: false
         }));
       }
-      return (0, _react2.jsx)(_select.components.MultiValue, (0, _extends2.default)({}, rest, {
+      return (0, _react2.jsx)(_reactSelect.components.MultiValue, (0, _extends2.default)({}, rest, {
         data: option,
         removeProps: removeProps,
         innerProps: {

package/dist/cjs/components/MultiValueContainer.js

@@ -17,10 +17,10 @@ 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 _select = require("@atlaskit/select");
+var _reactSelect = require("@atlaskit/select/react-select");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _ValueContainerWrapper = _interopRequireDefault(require("./ValueContainerWrapper"));
@@ -88,7 +88,6 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       }
       return _this.addPlaceholder(addMoreMessage);
     });
-    //@ts-ignore react-select unsupported props
     (0, _defineProperty2.default)(_this, "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     _this.state = {
       valueSize: 0,
@@ -106,7 +105,6 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       var _this$state = this.state,
         previousValueSize = _this$state.previousValueSize,
         valueSize = _this$state.valueSize;
-      //@ts-ignore react-select unsupported props
       var isFocused = this.props.selectProps.isFocused;
       if (valueSize > previousValueSize && isFocused) {
         if (this.timeoutId) {
@@ -137,13 +135,13 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
         isCompact: isCompact,
         innerProps: this.valueContainerInnerProps
       });
-      var ffTagUplifts = (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
+      var ffTagUplifts = (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
       var controlRendersValueInControl = this.props.selectProps.controlShouldRenderValue !== false;
       var tagUpliftChipRow = ffTagUplifts && hasValue && controlRendersValueInControl;
       return /*#__PURE__*/_react.default.createElement(_ValueContainerWrapper.default, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
-      }, /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, (0, _extends2.default)({}, props, {
+      }, /*#__PURE__*/_react.default.createElement(_reactSelect.components.ValueContainer, (0, _extends2.default)({}, props, {
         xcss: (0, _react2.cx)(valueContainerStyles.root, !ffTagUplifts && valueContainerStyles.paddingLegacy, ffTagUplifts && (isCompact ? valueContainerStyles.tagUpliftVerticalCompact : valueContainerStyles.tagUpliftVerticalDefault), ffTagUplifts && (tagUpliftChipRow ? valueContainerStyles.paddingLeftWide : valueContainerStyles.paddingLeftTight), tagUpliftChipRow && valueContainerStyles.withFlexAndGap)
       }), this.renderChildren()));
     }

package/dist/cjs/components/Option.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Option = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _compiled = require("@atlaskit/primitives/compiled");
-var _select = require("@atlaskit/select");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _reactSelect = require("@atlaskit/select/react-select");
+var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _react = _interopRequireDefault(require("react"));
 var _UserOption = require("./UserOption");
 var _ExternalUserOption = _interopRequireDefault(require("./ExternalUserOption"));
@@ -17,6 +18,7 @@ var _EmailOption = _interopRequireDefault(require("./EmailOption"));
 var _CustomOption = _interopRequireDefault(require("./CustomOption"));
 var _utils = require("./utils");
 var _emailValidation = require("./emailValidation");
+var _excluded = ["renderOptionContent"];
 var defaultOption = function defaultOption(_ref) {
   var data = _ref.data.data,
     isSelected = _ref.isSelected,
@@ -84,7 +86,7 @@ var dataOptionWithTooltip = function dataOptionWithTooltip(props) {
   var _props$data;
   if ((_props$data = props.data) !== null && _props$data !== void 0 && (_props$data = _props$data.data) !== null && _props$data !== void 0 && _props$data.tooltip) {
     var _props$data2;
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
       content: (_props$data2 = props.data) === null || _props$data2 === void 0 || (_props$data2 = _props$data2.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.tooltip
     }, function (tooltipProps) {
       return /*#__PURE__*/_react.default.createElement(_compiled.Box, tooltipProps, dataOption(props));
@@ -92,8 +94,11 @@ var dataOptionWithTooltip = function dataOptionWithTooltip(props) {
   }
   return dataOption(props);
 };
-var Option = exports.Option = function Option(props) {
-  return /*#__PURE__*/_react.default.createElement(_select.components.Option, props, /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
+var Option = exports.Option = function Option(_ref3) {
+  var renderOptionContent = _ref3.renderOptionContent,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var defaultContent = /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
     fallback: defaultOption(props)
-  }, dataOptionWithTooltip(props)));
+  }, dataOptionWithTooltip(props));
+  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.Option, props, renderOptionContent ? renderOptionContent(defaultContent) : defaultContent);
 };