@atlaskit/user-picker 10.13.2 → 10.13.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 10.13.3
+
+### Patch Changes
+
+- [#61371](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61371) [`eae2cd4f6dc2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eae2cd4f6dc2) - Adds new prop, UNSAFE_hasDraggableParentComponent, as a workaround when using user pickers inside of a react-beautiful-dnd Draggable.
+
 ## 10.13.2
 
 ### 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.13.2";
+var packageVersion = "10.13.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

@@ -262,6 +262,7 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       _this.abortOptionsShownUfoExperience();
       _this.setState({
         menuIsOpen: false,
+        initialFocusHandled: false,
         options: []
       });
     });
@@ -387,6 +388,27 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getAppearance", function () {
       return _this.props.appearance ? _this.props.appearance : 'normal';
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClickDraggableParentComponent", function () {
+      if (_this.state.initialFocusHandled) {
+        // As <Select /> is already focused, calling this.selectRef.current.focus() again no longer triggers its own handlers (i.e. onMenuOpen, onMenuClose)
+        // We have to manually handle the open and close states of the dropdown menu based on a user's click from this point onwards to prevent the bug
+        if (_this.state.menuIsOpen) {
+          _this.handleClose();
+        } else {
+          _this.handleOpen();
+        }
+      } else if (!_this.state.menuIsOpen) {
+        // Trigger focus state when ValueContainer is clicked for the first time
+        // The focused state will then invoke <Select /> instance's own handlers (e.g. onMenuOpen, onMenuClose)
+        // to manage the state of the dropdown menu
+        _this.focus();
+        _this.setState(function () {
+          return {
+            initialFocusHandled: true
+          };
+        });
+      }
+    });
     _this.state = {
       options: [],
       isDefaultSet: false,
@@ -396,7 +418,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
       menuIsOpen: !!_this.props.open,
       inputValue: props.search || '',
       resolving: false,
-      showError: false
+      showError: false,
+      initialFocusHandled: false
     };
     _this.optionsShownUfoExperienceInstance = _ufoExperiences.userPickerOptionsShownUfoExperience.getInstance((0, _uuid.v4)());
     return _this;
@@ -505,7 +528,8 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         ariaLabel = _this$props4.ariaLabel,
         name = _this$props4.name,
         header = _this$props4.header,
