@atlaskit/user-picker 8.4.1 → 8.6.2

package/dist/cjs/components/smart-user-picker/components/index.js

@@ -32,7 +32,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
-var _v = _interopRequireDefault(require("uuid/v4"));
+var _uuid = require("uuid");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -61,7 +61,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var hasContextChanged = function hasContextChanged(oldContext, newContext) {
-  return oldContext.siteId !== newContext.siteId || oldContext.productKey !== newContext.productKey || oldContext.principalId !== newContext.principalId || oldContext.containerId !== newContext.containerId || oldContext.objectId !== newContext.objectId || oldContext.childObjectId !== newContext.childObjectId;
+  return oldContext.siteId !== newContext.siteId || oldContext.orgId !== newContext.orgId || oldContext.productKey !== newContext.productKey || oldContext.principalId !== newContext.principalId || oldContext.containerId !== newContext.containerId || oldContext.objectId !== newContext.objectId || oldContext.childObjectId !== newContext.childObjectId;
 };
 
 var stringContains = function stringContains(str, substr) {
@@ -110,7 +110,7 @@ function isOptionData(option) {
   return option.name !== undefined;
 }
 /**
- * @deprecated Please use @atlassian/smart-user-picker
+ * @deprecated Please use @atlaskit/smart-user-picker. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact #help-smart-experiences for further details.
  */
 
 
@@ -243,14 +243,14 @@ var SmartUserPicker = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "memoizedFilterOptions", (0, _memoizeOne.default)(_this.filterOptions));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getUsers", (0, _debounce.default)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var _this$state, query, sessionId, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, defaultUsers, _elapsedTimeMilli;
+      var _this$state, query, sessionId, _this$props, containerId, childObjectId, objectId, principalId, productKey, siteId, orgId, baseUrl, includeUsers, includeGroups, includeTeams, maxOptions, searchQueryFilter, onEmpty, productAttributes, intl, maxNumberOfResults, startTime, recommendationsRequest, _yield$onEmpty, recommendedUsers, elapsedTimeMilli, displayedUsers, defaultUsers, _elapsedTimeMilli;
 
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _this$state = _this.state, query = _this$state.query, sessionId = _this$state.sessionId;
-              _this$props = _this.props, containerId = _this$props.containerId, childObjectId = _this$props.childObjectId, objectId = _this$props.objectId, principalId = _this$props.principalId, productKey = _this$props.productKey, siteId = _this$props.siteId, baseUrl = _this$props.baseUrl, includeUsers = _this$props.includeUsers, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, maxOptions = _this$props.maxOptions, searchQueryFilter = _this$props.searchQueryFilter, onEmpty = _this$props.onEmpty, productAttributes = _this$props.productAttributes, intl = _this$props.intl;
+              _this$props = _this.props, containerId = _this$props.containerId, childObjectId = _this$props.childObjectId, objectId = _this$props.objectId, principalId = _this$props.principalId, productKey = _this$props.productKey, siteId = _this$props.siteId, orgId = _this$props.orgId, baseUrl = _this$props.baseUrl, includeUsers = _this$props.includeUsers, includeGroups = _this$props.includeGroups, includeTeams = _this$props.includeTeams, maxOptions = _this$props.maxOptions, searchQueryFilter = _this$props.searchQueryFilter, onEmpty = _this$props.onEmpty, productAttributes = _this$props.productAttributes, intl = _this$props.intl;
               maxNumberOfResults = maxOptions || 100;
               startTime = window.performance.now();
               recommendationsRequest = {
@@ -262,6 +262,7 @@ var SmartUserPicker = /*#__PURE__*/function (_React$Component) {
                   principalId: principalId,
                   productKey: productKey,
                   siteId: siteId,
+                  orgId: orgId,
                   childObjectId: childObjectId,
                   sessionId: sessionId,
                   productAttributes: productAttributes
@@ -522,7 +523,7 @@ var SmartUserPicker = /*#__PURE__*/function (_React$Component) {
                 prefetch = this.props.prefetch;
 
                 if (prefetch) {
-                  sessionId = (0, _v.default)();
+                  sessionId = (0, _uuid.v4)();
                   this.fireEvent(_analytics.mountedWithPrefetchEvent, {
                     sessionId: sessionId
                   });

package/dist/cjs/components/smart-user-picker/config/index.js

@@ -24,14 +24,14 @@ var PRD_CONFIG = {
   }
 };
 /**
- * @deprecated Please use @atlassian/smart-user-picker
+ * @deprecated Please use @atlaskit/smart-user-picker. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact #help-smart-experiences for further details.
  */
 
 var setSmartUserPickerEnv = function setSmartUserPickerEnv(newEnv) {
   return env = newEnv;
 };
 /**
- * @deprecated Please use @atlassian/smart-user-picker
+ * @deprecated Please use @atlaskit/smart-user-picker. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact #help-smart-experiences for further details.
  */
 
 
@@ -41,7 +41,7 @@ var getConfig = function getConfig() {
   return env === 'local' ? LOCAL_CONFIG : PRD_CONFIG;
 };
 /**
- * @deprecated Please use @atlassian/smart-user-picker
+ * @deprecated Please use @atlaskit/smart-user-picker. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact #help-smart-experiences for further details.
  */
 
 

package/dist/cjs/components/smart-user-picker/service/UsersClient.js

@@ -77,7 +77,7 @@ var transformConfluenceUser = function transformConfluenceUser(item) {
   };
 };
 /**
- * @deprecated Please use @atlassian/smart-user-picker
+ * @deprecated Please use @atlaskit/smart-user-picker. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact #help-smart-experiences for further details.
  */
 
 

package/dist/cjs/components/smart-user-picker/service/recommendationClient.js

@@ -67,7 +67,7 @@ var getUserRecommendations = function getUserRecommendations(request, intl) {
   });
 };
 /**
- * @deprecated Please use @atlassian/smart-user-picker
+ * @deprecated Please use @atlaskit/smart-user-picker. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact #help-smart-experiences for further details.
  */
 
 

