@atlaskit/user-picker 10.31.1 → 10.31.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/user-picker
 
+## 10.31.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.31.3
+
+### Patch Changes
+
+- [#114038](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114038)
+  [`e279ab8b8f44d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e279ab8b8f44d) -
+  A11Y-7985 Pass aria-describedby to fix instruction not associated with form field issue
+
+## 10.31.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.31.1
 
 ### Patch Changes

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 = "10.31.1";
+var packageVersion = "10.31.4";
 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/BaseUserPicker.js

@@ -17,6 +17,7 @@ var _ufo = require("@atlaskit/ufo");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _uuid = require("uuid");
 var _analytics = require("../analytics");
 var _batch = require("./batch");
@@ -488,6 +489,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         maxPickerHeight = _this$props4.maxPickerHeight,
         textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
         ariaLabelledBy = _this$props4.ariaLabelledBy,
+        ariaDescribedBy = _this$props4.ariaDescribedBy,
         ariaLive = _this$props4.ariaLive,
         ariaLabel = _this$props4.ariaLabel,
         name = _this$props4.name,
@@ -515,6 +517,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         value: value,
         autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
         "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": (0, _platformFeatureFlags.fg)('pass-aria-describedby-to-baseuserpicker') ? ariaDescribedBy : undefined,
         "aria-label": ariaLabel,
         "aria-live": ariaLive,
         "aria-required": required // This has been added as a safety net.

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 = "10.31.1";
+const packageVersion = "10.31.4";
 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/BaseUserPicker.js

@@ -5,6 +5,7 @@ import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
@@ -465,6 +466,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       maxPickerHeight,
       textFieldBackgroundColor,
       ariaLabelledBy,
+      ariaDescribedBy,
       ariaLive,
       ariaLabel,
       name,
@@ -496,6 +498,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       value: value,
       autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
       "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": fg('pass-aria-describedby-to-baseuserpicker') ? ariaDescribedBy : undefined,
       "aria-label": ariaLabel,
       "aria-live": ariaLive,
       "aria-required": required // This has been added as a safety net.

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 = "10.31.1";
+var packageVersion = "10.31.4";
 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/BaseUserPicker.js

@@ -17,6 +17,7 @@ import { UFOExperienceState } from '@atlaskit/ufo';
 import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { cancelEvent, clearEvent, createAndFireEventInElementsChannel, deleteEvent, failedEvent, focusEvent, searchedEvent, selectEvent, startSession } from '../analytics';
 import { batchByKey } from './batch';
@@ -481,6 +482,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         maxPickerHeight = _this$props4.maxPickerHeight,
         textFieldBackgroundColor = _this$props4.textFieldBackgroundColor,
         ariaLabelledBy = _this$props4.ariaLabelledBy,
+        ariaDescribedBy = _this$props4.ariaDescribedBy,
         ariaLive = _this$props4.ariaLive,
         ariaLabel = _this$props4.ariaLabel,
         name = _this$props4.name,
@@ -508,6 +510,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         value: value,
         autoFocus: autoFocus !== undefined ? autoFocus : menuIsOpen,
         "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": fg('pass-aria-describedby-to-baseuserpicker') ? ariaDescribedBy : undefined,
         "aria-label": ariaLabel,
         "aria-live": ariaLive,
         "aria-required": required // This has been added as a safety net.

package/dist/types/clients/UserSourceProvider.d.ts

@@ -1,9 +1,9 @@
-import { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { type LoadUserSource, type UserSource } from '../types';
 export interface UserSourceContext {
     fetchUserSource?: LoadUserSource;
 }
-export declare const ExusUserSourceProvider: ({ fetchUserSource, children, }: PropsWithChildren<UserSourceContext>) => JSX.Element;
+export declare const ExusUserSourceProvider: ({ fetchUserSource, children, }: PropsWithChildren<UserSourceContext>) => React.JSX.Element;
 export declare const useUserSource: (accountId: string, shouldFetchSources: boolean, existingSources?: UserSource[]) => {
     sources: UserSource[];
     loading: boolean;

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

@@ -21,7 +21,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
         noBorder: boolean;
         textFieldBackgroundColor: boolean;
         isClearable: boolean;
-        loadOptionsErrorMessage: () => JSX.Element;
+        loadOptionsErrorMessage: () => React.JSX.Element;
         openMenuOnClick: boolean;
     };
     static getDerivedStateFromProps(nextProps: Partial<UserPickerProps>, prevState: UserPickerState): Partial<UserPickerState>;
@@ -62,7 +62,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     get ariaProps(): {};
     private handleClickDraggableParentComponent;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
@@ -122,6 +122,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuShouldBlockScroll?: boolean | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     name?: string | undefined;
     header?: React.ReactNode;
@@ -141,7 +142,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      * It may be removed in a future minor or patch when a longer-term workaround is found.
      */
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
-}, 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" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & {
+}, 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" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

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

@@ -2,5 +2,5 @@ import React from 'react';
 import { type ClearIndicatorProps } from '@atlaskit/select';
 export declare class ClearIndicator extends React.PureComponent<ClearIndicatorProps<any>> {
     private handleMouseDown;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
-export declare const SourcesTooltipContent: ({ sources, sourcesLoading }: ExternalUserSourcesData) => JSX.Element;
+export declare const SourcesTooltipContent: ({ sources, sourcesLoading }: ExternalUserSourcesData) => React.JSX.Element;

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

@@ -5,5 +5,5 @@ export interface Props {
     children: string;
 }
 export declare class HighlightText extends React.PureComponent<Props> {
-    render(): (string | JSX.Element)[];
+    render(): (string | React.JSX.Element)[];
 }

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

@@ -18,5 +18,5 @@ export declare class Input extends React.Component<Props & AriaAttributes> {
      */
     get ariaLabelledBy(): AriaAttributesType;
     get ariaDescribedBy(): AriaAttributesType;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,3 +1,3 @@
-import { type PropsWithChildren } from 'react';
-declare const MessagesIntlProvider: (props: PropsWithChildren<{}>) => JSX.Element;
+import React, { type PropsWithChildren } from 'react';
+declare const MessagesIntlProvider: (props: PropsWithChildren<{}>) => React.JSX.Element;
 export default MessagesIntlProvider;

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

@@ -26,6 +26,6 @@ export declare class MultiValueContainer extends React.PureComponent<Props, Stat
     private addPlaceholder;
     private renderChildren;
     onValueContainerClick: any;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

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

@@ -4,5 +4,5 @@ export declare class PopupInput extends React.Component<Props> {
     private ref;
     componentDidMount(): void;
     private handleInnerRef;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -17,7 +17,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
         styles: any;
         popper: any;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<Omit<{
     fieldId: string | null;
@@ -77,6 +77,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     menuShouldBlockScroll?: boolean | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     name?: string | undefined;
     header?: React.ReactNode;
@@ -154,6 +155,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     maxOptions?: number | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     header?: React.ReactNode;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;

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

@@ -6,5 +6,5 @@ export type Props = {
     type?: 'person' | 'team';
 };
 export declare class SizeableAvatar extends React.PureComponent<Props> {
-    render(): JSX.Element;
+    render(): React.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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
@@ -68,13 +68,14 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuShouldBlockScroll?: boolean | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     name?: string | undefined;
     header?: React.ReactNode;
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: 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" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent"> & {
+}, 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"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function GitHubIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function GitHubIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function GoogleIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function GoogleIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function MicrosoftIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function MicrosoftIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function SlackIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function SlackIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

package/dist/types/types.d.ts

@@ -156,6 +156,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     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. */

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

@@ -1,9 +1,9 @@
-import { type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { type LoadUserSource, type UserSource } from '../types';
 export interface UserSourceContext {
     fetchUserSource?: LoadUserSource;
 }
-export declare const ExusUserSourceProvider: ({ fetchUserSource, children, }: PropsWithChildren<UserSourceContext>) => JSX.Element;
+export declare const ExusUserSourceProvider: ({ fetchUserSource, children, }: PropsWithChildren<UserSourceContext>) => React.JSX.Element;
 export declare const useUserSource: (accountId: string, shouldFetchSources: boolean, existingSources?: UserSource[]) => {
     sources: UserSource[];
     loading: boolean;

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

@@ -21,7 +21,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
         noBorder: boolean;
         textFieldBackgroundColor: boolean;
         isClearable: boolean;
-        loadOptionsErrorMessage: () => JSX.Element;
+        loadOptionsErrorMessage: () => React.JSX.Element;
         openMenuOnClick: boolean;
     };
     static getDerivedStateFromProps(nextProps: Partial<UserPickerProps>, prevState: UserPickerState): Partial<UserPickerState>;
@@ -62,7 +62,7 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getAppearance;
     get ariaProps(): {};
     private handleClickDraggableParentComponent;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
@@ -122,6 +122,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuShouldBlockScroll?: boolean | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     name?: string | undefined;
     header?: React.ReactNode;
@@ -141,7 +142,7 @@ export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
      * It may be removed in a future minor or patch when a longer-term workaround is found.
      */
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
-}, 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" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & {
+}, 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" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "placeholderAvatar" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & {
     isClearable?: boolean | undefined;
     isMulti?: boolean | undefined;
     openMenuOnClick?: boolean | undefined;

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

@@ -2,5 +2,5 @@ import React from 'react';
 import { type ClearIndicatorProps } from '@atlaskit/select';
 export declare class ClearIndicator extends React.PureComponent<ClearIndicatorProps<any>> {
     private handleMouseDown;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { type ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
-export declare const SourcesTooltipContent: ({ sources, sourcesLoading }: ExternalUserSourcesData) => JSX.Element;
+export declare const SourcesTooltipContent: ({ sources, sourcesLoading }: ExternalUserSourcesData) => React.JSX.Element;

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

@@ -5,5 +5,5 @@ export interface Props {
     children: string;
 }
 export declare class HighlightText extends React.PureComponent<Props> {
-    render(): (string | JSX.Element)[];
+    render(): (string | React.JSX.Element)[];
 }

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

@@ -18,5 +18,5 @@ export declare class Input extends React.Component<Props & AriaAttributes> {
      */
     get ariaLabelledBy(): AriaAttributesType;
     get ariaDescribedBy(): AriaAttributesType;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,3 +1,3 @@
-import { type PropsWithChildren } from 'react';
-declare const MessagesIntlProvider: (props: PropsWithChildren<{}>) => JSX.Element;
+import React, { type PropsWithChildren } from 'react';
+declare const MessagesIntlProvider: (props: PropsWithChildren<{}>) => React.JSX.Element;
 export default MessagesIntlProvider;

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

@@ -26,6 +26,6 @@ export declare class MultiValueContainer extends React.PureComponent<Props, Stat
     private addPlaceholder;
     private renderChildren;
     onValueContainerClick: any;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

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

@@ -4,5 +4,5 @@ export declare class PopupInput extends React.Component<Props> {
     private ref;
     componentDidMount(): void;
     private handleInnerRef;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -17,7 +17,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
         styles: any;
         popper: any;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<Omit<{
     fieldId: string | null;
@@ -77,6 +77,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     menuShouldBlockScroll?: boolean | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     name?: string | undefined;
     header?: React.ReactNode;
@@ -160,6 +161,7 @@ export declare const PopupUserPicker: React.ForwardRefExoticComponent<Omit<Pick<
     maxOptions?: number | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     header?: React.ReactNode;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;

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

@@ -6,5 +6,5 @@ export type Props = {
     type?: 'person' | 'team';
 };
 export declare class SizeableAvatar extends React.PureComponent<Props> {
-    render(): JSX.Element;
+    render(): React.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(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     fieldId: string | null;
@@ -68,13 +68,14 @@ export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<{
     menuShouldBlockScroll?: boolean | undefined;
     ariaLabel?: string | undefined;
     ariaLabelledBy?: string | undefined;
+    ariaDescribedBy?: string | undefined;
     ariaLive?: "polite" | "off" | "assertive" | undefined;
     name?: string | undefined;
     header?: React.ReactNode;
     required?: boolean | undefined;
     UNSAFE_hasDraggableParentComponent?: boolean | undefined;
     openMenuOnClick?: 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" | "ariaLive" | "header" | "UNSAFE_hasDraggableParentComponent"> & {
+}, 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"> & {
     isMulti?: boolean | undefined;
     width?: string | number | undefined;
 } & {} & React.RefAttributes<any>>;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function GitHubIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function GitHubIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function GoogleIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function GoogleIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function MicrosoftIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function MicrosoftIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

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

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function SlackIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;
+export declare function SlackIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;

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

@@ -156,6 +156,8 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     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. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "10.31.1",
+	"version": "10.31.4",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,17 +49,17 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.3.0",
 		"@atlaskit/avatar": "^21.18.0",
-		"@atlaskit/icon": "^23.6.0",
-		"@atlaskit/logo": "^15.2.0",
+		"@atlaskit/icon": "^23.9.0",
+		"@atlaskit/logo": "^15.3.0",
 		"@atlaskit/lozenge": "^11.13.0",
 		"@atlaskit/people-teams-ui-public": "^2.1.0",
-		"@atlaskit/platform-feature-flags": "^1.0.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^6.4.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/select": "^18.10.0",
 		"@atlaskit/spinner": "^17.1.0",
 		"@atlaskit/teams-avatar": "^1.2.0",
-		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/theme": "^16.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/tooltip": "^19.1.0",
 		"@atlaskit/ufo": "^0.3.0",
@@ -108,6 +108,9 @@
 	"platform-feature-flags": {
 		"verified-team-in-user-picker": {
 			"type": "boolean"
+		},
+		"pass-aria-describedby-to-baseuserpicker": {
+			"type": "boolean"
 		}
 	}
 }