-        required = _this$props4.required;
+        required = _this$props4.required,
+        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent;
       var _this$state3 = this.state,
         count = _this$state3.count,
         hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -573,7 +597,9 @@ var BaseUserPickerWithoutAnalytics = exports.BaseUserPickerWithoutAnalytics = /*
         maxPickerHeight: maxPickerHeight,
         textFieldBackgroundColor: textFieldBackgroundColor,
         header: header
-      }, this.ariaProps, pickerProps));
+      }, this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
+        onValueContainerClick: this.handleClickDraggableParentComponent
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/cjs/components/MultiValueContainer.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,16 +15,19 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _select = require("@atlaskit/select");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _i18n = require("./i18n");
 var _utils = require("./utils");
 var _excluded = ["children", "innerProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(MultiValueContainer, _React$PureComponent);
   var _super = _createSuper(MultiValueContainer);
@@ -54,7 +58,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
           placeholder: placeholder
         }) : child;
       });
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+      return (0, _react2.jsx)(_react.Fragment, null, children);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderChildren", function () {
       var _this$props$selectPro = _this.props.selectProps,
@@ -65,7 +69,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
         return _this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
+        return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
           var _join, _addMoreMessages;
           var addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {
@@ -77,6 +81,16 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       }
       return _this.addPlaceholder(addMoreMessage);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "Wrapper", function (_ref) {
+      var children = _ref.children;
+      return _this.onValueContainerClick ? (0, _react2.jsx)("div", {
+        css: (0, _react2.css)({
+          flexGrow: 1
+        }),
+        onMouseDown: _this.onValueContainerClick
+      }, children) : children;
+    });
     _this.state = {
       valueSize: 0,
       previousValueSize: 0
@@ -118,7 +132,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       var props = _objectSpread(_objectSpread({}, valueContainerProps), {}, {
         innerProps: this.valueContainerInnerProps
       });
-      return /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, props, this.renderChildren());
+      return (0, _react2.jsx)(this.Wrapper, null, (0, _react2.jsx)(_select.components.ValueContainer, props, this.renderChildren()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/cjs/components/SingleValueContainer.js

@@ -55,6 +55,16 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
       }
       return null;
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "Wrapper", function (_ref) {
+      var children = _ref.children;
+      return _this.onValueContainerClick ? (0, _react2.jsx)("div", {
+        css: (0, _react2.css)({
+          flexGrow: 1
+        }),
+        onMouseDown: _this.onValueContainerClick
+      }, children) : children;
+    });
     return _this;
   }
   (0, _createClass2.default)(SingleValueContainer, [{
@@ -63,9 +73,9 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
       var _this$props2 = this.props,
         children = _this$props2.children,
         valueContainerProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      return (0, _react2.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _react2.jsx)("div", {
+      return (0, _react2.jsx)(this.Wrapper, null, (0, _react2.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _react2.jsx)("div", {
         css: placeholderIconContainer
-      }, this.renderAvatar()), children);
+      }, this.renderAvatar()), children));
     }
   }]);
   return SingleValueContainer;

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.13.2";
+const packageVersion = "10.13.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

@@ -251,6 +251,7 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       this.abortOptionsShownUfoExperience();
       this.setState({
         menuIsOpen: false,
+        initialFocusHandled: false,
         options: []
       });
     });
@@ -364,6 +365,25 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       return options;
     });
     _defineProperty(this, "getAppearance", () => this.props.appearance ? this.props.appearance : 'normal');
+    _defineProperty(this, "handleClickDraggableParentComponent", () => {
+      if (this.state.initialFocusHandled) {
+        // As <Select /> is already focused, calling this.selectRef.current.focus() again no longer triggers its own handlers (i.e. onMenuOpen, onMenuClose)
+        // We have to manually handle the open and close states of the dropdown menu based on a user's click from this point onwards to prevent the bug
+        if (this.state.menuIsOpen) {
+          this.handleClose();
+        } else {
+          this.handleOpen();
+        }
+      } else if (!this.state.menuIsOpen) {
+        // Trigger focus state when ValueContainer is clicked for the first time
+        // The focused state will then invoke <Select /> instance's own handlers (e.g. onMenuOpen, onMenuClose)
+        // to manage the state of the dropdown menu
+        this.focus();
+        this.setState(() => ({
+          initialFocusHandled: true
+        }));
+      }
+    });
     this.state = {
       options: [],
       isDefaultSet: false,
@@ -373,7 +393,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       menuIsOpen: !!this.props.open,
       inputValue: props.search || '',
       resolving: false,
-      showError: false
+      showError: false,
+      initialFocusHandled: false
     };
     this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
   }
@@ -476,7 +497,8 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       ariaLabel,
       name,
       header,
-      required
+      required,
+      UNSAFE_hasDraggableParentComponent
     } = this.props;
     const {
       count,
@@ -544,7 +566,9 @@ export class BaseUserPickerWithoutAnalytics extends React.Component {
       maxPickerHeight: maxPickerHeight,
       textFieldBackgroundColor: textFieldBackgroundColor,
       header: header
-    }, this.ariaProps, pickerProps));
+    }, this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
+      onValueContainerClick: this.handleClickDraggableParentComponent
+    }));
   }
 }
 _defineProperty(BaseUserPickerWithoutAnalytics, "defaultProps", {

package/dist/es2019/components/MultiValueContainer.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import { components } from '@atlaskit/select';
-import React from 'react';
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
@@ -43,7 +45,7 @@ export class MultiValueContainer extends React.PureComponent {
       const children = React.Children.map(this.props.children, child => isChildInput(child) && this.showPlaceholder() ? /*#__PURE__*/React.cloneElement(child, {
         placeholder
       }) : child);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+      return jsx(Fragment, null, children);
     });
     _defineProperty(this, "renderChildren", () => {
       const {
@@ -57,7 +59,7 @@ export class MultiValueContainer extends React.PureComponent {
         return this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.addMore, addMore => {
+        return jsx(FormattedMessage, messages.addMore, addMore => {
           var _join, _addMoreMessages;
           let addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {
@@ -69,6 +71,17 @@ export class MultiValueContainer extends React.PureComponent {
       }
       return this.addPlaceholder(addMoreMessage);
     });
+    _defineProperty(this, "onValueContainerClick", this.props.selectProps.onValueContainerClick);
+    _defineProperty(this, "Wrapper", ({
+      children
+    }) => {
+      return this.onValueContainerClick ? jsx("div", {
+        css: css({
+          flexGrow: 1
+        }),
+        onMouseDown: this.onValueContainerClick
+      }, children) : children;
+    });
     this.state = {
       valueSize: 0,
       previousValueSize: 0
@@ -108,6 +121,6 @@ export class MultiValueContainer extends React.PureComponent {
       ...valueContainerProps,
       innerProps: this.valueContainerInnerProps
     };
-    return /*#__PURE__*/React.createElement(components.ValueContainer, props, this.renderChildren());
+    return jsx(this.Wrapper, null, jsx(components.ValueContainer, props, this.renderChildren()));
   }
 }

package/dist/es2019/components/SingleValueContainer.js

@@ -32,14 +32,25 @@ export class SingleValueContainer extends React.Component {
       }
       return null;
     });
+    _defineProperty(this, "onValueContainerClick", this.props.selectProps.onValueContainerClick);
+    _defineProperty(this, "Wrapper", ({
+      children
+    }) => {
+      return this.onValueContainerClick ? jsx("div", {
+        css: css({
+          flexGrow: 1
+        }),
+        onMouseDown: this.onValueContainerClick
+      }, children) : children;
+    });
   }
   render() {
     const {
       children,
       ...valueContainerProps
     } = this.props;
-    return jsx(components.ValueContainer, valueContainerProps, jsx("div", {
+    return jsx(this.Wrapper, null, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
       css: placeholderIconContainer
-    }, this.renderAvatar()), children);
+    }, this.renderAvatar()), children));
   }
 }

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.13.2";
+var packageVersion = "10.13.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

