@atlaskit/user-picker 10.13.3 → 10.13.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/user-picker
 
+## 10.13.4
+
+### Patch Changes
+
+- [#64330](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64330) [`797c300a51d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/797c300a51d4) - Minor internal refactor to reduce bundle size
+
 ## 10.13.3
 
 ### 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.3";
+var packageVersion = "10.13.4";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/MultiValueContainer.js

@@ -16,18 +16,18 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _select = require("@atlaskit/select");
 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 _ValueContainerWrapper = _interopRequireDefault(require("./ValueContainerWrapper"));
 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; } } /** @jsx jsx */
+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; } }
 var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(MultiValueContainer, _React$PureComponent);
   var _super = _createSuper(MultiValueContainer);
@@ -58,7 +58,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
           placeholder: placeholder
         }) : child;
       });
-      return (0, _react2.jsx)(_react.Fragment, null, children);
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderChildren", function () {
       var _this$props$selectPro = _this.props.selectProps,
@@ -69,7 +69,7 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
         return _this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addMore, function (addMore) {
           var _join, _addMoreMessages;
           var addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {
@@ -82,15 +82,6 @@ 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
@@ -132,7 +123,10 @@ var MultiValueContainer = exports.MultiValueContainer = /*#__PURE__*/function (_
       var props = _objectSpread(_objectSpread({}, valueContainerProps), {}, {
         innerProps: this.valueContainerInnerProps
       });
-      return (0, _react2.jsx)(this.Wrapper, null, (0, _react2.jsx)(_select.components.ValueContainer, props, this.renderChildren()));
+      return /*#__PURE__*/_react.default.createElement(_ValueContainerWrapper.default, {
+        isEnabled: this.onValueContainerClick,
+        onMouseDown: this.onValueContainerClick
+      }, /*#__PURE__*/_react.default.createElement(_select.components.ValueContainer, props, this.renderChildren()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/cjs/components/SingleValueContainer.js

@@ -13,15 +13,16 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _select = require("@atlaskit/select");
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _SizeableAvatar = require("./SizeableAvatar");
 var _styles = require("./styles");
+var _ValueContainerWrapper = _interopRequireDefault(require("./ValueContainerWrapper"));
 var _excluded = ["children"];
 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; } } /** @jsx jsx */
-var placeholderIconContainer = (0, _react2.css)({
+var placeholderIconContainer = (0, _react.css)({
   paddingLeft: "".concat(_styles.BORDER_PADDING, "px"),
   lineHeight: 0,
   gridArea: '1/1/2/2'
@@ -48,7 +49,7 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
         inputValue = _this$props$selectPro.inputValue,
         value = _this$props$selectPro.value;
       if (isFocused || !hasValue) {
-        return (0, _react2.jsx)(_SizeableAvatar.SizeableAvatar, {
+        return (0, _react.jsx)(_SizeableAvatar.SizeableAvatar, {
           appearance: appearance,
           src: showUserAvatar(inputValue, value) ? value.data.avatarUrl : undefined
         });
@@ -58,8 +59,8 @@ var SingleValueContainer = exports.SingleValueContainer = /*#__PURE__*/function
     (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)({
+      return _this.onValueContainerClick ? (0, _react.jsx)("div", {
+        css: (0, _react.css)({
           flexGrow: 1
         }),
         onMouseDown: _this.onValueContainerClick
@@ -73,10 +74,13 @@ 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)(this.Wrapper, null, (0, _react2.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _react2.jsx)("div", {
+      return (0, _react.jsx)(_ValueContainerWrapper.default, {
+        isEnabled: this.onValueContainerClick,
+        onMouseDown: this.onValueContainerClick
+      }, (0, _react.jsx)(_select.components.ValueContainer, valueContainerProps, (0, _react.jsx)("div", {
         css: placeholderIconContainer
       }, this.renderAvatar()), children));
     }
   }]);
   return SingleValueContainer;
-}(_react.default.Component);
+}(_react2.default.Component);

package/dist/cjs/components/ValueContainerWrapper.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+/** @jsx jsx */
+
+/**
+ * Conditional wrapper for the ValueContainer in Select. Provides a workaround
+ * for issues using react-select on react-beautiful-dnd Draggable elements.
+ * @returns
+ */
+var ValueContainerWrapper = function ValueContainerWrapper(_ref) {
+  var children = _ref.children,
+    isEnabled = _ref.isEnabled,
+    onMouseDown = _ref.onMouseDown;
+  return isEnabled ? (0, _react.jsx)("div", {
+    css: (0, _react.css)({
+      flexGrow: 1
+    }),
+    onMouseDown: onMouseDown
+  }, children) : children;
+};
+var _default = exports.default = ValueContainerWrapper;

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.3";
+const packageVersion = "10.13.4";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/MultiValueContainer.js

@@ -1,12 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
 import { components } from '@atlaskit/select';
 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';
 import { isChildInput } from './utils';
+import ValueContainerWrapper from './ValueContainerWrapper';
 export class MultiValueContainer extends React.PureComponent {
   static getDerivedStateFromProps(nextProps, prevState) {
     return {
@@ -45,7 +44,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 jsx(Fragment, null, children);
+      return /*#__PURE__*/React.createElement(Fragment, null, children);
     });
     _defineProperty(this, "renderChildren", () => {
       const {
@@ -59,7 +58,7 @@ export class MultiValueContainer extends React.PureComponent {
         return this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return jsx(FormattedMessage, messages.addMore, addMore => {
+        return /*#__PURE__*/React.createElement(FormattedMessage, messages.addMore, addMore => {
           var _join, _addMoreMessages;
           let addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {
@@ -72,16 +71,6 @@ 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
@@ -121,6 +110,9 @@ export class MultiValueContainer extends React.PureComponent {
       ...valueContainerProps,
       innerProps: this.valueContainerInnerProps
     };
-    return jsx(this.Wrapper, null, jsx(components.ValueContainer, props, this.renderChildren()));
+    return /*#__PURE__*/React.createElement(ValueContainerWrapper, {
+      isEnabled: this.onValueContainerClick,
+      onMouseDown: this.onValueContainerClick
+    }, /*#__PURE__*/React.createElement(components.ValueContainer, props, this.renderChildren()));
   }
 }

package/dist/es2019/components/SingleValueContainer.js

@@ -1,10 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
-import { css, jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';
+import { css, jsx } from '@emotion/react';
+import React from 'react';
 import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
+import ValueContainerWrapper from './ValueContainerWrapper';
 const placeholderIconContainer = css({
   paddingLeft: `${BORDER_PADDING}px`,
   lineHeight: 0,
@@ -49,7 +50,10 @@ export class SingleValueContainer extends React.Component {
       children,
       ...valueContainerProps
     } = this.props;
-    return jsx(this.Wrapper, null, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
+    return jsx(ValueContainerWrapper, {
+      isEnabled: this.onValueContainerClick,
+      onMouseDown: this.onValueContainerClick
+    }, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
       css: placeholderIconContainer
     }, this.renderAvatar()), children));
   }

package/dist/es2019/components/ValueContainerWrapper.js

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+
+/**
+ * Conditional wrapper for the ValueContainer in Select. Provides a workaround
+ * for issues using react-select on react-beautiful-dnd Draggable elements.
+ * @returns
+ */
+const ValueContainerWrapper = ({
+  children,
+  isEnabled,
+  onMouseDown
+}) => {
+  return isEnabled ? jsx("div", {
+    css: css({
+      flexGrow: 1
+    }),
+    onMouseDown: onMouseDown
+  }, children) : children;
+};
+export default ValueContainerWrapper;

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.3";
+var packageVersion = "10.13.4";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/MultiValueContainer.js

@@ -11,14 +11,13 @@ 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, { Fragment } from 'react';
-import { css, jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from './i18n';
 import { isChildInput } from './utils';
+import ValueContainerWrapper from './ValueContainerWrapper';
 export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(MultiValueContainer, _React$PureComponent);
   var _super = _createSuper(MultiValueContainer);
@@ -49,7 +48,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
           placeholder: placeholder
         }) : child;
       });
-      return jsx(Fragment, null, children);
+      return /*#__PURE__*/React.createElement(Fragment, null, children);
     });
     _defineProperty(_assertThisInitialized(_this), "renderChildren", function () {
       var _this$props$selectPro = _this.props.selectProps,
@@ -60,7 +59,7 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
         return _this.props.children;
       }
       if (addMoreMessage === undefined) {
-        return jsx(FormattedMessage, messages.addMore, function (addMore) {
+        return /*#__PURE__*/React.createElement(FormattedMessage, messages.addMore, function (addMore) {
           var _join, _addMoreMessages;
           var addMoreMessages = addMore;
           if (addMore && typeof addMore === 'string') {
@@ -73,15 +72,6 @@ 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
@@ -123,7 +113,10 @@ export var MultiValueContainer = /*#__PURE__*/function (_React$PureComponent) {
       var props = _objectSpread(_objectSpread({}, valueContainerProps), {}, {
         innerProps: this.valueContainerInnerProps
       });
-      return jsx(this.Wrapper, null, jsx(components.ValueContainer, props, this.renderChildren()));
+      return /*#__PURE__*/React.createElement(ValueContainerWrapper, {
+        isEnabled: this.onValueContainerClick,
+        onMouseDown: this.onValueContainerClick
+      }, /*#__PURE__*/React.createElement(components.ValueContainer, props, this.renderChildren()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/esm/components/SingleValueContainer.js

@@ -10,11 +10,12 @@ var _excluded = ["children"];
 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 React from 'react';
-import { css, jsx } from '@emotion/react';
 import { components } from '@atlaskit/select';
+import { css, jsx } from '@emotion/react';
+import React from 'react';
 import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
+import ValueContainerWrapper from './ValueContainerWrapper';
 var placeholderIconContainer = css({
   paddingLeft: "".concat(BORDER_PADDING, "px"),
   lineHeight: 0,
@@ -67,7 +68,10 @@ export var SingleValueContainer = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
         children = _this$props2.children,
         valueContainerProps = _objectWithoutProperties(_this$props2, _excluded);
-      return jsx(this.Wrapper, null, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
+      return jsx(ValueContainerWrapper, {
+        isEnabled: this.onValueContainerClick,
+        onMouseDown: this.onValueContainerClick
+      }, jsx(components.ValueContainer, valueContainerProps, jsx("div", {
         css: placeholderIconContainer
       }, this.renderAvatar()), children));
     }

package/dist/esm/components/ValueContainerWrapper.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+
+/**
+ * Conditional wrapper for the ValueContainer in Select. Provides a workaround
+ * for issues using react-select on react-beautiful-dnd Draggable elements.
+ * @returns
+ */
+var ValueContainerWrapper = function ValueContainerWrapper(_ref) {
+  var children = _ref.children,
+    isEnabled = _ref.isEnabled,
+    onMouseDown = _ref.onMouseDown;
+  return isEnabled ? jsx("div", {
+    css: css({
+      flexGrow: 1
+    }),
+    onMouseDown: onMouseDown
+  }, children) : children;
+};
+export default ValueContainerWrapper;

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

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

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

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

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

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+/**
+ * Conditional wrapper for the ValueContainer in Select. Provides a workaround
+ * for issues using react-select on react-beautiful-dnd Draggable elements.
+ * @returns
+ */
+declare const ValueContainerWrapper: ({ children, isEnabled, onMouseDown, }: {
+    children: React.ReactElement;
+    isEnabled: boolean;
+    onMouseDown: () => void;
+}) => jsx.JSX.Element;
+export default ValueContainerWrapper;

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

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

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

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

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

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+/**
+ * Conditional wrapper for the ValueContainer in Select. Provides a workaround
+ * for issues using react-select on react-beautiful-dnd Draggable elements.
+ * @returns
+ */
+declare const ValueContainerWrapper: ({ children, isEnabled, onMouseDown, }: {
+    children: React.ReactElement;
+    isEnabled: boolean;
+    onMouseDown: () => void;
+}) => jsx.JSX.Element;
+export default ValueContainerWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.13.3",
+  "version": "10.13.4",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,8 +44,8 @@
     "@atlaskit/select": "^17.0.3",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
-    "@atlaskit/tooltip": "^18.0.0",
+    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -62,7 +62,7 @@
     "@atlaskit/analytics-viewer": "^0.5.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/heading": "^1.4.0",
-    "@atlaskit/primitives": "^1.15.0",
+    "@atlaskit/primitives": "^1.16.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",