@atlaskit/user-picker 9.5.0 → 9.6.0

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/GroupOption/main.js

@@ -18,7 +18,7 @@ import { N20, B400, N800, N200 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import PeopleIcon from '@atlaskit/icon/glyph/people';
 import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
-import { messages } from '.././i18n';
+import { messages } from '../i18n';
 import { HighlightText } from '../HighlightText';
 export var groupOptionIconWrapper = css({
   padding: '2px',

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/TeamOption/main.js

@@ -17,10 +17,10 @@ import { token } from '@atlaskit/tokens';
 import { jsx } from '@emotion/core';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { AvatarItemOption, textWrapper } from '.././AvatarItemOption';
-import { HighlightText } from '.././HighlightText';
-import { messages } from '.././i18n';
-import { SizeableAvatar } from '.././SizeableAvatar';
+import { AvatarItemOption, textWrapper } from '../AvatarItemOption';
+import { HighlightText } from '../HighlightText';
+import { messages } from '../i18n';
+import { SizeableAvatar } from '../SizeableAvatar';
 export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(TeamOption, _React$PureComponent);
 

package/dist/esm/components/UserPicker.js

@@ -24,7 +24,7 @@ import { getComponents } from './components';
 import { getCreatableProps } from './creatable';
 import { getCreatableSuggestedEmailProps } from './creatableEmailSuggestion';
 import MessagesIntlProvider from './MessagesIntlProvider';
-import { ExusUserSourceProvider } from './../clients/UserSourceProvider';
+import { ExusUserSourceProvider } from '../clients/UserSourceProvider';
 import { userPickerRenderedUfoExperience as experience, UfoErrorBoundary } from '../util/ufoExperiences';
 import { v4 as uuidv4 } from 'uuid';
 export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {

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.0",
+	"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.0",
+  "version": "9.6.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -37,12 +38,12 @@
     "@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.0",
+    "@atlaskit/tokens": "^0.10.19",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -58,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

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/user-picker"
 
@@ -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)