@@ -255,6 +255,7 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       _this.abortOptionsShownUfoExperience();
       _this.setState({
         menuIsOpen: false,
+        initialFocusHandled: false,
         options: []
       });
     });
@@ -380,6 +381,27 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
     _defineProperty(_assertThisInitialized(_this), "getAppearance", function () {
       return _this.props.appearance ? _this.props.appearance : 'normal';
     });
+    _defineProperty(_assertThisInitialized(_this), "handleClickDraggableParentComponent", function () {
+      if (_this.state.initialFocusHandled) {
+        // As <Select /> is already focused, calling this.selectRef.current.focus() again no longer triggers its own handlers (i.e. onMenuOpen, onMenuClose)
+        // We have to manually handle the open and close states of the dropdown menu based on a user's click from this point onwards to prevent the bug
+        if (_this.state.menuIsOpen) {
+          _this.handleClose();
+        } else {
+          _this.handleOpen();
+        }
+      } else if (!_this.state.menuIsOpen) {
+        // Trigger focus state when ValueContainer is clicked for the first time
+        // The focused state will then invoke <Select /> instance's own handlers (e.g. onMenuOpen, onMenuClose)
+        // to manage the state of the dropdown menu
+        _this.focus();
+        _this.setState(function () {
+          return {
+            initialFocusHandled: true
+          };
+        });
+      }
+    });
     _this.state = {
       options: [],
       isDefaultSet: false,
@@ -389,7 +411,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
       menuIsOpen: !!_this.props.open,
       inputValue: props.search || '',
       resolving: false,
-      showError: false
+      showError: false,
+      initialFocusHandled: false
     };
     _this.optionsShownUfoExperienceInstance = userPickerOptionsShownUfoExperience.getInstance(uuidv4());
     return _this;
@@ -498,7 +521,8 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         ariaLabel = _this$props4.ariaLabel,
         name = _this$props4.name,
         header = _this$props4.header,
-        required = _this$props4.required;
+        required = _this$props4.required,
+        UNSAFE_hasDraggableParentComponent = _this$props4.UNSAFE_hasDraggableParentComponent;
       var _this$state3 = this.state,
         count = _this$state3.count,
         hoveringClearIndicator = _this$state3.hoveringClearIndicator,
