@atlaskit/user-picker 11.0.9 → 11.0.11

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

@@ -49,6 +49,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;
@@ -103,6 +104,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     autoFocus?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
     closeMenuOnScroll?: boolean | EventListener | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     inputId?: string | undefined;
     isClearable?: boolean | undefined;
     isInvalid?: boolean | undefined;

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

@@ -2,15 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ValueContainerProps } from '@atlaskit/select';
-import { jsx } from '@emotion/react';
 import React from 'react';
+import { type ValueContainerProps } from '@atlaskit/select';
 import { type Option, type User } from '../types';
 export declare class SingleValueContainer extends React.Component<ValueContainerProps<Option<User>>> {
     private renderAvatar;
     onValueContainerClick: any;
     Wrapper: ({ children }: {
         children: React.ReactElement;
-    }) => jsx.JSX.Element;
-    render(): jsx.JSX.Element;
+    }) => JSX.Element;
+    render(): JSX.Element;
 }

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

@@ -8,7 +8,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
         isMulti: boolean;
     };
     componentDidMount(): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
@@ -40,6 +40,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;
@@ -77,7 +78,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     openMenuOnClick?: boolean | undefined;
     strategy?: "absolute" | "fixed" | undefined;
     showClearIndicator?: boolean | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -7,29 +7,37 @@ import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
+import { type SelectComponentsConfig } from '@atlaskit/select';
+import { type OptionData } from '../types';
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean) => {
+export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
     Control: import("react").ComponentType<any>;
     Option: import("react").FC<import("./Option").OptionProps>;
-    MultiValue?: undefined;
-    DropdownIndicator?: undefined;
-    SingleValue?: undefined;
-    ClearIndicator?: undefined;
-    ValueContainer?: undefined;
-    Input?: undefined;
-    Menu?: undefined;
 } | {
-    MultiValue: typeof MultiValue;
-    DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
-    ClearIndicator: typeof ClearIndicator | null;
-    Option: import("react").FC<import("./Option").OptionProps>;
-    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
-    Input: typeof Input;
-    Menu: typeof Menu;
-    Control?: undefined;
+    Option: import("react").FC<import("./Option").OptionProps> | import("react").ComponentType<import("packages/design-system/react-select/dist/types").OptionProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    Group?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    ClearIndicator: typeof ClearIndicator | import("react").ComponentType<import("@atlaskit/select").ClearIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
+    Control: ((props: import("@atlaskit/select").ControlProps<any>) => JSX.Element) | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ControlProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
+    GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    IndicatorsContainer?: import("react").ComponentType<import("@atlaskit/select").IndicatorsContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    Input: typeof Input | import("react").ComponentType<import("@atlaskit/select").InputProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    LoadingIndicator?: import("react").ComponentType<import("@atlaskit/select").LoadingIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    Menu: typeof Menu | import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    MenuList?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuListProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MenuPortal?: import("react").ComponentType<import("packages/design-system/react-select/dist/types/components/menu").MenuPortalProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    LoadingMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    NoOptionsMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MultiValue: typeof MultiValue | import("react").ComponentType<import("@atlaskit/select").MultiValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    MultiValueContainer?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MultiValueLabel?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MultiValueRemove?: import("react").ComponentType<import("@atlaskit/select").MultiValueRemoveProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    Placeholder?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").PlaceholderProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    SelectContainer?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").ContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    SingleValue: ((props: import("./SingleValue").Props) => JSX.Element | null) | import("react").ComponentType<import("@atlaskit/select").SingleValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ValueContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;

package/dist/types/types.d.ts

@@ -4,7 +4,7 @@ import { type AriaAttributes } from 'react';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type Placement } from '@atlaskit/popper';
 import { type EmailValidator } from './components/emailValidation';
