@atlaskit/user-picker 11.6.1 → 11.6.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/user-picker
 
+## 11.6.3
+
+### Patch Changes
+
+- [`d281a835c4897`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d281a835c4897) -
+  [ux]
+
+  - `TeamCreateDialog`
+    - Fixed incorrect ariaDescribedBy identifier so that VoiceOver can read out the error message.
+    - Programmatically focus the input on submit when there is an error.
+
+- Updated dependencies
+
+## 11.6.2
+
+### Patch Changes
+
+- [`0fdcb6f2f96fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fdcb6f2f96fd) -
+  Sorted type and interface props to improve Atlaskit docs
+- Updated dependencies
+
 ## 11.6.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -3,9 +3,9 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"composite": true,
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__user-picker",
-		"rootDir": "../"
+		"rootDir": "../",
+		"composite": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.6.0";
+var packageVersion = "11.6.2";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/UserPicker.js

@@ -102,7 +102,7 @@ var UserPickerWithoutAnalytics = exports.UserPickerWithoutAnalytics = /*#__PURE_
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+        styles: (0, _styles.getStyles)(width, isMulti, this.props.appearance === 'compact', this.props.styles, (0, _platformFeatureFlags.fg)('uxissue-914') ? undefined : this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
         (0, _platformFeatureFlags.fg)('platform-component-visual-refresh'), false, (0, _platformFeatureFlags.fg)('jifjam_bulk_operations') ? this.props.height : undefined),
         components: (0, _components.getComponents)(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),

package/dist/cjs/components/styles.js

@@ -36,13 +36,13 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
+        borderColor: (0, _platformFeatureFlags.fg)('uxissue-914') ? state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
         backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(_colors.N10, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")"),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
+          borderColor: (0, _platformFeatureFlags.fg)('uxissue-914') ? state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(_colors.R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(_colors.B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(_colors.N90, ")"),
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(_colors.R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(_colors.N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(_colors.N10, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")")
         }),
         padding: 0,

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "11.6.0";
+const packageVersion = "11.6.2";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/UserPicker.js

@@ -79,7 +79,7 @@ export class UserPickerWithoutAnalytics extends React.Component {
       SelectComponent: SelectComponent
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       ,
-      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+      styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('uxissue-914') ? undefined : this.props.isInvalid,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
       components: getComponents(isMulti, anchor, showClearIndicator, (_this$props = this.props) !== null && _this$props !== void 0 && _this$props.components ? this.props.components : {}),

package/dist/es2019/components/styles.js

@@ -22,14 +22,14 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles,
       return {
         ...css,
         width,
-        borderColor: isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
+        borderColor: fg('uxissue-914') ? state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.isInvalid ? `var(--ds-border-danger, ${R400})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})` : isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? `var(--ds-border-focused, ${css.borderColor})` : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : `var(--ds-border-input, ${N90})`,
         backgroundColor: state.isFocused ? `var(--ds-background-input, ${css['backgroundColor']})` : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? `var(--ds-background-input, ${N10})` : `var(--ds-background-input, ${N20})`,
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': {
           ...css[':hover'],
-          borderColor: isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})`,
+          borderColor: fg('uxissue-914') ? state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.isInvalid ? `var(--ds-border-danger, ${R400})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})` : isInvalid ? `var(--ds-border-danger, ${R400})` : state.isFocused ? css[':hover'] ? `var(--ds-border-focused, ${css[':hover'].borderColor})` : `var(--ds-border-focused, ${B100})` : state.selectProps.subtle ? 'transparent' : `var(--ds-border-input, ${N90})`,
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? `var(--ds-background-danger, ${R50})` : state.isFocused ? css[':hover'] ? `var(--ds-background-input, ${css[':hover'].backgroundColor})` : `var(--ds-background-input, ${N0})` : state.isDisabled ? `var(--ds-background-disabled, ${N10})` : `var(--ds-background-input-hovered, ${N30})`
         },
         padding: 0,

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "11.6.0";
+var packageVersion = "11.6.2";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/UserPicker.js

@@ -93,7 +93,7 @@ export var UserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component)
         SelectComponent: SelectComponent
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         ,
-        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, this.props.isInvalid,
+        styles: getStyles(width, isMulti, this.props.appearance === 'compact', this.props.styles, fg('uxissue-914') ? undefined : this.props.isInvalid,
         // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
         fg('platform-component-visual-refresh'), false, fg('jifjam_bulk_operations') ? this.props.height : undefined),
         components: getComponents(isMulti, anchor, showClearIndicator, (_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.components ? this.props.components : {}),

package/dist/esm/components/styles.js

@@ -29,13 +29,13 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         width: width,
-        borderColor: isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
+        borderColor: fg('uxissue-914') ? state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? "var(--ds-border-focused, ".concat(css.borderColor, ")") : state.selectProps.subtle || state.selectProps.noBorder ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
         backgroundColor: state.isFocused ? "var(--ds-background-input, ".concat(css['backgroundColor'], ")") : state.selectProps.subtle ? 'transparent' : state.selectProps.textFieldBackgroundColor ? "var(--ds-background-input, ".concat(N10, ")") : "var(--ds-background-input, ".concat(N20, ")"),
         '&:hover .fabric-user-picker__clear-indicator': {
           opacity: 1
         },
         ':hover': _objectSpread(_objectSpread({}, css[':hover']), {}, {
-          borderColor: isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
+          borderColor: fg('uxissue-914') ? state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(B100, ")") : state.isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")") : isInvalid ? "var(--ds-border-danger, ".concat(R400, ")") : state.isFocused ? css[':hover'] ? "var(--ds-border-focused, ".concat(css[':hover'].borderColor, ")") : "var(--ds-border-focused, ".concat(B100, ")") : state.selectProps.subtle ? 'transparent' : "var(--ds-border-input, ".concat(N90, ")"),
           backgroundColor: state.selectProps.subtle && state.selectProps.hoveringClearIndicator ? "var(--ds-background-danger, ".concat(R50, ")") : state.isFocused ? css[':hover'] ? "var(--ds-background-input, ".concat(css[':hover'].backgroundColor, ")") : "var(--ds-background-input, ".concat(N0, ")") : state.isDisabled ? "var(--ds-background-disabled, ".concat(N10, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")")
         }),
         padding: 0,

