@atlaskit/user-picker 9.3.6 → 9.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 9.4.1
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 9.4.0
+
+### Minor Changes
+
+- [`47c6607c914`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47c6607c914) - [ux] Adding ability for Options of type Team to allow for custom html in the lozenge prop. Added byline prop for type Team which will override the default byline generated from includesYou and memberCount props.
+
 ## 9.3.6
 
 ### Patch Changes

package/analytics/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/analytics.js",
   "module:es2019": "../dist/es2019/analytics.js",
   "sideEffects": false,
-  "types": "../dist/types/analytics.d.ts"
+  "types": "../dist/types/analytics.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/analytics.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/components/AvatarItemOption.js

@@ -13,10 +13,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _constants = require("@atlaskit/theme/constants");
+
 var _core = require("@emotion/core");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
+var _utils = require("./utils");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -45,6 +49,13 @@ var wrapper = (0, _core.css)({
   width: '100%',
   cursor: 'pointer'
 });
+var optionWrapper = (0, _core.css)({
+  maxWidth: '100%',
+  minWidth: 0,
+  flex: '1 1 100%',
+  lineHeight: '1.4',
+  paddingLeft: "".concat((0, _constants.gridSize)(), "px")
+});
 
 var getTextStyle = function getTextStyle(isSecondary) {
   var secondaryCssArgs = isSecondary ? {
@@ -66,7 +77,7 @@ var textWrapper = function textWrapper(color) {
   return (0, _core.css)({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    display: 'inline-block',
+    display: 'inline',
     color: color
   });
 };
@@ -78,29 +89,36 @@ var AvatarItemOption = function AvatarItemOption(_ref) {
       primaryText = _ref.primaryText,
       secondaryText = _ref.secondaryText,
       lozenge = _ref.lozenge;
+
+  var renderLozenge = function renderLozenge() {
+    if ((0, _utils.isLozengeText)(lozenge)) {
+      if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
+        // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
+        // Lozenge text) or tooltip won't work
+        return (0, _core.jsx)(_react.default.Suspense, {
+          fallback: (0, _core.jsx)(_lozenge.default, lozenge, lozenge.text)
+        }, (0, _core.jsx)(AsyncTooltip, {
+          content: lozenge.tooltip
+        }, (0, _core.jsx)(_lozenge.default, lozenge, lozenge.text)));
+      }
+
+      return (0, _core.jsx)(_lozenge.default, lozenge, lozenge.text);
+    }
+
+    return lozenge;
+  };
+
   return (0, _core.jsx)("span", {
     css: wrapper
   }, avatar, (0, _core.jsx)("div", {
-    style: {
-      maxWidth: '100%',
-      minWidth: 0,
-      flex: '1 1 100%',
-      lineHeight: '1.4',
-      paddingLeft: '8px'
-    }
-  }, (0, _core.jsx)("div", null, (0, _core.jsx)("span", {
+    css: optionWrapper
+  }, (0, _core.jsx)("div", null, (0, _core.jsx)("div", {
     css: getTextStyle()
-  }, primaryText), (0, _core.jsx)("span", {
-    css: additionalInfo
-  }, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ? // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
-  // Lozenge text) or tooltip won't work
-  (0, _core.jsx)(_react.default.Suspense, {
-    fallback: (0, _core.jsx)(_lozenge.default, lozenge, lozenge.text)
-  }, (0, _core.jsx)(AsyncTooltip, {
-    content: lozenge.tooltip
-  }, (0, _core.jsx)(_lozenge.default, lozenge, lozenge.text))) : (0, _core.jsx)(_lozenge.default, lozenge, lozenge.text)))), (0, _core.jsx)("div", null, (0, _core.jsx)("span", {
+  }, primaryText), secondaryText && (0, _core.jsx)("div", {
     css: getTextStyle(true)
-  }, secondaryText))));
+  }, secondaryText))), lozenge && (0, _core.jsx)("div", {
+    css: additionalInfo
+  }, renderLozenge()));
 };
 
 exports.AvatarItemOption = AvatarItemOption;

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

@@ -124,6 +124,17 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
         text: _this.props.team.lozenge
       } : _this.props.team.lozenge;
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCustomByLine", function () {
+      var _this$props$team4;
+
+      if (!((_this$props$team4 = _this.props.team) !== null && _this$props$team4 !== void 0 && _this$props$team4.byline)) {
+        return undefined;
+      }
+
+      return (0, _core.jsx)("span", {
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? (0, _tokens.token)('color.text.selected', _colors.B400) : (0, _tokens.token)('color.text.subtlest', _colors.N200))
+      }, _this.props.team.byline);
+    });
     return _this;
   }
 
