@atlaskit/user-picker 9.3.5 → 9.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 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
+
+- [`cb4c9cdd28b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb4c9cdd28b) - [ux] Update input component to use input tokens
+
 ## 9.3.5
 
 ### 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.3": {
+      "*": [
+        "../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/styles.js

@@ -51,14 +51,14 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? (0, _tokens.token)('color.border', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : (0, _tokens.token)('color.border', _colors.N40),
-        backgroundColor: state.isFocused ? (0, _tokens.token)('elevation.surface', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? (0, _tokens.token)('color.background.input', _colors.N10) : (0, _tokens.token)('color.background.neutral', _colors.N20),
+        borderColor: state.isFocused ? (0, _tokens.token)('color.border.focused', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : (0, _tokens.token)('color.border.input', _colors.N40),
+        backgroundColor: state.isFocused ? (0, _tokens.token)('color.background.input', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? (0, _tokens.token)('color.background.input', _colors.N10) : (0, _tokens.token)('color.background.input', _colors.N20),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.border.focused', css[':hover'].borderColor) : (0, _tokens.token)('color.border.focused', _colors.B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.icon.danger', _colors.R50) : (0, _tokens.token)('color.border', _colors.N30) : (0, _tokens.token)('color.border', _colors.N40),
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.background.danger', _colors.R50) : state.isFocused ? css[':hover'] ? (0, _tokens.token)('elevation.surface', css[':hover'].backgroundColor) : (0, _tokens.token)('elevation.surface', _colors.N0) : state.isDisabled ? (0, _tokens.token)('color.background.disabled', _colors.N10) : (0, _tokens.token)('elevation.surface', _colors.N30)
+          borderColor: state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.border.focused', css[':hover'].borderColor) : (0, _tokens.token)('color.border.focused', _colors.B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.icon.danger', _colors.R50) : (0, _tokens.token)('color.icon', _colors.N30) : (0, _tokens.token)('color.border.input', _colors.N40),
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? (0, _tokens.token)('color.background.danger', _colors.R50) : state.isFocused ? css[':hover'] ? (0, _tokens.token)('color.background.input', css[':hover'].backgroundColor) : (0, _tokens.token)('color.background.input', _colors.N0) : state.isDisabled ? (0, _tokens.token)('color.background.disabled', _colors.N10) : (0, _tokens.token)('color.background.input.hovered', _colors.N30)
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -86,7 +86,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
         paddingTop: 0,
         padding: 0,
         ':hover': {
-          color: (0, _tokens.token)('color.text.danger', _colors.R400)
+          color: (0, _tokens.token)('color.icon.danger', _colors.R400)
         }
       });
     },

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.5",
+	"version": "9.4.0",
 	"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/styles.js

@@ -19,14 +19,14 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
       const isMulti = state.selectProps.isMulti;
       return { ...css,
         width,
-        borderColor: state.isFocused ? token('color.border', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : token('color.border', N40),
-        backgroundColor: state.isFocused ? token('elevation.surface', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? token('color.background.input', N10) : token('color.background.neutral', N20),
+        borderColor: state.isFocused ? token('color.border.focused', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : token('color.border.input', N40),
+        backgroundColor: state.isFocused ? token('color.background.input', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? token('color.background.input', N10) : token('color.background.input', N20),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': { ...css[':hover'],
-          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focused', css[':hover'].borderColor) : token('color.border.focused', B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? token('color.icon.danger', R50) : token('color.border', N30) : token('color.border', N40),
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? token('color.background.danger', R50) : state.isFocused ? css[':hover'] ? token('elevation.surface', css[':hover'].backgroundColor) : token('elevation.surface', N0) : state.isDisabled ? token('color.background.disabled', N10) : token('elevation.surface', N30)
+          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focused', css[':hover'].borderColor) : token('color.border.focused', B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? token('color.icon.danger', R50) : token('color.icon', N30) : token('color.border.input', N40),
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? token('color.background.danger', R50) : state.isFocused ? css[':hover'] ? token('color.background.input', css[':hover'].backgroundColor) : token('color.background.input', N0) : state.isDisabled ? token('color.background.disabled', N10) : token('color.background.input.hovered', N30)
         },
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -54,7 +54,7 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
       paddingTop: 0,
       padding: 0,
       ':hover': {
-        color: token('color.text.danger', R400)
+        color: token('color.icon.danger', R400)
       }
     }),
     indicatorsContainer: css => ({ ...css,

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.5",
+	"version": "9.4.0",
 	"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/styles.js

@@ -31,14 +31,14 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: state.isFocused ? token('color.border', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : token('color.border', N40),
-        backgroundColor: state.isFocused ? token('elevation.surface', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? token('color.background.input', N10) : token('color.background.neutral', N20),
+        borderColor: state.isFocused ? token('color.border.focused', css.borderColor) : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : token('color.border.input', N40),
+        backgroundColor: state.isFocused ? token('color.background.input', css['backgroundColor']) : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? token('color.background.input', N10) : token('color.background.input', N20),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focused', css[':hover'].borderColor) : token('color.border.focused', B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? token('color.icon.danger', R50) : token('color.border', N30) : token('color.border', N40),
-          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? token('color.background.danger', R50) : state.isFocused ? css[':hover'] ? token('elevation.surface', css[':hover'].backgroundColor) : token('elevation.surface', N0) : state.isDisabled ? token('color.background.disabled', N10) : token('elevation.surface', N30)
+          borderColor: state.isFocused ? css[':hover'] ? token('color.border.focused', css[':hover'].borderColor) : token('color.border.focused', B100) : state.selectProps.subtle ? state.selectProps.hoveringClearIndicator ? token('color.icon.danger', R50) : token('color.icon', N30) : token('color.border.input', N40),
+          backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? token('color.background.danger', R50) : state.isFocused ? css[':hover'] ? token('color.background.input', css[':hover'].backgroundColor) : token('color.background.input', N0) : state.isDisabled ? token('color.background.disabled', N10) : token('color.background.input.hovered', N30)
         }),
         padding: 0,
         minHeight: isCompact ? 'none' : 44,
@@ -67,7 +67,7 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
         paddingTop: 0,
         padding: 0,
         ':hover': {
-          color: token('color.text.danger', R400)
+          color: token('color.icon.danger', R400)
         }
       });
     },

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.5",
+	"version": "9.4.0",
 	"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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "9.3.5",
+  "version": "9.4.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -65,8 +65,8 @@
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^1.1.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
     "@types/uuid": "^3.4.4",
     "enzyme": "^3.10.0",
     "enzyme-react-intl": "^2.0.6",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/user-picker".
+## API Report File for "@atlaskit/user-picker"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -11,7 +15,8 @@ import { ReactNode } from 'react';
 import { StylesConfig } from '@atlaskit/select';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 
-export declare type ActionTypes =
+// @public (undocumented)
+export type ActionTypes =
   | 'select-option'
   | 'deselect-option'
   | 'remove-value'
@@ -20,9 +25,11 @@ export declare type ActionTypes =
   | 'clear'
   | 'create-option';
 
-export declare type Appearance = 'normal' | 'compact';
+// @public (undocumented)
+export type Appearance = 'normal' | 'compact';
 
-export declare type AtlasKitSelectChange = (
+// @public (undocumented)
+export type AtlasKitSelectChange = (
   value: AtlaskitSelectValue,
   extraInfo: {
     removedValue?: Option_2;
@@ -31,77 +38,92 @@ export declare type AtlasKitSelectChange = (
   },
 ) => void;
 
-export declare type AtlaskitSelectValue =
-  | Option_2
-  | Array<Option_2>
-  | null
-  | undefined;
+// @public (undocumented)
+export type AtlaskitSelectValue = Option_2 | Array<Option_2> | null | undefined;
 
-declare type BoundariesElement =
-  | 'scrollParent'
-  | 'window'
-  | 'viewport'
-  | HTMLElement;
+// @public (undocumented)
+type BoundariesElement = 'scrollParent' | 'window' | 'viewport' | HTMLElement;
 
-export declare type DefaultValue =
-  | Value
-  | OptionIdentifier
-  | OptionIdentifier[];
+// @public (undocumented)
+export type DefaultValue = Value | OptionIdentifier | OptionIdentifier[];
 
-export declare interface Email extends OptionData {
-  type: 'email';
+// @public (undocumented)
+export interface Email extends OptionData {
+  // (undocumented)
   suggestion?: boolean;
+  // (undocumented)
+  type: 'email';
 }
 
-export declare const EmailType = 'email';
+// @public (undocumented)
+export const EmailType = 'email';
 
-export declare type EmailValidationResponse = 'INVALID' | 'POTENTIAL' | 'VALID';
+// @public (undocumented)
+export type EmailValidationResponse = 'INVALID' | 'POTENTIAL' | 'VALID';
 
-export declare type EmailValidator = (
-  inputText: string,
-) => EmailValidationResponse;
+// @public (undocumented)
+export type EmailValidator = (inputText: string) => EmailValidationResponse;
 
-export declare interface ExternalUser extends User {
+// @public (undocumented)
+export interface ExternalUser extends User {
+  // (undocumented)
   externalUserType?: 'crossSite' | 'thirdParty';
+  // (undocumented)
   requiresSourceHydration?: boolean;
+  // (undocumented)
   sources: UserSource[];
 }
 
-export declare interface Group extends OptionData {
+// @public (undocumented)
+export interface Group extends OptionData {
+  // (undocumented)
   highlight?: GroupHighlight;
+  // (undocumented)
   type: 'group';
 }
 
-export declare interface GroupHighlight {
+// @public (undocumented)
+export interface GroupHighlight {
+  // (undocumented)
   name: HighlightRange[];
 }
 
-export declare const GroupType = 'group';
+// @public (undocumented)
+export const GroupType = 'group';
 
-export declare interface HighlightRange {
-  start: number;
+// @public (undocumented)
+export interface HighlightRange {
+  // (undocumented)
   end: number;
+  // (undocumented)
+  start: number;
 }
 
-export declare type InputActionTypes =
+// @public (undocumented)
+export type InputActionTypes =
   | 'set-value'
   | 'input-change'
   | 'input-blur'
   | 'menu-close';
 
-export declare const isEmail: (option: OptionData) => option is Email;
+// @public (undocumented)
+export const isEmail: (option: OptionData) => option is Email;
 
-export declare const isExternalUser: (
-  option: OptionData,
-) => option is ExternalUser;
+// @public (undocumented)
+export const isExternalUser: (option: OptionData) => option is ExternalUser;
 
-export declare const isTeam: (option: OptionData) => option is Team;
+// @public (undocumented)
+export const isTeam: (option: OptionData) => option is Team;
 
-export declare const isUser: (option: OptionData) => option is User;
+// @public (undocumented)
+export const isUser: (option: OptionData) => option is User;
 
-export declare const isValidEmail: EmailValidator;
+// @public (undocumented)
+export const isValidEmail: EmailValidator;
 
-export declare interface LoadOptions {
+// @public (undocumented)
+export interface LoadOptions {
+  // (undocumented)
   (searchText?: string, sessionId?: string):
     | Promisable<OptionData | OptionData[]>
     | Iterable<
@@ -109,11 +131,14 @@ export declare interface LoadOptions {
       >;
 }
 
-declare interface LoadUserSource {
+// @public (undocumented)
+interface LoadUserSource {
+  // (undocumented)
   (accountId: string, signal?: AbortSignal): Promise<UserSourceResult[]>;
 }
 
-declare type LozengeColor =
+// @public (undocumented)
+type LozengeColor =
   | 'default'
   | 'success'
   | 'removed'
@@ -121,43 +146,59 @@ declare type LozengeColor =
   | 'new'
   | 'moved';
 
-export declare interface LozengeProps {
-  text: string;
-  tooltip?: string;
+// @public (undocumented)
+export interface LozengeProps {
+  // (undocumented)
   appearance?: LozengeColor;
+  // (undocumented)
   isBold?: boolean;
+  // (undocumented)
+  text: string;
+  // (undocumented)
+  tooltip?: string;
 }
 
-export declare type OnChange = (value: Value, action: ActionTypes) => void;
+// @public (undocumented)
+export type OnChange = (value: Value, action: ActionTypes) => void;
 
-export declare type OnInputChange = (
-  query?: string,
-  sessionId?: string,
-) => void;
+// @public (undocumented)
+export type OnInputChange = (query?: string, sessionId?: string) => void;
 
-export declare type OnOption = (value: Value, sessionId?: string) => void;
+// @public (undocumented)
+export type OnOption = (value: Value, sessionId?: string) => void;
 
-export declare type OnPicker = (sessionId?: string) => void;
+// @public (undocumented)
+export type OnPicker = (sessionId?: string) => void;
 
-declare type Option_2<Data = OptionData> = {
+// @public (undocumented)
+type Option_2<Data = OptionData> = {
   label: string;
   value: string;
   data: Data;
 };
 export { Option_2 as Option };
 
-export declare interface OptionData {
+// @public (undocumented)
+export interface OptionData {
+  // (undocumented)
   avatarUrl?: any;
+  // (undocumented)
+  fixed?: boolean;
+  // (undocumented)
   id: string;
+  // (undocumented)
+  lozenge?: string | LozengeProps | ReactNode;
+  // (undocumented)
   name: string;
+  // (undocumented)
   type?: 'user' | 'team' | 'email' | 'group';
-  fixed?: boolean;
-  lozenge?: string | LozengeProps;
 }
 
-export declare type OptionIdentifier = Pick<OptionData, 'id' | 'type'>;
+// @public (undocumented)
+export type OptionIdentifier = Pick<OptionData, 'id' | 'type'>;
 
-export declare const PopupUserPicker: React_2.ForwardRefExoticComponent<
+// @public (undocumented)
+export const PopupUserPicker: React_2.ForwardRefExoticComponent<
   Pick<
     Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>,
     | 'target'
@@ -237,86 +278,93 @@ export declare const PopupUserPicker: React_2.ForwardRefExoticComponent<
     React_2.RefAttributes<any>
 >;
 
-export declare type PopupUserPickerProps = UserPickerProps & {
-  /** Whether to use the popup version of the single picker */
+// @public (undocumented)
+export type PopupUserPickerProps = UserPickerProps & {
   target: Target;
-  /** Optional title assigned to popup picker */
   popupTitle?: string;
-  /**
-   * The boundary element that the popup will check for overflow.
-   * Defaults to `"viewport"` which are parent scroll containers,
-   * but can be set to any element.
-   */
   boundariesElement?: BoundariesElement;
-  /**
-   * Distance the popup should be offset from the reference in the format of [along, away] (units in px).
-   */
   offset?: [number, number];
-  /**
-   * Placement of where the popup should be displayed relative to the trigger element.
-   * Defaults to `"auto"`.
-   */
   placement?: Placement;
-  /**
-   * The root boundary that the popup will check for overflow.
-   * Defaults to `"viewport"` but can be set to `"document"`.
-   * See `@atlaskit/popper` for further details.
-   */
   rootBoundary?: RootBoundary;
-  /**
-   * Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
-   * fit in the viewport.
-   */
   shouldFlip?: boolean;
 };
 
-export declare type Promisable<T> = T | PromiseLike<T>;
+// @public (undocumented)
+export type Promisable<T> = T | PromiseLike<T>;
 
-declare type RootBoundary = 'viewport' | 'document';
+// @public (undocumented)
+type RootBoundary = 'viewport' | 'document';
 
-export declare type Target = (options: {
-  ref: any;
-  isOpen: boolean;
-}) => ReactNode;
+// @public (undocumented)
+export type Target = (options: { ref: any; isOpen: boolean }) => ReactNode;
 
-export declare interface Team extends OptionData {
+// @public (undocumented)
+export interface Team extends OptionData {
+  // (undocumented)
   avatarUrl?: string;
+  // (undocumented)
+  byline?: string;
+  // (undocumented)
   description?: string;
+  // (undocumented)
+  highlight?: TeamHighlight;
+  // (undocumented)
+  includesYou?: boolean;
+  // (undocumented)
   memberCount?: number;
+  // (undocumented)
   members?: TeamMember[];
-  includesYou?: boolean;
-  highlight?: TeamHighlight;
+  // (undocumented)
   type: 'team';
 }
 
-export declare interface TeamHighlight {
-  name: HighlightRange[];
+// @public (undocumented)
+export interface TeamHighlight {
+  // (undocumented)
   description?: HighlightRange[];
+  // (undocumented)
+  name: HighlightRange[];
 }
 
-export declare interface TeamMember {
-  name: string;
+// @public (undocumented)
+export interface TeamMember {
+  // (undocumented)
   id: string;
+  // (undocumented)
+  name: string;
 }
 
-export declare const TeamType = 'team';
+// @public (undocumented)
+export const TeamType = 'team';
 
-export declare interface User extends OptionData {
+// @public (undocumented)
+export interface User extends OptionData {
+  // (undocumented)
   avatarUrl?: string;
-  publicName?: string;
-  highlight?: UserHighlight;
+  // (undocumented)
   byline?: string;
-  type?: 'user';
+  // (undocumented)
   email?: string;
+  // (undocumented)
+  highlight?: UserHighlight;
+  // (undocumented)
   isExternal?: boolean;
+  // (undocumented)
+  publicName?: string;
+  // (undocumented)
+  type?: 'user';
 }
 
-export declare interface UserHighlight {
+// @public (undocumented)
+export interface UserHighlight {
+  // (undocumented)
   name: HighlightRange[];
+  // (undocumented)
   publicName: HighlightRange[];
 }
 
-declare const UserPicker: React_2.ForwardRefExoticComponent<
+// @public (undocumented)
+const UserPicker: React_2.ForwardRefExoticComponent<
   Pick<
     Omit<UserPickerProps, keyof WithAnalyticsEventsProps>,
     | 'autoFocus'
@@ -384,143 +432,62 @@ declare const UserPicker: React_2.ForwardRefExoticComponent<
 >;
 export default UserPicker;
 
-export declare type UserPickerProps = WithAnalyticsEventsProps & {
-  /**
-   * Used to configure additional information regarding where the
-   * user picker has been mounted.
-   *
-   * The purpose is to give more context as to where user picker events
-   * are being fired from, as the current data may not uniquely identify
-   * which field is the source.
-   *
-   * The value will be passed as a data attribute for analytics.
-   * Examples include "assignee", "watchers" and "share".
-   *
-   * A second usage for the fieldId is for server side rendering (SSR) where it must be a unique id per UserPicker
-   * instance contained in the serialized SSR content. E.g. a SPA page rendered through SSR that has multiple user pickers.
-   *
-   * fieldId can be set to null if the integrator is not listening
-   * for the analytic events or does not care about SSR.
-   */
+// @public (undocumented)
+export type UserPickerProps = WithAnalyticsEventsProps & {
   fieldId: string | null;
-  /** List of users or teams to be used as options by the user picker. */
   options?: OptionData[];
-  /** Width of the user picker field. It can be the amount of pixels as numbers or a string with the percentage. */
   width?: number | string;
-  /** Sets the minimum width for the menu. If not set, menu will always have the same width of the field. */
   menuMinWidth?: number;
-  /** Sets max height of the user picker. If not set, the height will grow based on number of picked users. */
   maxPickerHeight?: number;
-  /** Sets the background color to be the same color as a textfield (Atlaskit N10) */
   textFieldBackgroundColor?: boolean;
-  /**
-   * Function used to load options asynchronously.
-   * accepts two optional params:
-   * searchText?: optional text to filter results
-   * sessionId?: user picker session identifier, used to track success metric for users providers
-   */
   loadOptions?: LoadOptions;
-  /**
-   * Function used to load user source if they are an external user.
-   * accepts two params:
-   * accountId: account ID of the user to lookup sources
-   * signal: AbortController signal to abort the request if the tooltip is closed
-   */
   loadUserSource?: LoadUserSource;
-  /** Callback for value change events fired whenever a selection is inserted or removed. */
   onChange?: OnChange;
-  /** To enable multi user picker. */
   isMulti?: boolean;
-  /** Input text value. */
   search?: string;
-  /** Anchor for the user picker popup. */
   anchor?: React_2.ComponentType<any>;
-  /** Controls if user picker menu is open or not. If not provided, UserPicker will control menu state internally. */
   open?: boolean;
-  /** Show the loading indicator. */
   isLoading?: boolean;
-  /** Callback for search input text change events. */
   onInputChange?: OnInputChange;
-  /** Callback for when a selection is made. */
   onSelection?: OnOption;
-  /** Callback for when the field gains focus. */
   onFocus?: OnPicker;
-  /** Callback for when the field loses focus. */
   onBlur?: OnPicker;
-  /** Callback for when the value/s in the picker is cleared. */
   onClear?: OnPicker;
-  /** Callback that is triggered when popup picker is closed */
   onClose?: OnPicker;
-  /** Appearance of the user picker. */
   appearance?: Appearance;
-  /** Display the picker with a subtle style. */
   subtle?: boolean;
-  /** Display the picker with no border. */
   noBorder?: boolean;
-  /**
-   * You may pass through a `StylesConfig` to be merged with the picker default styles if a custom override is required.
-   * Consider using noBorder, subtle before customising further.
-   * See https://react-select.com/styles
-   */
   styles?: StylesConfig;
-  /** Default value for the field to be used on initial render.
-   * `defaultValue` differs from `value` in that it sets the initial value then leaves the component 'uncontrolled'
-   * whereas setting the `value` prop delegates responsibility for maintaining the value to the caller
-   * (i.e. listen to `onChange`) */
   defaultValue?: DefaultValue;
-  /** Placeholder text to be shown when there is no value in the field. */
   placeholder?: React_2.ReactNode;
-  /** Message to encourage the user to add more items to user picker. */
   addMoreMessage?: string;
-  /** Message to be shown when the menu is open but no options are provided.
-   * If message is null, no message will be displayed.
-   * If message is undefined, default message will be displayed.
-   */
   noOptionsMessage?:
     | ((value: { inputValue: string }) => string | null)
     | string
     | null;
-  /** Controls if the user picker has a value or not. If not provided, UserPicker will control the value internally. */
   value?: Value;
-  /** Disable all interactions with the picker, putting it in a read-only state. */
   isDisabled?: boolean;
-  /** Display a remove button on the single picker. True by default. */
   isClearable?: boolean;
-  /** Optional tooltip to display on hover over the clear indicator. */
   clearValueLabel?: string;
-  /** React-select prop for controlling menu position */
   menuPosition?: 'absolute' | 'fixed';
-  /** React-select prop for blocking menu scroll on container when menu scrolled to the very top/bottom of the menu */
   captureMenuScroll?: boolean;
-  /** Whether the menu should use a portal, and where it should attach. */
   menuPortalTarget?: HTMLElement;
-  /** Whether the user is allowed to enter emails as a value. */
   allowEmail?: boolean;
-  /** Setting this with allowEmail will cause the picker to constantly show an email option at the bottom for the supplied email domain/an email the user types in */
   suggestEmailsForDomain?: string;
-  /** Email option label */
   emailLabel?: string;
-  /** Whether to disable interaction with the input */
   disableInput?: boolean;
-  /** Override default email validation function. */
   isValidEmail?: EmailValidator;
-  /** Override the internal behaviour to automatically focus the control when the picker is open */
   autoFocus?: boolean;
-  /** The maximum number options to be displayed in the dropdown menu during any state of search. The value should be non-negative. */
   maxOptions?: number;
-  /** Allows clicking on a label with the same id to open user picker. */
   inputId?: string;
-  /** Whether to close menu on scroll */
   closeMenuOnScroll?: boolean | EventListener;
-  /** Whether to block scrolling actions */
   menuShouldBlockScroll?: boolean;
-  /** Accessibility: Identifies the element (or elements) that labels the current element.*/
   ariaLabelledBy?: string;
-  /** Accessibility: Used to set the priority with which screen reader should treat updates to live regions.*/
   ariaLive?: 'polite' | 'off' | 'assertive';
 };
 
-export declare type UserPickerState = {
+// @public (undocumented)
+export type UserPickerState = {
   options: OptionData[];
   value?: AtlaskitSelectValue;
   isDefaultSet: boolean;
@@ -532,7 +499,8 @@ export declare type UserPickerState = {
   resolving: boolean;
 };
 
-export declare type UserSource =
+// @public (undocumented)
+export type UserSource =
   | 'google'
   | 'slack'
   | 'microsoft'
@@ -541,14 +509,19 @@ export declare type UserSource =
   | 'confluence'
   | 'other-atlassian';
 
-declare interface UserSourceResult {
+// @public (undocumented)
+interface UserSourceResult {
+  // (undocumented)
   sourceId: string;
+  // (undocumented)
   sourceType: UserSource;
 }
 
-export declare const UserType = 'user';
+// @public (undocumented)
+export const UserType = 'user';
 
-export declare type Value = OptionData | OptionData[] | null | undefined;
+// @public (undocumented)
+export type Value = OptionData | OptionData[] | null | undefined;
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

package/types/package.json

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