@atlaskit/user-picker 10.0.3 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "10.0.3",
+	"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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "10.0.3",
+	"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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "10.0.3",
+	"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/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.3",
+  "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",

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)