-import { type StylesConfig } from '@atlaskit/select';
+import { type StylesConfig, type SelectComponentsConfig } from '@atlaskit/select';
 import { type BaseUserPickerWithoutAnalytics } from './components/BaseUserPicker';
 export type UserPickerProps = WithAnalyticsEventsProps & {
     /**
@@ -96,6 +96,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
      * 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

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

@@ -65,7 +65,11 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     render(): React.JSX.Element;
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
-    fieldId: string | null;
+    fieldId: string | null; /**
+     * @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.
+     */
     options?: OptionData[] | undefined;
     width?: string | number | undefined;
     menuMinWidth?: number | undefined;
@@ -94,6 +98,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;

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

@@ -1,6 +1,10 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { type ClearIndicatorProps } from '@atlaskit/select';
 export declare class ClearIndicator extends React.PureComponent<ClearIndicatorProps<any>> {
     private handleMouseDown;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ControlProps } from '@atlaskit/select';
+declare const Control: (props: ControlProps<any>) => JSX.Element;
+export default Control;

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

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type AriaAttributes } from 'react';
 import { type OptionType, type SelectProps } from '@atlaskit/select';
 import { type AriaAttributesType } from '../types';
@@ -18,5 +22,5 @@ export declare class Input extends React.Component<Props & AriaAttributes> {
      */
     get ariaLabelledBy(): AriaAttributesType;
     get ariaDescribedBy(): AriaAttributesType;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }

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

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type MultiValueProps } from '@atlaskit/select';
 import React from 'react';
 import { type Option, type User } from '../types';
@@ -26,6 +30,6 @@ export declare class MultiValueContainer extends React.PureComponent<Props, Stat
     private addPlaceholder;
     private renderChildren;
     onValueContainerClick: any;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export {};

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

@@ -49,6 +49,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;
@@ -109,6 +110,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     autoFocus?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
     closeMenuOnScroll?: boolean | EventListener | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     inputId?: string | undefined;
     isClearable?: boolean | undefined;
     isInvalid?: boolean | undefined;

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

@@ -2,15 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ValueContainerProps } from '@atlaskit/select';
-import { jsx } from '@emotion/react';
 import React from 'react';
+import { type ValueContainerProps } from '@atlaskit/select';
 import { type Option, type User } from '../types';
 export declare class SingleValueContainer extends React.Component<ValueContainerProps<Option<User>>> {
     private renderAvatar;
     onValueContainerClick: any;
     Wrapper: ({ children }: {
         children: React.ReactElement;
-    }) => jsx.JSX.Element;
-    render(): jsx.JSX.Element;
+    }) => JSX.Element;
+    render(): JSX.Element;
 }

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

@@ -8,7 +8,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
         isMulti: boolean;
     };
     componentDidMount(): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
@@ -40,6 +40,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     subtle?: boolean | undefined;
     noBorder?: boolean | undefined;
     styles?: import("@atlaskit/select").StylesConfig | undefined;
+    components?: Partial<import("packages/design-system/react-select/dist/types/components").SelectComponents<import("../types").OptionData, boolean, import("@atlaskit/select").GroupType<import("../types").OptionData>>> | undefined;
     defaultValue?: import("../types").DefaultValue;
     placeholder?: React.ReactNode;
     placeholderAvatar?: "team" | "person" | undefined;
@@ -77,7 +78,7 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     openMenuOnClick?: boolean | undefined;
     strategy?: "absolute" | "fixed" | undefined;
     showClearIndicator?: boolean | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator"> & {
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isClearable" | "isInvalid" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "openMenuOnClick" | "styles" | "value" | "required" | "appearance" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "subtle" | "noBorder" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "strategy" | "showClearIndicator"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -7,29 +7,37 @@ import { SingleValueContainer } from './SingleValueContainer';
 import { PopupInput } from './PopupInput';
 import { PopupControl } from './PopupControl';
 import { Menu } from './Menu';
+import { type SelectComponentsConfig } from '@atlaskit/select';
+import { type OptionData } from '../types';
 /**
  * Memoize getComponents to avoid rerenders.
  */