package/dist/cjs/components/smart-user-picker/service/users-transformer.js

@@ -81,7 +81,7 @@ var transformUser = function transformUser(item, intl) {
   return;
 };
 /**
- * @deprecated Please use @atlassian/smart-user-picker
+ * @deprecated Please use @atlaskit/smart-user-picker. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact #help-smart-experiences for further details.
  */
 
 

package/dist/cjs/components/styles.js

@@ -52,14 +52,14 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? (0, _tokens.token)('color.border.neutral', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : (0, _tokens.token)('color.border.neutral', _colors.N40),
-        backgroundColor: state.isFocused ? (0, _tokens.token)('color.background.default', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10) : (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20),
+        borderColor: state.isFocused ? (0, _tokens.token)('color.border', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : (0, _tokens.token)('color.border', _colors.N40),
+        backgroundColor: state.isFocused ? (0, _tokens.token)('elevation.surface', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? (0, _tokens.token)('color.background.input', _colors.N10) : (0, _tokens.token)('color.background.neutral', _colors.N20),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.border.focus', css[':hover'].borderColor) : (0, _tokens.token)('color.border.focus', _colors.B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.iconBorder.danger', _colors.R50) : (0, _tokens.token)('color.border.neutral', _colors.N30) : (0, _tokens.token)('color.border.neutral', _colors.N40),
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.background.subtleDanger.resting', _colors.R50) : state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.background.default', css[':hover'].backgroundColor) : (0, _tokens.token)('color.background.default', _colors.N0) : state.isDisabled ? (0, _tokens.token)('color.background.disabled', _colors.N10) : (0, _tokens.token)('color.background.default', _colors.N30)
+          borderColor: state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.border.focused', css[':hover'].borderColor) : (0, _tokens.token)('color.border.focused', _colors.B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.icon.danger', _colors.R50) : (0, _tokens.token)('color.border', _colors.N30) : (0, _tokens.token)('color.border', _colors.N40),
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.background.danger', _colors.R50) : state.isFocused ? css[':hover'] ? (0, _tokens.token)('elevation.surface', css[':hover'].backgroundColor) : (0, _tokens.token)('elevation.surface', _colors.N0) : state.isDisabled ? (0, _tokens.token)('color.background.disabled', _colors.N10) : (0, _tokens.token)('elevation.surface', _colors.N30)
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -178,14 +178,14 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyle
         paddingLeft: isMulti ? 0 : AVATAR_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100),
+          color: (0, _tokens.token)('color.text.subtlest', _colors.N100),
           opacity: 1
           /* Firefox */
 
         },
         '& input:-ms-input-placeholder': {
           /* Internet Explorer 10-11 */
-          color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N100)
+          color: (0, _tokens.token)('color.text.subtlest', _colors.N100)
         }
       });
     }

