@atlaskit/user-picker 9.5.1 → 9.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 9.6.1
+
+### Patch Changes
+
+- [`8ad846932fc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8ad846932fc) - [ux] Fixes incorrect border colour displayed when hovering a user picker with subtle appearance applied.
+
+## 9.6.0
+
+### Minor Changes
+
+- [`faf391ab64a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/faf391ab64a) - Implementing new CustomOption which will allow for a custom avatar
+
 ## 9.5.1
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -74,9 +74,15 @@ var optionData2Analytics = function optionData2Analytics(option) {
       sources: option.sources,
       externalUserType: option.externalUserType
     });
-  } else {
-    return validatedData;
   }
+
+  if ((0, _utils.isCustom)(option) && option.analyticsType) {
+    return _objectSpread(_objectSpread({}, validatedData), {}, {
+      type: option.analyticsType
+    });
+  }
+
+  return validatedData;
 };
 
 var buildValueForAnalytics = function buildValueForAnalytics(value) {

package/dist/cjs/components/CustomOption/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var AsyncCustomOption = /*#__PURE__*/_react.default.lazy(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./main'));
+  }).then(function (module) {
+    return {
+      default: module.CustomOption
+    };
+  });
+});
+
+var _default = AsyncCustomOption;
+exports.default = _default;

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

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomOption = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _core = require("@emotion/core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AvatarItemOption = require("../AvatarItemOption");
+
+var _HighlightText = require("../HighlightText");
+
+var _SizeableAvatar = require("../SizeableAvatar");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+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 CustomOption = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(CustomOption, _React$PureComponent);
+
+  var _super = _createSuper(CustomOption);
+
+  function CustomOption() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CustomOption);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPrimaryText", function () {
+      var _this$props$data = _this.props.data,
+          name = _this$props$data.name,
+          highlight = _this$props$data.highlight;
+      return [(0, _core.jsx)("span", {
+        key: "name",
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text', _colors.N800))
+      }, (0, _core.jsx)(_HighlightText.HighlightText, {
+        highlights: highlight && highlight.name
+      }, name))];
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
+      return (0, _core.jsx)("span", {
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
+      }, message);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
+      var _this$props$data2;
+
+      if (!((_this$props$data2 = _this.props.data) !== null && _this$props$data2 !== void 0 && _this$props$data2.byline)) {
+        return undefined;
+      }
+
+      return _this.getBylineComponent(_this.props.isSelected, _this.props.data.byline);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
+      var _this$props$data3 = _this.props.data,
+          avatarUrl = _this$props$data3.avatarUrl,
+          name = _this$props$data3.name;
+      return (0, _core.jsx)(_SizeableAvatar.SizeableAvatar, {
+        appearance: "big",
+        src: avatarUrl,
+        name: name
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {
+      return typeof _this.props.data.lozenge === 'string' ? {
+        text: _this.props.data.lozenge
+      } : _this.props.data.lozenge;
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(CustomOption, [{
+    key: "render",
+    value: function render() {
+      return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
+        avatar: this.renderAvatar(),
+        isDisabled: this.props.data.isDisabled,
+        lozenge: this.getLozengeProps(),
+        primaryText: this.getPrimaryText(),
+        secondaryText: this.renderByline()
+      });
+    }
+  }]);
+  return CustomOption;
+}(_react.default.PureComponent);
+
+exports.CustomOption = CustomOption;

package/dist/cjs/components/MultiValue.js

@@ -144,8 +144,8 @@ var MultiValue = /*#__PURE__*/function (_React$Component) {
           nextLabel = _nextProps$data.label,
           nextData = _nextProps$data.data,
           nextInnerProps = nextProps.innerProps,
-          nextIsFocused = nextProps.isFocused; // We can ignore onRemove here because it is a anonymous function
-      // that will recreated every time but with the same implementation.
+          nextIsFocused = nextProps.isFocused; // We can ignore onRemove here because it is an anonymous function
+      // that will be recreated every time but with the same implementation.
 
       return data !== nextData || label !== nextLabel || innerProps !== nextInnerProps || isFocused !== nextIsFocused;
     }

package/dist/cjs/components/Option.js

@@ -21,6 +21,8 @@ var _GroupOption = _interopRequireDefault(require("./GroupOption"));
 
 var _EmailOption = _interopRequireDefault(require("./EmailOption"));
 
+var _CustomOption = _interopRequireDefault(require("./CustomOption"));
+
 var _utils = require("./utils");
 
 var _emailValidation = require("./emailValidation");
