@atlaskit/user-picker 10.0.2 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 10.1.0
+
+### Minor Changes
+
+- [`6e27d7c6682`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e27d7c6682) - [ux] UserPicker now shows an error message when there has been a Promise failure for the provided loadOptions prop. You can customize the error message by providing a loadOptionsErrorMessage prop.
+
+## 10.0.3
+
+### Patch Changes
+
+- [`62e83249cb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62e83249cb2) - [ux] PopupUserPicker now supports user-defined styles prop for adding styling to PopupUserPicker.
+
 ## 10.0.2
 
 ### Patch Changes

package/dist/cjs/components/BaseUserPicker.js

@@ -142,9 +142,15 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadOptionsError", function () {
       var count = _this.state.count;
       var newCount = count - 1;
+      var resolving = newCount !== 0;
+      var showError = false;
+      if (!resolving) {
+        showError = true;
+      }
       _this.setState({
         count: newCount,
-        resolving: newCount !== 0
+        resolving: resolving,
+        showError: showError
       });
       _this.fireEvent(_analytics.failedEvent);
     });
@@ -199,7 +205,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       var loadOptions = _this.props.loadOptions;
       if (loadOptions) {
         _this.setState({
-          resolving: true
+          resolving: true,
+          showError: false
         }, function () {
           return _this.debouncedLoadOptions(search);
         });
@@ -352,7 +359,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
       hoveringClearIndicator: false,
       menuIsOpen: !!_this.props.open,
       inputValue: props.search || '',
-      resolving: false
+      resolving: false,
+      showError: false
     };
     _this.optionsShownUfoExperienceInstance = _ufoExperiences.userPickerOptionsShownUfoExperience.getInstance((0, _uuid.v4)());
     return _this;
@@ -417,6 +425,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         clearValueLabel = _this$props4.clearValueLabel,
         menuMinWidth = _this$props4.menuMinWidth,
         menuPortalTarget = _this$props4.menuPortalTarget,
+        loadOptionsErrorMessage = _this$props4.loadOptionsErrorMessage,
         addMoreMessage = _this$props4.addMoreMessage,
         noOptionsMessage = _this$props4.noOptionsMessage,
         disableInput = _this$props4.disableInput,
@@ -437,7 +446,8 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         menuIsOpen = _this$state3.menuIsOpen,
         value = _this$state3.value,
         inputValue = _this$state3.inputValue,
-        resolving = _this$state3.resolving;
+        resolving = _this$state3.resolving,
+        showError = _this$state3.showError;
       var appearance = this.getAppearance();
       return /*#__PURE__*/_react.default.createElement(SelectComponent, (0, _extends2.default)({
         value: value,
@@ -465,7 +475,7 @@ var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         subtle: subtle,
         blurInputOnSelect: !isMulti,
         closeMenuOnSelect: !isMulti,
-        noOptionsMessage: noOptionsMessage,
+        noOptionsMessage: showError ? loadOptionsErrorMessage : noOptionsMessage,
         openMenuOnFocus: true,
         isDisabled: isDisabled,
         isFocused: menuIsOpen,
@@ -523,7 +533,10 @@ exports.BaseUserPickerWithoutAnalytics = BaseUserPickerWithoutAnalytics;
   subtle: false,
   noBorder: false,
   textFieldBackgroundColor: false,
-  isClearable: true
+  isClearable: true,
+  loadOptionsErrorMessage: function loadOptionsErrorMessage() {
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.errorMessage);
+  }
 });
 var BaseUserPicker = (0, _analyticsNext.withAnalyticsEvents)()(BaseUserPickerWithoutAnalytics);
 exports.BaseUserPicker = BaseUserPicker;

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

@@ -43,7 +43,8 @@ var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
       return (0, _react.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-custom-secondary-text"
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {

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

@@ -48,7 +48,8 @@ var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function (label) {
       return (0, _react2.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-email-secondary-text"
       }, label);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderOption", function (label) {

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

@@ -65,7 +65,8 @@ var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return (0, _react2.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-group-secondary-text"
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.groupByline));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLozengeProps", function () {

package/dist/cjs/components/PopupUserPicker.js

@@ -61,14 +61,14 @@ var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         offset = _this$props.offset,
         placement = _this$props.placement,
         rootBoundary = _this$props.rootBoundary,
-        shouldFlip = _this$props.shouldFlip;
-      var flipped = this.state.flipped;
+        shouldFlip = _this$props.shouldFlip,
+        styles = _this$props.styles;
       var width = this.props.width;
-      var styles = (0, _styles.getPopupStyles)(width, flipped, isMulti);
+      var selectStyles = (0, _styles.getPopupStyles)(width, isMulti, styles);
       return /*#__PURE__*/_react.default.createElement(_BaseUserPicker.BaseUserPickerWithoutAnalytics, (0, _extends2.default)({}, this.props, {
         SelectComponent: _select.PopupSelect,
         width: width,
-        styles: styles,
+        styles: selectStyles,
         components: (0, _components.getPopupComponents)(!!popupTitle),
         pickerProps: (0, _popup.getPopupProps)(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
       }));

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

@@ -80,7 +80,8 @@ var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getBylineComponent", function (isSelected, message) {
       return (0, _react.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        css: (0, _AvatarItemOption.textWrapper)(isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+        "data-testid": "user-picker-team-secondary-text"
       }, message);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {

package/dist/cjs/components/i18n.js

@@ -26,6 +26,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Clear',
     description: 'Tooltip for clear button in the single user select field.'
   },
+  errorMessage: {
+    id: 'fabric.elements.user-picker.error.message',
+    defaultMessage: 'Something went wrong',
+    description: 'Error message to display when options fail to load.'
+  },
   memberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count',
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}',

package/dist/cjs/components/styles.js

@@ -169,7 +169,7 @@ var getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, ov
   return overrideStyles ? (0, _select.mergeStyles)(styles, overrideStyles) : styles;
 });
 exports.getStyles = getStyles;
-var getPopupStyles = (0, _memoizeOne.default)(function (width, flip, isMulti) {
-  return _objectSpread({}, getStyles(width, isMulti));
+var getPopupStyles = (0, _memoizeOne.default)(function (width, isMulti, overrideStyles) {
+  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
 });
 exports.getPopupStyles = getPopupStyles;

package/dist/cjs/version.json

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

package/dist/es2019/components/BaseUserPicker.js

@@ -135,9 +135,15 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         count
       } = this.state;
       const newCount = count - 1;
+      const resolving = newCount !== 0;
+      let showError = false;
+      if (!resolving) {
+        showError = true;
+      }
       this.setState({
         count: newCount,
-        resolving: newCount !== 0
+        resolving,
+        showError
       });
       this.fireEvent(failedEvent);
     });
@@ -188,7 +194,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       } = this.props;
       if (loadOptions) {
         this.setState({
-          resolving: true
+          resolving: true,
+          showError: false
         }, () => this.debouncedLoadOptions(search));
       }
     });
@@ -337,7 +344,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       hoveringClearIndicator: false,
       menuIsOpen: !!this.props.open,
       inputValue: props.search || '',
-      resolving: false
+      resolving: false,
+      showError: false
     };
     this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
   }
@@ -397,6 +405,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       clearValueLabel,
       menuMinWidth,
       menuPortalTarget,
+      loadOptionsErrorMessage,
       addMoreMessage,
       noOptionsMessage,
       disableInput,
@@ -418,7 +427,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       menuIsOpen,
       value,
       inputValue,
-      resolving
+      resolving,
+      showError
     } = this.state;
     const appearance = this.getAppearance();
     return /*#__PURE__*/React.createElement(SelectComponent, _extends({
@@ -447,7 +457,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       subtle: subtle,
       blurInputOnSelect: !isMulti,
       closeMenuOnSelect: !isMulti,
-      noOptionsMessage: noOptionsMessage,
+      noOptionsMessage: showError ? loadOptionsErrorMessage : noOptionsMessage,
       openMenuOnFocus: true,
       isDisabled: isDisabled,
       isFocused: menuIsOpen,
@@ -478,6 +488,7 @@ _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {
   subtle: false,
   noBorder: false,
   textFieldBackgroundColor: false,
-  isClearable: true
+  isClearable: true,
+  loadOptionsErrorMessage: () => /*#__PURE__*/React.createElement(FormattedMessage, messages.errorMessage)
 });
 export const BaseUserPicker = withAnalyticsEvents()(BaseUserPickerWithoutAnalytics);

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

@@ -24,7 +24,8 @@ export class CustomOption extends React.PureComponent {
       }, name))];
     });
     _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
-      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+      "data-testid": "user-picker-custom-secondary-text"
     }, message));
     _defineProperty(this, "renderByline", () => {
       var _this$props$data;

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

@@ -27,7 +27,8 @@ export class EmailOption extends React.PureComponent {
     });
     _defineProperty(this, "renderSecondaryText", label => {
       return jsx("span", {
-        css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+        css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+        "data-testid": "user-picker-email-secondary-text"
       }, label);
     });
     _defineProperty(this, "renderOption", label => jsx(AvatarItemOption, {

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

@@ -45,7 +45,8 @@ export class GroupOption extends React.PureComponent {
         isSelected
       } = this.props;
       return jsx("span", {
-        css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+        css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+        "data-testid": "user-picker-group-secondary-text"
       }, jsx(FormattedMessage, messages.groupByline));
     });
     _defineProperty(this, "getLozengeProps", () => typeof this.props.group.lozenge === 'string' ? {

package/dist/es2019/components/PopupUserPicker.js

@@ -42,17 +42,15 @@ export class PopupUserPickerWithoutAnalytics extends React.Component {
       offset,
       placement,
       rootBoundary,
-      shouldFlip
+      shouldFlip,
+      styles
     } = this.props;
-    const {
-      flipped
-    } = this.state;
     const width = this.props.width;
-    const styles = getPopupStyles(width, flipped, isMulti);
+    const selectStyles = getPopupStyles(width, isMulti, styles);
     return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
       SelectComponent: PopupSelect,
       width: width,
-      styles: styles,
+      styles: selectStyles,
       components: getPopupComponents(!!popupTitle),
       pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
     }));

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

@@ -63,7 +63,8 @@ export class TeamOption extends React.PureComponent {
       }
     });
     _defineProperty(this, "getBylineComponent", (isSelected, message) => jsx("span", {
-      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
+      css: textWrapper(isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`),
+      "data-testid": "user-picker-team-secondary-text"
     }, message));
     _defineProperty(this, "renderAvatar", () => {
       const {

package/dist/es2019/components/i18n.js

@@ -20,6 +20,11 @@ export const messages = defineMessages({
     defaultMessage: 'Clear',
     description: 'Tooltip for clear button in the single user select field.'
   },
+  errorMessage: {
+    id: 'fabric.elements.user-picker.error.message',
+    defaultMessage: 'Something went wrong',
+    description: 'Error message to display when options fail to load.'
+  },
   memberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count',
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}',

package/dist/es2019/components/styles.js

@@ -149,6 +149,6 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
-export const getPopupStyles = memoizeOne((width, flip, isMulti) => ({
-  ...getStyles(width, isMulti)
+export const getPopupStyles = memoizeOne((width, isMulti, overrideStyles) => ({
+  ...getStyles(width, isMulti, false, overrideStyles)
 }));

package/dist/es2019/version.json

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

package/dist/esm/components/BaseUserPicker.js

@@ -135,9 +135,15 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     _defineProperty(_assertThisInitialized(_this), "handleLoadOptionsError", function () {
       var count = _this.state.count;
       var newCount = count - 1;
+      var resolving = newCount !== 0;
+      var showError = false;
+      if (!resolving) {
+        showError = true;
+      }
       _this.setState({
         count: newCount,
-        resolving: newCount !== 0
+        resolving: resolving,
+        showError: showError
       });
       _this.fireEvent(failedEvent);
     });
@@ -192,7 +198,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       var loadOptions = _this.props.loadOptions;
       if (loadOptions) {
         _this.setState({
-          resolving: true
+          resolving: true,
+          showError: false
         }, function () {
           return _this.debouncedLoadOptions(search);
         });
@@ -345,7 +352,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       hoveringClearIndicator: false,
       menuIsOpen: !!_this.props.open,
       inputValue: props.search || '',
-      resolving: false
+      resolving: false,
+      showError: false
     };
     _this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
     return _this;
@@ -410,6 +418,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         clearValueLabel = _this$props4.clearValueLabel,
         menuMinWidth = _this$props4.menuMinWidth,
         menuPortalTarget = _this$props4.menuPortalTarget,
+        loadOptionsErrorMessage = _this$props4.loadOptionsErrorMessage,
         addMoreMessage = _this$props4.addMoreMessage,
         noOptionsMessage = _this$props4.noOptionsMessage,
         disableInput = _this$props4.disableInput,
@@ -430,7 +439,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         menuIsOpen = _this$state3.menuIsOpen,
         value = _this$state3.value,
         inputValue = _this$state3.inputValue,
-        resolving = _this$state3.resolving;
+        resolving = _this$state3.resolving,
+        showError = _this$state3.showError;
       var appearance = this.getAppearance();
       return /*#__PURE__*/React.createElement(SelectComponent, _extends({
         value: value,
@@ -458,7 +468,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         subtle: subtle,
         blurInputOnSelect: !isMulti,
         closeMenuOnSelect: !isMulti,
-        noOptionsMessage: noOptionsMessage,
+        noOptionsMessage: showError ? loadOptionsErrorMessage : noOptionsMessage,
         openMenuOnFocus: true,
         isDisabled: isDisabled,
         isFocused: menuIsOpen,
@@ -515,6 +525,9 @@ _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {
   subtle: false,
   noBorder: false,
   textFieldBackgroundColor: false,
-  isClearable: true
+  isClearable: true,
+  loadOptionsErrorMessage: function loadOptionsErrorMessage() {
+    return /*#__PURE__*/React.createElement(FormattedMessage, messages.errorMessage);
+  }
 });
 export var BaseUserPicker = withAnalyticsEvents()(BaseUserPickerWithoutAnalytics);

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

@@ -37,7 +37,8 @@ export var CustomOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
       return jsx("span", {
-        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-custom-secondary-text"
       }, message);
     });
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {

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

@@ -42,7 +42,8 @@ export var EmailOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function (label) {
       return jsx("span", {
-        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-email-secondary-text"
       }, label);
     });
     _defineProperty(_assertThisInitialized(_this), "renderOption", function (label) {

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

@@ -58,7 +58,8 @@ export var GroupOption = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderByline", function () {
       var isSelected = _this.props.isSelected;
       return jsx("span", {
-        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-group-secondary-text"
       }, jsx(FormattedMessage, messages.groupByline));
     });
     _defineProperty(_assertThisInitialized(_this), "getLozengeProps", function () {

package/dist/esm/components/PopupUserPicker.js

@@ -54,14 +54,14 @@ export var PopupUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compo
         offset = _this$props.offset,
         placement = _this$props.placement,
         rootBoundary = _this$props.rootBoundary,
-        shouldFlip = _this$props.shouldFlip;
-      var flipped = this.state.flipped;
+        shouldFlip = _this$props.shouldFlip,
+        styles = _this$props.styles;
       var width = this.props.width;
-      var styles = getPopupStyles(width, flipped, isMulti);
+      var selectStyles = getPopupStyles(width, isMulti, styles);
       return /*#__PURE__*/React.createElement(BaseUserPickerWithoutAnalytics, _extends({}, this.props, {
         SelectComponent: PopupSelect,
         width: width,
-        styles: styles,
+        styles: selectStyles,
         components: getPopupComponents(!!popupTitle),
         pickerProps: getPopupProps(width, target, this.handleFlipStyle, boundariesElement, offset, placement, rootBoundary, shouldFlip, popupTitle)
       }));

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

@@ -74,7 +74,8 @@ export var TeamOption = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "getBylineComponent", function (isSelected, message) {
       return jsx("span", {
-        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
+        css: textWrapper(isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")")),
+        "data-testid": "user-picker-team-secondary-text"
       }, message);
     });
     _defineProperty(_assertThisInitialized(_this), "renderAvatar", function () {

package/dist/esm/components/i18n.js

@@ -20,6 +20,11 @@ export var messages = defineMessages({
     defaultMessage: 'Clear',
     description: 'Tooltip for clear button in the single user select field.'
   },
+  errorMessage: {
+    id: 'fabric.elements.user-picker.error.message',
+    defaultMessage: 'Something went wrong',
+    description: 'Error message to display when options fail to load.'
+  },
   memberCountWithoutYou: {
     id: 'fabric.elements.user-picker.team.member.count',
     defaultMessage: 'Team • {count} {count, plural, one {member} other {members}}',

package/dist/esm/components/styles.js

@@ -158,6 +158,6 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
   };
   return overrideStyles ? mergeStyles(styles, overrideStyles) : styles;
 });
-export var getPopupStyles = memoizeOne(function (width, flip, isMulti) {
-  return _objectSpread({}, getStyles(width, isMulti));
+export var getPopupStyles = memoizeOne(function (width, isMulti, overrideStyles) {
+  return _objectSpread({}, getStyles(width, isMulti, false, overrideStyles));
 });

package/dist/esm/version.json

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

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

@@ -14,6 +14,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
         noBorder: boolean;
         textFieldBackgroundColor: boolean;
         isClearable: boolean;
+        loadOptionsErrorMessage: () => JSX.Element;
     };
     static getDerivedStateFromProps(nextProps: Partial<UserPickerProps>, prevState: UserPickerState): Partial<UserPickerState>;
     private selectRef;
@@ -52,10 +53,11 @@ 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>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "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<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "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" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;
     textFieldBackgroundColor: boolean;
     isClearable: boolean;
+    loadOptionsErrorMessage: () => JSX.Element;
 }, never>> & React.RefAttributes<any>>;

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>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "target" | "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<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "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>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "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<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "noOptionsMessage" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "styles" | "value" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "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/i18n.d.ts

@@ -19,6 +19,11 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    errorMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     memberCountWithoutYou: {
         id: string;
         defaultMessage: string;

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

@@ -39,4 +39,4 @@ export declare const getStyles: import("memoize-one").MemoizedFn<(width: string
     singleValue?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("@atlaskit/select").SingleValueProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
     valueContainer?: import("react-select/dist/declarations/src/styles").StylesConfigFunction<import("react-select").ValueContainerProps<import("@atlaskit/select").OptionType, false, import("@atlaskit/select").GroupType<import("@atlaskit/select").OptionType>>> | undefined;
 }>;
-export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, flip?: boolean | undefined, isMulti?: boolean | undefined) => StylesConfig<import("@atlaskit/select").OptionType, false>>;
+export declare const getPopupStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean | undefined, overrideStyles?: StylesConfig<import("@atlaskit/select").OptionType, false> | undefined) => StylesConfig<import("@atlaskit/select").OptionType, false>>;

package/dist/types/types.d.ts

@@ -39,6 +39,13 @@ export declare type UserPickerProps = WithAnalyticsEventsProps & {
      * sessionId?: user picker session identifier, used to track success metric for users providers
      */
     loadOptions?: LoadOptions;
+    /**
+     * Function to generate the error message when there's a failure executing the loadOptions prop.
+     * If not provided, will default to a default error message.
+     */
+    loadOptionsErrorMessage?: (value: {
+        inputValue: string;
+    }) => string;
     /**
      * Function used to load user source if they are an external user.
      * accepts two params:
@@ -181,6 +188,7 @@ export declare type UserPickerState = {
     menuIsOpen: boolean;
     inputValue: string;
     resolving: boolean;
+    showError: boolean;
 };
 export interface HighlightRange {
     start: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.0.2",
+  "version": "10.1.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
     "@atlaskit/select": "^16.1.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.1.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -78,7 +78,9 @@
   },
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "design-tokens": [
+        "color"
+      ]
     }
   },
   "keywords": [

package/report.api.md

@@ -255,6 +255,7 @@ export const PopupUserPicker: React_2.ForwardRefExoticComponent<
     | 'isLoading'
     | 'isValidEmail'
     | 'loadOptions'
+    | 'loadOptionsErrorMessage'
     | 'loadUserSource'
     | 'maxOptions'
     | 'maxPickerHeight'
@@ -421,6 +422,7 @@ const UserPicker: React_2.ForwardRefExoticComponent<
     | 'isLoading'
     | 'isValidEmail'
     | 'loadOptions'
+    | 'loadOptionsErrorMessage'
     | 'loadUserSource'
     | 'maxOptions'
     | 'maxPickerHeight'
@@ -475,6 +477,7 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
   maxPickerHeight?: number;
   textFieldBackgroundColor?: boolean;
   loadOptions?: LoadOptions;
+  loadOptionsErrorMessage?: (value: { inputValue: string }) => string;
   loadUserSource?: LoadUserSource;
   onChange?: OnChange;
   isMulti?: boolean;
@@ -528,6 +531,7 @@ export type UserPickerState = {
   menuIsOpen: boolean;
   inputValue: string;
   resolving: boolean;
+  showError: boolean;
 };
 
 // @public (undocumented)

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

@@ -197,7 +197,7 @@ export interface OptionData {
 export type OptionIdentifier = Pick<OptionData, 'id' | 'isDisabled' | 'type'>;
 
 // @public (undocumented)
-export const PopupUserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onSelection" | "open" | "options" | "placeholder" | "popupTitle" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "target" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "boundariesElement" | "isMulti" | "offset" | "placement" | "rootBoundary" | "shouldFlip" | "width">> & Partial<Pick<{
+export const PopupUserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onSelection" | "open" | "options" | "placeholder" | "popupTitle" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "target" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<PopupUserPickerProps, keyof WithAnalyticsEventsProps>, "boundariesElement" | "isMulti" | "offset" | "placement" | "rootBoundary" | "shouldFlip" | "width">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;
@@ -296,7 +296,7 @@ export interface UserHighlight {
 }
 
 // @public (undocumented)
-const UserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onSelection" | "open" | "options" | "placeholder" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+const UserPicker: React_2.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "addMoreMessage" | "allowEmail" | "anchor" | "appearance" | "ariaLabelledBy" | "ariaLive" | "autoFocus" | "captureMenuScroll" | "clearValueLabel" | "closeMenuOnScroll" | "defaultValue" | "disableInput" | "emailLabel" | "fieldId" | "inputId" | "isClearable" | "isDisabled" | "isLoading" | "isValidEmail" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "menuPortalTarget" | "menuPosition" | "menuShouldBlockScroll" | "noBorder" | "noOptionsMessage" | "onBlur" | "onChange" | "onClear" | "onClose" | "onFocus" | "onInputChange" | "onSelection" | "open" | "options" | "placeholder" | "search" | "styles" | "subtle" | "suggestEmailsForDomain" | "textFieldBackgroundColor" | "value"> & Partial<Pick<Omit<UserPickerProps, keyof WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React_2.RefAttributes<any>>;
@@ -311,6 +311,9 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     maxPickerHeight?: number;
     textFieldBackgroundColor?: boolean;
     loadOptions?: LoadOptions;
+    loadOptionsErrorMessage?: (value: {
+        inputValue: string;
+    }) => string;
     loadUserSource?: LoadUserSource;
     onChange?: OnChange;
     isMulti?: boolean;
@@ -366,6 +369,7 @@ export type UserPickerState = {
     menuIsOpen: boolean;
     inputValue: string;
     resolving: boolean;
+    showError: boolean;
 };
 
 // @public (undocumented)