@@ -132,7 +143,7 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return (0, _core.jsx)(_AvatarItemOption.AvatarItemOption, {
         avatar: this.renderAvatar(),
-        secondaryText: this.renderByline(),
+        secondaryText: this.renderCustomByLine() || this.renderByline(),
         primaryText: this.getPrimaryText(),
         lozenge: this.getLozengeProps()
       });

package/dist/cjs/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionToSelectableOptions = exports.optionToSelectableOption = exports.isUser = exports.isTeam = exports.isSingleValue = exports.isPopupUserPickerByProps = exports.isPopupUserPickerByComponent = exports.isIterable = exports.isGroup = exports.isExternalUser = exports.isEmail = exports.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.isChildInput = exports.hasValue = exports.getOptions = exports.getAvatarUrl = exports.getAvatarSize = exports.extractOptionValue = exports.callCallback = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -182,4 +182,10 @@ var isPopupUserPickerByProps = function isPopupUserPickerByProps(selectProps) {
   return selectProps.searchThreshold === -1;
 };
 
-exports.isPopupUserPickerByProps = isPopupUserPickerByProps;
+exports.isPopupUserPickerByProps = isPopupUserPickerByProps;
+
+var isLozengeText = function isLozengeText(lozengeProp) {
+  return (lozengeProp === null || lozengeProp === void 0 ? void 0 : lozengeProp.hasOwnProperty('text')) || false;
+};
+
+exports.isLozengeText = isLozengeText;

package/dist/cjs/version.json

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

package/dist/es2019/components/AvatarItemOption.js

@@ -1,7 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
+import { gridSize } from '@atlaskit/theme/constants';
 import { css, jsx } from '@emotion/core';
 import Lozenge from '@atlaskit/lozenge';