@@ -81,6 +83,13 @@ var dataOption = function dataOption(_ref2) {
     });
   }
 
+  if ((0, _utils.isCustom)(data)) {
+    return /*#__PURE__*/_react.default.createElement(_CustomOption.default, {
+      data: data,
+      isSelected: isSelected
+    });
+  }
+
   return null;
 };
 

package/dist/cjs/components/styles.js

@@ -57,7 +57,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          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.icon', _colors.N30) : (0, _tokens.token)('color.border.input', _colors.N40),
+          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 ? 'transparent' : (0, _tokens.token)('color.border.input', _colors.N40),
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.background.danger', _colors.R50) : state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.background.input', css[':hover'].backgroundColor) : (0, _tokens.token)('color.background.input', _colors.N0) : state.isDisabled ? (0, _tokens.token)('color.background.disabled', _colors.N10) : (0, _tokens.token)('color.background.input.hovered', _colors.N30)
         }),
         padding: 0,

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.isLozengeText = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.isDefaultValuePopulated = exports.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
+exports.optionToSelectableOptions = exports.optionToSelectableOption = exports.isUser = exports.isTeam = exports.isSingleValue = exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.isLozengeText = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.isDefaultValuePopulated = exports.isCustom = exports.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -51,6 +51,12 @@ var isEmail = function isEmail(option) {
 
 exports.isEmail = isEmail;
 
+var isCustom = function isCustom(option) {
+  return option.type === _types.CustomType;
+};
+
+exports.isCustom = isCustom;
+
 var isDefaultValuePopulated = function isDefaultValuePopulated(value) {
   return value && !Array.isArray(value) || Array.isArray(value) && value.length > 0;
 };
@@ -165,7 +171,7 @@ var callCallback = function callCallback(callback) {
 exports.callCallback = callCallback;
 
 var getAvatarUrl = function getAvatarUrl(optionData) {
-  if (isUser(optionData) || isTeam(optionData)) {
+  if (isUser(optionData) || isTeam(optionData) || isCustom(optionData)) {
     return optionData.avatarUrl;
   }
 

package/dist/cjs/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CustomType", {
+  enumerable: true,
+  get: function get() {
+    return _types.CustomType;
+  }
+});
 Object.defineProperty(exports, "EmailType", {
   enumerable: true,
   get: function get() {

package/dist/cjs/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserType = exports.TeamType = exports.GroupType = exports.EmailType = void 0;
+exports.UserType = exports.TeamType = exports.GroupType = exports.EmailType = exports.CustomType = void 0;
 var UserType = 'user';
 exports.UserType = UserType;
 var TeamType = 'team';
@@ -11,4 +11,6 @@ exports.TeamType = TeamType;
 var GroupType = 'group';
 exports.GroupType = GroupType;
 var EmailType = 'email';
-exports.EmailType = EmailType;
+exports.EmailType = EmailType;
+var CustomType = 'custom';
+exports.CustomType = CustomType;

package/dist/cjs/version.json

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

package/dist/es2019/analytics.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import versionJson from './version.json';
-import { isExternalUser } from './components/utils';
+import { isCustom, isExternalUser } from './components/utils';
 const packageName = versionJson.name;
 const packageVersion = versionJson.version;
 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}$/;
@@ -49,9 +49,15 @@ const optionData2Analytics = option => {
       sources: option.sources,
       externalUserType: option.externalUserType
     };
-  } else {
-    return validatedData;
   }
+
+  if (isCustom(option) && option.analyticsType) {
+    return { ...validatedData,
+      type: option.analyticsType
+    };
+  }
+
+  return validatedData;
 };
 
 const buildValueForAnalytics = value => {

package/dist/es2019/components/CustomOption/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+const AsyncCustomOption = /*#__PURE__*/React.lazy(() => import(
+/* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/custom-option" */
+'./main').then(module => {
+  return {
+    default: module.CustomOption
+  };
+}));
+export default AsyncCustomOption;

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

@@ -0,0 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
+import { HighlightText } from '../HighlightText';
+import { SizeableAvatar } from '../SizeableAvatar';
+export class CustomOption extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "getPrimaryText", () => {
+      const {
+        data: {
+          name,
+          highlight
+        }
+      } = this.props;
+      return [jsx("span", {
+        key: "name",
+        css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
+        highlights: highlight && highlight.name
+      }, name))];
+    });
+
+    _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
+      css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+    }, message));
+
+    _defineProperty(this, "renderByline", () => {
+      var _this$props$data;
+
+      if (!((_this$props$data = this.props.data) !== null && _this$props$data !== void 0 && _this$props$data.byline)) {
+        return undefined;
+      }
+
+      return this.getBylineComponent(this.props.isSelected, this.props.data.byline);
+    });
+
+    _defineProperty(this, "renderAvatar", () => {
+      const {
+        data: {
+          avatarUrl,
+          name
+        }
+      } = this.props;
+      return jsx(SizeableAvatar, {
+        appearance: "big",
+        src: avatarUrl,
+        name: name
+      });
+    });
+
+    _defineProperty(this, "getLozengeProps", () => typeof this.props.data.lozenge === 'string' ? {
+      text: this.props.data.lozenge
+    } : this.props.data.lozenge);
+  }
+
+  render() {
+    return jsx(AvatarItemOption, {
+      avatar: this.renderAvatar(),
+      isDisabled: this.props.data.isDisabled,
+      lozenge: this.getLozengeProps(),
+      primaryText: this.getPrimaryText(),
+      secondaryText: this.renderByline()
+    });
+  }
+
+}

