@atlaskit/user-picker 13.9.0 → 13.10.0

package/dist/cjs/components/SingleValue.js

@@ -10,13 +10,13 @@ exports.SingleValue = void 0;
 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 _reactSelect = require("@atlaskit/select/react-select");
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/lozenge"));
 var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
-var _avatar = require("@atlaskit/avatar");
-var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _getAppearance = _interopRequireDefault(require("@atlaskit/avatar/get-appearance"));
+var _main = require("@atlaskit/people-teams-ui-public/verified-team-icon/main");
 var _reactIntl = require("react-intl");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _i18n = require("./i18n");
@@ -32,7 +32,7 @@ var ElementAfter = function ElementAfter(props) {
     shouldShowVerifiedIcon = props.shouldShowVerifiedIcon;
   var showIcon = shouldShowVerifiedIcon ? shouldShowVerifiedIcon(data) : (0, _utils.isTeam)(data) && data.verified || (0, _utils.isGroup)(data) && data.includeTeamsUpdates;
   if (showIcon) {
-    return /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
+    return /*#__PURE__*/React.createElement(_main.VerifiedTeamIcon, {
       size: data.includeTeamsUpdates ? 'small' : 'medium'
     });
   }
@@ -46,7 +46,7 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     appearance = _props$selectProps.appearance,
     isFocused = _props$selectProps.isFocused;
   var canShowArchivedLozenge = (0, _utils.isTeam)(data) && (data === null || data === void 0 ? void 0 : data.state) === 'DISBANDED';
-  return !isFocused ? /*#__PURE__*/React.createElement(_select.components.SingleValue, props, /*#__PURE__*/React.createElement(_compiled.Flex, {
+  return !isFocused ? /*#__PURE__*/React.createElement(_reactSelect.components.SingleValue, props, /*#__PURE__*/React.createElement(_compiled.Flex, {
     xcss: styles.avatarItem
   }, data.icon ? /*#__PURE__*/React.createElement(_AvatarOrIcon.AvatarOrIcon, {
     icon: data.icon,
@@ -54,12 +54,12 @@ var SingleValue = exports.SingleValue = function SingleValue(props) {
     src: (0, _utils.getAvatarUrl)(data),
     appearance: appearance,
     type: (0, _utils.isTeam)(data) ? 'team' : 'person',
-    avatarAppearanceShape: (0, _avatar.getAppearanceForAppType)(data.appType)
+    avatarAppearanceShape: (0, _getAppearance.default)(data.appType)
   }) : /*#__PURE__*/React.createElement(_SizeableAvatar.SizeableAvatar, {
     src: (0, _utils.getAvatarUrl)(data),
     appearance: appearance,
     type: (0, _utils.isTeam)(data) ? 'team' : 'person',
-    avatarAppearanceShape: (0, _avatar.getAppearanceForAppType)(data.appType)
+    avatarAppearanceShape: (0, _getAppearance.default)(data.appType)
   }), /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.avatarItem
   }, /*#__PURE__*/React.createElement("div", {

package/dist/cjs/components/SingleValueContainer.js

@@ -17,11 +17,11 @@ 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");
 var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _ValueContainerWrapper = _interopRequireDefault(require("./ValueContainerWrapper"));
-var _avatar = require("@atlaskit/avatar");
+var _getAppearance = _interopRequireDefault(require("@atlaskit/avatar/get-appearance"));
 var _excluded = ["children"];
 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; })(); }
@@ -59,7 +59,7 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
             iconColor: userData.iconColor,
             type: placeholderAvatar,
             src: userData.avatarUrl,
-            avatarAppearanceShape: userData ? (0, _avatar.getAppearanceForAppType)(userData.appType) : undefined
+            avatarAppearanceShape: userData ? (0, _getAppearance.default)(userData.appType) : undefined
           });
         }
         // Fallback to original behavior
@@ -67,12 +67,11 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
           appearance: appearance,
           type: placeholderAvatar,
           src: userData === null || userData === void 0 ? void 0 : userData.avatarUrl,
-          avatarAppearanceShape: userData ? (0, _avatar.getAppearanceForAppType)(userData.appType) : undefined
+          avatarAppearanceShape: userData ? (0, _getAppearance.default)(userData.appType) : undefined
         });
       }
       return null;
     });