+import { isLozengeText } from './utils';
 const AsyncTooltip = /*#__PURE__*/React.lazy(() => import(
 /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
 '@atlaskit/tooltip').then(module => {
@@ -19,6 +21,13 @@ const wrapper = css({
   width: '100%',
   cursor: 'pointer'
 });
+const optionWrapper = css({
+  maxWidth: '100%',
+  minWidth: 0,
+  flex: '1 1 100%',
+  lineHeight: '1.4',
+  paddingLeft: `${gridSize()}px`
+});
 
 const getTextStyle = isSecondary => {
   const secondaryCssArgs = isSecondary ? {
@@ -39,7 +48,7 @@ const additionalInfo = css({
 export const textWrapper = color => css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  display: 'inline-block',
+  display: 'inline',
   color
 });
 export const AvatarItemOption = ({
@@ -47,26 +56,34 @@ export const AvatarItemOption = ({
   primaryText,
   secondaryText,
   lozenge
-}) => jsx("span", {
-  css: wrapper
-}, avatar, jsx("div", {
-  style: {
-    maxWidth: '100%',
-    minWidth: 0,
-    flex: '1 1 100%',
-    lineHeight: '1.4',
-    paddingLeft: '8px'
-  }
-}, jsx("div", null, jsx("span", {
-  css: getTextStyle()
-}, primaryText), jsx("span", {
-  css: additionalInfo
-}, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ? // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
-// Lozenge text) or tooltip won't work
-jsx(React.Suspense, {
-  fallback: jsx(Lozenge, lozenge, lozenge.text)
-}, jsx(AsyncTooltip, {
-  content: lozenge.tooltip
-}, jsx(Lozenge, lozenge, lozenge.text))) : jsx(Lozenge, lozenge, lozenge.text)))), jsx("div", null, jsx("span", {
-  css: getTextStyle(true)
-}, secondaryText))));
+}) => {
+  const renderLozenge = () => {
+    if (isLozengeText(lozenge)) {
+      if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
+        // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
+        // Lozenge text) or tooltip won't work
+        return jsx(React.Suspense, {
+          fallback: jsx(Lozenge, lozenge, lozenge.text)
+        }, jsx(AsyncTooltip, {
+          content: lozenge.tooltip
+        }, jsx(Lozenge, lozenge, lozenge.text)));
+      }
+
+      return jsx(Lozenge, lozenge, lozenge.text);
+    }
+
+    return lozenge;
+  };
+
+  return jsx("span", {
+    css: wrapper
+  }, avatar, jsx("div", {
+    css: optionWrapper
+  }, jsx("div", null, jsx("div", {
+    css: getTextStyle()
+  }, primaryText), secondaryText && jsx("div", {
+    css: getTextStyle(true)
+  }, secondaryText))), lozenge && jsx("div", {
+    css: additionalInfo
+  }, renderLozenge()));
+};

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

@@ -87,12 +87,24 @@ export class TeamOption extends React.PureComponent {
     _defineProperty(this, "getLozengeProps", () => typeof this.props.team.lozenge === 'string' ? {
       text: this.props.team.lozenge
     } : this.props.team.lozenge);
+
+    _defineProperty(this, "renderCustomByLine", () => {
+      var _this$props$team;
+
+      if (!((_this$props$team = this.props.team) !== null && _this$props$team !== void 0 && _this$props$team.byline)) {
+        return undefined;
+      }
+
+      return jsx("span", {
+        css: textWrapper(this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+      }, this.props.team.byline);
+    });
   }
 
   render() {
     return jsx(AvatarItemOption, {
       avatar: this.renderAvatar(),
-      secondaryText: this.renderByline(),
+      secondaryText: this.renderCustomByLine() || this.renderByline(),
       primaryText: this.getPrimaryText(),
       lozenge: this.getLozengeProps()
     });

package/dist/es2019/components/utils.js

@@ -76,4 +76,7 @@ export const getAvatarUrl = optionData => {
   return undefined;
 };
 export const isPopupUserPickerByComponent = SelectComponent => SelectComponent === PopupSelect;
-export const isPopupUserPickerByProps = selectProps => selectProps.searchThreshold === -1;
+export const isPopupUserPickerByProps = selectProps => selectProps.searchThreshold === -1;
+export const isLozengeText = lozengeProp => {
+  return (lozengeProp === null || lozengeProp === void 0 ? void 0 : lozengeProp.hasOwnProperty('text')) || false;
+};

package/dist/es2019/version.json

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

package/dist/esm/components/AvatarItemOption.js

@@ -6,8 +6,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React from 'react';
+import { gridSize } from '@atlaskit/theme/constants';
 import { css, jsx } from '@emotion/core';
 import Lozenge from '@atlaskit/lozenge';
+import { isLozengeText } from './utils';
 var AsyncTooltip = /*#__PURE__*/React.lazy(function () {
   return import(
   /* webpackChunkName: "@atlaskit-internal_@atlaskit/tooltip" */
@@ -27,6 +29,13 @@ var wrapper = css({
   width: '100%',
   cursor: 'pointer'
 });
+var optionWrapper = css({
+  maxWidth: '100%',
+  minWidth: 0,
+  flex: '1 1 100%',
+  lineHeight: '1.4',
+  paddingLeft: "".concat(gridSize(), "px")
+});
 
 var getTextStyle = function getTextStyle(isSecondary) {
   var secondaryCssArgs = isSecondary ? {
@@ -47,7 +56,7 @@ export var textWrapper = function textWrapper(color) {
   return css({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    display: 'inline-block',
+    display: 'inline',
     color: color
   });
 };
@@ -56,27 +65,34 @@ export var AvatarItemOption = function AvatarItemOption(_ref) {
       primaryText = _ref.primaryText,
       secondaryText = _ref.secondaryText,
       lozenge = _ref.lozenge;
+
+  var renderLozenge = function renderLozenge() {
+    if (isLozengeText(lozenge)) {
+      if (lozenge !== null && lozenge !== void 0 && lozenge.tooltip) {
+        // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
+        // Lozenge text) or tooltip won't work
+        return jsx(React.Suspense, {
+          fallback: jsx(Lozenge, lozenge, lozenge.text)
+        }, jsx(AsyncTooltip, {
+          content: lozenge.tooltip
+        }, jsx(Lozenge, lozenge, lozenge.text)));
+      }
+
+      return jsx(Lozenge, lozenge, lozenge.text);
+    }
+
+    return lozenge;
+  };
+
   return jsx("span", {
     css: wrapper
   }, avatar, jsx("div", {
-    style: {
-      maxWidth: '100%',
-      minWidth: 0,
-      flex: '1 1 100%',
-      lineHeight: '1.4',
-      paddingLeft: '8px'
-    }
-  }, jsx("div", null, jsx("span", {
+    css: optionWrapper
+  }, jsx("div", null, jsx("div", {
     css: getTextStyle()
-  }, primaryText), jsx("span", {
-    css: additionalInfo
-  }, (lozenge === null || lozenge === void 0 ? void 0 : lozenge.text) && (lozenge !== null && lozenge !== void 0 && lozenge.tooltip ? // Note that entire Lozenge must be wrapped in the Tooltip (rather than just the
-  // Lozenge text) or tooltip won't work
-  jsx(React.Suspense, {
-    fallback: jsx(Lozenge, lozenge, lozenge.text)
-  }, jsx(AsyncTooltip, {
-    content: lozenge.tooltip
-  }, jsx(Lozenge, lozenge, lozenge.text))) : jsx(Lozenge, lozenge, lozenge.text)))), jsx("div", null, jsx("span", {
+  }, primaryText), secondaryText && jsx("div", {
     css: getTextStyle(true)
-  }, secondaryText))));
+  }, secondaryText))), lozenge && jsx("div", {
+    css: additionalInfo
+  }, renderLozenge()));
 };

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

@@ -106,6 +106,18 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
       } : _this.props.team.lozenge;
     });
 
+    _defineProperty(_assertThisInitialized(_this), "renderCustomByLine", function () {
+      var _this$props$team4;
+
+      if (!((_this$props$team4 = _this.props.team) !== null && _this$props$team4 !== void 0 && _this$props$team4.byline)) {
+        return undefined;
+      }
+
+      return jsx("span", {
+        css: textWrapper(_this.props.isSelected ? token('color.text.selected', B400) : token('color.text.subtlest', N200))
+      }, _this.props.team.byline);
+    });
+
     return _this;
   }
 
@@ -114,7 +126,7 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       return jsx(AvatarItemOption, {
         avatar: this.renderAvatar(),
-        secondaryText: this.renderByline(),
+        secondaryText: this.renderCustomByLine() || this.renderByline(),
         primaryText: this.getPrimaryText(),
         lozenge: this.getLozengeProps()
       });

package/dist/esm/components/utils.js

@@ -118,4 +118,7 @@ export var isPopupUserPickerByComponent = function isPopupUserPickerByComponent(
 };
 export var isPopupUserPickerByProps = function isPopupUserPickerByProps(selectProps) {
   return selectProps.searchThreshold === -1;
+};
+export var isLozengeText = function isLozengeText(lozengeProp) {
+  return (lozengeProp === null || lozengeProp === void 0 ? void 0 : lozengeProp.hasOwnProperty('text')) || false;
 };

package/dist/esm/version.json

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

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

@@ -6,6 +6,6 @@ export declare type AvatarItemOptionProps = {
     avatar: ReactNode;
     primaryText?: ReactNode;
     secondaryText?: ReactNode;
-    lozenge?: LozengeProps;
+    lozenge?: ReactNode | LozengeProps;
 };
 export declare const AvatarItemOption: ({ avatar, primaryText, secondaryText, lozenge, }: AvatarItemOptionProps) => 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>, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "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" | "boundariesElement" | "placement" | "rootBoundary" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "target" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isDisabled" | "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<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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

@@ -10,5 +10,6 @@ export declare class TeamOption extends React.PureComponent<TeamOptionProps> {
     private getBylineComponent;
     private renderAvatar;
     private getLozengeProps;
+    private renderCustomByLine;
     render(): JSX.Element;
 }

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

@@ -1,5 +1,5 @@
-import { ReactChild, ReactElement } from 'react';
-import { AtlaskitSelectValue, ExternalUser, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue } from '../types';
+import { ReactChild, ReactElement, ReactNode } from 'react';
+import { AtlaskitSelectValue, ExternalUser, 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;
@@ -25,3 +25,4 @@ export declare const callCallback: <U extends any[], R>(callback: ((...U: U) =>
 export declare const getAvatarUrl: (optionData: OptionData) => string | undefined;
 export declare const isPopupUserPickerByComponent: (SelectComponent: React.ComponentClass<any>) => boolean;
 export declare const isPopupUserPickerByProps: (selectProps: any) => boolean;
+export declare const isLozengeText: (lozengeProp: ReactNode | LozengeProps) => lozengeProp is LozengeProps;

package/dist/types/types.d.ts

@@ -203,7 +203,7 @@ export interface OptionData {
     name: string;
     type?: 'user' | 'team' | 'email' | 'group';
     fixed?: boolean;
-    lozenge?: string | LozengeProps;
+    lozenge?: string | LozengeProps | ReactNode;
 }
 export declare const UserType = "user";
 export declare type UserSource = 'google' | 'slack' | 'microsoft' | 'github' | 'jira' | 'confluence' | 'other-atlassian';
@@ -241,6 +241,7 @@ export interface Team extends OptionData {
     includesYou?: boolean;
     highlight?: TeamHighlight;
     type: 'team';
+    byline?: string;
 }
 export declare const GroupType = "group";
 export interface Group extends OptionData {

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

@@ -0,0 +1,24 @@
+import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { UserPickerProps, UserPickerState } from './types';
+export declare type UserPickerSession = {
+    id: string;
+    start: number;
+    inputChangeTime: number;
+    upCount: number;
+    downCount: number;
+    lastKey?: number;
+};
+export declare const startSession: () => UserPickerSession;
+export declare const createAndFireEventInElementsChannel: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+export interface EventCreator {
+    (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession): AnalyticsEventPayload;
+    (props: UserPickerProps, state: UserPickerState, session?: UserPickerSession, ...args: any[]): AnalyticsEventPayload;
+}
+export declare const focusEvent: EventCreator;
+export declare const clearEvent: EventCreator;
+export declare const deleteEvent: EventCreator;
+export declare const cancelEvent: EventCreator;
+export declare const selectEvent: EventCreator;
+export declare const searchedEvent: EventCreator;
+export declare const failedEvent: EventCreator;
+export declare const userInfoEvent: (sources: string[], accountId: string) => AnalyticsEventPayload;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LoadUserSource, UserSource } from '../types';
+export interface UserSourceContext {
+    fetchUserSource?: LoadUserSource;
+}
+export declare const ExusUserSourceProvider: React.FC<UserSourceContext>;
+export declare const useUserSource: (accountId: string, shouldFetchSources: boolean, existingSources?: UserSource[] | undefined) => {
+    sources: UserSource[];
+    loading: boolean;
+    error: string | null;
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type AddOptionAvatarProps = {
+    label: string;
+    isLozenge?: boolean;
+};
+export declare const AddOptionAvatar: React.FunctionComponent<AddOptionAvatarProps>;

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { LozengeProps } from '../types';
+export declare const textWrapper: (color?: string | undefined) => import("@emotion/utils").SerializedStyles;
+export declare type AvatarItemOptionProps = {
+    avatar: ReactNode;
+    primaryText?: ReactNode;
+    secondaryText?: ReactNode;
+    lozenge?: ReactNode | LozengeProps;
+};
+export declare const AvatarItemOption: ({ avatar, primaryText, secondaryText, lozenge, }: AvatarItemOptionProps) => JSX.Element;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { UserPickerProps, UserPickerState } from '../types';
+export declare type BaseUserPickerProps = UserPickerProps & {
+    SelectComponent: React.ComponentClass<any>;
+    pickerProps?: any;
+    styles: any;
+    components: any;
+    width: string | number;
+};
+export declare class BaseUserPickerWithoutAnalytics extends React.Component<BaseUserPickerProps, UserPickerState> {
+    static defaultProps: {
+        isMulti: boolean;
+        subtle: boolean;
+        noBorder: boolean;
+        textFieldBackgroundColor: boolean;
+        isClearable: boolean;
+    };
+    static getDerivedStateFromProps(nextProps: Partial<UserPickerProps>, prevState: UserPickerState): Partial<UserPickerState>;
+    private selectRef;
+    private session?;
+    private journeyId?;
+    private optionsShownUfoExperienceInstance;
+    constructor(props: BaseUserPickerProps);
+    private getSessionId;
+    private withSelectRef;
+    nextOption: () => void;
+    previousOption: () => void;
+    focus: () => void;
+    blur: () => void;
+    selectOption: () => void;
+    private handleChange;
+    private handleSelectRef;
+    private addOptions;
+    private handleLoadOptionsError;
+    private debouncedLoadOptions;
+    abortOptionsShownUfoExperience: () => void;
+    startOptionsShownUfoExperience: () => void;
+    private executeLoadOptions;
+    private handleFocus;
+    private resetInputState;
+    private handleBlur;
+    private handleClose;
+    private handleInputChange;
+    private fireEvent;
+    private startSession;
+    componentDidMount(): void;
+    componentDidUpdate(_: UserPickerProps, prevState: UserPickerState): void;
+    private handleKeyDown;
+    handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;
+    private getOptions;
+    private getAppearance;
+    render(): JSX.Element;
+}
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isDisabled" | "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<{
+    isMulti: boolean;
+    subtle: boolean;
+    noBorder: boolean;
+    textFieldBackgroundColor: boolean;
+    isClearable: boolean;
+}, never>> & React.RefAttributes<any>>;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IndicatorProps } from '@atlaskit/select';
+export declare class ClearIndicator extends React.PureComponent<IndicatorProps<any>> {
+    private handleMouseDown;
+    render(): JSX.Element;
+}

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

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