package/dist/es2019/components/MultiValue.js

@@ -102,8 +102,8 @@ export class MultiValue extends React.Component {
       },
       innerProps: nextInnerProps,
       isFocused: nextIsFocused
-    } = nextProps; // We can ignore onRemove here because it is a anonymous function
-    // that will recreated every time but with the same implementation.
+    } = nextProps; // We can ignore onRemove here because it is an anonymous function
+    // that will be recreated every time but with the same implementation.
 
     return data !== nextData || label !== nextLabel || innerProps !== nextInnerProps || isFocused !== nextIsFocused;
   }

package/dist/es2019/components/Option.js

@@ -5,7 +5,8 @@ import AsyncExternalOption from './ExternalUserOption';
 import AsyncTeamOption from './TeamOption';
 import AsyncGroupOption from './GroupOption';
 import AsyncEmailOption from './EmailOption';
-import { isEmail, isTeam, isUser, isGroup, isExternalUser } from './utils';
+import AsyncCustomOption from './CustomOption';
+import { isCustom, isEmail, isTeam, isUser, isGroup, isExternalUser } from './utils';
 import { isValidEmail } from './emailValidation';
 
 const defaultOption = ({
@@ -67,6 +68,13 @@ const dataOption = ({
     });
   }
 
+  if (isCustom(data)) {
+    return /*#__PURE__*/React.createElement(AsyncCustomOption, {
+      data: data,
+      isSelected: isSelected
+    });
+  }
+
   return null;
 };
 

package/dist/es2019/components/styles.js

@@ -25,7 +25,7 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
           opacity: 1
         },
         ':hover': { ...css[':hover'],
-          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focused', css[':hover'].borderColor) : token('color.border.focused', B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? token('color.icon.danger', R50) : token('color.icon', N30) : token('color.border.input', N40),
+          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focused', css[':hover'].borderColor) : token('color.border.focused', B100) : state.selectProps.subtle ? 'transparent' : token('color.border.input', N40),
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? token('color.background.danger', R50) : state.isFocused ? css[':hover'] ? token('color.background.input', css[':hover'].backgroundColor) : token('color.background.input', N0) : state.isDisabled ? token('color.background.disabled', N10) : token('color.background.input.hovered', N30)
         },
         padding: 0,

package/dist/es2019/components/utils.js

@@ -1,11 +1,12 @@
 import memoizeOne from 'memoize-one';
-import { EmailType, TeamType, GroupType, UserType } from '../types';
+import { CustomType, EmailType, TeamType, GroupType, UserType } from '../types';
 import { PopupSelect } from '@atlaskit/select';
 export const isExternalUser = option => isUser(option) && Boolean(option.isExternal);
 export const isUser = option => option.type === undefined || option.type === UserType;
 export const isTeam = option => option.type === TeamType;
 export const isGroup = option => option.type === GroupType;
 export const isEmail = option => option.type === EmailType;
+export const isCustom = option => option.type === CustomType;
 export const isDefaultValuePopulated = value => value && !Array.isArray(value) || Array.isArray(value) && value.length > 0;
 
 const isOptionData = option => option.name !== undefined;
