@atlaskit/user-picker 10.20.3 → 10.21.0

package/afm-cc/tsconfig.json

@@ -33,9 +33,6 @@
         {
             "path": "../../../design-system/lozenge/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },

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.3";
+var packageVersion = "10.21.0";
 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

@@ -24,7 +24,6 @@ var _batch = require("./batch");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _ufoExperiences = require("../util/ufoExperiences");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -35,13 +34,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var loadingMessage = function loadingMessage() {
   return null;
 };
-var observerOptions = {
-  subtree: true,
-  attributes: true,
-  attributeFilter: ['class']
-};
 var classNamePrefix = 'fabric-user-picker';
-var optionFocusedClass = "".concat(classNamePrefix, "__option--is-focused");
 var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(BaseUserPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(BaseUserPickerWithoutAnalytics);
@@ -306,31 +299,6 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       _this.journeyId = _this.getSessionId();
       _this.fireEvent(_analytics.focusEvent);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusedOptionObserverCallback", function (mutationList) {
-      var _iterator2 = _createForOfIteratorHelper(mutationList),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var mutation = _step2.value;
-          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-            var target = mutation.target;
-            if (target.classList.contains(optionFocusedClass)) {
-              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;
-            }
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    });
-    // 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) {
         // Escape
@@ -463,33 +431,6 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       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$;
-          // 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);
-        }
-
-        // 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();
-        }
-      }
 
       // Load options when user picker opens or when input value changes
       if (menuIsOpen && !prevState.menuIsOpen || inputValue !== prevState.inputValue) {

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.3";
+const packageVersion = "10.21.0";
 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

@@ -11,15 +11,8 @@ import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const loadingMessage = () => null;
-const observerOptions = {
-  subtree: true,
-  attributes: true,
-  attributeFilter: ['class']
-};
 const classNamePrefix = 'fabric-user-picker';
-const optionFocusedClass = `${classNamePrefix}__option--is-focused`;
 export class BaseUserPickerWithoutAnalytics extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     const derivedState = {};
@@ -295,22 +288,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       this.journeyId = this.getSessionId();
       this.fireEvent(focusEvent);
     });
-    _defineProperty(this, "focusedOptionObserverCallback", mutationList => {
-      for (const mutation of mutationList) {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          const target = mutation.target;
-          if (target.classList.contains(optionFocusedClass)) {
-            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;
-          }
-        }
-      }
-    });
-    // 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) {
         // Escape
@@ -433,33 +410,6 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
     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$;
-        // 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);
-      }
-
-      // 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();
-      }
-    }
 
     // Load options when user picker opens or when input value changes
     if (menuIsOpen && !prevState.menuIsOpen || inputValue !== prevState.inputValue) {

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.3";
+var packageVersion = "10.21.0";
 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

@@ -24,17 +24,10 @@ import { batchByKey } from './batch';
 import { messages } from './i18n';
 import { callCallback, extractOptionValue, getOptions, isIterable, isPopupUserPickerByComponent, isDefaultValuePopulated, isSingleValue, optionToSelectableOptions } from './utils';
 import { userPickerOptionsShownUfoExperience } from '../util/ufoExperiences';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var loadingMessage = function loadingMessage() {
   return null;
 };
-var observerOptions = {
-  subtree: true,
-  attributes: true,
-  attributeFilter: ['class']
-};
 var classNamePrefix = 'fabric-user-picker';
-var optionFocusedClass = "".concat(classNamePrefix, "__option--is-focused");
 export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(BaseUserPickerWithoutAnalytics, _React$Component);
   var _super = _createSuper(BaseUserPickerWithoutAnalytics);
@@ -299,31 +292,6 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       _this.journeyId = _this.getSessionId();
       _this.fireEvent(focusEvent);
     });
-    _defineProperty(_assertThisInitialized(_this), "focusedOptionObserverCallback", function (mutationList) {
-      var _iterator2 = _createForOfIteratorHelper(mutationList),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var mutation = _step2.value;
-          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-            var target = mutation.target;
-            if (target.classList.contains(optionFocusedClass)) {
-              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;
-            }
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    });
-    // 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) {
         // Escape