-export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean) => {
+export declare const getComponents: import("memoize-one").MemoizedFn<(multi?: boolean, anchor?: React.ComponentType<any>, showClearIndicator?: boolean, customComponents?: SelectComponentsConfig<OptionData, boolean>) => {
     Control: import("react").ComponentType<any>;
     Option: import("react").FC<import("./Option").OptionProps>;
-    MultiValue?: undefined;
-    DropdownIndicator?: undefined;
-    SingleValue?: undefined;
-    ClearIndicator?: undefined;
-    ValueContainer?: undefined;
-    Input?: undefined;
-    Menu?: undefined;
 } | {
-    MultiValue: typeof MultiValue;
-    DropdownIndicator: null;
-    SingleValue: (props: import("./SingleValue").Props) => JSX.Element | null;
-    ClearIndicator: typeof ClearIndicator | null;
-    Option: import("react").FC<import("./Option").OptionProps>;
-    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer;
-    Input: typeof Input;
-    Menu: typeof Menu;
-    Control?: undefined;
+    Option: import("react").FC<import("./Option").OptionProps> | import("react").ComponentType<import("packages/design-system/react-select/dist/types").OptionProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    Group?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    ClearIndicator: typeof ClearIndicator | import("react").ComponentType<import("@atlaskit/select").ClearIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
+    Control: ((props: import("@atlaskit/select").ControlProps<any>) => JSX.Element) | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ControlProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    DropdownIndicator: import("react").ComponentType<import("@atlaskit/select").DropdownIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | null;
+    GroupHeading?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").GroupHeadingProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    IndicatorsContainer?: import("react").ComponentType<import("@atlaskit/select").IndicatorsContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    Input: typeof Input | import("react").ComponentType<import("@atlaskit/select").InputProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    LoadingIndicator?: import("react").ComponentType<import("@atlaskit/select").LoadingIndicatorProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    Menu: typeof Menu | import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    MenuList?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").MenuListProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MenuPortal?: import("react").ComponentType<import("packages/design-system/react-select/dist/types/components/menu").MenuPortalProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    LoadingMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    NoOptionsMessage?: import("react").ComponentType<import("@atlaskit/select").NoticeProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MultiValue: typeof MultiValue | import("react").ComponentType<import("@atlaskit/select").MultiValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    MultiValueContainer?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MultiValueLabel?: import("react").ComponentType<import("@atlaskit/select").MultiValueGenericProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    MultiValueRemove?: import("react").ComponentType<import("@atlaskit/select").MultiValueRemoveProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    Placeholder?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").PlaceholderProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    SelectContainer?: import("react").ComponentType<import("packages/design-system/react-select/dist/types").ContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>> | undefined;
+    SingleValue: ((props: import("./SingleValue").Props) => JSX.Element | null) | import("react").ComponentType<import("@atlaskit/select").SingleValueProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
+    ValueContainer: typeof MultiValueContainer | typeof SingleValueContainer | import("react").ComponentType<import("packages/design-system/react-select/dist/types").ValueContainerProps<OptionData, boolean, import("@atlaskit/select").GroupType<OptionData>>>;
 }>;
 export declare const getPopupComponents: import("memoize-one").MemoizedFn<(hasPopupTitle: boolean) => {
     DropdownIndicator: null;

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

@@ -4,7 +4,7 @@ import { type AriaAttributes } from 'react';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type Placement } from '@atlaskit/popper';
 import { type EmailValidator } from './components/emailValidation';
-import { type StylesConfig } from '@atlaskit/select';
+import { type StylesConfig, type SelectComponentsConfig } from '@atlaskit/select';
 import { type BaseUserPickerWithoutAnalytics } from './components/BaseUserPicker';
 export type UserPickerProps = WithAnalyticsEventsProps & {
     /**
@@ -96,6 +96,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
      * 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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "11.0.9",
+	"version": "11.0.11",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -51,18 +51,18 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/avatar": "^25.0.0",
-		"@atlaskit/icon": "^25.5.0",
-		"@atlaskit/logo": "^16.0.0",
+		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/logo": "^17.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/people-teams-ui-public": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
-		"@atlaskit/primitives": "^14.4.0",
-		"@atlaskit/select": "^20.3.0",
+		"@atlaskit/primitives": "^14.6.0",
+		"@atlaskit/select": "^20.4.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/teams-avatar": "^2.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -79,9 +79,9 @@
 	},
 	"devDependencies": {
 		"@atlaskit/analytics-viewer": "^0.8.0",
-		"@atlaskit/elements-test-helpers": "^0.9.0",
+		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@emotion/styled": "^11.0.0",
 		"@testing-library/dom": "^10.1.0",