@@ -71,7 +72,7 @@ export const callCallback = (callback, ...args) => {
   }
 };
 export const getAvatarUrl = optionData => {
-  if (isUser(optionData) || isTeam(optionData)) {
+  if (isUser(optionData) || isTeam(optionData) || isCustom(optionData)) {
     return optionData.avatarUrl;
   }
 

package/dist/es2019/index.js

@@ -3,4 +3,4 @@ export { UserPicker as default } from './components/UserPicker';
 export { PopupUserPicker } from './components/PopupUserPicker';
 export { isEmail, isExternalUser, isTeam, isUser } from './components/utils';
 export { // Constants
-EmailType, GroupType, TeamType, UserType } from './types';
+CustomType, EmailType, GroupType, TeamType, UserType } from './types';

package/dist/es2019/types.js

@@ -1,4 +1,5 @@
 export const UserType = 'user';
 export const TeamType = 'team';
 export const GroupType = 'group';
-export const EmailType = 'email';
+export const EmailType = 'email';
+export const CustomType = 'custom';

package/dist/es2019/version.json

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

package/dist/esm/analytics.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import versionJson from './version.json';
-import { isExternalUser } from './components/utils';
+import { isCustom, isExternalUser } from './components/utils';
 var packageName = versionJson.name;
 var packageVersion = versionJson.version;
 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}$/;
@@ -57,9 +57,15 @@ var optionData2Analytics = function optionData2Analytics(option) {
       sources: option.sources,
       externalUserType: option.externalUserType
     });
-  } else {
-    return validatedData;
   }
+
+  if (isCustom(option) && option.analyticsType) {
+    return _objectSpread(_objectSpread({}, validatedData), {}, {
+      type: option.analyticsType
+    });
+  }
+
+  return validatedData;
 };
 
 var buildValueForAnalytics = function buildValueForAnalytics(value) {

package/dist/esm/components/CustomOption/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+var AsyncCustomOption = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_@atlassian/user-picker/custom-option" */
+  './main').then(function (module) {
+    return {
+      default: module.CustomOption
+    };
+  });
+});
+export default AsyncCustomOption;

package/dist/esm/components/CustomOption/main.js

@@ -0,0 +1,99 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+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; } }
+
+/** @jsx jsx */
+import { B400, N800, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
+import { HighlightText } from '../HighlightText';
+import { SizeableAvatar } from '../SizeableAvatar';
+export var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(CustomOption, _React$PureComponent);
+
+  var _super = _createSuper(CustomOption);
+
+  function CustomOption() {
+    var _this;
+
+    _classCallCheck(this, CustomOption);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "getPrimaryText", function () {
+      var _this$props$data = _this.props.data,
+          name = _this$props$data.name,
+          highlight = _this$props$data.highlight;
+      return [jsx("span", {
+        key: "name",
+        css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text', N800))
+      }, jsx(HighlightText, {
+        highlights: highlight && highlight.name
+      }, name))];
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
+      return jsx("span", {
+        css: textWrapper(isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+      }, message);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
+      var _this$props$data2;
+
+      if (!((_this$props$data2 = _this.props.data) !== null && _this$props$data2 !== void 0 && _this$props$data2.byline)) {
+        return undefined;
+      }
+
+      return _this.getBylineComponent(_this.props.isSelected, _this.props.data.byline);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderAvatar", function () {
+      var _this$props$data3 = _this.props.data,
+          avatarUrl = _this$props$data3.avatarUrl,
+          name = _this$props$data3.name;
+      return jsx(SizeableAvatar, {
+        appearance: "big",
+        src: avatarUrl,
+        name: name
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getLozengeProps", function () {
+      return typeof _this.props.data.lozenge === 'string' ? {
+        text: _this.props.data.lozenge
+      } : _this.props.data.lozenge;
+    });
+
+    return _this;
+  }
+
+  _createClass(CustomOption, [{
+    key: "render",
+    value: function render() {
+      return jsx(AvatarItemOption, {
+        avatar: this.renderAvatar(),
+        isDisabled: this.props.data.isDisabled,
+        lozenge: this.getLozengeProps(),
+        primaryText: this.getPrimaryText(),
+        secondaryText: this.renderByline()
+      });
+    }
+  }]);
+
+  return CustomOption;
+}(React.PureComponent);

package/dist/esm/components/MultiValue.js

@@ -118,8 +118,8 @@ export var MultiValue = /*#__PURE__*/function (_React$Component) {
           nextLabel = _nextProps$data.label,
           nextData = _nextProps$data.data,
           nextInnerProps = nextProps.innerProps,
-          nextIsFocused = nextProps.isFocused; // We can ignore onRemove here because it is a anonymous function
-      // that will recreated every time but with the same implementation.
+          nextIsFocused = nextProps.isFocused; // We can ignore onRemove here because it is an anonymous function
+      // that will be recreated every time but with the same implementation.
 
       return data !== nextData || label !== nextLabel || innerProps !== nextInnerProps || isFocused !== nextIsFocused;
     }