@@ -456,33 +424,6 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       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$;
-          // 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);
-        }
-
-        // 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();
-        }
-      }
 
       // Load options when user picker opens or when input value changes
       if (menuIsOpen && !prevState.menuIsOpen || inputValue !== prevState.inputValue) {

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

@@ -55,8 +55,6 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private fireEvent;
     private startSession;
     componentDidMount(): void;
-    private focusedOptionObserverCallback;
-    private focusedOptionObserver;
     componentDidUpdate(_: UserPickerProps, prevState: UserPickerState): void;
     private handleKeyDown;
     handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { isValidEmail } from './components/emailValidation';
-export type { EmailValidationResponse, EmailValidator, } from './components/emailValidation';
+export type { EmailValidationResponse, EmailValidator } from './components/emailValidation';
 export { UserPicker as default } from './components/UserPicker';
 export { PopupUserPicker } from './components/PopupUserPicker';
 export { isEmail, isExternalUser, isTeam, isUser } from './components/utils';

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

@@ -55,8 +55,6 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private fireEvent;
     private startSession;
     componentDidMount(): void;
-    private focusedOptionObserverCallback;
-    private focusedOptionObserver;
     componentDidUpdate(_: UserPickerProps, prevState: UserPickerState): void;
     private handleKeyDown;
     handleClearIndicatorHover: (hoveringClearIndicator: boolean) => void;

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

@@ -1,5 +1,5 @@
 export { isValidEmail } from './components/emailValidation';
-export type { EmailValidationResponse, EmailValidator, } from './components/emailValidation';
+export type { EmailValidationResponse, EmailValidator } from './components/emailValidation';
 export { UserPicker as default } from './components/UserPicker';
 export { PopupUserPicker } from './components/PopupUserPicker';
 export { isEmail, isExternalUser, isTeam, isUser } from './components/utils';

package/docs/0-intro.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  code,
-  Example,
-  md,
-  Props,
-  AtlassianInternalWarning,
-} from '@atlaskit/docs';
+import { code, Example, md, Props, AtlassianInternalWarning } from '@atlaskit/docs';
 
 export default md`
   ${(<AtlassianInternalWarning />)}
@@ -26,39 +20,39 @@ export default md`
   ${code`import UserPicker from '@atlaskit/user-picker';`}
 
   ${(
-    <Example
-      packageName="@atlaskit/user-picker"
-      Component={require('../examples/00-single').default}
-      title="Single User Picker"
-      source={require('!!raw-loader!../examples/00-single')}
-    />
-  )}
+		<Example
+			packageName="@atlaskit/user-picker"
+			Component={require('../examples/00-single').default}
+			title="Single User Picker"
+			source={require('!!raw-loader!../examples/00-single')}
+		/>
+	)}
 
   ${(
-    <Example
-      packageName="@atlaskit/user-picker"
-      Component={require('../examples/01-multi').default}
-      title="Multi User Picker"
-      source={require('!!raw-loader!../examples/01-multi')}
-    />
-  )}
+		<Example
+			packageName="@atlaskit/user-picker"
+			Component={require('../examples/01-multi').default}
+			title="Multi User Picker"
+			source={require('!!raw-loader!../examples/01-multi')}
+		/>
+	)}
 
   ${(
-    <Example
-      packageName="@atlaskit/user-picker"
-      Component={require('../examples/11-watchers').default}
-      title="Watchers"
-      source={require('!!raw-loader!../examples/11-watchers')}
-    />
-  )}
+		<Example
+			packageName="@atlaskit/user-picker"
+			Component={require('../examples/11-watchers').default}
+			title="Watchers"
+			source={require('!!raw-loader!../examples/11-watchers')}
+		/>
+	)}
 
   ${(
-    <Props
-      heading="User Picker Props"
-      props={require('!!extract-react-types-loader!../src/components/UserPicker')}
-      overrides={{
-        createAnalyticsEvent: () => null,
-      }}
-    />
-  )}
+		<Props
+			heading="User Picker Props"
+			props={require('!!extract-react-types-loader!../src/components/UserPicker')}
+			overrides={{
+				createAnalyticsEvent: () => null,
+			}}
+		/>
+	)}
 `;

package/docs/1-smart-user-picker.tsx

@@ -4,16 +4,16 @@ import SectionMessage from '@atlaskit/section-message';
 
 export default md`
   ${(
-    <SectionMessage
-      appearance="warning"
-      title="Note: @atlaskit/user-picker/smart-user-picker is deprecated."
-    >
-      SmartUserPicker has moved packages! Please use{' '}
-      <a href="https://statlas.prod.atl-paas.net/atlassian-frontend/master#packages/smart-experiences/smart-user-picker">
-        @atlaskit/smart-user-picker
-      </a>{' '}
-      instead. Alternatively, @atlaskit/smart-hooks will be ready by end of
-      FY22Q4. Contact #help-smart-experiences for further details.
-    </SectionMessage>
-  )}
+		<SectionMessage
+			appearance="warning"
+			title="Note: @atlaskit/user-picker/smart-user-picker is deprecated."
+		>
+			SmartUserPicker has moved packages! Please use{' '}
+			<a href="https://statlas.prod.atl-paas.net/atlassian-frontend/master#packages/smart-experiences/smart-user-picker">
+				@atlaskit/smart-user-picker
+			</a>{' '}
+			instead. Alternatively, @atlaskit/smart-hooks will be ready by end of FY22Q4. Contact
+			#help-smart-experiences for further details.
+		</SectionMessage>
+	)}
 `;

package/docs/2-popup-user-picker.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  code,
-  Example,
-  md,
-  Props,
-  AtlassianInternalWarning,
-} from '@atlaskit/docs';
+import { code, Example, md, Props, AtlassianInternalWarning } from '@atlaskit/docs';
 
 export default md`
   ${(<AtlassianInternalWarning />)}
