@atlaskit/user-picker 11.6.1 → 11.6.3

package/dist/types/types.d.ts

@@ -7,6 +7,41 @@ import { type EmailValidator } from './components/emailValidation';
 import { type StylesConfig, type SelectComponentsConfig } from '@atlaskit/select';
 import { type BaseUserPickerWithoutAnalytics } from './components/BaseUserPicker';
 export type UserPickerProps = WithAnalyticsEventsProps & {
+    /** Message to encourage the user to add more items to user picker. */
+    addMoreMessage?: string;
+    /** Whether the user is allowed to enter emails as a value. */
+    allowEmail?: boolean;
+    /** Anchor for the user picker popup. */
+    anchor?: React.ComponentType<any>;
+    /** Appearance of the user picker. */
+    appearance?: Appearance;
+    /** Accessibility: Identifies the element (or elements) that describe the current element.*/
+    ariaDescribedBy?: string;
+    /** Accessibility: Uses to set aria-label of the input*/
+    ariaLabel?: string;
+    /** 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';
+    /** Override the internal behaviour to automatically focus the control when the picker is open */
+    autoFocus?: boolean;
+    /** React-select prop for blocking menu scroll on container when menu scrolled to the very top/bottom of the menu */
+    captureMenuScroll?: boolean;
+    /** Optional tooltip to display on hover over the clear indicator. */
+    clearValueLabel?: string;
+    /** Whether to close menu on scroll */
+    closeMenuOnScroll?: boolean | EventListener;
+    /** Override the default components used in the user picker. */
+    components?: SelectComponentsConfig<OptionData, boolean>;
+    /** 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;
+    /** Whether to disable interaction with the input */
+    disableInput?: boolean;
+    /** Email option label */
+    emailLabel?: string;
     /**
      * Used to configure additional information regarding where the
      * user picker has been mounted.
@@ -25,18 +60,30 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
      * for the analytic events or does not care about SSR.
      */
     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;
+    /** Footer to be displayed in MenuList */
+    footer?: React.ReactNode;
+    /** Ref to the underlying select */
+    forwardedRef?: React.ForwardedRef<UserPickerRef>;
+    /** group the options by type */
+    groupByTypeOrder?: NonNullable<OptionData['type']>[];
+    /** Header to be displayed in MenuList */
+    header?: React.ReactNode;
     /** Sets the height of the user picker. If not set, the height settings will be based on the "compact" or "normal" appearance. */
     height?: 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;
+    /** Allows clicking on a label with the same id to open user picker. */
+    inputId?: string;
+    /** Display a remove button on the single picker. True by default. */
+    isClearable?: boolean;
+    /** Disable all interactions with the picker, putting it in a read-only state. */
+    isDisabled?: boolean;
+    /** Display the  picker with a style to show the value is invalid */
+    isInvalid?: boolean;
+    /** Show the loading indicator. */
+    isLoading?: boolean;
+    /** To enable multi user picker. */
+    isMulti?: boolean;
+    /** Override default email validation function. */
+    isValidEmail?: EmailValidator;
     /**
      * Function used to load options asynchronously.
      * accepts two optional params:
@@ -58,144 +105,93 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
      * 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.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;
+    /** The maximum number options to be displayed in the dropdown menu during any state of search. The value should be non-negative. */
+    maxOptions?: 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 minimum width for the menu. If not set, menu will always have the same width of the field. */
+    menuMinWidth?: number;
+    /** Whether the menu should use a portal, and where it should attach. */
+    menuPortalTarget?: HTMLElement;
+    /** React-select prop for controlling menu position */
+    menuPosition?: 'absolute' | 'fixed';
+    /** Whether to block scrolling actions */
+    menuShouldBlockScroll?: boolean;
+    /** Name to use for input element. */
+    name?: string;
+    /** Display the picker with no border. */
+    noBorder?: boolean;
+    /** 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 | React.ReactNode) | null | React.ReactNode;
     /** Callback for when the field loses focus. */
     onBlur?: OnPicker;
+    /** Callback for value change events fired whenever a selection is inserted or removed. */
+    onChange?: OnChange;
     /** Callback for when the value/s in the picker is cleared. */
     onClear?: OnPicker;
-    /** Callback that is triggered when popup picker is opened */
-    onOpen?: OnPicker;
     /** Callback that is triggered when popup picker is closed */
     onClose?: OnPicker;
+    /** Callback for when the field gains focus. */
+    onFocus?: OnPicker;
+    /** Callback for search input text change events. */
+    onInputChange?: OnInputChange;
     /** Callback that is trigger on key down in text input */
     onKeyDown?: (event: React.KeyboardEvent) => void;
-    /** Appearance of the user picker. */
-    appearance?: Appearance;
-    /** Display the picker with a subtle style. */
-    subtle?: boolean;
-    /** Display the picker with no border. */
-    noBorder?: boolean;
+    /** Callback that is triggered when popup picker is opened */
+    onOpen?: OnPicker;
+    /** Callback for when a selection is made. */
+    onSelection?: OnOption;
+    /** Controls if user picker menu is open or not. If not provided, UserPicker will control menu state internally. */
+    open?: boolean;
+    /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
+    openMenuOnClick?: boolean;
+    /** List of users or teams to be used as options by the user picker. */
+    options?: OptionData[];
+    /** Placeholder text to be shown when there is no value in the field. */
+    placeholder?: React.ReactNode;
+    /** Placeholder avatar style - defaults to person */
+    placeholderAvatar?: 'person' | 'team';
+    /** Accessibility: A field to dictate if this is a mandatory field in the form. */
+    required?: boolean;
+    /** Input text value. */
+    search?: string;
+    /** Override default behavior and show the clear indicator. */
+    showClearIndicator?: boolean;
+    /** Positioning strategy for the popper element */
+    strategy?: 'fixed' | 'absolute';
     /**
      * 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;
-    /** Override the default components used in the user picker. */
-    components?: SelectComponentsConfig<OptionData, boolean>;
-    /** 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.ReactNode;
-    /** Placeholder avatar style - defaults to person */
-    placeholderAvatar?: 'person' | 'team';
-    /** 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 | React.ReactNode) | null | React.ReactNode;
-    /** Footer to be displayed in MenuList */
-    footer?: React.ReactNode;
-    /** 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 the  picker with a style to show the value is invalid */
-    isInvalid?: 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;
+    /** Display the picker with a subtle style. */
+    subtle?: 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: Uses to set aria-label of the input*/
-    ariaLabel?: string;
-    /** Accessibility: Identifies the element (or elements) that labels the current element.*/
-    ariaLabelledBy?: string;
-    /** Accessibility: Identifies the element (or elements) that describe the current element.*/
-    ariaDescribedBy?: string;
-    /** Accessibility: Used to set the priority with which screen reader should treat updates to live regions.*/
-    ariaLive?: 'polite' | 'off' | 'assertive';
-    /** Name to use for input element. */
-    name?: string;
-    /** Header to be displayed in MenuList */
-    header?: React.ReactNode;
-    /** Accessibility: A field to dictate if this is a mandatory field in the form. */
-    required?: boolean;
+    /** Sets the background color to be the same color as a textfield (Atlaskit N10) */
+    textFieldBackgroundColor?: boolean;
     /**
      * Enables workaround for when <Select /> is nested inside <Draggable /> from react-beautiful-dnd
      * This relationship prevents the dropdown menu from opening because of bugs in the default focus state and clicking in a particular area of <Select />
      * Context: https://hello.atlassian.net/wiki/spaces/~989411314/pages/2861097485/Investigation+Notes+for+atlaskit+select+react-beautiful-dnd#Temporary-Solution
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
-    /** Override the internal behaviour of default menu open on focus and applicable for single value select  */
-    openMenuOnClick?: boolean;
-    /** Positioning strategy for the popper element */
-    strategy?: 'fixed' | 'absolute';
-    /** Override default behavior and show the clear indicator. */
-    showClearIndicator?: boolean;
-    /** Ref to the underlying select */
-    forwardedRef?: React.ForwardedRef<UserPickerRef>;
-    /** group the options by type */
-    groupByTypeOrder?: NonNullable<OptionData['type']>[];
+    /** Controls if the user picker has a value or not. If not provided, UserPicker will control the value internally. */
+    value?: Value;
+    /** Width of the user picker field. It can be the amount of pixels as numbers or a string with the percentage. */
+    width?: number | string;
 };
 export type UserPickerRef = {
-    focus: () => void;
     blur: () => void;
+    focus: () => void;
 };
 export type PopupUserPickerProps = UserPickerProps & {
-    /** Whether to use the popup version of the single picker */
-    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,
@@ -211,6 +207,8 @@ export type PopupUserPickerProps = UserPickerProps & {
      * Defaults to `"auto"`.
      */
     placement?: Placement;
+    /** Optional title assigned to popup picker */
+    popupTitle?: string;
     /**
      * The root boundary that the popup will check for overflow.
      * Defaults to `"viewport"` but can be set to `"document"`.
@@ -222,34 +220,36 @@ export type PopupUserPickerProps = UserPickerProps & {
      * fit in the viewport.
      */
     shouldFlip?: boolean;
+    /** Whether to use the popup version of the single picker */
+    target: Target;
 };
 export type AriaAttributesType = AriaAttributes['aria-labelledby'] | AriaAttributes['aria-describedby'];
 export type BoundariesElement = 'scrollParent' | 'window' | 'viewport' | HTMLElement;
 export type RootBoundary = 'viewport' | 'document';
 export type UserPickerState = {
-    options: OptionData[];
-    value?: AtlaskitSelectValue;
-    isDefaultSet: boolean;
-    inflightRequest: number;
     count: number;
     hoveringClearIndicator: boolean;
-    menuIsOpen: boolean;
+    inflightRequest: number;
+    initialFocusHandled: boolean;
     inputValue: string;
+    isDefaultSet: boolean;
+    menuIsOpen: boolean;
+    options: OptionData[];
     resolving: boolean;
     showError: boolean;
-    initialFocusHandled: boolean;
+    value?: AtlaskitSelectValue;
 };
 export interface HighlightRange {
-    start: number;
     end: number;
+    start: number;
 }
 export interface UserHighlight {
     name: HighlightRange[];
     publicName: HighlightRange[];
 }
 export interface TeamHighlight {
-    name: HighlightRange[];
     description?: HighlightRange[];
+    name: HighlightRange[];
 }
 export interface GroupHighlight {
     name: HighlightRange[];
@@ -264,9 +264,9 @@ export interface OptionData {
     isDisabled?: boolean;
     lozenge?: string | LozengeProps | ReactNode;
     name: string;
-    type?: 'user' | 'team' | 'email' | 'group' | 'custom' | 'external_user';
-    tooltip?: string;
     title?: string;
+    tooltip?: string;
+    type?: 'user' | 'team' | 'email' | 'group' | 'custom' | 'external_user';
     verified?: boolean;
 }
 export declare const UserType = "user";
@@ -274,54 +274,54 @@ export declare const ExternalUserType = "external_user";
 export type UserSource = 'google' | 'slack' | 'microsoft' | 'jira' | 'confluence' | 'other-atlassian';
 export interface ExternalUser extends User {
     externalUserType?: 'crossSite' | 'thirdParty';
+    hasProductAccess?: boolean;
     requiresSourceHydration?: boolean;
     sources: UserSource[];
-    hasProductAccess?: boolean;
 }
 export interface User extends OptionData {
     avatarUrl?: string;
-    publicName?: string;
-    highlight?: UserHighlight;
     byline?: string;
-    type?: 'user' | 'external_user';
     email?: string;
+    highlight?: UserHighlight;
     isExternal?: boolean;
+    publicName?: string;
     title?: string;
+    type?: 'user' | 'external_user';
 }
 export type LozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'new' | 'moved';
 export interface LozengeProps {
-    text: string;
-    tooltip?: string;
     appearance?: LozengeColor;
     isBold?: boolean;
+    text: string;
+    tooltip?: string;
 }
 export declare const TeamType = "team";
 export interface TeamMember {
-    name: string;
     id: string;
+    name: string;
 }
 export interface Team extends OptionData {
     avatarUrl?: string;
+    byline?: string;
     description?: string;
+    highlight?: TeamHighlight;
+    includesYou?: boolean;
     memberCount?: number;
     members?: TeamMember[];
-    includesYou?: boolean;
-    highlight?: TeamHighlight;
     type: 'team';
-    byline?: string;
     verified?: boolean;
 }
 export declare const GroupType = "group";
 export interface Group extends OptionData {
+    byline?: string;
     highlight?: GroupHighlight;
     type: 'group';
-    byline?: string;
 }
 export interface Custom extends OptionData {
+    analyticsType?: string;
     avatarUrl?: string;
     byline?: string;
     highlight?: CustomHighlight;
-    analyticsType?: string;
     type: 'custom';
 }
 export type Value = OptionData | OptionData[] | null | undefined;
@@ -330,9 +330,9 @@ export type OptionIdentifier = Pick<OptionData, 'id' | 'type' | 'isDisabled'>;
 export declare const EmailType = "email";
 export declare const CustomType = "custom";
 export interface Email extends OptionData {
-    type: 'email';
-    suggestion?: boolean;
     isPendingAction?: boolean;
+    suggestion?: boolean;
+    type: 'email';
 }
 export type ActionTypes = 'select-option' | 'deselect-option' | 'remove-value' | 'pop-value' | 'set-value' | 'clear' | 'create-option';
 export type OnChange = (value: Value, action: ActionTypes) => void;
@@ -363,12 +363,12 @@ export type Promisable<T> = T | PromiseLike<T>;
 export type InputActionTypes = 'set-value' | 'input-change' | 'input-blur' | 'menu-close';
 export type AtlaskitSelectValue = Option | Array<Option> | null | undefined;
 export type AtlasKitSelectChange = (value: AtlaskitSelectValue, extraInfo: {
-    removedValue?: Option;
-    option?: Option;
     action: ActionTypes;
+    option?: Option;
+    removedValue?: Option;
 }) => void;
 export type Appearance = 'normal' | 'compact';
 export type Target = (options: {
-    ref: any;
     isOpen: boolean;
+    ref: any;
 }) => ReactNode;

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

@@ -1,12 +1,12 @@
 import { type AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import { type UserPickerProps, type UserPickerState } from './types';
 export type UserPickerSession = {
+    downCount: number;
     id: string;
-    start: number;
     inputChangeTime: number;
-    upCount: number;
-    downCount: number;
     lastKey?: number;
+    start: number;
+    upCount: number;
 };
 export declare const startSession: () => UserPickerSession;
 export declare const createAndFireEventInElementsChannel: (payload: AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

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

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

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import type { Appearance, OptionData, UserPickerProps, UserPickerState } from '../types';
 export type BaseUserPickerProps = UserPickerProps & {
-    SelectComponent: React.ComponentType<any>;
-    pickerProps?: any;
-    styles: any;
     components: any;
-    width: string | number;
     name?: string;
+    pickerProps?: any;
+    SelectComponent: React.ComponentType<any>;
+    styles: any;
     /**
      * @deprecated This is a temporary prop to enable user-pickers to work in Draggable elements in react-beautiful-dnd.
      * See https://product-fabric.atlassian.net/browse/DSP-15701 for more details.
      * It may be removed in a future minor or patch when a longer-term workaround is found.
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
+    width: string | number;
 };
 export declare class BaseUserPickerWithoutAnalytics extends React.Component<BaseUserPickerProps, UserPickerState> {
     static defaultProps: {
@@ -65,97 +65,97 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     render(): React.JSX.Element;
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
+    addMoreMessage?: string;
+    allowEmail?: boolean;
+    anchor?: React.ComponentType<any>;
+    appearance?: Appearance;
+    ariaDescribedBy?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaLive?: "polite" | "off" | "assertive";
+    autoFocus?: boolean;
+    captureMenuScroll?: boolean;
+    clearValueLabel?: string;
+    closeMenuOnScroll?: boolean | EventListener;
+    components?: import("@atlaskit/select").SelectComponentsConfig<OptionData, boolean>;
+    defaultValue?: import("../types").DefaultValue;
+    disableInput?: boolean;
+    emailLabel?: string;
     fieldId: string | null;
-    options?: OptionData[];
-    width?: number | string;
+    footer?: React.ReactNode;
+    forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef>;
+    groupByTypeOrder?: NonNullable<OptionData["type"]>[];
+    header?: React.ReactNode;
     height?: number | string;
-    menuMinWidth?: number;
-    maxPickerHeight?: number;
-    textFieldBackgroundColor?: boolean;
+    inputId?: string;
+    isClearable?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isMulti?: boolean;
+    isValidEmail?: import("./emailValidation").EmailValidator;
     loadOptions?: import("../types").LoadOptions;
     loadOptionsErrorMessage?: (value: {
         inputValue: string;
     }) => React.ReactNode;
     loadUserSource?: import("../types").LoadUserSource;
-    onChange?: import("../types").OnChange;
-    isMulti?: boolean;
-    search?: string;
-    anchor?: React.ComponentType<any>;
-    open?: boolean;
-    isLoading?: boolean;
-    onInputChange?: import("../types").OnInputChange;
-    onSelection?: import("../types").OnOption;
-    onFocus?: import("../types").OnPicker;
+    maxOptions?: number;
+    maxPickerHeight?: number;
+    menuMinWidth?: number;
+    menuPortalTarget?: HTMLElement;
+    menuPosition?: "absolute" | "fixed";
+    menuShouldBlockScroll?: boolean;
+    name?: string;
+    noBorder?: boolean;
+    noOptionsMessage?: ((value: {
+        inputValue: string;
+    }) => string | null | React.ReactNode) | null | React.ReactNode;
     onBlur?: import("../types").OnPicker;
+    onChange?: import("../types").OnChange;
     onClear?: import("../types").OnPicker;
-    onOpen?: import("../types").OnPicker;
     onClose?: import("../types").OnPicker;
+    onFocus?: import("../types").OnPicker;
+    onInputChange?: import("../types").OnInputChange;
     onKeyDown?: (event: React.KeyboardEvent) => void;
-    appearance?: Appearance;
-    subtle?: boolean;
-    noBorder?: boolean;
-    styles?: import("@atlaskit/select").StylesConfig;
-    components?: import("@atlaskit/select").SelectComponentsConfig<OptionData, boolean>;
-    defaultValue?: import("../types").DefaultValue;
+    onOpen?: import("../types").OnPicker;
+    onSelection?: import("../types").OnOption;
+    open?: boolean;
+    openMenuOnClick?: boolean;
+    options?: OptionData[];
     placeholder?: React.ReactNode;
     placeholderAvatar?: "person" | "team";
-    addMoreMessage?: string;
-    noOptionsMessage?: ((value: {
-        inputValue: string;
-    }) => string | null | React.ReactNode) | null | React.ReactNode;
-    footer?: React.ReactNode;
-    value?: import("../types").Value;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    isClearable?: boolean;
-    clearValueLabel?: string;
-    menuPosition?: "absolute" | "fixed";
-    captureMenuScroll?: boolean;
-    menuPortalTarget?: HTMLElement;
-    allowEmail?: boolean;
-    suggestEmailsForDomain?: string;
-    emailLabel?: string;
-    disableInput?: boolean;
-    isValidEmail?: import("./emailValidation").EmailValidator;
-    autoFocus?: boolean;
-    maxOptions?: number;
-    inputId?: string;
-    closeMenuOnScroll?: boolean | EventListener;
-    menuShouldBlockScroll?: boolean;
-    ariaLabel?: string;
-    ariaLabelledBy?: string;
-    ariaDescribedBy?: string;
-    ariaLive?: "polite" | "off" | "assertive";
-    name?: string;
-    header?: React.ReactNode;
     required?: boolean;
-    UNSAFE_hasDraggableParentComponent?: boolean;
-    openMenuOnClick?: boolean;
-    strategy?: "fixed" | "absolute";
+    search?: string;
     showClearIndicator?: boolean;
-    forwardedRef?: React.ForwardedRef<import("../types").UserPickerRef>;
-    groupByTypeOrder?: NonNullable<OptionData["type"]>[];
+    strategy?: "fixed" | "absolute";
+    styles?: import("@atlaskit/select").StylesConfig;
+    subtle?: boolean;
+    suggestEmailsForDomain?: string;
+    textFieldBackgroundColor?: boolean;
+    UNSAFE_hasDraggableParentComponent?: boolean;
+    value?: import("../types").Value;
+    width?: number | string;
 } & {
-    SelectComponent: React.ComponentType<any>;
-    pickerProps?: any;
-    styles: any;
     components: any;
-    width: string | number;
     name?: string;
+    pickerProps?: any;
+    SelectComponent: React.ComponentType<any>;
+    styles: any;
     /**
      * @deprecated This is a temporary prop to enable user-pickers to work in Draggable elements in react-beautiful-dnd.
      * See https://product-fabric.atlassian.net/browse/DSP-15701 for more details.
      * It may be removed in a future minor or patch when a longer-term workaround is found.
      */
     UNSAFE_hasDraggableParentComponent?: boolean;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "anchor" | "fieldId" | "width" | "height" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator" | "forwardedRef" | "groupByTypeOrder" | "SelectComponent" | "pickerProps"> & {
+    width: string | number;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "options" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "search" | "anchor" | "addMoreMessage" | "allowEmail" | "ariaDescribedBy" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "clearValueLabel" | "disableInput" | "emailLabel" | "fieldId" | "forwardedRef" | "groupByTypeOrder" | "header" | "height" | "isValidEmail" | "loadOptions" | "loadUserSource" | "maxOptions" | "maxPickerHeight" | "menuMinWidth" | "onClear" | "onClose" | "onOpen" | "onSelection" | "open" | "placeholderAvatar" | "showClearIndicator" | "strategy" | "suggestEmailsForDomain" | "UNSAFE_hasDraggableParentComponent" | "width" | "pickerProps" | "SelectComponent"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;
-    textFieldBackgroundColor?: boolean | undefined;
     loadOptionsErrorMessage?: ((value: {
         inputValue: string;
     }) => React.ReactNode) | undefined;
-    subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
+    subtle?: boolean | undefined;
+    textFieldBackgroundColor?: boolean | undefined;
 } & {} & React.RefAttributes<any>>;