@@ -566,7 +590,9 @@ export var BaseUserPickerWithoutAnalytics = /*#__PURE__*/function (_React$Compon
         maxPickerHeight: maxPickerHeight,
         textFieldBackgroundColor: textFieldBackgroundColor,
         header: header
-      }, this.ariaProps, pickerProps));
+      }, this.ariaProps, pickerProps, UNSAFE_hasDraggableParentComponent && {
+        onValueContainerClick: this.handleClickDraggableParentComponent
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/esm/components/MultiValueContainer.js

@@ -11,8 +11,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
 import { components } from '@atlaskit/select';
-import React from 'react';
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
@@ -47,7 +49,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
           placeholder: placeholder
         }) : child;
       });
-      return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+      return jsx(Fragment, null, children);
     });
     _defineProperty(_assertThisInitialized(_this), "renderChildren", function () {
       var _this$props$selectPro = _this.props.selectProps,
@@ -58,7 +60,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
         return _this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.addMore, function (addMore) {
+        return jsx(FormattedMessage, messages.addMore, function (addMore) {
           var _join, _addMoreMessages;
           var addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {
@@ -70,6 +72,16 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       }
       return _this.addPlaceholder(addMoreMessage);
     });
+    _defineProperty(_assertThisInitialized(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
+    _defineProperty(_assertThisInitialized(_this), "Wrapper", function (_ref) {
+      var children = _ref.children;
+      return _this.onValueContainerClick ? jsx("div", {
+        css: css({
+          flexGrow: 1
+        }),
+        onMouseDown: _this.onValueContainerClick
+      }, children) : children;
+    });
     _this.state = {
       valueSize: 0,
       previousValueSize: 0
@@ -111,7 +123,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       var props = _objectSpread(_objectSpread({}, valueContainerProps), {}, {
         innerProps: this.valueContainerInnerProps
       });
-      return /*#__PURE__*/React.createElement(components.ValueContainer, props, this.renderChildren());
+      return jsx(this.Wrapper, null, jsx(components.ValueContainer, props, this.renderChildren()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/esm/components/SingleValueContainer.js

@@ -49,6 +49,16 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       }
       return null;
     });
+    _defineProperty(_assertThisInitialized(_this), "onValueContainerClick", _this.props.selectProps.onValueContainerClick);
+    _defineProperty(_assertThisInitialized(_this), "Wrapper", function (_ref) {
+      var children = _ref.children;
+      return _this.onValueContainerClick ? jsx("div", {
+        css: css({
+          flexGrow: 1
+        }),
+        onMouseDown: _this.onValueContainerClick
+      }, children) : children;
+    });
     return _this;
   }
   _createClass(SingleValueContainer, [{
@@ -57,9 +67,9 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
         children = _this$props2.children,
         valueContainerProps = _objectWithoutProperties(_this$props2, _excluded);
-      return jsx(components.ValueContainer, valueContainerProps, jsx("div", {
+      return jsx(this.Wrapper, null, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
         css: placeholderIconContainer
-      }, this.renderAvatar()), children);
+      }, this.renderAvatar()), children));
     }
   }]);
   return SingleValueContainer;

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