@@ -19,21 +13,21 @@ export default md`
   ${code`import { PopupUserPicker } from '@atlaskit/user-picker';`}
 
   ${(
-    <Example
-      packageName="@atlaskit/user-picker"
-      Component={require('../examples/19-popup-config').default}
-      title="Modal"
-      source={require('!!raw-loader!../examples/19-popup-config')}
-    />
-  )}
+		<Example
+			packageName="@atlaskit/user-picker"
+			Component={require('../examples/19-popup-config').default}
+			title="Modal"
+			source={require('!!raw-loader!../examples/19-popup-config')}
+		/>
+	)}
 
   ${(
-    <Props
-      heading="Popup User Picker Props"
-      props={require('!!extract-react-types-loader!../src/components/PopupUserPicker')}
-      overrides={{
-        createAnalyticsEvent: () => null,
-      }}
-    />
-  )}
+		<Props
+			heading="Popup User Picker Props"
+			props={require('!!extract-react-types-loader!../src/components/PopupUserPicker')}
+			overrides={{
+				createAnalyticsEvent: () => null,
+			}}
+		/>
+	)}
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.20.3",
+  "version": "10.21.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,15 +45,14 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/avatar": "^21.9.0",
     "@atlaskit/icon": "^22.3.0",
-    "@atlaskit/logo": "^13.17.0",
+    "@atlaskit/logo": "^14.0.0",
     "@atlaskit/lozenge": "^11.7.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^6.0.0",
-    "@atlaskit/primitives": "^6.3.0",
-    "@atlaskit/select": "^17.9.0",
+    "@atlaskit/primitives": "^7.0.0",
+    "@atlaskit/select": "^17.10.0",
     "@atlaskit/spinner": "^16.1.0",
     "@atlaskit/teams-avatar": "^1.0.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/tooltip": "^18.4.0",
     "@atlaskit/ufo": "^0.2.0",
@@ -69,14 +68,13 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
-    "@atlaskit/analytics-viewer": "^0.5.0",
+    "@atlaskit/analytics-viewer": "^0.6.0",
     "@atlaskit/elements-test-helpers": "^0.7.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",
     "@testing-library/dom": "^8.17.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
@@ -98,11 +96,5 @@
   "keywords": [
     "fabric",
     "ui"
-  ],
-  "platform-feature-flags": {
-    "platform.design-system-team.select-aria-activedescendant_psxzq": {
-      "type": "boolean"
-    }
-  },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  ]
 }