package/dist/types/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/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/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>>;

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

@@ -8,9 +8,9 @@ import { type Email } from '../../types';
 import { type EmailValidationResponse } from '../emailValidation';
 export type EmailOptionProps = {
     email: Email;
+    emailValidity: EmailValidationResponse;
     isSelected: boolean;
     label?: string;
-    emailValidity: EmailValidationResponse;
 };
 export declare class EmailOption extends React.PureComponent<EmailOptionProps> {
     private getLozengeProps;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const AsyncExternalUserOption: React.LazyExoticComponent<React.ForwardRefExoticComponent<Omit<{
-    user: import("../..").ExternalUser;
-    status?: string;
     isSelected: boolean;
+    status?: string;
+    user: import("../..").ExternalUser;
 }, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>>;
 export default AsyncExternalUserOption;

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

@@ -8,12 +8,12 @@ import { type ExternalUser } from '../../types';
 export declare const imageContainer: import("@emotion/react").SerializedStyles;
 export declare const emailDomainWrapper: import("@emotion/react").SerializedStyles;
 export type ExternalUserOptionProps = WithAnalyticsEventsProps & {
-    user: ExternalUser;
-    status?: string;
     isSelected: boolean;
+    status?: string;
+    user: ExternalUser;
 };
 export declare const ExternalUserOption: React.ForwardRefExoticComponent<Omit<{
-    user: ExternalUser;
-    status?: string;
     isSelected: boolean;
+    status?: string;
+    user: ExternalUser;
 }, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

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

@@ -7,9 +7,9 @@ export interface ExternalUserSourcesData {
 type SourcesChildrenFunc = (sourcesData: ExternalUserSourcesData) => ReactNode;
 interface SourcesContainerProps {
     accountId: string;
-    shouldFetchSources: boolean;
-    initialSources: UserSource[];
     children: SourcesChildrenFunc;
+    initialSources: UserSource[];
+    shouldFetchSources: boolean;
 }
 export declare const ExternalUserSourcesContainer: ({ children, accountId, shouldFetchSources, initialSources, }: SourcesContainerProps) => any;
 export {};

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { type HighlightRange } from '../types';
 export interface Props {
-    highlights?: HighlightRange[];
     children: string;
+    highlights?: HighlightRange[];
 }
 export declare class HighlightText extends React.PureComponent<Props> {
     render(): (string | React.JSX.Element)[];

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

@@ -6,9 +6,9 @@ import React, { type AriaAttributes } from 'react';
 import { type OptionType, type SelectProps } from '@atlaskit/select';
 import { type AriaAttributesType } from '../types';
 export type Props = {
-    selectProps?: SelectProps<OptionType, boolean>;
-    innerRef: (ref: React.Ref<HTMLInputElement>) => void;
     ariaDescribedBy?: AriaAttributesType;
+    innerRef: (ref: React.Ref<HTMLInputElement>) => void;
+    selectProps?: SelectProps<OptionType, boolean>;
 };
 export declare class Input extends React.Component<Props & AriaAttributes> {
     handleKeyPress: (e: KeyboardEvent) => void;

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

@@ -9,14 +9,14 @@ import { type Option, type UserPickerProps } from '../types';
 import { type MultiValueProps } from '@atlaskit/select';
 export declare const scrollToValue: (valueContainer: HTMLDivElement, control: HTMLElement) => void;
 type Props = MultiValueProps<OptionType> & {
-    isFocused?: boolean;
     data: Option;
     innerProps: any;
+    isFocused?: boolean;
+    ref?: React.RefObject<HTMLDivElement>;
     removeProps: {
         onClick: Function;
     };
     selectProps: UserPickerProps;
-    ref?: React.RefObject<HTMLDivElement>;
 };
 export declare class MultiValue extends React.Component<Props> {
     private containerRef;

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

@@ -6,8 +6,8 @@ import { type MultiValueProps } from '@atlaskit/select';
 import React from 'react';
 import { type Option, type User } from '../types';
 export type State = {
-    valueSize: number;
     previousValueSize: number;
+    valueSize: number;
 };
 type Props = MultiValueProps<Option<User>[], true> & {
     innerProps?: ValueContainerInnerProps;

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

@@ -3,12 +3,12 @@ import { type FC } from 'react';
 import { type Option as OptionType } from '../types';
 export type OptionProps = AkOptionProps & {
     data: OptionType;
-    isSelected: boolean;
     isDisabled: boolean;
     isFocused: boolean;
-    status?: string;
+    isSelected: boolean;
     selectProps: {
         emailLabel?: string;
     };
+    status?: string;
 };
 export declare const Option: FC<OptionProps>;