@@ -7,6 +7,12 @@ export type BaseUserPickerProps = UserPickerProps & {
     components: any;
     width: string | number;
     name?: string;
+    /**
+     * @deprecated This is a temporary prop to enable user-pickers to work in Draggable elements in react-beautiful-dnd.
+     * See https://product-fabric.atlassian.net/browse/DSP-15701 for more details.
+     * It may be removed in a future minor or patch when a longer-term workaround is found.
+     */
+    UNSAFE_hasDraggableParentComponent?: boolean;
 };
 export declare class BaseUserPickerWithoutAnalytics extends React.Component<BaseUserPickerProps, UserPickerState> {
     static defaultProps: {
@@ -55,9 +61,10 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getOptions;
     private getAppearance;
     get ariaProps(): {};
+    private handleClickDraggableParentComponent;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

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

@@ -1,5 +1,7 @@
+/** @jsx jsx */
 import { MultiValueProps } from '@atlaskit/select';
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { User, Option } from '../types';
 export type State = {
     valueSize: number;
@@ -25,6 +27,10 @@ export declare class MultiValueContainer extends React.PureComponent<Props, Stat
     private showPlaceholder;
     private addPlaceholder;
     private renderChildren;
-    render(): JSX.Element;
+    onValueContainerClick: any;
+    Wrapper: ({ children }: {
+        children: React.ReactElement;
+    }) => jsx.JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export {};

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

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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

@@ -5,5 +5,9 @@ import { ValueContainerProps } from '@atlaskit/select';
 import { User, Option } from '../types';
 export declare class SingleValueContainer extends React.Component<ValueContainerProps<Option<User>>> {
     private renderAvatar;
+    onValueContainerClick: any;
+    Wrapper: ({ children }: {
+        children: React.ReactElement;
+    }) => jsx.JSX.Element;
     render(): jsx.JSX.Element;
 }

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

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

package/dist/types/types.d.ts

@@ -156,7 +156,14 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     name?: string;
     /** Header to be displayed in MenuList */
     header?: React.ReactNode;
+    /** Accessibility: A field to dictate if this is a mandatory field in the form. */
     required?: boolean;
+    /**
+     * Enables workaround for when <Select /> is nested inside <Draggable /> from react-beautiful-dnd
+     * This relationship prevents the dropdown menu from opening because of bugs in the default focus state and clicking in a particular area of <Select />
+     * Context: https://hello.atlassian.net/wiki/spaces/~989411314/pages/2861097485/Investigation+Notes+for+atlaskit+select+react-beautiful-dnd#Temporary-Solution
+     */
+    UNSAFE_hasDraggableParentComponent?: boolean;
 };
 export type PopupUserPickerProps = UserPickerProps & {
     /** Whether to use the popup version of the single picker */
@@ -204,6 +211,7 @@ export type UserPickerState = {
     inputValue: string;
     resolving: boolean;
     showError: boolean;
+    initialFocusHandled: boolean;
 };
 export interface HighlightRange {
     start: number;

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

@@ -7,6 +7,12 @@ export type BaseUserPickerProps = UserPickerProps & {
     components: any;
     width: string | number;
     name?: string;
+    /**
+     * @deprecated This is a temporary prop to enable user-pickers to work in Draggable elements in react-beautiful-dnd.
+     * See https://product-fabric.atlassian.net/browse/DSP-15701 for more details.
+     * It may be removed in a future minor or patch when a longer-term workaround is found.
+     */
+    UNSAFE_hasDraggableParentComponent?: boolean;
 };
 export declare class BaseUserPickerWithoutAnalytics extends React.Component<BaseUserPickerProps, UserPickerState> {
     static defaultProps: {
@@ -55,9 +61,10 @@ export declare class BaseUserPickerWithoutAnalytics extends React.Component<Base
     private getOptions;
     private getAppearance;
     get ariaProps(): {};
+    private handleClickDraggableParentComponent;
     render(): JSX.Element;
 }
-export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
+export declare const BaseUserPicker: React.ForwardRefExoticComponent<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "components" | "inputId" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "width" | "menuMinWidth" | "maxPickerHeight" | "loadOptions" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "SelectComponent" | "pickerProps"> & Partial<Pick<Omit<BaseUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isClearable" | "isMulti" | "textFieldBackgroundColor" | "loadOptionsErrorMessage" | "subtle" | "noBorder">> & Partial<Pick<{
     isMulti: boolean;
     subtle: boolean;
     noBorder: boolean;

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

@@ -1,5 +1,7 @@
+/** @jsx jsx */
 import { MultiValueProps } from '@atlaskit/select';
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { User, Option } from '../types';
 export type State = {
     valueSize: number;
@@ -25,6 +27,10 @@ export declare class MultiValueContainer extends React.PureComponent<Props, Stat
     private showPlaceholder;
     private addPlaceholder;
     private renderChildren;
-    render(): JSX.Element;
+    onValueContainerClick: any;
+    Wrapper: ({ children }: {
+        children: React.ReactElement;
+    }) => jsx.JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export {};

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

@@ -27,7 +27,7 @@ export declare class PopupUserPickerWithoutAnalytics extends React.Component<Pop
     };
     render(): JSX.Element;
 }
-export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
+export declare const PopupUserPicker: React.ForwardRefExoticComponent<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "target" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent" | "popupTitle"> & Partial<Pick<Omit<PopupUserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "offset" | "isMulti" | "width" | "placement" | "rootBoundary" | "boundariesElement" | "shouldFlip">> & Partial<Pick<{
     boundariesElement: string;
     width: number;
     isMulti: boolean;

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

@@ -5,5 +5,9 @@ import { ValueContainerProps } from '@atlaskit/select';
 import { User, Option } from '../types';
 export declare class SingleValueContainer extends React.Component<ValueContainerProps<Option<User>>> {
     private renderAvatar;
+    onValueContainerClick: any;
+    Wrapper: ({ children }: {
+        children: React.ReactElement;
+    }) => jsx.JSX.Element;
     render(): jsx.JSX.Element;
 }

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

@@ -10,7 +10,7 @@ export declare class UserPickerWithoutAnalytics extends React.Component<UserPick
     componentDidMount(): void;
     render(): JSX.Element;
 }
-export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
+export declare const UserPicker: React.ForwardRefExoticComponent<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "options" | "search" | "placeholder" | "isDisabled" | "autoFocus" | "captureMenuScroll" | "closeMenuOnScroll" | "inputId" | "isClearable" | "isLoading" | "menuPosition" | "menuPortalTarget" | "menuShouldBlockScroll" | "name" | "noOptionsMessage" | "onBlur" | "onChange" | "onFocus" | "onInputChange" | "onKeyDown" | "styles" | "value" | "footer" | "defaultValue" | "fieldId" | "menuMinWidth" | "maxPickerHeight" | "textFieldBackgroundColor" | "loadOptions" | "loadOptionsErrorMessage" | "loadUserSource" | "anchor" | "open" | "onSelection" | "onClear" | "onOpen" | "onClose" | "appearance" | "subtle" | "noBorder" | "addMoreMessage" | "clearValueLabel" | "allowEmail" | "suggestEmailsForDomain" | "emailLabel" | "disableInput" | "isValidEmail" | "maxOptions" | "ariaLabel" | "ariaLabelledBy" | "ariaLive" | "header" | "required" | "UNSAFE_hasDraggableParentComponent"> & Partial<Pick<Omit<UserPickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "isMulti" | "width">> & Partial<Pick<{
     width: number;
     isMulti: boolean;
 }, never>> & React.RefAttributes<any>>;

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

@@ -156,7 +156,14 @@ export type UserPickerProps = WithAnalyticsEventsProps & {
     name?: string;
     /** Header to be displayed in MenuList */
     header?: React.ReactNode;
+    /** Accessibility: A field to dictate if this is a mandatory field in the form. */
     required?: boolean;
+    /**
+     * Enables workaround for when <Select /> is nested inside <Draggable /> from react-beautiful-dnd
+     * This relationship prevents the dropdown menu from opening because of bugs in the default focus state and clicking in a particular area of <Select />
+     * Context: https://hello.atlassian.net/wiki/spaces/~989411314/pages/2861097485/Investigation+Notes+for+atlaskit+select+react-beautiful-dnd#Temporary-Solution
+     */
+    UNSAFE_hasDraggableParentComponent?: boolean;
 };
 export type PopupUserPickerProps = UserPickerProps & {
     /** Whether to use the popup version of the single picker */
@@ -207,6 +214,7 @@ export type UserPickerState = {
     inputValue: string;
     resolving: boolean;
     showError: boolean;
+    initialFocusHandled: boolean;
 };
 export interface HighlightRange {
     start: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.13.2",
+  "version": "10.13.3",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/select": "^17.0.3",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@atlaskit/tooltip": "^18.0.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -61,6 +61,8 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.5.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
+    "@atlaskit/heading": "^1.4.0",
+    "@atlaskit/primitives": "^1.15.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",
@@ -72,6 +74,7 @@
     "@types/uuid": "^3.4.4",
     "enzyme": "^3.10.0",
     "mock-apollo-client": "^0.1.0",
+    "react-beautiful-dnd": "^12.1.1",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-select-event": "^5.5.0",
     "typescript": "~4.9.5"