package/dist/cjs/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionToSelectableOptions = exports.optionToSelectableOption = exports.isUser = exports.isTeam = exports.isSingleValue = exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
+exports.userPickerRenderedUfoExperience = exports.optionToSelectableOptions = exports.optionToSelectableOption = exports.isUser = exports.isTeam = exports.isSingleValue = exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -17,6 +17,8 @@ var _types = require("../types");
 
 var _select = require("@atlaskit/select");
 
+var _ufo = require("@atlaskit/ufo");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -176,4 +178,13 @@ var isPopupUserPickerByProps = function isPopupUserPickerByProps(selectProps) {
   return selectProps.searchThreshold === -1;
 };
 
-exports.isPopupUserPickerByProps = isPopupUserPickerByProps;
+exports.isPopupUserPickerByProps = isPopupUserPickerByProps;
+var COMPONENT_NAME = 'user-picker';
+var userPickerRenderedUfoExperience = new _ufo.ConcurrentExperience('user-picker-rendered', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: _ufo.ExperienceTypes.Load,
+  performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
+});
+exports.userPickerRenderedUfoExperience = userPickerRenderedUfoExperience;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "8.4.1",
+	"version": "8.6.2",
 	"sideEffects": false
 }

package/dist/es2019/analytics.js

@@ -1,12 +1,12 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
-import uuid from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 import { name as packageName, version as packageVersion } from './version.json';
 import { isExternalUser } from './components/utils';
 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}/;
 export const startSession = () => ({
-  id: uuid(),
+  id: uuidv4(),
   start: Date.now(),
   inputChangeTime: Date.now(),
   upCount: 0,
@@ -122,6 +122,7 @@ const createDefaultSmartPickerAttributes = (props, state) => {
     productKey,
     principalId,
     siteId,
+    orgId,
     filterOptions
   } = props;
   const {
@@ -142,6 +143,7 @@ const createDefaultSmartPickerAttributes = (props, state) => {
     productKey,
     queryLength: (query || '').length,
     siteId,
+    orgId,
     sessionId
   };
 };

package/dist/es2019/components/AddOptionAvatar.js

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 const EmailAvatarWrapper = styled.span`
   padding: ${props => props.isLozenge ? 0 : 4}px;
 
-  background-color: ${token('color.background.subtleNeutral.resting', N40)};
+  background-color: ${token('color.background.neutral', N40)};
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -20,6 +20,6 @@ export const AddOptionAvatar = ({
   }, /*#__PURE__*/React.createElement(EmailIcon, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
-    primaryColor: token('color.text.mediumEmphasis', N500)
+    primaryColor: token('color.text.subtle', N500)
   }));
 };

package/dist/es2019/components/AvatarItemOption.js

@@ -22,19 +22,16 @@ const Wrapper = styled.span`
 `;
 const Text = styled.span`
   margin: 0;
-  color: ${token('color.text.selected', B400)};
+  color: ${token('color.text.brand', B400)};
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   ${({
   secondary
-}) => secondary && `color: ${token('color.text.selected', B400)}; font-size: 0.85em;`}
+}) => secondary && `color: ${token('color.text.brand', B400)}; font-size: 0.85em;`}
 `;
 const AdditionalInfo = styled.span`
   float: right;
-  ${({
-  withTooltip
-}) => withTooltip && ` padding-top: 5px;`}
 `;
 export const TextWrapper = styled.span`
   color: ${({
@@ -48,8 +45,7 @@ export const AvatarItemOption = ({
   avatar,
   primaryText,
   secondaryText,
-  lozenge,
-  sourcesInfoTooltip
+  lozenge
 }) => /*#__PURE__*/React.createElement(Wrapper, null, avatar, /*#__PURE__*/React.createElement("div", {
   style: {
     maxWidth: '100%',
@@ -58,9 +54,7 @@ export const AvatarItemOption = ({
     lineHeight: '1.4',
     paddingLeft: '8px'
   }
-}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, {
-  withTooltip: Boolean(sourcesInfoTooltip)
-}, !sourcesInfoTooltip && (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
+}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText), /*#__PURE__*/React.createElement(AdditionalInfo, null, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ?
 /*#__PURE__*/
 // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
 // Lozenge text) or tooltip won't work
@@ -68,6 +62,6 @@ React.createElement(React.Suspense, {
   fallback: /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)
 }, /*#__PURE__*/React.createElement(AsyncTooltip, {
   content: lozenge.tooltip
-}, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)), sourcesInfoTooltip)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+}, /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text))) : /*#__PURE__*/React.createElement(Lozenge, lozenge, lozenge.text)))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
   secondary: true
 }, secondaryText))));

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

