@atlaskit/user-picker 9.5.1 → 9.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 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/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.0",
 	"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/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.0",
 	"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;
     }

package/dist/esm/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';
 
 var defaultOption = function defaultOption(_ref) {
@@ -64,6 +65,13 @@ var dataOption = function dataOption(_ref2) {
     });
   }
 
+  if (isCustom(data)) {
+    return /*#__PURE__*/React.createElement(AsyncCustomOption, {
+      data: data,
+      isSelected: isSelected
+    });
+  }
+
   return null;
 };
 

package/dist/esm/components/utils.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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; }
 
 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 var isExternalUser = function isExternalUser(option) {
   return isUser(option) && Boolean(option.isExternal);
@@ -23,6 +23,9 @@ export var isGroup = function isGroup(option) {
 export var isEmail = function isEmail(option) {
   return option.type === EmailType;
 };
+export var isCustom = function isCustom(option) {
+  return option.type === CustomType;
+};
 export var isDefaultValuePopulated = function isDefaultValuePopulated(value) {
   return value && !Array.isArray(value) || Array.isArray(value) && value.length > 0;
 };
@@ -109,7 +112,7 @@ export var callCallback = function callCallback(callback) {
   }
 };
 export var getAvatarUrl = function getAvatarUrl(optionData) {
-  if (isUser(optionData) || isTeam(optionData)) {
+  if (isUser(optionData) || isTeam(optionData) || isCustom(optionData)) {
     return optionData.avatarUrl;
   }
 

package/dist/esm/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/esm/types.js

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

package/dist/esm/version.json

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

package/dist/types/components/BaseUserPicker.d.ts

@@ -51,7 +51,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

package/dist/types/components/CustomOption/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncCustomOption: React.LazyExoticComponent<typeof import("./main").CustomOption>;
+export default AsyncCustomOption;

package/dist/types/components/CustomOption/main.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Custom } from '../../types';
+export declare type CustomOptionProps = {
+    data: Custom;
+    isSelected: boolean;
+};
+export declare class CustomOption extends React.PureComponent<CustomOptionProps> {
+    private getPrimaryText;
+    private getBylineComponent;
+    private renderByline;
+    private renderAvatar;
+    private getLozengeProps;
+    render(): JSX.Element;
+}

package/dist/types/components/PopupUserPicker.d.ts

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isDisabled" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "rootBoundary" | "boundariesElement" | "placement" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "isDisabled" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "rootBoundary" | "boundariesElement" | "placement" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

package/dist/types/components/UserPicker.d.ts

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

package/dist/types/components/utils.d.ts

@@ -1,10 +1,11 @@
 import { ReactChild, ReactElement, ReactNode } from 'react';
-import { AtlaskitSelectValue, ExternalUser, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue, LozengeProps } from '../types';
+import { AtlaskitSelectValue, ExternalUser, Custom, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue, LozengeProps } from '../types';
 export declare const isExternalUser: (option: OptionData) => option is ExternalUser;
 export declare const isUser: (option: OptionData) => option is User;
 export declare const isTeam: (option: OptionData) => option is Team;
 export declare const isGroup: (option: OptionData) => option is Group;
 export declare const isEmail: (option: OptionData) => option is Email;
+export declare const isCustom: (option: OptionData) => option is Custom;
 export declare const isDefaultValuePopulated: (value?: DefaultValue) => boolean;
 export declare const optionToSelectableOption: (option: OptionData | OptionIdentifier) => Option;
 export declare const extractOptionValue: (value: AtlaskitSelectValue) => OptionData | OptionData[] | undefined;

package/dist/types/index.d.ts

@@ -3,5 +3,5 @@ export type { EmailValidationResponse, EmailValidator, } from './components/emai
 export { UserPicker as default } from './components/UserPicker';
 export { PopupUserPicker } from './components/PopupUserPicker';
 export { isEmail, isExternalUser, isTeam, isUser } from './components/utils';
-export { EmailType, GroupType, TeamType, UserType, } from './types';
-export type { ActionTypes, Appearance, AtlasKitSelectChange, AtlaskitSelectValue, DefaultValue, InputActionTypes, LozengeProps, OnChange, OnInputChange, OnOption, OnPicker, Option, OptionData, OptionIdentifier, PopupUserPickerProps, Promisable, Target, UserPickerProps, UserPickerState, Value, Email, Group, GroupHighlight, HighlightRange, LoadOptions, Team, TeamMember, TeamHighlight, User, UserHighlight, ExternalUser, UserSource, } from './types';
+export { CustomType, EmailType, GroupType, TeamType, UserType, } from './types';
+export type { ActionTypes, Appearance, AtlasKitSelectChange, AtlaskitSelectValue, DefaultValue, InputActionTypes, LozengeProps, OnChange, OnInputChange, OnOption, OnPicker, Option, OptionData, OptionIdentifier, PopupUserPickerProps, Promisable, Target, UserPickerProps, UserPickerState, Value, Custom, Email, Group, GroupHighlight, HighlightRange, LoadOptions, Team, TeamMember, TeamHighlight, User, UserHighlight, ExternalUser, UserSource, } from './types';

package/dist/types/types.d.ts

@@ -197,6 +197,9 @@ export interface TeamHighlight {
 export interface GroupHighlight {
     name: HighlightRange[];
 }
+export interface CustomHighlight {
+    name: HighlightRange[];
+}
 export interface OptionData {
     avatarUrl?: any;
     fixed?: boolean;
@@ -204,7 +207,7 @@ export interface OptionData {
     isDisabled?: boolean;
     lozenge?: string | LozengeProps | ReactNode;
     name: string;
-    type?: 'user' | 'team' | 'email' | 'group';
+    type?: 'user' | 'team' | 'email' | 'group' | 'custom';
 }
 export declare const UserType = "user";
 export declare type UserSource = 'google' | 'slack' | 'microsoft' | 'github' | 'jira' | 'confluence' | 'other-atlassian';
@@ -249,10 +252,18 @@ export interface Group extends OptionData {
     highlight?: GroupHighlight;
     type: 'group';
 }
+export interface Custom extends OptionData {
+    avatarUrl?: string;
+    byline?: string;
+    highlight?: CustomHighlight;
+    analyticsType?: string;
+    type: 'custom';
+}
 export declare type Value = OptionData | OptionData[] | null | undefined;
 export declare type DefaultValue = Value | OptionIdentifier | OptionIdentifier[];
 export declare type OptionIdentifier = Pick<OptionData, 'id' | 'type' | 'isDisabled'>;
 export declare const EmailType = "email";
+export declare const CustomType = "custom";
 export interface Email extends OptionData {
     type: 'email';
     suggestion?: boolean;

package/dist/types-ts4.0/components/BaseUserPicker.d.ts

@@ -51,7 +51,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

package/dist/types-ts4.0/components/CustomOption/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AsyncCustomOption: React.LazyExoticComponent<typeof import("./main").CustomOption>;
+export default AsyncCustomOption;

package/dist/types-ts4.0/components/CustomOption/main.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Custom } from '../../types';
+export declare type CustomOptionProps = {
+    data: Custom;
+    isSelected: boolean;
+};
+export declare class CustomOption extends React.PureComponent<CustomOptionProps> {
+    private getPrimaryText;
+    private getBylineComponent;
+    private renderByline;
+    private renderAvatar;
+    private getLozengeProps;
+    render(): JSX.Element;
+}

package/dist/types-ts4.0/components/PopupUserPicker.d.ts

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isDisabled" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "rootBoundary" | "boundariesElement" | "placement" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "isDisabled" | "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "rootBoundary" | "boundariesElement" | "placement" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

package/dist/types-ts4.0/components/UserPicker.d.ts

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "options" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "search" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "placeholder" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabelledBy" | "ariaLive"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

package/dist/types-ts4.0/components/utils.d.ts

@@ -1,10 +1,11 @@
 import { ReactChild, ReactElement, ReactNode } from 'react';
-import { AtlaskitSelectValue, ExternalUser, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue, LozengeProps } from '../types';
+import { AtlaskitSelectValue, ExternalUser, Custom, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue, LozengeProps } from '../types';
 export declare const isExternalUser: (option: OptionData) => option is ExternalUser;
 export declare const isUser: (option: OptionData) => option is User;
 export declare const isTeam: (option: OptionData) => option is Team;
 export declare const isGroup: (option: OptionData) => option is Group;
 export declare const isEmail: (option: OptionData) => option is Email;
+export declare const isCustom: (option: OptionData) => option is Custom;
 export declare const isDefaultValuePopulated: (value?: DefaultValue) => boolean;
 export declare const optionToSelectableOption: (option: OptionData | OptionIdentifier) => Option;
 export declare const extractOptionValue: (value: AtlaskitSelectValue) => OptionData | OptionData[] | undefined;

package/dist/types-ts4.0/index.d.ts

@@ -3,5 +3,5 @@ export type { EmailValidationResponse, EmailValidator, } from './components/emai
 export { UserPicker as default } from './components/UserPicker';
 export { PopupUserPicker } from './components/PopupUserPicker';
 export { isEmail, isExternalUser, isTeam, isUser } from './components/utils';
-export { EmailType, GroupType, TeamType, UserType, } from './types';
-export type { ActionTypes, Appearance, AtlasKitSelectChange, AtlaskitSelectValue, DefaultValue, InputActionTypes, LozengeProps, OnChange, OnInputChange, OnOption, OnPicker, Option, OptionData, OptionIdentifier, PopupUserPickerProps, Promisable, Target, UserPickerProps, UserPickerState, Value, Email, Group, GroupHighlight, HighlightRange, LoadOptions, Team, TeamMember, TeamHighlight, User, UserHighlight, ExternalUser, UserSource, } from './types';
+export { CustomType, EmailType, GroupType, TeamType, UserType, } from './types';
+export type { ActionTypes, Appearance, AtlasKitSelectChange, AtlaskitSelectValue, DefaultValue, InputActionTypes, LozengeProps, OnChange, OnInputChange, OnOption, OnPicker, Option, OptionData, OptionIdentifier, PopupUserPickerProps, Promisable, Target, UserPickerProps, UserPickerState, Value, Custom, Email, Group, GroupHighlight, HighlightRange, LoadOptions, Team, TeamMember, TeamHighlight, User, UserHighlight, ExternalUser, UserSource, } from './types';

package/dist/types-ts4.0/types.d.ts

@@ -200,6 +200,9 @@ export interface TeamHighlight {
 export interface GroupHighlight {
     name: HighlightRange[];
 }
+export interface CustomHighlight {
+    name: HighlightRange[];
+}
 export interface OptionData {
     avatarUrl?: any;
     fixed?: boolean;
@@ -207,7 +210,7 @@ export interface OptionData {
     isDisabled?: boolean;
     lozenge?: string | LozengeProps | ReactNode;
     name: string;
-    type?: 'user' | 'team' | 'email' | 'group';
+    type?: 'user' | 'team' | 'email' | 'group' | 'custom';
 }
 export declare const UserType = "user";
 export declare type UserSource = 'google' | 'slack' | 'microsoft' | 'github' | 'jira' | 'confluence' | 'other-atlassian';
@@ -252,10 +255,18 @@ export interface Group extends OptionData {
     highlight?: GroupHighlight;
     type: 'group';
 }
+export interface Custom extends OptionData {
+    avatarUrl?: string;
+    byline?: string;
+    highlight?: CustomHighlight;
+    analyticsType?: string;
+    type: 'custom';
+}
 export declare type Value = OptionData | OptionData[] | null | undefined;
 export declare type DefaultValue = Value | OptionIdentifier | OptionIdentifier[];
 export declare type OptionIdentifier = Pick<OptionData, 'id' | 'type' | 'isDisabled'>;
 export declare const EmailType = "email";
+export declare const CustomType = "custom";
 export interface Email extends OptionData {
     type: 'email';
     suggestion?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.5.1",
+  "version": "9.6.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,10 +38,10 @@
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/logo": "^13.10.0",
-    "@atlaskit/lozenge": "^11.2.0",
+    "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/select": "^15.7.0",
-    "@atlaskit/spinner": "^15.1.4",
+    "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.19",
     "@atlaskit/tooltip": "^17.6.0",
@@ -59,15 +59,15 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/range": "^6.1.0",
+    "@atlaskit/range": "^7.0.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/textfield": "^5.3.0",
-    "@atlaskit/util-data-test": "^17.5.0",
+    "@atlaskit/util-data-test": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^10.0.7",

package/report.api.md

@@ -49,6 +49,29 @@ export type AtlaskitSelectValue = Array<Option_2> | Option_2 | null | undefined;
 // @public (undocumented)
 type BoundariesElement = 'scrollParent' | 'viewport' | 'window' | HTMLElement;
 
+// @public (undocumented)
+export interface Custom extends OptionData {
+  // (undocumented)
+  analyticsType?: string;
+  // (undocumented)
+  avatarUrl?: string;
+  // (undocumented)
+  byline?: string;
+  // (undocumented)
+  highlight?: CustomHighlight;
+  // (undocumented)
+  type: 'custom';
+}
+
+// @public (undocumented)
+interface CustomHighlight {
+  // (undocumented)
+  name: HighlightRange[];
+}
+
+// @public (undocumented)
+export const CustomType = 'custom';
+
 // @public (undocumented)
 export type DefaultValue = OptionIdentifier | OptionIdentifier[] | Value;
 
@@ -199,7 +222,7 @@ export interface OptionData {
   // (undocumented)
   name: string;
   // (undocumented)
-  type?: 'email' | 'group' | 'team' | 'user';
+  type?: 'custom' | 'email' | 'group' | 'team' | 'user';
 }
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -29,6 +29,29 @@ export type AtlaskitSelectValue = Array<Option_2> | Option_2 | null | undefined;
 // @public (undocumented)
 type BoundariesElement = 'scrollParent' | 'viewport' | 'window' | HTMLElement;
 
+// @public (undocumented)
+export interface Custom extends OptionData {
+    // (undocumented)
+    analyticsType?: string;
+    // (undocumented)
+    avatarUrl?: string;
+    // (undocumented)
+    byline?: string;
+    // (undocumented)
+    highlight?: CustomHighlight;
+    // (undocumented)
+    type: 'custom';
+}
+
+// @public (undocumented)
+interface CustomHighlight {
+    // (undocumented)
+    name: HighlightRange[];
+}
+
+// @public (undocumented)
+export const CustomType = "custom";
+
 // @public (undocumented)
 export type DefaultValue = OptionIdentifier | OptionIdentifier[] | Value;
 
@@ -165,7 +188,7 @@ export interface OptionData {
     // (undocumented)
     name: string;
     // (undocumented)
-    type?: 'email' | 'group' | 'team' | 'user';
+    type?: 'custom' | 'email' | 'group' | 'team' | 'user';
 }
 
 // @public (undocumented)