-    //@ts-ignore react-select unsupported props
     (0, _defineProperty2.default)(_this, "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
     (0, _defineProperty2.default)(_this, "Wrapper", function (_ref) {
       var children = _ref.children;
@@ -93,7 +92,7 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
       return /*#__PURE__*/_react.default.createElement(_ValueContainerWrapper.default, {
         isEnabled: this.onValueContainerClick,
         onMouseDown: this.onValueContainerClick
-      }, /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, (0, _extends2.default)({}, valueContainerProps, {
+      }, /*#__PURE__*/_react.default.createElement(_reactSelect.components.ValueContainer, (0, _extends2.default)({}, valueContainerProps, {
         xcss: valueContainerStyles.root
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _runtime.ax)(["_nd5l1kqh _19bv12x7 _vwz4idpf"])

package/dist/cjs/components/SizeableAvatar.js

@@ -11,7 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar/avatar"));
 var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar/teams-avatar"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("./utils");

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

@@ -13,7 +13,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 _compiled = require("@atlaskit/primitives/compiled");
-var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
+var _main = require("@atlaskit/people-teams-ui-public/verified-team-icon/main");
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
@@ -145,7 +145,7 @@ var TeamOption = exports.TeamOption = /*#__PURE__*/function (_React$PureComponen
     });
     (0, _defineProperty2.default)(_this, "renderVerifiedIcon", function () {
       if (_this.props.team.verified) {
-        return (0, _react.jsx)(_verifiedTeamIcon.VerifiedTeamIcon, {
+        return (0, _react.jsx)(_main.VerifiedTeamIcon, {
           label: "",
           size: "small",
           spacing: "none"

package/dist/cjs/components/UserOption.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _avatar = require("@atlaskit/avatar");
+var _getAppearance = _interopRequireDefault(require("@atlaskit/avatar/get-appearance"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _AvatarItemOption = require("./AvatarItemOption");
@@ -19,7 +19,7 @@ var _HighlightText = require("./HighlightText");
 var _AvatarOrIcon = require("./AvatarOrIcon");
 var _SizeableAvatar = require("./SizeableAvatar");
 var _utils = require("./utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 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
@@ -74,7 +74,7 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         icon = _this$props$user2.icon,
         iconColor = _this$props$user2.iconColor,
         status = _this$props.status;
-      var appearance = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? 'medium' : 'big';
+      var appearance = (0, _fg.fg)('platform-component-visual-refresh') ? 'medium' : 'big';
       if (icon) {
         return (0, _react.jsx)(_AvatarOrIcon.AvatarOrIcon, {
           appearance: appearance,
@@ -82,7 +82,7 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
           iconColor: iconColor,
           src: avatarUrl,
           presence: status,
-          avatarAppearanceShape: (0, _avatar.getAppearanceForAppType)(appType)
+          avatarAppearanceShape: (0, _getAppearance.default)(appType)
         });
       }
       // Fallback to original behavior
@@ -90,7 +90,7 @@ var UserOption = exports.UserOption = /*#__PURE__*/function (_React$PureComponen
         appearance: appearance,
         src: avatarUrl,
         presence: status,
-        avatarAppearanceShape: (0, _avatar.getAppearanceForAppType)(appType)
+        avatarAppearanceShape: (0, _getAppearance.default)(appType)
       });
     });
     (0, _defineProperty2.default)(_this, "getLozengeProps", function () {

package/dist/cjs/components/UserPicker.js

@@ -2,7 +2,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,9 +14,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 _analyticsNext = require("@atlaskit/analytics-next");
-var _select = _interopRequireWildcard(require("@atlaskit/select"));
-var _ufo = require("@atlaskit/ufo");
+var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
+var _default = _interopRequireDefault(require("@atlaskit/select/default"));
+var _creatableSelect = _interopRequireDefault(require("@atlaskit/select/creatable-select"));
+var _experienceState = require("@atlaskit/ufo/experience-state");
 var _react = _interopRequireDefault(require("react"));
 var _BaseUserPicker = require("./BaseUserPicker");
 var _styles = require("./styles");
@@ -28,8 +28,7 @@ var _MessagesIntlProvider = _interopRequireDefault(require("./MessagesIntlProvid
 var _UserSourceProvider = require("../clients/UserSourceProvider");
 var _ufoExperiences = require("../util/ufoExperiences");
 var _uuid = require("uuid");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-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 _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 _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)); }
@@ -42,7 +41,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     _this.ufoId = (0, _uuid.v4)();
     var experienceForId = _ufoExperiences.userPickerRenderedUfoExperience.getInstance(_this.ufoId);
-    if (![_ufo.UFOExperienceState.IN_PROGRESS.id, _ufo.UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {
+    if (![_experienceState.UFOExperienceState.IN_PROGRESS.id, _experienceState.UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {
       experienceForId.start();
     }
     return _this;
@@ -54,7 +53,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
       var experienceForId = _ufoExperiences.userPickerRenderedUfoExperience.getInstance(this.ufoId);
 
       // Send UFO success if the experience is still in progress i.e. hasn't failed
-      if ([_ufo.UFOExperienceState.IN_PROGRESS.id, _ufo.UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {
+      if ([_experienceState.UFOExperienceState.IN_PROGRESS.id, _experienceState.UFOExperienceState.STARTED.id].includes(experienceForId.state.id)) {
         experienceForId.success();
       }
     }
@@ -83,7 +82,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         _this$props$includeTe = _this$props.includeTeamsUpdates,
         includeTeamsUpdates = _this$props$includeTe === void 0 ? false : _this$props$includeTe;
       var width = this.props.width;
-      var SelectComponent = allowEmail ? _select.CreatableSelect : _select.default;
+      var SelectComponent = allowEmail ? _creatableSelect.default : _default.default;
       var creatableProps = suggestEmailsForDomain ? (0, _creatableEmailSuggestion.getCreatableSuggestedEmailProps)(suggestEmailsForDomain, isValidEmail) : (0, _creatable.getCreatableProps)(isValidEmail);
       var defaultPickerProps = {
         closeMenuOnScroll: closeMenuOnScroll,
@@ -108,7 +107,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, this.props.height, this.props.minHeight),
+        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _fg.fg)('platform-component-visual-refresh'), false, this.props.height, this.props.minHeight),
         components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),
         pickerProps: pickerProps
       })))));
@@ -119,4 +118,4 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
   width: 350,
   isMulti: false
 });
-var UserPicker = exports.UserPicker = (0, _analyticsNext.withAnalyticsEvents)()(UserPickerWithoutAnalytics);
+var UserPicker = exports.UserPicker = (0, _withAnalyticsEvents.default)()(UserPickerWithoutAnalytics);

package/dist/cjs/components/styles.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getStyles = exports.getPopupStyles = exports.INDICATOR_WIDTH = exports.BORDER_PADDING = exports.AVATAR_PADDING = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _select = require("@atlaskit/select");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _reactSelect = require("@atlaskit/select/react-select");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _excluded = ["_paddingTop", "_paddingBottom", "_paddingLeft", "_paddingRight"],
   _excluded2 = ["_paddingTop", "_paddingBottom", "_position"];
@@ -36,7 +36,7 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
         borderColor: state.isFocused ? "var(--ds-border-focused, #4688EC)" : state.isInvalid ? "var(--ds-border-danger, #E2483D)" : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, #8C8F97)",
-        backgroundColor: state.isFocused ? "var(--ds-background-input, #FFFFFF)" : state.selectProps.subtle ? 'transparent' : state.isDisabled && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-background-disabled, #0515240F)" : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)",
+        backgroundColor: state.isFocused ? "var(--ds-background-input, #FFFFFF)" : state.selectProps.subtle ? 'transparent' : state.isDisabled && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-background-disabled, #0515240F)" : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)",
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
@@ -45,7 +45,7 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, #FFECEB)" : state.isFocused ? css[':hover'] ? "var(--ds-background-input, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)" : state.isDisabled ? "var(--ds-background-disabled, #0515240F)" : "var(--ds-background-input-hovered, #F8F8F8)"
         }),
         padding: 0,
-        minHeight: minHeight ? minHeight : height || isCompact ? isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 30 : 'none' : isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 42 : 44,
+        minHeight: minHeight ? minHeight : height || isCompact ? isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 30 : 'none' : isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 42 : 44,
         /* IE 11 needs to set height explicitly to be vertical align when being in not compact mode */
         height: height ? height : isCompact || isMulti ? '100%' : 44,
         maxWidth: '100%'
@@ -85,11 +85,11 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         gridTemplateColumns: 'auto 1fr',
-        paddingTop: isCompact ? isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
-        paddingBottom: isCompact ? isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        paddingTop: isCompact ? isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
+        paddingBottom: isCompact ? isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-025, 2px)" : 0 : isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING,
         // Match pre–tag-uplift leading inset when only the placeholder shows (share dialog VR, etc.).
-        paddingLeft: isMulti ? state.hasValue && state.selectProps.controlShouldRenderValue !== false && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING : 0,
-        gap: isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-050, 4px)" : undefined,
+        paddingLeft: isMulti ? state.hasValue && state.selectProps.controlShouldRenderValue !== false && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-100, 8px)" : BORDER_PADDING : 0,
+        gap: isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? "var(--ds-space-050, 4px)" : undefined,
         overflowX: 'hidden',
         overflowY: 'auto',
         scrollbarWidth: 'none',
@@ -152,11 +152,11 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
         gridArea: '1/2/2/3',
         gridTemplateColumns: isMulti && state.placeholder ? '0 123px' : css.gridTemplateColumns,
         /* Necessary to make input height and tag height the same. */
-        margin: isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 0 : "var(--ds-space-050, 4px)".concat(" 0"),
+        margin: isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? 0 : "var(--ds-space-050, 4px)".concat(" 0"),
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,
         paddingBottom: 0
-      }, isMulti && (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') && {
+      }, isMulti && (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') && {
         height: "var(--ds-space-250, 20px)",
         alignItems: 'center'
       }), {}, {
@@ -179,7 +179,7 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       });
     }
   };