@@ -25,13 +25,13 @@ export class EmailOption extends React.PureComponent {
       } = this.props;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
+        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
       }, id);
     });
 
     _defineProperty(this, "renderSecondaryText", label => {
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
+        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
       }, label);
     });
 

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import { B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+const OuterWrapper = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  line-height: 1;
+  outline: none;
+  margin: 0;
+  width: 100%;
+  cursor: pointer;
+`;
+const DetailsWrapper = styled.div`
+  display: flex;
+  max-width: 100%;
+  min-width: 0;
+  flex: 1 1 100%;
+  line-height: 1.4;
+  padding-left: 8px;
+  align-items: center;
+`;
+const TextSection = styled.div`
+  width: calc(100% - 32px);
+  flex: auto;
+`;
+const Text = styled.div`
+  display: flex;
+  max-width: 100%;
+  margin: 0;
+  color: ${token('color.text.selected', B400)};
+  ${({
+  secondary
+}) => secondary && `color: ${token('color.text.selected', B400)}; font-size: 0.85em;`}
+  white-space: nowrap;
+
+  > span {
+    max-width: inherit;
+  }
+`;
+export const ExternalAvatarItemOption = ({
+  avatar,
+  primaryText,
+  secondaryText,
+  sourcesInfoTooltip
+}) => /*#__PURE__*/React.createElement(OuterWrapper, null, avatar, /*#__PURE__*/React.createElement(DetailsWrapper, null, /*#__PURE__*/React.createElement(TextSection, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, null, primaryText)), secondaryText && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+  secondary: true
+}, secondaryText))), /*#__PURE__*/React.createElement("div", null, sourcesInfoTooltip)));

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

@@ -0,0 +1,22 @@
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import { N50, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+const Wrapper = styled.div`
+  display: flex;
+`;
+export default (() => {
+  const [isMouseHovered, setHoverState] = useState(false);
+  const onMouseEnter = useCallback(() => setHoverState(true), [setHoverState]);
+  const onMouseLeave = useCallback(() => setHoverState(false), [setHoverState]);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
+    testId: "source-icon",
+    label: "",
+    size: "large",
+    primaryColor: token('color.text.lowEmphasis', isMouseHovered ? N200 : N50)
+  }));
+});

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

@@ -1,22 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import styled from 'styled-components';
 import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
-import Tooltip from '@atlaskit/tooltip';
 import Spinner from '@atlaskit/spinner';
 import { B400, N200, N800 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { AvatarItemOption, TextWrapper } from '../AvatarItemOption';
+import Tooltip from '@atlaskit/tooltip';
+import { TextWrapper } from '../AvatarItemOption';
 import { SizeableAvatar } from '../SizeableAvatar';
-import styled from 'styled-components';
 import { SlackIcon } from '../assets/slack';
 import { GoogleIcon } from '../assets/google';
 import { MicrosoftIcon } from '../assets/microsoft';
 import { GitHubIcon } from '../assets/github';
 import { messages } from '../i18n';
 import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
+import InfoIcon from './InfoIcon';
+import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
 export const ImageContainer = styled.span`
   height: 16px;
   width: 16px;
@@ -78,7 +79,7 @@ export class ExternalUserOption extends React.PureComponent {
       } = this.props;
       return /*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
+        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
       }, name);
     });
 
@@ -94,7 +95,7 @@ export class ExternalUserOption extends React.PureComponent {
       const [emailUser, emailDomain] = email.split('@');
       const emailDomainWithAt = `@${emailDomain}`;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
+        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
       }, emailUser, /*#__PURE__*/React.createElement(EmailDomainWrapper, null, emailDomainWithAt));
     });
 
