@atlaskit/user-picker 10.20.1 → 10.20.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/user-picker
 
+## 10.20.3
+
+### Patch Changes
+
+-   Updated dependencies
+
+## 10.20.2
+
+### Patch Changes
+
+-   [#101781](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101781)
+    [`ea3386009a3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea3386009a3f) -
+    A bug has been fixed where aria-activedescendant on the input elemnt would be try to set to a
+    menu list item before the menu was rendered.
+-   Updated dependencies
+
 ## 10.20.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.20.1";
+var packageVersion = "10.20.3";
 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

@@ -315,7 +315,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
           if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
             var target = mutation.target;
             if (target.classList.contains(optionFocusedClass)) {
-              _this.selectRef.select.inputRef.setAttribute('aria-activedescendant', target.id);
+              var _this$selectRef$selec;
+              (_this$selectRef$selec = _this.selectRef.select.inputRef) === null || _this$selectRef$selec === void 0 || _this$selectRef$selec.setAttribute('aria-activedescendant', target.id);
               break;
             }
           }
@@ -326,9 +327,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         _iterator2.f();
       }
     });
-    // for SSR, MutationObserver not existed in node, need to check its existence first
-    // using typeof MutationObserver to check if MutationObserver is function, it is undefined in node
-    // if it is node environment, focusedOptionObserver will be falsy value.
+    // Create a MutationObserver which will observe the menu list for changes. In
+    // node environments such as SSR, MutationObserver doesn't exist and this
+    // variable will be falsy.
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(_this.focusedOptionObserverCallback));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
       if (!_this.isMenuOpenOnClickForSingleSelect) {
@@ -457,16 +458,36 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         resolving = _this$state2.resolving,
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
-      if (menuIsOpen && !prevState.menuIsOpen) {
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+
+      // Create a new session when the menu is opened and there is no session
+      if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
+        this.startSession();
+      }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+        var _this$selectRef, _this$selectRef2, _this$selectRef3;
+        // When the menu is opened, set aria-activedescendant attribute on the
+        // input and instrument a mutation observer. On the first opening of the
+        // menu, menuIsOpen is true but the menu isn't actually in the DOM yet.
+        // For this reason, we the use the existence of the attribute.
+        var inputHasAriaActiveDecendant = (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.select) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.inputRef) === null || _this$selectRef === void 0 ? void 0 : _this$selectRef.getAttribute('aria-activedescendant');
+        var inputRef = (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select) === null || _this$selectRef2 === void 0 ? void 0 : _this$selectRef2.inputRef;
+        var menuRef = (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.menuListRef;
+        if (menuIsOpen && menuRef && !inputHasAriaActiveDecendant) {
           var _menuRef$children$;
-          var menuRef = this.selectRef.select.menuListRef;
-          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && this.selectRef.select.inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+          // Set the aria-activedescendant attribute on the input element
+          // to the first menu item
+          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && inputRef && inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+
+          // Setup MutationObserver so when the selected option changes, update
+          // the aria-activedescendant attribute on the input element
           this.focusedOptionObserver && this.focusedOptionObserver.observe(menuRef, observerOptions);
         }
-        if (!this.session) {
-          // session should have been created onFocus
-          this.startSession();
+
+        // Rewmoe the aria-active-descendant attribute and disconnect the observer
+        // when the menu is closed
+        if (!menuIsOpen && prevState.menuIsOpen) {
+          inputRef && inputRef.removeAttribute('aria-activedescendant');
+          this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
         }
       }
 
@@ -477,10 +498,6 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       if (!menuIsOpen && prevState.menuIsOpen && this.session) {
         this.fireEvent(_analytics.cancelEvent, prevState);
         this.session = undefined;
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.select-aria-activedescendant_psxzq')) {
-          this.selectRef.select.inputRef.removeAttribute('aria-activedescendant');
-          this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
-        }
       }
       if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
         this.fireEvent(_analytics.searchedEvent);

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.20.1";
+const packageVersion = "10.20.3";
 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

@@ -300,15 +300,16 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
         if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
           const target = mutation.target;
           if (target.classList.contains(optionFocusedClass)) {
-            this.selectRef.select.inputRef.setAttribute('aria-activedescendant', target.id);
+            var _this$selectRef$selec;
+            (_this$selectRef$selec = this.selectRef.select.inputRef) === null || _this$selectRef$selec === void 0 ? void 0 : _this$selectRef$selec.setAttribute('aria-activedescendant', target.id);
             break;
           }
         }
       }
     });
-    // for SSR, MutationObserver not existed in node, need to check its existence first
-    // using typeof MutationObserver to check if MutationObserver is function, it is undefined in node
-    // if it is node environment, focusedOptionObserver will be falsy value.
+    // Create a MutationObserver which will observe the menu list for changes. In
+    // node environments such as SSR, MutationObserver doesn't exist and this
+    // variable will be falsy.
     _defineProperty(this, "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(this.focusedOptionObserverCallback));
     _defineProperty(this, "handleKeyDown", event => {
       if (!this.isMenuOpenOnClickForSingleSelect) {
@@ -427,16 +428,36 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       count,
       inputValue
     } = this.state;
-    if (menuIsOpen && !prevState.menuIsOpen) {
-      if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+
+    // Create a new session when the menu is opened and there is no session
+    if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
+      this.startSession();
+    }
+    if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+      var _this$selectRef, _this$selectRef$selec2, _this$selectRef$selec3, _this$selectRef2, _this$selectRef2$sele, _this$selectRef3, _this$selectRef3$sele;
+      // When the menu is opened, set aria-activedescendant attribute on the
+      // input and instrument a mutation observer. On the first opening of the
+      // menu, menuIsOpen is true but the menu isn't actually in the DOM yet.
+      // For this reason, we the use the existence of the attribute.
+      const inputHasAriaActiveDecendant = (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 ? void 0 : (_this$selectRef$selec2 = _this$selectRef.select) === null || _this$selectRef$selec2 === void 0 ? void 0 : (_this$selectRef$selec3 = _this$selectRef$selec2.inputRef) === null || _this$selectRef$selec3 === void 0 ? void 0 : _this$selectRef$selec3.getAttribute('aria-activedescendant');
+      const inputRef = (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 ? void 0 : (_this$selectRef2$sele = _this$selectRef2.select) === null || _this$selectRef2$sele === void 0 ? void 0 : _this$selectRef2$sele.inputRef;
+      const menuRef = (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 ? void 0 : (_this$selectRef3$sele = _this$selectRef3.select) === null || _this$selectRef3$sele === void 0 ? void 0 : _this$selectRef3$sele.menuListRef;
+      if (menuIsOpen && menuRef && !inputHasAriaActiveDecendant) {
         var _menuRef$children$;
-        const menuRef = this.selectRef.select.menuListRef;
-        ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && this.selectRef.select.inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+        // Set the aria-activedescendant attribute on the input element
+        // to the first menu item
+        ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && inputRef && inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+
+        // Setup MutationObserver so when the selected option changes, update
+        // the aria-activedescendant attribute on the input element
         this.focusedOptionObserver && this.focusedOptionObserver.observe(menuRef, observerOptions);
       }
-      if (!this.session) {
-        // session should have been created onFocus
-        this.startSession();
+
+      // Rewmoe the aria-active-descendant attribute and disconnect the observer
+      // when the menu is closed
+      if (!menuIsOpen && prevState.menuIsOpen) {
+        inputRef && inputRef.removeAttribute('aria-activedescendant');
+        this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
       }
     }
 
@@ -447,10 +468,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     if (!menuIsOpen && prevState.menuIsOpen && this.session) {
       this.fireEvent(cancelEvent, prevState);
       this.session = undefined;
-      if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
-        this.selectRef.select.inputRef.removeAttribute('aria-activedescendant');
-        this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
-      }
     }
     if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
       this.fireEvent(searchedEvent);

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.20.1";
+var packageVersion = "10.20.3";
 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

@@ -308,7 +308,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
           if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
             var target = mutation.target;
             if (target.classList.contains(optionFocusedClass)) {
-              _this.selectRef.select.inputRef.setAttribute('aria-activedescendant', target.id);
+              var _this$selectRef$selec;
+              (_this$selectRef$selec = _this.selectRef.select.inputRef) === null || _this$selectRef$selec === void 0 || _this$selectRef$selec.setAttribute('aria-activedescendant', target.id);
               break;
             }
           }
@@ -319,9 +320,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         _iterator2.f();
       }
     });
-    // for SSR, MutationObserver not existed in node, need to check its existence first
-    // using typeof MutationObserver to check if MutationObserver is function, it is undefined in node
-    // if it is node environment, focusedOptionObserver will be falsy value.
+    // Create a MutationObserver which will observe the menu list for changes. In
+    // node environments such as SSR, MutationObserver doesn't exist and this
+    // variable will be falsy.
     _defineProperty(_assertThisInitialized(_this), "focusedOptionObserver", typeof MutationObserver === 'function' && new MutationObserver(_this.focusedOptionObserverCallback));
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
       if (!_this.isMenuOpenOnClickForSingleSelect) {
@@ -450,16 +451,36 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         resolving = _this$state2.resolving,
         count = _this$state2.count,
         inputValue = _this$state2.inputValue;
-      if (menuIsOpen && !prevState.menuIsOpen) {
-        if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+
+      // Create a new session when the menu is opened and there is no session
+      if (menuIsOpen && !prevState.menuIsOpen && !this.session) {
+        this.startSession();
+      }
+      if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
+        var _this$selectRef, _this$selectRef2, _this$selectRef3;
+        // When the menu is opened, set aria-activedescendant attribute on the
+        // input and instrument a mutation observer. On the first opening of the
+        // menu, menuIsOpen is true but the menu isn't actually in the DOM yet.
+        // For this reason, we the use the existence of the attribute.
+        var inputHasAriaActiveDecendant = (_this$selectRef = this.selectRef) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.select) === null || _this$selectRef === void 0 || (_this$selectRef = _this$selectRef.inputRef) === null || _this$selectRef === void 0 ? void 0 : _this$selectRef.getAttribute('aria-activedescendant');
+        var inputRef = (_this$selectRef2 = this.selectRef) === null || _this$selectRef2 === void 0 || (_this$selectRef2 = _this$selectRef2.select) === null || _this$selectRef2 === void 0 ? void 0 : _this$selectRef2.inputRef;
+        var menuRef = (_this$selectRef3 = this.selectRef) === null || _this$selectRef3 === void 0 || (_this$selectRef3 = _this$selectRef3.select) === null || _this$selectRef3 === void 0 ? void 0 : _this$selectRef3.menuListRef;
+        if (menuIsOpen && menuRef && !inputHasAriaActiveDecendant) {
           var _menuRef$children$;
-          var menuRef = this.selectRef.select.menuListRef;
-          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && this.selectRef.select.inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+          // Set the aria-activedescendant attribute on the input element
+          // to the first menu item
+          ((_menuRef$children$ = menuRef.children[0]) === null || _menuRef$children$ === void 0 ? void 0 : _menuRef$children$.classList.contains(optionFocusedClass)) && inputRef && inputRef.setAttribute('aria-activedescendant', menuRef.children[0].id);
+
+          // Setup MutationObserver so when the selected option changes, update
+          // the aria-activedescendant attribute on the input element
           this.focusedOptionObserver && this.focusedOptionObserver.observe(menuRef, observerOptions);
         }
-        if (!this.session) {
-          // session should have been created onFocus
-          this.startSession();
+
+        // Rewmoe the aria-active-descendant attribute and disconnect the observer
+        // when the menu is closed
+        if (!menuIsOpen && prevState.menuIsOpen) {
+          inputRef && inputRef.removeAttribute('aria-activedescendant');
+          this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
         }
       }
 
@@ -470,10 +491,6 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       if (!menuIsOpen && prevState.menuIsOpen && this.session) {
         this.fireEvent(cancelEvent, prevState);
         this.session = undefined;
-        if (getBooleanFF('platform.design-system-team.select-aria-activedescendant_psxzq')) {
-          this.selectRef.select.inputRef.removeAttribute('aria-activedescendant');
-          this.focusedOptionObserver && this.focusedOptionObserver.disconnect();
-        }
       }
       if (menuIsOpen && (!prevState.menuIsOpen && options.length > 0 || options.length !== prevState.options.length)) {
         this.fireEvent(searchedEvent);

package/dist/types/analytics.d.ts

@@ -1,5 +1,5 @@
-import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
-import { UserPickerProps, UserPickerState } from './types';
+import { type AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { type UserPickerProps, type UserPickerState } from './types';
 export type UserPickerSession = {
     id: string;
     start: number;

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

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import { LoadUserSource, UserSource } from '../types';
+import { type PropsWithChildren } from 'react';
+import { type LoadUserSource, type UserSource } from '../types';
 export interface UserSourceContext {
     fetchUserSource?: LoadUserSource;
 }

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { LozengeProps } from '../types';
+import { type LozengeProps } from '../types';
 export declare const textWrapper: (color?: string) => import("@emotion/react").SerializedStyles;
 export type AvatarItemOptionProps = {
     avatar: ReactNode;

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

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

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { Custom } from '../../types';
+import { type Custom } from '../../types';
 export type CustomOptionProps = {
     data: Custom;
     isSelected: boolean;

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Email } from '../../types';
-import { EmailValidationResponse } from '../emailValidation';
+import { type Email } from '../../types';
+import { type EmailValidationResponse } from '../emailValidation';
 export type EmailOptionProps = {
     email: Email;
     isSelected: boolean;

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export type ExternalAvatarItemOptionProps = {
     avatar: ReactNode;

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
+import { type ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
 export declare const sourceWrapper: import("@emotion/react").SerializedStyles;
 export declare const SourcesTooltipContent: React.FC<ExternalUserSourcesData>;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { ExternalUser } from '../../types';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+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 & {

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { UserSource } from '../types';
+import { type ReactNode } from 'react';
+import { type UserSource } from '../types';
 export interface ExternalUserSourcesData {
     sources: UserSource[];
     sourcesLoading: boolean;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Group } from '../../types';
+import { type Group } from '../../types';
 export declare const groupOptionIconWrapper: import("@emotion/react").SerializedStyles;
 export type GroupOptionProps = {
     group: Group;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HighlightRange } from '../types';
+import { type HighlightRange } from '../types';
 export interface Props {
     highlights?: HighlightRange[];
     children: string;

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

@@ -1,6 +1,6 @@
 import React, { type AriaAttributes } from 'react';
 import { type OptionType, type SelectProps } from '@atlaskit/select';
-import { AriaAttributesType } from '../types';
+import { type AriaAttributesType } from '../types';
 export type Props = {
     selectProps?: SelectProps<OptionType, boolean>;
     innerRef: (ref: React.Ref<HTMLInputElement>) => void;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { UserPickerProps } from '../types';
+import { type UserPickerProps } from '../types';
 import { jsx } from '@emotion/react';
 export type Props = React.PropsWithChildren<{
     selectProps: UserPickerProps;

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

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

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

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
-import { OptionType } from '@atlaskit/select';
+import { type OptionType } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
-import { Option, UserPickerProps } from '../types';
-import { MultiValueProps } from '@atlaskit/select';
+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;

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

@@ -1,6 +1,6 @@
-import { MultiValueProps } from '@atlaskit/select';
+import { type MultiValueProps } from '@atlaskit/select';
 import React from 'react';
-import { Option, User } from '../types';
+import { type Option, type User } from '../types';
 export type State = {
     valueSize: number;
     previousValueSize: number;

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

@@ -1,6 +1,6 @@
-import { OptionProps as AkOptionProps } from '@atlaskit/select';
-import { FC } from 'react';
-import { Option as OptionType } from '../types';
+import { type OptionProps as AkOptionProps } from '@atlaskit/select';
+import { type FC } from 'react';
+import { type Option as OptionType } from '../types';
 export type OptionProps = AkOptionProps & {
     data: OptionType;
     isSelected: boolean;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { ControlProps } from '@atlaskit/select';
+import { type ControlProps } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
 export declare class PopupControl extends React.PureComponent<ControlProps<any>> {
     render(): jsx.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopupUserPickerProps } from '../types';
+import { type PopupUserPickerProps } from '../types';
 interface State {
     flipped: boolean;
 }

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

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { Option } from '../types';
-import { SingleValueProps } from '@atlaskit/select';
+import { type Option } from '../types';
+import { type SingleValueProps } from '@atlaskit/select';
 export type Props = SingleValueProps<Option>;
 export declare const SingleValue: (props: Props) => jsx.JSX.Element | null;

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { ValueContainerProps } from '@atlaskit/select';
+import { type ValueContainerProps } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { Option, User } from '../types';
+import { type Option, type User } from '../types';
 export declare class SingleValueContainer extends React.Component<ValueContainerProps<Option<User>>> {
     private renderAvatar;
     onValueContainerClick: any;

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { Team } from '../../types';
+import { type Team } from '../../types';
 export type TeamOptionProps = {
     team: Team;
     isSelected: boolean;

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { User } from '../types';
+import { type User } from '../types';
 export type UserOptionProps = {
     user: User;
     status?: string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UserPickerProps } from '../types';
+import { type UserPickerProps } from '../types';
 export declare class UserPickerWithoutAnalytics extends React.Component<UserPickerProps> {
     ufoId: string;
     constructor(props: UserPickerProps);

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

@@ -1,5 +1,5 @@
-import { Option } from '../types';
-import { EmailValidator } from './emailValidation';
+import { type Option } from '../types';
+import { type EmailValidator } from './emailValidation';
 declare function creatableProps(isValidEmail?: EmailValidator): {
     allowCreateWhileLoading: boolean;
     createOptionPosition: string;

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

@@ -1,5 +1,5 @@
-import { Option } from '../types';
-import { EmailValidator } from './emailValidation';
+import { type Option } from '../types';
+import { type EmailValidator } from './emailValidation';
 export declare const getCreatableSuggestedEmailProps: import("memoize-one").MemoizedFn<(emailDomain: string, isValidEmail?: EmailValidator) => {
     allowCreateWhileLoading: boolean;
     createOptionPosition: string;

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

@@ -1,5 +1,5 @@
-import { Placement } from '@atlaskit/popper';
-import { Target, BoundariesElement, RootBoundary } from '../types';
+import { type Placement } from '@atlaskit/popper';
+import { type Target, type BoundariesElement, type RootBoundary } from '../types';
 export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string) => {
     searchThreshold: number;
     controlShouldRenderValue: boolean;

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

@@ -1,4 +1,4 @@
-import { StylesConfig } from '@atlaskit/select';
+import { type StylesConfig } from '@atlaskit/select';
 export declare const BORDER_PADDING: "var(--ds-space-075)";
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;

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

@@ -1,5 +1,5 @@
-import { ReactChild, ReactElement, ReactNode } from 'react';
-import { AtlaskitSelectValue, ExternalUser, Custom, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue, LozengeProps } from '../types';
+import { type ReactChild, type ReactElement, type ReactNode } from 'react';
+import { type AtlaskitSelectValue, type ExternalUser, type Custom, type Email, type Option, type OptionData, type Promisable, type Team, type Group, type User, type OptionIdentifier, type DefaultValue, type LozengeProps } from '../types';
 export declare const isExternalUser: (option: OptionData) => option is ExternalUser;
 export declare const isUser: (option: OptionData) => option is User;
 export declare const isTeam: (option: OptionData) => option is Team;

package/dist/types/types.d.ts

@@ -1,9 +1,11 @@
-import React, { type AriaAttributes, ReactNode } from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { Placement } from '@atlaskit/popper';
-import { EmailValidator } from './components/emailValidation';
-import { StylesConfig } from '@atlaskit/select';
-import { BaseUserPickerWithoutAnalytics } from './components/BaseUserPicker';
+import { type ReactNode } from 'react';
+import type React from 'react';
+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 BaseUserPickerWithoutAnalytics } from './components/BaseUserPicker';
 export type UserPickerProps = WithAnalyticsEventsProps & {
     /**
      * Used to configure additional information regarding where the

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

@@ -1,5 +1,5 @@
-import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
-import { UserPickerProps, UserPickerState } from './types';
+import { type AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { type UserPickerProps, type UserPickerState } from './types';
 export type UserPickerSession = {
     id: string;
     start: number;

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

@@ -1,5 +1,5 @@
-import { PropsWithChildren } from 'react';
-import { LoadUserSource, UserSource } from '../types';
+import { type PropsWithChildren } from 'react';
+import { type LoadUserSource, type UserSource } from '../types';
 export interface UserSourceContext {
     fetchUserSource?: LoadUserSource;
 }

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { LozengeProps } from '../types';
+import { type LozengeProps } from '../types';
 export declare const textWrapper: (color?: string) => import("@emotion/react").SerializedStyles;
 export type AvatarItemOptionProps = {
     avatar: ReactNode;

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

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

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { Custom } from '../../types';
+import { type Custom } from '../../types';
 export type CustomOptionProps = {
     data: Custom;
     isSelected: boolean;

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Email } from '../../types';
-import { EmailValidationResponse } from '../emailValidation';
+import { type Email } from '../../types';
+import { type EmailValidationResponse } from '../emailValidation';
 export type EmailOptionProps = {
     email: Email;
     isSelected: boolean;

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
 export type ExternalAvatarItemOptionProps = {
     avatar: ReactNode;

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
+import { type ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
 export declare const sourceWrapper: import("@emotion/react").SerializedStyles;
 export declare const SourcesTooltipContent: React.FC<ExternalUserSourcesData>;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { ExternalUser } from '../../types';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+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 & {

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { UserSource } from '../types';
+import { type ReactNode } from 'react';
+import { type UserSource } from '../types';
 export interface ExternalUserSourcesData {
     sources: UserSource[];
     sourcesLoading: boolean;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { Group } from '../../types';
+import { type Group } from '../../types';
 export declare const groupOptionIconWrapper: import("@emotion/react").SerializedStyles;
 export type GroupOptionProps = {
     group: Group;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HighlightRange } from '../types';
+import { type HighlightRange } from '../types';
 export interface Props {
     highlights?: HighlightRange[];
     children: string;

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

@@ -1,6 +1,6 @@
 import React, { type AriaAttributes } from 'react';
 import { type OptionType, type SelectProps } from '@atlaskit/select';
-import { AriaAttributesType } from '../types';
+import { type AriaAttributesType } from '../types';
 export type Props = {
     selectProps?: SelectProps<OptionType, boolean>;
     innerRef: (ref: React.Ref<HTMLInputElement>) => void;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { UserPickerProps } from '../types';
+import { type UserPickerProps } from '../types';
 import { jsx } from '@emotion/react';
 export type Props = React.PropsWithChildren<{
     selectProps: UserPickerProps;

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

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

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

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
-import { OptionType } from '@atlaskit/select';
+import { type OptionType } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
-import { Option, UserPickerProps } from '../types';
-import { MultiValueProps } from '@atlaskit/select';
+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;

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

@@ -1,6 +1,6 @@
-import { MultiValueProps } from '@atlaskit/select';
+import { type MultiValueProps } from '@atlaskit/select';
 import React from 'react';
-import { Option, User } from '../types';
+import { type Option, type User } from '../types';
 export type State = {
     valueSize: number;
     previousValueSize: number;

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

@@ -1,6 +1,6 @@
-import { OptionProps as AkOptionProps } from '@atlaskit/select';
-import { FC } from 'react';
-import { Option as OptionType } from '../types';
+import { type OptionProps as AkOptionProps } from '@atlaskit/select';
+import { type FC } from 'react';
+import { type Option as OptionType } from '../types';
 export type OptionProps = AkOptionProps & {
     data: OptionType;
     isSelected: boolean;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { ControlProps } from '@atlaskit/select';
+import { type ControlProps } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
 export declare class PopupControl extends React.PureComponent<ControlProps<any>> {
     render(): jsx.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopupUserPickerProps } from '../types';
+import { type PopupUserPickerProps } from '../types';
 interface State {
     flipped: boolean;
 }

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

@@ -1,5 +1,5 @@
 import { jsx } from '@emotion/react';
-import { Option } from '../types';
-import { SingleValueProps } from '@atlaskit/select';
+import { type Option } from '../types';
+import { type SingleValueProps } from '@atlaskit/select';
 export type Props = SingleValueProps<Option>;
 export declare const SingleValue: (props: Props) => jsx.JSX.Element | null;

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { ValueContainerProps } from '@atlaskit/select';
+import { type ValueContainerProps } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { Option, User } from '../types';
+import { type Option, type User } from '../types';
 export declare class SingleValueContainer extends React.Component<ValueContainerProps<Option<User>>> {
     private renderAvatar;
     onValueContainerClick: any;

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { Team } from '../../types';
+import { type Team } from '../../types';
 export type TeamOptionProps = {
     team: Team;
     isSelected: boolean;

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

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react';
 import React from 'react';
-import { User } from '../types';
+import { type User } from '../types';
 export type UserOptionProps = {
     user: User;
     status?: string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UserPickerProps } from '../types';
+import { type UserPickerProps } from '../types';
 export declare class UserPickerWithoutAnalytics extends React.Component<UserPickerProps> {
     ufoId: string;
     constructor(props: UserPickerProps);

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

@@ -1,5 +1,5 @@
-import { Option } from '../types';
-import { EmailValidator } from './emailValidation';
+import { type Option } from '../types';
+import { type EmailValidator } from './emailValidation';
 declare function creatableProps(isValidEmail?: EmailValidator): {
     allowCreateWhileLoading: boolean;
     createOptionPosition: string;

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

@@ -1,5 +1,5 @@
-import { Option } from '../types';
-import { EmailValidator } from './emailValidation';
+import { type Option } from '../types';
+import { type EmailValidator } from './emailValidation';
 export declare const getCreatableSuggestedEmailProps: import("memoize-one").MemoizedFn<(emailDomain: string, isValidEmail?: EmailValidator) => {
     allowCreateWhileLoading: boolean;
     createOptionPosition: string;

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

@@ -1,5 +1,5 @@
-import { Placement } from '@atlaskit/popper';
-import { Target, BoundariesElement, RootBoundary } from '../types';
+import { type Placement } from '@atlaskit/popper';
+import { type Target, type BoundariesElement, type RootBoundary } from '../types';
 export declare const getPopupProps: import("memoize-one").MemoizedFn<(width: string | number, target: Target, onFlip: (data: any) => any, boundariesElement?: BoundariesElement, offset?: number[], placement?: Placement, rootBoundary?: RootBoundary, shouldFlip?: boolean, popupTitle?: string) => {
     searchThreshold: number;
     controlShouldRenderValue: boolean;

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

@@ -1,4 +1,4 @@
-import { StylesConfig } from '@atlaskit/select';
+import { type StylesConfig } from '@atlaskit/select';
 export declare const BORDER_PADDING: "var(--ds-space-075)";
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;

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

@@ -1,5 +1,5 @@
-import { ReactChild, ReactElement, ReactNode } from 'react';
-import { AtlaskitSelectValue, ExternalUser, Custom, Email, Option, OptionData, Promisable, Team, Group, User, OptionIdentifier, DefaultValue, LozengeProps } from '../types';
+import { type ReactChild, type ReactElement, type ReactNode } from 'react';
+import { type AtlaskitSelectValue, type ExternalUser, type Custom, type Email, type Option, type OptionData, type Promisable, type Team, type Group, type User, type OptionIdentifier, type DefaultValue, type LozengeProps } from '../types';
 export declare const isExternalUser: (option: OptionData) => option is ExternalUser;
 export declare const isUser: (option: OptionData) => option is User;
 export declare const isTeam: (option: OptionData) => option is Team;

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

@@ -1,9 +1,11 @@
-import React, { type AriaAttributes, ReactNode } from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { Placement } from '@atlaskit/popper';
-import { EmailValidator } from './components/emailValidation';
-import { StylesConfig } from '@atlaskit/select';
-import { BaseUserPickerWithoutAnalytics } from './components/BaseUserPicker';
+import { type ReactNode } from 'react';
+import type React from 'react';
+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 BaseUserPickerWithoutAnalytics } from './components/BaseUserPicker';
 export type UserPickerProps = WithAnalyticsEventsProps & {
     /**
      * Used to configure additional information regarding where the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.20.1",
+  "version": "10.20.3",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,19 +43,19 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/avatar": "^21.6.0",
-    "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/logo": "^13.15.0",
+    "@atlaskit/avatar": "^21.9.0",
+    "@atlaskit/icon": "^22.3.0",
+    "@atlaskit/logo": "^13.17.0",
     "@atlaskit/lozenge": "^11.7.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/primitives": "^6.0.0",
-    "@atlaskit/select": "^17.8.0",
+    "@atlaskit/popper": "^6.0.0",
+    "@atlaskit/primitives": "^6.3.0",
+    "@atlaskit/select": "^17.9.0",
     "@atlaskit/spinner": "^16.1.0",
     "@atlaskit/teams-avatar": "^1.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
-    "@atlaskit/tooltip": "^18.3.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
+    "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.5.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/heading": "^2.2.0",
+    "@atlaskit/heading": "^2.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",