-  return overrideStyles ? (0, _select.mergeStyles)(styles, overrideStyles) : styles;
+  return overrideStyles ? (0, _reactSelect.mergeStyles)(styles, overrideStyles) : styles;
 });
 var getPopupStyles = exports.getPopupStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles, isVisualRefresh) {
   return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles, isVisualRefresh, true));

package/dist/cjs/components/utils.js

@@ -9,7 +9,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _types = require("../types");
-var _select = require("@atlaskit/select");
+var _popupSelect = require("@atlaskit/select/popup-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; }
 var isExternalUser = exports.isExternalUser = function isExternalUser(option) {
@@ -116,7 +116,7 @@ var getAvatarUrl = exports.getAvatarUrl = function getAvatarUrl(optionData) {
   return undefined;
 };
 var isPopupUserPickerByComponent = exports.isPopupUserPickerByComponent = function isPopupUserPickerByComponent(SelectComponent) {
-  return SelectComponent === _select.PopupSelect;
+  return SelectComponent === _popupSelect.PopupSelect;
 };
 var isPopupUserPickerByProps = exports.isPopupUserPickerByProps = function isPopupUserPickerByProps(selectProps) {
   return selectProps.searchThreshold === -1;

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.groupOptionsByType = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _reactIntl = require("react-intl");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _i18n = require("../../components/i18n");
 var getLabelForType = function getLabelForType(type, customLabels) {
-  if (customLabels && type in customLabels && (0, _platformFeatureFlags.fg)('jsm-wfo-assignee-recommendation-on-queues')) {
+  if (customLabels && type in customLabels && (0, _fg.fg)('jsm-wfo-assignee-recommendation-on-queues')) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customLabels[type]);
   }
   switch (type) {

package/dist/cjs/util/ufoExperiences.js

@@ -11,22 +11,24 @@ 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 _ufo = require("@atlaskit/ufo");
+var _experienceTypes = require("@atlaskit/ufo/experience-types");
+var _concurrentExperience = require("@atlaskit/ufo/concurrent-experience");
+var _experienceState = require("@atlaskit/ufo/experience-state");
 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 userPickerRenderedUfoExperience = exports.userPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('user-picker-rendered', {
+var userPickerRenderedUfoExperience = exports.userPickerRenderedUfoExperience = new _concurrentExperience.ConcurrentExperience('user-picker-rendered', {
   platform: {
     component: 'user-picker'
   },
-  type: _ufo.ExperienceTypes.Load,
-  performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
+  type: _experienceTypes.ExperienceTypes.Load,
+  performanceType: _experienceTypes.ExperiencePerformanceTypes.PageSegmentLoad
 });
-var userPickerOptionsShownUfoExperience = exports.userPickerOptionsShownUfoExperience = new _ufo.ConcurrentExperience('user-picker-options-shown', {
+var userPickerOptionsShownUfoExperience = exports.userPickerOptionsShownUfoExperience = new _concurrentExperience.ConcurrentExperience('user-picker-options-shown', {
   platform: {
     component: 'user-picker'
   },
-  type: _ufo.ExperienceTypes.Operation,
-  performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+  type: _experienceTypes.ExperienceTypes.Operation,
+  performanceType: _experienceTypes.ExperiencePerformanceTypes.InlineResult
 });
 var UfoErrorBoundary = exports.UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
   function UfoErrorBoundary() {
@@ -38,7 +40,7 @@ var UfoErrorBoundary = exports.UfoErrorBoundary = /*#__PURE__*/function (_React$
     key: "componentDidCatch",
     value: function componentDidCatch() {
       var instance = userPickerRenderedUfoExperience.getInstance(this.props.id);
-      if (instance.state.id !== _ufo.UFOExperienceState.FAILED.id) {
+      if (instance.state.id !== _experienceState.UFOExperienceState.FAILED.id) {
         instance.failure();
       }
     }

package/dist/es2019/analytics.js

@@ -1,12 +1,12 @@
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-import { createAndFireEvent } from '@atlaskit/analytics-next';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
-import { fg } from '@atlaskit/platform-feature-flags';
+import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
+import FeatureGates from '@atlaskit/feature-gate-js-client/feature-gates';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 // 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 = "13.8.8";
+const packageVersion = "13.9.0";
 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/AvatarItemOption.js

@@ -5,10 +5,10 @@
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
-import Lozenge from '@atlaskit/lozenge';
-import Tag from '@atlaskit/tag';
+import Lozenge from '@atlaskit/lozenge/lozenge';
+import Tag from '@atlaskit/tag/removable-tag';
 import { isLozengeText } from './utils';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
   return {
     default: module.default

package/dist/es2019/components/BaseUserPicker.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { fg } from '@atlaskit/platform-feature-flags';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { UFOExperienceState } from '@atlaskit/ufo';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { UFOExperienceState } from '@atlaskit/ufo/experience-state';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';

package/dist/es2019/components/ClearIndicator.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./ClearIndicator.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { components } from '@atlaskit/select';
+import { components } from '@atlaskit/select/react-select';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */'@atlaskit/tooltip').then(module => {
   return {
     default: module.default
@@ -26,7 +26,6 @@ export class ClearIndicator extends React.PureComponent {
         selectProps
       } = this.props;
       clearValue();
-      //@ts-ignore react-select unsupported props
       if (selectProps && !selectProps.isFocused) {
         event.stopPropagation();
       }
@@ -34,7 +33,6 @@ export class ClearIndicator extends React.PureComponent {
   }
   render() {
     const {
-      //@ts-ignore react-select unsupported props
       selectProps: {
         clearValueLabel
       }

package/dist/es2019/components/Control.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./Control.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { components } from '@atlaskit/select';
+import { components } from '@atlaskit/select/react-select';
 import { cx } from '@compiled/react';
 const controlStyles = {
   invalid: "_1h6d1bqt _4cvx1bqt",

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

@@ -2,13 +2,14 @@
 import { Box, xcss } from '@atlaskit/primitives';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
+import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';
+import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import Spinner from '@atlaskit/spinner/spinner';
 import { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
 import { MicrosoftIcon } from '../assets/microsoft';
 import { messages } from '../i18n';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 const sourcesTooltipContainer = xcss({
   paddingBottom: 'space.050',
   paddingRight: 'space.050'

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

@@ -6,8 +6,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import Tooltip from '@atlaskit/tooltip';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import Tooltip from '@atlaskit/tooltip/Tooltip';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { createAndFireEventInElementsChannel, userInfoEvent } from '../../analytics';
 import { textWrapper } from '../AvatarItemOption';
 import { AvatarOrIcon } from '../AvatarOrIcon';
@@ -16,7 +16,7 @@ import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
 import InfoIcon from './InfoIcon';
 import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
 import { SourcesTooltipContent } from './SourcesTooltipContent';
-import { getAppearanceForAppType } from '@atlaskit/avatar';
+import getAppearanceForAppType from '@atlaskit/avatar/get-appearance';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const imageContainer = css({

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

@@ -9,7 +9,7 @@ import { FormattedMessage } from 'react-intl';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { css, jsx } from '@emotion/react';
 import PeopleIcon from '@atlaskit/icon/core/people-group';
-import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon/main';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
 import { messages } from '../i18n';
 import { HighlightText } from '../HighlightText';

package/dist/es2019/components/Input.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./Input.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { components } from '@atlaskit/select';
+import { components } from '@atlaskit/select/react-select';
 const inputStyles = {
   root: "_5ce61rpy _1ir3kb7n _h5gq1rpy"
 };
@@ -18,7 +18,6 @@ export class Input extends 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();
       }

package/dist/es2019/components/Menu.js

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 import React from 'react';
-import { components } from '@atlaskit/select';
+import { components } from '@atlaskit/select/react-select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 const getFooterStyle = () => {

package/dist/es2019/components/MultiValue.js

@@ -7,20 +7,21 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Inline, xcss } from '@atlaskit/primitives';
-import { components } from '@atlaskit/select';
+import { components } from '@atlaskit/select/react-select';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import Avatar from '@atlaskit/avatar';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { AvatarTag, default as Tag } from '@atlaskit/tag';
+import Avatar from '@atlaskit/avatar/avatar';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import AvatarTag from '@atlaskit/tag/avatar-tag';
+import { default as Tag } from '@atlaskit/tag/removable-tag';
 import TeamAvatar from '@atlaskit/teams-avatar/teams-avatar';
 import { AddOptionAvatar } from './AddOptionAvatar';
 import { AvatarOrIcon } from './AvatarOrIcon';
 import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl, isEmail, isGroup, isTeam } from './utils';
-import Lozenge from '@atlaskit/lozenge';
+import Lozenge from '@atlaskit/lozenge/lozenge';
 import PeopleIcon from '@atlaskit/icon/core/people-group';
-import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon/main';
 import { FormattedMessage } from 'react-intl';
 import { messages } from './i18n';
 export const scrollToValue = (valueContainer, control) => {