@@ -117,16 +118,11 @@ export class ExternalUserOption extends React.PureComponent {
     _defineProperty(this, "getSourcesInfoTooltip", () => this.props.user.isExternal ? /*#__PURE__*/React.createElement(Tooltip, {
       content: this.formattedTooltipContent(),
       position: 'right-start'
-    }, /*#__PURE__*/React.createElement(EditorPanelIcon, {
-      testId: "source-icon",
-      label: "",
-      size: "large",
-      primaryColor: token('color.text.lowEmphasis', N200)
-    })) : undefined);
+    }, /*#__PURE__*/React.createElement(InfoIcon, null)) : undefined);
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(AvatarItemOption, {
+    return /*#__PURE__*/React.createElement(ExternalAvatarItemOption, {
       avatar: this.renderAvatar(),
       primaryText: this.getPrimaryText(),
       secondaryText: this.renderSecondaryText(),

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

@@ -12,7 +12,7 @@ export const GroupOptionIconWrapper = styled.span`
   padding: 2px;
 
   > span {
-    background-color: ${token('color.background.subtleNeutral.resting', N20)};
+    background-color: ${token('color.background.neutral', N20)};
     border-radius: 50%;
     padding: 4px;
   }
@@ -31,7 +31,7 @@ export class GroupOption extends React.PureComponent {
       } = this.props;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
+        color: isSelected ? token('color.text.brand', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -47,7 +47,7 @@ export class GroupOption extends React.PureComponent {
         isSelected
       } = this.props;
       return /*#__PURE__*/React.createElement(TextWrapper, {
-        color: isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
+        color: isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.groupByline));
     });
 

package/dist/es2019/components/PopupControl.js

@@ -16,8 +16,8 @@ const ControlWrapper = styled.div`
   padding: 0px ${spacing}px ${spacing}px;
 `;
 const getColor = themed({
-  light: token('color.text.lowEmphasis', N200),
-  dark: token('color.text.lowEmphasis', DN90)
+  light: token('color.text.subtlest', N200),
+  dark: token('color.text.subtlest', DN90)
 });
 
 const getPadding = () => {

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

@@ -21,7 +21,7 @@ export class TeamOption extends React.PureComponent {
       } = this.props;
       return [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
+        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -64,7 +64,7 @@ export class TeamOption extends React.PureComponent {
     });
 
     _defineProperty(this, "getBylineComponent", (isSelected, message) => /*#__PURE__*/React.createElement(TextWrapper, {
-      color: isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
+      color: isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
     }, message));
 
     _defineProperty(this, "renderAvatar", () => {

package/dist/es2019/components/UserOption.js

@@ -20,7 +20,7 @@ export class UserOption extends React.PureComponent {
       } = this.props;
       const result = [/*#__PURE__*/React.createElement(TextWrapper, {
         key: "name",
-        color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.highEmphasis', N800)
+        color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text', N800)
       }, /*#__PURE__*/React.createElement(HighlightText, {
         highlights: highlight && highlight.name
       }, name))];
@@ -29,7 +29,7 @@ export class UserOption extends React.PureComponent {
         result.push( /*#__PURE__*/React.createElement(React.Fragment, {
           key: "publicName"
         }, ' ', /*#__PURE__*/React.createElement(TextWrapper, {
-          color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
+          color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
         }, "(", /*#__PURE__*/React.createElement(HighlightText, {
           highlights: highlight && highlight.publicName
         }, publicName), ")")));
@@ -39,7 +39,7 @@ export class UserOption extends React.PureComponent {
     });
 
     _defineProperty(this, "renderSecondaryText", () => this.props.user.byline ? /*#__PURE__*/React.createElement(TextWrapper, {
-      color: this.props.isSelected ? token('color.text.selected', B400) : token('color.text.lowEmphasis', N200)
+      color: this.props.isSelected ? token('color.text.brand', B400) : token('color.text.subtlest', N200)
     }, this.props.user.byline) : undefined);
 
     _defineProperty(this, "renderAvatar", () => {

package/dist/es2019/components/UserPicker.js

@@ -10,7 +10,26 @@ import { getCreatableProps } from './creatable';
 import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
 import { ExusUserSourceProvider } from './../clients/UserSourceProvider';
+import { userPickerRenderedUfoExperience as experience } from './utils';
+import { v4 as uuidv4 } from 'uuid';
 export class UserPickerWithoutAnalytics extends React.Component {
+  constructor(props) {
+    super(props);
+    this.ufoId = uuidv4();
+
+    if (this.ufoId) {
+      const experienceForId = experience.getInstance(this.ufoId);
+      experienceForId.start();
+    }
+  }
+
+  componentDidMount() {
+    if (this.ufoId) {
+      const experienceForId = experience.getInstance(this.ufoId);
+      experienceForId.success();
+    }
+  }
+
   render() {
     const {
       emailLabel,

package/dist/es2019/components/assets/github.js

@@ -12,6 +12,6 @@ export function GitHubIcon(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.9778 0C5.3635 0 0 5.45261 0 12.179C0 17.5601 3.432 22.1253 8.19114 23.7357C8.78975 23.8484 9.00952 23.4715 9.00952 23.1498C9.00952 22.8594 8.99841 21.9 8.99326 20.8823C5.66103 21.6191 4.95789 19.4454 4.95789 19.4454C4.41303 18.0376 3.62796 17.6633 3.62796 17.6633C2.54122 16.9074 3.70988 16.923 3.70988 16.923C4.91266 17.0089 5.54598 18.178 5.54598 18.178C6.61428 20.0399 8.34803 19.5016 9.03154 19.1904C9.13904 18.4033 9.44945 17.866 9.792 17.5619C7.13157 17.2539 4.33487 16.2096 4.33487 11.5429C4.33487 10.2133 4.80278 9.12682 5.56899 8.27391C5.44463 7.96716 5.03464 6.72844 5.68502 5.05087C5.68502 5.05087 6.69084 4.72354 8.97976 6.29927C9.9352 6.02942 10.9599 5.89409 11.9778 5.88945C12.9957 5.89409 14.0212 6.02942 14.9784 6.29927C17.2645 4.72354 18.269 5.05087 18.269 5.05087C18.9209 6.72844 18.5107 7.96716 18.3864 8.27391C19.1544 9.12682 19.6191 10.2133 19.6191 11.5429C19.6191 16.2207 16.8171 17.2507 14.1499 17.5522C14.5795 17.9301 14.9623 18.6713 14.9623 19.8076C14.9623 21.4371 14.9484 22.7487 14.9484 23.1498C14.9484 23.4739 15.164 23.8537 15.7712 23.7341C20.5277 22.1219 23.9554 17.5582 23.9554 12.179C23.9554 5.45261 18.5927 0 11.9778 0Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }));
 }

package/dist/es2019/components/assets/google.js

@@ -12,21 +12,21 @@ export function GoogleIcon(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M8.32062 3.21332L10.014 1.55999C8.97396 0.593331 7.62063 0 6.00062 0C3.65396 0 1.62729 1.34666 0.640625 3.30665L2.58062 4.81331C3.06729 3.36665 4.41396 2.31999 6.00062 2.31999C7.12729 2.31999 7.88729 2.80665 8.32062 3.21332Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M11.76 6.13291C11.76 5.63958 11.72 5.27958 11.6333 4.90625H6V7.13291H9.30667C9.24 7.68624 8.88 8.51957 8.08 9.07957L9.97333 10.5462C11.1067 9.49956 11.76 7.95957 11.76 6.13291V6.13291V6.13291Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M2.58667 7.18662C2.46 6.81329 2.38667 6.41329 2.38667 5.99996C2.38667 5.58663 2.46 5.18663 2.58 4.8133L0.64 3.30664C0.233333 4.11997 0 5.0333 0 5.99996C0 6.96662 0.233333 7.87995 0.64 8.69328L2.58667 7.18662V7.18662Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.00079 12.0008C7.62079 12.0008 8.98079 11.4675 9.97413 10.5475L8.08079 9.08083C7.57413 9.43416 6.89413 9.68082 6.00079 9.68082C4.41413 9.68082 3.06746 8.63416 2.58746 7.1875L0.647461 8.69416C1.63413 10.6542 3.65413 12.0008 6.00079 12.0008V12.0008V12.0008Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }));
 }

package/dist/es2019/components/assets/microsoft.js

@@ -12,21 +12,21 @@ export function MicrosoftIcon(props) {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0 0H5.70233V5.7023H0V0Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.29785 0H12.0002V5.7023H6.29785V0Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M0 6.29688H5.70233V11.9992H0V6.29688Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.29785 6.29688H12.0002V11.9992H6.29785V6.29688Z",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "clip0"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "12",
     height: "11.9999",
-    fill: token('color.text.onBold', 'white')
+    fill: token('color.text.inverse', 'white')
   }))));
 }